/* =====================================================================
   findingdshah.xyz design language
   One dark island world. Light comes from the lower left: top faces brightest,
   left faces about 75%, right faces about 50%. Every component obeys it.
   ===================================================================== */

@font-face{font-family:"Archivo";src:url(fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-var-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  /* surfaces */
  --sky:#0B0D14; --panel:#12151F; --panel-2:#181C28; --well:#0F121A; --rule:#262B3A; --rule-2:#1C2030;
  /* ink */
  --text:#ECEFF5; --body:#C3C9D6; --mute:#9AA2B5; --faint:#848CA0;
  /* the studio */
  --violet:#6A2BFF; --violet-hi:#8E66FF; --violet-lo:#4316C4; --violet-deep:#2C0E86; --glow:#DCE1EA;
  /* materials */
  --stone-t:#C9CFDB; --stone-l:#9AA2B5; --stone-r:#5E667A; --stone-s:#B3BACB; --stone-sr:#788096;
  --made-t:#CDBBFF; --made-l:#9675FF; --made-r:#5B33D6;
  --dim-t:#3A4052; --dim-l:#2D3242; --dim-r:#22262F;
  --ground-t:#171A26; --ground-l:#12141E; --ground-r:#0D0F17; --road:#1F2331; --yard:#1B1E2B;
  --win-off:#2A2F40; --win-on:#F4F6FB;
  /* status */
  --live:#34C38F; --pilot:#B9A4FF; --build:#9AA2B5;
  /* the lens currently chosen (set by script) */
  --lc:#ECEFF5; --lc-ink:#0B0D14;
  /* type */
  --f-d:"Archivo","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  --f-b:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-m:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* type scale */
  --t-hero:clamp(30px,3.2vw,44px); --t-title:clamp(34px,4.6vw,62px); --t-h2:clamp(24px,2.5vw,34px); --t-h3:19px;
  --t-lede:clamp(17px,1.55vw,20px); --t-body:16px; --t-small:14px; --t-cap:11px;
  /* space: 4 8 12 16 24 32 48 72 112 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --gutter:max(16px,env(safe-area-inset-left,0px)); --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --max:1240px; --measure:66ch;
  /* depth: the stepped isometric edge used by buttons and cards */
  --edge:1px .5px 0 #9AA2B5,2px 1px 0 #9AA2B5,3px 1.5px 0 #9AA2B5,4px 2px 0 #646C80;
  --edge-panel:2px 1px 0 #2E3446,4px 2px 0 #222736,6px 3px 0 #1A1E2A;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
main>*,.case>*{min-width:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--text);font-family:var(--f-b);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--f-d);font-stretch:118%;font-weight:640;letter-spacing:-.01em;margin:0;text-wrap:balance;line-height:1.08}
p{margin:0}
a{color:var(--text);text-decoration-color:#4A5068;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--glow);text-decoration-color:var(--glow)}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:2px}
img,svg,video{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:#0B0D14;padding:8px 12px;z-index:10}.skip:focus{left:16px}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
main{display:grid;gap:var(--s8);padding-bottom:var(--s8)}
.sec{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--s4) var(--s7)}
.sec>.sec-h{display:grid;gap:var(--s2);align-content:start}
.sec>.sec-h h2{font-size:clamp(22px,2.2vw,28px)}
.sec>.sec-h p{color:var(--mute);font-size:var(--t-small)}
.measure{max-width:var(--measure)}

/* ---------- type roles ---------- */
.cap{font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);line-height:1.4}
.kick{display:inline-flex;align-items:center;gap:10px}
.kick i{width:10px;height:10px;background:var(--k,var(--text));transform:skewY(-30deg);flex:none}
.title{font-size:var(--t-title);line-height:1.02}
.lede{font-size:var(--t-lede);color:var(--mute);max-width:52ch;line-height:1.5}
.prose{display:grid;gap:var(--s4);max-width:var(--measure)}
.prose p,.prose li{color:var(--body)}
.prose h2{font-size:var(--t-h2);margin-top:var(--s5)}
.prose h3{font-size:var(--t-h3);margin-top:var(--s4)}
.prose ul,.prose ol{margin:0;padding-left:1.2em;display:grid;gap:var(--s2)}
.prose b,.prose strong{color:var(--text);font-weight:600}
.note{color:var(--faint);font-size:12.5px;line-height:1.5}
.todo{display:inline-block;color:#E2C044;font-size:12.5px;border:1px dashed #6B5B22;padding:3px 8px;line-height:1.4}

/* his own line, used as a chapter break */
.line{font-family:var(--f-d);font-stretch:112%;font-weight:560;font-size:clamp(22px,2.6vw,34px);line-height:1.18;max-width:28ch;color:var(--text);margin:0;padding-left:var(--s5);border-left:3px solid var(--violet-hi)}
.line cite{display:block;margin-top:var(--s3);font-family:var(--f-b);font-style:normal;font-size:var(--t-small);color:var(--faint);font-stretch:100%}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:20px 0}
.mark{font-family:var(--f-d);font-stretch:125%;font-weight:700;font-size:15px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);white-space:nowrap}
.mark svg{width:22px;height:22px}
.nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-family:var(--f-d);font-stretch:105%;font-weight:560;font-size:13.5px;text-decoration:none;color:var(--mute);padding:10px 10px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--text)}
.menu{display:none}

/* ---------- you are here ---------- */
.here{display:flex;align-items:center;gap:var(--s4);padding:var(--s2) 0 0}
.here .isle{width:96px;height:auto;flex:none}
.here .cap b{color:var(--text);font-weight:600}

/* ---------- page head ---------- */
.head{display:grid;gap:var(--s4);padding-top:var(--s6);max-width:880px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:14px;letter-spacing:.02em;padding:12px 16px;min-height:44px;background:#ECEFF5;color:#0B0D14;text-decoration:none;box-shadow:var(--edge);transition:transform .12s,box-shadow .12s}
.btn:hover{color:#0B0D14;background:#FFFFFF}
.btn:active{transform:translate(3px,1.5px);box-shadow:1px .5px 0 #646C80}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--rule),2px 1px 0 var(--rule),3px 1.5px 0 var(--rule)}
.btn.ghost:hover{color:var(--glow)}
.btn[hidden]{display:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- lens keys ---------- */
.lens{display:flex;flex-wrap:wrap;gap:10px 6px;padding:0 6px 6px 0}
.key{position:relative;border:0;cursor:pointer;background:var(--panel-2);color:var(--mute);padding:9px 12px;min-height:40px;font-family:var(--f-d);font-stretch:100%;font-weight:600;font-size:13px;letter-spacing:.02em;
  box-shadow:1px .5px 0 #070910,2px 1px 0 #070910,3px 1.5px 0 #070910,4px 2px 0 #070910,inset 0 0 0 1px var(--rule);transition:transform .18s ease,box-shadow .18s ease,background .25s,color .25s}
.key:hover{color:var(--text)}
.key[aria-pressed="true"],.key[role="tab"][aria-selected="true"]{background:var(--lc);color:var(--lc-ink);transform:translate(3px,1.5px);box-shadow:1px .5px 0 color-mix(in srgb,var(--lc) 55%,#000),inset 0 0 0 1px color-mix(in srgb,var(--lc) 70%,#fff)}
.ldots{display:inline-flex;gap:4px;align-items:center}
.ldots i{width:7px;height:7px;transform:skewY(-30deg);display:block}

/* ---------- status chip ---------- */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.status i{width:8px;height:8px;transform:skewY(-30deg);background:var(--build)}
.status.live i{background:var(--live)} .status.live{color:#9FE3C7}
.status.pilot i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--pilot)} .status.pilot{color:var(--pilot)}
.status.build i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--build);outline:1px dashed var(--build);outline-offset:1px}

/* ---------- place plaque (the label that floats over the island) ---------- */
.plaque{position:relative;background:#141824;padding:10px 12px 9px;box-shadow:2px 1px 0 #262B3A,4px 2px 0 #1C2030;display:inline-grid;gap:2px;min-width:0}
.plaque::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--pc,var(--stone-t))}
.plaque b{font-family:var(--f-d);font-stretch:118%;font-weight:650;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.plaque span{font-size:12px;color:var(--mute)}

/* ---------- iso materials (SVG) ---------- */
svg polygon{stroke-width:.6;stroke-linejoin:round}
.t{fill:var(--T);stroke:var(--T)} .l{fill:var(--L);stroke:var(--L)} .r{fill:var(--R);stroke:var(--R)} .s{fill:var(--S);stroke:var(--S)} .sr{fill:var(--SR);stroke:var(--SR)}
.stone{--T:var(--stone-t);--L:var(--stone-l);--R:var(--stone-r);--S:var(--stone-s);--SR:var(--stone-sr)}
.made{--T:var(--made-t);--L:var(--made-l);--R:var(--made-r);--S:var(--made-t);--SR:var(--made-l)}
.studio{--T:var(--violet-hi);--L:var(--violet);--R:var(--violet-lo);--S:#7C4DFF;--SR:#5420E0}
.ground{--T:var(--ground-t);--L:var(--ground-l);--R:var(--ground-r)}
.road{fill:var(--road)} .yard{fill:var(--yard)} .lawn{fill:#232838}
.shadow{fill:#05060A;opacity:.55}
.win{fill:var(--win-on);stroke:none} .glz{fill:#EFE9FF;stroke:none}
.scaf{stroke:var(--stone-l);stroke-width:1.4;fill:none}
.plot{fill:none;stroke:var(--glow);stroke-width:2;stroke-dasharray:6 5}
.it.off{filter:saturate(.1) brightness(.34)}
.it.off .win{fill:var(--win-off)}
.isle,.obj{display:block;width:100%;height:auto;overflow:visible}

/* ---------- build tile (the Work shelf, Home rows, related builds) ---------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s5)}
.btile{position:relative;display:grid;grid-template-rows:auto 1fr;align-content:start;gap:var(--s3);text-decoration:none;color:var(--text);background:var(--panel);padding:var(--s4) var(--s4) var(--s5);box-shadow:var(--edge-panel);transition:transform .2s ease,opacity .35s ease,filter .35s ease}
.btile .pic{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(closest-side,#1A1E2B,transparent)}
.btile .pic svg{width:62%;height:auto;max-height:100%}
.btile h3{font-size:19px}
.btile p{color:var(--mute);font-size:var(--t-small);line-height:1.5}
.btile>div:last-child{align-content:start}
.btile .meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
a.tile:hover{transform:translate(-2px,-2px);color:var(--text)}
a.tile:hover h3{color:var(--glow)}
.btile.dim{opacity:.32;filter:saturate(.2)}

/* list rows (home, writing, plain lists) */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.3fr) 210px;gap:var(--s4);align-items:center;padding:14px 0;text-decoration:none;color:var(--text);min-height:56px}
.rows a:hover b{color:var(--glow)}
.rows .ic svg{width:48px;height:auto;display:block}
.rows b{font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:17px;line-height:1.2}
.rows span.d{color:var(--mute);font-size:var(--t-small);line-height:1.5}
.rows .end{display:flex;gap:var(--s3);align-items:center;justify-content:flex-end}

/* ---------- record table ---------- */
.record{display:grid;border-top:1px solid var(--rule);margin:0}
.record>div{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:var(--s4);padding:14px 0;border-bottom:1px solid var(--rule)}
.record dt{font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.record dd{margin:0;color:var(--body)}

/* data table */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t caption{text-align:left;color:var(--faint);font-size:12.5px;padding-bottom:8px}
.t th{text-align:left;font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
.t td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--body)}
.t td:first-child{font-weight:600;color:var(--text)}

/* prompt / code */
pre{margin:0;background:var(--well);padding:var(--s4) var(--s5);overflow-x:auto;font-family:var(--f-m);font-size:13px;line-height:1.6;color:#C8CEDB;box-shadow:inset 3px 0 0 var(--rule)}

/* the fold */
details.fold{border-top:1px solid var(--rule)}
details.fold>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) 0;font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:17px;min-height:56px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
details.fold[open]>summary::after{transform:rotate(225deg)}
details.fold>.prose{padding:var(--s2) 0 var(--s6)}

/* ---------- the try-it machine ---------- */
.machine{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s5) var(--s7);align-items:center}
.machine .stage{min-width:0}
.machine .stage svg{display:block;width:100%;height:auto;overflow:visible}
.machine .lbl text{font-family:var(--f-d);font-stretch:118%;font-weight:650;font-size:13px;letter-spacing:.12em;fill:var(--text);text-transform:uppercase}
.machine .lbl .no{font-size:11px;fill:var(--faint);letter-spacing:.08em}
.machine .lbl rect{fill:#141824}
.machine .lbl.on rect.top{fill:var(--violet-hi)}
.machine .st polygon{transition:fill .5s ease}
.card{background:var(--panel);padding:22px 22px 20px;box-shadow:var(--edge-panel);display:grid;gap:12px;min-height:280px;align-content:start}
.card .k{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.card h3{font-size:22px}
.card p{color:var(--mute)}
.card p .obj{color:var(--text);font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:20px;line-height:1.25;display:block}
.card p s{color:var(--faint);text-decoration-color:#6B7286}
.card .ex{background:var(--well);padding:12px 14px;font-size:14.5px;color:var(--text);display:grid;gap:6px}
.card .ex:empty,.card .ex[hidden]{display:none}
.card .ex b{font-weight:600}
.chk{display:flex;gap:8px;align-items:baseline;color:var(--mute)}
.chk::before{content:"";width:8px;height:8px;background:var(--live);transform:skewY(-30deg) translateY(-1px);flex:none}
.mini-score{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 14px}
.mini-score span{display:flex;justify-content:space-between;gap:8px;color:var(--mute);font-size:13.5px;border-bottom:1px solid var(--rule-2);padding:3px 0}
.mini-score b{color:var(--text);font-family:var(--f-d);font-stretch:112%}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.steps span{font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:4px 0}
.steps span.on{color:var(--text)}.steps span.done{color:var(--mute)}
.steps i{color:var(--rule);font-style:normal}
/* without JavaScript the machine is a plain ordered list */
.mlist{margin:0;padding:0;list-style:none;display:grid;gap:var(--s3);counter-reset:m}
.mlist li{counter-increment:m;display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--rule)}
.mlist li::before{content:"0" counter(m);font-family:var(--f-d);font-stretch:112%;font-weight:600;color:var(--faint);font-size:13px;padding-top:2px}
.mlist b{display:block;font-family:var(--f-d);font-stretch:112%;font-weight:640}
.mlist p{color:var(--mute)}
.js .machine-nojs{display:none}
.machine-js{display:none}.js .machine-js{display:grid}

/* ---------- next in the story ---------- */
.next{border-top:1px solid var(--rule);padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:center}
.next a{font-family:var(--f-d);font-stretch:115%;font-weight:640;font-size:clamp(18px,1.8vw,22px);text-decoration:none;display:inline-flex;gap:12px;align-items:center}
.next a::after{content:"→";color:var(--mute)}

/* ---------- contact block ---------- */
.contact{background:var(--panel);box-shadow:var(--edge-panel);padding:var(--s6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:end}
.contact h2{font-size:var(--t-h2);max-width:20ch}
.contact .ways{display:flex;gap:10px;flex-wrap:wrap}
.copy-ok{color:var(--live);font-size:13px;min-height:1.4em}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding:var(--s5) 0 var(--s7);border-top:1px solid var(--rule-2);color:var(--faint);font-size:13px}
.foot a{color:var(--mute)}

/* ---------- grids of small cards (nine fronts, off the clock, rules) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s4)}
.cards>div{background:var(--panel);padding:var(--s5);display:grid;gap:var(--s2);align-content:start;box-shadow:inset 0 2px 0 var(--cc,var(--rule))}
.cards h3{font-size:17px}
.cards p{color:var(--mute);font-size:15px;line-height:1.55}

@media (max-width:900px){
  .sec{grid-template-columns:minmax(0,1fr)}
  .machine{grid-template-columns:minmax(0,1fr)}
  .record>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .rows a{grid-template-columns:44px minmax(0,1fr);row-gap:2px}
  .rows a span.d{grid-column:2}
  .rows .end{grid-column:2;justify-content:flex-start}
  .contact{grid-template-columns:minmax(0,1fr);padding:var(--s5)}
  main{gap:var(--s7)}
}
@media (max-width:760px){
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;font-family:var(--f-d);font-stretch:105%;font-weight:600;font-size:14px;padding:10px 12px;min-height:44px;display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--rule)}
  .menu summary::-webkit-details-marker{display:none}
  .menu nav{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);box-shadow:var(--edge-panel);display:grid;min-width:200px;z-index:5;padding:6px 0}
  .menu nav a{padding:12px 16px;text-decoration:none;color:var(--text);font-family:var(--f-d);font-stretch:105%;font-weight:560}
  .here .isle{width:72px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
  :root{--sky:#fff;--text:#111;--body:#222;--mute:#444;--faint:#666;--panel:#fff;--rule:#ccc}
  .bar .nav,.menu,.here,.machine-js,.contact,.next,.lens{display:none!important}
  body{background:#fff;color:#111}
}

/* place materials, generated from data.mjs OWN */
.m-pdeu{--T:#A3E635;--L:#79aa27;--R:#4e6e19;--S:#93cf30;--SR:#689322}
.m-markets{--T:#38BDF8;--L:#298cb8;--R:#1b5b77;--S:#32aadf;--SR:#24799f}
.m-chatr{--T:#FB7185;--L:#ba5462;--R:#783640;--S:#e26678;--SR:#a14855}
.m-uplers{--T:#2DD4BF;--L:#219d8d;--R:#16665c;--S:#29bfac;--SR:#1d887a}
.m-zomato{--T:#F59E0B;--L:#b57508;--R:#764c05;--S:#dd8e0a;--SR:#9d6507}
.m-humber{--T:#86EFAC;--L:#63b17f;--R:#407353;--S:#79d79b;--SR:#56996e}
.m-tcules{--T:#8B7CFF;--L:#675cbd;--R:#433c7a;--S:#7d70e6;--SR:#594fa3}

/* =====================================================================
   Page patterns. Each page has one signature piece; these are their styles.
   ===================================================================== */

/* home */
.hx{margin-top:-8px}
.hx .hero{min-height:calc(100svh - 84px)}
.now{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:var(--s5)}
.thennow{display:grid;gap:var(--s2)}
.thennow p{font-family:var(--f-d);font-stretch:118%;font-weight:640;font-size:clamp(26px,3.6vw,48px);line-height:1.05;letter-spacing:-.01em}
.thennow .then{color:var(--faint)}
.thennow .nowl{color:var(--text)}
.rows li.dim{opacity:.35}

/* about: the walk through the places */
.intro2{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--s6);align-items:start}
.photo{margin:0;display:grid;gap:var(--s2)}
.photo img{width:100%;height:auto;display:block;filter:grayscale(.15)}
.photo figcaption{color:var(--faint);font-size:12.5px}
.walk{display:grid;gap:0;border-top:1px solid var(--rule)}
.stop{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s6);padding:var(--s6) 0;border-bottom:1px solid var(--rule);align-items:center}
.stop-pic svg{width:100%;max-width:240px;height:auto;display:block;margin:0 auto}
.stop-txt{display:grid;gap:var(--s3);max-width:var(--measure)}
.stop-txt .plaque{justify-self:start}
.stop-txt h3{font-size:22px}
.stop-txt p{color:var(--body)}
.stop-txt .fact{color:var(--mute);font-size:15px}
.lesson{display:grid;gap:4px;padding-left:var(--s4);border-left:3px solid var(--pc);color:var(--text)!important;font-family:var(--f-d);font-stretch:108%;font-weight:560;font-size:18px;line-height:1.3}
.lesson .cap{font-size:10px}
.rules{list-style:none;margin:0;padding:0;display:grid;counter-reset:r;border-top:1px solid var(--rule)}
.rules li{counter-increment:r;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.rules li::before{content:"0" counter(r);grid-row:span 2;font-family:var(--f-d);font-stretch:112%;font-weight:600;color:var(--violet-hi);font-size:14px;padding-top:3px}
.rules b{font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:18px}
.rules span{color:var(--mute)}

/* résumé */
.unlock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:center;background:var(--panel);padding:var(--s4) var(--s5);box-shadow:var(--edge-panel);max-width:640px}
.chip{position:relative;width:64px;height:64px;border:0;cursor:pointer;background:var(--violet);color:#fff;font-family:var(--f-d);font-stretch:118%;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:filter .2s}
.chip::after{content:"";position:absolute;inset:0;background:var(--live);clip-path:inherit;transform:scaleY(0);transform-origin:bottom;transition:transform 1s linear;mix-blend-mode:screen;opacity:.8}
.unlock.holding .chip::after{transform:scaleY(1)}
.unlock.open .chip{background:var(--live);color:var(--sky)}
.unlock-h{font-family:var(--f-d);font-stretch:112%;font-weight:640}
.unlock-out a{color:var(--text)}
.cvlens{display:grid;gap:var(--s3);position:sticky;top:0;z-index:4;background:linear-gradient(var(--sky) 85%,transparent);padding:var(--s3) 0}
.cv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--s7)}
.cv-main{display:grid;gap:var(--s5);align-content:start}
.job{display:grid;gap:var(--s3);padding-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.job header{display:grid;gap:var(--s2)}
.job .plaque{justify-self:start}
.job h3{font-size:20px}
.job ul{margin:0;padding-left:1.1em;display:grid;gap:var(--s2)}
.job li{color:var(--body);transition:opacity .3s}
.job li .ldots{margin-left:4px;vertical-align:middle}
.cv .dim{opacity:.28}
.cv-side{display:grid;gap:var(--s5);align-content:start}
.cv-side section{display:grid;gap:var(--s2);transition:opacity .3s}
.cv-side p{color:var(--body);font-size:15px;transition:opacity .3s}

/* how I work */
.shift{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:var(--s5);align-items:start}
.shift .col{display:grid;gap:var(--s3);background:var(--panel);padding:var(--s5);box-shadow:var(--edge-panel)}
.shift .then{box-shadow:inset 0 2px 0 var(--stone-l),var(--edge-panel)}
.shift .nowc{box-shadow:inset 0 2px 0 var(--violet-hi),var(--edge-panel)}
.shift h3{font-size:clamp(28px,3.4vw,44px)}
.shift .nowc h3{color:var(--glow)}
.shift p{color:var(--mute)}
.shift dl{margin:var(--s2) 0 0;display:grid;gap:var(--s3)}
.shift dt{font-weight:600}
.shift dd{margin:0;color:var(--mute);font-size:15px}
.shift .arrow{align-self:center}
.going{background:var(--violet);color:#fff;padding:var(--s7) var(--s6);display:grid;gap:var(--s4);box-shadow:4px 2px 0 var(--violet-lo),8px 4px 0 var(--violet-deep)}
.going h2{font-size:clamp(36px,5vw,72px)}
.going .cap{color:#E2D9FF}
.going .prose p{color:#EFEAFF}
.going .prose b{color:#fff}

/* case study */
.case-head .row{align-items:center}
.fold .body .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.fold .body .steps li{background:var(--panel);padding:var(--s4);color:var(--mute);font-size:14.5px;display:grid;gap:4px}
.fold .body .steps b{color:var(--text);font-family:var(--f-d);font-stretch:112%}
.fold .body .pairs{list-style:none;padding:0;display:grid;gap:var(--s3)}
.fold .body .pairs li{display:grid;gap:4px;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.fold .body .pairs span{color:var(--mute)}
.fold .body .three,.fold .body .fronts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.fold .body .three>div,.fold .body .fronts>div{background:var(--panel);padding:var(--s4);display:grid;gap:6px;align-content:start}
.fold .body .fronts>div{box-shadow:inset 0 2px 0 var(--violet-hi)}
.fold .body .three h3,.fold .body .fronts h3{font-size:16px;margin:0}
.fold .body .three p,.fold .body .fronts p{font-size:14.5px;color:var(--mute)}
.fold .body.prose{max-width:none}
.fold .body.prose>p,.fold .body.prose>h2{max-width:var(--measure)}
.fold .body table.t{max-width:900px}

/* the objection deck */
.deck-tools{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.deck-tools input{font:inherit;color:var(--text);background:var(--well);border:0;box-shadow:inset 0 0 0 1px var(--rule);padding:12px 14px;min-height:44px;max-width:420px}
.deck-tools input:focus{outline:2px solid var(--glow);outline-offset:2px}
.deck{display:grid;border-top:1px solid var(--rule)}
.deck details{border-bottom:1px solid var(--rule)}
.deck summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;align-items:baseline;min-height:52px}
.deck summary::-webkit-details-marker{display:none}
.deck summary b{font-family:var(--f-d);font-stretch:108%;font-weight:600;font-size:17px}
.deck .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s4);padding:0 0 var(--s5) calc(120px + var(--s4))}
.deck .pair p{display:grid;gap:6px;font-size:15px}
.deck .weak s{color:var(--faint)}
.deck .strong{color:var(--text);background:var(--panel);padding:var(--s4);box-shadow:inset 3px 0 0 var(--live)}
.deck details.flash{animation:flash 1.2s ease}
@keyframes flash{0%{background:#2A2150}100%{background:transparent}}

/* writing */
.article{display:grid;gap:var(--s6)}
.article-body{font-size:17.5px;line-height:1.7}
.article-body p{color:var(--body)}
.article-body h2{font-size:24px;margin-top:var(--s5)}
.article-body .line{margin:var(--s5) 0}

/* built */
.versions{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s5)}
.versions figure{margin:0;display:grid;gap:var(--s2)}
.versions img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;box-shadow:var(--edge-panel)}
.versions figcaption{display:grid;gap:2px}
.versions figcaption b{font-family:var(--f-d);font-stretch:112%;font-weight:640}
.versions figcaption span{color:var(--mute);font-size:14px}

/* contact, 404 */
.door{max-width:360px}
.lost{justify-items:start}
.lot{width:min(320px,80vw)}

@media (max-width:900px){
  .intro2{grid-template-columns:minmax(0,1fr)}
  .photo{max-width:200px}
  .stop{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .stop-pic svg{max-width:180px;margin:0}
  .cv{grid-template-columns:minmax(0,1fr)}
  .shift{grid-template-columns:minmax(0,1fr)}
  .shift .arrow{width:110px;justify-self:center}
  .going{padding:var(--s6) var(--s5)}
  .deck summary{grid-template-columns:minmax(0,1fr);gap:4px}
  .deck .pair{grid-template-columns:minmax(0,1fr);padding-left:0}
}

/* design language page */
.toc{display:flex;flex-wrap:wrap;gap:4px 18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--s3) 0}
.toc a{font-family:var(--f-d);font-stretch:105%;font-weight:560;font-size:14px;text-decoration:none;color:var(--mute);padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.toc a:hover{color:var(--glow)}
.sys{display:grid;gap:var(--s5);min-width:0}
.sys>h3.cap{margin-top:var(--s3)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.sw{display:grid;gap:2px;font-size:13px;color:var(--mute)}
.sw .chipc{height:56px;box-shadow:inset 0 0 0 1px #ffffff14;margin-bottom:6px}
.sw b{color:var(--text);font-weight:600;font-size:14px}
.sw code,.places code,.space code{font-family:var(--f-m);font-size:12px;color:var(--faint)}
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s4)}
.places figure{margin:0;display:grid;gap:6px;background:var(--panel);padding:var(--s4)}
.places figure svg{height:110px;width:100%}
.places figcaption{display:grid;gap:2px;font-size:13px}
.places figcaption b{font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:14px}
.places figcaption span{color:var(--mute)}
.yardlib figure svg{height:80px}
.spec{gap:var(--s5)}
.spec>div{display:grid;gap:var(--s2);padding-bottom:var(--s4);border-bottom:1px solid var(--rule-2)}
.space{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap}
.space div{display:grid;gap:6px;justify-items:center}
.space i{display:block;background:var(--violet-hi)}
.skeleton{margin:0;padding-left:1.3em;display:grid;gap:6px;color:var(--body)}
.world svg{max-width:720px}
.comps{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s6) var(--s5)}
.comps>div{display:grid;gap:var(--s3);align-content:start;min-width:0}
.comps>.wide{grid-column:1/-1}
.dl2{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
.dl2 li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.dl2 b{font-family:var(--f-d);font-stretch:112%;font-weight:640}
.dl2 span{color:var(--mute)}
.dd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.dd>div{background:var(--panel);padding:var(--s5);display:grid;gap:var(--s3);align-content:start}
.dd>div:first-child{box-shadow:inset 0 2px 0 var(--live)}
.dd>div:last-child{box-shadow:inset 0 2px 0 #EF5F6E}
.dd ul{margin:0;padding-left:1.1em;display:grid;gap:6px;color:var(--body)}
@media (max-width:900px){.dl2 li{grid-template-columns:minmax(0,1fr);gap:2px}.dd{grid-template-columns:minmax(0,1fr)}}

@media (max-width:600px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .btile{padding:12px 12px 16px;gap:8px}
  .btile h3{font-size:15.5px}
  .btile p{font-size:13px}
  .btile .meta{flex-wrap:wrap;gap:6px}
}

/* work: the yard map */
.yard-sec{display:grid;gap:var(--s5)}
.yard-stage{background:radial-gradient(70% 60% at 50% 55%,#151A28,transparent);margin:0 calc(-1 * var(--s4))}
.ymap{display:block;width:100%;height:auto;max-height:78vh;overflow:visible}
.ymap .floor{font-family:var(--f-d);font-stretch:110%;font-weight:650;font-size:11px;letter-spacing:.06em;fill:#B9BFD0}
.ymap .floor.dim-l{fill:#6A6488}
.ymap .seam{stroke:#262B3A;stroke-width:1}
.ymap a.yo{cursor:pointer;transition:filter .35s,opacity .35s}
.ymap a.yo:hover,.ymap a.yo:focus-visible{filter:brightness(1.18) drop-shadow(0 0 10px #8E66FF66)}
.ymap a.yo:focus-visible{outline:none}
.ymap a.yo.dim{filter:saturate(.1) brightness(.35)}

/* writing: editorial index */
.ed{display:grid;border-top:1px solid var(--rule)}
.ed-item{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--s5);row-gap:10px;padding:var(--s7) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--text)}
.ed-item>*:not(.ed-n){grid-column:2}
.ed-n{grid-row:1/span 5;font-family:var(--f-d);font-stretch:118%;font-weight:700;font-size:40px;color:var(--rule);line-height:1}
.ed-item h2{font-size:clamp(36px,5vw,72px);line-height:1}
.ed-blurb{font-size:var(--t-lede);color:var(--body);max-width:52ch}
.ed-first{color:var(--faint);max-width:66ch;font-size:15px}
.ed-go{font-family:var(--f-d);font-stretch:112%;font-weight:640;color:var(--k)}
.ed-item:hover h2{color:var(--k)}
.dropcap>p:first-of-type:not(.note)::first-letter,.dropcap>p.note+p::first-letter{float:left;font-family:var(--f-d);font-stretch:118%;font-weight:700;font-size:64px;line-height:.9;padding:6px 10px 0 0;color:var(--violet-hi)}

/* built: numbers, strip, chain */
.nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.nums div{display:grid;gap:4px;padding:var(--s5) var(--s4) var(--s5) 0;border-right:1px solid var(--rule-2);margin-right:var(--s4)}
.nums div:last-child{border-right:0}
.nums b{font-family:var(--f-d);font-stretch:118%;font-weight:700;font-size:clamp(34px,4vw,56px);line-height:1;color:var(--glow)}
.nums span{color:var(--mute);font-size:14px}
.strip{display:grid;gap:var(--s4)}
.strip-h{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline;flex-wrap:wrap}
.strip-h h2{font-size:var(--t-h3)}
.frames{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;background:#05060A;padding:10px;box-shadow:inset 0 10px 0 #05060A,inset 0 -10px 0 #05060A}
.frames figure{margin:0;display:grid;gap:4px}
.frames img{width:100%;height:auto;display:block}
.frames figcaption{font-family:var(--f-m);font-size:11px;color:var(--faint)}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:c}
.chain li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s4);padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline;position:relative}
.chain code{font-family:var(--f-m);font-size:14px;color:var(--glow)}
.chain span{color:var(--mute)}

/* contact */
.door-page{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s7);align-items:center;padding-top:var(--s6)}
.door-txt{display:grid;gap:var(--s4)}
.mail{font-family:var(--f-d);font-stretch:104%;font-weight:680;font-size:clamp(20px,2.5vw,34px);line-height:1.15;overflow-wrap:anywhere}
.mail a{text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--violet-hi)}
.door-pic svg{width:100%;max-width:380px;height:auto}
.hours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s5)}
.hours div{display:grid;gap:4px}
.hours b{font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:19px}
.hours span:last-child{color:var(--mute);font-size:14px}
@media (max-width:900px){
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums div{border-right:0;border-bottom:1px solid var(--rule-2)}
  .frames{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chain li{grid-template-columns:minmax(0,1fr);gap:2px}
  .ed-item{grid-template-columns:minmax(0,1fr)}
  .ed-n{display:none}
  .ed-item>*:not(.ed-n){grid-column:1}
  .door-page,.hours{grid-template-columns:minmax(0,1fr)}
  .door-pic{max-width:220px}
}

/* =====================================================================
   Case studies: each build in its own form. Shared: --acc, the page accent.
   ===================================================================== */
.case{display:grid;gap:var(--s8)}
.case .kick i{background:var(--acc)}
.case .head .title{max-width:16ch}
.ill{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-d);font-stretch:108%;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#E2C044;white-space:normal;line-height:1.4}
.ill::before{content:"";flex:none;width:7px;height:7px;border:1.5px dashed #E2C044;transform:skewY(-30deg)}
.cube{width:18px;height:auto;flex:none;display:inline-block;vertical-align:middle}

/* ---------- Growth Operator: the approval line ---------- */
.op-line{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:0;background:var(--panel);box-shadow:var(--edge-panel);position:relative}
.op-h{grid-column:1/-1;order:-1;padding:var(--s6) var(--s6) 0;font-size:var(--t-h2);max-width:22ch}
.op-col{padding:var(--s6)}
.op-col ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:10px}
.op-col li{display:flex;gap:12px;align-items:center;font-family:var(--f-d);font-stretch:108%;font-weight:560;font-size:17px}
.op-col.waits li{color:var(--mute)}
.op-rule{position:relative;display:grid;place-items:center}
.op-rule::before{content:"";position:absolute;top:24px;bottom:24px;left:50%;width:3px;background:var(--violet-hi);box-shadow:0 0 24px #8E66FF88}
.op-rule span{position:relative;background:var(--violet);color:#fff;font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;writing-mode:vertical-rl;transform:rotate(180deg)}
.queue{display:grid;gap:var(--s5)}
.q-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);flex-wrap:wrap}
.q-head h2{font-size:var(--t-h2);margin-top:8px}
.q-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.q-card{background:var(--panel);padding:var(--s5);display:grid;gap:var(--s4);align-content:start;box-shadow:inset 0 2px 0 var(--stone-l),var(--edge-panel);transition:transform .35s ease,opacity .35s,box-shadow .35s}
.q-top{display:grid;gap:4px}
.q-top b{font-family:var(--f-d);font-stretch:112%;font-weight:640;font-size:18px}
.q-state{font-size:13px;color:#E2C044}
.q-card dl{margin:0;display:grid;gap:10px}
.q-card dt{font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.q-card dd{margin:2px 0 0;color:var(--body);font-size:15px}
.q-card[data-done="ok"]{box-shadow:inset 0 2px 0 var(--live),var(--edge-panel);transform:translateX(6px)}
.q-card[data-done="ok"] .q-state{color:var(--live)}
.q-card[data-done="drop"]{opacity:.45}
.q-card[data-done="drop"] .q-state{color:var(--mute)}
.q-card button:disabled{opacity:.35;cursor:default}
.gate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.g-step{padding:var(--s5) var(--s5) var(--s5) 0;display:grid;gap:10px;align-content:start;border-right:1px solid var(--rule);margin-right:var(--s5)}
.g-step:last-child{border-right:0}
.g-step h3{font-size:19px}
.g-step p,.g-step li{color:var(--mute);font-size:15px}
.g-step ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.g-step.now .cap{color:var(--glow)}
.g-step.now{position:relative}
.g-step.now::before{content:"";position:absolute;top:-1px;left:0;right:var(--s5);height:3px;background:var(--violet-hi)}
.kit h2{font-size:var(--t-h2);margin-bottom:var(--s5)}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--rule)}
.kit-grid>div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--s4);display:grid;gap:6px;align-content:start}
.kit-grid .n{font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:12px;color:var(--glow)}
.kit-grid b{font-family:var(--f-d);font-stretch:112%;font-weight:640}
.kit-grid span:last-child{color:var(--mute);font-size:14px}

/* ---------- Kata: the scorecard ---------- */
.score{background:var(--panel);box-shadow:var(--edge-panel);padding:var(--s6);display:grid;gap:var(--s5)}
.sc-top{display:flex;justify-content:space-between;gap:var(--s4);align-items:end;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:var(--s4)}
.sc-top h2{font-size:clamp(20px,2vw,26px);margin-top:6px}
.sc-rows{list-style:none;margin:0;padding:0;display:grid}
.sc-rows li{border-bottom:1px solid var(--rule-2)}
.sc-rows summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:130px minmax(0,1fr) auto 28px;gap:var(--s4);align-items:center;padding:12px 0;min-height:48px}
.sc-rows summary::-webkit-details-marker{display:none}
.sc-rows .d{font-family:var(--f-d);font-stretch:112%;font-weight:640}
.sc-rows .q{color:var(--mute);font-size:14.5px}
.sc-rows .v{font-family:var(--f-d);font-stretch:118%;font-weight:700;font-size:20px;text-align:right;color:var(--acc)}
.sc-rows li.nos .v,.sc-rows li.nos .d{color:var(--faint)}
.meter{display:inline-flex;gap:3px}
.meter i{width:16px;height:16px;transform:skewY(-30deg);background:#232838;box-shadow:inset 0 0 0 1px #2E3446}
.meter i.on{background:var(--acc);box-shadow:none}
.sc-rows .ev{padding:0 0 var(--s4) calc(130px + var(--s4));display:grid;gap:4px;color:var(--text);max-width:80ch}
.flow4{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.flow4>div{flex:1 1 160px;display:grid;gap:4px;padding:var(--s4);background:var(--panel)}
.flow4 .n{font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:12px;color:var(--acc)}
.flow4 b{font-family:var(--f-d);font-stretch:112%;font-weight:640}
.flow4 span:last-child{color:var(--mute);font-size:14px}
.flow4 .to{width:24px;align-self:center;height:3px;background:var(--rule)}
.flow-note{flex-basis:100%;margin-top:var(--s3);color:var(--mute)}
.obj3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.obj3>div{display:grid;gap:8px;align-content:start;padding-top:var(--s3);border-top:3px solid var(--acc)}
.obj3 .said{font-family:var(--f-d);font-stretch:108%;font-weight:600;font-size:18px;line-height:1.3}
.obj3 p:last-child{color:var(--mute)}
.cadence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.cadence>div{background:var(--panel);padding:var(--s5);display:grid;gap:8px;align-content:start}
.cadence h3{font-size:22px;color:var(--acc)}
.cadence p{color:var(--mute)}

/* ---------- Dashboard: the sheet ---------- */
.sheet-wrap{background:#0E1118;box-shadow:inset 0 0 0 1px var(--rule),var(--edge-panel)}
.sheet-bar{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;padding:12px var(--s4);border-bottom:1px solid var(--rule);background:var(--panel)}
.sheet-bar .dots{display:flex;gap:6px}.sheet-bar .dots i{width:9px;height:9px;background:var(--rule);transform:skewY(-30deg)}
.sheet-bar b{font-family:var(--f-d);font-stretch:112%;font-weight:640}
.sheet-bar .ill{margin-left:auto}
table.sheet{width:100%;border-collapse:collapse;font-family:var(--f-m);font-size:15px;min-width:560px}
.sheet th,.sheet td{border:1px solid var(--rule-2);padding:14px 16px;text-align:right}
.sheet thead th{font-family:var(--f-d);font-stretch:112%;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:#13161F}
.sheet tbody th{text-align:left;font-family:var(--f-b);font-weight:600;color:var(--text)}
.sheet thead th:first-child{text-align:left}
.sheet .a{color:var(--text);font-weight:600}
.sheet .t{color:var(--faint);margin-left:6px}
.sheet td.hit{box-shadow:inset 3px 0 0 var(--live)}
.sheet td.miss{box-shadow:inset 3px 0 0 #EF5F6E}
.sheet td.manual{background:#2A2410;outline:2px solid #E2C044;outline-offset:-2px;position:relative}
.sheet td.manual::after{content:"manual fix";position:absolute;left:8px;top:4px;font-family:var(--f-d);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#E2C044}
.sheet td.rb{animation:rb .6s ease both}
@keyframes rb{0%{background:#1E2A44}100%{background:transparent}}
.sheet td.manual.rb{animation:none}
.sheet-foot{padding:var(--s4);display:grid;gap:10px;border-top:1px solid var(--rule)}
.hard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.hard>div{background:var(--panel);padding:var(--s5);display:grid;gap:10px;align-content:start}
.hard h3{font-size:18px}
.hard p{color:var(--mute);font-size:15px}
.scan{display:grid;gap:3px}
.scan i{height:7px;background:#1D2130}.scan i.h{background:var(--acc)}
.zero{display:flex;gap:var(--s4);font-family:var(--f-m);font-size:18px}
.zero .bad{color:#EF5F6E;text-decoration:line-through}.zero .good{color:var(--live)}

/* ---------- Objection Library: the card table ---------- */
.table-felt{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:var(--s6);align-items:center;padding:var(--s7) var(--s6);background:radial-gradient(120% 90% at 30% 40%,#1A1424,#0E0C14);box-shadow:inset 0 0 0 1px #2A2238}
.playcard{position:relative;aspect-ratio:5/7;perspective:1200px;max-width:440px;width:100%;transition:transform .22s ease,opacity .22s}
.playcard.dealing{transform:translate(18px,-8px) rotate(4deg);opacity:0}
.pc-face{position:absolute;inset:0;background:#F4F1FA;color:#141019;padding:28px;display:grid;align-content:space-between;gap:16px;backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.7,.2,1);
  box-shadow:3px 2px 0 #C9C2DA,6px 4px 0 #8F86A8,10px 7px 24px #00000080}
.pc-face .cap{color:#5B4E78}
.pc-face .note{color:#6F6585}
.pc-obj{font-family:var(--f-d);font-stretch:112%;font-weight:680;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.01em}
.pc-face.back{transform:rotateY(180deg);align-content:start;gap:6px}
.pc-weak s{color:#8C829F;font-size:16px}
.pc-strong{font-size:17px;line-height:1.5;color:#141019;border-left:3px solid var(--acc);padding-left:12px}
.playcard.flipped .front{transform:rotateY(-180deg)}
.playcard.flipped .back{transform:rotateY(0)}
.pc-face.front::after{content:"";position:absolute;right:22px;top:22px;width:22px;height:22px;background:var(--acc);transform:skewY(-30deg)}
.pc-ctl{display:grid;gap:12px;justify-items:start}
.minideck{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)}
.minideck details{background:var(--panel);padding:var(--s4);box-shadow:inset 0 2px 0 var(--acc)}
.minideck summary{cursor:pointer;list-style:none;display:grid;gap:6px;min-height:44px}
.minideck summary::-webkit-details-marker{display:none}
.minideck summary b{font-family:var(--f-d);font-stretch:108%;font-weight:600;font-size:16px;line-height:1.3}
.minideck .weak{color:var(--faint);font-size:14px;margin-top:10px}
.minideck .strong{color:var(--body);font-size:14.5px;margin-top:8px}
.minideck details[hidden]{display:none}

/* ---------- Call Kit: the brief ---------- */
.brief-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
.brief-side{display:grid;gap:var(--s4);justify-items:start;position:sticky;top:24px}
.brief-side h2{font-size:var(--t-h2)}
.brief-side p{color:var(--mute)}
.brief{background:#F2F4F8;color:#121521;padding:36px 36px 40px;display:grid;gap:20px;box-shadow:3px 2px 0 #C3C9D6,6px 4px 0 #8C93A6,12px 8px 30px #00000080;max-width:620px}
.brief header{border-bottom:2px solid #121521;padding-bottom:12px;display:grid;gap:4px}
.brief .cap{color:#4D8DF7}
.brief h3{font-size:24px;color:#121521}
.brief .note{color:#6B7285}
.b-sec{display:grid;gap:6px;padding-bottom:16px;border-bottom:1px solid #D5DAE4}
.b-sec:last-child{border-bottom:0}
.b-sec p,.b-sec li{color:#2A2F3D;font-size:15.5px}
.b-sec ul{margin:0;padding-left:1.1em;display:grid;gap:8px}
.b-sec .goal{font-family:var(--f-d);font-stretch:112%;font-weight:680;font-size:20px;color:#121521}
.brief-js .b-sec{opacity:.12;transform:translateY(6px);transition:opacity .4s,transform .4s}
.brief-js .b-sec.in{opacity:1;transform:none}

/* ---------- Outbound Engine: the sorter ---------- */
.sorter{display:grid;gap:var(--s5);min-width:0}
.so-head>*{max-width:100%}
.so-head{display:grid;gap:var(--s3);justify-items:start}
.so-head h2{font-size:var(--t-h2)}
.bins{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.bin{border:0;cursor:pointer;background:var(--panel);color:var(--mute);padding:var(--s4) var(--s3);display:grid;gap:8px;justify-items:center;text-align:center;font:inherit;min-height:44px;box-shadow:inset 0 0 0 1px var(--rule);transition:background .2s,color .2s}
.bin b{font-family:var(--f-d);font-stretch:104%;font-weight:600;font-size:13.5px;line-height:1.25}
.bin-pic svg{width:64px;height:auto}
.bin[aria-selected="true"]{background:#141C33;color:var(--text);box-shadow:inset 0 -3px 0 var(--acc),inset 0 0 0 1px #2B3B66}
.bin[aria-selected="true"] .stone{--T:var(--made-t);--L:var(--made-l);--R:var(--made-r)}
.bin-out{background:var(--panel);padding:var(--s5) var(--s6);box-shadow:inset 3px 0 0 var(--acc)}
.bo{display:grid;gap:8px}
.bo-d{font-family:var(--f-d);font-stretch:110%;font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.2;max-width:34ch}
.passes{display:grid;gap:10px}
.passes>div{position:relative;height:48px;display:flex;align-items:center;padding-left:16px}
.passes>div i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:linear-gradient(90deg,#1B2643,#16203A);box-shadow:inset 3px 0 0 var(--acc)}
.passes b{position:relative;font-family:var(--f-d);font-stretch:112%;font-weight:640}
.wl{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);gap:var(--s4);align-items:center;max-width:760px}
.wl .to{height:3px;background:var(--acc)}
.cv-card{background:#F2F4F8;color:#121521;padding:var(--s5);display:grid;gap:10px;box-shadow:3px 2px 0 #9AA2B5,6px 4px 0 #5E667A}
.cv-card .cap{color:#4D8DF7}
.cv-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cv-card li{padding:6px 10px;background:#E3E7EF;font-size:14.5px}
.cv-card li.x{text-decoration:line-through;color:#8C93A6;background:#F7E6E8}
.cv-card .note{color:#5E667A}

/* ---------- Outbound Playbook: the binder ---------- */
.binder{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;background:var(--panel);box-shadow:var(--edge-panel);min-height:360px}
.tabs{display:grid;align-content:start;border-right:1px solid var(--rule);padding:var(--s3) 0}
.tabs button{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;padding:14px var(--s5);min-height:44px;font-family:var(--f-d);font-stretch:108%;font-weight:600;color:var(--mute);box-sizing:border-box}
.tabs button span{font-size:12px;color:var(--faint)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);background:#14231D;box-shadow:inset 3px 0 0 var(--acc)}
.tabs button:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}
.pagebody{padding:var(--s6);display:grid;align-content:space-between;gap:var(--s5)}
.pg{display:grid;gap:var(--s3)}
.pg h3{font-size:clamp(30px,3.6vw,48px);color:var(--acc)}
.pg-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s4)}
.pg-d{font-family:var(--f-d);font-stretch:108%;font-weight:560;font-size:22px;line-height:1.3;margin-top:6px}
.pg-feeds p:last-child{color:var(--mute);margin-top:6px}

/* ---------- Growth at Tcules: the board ---------- */
.board{display:grid;gap:var(--s5)}
.board-head h2{font-size:var(--t-h2);max-width:24ch;margin-top:8px}
.fronts9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);box-shadow:var(--edge-panel)}
.ft9{background:var(--panel)}
.ft9 summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:28px 28px minmax(0,1fr);gap:10px;align-items:center;padding:var(--s4) var(--s5);min-height:64px}
.ft9 summary::-webkit-details-marker{display:none}
.ft9 .n{font-family:var(--f-d);font-size:12px;color:var(--faint);font-weight:600}
.ft9 b{font-family:var(--f-d);font-stretch:110%;font-weight:640;font-size:16.5px}
.ft9 .fi .cube{width:22px}
.ft9 p{padding:0 var(--s5) var(--s5);color:var(--mute);font-size:14.5px}
.ft9[open]{background:#171230}
.ft9.building summary b::after{content:" · in build";color:var(--faint);font-weight:500}
.review-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center;background:var(--violet);color:#fff;padding:var(--s7) var(--s6);box-shadow:4px 2px 0 var(--violet-lo),8px 4px 0 var(--violet-deep)}
.review-card h2{font-size:var(--t-h2)}
.review-card p{color:#EAE3FF;margin-top:10px}
.review-card .cap{color:#E2D9FF}
.rv{margin:0;display:grid;gap:8px}
.rv div{display:grid;grid-template-columns:40px minmax(0,1fr);background:#5A1FE6;padding:12px 16px;align-items:center}
.rv dt{font-family:var(--f-d);font-weight:600;color:#CDBBFF;font-size:13px}
.rv dd{margin:0;font-family:var(--f-d);font-stretch:110%;font-weight:640;font-size:18px}
.cs3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.cs3 a{display:grid;gap:6px;background:var(--panel);padding:var(--s5);text-decoration:none;box-shadow:inset 0 2px 0 var(--violet-hi)}
.cs3 b{font-family:var(--f-d);font-stretch:118%;font-weight:680;font-size:28px}

@media (max-width:900px){
  .op-line{grid-template-columns:minmax(0,1fr)}
  .op-rule{height:56px}
  .op-rule::before{top:50%;bottom:auto;left:24px;right:24px;width:auto;height:3px}
  .op-rule span{writing-mode:horizontal-tb;transform:none}
  .q-list,.gate,.obj3,.cadence,.hard,.cs3{grid-template-columns:minmax(0,1fr)}
  .g-step{border-right:0;border-bottom:1px solid var(--rule);margin-right:0;padding-right:0}
  .sc-rows summary{grid-template-columns:minmax(0,1fr) auto 24px;row-gap:4px}
  .meter i{width:12px;height:12px}
  .score{padding:var(--s4)}
  .bins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-rows .q{grid-column:1/-1;grid-row:2}
  .sc-rows .ev{padding-left:0}
  .table-felt{grid-template-columns:minmax(0,1fr);padding:var(--s5) var(--s4)}
  .playcard{max-width:340px}
  .brief-wrap{grid-template-columns:minmax(0,1fr)}
  .brief-side{position:static}
  .brief{padding:24px}
  .bins{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wl{grid-template-columns:minmax(0,1fr)}
  .wl .to{width:3px;height:32px;justify-self:center}
  .binder{grid-template-columns:minmax(0,1fr)}
  .tabs{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--rule);padding:0}
  .tabs button{white-space:nowrap;padding:12px 14px}
  .tabs button[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--acc)}
  .pg-row{grid-template-columns:minmax(0,1fr)}
  .fronts9{grid-template-columns:minmax(0,1fr)}
  .review-card{grid-template-columns:minmax(0,1fr);padding:var(--s6) var(--s5)}
}