/* ==========================================================================
   MANU — shared stylesheet
   Greyscale only. Type: Archivo (grotesque, variable width) + Newsreader
   (editorial serif, for reading). No colour anywhere by design.
   ========================================================================== */

:root{
  /* Greyscale ramp. True black page. Contrast values against --black:
     white 21:1 · g-90 17.4:1 · g-70 10.1:1 · g-55 6.5:1 · g-40 3.9:1 (large only) */
  --black:   #000000;
  --near:    #070707;   /* panels that need to separate from the page */
  --g-08:    #141414;   /* raised surface */
  --g-14:    #232323;   /* borders, strong */
  --g-20:    #333333;   /* borders, soft */
  --g-40:    #6b6b6b;   /* tertiary text — large only */
  --g-55:    #949494;   /* secondary text */
  --g-70:    #bdbdbd;   /* body text on black */
  --g-90:    #e8e8e8;   /* emphasis */
  --white:   #ffffff;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:   'Newsreader', Georgia, 'Times New Roman', serif;

  /* Spacing scale — 4px base, used everywhere instead of ad-hoc values */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4.5rem; --s7: 7rem;    --s8: 10rem;

  --edge: clamp(1.25rem, 4vw, 4rem);   /* page gutter */
  --maxw: 1440px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Content images get a subtle scroll parallax via the --py CSS variable set in
   site.js. The hero star field is a <canvas>, not an <img>, so it is untouched. */
img[data-parallax]{ will-change:transform; transform:translateY(var(--py,0)); }

/* Page transition: a soft entrance on load, and a fade-out before navigating
   away. Reduced-motion users get an instant swap (see the override below). */
@keyframes pageIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.js main{animation:pageIn .55s var(--ease) both;}
body.leaving{opacity:0; transition:opacity .26s var(--ease);}
body{
  background:var(--black); color:var(--g-70);
  font-family:var(--display); font-size:16px; line-height:1.6;
  font-synthesis:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--white); color:var(--black);}
img{display:block; max-width:100%;}
a{color:inherit;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--white); outline-offset:3px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--white); color:var(--black); padding:var(--s2) var(--s3);
  font-size:13px; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{left:var(--edge);}

/* ---------- type scale ---------- */
.h-xl{
  font-family:var(--display);
  font-size:clamp(3rem, 11vw, 11rem); font-weight:600;
  line-height:0.86; letter-spacing:-0.045em; color:var(--white);
  font-stretch:112%;
}
.h-1{
  font-size:clamp(2.25rem, 6vw, 5rem); font-weight:600;
  line-height:0.95; letter-spacing:-0.035em; color:var(--white);
}
.h-2{
  font-size:clamp(1.6rem, 3.4vw, 2.85rem); font-weight:600;
  line-height:1.06; letter-spacing:-0.025em; color:var(--white);
}
.h-3{
  font-size:clamp(1.15rem, 1.7vw, 1.5rem); font-weight:600;
  line-height:1.2; letter-spacing:-0.015em; color:var(--white);
}
.lede{
  font-family:var(--serif); font-size:clamp(1.2rem, 2.1vw, 1.75rem);
  line-height:1.5; color:var(--g-90); font-weight:400; letter-spacing:-0.01em;
}
.prose{
  font-family:var(--serif); font-size:1.0625rem; line-height:1.75; color:var(--g-70);
  max-width:34em;
}
.prose + .prose{margin-top:var(--s2);}
.prose strong{color:var(--white); font-weight:600;}
.label{
  font-family:var(--display); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--g-55);
}
.num{
  font-family:var(--display); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.16em; color:var(--g-40); font-variant-numeric:tabular-nums;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--edge);}
.section{padding-block:clamp(4rem, 11vh, var(--s8));}
.rule{height:1px; background:var(--g-14); border:0;}
.sec-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s3); padding-bottom:var(--s3); margin-bottom:var(--s5);
  border-bottom:1px solid var(--g-14); flex-wrap:wrap;
}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--black) 82%, transparent);
  backdrop-filter:blur(12px) saturate(0);
  border-bottom:1px solid var(--g-14);
}
.site-head .bar{
  max-width:var(--maxw); margin:0 auto; padding:var(--s2) var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.wordmark{
  font-family:var(--display); font-weight:700; font-size:1.0625rem;
  letter-spacing:0.02em; color:var(--white); text-decoration:none;
  font-stretch:112%;
}
.nav{display:flex; gap:clamp(1rem,2.4vw,2.25rem); align-items:center;}
.nav a{
  font-size:0.8125rem; font-weight:500; letter-spacing:0.02em;
  color:var(--g-55); text-decoration:none; padding:0.5rem 0;
  position:relative; transition:color .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--white);}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--white); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav-btn{
  display:none; background:none; border:1px solid var(--g-20); color:var(--white);
  font-family:var(--display); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  padding:0.75rem var(--s2); min-height:44px; cursor:pointer;
  transition:border-color .3s var(--ease);
}
.nav-btn:hover{border-color:var(--white);}
@media(max-width:820px){
  .nav{display:none;}
  .nav-btn{display:block;}
}
.nav-panel{
  position:fixed; inset:0; z-index:150; background:var(--black);
  display:flex; flex-direction:column; justify-content:center; padding:var(--edge);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.nav-panel.open{opacity:1; visibility:visible;}
.nav-panel a{
  display:flex; align-items:baseline; gap:var(--s2); min-height:64px;
  font-size:clamp(1.75rem,8vw,2.75rem); font-weight:600; letter-spacing:-0.03em;
  color:var(--white); text-decoration:none; border-bottom:1px solid var(--g-14);
}
.nav-panel a .num{font-size:0.625rem;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.625rem;
  font-family:var(--display); font-size:0.8125rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; text-decoration:none;
  padding:1.0625rem var(--s3); min-height:48px; border:1px solid var(--white);
  background:var(--white); color:var(--black);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{background:transparent; color:var(--white);}
.btn-ghost{background:transparent; color:var(--white); border-color:var(--g-20);}
.btn-ghost:hover{background:var(--white); color:var(--black); border-color:var(--white);}
.btn-row{display:flex; gap:var(--s2); flex-wrap:wrap;}

/* text link with drawn underline */
.tlink{
  color:var(--white); text-decoration:none; position:relative;
  border-bottom:1px solid var(--g-20); padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.tlink:hover{border-color:var(--white);}

/* ---------- media ---------- */
.plate{position:relative; overflow:hidden; background:var(--g-08);}
.plate img{width:100%; height:100%; object-fit:cover;}
.plate--wide{aspect-ratio:16/5;}
.grain{
  position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--g-14); margin-top:var(--s7);}
.foot-grid{
  max-width:var(--maxw); margin:0 auto; padding:var(--s6) var(--edge) var(--s4);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5);
}
.foot-grid h2{font-size:clamp(1.75rem,4.5vw,3.25rem); font-weight:600; letter-spacing:-0.035em; color:var(--white); line-height:1;}
.foot-links{display:flex; flex-direction:column; gap:0.75rem;}
.foot-links a{font-size:0.9375rem; color:var(--g-55); text-decoration:none; transition:color .3s var(--ease);}
.foot-links a:hover{color:var(--white);}
.foot-base{
  max-width:var(--maxw); margin:0 auto; padding:var(--s3) var(--edge);
  border-top:1px solid var(--g-14); display:flex; justify-content:space-between;
  gap:var(--s2); flex-wrap:wrap;
}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:var(--s4);} }

/* ---------- reveal ---------- */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.js .rv.in{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  .js .rv{opacity:1; transform:none;}
}