/* Hallmark · genre: technical · macrostructure: Split Studio · design-system: design.md · designed-as-app · contrast: pass · mobile: pass */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
@import url("/tokens.css");
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: clip; margin: 0; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); line-height: 1.75; }
a { color: inherit; text-decoration: none; } .shell { width: min(70rem, 100%); margin-inline: auto; padding-inline: var(--page-gutter); }
.case-nav { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }.case-nav .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }.wordmark { font: 800 1.1rem/1 var(--font-display); letter-spacing: -.055em; }.wordmark span { color: var(--color-cyan); }.back { font: 600 var(--text-sm) var(--font-mono); text-decoration: underline; text-underline-offset: .25em; }
.case-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--space-xl), 8vw, var(--space-3xl)); align-items: end; padding-block: clamp(4rem, 10vw, 9rem); }.mono { margin: 0 0 var(--space-sm); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .08em; }.case-hero h1 { min-width: 0; max-width: 12ch; overflow-wrap: anywhere; margin: 0; font: 700 clamp(3rem, 8vw, 7rem)/1 var(--font-display); letter-spacing: -.07em; }.case-hero p:not(.mono) { max-width: 36ch; margin: 0; font-size: var(--text-lg); color: var(--color-ink-soft); }.case-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-lg); }.case-meta span { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); color: var(--color-accent-ink); background: var(--case-accent); font: 500 var(--text-xs) var(--font-mono); }
.case-story { padding-block: var(--space-3xl); background: var(--color-paper-2); }.story-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--space-xl); padding-block: var(--space-xl); border-top: 1px dashed color-mix(in oklch, var(--color-ink) 32%, transparent); }.story-grid:first-child { border-top: 0; padding-top: 0; }.story-grid h2 { margin: 0; font-size: var(--text-xl); letter-spacing: -.045em; }.story-grid p { max-width: 53ch; margin: 0; font-size: var(--text-lg); }.case-note { margin-top: var(--space-xl); padding: var(--space-lg); border: 2px solid var(--case-accent); border-radius: var(--radius-card); background: var(--color-paper); font-weight: 600; box-shadow: 6px 6px 0 color-mix(in oklch, var(--color-ink) 20%, transparent); }
.case-footer { padding-block: var(--space-2xl); }.case-footer h2 { max-width: 16ch; margin: 0 0 var(--space-lg); font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -.06em; }.button { display: inline-flex; min-height: 2.9rem; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); color: var(--color-accent-ink); background: var(--color-pear); box-shadow: 0 4px 0 var(--color-pear-deep); font-weight: 700; white-space: nowrap; }.button:hover { transform: translateY(-2px); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 40rem) { .case-hero, .story-grid { grid-template-columns: 1fr; }.case-hero { gap: var(--space-lg); }.case-hero h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }.story-grid { gap: var(--space-sm); padding-block: var(--space-lg); } }