/* 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 {
  --ink:        #0a0410;   /* page edge, near black with a violet cast */
  --ground:     #120a1c;   /* panels */
  --ground-2:   #1b1029;   /* raised panels */
  --plum:       #2a1440;
  --paper:      #f6f1fa;   /* display text */
  --muted:      #9a85b8;   /* labels, secondary */
  --orchid:     #c08bff;   /* the accent */
  --orchid-dim: #7b3fe4;
  --rule:       rgba(192, 139, 255, 0.22);
  --glow:       rgba(123, 63, 228, 0.5);

  --display: "Bodoni Moda", "Didot", "Playfair Display", 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%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  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 {
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("/grain.svg");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- the mark */
/* Two names locked into one block, hinged on an oversized italic "y".
   Gala sits on top with the y in its natural whitespace; Alejandro carries the
   width below. Optical sizing keeps Bodoni's hairlines alive at display size. */
.mark {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 0.06em;
  text-decoration: none;
  color: var(--paper);
  font-family: var(--display);
  font-optical-sizing: auto;
  line-height: 0.86;
  letter-spacing: -0.005em;
  font-size: var(--mark-size, 30px);
}
.mark-g { font-weight: 500; }
.mark-y {
  font-style: italic;
  font-weight: 400;
  color: var(--orchid);
  font-size: 1.12em;
  transform: translateY(-0.14em);
}
.mark-a {
  grid-column: 1 / -1;
  font-weight: 400;
  font-size: 0.53em;           /* set so ALEJANDRO measures the width of GALA + y */
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--paper);
  padding-top: 0.30em;         /* clears the italic y's descender */
}
.mark:focus-visible { outline: 2px solid var(--orchid); outline-offset: 6px; }
a.mark:hover .mark-y { color: var(--paper); }
.mark-y, .mark-g, .mark-a { transition: color 300ms; }

/* ---------------------------------------------------------------- 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: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 4px;
  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 */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: var(--rhythm) var(--pad) clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--rule);
  margin: 0 var(--pad);
  padding-left: 0;
  padding-right: 0;
  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; }
}