/* ============================================================================
   VEIL & THORN — BASE
   Design tokens, reset, typography, atmosphere, shared utilities.
   Palette is taken straight off the banner: bone-pink on near-black.
   ========================================================================= */

:root{
  /* --- Brand ------------------------------------------------------------ */
  --pink:       #FDC2DB;   /* sampled from the banner artwork */
  --pink-hot:   #F98FC0;   /* deeper pink for accents and hover */
  --pink-deep:  #C4577F;   /* quieter still, for rules and edges */
  --pink-glow:  rgba(253,194,219,.22);

  --ink:        #0B0A0C;   /* page */
  --ink-2:      #131017;   /* raised panels */
  --ink-3:      #1B1622;   /* raised panels, hover */
  --ink-line:   #0A090C;   /* the "ink" in the artwork */

  --bone:       #F5EFF2;   /* primary text */
  --bone-soft:  #CBC1C8;   /* secondary text */
  --mute:       #948A94;   /* labels, captions */

  /* --- Type ------------------------------------------------------------- */
  --display: "Grenze Gotisch", "Trajan Pro", Georgia, serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --data:    "Courier Prime", "Courier New", ui-monospace, monospace;

  /* --- Space & lines ----------------------------------------------------- */
  --pad:  clamp(20px, 5vw, 90px);
  --rule: 1px solid rgba(253,194,219,.16);
  --rule-faint: 1px solid rgba(253,194,219,.09);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:90px;   /* so anchors don't land under the fixed nav */
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:2px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--pink); color:var(--ink); padding:12px 20px;
  font-family:var(--data); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{left:0}

/* Off the screen, but still read aloud and still indexed. For text a search
   engine and a screen reader both need, where the design says the picture
   carries it instead — the hero wordmark being the case that matters.
   Not `display:none` or `visibility:hidden`: both remove it from the
   accessibility tree entirely, which defeats the point. */
.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ----------------------------------------------------------------------------
   Shared type
   ------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--data); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--pink-hot); margin:0 0 14px;
}
.h-xl,.h-lg,.h-md{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; margin:0;
}
.h-xl{font-size:clamp(48px,12vw,150px); line-height:.9; letter-spacing:.005em}
.h-lg{font-size:clamp(32px,5.6vw,74px); line-height:.95; letter-spacing:.01em}
.h-md{font-size:clamp(21px,2.5vw,32px); line-height:1.1; letter-spacing:.02em}

.lede{font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--bone-soft); max-width:52ch}
.small{font-family:var(--data); font-size:12.5px; line-height:1.75; color:var(--mute)}

/* ----------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-block; position:relative; overflow:hidden; cursor:pointer;
  font-family:var(--data); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  padding:15px 26px; border:1px solid rgba(253,194,219,.45); background:transparent;
  color:var(--bone); transition:color .3s, border-color .3s;
}
.btn span{position:relative; z-index:2}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--pink);
  transform:translateY(101%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{color:var(--ink); border-color:var(--pink)}
.btn:hover::after{transform:translateY(0)}
.btn--pink{background:var(--pink); border-color:var(--pink); color:var(--ink); font-weight:700}
.btn--pink::after{background:var(--bone)}
.btn[disabled]{opacity:.5; pointer-events:none}

/* ----------------------------------------------------------------------------
   Atmosphere — film grain, vignette
   ------------------------------------------------------------------------- */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.26; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.6'/></svg>");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-14px,9px)}
  66%{transform:translate(11px,-12px)} 100%{transform:translate(0,0)}
}

.vig{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0,0,0,.6) 100%);
}

/* ----------------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------------- */
.rv{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.rv.in{opacity:1; transform:none}

/* ----------------------------------------------------------------------------
   Reduced motion — everything still works, nothing moves
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1; transform:none}
  /* The manifesto lights its words up one at a time as you scroll. With motion
     off there is nothing to light them, so they would sit at opacity .14 and
     stay unreadable — well under the contrast minimum. Show them outright. */
  .manifesto__text w{opacity:1}
  .grain{display:none}
}