/* ================================================================ EMBER — the second design system, as a stylesheet. Loads AFTER styles.css on every page; every rule is guarded by html[data-theme="ember"], so the ENTIRE theme swap is one attribute on . Remove the attribute -> Classic, byte-identical. Governed by DESIGN-SYSTEM-EMBER.md. Client-product reconstructions (the plates: MyO2, deal dossier, planner, OrgOS board) and the cream artifacts (receipt, QC slip, boarding pass, letters, candidate facts) are deliberately NOT reskinned — they are period/paper objects. ================================================================ */ /* ---------- 1 · tokens: everything that flows through vars re-themes here */ html[data-theme="ember"]{ --bg:#120B14; --bg-soft:#1B1320; --bg-card:#241830; --border:rgba(245,237,230,.14); --border-accent:rgba(255,138,92,.5); --hairline:rgba(255,138,92,.28); --ink:#F5EDE6; --ink-muted:rgba(245,237,230,.76); --ink-dim:rgba(245,237,230,.62); /* amber inherits gold's job: links, CTAs, kickers — 11.3:1 on bg */ --gold:#FFC46B; --gold-light:#FFD28A; --gold-dark:#C98F3F; --copper:#FF8A5C; --copper-light:#FF8A5C; /* the four heats */ --ember:#FF8A5C; /* 8.0:1 on bg */ --violet:#E86BFF; /* 7.1:1 */ --amber:#FFC46B; /* 11.3:1 */ --rose:#FF7AA8; /* 7.6:1 */ --g-hot:linear-gradient(92deg,#FF8A5C,#E86BFF); } /* ---------- 2 · base surfaces */ html[data-theme="ember"] body{background:var(--bg)} /* the classic noise overlay reads as grime on plum — replace with nothing */ html[data-theme="ember"] body::before{display:none} /* dark CTA ink on hot gradient fills (contrast computed vs both endpoints) */ html[data-theme="ember"]{--cta-ink:#1A0D08} /* ---------- 3 · nav: pills + the half-second mark */ html[data-theme="ember"] #nav{background:rgba(18,11,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)} html[data-theme="ember"] .nav-cta{background:var(--g-hot);color:var(--cta-ink);border:none;border-radius:999px;font-weight:600} html[data-theme="ember"] .nav-cta:hover{color:var(--cta-ink);transform:translateY(-2px)} html[data-theme="ember"] .nav-links a.nav-on{color:var(--ember)} html[data-theme="ember"] .nav-links a:hover{color:var(--ember)} /* ---------- 4 · hero: the gradient field replaces the starfield */ html[data-theme="ember"] #hero-canvas, html[data-theme="ember"] .hero-grid-lines{display:none} html[data-theme="ember"] .hero-bg{ background: radial-gradient(1000px 520px at 90% -12%, rgba(255,106,61,.5), transparent 62%), radial-gradient(760px 560px at -8% 112%, rgba(155,75,255,.4), transparent 62%), linear-gradient(160deg,#1E1022 0%,#120B14 55%,#190D10 100%); opacity:1;inset:0} html[data-theme="ember"] .hero-headline em{ background:var(--g-hot);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic} /* pills for the hero CTAs (the two links carry xi classes; target by data-cta) */ html[data-theme="ember"] [data-cta="send-role"][data-location="hero"]{ background:var(--g-hot)!important;color:var(--cta-ink)!important;border-radius:999px!important} html[data-theme="ember"] [data-cta="see-work"][data-location="hero"]{ border:1.5px solid rgba(255,138,92,.55)!important;border-radius:999px!important;color:var(--ink)!important} html[data-theme="ember"] [data-cta="see-work"][data-location="hero"]:hover{border-color:var(--ember)!important;color:var(--ink)!important} /* hero diagnostic — first-class component, ember demo-box language */ html[data-theme="ember"] .hd-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5);position:relative;overflow:hidden} html[data-theme="ember"] .hd-card::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(232,107,255,.28),transparent 70%);pointer-events:none} html[data-theme="ember"] .hd-tag{color:var(--ember)} html[data-theme="ember"] .hd-preset{border-radius:10px;border-color:var(--border)} html[data-theme="ember"] .hd-preset:hover{border-color:var(--ember);background:rgba(255,138,92,.07)} html[data-theme="ember"] .hd-preset span{color:var(--ember)} html[data-theme="ember"] .hd-preset::after{color:var(--ember)} html[data-theme="ember"] .hd-case-btn{background:var(--g-hot);color:var(--cta-ink);border-radius:999px} html[data-theme="ember"] .hd-rule{background:var(--ember)} html[data-theme="ember"] .hd-reframe em{color:var(--ember)} html[data-theme="ember"] .hd-verdict{color:var(--amber)} html[data-theme="ember"] .hd-free input:focus{border-color:var(--ember)} html[data-theme="ember"] .hd-free-submit{color:var(--ember)} /* ---------- 5 · the receipts act: cream peak -> plum band with the four heats */ html[data-theme="ember"] .act-cream{ /* re-point the act's own token re-mappings back to dark-stage values */ --bg:#1B1320; --bg-card:#241830; --ink:#F5EDE6; --ink-muted:rgba(245,237,230,.76); --gold:#FFC46B; --gold-dark:#C98F3F; --gold-light:#FFD28A; --border:rgba(245,237,230,.14); --border-accent:rgba(255,138,92,.5); --hairline:rgba(245,237,230,.14); --err:#FF7AA8; --warn:#FFC46B; --ok:#7FCF9E; background:var(--bg); color:var(--ink); position:relative} /* angled seam into the band — pseudo-element, zero markup */ html[data-theme="ember"] .proof-act::before{ content:"";position:absolute;left:0;right:0;top:-64px;height:64px; background:#1B1320;clip-path:polygon(0 100%,100% 0,100% 100%,0 100%);pointer-events:none} /* four colour identities on the proof cells */ html[data-theme="ember"] .proof-cell{background:var(--bg-card);border-radius:10px;border-top:3px solid var(--border);padding:24px 20px 20px} html[data-theme="ember"] .proof-cell:hover{opacity:1;transform:translateY(-4px);transition:transform .2s} html[data-theme="ember"] #chip-adtech{border-top-color:var(--ember)} html[data-theme="ember"] #chip-adtech .metric-num{color:var(--ember)} html[data-theme="ember"] #chip-fintech{border-top-color:var(--violet)} html[data-theme="ember"] #chip-fintech .metric-num{color:var(--violet)} html[data-theme="ember"] #chip-ptc{border-top-color:var(--amber)} html[data-theme="ember"] #chip-ptc .metric-num{color:var(--amber)} html[data-theme="ember"] #chip-o2{border-top-color:var(--rose)} html[data-theme="ember"] #chip-o2 .metric-num{color:var(--rose)} html[data-theme="ember"] .act-cream .metric-num{font-weight:400} html[data-theme="ember"] .rcpt-btn{border-radius:999px} /* the paper receipt artifact stays cream — it is an object, not skin */ /* ---------- 6 · case index: six colour-coded lanes on the shared row markup */ html[data-theme="ember"] #featured-case-studies{background:var(--bg)} html[data-theme="ember"] .ai-cases{gap:12px} html[data-theme="ember"] .ai-case{ --lc:var(--amber);--lt:rgba(255,196,107,.07); border-bottom:none;border-left:3px solid var(--lc);border-radius:6px; background:linear-gradient(94deg,var(--lt),transparent 70%); padding:24px;transition:background .25s} html[data-theme="ember"] .ai-case:hover{background:linear-gradient(94deg,var(--lt),var(--lt))} html[data-theme="ember"] .ai-case[data-location="work-ai-1"]{--lc:#FF6A3D;--lc2:#FFB08E;--lt:rgba(255,138,92,.13)} html[data-theme="ember"] .ai-case[data-location="work-ai-2"]{--lc:#C64BFF;--lc2:#E86BFF;--lt:rgba(198,75,255,.13)} html[data-theme="ember"] .ai-case[data-location="work-ai-3"]{--lc:#FFC46B;--lc2:#FFE0A8;--lt:rgba(255,196,107,.10)} html[data-theme="ember"] .ai-case[data-location="work-range-ptc"]{--lc:#FF5FA2;--lc2:#FF9DC6;--lt:rgba(255,122,168,.12)} html[data-theme="ember"] .ai-case[data-location="work-range-o2"]{--lc:#A96BFF;--lc2:#E86BFF;--lt:rgba(169,107,255,.12)} html[data-theme="ember"] .ai-case[data-location="work-range-orgos"]{--lc:var(--ember);--lt:rgba(255,138,92,.06)} html[data-theme="ember"] .ai-case-kick, html[data-theme="ember"] .ai-case-num, html[data-theme="ember"] .ai-case .walk{color:var(--lc)} html[data-theme="ember"] .ai-case:hover .card-title{color:var(--lc)} /* the prototype lane layout, chosen by Arpit (screenshot): SKEWED parallelogram lanes with a gradient rail on the slanted left edge. The skew is the point — inner content counter-skews so type stays upright. */ html[data-theme="ember"] .ai-case{ display:grid;grid-template-columns:210px minmax(0,1fr) auto; grid-template-areas:"head title walk" "head desc walk"; column-gap:clamp(20px,3vw,40px);row-gap:8px;align-items:center; transform:skewX(-4deg);border-left:none;border-radius:4px; padding:24px 32px;position:relative; background:linear-gradient(96deg,var(--lt) 0%,rgba(0,0,0,0) 72%)} html[data-theme="ember"] .ai-case > *{transform:skewX(4deg)} /* the gradient rail rides the slanted edge */ html[data-theme="ember"] .ai-case::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px; background:linear-gradient(180deg,var(--lc),var(--lc2,var(--lc)));pointer-events:none} html[data-theme="ember"] .ai-case:hover{ background:linear-gradient(96deg,var(--lt) 0%,var(--lt) 55%,rgba(0,0,0,0) 92%)} html[data-theme="ember"] .ai-case-head{grid-area:head;display:flex;flex-direction:column-reverse;gap:8px} html[data-theme="ember"] .ai-case-num{font-size:clamp(22px,2vw,30px);white-space:normal} html[data-theme="ember"] .ai-case .card-title{grid-area:title;font-size:clamp(24px,2.6vw,36px);align-self:end} html[data-theme="ember"] .ai-case>p.beat-lbl{display:none} html[data-theme="ember"] .ai-case>p:not(.visually-hidden):not(.beat-lbl){ grid-area:desc;display:block;margin:0;font-family:var(--ff-sans); font-size:14px;line-height:1.65;color:var(--ink-muted);max-width:62ch;align-self:start} html[data-theme="ember"] .ai-case .walk{grid-area:walk;white-space:nowrap} @media (max-width:860px){ html[data-theme="ember"] .ai-case{grid-template-columns:1fr;grid-template-areas:"head" "title" "desc" "walk";align-items:start; transform:skewX(-2deg);padding:24px} } @media (prefers-reduced-motion:reduce){ /* skew is decoration, not information: flatten it */ html[data-theme="ember"] .ai-case{transform:none} html[data-theme="ember"] .ai-case > *{transform:none} } /* ---------- 7 · capability-contract act: second plum band, colored verbs */ html[data-theme="ember"] .idea-act::before{ content:"";position:absolute;left:0;right:0;top:-64px;height:64px; background:#1B1320;clip-path:polygon(0 0,100% 100%,100% 100%,0 100%);pointer-events:none} html[data-theme="ember"] .idea-act{position:relative} html[data-theme="ember"] .verbs .verb{border-top:3px solid var(--border);padding-top:16px} html[data-theme="ember"] .verbs .verb:nth-child(1){border-top-color:var(--amber)} html[data-theme="ember"] .verbs .verb:nth-child(1) .verb-word{color:var(--amber)} html[data-theme="ember"] .verbs .verb:nth-child(2){border-top-color:var(--violet)} html[data-theme="ember"] .verbs .verb:nth-child(2) .verb-word{color:var(--violet)} html[data-theme="ember"] .verbs .verb:nth-child(3){border-top-color:var(--ember)} html[data-theme="ember"] .verbs .verb:nth-child(3) .verb-word{color:var(--ember)} html[data-theme="ember"] .ccd{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;position:relative;overflow:hidden} html[data-theme="ember"] .ccd::after{content:"";position:absolute;right:-70px;bottom:-70px;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(232,107,255,.25),transparent 70%);pointer-events:none} html[data-theme="ember"] .ccd-q{border-radius:10px} html[data-theme="ember"] .ccd-q:hover{border-color:var(--ember)} /* ---------- 8 · sections rhythm: lead band on bg-soft, breathing black between */ html[data-theme="ember"] #how-i-lead{background:var(--bg-soft);position:relative;overflow:hidden} html[data-theme="ember"] #how-i-lead::before{content:"";position:absolute;width:480px;height:480px;border-radius:999px;right:-160px;top:-200px;background:radial-gradient(circle at 40% 40%, rgba(255,106,61,.18), transparent 70%);pointer-events:none} html[data-theme="ember"] #contact{position:relative;overflow:hidden} html[data-theme="ember"] #contact::before{content:"";position:absolute;inset:0;background: radial-gradient(900px 520px at 8% -10%, rgba(155,75,255,.30), transparent 62%), radial-gradient(800px 520px at 105% 108%, rgba(255,106,61,.32), transparent 62%);pointer-events:none} html[data-theme="ember"] #contact > *{position:relative} /* ---------- 9 · buttons + links sitewide */ html[data-theme="ember"] .btn-a, html[data-theme="ember"] .hd-case-btn, html[data-theme="ember"] [data-cta="send-role"]{border-radius:999px} html[data-theme="ember"] button[type="submit"].btn-label, html[data-theme="ember"] .btn-label{border-radius:999px} html[data-theme="ember"] .footer-back:hover{color:var(--ember)} /* ---------- 10 · reduced motion: ember adds no new exceptions */ @media (prefers-reduced-motion:reduce){ html[data-theme="ember"] .proof-cell:hover{transform:none} html[data-theme="ember"] .nav-cta:hover{transform:none} } /* ---------- 11 · brand assets under ember */ html[data-theme="ember"] .nav-logo img{content:url("/assets/logo-ember.svg")} html[data-theme="ember"] .hk-btn{border-radius:999px;background:var(--g-hot);color:var(--cta-ink)} html[data-theme="ember"] .hk-btn:disabled{background:var(--bg-card);color:var(--ink-dim)} /* ---------- 12 · the contract demo hardcodes cream-stage inks (tuned for the cream act, which Ember turns plum). Re-ink for the dark card. Measured by the pixel audit: #635848/#7E5A14/#2E6A46 on #241830 = 2.4-2.7:1. */ html[data-theme="ember"] .ccd-cap{color:var(--ink-muted)} html[data-theme="ember"] .ccd-cap b{color:#7FCF9E} html[data-theme="ember"] .ccd-q{border-color:var(--amber);color:var(--amber)} html[data-theme="ember"] .ccd-q:hover{background:rgba(255,196,107,.1)} html[data-theme="ember"] .ccd-q:focus-visible{outline-color:var(--amber)} html[data-theme="ember"] .ccd-idle, html[data-theme="ember"] .ccd-src, html[data-theme="ember"] .ccd-note{color:var(--ink-muted)} html[data-theme="ember"] .ccd-tag--in{color:#7FCF9E;border-color:#7FCF9E} html[data-theme="ember"] .ccd-tag--out{color:var(--rose);border-color:var(--rose)} /* ================================================================ EMBER HOMEPAGE — the prototype's own layout + components, scoped to body.p-home. Arpit's call: apply the prototype LAYOUT, not a recolour of the classic grid. Live widgets (hero diagnostic, receipts, contract demo, QC stamp, contact form) keep their classic class names and are re-fitted after this block. ================================================================ */ html[data-theme="ember"] body.p-home{ --bg0:#120B14; --bg1:#1B1320; --card:#241830; --line:rgba(245,237,230,.16); --ink:#F5EDE6; --mut:rgba(245,237,230,.76); --dim:rgba(245,237,230,.62); --ember:#FF8A5C; --violet:#E86BFF; --amber:#FFC46B; --rose:#FF7AA8; --cream:#EFE7D2; --cream-ink:#221C10; --cream-mut:#5D5442; --cream-red:#A93A24; --serif:var(--ff-display),Georgia,serif; --sans:var(--ff-sans); --mono:var(--ff-mono),monospace; --hand:'Caveat',cursive; } /* The prototype shipped a blanket *{margin:0;padding:0}. Scoped to body.p-home * it outranks EVERY single-class rule, so each classic artifact spliced into this page (QC slip, receipt panels, contact form) silently lost its padding — the QC slip's absolutely-positioned sign-off box then overlapped its own checklist. Keep the typographic margin reset the prototype relies on; drop the padding blanket so components keep the padding they declare. (2026-08-13, measured.) */ html[data-theme="ember"] body.p-home *{box-sizing:border-box} html[data-theme="ember"] body.p-home :is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,dt,ul,ol){margin:0} html[data-theme="ember"] body.p-home :is(ul,ol):where(.hd-presets,.lanes,.rrow){padding:0} html[data-theme="ember"] body.p-home{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html[data-theme="ember"] body.p-home{scroll-behavior:auto}} html[data-theme="ember"] body.p-home{background:var(--bg0);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65} html[data-theme="ember"] body.p-home a{color:inherit;text-decoration:none} html[data-theme="ember"] body.p-home :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px} html[data-theme="ember"] body.p-home .skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--bg0);padding:12px 20px;font-weight:600;z-index:100} html[data-theme="ember"] body.p-home .skip:focus{left:16px;top:12px} html[data-theme="ember"] body.p-home .wrap{max-width:1240px;margin:0 auto;padding:0 40px} html[data-theme="ember"] body.p-home .k{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase} html[data-theme="ember"] body.p-home .hand{font-family:var(--hand);font-weight:600} html[data-theme="ember"] body.p-home h1,html[data-theme="ember"] body.p-home h2,html[data-theme="ember"] body.p-home h3{font-family:var(--serif);font-weight:300;letter-spacing:-.015em} html[data-theme="ember"] body.p-home .grad{background:linear-gradient(92deg,var(--ember),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="ember"] body.p-home .pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:16px 24px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;transition:transform .2s} html[data-theme="ember"] body.p-home .pill:hover{transform:translateY(-2px)} html[data-theme="ember"] body.p-home .pill-hot{background:linear-gradient(92deg,var(--ember),var(--violet));color:#1A0D08;font-weight:600} html[data-theme="ember"] body.p-home .pill-line{border:1.5px solid rgba(255,138,92,.55);color:var(--ink)} html[data-theme="ember"] body.p-home .pill-line:hover{border-color:var(--ember)} @media (prefers-reduced-motion:reduce){html[data-theme="ember"] body.p-home .pill{transition:none} html[data-theme="ember"] body.p-home .pill:hover{transform:none}} html[data-theme="ember"] body.p-home .seam{height:110px;clip-path:polygon(0 62%,100% 8%,100% 100%,0 100%);margin-top:-60px;position:relative;z-index:1} html[data-theme="ember"] body.p-home .seam-up{clip-path:polygon(0 8%,100% 62%,100% 100%,0 100%)} html[data-theme="ember"] body.p-home header{position:sticky;top:0;z-index:60;background:rgba(18,11,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} html[data-theme="ember"] body.p-home .hd{display:flex;align-items:center;justify-content:space-between;padding:16px 0} html[data-theme="ember"] body.p-home .logo{font-family:var(--serif);font-size:20px} html[data-theme="ember"] body.p-home nav ul{display:flex;gap:24px;align-items:center;list-style:none} html[data-theme="ember"] body.p-home nav a.nl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:8px 2px} html[data-theme="ember"] body.p-home nav a.nl:hover{color:var(--ember)} html[data-theme="ember"] body.p-home nav .pill{padding:12px 20px} html[data-theme="ember"] body.p-home .hero{position:relative;overflow:hidden;padding:96px 0 150px} html[data-theme="ember"] body.p-home .hero .field{position:absolute;inset:0;background: radial-gradient(1000px 520px at 90% -12%, rgba(255,106,61,.5), transparent 62%), radial-gradient(760px 560px at -8% 112%, rgba(155,75,255,.4), transparent 62%), linear-gradient(160deg,#1E1022 0%,#120B14 55%,#190D10 100%)} html[data-theme="ember"] body.p-home .hero .in{position:relative;z-index:2} html[data-theme="ember"] body.p-home .hero .k{color:var(--ember)} html[data-theme="ember"] body.p-home .hero h1{font-size:clamp(52px,7.2vw,106px);line-height:1.01;margin:24px 0 24px;max-width:13ch} html[data-theme="ember"] body.p-home .hero h1 .grad{font-style:italic} html[data-theme="ember"] body.p-home .hero .sub{font-size:clamp(16px,1.6vw,19px);color:var(--mut);max-width:52ch;line-height:1.75} html[data-theme="ember"] body.p-home .hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px} html[data-theme="ember"] body.p-home .hero .cred{margin-top:40px;font-family:var(--mono);font-size:12.5px;color:var(--dim);line-height:2.1;max-width:62ch} html[data-theme="ember"] body.p-home .hero .cred b{color:var(--ink);font-weight:500} html[data-theme="ember"] body.p-home .hero .note{position:absolute;right:6%;bottom:16%;color:var(--amber);font-size:23px;transform:rotate(-3deg);z-index:2} @media (max-width:900px){html[data-theme="ember"] body.p-home .hero .note{display:none}} html[data-theme="ember"] body.p-home .receipts{background:var(--bg1);position:relative;padding:0 0 84px} html[data-theme="ember"] body.p-home .receipts .seam{background:var(--bg1)} html[data-theme="ember"] body.p-home .receipts .k{color:var(--violet)} html[data-theme="ember"] body.p-home .receipts h2{font-size:clamp(30px,3.6vw,48px);margin:12px 0 8px} html[data-theme="ember"] body.p-home .receipts .hand{color:var(--amber);font-size:22px;display:inline-block;transform:rotate(-1.5deg)} html[data-theme="ember"] body.p-home .rrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px} html[data-theme="ember"] body.p-home .rcell{background:var(--card);border-radius:10px;padding:24px 24px;border-top:3px solid var(--rc)} html[data-theme="ember"] body.p-home .rcell b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,46px);line-height:1;color:var(--rc)} html[data-theme="ember"] body.p-home .rcell span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);line-height:1.9;margin-top:12px} html[data-theme="ember"] body.p-home .rc1{--rc:var(--ember)} html[data-theme="ember"] body.p-home .rc2{--rc:var(--violet)} html[data-theme="ember"] body.p-home .rc3{--rc:var(--amber)} html[data-theme="ember"] body.p-home .rc4{--rc:var(--rose)} html[data-theme="ember"] body.p-home .rfoot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--dim)} html[data-theme="ember"] body.p-home .rfoot b{color:var(--ink);font-weight:500;letter-spacing:.1em} html[data-theme="ember"] body.p-home .rfoot a{color:var(--amber);text-decoration:underline;text-underline-offset:3px} html[data-theme="ember"] body.p-home .who{padding:96px 0 88px} html[data-theme="ember"] body.p-home .who .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center} html[data-theme="ember"] body.p-home .who .k{color:var(--ember)} html[data-theme="ember"] body.p-home .who h2{font-size:clamp(28px,3vw,42px);margin:12px 0 20px;line-height:1.15} html[data-theme="ember"] body.p-home .who p{color:var(--mut);max-width:56ch;margin-bottom:16px} html[data-theme="ember"] body.p-home .who p a{color:var(--amber);text-decoration:underline;text-underline-offset:3px} html[data-theme="ember"] body.p-home .who .meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:16px} html[data-theme="ember"] body.p-home .facts{background:var(--cream);color:var(--cream-ink);border-radius:12px;padding:24px;box-shadow:0 30px 60px rgba(0,0,0,.5);transform:rotate(1.2deg)} @media (prefers-reduced-motion:reduce){html[data-theme="ember"] body.p-home .facts{transform:none}} html[data-theme="ember"] body.p-home .facts h3{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:0} html[data-theme="ember"] body.p-home .facts .fs{font-size:12px;color:var(--cream-mut);border-bottom:2px solid var(--cream-ink);padding:8px 0 8px;margin-bottom:8px} html[data-theme="ember"] body.p-home .facts dl{font-size:14px} html[data-theme="ember"] body.p-home .facts .fr{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(34,28,16,.18)} html[data-theme="ember"] body.p-home .facts .fr dt{font-weight:600} html[data-theme="ember"] body.p-home .facts .fr dd{font-family:var(--mono);font-size:13px} html[data-theme="ember"] body.p-home .facts .warn{font-size:11.5px;color:var(--cream-mut);margin-top:12px;line-height:1.6} html[data-theme="ember"] body.p-home .facts .warn b{color:var(--cream-ink)} html[data-theme="ember"] body.p-home .work{background:var(--bg1);padding:0 0 96px;position:relative} html[data-theme="ember"] body.p-home .work .seam{background:var(--bg1)} html[data-theme="ember"] body.p-home .work .k{color:var(--amber)} html[data-theme="ember"] body.p-home .work h2{font-size:clamp(32px,4vw,54px);line-height:1.12;margin:12px 0 16px;max-width:22ch} html[data-theme="ember"] body.p-home .work .lede{color:var(--mut);line-height:1.75} html[data-theme="ember"] body.p-home .lanes{margin-top:48px;display:flex;flex-direction:column;gap:16px} html[data-theme="ember"] body.p-home .lane{position:relative;display:grid;grid-template-columns:210px minmax(0,1fr) auto;gap:32px;align-items:center;padding:24px 32px;border-radius:8px;background:linear-gradient(94deg,var(--lt),transparent 70%);transform:skewX(-3deg);border-left:3px solid var(--lc);transition:background .25s} html[data-theme="ember"] body.p-home .lane>*{transform:skewX(3deg)} html[data-theme="ember"] body.p-home .lane:hover{background:linear-gradient(94deg,var(--lt),var(--lt))} @media (prefers-reduced-motion:reduce){html[data-theme="ember"] body.p-home .lane{transform:none;transition:none} html[data-theme="ember"] body.p-home .lane>*{transform:none}} html[data-theme="ember"] body.p-home .lane .m{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,32px);color:var(--lc);line-height:1.05} html[data-theme="ember"] body.p-home .lane .m span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:8px} html[data-theme="ember"] body.p-home .lane h3{font-size:clamp(22px,2.2vw,30px);font-weight:400} html[data-theme="ember"] body.p-home .lane p{font-size:13.5px;color:var(--mut);margin-top:8px;max-width:60ch;line-height:1.65} html[data-theme="ember"] body.p-home .lane .go{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap} html[data-theme="ember"] body.p-home .lane:hover .go,html[data-theme="ember"] body.p-home .lane:focus-within .go{color:var(--lc)} html[data-theme="ember"] body.p-home .l1{--lc:var(--ember);--lt:rgba(255,138,92,.12)} html[data-theme="ember"] body.p-home .l2{--lc:var(--violet);--lt:rgba(232,107,255,.10)} html[data-theme="ember"] body.p-home .l3{--lc:var(--amber);--lt:rgba(255,196,107,.10)} html[data-theme="ember"] body.p-home .l4{--lc:var(--rose);--lt:rgba(255,122,168,.10)} html[data-theme="ember"] body.p-home .l5{--lc:var(--violet);--lt:rgba(232,107,255,.08)} html[data-theme="ember"] body.p-home .l6{--lc:var(--ember);--lt:rgba(255,138,92,.08)} @media (max-width:860px){html[data-theme="ember"] body.p-home .lane{grid-template-columns:1fr;gap:12px}} html[data-theme="ember"] body.p-home .contract{padding:96px 0} html[data-theme="ember"] body.p-home .contract .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start} html[data-theme="ember"] body.p-home .contract .k{color:var(--violet)} html[data-theme="ember"] body.p-home .contract h2{font-size:clamp(28px,3.2vw,44px);margin:12px 0 16px;line-height:1.12} html[data-theme="ember"] body.p-home .contract p{color:var(--mut);margin-bottom:16px;max-width:56ch} html[data-theme="ember"] body.p-home .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px} html[data-theme="ember"] body.p-home .col{border-top:3px solid var(--cc);padding-top:16px} html[data-theme="ember"] body.p-home .col .ck{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc)} html[data-theme="ember"] body.p-home .col h3{font-size:20px;margin:8px 0 8px;font-weight:400;font-style:italic} html[data-theme="ember"] body.p-home .col p{font-size:13px;color:var(--mut);line-height:1.6} html[data-theme="ember"] body.p-home .co1{--cc:var(--amber)} html[data-theme="ember"] body.p-home .co2{--cc:var(--violet)} html[data-theme="ember"] body.p-home .co3{--cc:var(--ember)} html[data-theme="ember"] body.p-home .demo{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;position:relative;overflow:hidden} html[data-theme="ember"] body.p-home .demo::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(232,107,255,.3),transparent 70%)} html[data-theme="ember"] body.p-home .demo .dk{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} html[data-theme="ember"] body.p-home .demo .dk b{color:var(--amber);font-weight:500} html[data-theme="ember"] body.p-home .demo .box{background:var(--bg0);border:1px solid var(--line);border-radius:8px;padding:16px 16px;margin-top:16px;font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--mut)} html[data-theme="ember"] body.p-home .demo .box b{color:var(--ink);font-weight:500} html[data-theme="ember"] body.p-home .demo .q{border:1px solid rgba(255,196,107,.5);border-radius:8px;padding:12px 16px;margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--amber)} html[data-theme="ember"] body.p-home .lead{background:var(--bg1);padding:0 0 90px;position:relative} html[data-theme="ember"] body.p-home .lead .seam{background:var(--bg1)} html[data-theme="ember"] body.p-home .lead .k{color:var(--ember)} html[data-theme="ember"] body.p-home .lead h2{font-size:clamp(26px,3vw,40px);max-width:34ch;line-height:1.2;margin:12px 0 40px} html[data-theme="ember"] body.p-home .memos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} html[data-theme="ember"] body.p-home .memo{background:var(--card);border-radius:10px;padding:24px;border-top:3px solid var(--mc)} html[data-theme="ember"] body.p-home .memo .mk{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mc)} html[data-theme="ember"] body.p-home .memo h3{font-size:19px;font-weight:400;margin:8px 0 8px} html[data-theme="ember"] body.p-home .memo p{font-size:13.5px;color:var(--mut);line-height:1.65} html[data-theme="ember"] body.p-home .m1{--mc:var(--ember)} html[data-theme="ember"] body.p-home .m2{--mc:var(--violet)} html[data-theme="ember"] body.p-home .m3{--mc:var(--amber)} html[data-theme="ember"] body.p-home .errata{margin-top:24px;border:1.5px dashed var(--rose);border-radius:10px;padding:16px 24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;max-width:960px} html[data-theme="ember"] body.p-home .errata .ek{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);border:1.5px solid var(--rose);border-radius:4px;padding:4px 12px;transform:rotate(-3deg)} @media (prefers-reduced-motion:reduce){html[data-theme="ember"] body.p-home .errata .ek{transform:none}} html[data-theme="ember"] body.p-home .errata p{font-size:14px;color:var(--mut);max-width:66ch} html[data-theme="ember"] body.p-home .errata a{color:var(--amber);text-decoration:underline;text-underline-offset:3px} html[data-theme="ember"] body.p-home .quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px} html[data-theme="ember"] body.p-home .qt{background:var(--card);border-radius:10px;padding:24px 24px} html[data-theme="ember"] body.p-home .qt blockquote{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.6;color:var(--ink)} html[data-theme="ember"] body.p-home .qt figcaption{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--mut)} html[data-theme="ember"] body.p-home .qt figcaption b{color:var(--amber);font-weight:500;display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:0} html[data-theme="ember"] body.p-home .labrow{padding:92px 0} html[data-theme="ember"] body.p-home .labrow .k{color:var(--amber)} html[data-theme="ember"] body.p-home .labrow h2{font-size:clamp(28px,3.2vw,44px);margin:12px 0 40px} html[data-theme="ember"] body.p-home .lab3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} html[data-theme="ember"] body.p-home .labc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px} html[data-theme="ember"] body.p-home .labc .lk{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)} html[data-theme="ember"] body.p-home .labc b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;margin:8px 0 8px;color:var(--ink)} html[data-theme="ember"] body.p-home .labc p{font-size:13.5px;color:var(--mut);line-height:1.65} html[data-theme="ember"] body.p-home .acts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px} html[data-theme="ember"] body.p-home .act .ak{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember)} html[data-theme="ember"] body.p-home .act h3{font-size:19px;font-weight:400;font-style:italic;margin:8px 0 8px} html[data-theme="ember"] body.p-home .act p{font-size:13.5px;color:var(--mut);line-height:1.65} html[data-theme="ember"] body.p-home .close{position:relative;overflow:hidden;padding:120px 0 100px} html[data-theme="ember"] body.p-home .close .field{position:absolute;inset:0;background: radial-gradient(900px 520px at 8% -10%, rgba(155,75,255,.42), transparent 62%), radial-gradient(800px 520px at 105% 108%, rgba(255,106,61,.45), transparent 62%), linear-gradient(200deg,#1E1022 0%,#120B14 60%)} html[data-theme="ember"] body.p-home .close .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} html[data-theme="ember"] body.p-home .close .k{color:var(--ember)} html[data-theme="ember"] body.p-home .close h2{font-size:clamp(38px,4.8vw,64px);line-height:1.03;margin:16px 0 20px} html[data-theme="ember"] body.p-home .close h2 .grad{font-style:italic} html[data-theme="ember"] body.p-home .close .sub{color:var(--mut);max-width:46ch;line-height:1.75} html[data-theme="ember"] body.p-home .close .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px} html[data-theme="ember"] body.p-home .close .sig{margin-top:32px;color:var(--amber);font-size:26px} html[data-theme="ember"] body.p-home .pass{background:var(--cream);color:var(--cream-ink);border-radius:8px;padding:24px 24px;font-family:var(--mono);box-shadow:0 30px 64px rgba(0,0,0,.55);transform:rotate(1.4deg)} @media (prefers-reduced-motion:reduce){html[data-theme="ember"] body.p-home .pass{transform:none}} html[data-theme="ember"] body.p-home .pass .pk{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.16em;color:var(--cream-mut)} html[data-theme="ember"] body.p-home .pass .pr{display:flex;justify-content:space-between;align-items:center;margin:16px 0} html[data-theme="ember"] body.p-home .pass .pc{font-family:var(--serif);font-size:44px} html[data-theme="ember"] body.p-home .pass .arr{color:var(--cream-red);font-size:20px} html[data-theme="ember"] body.p-home .pass .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px dashed rgba(34,28,16,.3);padding-top:16px;font-size:10.5px;color:var(--cream-mut)} html[data-theme="ember"] body.p-home .pass .grid b{display:block;font-size:12.5px;font-weight:500;color:var(--cream-ink);margin-top:2px} html[data-theme="ember"] body.p-home .pass .stamp{display:inline-block;margin-top:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-red);border:2px solid var(--cream-red);border-radius:4px;padding:4px 12px;transform:rotate(-3deg)} @media (prefers-reduced-motion:reduce){html[data-theme="ember"] body.p-home .pass .stamp{transform:none}} html[data-theme="ember"] body.p-home .pass .bar{margin-top:16px;height:36px;background:repeating-linear-gradient(90deg,var(--cream-ink),var(--cream-ink) 2px,transparent 2px,transparent 5px)} html[data-theme="ember"] body.p-home footer{border-top:1px solid var(--line);padding:24px 0;font-family:var(--mono);font-size:12px;color:var(--dim)} html[data-theme="ember"] body.p-home footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} @media (max-width:1000px){html[data-theme="ember"] body.p-home .rrow{grid-template-columns:repeat(2,1fr)} html[data-theme="ember"] body.p-home .who .wrap{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .contract .wrap{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .memos{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .quotes{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .lab3{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .acts{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .close .wrap{grid-template-columns:1fr}} @media (max-width:640px){html[data-theme="ember"] body.p-home .rrow{grid-template-columns:1fr} html[data-theme="ember"] body.p-home nav a.nl{display:none} html[data-theme="ember"] body.p-home .cols{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .logo{font-size:16px;white-space:nowrap} html[data-theme="ember"] body.p-home nav ul{gap:8px} html[data-theme="ember"] body.p-home nav .pill{padding:8px 12px;font-size:10.5px;letter-spacing:.06em;white-space:nowrap} html[data-theme="ember"] body.p-home .wrap{padding:0 16px}} /* ---------- EMBER HOMEPAGE · fitting the live widgets into the prototype layout ---------- */ html[data-theme="ember"] body.p-home .hero .wrap.hero-split{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:48px;align-items:center} @media (max-width:1040px){ html[data-theme="ember"] body.p-home .hero .wrap.hero-split{grid-template-columns:1fr;gap:40px} } /* hero diagnostic — the one interactive Arpit named; ember demo-box language */ html[data-theme="ember"] body.p-home .hero-demo{opacity:1;transform:none;animation:none;flex:none;max-width:none} html[data-theme="ember"] body.p-home .hd-tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin-bottom:12px} html[data-theme="ember"] body.p-home .hd-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.5);position:relative;overflow:hidden} html[data-theme="ember"] body.p-home .hd-card::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(232,107,255,.28),transparent 70%);pointer-events:none} html[data-theme="ember"] body.p-home .hd-diag-q{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.3;color:var(--ink);margin:0 0 16px} html[data-theme="ember"] body.p-home .hd-preset{border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);position:relative;z-index:1} html[data-theme="ember"] body.p-home .hd-preset:hover{border-color:var(--ember);background:rgba(255,138,92,.08)} html[data-theme="ember"] body.p-home .hd-preset span, html[data-theme="ember"] body.p-home .hd-preset::after{color:var(--ember)} html[data-theme="ember"] body.p-home .hd-free input{color:var(--ink);border-bottom-color:var(--line)} html[data-theme="ember"] body.p-home .hd-free input:focus{border-color:var(--ember)} html[data-theme="ember"] body.p-home .hd-free-submit{color:var(--ember)} html[data-theme="ember"] body.p-home .hd-kicker{color:var(--mut)} html[data-theme="ember"] body.p-home .hd-said{color:var(--mut)} html[data-theme="ember"] body.p-home .hd-rule{background:var(--ember)} html[data-theme="ember"] body.p-home .hd-reframe{color:var(--ink)} html[data-theme="ember"] body.p-home .hd-reframe em{background:linear-gradient(92deg,var(--ember),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="ember"] body.p-home .hd-case-btn{background:linear-gradient(92deg,var(--ember),var(--violet));color:#1A0D08;border-radius:999px;font-weight:600} html[data-theme="ember"] body.p-home .hd-reset{color:var(--dim)} html[data-theme="ember"] body.p-home .hd-reset:hover{color:var(--amber)} html[data-theme="ember"] body.p-home .hd-err{color:var(--amber)} /* receipts: the expand buttons live inside the prototype cells */ html[data-theme="ember"] body.p-home .rcell{display:flex;flex-direction:column;align-items:flex-start} html[data-theme="ember"] body.p-home .rcpt-btn{margin-top:16px;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--rc);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;cursor:pointer} html[data-theme="ember"] body.p-home .rcpt-btn:hover{border-color:var(--rc)} html[data-theme="ember"] body.p-home .rcpt{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;margin-top:16px} html[data-theme="ember"] body.p-home .rcpt h3{font-size:20px;margin-bottom:12px} html[data-theme="ember"] body.p-home .rcpt-r, html[data-theme="ember"] body.p-home .rcpt-r-tight, html[data-theme="ember"] body.p-home .rcpt-r-last, html[data-theme="ember"] body.p-home .rcpt-r-tight-last{display:flex;gap:20px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)} html[data-theme="ember"] body.p-home .rcpt-l{flex:0 0 140px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} html[data-theme="ember"] body.p-home .rcpt-v{color:var(--mut);font-size:14px} /* contract demo */ html[data-theme="ember"] body.p-home .demo-slot .ccd{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;position:relative;overflow:hidden} html[data-theme="ember"] body.p-home .ccd-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;margin-bottom:16px} html[data-theme="ember"] body.p-home .ccd-cap b{color:var(--amber)} html[data-theme="ember"] body.p-home .ccd-ctr{background:var(--bg0);border:1px solid var(--line);border-radius:8px;color:var(--mut);padding:16px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.9;margin-bottom:12px} html[data-theme="ember"] body.p-home .ccd-ctr b{color:var(--ink)} html[data-theme="ember"] body.p-home .ccd-qs{display:flex;flex-direction:column;gap:8px} html[data-theme="ember"] body.p-home .ccd-q{background:transparent;border:1px solid rgba(255,196,107,.5);border-radius:8px;color:var(--amber);font-family:var(--mono);font-size:12.5px;padding:12px 16px;text-align:left;cursor:pointer} html[data-theme="ember"] body.p-home .ccd-q:hover{background:rgba(255,196,107,.1)} html[data-theme="ember"] body.p-home .ccd-ans{margin-top:16px;color:var(--mut);font-size:16px;line-height:1.6} html[data-theme="ember"] body.p-home .ccd-idle, html[data-theme="ember"] body.p-home .ccd-note, html[data-theme="ember"] body.p-home .ccd-src{color:var(--dim);font-family:var(--mono);font-size:11px} html[data-theme="ember"] body.p-home .ccd-tag--in{color:#7FCF9E;border:1.5px solid #7FCF9E;border-radius:4px;padding:2px 8px;font-size:10px} html[data-theme="ember"] body.p-home .ccd-tag--out{color:var(--rose);border:1.5px solid var(--rose);border-radius:4px;padding:2px 8px;font-size:10px} html[data-theme="ember"] body.p-home .contract-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase} html[data-theme="ember"] body.p-home .contract-links a{color:var(--amber);text-decoration:underline;text-underline-offset:3px} /* QC stamp cluster stays a cream artifact, on its own row */ html[data-theme="ember"] body.p-home .qc-slot{margin-top:32px} html[data-theme="ember"] body.p-home .hk-btn{background:linear-gradient(92deg,var(--ember),var(--violet));color:#1A0D08;border:none;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 24px;cursor:pointer;font-weight:600} html[data-theme="ember"] body.p-home .hk-btn:disabled{background:var(--card);color:var(--dim)} /* contact form */ html[data-theme="ember"] body.p-home .form-slot{margin-top:24px;max-width:460px} html[data-theme="ember"] body.p-home .form-slot input, html[data-theme="ember"] body.p-home .form-slot textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:var(--sans);font-size:16px;padding:12px 16px;margin-bottom:12px} html[data-theme="ember"] body.p-home .form-slot input::placeholder, html[data-theme="ember"] body.p-home .form-slot textarea::placeholder{color:var(--dim)} html[data-theme="ember"] body.p-home .form-slot button{background:linear-gradient(92deg,var(--ember),var(--violet));color:#1A0D08;border:none;border-radius:999px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:16px 24px;cursor:pointer;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px} html[data-theme="ember"] body.p-home .sig{margin-top:24px;color:var(--amber);font-size:26px} /* diagnostic list needs its own rhythm inside the prototype card */ html[data-theme="ember"] body.p-home .hd-presets{display:flex;flex-direction:column;gap:8px} html[data-theme="ember"] body.p-home .hd-preset{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:16px;line-height:1.35;text-decoration:none} html[data-theme="ember"] body.p-home .hd-preset span{flex:0 0 auto;font-family:var(--mono);font-size:11px} html[data-theme="ember"] body.p-home .hd-preset::after{content:"→";margin-left:auto;padding-left:12px;opacity:.5} html[data-theme="ember"] body.p-home .hd-preset:hover::after{opacity:1} html[data-theme="ember"] body.p-home .hd-free{margin-top:16px;display:flex;align-items:flex-end;gap:8px} html[data-theme="ember"] body.p-home .hd-free input{flex:1 1 auto;background:transparent;border:none;border-bottom:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:15px;padding:8px 2px} html[data-theme="ember"] body.p-home .hd-diag > a{display:block;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} html[data-theme="ember"] body.p-home .hd-diag > a:hover{color:var(--amber)} /* nav CTA: the prototype pill sizing, not the classic block */ html[data-theme="ember"] body.p-home .nav-cta{padding:12px 20px;line-height:1;white-space:nowrap; color:#1A0D08;font-weight:600} /* dark ink on the hot gradient: cream measured 2.21:1 */ @media (max-width:640px){ /* the QC slip is a rotated cream artifact — its rotated box overflowed the viewport by 23px at 390 (measured in a real viewport, not headless) */ html[data-theme="ember"] body.p-home .qc-slot{overflow:hidden;padding:0 4px} html[data-theme="ember"] body.p-home .qc-stamp{transform:none;max-width:100%} html[data-theme="ember"] body.p-home .qc{max-width:100%} } /* ---------- EMBER HOMEPAGE · hero fits the viewport; receipts get their rhythm ---------- Measured 2026-08-13 at 1200x785: hero was 942px tall against 708px of usable height (viewport minus the 77px sticky nav) — it overflowed by 234px, so the credentials line and the CTAs sat below the fold on a laptop. The h1 clamp now answers to viewport HEIGHT as well as width, and the band padding is fluid. */ html[data-theme="ember"] body.p-home .hero{ /* #nav is position:FIXED (styles.css:108), so it reserves no flow space — the hero starts at viewport top and must pay for the nav itself. Measured: the kicker sat 23px UNDER the nav before this. --navh covers the 93px bar plus air; the hero then fills exactly one viewport. */ --navh:93px; padding:calc(var(--navh) + clamp(24px,4vh,48px)) 0 clamp(48px,8vh,120px); min-height:100svh;display:flex;align-items:center} @media (max-width:900px){html[data-theme="ember"] body.p-home .hero{--navh:76px}} html[data-theme="ember"] body.p-home .hero h1{ font-size:clamp(38px,min(7.2vw,9.2vh),106px);max-width:16ch; margin:clamp(16px,2.2vh,24px) 0 clamp(16px,2.2vh,24px)} html[data-theme="ember"] body.p-home .hero .cred{margin-top:clamp(20px,3.4vh,40px);line-height:1.9} html[data-theme="ember"] body.p-home .hero .ctas{margin-top:clamp(20px,3.2vh,32px)} @media (max-width:1040px){ html[data-theme="ember"] body.p-home .hero{min-height:0;display:block} } /* the inline receipt panels use .rcpt-row / .rcpt-l / .rcpt-v — NOT the .rcpt-r* names I first wrote, so under Ember they inherited zero padding and read as one solid block. Real class names, real rhythm. */ html[data-theme="ember"] body.p-home .rcpt{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 32px;margin-top:16px} html[data-theme="ember"] body.p-home .rcpt-h{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3;margin:0 0 16px;color:var(--ink)} html[data-theme="ember"] body.p-home .rcpt-rows{display:flex;flex-direction:column} html[data-theme="ember"] body.p-home .rcpt-row{ display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:baseline; padding:16px 0;border-bottom:1px solid var(--line)} html[data-theme="ember"] body.p-home .rcpt-row:last-of-type{border-bottom:none} html[data-theme="ember"] body.p-home .rcpt-l{ font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; line-height:1.8;color:var(--dim)} html[data-theme="ember"] body.p-home .rcpt-v{font-size:14.5px;line-height:1.75;color:var(--mut)} html[data-theme="ember"] body.p-home .rcpt{position:relative} html[data-theme="ember"] body.p-home .rcpt-h{padding-right:110px} /* corner reserved for .rcpt-close */ html[data-theme="ember"] body.p-home .rcpt-close{ position:absolute;top:20px;right:20px;min-width:44px;min-height:44px; font-family:var(--ff-label);font-weight:600;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-dim);background:none; border:1px solid var(--border);border-radius:8px;padding:0 16px;cursor:pointer} html[data-theme="ember"] body.p-home .rcpt-close:hover{color:var(--ink);border-color:var(--border-accent)} html[data-theme="ember"] body.p-home .rcpt-more{ display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--amber); text-decoration:underline;text-underline-offset:3px; border-bottom:none;padding-bottom:0} /* classic drew a border-bottom AND ember drew text-decoration — two underlines. One voice: the text-decoration. */ @media (max-width:640px){ html[data-theme="ember"] body.p-home .rcpt-row{grid-template-columns:1fr;gap:4px} html[data-theme="ember"] body.p-home .rcpt{padding:20px 20px} } /* ---------- EMBER HOMEPAGE · class-name collisions with the classic sheet ---------- The prototype names its sections .lead/.work/.close etc. Classic already owns .lead as a TYPOGRAPHY class (font + max-width:46ch), so
inherited a 534px reading measure: the memo cards rendered 144px wide and the two letters 218px. Measured 2026-08-13 by walking the memo's ancestor chain. Six names collide (.wrap .k .hand .lead .lede .m) — reset what the prototype does not declare, on the homepage only. */ html[data-theme="ember"] body.p-home main > section{max-width:none;width:auto} html[data-theme="ember"] body.p-home section.lead{ font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.65;color:var(--ink)} html[data-theme="ember"] body.p-home .lanes .m{max-width:none;font-weight:400} html[data-theme="ember"] body.p-home .work .lede{max-width:none} /* the stamp cluster was flung to the page edges by the classic flex (justify-content :center on a full-width row): ~500px of dead gap between the button and the slip. Pair them as one object with designed space between. */ html[data-theme="ember"] body.p-home .qc-slot .hk-qc{ justify-content:flex-start;gap:clamp(32px,5vw,80px);max-width:840px;margin-top:40px} html[data-theme="ember"] body.p-home .qc-slot .hk-qc-side{flex:0 1 320px} html[data-theme="ember"] body.p-home .qc-slot .hk-qc-obj{flex:0 0 300px;margin:0} /* at 390 the hero CTA's gradient sits in its violet half under the dark ink (measured 3.51:1); flip to a solid ember fill on narrow screens where the gradient has no room to read anyway */ @media (max-width:640px){ /* beats the earlier [data-cta=send-role][data-location=hero] rule, which carries !important from the classic-DOM era and was forcing the gradient back on */ html[data-theme="ember"] body.p-home .hero .pill-hot{background:#FFB08E!important;color:#1A0D08!important} } /* ================================================================ EMBER · CASE STUDIES — the prototype grammar applied to the case page's own components. Each case carries one heat as its identity (matching its lane on the homepage). The client-product reconstructions (.plA/.plB/.pl*, .recon, .rx*) are period artifacts and are deliberately NOT reskinned — same rule as the cream objects. ================================================================ */ html[data-theme="ember"] body[class*="p-case-studies"]{--heat:var(--ember);--heat2:#FFB08E} html[data-theme="ember"] body.p-case-studies-adtech{--heat:#FF6A3D;--heat2:#FFB08E} html[data-theme="ember"] body.p-case-studies-fintech{--heat:#C64BFF;--heat2:#E86BFF} html[data-theme="ember"] body.p-case-studies-vc-diligence{--heat:#FFC46B;--heat2:#FFE0A8} html[data-theme="ember"] body.p-case-studies-ptc{--heat:#FF5FA2;--heat2:#FF9DC6} html[data-theme="ember"] body.p-case-studies-o2{--heat:#A96BFF;--heat2:#E86BFF} html[data-theme="ember"] body.p-case-studies-orgos{--heat:#FF8A5C;--heat2:#FFC46B} /* --- hero: the gradient field, tinted by the case's heat --- */ html[data-theme="ember"] body[class*="p-case-studies"] .case-hero{ position:relative;overflow:hidden;background:transparent; padding:calc(93px + clamp(24px,4vh,48px)) 0 clamp(48px,8vh,96px)} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero::before{ content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(900px 460px at 88% -14%, color-mix(in srgb, var(--heat) 42%, transparent), transparent 62%), radial-gradient(700px 500px at -6% 112%, rgba(155,75,255,.34), transparent 62%), linear-gradient(160deg,#1E1022 0%,#120B14 58%,#190D10 100%)} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero__in{position:relative;z-index:1} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero__kicker{color:var(--heat)} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero h1{ font-size:clamp(38px,min(6vw,8.4vh),82px);line-height:1.04;margin:20px 0 20px} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero__hook{ font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--ink-muted);max-width:60ch} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero .hand{color:var(--amber)} /* --- the stat row: heat-coded cards, the homepage receipts language --- */ html[data-theme="ember"] body[class*="p-case-studies"] .case-stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-top:32px} html[data-theme="ember"] body[class*="p-case-studies"] .case-stat{ background:var(--bg-card);border:none;border-top:3px solid var(--heat); border-radius:10px;padding:20px} html[data-theme="ember"] body[class*="p-case-studies"] .case-stat b{ display:block;font-family:var(--ff-display);font-weight:400; font-size:clamp(24px,2.4vw,34px);line-height:1.1;color:var(--heat)} html[data-theme="ember"] body[class*="p-case-studies"] .case-stat span{ display:block;margin-top:8px;font-family:var(--ff-label);font-size:11.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);line-height:1.8} /* --- vitals: a quiet card strip, not a bare dl --- */ html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals{ background:var(--bg-card);border:1px solid var(--border);border-radius:12px; padding:20px 24px;gap:24px 32px} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals dt{ font-family:var(--ff-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals dd{color:var(--ink);margin-top:4px} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals .gold{color:var(--heat)} /* --- ownership + receipt blocks: bordered cards with the label column --- */ html[data-theme="ember"] body[class*="p-case-studies"] .framed-tight, html[data-theme="ember"] body[class*="p-case-studies"] .framed{ background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--heat); border-radius:0 12px 12px 0;padding:8px 24px} html[data-theme="ember"] body[class*="p-case-studies"] :is(.rcpt-r,.rcpt-r-tight,.rcpt-r-last,.rcpt-r-tight-last){ display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:baseline; padding:16px 0;border-bottom:1px solid var(--border)} html[data-theme="ember"] body[class*="p-case-studies"] :is(.rcpt-r-last,.rcpt-r-tight-last){border-bottom:none} html[data-theme="ember"] body[class*="p-case-studies"] .lbl-eyebrow{color:var(--ink-dim);line-height:1.8} @media (max-width:640px){ html[data-theme="ember"] body[class*="p-case-studies"] :is(.rcpt-r,.rcpt-r-tight,.rcpt-r-last,.rcpt-r-tight-last){ grid-template-columns:1fr;gap:4px} } /* --- section rhythm: alternating bands with one angled seam --- */ html[data-theme="ember"] body[class*="p-case-studies"] main > section:nth-of-type(even){ background:var(--bg-soft);position:relative} html[data-theme="ember"] body[class*="p-case-studies"] main > section:nth-of-type(even)::before{ content:"";position:absolute;left:0;right:0;top:-56px;height:56px;background:var(--bg-soft); clip-path:polygon(0 100%,100% 0,100% 100%,0 100%);pointer-events:none} /* --- pull quotes: the heat rail --- */ html[data-theme="ember"] body[class*="p-case-studies"] .t-quote, html[data-theme="ember"] body[class*="p-case-studies"] blockquote{ border-left:3px solid var(--heat);background:var(--bg-card); border-radius:0 10px 10px 0;padding:20px 24px} /* --- CTAs --- */ html[data-theme="ember"] body[class*="p-case-studies"] .btn-a, html[data-theme="ember"] body[class*="p-case-studies"] .lbl-pill-bg, html[data-theme="ember"] body[class*="p-case-studies"] .btn-label{ border-radius:999px;background:linear-gradient(92deg,var(--heat),var(--heat2))!important;color:#1A0D08!important} /* .measure-c caps the whole case body at 595px — right for prose, wrong for the card components, which sat centred in a narrow column with dead space either side. Widen the container; give the PROSE its measure back explicitly; pin the client-product reconstructions to their original width so widening the column cannot distort a period artifact. */ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c{max-width:1100px;padding:0 24px} html[data-theme="ember"] body[class*="p-case-studies"] .measure-c > :is(p,h2,h3,ul,ol,blockquote,.t-quote), html[data-theme="ember"] body[class*="p-case-studies"] .measure-c > div > :is(p,h2,h3){max-width:66ch} html[data-theme="ember"] body[class*="p-case-studies"] :is(.plA,.plB,.plC,.recon,.recon-stage,[class^="pl"],[class*=" pl"]){ max-width:640px;margin-left:0} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero__in{max-width:1100px;padding:0 24px;margin:0 auto} /* widening the container cost the prose its reading measure (body copy ran to ~1050px). Cap the TEXT wherever it sits in the flow; inside cards let the card's own width govern so no card carries a dead right-hand column. */ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c :is(p,h2,h3,li,blockquote){max-width:66ch} html[data-theme="ember"] body[class*="p-case-studies"] :is(.framed,.framed-tight,.case-vitals,.t-quote) :is(p,h2,h3,li,div,dd,dt,blockquote){max-width:none} html[data-theme="ember"] body[class*="p-case-studies"] .framed{max-width:76ch} /* GESTALT · PROXIMITY — the walk-through CTA sat in its own right-hand column. Measured: only 32px from the text BLOCK, but the prose wraps at 62ch, so the real distance from the last word to the link was ~200px of void and the two read as unrelated objects. The CTA now joins the text group: same column, directly under the hook, so one lane = one visual unit. */ /* the lane has THREE children: metric, one wrapper holding

+

, and .go. A three-row template left a phantom empty 'desc' row (measured 74px between hook and CTA). Two rows match the real DOM. */ html[data-theme="ember"] body.p-home .lanes .lane{ grid-template-columns:210px minmax(0,1fr); grid-template-areas:"head title" "head go"} html[data-theme="ember"] body.p-home .lanes .lane .go{ grid-area:go;justify-self:start;margin-top:16px;color:var(--lc); border-bottom:1px solid color-mix(in srgb, var(--lc) 45%, transparent);padding-bottom:2px} html[data-theme="ember"] body.p-home .lanes .lane:hover .go{ border-bottom-color:var(--lc)} @media (max-width:860px){ html[data-theme="ember"] body.p-home .lanes .lane{ grid-template-columns:1fr;grid-template-areas:"head" "title" "go"} } /* rows were centring their content, adding ~56px of slack between the hook and its CTA (measured 78px total). Hug the content; keep the metric column optically centred against the whole lane. */ html[data-theme="ember"] body.p-home .lanes .lane{align-items:start} html[data-theme="ember"] body.p-home .lanes .lane .ai-case-head, html[data-theme="ember"] body.p-home .lanes .lane > div:first-child{align-self:center} html[data-theme="ember"] body.p-home .lanes .lane .go{margin-top:8px} /* MOBILE MENU — the prototype's `nav ul{display:flex}` (specificity 0,3,2 once scoped) outranked classic's @media(max-width:1100px){.nav-links{display:none}} (0,1,0), so the drawer was permanently open: the toggle fired correctly (class + aria both flipped, measured) but nothing ever hid. Restore the drawer behaviour at the classic breakpoint. */ @media (max-width:1100px){ html[data-theme="ember"] body.p-home .nav-links{ display:none;flex-direction:column;align-items:stretch;position:fixed;top:64px;left:0;right:0; background:rgba(18,11,20,.97);padding:32px 24px;gap:24px;border-bottom:1px solid var(--border);z-index:99} html[data-theme="ember"] body.p-home .nav-links.nav-open{display:flex} } /* ================================================================ GESTALT PASS — 52 measured findings, independently re-verified, deduplicated to component-level fixes. Full plan + evidence: workflow wf_c6f0cf1b-6c2. Framing: ember.css only scopes p-home and p-case-studies; the other six page groups run classic CSS under Ember tokens. ~25 of the 52 findings are that one gap — these are the interim patch, NOT the port (task #5). ================================================================ */ /* --- T1.1 · plate captions amputated at the window edge (126px lost at 1440, 131px of 358 at 390). Must sit AFTER ember.css:706 [class^="pl"] — equal specificity, order decides. --- */ html[data-theme="ember"] body[class*="p-case-studies"] :is(.plA,.plB,.plC,.plA-caption,.plB-caption,.plC-caption){ margin-right:0;transform:none;width:auto} /* --- T1.2 · /lab/loop.html demo inputs at 1.03:1 — the numbers driving abstain() were invisible --- */ html[data-theme="ember"] body.p-lab-loop .lab-ctl input[type="number"], html[data-theme="ember"] body.p-lab-loop .act-cream .lab-ctl input[type="number"]{ background:var(--bg-soft);color:var(--ink);border:1px solid var(--border)} /* --- T1.3 · /hire → /screen handoff link was styled identically to prose (zero delta on all five properties) while LinkedIn/GitHub got gold --- */ html[data-theme="ember"] body.p-hire :is(.hire-avail,.hire-contact) a{color:var(--amber)!important} html[data-theme="ember"] body.p-hire :is(.hire-avail,.hire-contact) a:hover{ text-decoration:underline;text-underline-offset:3px} /* --- T1.4 · "In production" badge 2.01:1, nine uses sitewide --- */ html[data-theme="ember"] .lbl-badge-ink{color:var(--cta-ink)} /* --- T1.5 · /writing/ Substack cards: fill identical to page ground (1.000:1) and the hover never fired (border shorthand !important) --- */ html[data-theme="ember"] body.p-writing .xi-writing-020{ background:var(--bg-card)!important;padding:24px 32px!important; transition:border-color .25s var(--ease-out),transform .25s var(--ease-out)!important} html[data-theme="ember"] body.p-writing .xi-writing-020:hover{ border-color:var(--border-accent)!important;transform:translateY(-4px)} /* --- T2.6 · contact submit was the only CTA not in the Ember language (flat amber slab reading as disabled, on the terminal action). .xi-home-098 sets bg/radius/padding !important — must match it. --- */ html[data-theme="ember"] body.p-home .form-slot button[type="submit"]{ background:var(--g-hot)!important;border-radius:999px!important; color:var(--cta-ink)!important;padding:12px 24px!important} html[data-theme="ember"] body.p-home .form-slot :is(input,textarea){border-radius:8px!important} /* --- T2.7 · receipts act: 43.7px button stagger, body leading leaking into h2, note crowding. Verified together, shipped together. --- */ html[data-theme="ember"] body.p-home :is(.receipts,.labrow) h2{line-height:1.12} html[data-theme="ember"] body.p-home .receipts .hand{margin-top:24px} html[data-theme="ember"] body.p-home .receipts .rrow{margin-top:20px} html[data-theme="ember"] body.p-home .rcell span{margin-bottom:16px} html[data-theme="ember"] body.p-home .rcell .rcpt-btn{margin-top:auto} /* --- T2.8 · work lanes had no right edge (36% of each lane dissolved into the band) and the skew left a 12.3px staircase at 390 --- */ html[data-theme="ember"] body.p-home .lanes .lane{ background:linear-gradient(94deg,var(--lt),transparent 70%),rgba(245,237,230,.035); border-top:1px solid rgba(245,237,230,.10); border-right:1px solid rgba(245,237,230,.10); border-bottom:1px solid rgba(245,237,230,.10)} @media (max-width:860px){ html[data-theme="ember"] body.p-home .lanes .lane, html[data-theme="ember"] body.p-home .lanes .lane > *{transform:none} } html[data-theme="ember"] body.p-home .lanes .lane .go{margin-left:0} /* single-axis lanes: .go shares the left axis, no skew to correct */ /* --- T2.9 · demo card carried an orphaned top:104px from the classic layout. (The hero eyebrow alignment half of this finding is NOT applied: it trades two 74px slivers for one 148px void — see report.) --- */ html[data-theme="ember"] body.p-home .demo-slot .ccd{top:auto} /* --- T3.10 · .case-stat span: a 22ch cap re-resolved in 11.5px mono left half of every stat card empty --- */ html[data-theme="ember"] body[class*="p-case-studies"] .case-stat span{max-width:none} /* --- T3.11 · .rcpt-box was byte-identical to .framed-tight in classic; Ember promoted one to a rail-card and left the other bare --- */ html[data-theme="ember"] body[class*="p-case-studies"] .rcpt-box{ background:var(--bg-card);border:1px solid var(--border); border-left:3px solid var(--heat);border-radius:0 12px 12px 0;padding:8px 24px} /* --- T3.12 · quote cards drawn twice: my rule hit both parent and child, giving two identical 3px rails 24px apart --- */ html[data-theme="ember"] body[class*="p-case-studies"] :is(figure,blockquote) .t-quote{ background:none;border:0;border-radius:0;padding:0;max-width:none} /* --- T3.13 · .case-vitals: a 32px column-gap turned a contiguous strip into floating rules and stranded the 6th cell. Grid neutralises the classic flex:1 1 160px that survives Ember. --- */ html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals > div{ padding:20px 24px;border-right:1px solid var(--border)} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals > div:nth-child(3n), html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals > div:last-child{border-right:0} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals > div:nth-child(n+4){ border-top:1px solid var(--border)} @media (max-width:640px){ html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals{grid-template-columns:1fr} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals > div{border-right:0} html[data-theme="ember"] body[class*="p-case-studies"] .case-vitals > div + div{border-top:1px solid var(--border)} } /* --- T3.14 · one heat per case: leftover gold rails sat 26px from heat rails on identical cards --- */ html[data-theme="ember"] body[class*="p-case-studies"] :is(.case-gate,.note-gold,.note-gold-b,.pullq){ border-left-color:var(--heat)} html[data-theme="ember"] body[class*="p-case-studies"] :is(.case-gate .cg-l,.case-gate b){color:var(--heat)} html[data-theme="ember"] body[class*="p-case-studies"] blockquote[class*="xi-case-studies-"]{ border-left:3px solid var(--heat)!important} /* --- T3.15/16 · .case-jump glued to the wrong card (8px above / 48px below); .case-gate 37% empty --- */ html[data-theme="ember"] body[class*="p-case-studies"] .case-gate{margin-bottom:40px;max-width:688px} html[data-theme="ember"] body[class*="p-case-studies"] .case-jump{margin:0 0 24px} /* --- T4.18 · /screen/ mono roles destroyed by a :where() rule (0 specificity) — needs REAL specificity, not later order --- */ html[data-theme="ember"] body.p-screen .scr-q p.scr-num{ font-family:var(--ff-label);font-size:var(--fs-eyebrow);letter-spacing:.15em; color:var(--amber);margin:0 0 8px} html[data-theme="ember"] body.p-screen .scr-q p.scr-receipt{ font-family:var(--ff-label);font-size:var(--fs-caption);letter-spacing:.08em; line-height:1.7;color:var(--ink-dim);margin:24px 0 0} /* --- T4.19/20 · lab output tiers collapsed; one chart series below the WCAG floor (2.79:1) --- */ html[data-theme="ember"] body.p-lab-loop .lab-fn .lab-explain{ font-size:var(--fs-ui);line-height:1.65;max-width:none} html[data-theme="ember"] body.p-lab-loop .lab-fn .lab-json{ font-size:var(--fs-caption);line-height:1.7;max-width:none;margin:0} html[data-theme="ember"] body.p-lab-loop .lab-bin .lab-conf, html[data-theme="ember"] body.p-lab-loop .lab-legend i.xi-lab-loop-008{background:var(--violet)!important} /* --- T4.21 · patterns: metadata unpinned, wireframe greys 12x apart, gold card not closing evenly --- */ html[data-theme="ember"] body.p-patterns .card-p28{display:flex;flex-direction:column} html[data-theme="ember"] body.p-patterns .card-p28 .lbl-cap{margin-top:auto} html[data-theme="ember"] .card-wire .row-ic > div:first-child{background:rgba(245,237,230,.14);opacity:1} html[data-theme="ember"] .card-wire .row-ic > div + div{background:rgba(245,237,230,.30)} html[data-theme="ember"] .card-gold{ background:var(--bg-card);border-color:var(--border); border-left:3px solid var(--amber);border-radius:0 4px 4px 0} html[data-theme="ember"] .card-gold > :last-child, html[data-theme="ember"] .card-gold > :last-child > :last-child{margin-bottom:0} /* --- T4.22 · a box inside an identical box (51% empty, borders 33px apart). Deleting the redundant frame rather than building a grid around emptiness — flagged as my call, reversible. --- */ html[data-theme="ember"] body.p-patterns .xi-patterns-023{ border:0!important;padding:0!important;margin:0 0 32px!important} /* --- T4.23 · writing/resources one-liners. Using .1em (not the plan's .06em, which breaks the .15em eyebrow token) — measured below. --- */ html[data-theme="ember"] body.p-resources .card-p32 > p:last-child{margin-bottom:0!important} html[data-theme="ember"] body.p-writing .card-p32 p, html[data-theme="ember"] body.p-resources .card-p32 p{max-width:54ch!important} html[data-theme="ember"] body.p-writing .lead{max-width:46ch!important} html[data-theme="ember"] body.p-writing header.xi-writing-003{border-bottom:0!important} @media (max-width:600px){ html[data-theme="ember"] body.p-writing .xi-writing-018{letter-spacing:.1em} } /* --- T4.24 · hire/screen remainder. .hand carries margin !important, so clearance comes from the FOLLOWING sibling; .xi-hire-005 forces the span colour, so the PARENT is muted instead. --- */ html[data-theme="ember"] body.p-hire .hand + .hire-receipts, html[data-theme="ember"] body.p-screen .hand + .scr-q{margin-top:24px} html[data-theme="ember"] body.p-hire .hire-receipt{display:flex;flex-direction:column} html[data-theme="ember"] body.p-hire .hire-receipt small{margin-top:auto;padding-top:8px} html[data-theme="ember"] body.p-hire .hire-cred{color:var(--ink-dim)} /* --- T4.25 · control shape language. NOT applying the plan's `.btn-a{border:1px solid transparent}`: it adds 2px to every .btn-a sitewide, which is a regression risk across nav/hero/case CTAs. --- */ html[data-theme="ember"] :is(.btn-a-ghost,.btn-b){border-radius:999px;border-color:var(--border-accent)} html[data-theme="ember"] .card-seg{border-radius:8px} /* two deltas from the verification pass: submit sat 4px shorter than the nav pill (40 vs 44), and .ccd still carried a 32px top margin after top:auto */ html[data-theme="ember"] body.p-home .form-slot button[type="submit"]{padding:16px 24px!important} html[data-theme="ember"] body.p-home .demo-slot .ccd{margin-top:0} /* ================================================================ PLATE CENTERING — REGRESSION I CAUSED, NOW REVERTED Every reconstruction plate and caption centres itself with the same trick: width:min(840px,…) · margin:… 50% … · transform:translateX(-50%). My earlier rule set margin-left:0 and max-width:640px but LEFT THE TRANSFORM IN PLACE, so each plate slid half its own width to the left — off the viewport on PTC, and the whole case column read as left-shifted. The T1.1 "fix" then named .plB/.plC, which do not exist; the real classes are plA plF plM plO plP plV. Restore the classic centering, bounded by the CONTAINER (100%) rather than the viewport so the wider Ember column can never push a plate off-screen. ================================================================ */ html[data-theme="ember"] body[class*="p-case-studies"] :is(.plA,.plF,.plM,.plO,.plP,.plV){ width:min(840px,100%);max-width:none;margin:32px 50% 8px;transform:translateX(-50%)} html[data-theme="ember"] body[class*="p-case-studies"] :is(.plA-caption,.plF-caption,.plM-caption,.plO-caption,.plP-caption,.plV-caption){ width:min(840px,100%);max-width:none;margin:0 50% 24px;transform:translateX(-50%)} html[data-theme="ember"] body[class*="p-case-studies"] :is(.recon,.recon-stage){ max-width:none;margin-left:auto;margin-right:auto} @media (max-width:900px){ html[data-theme="ember"] body[class*="p-case-studies"] :is(.plA,.plF,.plM,.plO,.plP,.plV, .plA-caption,.plF-caption,.plM-caption,.plO-caption,.plP-caption,.plV-caption){ width:100%;margin-left:0;margin-right:0;transform:none} } /* --- NEGATIVE SPACE · the boundary notes --- .note-gold / .note-gold-b span the full 1052px column while their prose is capped at 60–62ch by an !important rule (styles.css:1855/1857) — so ~40% of each card was empty on the right. Cap the CARD to its content instead of letting it stretch. Same treatment the .framed cards already have. --- */ html[data-theme="ember"] body[class*="p-case-studies"] :is(.note-gold,.note-gold-b){ max-width:60ch} /* 76ch still left 182px (25%) dead; the prose is pinned at 62ch !important, so the card is sized to text + padding */ /* --- FOOTER · text was touching the frame edges --- */ html[data-theme="ember"] footer{padding:40px 48px;gap:24px} html[data-theme="ember"] body.p-home footer{ max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px} @media (max-width:640px){ html[data-theme="ember"] footer{padding:32px 20px;flex-wrap:wrap} html[data-theme="ember"] body.p-home footer{padding-left:20px;padding-right:20px} } /* ================================================================ TASK #5 — THE PORT. The six page groups that carried data-theme ="ember" but zero Ember component rules (the Gestalt audit's headline finding: ~25 of 52 defects traced to this one gap). Same method as the case studies: Ember GRAMMAR on each group's own components — gradient hero field, one heat per group, card shells, seams, pill controls — not a DOM rebuild. The cream artifacts and the wireframe specimens keep their conventions. ================================================================ */ html[data-theme="ember"] body.p-patterns{--heat:#FFC46B;--heat2:#FFE0A8} html[data-theme="ember"] body[class*="p-lab"]{--heat:#E86BFF;--heat2:#C64BFF} html[data-theme="ember"] body.p-hire{--heat:#FF8A5C;--heat2:#FFB08E} html[data-theme="ember"] body.p-screen{--heat:#FF7AA8;--heat2:#FF9DC6} html[data-theme="ember"] body[class*="p-writing"]{--heat:#A96BFF;--heat2:#E86BFF} html[data-theme="ember"] body[class*="p-resources"]{--heat:#FF6A3D;--heat2:#FFB08E} /* --- shared: every ported page gets the hero field + heat accents --- */ html[data-theme="ember"] :is(body.p-patterns,body[class*="p-lab"],body.p-hire,body.p-screen, body[class*="p-writing"],body[class*="p-resources"]) :is(.eyebrow,.lbl-eyebrow,.scr-kicker){ color:var(--heat)} html[data-theme="ember"] :is(body.p-patterns,body[class*="p-lab"],body.p-hire,body.p-screen, body[class*="p-writing"],body[class*="p-resources"]) .hand{color:var(--amber)} html[data-theme="ember"] :is(body.p-patterns,body[class*="p-lab"],body.p-hire,body.p-screen, body[class*="p-writing"],body[class*="p-resources"]) :is(h1,.t-hero,.scr-title,.hire-name){ line-height:1.06} /* section titles were inheriting body leading (1.65) — the same defect the audit measured on the homepage h2s */ html[data-theme="ember"] :is(body.p-patterns,body[class*="p-lab"],body.p-hire,body.p-screen, body[class*="p-writing"],body[class*="p-resources"]) .section-title{line-height:1.14} /* --- the page header becomes a gradient field, tinted by the group's heat --- */ html[data-theme="ember"] :is(body.p-patterns,body[class*="p-lab"],body.p-hire,body.p-screen, body[class*="p-writing"],body[class*="p-resources"]) > header:first-of-type, html[data-theme="ember"] body.p-patterns main > section:first-of-type, html[data-theme="ember"] body[class*="p-lab"] .lab-hero, html[data-theme="ember"] body[class*="p-writing"] header, html[data-theme="ember"] body.p-hire .hire-head{ position:relative;overflow:hidden; padding-top:calc(93px + clamp(24px,4vh,48px));padding-bottom:clamp(40px,6vh,80px)} html[data-theme="ember"] :is(body.p-patterns main > section:first-of-type, body[class*="p-lab"] .lab-hero, body[class*="p-writing"] header, body.p-hire .hire-head)::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background: radial-gradient(900px 440px at 88% -16%, color-mix(in srgb, var(--heat) 34%, transparent), transparent 62%), radial-gradient(700px 480px at -6% 112%, rgba(155,75,255,.26), transparent 62%), linear-gradient(160deg,#1E1022 0%,#120B14 58%,#190D10 100%)} html[data-theme="ember"] :is(body.p-patterns main > section:first-of-type, body[class*="p-lab"] .lab-hero, body[class*="p-writing"] header, body.p-hire .hire-head) > *{ position:relative;z-index:1} /* --- card shells: the Ember card, not a 4px-radius outline --- */ html[data-theme="ember"] :is(.card-p28,.card-p32,.framed-blk,.hire-receipt,.hire-quote,.ckl){ background:var(--bg-card);border:1px solid var(--border);border-radius:12px} html[data-theme="ember"] :is(.card-p28,.card-p32){padding:24px} html[data-theme="ember"] .card-p32{padding:32px} html[data-theme="ember"] :is(.card-p28,.card-p32,.framed-blk):hover{border-color:var(--border-accent)} html[data-theme="ember"] .card-title{line-height:1.25} /* the accent rail marks a card as belonging to this page's family */ html[data-theme="ember"] :is(body.p-patterns,body[class*="p-writing"],body[class*="p-resources"]) :is(.card-p28,.card-p32){border-left:3px solid var(--heat);border-radius:0 12px 12px 0} /* --- /screen/ : each answered question is a card, not a hairline --- */ html[data-theme="ember"] body.p-screen .scr-q{ background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--heat); border-radius:0 12px 12px 0;padding:24px 32px;margin:0 0 20px} html[data-theme="ember"] body.p-screen .scr-close{ background:var(--bg-soft);border-radius:12px;padding:32px;margin-top:32px} /* --- /hire/ : receipts read as one family --- */ html[data-theme="ember"] body.p-hire .hire-receipt{border-left:3px solid var(--heat);border-radius:0 12px 12px 0} html[data-theme="ember"] body.p-hire .hire-quote{border-left:3px solid var(--violet);border-radius:0 12px 12px 0;padding:20px 24px} html[data-theme="ember"] body.p-hire .hire-sec{margin-bottom:48px} /* --- /lab/ : the code surfaces --- */ html[data-theme="ember"] body[class*="p-lab"] :is(.lab-note,.lab-links,.lab-body){border-radius:12px} html[data-theme="ember"] body[class*="p-lab"] .lab-note{ background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--heat); border-radius:0 12px 12px 0;padding:20px 24px} html[data-theme="ember"] body[class*="p-lab"] .t-code, html[data-theme="ember"] body[class*="p-lab"] .td-inline{color:var(--amber)} /* --- controls, sitewide under Ember --- */ html[data-theme="ember"] :is(.btn-a,.lbl-badge-bg,.lbl-pill-bg){ border-radius:999px;background:linear-gradient(92deg,var(--heat,var(--ember)),var(--heat2,var(--violet)))!important; color:#1A0D08!important} html[data-theme="ember"] .btn-a-ghost{border-radius:999px;border-color:var(--border-accent);color:var(--ink)} html[data-theme="ember"] .btn-a-ghost:hover{border-color:var(--heat,var(--ember))} /* --- section rhythm: alternate bands so a long page has acts --- */ html[data-theme="ember"] :is(body.p-patterns,body[class*="p-writing"],body[class*="p-resources"]) main > section:nth-of-type(even){background:var(--bg-soft)} /* /hire/ and /writing/ put their header INSIDE the max-width wrapper, so the gradient field rendered as a boxed card while every other ported page bleeds full width. Break it out to the viewport edges. */ html[data-theme="ember"] :is(body.p-hire .hire-head, body[class*="p-writing"] header){ margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding-left:calc(50vw - 50% + 0px);padding-right:calc(50vw - 50% + 0px)} /* stacked list-cards stretched the full column while the Gestalt line-length fix pins their prose at 54ch — ~45% of each card was dead on the right. Same remedy as the case-study boundary notes: size the CARD to its text. */ html[data-theme="ember"] :is(body[class*="p-writing"],body[class*="p-resources"]) :is(.card-p32,.card-p28){max-width:520px} /* MEASURED, not computed: `ch` on the card resolves in a different font than the paragraph it wraps, so both 64ch (126px dead) and calc(54ch + 64px) (94px dead) overshot. 54ch of prose measures 456px; + 2x32 padding = 520. */ /* ================================================================ SCAN PATH + NEGATIVE SPACE + LINK COLOUR Measured 2026-08-13, at 1440: · lane had TWO reading axes 242px apart (metric 177 / title 419) and 402px of dead right — six lanes = twelve horizontal saccades to read a list. Collapse to ONE axis: the eye drops straight down. · every one of the 37 paragraphs on a case page was 475px wide inside an 1100px container: 442px (40%) dead right, on every paragraph. A capped column in a wide container is a decision about the leftover space — so narrow the READING SPINE and let objects break out of it instead. · links were amber, i.e. the retired gold. Violet is the other end of the signature gradient: unmistakably Ember, 7.1:1 on the base and 6.3:1 on card fill, and distinct from the amber focus ring (which stays amber precisely so focus never reads as "just a link"). ================================================================ */ /* --- 1 · lanes: one reading axis on the left, the action parked top-right --- The text keeps a single left axis (no sideways saccade). The CTA no longer costs its own row: it rides the metric row at the right edge, so every lane loses ~34px of height and gains a second, constant anchor the eye can find without re-scanning. Anchoring to the metric row (fixed height) — not the title (variable) — keeps all six CTAs on a predictable line. */ /* Arpit 2026-08-15: "follow the grid structure — cells in the next row align to the previous row." ONE shared column line for all six lanes: a fixed 200px metric cell, so every title starts on the same vertical axis and the eye scans straight down. CTA stays in the content column's reading axis. */ html[data-theme="ember"] body.p-home .lanes .lane{ grid-template-columns:168px minmax(0,1fr); grid-template-areas:"head title"; column-gap:48px;row-gap:8px;padding:24px 32px} /* CTA removed 2026-08-15 (Arpit): the whole row is the link; hover carries the affordance (bg tint + border heat already defined on .lane:hover) */ html[data-theme="ember"] body.p-home .lanes .lane .m{ display:block;font-size:clamp(19px,1.7vw,24px);align-self:start!important} html[data-theme="ember"] body.p-home .lanes .lane>div{align-self:start!important} html[data-theme="ember"] body.p-home .lanes .lane .m span{display:block;margin-top:8px;white-space:normal} html[data-theme="ember"] body.p-home .lanes .lane .ai-case-head, html[data-theme="ember"] body.p-home .lanes .lane > div:first-child{align-self:start} /* phone: no room for a right-hand column — stack, action last */ @media (max-width:640px){ html[data-theme="ember"] body.p-home .lanes .lane{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "title" "go"} html[data-theme="ember"] body.p-home .lanes .lane .go{ justify-self:start;margin-top:8px} } html[data-theme="ember"] body.p-home .lanes .lane .m{ display:block;font-size:clamp(19px,1.7vw,24px);line-height:1.2;white-space:nowrap} html[data-theme="ember"] body.p-home .lanes .lane .m span{ margin-top:0;font-size:11.5px;letter-spacing:.14em} html[data-theme="ember"] body.p-home .lanes .lane h3{margin-top:0;line-height:1.2} html[data-theme="ember"] body.p-home .lanes .lane p{max-width:72ch} /* --- 2 · the reading spine, with objects breaking out of it --- */ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c{ max-width:704px;margin-left:auto;margin-right:auto;padding:0 24px} html[data-theme="ember"] body[class*="p-case-studies"] .measure-c :is(p,h2,h3,li,blockquote){ max-width:none} /* Objects that earn the full width break the spine, centred on it. THIS BREAKOUT NEEDS BOTH margin-left AND transform TO LAND TOGETHER. The extracted per-page classes (.xi-*) carry `margin:… !important`, which killed margin-left while transform still applied — throwing figures 520px off the left edge on every case study. Both declarations are !important so the pair can never half-apply again. Guarded by tools/overflow-sweep.py. */ html[data-theme="ember"] body[class*="p-case-studies"] :is(.plA,.plF,.plM,.plO,.plP,.plV, .plA-caption,.plF-caption,.plM-caption,.plO-caption,.plP-caption,.plV-caption, .case-vitals,.recon,.recon-stage,.measure-c figure){ width:min(1040px,calc(100vw - 48px))!important;max-width:none!important; margin-left:50%!important;margin-right:0!important;transform:translateX(-50%)!important} /* the hero figure lives OUTSIDE the spine — it is already full-bleed, so the breakout would shove it off the right edge (measured left=624 right=1664). */ html[data-theme="ember"] body[class*="p-case-studies"] .case-hero__in{max-width:1040px} html[data-theme="ember"] body[class*="p-case-studies"] .case-hero figure{ width:100%!important;margin-left:0!important;margin-right:0!important;transform:none!important} @media (max-width:1100px){ html[data-theme="ember"] body[class*="p-case-studies"] :is(.plA,.plF,.plM,.plO,.plP,.plV, .plA-caption,.plF-caption,.plM-caption,.plO-caption,.plP-caption,.plV-caption, .case-vitals,.recon,.recon-stage,.measure-c figure){ width:100%!important;margin-left:0!important;transform:none!important} } /* the quote's rule was sitting ON the text — the extraction stripped the padding that used to hold it off. Declare it here, on the component. */ html[data-theme="ember"] body[class*="p-case-studies"] blockquote.t-quote, html[data-theme="ember"] blockquote.t-quote{padding-left:24px} /* the boundary/gate cards now match the spine rather than floating inside it */ html[data-theme="ember"] body[class*="p-case-studies"] :is(.note-gold,.note-gold-b,.case-gate,.framed,.rcpt-box,.framed-tight){ max-width:none} /* --- 3 · links: violet, not the retired gold --- */ html[data-theme="ember"]{--link:#E86BFF;--link-hover:#F2A3FF} html[data-theme="ember"] :is(main,footer) a:not(.pill):not(.btn-a):not(.btn-a-ghost):not(.lane):not(.labc):not(.hd-preset):not(.rcpt-btn):not(.hk-btn):not(.card-p28):not(.card-p32):not(.nav-cta):not(.hd-case-btn){ color:var(--link)} html[data-theme="ember"] :is(main,footer) a:not(.pill):not(.btn-a):not(.btn-a-ghost):not(.lane):hover{ color:var(--link-hover)} html[data-theme="ember"] body.p-hire :is(.hire-avail,.hire-contact) a{color:var(--link)!important} html[data-theme="ember"] .rfoot a, html[data-theme="ember"] .who p a, html[data-theme="ember"] .errata a, html[data-theme="ember"] .contract-links a{color:var(--link)} /* the single-axis lane left 548px dead on its right (the hook caps at 72ch inside a 1172px card). Cap the LIST to a reading width and centre it: the leftover space becomes symmetric page margin — read as intentional — instead of a void inside every card. */ html[data-theme="ember"] body.p-home .lanes{max-width:none} /* the section is ONE 860px object — the wrap narrows, so eyebrow, headline, lede and lanes all share the same centred column (the per-part centering I tried first is exactly what the one-object rule at line ~1630 forbids) */ html[data-theme="ember"] body.p-home .work .wrap{max-width:1040px} html[data-theme="ember"] body.p-home .work .lede, html[data-theme="ember"] body.p-home .work h2, html[data-theme="ember"] body.p-home .work .k{max-width:none} /* Writing section — restored to the homepage (my prototype rebuild had dropped it while the nav still linked to #thoughts). Ember card grammar, purple heat matching the /writing/ page it leads to. */ /* --heat was #A96BFF: 4.99:1 on the card — a number that passes AA and still reads badly at 11px. Canon's checked violet is #E86BFF (7.1:1). Same purple identity, +42% contrast, and it is already the link colour sitewide. */ html[data-theme="ember"] body.p-home #thoughts{--heat:#E86BFF} html[data-theme="ember"] body.p-home .thoughts-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:32px} html[data-theme="ember"] body.p-home .thoughts-grid > *{ background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--heat); border-radius:0 12px 12px 0;padding:24px} html[data-theme="ember"] body.p-home .thoughts-grid > *:hover{border-color:var(--border-accent);border-left-color:var(--heat)} /* Ink hierarchy: the TITLE is what you read, so it gets the highest-contrast ink (cream, not a chromatic hue at weight 300). Colour is reserved for the tag and the rail — labels, not body. Every value declared on this card, on this card's own background, so no page-level selector fills one in. */ html[data-theme="ember"] body.p-home .thought-tag{ color:var(--heat);font-size:11.5px;font-weight:500;letter-spacing:.12em} html[data-theme="ember"] body.p-home .thought-title{ color:var(--ink);font-weight:400;font-size:20px;line-height:1.25;margin:8px 0} html[data-theme="ember"] body.p-home .thoughts-grid > *:hover .thought-title{color:var(--heat)} html[data-theme="ember"] body.p-home .thought-excerpt{ color:rgba(245,237,230,.84);font-size:14px;line-height:1.65} html[data-theme="ember"] body.p-home .thought-meta{ color:rgba(245,237,230,.74);font-size:11.5px;margin-top:16px} /* ================================================================ SECTION SEAMS — the diagonal wedge is retired. It was a 110px slab with a shallow clip-path pulled up by -60px, so it sliced across whatever sat above it (it cut through the standfirst on the home hero) and read as a rendering glitch rather than a decision. Replaced with a seam that carries information: a hairline in the section's own heat colour, fading out at both ends, over a soft wash. Sections now separate by tone and hue, and nothing overlaps content. ================================================================ */ html[data-theme="ember"] body.p-home .seam, html[data-theme="ember"] body.p-home .seam-up{ height:1px;margin:0;clip-path:none;position:relative;z-index:0;overflow:visible; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--heat, #FF8A5C) 55%, transparent) 18%, color-mix(in srgb, var(--heat, #FF8A5C) 55%, transparent) 82%, transparent 100%)} /* the wash: a wide, very low-opacity bloom above the line, so the boundary reads as a fade rather than an edge. Sits behind content, never over it. */ html[data-theme="ember"] body.p-home :is(.seam,.seam-up)::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none; background:linear-gradient(to top, color-mix(in srgb, var(--heat, #FF8A5C) 9%, transparent), transparent); z-index:-1} @media (prefers-reduced-motion:reduce){ html[data-theme="ember"] body.p-home :is(.seam,.seam-up)::after{height:64px}} /* ================================================================ RETIRED CLASSIC PALETTE — the gold that Ember never reached. styles.css hard-coded #D4A85E (and #7E5A14) inside extracted per-page classes carrying !important, so no ember rule could outrank them: badges, card-gold panels and the "Send me the role" ghost button on 10 inner pages still rendered in the old theme. Both are now tokens; Ember redefines them once, here, and every instance follows. Guarded by tools/theme-remnant-check.py, which fails on any retired colour that is actually painted under Ember. --goldA #FFC46B amber, 11.3:1 on the ember ground (canon) --goldA-dk #C98F3F the dim/border variant ================================================================ */ html[data-theme="ember"]{--goldA:#FFC46B;--goldA-dk:#C98F3F} /* The retired wedge was 110px tall and doubled as the section's top spacing — removing it left seam-bearing sections with padding-top:0 and their first line of text 1px off the boundary (measured on receipts, work, how-i-lead). The seam now carries that space explicitly, matching the 96px top rhythm of every section that never had one. Space is declared, not inherited from a decoration's height. */ html[data-theme="ember"] body.p-home :is(.seam,.seam-up){margin-bottom:96px} /* --- three fixes from review, each measured before and after ---------------- */ /* 1. The pattern links sat in a 386px box inside an 875px parent, so both long links wrapped to two lines for no reason. Give them the width that was already there. */ /* The cap was a fractional 386.4px — a character-based prose measure inherited from the typography layer. These are navigation links, not prose: a reading measure has no business sizing them, and it forced two of them onto a second line inside an 875px parent. Declared on the component, at a specificity that beats the typography rule. */ html[data-theme="ember"] body.p-home p.contract-links{ max-width:none!important;width:auto!important; display:flex;flex-wrap:wrap;gap:12px 32px} html[data-theme="ember"] body.p-home p.contract-links a{ display:inline-block;margin-right:0} /* nowrap only where the line actually fits. Applied unconditionally it made the whole contract section 397px wide inside a 390px viewport and scrolled the homepage sideways by 23px — a desktop fix that broke the phone. */ @media (min-width:700px){ html[data-theme="ember"] body.p-home p.contract-links a{white-space:nowrap}} /* 2. The credentials line was capped at 465px, which stranded "2019" alone on a third line. Widened to the hero copy measure, and the year bound to its phrase so it can never orphan again at another width. */ html[data-theme="ember"] body.p-home .hero .cred{max-width:600px} /* 3. The wordmark was amber while the monogram beside it is the ember→violet gradient — two different brand colours touching. The name is not an accent; it takes the primary ink and lets the mark carry the colour. */ html[data-theme="ember"] .nav-name{color:var(--ink)} /* Plates were forced to the full 1040px breakout even when their content is narrower — the O2 phone plate used 640px of a 1040px box and left a 399px void hard against its right edge. A box wider than its content is leftover space, not designed space. Plates now take their content's width and stay centred on the reading spine; only genuinely wide artifacts reach 1040. */ /* NOTE the .measure-c in the selector: the breakout rule above uses :is(), which takes the specificity of its MOST specific argument (.measure-c figure). Without matching that, this rule loses despite being later and !important. */ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c :is(.plA,.plF,.plM,.plO,.plP,.plV){ /* fit-content collapsed them to 328px — the stage tracks are minmax(0,…) and gave up all their width. Size to the stage's natural extent instead (3 × 250px + gaps ≈ 780) so the box matches its content and the leftover space becomes a symmetric margin, not a void on one side. */ /* max-content, not fit-content: fit-content collapsed the minmax(0,…) tracks to 328px, and a fixed 800px left an identical 159px void on every plate (their content caps at ~641). max-content sizes the box to what the plate actually draws, then the breakout centres it. */ width:max-content!important;max-width:min(1040px,calc(100vw - 48px))!important} @media (max-width:1100px){ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c :is(.plA,.plF,.plM,.plO,.plP,.plV){ width:100%!important} } /* The plate stages left-aligned their tracks inside the box, so whatever width the content did not use piled up on ONE side (measured 159px right, 1px left). Centre the tracks: leftover space becomes a symmetric margin around the artifact instead of a void hard against its right edge. */ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c :is(.plA,.plF,.plM,.plO,.plP,.plV) > :is([class$="-stage"],[class$="-body"],[class$="-grid"]){ justify-content:center!important} /* --- Writing section on the standard grammar ------------------------------ The heading was a classic-theme numeral pattern (.section-numeral) that no other homepage section uses, and its aria-labelledby pointed at an id that did not exist. Now eyebrow + h2 + lede like every other section. */ html[data-theme="ember"] body.p-home #thoughts .wr-more{margin-top:16px} html[data-theme="ember"] body.p-home #thoughts .wr-more a{ font-family:var(--ff-label);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--heat);white-space:nowrap; border-bottom:1px solid color-mix(in srgb, var(--heat) 45%, transparent); padding-bottom:3px;text-decoration:none} html[data-theme="ember"] body.p-home #thoughts .wr-more a:hover{border-bottom-color:var(--heat)} html[data-theme="ember"] body.p-home #thoughts .thoughts-grid{margin-top:48px} /* the 12px inline-sized icon in the card meta, declared as a class */ html[data-theme="ember"] .icon-xs{width:12px;height:12px} /* PHONE: plate internals have fixed track widths, so at 390px the fintech and vc plates pushed their content past the edge (measured right=413 and 491). Give the plate its own horizontal scroll rather than letting it drag the page sideways — wide content scrolls inside its own container. */ @media (max-width:700px){ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c :is(.plA,.plF,.plM,.plO,.plP,.plV){ overflow-x:auto!important;-webkit-overflow-scrolling:touch} } /* 404: the decorative ghost numeral is absolutely positioned and centred by a transform, which put its edge 3px past the viewport at 390px. */ html[data-theme="ember"] body.p-404 .ghost{max-width:calc(100vw - 32px)} /* ================================================================ LOPSIDED WHITESPACE — the reading column was capped narrower than its container and then left-aligned inside it, so every unused pixel piled up on ONE side: 457px on /lab/, 593px on /patterns/, 209px on the homepage. The containers were already centred; the text inside them was not. Capped text now centres within the space it occupies. Guarded by tools/balance-check.py, which ignores genuine two-column bands (prose beside an artifact) and only fails on space with nothing in it. ================================================================ */ /* descendant, not child: on /patterns/ the prose sits inside an card and on /lab/teardown/ inside nested sections, so a child selector missed both. Where the text is NOT capped this is a no-op — auto margins only do work when there is leftover width to distribute. */ html[data-theme="ember"] :is(.lab-wrap,.section-inner) :is(p,h1,h2,h3,dl,ul,ol,.lab-note,.lab-body){ margin-left:auto;margin-right:auto} /* homepage: every section EXCEPT the hero, whose left-aligned column is a deliberate pairing with the diagnostic card on its right. */ /* Auto-centring applies ONLY to a single-column band, where a capped element floats in the full page width. Inside a grid COLUMN (who, patterns) the same rule gave eyebrow/body/headline three different left edges (measured 254/186/140 in one column) — in a column, everything sits flush left. */ html[data-theme="ember"] body.p-home main > section:not(.hero) .wrap > :is(p,h2,h3){ margin-left:auto;margin-right:auto} html[data-theme="ember"] body.p-home main > section:not(.hero) .wrap > div > :is(p,h2,h3){ margin-left:0;margin-right:0} /* /lab/ ran TWO prose measures in one column — .lab-lede at 781px and .t-body-muted at 1052px — so the column's edge moved as you read down it and the leftover space swapped sides. One measure for body text; wide artifacts (code, demos, tables) are exempt because they are not prose. */ html[data-theme="ember"] .lab-wrap :is(p,dl,ul,ol):not(:has(pre)):not(.lab-note){ max-width:781px} /* the "Prefer email?" line under the contact form — restored 2026-08-13 after the homepage rebuild dropped #em-l, which both crashed the page script (TypeError, stopping every script after it) and removed the public email — a canon requirement (recruiters don't fill forms). */ html[data-theme="ember"] body.p-home .contact-alt{ font-size:14px;color:var(--ink-muted);margin:16px 0 0} html[data-theme="ember"] body.p-home .contact-alt a{ font-family:var(--ff-label);font-size:11.5px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--link);text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--link) 45%, transparent);padding-bottom:2px} html[data-theme="ember"] body.p-home .contact-alt a:hover{color:var(--link-hover)} /* ---- video evidence on the named case (talon) --------------------------- */ html[data-theme="ember"] .vid-frame{ position:relative;aspect-ratio:16/9;background:var(--bg-card); border:1px solid var(--border);border-radius:12px;overflow:hidden} html[data-theme="ember"] .vid-frame iframe{ position:absolute;inset:0;width:100%;height:100%;border:0} html[data-theme="ember"] .vid-main{margin:32px 0 24px} html[data-theme="ember"] .vid-main figcaption, html[data-theme="ember"] .vid-card figcaption{ display:flex;flex-direction:column;gap:4px;margin-top:12px} html[data-theme="ember"] .vid-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:24px;margin:24px 0} html[data-theme="ember"] .vid-note{margin:16px 0 32px} /* ---- before/after conversation table (talon) ---------------------------- Wide tables scroll inside their own container; the page never scrolls sideways (overflow-sweep exempts scrollable boxes, fails page overflow). */ html[data-theme="ember"] .ba-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 8px} html[data-theme="ember"] .ba-table{width:100%;min-width:640px;border-collapse:collapse; font-size:14px;line-height:1.5} html[data-theme="ember"] .ba-table th{ font-family:var(--ff-label);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ember);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-accent)} html[data-theme="ember"] .ba-table td{ padding:12px 16px;border-bottom:1px solid var(--border);color:var(--ink);vertical-align:top} html[data-theme="ember"] .ba-table td:nth-child(2){color:rgba(245,237,230,.62)} html[data-theme="ember"] .ba-table td:nth-child(3){color:var(--ink)} html[data-theme="ember"] .ba-table td:first-child{font-weight:600;min-width:180px} /* ================================================================ /lab/ — ONE READING AXIS (2026-08-14) The balance pass centred each capped element as a block; different widths (781/613/453) meant eyebrow, body and title each started at a different x — three axes measured at 330 / 424 / 494. Balanced is not aligned: the column is capped ONCE and every text element sits flush to its left edge. ================================================================ */ html[data-theme="ember"] .lab-wrap{max-width:781px;margin-left:auto;margin-right:auto} html[data-theme="ember"] .lab-wrap :is(p,h1,h2,h3,dl,ul,ol,.lab-note,.lab-body){ margin-left:0;margin-right:0;max-width:none} /* the artifact cards earn more width than prose: break out of the spine, centred */ html[data-theme="ember"] .lab-wrap .lab-cards{ width:min(1100px,calc(100vw - 48px));max-width:none; margin-left:50%;margin-right:0;transform:translateX(-50%)} @media (max-width:1160px){ html[data-theme="ember"] .lab-wrap .lab-cards{width:100%;margin-left:0;transform:none}} /* Section rhythm — measured, not assumed. The first attempt ADDED 96px on top of the padding lab sections already carried, ballooning ink-to-ink gaps to 424/302px against the homepage's ~180-250. Sections keep their own padding; the oversized boundaries are brought DOWN to the house cadence. */ html[data-theme="ember"] [class*="p-lab"] main > section.section{padding-top:88px;padding-bottom:88px} html[data-theme="ember"] [class*="p-lab"] main > section.section:first-of-type{padding-top:96px} /* the hero's closing note carried ~150px of leftover internal space that made the first boundary half again larger than the second — equalized here */ html[data-theme="ember"] [class*="p-lab"] main > section.section:first-of-type .lab-note{margin-bottom:0} html[data-theme="ember"] [class*="p-lab"] .lab-cards{margin-bottom:0} /* /lab/ foot links join the sitewide CTA grammar (they were 13px lowercase with a GOLD hairline under violet text — every colour a legal token, which is exactly why the colour gate passed them; the grammar was the defect). */ html[data-theme="ember"] .lab-links a{ font-family:var(--ff-label);font-size:11.5px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--link);text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--link) 45%, transparent);padding-bottom:2px} html[data-theme="ember"] .lab-links a:hover{color:var(--link-hover);border-bottom-color:var(--link)} /* Three near-miss CTA grammars found by tools/cta-grammar-check.py — 12px/1.8 tracking on /process, 12px lowercase on /hire, 13px on /screen. Same job, three dialects. One voice: */ html[data-theme="ember"] :is([class*="p-hire"],[class*="p-process"],[class*="p-screen"]) main :is(.btn-row,.proc-links,.cta-row,p,div) > a:not([class*="btn"]):not(.pill):not(.card-p28):not(.card-p32){ font-size:11.5px;letter-spacing:.08em;text-transform:uppercase} /* ================================================================ SIMILARITY PASS (Playwright Gestalt audit, 2026-08-14) Four classes rendered at arbitrary different sizes/weights for the SAME role. Cause in every case: a relative size (em) or an inherited alpha, so the component's look depended on where it was dropped rather than on what it is. A component declares its own type. ================================================================ */ /* inline code: was 18.9 / 14.4 / 12.6px on one page — 1.05em of whatever paragraph it landed in. One token, one size. */ html[data-theme="ember"] :is(.t-code,.td-inline){font-size:13px!important;line-height:1.5} /* the handwriting annotation: 22px/600 on home, 21px/400 on hire. One voice. !important because per-page extracted classes (.xi-*) set these inline-derived sizes with !important — the component must out-declare them. */ html[data-theme="ember"] .hand{font-size:22px!important;font-weight:600!important} /* the sign-off is a DIFFERENT component that happens to share the hand face — it declares its own size rather than inheriting a one-off override. */ html[data-theme="ember"] .sig.hand{font-size:26px!important;font-weight:600!important} /* the pattern-link row: one instance inherited 0.76 alpha ink, the other full */ html[data-theme="ember"] .contract-links, html[data-theme="ember"] p.contract-links{color:var(--ink)!important} /* ================================================================ GESTALT AUDIT FIXES (Playwright, 2026-08-14) — Arpit's calls ================================================================ */ /* CLOSURE — NOT A DEFECT, recorded so it is not "fixed" again. The audit read .ccd as clipping 70px (clientHeight 508 vs scrollHeight 578). Measured: the last child sits 41px INSIDE the card; the 70px is exactly the decorative ::after glow (190px tall at bottom:-70px). A pseudo-element counts toward scrollHeight, so a card clipping its own decoration looks identical to a card cropping content. overflow:hidden here is doing precisely its job. */ /* PROXIMITY — a heading sat 12px under its eyebrow but 27-40px above its own body, so Gestalt read it as belonging to the label above rather than introducing the content below. Arpit's call: TIGHTEN below (keep the eyebrow-heading pairing, close the gap to the body). !important because the 40px came from a page-level rule that outranks a section-scoped one. */ html[data-theme="ember"] body.p-home main > section :is(h2,h3){margin-bottom:16px!important} html[data-theme="ember"] body.p-home main > section :is(h2,h3) + *{margin-top:0!important} html[data-theme="ember"] [class*="p-lab"] .lab-wrap :is(h1,h2){margin-bottom:16px!important} html[data-theme="ember"] [class*="p-lab"] .lab-wrap :is(h1,h2) + *{margin-top:0!important} /* /hire/ headings live in .hire-wrap, outside the p-home and p-lab scopes */ html[data-theme="ember"] [class*="p-hire"] main :is(h2,h3){margin-bottom:16px!important} html[data-theme="ember"] [class*="p-hire"] main :is(h2,h3) + *{margin-top:0!important} /* ============================================================================ TYPE — Stack 1 role corrections (2026-08-14) Monospace now means CODE. Labels, eyebrows, CTAs and meta lines take the label face: same size, same tracking, but a humanist sans at 600 instead of a fixed-width face — the change that makes 34 elements a page scannable. Tracking drops from .12-.15em to .08em: uppercase sans needs less letter- spacing than uppercase mono to breathe, and more than it needs looks shouted. ============================================================================ */ html[data-theme="ember"] :is(.k,.eyebrow,.lbl-eyebrow,.ck,.mk,.lab-kicker,.opt-n, .thought-tag,.case-hero__kicker,.lbl-cap,.lbl-meta,.lbl-badge-bg,.lbl-badge-gold, .go,.lab-go,.rcpt-btn,.contract-links a,.wr-more a,.contact-alt a,.lab-links a){ font-family:var(--ff-label);font-weight:600;letter-spacing:.08em} /* code keeps the mono, and keeps its own tracking */ html[data-theme="ember"] :is(code,pre,.t-code,.td-inline,.lab-code,.plA-stage,.plF-stage){ font-family:var(--ff-mono);letter-spacing:0} /* Label roles move to the sans; the RECEIPT FAMILY keeps monospace on purpose. .rcpt-l / .rcell spans / .rfoot / .fr / .stamp / the boarding pass are a printed-docket metaphor — fixed-width IS the point there, the way a till receipt or a boarding pass is set. Flattening those would cost meaning to satisfy a rule, the same mistake as flattening the semantic hues. !important: these classes carry per-page extracted rules that outrank a plain component selector. */ html[data-theme="ember"] body.p-home :is(.k,.go,.ck,.mk,.ek,.lk,.ak,.meta, .rcpt-btn,.rcpt-more,.ccd-q,.ccd-idle,.ccd-note,.thought-tag,.lede,.errata-l){ font-family:var(--ff-label)!important;font-weight:600;letter-spacing:.08em} /* body-sized label text should not be semibold — only the uppercase micro-labels are */ html[data-theme="ember"] body.p-home :is(.meta,.ccd-q,.ccd-idle,.ccd-note,.lede){ font-weight:400;letter-spacing:0} /* the remaining label classes on inner pages — same treatment, same exemptions */ html[data-theme="ember"] :is(.cg-l,.lbl-pill-bg,.lbl-pill-gold,.lbl-eyebrow-500, .hire-role,.hire-print-note,.lab-num,.ev-tiers dt,figcaption .lbl-eyebrow){ font-family:var(--ff-label)!important;font-weight:600;letter-spacing:.08em} /* /hire/ prose ran to 90 characters a line — past the comfortable 45-75 band */ html[data-theme="ember"] [class*="p-hire"] .hire-wrap :is(p,li){max-width:70ch} /* case-study prose at 82 characters: pull the spine in to the reading band */ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c{max-width:680px} /* ============================================================================ PAPER GROUNDS KEEP A PAPER GOLD — regression fixed 2026-08-14 The ember gold tokens (--goldA #FFC46B / --goldA-dk #C98F3F) are correct on the dark ground and WRONG on the light plate mockups: #C98F3F measures 2.52:1 on the cream #FCF2DC used inside the reconstructions — 22 contrast failures across five case studies, all introduced by my own tokenisation earlier today. A token that changes with the theme must also change with the GROUND it lands on. Inside any paper artifact the gold reverts to the dark values that were legal there all along: --goldA-dk #7A5410 → 6.08:1 on cream, 6.77:1 on white --goldA #7E5A14 → 5.62:1 on cream, 6.25:1 on white ============================================================================ */ html[data-theme="ember"] :is(.plA,.plF,.plM,.plO,.plP,.plV,.fig-paper,.recon, .pass,.plA-app,.plF-app,.plM-app,.plO-app,.plP-app,.plV-app,[class*="-paper"]){ --goldA:#7E5A14; --goldA-dk:#7A5410; --gold:#7E5A14; --gold-dark:#7A5410; } /* One tracking for every CTA. The type change left three components on the old .12em (correct for uppercase MONO, too loose for uppercase sans) and /hire/'s primary CTA still on the mono face. Caught by tools/cta-grammar-check.py. */ html[data-theme="ember"] :is(.wr-more a,.contact-alt a,.lab-links a,.contract-links a, .go,.rcpt-btn,.rcpt-more,.lbl-badge-bg,.lbl-badge-gold,.btn-a,.btn-a-ghost,.nav-cta,.pill){ font-family:var(--ff-label)!important;letter-spacing:.08em!important} /* /hire/ footer links carry no class of their own — the label rules could not reach them. (Found because the CTA gate kept failing while I kept measuring the NAV button and calling it fixed: two elements, same text, same page.) */ html[data-theme="ember"] [class*="p-hire"] .hire-foot a{ font-family:var(--ff-label)!important;letter-spacing:.08em!important} /* Phone safety: a long unbreakable token (a URL, a code identifier) pushed patterns/ml-explainability 4px past the edge with no single offending box — the classic signature of a word that cannot wrap. */ @media (max-width:640px){ html[data-theme="ember"] main :is(p,li,dd,dt,h1,h2,h3,figcaption){overflow-wrap:break-word} } /* /hire/ prose was capped at 70ch but left aligned in a wider band, so the cap I added for line length created a 215px void on its right. Capped text in a single-column band centres — the same rule the rest of the site follows. */ html[data-theme="ember"] [class*="p-hire"] .hire-wrap :is(p,li){margin-left:auto;margin-right:auto} /* A wide comparison table on patterns/ml-explainability pushes 4px past the edge at 390. `display:block` on was tried and made it WORSE (broke two other pages' tables), so the table keeps its display and the cells wrap instead — measured, not assumed. */ @media (max-width:640px){ html[data-theme="ember"] main table{table-layout:fixed;width:100%} html[data-theme="ember"] main :is(td,th){overflow-wrap:break-word;word-break:break-word} } /* OPEN, 5px: patterns/ml-explainability's comparison table runs 5px past 390px. Tried and REJECTED, each re-measured: display:block on the table (broke two other pages' tables), table-layout:fixed + word-break (no change), reduced cell padding (no change). The 5px does not scroll the page in a real browser and no text is cut, so it is logged rather than chased further. Next person: the cells carry padding !important from the extraction, so the constraint is probably a min-content width on a column, not the padding. */ /* ============================================================================ ONE AXIS PER SECTION (2026-08-14) — the last habitat of "balanced ≠ aligned" #how-i-lead's heading carries a ch-based max-width, so the auto-centring rule centred it: eyebrow at x=140, heading at x=395, a 255px indent inside one stack. Three other sections had body text drifting 24-27px off their eyebrow for the same reason. An eyebrow, its headline and its body are ONE object and share one left edge; only whole sections get centred, never their parts. ============================================================================ */ html[data-theme="ember"] body.p-home main > section:not(.hero) .wrap > :is(p,h2,h3), html[data-theme="ember"] body.p-home main > section:not(.hero) .wrap > div > :is(p,h2,h3){ margin-left:0!important;margin-right:0!important} /* the heading also ran 40px/1.20 against the 44px/1.12 its siblings use */ html[data-theme="ember"] body.p-home #how-i-lead h2{font-size:44px;line-height:1.12} @media (max-width:640px){ html[data-theme="ember"] body.p-home #how-i-lead h2{font-size:30px}} /* ============================================================================ /patterns/ FEATURE CARDS — my call, per Arpit "you decide". The two lead cards are 1180px wide while their content used ~430px, leaving 683px of void on the right. I am NOT narrowing them: they are the page's two feature objects (the rule, and the rule as running code) and their width is what marks them as bigger than the eight pattern cards below. Instead the space gets a content role — the card becomes two columns: the argument on the left at a reading measure, its provenance and CTA on the right rail. Same principle as the case-study plates: fill designed space with content, do not shrink the object to hide the gap. ============================================================================ */ @media (min-width:900px){ /* !important: the extracted class sets display:block!important */ html[data-theme="ember"] body[class*="p-patterns"] .section-inner > a:has(> p){ display:grid!important;grid-template-columns:minmax(0,1fr) 300px; column-gap:64px;align-items:start} html[data-theme="ember"] body[class*="p-patterns"] .section-inner > a:has(> p) > :is(.eyebrow,.section-title,.t-ui-muted-175,p){grid-column:1} /* the CTA + date/provenance row becomes the right rail, top-aligned */ /* grid-row 1/-1 spans EVERY row so the rail sits beside the whole text stack. `2 / span 3` put it below the prose (measured railTop 592px inside the card) because the two cards do not have the same number of children. */ html[data-theme="ember"] body[class*="p-patterns"] .section-inner > a:has(> p) /* `1 / -1` spans only the EXPLICIT grid, which is one row here (all rows are implicit), so the rail was 251px tall in a 511px card. span 20 covers any child count these two cards will ever have. */ > :last-child{grid-column:2;grid-row:1 / span 20;align-self:stretch; border-left:1px solid var(--border);padding-left:24px; display:flex;flex-direction:column;gap:8px;align-items:flex-start} html[data-theme="ember"] body[class*="p-patterns"] .section-inner > a:has(> p) > :is(.section-title,.t-ui-muted-175){max-width:none} } /* /patterns/ prose blocks (not cards): the text was capped at ~430px inside a 1112px band, so the leftover sat entirely on the right. Cap the BLOCK to a reading measure and centre the block — the leftover becomes a symmetric margin. Same reading-spine pattern the case studies use. */ @media (min-width:900px){ html[data-theme="ember"] body[class*="p-patterns"] .section-inner > div:not(.philosophy-cards):not([class*="grid"]){ max-width:760px;margin-left:auto;margin-right:auto} html[data-theme="ember"] body[class*="p-patterns"] .section-inner > div:not(.philosophy-cards) > :is(p,h2,h3){ max-width:none} } /* ============================================================================ TAP TARGETS — WCAG 2.5.8 (AA) requires 24x24 CSS px for a pointer target. The case-study jump nav measured 22px tall (padding 0 0 2px) on six pages: a standalone nav row, on a phone, two pixels short. Inline links inside a sentence are exempt from 2.5.8 and are deliberately NOT touched here. ============================================================================ */ html[data-theme="ember"] .case-jump a{ padding:8px 0;min-height:24px;display:inline-flex;align-items:center} @media (max-width:640px){ /* phones get a comfortable target, not merely a legal one */ html[data-theme="ember"] .case-jump{gap:4px 20px} /* 12px (grid) + the 20px line box = 44px, the comfortable phone target */ html[data-theme="ember"] .case-jump a{padding:12px 0;min-height:44px} } /* ============================================================================ CASE-STUDY LABEL ROLES — the last monospace holdouts (2026-08-14) Found while readying talon.html for the swap, but every case study has them: the jump nav (7 links), figure captions, and testimonial attributions were still set in monospace at a tracking that belongs to mono, not sans. House label grammar is Source Sans 3 / 12px / .08em / 600 — matched exactly so a reader cannot tell which page a label came from. ============================================================================ */ html[data-theme="ember"] body[class*="p-case-studies"] :is( .case-jump a, .fig-paper figcaption, figure figcaption > span:last-child, .ba-table th){ font-family:var(--ff-label)!important;letter-spacing:.08em!important} html[data-theme="ember"] body[class*="p-case-studies"] :is(.case-jump a,.ba-table th){ font-size:12px;font-weight:600} html[data-theme="ember"] body[class*="p-case-studies"] :is(.fig-paper figcaption, figure figcaption > span:last-child){font-size:12px;font-weight:400;text-transform:none} /* ============================================================================ F3 · "THE ARGUMENT" COMPONENTS (2026-08-14, Arpit's pick) Every case study opens on a thesis plate — the one stealable principle the case exists to prove — and keeps the strongest objection in a counter block. Six cases, six different principles: the portfolio as a system of ideas. ============================================================================ */ html[data-theme="ember"] .thesis{ border:1px solid rgba(255,196,107,.4);border-radius:12px;padding:40px;margin:40px 0; background:linear-gradient(160deg,rgba(255,196,107,.07),rgba(232,107,255,.05));text-align:center} html[data-theme="ember"] .thesis .t-l{ font-family:var(--ff-label);font-weight:600;font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:#FFC46B;display:block;margin-bottom:16px} html[data-theme="ember"] .thesis p{ font-family:var(--ff-display);font-weight:300;font-size:clamp(21px,2.4vw,28px); line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:30ch;margin:0 auto} html[data-theme="ember"] .thesis p em{font-style:italic;color:#E86BFF} html[data-theme="ember"] .counter{ border-left:3px solid #FF7AA8;padding:20px 24px;margin:32px 0; background:rgba(255,122,168,.05);border-radius:0 8px 8px 0} html[data-theme="ember"] .counter .c-l{ font-family:var(--ff-label);font-weight:600;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:#FF7AA8;display:block;margin-bottom:8px} html[data-theme="ember"] .loopfig{ margin:32px 0;border:1px solid rgba(245,237,230,.14);border-radius:12px;padding:32px; background:rgba(27,19,32,.6);overflow-x:auto} html[data-theme="ember"] .loopfig svg{display:block;min-width:640px;width:100%;height:auto} html[data-theme="ember"] .loopfig text{font-family:var(--ff-sans);font-size:13px;fill:var(--ink)} html[data-theme="ember"] .loopfig .lt{font-weight:600} html[data-theme="ember"] .loopfig .lm{fill:rgba(245,237,230,.62);font-size:11px} html[data-theme="ember"] .loopfig .arr{stroke:rgba(245,237,230,.45);stroke-width:1.5;fill:none;marker-end:url(#ah)} html[data-theme="ember"] .loopfig .hot{stroke:#E86BFF} html[data-theme="ember"] .loopfig rect{fill:rgba(18,11,20,.8);stroke:rgba(245,237,230,.2);rx:8} html[data-theme="ember"] .loopfig .r-hot{stroke:#E86BFF} html[data-theme="ember"] .loopfig figcaption{ font-family:var(--ff-sans);font-size:12px;color:rgba(245,237,230,.62);margin-top:16px;line-height:1.6} /* ============================================================================ RECEIPT CHIP — show the TRANSITION, not just the endpoint (2026-08-14) "3 hrs" alone means nothing; the whole claim is the distance travelled. Arpit's pick (2026-08-15, option B of four rendered): ONE voice, one line — the pair at a single size with the ember arrow as the only color, so it reads as a single fact. The chip's b is clamped smaller than its siblings because the journey is longer than a lone number; nowrap keeps it one line. ============================================================================ */ html[data-theme="ember"] body.p-home #chip-adtech b{ letter-spacing:-.01em;white-space:nowrap} /* the visible pair lives in a span INSIDE b; .rcell span (11.5px mono uppercase, the descriptor rule) was capturing it — the bug Arpit rejected. Redeclare. */ html[data-theme="ember"] body.p-home .rcell b>span{ display:inline;font-family:inherit;font-size:inherit;font-weight:inherit; letter-spacing:inherit;text-transform:none;color:inherit;margin:0} html[data-theme="ember"] body.p-home .rcell b .was{font-style:normal} html[data-theme="ember"] body.p-home .rcell b .to{ font-style:normal;color:var(--ember);margin:0 .3em;font-size:.85em} /* ============================================================================ TESTIMONIALS — four VANTAGE POINTS, not four compliments (2026-08-14) Canon lists five confirmed testimonials and places four on the homepage; the homepage rebuild had silently dropped two of them. Restored — and the layout now carries the argument canon already makes about Ananda ("the only ENGINEERING voice; answers the 'can a designer ship?' doubt the design voices cannot"). Each card is labelled by the writer's RELATIONSHIP, because four angles on the same person is triangulation; four compliments is noise. ============================================================================ */ html[data-theme="ember"] body.p-home .quotes{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px; align-items:start} html[data-theme="ember"] body.p-home .qt{ background:var(--card);border:1px solid var(--border);border-radius:12px; border-top:3px solid var(--heat,#FF8A5C);padding:24px 24px 20px; display:flex;flex-direction:column;height:100%} html[data-theme="ember"] body.p-home .qt:nth-child(2){--heat:#E86BFF} html[data-theme="ember"] body.p-home .qt:nth-child(3){--heat:#FFC46B} html[data-theme="ember"] body.p-home .qt:nth-child(4){--heat:#FF7AA8} html[data-theme="ember"] body.p-home .qt-view{ font-family:var(--ff-label);font-weight:600;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--heat,#FF8A5C);display:block;margin-bottom:16px} html[data-theme="ember"] body.p-home .qt blockquote{flex:1 1 auto;margin:0} html[data-theme="ember"] body.p-home .qt figcaption{ margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} @media (max-width:860px){ html[data-theme="ember"] body.p-home .quotes{grid-template-columns:1fr} } /* ============================================================================ VIDEO GRID vs THE BREAKOUT (2026-08-14) The spine's breakout force-widens every .measure-c figure to 1040px — which is right for the full-width film and CATASTROPHIC for figure.vid-card inside a 304px grid track: both cards rendered 1040px wide, translated onto each other (measured lefts 36 and 364 in one 632px grid). The GRID breaks out as one object; the cards inside it obey their tracks. ============================================================================ */ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c figure.vid-card{ width:auto!important;max-width:none!important; margin-left:0!important;margin-right:0!important;transform:none!important} html[data-theme="ember"] body[class*="p-case-studies"] .measure-c .vid-grid{ width:min(1040px,calc(100vw - 48px));max-width:none; margin-left:50%;transform:translateX(-50%); grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))} @media (max-width:1100px){ html[data-theme="ember"] body[class*="p-case-studies"] .measure-c .vid-grid{ width:100%;margin-left:0;transform:none} } /* the trust loop as wrapping HTML chips — the SVG version forced a 640px min-width, which is a horizontal scrollbar on every phone. Chips wrap. */ html[data-theme="ember"] .loop-steps{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px} html[data-theme="ember"] .lstep{flex:1 1 140px;min-width:140px;background:rgba(18,11,20,.8); border:1px solid rgba(245,237,230,.2);border-radius:8px;padding:12px 16px} html[data-theme="ember"] .lstep b{display:block;font-family:var(--ff-sans);font-weight:600; font-size:13px;color:var(--ink);margin-bottom:4px} html[data-theme="ember"] .lstep span{font-size:11.5px;color:rgba(245,237,230,.62);line-height:1.5} html[data-theme="ember"] .lstep-hot{border-color:#E86BFF} html[data-theme="ember"] .larr{align-self:center;color:rgba(245,237,230,.45);font-size:16px} html[data-theme="ember"] .lback{flex-basis:100%;font-size:11.5px;color:#E86BFF; border-top:1px dashed rgba(232,107,255,.4);padding-top:12px;margin-top:4px} @media (max-width:560px){html[data-theme="ember"] .larr{display:none}} /* #voices joins the homepage section cadence (it was born with zero padding — exactly the boundary-collision defect the overflow gate checks for). 2026-08-15: it was ALSO born outside the section type grammar — h2 at browser size, kicker with no accent, lede undimmed. Declared here to match siblings. */ /* Second-half act rhythm (2026-08-15): lead and voices sat on the SAME soft band, then lab and thoughts both sat on base — alternation died after the fold. Voices returns to base; #lab takes the band, restoring band/base/band. */ html[data-theme="ember"] body.p-home .voices{padding:96px 0;background:none} html[data-theme="ember"] body.p-home #lab{background:var(--bg-soft)} html[data-theme="ember"] body.p-home .voices .k{color:var(--violet)} html[data-theme="ember"] body.p-home .voices h2{font-size:clamp(28px,3.2vw,44px);line-height:1.12;margin:12px 0 16px} html[data-theme="ember"] body.p-home .voices .lede{color:rgba(245,237,230,.76);margin-bottom:40px} /* product-page link cards (replacing the two business-video embeds) */ html[data-theme="ember"] .prod-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px; width:min(1040px,calc(100vw - 48px));margin:24px 0 24px 50%;transform:translateX(-50%)} @media (max-width:1100px){html[data-theme="ember"] .prod-links{width:100%;margin-left:0;transform:none}} html[data-theme="ember"] .prod-links a{display:block;background:var(--bg-card); border:1px solid var(--border);border-radius:12px;padding:20px 24px;text-decoration:none;color:var(--ink)} html[data-theme="ember"] .prod-links a:hover{border-color:var(--border-accent)} html[data-theme="ember"] .prod-links b{display:block;font-family:var(--ff-label);font-weight:600; font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--link);margin-bottom:8px} html[data-theme="ember"] .prod-links span{font-size:13.5px;line-height:1.6;color:rgba(245,237,230,.72)} /* ============================================================================ FRAMED ROWS — the tint must reach the frame's edges (2026-08-14) The frame owned the horizontal padding (8px 24px) while the rows had none, so every tinted row stopped 27px short on the left and 25px on the right — a band floating inside its own container instead of striping it. And 8px of vertical frame padding left the first row's text almost touching the border. Ownership flips: the FRAME holds no inset, each ROW holds its own 24px, and the frame clips so the tint can't square off its rounded corners. Used on 7 pages, so this fixes the component everywhere at once. ============================================================================ */ html[data-theme="ember"] :is(.framed-tight,.framed,.rcpt-box){padding:0!important;overflow:hidden} html[data-theme="ember"] :is(.rcpt-r,.rcpt-r-tight,.rcpt-r-last,.rcpt-r-tight-last){ padding:20px 24px!important;margin:0!important} @media (max-width:640px){ html[data-theme="ember"] :is(.rcpt-r,.rcpt-r-tight,.rcpt-r-last,.rcpt-r-tight-last){padding:16px!important} } /* ============================================================================ MENU BUTTON — a mark, not three bars (2026-08-14) The bars now sit in a bordered tap target that meets 44px, carry the ember gradient, and cross into an X on open. Motion is transform-only (compositor) and respects prefers-reduced-motion. ============================================================================ */ html[data-theme="ember"] .menu-toggle{ width:44px;height:44px;align-items:center;justify-content:center;gap:0; border:1px solid var(--border);border-radius:10px;background:var(--bg-card); padding:0;margin:0;position:relative;transition:border-color .2s,background .2s} html[data-theme="ember"] .menu-toggle:hover{border-color:var(--border-accent)} html[data-theme="ember"] .menu-toggle span{ position:absolute;left:13px;width:18px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--ember),var(--violet)); transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .18s} html[data-theme="ember"] .menu-toggle span:nth-child(1){transform:translateY(-6px)} html[data-theme="ember"] .menu-toggle span:nth-child(3){transform:translateY(6px)} html[data-theme="ember"] .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)} html[data-theme="ember"] .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} html[data-theme="ember"] .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)} @media (prefers-reduced-motion:reduce){ html[data-theme="ember"] .menu-toggle span{transition:none} } /* ============================================================================ PATTERNS HUB — the two feature cards held a 431px paragraph against an 844px void (balance gate RED, 683px one-sided). Recomposed: the meta/CTA block becomes a right rail with a role; the prose gets a real measure. ============================================================================ */ html[data-theme="ember"] body[class*="p-patterns"] :is(.xi-patterns-012,.xi-patterns-018){ display:grid;grid-template-columns:minmax(0,66ch) 300px;justify-content:space-between; column-gap:48px;align-items:start; grid-template-areas:"img img" "eye eye" "ttl ttl" "body meta"} html[data-theme="ember"] body[class*="p-patterns"] :is(.xi-patterns-012,.xi-patterns-018) .framed-blk{grid-area:img} html[data-theme="ember"] body[class*="p-patterns"] :is(.xi-patterns-012,.xi-patterns-018) .eyebrow{grid-area:eye} html[data-theme="ember"] body[class*="p-patterns"] :is(.xi-patterns-012,.xi-patterns-018) .section-title{grid-area:ttl} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-016{ grid-area:body;max-width:none!important} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-017{ grid-area:meta;align-self:center;display:flex;flex-direction:column;gap:8px; border-left:1px solid var(--border);padding-left:24px} @media (max-width:900px){ html[data-theme="ember"] body[class*="p-patterns"] :is(.xi-patterns-012,.xi-patterns-018){ grid-template-columns:1fr} html[data-theme="ember"] body[class*="p-patterns"] :is(.xi-patterns-016,.xi-patterns-017){grid-column:1} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-017{border-left:none;padding-left:0} } /* patterns colophon — prior-art prose left, citation rail right (was three lonely 431px paragraphs against an 846px void; balance gate RED) */ html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-022{ display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:48px;align-items:start} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-023{grid-column:1;grid-row:1/span 3} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-023 p{max-width:none!important} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-022>:is(.xi-patterns-021,.xi-patterns-028,.xi-patterns-031){grid-column:2} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-022 .xi-patterns-029{max-width:none!important} @media (max-width:900px){ html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-022{grid-template-columns:1fr} html[data-theme="ember"] body[class*="p-patterns"] .xi-patterns-022>*{grid-column:1!important;grid-row:auto!important} } /* ARTIFACT TOKENS — REMOVED 2026-08-15. The recolouring they drove shipped invisible text: the map was incomplete, so any colour it did not know kept its original lightness while its text was remapped. Two failure shapes (cream-on-cream, dark-on-dark) reached production. Artifacts now render in their designed palette; only the brand fonts and per-artifact style scoping are applied. See tools/artifact-ember.py. */ /* ============================================================================ SECOND-HALF SECTION GRAMMARS (2026-08-15, Arpit approved all four from the rendered prototype): after How-I-Lead the page ran four card grids in a row. Each section now carries its own layout DNA — memos → ledger rows · voices → anchor quote + chorus · lab → terminal listing · writing → editorial index. Prototype: prototypes/secondhalf.css. ============================================================================ */ /* PROTOTYPE — second-half section grammars, 2026-08-15. Each section gets its own layout DNA. */ /* 1 · HOW I LEAD — memo cards become a ledger: label rail | content, hairline rows */ html[data-theme="ember"] body.p-home .lead .wrap{max-width:1000px} html[data-theme="ember"] body.p-home .memos{display:block!important;border-top:1px solid rgba(245,237,230,.14)} html[data-theme="ember"] body.p-home .memo{display:grid!important;grid-template-columns:200px minmax(0,1fr);column-gap:48px; background:none!important;border:none!important;border-bottom:1px solid rgba(245,237,230,.14)!important; border-radius:0!important;padding:24px 0!important} html[data-theme="ember"] body.p-home .memo .mk{margin:0!important} html[data-theme="ember"] body.p-home .memo h3{grid-column:2;margin:0 0 8px!important} html[data-theme="ember"] body.p-home .memo p:not(.mk){grid-column:2;max-width:none} html[data-theme="ember"] body.p-home .memo .mk{grid-column:1;grid-row:1/span 2} /* 2 · VOICES — first quote is the anchor: bare, large, serif; the other three become a compact chorus */ html[data-theme="ember"] body.p-home .quotes{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important} html[data-theme="ember"] body.p-home .qt:first-child{grid-column:1/-1;background:none!important;border:none!important; padding:8px 0 24px!important;display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:48px;align-items:end} html[data-theme="ember"] body.p-home .qt:first-child .qt-view{grid-column:1/-1} html[data-theme="ember"] body.p-home .qt:first-child blockquote{font-family:var(--serif);font-size:clamp(19px,1.9vw,25px); line-height:1.45;font-style:italic;color:#F5EDE6;max-width:58ch;grid-column:1} html[data-theme="ember"] body.p-home .qt:first-child figcaption{grid-column:2;align-self:end; border-left:2px solid #FF8A5C;padding-left:16px} @media(max-width:860px){html[data-theme="ember"] body.p-home .qt:first-child{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .qt:first-child figcaption{grid-column:1;margin-top:16px}} html[data-theme="ember"] body.p-home .qt:first-child .qt-view{color:#FF8A5C} html[data-theme="ember"] body.p-home .qt:not(:first-child) blockquote{font-size:13.5px;line-height:1.6} /* 3 · THE LAB — cards become a terminal listing: mono rows on near-black, prompt glyphs */ html[data-theme="ember"] body.p-home #lab .lab3{display:block!important;background:#0D0810;border:1px solid rgba(245,237,230,.14); border-radius:10px;padding:8px 0;overflow:hidden} html[data-theme="ember"] body.p-home #lab .labc{display:grid!important;grid-template-columns:180px 130px minmax(0,1fr) 70px;gap:24px; align-items:baseline;background:none!important;border:none!important;border-radius:0!important; padding:16px 24px!important;border-bottom:1px solid rgba(245,237,230,.08)!important} html[data-theme="ember"] body.p-home #lab .labc:last-child{border-bottom:none!important} html[data-theme="ember"] body.p-home #lab .labc .lk{margin:0!important;color:#7FCF9E!important;font-family:var(--mono)!important} html[data-theme="ember"] body.p-home #lab .labc .lk::before{content:"$ ";color:rgba(245,237,230,.4)} html[data-theme="ember"] body.p-home #lab .labc b{font-family:var(--mono)!important;font-size:12px;color:#FFC46B;white-space:nowrap} html[data-theme="ember"] body.p-home #lab .labc p:not(.lk){font-family:var(--mono)!important;font-size:12.5px;line-height:1.6; color:rgba(245,237,230,.6);margin:0!important;max-width:none!important} html[data-theme="ember"] body.p-home #lab .labc::after{content:"run →";font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(245,237,230,.45)} html[data-theme="ember"] body.p-home #lab .labc:hover::after{color:#7FCF9E} @media(max-width:860px){html[data-theme="ember"] body.p-home #lab .labc{grid-template-columns:1fr;gap:8px}} /* 4 · WRITING — cards become an editorial index: serif titles, inline excerpts, hairline rows */ html[data-theme="ember"] body.p-home .thoughts-grid{display:block!important;border-top:1px solid rgba(245,237,230,.14)} html[data-theme="ember"] body.p-home .thought-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:32px; background:none!important;border:none!important;border-bottom:1px solid rgba(245,237,230,.14)!important; border-radius:0!important;padding:24px 0!important;align-items:baseline} html[data-theme="ember"] body.p-home .thought-title{font-family:var(--serif);font-size:clamp(20px,2vw,26px);font-weight:400} html[data-theme="ember"] body.p-home .thought-excerpt{grid-column:1;max-width:75ch;margin-top:8px!important} html[data-theme="ember"] body.p-home .thought-tag{grid-column:2;grid-row:1} /* phone: one column means one column — the children's explicit grid-column:2 placements must be reset too, or grid auto-creates an implicit second track (measured: "89px 220px" where 1fr was expected) */ @media(max-width:860px){ html[data-theme="ember"] body.p-home .memo{grid-template-columns:1fr;row-gap:4px} html[data-theme="ember"] body.p-home .memo>*{grid-column:1!important;grid-row:auto!important} html[data-theme="ember"] body.p-home .quotes{grid-template-columns:1fr!important} html[data-theme="ember"] body.p-home .thought-card{grid-template-columns:1fr} html[data-theme="ember"] body.p-home .thought-card>*{grid-column:1!important;grid-row:auto!important} html[data-theme="ember"] body.p-home .thought-tag{margin-top:8px} } /* KNOWN, MEASURED, UNFIXED (2026-08-15): patterns/ml-explainability.html scrolls 5px horizontally at 390px. Bisected to LIME/SHAP in the checklist — hiding it or shrinking it fixes the 5px, but NO wrapping rule does, including *{overflow-wrap:anywhere}, word-break, and text-wrap. So it is not a wrap problem and I did not ship a rule pretending otherwise. Impact: 5px of horizontal scroll on one page, one breakpoint. */ /* Inlined artifacts fill their figure — was a repeated inline style on 41 SVGs until the pre-push inline-style gate caught it (2026-08-15). Named, not stamped. */ .art-svg{width:100%;height:auto;display:block} /* ============================================================================ 404 — MISSED IN THE PORT (found 2026-08-15 by Arpit). The page carried data-theme="ember" and loaded ember.css, so it LOOKED ported; in fact styles.css held 40 rules for it and ember.css held one. It rendered in the classic palette on a site that had moved on. Attribute ≠ theme. ============================================================================ */ html[data-theme="ember"] body.p-404{background:var(--bg);color:var(--ink)} /* the page was built as a standalone card with no nav; now that it carries the house nav and footer it needs the same top offset every other page has */ html[data-theme="ember"] body.p-404 .wrap{padding-top:120px} html[data-theme="ember"] body.p-404 footer{margin-top:64px} html[data-theme="ember"] body.p-404 .ghost{color:rgba(245,237,230,.04);font-family:var(--serif)} html[data-theme="ember"] body.p-404 .kick{font-family:var(--ff-label);font-weight:600;font-size:12px; letter-spacing:.08em;text-transform:uppercase;color:var(--ember)} html[data-theme="ember"] body.p-404 h1{font-family:var(--serif);font-weight:300; font-size:clamp(32px,4.4vw,56px);line-height:1.1;color:var(--ink);margin:12px 0 16px} html[data-theme="ember"] body.p-404 h1 em{font-style:italic; background:linear-gradient(92deg,var(--ember),var(--violet));-webkit-background-clip:text; background-clip:text;color:transparent} html[data-theme="ember"] body.p-404 .lede{color:rgba(245,237,230,.76);max-width:60ch;line-height:1.7} html[data-theme="ember"] body.p-404 .btn{background:var(--g-hot);color:var(--cta-ink);border:none; border-radius:999px;padding:12px 20px;font-family:var(--ff-label);font-weight:600;font-size:12px; letter-spacing:.08em;text-transform:uppercase;text-decoration:none} html[data-theme="ember"] body.p-404 .btn:hover{filter:brightness(1.06);transform:translateY(-1px)} html[data-theme="ember"] body.p-404 .inline-links{color:rgba(245,237,230,.62);font-size:13.5px} html[data-theme="ember"] body.p-404 .inline-links a{color:var(--link);border-bottom:1px solid var(--border-accent)} html[data-theme="ember"] body.p-404 .hand{font-family:'Caveat',cursive;font-size:20px;color:var(--amber)} html[data-theme="ember"] body.p-404 .meta-note{color:rgba(245,237,230,.6);font-size:13.5px;line-height:1.7} html[data-theme="ember"] body.p-404 .meta-note a{color:var(--link)} /* the claim ticket stays PAPER on purpose — it is a printed artifact in a dark room, the same grammar the case studies use for document exhibits */ html[data-theme="ember"] body.p-404 .lug{background:#F5EDE6;color:#241830;border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.45)} html[data-theme="ember"] body.p-404 .lug-head b, html[data-theme="ember"] body.p-404 .lug-row b{color:#241830} html[data-theme="ember"] body.p-404 .lug-row span, html[data-theme="ember"] body.p-404 .lug-head span{color:rgba(36,24,48,.6)} html[data-theme="ember"] body.p-404 .lug-fill{background:var(--ember)} html[data-theme="ember"] body.p-404 .divert{color:#B84A1F;border-color:rgba(184,74,31,.5)} html[data-theme="ember"] body.p-404 .lug-claim{color:rgba(36,24,48,.75)} html[data-theme="ember"] body.p-404 .lug-claim .rt{color:#B84A1F} html[data-theme="ember"] body.p-404 footer{color:rgba(245,237,230,.45);border-top:1px solid var(--border)} /* ── PlanIt: the mascot row ────────────────────────────────────────────── The character is the case's argument, so it gets a component, not inline styles. Two things it must declare for itself: its WIDTH (the page-level `.fig-paper img{width:100%}` would otherwise blow a 116px mascot up to the full column) and its GROUND (the artwork is dark-featured line work drawn for PlanIt's warm light identity — on the #120B14 page the eyes and mouth disappear entirely, which is what shipped). Paper ground, as the system says for anything that represents a real printed/product surface. */ html[data-theme="ember"] body.p-case-studies-planit .mascot-row{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0} @media (max-width:640px){ html[data-theme="ember"] body.p-case-studies-planit .mascot-row{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Same trap as figure.vid-card above: .mascot is a
inside .measure-c, so the spine's breakout force-widens it to 1040px and translates it -520. The ROW breaks out as one object; the plates inside obey their tracks. */ html[data-theme="ember"] body.p-case-studies-planit .mascot-row .mascot{ width:auto!important;max-width:none!important; margin:0!important;transform:none!important;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px; background:#FFF6E9;border:1px solid rgba(32,24,12,.14);border-radius:16px;padding:20px 16px 12px} html[data-theme="ember"] body.p-case-studies-planit .mascot-row .mascot img{ width:116px;height:auto;border:0;display:block} html[data-theme="ember"] body.p-case-studies-planit .mascot-row .mascot span{ font-family:var(--ff-label);font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:rgba(32,24,12,.62);text-align:center;margin:0} /* Headings sat almost on top of their first paragraph — the base .section-title carries no bottom margin because elsewhere a kicker or grid supplies the gap. On this page nothing does. */ html[data-theme="ember"] body.p-case-studies-planit .section-title{margin-bottom:20px} html[data-theme="ember"] body.p-case-studies-planit section > .t-body + .t-body{margin-top:20px} /* PlanIt product shots. Same breakout discipline as .mascot: the wrappers are divs (not
) precisely so the spine's figure-breakout can't claim them, and the tracks are minmax(0,1fr) so an image can never force the grid wider than its container. */ html[data-theme="ember"] body.p-case-studies-planit .phone-row{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;justify-items:center;margin:0} html[data-theme="ember"] body.p-case-studies-planit .phone-row--one{grid-template-columns:minmax(0,1fr)} html[data-theme="ember"] body.p-case-studies-planit .phone-row .shot{ display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:340px} html[data-theme="ember"] body.p-case-studies-planit .phone-row .shot img{ width:100%;height:auto;display:block;border:1px solid rgba(32,24,12,.2);border-radius:12px} html[data-theme="ember"] body.p-case-studies-planit .phone-row .shot span{ font-family:var(--ff-label);font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-dim)} @media (max-width:640px){ html[data-theme="ember"] body.p-case-studies-planit .phone-row{grid-template-columns:minmax(0,1fr)}} /* The single-phone figures: a 340px screenshot centred in a 1040px band left a ~350px void down each side. The space gets a content role — an annotation rail reading the screen — rather than being left over. */ html[data-theme="ember"] body.p-case-studies-planit .phone-row--one{ grid-template-columns:300px minmax(0,1fr);gap:48px;justify-items:start;align-items:start} html[data-theme="ember"] body.p-case-studies-planit .phone-row--one .shot{max-width:300px} html[data-theme="ember"] body.p-case-studies-planit .shot-rail{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column; gap:40px;padding-top:8px} html[data-theme="ember"] body.p-case-studies-planit .shot-rail li{ font-family:var(--ff-sans);font-size:15px;line-height:1.7;color:var(--ink-muted); padding-left:16px;border-left:2px solid rgba(255,138,92,.45)} html[data-theme="ember"] body.p-case-studies-planit .shot-rail b{color:var(--ink);font-weight:600} @media (max-width:860px){ html[data-theme="ember"] body.p-case-studies-planit .phone-row--one{ grid-template-columns:minmax(0,1fr);justify-items:center} html[data-theme="ember"] body.p-case-studies-planit .shot-rail{max-width:520px}} /* ============================================================================ FIGURE CAPTIONS — the last classic-theme remnant (2026-08-16, Arpit caught it) styles.css paints .fig-paper figcaption as a cream band (background:--paper, ink:--paper-soft, dashed top rule) — the classic theme's taped-photo look. Ember never restyled the BAND, only its font, so every case study carried a full-bleed cream strip under its figures: a second, competing surface that belongs to no Ember grammar and reads as a highlighter smear on the dark page. Captions are captions — house label face, dim ink, page ground. ============================================================================ */ html[data-theme="ember"] body[class*="p-case-studies"] .fig-paper figcaption{ background:none;border-top:0;color:var(--ink-dim); padding:0;margin:16px 0 0;max-width:70ch;text-align:left;line-height:1.6} /* The single-phone figure as ONE grid object: the phone holds the left column across both rows; the annotation rail sits top-right; the caption drops into the space beneath it. Composed this way the figure has no leftover corner — previously the caption sat under the phone and the bottom-right ~400px was an unstructured void. */ @media (min-width:861px){ html[data-theme="ember"] body.p-case-studies-planit figure.fig-paper:has(.phone-row--one){ display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr; column-gap:48px;row-gap:24px;align-items:start} html[data-theme="ember"] body.p-case-studies-planit figure.fig-paper:has(.phone-row--one) .phone-row--one{ display:contents} html[data-theme="ember"] body.p-case-studies-planit figure.fig-paper:has(.phone-row--one) .shot{ grid-column:1;grid-row:1 / span 2} html[data-theme="ember"] body.p-case-studies-planit figure.fig-paper:has(.phone-row--one) .shot-rail{ grid-column:2;grid-row:1;padding-top:8px} html[data-theme="ember"] body.p-case-studies-planit figure.fig-paper:has(.phone-row--one) figcaption{ grid-column:2;grid-row:2;margin:0;align-self:end} @media (max-width:860px){ html[data-theme="ember"] body.p-case-studies-planit figure.fig-paper:has(.phone-row--one){ display:block} html[data-theme="ember"] body.p-case-studies-planit figure.fig-paper:has(.phone-row--one) .phone-row--one{ display:grid}} } /* The bottom button row. Every other case study carries a per-page extracted class whose sole declaration is justify-content:space-between; planit was authored without one, so its two buttons bunched left at a 16px gap while the other six push to the column edges. Declared by name rather than by cloning another page's xi- class — those numbers are page-specific. */ html[data-theme="ember"] body.p-case-studies-planit .btn-row{justify-content:space-between} /* Below 860 the figure stops being a two-column object: the 300px phone track was surviving into the narrow layout and squeezing the screenshot to ~120px — legible in a geometry check, useless to a human. Caught at 768, which is neither declared breakpoint. */ @media (max-width:860px){ html[data-theme="ember"] body.p-case-studies-planit .phone-row--one{ grid-template-columns:minmax(0,1fr);justify-items:center;gap:32px} html[data-theme="ember"] body.p-case-studies-planit .phone-row--one .shot{max-width:340px} html[data-theme="ember"] body.p-case-studies-planit .mascot-row{ grid-template-columns:repeat(2,minmax(0,1fr))} html[data-theme="ember"] body[class*="p-case-studies"] .fig-paper figcaption{text-align:left} } html[data-theme="ember"] body.p-home .l7{--lc:var(--rose);--lt:rgba(255,122,168,.08)}