/* Gala y Alejandro
   Fashion-editorial nocturne. Purple is the world, but with real range:
   near-black ground, violet glow only where motivated, orchid as the one accent.
   Display face is Bodoni Moda (high contrast, print). Utility is a grotesque. */

:root {
  /* Purple is the GROUND, not a garnish. The old palette was three near-blacks
     with one highlighter, which reads as a black site on a phone outdoors. */
  --ink:        #240b52;   /* the ground */
  --ground:     #2f1069;   /* raised panels */
  --ground-2:   #3a1780;   /* higher still */
  --deep:       #16063a;   /* the well the page sinks toward at its edges */
  --plum:       #4c1d95;
  --paper:      #f7f2ff;   /* display text */
  --muted:      #c3aeee;   /* labels, secondary */
  --orchid:     #d9b8ff;   /* the accent, lifted so it reads on violet */
  --orchid-dim: #a86bff;
  --rule:       rgba(217, 184, 255, 0.28);
  --glow:       rgba(168, 107, 255, 0.45);

  --display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;

  --pad: clamp(20px, 4.5vw, 64px);
  --rhythm: clamp(28px, 5vh, 56px);
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; min-height: 100%; background: #16063a; }

body {
  margin: 0;
  min-height: 100dvh;
  /* Saturated violet, sinking to a deeper well down the page, so the ground has
     depth instead of being one flat fill. The solid colour underneath matters:
     a gradient alone left bare canvas wherever the page scrolled past it, which
     showed as black banding. No background-attachment: fixed either, since that
     repaints the whole page on every scroll frame. */
  background-color: var(--deep);
  background-image:
    radial-gradient(120% 70% at 18% 4%, #35127a 0%, transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, #1d0847 55%, var(--deep) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

::selection { background: var(--orchid-dim); color: var(--paper); }

/* Film grain over everything. Fixed, so it reads as emulsion, not as texture
   that scrolls with the content. */
/* Grain is gone. It read as a tutorial effect, and against a saturated ground
   it only muddied the colour. The .grain element is left inert so the pages do
   not need editing; it paints nothing. */
.grain { display: none; }

/* ---------------------------------------------------------------- the mark */
/* One typeface throughout. Left: the G and A of Cormorant Garamond stacked,
   divided by an orchid rule. Right: the names, with the Spanish conjunction set
   in italic. Every glyph comes from the same face, so the monogram and the
   wordmark are one alphabet rather than two.
   Scale the whole lockup with --mark-size. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--mark-size, 30px);
  line-height: 1;
}

.mark-mono {
  display: grid;
  justify-items: center;
  gap: 0.12em;
  font-weight: 500;
  font-size: 1.5em;
  line-height: 0.8;
}
.mark-mono i {                     /* the rule between the two letters */
  display: block;
  width: 1.0em;
  height: 0.05em;
  min-height: 1px;
  background: var(--orchid);
  transition: background 300ms;
}

.mark-sep {                        /* hairline between monogram and names */
  width: 1px;
  align-self: stretch;
  margin: 0.18em 0;
  background: var(--rule);
}

.mark-names {
  display: grid;
  gap: 0.06em;
  justify-items: start;
}
.mark-line1 {
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.mark-line1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--orchid);
  font-size: 1.14em;
  margin-left: 0.14em;
  transition: color 300ms;
}
.mark-line2 {
  font-weight: 500;
  font-size: 0.5em;
  letter-spacing: 0.235em;         /* tracked so it measures "Gala y" */
  text-transform: uppercase;
  white-space: nowrap;
}

.mark:focus-visible { outline: 2px solid var(--orchid); outline-offset: 6px; }
a.mark:hover .mark-line1 em, a.mark:hover .mark-mono i { color: var(--paper); }
a.mark:hover .mark-mono i { background: var(--paper); }

/* ---------------------------------------------------------------- masthead */
.masthead, .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(22px, 3.4vw, 40px) var(--pad) 0;
}
.top .mark { --mark-size: clamp(24px, 3vw, 34px); }
.nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  padding-top: 6px;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.14em;      /* was 0.2em: heavy tracking crushes Spanish accents */
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  min-height: 24px;            /* WCAG 2.5.8 target size */
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 250ms, border-color 250ms;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--orchid); }
.nav a:focus-visible { outline: 2px solid var(--orchid); outline-offset: 4px; }

/* ---------------------------------------------------------------- shared bits */
.eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.hairline { height: 1px; background: var(--rule); border: 0; margin: 0; }

.btn-ghost {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--orchid);
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 13px 22px;
  border-radius: 0;
  cursor: pointer;
  transition: border-color 250ms, color 250ms, background 250ms;
}
.btn-ghost:hover { border-color: var(--orchid); background: rgba(192, 139, 255, 0.07); color: var(--paper); }
.btn-ghost:focus-visible { outline: 2px solid var(--orchid); outline-offset: 3px; }

/* ---------------------------------------------------------------- footer */
/* The rule aligns with the content column, not the viewport: margin and padding
   used to fight each other and threw the footer off the counter's left edge. */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 var(--pad);
  padding: var(--rhythm) 0 clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-link { color: var(--orchid); text-decoration: none; transition: color 250ms; }
.foot-link:hover { color: var(--paper); }
.foot-link:focus-visible { outline: 2px solid var(--orchid); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}