/* Inter (SIL OFL 1.1, fonts/Inter-OFL.txt): bundled variable sans for body and UI, wght 100–900 + opsz, Latin subset (@fontsource-variable/inter 5.3.0). Chosen 2026-11-09 over Karla, Crimson Pro and the system font. */
@font-face{font-family:"Inter Variable";src:url(/fonts/inter-variable-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Portfolio Design System v2 (webdev/workspaces/design-system, system/tokens.json @975c998).
   Palette per theme, shared scale tokens, and targeted responsive QA fixes. */
:root{
  --radius-xl:28px;--radius-lg:20px;--radius-md:12px;--radius-pill:999px;
  --text-display:clamp(64px,10.5vw,168px);--text-headline:clamp(48px,7vw,96px);
  --text-title:clamp(34px,4.4vw,64px);--text-tile:clamp(20px,3vw,44px);
  --text-heading:clamp(22px,2.2vw,28px);--text-subhead:21px;--text-body:clamp(17px,1.35vw,19px);
  --text-small:15px;--text-ui:14px;--text-meta:13px;--text-label:12px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-24:96px;
  --control-size:44px;--header-height:56px;
  --perspective:1400px;--lift-sm:2px;--lift-md:4px;--lift-lg:8px;--blur-glass:16px;
  --duration-instant:120ms;--duration-quick:200ms;--duration-base:320ms;--duration-slow:450ms;
  --spring:cubic-bezier(.3,1.35,.5,1);
  --elevation-1:0 6px 18px var(--shadow);
  --elevation-2:0 2px 4px var(--shadow),0 18px 36px -12px var(--shadow);
  --elevation-3:0 2px 4px var(--shadow),0 18px 36px -12px var(--shadow),0 42px 80px -32px var(--shadow);
}
@media(max-width:740px){:root{--radius-xl:22px}}
:root[data-theme="ivory"] {
  --paper:#f6f3ee;
  --ink:#141210;
  --muted:rgba(20,18,16,.78);
  --tertiary:rgba(20,18,16,.64);
  --hair:rgba(20,18,16,.14);
  --surface:#ece7df;
  --surface-raised:#e2dcd3;
  --accent:#6e5631;
  --brand:#6e5631;
  --champagne:#c8b28a;
  --ivory:#f4f1ea;
  --control-bg:#141210;
  --control-ink:#f4f1ea;
  --shadow:rgba(40,31,20,.2);
  --line-strong:rgba(20,18,16,.52);
  --on-brand:#f6f3ee;
  --glass:rgba(246,243,238,.76);
  --glass-edge:rgba(255,255,255,.8);
  --elevation-4:0 40px 100px -40px rgba(40,31,20,.45),0 2px 8px rgba(40,31,20,.15);
  --star-base:0.39 0.35 0.29;
  --star-accent:0.43 0.337 0.192;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --paper:#000;
  --ink:#f4f1ea;
  --muted:rgba(244,241,234,.72);
  --tertiary:rgba(244,241,234,.56);
  --hair:rgba(244,241,234,.16);
  --surface:#121110;
  --surface-raised:#1c1b19;
  --accent:#c8b28a;
  --brand:#c8b28a;
  --champagne:#c8b28a;
  --ivory:#f4f1ea;
  --control-bg:#f4f1ea;
  --control-ink:#141210;
  --shadow:rgba(0,0,0,.5);
  --line-strong:rgba(244,241,234,.44);
  --on-brand:#000;
  --glass:rgba(18,17,16,.72);
  --glass-edge:rgba(244,241,234,.12);
  --elevation-4:0 40px 100px -40px rgba(0,0,0,.8),0 2px 8px rgba(0,0,0,.4);
  --star-base:0.72 0.69 0.63;
  --star-accent:0.784 0.698 0.541;
  color-scheme:dark;
}
::selection{background:var(--brand);color:var(--on-brand)}
/* Header stays solid paper with a hair rule (Cody's preference, 2026-11-08); glass is for floating panels only. */
.site-header{border-bottom-color:var(--hair)}
.site-header nav a:hover{background:var(--surface);color:var(--brand)}
/* The mark fills 230px of its 400px PNG: a 42px box gives ~24px visible width. */
.brand{--logo-box:42px}
.brand img{width:var(--logo-box);height:var(--logo-box)}
/* The mark is always the cp-logo.png mask painted in ink (violet retired in v2). */
.brand{position:relative}
.brand img{opacity:0}
.brand:after{content:"";position:absolute;inset:0;width:var(--logo-box);height:var(--logo-box);background:var(--ink);-webkit-mask:url("/assets/cp-logo.png") center / contain no-repeat;mask:url("/assets/cp-logo.png") center / contain no-repeat;pointer-events:none}
.hero:after{background:radial-gradient(circle,color-mix(in srgb,var(--brand) 6%,transparent),transparent 68%)}
.spatial-signature:before{background:radial-gradient(36% 25% at 50% 49%,color-mix(in srgb,var(--paper) 42%,transparent) 0%,color-mix(in srgb,var(--paper) 16%,transparent) 58%,transparent 100%)}
.hero-work-link{color:var(--brand)}
.hero-work-link:hover,.hero-work-link:focus-visible{background:color-mix(in srgb,var(--brand) 8%,transparent)}
[data-page="home"] .sheet{background:linear-gradient(to bottom,color-mix(in srgb,var(--paper) 0%,transparent) 0,color-mix(in srgb,var(--paper) 72%,transparent) calc(clamp(140px,24vh,260px) * .55),var(--paper) clamp(140px,24vh,260px)) no-repeat}
.media{box-shadow:inset 0 0 0 1px var(--hair)}
.tile:hover .media,.tile a:focus-visible:not([data-focus-origin="pointer"]) .media{box-shadow:var(--elevation-3)}
/* Tile sheen: soft light from above while a tile is lifted. */
.tile .mv:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(60% 60% at var(--mx,50%) var(--my,0%),rgba(255,255,255,.14),rgba(255,255,255,0) 70%);mix-blend-mode:soft-light;opacity:0;transition:opacity var(--duration-base) var(--motion)}
.tile:hover .mv:after,.tile a:focus-visible:not([data-focus-origin="pointer"]) .mv:after{opacity:1}
[data-page="home"] .label{color:var(--ivory)}
[data-page="home"] .label__meta{color:var(--champagne)}
.go,.exit,.tc-cue,.next .go i{background:var(--control-bg);color:var(--control-ink);box-shadow:var(--elevation-1),inset 0 1px 0 var(--glass-edge)}
/* The next-project wrapper contains the arrow; only its circle is a surface. */
.next .go{background:none;color:inherit;box-shadow:none}
.eyebrow,.num,.section-label span{color:var(--brand)}
.facts dt,footer .meta,.shelf small{color:var(--tertiary)}
.metric b,footer .cta{color:var(--brand)}
.ph .media{border-color:var(--hair);background:var(--surface)}
.exit:hover{transform:translateY(calc(var(--lift-sm) * -1));box-shadow:var(--elevation-1),inset 0 1px 0 var(--glass-edge)}
.contain{background:#ece7df}
[data-page="home"] .shelf .pic{background:var(--surface);border-radius:var(--radius-lg)}
a:focus-visible:not([data-focus-origin="pointer"]){outline:2px solid var(--brand);outline-offset:4px}
footer a:hover{color:var(--brand)}
/* QA refinements shared by the two reversible previews. */
.skip{color:var(--paper)}
a.sr-only:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;overflow:visible;padding:12px 16px;background:var(--ink);color:var(--paper);border-radius:var(--radius-md);z-index:99}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px}
[data-page="home"] .grid4 .label h3{white-space:normal}
.label h3 .word{display:inline-block}
@media(max-width:360px){.metrics.single .metric b{font-size:clamp(72px,25vw,90px)}}
@media(max-height:500px) and (min-width:600px){.title-card{min-height:100svh}}

/* Anchor destinations clear the persistent 44px back control. */
[data-page="case"] .chapter h2[id]{scroll-margin-top:80px}

/* Case-study polish, 2026-11-08 ─────────────────────────────── */
/* Metrics sit on the reading column's centre axis on wide screens and share its left edge on phones. */
.col>.metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(32px,4.5vw,64px) clamp(40px,4.5vw,72px)}
@media (max-width:820px){.col>.metrics{justify-content:flex-start;max-width:var(--measure);margin-left:auto;margin-right:auto}}
/* A single headline figure starts on the text edge, moving left only as far as its width (~3.2em) requires; its caption sits beneath. */
.col>.metrics.single{justify-content:flex-start;margin-left:clamp(0px,calc((100% - var(--measure)) / 2),calc(100% - 3.15 * clamp(96px,17vw,260px)))}
.col>.metrics.single .metric{flex-direction:column;align-items:flex-start;gap:16px}
/* Reveals: text rises less than media; items that share a row arrive in sequence (--rd set by portfolio-theme.js). */
[data-reveal]{transition-delay:var(--rd,0ms)}
[data-reveal]:not(.in){transform:translateY(12px)}
[data-reveal="media"]:not(.in){transform:translateY(28px) scale(.985)}
.cards[data-reveal]:not(.in){opacity:1;transform:none}
.cards[data-reveal]>div{transition:opacity .45s var(--motion),transform .6s var(--motion);transition-delay:calc(var(--ci,0) * 60ms)}
.cards[data-reveal]:not(.in)>div{opacity:0;transform:translateY(12px)}
/* Phones: the back control steps aside while reading down and returns on the way up. */
.exit{transition:transform .35s var(--motion),box-shadow .35s var(--motion),opacity .25s var(--motion)}
.exit.is-tucked{opacity:0;transform:translateY(-16px) scale(.9);pointer-events:none}
@media (prefers-reduced-motion:reduce){.cards[data-reveal]>div{opacity:1!important;transform:none!important;transition:none!important}.exit.is-tucked{transform:none}}

/* Case-study reading system. Semantic roles build on the portfolio scale;
   scope them to cases so homepage typography and spacing remain independent. */
:root[data-page="case"] {
  --case-text-lede:clamp(30px,3.6vw,50px);
  --case-text-card:17px;
  --case-leading-title:1.08;
  --case-leading-lede:1.14;
  --case-leading-subhead:1.4;
  --case-leading-body:1.7;
  --case-leading-support:1.6;
  --case-tracking-title:-.035em;
  --case-tracking-lede:-.025em;
  --case-tracking-subhead:-.01em;
  --case-tracking-label:.06em;
  --case-weight-display:700;
  --case-weight-heading:600;
  --case-weight-body:400;
  --case-measure:calc(var(--text-body) * 32);
  --case-caption-measure:60ch;
  --case-space-intro:clamp(72px,10vw,140px);
  --case-space-chapter:clamp(var(--space-24),12vw,176px);
  --case-space-copy:clamp(var(--space-8),4vw,var(--space-12));
  --case-space-group:clamp(var(--space-10),4.5vw,var(--space-16));
  --case-space-media:clamp(56px,8vw,112px);
  --case-space-support:var(--space-12);
  --case-space-paragraph:var(--space-5);
  --case-space-label:var(--space-4);
  --case-space-caption:var(--space-4);
  --case-card-padding:clamp(var(--space-6),2.2vw,var(--space-8));
  --case-card-gap:var(--space-6);
  /* Compatibility aliases for authored page layouts and metric alignment. */
  --body:var(--text-body);
  --measure:var(--case-measure);
}
:root[data-page="case"][data-theme="dark"]{--case-weight-body:350}
[data-page="case"] .sheet{padding-top:var(--case-space-intro)}
[data-page="case"] .sheet :is(.eyebrow,.num){
  font-size:var(--text-label);font-weight:var(--case-weight-heading);line-height:1.3;
  letter-spacing:var(--case-tracking-label);text-transform:uppercase;
  color:var(--brand);margin-bottom:var(--case-space-label);
}
[data-page="case"] .sheet .lede{
  font-size:var(--case-text-lede);font-weight:var(--case-weight-display);
  line-height:var(--case-leading-lede);letter-spacing:var(--case-tracking-lede);text-wrap:balance;
}
[data-page="case"] .chapter{padding-top:var(--case-space-chapter)}
[data-page="case"] .chapter h2{
  font-size:var(--text-title);line-height:var(--case-leading-title);
  letter-spacing:var(--case-tracking-title);text-wrap:balance;
}
[data-page="case"] .two{margin-top:var(--case-space-copy)}
[data-page="case"] .two+.two{margin-top:var(--case-space-group)}
[data-page="case"] :is(.two h3,.cards h3,.research-tensions h3,.consent-model b){
  font-size:var(--text-subhead);font-weight:var(--case-weight-heading);
  line-height:var(--case-leading-subhead);letter-spacing:var(--case-tracking-subhead);
  margin:0 0 var(--space-4);text-wrap:pretty;
}
[data-page="case"] .two p:not(.principles){
  font-size:var(--text-body);font-weight:var(--case-weight-body);
  line-height:var(--case-leading-body);text-wrap:pretty;
}
[data-page="case"] .two p+p{margin-top:var(--case-space-paragraph)}
[data-page="case"] .two p.principles{font-size:var(--text-heading);margin-top:var(--space-8)}
[data-page="case"] .facts{
  margin-top:var(--case-space-group);gap:var(--space-6) var(--space-8);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
[data-page="case"] .facts dt{line-height:var(--case-leading-support)}
[data-page="case"] .facts dd{
  margin-top:var(--space-2);font-size:var(--text-small);
  line-height:var(--case-leading-support);text-wrap:pretty;
}
[data-page="case"] .gal{margin-top:var(--case-space-media)}
[data-page="case"] .gal+.gal{margin-top:var(--case-space-group)}
[data-page="case"] figcaption{
  font-size:var(--text-ui);line-height:var(--case-leading-support);
  margin-top:var(--case-space-caption);text-wrap:pretty;
}
[data-page="case"] .gal figcaption{max-width:var(--case-caption-measure)}
/* Full-bleed images keep a text inset, including when their radius disappears on phones. */
[data-page="case"] :is(.bleed-left,.bleed-right) figcaption{padding-inline:var(--gutter);max-width:calc(var(--case-caption-measure) + 2 * var(--gutter))}
[data-page="case"] .gal.one-full>figure+figure{margin-top:var(--case-space-group)}
[data-page="case"] :is(.cards,.research-tensions,.consent-model){margin-top:var(--case-space-support)}
[data-page="case"] :is(.cards,.research-tensions,.consent-model ol){gap:var(--case-card-gap)}
[data-page="case"] :is(.cards>div,.research-tensions>div,.consent-model li){padding:var(--case-card-padding);border-radius:var(--radius-lg)}
[data-page="case"] :is(.cards p,.research-tensions p,.consent-model span){
  font-size:var(--case-text-card);font-weight:var(--case-weight-body);
  line-height:var(--case-leading-support);text-wrap:pretty;
}
[data-page="case"] :is(.cards+.metrics,.two+.metrics){margin-top:var(--case-space-support)}
[data-page="case"] .metrics{margin-top:var(--case-space-support)}
[data-page="case"] .metric{gap:var(--space-4)}
[data-page="case"] .metric span{line-height:var(--case-leading-support)}
[data-page="case"] .gal+.col>.cards:first-child,
[data-page="case"] .gal+.research-tensions,
[data-page="case"] .research-tensions+.col>.two:first-child{margin-top:var(--case-space-group)}
[data-page="case"] .exploration-grid{margin-top:var(--case-space-group)}
[data-page="case"] .exploration-grid .media{border-radius:var(--radius-md)}
[data-page="case"] :is(.context-grid,.context-pair) figcaption strong{font-size:var(--text-small);font-weight:var(--case-weight-heading);margin-bottom:var(--space-1)}
[data-page="case"] :is(.context-note,.project-credit){font-size:var(--text-meta);line-height:var(--case-leading-support)}
@media(max-width:820px){
  :root[data-page="case"]{--case-card-gap:var(--space-4)}
  [data-page="case"] :is(.bleed-left,.bleed-right){margin:var(--case-space-media) 0 0}
  [data-page="case"] .gal+.gal{margin-top:var(--case-space-group)}
}