/* Site overrides of design-system tokens. Keep at the top of this file; the _ds/
   token stylesheets load before it (see the <link> order in every page head), so
   these win on cascade order alone.
   --text-eyebrow / --tracking-eyebrow: the vendored tokens/typography.css sets
   9px/0.45px, deliberate there as a structural label sitting outside the type
   scale. Too small on this site, where the eyebrow carries real content — the
   meta stats, card footers and media tags, not just section labels. */
:root{--text-eyebrow:12px;--tracking-eyebrow:0.9px}
/* Motion tokens. The vendored design system ships none (its tokens/ covers color,
   type, spacing and shape only), so the site's curves and durations live here and
   every transition below references them rather than repeating a literal. */
:root{--ease-hover:ease;--duration-hover:120ms;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--duration-overlay:200ms;--duration-page:240ms;--duration-press:160ms;--duration-image:400ms}
.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 40px}
.band{padding:var(--section-gap) 0}
.band-tight{padding:var(--spacing-48) 0}
.stack{display:flex;flex-direction:column}
.g24{gap:var(--spacing-24)}
.g16{gap:var(--spacing-16)}
.g32{gap:var(--spacing-32)}
.g48{gap:var(--spacing-48)}
.g80{gap:var(--section-gap)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--spacing-64);align-items:end}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-32)}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-48);align-items:center}
.case-grid.flip>*:first-child{order:2}
.case-card{color:var(--text-on-light);transition:background var(--duration-hover) var(--ease-hover),transform var(--duration-press) var(--ease-out)}
.case-card:active{transform:scale(0.985)}
.case-card:hover{background:var(--surface-white-panel)!important}
.case-card:hover .arrow{color:var(--action-primary-hover)}
.case-card:focus-visible{outline:2px solid var(--color-rust-pulse);outline-offset:4px}
.arrow{color:var(--color-rust-pulse);font-family:var(--font-body);font-size:var(--text-body);transition:color var(--duration-hover) var(--ease-hover)}
.lede{font-size:var(--text-body-lg);line-height:var(--leading-body-lg)}
.on-dark-body{color:rgba(255,255,255,0.72)}
.on-dark-meta{color:var(--text-on-dark-muted)}
.hair{height:1px;background:var(--border-light-hairline);border:0;margin:0;width:100%}
.portrait-card{background:var(--surface-linen-card);border-radius:var(--radius-largecards);box-shadow:var(--shadow-md);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/5}
.portrait-card img{height:100%;width:auto;max-width:96%;object-fit:contain;object-position:bottom center;display:block;filter:grayscale(1) contrast(1.04);opacity:0;transition:opacity var(--duration-image) var(--ease-out)}
.portrait-card img.loaded{opacity:1}
.shot{width:100%;display:block;border-radius:var(--radius-smallelements)}
.clip{width:100%;display:block;border-radius:var(--radius-smallelements);background:var(--color-charcoal);aspect-ratio:16/9}
.clip::cue{font-family:var(--font-body);background:rgba(10,8,7,.82)}
.slot-frame{background:var(--surface-deep-card);border-radius:var(--radius-cards);padding:10px}
.role-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--spacing-24)}
.bul{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start}
.dot{color:var(--color-rust-pulse);font-size:11px;line-height:1.7}
.metagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-24)}
.backlink{font-family:var(--font-body);font-size:var(--text-body-sm);color:rgba(255,255,255,0.7);transition:color var(--duration-hover) var(--ease-hover)}
.backlink:hover{color:var(--color-pure-white)}
.cap{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-on-dark-muted)}
.footmeta{display:flex;justify-content:space-between;gap:var(--spacing-24);flex-wrap:wrap}
@media (max-width:960px){.hero-grid,.case-grid,.two{grid-template-columns:1fr}.case-grid.flip>*:first-child{order:0}.metagrid{grid-template-columns:1fr 1fr}.wrap{padding:0 24px}}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stripshot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-cards);display:block;background:var(--color-deep-umber)}
@media(max-width:760px){.strip{grid-template-columns:repeat(2,1fr)}}

.media{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mediatile{display:flex;flex-direction:column;gap:24px;background:var(--color-deep-umber);border-radius:var(--radius-largecards);padding:var(--spacing-24);text-decoration:none;transition:background var(--duration-hover) var(--ease-hover),transform var(--duration-press) var(--ease-out)}
.mediatile:active{transform:scale(0.98)}
.mediatile:hover{background:#171110}
.mediatile .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-cards);display:block;background:var(--color-charcoal)}
.mediatile>.stack{flex:1}
.mediatile .arrow{margin-top:auto}
@media(max-width:900px){.media{grid-template-columns:1fr}}

.narrow-visual{max-width:560px}
.shot{cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(10,8,7,.94);z-index:9999;display:flex;align-items:center;justify-content:center;padding:40px;cursor:zoom-out;opacity:0;transition:opacity var(--duration-overlay) var(--ease-out)}
.lightbox.on{opacity:1}
.lightbox:not(.on){pointer-events:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-smallelements);background:var(--color-pure-white);transform:scale(0.97);transition:transform var(--duration-overlay) var(--ease-out)}
.lightbox.on img{transform:none}
.lightbox .lb-close{position:absolute;top:24px;right:32px;font-family:var(--font-display);font-size:24px;line-height:1;color:var(--color-pure-white);opacity:.7;background:none;border:0;cursor:pointer;padding:8px;transition:opacity var(--duration-hover) var(--ease-hover)}
.lightbox .lb-close:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.lightbox img{transform:none;transition:none}}

/* Page transitions. Same-origin navigations (home <-> case study) cross-fade rather
   than hard-cutting. Browsers without support ignore this and navigate as before.
   No shared-element morph: the teaser image and the case page's first visual are the
   same asset, but the destination sits ~110px below the fold at 2.5x the size, so
   naming them made the image grow and slide off the bottom of the screen. Matching
   files are not a shared element; matching on-screen positions are. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--duration-page);animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Press feedback. Scale factors tighten as the target grows so each moves a similar
   number of pixels; 0.97 on a 1120px card would be a 34px lurch.
   The !important is load-bearing: the vendored design-system Button sets `transition`
   as an INLINE style (_ds/…/_ds_bundle.js:24), which outranks any stylesheet rule, so
   without it the transform would snap instead of easing. Overriding the shorthand
   means restating the DS's own background/color/opacity transitions here — if the
   design system ever retimes those, this line has to follow. Scoped to .wrap so it
   cannot reach the lightbox close button, which lives outside it. */
.wrap button{transition:background var(--duration-hover) var(--ease-hover),color var(--duration-hover) var(--ease-hover),opacity var(--duration-hover) var(--ease-hover),transform var(--duration-press) var(--ease-out)!important}
.wrap button:active{transform:scale(0.97)}
@media (prefers-reduced-motion:reduce){.case-card:active,.mediatile:active,.wrap button:active{transform:none}}