/*
 * portfolio.css - Shared styles extracted from 13 case study pages.
 * Loaded once, cached. Removed from each page's inline <style> to
 * eliminate ~170 KB of duplication across the site.
 * Any page-specific CSS remains inline in the HTML file AFTER the
 * <link> so overrides work naturally via the cascade.
 */

/* View Transitions API: cross-fade on same-origin navigation. Chromium + Safari 18+. */
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:12px 24px;background:var(--c-ink);color:#fff;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;transition:top .2s;}
.skip-link:focus{top:16px;}
:focus-visible{outline:2px solid var(--c-accent, #4A90D9);outline-offset:3px;border-radius:4px;}
    :root {
      --c-bg:#FFFFFF; --c-surface:#FFFFFF; --c-panel:#F5F5F5;
      --c-ink:#0A0A0A; --c-mid:#555555; --c-light:#6F6F6F;
      --c-ghost:#CCCCCC; --c-rule:#E8E8E8; --c-rule-dk:#C8C8C8;
      --c-ink-pure:#000000; --c-nav:#595959; --c-hover:#111111; --c-border:#c0c0c0;
      --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      --t-sm:clamp(13px,1.4vw,14px); --t-base:clamp(15px,1.6vw,17px);
      --t-md:clamp(17px,1.8vw,20px); --t-lg:clamp(22px,2.4vw,28px);
      --t-xl:clamp(30px,3.8vw,44px); --t-2xl:clamp(42px,5.5vw,60px);
      --r-pill:999px; --r-card:16px; --r-panel:16px; --r-chip:8px; --r-input:10px;
      --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
      --tf:140ms; --tb:220ms; --ts:420ms; --tr:650ms;
      --sh-xs:0 1px 3px rgba(0,0,0,.04); --sh-sm:0 2px 10px rgba(0,0,0,.06);
      --sh-md:0 6px 24px rgba(0,0,0,.08); --sh-lg:0 12px 48px rgba(0,0,0,.10);
      --mw:1340px; --pad:clamp(28px,6vw,88px); --nav:72px;
      --font-display:'Noto Serif Display',Georgia,'Times New Roman',serif;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{font-size:16px;scroll-behavior:smooth;}
    body{font-family:var(--font);background:var(--c-bg);color:var(--c-ink);
      line-height:1.75;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
    ::-webkit-scrollbar{width:3px;}
    ::-webkit-scrollbar-track{background:var(--c-bg);}
    ::-webkit-scrollbar-thumb{background:var(--c-ghost);border-radius:99px;}
    a{color:inherit;text-decoration:none;}
    img{display:block;max-width:100%;}
    button{font-family:var(--font);}
    .wrap{max-width:var(--mw);margin:0 auto;padding:0 var(--pad);}
    .rv{opacity:0;transform:translateY(32px);transition:opacity var(--tr) var(--ease),transform var(--tr) var(--ease);}
    .rv.on{opacity:1;transform:translateY(0);}
    .rv[data-d="1"]{transition-delay:.1s;} .rv[data-d="2"]{transition-delay:.2s;}
    .rv[data-d="3"]{transition-delay:.3s;} .rv[data-d="4"]{transition-delay:.4s;}
    .rv[data-d="5"]{transition-delay:.5s;} .rv[data-d="6"]{transition-delay:.6s;}
    .nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav);
      display:flex;align-items:center;transition:background var(--ts) var(--ease),border-color var(--ts) var(--ease),backdrop-filter var(--ts) var(--ease);border-bottom:1px solid transparent;}
    .nav.s{background:rgba(255,255,255,.9);border-color:var(--c-rule);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
    .nav-inner{position:relative;max-width:var(--mw);margin:0 auto;padding:0 var(--pad);width:100%;display:flex;align-items:center;}
    .nav-logo{position:relative;z-index:2;display:flex;align-items:center;color:var(--c-ink);transition:opacity var(--tb) var(--ease),transform 0.4s var(--ease);}
    .nav-logo:hover{opacity:.6;transform:rotate(45deg);}
    .nav-links{list-style:none;display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap;}.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;z-index:2;}
    .nav-links a{font-size:13px;font-weight:400;color:var(--c-nav);letter-spacing:.01em;border-radius:var(--r-pill);padding:8px 16px;transition:background var(--tb) var(--ease),color var(--tb) var(--ease);}
    .nav-links a:hover{background:var(--c-hover);color:#fff;}
    .nav.s .nav-links a{color:var(--c-nav);}
    .nav.s .nav-links a:hover{background:var(--c-hover);color:#fff;}
    .nav-cta{font-size:13px;font-weight:400;color:var(--c-nav);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:8px 20px;transition:background var(--tb) var(--ease),border-color var(--tb) var(--ease),color var(--tb) var(--ease);}
    .nav-cta:hover{background:var(--c-hover);border-color:var(--c-hover);color:#fff;}
    .nav.s .nav-cta{color:var(--c-nav);}
    .nav.s .nav-cta:hover{background:var(--c-hover);border-color:var(--c-hover);color:#fff;}
    .nav-burger{position:relative;z-index:2;display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px;cursor:pointer;}
    .nav-burger span{display:block;width:22px;height:1.5px;background:var(--c-ink);border-radius:99px;transition:transform var(--tb) var(--ease),opacity var(--tb) var(--ease);}
    .nav-burger.o span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
    .nav-burger.o span:nth-child(2){opacity:0;}
    .nav-burger.o span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
    .nav-drawer {
      position:fixed; top:0; left:0; right:0; bottom:0;
      background:var(--c-bg, #fff);
      padding:100px var(--pad) 40px; z-index:199;
      display:flex; flex-direction:column; gap:4px;
      transform:translateY(-110%); opacity:0; pointer-events:none;
      transition:transform var(--ts) var(--ease), opacity var(--ts) var(--ease);
    }
    .nav-drawer.o{transform:translateY(0);opacity:1;pointer-events:auto;}
    .nav-drawer a{font-size:20px;font-weight:600;color:var(--c-ink);padding:12px 0;border-bottom:1px solid var(--c-rule);transition:opacity var(--tb) var(--ease);}
    .nav-drawer a:hover{opacity:.5;}
    .sh{display:flex;flex-direction:column;gap:12px;margin-bottom:56px;}
    .sh-eyebrow{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--c-light);}
    .sh-row{display:flex;align-items:baseline;justify-content:space-between;width:100%;gap:24px;}
    .sh-link{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--c-light);display:inline-flex;align-items:center;gap:6px;flex-shrink:0;transition:color var(--tb) var(--ease);}
    .sh-link:hover{color:var(--c-ink);}
    .footer{border-top:1px solid var(--c-rule);padding: clamp(32px, 5vw, 56px) 0;}
    .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
    .footer-copy{font-size:13px;font-weight:300;color:var(--c-light);}
    .footer-li{font-size:13px;font-weight:500;color:var(--c-mid);display:inline-flex;align-items:center;gap:5px;transition:color var(--tb) var(--ease);}
    .footer-li:hover{color:var(--c-ink);}
    .chip{display:inline-flex;align-items:center;font-size:11px;font-weight:500;letter-spacing:.03em;border-radius:var(--r-pill);padding:4px 12px;}
    .chip-default{background:var(--c-panel);border:1px solid var(--c-rule);color:var(--c-light);}
    .proj-next { padding:52px 0 28px;border-top:1px solid var(--c-rule); }
    /* Prev/Next project nav */
    .proj-nav { display:flex;align-items:center;justify-content:space-between;gap:24px; }
    .proj-nav-item { display:flex;flex-direction:column;gap:4px; }
    .proj-nav-item--next { align-items:flex-end;margin-left:auto; }
    .proj-nav-hint { font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--c-light); }
    .proj-nav-link { display:inline-flex;align-items:center;gap:10px;font-size:clamp(18px,2.2vw,28px);font-weight:400;letter-spacing:-.02em;color:var(--c-ink);transition:gap var(--tb) var(--spring),color var(--tb) var(--ease); }
    .proj-nav-link:hover { gap:16px;color:var(--c-mid); }
    .proj-nav-link svg { flex-shrink:0;width:20px;height:20px;transition:transform var(--tb) var(--spring); }
    .proj-nav-item--prev .proj-nav-link:hover svg { transform:translateX(-3px); }
    .proj-nav-item--next .proj-nav-link:hover svg { transform:translateX(3px); }
    @media(max-width:600px){ .proj-nav-link{font-size:16px;} }
    @media(max-width:900px){.nav-links,.nav-cta,.nav-right{display:none;}.nav-burger{display:flex;margin-left:auto;}}