/* ============================================================================ SITE.CSS — this site's own stylesheet, on the design system's cascade layers. ---------------------------------------------------------------------------- Loads AFTER amber.css and shares its layer order, which is the whole contract: reset → tokens → ground → type → layout → components → utilities → overrides A later layer beats an earlier one regardless of specificity, and within one layer specificity and source order decide as they always did. amber.css fills the early layers and the generic half of `components`; this file fills: components the site's own components — page layouts, cards, instruments, the reconstruction plates. Where both files style the same thing in this layer, this file is later and wins ties; where the system is more specific it wins, which is the point of sharing a layer rather than stacking one on the other. utilities the extracted single-purpose classes (.xi-*), above components overrides the last word — what once had to be written !important There is no theme attribute. There is one look, and its dark passages are the two bookends the system defines ([data-ground="bookend"]), not a mode. SOURCE: css/site/ — one file per layer below, concatenated by tools/build-css.py. Edit those files, never this one; `build-css.py --check` is a gate. (It was first folded from styles.css, ember.css and amber-bridge.css on 2026-09-12; that generator preserved every declaration value; everything after that date is a decision. ============================================================================ */ @layer reset, tokens, ground, type, layout, components, utilities, overrides; @layer tokens{/* ── the site's own tokens, declared on every carrier the system re-derives tier 2 on, so they resolve against THAT carrier's roles: paper on the page, light on a bookend, one stop deeper on a tint. A custom property resolves where it is declared. */ :root, [data-ground="bookend"], [data-tint], .a-tinted{ --act-2: var(--acc-violet); /* the second stop of a two-accent gradient */ --cta-grad: linear-gradient(92deg, var(--acc-copper), var(--acc-amber)); --cta-grad-hover: linear-gradient(92deg, var(--copper-700), var(--amber-700)); /* one stop deeper on paper */ --cta-fill-hover-copper: var(--copper-700); /* F: one stop deeper on paper */ --ink-wash: color-mix(in srgb, var(--text-primary) 5%, transparent); /* a raised fill */ --act-wash: color-mix(in srgb, var(--act) 8%, transparent); /* a hover fill */ --link-ink: var(--acc-violet); /* this site's links are violet, by decision */ --door-ink: var(--violet-700); /* a quiet door: one stop deeper than a link, so it reads the same on paper and on a tint (cta-grammar-check saw two inks for one component) */ --link-ink-hover: color-mix(in srgb, var(--acc-violet) 78%, var(--text-primary)); } /* a control edge on the bookend owes 1.4.11 its 3:1; the system's 37% cream measured 2.83:1 on this site's #140C16 (nontext-contrast-check) — 42% clears it. Logged for the system. */ [data-ground="bookend"]{--border-strong:color-mix(in srgb, var(--neutral-100) 42%, transparent); --door-ink:var(--violet-100); --cta-grad-hover:linear-gradient(92deg, var(--copper-50), var(--amber-50)); --cta-fill-hover-copper:var(--copper-50)} /* one stop lighter on a bookend */} @layer components{/* ── from styles.css ── */ /* A figure image centres in its figure. An img is inline-level, so one given a max-width narrower than its figure sits hard LEFT and leaves the remainder as dead space — 180px of it on the O2 case at 1440. Stated on the component so no page has to remember it. */ figure > img, figure > svg, figure > video, figure > picture{display:block;margin-inline:auto} /* ============================================================ Arpit Maheshwari — Portfolio styles Cleaned up Phase 11J: pruned dead rules, kept only what renders on the live site. ~200 lines (was 340). ============================================================ */ /* ----- Design tokens (see DESIGN-SYSTEM.md — single source of truth) ----- */ :root{--ff-display:'Source Serif 4',Georgia,'Times New Roman',serif;--ff-sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--ff-label:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--ff-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--ease-out:cubic-bezier(0.16,1,0.3,1);--space-2:2px;--fs-micro:12px;--fs-eyebrow:12px;--fs-caption:13px;--fs-ui:14px;--fs-body:18px;--fs-lead:21px;--fs-card:22px;--fs-title:clamp(35px,2.9vw,46px);--fs-title-lg:clamp(40px,5vw,55px);--fs-hero:clamp(40px,5.5vw,64px);--fs-metric:clamp(38px,4.4vw,48px);--fs-metric-sm:24px;--section-y:90px;--page-x:64px;--inner-max:1180px;--measure:62ch;--radius:4px} @media(max-width:900px){:root{--section-y:64px;--page-x:32px}} @media(max-width:600px){:root{--section-y:48px;--page-x:24px}} /* ----- Reset + base ----- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} /* The scrolling element is `html`, so a reduced-motion override scoped to `body` never applies (ember.css:253 targeted body.p-home and did nothing). Motion sensitivity is a vestibular accessibility need, not a preference — smooth scroll can trigger nausea. */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{background:var(--surface-page);color:var(--text-body);font-family:var(--ff-sans);line-height:1.7;overflow-x:hidden;letter-spacing:-0.003em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} h1,h2,h3,h4,h5,h6{scroll-margin-top:80px} .nav-links a[aria-current]{color:var(--accent-text)} /* ----- Marginalia — the personality layer (Arpit's pick, 2026-07-29) ----- Handwritten notes + pen-drawn SVG scribbles over the design system. Rules: notes state existing facts only; ≤1 note per section; gold, Caveat, ±2° tilt. */ .hand{font-family:'Caveat',cursive;color:var(--accent-text);line-height:1.25;pointer-events:none;letter-spacing:0;text-transform:none} /* Focus states (a11y) */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px} input[type="email"]:focus-visible,input[type="text"]:focus-visible,textarea:focus-visible{background-color:color-mix(in srgb, var(--accent-text) 5%, transparent)} /* Visually-hidden labels (a11y) — read by screen readers, removed from visual flow */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .proof-chip:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px} /* Case cards — hover lift + keyboard focus (was inline onmouseover) */ .case-card-v2:hover{transform:translateY(-4px)} .case-card-v2:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px} @media (max-width:600px){} /* Icons */ .icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* Skip link (a11y) */ .skip-link{position:absolute;top:-100px;left:16px;background:var(--accent-text);color:var(--surface-page);padding:12px 24px;font-size:14px;font-weight:600;z-index:10000;border-radius:0 0 4px 4px;transition:top .2s} .skip-link:focus{top:0} /* Subtle noise overlay */ body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E")} /* ----- Navigation ----- */ #nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb, var(--surface-page) 60%, transparent);backdrop-filter:blur(8px);transition:background .4s,backdrop-filter .4s,padding .3s} /* THE SITE MARK — one declaration, not 32. This size was written out as a separate extracted class on every page that shows the logo (.xi-patterns-003, .xi-home-003, ...), each with !important. Thirty-two identical rules is not a system; it is the same decision copied until nobody owns it. Changing the mark size used to mean editing 32 rules and hoping none was missed. */ .site-logo{width:40px;height:40px} #nav.scrolled{background:color-mix(in srgb, var(--surface-page) 92%, transparent);backdrop-filter:blur(16px);padding:16px 48px;border-bottom:1px solid var(--border-strong)} .nav-logo{font-family:var(--ff-mono);font-size:13px;letter-spacing:.02em;color:var(--accent-text);white-space:nowrap} .nav-links{display:flex;gap:40px;list-style:none;align-items:center} .nav-links a:not(.cta){font-size:13px;letter-spacing:.02em;color:var(--text-muted);position:relative;transition:color .2s;white-space:nowrap} .nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--accent-text);transition:width .3s var(--ease-out)} .nav-links a:hover{color:var(--text-body)} .nav-links a:hover::after{width:100%} .nav-links li.nav-book a{color:var(--accent-text)} .nav-links li.nav-book a:hover{color:var(--accent-text);opacity:.78} /* 2026-09-10 — .nav-cta is PLACEMENT ONLY now. Appearance belongs to the .cta component, which the nav door composes. Before this, .nav-cta (styles) plus html[data-theme=ember] .nav-cta (ember) plus body.p-home .nav-cta between them re-declared font, size, tracking, padding, border, radius, colour and weight — so the nav door rendered 48px tall at .08em tracking while the same component elsewhere rendered 44px at .02em. That is execution lesson 11: a component that does not own its critical properties renders differently per context. Measured before the fix: 5 different shapes across 71 instances. */ .nav-cta{transition:background .3s,color .3s} /* order:1 puts the hamburger visually LAST (its original position) while the DOM keeps it before .nav-links, so Tab reaches the drawer it opens instead of skipping past it. The order property does not affect tab order — that is the point. */ .menu-toggle{display:none;order:1;flex-direction:column;gap:4px;cursor:pointer;background:none;border:none;padding:12px 8px;margin:-14px -10px} .menu-toggle span{width:24px;height:1px;background:var(--text-body);transition:transform .3s,opacity .3s} /* ----- Hero ----- The prototype's hero block lived here: #hero, .hero-bg, .hero-grid-lines, .hero-headline (+ .line, .line-inner, em) and .hero-cta-row, including a half-second line-by-line entrance animation. The shipped hero is .hero > .hero-split > .hero-copy > h1#h-hero; every selector in this block matched 0 elements on all 39 live pages. Removed 2026-09-07 — the last time a dead prototype block was left to rot here, one generic selector inside it (`nav ul{gap:24px}`) silently retargeted onto the real nav and sat 16px off on the homepage for weeks. */ /* ----- Section scaffolding ----- */ .section{padding:var(--section-y) var(--page-x);border-top:1px solid var(--border-hairline)} .section-inner{max-width:var(--inner-max);margin:0 auto} /* ===== DESIGN SYSTEM — section grammar (see DESIGN-SYSTEM.md §6) ===== Every section, every surface: .eyebrow + .section-title. One scale, one grammar. */ .eyebrow{font-family:var(--ff-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.02em;color:var(--accent-text);margin:0;display:flex;align-items:center;gap:12px} .section-title{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-title);letter-spacing:-.01em;color:var(--text-body);margin:12px 0 0;max-width:24ch} .lead{font-family:var(--ff-display);font-weight:300;font-size:var(--fs-lead);line-height:1.4;color:var(--text-body);max-width:46ch} .card-title{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-card);line-height:1.3;letter-spacing:-.005em;color:var(--text-body);margin:0} .u-body{font-family:var(--ff-sans);font-size:var(--fs-body);line-height:1.7;color:var(--text-muted);max-width:var(--measure)} .u-ui{font-family:var(--ff-sans);font-size:var(--fs-ui);line-height:1.6;color:var(--text-muted)} /* Governed cream 'act' — dark base, cream peak. ONLY the receipts + one-idea bands. */ .act-cream{--accent-text:var(--accent-fill);background:var(--surface-page);color:var(--text-body);border-top:none} @media(max-width:900px){} a.thought-card{padding:32px;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface-card);transition:border-color .3s,transform .3s var(--ease-out);display:flex;flex-direction:column} a.thought-card:hover{border-color:var(--accent);transform:translateY(-4px)} a.thought-card.featured{background:var(--surface-sunken)} /* ----- Footer ----- */ footer{border-top:1px solid var(--border-strong);padding:40px 48px;display:flex;align-items:center;justify-content:space-between} .footer-logo{font-family:var(--ff-mono);font-size:12px;letter-spacing:.02em;color:var(--text-faint)} .footer-note{font-family:var(--ff-mono);font-size:var(--fs-micro);color:var(--text-muted)} .footer-back{font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--text-faint);display:flex;align-items:center;gap:8px;transition:color .2s;cursor:pointer;background:none;border:none} .footer-back:hover{color:var(--accent-text)} /* ----- Reveal animations ----- */ @keyframes reveal{} /* Scroll-reveal removed 2026-09-07 — it delayed content without reporting a state change. Nothing on the site hides itself on load now. */ /* ----- Dyslexia-friendly mode ----- */ .dyslexia-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:1px solid var(--border-strong);border-radius:4px;color:var(--text-faint);font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:0.05em;cursor:pointer;transition:border-color 0.3s,color 0.3s,background 0.3s} .dyslexia-toggle:hover{border-color:var(--accent);color:var(--text-body)} .dyslexia-toggle.active{border-color:var(--accent-text);color:var(--accent-text);background:color-mix(in srgb, var(--accent-text) 8%, transparent)} .dyslexia-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5} body.dyslexia-mode{font-family:'Lexend',sans-serif;letter-spacing:0.03em;word-spacing:0.1em} body.dyslexia-mode .thought-excerpt, body.dyslexia-mode .pullquote-card-text, body.dyslexia-mode .remote-card-desc{font-family:'Lexend',sans-serif;line-height:2;letter-spacing:0.03em;word-spacing:0.1em} body.dyslexia-mode .thought-title, body.dyslexia-mode .remote-card-title{font-family:'Lexend',sans-serif} /* ----- Exit-Intent Banner (newsletter capture on pattern pages) ----- */ /* ----- abbr[title] tooltips ----- */ abbr[title]{position:relative;text-decoration:none;border-bottom:1px dashed var(--accent-text);cursor:help} abbr[title]:hover{color:var(--accent-text)} abbr[title]::after{content:attr(title);position:absolute;bottom:140%;left:50%;transform:translateX(-50%) scale(0.9);background:var(--surface-card);border:1px solid var(--border-strong);color:var(--text-body);padding:8px 12px;font-size:12px;line-height:1.5;border-radius:4px;width:min(240px,calc(100vw - 32px));display:none;box-shadow:var(--elev-2);z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.2s cubic-bezier(0.16,1,0.3,1),transform 0.2s cubic-bezier(0.16,1,0.3,1);font-family:var(--ff-sans);font-weight:normal;text-transform:none;text-align:left;white-space:normal} abbr[title]::before{content:"";position:absolute;bottom:125%;left:50%;transform:translateX(-50%);border-width:6px;border-style:solid;border-color:var(--border-strong) transparent transparent transparent;z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.2s cubic-bezier(0.16,1,0.3,1)} abbr[title]:hover::after,abbr[title]:focus::after,abbr[title]:active::after{display:block;opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto} /* no hover, no tooltip: on touch the box could only appear clipped off-viewport; the surrounding prose (and the glossary) carry the definitions (2026-09-02 sweep) */ @media(hover:none){abbr[title]{cursor:inherit}} abbr[title]:hover::before,abbr[title]:focus::before,abbr[title]:active::before{opacity:1;pointer-events:auto} /* ----- Responsive: tablet (769px–1024px) ----- */ @media(min-width:769px) and (max-width:1024px){#nav{padding:20px 32px}} /* ----- Responsive: mobile + tablet hamburger (≤900px) ----- */ @media(max-width:1100px){.nav-links{display:none;flex-direction:column;align-items:stretch;position:fixed;top:64px;left:0;right:0;background:color-mix(in srgb, var(--surface-page) 97%, transparent);padding:32px 24px;gap:24px;border-bottom:1px solid var(--border-strong);z-index:99} .nav-links a:not(.cta){display:block;padding:12px 16px;font-size:15px;white-space:normal} .nav-links.nav-open{display:flex} .menu-toggle{display:flex} /* Once .nav-links hide, the bar holds only logo | CTA | hamburger — and space-between parks the CTA in the middle of the gap (measured: left 482 in a 1000px viewport). margin-left:auto groups it with the hamburger on the right. This lived only in the <=768 block, so 769-1100px shipped with the CTA floating. Caught by Arpit 2026-08-06. */ .nav-cta{margin-left:auto;margin-right:16px}} /* ----- Responsive: mobile (≤768px) ----- */ @media(max-width:768px){#nav{padding:16px 20px;gap:8px} .nav-logo span{display:none} #nav.scrolled{padding:12px 24px} .nav-cta{margin-left:auto;margin-right:16px} html,body{font-size:16px} /* was keyed on the style attribute itself; retargeted at extraction (theme-swap migration) */ /* 2026-09-10: was text-align:center. Arpit specified this footer himself — "on the left can I have a two liner of text of name and the second line is about copyright" — and centring it below 768px contradicted that: the note wrapped to two centred lines whose second line sat indented, reading as a ragged block rather than a two-liner. Left is his arrangement at every width. align-items:flex-start is the other half and the reason my first attempt looked fixed on the homepage only: this is a flex COLUMN, so align-items centred each child BOX. text-align only governs text inside the box. On the homepage .footer-words is full width, so centring it was invisible; on the other 37 it shrink-fits to 266px and was pushed to x=62. */ footer{flex-direction:column;gap:16px;text-align:left;align-items:flex-start} .footer-logo,.footer-note,.footer-back{font-size:13px;min-height:44px;display:inline-flex;align-items:center;padding:4px 4px}} /* ----- Responsive: small mobile (≤480px) ----- */ @media(max-width:480px){h1,h2,h3{scroll-margin-top:120px}} /* ============================================================ P19-B · VISUAL EVIDENCE SYSTEM (case pages) ============================================================ */ /* Vitals strip — the 10-second layer at the top of every case */ .case-vitals{display:flex;flex-wrap:wrap;gap:0;margin:0 0 40px;border:1px solid var(--border-strong);border-radius:var(--radius-2);overflow:hidden} .case-vitals > div{flex:1 1 160px;min-width:140px;padding:16px 16px;border-right:1px solid var(--border-strong);background:var(--surface-card)} .case-vitals > div:last-child{border-right:none} .case-vitals dt{font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--text-muted);margin:0 0 4px} .case-vitals dd{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-body);line-height:1.3;color:var(--text-body);margin:0;font-optical-sizing:auto;font-variant-ligatures:common-ligatures contextual;font-variant-numeric:tabular-nums lining-nums} .case-vitals dd.gold{color:var(--accent-text)} .case-jump{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 48px;font-family:var(--ff-mono);font-size:var(--fs-micro);letter-spacing:.02em} .case-jump a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--border-strong);padding-bottom:2px;transition:color .2s,border-color .2s} .case-jump a:hover{color:var(--accent-text);border-color:var(--accent-fill)} /* Reconstruction frame — interactive, NDA-safe demos */ /* Interactive moments — THE RUNNING APP WINDOW (2026-08-06, iteration 5, Arpit-directed). Root cause of four rejections: the widget wore the site's PRINT language (uppercase mono, letterpress paper) — and print is static by definition, so no amount of chips, cream, or shadows made it read as operable. The fix is identity, not decoration: the widget now speaks the same visual language as the reconstruction PLATES — a light app window with chrome dots, sentence-case product type, and a real segmented control. People recognize software because they use it all day; recognition is the affordance. The ghost self-demo (assets/recon-live.js) supplies the behavioral proof. Tokens re-point to the app-light context INSIDE the window; contrast audited on the real pixels. No uppercase, no bold shouting, no compensating shadows inside the window. */ /* The .recon blocks are SIMULATIONS of a client's shipped product, and their tokens are deliberately NOT raised with the rest of the site (2026-09-10). Their borders measure 1.03:1 to 1.25:1, which fails WCAG 1.4.11 like the others did — but these are depictions of what AdTech, FinTech, Org Design, O2 and PTC actually looked like. Restyling them to pass would falsify the evidence the case study rests on, which canon forbids. Flagged to Arpit as a known, reasoned exception rather than silently fixed or silently left. */ .recon{margin:32px 0 48px;border:1px solid rgba(255,255,255,0.12);border-radius:10px;overflow:hidden;position:relative;--surface-page:#FFFFFF;--surface-sunken:#F4F5F7;--surface-card:#F4F5F7;--text-body:#16181D;--text-muted:#282B31;--text-faint:#282B31;--accent-text:#8A6210;--accent-fill:#8A6210;--accent-text:#6B4C0C;--border-strong:#E3E6EA;--accent:#C9CED6;--status-negative:#B63D0B;--status-caution:var(--accent-fill);--status-positive:#0E7A5F;--acc-copper:#0E7A5F;background:var(--surface-sunken);color:var(--text-body);box-shadow:0 30px 64px rgba(0,0,0,0.45)} /* the chrome bar — same idiom as the plates: dark strip, three window dots, quiet title */ /* WRAPS. This row is a flex nowrap containing a BARE TEXT NODE — the "Reconstruction — anonymised … client under NDA" provenance line — beside an svg and the clock, both flex-shrink:0, plus two ::before/::after dots. At 390px the fixed items and the text's minimum exceeded the 260px content box by 30px, and .recon has overflow:hidden, so the NDA caption and "session 0:00" were cut off on fintech and vc-diligence. An anonymous flex item cannot be given min-width:0 — there is no selector for a text node — so the row wraps instead. It only wraps when it must; nothing moves at desktop widths. */ .recon-badge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;background:#22252B;border-bottom:1px solid #2E323A;font-family:var(--ff-mono);font-size:10px;letter-spacing:0.04em;text-transform:none;color:#8D95A3} .recon-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:#3A3F48;flex:0 0 auto;box-shadow:14px 0 0 #3A3F48, 28px 0 0 #3A3F48;margin-right:32px} .recon-badge::after{content:"";width:7px;height:7px;border-radius:50%;background:#37B87E;flex:0 0 auto;animation:reconPulse 2.4s ease-in-out infinite} @keyframes reconPulse{0%,100%{opacity:1} 50%{opacity:.35}} .rl-spark{width:60px;height:14px;margin-left:auto;flex:0 0 auto;opacity:.9} .rl-clock{font-family:var(--ff-mono);font-size:10px;color:#8D95A3;flex:0 0 auto;font-variant-numeric:tabular-nums} .recon-stage{padding:20px 24px} /* product controls: sentence case, sans, real-software idioms */ .recon button{font-family:var(--ff-sans);font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;background:#FFFFFF;color:var(--text-body);border:1px solid #D5D9DF;border-radius:6px;padding:8px 12px;box-shadow:0 1px 2px rgba(22,24,29,0.06);cursor:pointer;transition:background .15s, border-color .15s} .recon button:hover{background:#F7F8FA;border-color:#C9CED6} .recon button:active{transform:translateY(0.5px)} .recon button:focus-visible{outline:2px solid #8A6210;outline-offset:2px} /* the segmented control — the most recognized "pick one" idiom in software */ .recon-stage [role="group"]{display:inline-flex;gap:2px;padding:3px;background:#E7E9EE;border:1px solid #DCDFE5;border-radius:8px} .recon-stage [role="group"] button{background:transparent;border:none;box-shadow:none;border-radius:6px;color:#282B31} .recon-stage [role="group"] button:hover{background:rgba(255,255,255,0.6)} .recon-stage [role="group"] button[aria-pressed="true"]{background:#FFFFFF;color:#16181D;font-weight:600;box-shadow:0 1px 3px rgba(22,24,29,0.16)} .recon-caption{padding:12px 16px;border-top:1px solid #E3E6EA;background:#FFFFFF;font-family:var(--ff-sans);font-size:11.5px;letter-spacing:0;text-transform:none;color:#282B31} /* the ghost cursor — the widget demonstrating itself once (assets/recon-live.js) */ .rl-ghost{position:absolute;top:0;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(22,24,29,0.85);box-shadow:0 0 0 4px rgba(22,24,29,0.15), 0 4px 10px rgba(0,0,0,0.25);opacity:0;pointer-events:none;z-index:5;transition:transform .9s cubic-bezier(.3,.8,.3,1), opacity .4s} .rl-ghost--on{opacity:1} .rl-ghost--press{animation:rlPress .3s ease} @keyframes rlPress{50%{box-shadow:var(--elev-2)}} /* common fate: consequences flash together when a control is pressed */ .rl-flash{animation:rlFlash .8s ease} @keyframes rlFlash{0%{background-color:rgba(138,98,16,0.14)} 100%{background-color:transparent}} @media (prefers-reduced-motion:reduce){.recon button{transition:none} .recon-badge::after{animation:none}} .recon button{cursor:pointer} .loom-slot .loom-facade:hover .loom-play{background:var(--accent-text)} @media (max-width: 768px){.case-vitals > div{flex:1 1 46%;border-bottom:1px solid var(--border-strong)} .recon-stage{padding:20px 12px}} /* ----- Case-study screening-gate summary (2026-07-31) ----- Browsing data shows the chance of leaving a page is highest at the very start and falls after, so a reader either bails in seconds or commits — two populations with opposite needs. This block is the skimmer's whole experience AND a pre-organised schema that improves what a committed reader retains from the prose below it. It carries three things only: the outcome in its locked canonical string, the constraint, and what was and was not his. No prose is deleted to make room. */ .case-gate{margin:24px 0 8px;padding:20px 24px;background:var(--surface-card);border:1px solid var(--border-strong);border-left:3px solid var(--accent-text);border-radius:var(--radius)} .case-gate .cg-l{font-family:var(--ff-mono);font-size:var(--fs-eyebrow);letter-spacing:.02em;color:var(--accent-text);margin:0 0 8px} .case-gate p{font-size:var(--fs-body);color:var(--text-body);line-height:1.7;margin:0;max-width:70ch} .case-gate b{color:var(--accent-text);font-weight:400} @media(max-width:600px){.case-gate{padding:16px 16px}} @media(max-width:560px){} /* nav 320 guard — at 320px the wordmark + CTA + hamburger exceeded the viewport, producing 4px of two-dimensional scrolling (WCAG 1.4.10). The monogram alone still identifies the site and links home. */ @media(max-width:360px){#nav{padding-left:16px;padding-right:16px;gap:8px} .nav-logo span{display:none} .nav-cta{margin-right:8px}} /* The method diagram needs the full column, not the 62ch text measure: at 595px the 1280-unit viewBox downscaled to 0.465 and its labels rendered at 5.6px. */ .process-fig{margin:32px 0;width:calc(100% + 300px);margin-left:-150px;max-width:none} /* Below ~1040px the 1280-unit viewBox downscales past the point where its labels are readable (act labels drop under 11px). The three acts are stated in full prose immediately below, so the diagram is hidden rather than shown illegibly — an unreadable diagram is worse than no diagram. */ @media(max-width:1040px){.process-fig{display:none}} /* print-shared — before this, hire/index.html was the only file with print styles, so every case study printed a solid near-black background with the fixed nav stamped onto all 14 sheets. */ /* A