/* ============ BRAND FACE ============
   Real Bunken Tech Sans Pro Wide, taken from the site's own font files and
   subsetted to Latin, then converted TTF -> WOFF2.
   Med  121 KB TTF  ->  14.6 KB WOFF2   (registered here at its true weight, 500)
   Heavy 117 KB TTF ->  14.4 KB WOFF2   (registered at 900, used for figures)
   Both are currently declared to Elementor as "Normal", which is why the live
   site synthesises its bold weights instead of using the real Heavy cut. */
@font-face{
  font-family:"Bunken Tech Sans Pro Wide";
  src:url("../fonts/bunken-med.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bunken Tech Sans Pro Wide";
  src:url("../fonts/bunken-heavy.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}
/* ============ TOKENS : light (default, un-stamped) ============ */
:root{
  --ground:#DBDEDC;
  --studio:#FEFEFC;         /* matches the baked-in render background exactly */
  --surface:#F4F6F4;
  --ink:#14160E;
  --ink-2:#3E4337;
  --muted:#5E6356;
  --rule:#C3C8C4;
  --rule-2:#AAB0AB;
  --deep:#0F1008;
  --deep-ink:#EDEFE1;
  --deep-muted:#8E9480;
  --deep-rule:#2A2C1D;
  --accent:#A3C95A;
  --accent-ink:#4B6B13;
  --accent-soft:#E4EDCD;
  --focus:#4B6B13;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E0F08;
    --studio:#FEFEFC;       /* studio plates stay light on purpose */
    --surface:#17190F;
    --ink:#EDEFE1;
    --ink-2:#C7CBB5;
    --muted:#909680;
    --rule:#282A1B;
    --rule-2:#3D4029;
    --deep:#070803;
    --deep-ink:#EDEFE1;
    --deep-muted:#8E9480;
    --deep-rule:#222416;
    --accent:#A3C95A;
    --accent-ink:#B5D874;
    --accent-soft:#212A11;
    --focus:#A3C95A;
  }
}
:root[data-theme="dark"]{
  --ground:#0E0F08;
  --studio:#FEFEFC;
  --surface:#17190F;
  --ink:#EDEFE1;
  --ink-2:#C7CBB5;
  --muted:#909680;
  --rule:#282A1B;
  --rule-2:#3D4029;
  --deep:#070803;
  --deep-ink:#EDEFE1;
  --deep-muted:#8E9480;
  --deep-rule:#222416;
  --accent:#A3C95A;
  --accent-ink:#B5D874;
  --accent-soft:#212A11;
  --focus:#A3C95A;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%;}
figure{margin:0;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}

/* ============ PRIMITIVES ============ */
.shell{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px);}
/* Bunken Med carries all display words; Bunken Heavy is reserved for figures,
   so numbers read as data rather than as more headline */
.disp{
  font-family:"Bunken Tech Sans Pro Wide","Helvetica Neue",Arial,sans-serif;
  font-weight:500;letter-spacing:-.005em;line-height:1.04;text-wrap:balance;
}
.mode h3,.door h3,.step .sn,.mat h4,.member .mn2,.detail .dt{
  font-family:"Bunken Tech Sans Pro Wide","Helvetica Neue",Arial,sans-serif;
  font-weight:500;letter-spacing:0;
}
.hero-side dd,.mcell .mv{
  font-family:"Bunken Tech Sans Pro Wide","Helvetica Neue",Arial,sans-serif;
  font-weight:900;letter-spacing:-.01em;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:12px;margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none;}
.eyebrow.on-deep{color:var(--deep-muted);}

/* ============ SITE HEADER ============ */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-head .shell{display:flex;align-items:center;gap:28px;height:66px;}
/* real logo files from the media library; dark mark on light grounds,
   light mark on dark grounds, swapped by theme rather than recoloured */
.wordmark{display:block;text-decoration:none;flex:none;}
.wordmark img{width:132px;height:auto;}
.wordmark .mark-light{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-head .wordmark .mark-dark{display:none;}
  :root:not([data-theme="light"]) .site-head .wordmark .mark-light{display:block;}
}
:root[data-theme="dark"] .site-head .wordmark .mark-dark{display:none;}
:root[data-theme="dark"] .site-head .wordmark .mark-light{display:block;}
/* the footer is always dark, so it always takes the light mark */
.site-foot .wordmark .mark-dark{display:none;}
.site-foot .wordmark .mark-light{display:block;}
.site-foot .wordmark img{width:150px;}
.site-nav{display:flex;gap:26px;margin-left:auto;}
.site-nav a{
  font-size:14px;color:var(--ink-2);text-decoration:none;font-weight:450;
  padding:4px 0;border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--accent);}
.head-cta{margin-left:8px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"IBM Plex Sans",sans-serif;font-size:14.5px;font-weight:600;
  letter-spacing:.01em;
  padding:12px 22px;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{background:var(--accent);color:#14160E;border-color:var(--accent);}
.btn-primary:hover{background:#B4D671;border-color:#B4D671;}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-deep{background:transparent;color:var(--deep-ink);border-color:#3E4229;}
.btn-deep:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:9px 16px;font-size:13.5px;}

/* ============ HERO ============ */
.hero{padding:clamp(48px,7vw,88px) 0 0;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,44px);}
/* Bunken ships only Med (500) and Heavy (1000). Heavy is far too blocky for a
   headline, so the large display type is Med with a hairline stroke, which
   lands about where a semibold would. Small display text is left unstroked. */
.hero h1,.band h2{-webkit-text-stroke:.55px currentColor;}
.hero h1{font-size:clamp(38px,6.2vw,76px);margin:0 0 22px;max-width:17ch;}
.hero h1 .em{color:var(--accent-ink);}
.hero-sub{font-size:clamp(17px,1.9vw,20px);color:var(--ink-2);max-width:46ch;margin:0 0 30px;}
.status{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);border-radius:2px;
  padding:6px 12px;margin-bottom:26px;background:var(--surface);
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}

/* waitlist form */
.signup{display:flex;flex-wrap:wrap;gap:8px;max-width:470px;}
.signup input[type=email],
.signup input[type=password]{
  flex:1 1 230px;min-width:0;
  font-family:"IBM Plex Sans",sans-serif;font-size:15px;
  padding:12px 14px;border:1px solid var(--rule-2);border-radius:2px;
  background:var(--surface);color:var(--ink);
}
.signup input[type=email]::placeholder,
.signup input[type=password]::placeholder{color:var(--muted);}
.signup-note{font-size:13px;color:var(--muted);margin:11px 0 0;max-width:44ch;}
.signup-done{
  display:none;align-items:center;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.05em;
  color:var(--accent-ink);border:1px solid var(--accent);background:var(--accent-soft);
  padding:13px 16px;border-radius:2px;max-width:470px;
}
.signup-wrap.is-done .signup{display:none;}
.signup-wrap.is-done .signup-note{display:none;}
.signup-wrap.is-done .signup-done{display:flex;}

/* hero spec strip */
.hero-side{margin-top:clamp(30px,4vw,44px);}
.hero-side dl{
  margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.hero-side div{display:flex;flex-direction:column;gap:2px;background:var(--ground);padding:20px 4px 20px 0;}
.hero-side div + div{padding-left:clamp(14px,2vw,26px);}
.hero-side dt{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);order:2;
}
.hero-side dd{
  margin:0;font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;order:1;
}
.hero-side dd small{font-size:.46em;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-left:3px;}

/* ============ FILM ============
   The deployment films are shot on black, so the band goes black and the
   footage bleeds into it with no visible edge. Desktop gets the 16:9 cut where
   the product holds centre; mobile gets the portrait cut. */
.film{margin-top:clamp(40px,6vw,72px);background:#DAD6D9;}
.film video{width:100%;height:auto;background:#DAD6D9;}
.film-cap{
  background:var(--surface);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:14px clamp(18px,4vw,48px);
}
.film-cap b{color:var(--ink);font-weight:500;}

/* ============ SECTIONS ============ */
.band{padding:clamp(64px,9vw,120px) 0;border-bottom:1px solid var(--rule);}
.band-deep{background:var(--deep);color:var(--deep-ink);border-bottom:none;}
.band h2{font-size:clamp(28px,4.4vw,52px);margin:0 0 20px;}
.band .lede{font-size:clamp(17px,1.8vw,19.5px);color:var(--ink-2);max-width:56ch;margin:0 0 8px;}
.band-deep .lede{color:var(--deep-muted);}
.head-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(34px,5vw,56px);}

/* modes */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
.mode{background:var(--surface);display:flex;flex-direction:column;}
.mode .plate{background:var(--studio);}
.mode .plate img{width:100%;aspect-ratio:16/11;object-fit:contain;background:var(--studio);}
.mode .mbody{padding:26px clamp(20px,2.6vw,30px) 30px;display:flex;flex-direction:column;flex:1;}
.mode .spec-list{margin-top:auto;}
.mode h3{font-size:23px;letter-spacing:-.01em;margin:0 0 4px;}
.mode .role{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 16px;}
.spec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.spec-list li{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2);
}
.spec-list li:last-child{border-bottom:none;}
.spec-list b{
  font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:13.5px;
  color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
}

/* ============ PHOTOGRAPHY: IN THE WILD ============
   An editorial mosaic rather than a lead image over a row of thumbnails. Two
   rows, each an unequal pair, with the wide frame alternating side to side so
   the block reads as composed instead of stacked. Fixed row heights keep the
   two frames in a row exactly level; every image cover-crops with its own
   object-position so heads and horizons survive. */
.shots{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:clamp(230px,25vw,380px);
  gap:clamp(8px,1vw,14px);
  margin-top:clamp(24px,3.4vw,40px);
}
.shot{position:relative;margin:0;overflow:hidden;background:var(--surface);border:1px solid var(--rule);}
.shot img{width:100%;height:100%;object-fit:cover;display:block;}
.s-group{grid-column:span 8;}
.s-walk{grid-column:span 4;}
.s-highline{grid-column:span 5;}
.s-bridge{grid-column:span 7;}
.s-group img{object-position:center 56%;}
.s-walk img{object-position:center 42%;}
.s-highline img{object-position:center 50%;}
.s-bridge img{object-position:center 32%;}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;
  padding:44px clamp(14px,1.4vw,20px) clamp(13px,1.2vw,17px);
  background:linear-gradient(to top, rgba(8,9,4,.9) 0%, rgba(8,9,4,.6) 48%, rgba(8,9,4,0) 100%);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:#EDEFE1;line-height:1.5;
}
.shot figcaption b{color:var(--accent);font-weight:500;}
@media (max-width:920px){
  .shots{grid-auto-rows:clamp(200px,30vw,300px);}
  .s-group,.s-walk,.s-highline,.s-bridge{grid-column:span 6;}
}
@media (max-width:560px){
  .shots{grid-auto-rows:62vw;}
  .s-group,.s-walk,.s-highline,.s-bridge{grid-column:span 12;}
}

/* ---- prototype photographs in "Where we are" ----
   Captions sit under the frame rather than over it: these are bright workshop
   shots and an overlaid scrim fought the image without ever being legible. */
.proof{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  margin:clamp(26px,3.4vw,40px) 0 clamp(34px,4.4vw,52px);
}
.proof figure{margin:0;border:1px solid var(--rule);background:var(--studio);overflow:hidden;}
.proof img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.proof figcaption{
  background:var(--surface);border-top:1px solid var(--rule);
  padding:12px clamp(13px,1.2vw,17px) 14px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
@media (max-width:560px){ .proof{grid-template-columns:minmax(0,1fr);} }

/* feature grid ------------------------------------------------------------
   Fourteen features is too many for hairline dividers, which read as a heavy
   lattice at that count. Bordered cards with a real gap instead, which also
   lets a short final row centre like every other grid on the page. */
.fgroup{margin-top:clamp(30px,4vw,44px);}
.fgroup-label{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;
}
.fgroup-label b{color:var(--ink);font-weight:500;}
.details{--cl-gap:clamp(10px,1.4vw,16px);--cl-cols:4;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cl-gap);}
.details > *{
  --cl-w:calc((100% - (var(--cl-cols) - 1) * var(--cl-gap)) / var(--cl-cols));
  flex:0 1 var(--cl-w);max-width:var(--cl-w);min-width:0;
}
@media (max-width:1000px){ .details{--cl-cols:3;} }
@media (max-width:720px){  .details{--cl-cols:2;} }
@media (max-width:430px){  .details{--cl-cols:1;} }
.detail{border:1px solid var(--rule);background:var(--studio);display:flex;flex-direction:column;overflow:hidden;}
.detail img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--studio);}
.detail figcaption{
  background:var(--surface);padding:13px 15px 16px;border-top:1px solid var(--rule);flex:1;
}
.detail .dt{font-size:14.5px;display:block;margin-bottom:4px;}
.detail .dd{font-size:13px;line-height:1.5;color:var(--muted);display:block;}

/* ---- progressive reveal on the feature groups ----
   Only the first row shows; the row under it is cut off mid-card and faded into
   the page ground, which reads as "there is more" without a hard edge. The peek
   height is set in JS because a row's height changes with the column count. */
.reveal{
  position:relative;overflow:hidden;
  /* both ends of the animation are CSS values, so removing .is-collapsed is
     enough on its own; nothing depends on a JS-driven inline style landing */
  max-height:var(--full,4000px);
  transition:max-height .5s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-collapsed{max-height:var(--peek,520px);}
.reveal-fade{
  position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    color-mix(in srgb, var(--ground) 72%, transparent) 46%,
    var(--ground) 100%);
  opacity:1;transition:opacity .35s ease;
}
.reveal:not(.is-collapsed) .reveal-fade{opacity:0;}
.reveal-more{
  display:flex;justify-content:center;
  margin-top:clamp(14px,1.6vw,20px);
}
.reveal-more button{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;
  border:1px solid var(--rule-2);border-radius:2px;
  padding:10px 20px;cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.reveal-more button:hover{border-color:var(--ink);color:var(--ink);background:var(--surface);}
.reveal-more button .n{color:var(--muted);letter-spacing:.08em;}
.reveal-more button svg{width:11px;height:11px;flex:none;}
.reveal-more.is-done{display:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;}
  .reveal-fade{transition:none;}
}

/* materials */
.mats{--cl-gap:clamp(14px,2vw,24px);--cl-cols:3;--cl-min:240px;}
.mat{border:1px solid var(--rule);background:var(--surface);overflow:hidden;}
.mat img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.mat .mtxt{padding:16px 18px 20px;}
.mat .mno{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;color:var(--accent-ink);display:block;margin-bottom:6px;}
.mat h4{font-size:16.5px;margin:0 0 5px;letter-spacing:-.005em;}
.mat p{margin:0;font-size:14px;color:var(--muted);line-height:1.5;}

/* ============ THESIS (deep band) ============ */
.band-deep h2{color:var(--deep-ink);}
/* the market figures narrow in three tiers rather than summing into one number;
   the tier labels carry that logic, so they are information, not decoration */
.tier-label{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--deep-rule);max-width:none;
}
.tier-label:not(:first-of-type){margin-top:clamp(26px,3.4vw,38px);}
.market{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--deep-rule);border:1px solid var(--deep-rule);margin-bottom:0;}
.mcell .src{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;
  color:var(--deep-muted);opacity:.8;margin:12px 0 0;padding-top:10px;
  border-top:1px solid var(--deep-rule);line-height:1.5;
}
/* a tier that needs framing before or after its figures */
.tier-note{
  margin:0 0 clamp(18px,2.2vw,26px);
  max-width:72ch;font-size:15.5px;line-height:1.62;color:var(--deep-muted);
}
.market + .tier-note{margin-top:clamp(20px,2.4vw,28px);}
/* the sentence that introduces the staged-pricing table */
.proj-lead{
  margin:clamp(22px,2.6vw,30px) 0 clamp(12px,1.4vw,16px);
  font-size:15.5px;line-height:1.6;color:var(--deep-ink);max-width:72ch;
}
/* a tier with a single figure gives it the full width rather than half */
.market:has(> .mcell:only-child){grid-template-columns:minmax(0,1fr);}
.mcell{background:var(--deep);padding:24px 22px 26px;}
.mcell .mv{
  font-size:clamp(30px,4vw,42px);
  letter-spacing:-.025em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;
  display:block;margin-bottom:12px;
}
.mcell .mk{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-ink);display:block;margin-bottom:7px;}
.mcell .mn{font-size:13.5px;color:var(--deep-muted);line-height:1.5;margin:0;}
.proj{border:1px solid var(--deep-rule);overflow-x:auto;}
.proj table{border-collapse:collapse;width:100%;min-width:640px;}
.proj caption{
  caption-side:top;text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-muted);
  padding:16px 22px 0;
}
.proj th,.proj td{padding:13px 22px;text-align:left;border-bottom:1px solid var(--deep-rule);}
.proj thead th{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--deep-muted);font-weight:500;
}
.proj tbody th{font-weight:500;color:var(--deep-ink);font-size:15px;}
.proj td{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums;}
.proj tbody tr:last-child th,.proj tbody tr:last-child td{border-bottom:none;}
.footnote{font-size:13px;color:var(--deep-muted);margin:16px 0 0;max-width:70ch;}

/* ============ STATUS / ROADMAP ============ */
.track{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.step{background:var(--surface);padding:20px 24px;display:grid;grid-template-columns:auto 1fr auto;gap:6px 20px;align-items:center;}
.step .sk{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--muted);}
.step .sn{font-size:17px;}
.step .sd{grid-column:2/-1;font-size:14.5px;color:var(--muted);margin:0;}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;border-radius:2px;white-space:nowrap;
}
.chip.done{background:var(--accent-soft);color:var(--accent-ink);}
.chip.now{background:var(--accent);color:#14160E;}
.chip.next{background:transparent;color:var(--muted);border:1px solid var(--rule-2);}

/* ============ TWO DOORS ============ */
.doors{--cl-gap:clamp(16px,2.4vw,26px);--cl-cols:2;--cl-min:300px;}
.door{border:1px solid var(--rule);background:var(--surface);padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;}
.door.primary{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.door h3{font-size:clamp(21px,2.4vw,26px);margin:0 0 10px;letter-spacing:-.015em;}
.door p{color:var(--ink-2);font-size:15.5px;margin:0 0 22px;}
.door .spacer{flex:1;}

/* ============ TEAM ============ */
.team{--cl-gap:clamp(14px,2vw,22px);--cl-cols:6;--cl-min:168px;}
.member{text-align:center;display:flex;flex-direction:column;align-items:center;}
.member img{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;border:1px solid var(--rule);object-fit:cover;}
.member .mr{max-width:20ch;}
.member .mn2{font-size:15.5px;display:block;letter-spacing:-.005em;}
.member .mr{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:block;margin-top:3px;line-height:1.4;}

/* ============ LAST-ROW CENTRING ============
   CSS grid strands a short final row against the left edge. These containers
   are flex instead, so a row holding fewer items than the one above it centres
   underneath. Items still grow to fill a full row; --cl-cols caps each at one
   column's width so a short row cannot stretch to fill. */
.mats,.doors,.team{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cl-gap);}
.mats > *,.doors > *,.team > *{
  /* the basis must BE the column width, not a minimum: flex wraps on basis, so
     a smaller basis lets an extra item squeeze onto the row and the cap never
     applies */
  --cl-w:calc((100% - (var(--cl-cols) - 1) * var(--cl-gap)) / var(--cl-cols));
  flex:0 1 var(--cl-w);
  max-width:var(--cl-w);
  min-width:0;
}
/* column counts stepped to what each item's minimum actually allows */
@media (max-width:1239px){ .team{--cl-cols:4;} }
@media (max-width:859px){  .mats{--cl-cols:2;} }
@media (max-width:819px){  .team{--cl-cols:3;} }
@media (max-width:719px){  .doors{--cl-cols:1;} }
@media (max-width:619px){  .team{--cl-cols:2;} }
@media (max-width:559px){  .mats{--cl-cols:1;} }

/* The hairline grids keep their 1px dividers, so a centred short row would
   expose the divider colour as a band. Step their columns instead, skipping
   any count that would leave one item stranded. */
.hero-side dl{grid-template-columns:repeat(4,minmax(0,1fr));}
.details{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:929px){ .details{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:639px){ .hero-side dl{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:479px){ .details{grid-template-columns:minmax(0,1fr);} }

/* ============ FOOTER ============ */
.site-foot{background:var(--deep);color:var(--deep-muted);padding:clamp(48px,6vw,72px) 0 34px;}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(130px,1fr));gap:clamp(24px,4vw,48px);padding-bottom:36px;border-bottom:1px solid var(--deep-rule);}
.foot-top .wordmark{color:var(--deep-ink);}
.foot-blurb{font-size:14px;max-width:34ch;margin:16px 0 0;line-height:1.55;}
.fcol h5{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--deep-ink);margin:0 0 14px;font-weight:500;}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.fcol a{color:var(--deep-muted);text-decoration:none;font-size:14px;}
.fcol a:hover{color:var(--accent);}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:22px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}

@media (max-width:900px){
  .head-2col{grid-template-columns:1fr;}
  .site-nav{display:none;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .step{grid-template-columns:1fr auto;}
  .step .sd{grid-column:1/-1;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

/* ---- accessibility helpers (WordPress conventions) ---- */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;white-space:nowrap;
}
.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;margin:0;
  top:8px;left:8px;z-index:200;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:2px;
  padding:10px 16px;font-family:"IBM Plex Sans",sans-serif;font-size:14px;
}
/* WordPress admin bar offsets the sticky header when logged in */
body.admin-bar .site-head{top:32px;}
@media (max-width:782px){ body.admin-bar .site-head{top:46px;} }
/* Editor-facing alignment classes for any prose pages */
.alignleft{float:left;margin:0 1.5em 1em 0;}
.alignright{float:right;margin:0 0 1em 1.5em;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}

/* ============ HOVER ============
   The frame reacts, the image eases. Scaling a whole card would soften its
   text, so only images move, inside containers that already clip. Gated behind
   a real pointer so a tap on a phone does not leave a card stuck in its hover
   state, and switched off entirely for reduced motion. */
.plate{overflow:hidden;}
.mcell .mv{font-variant-numeric:tabular-nums;}

@media (hover:hover) and (pointer:fine){
  .detail,.mat,.proof figure,.door,.shot{
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .detail img,.mat img,.shot img,.proof img,.plate img,.member img{
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .detail:hover,.mat:hover,.proof figure:hover,.shot:hover{
    border-color:var(--rule-2);
  }
  .door:hover{border-color:var(--ink);}
  .detail:hover img,.mat:hover img,.proof figure:hover img{transform:scale(1.045);}
  .shot:hover img{transform:scale(1.035);}
  .mode:hover .plate img{transform:scale(1.05);}
  .member:hover img{transform:scale(1.06);}
  .mcell{transition:background .28s ease;}
  .mcell:hover{background:color-mix(in srgb, var(--deep-ink) 5%, var(--deep));}
  .step{transition:background .2s ease;}
  .step:hover{background:color-mix(in srgb, var(--ink) 3%, var(--surface));}
}

@media (prefers-reduced-motion:reduce){
  .detail img,.mat img,.shot img,.proof img,.plate img,.member img{transition:none;}
  .detail:hover img,.mat:hover img,.shot:hover img,.proof figure:hover img,
  .mode:hover .plate img,.member:hover img{transform:none;}
}

/* ============ ANCHOR OFFSET ============
   The header is sticky, so a plain #anchor jump parks the target underneath it.
   scroll-padding on the scroll container fixes every in-page link at once,
   rather than patching each target. */
html{scroll-padding-top:88px;}
/* scroll-padding only takes effect on the scrolling element, and the admin-bar
   class sits on <body>, so the offset has to be selected from <html> */
html:has(body.admin-bar){scroll-padding-top:120px;}
@media (max-width:782px){ html:has(body.admin-bar){scroll-padding-top:134px;} }

/* ============ WAITLIST MODAL ============
   A native <dialog>, which brings focus trapping, Escape to close, an inert
   background and the ::backdrop pseudo-element without scripting any of it. */
.wl-modal{
  border:1px solid var(--rule-2);border-radius:3px;
  background:var(--surface);color:var(--ink);
  padding:clamp(28px,4vw,44px);
  width:min(520px, calc(100vw - 32px));
  box-shadow:0 24px 70px -30px rgba(10,12,6,.55);
}
.wl-modal::backdrop{background:rgba(12,14,8,.55);backdrop-filter:blur(2px);}
.wl-modal .eyebrow{margin-bottom:12px;}
.wl-modal h2{
  font-size:clamp(24px,3.4vw,32px);margin:0 0 22px;
  -webkit-text-stroke:.55px currentColor;
}
.wl-modal .signup{max-width:none;}
.wl-modal .signup-note{margin-top:14px;}
.wl-close{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:2px;
  color:var(--muted);cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}
.wl-close svg{width:14px;height:14px;}
.wl-close:hover{color:var(--ink);border-color:var(--rule-2);}
.wl-modal .signup-done{display:none;align-items:center;gap:10px;margin-top:16px;}
.wl-modal.is-done .signup{display:none;}
.wl-modal.is-done .signup-note,
.wl-modal.is-done .signup-privacy{display:none;}
.wl-modal.is-done .signup-done{display:flex;}
/* the dialog is opened by script, so it must be hidden until then */
.wl-modal:not([open]){display:none;}
body.wl-open{overflow:hidden;}
@media (prefers-reduced-motion:no-preference){
  .wl-modal[open]{animation:wl-in .22s cubic-bezier(.22,.61,.36,1);}
  @keyframes wl-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
}

/* the honeypot must be reachable by bots but never seen or focusable by people */
.ofyce-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.signup input[aria-invalid="true"]{border-color:var(--crit,#A5301C);}
.signup-error{
  margin:10px 0 0;font-size:13.5px;color:#A5301C;
}
.wl-modal .signup-error{margin-top:12px;}
.signup-privacy{
  margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:44ch;
}
.signup-privacy a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.signup-privacy a:hover{color:var(--ink);}
.wl-modal .signup-privacy{max-width:none;}
.signup-wrap.is-done .signup-privacy{display:none;}

/* Two confirmations: one promises an email, one does not. The server says
   which is true for this submission; never show both. */
.signup-done .done-nomail{display:none;}
.is-nomail .signup-done .done-mailed{display:none;}
.is-nomail .signup-done .done-nomail{display:inline;}


/* ---------- password gate ----------
   Stands in for the whole page when it is password protected. */
.gate{padding:120px 0 160px;}
.gate-card{max-width:520px;}
.gate-card .eyebrow{margin:0 0 14px;}
.gate-card h1{font-size:clamp(30px,4.4vw,46px);margin:0 0 14px;}
.gate-sub{color:var(--ink-2);font-size:16px;line-height:1.55;margin:0 0 26px;max-width:42ch;}
.gate .post-password-form{max-width:420px;}
.gate .post-password-form input[type=password]{flex:1 1 200px;}
@media (max-width:640px){.gate{padding:72px 0 96px;}}