/* Nothin' — Lex Liberorum Pax
   ---------------------------------------------------------------------------
   The grammar is noth.in's: pure black and pure white traded back and forth, one
   enormous grotesk, mono for the small print, and an amount of empty space that
   feels like a mistake until you see it.
   What is ours: verdigris and bronze off the winged lion, a serif borrowed from
   the law, and the fact that every section here is making an argument.
   Type sizes sit on the locked scale — 11 13 15 17 20 24 30 38 48 60 76 — with
   11 used only on tracked uppercase micro-labels, which is what it is for.     */

:root{
  --black:#000;
  --white:#fff;
  --bone:#EDE9E2;
  --verd:#1FA97A;        /* the patina on the lion */
  --verd-deep:#0C6B4C;
  --bronze:#B08D57;
  --ink:#0A0A0A;

  --grot:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Playfair Display",Georgia,serif;

  --pad:clamp(20px,4.2vw,72px);
  --rule:1px solid color-mix(in srgb, currentColor 16%, transparent);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--grot); font-weight:400;
  font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
       text-transform:uppercase; font-weight:400 }

/* ── fixed chrome ────────────────────────────────────────────────────────── */
.chrome{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--pad)*.55) var(--pad);
  mix-blend-mode:difference;              /* stays legible over black AND white */
  pointer-events:none;
}
.chrome a,.chrome span{pointer-events:auto}
.mark{ display:flex; align-items:center; gap:.55rem; text-decoration:none }
.mark-n{ font-weight:900; font-size:20px; letter-spacing:-.03em; color:#fff }
.mark-lion{ width:26px; height:26px; object-fit:contain; filter:grayscale(1) contrast(1.6) }
.menu{ display:flex; align-items:center; gap:1.1rem }
.menu a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  text-decoration:none; opacity:.55; transition:opacity .25s;
}
.menu a:hover{opacity:1}
.menu-word{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
            text-transform:uppercase; color:#fff; font-weight:500 }
.menu-word b{ color:var(--verd) }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative; height:100svh; min-height:520px;
  display:grid; place-items:center; background:var(--black); overflow:hidden;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1 }

/* The DOM wordmark. Visible until the canvas is ready, then it hands over — but
   it is never removed, so selection, search and screen readers still find it. */
.hero-word{
  position:relative; z-index:2; margin:0;
  font-weight:900; letter-spacing:-.045em; line-height:1;
  font-size:clamp(48px,15.5vw,240px);
  color:#fff; transition:opacity .5s ease;
}
.hero.ready .hero-word{ opacity:0 }

.hero-sub{
  position:absolute; z-index:3; left:var(--pad); bottom:calc(var(--pad)*2.4);
  margin:0; max-width:26ch; color:#fff; font-size:15px; line-height:1.45;
}
.hero-sub .sep{ color:var(--verd); margin:0 .4rem }
.hero-foot{
  position:absolute; z-index:3; inset:auto var(--pad) var(--pad) var(--pad);
  display:flex; align-items:baseline; justify-content:space-between; color:#fff;
}
.hero-foot .hint{ opacity:.42 }
.hero-foot .idx{ font-weight:500 }
.hero.no-webgl #hero-canvas{ display:none }

/* ── bands ───────────────────────────────────────────────────────────────── */
.band{ padding:clamp(72px,11vh,150px) var(--pad); position:relative }
.band--dark{ background:var(--black); color:var(--white) }
.band--light{ background:var(--white); color:var(--ink) }
.band--light .mono{ color:var(--verd-deep) }

.band-head{ max-width:1500px; margin:0 auto clamp(40px,6vh,86px) }
.eyebrow{ display:block; margin-bottom:1.4rem; opacity:.75 }
.display{
  margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(30px,6.2vw,86px);
}
.display .quiet{ color:color-mix(in srgb, currentColor 42%, transparent) }
.huge{ font-size:clamp(38px,10vw,144px) }

.grid-2{
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,90px);
}
@media(min-width:900px){ .grid-2{ grid-template-columns:1.05fr .95fr } }
.col p{ margin:0 0 1.1rem; max-width:62ch;
        color:color-mix(in srgb, currentColor 82%, transparent) }
.lede{ font-size:clamp(17px,1.55vw,20px); line-height:1.44;
       color:currentColor !important }
.pull{
  margin-top:2.2rem !important; font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.5vw,30px); line-height:1.24; color:currentColor !important;
  border-left:3px solid var(--verd); padding-left:1.1rem;
}

/* ── the amendment that redacts itself ───────────────────────────────────── */
.amend{
  margin:0; padding:clamp(20px,2.4vw,34px);
  border:1px solid color-mix(in srgb, currentColor 18%, transparent);
  background:color-mix(in srgb, currentColor 3%, transparent);
}
.amend-tag{ display:block; color:var(--verd-deep); margin-bottom:1rem }
.amend p{ font-family:var(--serif); font-size:clamp(15px,1.4vw,17px);
          line-height:1.6; margin:0 0 1.2rem; color:currentColor }
.amend-note{ display:block; opacity:.5 }

/* every word is its own span so it can be struck out one at a time */
.amend .w{ position:relative; display:inline-block; transition:color .45s ease }
/* inline-block on purpose: an inline span has no box for the bar to fill,
   which is why the words vanished instead of being struck out. */
.amend .w::after{
  content:""; position:absolute; left:-.08em; right:-.08em; top:.02em; bottom:.06em;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.amend.redacted .w.gone{ color:transparent }
.amend.redacted .w.gone::after{ transform:scaleX(1) }
/* the clause that matters is the one thing left standing */
.amend mark{ background:none; color:var(--verd-deep); font-weight:700 }

/* ── lp secure proof ─────────────────────────────────────────────────────── */
.facts{ list-style:none; margin:2rem 0 2.4rem; padding:0 }
.facts li{
  display:grid; grid-template-columns:2.4rem 1fr; gap:.7rem;
  padding:.72rem 0; border-top:var(--rule);
  color:color-mix(in srgb, currentColor 84%, transparent);
}
.facts .mono{ color:var(--verd) }
.col--figure{ display:flex; align-items:flex-start }
.proof{ margin:0; width:100% }
.proof figcaption{ display:block; opacity:.55; margin-bottom:.7rem }
.proof .dim{ margin:.7rem 0 0; opacity:.38 }
.cipher{
  margin:0; padding:clamp(16px,1.8vw,26px);
  border:1px solid color-mix(in srgb,#fff 14%,transparent);
  background:#060606; color:var(--verd);
  font-family:var(--mono); font-size:13px; line-height:1.75;
  word-break:break-all; white-space:pre-wrap; max-height:44vh; overflow:hidden;
}

/* ── cta ─────────────────────────────────────────────────────────────────── */
.cta{
  display:inline-flex; align-items:center; gap:.8rem; text-decoration:none;
  padding:.85rem 1.35rem; border:1px solid currentColor; border-radius:999px;
  font-weight:600; letter-spacing:-.01em; transition:.28s ease;
}
.cta svg{ width:18px; height:18px; transition:transform .28s ease }
.cta:hover{ background:var(--verd); border-color:var(--verd); color:#000 }
.cta:hover svg{ transform:translateX(4px) }
.cta--big{ padding:1.05rem 1.7rem; font-size:17px }

/* ── works ───────────────────────────────────────────────────────────────── */
.works{ padding-top:clamp(90px,14vh,190px) }
.kinetic{
  display:flex; justify-content:space-between; margin:0 0 clamp(50px,8vh,120px);
  font-weight:900; letter-spacing:-.05em; line-height:.86;
  font-size:clamp(54px,19vw,272px);
}
.kinetic span{ display:block; will-change:transform }

.work-grid{
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,90px);
}
@media(min-width:900px){ .work-grid{ grid-template-columns:1fr 1fr } }
.work{ border-top:1px solid color-mix(in srgb,#fff 18%,transparent); padding-top:1.4rem }
.work .mono{ color:var(--verd); display:block; margin-bottom:1.5rem }
.work h3{ margin:0 0 .9rem; font-size:clamp(20px,2.4vw,34px);
          font-weight:800; letter-spacing:-.028em; line-height:1.1 }
.work p{ margin:0; max-width:46ch; color:color-mix(in srgb,#fff 62%,transparent) }
@media(min-width:900px){ .work--offset{ transform:translateY(clamp(30px,6vw,110px)) } }

/* ── position ────────────────────────────────────────────────────────────── */
.col--art{ display:grid; place-items:center }
.stencil{ width:min(100%,440px); filter:invert(1) }

/* ── closer ──────────────────────────────────────────────────────────────── */
.closer{
  background:var(--black); color:#fff;
  padding:clamp(90px,16vh,200px) var(--pad) clamp(40px,7vh,80px);
  text-align:center;
}
.closer .display{ margin-bottom:clamp(36px,6vh,70px) }
.closer-row{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
             margin-bottom:clamp(50px,9vh,110px) }
.fine{ opacity:.34 }

/* ── scroll-in ───────────────────────────────────────────────────────────── */
[data-rise]{ opacity:0; transform:translateY(22px);
             transition:opacity .8s cubic-bezier(.16,1,.3,1),
                        transform .8s cubic-bezier(.16,1,.3,1) }
[data-rise].in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rise],[data-rise].in{opacity:1;transform:none;transition:none}
  .amend .w::after{transition:none}
  .work--offset{transform:none}
}