/* ==========================================================================
   Lab-47
   Bold indie studio. Oversized condensed type (the wordmark's own voice),
   2px rules, hard corners, paper / ink / orange. Light and dark flip
   paper and ink; orange stays.
   ========================================================================== */

/* --- theme --------------------------------------------------------------- */
:root{
  --paper:#F4F2EC;
  --ink:#0B0B0B;
  --orange:#FF7C1F;

  --bg:var(--paper);--fg:var(--ink);
  --fg-2:#3A3A37;--fg-3:#77776F;
  --surface:var(--paper);--surface-2:#E9E6DE;
  --line:var(--ink);--line-2:var(--ink);
  --accent:var(--orange);--accent-solid:var(--orange);--accent-weak:rgba(255,124,31,.16);
  --ok:#2E8B4A;--shadow:none;--r:0;--r-sm:0;

  --disp:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:var(--sans);

  --rule:2px;
  --pad:clamp(20px,4vw,56px);
  --content:1240px;
  --bar:64px;
  --ease:linear;
}
:root[data-theme="dark"]{
  --bg:var(--ink);--fg:#EAE4D3;
  --fg-2:#C9C3B3;--fg-3:#8F8A7C;
  --surface:var(--ink);--surface-2:#171717;
  --line:#EAE4D3;--line-2:#EAE4D3;
  --ok:#8FD08F;
}

/* --- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,video,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:var(--rule) solid var(--orange);outline-offset:2px}
:target{scroll-margin-top:calc(var(--bar) + 20px)}

/* display type: the wordmark's condensed voice, set huge */
.t1,.t2,.hero h1,.gcell h3,.grow h3,.grow h1,.block h3,.list .lt,.foot-big,
.h1,.h2,.h3,.h4,.rows .row h4,.doc-sec > h2,.card .h3,.card .h4{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:0;
}
.t1{font-size:clamp(3.4rem,11vw,12rem);font-weight:900;line-height:.86}
.t2{font-size:clamp(2.6rem,6.5vw,6.5rem);font-weight:900;line-height:.88;margin-bottom:clamp(28px,5vh,56px)}
.h1{font-size:clamp(2.8rem,7vw,7rem);font-weight:900;line-height:.88}
.h2{font-size:clamp(2.1rem,4.6vw,4.4rem);font-weight:900}
.h3{font-size:clamp(1.5rem,2.4vw,2.2rem)}
.h4{font-size:1.3rem}
.em{color:var(--orange)}

.lede{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;max-width:56ch;color:var(--fg-2)}
.lede strong{color:var(--fg);font-weight:600}
.prose{color:var(--fg-2);max-width:64ch}
.prose strong{color:var(--fg);font-weight:600}
.muted{color:var(--fg-2)}
.faint{color:var(--fg-3)}
.mono{font-size:.9em}

/* small caps labels */
.lab,.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  font-family:var(--disp);font-weight:700;font-size:.98rem;letter-spacing:.1em;text-transform:uppercase;
}
.lab::before,.eyebrow::before{content:"";width:10px;height:10px;background:var(--orange);flex:none}
.crumb{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin:0 0 18px}
.crumb a{color:inherit}
.crumb a:hover{color:var(--orange)}
.crumb .sep{margin:0 8px}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--pad)}
.wrap--wide{max-width:1440px}
.sec,.section{padding:clamp(52px,8vh,104px) 0;border-top:var(--rule) solid var(--line)}
.section--tight{padding:clamp(32px,5vh,56px) 0}
.sec--inv{background:var(--fg);color:var(--bg)}
.sec--flush{padding-top:0;border-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,4vh,40px)}
.sec-head .lab{margin:0}
.more{font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;border-bottom:var(--rule) solid currentColor;padding-bottom:3px}
.more:hover{color:var(--orange)}
.section-head{margin-bottom:clamp(22px,4vh,40px);max-width:70ch}
.section-head .h2{margin-bottom:14px}
.section-head-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,4vh,40px)}
.section-head-row .section-head{margin-bottom:0}

/* --- the bar ------------------------------------------------------------- */
.bar{
  position:sticky;top:0;z-index:100;height:var(--bar);
  display:flex;align-items:center;gap:18px;padding:0 var(--pad);
  background:var(--bg);border-bottom:var(--rule) solid var(--line);
}
.bar .brand{margin-right:auto;display:inline-flex;align-items:center}
.bar .brand img{height:22px;width:auto}
.on-dark{display:none}
:root[data-theme="dark"] .on-light{display:none}
:root[data-theme="dark"] .on-dark{display:block}
.bar nav{display:flex;align-items:center;gap:22px}
.bar nav a{font-family:var(--disp);font-weight:700;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase}
.bar nav a:hover{color:var(--orange)}
.bar nav a[aria-current="page"]{color:var(--orange)}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;flex:none;
  border:var(--rule) solid var(--line);background:transparent;color:var(--fg);cursor:pointer;
}
.icon-btn:hover{background:var(--fg);color:var(--bg)}
.icon-btn svg{width:16px;height:16px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
.nav-toggle{display:none}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}
.nav-toggle[aria-expanded="true"] .m{display:none}
@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .bar nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:var(--rule) solid var(--line);
  }
  .bar nav[hidden]{display:none}
  html:not(.js) .bar nav[hidden]{display:flex}
  html:not(.js) .nav-toggle{display:none}
  .bar nav a{padding:16px var(--pad);font-size:1.4rem;border-top:var(--rule) solid var(--line)}
}

/* --- hero ---------------------------------------------------------------- */
.hero{padding:clamp(40px,9vh,120px) 0 clamp(32px,6vh,72px)}
.hero h1{font-size:clamp(4.4rem,14.5vw,16rem);font-weight:900;line-height:.84;letter-spacing:-.005em;margin:0}
.hero h1 .o{color:var(--orange)}
.hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(24px,5vh,52px)}
.hero-sub p{margin:0;font-size:clamp(1rem,1.3vw,1.2rem);max-width:34ch;color:var(--fg-2)}
.down{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,4vw,3.6rem);line-height:1;width:1.3em;height:1.3em;display:inline-flex;align-items:center;justify-content:center;border:var(--rule) solid var(--line)}
.down:hover{background:var(--fg);color:var(--bg)}

/* latest-release bar: the band between hero and grid, static, one link */
.now{
  display:flex;align-items:center;gap:clamp(14px,2.5vw,36px);flex-wrap:wrap;
  padding:20px var(--pad);background:var(--fg);color:var(--bg);
  border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);
}
.now:hover{background:var(--orange);color:var(--ink)}
.now-k{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.now-k::before{content:"";width:10px;height:10px;background:var(--orange);flex:none}
.now:hover .now-k::before{background:var(--ink)}
.now-t{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1;text-transform:uppercase;letter-spacing:.02em}
.now-m{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:var(--rule) solid currentColor;padding:6px 10px;white-space:nowrap}
.now-a{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1}
@media(max-width:620px){.now-a{display:none}.now-t{flex-basis:100%}}

/* --- the games grid ------------------------------------------------------ */
.gamegrid{display:grid;grid-template-columns:1fr 1fr;border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line)}
.gcell{
  position:relative;display:flex;flex-direction:column;color:inherit;background:var(--bg);
  border-top:var(--rule) solid var(--line);border-left:var(--rule) solid var(--line);
  min-height:min(58vh,540px);
}
.gcell .gart{flex:1;display:flex;align-items:center;justify-content:center;padding:8%}
.gcell .gart img{max-height:280px;width:auto}
.gmeta{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 24px 0}
.gcell h3{font-size:clamp(2rem,3.8vw,3.6rem)}
.gline{padding:8px 24px 22px;margin:0;opacity:.8}
.gcell.inv{background:var(--fg);color:var(--bg)}
.gcell.inv .tag{border-color:currentColor}
.gcell:not(.inv):hover h3{color:var(--orange)}
.gcell.inv:hover{background:var(--orange);color:var(--ink)}
.gcell--wide{grid-column:span 2;flex-direction:row;min-height:min(70vh,640px)}
.gcell--low{min-height:min(50vh,440px)}
.gcell--wide .gcopy{flex:1 1 50%;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:16px}
.gcell--wide .gart{flex:1 1 50%;border-left:var(--rule) solid var(--line);padding:0}
.gcell--wide:hover .gcopy h3{color:var(--orange)}
.gcopy h3 small,.grow h3 small,.grow h1 small{display:block;font-family:var(--sans);font-weight:500;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.3;text-transform:none;letter-spacing:0;margin-top:8px;opacity:.8}
.gcopy p{margin:0;max-width:44ch;font-size:1.05rem;line-height:1.5}
.gcopy .go{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;color:var(--orange)}
.gart--frame{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px)!important}
.gart--frame video{width:min(100%,380px);border:var(--rule) solid var(--line)}
.gart--bleed{padding:0!important}
/* steam-style capsule: gameplay behind, wordmark in front.
   Selectors carry extra specificity so the generic .gcell/.grow img rules lose. */
.gart.gart--capsule{position:relative;padding:0!important;overflow:hidden;background:#0B0B0B;display:flex;align-items:center;justify-content:center}
.gart.gart--capsule > img.bg,.gart.gart--capsule > video.bg{
  position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;
}
.gart.gart--capsule::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.gart.gart--capsule > img.logo{
  position:relative;z-index:1;width:min(70%,460px)!important;height:auto!important;max-height:240px!important;object-fit:contain;
}
.gcell .gart.gart--capsule{min-height:320px}
/* clean tile: the wordmark alone on the flat field */
.gcell .gart--word img{width:min(72%,520px);max-height:220px;object-fit:contain}
.grow--hero .gart.gart--capsule > img.logo{width:min(64%,420px)!important}
/* bleed images are taken out of flow so they crop to the cell instead of stretching it */
.gart--bleed{position:relative;overflow:hidden;min-height:260px}
/* selector list outranks the generic .gcell/.grow img sizing (width:auto) */
.gart--bleed img,.gcell .gart.gart--bleed img,.grow .gart.gart--bleed img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;max-height:none!important}
.gart--poster{overflow:hidden}
.gart--poster img{width:100%;height:100%;object-fit:cover;max-height:none!important}
.gart--top img{object-position:top center}
@media(max-width:820px){
  .gamegrid{grid-template-columns:1fr}
  .gcell--wide{grid-column:span 1;flex-direction:column;min-height:0}
  .gcell--wide .gart{border-left:0;border-top:var(--rule) solid var(--line);min-height:300px}
  .gcell--wide .gcopy{order:-1}
}

/* game rows (list page) and the game hero */
.grows{border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line)}
.grow{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule) solid var(--line);border-left:var(--rule) solid var(--line);min-height:min(68vh,600px)}
.grow .gart{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,56px);border-right:var(--rule) solid var(--line);overflow:hidden}
.grow .gart img{max-height:340px;width:auto}
.grow .gart--frame video{width:min(100%,360px);border:var(--rule) solid currentColor}
.grow .gcopy{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:16px}
.grow h3,.grow h1{font-size:clamp(2.6rem,5.6vw,5.6rem);font-weight:900;line-height:.86}
.grow p{margin:0;max-width:48ch;font-size:1.02rem;line-height:1.5}
.grow .crumb{margin:0}
.grow.inv{background:var(--fg);color:var(--bg)}
.grow.inv .gart{border-right-color:currentColor}
.grow.inv .tag{border-color:currentColor}
.ghero{padding:clamp(20px,4vh,44px) 0 0}
.grow--hero{border:var(--rule) solid var(--line)}
.grow--hero .gart{order:2;border-right:0;border-left:var(--rule) solid var(--line)}
@media(max-width:820px){
  .grow,.grow--hero{grid-template-columns:1fr}
  .grow .gart,.grow--hero .gart{order:0;border-right:0;border-left:0;border-bottom:var(--rule) solid var(--line);min-height:260px}
  .grow--hero .gart{order:2;border-bottom:0;border-top:var(--rule) solid var(--line)}
}

/* --- blocks, lists ------------------------------------------------------- */
.blocks,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-right:var(--rule) solid currentColor;border-bottom:var(--rule) solid currentColor}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.block,.card{
  border-top:var(--rule) solid currentColor;border-left:var(--rule) solid currentColor;
  padding:clamp(22px,3vw,36px);min-height:260px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  background:transparent;color:inherit;
}
.block h3{font-size:clamp(1.8rem,3vw,2.8rem)}
.block p,.card p{margin:0;line-height:1.55;opacity:.85}
a.card:hover{background:var(--fg);color:var(--bg)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-kicker{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.card .card-foot{margin-top:auto}
.card-icon{display:none}
@media(max-width:860px){.blocks,.grid,.grid--2{grid-template-columns:1fr}}

.list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:22px 0;border-top:var(--rule) solid var(--line)}
.list a:last-child{border-bottom:var(--rule) solid var(--line)}
.list .lt{font-size:clamp(1.6rem,3.2vw,3rem);line-height:.92}
.list--big .lt{font-size:clamp(2rem,4.4vw,4.2rem)}
.list .lm{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.list .ld{grid-column:1/-1;max-width:70ch;color:var(--fg-2);margin-top:6px}
.list a:hover .lt{color:var(--orange)}
@media(max-width:620px){.list a{grid-template-columns:1fr}.list .lm{white-space:normal}}

.rows{border-top:var(--rule) solid var(--line)}
.rows .row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:24px;padding:24px 0;border-bottom:var(--rule) solid var(--line)}
.rows .row h4{font-size:clamp(1.4rem,2.2vw,2rem)}
.rows .row p{margin:0;color:var(--fg-2)}
@media(max-width:700px){.rows .row{grid-template-columns:1fr;gap:8px}}
.index{border-top:var(--rule) solid var(--line)}
.index a{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:var(--rule) solid var(--line)}
.index .t{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:1.4rem}
.index .d{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);flex:1}

/* --- controls ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:800;font-size:1.1rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;
  padding:13px 18px;border:var(--rule) solid currentColor;color:inherit;background:transparent;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--fg);color:var(--bg)}
.inv .btn:hover,.sec--inv .btn:hover{background:var(--bg);color:var(--fg)}
.btn svg{width:16px;height:16px;flex:none}
.btn .arr{display:inline}
.btn--orange,.btn--accent,.btn--primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn--orange:hover,.btn--accent:hover,.btn--primary:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.inv .btn--orange:hover,.sec--inv .btn--orange:hover{background:var(--bg);border-color:var(--bg);color:var(--fg)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-row--mt{margin-top:28px}
.link-arrow{font-family:var(--disp);font-weight:800;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase}
.link-arrow:hover{color:var(--orange)}
.tag,.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  padding:7px 10px;border:var(--rule) solid var(--line);white-space:nowrap;
}
.tag--live::before,.pill--live::before{content:"";width:8px;height:8px;background:var(--orange)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags .tag{border-width:1px;white-space:normal;text-align:left}

/* --- page header --------------------------------------------------------- */
.ph{padding:clamp(44px,8vh,96px) 0 clamp(32px,6vh,64px);border-bottom:var(--rule) solid var(--line)}
.ph .lab{margin-bottom:22px}
.ph .t1{margin-bottom:22px}
.ph .lede{margin:0}
.page-hero{padding:clamp(44px,8vh,96px) 0 clamp(32px,6vh,64px);border-bottom:var(--rule) solid var(--line)}
.page-hero .h1{margin-bottom:18px}

/* --- contact ------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact-side{display:grid;gap:18px;padding-top:4px}
.big-link{font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,2.1rem);line-height:1;text-transform:uppercase;border-bottom:var(--rule) solid currentColor;padding-bottom:4px;width:fit-content}
.big-link:hover{color:var(--orange)}
@media(max-width:820px){.contact{grid-template-columns:1fr}}
.form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--fg);background:transparent;
  border:var(--rule) solid var(--line);padding:12px 14px;border-radius:0;
}
.field textarea{resize:vertical;min-height:160px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
.field .err{display:none;font-size:.82rem;color:#C4553F;margin-top:6px}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#C4553F}
.field.invalid .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:.9rem;color:var(--fg-2);min-height:1.3em}
.form-status.ok{color:var(--ok)}
.form-status.bad{color:#C4553F}

/* --- media --------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.split + .split{margin-top:clamp(40px,7vh,72px)}
.split--flip .media{order:2}
.split .copy h3{margin-bottom:12px}
@media(max-width:820px){.split,.split--flip{grid-template-columns:1fr}.split--flip .media{order:0}}
.shot{display:block;margin:0;overflow:hidden;border:var(--rule) solid var(--line);background:var(--surface-2);cursor:zoom-in}
.shot img{width:100%}
.shot figcaption{padding:12px 14px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-top:var(--rule) solid var(--line)}
.shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.shot-grid--phone{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.shot--phone{display:flex;flex-direction:column;align-items:center}
.shot--phone img{max-height:480px;width:auto;margin:0 auto}
.shot--phone figcaption{width:100%}
.clip{overflow:hidden;aspect-ratio:16/9;border:var(--rule) solid var(--line);background:var(--surface-2)}
.clip video{width:100%;height:100%;object-fit:cover}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:4vmin;background:color-mix(in srgb,var(--bg) 94%,transparent);opacity:0;pointer-events:none;transition:opacity .12s linear}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox figure{margin:0;max-width:1200px;width:100%;max-height:100%;display:flex;flex-direction:column}
.lightbox img{width:auto;max-width:100%;max-height:82vh;margin:0 auto;border:var(--rule) solid var(--line)}
.lightbox figcaption{margin-top:12px;text-align:center;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.lightbox .close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:var(--rule) solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;font-size:1rem}

/* --- specs, documents ---------------------------------------------------- */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border:var(--rule) solid var(--line);margin:0}
.specs .cell{padding:16px 18px;border-left:var(--rule) solid var(--line)}
.specs .cell:first-child{border-left:0}
.specs dt{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px}
.specs dd{margin:0;font-weight:500}
@media(max-width:560px){.specs .cell{border-left:var(--rule) solid var(--line)}.specs .cell:nth-child(odd){border-left:0}.specs .cell:nth-child(n+3){border-top:var(--rule) solid var(--line)}}
.deflist{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;font-size:.95rem}
.deflist dt{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding-top:3px}
.deflist dd{margin:0}

.doc-layout{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.doc-layout--reverse{grid-template-columns:minmax(0,1fr) minmax(0,240px)}
@media(max-width:900px){.doc-layout,.doc-layout--reverse{grid-template-columns:1fr}}
.doc-body{min-width:0}
.doc-toc{position:sticky;top:calc(var(--bar) + 24px)}
@media(max-width:900px){.doc-toc{position:static}}
.doc-toc ol{list-style:none;margin:0;padding:0;border-left:var(--rule) solid var(--line)}
.doc-toc li a{display:block;padding:7px 0 7px 14px;margin-left:-2px;font-size:.9rem;border-left:var(--rule) solid transparent}
.doc-toc li a:hover{color:var(--orange)}
.doc-toc li a.active{border-left-color:var(--orange);font-weight:600}
.doc-sec{padding-bottom:clamp(36px,6vh,56px)}
.doc-sec + .doc-sec{padding-top:clamp(36px,6vh,56px);border-top:var(--rule) solid var(--line)}
.doc-sec > h2{font-size:clamp(2rem,4vw,3.4rem);margin-bottom:20px}
.doc-sec h3{font-size:1.15rem;font-weight:600;margin:28px 0 8px}
.doc-sec p,.doc-sec li{color:var(--fg-2)}
.doc-sec p{max-width:68ch}
.doc-sec ul,.doc-sec ol{margin:0 0 1em;padding-left:1.15em;max-width:68ch}
.doc-sec li{margin-bottom:.45em}
.doc-sec strong{color:var(--fg);font-weight:600}
.callout{border:var(--rule) solid var(--line);border-left-width:10px;border-left-color:var(--orange);padding:20px 22px;margin:24px 0}
.callout p{margin:0;color:var(--fg-2)}
.callout .eyebrow{margin-bottom:8px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:24px 0;border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line)}
.metric{border-top:var(--rule) solid var(--line);border-left:var(--rule) solid var(--line);padding:20px}
.metric .k{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.metric .n{font-family:var(--disp);font-weight:900;font-size:2.6rem;line-height:.9}
.metric .n .accent{color:var(--orange)}
.metric p{margin:8px 0 0;font-size:.88rem;color:var(--fg-2)}
.diagram{border:var(--rule) solid var(--line);padding:26px;margin:26px 0}
.diagram svg{width:100%;height:auto}
.diagram .dn{fill:var(--bg);stroke:var(--fg);stroke-width:1.5}
.diagram .dn.acc{stroke:var(--fg)}
.diagram .dn.hot{stroke:var(--orange);stroke-width:2;fill:var(--accent-weak)}
.diagram .dn.go{stroke:var(--ok);stroke-width:2}
.diagram .dt{fill:var(--fg);font-family:var(--sans);font-size:13px}
.diagram .dt.hd{font-weight:600}
.diagram .dt.sm{fill:var(--fg-3);font-size:10.5px}
.diagram .edge{fill:none;stroke:var(--fg);stroke-width:1.2;opacity:.5}
.diagram .edge.hot{stroke:var(--orange);opacity:1}
.diagram .dwrap{fill:transparent;stroke:var(--fg);stroke-width:1;stroke-dasharray:5 5;opacity:.5}
.diagram .dlabel{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:var(--orange)}
.diagram .elab{fill:var(--fg-3);font-family:var(--sans);font-size:10px}
.dlegend{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;padding-top:16px;border-top:var(--rule) solid var(--line);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.dlegend span{display:inline-flex;align-items:center;gap:8px}
.dlegend i{width:10px;height:10px;border:1.5px solid var(--fg);flex:none}
.dlegend i.hot{border-color:var(--orange);background:var(--accent-weak)}
.dlegend i.go{border-color:var(--ok)}
.table-wrap{overflow-x:auto;margin:24px 0;border:var(--rule) solid var(--line)}
table.data{width:100%;min-width:500px;border-collapse:collapse;font-size:.92rem}
table.data th,table.data td{padding:11px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
table.data thead th{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td{color:var(--fg-2)}
table.data td:first-child{color:var(--fg);font-weight:500}
code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:var(--surface-2);padding:1px 5px}
.badge{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1.5px solid var(--line);vertical-align:middle;margin-left:8px}
.badge--known{border-color:var(--ok);color:var(--ok)}
.badge--estimate{border-color:var(--orange);color:var(--orange)}
.cta{border:var(--rule) solid var(--line);padding:clamp(28px,4vw,48px)}
.cta .h2{margin-bottom:14px}

/* --- footer -------------------------------------------------------------- */
.foot{background:var(--fg);color:var(--bg);border-top:var(--rule) solid var(--line);padding:clamp(56px,9vh,110px) 0 36px}
.foot-big{font-size:clamp(3.4rem,11vw,12rem);font-weight:900;line-height:.86;margin:0 0 20px}
.foot-mail{display:inline-block;font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,3vw,2.6rem);line-height:1;text-transform:uppercase;color:var(--orange);border-bottom:var(--rule) solid currentColor;padding-bottom:4px}
.foot-mail:hover{color:inherit}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:clamp(40px,8vh,90px);padding-top:26px;border-top:var(--rule) solid currentColor}
.foot-logo{height:26px;width:auto}
.foot .on-dark{display:block}
.foot .on-light{display:none}
:root[data-theme="dark"] .foot .on-dark{display:none}
:root[data-theme="dark"] .foot .on-light{display:block}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a{font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.foot nav a:hover{color:var(--orange)}
.foot-copy{font-size:.82rem;opacity:.7}

/* --- utilities ----------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--fg);color:var(--bg);padding:9px 14px}
.skip-link:focus{left:12px;top:12px}
.rv{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}