/* ============================================================ Scene D β€” Case study: "Modernizing a Legacy Enterprise UI" (Splunk). Rebuilt 2026-08-03 from the Figma frame "Jacky_02 β€” modification" (page πŸ’» Case study, node 928:49913). The composition: a full-screen hero, then ONE quiet measure. Β· 760px stream, centred in the viewport (at 1440 that's x 340–1100) Β· 600px text column centred inside it (the 80px inset on each side) Β· figures run the full 760 β€” they breathe past the prose Β· two margin asides (.cs-note) break out into the 220px side lanes at β‰₯1440 and fold back inline below that Β· β‰₯2560 the WHOLE measure scales Γ—1.25 with the type (stream 950, col 750, bleed 1375, lanes 275 β€” the --cs-* vars) so the page keeps the 1440 proportions instead of becoming a ribbon The v4 side rails are resolved (2026-08-06): PROJECT DETAILS became an inline meta block at the top of section 01 (.cs-details); the CONTENTS toc is retired for good β€” the scrollspy wiring in case.js is dormant. Same grammar as the rest of the site: homepage tokens, Hyperlegible, transparent scene over the shared #bgCanvas dot grid. All six figures are real (2026-08-08): 01 legacy still, 02 audit-board video, 03 flow breakout, 04 wizard, 05 stepper, 06 prototype video. aspect-ratio is locked per figure via --ar. Everything scoped under #sD. ============================================================ */ #sD { font-family: 'Hyperlegible Sans', system-ui, sans-serif; } #sD.scene { z-index: 2; background: transparent; color: var(--fg); } /* ---------------- scroll container ---------------- Mobile: the scene is in normal flow, body scrolls (like About). Desktop: the scene is viewport-locked (.scene{position:fixed}), so the main becomes the scroller β€” same pattern as #sB .ab-main. */ @media (min-width: 1100px) { #sD .cs-main { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; /* PW-3 (Jacky's catch, 2026-08-27): the gate modal's scroll lock flips this to overflow:hidden β€” on classic (non-overlay) scrollbars the bar vanished and the centred stream reflowed ~7px sideways, a visible background shift under the modal. A stable gutter keeps the bar's lane reserved either way; overlay-scrollbar systems are untouched (gutter width 0). */ scrollbar-gutter: stable; } } /* ── Entry β€” mirrors About's grammar: the scene fades in (--t-reveal), then the hero composition cascades with the 1.6s brand rise. Everything below the full-screen hero is handled by the scroll reveals, so the entrance only choreographs what's actually on screen at open. ───────────────────────── */ #sD { --cs-rise-dur: 1.6s; --cs-exit-dur: 1s; /* CS-16: the exit's own, faster clock (see the Exit note) */ /* Stream metrics β€” the scene's three widths, declared once so the super-wide tier can scale them together (see the β‰₯2560 block). */ --cs-stream: 760px; /* figures + the measure everything centres in */ --cs-col: 600px; /* text column inside the stream */ --cs-bleed: 1100px; /* breakout figures (.cs-fig--bleed) */ /* CS-4 rhythm + type beats β€” the ?space=1 panel drives these live; bake locked values HERE (defaults mirror the shipped tokens). CS-9 r1 (Jacky 2026-08-22, tuned on the spacing-map artifact): the whole rhythm compacts one-to-two token steps β€” the old beats read loose against the type. --csp-scale multiplies every beat: 1 at desktop, 1.25 at β‰₯2560 where the measure and type grow Γ—1.25, so the spacing/type ratio finally holds at super-wide too (it never did β€” the beats used to stay fixed while the type grew). */ --csp-scale: 1; --csp-section-gap: calc(var(--space-3xl) * var(--csp-scale)); /* section ↔ section */ --csp-sec-gap: calc(var(--space-lg) * var(--csp-scale)); /* inside a section: head/body/stats/fig (was xl) */ --csp-head-gap: calc(var(--space-xs) * var(--csp-scale)); /* eyebrow β†’ title (was md) */ --csp-para-gap: calc(var(--space-sm) * var(--csp-scale)); /* paragraph β†’ paragraph (was md) */ --csp-items-gap: calc(var(--space-sm) * var(--csp-scale)); /* sub-item ↔ sub-item (was lg) */ --csp-item-gap: calc(var(--space-2xs) * var(--csp-scale)); /* sub-item title β†’ body (was xs) */ --csp-work-gap: calc(var(--space-md) * var(--csp-scale)); /* deliverable text β†’ figure (was lg) */ --csp-worktext-gap: calc(var(--space-xs) * var(--csp-scale)); /* deliverable title β†’ prose β€” r5: 2xs read too tight under the 30px title */ --csp-cap-gap: calc(var(--space-2xs) * var(--csp-scale)); /* figure β†’ caption (was md) */ --csp-statlabel-gap: calc(var(--space-2xs) * var(--csp-scale));/* stat number β†’ label (was xs) */ /* CS-9: works 01↔02 are their own group (Jacky's call on the map) β€” a beat independent of --csp-sec-gap, applied via the sibling margin below (flex gap + margin compose; equal to sec-gap today). */ --csp-works-gap: calc(var(--space-2xl) * var(--csp-scale)); /* CS-9 r3: lg β†’ 2xl, Jacky's second pass */ --csp-prose-lh: 1.5; --csp-fz-section: var(--fz-section-head); --csp-fz-subhead: var(--fz-sub-head); --csp-fz-stat: var(--fz-section-head); /* The MID DISPLAY TIER β€” --fz-mid, lifted off the body floor on mobile. Everything riding it is a heading: deliverable titles (.cs-work-text h3), second-level secheads (.cs-sec-title--sm), and the password-gate title. --fz-mid bottoms out at 16 on mobile, identical to --fz-body. CS-9 r4 retired weight as a hierarchy signal on purpose ("hierarchy by SIZE"), so at 16/400 those headings were typographically INDISTINGUISHABLE from the paragraph under them β€” only --fg vs --fg-muted was left. Below 737 the tier borrows --fz-section-head's 20: the mobile ladder has exactly one step between body and hero, so 20 is the only choice that isn't a free px. Cost, accepted knowingly: on a phone this sits at the same 20 as --csp-fz-section, so section titles and these no longer differ by size. They stay apart structurally β€” a section title carries an eyebrow and a 144px section gap above it, and runs line-height 1 against their 1.2. A heading that merely shares a size with a bigger heading beats one that reads as body copy. Tablet and desktop are untouched: 30 / 20 / 16 and 40 / 30 / 16. Ladder for this tier: 20 / 20 / 30. */ --csp-fz-midtier: var(--fz-section-head); --csp-fz-work: var(--csp-fz-midtier); /* CS-9 r4: steps up to 30 at desktop */ --csp-fz-gate: var(--csp-fz-midtier); /* PW-1b */ } @media (min-width: 737px) { #sD { --csp-fz-midtier: var(--fz-mid); } } #sD.scene.active { animation: cs-enter var(--t-reveal) cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes cs-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes cs-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } } #sD.scene.active .cs-back { animation: cs-rise var(--cs-rise-dur) cubic-bezier(0.22, 1, 0.36, 1) both; } #sD.scene.active .cs-hero-img { animation: cs-fade var(--cs-rise-dur) cubic-bezier(0.22, 1, 0.36, 1) both; } /* Header beat: the cover settles first, chrome follows. */ #sD.scene.active .cs-hero-img { animation-delay: 0ms; } #sD.scene.active .cs-back { animation-delay: 320ms; } /* ── Exit β€” mirrors the entrance's ORDER (reverse, riseβ†’sink) but on its own FASTER clock. CS-16 (Jacky: caseβ†’Work γ€ŒεΉΎζ…’γ€): the exit used the full 1.6s entrance duration + a 2450ms handoff β€” with the front-loaded house easing the screen sat visually empty from ~1.3s to 2.45s before the Work grid even started blooming. An exit is a step BACK β€” it reads best quicker than the arrival (same asymmetry the industry container-transform guidance uses). --cs-exit-dur 1s + hero delay 200ms ends the cascade ~1.2s; the JS handoff (index.html runCaseExit) fires at 1250ms. Entrance untouched. ── */ @keyframes cs-rise-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px); } } /* CS-15 r3 (Jacky's tablet catch, 2026-08-27): NO explicit `from` β€” the fade starts from each element's own computed opacity. The old from{opacity:1} forced the CLOSED contents dropdown (.cs-toc <1440, natural opacity 0) fully visible at exit start, which read as the grid tap "auto-clicking" the contents icon. Everything this animation serves that should fade (hero, footer, chrome row) rests at 1 anyway. */ @keyframes cs-fade-out { to { opacity: 0; } } #sD.cs-exiting.scene.active .cs-back { animation: cs-rise-out var(--cs-exit-dur) cubic-bezier(0.22, 1, 0.36, 1) both; } /* CS-16 r2 (Jacky's catch): fade the hero CONTAINER, not just the img. .cs-hero carries background: var(--neutral) (the image-loading placeholder) β€” fading only the img peeled the photo off and left a flat neutral slab standing until the scene swap, the LAST thing to vanish. The container fade takes photo + placeholder down together, so the exit dissolves straight to the page background. (The entrance keeps animating the img alone β€” the placeholder is deliberate cover while the photo loads.) */ #sD.cs-exiting.scene.active .cs-hero { animation: cs-fade-out var(--cs-exit-dur) cubic-bezier(0.22, 1, 0.36, 1) both; } /* Exact mirror of the entrance delays (last in β†’ first out). */ #sD.cs-exiting.scene.active .cs-back { animation-delay: 0ms; } #sD.cs-exiting.scene.active .cs-hero { animation-delay: 200ms; } /* CS-16: compressed with the faster clock */ /* Everything the scroll reveals brought in sinks back out together at the head of the cascade; figures fade (no transform), mirroring how they arrived. */ #sD.cs-anim.cs-exiting .cs-reveal.is-in { animation: cs-rise-out var(--cs-exit-dur) cubic-bezier(0.22, 1, 0.36, 1) both; } #sD.cs-anim.cs-exiting .cs-fig.cs-reveal.is-in, #sD.cs-exiting .cs-footer { animation: cs-fade-out var(--cs-exit-dur) cubic-bezier(0.22, 1, 0.36, 1) both; } /* ---------------- breadcrumb back link ---------------- Sits directly under the global wordmark (top 32 + 28px row + small gap), floating over the hero. The top-right corner stays free for the global socials (desktop) / burger (mobile). */ #sD .cs-back { position: fixed; top: calc(32px + 28px + 6px); left: var(--gutter); z-index: 35; font-size: var(--fz-microcopy); font-weight: 500; letter-spacing: var(--nav-tracking); text-transform: uppercase; text-decoration: none; color: var(--fg-muted); transition: color var(--t-base); } @media (hover: hover) { #sD .cs-back:hover { color: var(--fg); } } #sD .cs-back:focus-visible { color: var(--fg); } /* BR-10: global hairline ring applies */ /* Mobile: the body scrolls, and the figures below are full-bleed light images β€” a fixed back link ends up sitting on top of them. Pin it to the hero instead so it scrolls away with the cover. (The global wordmark stays fixed; that's site chrome shared with every other scene.) */ @media (max-width: 1099px) { #sD .cs-main { position: relative; } #sD .cs-back { position: absolute; } /* CS-5 mobile tail (2026-08-14): the link floats on the dark hero in both themes, so light mode borrows the dark theme's muted (matching the wordmark/burger treatment in index.html β€” chrome over the hero reads the same in either theme). Absolute β†’ it scrolls away with the cover, so a static swap covers its whole visible life. */ body.light-mode #sD .cs-back { color: #8b8e94; } @media (hover: hover) { body.light-mode #sD .cs-back:hover { color: #e5e5e5; } } body.light-mode #sD .cs-back:focus-visible { color: #e5e5e5; } } /* ---------------- CS-7 A β€” desktop floating chrome (Jacky 2026-08-21) ---- The CS-6 frosted BAR is retired: the translucent blur band read old-school, and it was the site's only boxed surface β€” against the "no visible borders anywhere" brand language. The chrome (wordmark Β· theme Β· burger, order unchanged) now floats directly on the content, like every other scene. The .cs-topbar element stays but becomes a top FADE MASK β€” a --bgβ†’transparent gradient so content dissolves as it approaches the chrome: no edge, no box. Three states, driven by the same body classes as before: Β· over the hero (body.cs-hero-zone): a DARKβ†’transparent scrim β€” r2 (Jacky 2026-08-21): the Splunkbase hero is BRIGHT at the top, so the light chrome drowned with nothing under it; the classic photo treatment (black fading to transparent) puts it back. Ink-black (#01050E), not --bg β€” it sits on artwork, dark in both themes, matching the chrome's dark-ink borrow (index.html). Β· reading, scrolling up: the --bg fade mask β€” content dissolves into the page ground as it approaches the chrome Β· reading, scrolling down (body.cs-bar-away): everything retreats The two gradients live on ::before/::after and CROSSFADE on the zone flip (a background swap would jump-cut at the hero edge). */ /* MOBILE AUDIT r2 (Jacky 2026-08-27): the fade mask was desktop-only, so on a phone the icons floated bare on the running text and collided with it ("desktop ζœ‰ε€‹ι€ι€εœ°ε˜… shadow 什 icon ε””ζœƒεŒε…§ζ–‡ι‡η–ŠοΌŒζ‰‹ζ©Ÿε†‡ε’—"). The whole treatment now runs at every width β€” same two crossfading layers, same three states, one height. 120 is not arbitrary on the phone either: the icons' hit boxes end at y=68, and this gradient is ~70% opaque there β€” the same dissolve desktop already has under its chrome. */ #sD .cs-topbar { display: block; position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 34; /* under the global chrome riding it */ pointer-events: none; transition: opacity var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1); } #sD .cs-topbar::before, #sD .cs-topbar::after { content: ''; position: absolute; inset: 0; transition: opacity var(--t-base) ease; } #sD .cs-topbar::before { /* hero scrim: ink-black β†’ transparent */ background: linear-gradient(to bottom, rgba(1, 5, 14, 0.55) 0%, rgba(1, 5, 14, 0.26) 55%, transparent 100%); opacity: 0; } #sD .cs-topbar::after { /* page fade mask: --bg β†’ transparent */ background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 55%, transparent 100%); opacity: 1; } body.cs-hero-zone #sD .cs-topbar::before { opacity: 1; } body.cs-hero-zone #sD .cs-topbar::after { opacity: 0; } /* CS-6 r2 behaviour kept: scroll down = retreat (with the chrome, via index.html); scroll up = return. case.js drives cs-bar-away from .cs-main's scroll direction on desktop and from the body scroller on phones (MOBILE AUDIT). */ body.cs-bar-away #sD .cs-topbar { opacity: 0; } @media (min-width: 1100px) { /* CS-6 r2 (Jacky 2026-08-13): the BACK TO WORK link stays out β€” desktop navigation is the burger (full menu) + wordmark (home); the mobile hero-pinned link below 1100 is untouched. Markup stays for mobile. */ #sD .cs-back { display: none; } } /* ---------------- CS-7 r3 β€” case chrome: project name Β· TOC Β· close ---- From Jacky's old portfolio's case nav (2026-08-21): left = wordmark, hairline divider, project name; right = section links (click β†’ smooth scroll, scrollspy highlights the current one) Β· theme Β· X back to Work. The X replaces the burger inside the case (his old site's pattern β€” wordmark goes home, X goes back). Desktop-only; mobile handling is an open question (tracked in BACKLOG), the mobile chrome is untouched. */ #sD .cs-projname { display: none; } /* ── CS-11 (Jacky 2026-08-26): contents on narrow screens ────── Wherever the TOC row has no room, a contents icon opens the SAME .cs-toc nav as a small dropdown panel (body.cs-toc-open, toggled in case.js) β€” scrollspy highlight and the smooth anchor scroll are the one binding, reused. r2: the row needs ~1440px to clear the lockup (Jacky's iPad-landscape overlap), so the DROPDOWN serves everything below 1440, and the row is a >=1440 luxury. */ #sD .cs-toc-btn { position: fixed; z-index: 45; /* CS-11 r3: the mobile case bar β€” grid (0), theme (+46), contents (+92); the burger retires in scene-d at every width (index.html). BR-9 44px-box + 2px-seam pitch. */ top: 24px; right: calc(var(--gutter) - 8px + 92px); width: 44px; height: 44px; padding: 0; /* BR-9 hit area */ display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; /* r4 (Jacky): ONE rail colour system across all three bar icons β€” rest muted, hover/focus full ink (the theme toggle already did). */ color: var(--fg-muted); transition: color var(--t-base), transform var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1); } /* r2: the grid icon joins the mobile bar too β€” the old "← Back to work" text link retires, one back-affordance across every width. r3 (Jacky): on MOBILE grid takes the RIGHTMOST slot; theme sits second, contents third. (CS-15 flipped the DESKTOP order β€” see the β‰₯1100 block: theme rightmost there, matching the homepage corner.) */ #sD .cs-close { position: fixed; z-index: 45; top: 24px; right: calc(var(--gutter) - 8px); width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--fg-muted); transition: color var(--t-base), transform var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { #sD .cs-toc-btn:hover, #sD .cs-close:hover { color: var(--fg); } } #sD .cs-toc-btn:focus-visible, #sD .cs-close:focus-visible { color: var(--fg); } /* The contents icon reads as ACTIVE while its panel is open. */ body.cs-toc-open #sD .cs-toc-btn { color: var(--fg); } #sD .cs-back { display: none; } /* CS-11 r2: retired for the grid icon */ @media (min-width: 1100px) { /* CS-7 r4 (Jacky 2026-08-22): the lockup reads as a SUB-BRAND, not a caption β€” the name matches the wordmark's type exactly (same 20px size, same case, same tracking; weight one step lighter, 500 vs 600, for hierarchy), the divider gets real presence (1.5px at a 35% ink mix, full 24px line-box height β€” the old 1px --line hairline read underweight next to the 600 wordmark), and the spacing compacts to --space-xs each side (was ~22px + 24px). Left offset = wordmark's measured 90.4px end + 12px. */ #sD .cs-projname { display: flex; align-items: center; position: fixed; z-index: 35; top: 32px; height: 24px; /* the wordmark's exact line box */ left: calc(var(--gutter) + 102px); /* wordmark end (90.4px) + --space-xs */ padding-left: var(--space-xs); border-left: 1.5px solid color-mix(in srgb, var(--fg) 35%, var(--bg)); /* r7 trial (Jacky 2026-08-22): name at Regular β€” the 500 still read bold next to the muted colour; hierarchy now rests on colour + weight both (600 wordmark / 400 name). */ font-size: var(--fz-sub-head); font-weight: 400; letter-spacing: .02em; /* mirror .site-wordmark */ color: var(--fg-muted); } #sD .cs-toc { display: flex; align-items: center; gap: var(--space-lg); position: fixed; z-index: 35; top: 32px; height: 28px; /* CS-9 r10: gutter + 117 puts the last label's end a full 36px (the TOC's own item gap) before the moon icon β€” one rhythm across the whole bar (Jacky: ε΄ι‚Š gap 跟 item spacing δΈ€ζ¨£ι—Š). */ right: calc(var(--gutter) + 117px); } #sD .cs-toc a { /* CS-9 r10 (Jacky 2026-08-22): sentence case, not caps β€” easier to read; the caps tracking goes with it. */ font-size: var(--fz-microcopy); font-weight: 500; line-height: 1; text-decoration: none; color: var(--fg-muted); transition: color var(--t-base); } #sD .cs-toc a:hover { color: var(--fg); } /* Rail language: the current section lights up + bolds. */ #sD .cs-toc a.is-active { color: var(--fg); font-weight: 700; } #sD .cs-close { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 40; /* CS-10 (Jacky 2026-08-25): the X retires β€” this button is now the back-to-Work GRID icon. CS-15 (Jacky 2026-08-26, revising CS-11 r3 on desktop only): THEME reclaims the desktop rightmost slot (matching the homepage corner); grid sits second (+56), contents third (+112). Mobile keeps grid rightmost. */ top: 24px; right: calc(var(--gutter) - 8px + 56px); width: 44px; height: 44px; padding: 0; /* BR-9 hit area */ background: none; border: 0; cursor: pointer; color: var(--fg-muted); transition: color var(--t-base); } #sD .cs-close:hover { color: var(--fg); } /* CS-9 r10: the r6 icon-drift retires β€” both side gaps now match the TOC's 36px item rhythm via BOX positions (theme slot +10px, TOC offset re-derived), icons back at their box centres. */ /* Sections land clear of the floating chrome on anchor jumps. */ /* CS-9 L-sweep: 96 = the chrome-inset composition (wordmark top 32 + 28px row + lg breathing) β€” same formula the mobile flow inset uses, so it tracks the chrome instead of being a stray literal. */ #sD .cs-sec { scroll-margin-top: calc(32px + 28px + var(--space-lg)); } /* Over the hero: bright ink in both themes (the CS-7 r2 lesson β€” muted grey drowns on the artwork's bright corners even with the scrim). CS-9 r11 (Jacky 2026-08-22): the flat all-#e5e5e5 killed the rest/hover/active ladder β€” no hover feedback over the hero. The ladder returns SHIFTED UP into hero ink: rest a softer bright grey (still well clear of --fg-muted, which was what drowned), hover #e5e5e5, current #fff β€” the same interaction grammar as in-page. */ body.cs-hero-zone:not(.menu-open) #sD .cs-projname { color: #e5e5e5; } body.cs-hero-zone:not(.menu-open) #sD .cs-toc a, body.cs-hero-zone:not(.menu-open) #sD .cs-close, body.cs-hero-zone:not(.menu-open) #sD .cs-toc-btn { color: #b3b8c0; } body.cs-hero-zone:not(.menu-open) #sD .cs-toc a:hover, body.cs-hero-zone:not(.menu-open) #sD .cs-toc a:focus-visible, body.cs-hero-zone:not(.menu-open) #sD .cs-close:hover, body.cs-hero-zone:not(.menu-open) #sD .cs-close:focus-visible, body.cs-hero-zone:not(.menu-open) #sD .cs-toc-btn:hover, body.cs-hero-zone:not(.menu-open) #sD .cs-toc-btn:focus-visible, body.cs-hero-zone.cs-toc-open:not(.menu-open) #sD .cs-toc-btn { color: #e5e5e5; } body.cs-hero-zone:not(.menu-open) #sD .cs-toc a.is-active { color: #ffffff; } body.cs-hero-zone #sD .cs-projname { border-left-color: rgba(229, 229, 229, .45); } /* Retreat with the rest of the chrome while reading (CS-6 r2 behaviour). */ #sD .cs-projname, #sD .cs-toc, #sD .cs-close { transition: color var(--t-base), transform var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1); } body.cs-bar-away:not(.menu-open) #sD .cs-projname, body.cs-bar-away:not(.menu-open) #sD .cs-toc, body.cs-bar-away:not(.menu-open) #sD .cs-close { transform: translateY(-88px); opacity: 0; pointer-events: none; } } /* ── CS-11 r2: the dropdown panel serves EVERYTHING below 1440 ── Placed after the >=1100 chrome block on purpose: in 1100–1439 the row styles above still match, and these later equal-specificity rules re-shape the same nav into the panel. */ @media (max-width: 1439px) { #sD .cs-toc { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); position: fixed; z-index: 44; top: 76px; right: calc(var(--gutter) - 8px); height: auto; min-width: 200px; padding: var(--space-md); background: var(--bg); border-radius: 2px; box-shadow: 0 16px 40px -14px rgba(1, 5, 14, .4); /* WK-8 soft shadow */ opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--t-base) cubic-bezier(0.22, 1, 0.36, 1), transform var(--t-base) cubic-bezier(0.22, 1, 0.36, 1); } body.cs-toc-open #sD .cs-toc { opacity: 1; transform: none; pointer-events: auto; } #sD .cs-toc a { font-size: var(--fz-body); font-weight: 400; line-height: 1.2; text-decoration: none; color: var(--fg-muted); transition: color var(--t-base); } #sD .cs-toc a.is-active { color: var(--fg); font-weight: 700; } /* The panel is a --bg surface β€” the hero-zone ink borrow and the bar-away retreat are ROW concerns; the panel keeps page ink and simply closes on scroll (case.js). */ body.cs-hero-zone:not(.menu-open) #sD .cs-toc a { color: var(--fg-muted); } body.cs-hero-zone:not(.menu-open) #sD .cs-toc a.is-active { color: var(--fg); } body.cs-bar-away:not(.menu-open) #sD .cs-toc { transform: translateY(-8px); opacity: 0; pointer-events: none; } /* Retreat with the reading chrome. */ body.cs-bar-away:not(.menu-open) #sD .cs-toc-btn { transform: translateY(-88px); opacity: 0; pointer-events: none; } } /* MOBILE AUDIT (2026-08-26): below 1100 the grid icon had no retreat rule β€” the β‰₯1100 block above owns that, alongside the projname and the TOC row β€” so once the phone scroll started driving cs-bar-away (case.js) the contents icon would have slid away while the grid icon stayed behind, alone. It leaves with the rest of the bar. */ @media (max-width: 1099px) { body.cs-bar-away:not(.menu-open) #sD .cs-close { transform: translateY(-88px); opacity: 0; pointer-events: none; } } @media (min-width: 1100px) and (max-width: 1439px) { /* Desktop chrome, no room for the row: the contents icon takes the THIRD desktop slot (theme 0, grid +56, contents +112 β€” 56 pitch). */ #sD .cs-toc-btn { right: calc(var(--gutter) - 8px + 112px); } } @media (min-width: 1440px) { #sD .cs-toc-btn { display: none; } } /* Exit: the case's TEXT chrome fades with the rest of the scene's cascade (the bar ICONS take the fast swap below β€” CS-15 r4). */ #sD.cs-exiting .cs-projname, #sD.cs-exiting .cs-toc { animation: cs-fade-out var(--cs-exit-dur) cubic-bezier(0.22, 1, 0.36, 1) both; } /* r6 (Jacky 2026-08-27): at β‰₯1440 the TOC row leaves WITH the grid icon on the fast clock β€” measured: grid was gone in 200ms while the row trailed on the 2450ms cascade. Same duration + easing as the icons' swap-out, so the two curves match; the projname stays on the slow cascade (it's the case's identity, it dissolves with the content). */ @media (min-width: 1440px) { #sD.cs-exiting .cs-toc { animation: cs-fade-out var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1) both; } } /* ── CS-15 (Jacky 2026-08-26): the bar icons SWAP, not fade ────────── r4 (Jacky's reference: transitions.dev icon-swap): a scale+blur crossfade β€” the outgoing icon shrinks and blurs away, the incoming one grows and sharpens in a .12s beat later. Both legs run AT THE interaction, not on the 2450ms content cascade β€” the old lonely fade-then-empty-slot read was Jacky's complaint. Entry: grid + contents swap in when the scene mounts (the renderer rebuilds the buttons per case, so caseβ†’case replays too); on mobile the burger's swap-out (index.html) crosses them in the shared slot; on desktop the theme icon joins via the same keyframes (index.html). From-only keyframes + backwards fill: the animation releases to natural style when done, so it never pins transform/opacity/filter over the transitions the buttons rely on (hero ladder, bar retreat, gate dim). Exit (r2 lesson kept): one rule covers BOTH icons at every width, at the specificity that beats the entry rule while .active is still on. `both` fill holds them gone for the rest of the cascade; the burger returns meanwhile via body.cs-leaving (index.html). */ /* r6 (Jacky 2026-08-27): entry swap-in runs BELOW 1440 only. At β‰₯1440 the TOC is the visible row, which fades in purely with the scene β€” measured curves showed the icons' own delay+swap multiplying under the scene fade and LAGGING the row (grid 0.00 vs row 0.34 at 200ms). β‰₯1440 the icons now ride the scene fade too: one curve, perfect sync. Below 1440 the TOC is the contents ICON β€” it and the grid share this rule, so they were already sample-identical there, and the burger crossfade keeps its snap. */ @media (max-width: 1439px) { #sD.scene.active .cs-close, #sD.scene.active .cs-toc-btn { animation: cs-icon-swap-in var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1) .12s backwards; } } #sD.cs-exiting.scene.active .cs-close, #sD.cs-exiting.scene.active .cs-toc-btn { animation: cs-icon-swap-out var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes cs-icon-swap-in { from { opacity: 0; transform: scale(.55); filter: blur(4px); } } /* r3 lesson: no explicit `from` β€” start from each element's own state. */ @keyframes cs-icon-swap-out { to { opacity: 0; transform: scale(.55); filter: blur(4px); } } /* ---------------- hero β€” full-screen cover, chrome floats above ------- */ #sD .cs-hero { position: relative; height: 100svh; min-height: 480px; background: var(--neutral); overflow: hidden; } /* Mobile hero is a width-fit band, not a full-viewport cover (Jacky, 2026-08-08); desktop keeps the 100svh stage. MUST sit after the base rule: equal specificity, source order decides. MOBILE AUDIT r4 (2026-08-27): the band was hard-coded 16/9, which fit the two Splunk covers and cropped every other hero (SOLO's 2.22:1 video lost ~20% of its width). It now takes --cs-hero-ar, the art's own ratio, set per case by case-render.js; 16/9 stays the fallback for a hero with no dimensions. */ @media (max-width: 1099px) { #sD .cs-hero { height: auto; aspect-ratio: var(--cs-hero-ar, 16 / 9); min-height: 0; } } #sD .cs-hero-img { /* The Figma cover is a single 16:9 fill on the 1440Γ—900 frame, centred and cropped β€” so a plain centred cover matches it exactly. The art is dark at the bottom-left, which is where the title sits. */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The hero carries no type (the Figma cover is image-only), so the page's H1 is visually hidden β€” the document still has exactly one heading for assistive tech and for search. */ #sD .cs-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------------- shared text roles ---------------- */ #sD .cs-eyebrow { font-size: var(--fz-microcopy); font-weight: 500; letter-spacing: var(--nav-tracking); text-transform: uppercase; color: var(--fg-muted); } #sD .cs-eyebrow--strong { color: var(--fg); } /* CS-9 r8 (Jacky 2026-08-22): section eyebrows recede to the About-page label grey (--fg-faint, same as PROJECT DETAILS) β€” the white read as competing with the title; hierarchy wants the label quiet. */ #sD .cs-sec-head .cs-eyebrow { color: var(--fg-faint); } #sD p { font-size: var(--fz-body); line-height: var(--csp-prose-lh); color: var(--fg-muted); } /* Super-wide tier (β‰₯2560) β€” body copy grows 16β†’20px to stay proportional, the same scene-scoped bump About uses (about.css) and the homepage does for .sa-greet-sub. It matters more here than anywhere: the stream is a fixed 760px, so on a 2560/3440 display the article is already a narrow ribbon. The micro tier rides along, 14β†’16 (decided 2026-08-05): at this width 14px captions / stat labels / aside body read too small next to the 20px body β€” 16 keeps the contrast ratio between the two tiers. Scene-scoped var override ONLY β€” the global nav rail shares --fz-microcopy and must not move (see BACKLOG RES-1). */ @media (min-width: 2560px) { #sD { --fz-body: 20px; --fz-microcopy: 16px; /* The container scales WITH the type β€” everything Γ—1.25 (= 20/16), so the measure lands exactly where 1440 put it: 750px Γ· 20px ≑ 600px Γ· 16px chars-per-line, figures grow 25%, and the page stops feeling like a narrow ribbon in a sea of margin (Jacky, 2026-08-05). */ --cs-stream: 950px; --cs-col: 750px; --cs-bleed: 1375px; /* CS-9: the rhythm rides the same Γ—1.25 β€” spacing/type ratio holds. */ --csp-scale: 1.25; } } #sD p strong, #sD p .cs-k { font-weight: 500; color: var(--fg); } /* ---------------- project details ---------------- Inline meta block at the top of section 01 (Figma 1164:3729, 2026-08-06) β€” the v4 right-hand rail retired in its favour, the CONTENTS toc retired outright. Label column 120px, caps faint; values body on --fg. Sits in the text column, so it scales with --cs-col at β‰₯2560 like everything else. */ #sD .cs-details { width: 100%; max-width: var(--cs-col); margin-inline: auto; /* CS-9 r9 (Jacky 2026-08-22): the meta block reads as its OWN section β€” the sec-gap to Background below was too close. The margin tops the section flex's --csp-sec-gap up to the mobile stream's section beat (2xl 72); desktop overrides below to the full S1 section-gap. */ margin-bottom: calc(var(--space-2xl) - var(--csp-sec-gap)); } @media (min-width: 1100px) { #sD .cs-details { margin-bottom: calc(var(--csp-section-gap) - var(--csp-sec-gap)); } } #sD .cs-details-head, #sD .cs-details dt { font-size: var(--fz-microcopy); letter-spacing: var(--nav-tracking); text-transform: uppercase; color: var(--fg-faint); } #sD .cs-details dl { display: flex; flex-direction: column; gap: var(--space-2xs); /* CS-9: was sm */ margin: var(--space-sm) 0 0; } #sD .cs-detail { display: flex; align-items: baseline; gap: var(--space-2xs); } #sD .cs-detail dt { width: 120px; flex: none; } /* MOBILE AUDIT (2026-08-26): 120px is 38% of the 318px phone measure, and it pushed TEAM to four lines. 96 still holds the longest label (DURATION) on one line and hands the values 24px back. */ @media (max-width: 736px) { #sD .cs-detail dt { width: 96px; } } #sD .cs-detail dd { margin: 0; font-size: var(--fz-body); line-height: 1.5; color: var(--fg); } /* The 600px text column, centred inside the 760px stream. */ #sD .cs-sec-head, #sD .cs-prose, #sD .cs-item, #sD .cs-step, #sD .cs-pair, #sD .cs-chips, #sD .cs-bullets, #sD .cs-work-text, #sD .cs-stats { width: 100%; max-width: var(--cs-col); margin-inline: auto; } /* ---------------- the stream ---------------- Mobile: gutter-padded flow. Desktop: a 760px measure centred in the viewport, sections on the --space-3xl (144px) rhythm. */ #sD .cs-body { display: flex; flex-direction: column; gap: var(--space-2xl); /* Side padding on phones = THE SITE GUTTER. History: 36px (--space-lg, a rung above the gutter) from 2026-08-08, when the prose wanted more air off the screen edge; Jacky 2026-08-27, reading on the phone, called it too wide β€” the figures were paying for it (SOLO's process shots sat at 153px). He tried 8, then 16 (not on the ladder), then compared 18 against About and picked ABOUT's: "about page ε₯½ε•², 24". So the case stops having a gutter of its own and joins the other scenes on var(--gutter) β€” one vertical line down the whole site on a phone. 390 - 48 = 342px of content: figures gain 7.5% on the old 36, and the prose measure sits at ~43 characters, mid-band. */ padding: var(--space-2xl) var(--gutter) 0; } @media (min-width: 1100px) { #sD .cs-body { width: var(--cs-stream); max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; gap: var(--csp-section-gap); padding: var(--csp-section-gap) 0 0; } } /* Sections. */ #sD .cs-sec { position: relative; display: flex; flex-direction: column; gap: var(--csp-sec-gap); } #sD .cs-sec-head { display: flex; flex-direction: column; gap: var(--csp-head-gap); } #sD .cs-sec-title { font-size: var(--csp-fz-section); /* CS-9 r4 (Jacky 2026-08-22): Bold retired β€” the case's display type follows the About grammar, Regular with hierarchy carried by SIZE (About statement / pull / work titles are all Regular already). */ font-weight: 400; line-height: 1; color: var(--fg); } /* CS-9 r14 (Jacky 2026-08-25): second-level heading β€” a sechead with size:'sm' labels a passage inside a section (e.g. the interview quotes), so it steps down to the deliverable-title tier instead of the full 40. */ #sD .cs-sec-title--sm { font-size: var(--csp-fz-work); } /* CS-9 r15 (Jacky 2026-08-25): a full-size sechead that arrives mid-section is a NEW MOVEMENT ("Our solution", "Key insights", "Prioritization"…) β€” it must breathe like a section start, echoing the beat before "The challenge", not sit one ordinary sec-gap under the previous figure. The margin tops the section flex gap up to the full section beat. Passage-level (--sm) heads are exempt β€” they stay close to their text. */ #sD .cs-sec > :not(.cs-details) + .cs-sec-head:not(.cs-sec-head--sm) { margin-top: calc(var(--csp-section-gap) - var(--csp-sec-gap)); } /* CS-20 r2 (Jacky): a HEADED pull is a movement of its own β€” folding the sechead into the quote (CS-20) lost the 144px movement beat the head carried, and the vision unit glued itself to its neighbours. The beat returns on BOTH sides of the unit. */ #sD .cs-sec > * + .cs-pull--headed, #sD .cs-sec > .cs-pull--headed + * { /* (1,2,0) on the sibling: the later #sD .cs-fig { margin: 0 } (1,1,0) was zeroing the below-beat at the tie-break. */ margin-top: calc(var(--csp-section-gap) - var(--csp-sec-gap)); } /* All running prose is --fg-muted (inherited from the #sD p rule above); --fg is reserved for headings and other "active" type. The Figma frame binds section 01's body to --fg, but following that left the section bodies brighter than the deliverable prose on the SAME page β€” Jacky's call (2026-08-03) is that body copy is body copy. */ #sD .cs-prose > p + p { margin-top: var(--csp-para-gap); } /* Sub-items (the three challenges, the two reflections). */ #sD .cs-items { display: flex; flex-direction: column; gap: var(--csp-items-gap); } #sD .cs-item h3 { font-size: var(--csp-fz-subhead); font-weight: 500; line-height: 1.2; color: var(--fg); margin-bottom: var(--csp-item-gap); } /* Numbered process list (items variant:'steps') β€” number chip in a left column, title + copy aligned beside it. Chip ground is --neutral; the digit uses the .wk-tile-idx recipe (65% fg toward the surface it sits on) so it clears AA on --neutral in both themes (BR-3 rule: never faint/muted on neutral). */ #sD .cs-items--steps { gap: var(--space-sm); } /* tighter than items β€” was md (CS-9), lg before that */ #sD .cs-step { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--space-md); align-items: start; } #sD .cs-step-num { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--neutral); border-radius: 6px; /* Jacky 2026-08-15: softer than the site's 2px */ outline: 1px solid var(--line); outline-offset: -1px; font-size: var(--fz-body); font-weight: 500; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--fg) 65%, var(--neutral)); } /* CS-9 r27 (Jacky 2026-08-26): image ↔ point pairs. Same skeleton as the step row above (fixed left column, text beside it), but the left column holds a picture instead of a number chip β€” for lists where each point has its own image and a 4-up strip above the copy makes the reader guess the pairing. The media keeps the figure ring via .cs-fig-media. */ #sD .cs-pairs { display: flex; flex-direction: column; gap: var(--csp-items-gap); } #sD .cs-pair { display: grid; grid-template-columns: 96px 1fr; column-gap: var(--space-md); /* Centred, not top-aligned (Jacky 2026-08-26): the text block is much shorter than the square, so top-alignment left each row hanging off the picture's top edge. The step rows keep align-items:start β€” there the left column is a 36px chip, not a 160px image. */ align-items: center; } #sD .cs-pair .cs-fig-media { border-radius: 6px; } /* matches the step chip */ #sD .cs-pair-text h3 { font-size: var(--csp-fz-subhead); font-weight: 500; line-height: 1.2; color: var(--fg); margin-bottom: var(--csp-item-gap); } @media (min-width: 1100px) { #sD .cs-pair { grid-template-columns: 160px 1fr; column-gap: var(--space-lg); } } /* CS-9 r26 (Jacky 2026-08-26): method chips β€” a research-activity list is a SET of labels, not a sentence, so it leaves the prose voice and becomes a row of chips. Same recipe as the step number chip above (--neutral ground, 6px radius, hairline ring, 65%-mixed ink per the BR-3 rule that nothing faint/muted sits on --neutral) at label size, so the two read as one family. */ #sD .cs-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; /* margin-BLOCK only β€” the 600px column rule above owns margin-inline (auto), and a blanket `margin: 0` here silently killed the centring, parking the row on the 760 stream edge instead of the text column. */ margin-block: 0; padding: 0; } #sD .cs-chip { padding: var(--space-2xs) var(--space-xs); background: var(--neutral); border-radius: 6px; outline: 1px solid var(--line); outline-offset: -1px; font-size: var(--fz-microcopy); font-weight: 500; line-height: 1.2; color: color-mix(in srgb, var(--fg) 65%, var(--neutral)); } #sD .cs-step-text h3 { font-size: var(--csp-fz-subhead); font-weight: 500; line-height: 1.2; color: var(--fg); /* tighter than the step rhythm (Jacky 2026-08-18); tokenised in the CS-9 L-sweep β€” was a stray 6px, 2xs is the same intent on the scale */ margin-bottom: var(--space-2xs); /* top-aligned with the chip, per Jacky's Figma ref */ } /* Deliverable blocks (01–04): title + prose, then their figures. */ #sD .cs-work { position: relative; display: flex; flex-direction: column; gap: var(--csp-work-gap); } /* CS-9: work ↔ work composes ON TOP of the section flex's sec-gap β€” margin = works-gap βˆ’ sec-gap, so the total between deliverables is exactly --csp-works-gap whatever either knob does. */ #sD .cs-work + .cs-work { margin-top: calc(var(--csp-works-gap) - var(--csp-sec-gap)); } /* CS-9 r12 (Jacky 2026-08-22, internship pass): a work that FOLLOWS a figure gets the same beat β€” the section-intro figure sat one sec-gap above the first deliverable and read cramped. */ #sD .cs-fig + .cs-work { margin-top: calc(var(--csp-works-gap) - var(--csp-sec-gap)); } #sD .cs-work-text { display: flex; flex-direction: column; gap: var(--csp-worktext-gap); } /* CS-9 r4 (Jacky 2026-08-22, option A): deliverable titles read too small at sub-head 20 β€” they step up to --fz-mid 30 at REGULAR, the About-page grammar (hierarchy by size, not weight): 40 section β†’ 30 work β†’ 16 body. */ #sD .cs-work-text h3 { font-size: var(--csp-fz-work); font-weight: 400; line-height: 1.2; color: var(--fg); } /* At-a-glance metrics β€” 2Γ—2 on mobile, 4-up from tablet, left-aligned. */ #sD .cs-stats { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } @media (min-width: 737px) { #sD .cs-stats { grid-template-columns: repeat(4, 1fr); } /* A stats row is usually four items wide. SOLO's Key insights has only two, and in a fixed four-column grid those sat in the left half with their labels crushed into five-line columns while the right half stood empty. Give a two-item row half-width columns instead. Cases with three or four stats don't match this and are untouched. */ #sD .cs-stats:has(li:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } } #sD .cs-stat-num { display: block; font-size: var(--csp-fz-stat); font-weight: 700; line-height: 1; color: var(--fg); } #sD .cs-stat-label { display: block; font-size: var(--fz-microcopy); color: var(--fg-faint); margin-top: var(--csp-statlabel-gap); } /* CS-9 r28 (Jacky 2026-08-26): variant:'card' β€” each metric gets its own container so the number and its label read as one element. r2: the ring-only first cut read too faintly against the page ("ι€ζ˜ŽεΊ•ε°±ι‘―εΎ—ε₯½ noticeable"), so the card takes the --neutral ground the chips and the step chip already use. That ground costs a re-ink β€” BR-3 bars --fg-faint from --neutral β€” so the label switches to the shipped 65%-toward-the- surface mix (the .wk-tile-idx recipe, 6.07:1 dark / 5.49:1 light). The number is full --fg, unaffected. Ring + 6px radius stay, same as the figure box and the chips. */ #sD .cs-stats--card { gap: var(--space-sm); } /* One card per row on phones β€” at 150px wide the labels wrapped to six ragged lines, which is exactly the looseness the card was added to fix. */ @media (max-width: 736px) { #sD .cs-stats--card { grid-template-columns: 1fr; } } #sD .cs-stats--card li { padding: var(--space-md); background: var(--neutral); border-radius: 6px; outline: 1px solid var(--line); outline-offset: -1px; } /* CS-9 r28: bullets β€” short parallel findings that were running as standalone paragraphs. Dot marker in the faint ink, hanging indent so the text block still lines up with the column edge. */ #sD .cs-stats--card .cs-stat-label { color: color-mix(in srgb, var(--fg) 65%, var(--neutral)); } #sD .cs-bullets { list-style: none; display: flex; flex-direction: column; gap: var(--csp-para-gap); margin-block: 0; padding: 0; } #sD .cs-bullets li { position: relative; padding-left: var(--space-md); font-size: var(--fz-body); line-height: 1.5; color: var(--fg-muted); } #sD .cs-bullets li::before { content: ""; position: absolute; left: 2px; top: calc(0.75em - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--fg-faint); } /* ---------------- pull quote (the standalone beat) ---------------- Figma sets it in an ExtraLight cut we don't have β€” Hyperlegible ships Regular/Medium/Bold β€” so Regular carries the "light display" read, with the design's negative tracking kept as an em value so it scales with the step. --fz-mid is 16px on small mobile, too small to read as display type, so it's floored at 20px (same deliberate deviation as the Figma mobile frame). */ #sD .cs-pull { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } #sD .cs-pull p { max-width: 720px; text-align: center; font-size: max(20px, var(--fz-mid)); font-weight: 400; line-height: 1.25; letter-spacing: -0.05em; color: var(--fg); } /* CS-20: the pull's own label β€” eyebrow grammar, centred, and the quote tucks up under it (the flex gap stays for the dividers). Restated at (1,2,0): the generic `#sD .cs-pull p` quote rule (1,1,1) would otherwise hand the label the 30px quote size and tight tracking. */ #sD .cs-pull .cs-pull-label { text-align: center; color: var(--fg-faint); font-size: var(--fz-microcopy); font-weight: 500; letter-spacing: var(--nav-tracking); } #sD .cs-pull-label + p { margin-top: calc(-1 * var(--space-2xs)); } /* Short centred rule (Figma: 60Γ—1). */ #sD .cs-divider { width: 60px; height: 1px; border: 0; margin: 0; background: var(--line); } /* Quoted voice inside a deliverable (the engineer's line). CS-9 r2 (Jacky 2026-08-22): the old bold left-set block retired β€” the renderer now emits it with the .cs-pull grammar above (centred light display between the short rules), so the two quote voices read as one family. .cs-quote remains on the element purely as a scoping hook. r6: same BREATHING as the standalone pull too β€” a pulled-out beat deserves section-level air wherever it sits. The work flex already contributes --csp-work-gap, so the margin tops it up to exactly --csp-section-gap on both sides (the works-gap composition trick). */ #sD .cs-quote { margin-block: calc(var(--csp-section-gap) - var(--csp-work-gap)); } /* CS-9 r14 (Jacky 2026-08-25): ADJACENT quotes are one group β€” the section-level breathing belongs around the group, not between its members. The second quote pulls back both quotes' facing margins (its own top + the first one's bottom), netting the pair to just the section's ordinary flex gap; its top rule hides so the pair shares the first quote's bottom divider instead of stacking two. */ #sD .cs-quote + .cs-quote { margin-top: calc(var(--csp-work-gap) - var(--csp-section-gap)); } #sD .cs-quote + .cs-quote .cs-divider:first-child { display: none; } /* ---------------- margin asides ---------------- Inline callout by default (thin rule + small type). At β‰₯1440 there's room for the 220px side lane plus its 48px gap plus the page gutter, so the note breaks out of the measure and sits in the margin beside the passage it belongs to. */ #sD .cs-note { width: 100%; max-width: var(--cs-col); margin-inline: auto; border-top: 1px solid var(--line); padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); /* CS-9: was xs */ } #sD .cs-note h3 { font-size: var(--fz-sub-head); font-weight: 500; line-height: 1.2; color: var(--fg); } #sD .cs-note p { font-size: var(--fz-microcopy); color: var(--fg-muted); } @media (min-width: 1440px) { #sD .cs-note { position: absolute; top: 0; width: 220px; max-width: none; margin-inline: 0; border-top: 0; padding-top: 0; } #sD .cs-note--right { left: calc(100% + var(--space-xl)); } #sD .cs-note--left { right: calc(100% + var(--space-xl)); } } /* Super-wide: the lanes ride the micro type (14β†’16 up top). 220px was measured for 14px body β€” at 16px it drops to a four-word line. 260 β‰ˆ 220 Γ— 16/14, so the measure (chars per line) lands back where the 1440 design put it. (Must sit AFTER the β‰₯1440 rule β€” same specificity, source order decides.) */ @media (min-width: 2560px) { #sD .cs-note { width: 275px; } /* 220 Γ— 1.25 β€” same scale as the stream */ } /* ---------------- figures ---------------- Full 760 stream width; placeholders keep their aspect via --ar. */ #sD .cs-fig { position: relative; margin: 0; width: 100%; } #sD .cs-fig-media { position: relative; width: 100%; aspect-ratio: var(--ar, 16 / 9); background: var(--neutral); border-radius: 2px; display: flex; align-items: center; justify-content: center; overflow: hidden; /* CS-4 F5: a hairline edge so figures keep their boundary when the art is near the page ground (dark Figma frames on the navy bg; white shots on paper in light mode). Outline, not border: paints OVER the image edge, zero layout shift, and it follows the radius. --line is theme-aware. */ outline: 1px solid var(--line); outline-offset: -1px; } #sD .cs-fig-media img, #sD .cs-fig-media video, #sD .cs-fig-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } /* Breakout figure β€” art whose full frame must show uncropped, wider than the stream (first: Fig 04, a 2.37:1 flow map). The media box carries the image's TRUE aspect via --ar and breaks out of the 760 measure to 1100px, centred on the stream (which is itself viewport-centred), capped by the page gutters. Below 1100 figures are already full column width and the true --ar means nothing crops β€” no extra rule needed. Caption stays at stream width. */ @media (min-width: 1100px) { #sD .cs-fig--bleed .cs-fig-media { --bleed-w: min(var(--cs-bleed), calc(100vw - 2 * var(--gutter))); width: var(--bleed-w); margin-left: calc((100% - var(--bleed-w)) / 2); } } /* Comparison row (CS-9 r16, Jacky 2026-08-25): two full figures side by side on desktop β€” old vs new, each keeping its own caption. Stacks in the mobile flow (a plain sec-gap column). --bleed variant widens the ROW to the breakout measure, same math as .cs-fig--bleed, so each half still reads at a useful size. */ #sD .cs-figrow { display: grid; gap: var(--csp-sec-gap); width: 100%; } @media (min-width: 1100px) { #sD .cs-figrow { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-sm); align-items: start; } #sD .cs-figrow--bleed { --bleed-w: min(var(--cs-bleed), calc(100vw - 2 * var(--gutter))); width: var(--bleed-w); margin-left: calc((100% - var(--bleed-w)) / 2); } } /* Phone row (CS-17) β€” a flat row of phone screens, one centred short note under each (the GM workflow analysis). The screens are transparent device art: NO skeleton ground, NO hairline β€” the neutral slab showing through the transparent corners was the bug this replaces (.cs-fig--art logic). Desktop: four across on the breakout measure; below 1100 they stack, each capped to a hand-size width (mobile cut pending Jacky's review). */ #sD .cs-phones { display: grid; gap: var(--csp-items-gap, var(--space-lg)); width: 100%; } #sD .cs-phone { margin: 0; min-width: 0; } #sD .cs-phone-media { position: relative; width: 100%; aspect-ratio: var(--ar, 9 / 19.5); background: transparent; } #sD .cs-phone-media img { width: 100%; height: 100%; object-fit: contain; display: block; } #sD .cs-phone-cap { margin-top: var(--space-sm); text-align: center; } #sD .cs-phone-cap h3 { font-size: var(--fz-body); font-weight: 500; line-height: 1.2; color: var(--fg); margin: 0 0 var(--space-2xs); } #sD .cs-phone-cap p { font-size: var(--fz-microcopy); color: var(--fg-muted); margin: 0; max-width: 36ch; margin-inline: auto; } @media (max-width: 1099px) { #sD .cs-phone-media { max-width: 320px; margin-inline: auto; } /* CS-17 r2 (Jacky 2026-08-30): stacked, each screen+note must read as its OWN beat β€”γ€ŒδΈ€εΉ…εœ–ε­—δΏ‚δΈ€ε€‹ section,ιš”ε€šε°‘ε°‘ε…ˆδΏ‚η¬¬δΊŒε€‹γ€. The base gap resolves to --csp-items-gap (~16px, sub-item scale), which glued the four into one strip. Section-scale air between units. */ #sD .cs-phones { gap: var(--space-2xl); } } @media (min-width: 1100px) { #sD .cs-phones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); align-items: start; /* slight per-screen AR differences β€” tops align */ --bleed-w: min(var(--cs-bleed), calc(100vw - 2 * var(--gutter))); width: var(--bleed-w); margin-left: calc((100% - var(--bleed-w)) / 2); } } /* Scroll strip (CS-9 r20, Jacky 2026-08-25): a figure whose image keeps a READABLE height and runs wider than the page β€” the original site's journey-map treatment. The media box becomes a horizontal scroller spanning gutter to gutter; the frame cut off at the right edge is the cue (Instagram-style) that there is more to pan through. The image escapes the --ar box model entirely: natural aspect at a fixed height. */ #sD .cs-fig--scroll .cs-fig-media { aspect-ratio: auto; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; display: block; background: none; /* r22: the native scrollbar is chrome the composition never asked for β€” the strip's affordances are the cut-off frame, the grab cursor + drag (case.js), and the edge arrows. */ scrollbar-width: none; cursor: grab; /* r23 (Jacky): the CS-4 F5 figure hairline goes too β€” a panning surface isn't a framed figure; nothing should draw its box. */ outline: none; border-radius: 0; } #sD .cs-fig--scroll .cs-fig-media::-webkit-scrollbar { display: none; } #sD .cs-fig--scroll .cs-fig-media.is-drag { cursor: grabbing; user-select: none; } /* Slider-style edge arrows (r22): quiet round scrims over the strip's viewport edges, vertically centred; .is-off fades one out at its end of the run. Desktop-only β€” touch swipes the strip natively. */ #sD .cs-strip-btn { display: none; position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; align-items: center; justify-content: center; color: var(--fg); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: opacity var(--t-base) cubic-bezier(0.22, 1, 0.36, 1); } #sD .cs-strip-btn.is-off { opacity: 0; pointer-events: none; } #sD .cs-fig--scroll .cs-fig-media img { /* Back into flow β€” the base .cs-fig-media img is absolutely positioned for the aspect-box model, which would leave this scroller 0-tall. */ position: static; inset: auto; height: var(--cs-strip-h, 320px); width: auto; max-width: none; object-fit: unset; display: block; } /* MOBILE AUDIT (2026-08-26): a DENSE figure β€” a slide or a multi-screen walkthrough whose own body text has to be read β€” is illegible once it is squeezed into the 318px phone measure (GM's four-phone workflow put each screen at 65px wide). On phones only it borrows the scroll strip's model: readable fixed height, pan sideways, the cut-off frame as the cue. Desktop is untouched β€” there the figure has the full stream and reads fine. */ @media (max-width: 736px) { #sD .cs-fig--dense .cs-fig-media { aspect-ratio: auto; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; display: block; background: none; scrollbar-width: none; outline: none; border-radius: 0; } #sD .cs-fig--dense .cs-fig-media::-webkit-scrollbar { display: none; } #sD .cs-fig--dense .cs-fig-media img { position: static; inset: auto; height: var(--cs-strip-h, 320px); width: auto; max-width: none; object-fit: unset; display: block; } } @media (min-width: 1100px) { #sD .cs-fig--scroll .cs-fig-media { --strip-w: calc(100vw - 2 * var(--gutter)); width: var(--strip-w); margin-left: calc((100% - var(--strip-w)) / 2); /* CS-9 r21 (Jacky): like the original site, the strip's content STARTS at the stream's edge β€” the scroller still spans gutter to gutter, but the image leads in (and runs out) at the column, so the beginning reads composed and the overflow reads scrollable. (Padding %s resolve against the fig's stream-width box.) */ padding-inline: calc((var(--strip-w) - 100%) / 2); } #sD .cs-fig--scroll .cs-fig-media img { height: var(--cs-strip-h-desk, 480px); } /* Arrows sit at the SCROLLER's viewport edges, not the stream's β€” the fig declares the same breakout width so the offsets resolve. */ #sD .cs-fig--scroll { --strip-w: calc(100vw - 2 * var(--gutter)); } #sD .cs-strip-btn { display: flex; transform: translateY(-50%); } #sD .cs-strip-btn--prev { left: calc((100% - var(--strip-w)) / 2 + var(--space-sm)); } #sD .cs-strip-btn--next { right: calc((100% - var(--strip-w)) / 2 + var(--space-sm)); } } /* ── CS-13 (Jacky 2026-08-26): floating art ───────────────────── Transparent collages (FigJam boards, sticky-note clusters, system sheets) are ART ON THE PAGE, not framed shots β€” the fig-media's --neutral skeleton ground and the CS-4 F5 hairline showed through their transparent areas as a phantom panel. The `art` flag clears both; the collage floats straight on the page ground. */ #sD .cs-fig--art .cs-fig-media { background: none; outline: none; } /* Carousel slides paint their own --neutral ground β€” inside an art figure (the GM before/after boards) they clear it too. */ /* CS-19 r3 (Jacky 2026-08-30): the outline goes too β€” CS-13 dropped the slide's neutral ground for art decks but left the hairline, so transparent slides sat in an EMPTY RING(γ€Œζœ‰ε€‹ζ‘†,ζœ‰ε°‘ε°‘ε₯‡ζ€ͺ」). Art floats frameless, like every other art figure; opaque decks keep their ring. */ #sD .cs-fig--art .cs-slide { background: none; outline: none; } /* (CS-12 r1's ink-plate idea lived here for one round β€” Jacky's verdict was that a backing plate reads alien; the fix shipped instead as per-theme image variants (`light` twin on the img data, swapped in case.js), keeping the figures transparent in both themes.) */ /* (The r20 "pairs" grid lived here for one round β€” Jacky's actual ask was the margin-note grammar, so figrow + per-fig .cs-note carries it and the pairs vocabulary was retired before ever shipping.) */ /* Video scrub β€” a quiet progress line over the bottom of a figure video. Hidden until hover (always faintly there on touch, where hover doesn't exist); drag or click to seek, arrow keys when focused. White line over a faint player-style scrim, fixed colours NOT --fg: footage varies from white product UI to near-black Figma canvas, so the bar must carry its own contrast in both themes. */ #sD .cs-vid-scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; /* player-style scrim so the line reads on any footage β€” Fig 02's bottom edge is near-black Figma canvas, where an ink bar simply vanishes */ background: linear-gradient(to top, rgba(1, 5, 14, .40), transparent); opacity: 0; transition: opacity var(--t-base); cursor: pointer; /* MOBILE AUDIT r4 (2026-08-27): was touch-action:none, which swallowed vertical swipes that happened to start on this 34px strip β€” the page simply refused to scroll there. pan-y gives the page back its vertical gesture; horizontal ones still reach case.js, which starts scrubbing only once the finger has moved sideways. */ touch-action: pan-y; } #sD .cs-fig-media:hover .cs-vid-scrub, #sD .cs-vid-scrub:focus-visible, #sD .cs-vid-scrub.is-scrubbing { opacity: 1; } @media (hover: none) { #sD .cs-vid-scrub { opacity: .6; } } /* BR-10: scrub keeps the global hairline focus ring */ #sD .cs-vid-track { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .30); } #sD .cs-vid-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; border-radius: 2px; background: rgba(255, 255, 255, .95); } #sD .cs-fig-tag { font-size: var(--fz-microcopy); color: var(--fg-faint); text-align: center; padding: 0 var(--space-md); } /* Slide carousel (deck figures) β€” the media wrapper loses its aspect box; each slide carries the deck aspect + the hairline ring. 86% slides leave the next one peeking as the swipe affordance. */ #sD .cs-fig-media--carousel { aspect-ratio: auto; background: none; outline: none; overflow: visible; display: block; } #sD .cs-carousel { display: flex; gap: var(--space-xs); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; } #sD .cs-carousel::-webkit-scrollbar { display: none; } #sD .cs-carousel.is-drag { cursor: grabbing; scroll-snap-type: none; } #sD .cs-slide { flex: 0 0 86%; aspect-ratio: var(--ar, 16 / 9); background: var(--neutral); border-radius: 2px; outline: 1px solid var(--line); outline-offset: -1px; display: flex; align-items: center; justify-content: center; overflow: hidden; scroll-snap-align: start; } /* Slides carry their own img β€” undo the media box's absolute stacking (that rule targets single-image figures; here each slide is the frame). */ #sD .cs-slide img { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; display: block; } /* figgrid β€” rows of media cells sharing one caption. Row template comes from the data (--cols); single-cell rows span full width. */ #sD .cs-figgrid { display: grid; gap: var(--space-xs); } #sD .cs-figgrid-row { display: grid; grid-template-columns: var(--cols, 1fr); gap: var(--space-xs); } /* MOBILE AUDIT (2026-08-26): --cols is authored for the 760 stream, so a 3-up row landed at 98px cells and a 4-up at 71px on a 390 phone β€” thumbnails too small to read as photographs. The rows dissolve (display: contents) and every cell joins ONE 2-column grid, which also avoids the ragged holes a per-row collapse would leave (SOLO's 3+3 portraits become 3 clean rows). A row holding a single surface is a full-width plate (the sketch page, each deliverable slide) and keeps the whole measure. */ @media (max-width: 736px) { #sD .cs-figgrid { grid-template-columns: repeat(2, 1fr); } #sD .cs-figgrid-row { display: contents; } #sD .cs-figgrid-row > :only-child { grid-column: 1 / -1; } } /* Carousel controls β€” counter + arrows, right-aligned under the strip. Arrows are desktop-only (touch swipes); quiet hairline buttons, muted glyph that lights to --fg on hover, dimmed when parked at an end. */ #sD .cs-slide-ctrl { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); } #sD .cs-slide-ctrl .cs-slide-count { margin-top: 0; } #sD .cs-slide-btn { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--fg-muted); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); } @media (min-width: 1100px) { #sD .cs-slide-btn { display: inline-flex; } } #sD .cs-slide-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--fg); } #sD .cs-slide-btn:disabled { opacity: 0.4; cursor: default; } /* Figure lightbox β€” click a case image to view it near-viewport-size. Scrim leans on --bg so both themes read as the site's own ground. */ #sD .cs-fig-media img, #sD .cs-slide img, #sD .cs-phone-media img { cursor: zoom-in; } .cs-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 94%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--t-base) cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear var(--t-base); cursor: zoom-out; } .cs-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-base) cubic-bezier(0.22, 1, 0.36, 1); } .cs-lightbox-img { max-width: 92vw; max-height: 92vh; border-radius: 2px; outline: 1px solid var(--line); outline-offset: -1px; transform: scale(0.985); transition: transform var(--t-base) cubic-bezier(0.22, 1, 0.36, 1); cursor: zoom-in; /* CS-18: the overview invites a second stage */ } .cs-lightbox.is-open .cs-lightbox-img { transform: scale(1); } /* CS-18 r2: transparent art enlarges FRAMELESS β€” the hairline drew an empty ring round see-through figures. case.js sets .is-art from the source figure (.cs-fig--art / .cs-phone-media); opaque photos keep the ring (a dark shot on the dark scrim needs the edge). */ .cs-lightbox.is-art .cs-lightbox-img { outline: none; border-radius: 0; } /* CS-18 β€” ZOOM stage: the caps come off (the image renders at the largest asset's natural size) and the overlay becomes the scroller. flex + margin:auto keeps a smaller-than-viewport axis centred while leaving every overflowing edge reachable (grid/flex centring alone clips the top-left of overflow). Pan = drag / wheel / touch (case.js). */ .cs-lightbox.is-zoom { overflow: auto; } .cs-lightbox.is-zoom .cs-lightbox-img { max-width: none; max-height: none; margin: auto; cursor: zoom-out; } @media (prefers-reduced-motion: reduce) { .cs-lightbox, .cs-lightbox-img { transition: none; transform: none; } } .cs-lightbox-close { /* fixed, not absolute β€” it must hold its corner while the zoom stage scrolls */ position: fixed; top: var(--space-md); right: var(--space-md); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--fg-muted); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .cs-lightbox-close:hover { color: var(--fg); border-color: var(--fg); } /* Edge click-zones β€” invisible strips over the carousel's sides. Click pages the deck; the cursor is a directional arrow (dark disc + white chevron, readable over any slide). Desktop only; hidden at the ends. */ #sD .cs-slide-zone { position: absolute; top: 0; bottom: 0; width: 16%; display: none; z-index: 2; } #sD .cs-slide-zone--prev { left: 0; cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2213%22%20fill%3D%22rgba%281%2C5%2C14%2C0.55%29%22%2F%3E%3Cpath%20d%3D%22M18.5%2010%2012.5%2016l6%206%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 16, w-resize; } #sD .cs-slide-zone--next { right: 0; cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2213%22%20fill%3D%22rgba%281%2C5%2C14%2C0.55%29%22%2F%3E%3Cpath%20d%3D%22m13.5%2010%206%206-6%206%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 16, e-resize; } @media (min-width: 1100px) { #sD .cs-slide-zone { display: block; } #sD .cs-slide-zone[hidden] { display: none; } } #sD .cs-slide-count { font-size: var(--fz-microcopy); color: var(--fg-faint); font-variant-numeric: tabular-nums; text-align: right; margin-top: var(--space-xs); } #sD .cs-fig-cap { font-size: var(--fz-microcopy); color: var(--fg-faint); text-align: center; margin-top: var(--csp-cap-gap); } /* ---------------- other projects + footer ---------------- Replaced NEXT PROJECT (2026-08-30, Jacky): instead of one blind hero name, the case ends on a scrollable row of the OTHER Work tiles β€” thumbnail + the tile's own caption grammar (16px Medium name, 14px muted meta), so the reader picks by sight. Cards are sized to a FRACTIONAL fit β€” (track βˆ’ 3 gaps) / 3.5 on desktop, 82% on phones β€” so a half card always peeks at the edge whatever the viewport: the peek IS the scroll affordance (same reasoning as the About carousel), which is why the scrollbar is hidden. Width rides the bleed measure like the footer β€” the strip is end-of-page chrome, not a paragraph. */ #sD .cs-others { width: 100%; /* r2 (Jacky): the label sat right on the pictures β€” give the lockup the case's own section beat instead of the item gap. */ display: flex; flex-direction: column; gap: var(--csp-sec-gap); } @media (min-width: 1100px) { /* Break out of the stream to the bleed line, the same widening-off-own- box move the footer and .cs-fig--bleed use. */ #sD .cs-others { --bleed-w: min(var(--cs-bleed), calc(100vw - 2 * var(--gutter))); width: var(--bleed-w); margin-left: calc((100% - var(--bleed-w)) / 2); } } /* r3 (Jacky): full ink, not the faint eyebrow grey β€” this label is the end-of-page invitation, not another section marker. r5: and Sentence case at sub-head size, dropping the caps/tracked eyebrow grammar entirely β€” 20px Medium, the same tier as the desktop greeting label. */ #sD .cs-others-title { margin: 0; font-size: var(--fz-sub-head); font-weight: 500; color: var(--fg); text-align: center; } #sD .cs-others-view { position: relative; } /* anchors the .cs-slide-zone overlays */ #sD .cs-others-track { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; /* peek = the affordance */ -webkit-overflow-scrolling: touch; } #sD .cs-others-track::-webkit-scrollbar { display: none; } #sD .cs-other { flex: 0 0 auto; width: 82%; /* phones: one card + peek */ scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-2xs); text-decoration: none; color: var(--fg); } @media (min-width: 737px) { /* r2 (Jacky): bigger cards β€” 2 full + half peek instead of 3.5-up. Keep the divisor's fractional part near .5: it is what leaves a HALF card at the edge (a near-whole card reads as a layout bug, a sliver disappears). */ #sD .cs-other { width: calc((100% - 3 * var(--space-md)) / 2.5); } } #sD .cs-other-media { display: block; width: 100%; aspect-ratio: 4 / 3; /* one ratio for the row β€” the grid's mixed --wk-ar would make a ragged strip */ border-radius: var(--radius-sm); /* small card, small corner (WK-9's own rule) */ overflow: hidden; background: var(--neutral); } #sD .cs-other-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--t-base); } #sD .cs-other-name { font-size: var(--fz-body); font-weight: 500; margin-top: var(--space-2xs); } #sD .cs-other-meta { font-size: var(--fz-microcopy); color: var(--fg-muted); } @media (hover: hover) { #sD .cs-other:hover .cs-other-media img { opacity: .8; } } /* ---------------- footer ---------------- CS-8 r2. The complaint the spike was answering was never really alignment β€” the old footer was two orphan lines (name + email) left floating under a full-bleed NEXT PROJECT block, with no structure and no boundary. So this gives it both, and otherwise stays quiet: Β· ONE hairline top rule, the case's existing editorial hairline (the same language as .cs-divider). No surface, no box β€” CS-7 retired the site's last boxed surface on purpose. Β· Width: the BREAKOUT line (--cs-bleed), the widest measure the case already owns β€” it is where .cs-fig--bleed figures sit. r2 first tried the text column and Jacky read it as too narrow, and he was right: the footer is the end of the PAGE, not another paragraph, so it has no reason to sit on the reading measure. Widening it is not a loss of alignment either β€” the case carries three alignment lines already (text 750, stream 950 for figures + NEXT PROJECT, bleed 1375) and this picks the outermost. Same min() as the bleed figures, so it never outgrows the page gutters. Β· TWO groups, not three: where you can find him, and how to reach him. 'Last updated' is gone β€” see the renderer note. Β· Rhythm comes from the CS-9 --csp-* beats, so it scales with the rest of the case at >=2560 instead of holding raw space tokens. Β· Colour: the email is the ONLY celadon thing here. BR-11 made colour the affordance back when the footer held exactly one link; five celadon links would make the accent decorative again. Socials take the rail grammar instead β€” muted at rest, --fg on hover β€” and keep BR-2's draw-in underline, which is the hover feedback either way. */ #sD .cs-footer { width: 100%; max-width: var(--cs-col); margin-inline: auto; /* mobile: the flow measure */ border-top: 1px solid var(--line); /* NO margin-top: .cs-body is a flex column already spaced on --csp-section-gap, so adding the beat again doubled it to 360px and left a hole under NEXT PROJECT. The rule sits on the section beat; the padding is the band's own inner air. */ padding-top: var(--csp-sec-gap); display: flex; flex-direction: column; gap: var(--csp-sec-gap); /* Clears the fixed bottom-left theme toggle. */ padding-bottom: calc(var(--space-3xl) + var(--space-md)); } #sD .cs-footer-group { display: flex; flex-direction: column; gap: var(--csp-item-gap); } #sD .cs-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--csp-item-gap); } #sD .cs-footer a { align-self: start; font-size: var(--fz-body); text-decoration: none; } /* MOBILE AUDIT (2026-08-26): the footer links were 19.5px-tall targets 8px apart β€” under WCAG 2.5.8's 24px minimum, and a 24px circle centred on one overlapped its neighbour, so the spacing exception did not save it either. Two moves, phones only. (1) The list opens to --space-md, which alone clears the spacing exception (centres 43.5px apart). (2) A transparent ::after gives each link a 44px touch box β€” done with a pseudo, NOT padding, because BR-2's draw-in underline paints at the bottom of the PADDING box and any padding-bottom would push the underline off the text. The boxes now abut instead of overlapping, so a tap can no longer land on the wrong link. */ @media (max-width: 736px) { #sD .cs-footer-links { gap: var(--space-md); } #sD .cs-footer-links a, #sD .cs-footer-mail { position: relative; } #sD .cs-footer-links a::after, #sD .cs-footer-mail::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } } /* The footer label follows the section eyebrows CS-9 r8 sent to faint β€” it is a quiet signpost, not a heading. */ #sD .cs-footer .cs-eyebrow { color: var(--fg-faint); } #sD .cs-footer-tag { font-size: var(--fz-body); font-weight: 500; color: var(--fg); } /* Socials are navigation, not the action β€” the nav rail's rest/hover pair. Specificity has to clear BR-11's '#sD .cs-footer a', which lives in the inline