/* Foundation. Palette contrast is verified by tools/contrast.py. */
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;}
@font-face{font-family:'Bodoni Moda';src:url('../assets/fonts/bodonimoda-var-latin.woff2') format('woff2');
  font-weight:400 900;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/spacemono-400-latin.woff2') format('woff2');
  font-weight:400;font-display:swap;}

:root{
  /* ---- ink ---- */
  --ink:#0A0A0B;          /* page ground */
  --coal:#121114;         /* raised surface */
  --slate:#1A181C;        /* card */
  --edge:#2A272C;         /* hairline */
  --edge-hi:#413C44;

  /* ---- light ---- */
  --bone:#E6E1D6;         /* 15.2:1 on ink — primary text */
  --bone-dim:#A9A296;      /* 7.6:1 on ink — secondary text */
  --ash:#6E6A63;          /* 3.7:1 — DECORATION AND BORDERS ONLY, never body text */

  /* ---- accent ---- */
  --ember:#E0552F;        /* 5.2:1 on ink — safe for text and links */
  --ember-hot:#F26B44;
  --blood:#8E1B12;        /* fills only, not text */
  --brass:#C08A2E;        /* 6.4:1 on ink */

  --on-ember:#0A0A0B;     /* 5.2:1 against --ember fill */

  /* ---- type ---- */
  --f-display:'Bodoni Moda',ui-serif,Georgia,'Times New Roman',serif;
  --f-ui:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --f-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --step--1:clamp(.75rem,.71rem + .18vw,.84rem);
  --step-0: clamp(.95rem,.90rem + .24vw,1.06rem);
  --step-1: clamp(1.15rem,1.05rem + .48vw,1.44rem);
  --step-2: clamp(1.45rem,1.25rem + .95vw,2.15rem);
  --step-3: clamp(1.9rem,1.45rem + 2.1vw,3.4rem);
  --step-4: clamp(2.6rem,1.6rem + 4.6vw,6rem);
  --step-5: clamp(3.4rem,1.5rem + 8.6vw,10.5rem);

  /* ---- space ---- */
  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem;
  --s5:3rem; --s6:4.5rem; --s7:7rem; --s8:10rem;
  --gutter:clamp(1.15rem,4vw,4.5rem);
  --maxw:96rem;

  --dur-1:180ms; --dur-2:340ms; --dur-3:620ms; --dur-4:1100ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:4.25rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 1rem);}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--f-ui);font-size:var(--step-0);line-height:1.6;
  font-variation-settings:'wdth' 100,'wght' 400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;background:var(--coal);}
h1,h2,h3,h4,p,figure,blockquote{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}

/* focus — visible, never removed */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;left:var(--gutter);top:-6rem;z-index:200;background:var(--ember);
  color:var(--on-ember);padding:.7rem 1.1rem;font-family:var(--f-mono);font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;transition:top var(--dur-1) var(--ease);}
.skip:focus{top:calc(var(--nav-h) + .5rem);}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------------- type primitives ---------------- */
.display{font-family:var(--f-display);font-weight:800;line-height:.86;
  font-variation-settings:'opsz' 96,'wght' 800;letter-spacing:-.015em;}
.mono{font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);}
.cond{font-family:var(--f-ui);font-variation-settings:'wdth' 70,'wght' 800;
  text-transform:uppercase;letter-spacing:.01em;line-height:.92;}

.eyebrow{display:flex;align-items:center;gap:var(--s2);
  font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);}
.eyebrow::before{content:"";width:clamp(1.4rem,5vw,3.5rem);height:1px;background:var(--ember);flex:none;}

/* ---------------- layout ---------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(3.5rem,10vw,var(--s8));position:relative;}
.section--tight{padding-block:clamp(2.5rem,7vw,var(--s7));}
.rule{height:1px;background:var(--edge);border:0;margin:0;}

.sect-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);margin-bottom:clamp(1.75rem,4vw,var(--s5));}
.sect-title{font-family:var(--f-display);font-weight:700;font-size:var(--step-3);
  font-variation-settings:'opsz' 96,'wght' 700;line-height:.95;letter-spacing:-.01em;}
.sect-note{max-width:34ch;color:var(--bone-dim);font-size:var(--step-0);}

/* ---------------- grain + vignette ---------------- */
.grain,.vig{position:fixed;inset:0;pointer-events:none;z-index:60;}
.grain{background-image:url('../assets/img/grain.png');background-size:128px 128px;
  opacity:.42;mix-blend-mode:overlay;will-change:transform;
  animation:grainShift 700ms steps(1,end) infinite;}
.vig{z-index:59;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%);}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}      20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)}  60%{transform:translate3d(-2%,-2%,0)}
  80%{transform:translate3d(3%,1%,0)}   100%{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .grain{animation:none;opacity:.30;}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important;}
}