/* ==========================================================================
   Site shell: the parts every page shares, including case studies that bring
   their own content styles (prisma.html). Uses tokens.css only.
   ========================================================================== */
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-padding-top:calc(var(--nav-h) + var(--space-8))}  /* anchors land just under the floating nav */
body{font-optical-sizing:auto;font-feature-settings:"cv11","ss01","ss03"}
::selection{background:var(--color-accent);color:var(--color-on-accent)}

/* ---- Link reset (pages with their own base styles load the shell too) */
.nav a,.skip-link,.btn,.next-project,.site-footer a{text-decoration:none;color:var(--color-text)}

/* ---- Nav: a floating capsule, the only translucent material on the page */
.nav{position:fixed;inset:var(--space-3) 0 auto;z-index:var(--z-nav);display:flex;justify-content:center;padding:0 var(--space-3);pointer-events:none}
.nav .wrap{pointer-events:auto;display:flex;align-items:center;gap:var(--space-1);width:auto;max-width:100%;margin:0;padding:var(--space-1);border-radius:var(--radius-pill);background:var(--color-chrome);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:var(--border-width) solid var(--color-border-subtle);box-shadow:0 1px 0 var(--color-highlight) inset,0 12px 32px -12px var(--black-a80);transition:border-color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard)}
.nav.is-scrolled .wrap{border-color:var(--color-border)}
.nav__home{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-round);transition:background var(--duration-hover),transform var(--duration-press) var(--ease-out)}
.nav__home:hover{background:var(--color-surface-glass)}
.nav__home:active{transform:scale(.94)}
.nav__logo{width:26px;height:26px}
.nav ul{display:flex;gap:0;list-style:none;font-size:var(--text-sm);letter-spacing:var(--tracking-snug);margin:0;padding:0}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);color:var(--color-text-muted);transition:color var(--duration-fast),background var(--duration-fast)}
.nav ul a:hover{color:var(--color-text);background:var(--color-surface-glass)}
.nav ul a[aria-current]{color:var(--color-text)}
.nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-5);margin-left:var(--space-1);border-radius:var(--radius-pill);background:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-snug);transition:background var(--duration-hover),transform var(--duration-press) var(--ease-out)}
.nav .nav__cta{color:var(--color-text-inverse)}
.nav__cta:hover{background:var(--color-text-secondary)}
.nav__cta:active{transform:scale(.97)}
.skip-link{position:absolute;left:var(--space-4);top:-60px;z-index:var(--z-skip);background:var(--color-surface-inverse);color:var(--color-text-inverse);padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);font-weight:var(--weight-semibold);transition:top var(--duration-fast)}
.skip-link:focus{top:var(--space-4)}

/* ---- Button ------------------------------------------------------------ */
.btns{display:flex;gap:var(--space-3);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-6);border-radius:var(--radius-pill);border:var(--border-width) solid transparent;font-weight:var(--weight-medium);font-size:var(--text-ui);letter-spacing:var(--tracking-snug);transition:background var(--duration-hover) var(--ease-standard),border-color var(--duration-hover),transform var(--duration-press) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn__icon{display:inline-block;transition:transform var(--duration-base) var(--ease-out)}
.btn--primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn--primary:hover{background:var(--color-accent-hover)}
.btn--ghost{border-color:var(--color-border-strong);background:transparent}
.btn--ghost:hover{background:var(--color-surface-glass);border-color:var(--color-text-subtle)}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-round);display:grid;place-items:center;border:var(--border-width) solid var(--color-border);background:var(--color-chrome);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--color-text);cursor:pointer;transition:background var(--duration-hover),transform var(--duration-press) var(--ease-out)}
.icon-btn:hover{background:var(--color-scrim)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:16px;height:16px;fill:currentColor}

/* ---- Eyebrow: a short label above a title, in the accent ------------- */
.eyebrow{font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);color:var(--color-accent-text);margin-bottom:var(--space-4)}

/* ---- Case study template: identical frame on every case ------------- */
/* Section header: phase eyebrow + title on the left, intro on the right */
.head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-4) var(--space-12);align-items:end;margin-bottom:var(--space-12)}
.head h2{margin:0}
.head>p{margin:0;max-width:46ch;font-size:var(--text-lead);line-height:1.5;color:var(--color-text-muted)}
.head .eyebrow{margin-bottom:var(--space-4)}
/* Facts strip under every case hero */
.case-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5) var(--space-8);max-width:760px;margin:var(--space-10) 0 0;padding:var(--space-6) 0 0;border-top:var(--border-width) solid var(--color-border)}
.case-meta div{min-width:0}
.case-meta dt{margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}
.case-meta dd{margin:var(--space-1) 0 0;font-size:var(--text-ui);font-weight:var(--weight-semibold);color:var(--color-text)}
/* Content settles in once, never on repeat */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--duration-enter) var(--ease-out),transform var(--duration-enter) var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---- Site footer: contact, links and legal in one compact block -------- */
.site-footer{position:relative;isolation:isolate;overflow:hidden;border-top:var(--border-width) solid var(--color-border-subtle);font-size:var(--text-sm)}
/* Compact centered close: one line, one action, a soft accent glow */
.site-footer__cta{position:relative;text-align:center;padding:var(--space-20) 0 var(--space-16);border-bottom:var(--border-width) solid var(--color-border-subtle);margin-bottom:var(--space-16)}
.site-footer__cta::before{content:"";position:absolute;z-index:-1;left:50%;top:-55%;width:min(900px,130%);aspect-ratio:2/1;transform:translateX(-50%);border-radius:var(--radius-round);background:var(--gradient-glow);filter:blur(24px);opacity:.7;pointer-events:none}
.site-footer__title{max-width:20ch;margin:0 auto var(--space-4);font-size:var(--text-h2);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);font-weight:var(--weight-semibold);text-wrap:balance}
.site-footer__lead{margin:0 auto var(--space-8);font-size:var(--text-lead);color:var(--color-text-muted)}
.site-footer__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-3) var(--space-6)}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-12) var(--space-16);padding-bottom:var(--space-16)}
.site-footer__name{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;font-size:var(--text-h4);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
.site-footer__name img{width:28px;height:28px}
.site-footer__tagline{margin:var(--space-2) 0 0;max-width:38ch;font-size:var(--text-ui);line-height:1.5;color:var(--color-text-muted)}
.site-footer__mail{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;font-size:var(--text-ui);font-weight:var(--weight-medium);transition:color var(--duration-fast)}
.site-footer .site-footer__mail{color:var(--color-accent-text)}
.site-footer__mail:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer__social{display:flex;gap:var(--space-2);list-style:none;margin:var(--space-4) 0 0;padding:0}
.site-footer__social a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border);background:var(--color-surface-raised);transition:border-color var(--duration-hover),color var(--duration-hover),transform var(--duration-press) var(--ease-out)}
.site-footer__social a:active{transform:scale(.94)}
.site-footer .site-footer__social a{color:var(--color-text-secondary)}
.site-footer .site-footer__social a:hover{color:var(--color-text);border-color:var(--color-border-strong)}
.site-footer__social svg{width:18px;height:18px;fill:currentColor}
.site-footer__links{display:grid;grid-template-columns:repeat(2,minmax(150px,auto));gap:var(--space-8) var(--space-16)}
.site-footer__heading{margin:0 0 var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-subtle)}
.site-footer__links ul{list-style:none;margin:0;padding:0}
.site-footer__links a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-ui);transition:color var(--duration-fast)}
.site-footer .site-footer__links a{color:var(--color-text-secondary)}
.site-footer .site-footer__links a:hover{color:var(--color-text)}
.site-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:72px;border-top:var(--border-width) solid var(--color-border-subtle);color:var(--color-text-subtle)}
.site-footer__bottom p{margin:0;color:inherit;font-size:inherit}
.site-footer .site-footer__bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-text-subtle);transition:color var(--duration-fast)}
.site-footer .site-footer__bottom a:hover{color:var(--color-text)}

/* ---- Next project: the close of every case study ----------------------- */
.next-project{position:relative;display:block;padding:var(--space-12) 0;transition:transform var(--duration-press) var(--ease-out);border-top:var(--border-width) solid var(--color-border-subtle);border-bottom:var(--border-width) solid var(--color-border-subtle)}
.next-project .eyebrow{display:block;margin-bottom:var(--space-4)}
.next-project__title{display:block;font-size:var(--text-h1);font-weight:var(--weight-semibold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);transition:color var(--duration-hover) ease}
.next-project__meta{display:block;margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-ui);max-width:var(--measure)}
.next-project__arrow{position:absolute;right:0;top:50%;width:64px;height:64px;margin-top:-32px;border-radius:var(--radius-round);border:var(--border-width) solid var(--color-border-strong);display:grid;place-items:center;font-size:24px;transition:background var(--duration-hover) ease,border-color var(--duration-hover) ease,color var(--duration-hover) ease,transform var(--duration-exit) var(--ease-out)}
.next-project:hover .next-project__title{color:var(--color-accent-text)}
.next-project:hover .next-project__arrow{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.next-project:active{transform:scale(.99)}
.next{padding-top:var(--space-20)}

/* ---- Motion ------------------------------------------------------------
   Frequent things (hover, press) are fast and nearly invisible; things seen
   once per visit (a page, a case hero) may take longer. See DESIGN-SYSTEM.md. */

/* Hover movement only where a real pointer can hover: no sticky taps */
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn__icon{transform:translateX(3px)}
  .btn:hover .btn__icon--ne{transform:translate(2px,-2px)}
  .next-project:hover .next-project__arrow{transform:translateX(6px)}
}

/* Key images: uncovered from the bottom once, as they enter (main.js adds .in) */
.reveal-clip{clip-path:inset(0 0 100% 0);transition:clip-path var(--duration-enter) var(--ease-in-out);transition-delay:var(--reveal-delay,0ms)}
.reveal-clip.in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:no-preference){
  /* Case hero: the same arrival on every case */
  .case-hero .wrap>*,.case-intro>*{animation:enter-up var(--duration-enter) var(--ease-out) both}
  .case-hero .wrap>:nth-child(2),.case-intro>:nth-child(2){animation-delay:60ms}
  .case-hero .wrap>:nth-child(3),.case-intro>:nth-child(3){animation-delay:120ms}
  .case-hero .wrap>:nth-child(4),.case-intro>:nth-child(4){animation-delay:180ms}
  .case-hero>img{animation:settle 1.2s var(--ease-out) both}
  .case-hero--blur>img{animation-name:settle-blur}
  @keyframes enter-up{from{opacity:0;transform:translateY(12px)}}
  @keyframes settle{from{transform:scale(1.04)}}
  @keyframes settle-blur{from{transform:scale(1.09)}}
}

/* Between pages: the old page leaves first, then the new one arrives, so the
   two never sit on top of each other. The nav stays still. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 160ms ease-in both}
::view-transition-new(root){animation:vt-in var(--duration-page) var(--ease-out) 120ms both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.nav .wrap{view-transition-name:site-nav}

/* ---- Focus ------------------------------------------------------------ */
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-xs)}
.btn:focus-visible{outline-offset:4px;border-radius:var(--radius-pill)}
.project-card:focus-visible{outline-offset:6px;border-radius:var(--radius-lg)}
.next-project:focus-visible{outline-offset:6px}
[tabindex="-1"]:focus{outline:none}

/* ---- Shell responsive ------------------------------------------------- */
@media (max-width:900px){
  .head{grid-template-columns:1fr}
}
@media (max-width:600px){
  .case-meta{grid-template-columns:1fr 1fr}
  .nav ul a{padding:0 var(--space-2)}
  .nav__cta{padding:0 var(--space-4);margin-left:0}
  .next-project{padding-right:var(--space-16)}
  .next-project__arrow{width:48px;height:48px;margin-top:-24px;font-size:20px}
  .site-footer__top{grid-template-columns:1fr}
  .site-footer__bottom{flex-direction:column;justify-content:center;gap:0;padding-block:var(--space-4)}
}
@media (prefers-reduced-transparency:reduce){
  .nav .wrap,.icon-btn{background:var(--neutral-150);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--color-border-subtle:var(--white-a25);--color-border:var(--white-a25);--color-text-muted:var(--neutral-800);--color-text-subtle:var(--neutral-600)}
}
/* Reduced motion = no movement, but keep short fades that aid reading */
@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:opacity var(--duration-hover) ease}
  .reveal-clip{clip-path:none;opacity:0;transition:opacity var(--duration-hover) ease}
  .reveal-clip.in{opacity:1}
  .btn:active,.nav__cta:active,.nav__home:active,.icon-btn:active,.site-footer__social a:active,.next-project:active,
  .btn:hover .btn__icon,.next-project:hover .next-project__arrow{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:120ms;animation-delay:0ms}
}