/* Portfolio palette, inspired by Figma Slides / 01 Foundations.
   Shared palette and targeted responsive QA fixes; original typography retained. */
: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:#f4f1ea;
  --control-ink:#141210;
  --shadow:rgba(40,31,20,.2);
  --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);
  --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(--paper)}
.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)}
/* Render the existing mark in exact ivory on dark; preserve violet on light. */
[data-theme="dark"] .brand{position:relative}
[data-theme="dark"] .brand img{opacity:0}
[data-theme="dark"] .brand:after{content:"";position:absolute;inset:0;width:var(--logo-box);height:var(--logo-box);background:var(--ivory);-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:0 2px 4px var(--shadow),0 18px 36px -12px var(--shadow),0 42px 80px -32px var(--shadow)}
[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:0 6px 18px var(--shadow)}
/* 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{box-shadow:0 8px 22px var(--shadow)}
.contain{background:#ece7df}
[data-page="home"] .shelf .pic{background:var(--surface);border-radius:var(--radius-sm)}
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:10px;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}