/* design-system/case-study/case-tokens.css · GENERATED by design-system/build.py from case-study/case-tokens.src.css
   (comments stripped) + the case-only component token block. Edit the sources, not this file. */
@font-face {
font-family: "Newsreader";
src: url("../../assets/fonts/case/newsreader-latin-opsz-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist";
src: url("../../assets/fonts/case/geist-latin-wght400-600.woff2") format("woff2");
font-weight: 400 600; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[data-surface="case"], html[data-cs-chrome="reader"] {
--cs-font-display: "Newsreader", Georgia, "Times New Roman", serif;
--cs-font-body: "Geist", var(--font-ui, system-ui), system-ui, sans-serif;
--cs-bg:      var(--sand-200, #F3EFE9);
--cs-surface: #FBF9F6;
--cs-text:    #1A1917;
--cs-muted:   #5F5A52;
--cs-accent:  var(--coral-700, #B63518);
--cs-rule:    #D9CFC2;
--cs-font-ui: var(--cs-font-body);
--cs-font-mono: var(--font-mono, ui-monospace, monospace);
--cs-accent-fill: var(--coral-500, #FF5A36);
--cs-on-accent: var(--white, #FFFFFF);
--cs-inverse-bg: #2A2622;
--cs-inverse-text: var(--sand-200, #F3EFE9);
--cs-inverse-muted: #BDB4A7;
--cs-inverse-accent: var(--coral-300, #FFA28C);
--cs-canvas: #E6E0D7;
--cs-canvas-dot: rgba(26, 25, 23, .09);
--cs-placeholder: var(--coral-700, #B63518);
--cs-chrome-font: var(--cs-font-body);
--cs-chrome-size: 13px;
--cs-chrome-size-sm: 12px;
--cs-chrome-text: var(--cs-text);
--cs-chrome-muted: var(--cs-muted);
--cs-chrome-bg: color-mix(in srgb, var(--cs-surface) 92%, transparent);
--cs-chrome-hover: color-mix(in srgb, var(--cs-text) 7%, transparent);
--cs-chrome-pressed: color-mix(in srgb, var(--cs-text) 12%, transparent);
--cs-chrome-select: var(--cs-accent-fill);
--cs-chrome-shadow: 0 1px 2px rgba(26, 25, 23, .06), 0 4px 14px rgba(26, 25, 23, .07);
--cs-slide-h1: 104px;   --cs-slide-h1-lh: .98;
--cs-slide-h2: 64px;    --cs-slide-h2-lh: 1.04;
--cs-slide-h3: 30px;    --cs-slide-h3-lh: 1.25;
--cs-slide-lede: 34px;  --cs-slide-lede-lh: 1.35;
--cs-slide-body: 28px;  --cs-slide-body-lh: 1.45;
--cs-slide-small: 22px; --cs-slide-small-lh: 1.45;
--cs-slide-label: 18px;
--cs-slide-metric: 120px;
--cs-tracking-display: -0.01em;
--cs-tracking-label: 0.08em;
--cs-radius-frame: var(--radius-md, 12px);
--cs-radius-media: var(--radius-lg, 16px);
--cs-radius-pill: var(--radius-pill, 999px);
--cs-slide-pad: 96px;
--cs-ease-camera: var(--ease-spring-smooth, cubic-bezier(.2, .8, .2, 1));
--cs-dur-camera: 720ms;
--cs-ease-ui: var(--ease-effects, ease-out);
--cs-dur-ui: var(--dur-effects, 231ms);
--cs-z-present: 200000;
--cs-t-h1: clamp(2.5rem, 1.35rem + 4.4cqi, 4.25rem);
--cs-t-h1-lh: 1.02;
--cs-t-h2: clamp(1.875rem, 1.25rem + 2.6cqi, 3rem);
--cs-t-h2-lh: 1.08;
--cs-t-h3: clamp(1.125rem, 1.05rem + .35cqi, 1.3125rem);
--cs-t-h3-lh: 1.3;
--cs-t-lede: clamp(1.1875rem, 1.05rem + .7cqi, 1.5rem);
--cs-t-lede-lh: 1.45;
--cs-t-body: clamp(1.0625rem, 1rem + .2cqi, 1.1875rem);
--cs-t-body-lh: 1.62;
--cs-t-small: .9375rem;
--cs-t-small-lh: 1.5;
--cs-t-label: .75rem;
--cs-t-metric: clamp(3rem, 2rem + 5cqi, 5.5rem);
--cs-t-quote: clamp(1.625rem, 1.2rem + 2cqi, 2.5rem);
--cs-read-measure: 40rem;
--cs-read-wide: 66rem;
--cs-rail-w: 13.5rem;
--cs-space-2xs: var(--space-2xs, .375rem);
--cs-space-xs: var(--space-xs, .5rem);
--cs-space-s: var(--space-s, .75rem);
--cs-space-m: var(--space-m, 1rem);
--cs-space-l: var(--space-l, 1.5rem);
--cs-space-xl: var(--space-xl, 2rem);
--cs-space-2xl: var(--space-2xl, 3rem);
--cs-space-block: clamp(3.5rem, 2.5rem + 4cqi, 6.5rem);
--cs-gutter: var(--gutter, 1.25rem);
--cs-nav-clear: calc(var(--nav-h, 64px) + 28px);
--cs-tap: var(--tap-min, 44px);
--cs-focus: var(--focus-ring, 0 0 0 3px rgba(255, 90, 54, .55));
--cs-radius-card: var(--radius-md, 12px);
--cs-shadow-card: var(--shadow-1, 0 1px 2px rgba(26, 25, 23, .06));
--cs-ok: var(--cs-text);
--cs-no: var(--cs-muted);
--cs-highlight: color-mix(in srgb, var(--cs-accent-fill) 9%, var(--cs-surface));
--cs-glass-fill: linear-gradient(180deg, rgb(255 255 255 / .68), rgb(243 239 233 / .60));
--cs-glass-solid: #F7F4EF;
--cs-glass-blur: blur(20px) saturate(170%);
--cs-glass-rim: inset 0 1px 0 rgb(255 255 255 / .78), inset 0 -1px 0 rgb(26 25 23 / .04);
--cs-glass-shadow: 0 8px 30px rgb(26 25 23 / .06), 0 1px 2px rgb(26 25 23 / .05);
--cs-scrim: rgb(26 25 23 / .40);
--cs-plate: linear-gradient(180deg, #ECE6DD, #E1D8CC);
--cs-nav-h: 56px;
font-synthesis: none;
font-optical-sizing: auto;
}
[data-surface="case"][data-cs-theme="dark"], html[data-cs-chrome="reader"][data-cs-theme="dark"] {
--cs-bg:      #171513;
--cs-surface: #211E1B;
--cs-text:    var(--sand-200, #F3EFE9);
--cs-muted:   #B3AA9C;
--cs-accent:  var(--coral-300, #FFA28C);
--cs-rule:    #3A352F;
--cs-canvas:  #0E0D0C;
--cs-canvas-dot: rgba(243, 239, 233, .07);
--cs-inverse-bg: var(--sand-200, #F3EFE9);
--cs-inverse-text: #1A1917;
--cs-inverse-muted: #5F5A52;
--cs-inverse-accent: var(--coral-700, #B63518);
--cs-placeholder: var(--coral-300, #FFA28C);
--cs-highlight: color-mix(in srgb, var(--cs-accent-fill) 14%, var(--cs-surface));
--cs-glass-fill: linear-gradient(180deg, rgb(33 30 27 / .72), rgb(23 21 19 / .66));
--cs-glass-solid: #211E1B;
--cs-plate: linear-gradient(180deg, #2A2622, #211E1B);
--cs-glass-rim: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 -1px 0 rgb(0 0 0 / .2);
--cs-chrome-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
}
@media (prefers-reduced-motion: reduce) {
[data-surface="case"] { --cs-dur-camera: 260ms; --cs-ease-camera: ease-out; }
}

/* ===== BEGIN GENERATED design-system bundle (case pages only) · python3 design-system/build.py · do not edit by hand ===== */
/* ===== SOURCE: design-system/case-study/components/reader.css ===== */
@layer tokens {
html[data-cs-chrome="reader"], html[data-surface="case"] {
--rd-bar-h: var(--cs-nav-h);
--rd-bar-radius: 16px;
--rd-bar-pad-x: 20px;
--rd-bar-fill: var(--cs-glass-fill);
--rd-bar-fill-solid: var(--cs-glass-solid);
--rd-bar-blur: var(--cs-glass-blur);
--rd-bar-shadow: var(--cs-glass-rim), var(--cs-glass-shadow), 0 0 0 1px rgb(26 25 23 / .05);
--rd-bar-ink: var(--cs-text);
--rd-bar-max: calc(var(--cs-read-wide) + var(--cs-rail-w) + 4.5rem);
--rd-bar-title-size: 17px;
--rd-bar-logo: 26px;
--rd-bar-link-face: var(--cs-font-body);
--rd-bar-link-size: 14px;
--rd-bar-link-weight: 500;
--rd-bar-link-current-fill: var(--cs-chrome-pressed);
--rd-bar-link-hover-fill: var(--cs-chrome-hover);
--rd-bar-menu-fill: var(--cs-surface);
--rd-bar-menu-shadow: inset 0 0 0 1px var(--cs-rule), var(--cs-chrome-shadow);
--rd-bar-move: transform .28s var(--cs-ease-camera), opacity .18s var(--cs-ease-ui);
--rd-bar-tuck: translateY(calc(-100% - max(28px, env(safe-area-inset-top, 0px))));
--rd-glass-hc-ring: inset 0 0 0 1px var(--cs-text);
--rd-footer-face-display: var(--pub-font-display);
--rd-footer-face-ui: var(--pub-font-ui);
--rd-footer-h-weight: 560;
--rd-footer-h-tracking: -0.02em;
}
html .cs-reader {
--rd-focus: var(--cs-focus);
--rd-rail-w: var(--cs-rail-w);
--rd-read-wide: var(--cs-read-wide);
--rd-grid-gap: clamp(2.5rem, 4vw, 4.5rem);
--rd-grid-pad: clamp(1.5rem, 3vw, 3rem);
--rd-back-face: var(--cs-chrome-font);
--rd-back-size: var(--cs-chrome-size);
--rd-back-weight: 500;
--rd-back-gap: 6px;
--rd-back-min-h: 32px;
--rd-back-ink: var(--cs-muted);
--rd-back-ink-hover: var(--cs-text);
--rd-back-top-hit: 44px;
--rd-back-top-pull: -16px 0 -12px;
--rd-back-top-pad-end: 12px;
--rd-back-underline-offset: 3px;
--rd-progress-h: 3px;
--rd-progress-z: 100000;
--rd-progress-track: transparent;
--rd-progress-fill: var(--cs-accent-fill);
--rd-progress-rail-track: var(--cs-rule);
--rd-progress-rail-fill: var(--cs-accent-fill);
--rd-progress-rail-w: 1px;
--rd-progress-rail-inset: 4px;
--rd-progress-dock-h: 2px;
--rd-progress-dock-inset: 18px;
--rd-progress-dock-bottom: 5px;
--rd-progress-dock-track: var(--cs-rule);
--rd-progress-dock-fill: var(--cs-accent);
--rd-progress-sheet-h: 3px;
--rd-progress-sheet-radius: 2px;
--rd-progress-sheet-track: var(--cs-rule);
--rd-progress-sheet-fill: var(--cs-accent);
--rd-progress-sheet-size: 12px;
--rd-toc-pad-top: calc(var(--cs-nav-clear) + var(--cs-space-xl));
--rd-toc-pad-bottom: 24px;
--rd-toc-title-size: var(--cs-chrome-size);
--rd-toc-title-weight: 600;
--rd-toc-title-leading: 1.35;
--rd-toc-title-space: 18px 0 14px;
--rd-toc-link-face: var(--cs-chrome-font);
--rd-toc-link-size: var(--cs-chrome-size);
--rd-toc-link-leading: 1.3;
--rd-toc-link-gap: 10px;
--rd-toc-link-pad: 6px 8px 6px 14px;
--rd-toc-link-radius: 6px;
--rd-toc-link-ink: var(--cs-muted);
--rd-toc-link-ink-current: var(--cs-text);
--rd-toc-link-weight-current: 600;
--rd-toc-link-hover-fill: var(--cs-chrome-hover);
--rd-toc-num-face: var(--cs-font-mono);
--rd-toc-num-size: 11px;
--rd-toc-num-weight: 500;
--rd-toc-num-ink: var(--cs-muted);
--rd-toc-num-ink-current: var(--cs-accent);
--rd-toc-foot-space: 18px;
--rd-toc-foot-gap: 10px;
--rd-toc-foot-size: var(--cs-chrome-size-sm);
--rd-sheet-max: 32rem;
--rd-sheet-max-h: 80vh;
--rd-sheet-pad: 8px 8px calc(16px + env(safe-area-inset-bottom, 0px));
--rd-sheet-radius: 18px 18px 0 0;
--rd-sheet-fill: var(--cs-surface);
--rd-sheet-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
--rd-sheet-head-pad: 8px 8px 8px 14px;
--rd-sheet-head-size: 15px;
--rd-sheet-close-size: 20px;
--rd-sheet-close-hit: 44px;
--rd-sheet-item-min-h: 48px;
--rd-sheet-item-pad: 14px;
--rd-sheet-item-gap: 12px;
--rd-sheet-item-radius: 10px;
--rd-sheet-item-size: 16px;
--rd-sheet-item-current-fill: var(--cs-chrome-pressed);
--rd-sheet-back-pad: 10px 14px;
--rd-sheet-glass-inset: 12px;
--rd-sheet-glass-max: 26rem;
--rd-sheet-glass-max-h: min(78dvh, 40rem);
--rd-sheet-glass-pad: 6px 6px 10px;
--rd-sheet-glass-radius: 28px;
--rd-sheet-glass-fill: var(--cs-glass-fill);
--rd-sheet-glass-blur: blur(20px) saturate(170%);
--rd-sheet-glass-shadow: var(--cs-glass-rim), 0 24px 60px rgb(26 25 23 / .22), 0 0 0 1px rgb(26 25 23 / .06);
--rd-sheet-origin: 30px 100%;
--rd-sheet-from: translateY(14px) scale(.92);
--rd-sheet-move: transform .34s var(--cs-ease-camera), opacity .2s var(--cs-ease-ui);
--rd-sheet-glass-head-pad: 10px 6px 6px 16px;
--rd-sheet-glass-item-pad: 12px;
--rd-sheet-glass-item-min-h: 44px;
--rd-sheet-glass-item-size: 15px;
--rd-sheet-glass-item-radius: 14px;
--rd-sheet-glass-item-current-fill: color-mix(in srgb, var(--cs-surface) 80%, transparent);
--rd-sheet-glass-item-current-ring: inset 0 0 0 1px var(--cs-rule);
--rd-sheet-hover-fill: var(--cs-chrome-hover);
--rd-sheet-site-size: 15px;
--rd-sheet-site-pad: 10px 12px;
--rd-sheet-site-icon: 24px;
--rd-dock-inset: 12px;
--rd-dock-z: 9000;
--rd-dock-gap: 2px;
--rd-dock-pad: 4px;
--rd-dock-max: calc(100vw - 200px);
--rd-dock-fill: var(--cs-surface);
--rd-dock-border: 1px solid var(--cs-rule);
--rd-dock-radius: var(--cs-radius-pill);
--rd-dock-shadow: var(--cs-chrome-shadow);
--rd-dock-face: var(--cs-chrome-font);
--rd-dock-size: var(--cs-chrome-size);
--rd-dock-weight: 500;
--rd-dock-hide: translateY(calc(100% + 24px));
--rd-dock-btn-min: 40px;
--rd-dock-btn-pad: 0 12px;
--rd-dock-btn-gap: 8px;
--rd-dock-back-size: 17px;
--rd-dock-hover-fill: var(--cs-chrome-hover);
--rd-dock-pct-ink: var(--cs-muted);
--rd-dock-pct-size: var(--cs-chrome-size-sm);
--rd-dock-h: 48px;
--rd-dock-glass-max: min(19rem, calc(100vw - 196px));
--rd-dock-glass-fill: var(--cs-glass-fill);
--rd-dock-glass-blur: blur(18px) saturate(170%);
--rd-dock-glass-shadow: var(--cs-glass-rim), var(--cs-glass-shadow), 0 0 0 1px rgb(26 25 23 / .06);
--rd-dock-move: transform .28s var(--cs-ease-camera), opacity .18s var(--cs-ease-ui);
--rd-dock-open: scale(.96);
--rd-dock-toc-pad: 0 14px 0 6px;
--rd-dock-toc-gap: 10px;
--rd-dock-mark: 36px;
--rd-dock-mark-img: 22px;
--rd-dock-mark-fill: var(--cs-surface);
--rd-dock-mark-ring: inset 0 0 0 1px var(--cs-rule);
--rd-dock-label-weight: 600;
--rd-dock-menu-w: 16px;
--rd-dock-menu-h: 10px;
--rd-dock-menu-stroke: 1.5px;
--rd-zoom-gap: 32px;
--rd-zoom-img-radius: 6px;
--rd-zoom-plate: #fff;
--rd-zoom-close: 44px;
--rd-zoom-close-inset: 12px;
--rd-zoom-focus: 2px solid var(--cs-accent);
--rd-zoom-focus-offset: 3px;
--rd-end-rule: 1px solid var(--cs-rule);
--rd-end-gap: var(--cs-space-m);
--rd-end-link-pad: 0 18px;
--rd-end-link-gap: 8px;
--rd-end-link-ring: inset 0 0 0 1px var(--cs-rule);
--rd-end-link-primary-fill: var(--cs-inverse-bg);
--rd-end-link-primary-ink: var(--cs-inverse-text);
}
}
/* END case-study/components/reader.css */
/* ===== SOURCE: design-system/components/work-card.css ===== */
@layer tokens {
html .bento-card {
--wc-radius: var(--pub-r-card);
--wc-border: 0;
--wc-backdrop: none;
--wc-pad: 24px;
--wc-pad-sm: 20px;
--wc-bg: radial-gradient(circle at 50% 80%, var(--white) 0%, var(--tile-tint) 100%);
--wc-bg-hover: radial-gradient(circle at 50% 80%, var(--white) 0%, var(--tile-hover-tint) 100%);
--wc-shadow: var(--pub-e2);
--wc-shadow-hover: var(--pub-e2), 0 0 0 1px var(--cs-rule), 0 30px 60px -30px rgb(26 25 23 / .45);
--wc-tap-highlight: transparent;
--wc-art-inset: 2cqw;
--wc-art-gap: 12px;
--wc-art-bg: transparent;
--wc-art-fit: contain;
--wc-art-position: 50% 100%;
--wc-art-radius: 0;
--wc-art-shadow: none;
--wc-art-blend: normal;
--wc-cover-ratio: 1600 / 921;
--wc-cover-fit: cover;
--wc-cover-radius: 6px 6px 0 0;
--wc-cover-shadow: 0 0 0 1px rgb(26 25 23 / .08), 0 12px 30px rgb(26 25 23 / .16);
--wc-cover-zoom: 1.13;
--wc-cover-fit-height: calc(100% / var(--wc-cover-zoom));
--wc-plate-pad-top: clamp(10px, 3.5cqw, 18px);
--wc-plate-max: calc((100% + 2 * clamp(16px, 8cqw, 32px)) * .62);
--wc-logo-size: clamp(26px, 7.5cqw, 32px);
--wc-logo-filter: none;
--wc-logo-opacity: 1;
--wc-lockup-space: 12px;
--wc-name-face: var(--pub-font-ui);
--wc-name-weight: var(--weight-medium);
--wc-name-size: clamp(14px, 4.2cqw, 18px);
--wc-name-leading: 1;
--wc-name-tracking: -.01em;
--wc-name-color: #636366;
--wc-name-color-legacy: #6e6e73;
--wc-eyebrow-face: var(--cs-font-ui);
--wc-eyebrow-weight: var(--weight-semibold);
--wc-eyebrow-size: 11px;
--wc-eyebrow-leading: 1.2;
--wc-eyebrow-tracking: .08em;
--wc-eyebrow-case: uppercase;
--wc-eyebrow-color: var(--cs-accent);
--wc-eyebrow-gap: 6px;
--wc-eyebrow-space: 8px;
--wc-tags-space: 10px;
--wc-tags-rule: 1px solid var(--cs-rule);
--wc-tags-face: var(--cs-font-body);
--wc-tags-weight: var(--weight-medium);
--wc-tags-size: 12px;
--wc-tags-leading: 1.3;
--wc-tags-color: var(--cs-text);
--wc-tags-pad-y: 6px;
--wc-tags-pad-end: 12px;
--wc-tags-divider-gap: 10px;
--wc-title-face: var(--cs-font-display);
--wc-title-weight: var(--weight-regular);
--wc-title-size: clamp(1.5rem, 7.6cqw, 1.875rem);
--wc-title-leading: 1.04;
--wc-title-tracking: -.012em;
--wc-title-color: var(--cs-text);
--wc-title-color-brand: var(--title-hover-color);
--wc-title-lines: 3;
--wc-title-size-narrow: 1.25rem;
--wc-title-leading-narrow: 1.08;
--wc-title-size-narrowest: 1.125rem;
--wc-desc-space: 6px;
--wc-desc-lines: 3;
--wc-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
--wc-icon-size: 32px;
--wc-icon-glyph-size: 14px;
--wc-icon-radius: var(--radius-sm);
--wc-icon-color: var(--cs-accent);
--wc-icon-tint: .05;
--wc-icon-tint-hover: .1;
--wc-icon-right: 2rem;
--wc-icon-top: calc(var(--wc-pad) + (var(--wc-logo-size) - var(--wc-icon-size)) / 2);
--wc-icon-z: 2;
--wc-focus-ring: var(--pub-focus-ring);
--wc-focus-offset: 4px;
--wc-focus-ring-legacy: 2px solid var(--color-focus);
--wc-lift-y: var(--hover-lift);
--wc-lift-shadow: var(--shadow-hover);
--wc-press-scale: .98;
--wc-press-scale-hover: .99;
--wc-leave-opacity: .96;
--wc-move: transform var(--dur-spring-smooth) var(--ease-spring-smooth), box-shadow var(--dur-effects) var(--ease-effects), border-color var(--dur-fast) var(--ease-effects);
--wc-cover-move: transform var(--dur-spring-smooth) var(--ease-spring-smooth);
--wc-press-move: transform var(--dur-spring-snappy) var(--ease-spring-snappy);
--wc-leave-move: transform var(--dur-spring-snappy) var(--ease-spring-snappy), opacity var(--dur-fast) var(--ease-effects);
--wc-reduced-move: box-shadow var(--dur-fast) var(--ease-effects), border-color var(--dur-fast) var(--ease-effects);
--wc-reduced-leave-move: opacity var(--dur-fast) var(--ease-effects);
--wc-icon-dur: var(--dur-200);
--wc-icon-ease: var(--ease-out, ease);
--wc-icon-scale-hover: 1.05;
--wc-ring-color: var(--coral-400);
--wc-ring-width: 1px;
--wc-ring-z: 10;
--wc-ring-size: 170%;
--wc-ring-turn: calc(var(--dur-spring-travel) * 4);
--wc-ring-fade: opacity var(--dur-slow) var(--ease-effects);
--wc-cta-z: 3;
}
@media (max-width: 767.98px) {
html .bento-card { --wc-pad: var(--wc-pad-sm); }
}
}
/* END components/work-card.css */
/* ===== SOURCE: design-system/components/work-page.css ===== */
@layer tokens {
html[data-bc-surface="work"] {
--wp-page-bg: var(--porcelain-100);
--wp-title-size: clamp(2.375rem, 1.86rem + 2.1vw, 3.75rem);
--wp-cover-width: calc(100% - 24px);
--wp-cover-inset: 12px;
--wp-cover-radius: var(--pub-r-panel);
--wp-cover-fill: url("/assets/images/grain-soft.png") 0 0 / 64px 64px, var(--pub-light-key),
linear-gradient(180deg, var(--cobalt-800), var(--cobalt-900));
--wp-cover-foot: linear-gradient(90deg, transparent, var(--gold-300), transparent);
--wp-cover-foot-opacity: .7;
--wp-cover-width-phone: calc(100% - 16px);
--wp-cover-inset-phone: 8px;
--wp-cover-radius-phone: 24px;
--wp-header-z: 2;
--wp-header-pad-top: 176px;
--wp-header-pad-bottom: 232px;
--wp-header-pad-top-phone: 120px;
--wp-header-pad-bottom-phone: 160px;
--wp-title-face: var(--pub-font-display);
--wp-title-weight: 560;
--wp-title-tracking: -.025em;
--wp-title-leading: 1.04;
--wp-title-measure: 15.5em;
--wp-title-color: var(--pub-mh-muted, #C8D3E9);
--wp-title-strong-color: var(--pub-inverse-text);
--wp-title-accent-face: var(--pub-font-accent);
--wp-title-accent-weight: 400;
--wp-title-accent-tracking: -.01em;
--wp-title-accent-color: color-mix(in srgb, var(--gold-300) 92%, var(--white));
--wp-section-z: 5;
--wp-overlap: -176px;
--wp-overlap-phone: -96px;
--wp-section-pad-bottom: 96px;
--wp-grid-gap: 24px;
--wp-grid-cols-mid: repeat(2, minmax(0, 1fr));
--wp-pickbar-pad: var(--space-xl) 0 var(--space-3xl);
--wp-pick-face: var(--pub-font-ui);
--wp-pick-weight: 600;
--wp-pick-size: 15px;
--wp-pick-leading: 1;
--wp-pick-pad: 15.5px 24px;
--wp-pick-radius: var(--pub-r-chip);
--wp-pick-label: var(--cobalt-600);
--wp-pick-fill: var(--white);
--wp-pick-border: 1px solid var(--rule-cool);
--wp-pick-shadow: var(--pub-e1);
--wp-pick-label-hover: var(--ink-cobalt);
--wp-pick-fill-hover: var(--white);
--wp-pick-border-hover: var(--gold-500);
--wp-pick-focus-ring: var(--pub-focus-ring);
--wp-pick-focus-offset: var(--pub-focus-offset);
--wp-deck-z: 500;
--wp-stage-z: 100000;
--wp-deck-ghost-shadow: var(--pub-e2);
--wp-deck-ghost-shadow-phone: none;
--wp-dots-gap: 6px;
--wp-dot-color: var(--cobalt-600);
--wp-dot-opacity: .22;
--wp-dot-on-opacity: .7;
--wp-dot-on-scale: 1.5;
--wp-scrim: color-mix(in srgb, var(--cobalt-950) 88%, transparent);
--wp-pick-card-focus: var(--pub-focus);
--wp-pick-card-focus-width: 3px;
--wp-pick-card-focus-offset: 4px;
--wp-ctl-gap: 12px;
--wp-step-size: var(--btn-h-md);
--wp-step-opacity: .72;
--wp-close-top: 20px;
--wp-close-right: 24px;
}
}
/* END components/work-page.css */
/* ===== SOURCE: design-system/case-study/components/legal-reader.css ===== */
@layer tokens {
.cs-reader[data-cs-case="legal"] {
--lgr-clause-gap: var(--cs-space-xl);
--lgr-clause-pad: var(--cs-space-l);
--lgr-clause-head-gap: var(--cs-space-s);
--lgr-clause-rule: 1px solid var(--cs-rule);
}
}
.cs-reader[data-cs-case="legal"] .cs-clauses { gap: 0; }
.cs-reader[data-cs-case="legal"] .cs-clauses > h3 { margin: var(--lgr-clause-gap) 0 var(--lgr-clause-head-gap); padding-top: var(--lgr-clause-pad); border-top: var(--lgr-clause-rule); }
.cs-reader[data-cs-case="legal"] .cs-clauses > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cs-reader[data-cs-case="legal"] .cs-clauses > p { margin: 0; }
/* END case-study/components/legal-reader.css */
/* ===== END GENERATED design-system bundle (case pages only) ===== */