/* =========================================================
   extra.css — sections added in the 2026 rebuild
   Documentation, Practice, Clients, Rooms + the hero stat band.
   Extends lumen.css; every value comes from its tokens.
   ========================================================= */

/* ---- hero stat band ---- */
.stat-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding:clamp(28px,4vw,52px) clamp(18px,2vw,34px);border-right:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:none}
.stat .sv{font-family:var(--magma);font-size:clamp(40px,5vw,72px);line-height:1;color:var(--accent)}
.stat .sl{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---- documentation index ---- */
.doc-list{border-top:1px solid var(--line)}
.doc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px clamp(14px,3vw,44px);align-items:baseline;padding:clamp(20px,2.6vw,34px) clamp(12px,2vw,26px);border-bottom:1px solid var(--line);transition:background .35s var(--ease),padding-left .35s var(--ease),color .35s}
.doc-row:hover{background:var(--invert-bg);color:var(--invert-ink);padding-left:clamp(22px,2.6vw,40px)}
.doc-name{font-family:var(--magma);font-size:clamp(22px,2.6vw,36px);line-height:1.1}
.doc-name .arr{color:var(--accent-inv);font-size:.5em;margin-left:.25em}
.doc-desc{font-size:14px;color:var(--muted);line-height:1.5}
.doc-row:hover .doc-desc{color:var(--invert-soft)}
.doc-meta{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);line-height:1.7}
.doc-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(30px,4vh,50px)}
.doc-foot p{font-size:15px;color:var(--muted);max-width:48ch}
.doc-foot .plat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* ---- practice cells ---- */
.prac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.prac{padding:clamp(26px,3vw,44px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.prac-kicker{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--accent)}
.prac h3{font-family:var(--magma);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.1;margin:16px 0 14px}
.prac p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:22px}
.prac-steps{border-top:1px solid var(--line-2);padding-top:16px;display:grid;gap:8px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;color:var(--muted-2)}

/* ---- clients grid (wordmarks now, logos when supplied) ---- */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.client{padding:clamp(20px,2.4vw,32px) clamp(16px,1.8vw,24px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--magma);font-size:clamp(17px,1.5vw,22px);line-height:1.2;min-height:96px;display:flex;align-items:flex-end;transition:background .3s var(--ease),color .3s}
@media (hover:hover){.client:hover{background:var(--invert-bg);color:var(--invert-ink)}}
/* Every mark is flattened to the ink colour: the logos arrive in a dozen
   brand palettes, and a row of them raw would fight the orange ground and
   each other. brightness(0) crushes any colour to black, invert(1) lifts it
   back to white, and the alpha channel is left alone. */
.client img{max-height:30px;max-width:100%;width:auto;object-fit:contain;object-position:left bottom;filter:brightness(0) invert(1);opacity:.72;transition:opacity .3s var(--ease)}
@media (hover:hover){.client:hover img{opacity:1}}
.client.nda{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.client.nda:hover{background:transparent;color:var(--muted-2)}

/* ---- rooms: speaking, teaching, memberships ---- */
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,4vw,64px);align-items:start}
.room-stat{display:flex;align-items:baseline;gap:16px}
.room-stat+.room-stat{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.room-stat .rv{font-family:var(--magma);font-size:clamp(48px,7vw,104px);line-height:.9;color:var(--accent)}
.room-stat .rl{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.mem-wrap{grid-column:span 2;min-width:260px}
.mem-lbl{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:18px}
.mem-list{border-top:1px solid var(--line)}
.mem-row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.mem-row .m-name{font-family:var(--magma);font-size:clamp(20px,2.2vw,30px)}
.mem-row .m-role{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;color:var(--muted-2)}
.mem-foot{font-size:14px;color:var(--muted);margin-top:20px}
.mem-foot a{border-bottom:1px solid var(--line)}

/* italic emphasis inside headings is always Instrument Serif, never synthesized Clash italic */
.sec-title em,.about-lede em,.doc-name em{font-family:var(--ff-serif);font-style:italic;color:var(--accent)}

/* ---- 404: the numeral alone, centred in an otherwise empty field ---- */
.nf{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--pad);position:relative}
.nf-numeral{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2vh,20px);animation:nf-drift 9s ease-in-out infinite}
.nf-eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,246,241,.34)}
.nf-num{font-family:var(--magma);font-weight:700;font-size:clamp(96px,17vw,240px);line-height:.8;letter-spacing:-.05em;color:rgba(255,246,241,.16);user-select:none}
@keyframes nf-drift{0%,100%{transform:translate(0,0) rotate(-1.5deg)}50%{transform:translate(0,-14px) rotate(1.5deg)}}

@media (max-width:720px){
  /* auto-fill at 190px collapses to one column here, which turns the grid into
     a list — pin it to two so it still reads as a table. */
  .client-grid{grid-template-columns:repeat(2,1fr)}
  .client{min-height:74px;padding:14px 12px;font-size:15px}
  .client.nda{grid-column:1 / -1;min-height:0;padding:12px}
  .stat:first-child{padding-left:clamp(18px,2vw,34px)}
  .mem-wrap{grid-column:auto}
}