:root, [data-theme="light"]{
    --color-bg: #f3f4f6;
    --color-surface:#ffffff;
    --color-surface-2:#e9e3d5;
    --color-ink:#14161a;
    --color-line:#e0dbcd;
    --color-line-strong:#14161a;
    --color-text:#14161a;
    --color-text-muted:#5f666c;
    --color-text-faint:#8a9ea7;
    --color-accent:#f07a2b;
    --color-accent-soft:#fcbd35; /* #f4b183; */
    --color-slate:#478fbc; /* #2f4858; */
    --color-slate-soft:#8a9ea7;
    --color-on-ink:#f2efe9;

    --color-card-back:hsl( 200, 100%, 100%);
    --color-card-back-attention:hsl(200, 100%, 95%);

    --font-display:'Fraunces','Georgia',serif;
    --font-body:'Switzer','Helvetica Neue',sans-serif;
    --font-mono:'Switzer','Helvetica Neue',sans-serif;
    --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
    --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
    --space-20:5rem;--space-24:6rem;--space-32:8rem;--space-40:10rem;
    --text-sm: clamp(.8125rem,.78rem + .16vw,.9375rem);
    --text-base: clamp(1rem,.96rem + .2vw,1.0625rem);
    --text-lg: clamp(1.125rem,1.05rem + .4vw,1.375rem);
    --text-xl: clamp(1.75rem,1.4rem + 1.8vw,2.75rem);
    --text-display: clamp(2.4rem,1.2rem + 5vw,5.6rem);
    --radius-sm:8px; --radius-md:8px; --radius-lg:8px; --radius-xl:16px; --radius-pill:999px;
    --shadow-sm:0 2px 8px rgba(20,22,26,.05);
    --shadow-md:0 16px 40px -8px rgba(20,22,26,.12);
    --shadow-lg:0 30px 70px -18px rgba(20,22,26,.22);
  }
  [data-theme="dark"]{
    --color-bg:#121214;
    --color-surface:#1b1c1f;
    --color-surface-2:#24262a;
    --color-ink:#f2efe9;
    --color-line:#2b2d31;
    --color-line-strong:#f2efe9;
    --color-text:#f2efe9;
    --color-text-muted:#a9adb2;
    --color-text-faint:#8a9ea7;
    --color-accent:#f68a42;
    --color-accent-soft:#f4b183;
    --color-slate:#8a9ea7;
    --color-slate-soft:#6b8494;
    --color-on-ink:#14161a;
    --shadow-sm:0 2px 8px rgba(0,0,0,.3);
    --shadow-md:0 16px 40px -8px rgba(0,0,0,.45);
    --shadow-lg:0 30px 70px -18px rgba(0,0,0,.55);

    --color-card-back:hsl( 225, 6.9%, 11.37%);
    --color-card-back-attention:hsl(225, 6.9%, 20%);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{-webkit-font-smoothing:antialiased;scroll-behavior:auto;}
  body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;transition:background .35s,color .35s;overflow-x:hidden;}
  img{display:block;max-width:100%;width:100%;height:auto;}
  a{color:inherit;}
  h1,h2,h3{font-family:var(--font-display);line-height:1.04;text-wrap:balance;font-weight:600;letter-spacing:-.01em;}
  .label{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);}
  .wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--space-8);}
  @media (max-width:640px){.wrap{padding-inline:var(--space-5);}}

  /* subtle warmth glow — negative space accent, not texture */
  .glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none;z-index:0;}
  [data-theme="dark"] .glow{opacity:.22;}

  header{position:sticky;top:0;z-index:50;padding-top:var(--space-4);}
  .nav-capsule{
    display:flex;align-items:center;justify-content:space-between;
    background:color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid var(--color-line);
    border-radius:var(--radius-pill);
    padding:.55rem .6rem .55rem 1.3rem;
    box-shadow:var(--shadow-sm);
  }
  .logo{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;font-weight:500;}
  .logo svg{color:var(--color-accent);}
  .navlinks{display:flex;gap:var(--space-8);font-size:var(--text-sm);}
  .navlinks a{text-decoration:none;color:var(--color-text-muted);position:relative;padding-bottom:2px;}
  .navlinks a:hover{color:var(--color-text);}
  .navlinks a.active{color:var(--color-text);}
  @media (max-width:760px){.navlinks{display:none;}}
  .navright{display:flex;align-items:center;gap:var(--space-3);}
  .theme-btn{border:1px solid var(--color-line);border-radius:var(--radius-pill);width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--color-bg);flex-shrink:0; color:var(--color-text);}
  .btn{
    display:inline-flex;align-items:center;gap:var(--space-2);
    font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;
    border-radius:var(--radius-pill);
    border:1px solid var(--color-line-strong);color:var(--color-text);
    padding:.75em 1.5em;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s,color .25s;
  }
  .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--color-slate);color:var(--color-slate);}
  .btn.solid{background:var(--color-accent);border-color:var(--color-accent);color:#14161a;}
  .btn.solid:hover{background:color-mix(in srgb, var(--color-accent) 88%, black);border-color:color-mix(in srgb, var(--color-accent) 88%, black);color:#14161a;box-shadow:var(--shadow-md);}
  .btn.small{padding:.55em 1.15em;font-size:var(--text-sm);}

  /* hero */
  .hero{padding-block:var(--space-24) var(--space-24);position:relative;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-16);align-items:center;position:relative;z-index:1;}
  @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--space-12);}}
  .kicker{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);}
  .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);}
  h1.headline{font-size:var(--text-display);}
  h1.headline em{font-style:italic;color:var(--color-accent);}
  .lede{margin-top:var(--space-6);font-size:var(--text-lg);color:var(--color-text-muted);max-width:44ch;}
  .hero-cta{display:flex;gap:var(--space-4);margin-top:var(--space-10);flex-wrap:wrap;}

  .hero-figure{position:relative;}
  .frame{
    border-radius:var(--radius-xl);
    overflow:hidden;
    background:var(--color-surface);
    box-shadow:var(--shadow-lg);
    position:relative;
  }
  .frame img{filter:grayscale(1) contrast(1.05);aspect-ratio:1/1.05;object-fit:cover;}
  .chip{
    position:absolute;left:var(--space-6);bottom:var(--space-6);
    background:var(--color-ink);color:var(--color-on-ink);
    border-radius:var(--radius-pill);
    padding:.7em 1.3em;
    font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.08em;
    display:flex;align-items:center;gap:.6em;
    box-shadow:var(--shadow-md);
  }
  .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent-soft);}

  .coord-tag{
    position:absolute;top:var(--space-5);right:var(--space-5);z-index:2;
    display:flex;align-items:center;gap:.5em;
    background:color-mix(in srgb, var(--color-bg) 78%, transparent);
    backdrop-filter:blur(10px);
    border:1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    border-radius:var(--radius-pill);
    padding:.5em 1em;
    font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;letter-spacing:.04em;
    color:var(--color-text);
  }
  .coord-tag svg{color:var(--color-slate);flex-shrink:0;}

  /* logo strip */
  .logos-section{padding-block:var(--space-16) var(--space-12);}
  .logos-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-10);}
  .logos-head .line{flex:1;height:1px;background:var(--color-line);}
  .logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-6) var(--space-7);align-items:center;}
  @media (max-width:900px){.logo-grid{grid-template-columns:repeat(4,1fr);}}
  @media (max-width:520px){.logo-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-5);}}
  .logo-tile{display:flex;align-items:center;justify-content:center;}
  .logo-tile img{max-height:56px;width:auto;filter:grayscale(1);opacity:.5;transition:opacity .25s;}
  [data-theme="dark"] .logo-tile img{filter:grayscale(1) invert(1);opacity:.42;}
  .logo-tile:hover img{opacity:.85;}

  /* stats bento */
  .stats-section{padding-block:var(--space-12) var(--space-24);}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);}
  @media (max-width:800px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
  .stat-card{
    background:var(--color-surface);border:0px solid var(--color-line);border-top:3px solid var(--color-accent);
    border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);
    box-shadow:var(--shadow-sm);
  }
  .stat-card:nth-child(2n){border-top-color:var(--color-slate);}
  .stat-num{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text);}
  .stat-label{margin-top:var(--space-2);color:var(--color-text-muted);}

  section{padding-block:var(--space-24);}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-8);margin-bottom:var(--space-10);}
  .section-head h2{font-size:var(--text-xl);}
  .index-num{font-family:var(--font-mono);color:var(--color-text-faint);font-size:var(--text-sm);}

  /* dark philosophy band */
  .philosophy{padding-block:0;}
  .philosophy-card{
    background:var(--color-ink);color:var(--color-on-ink);
    border-radius:var(--radius-xl);
    padding:var(--space-16) var(--space-12);
    position:relative;overflow:hidden;
  }
  [data-theme="dark"] .philosophy-card{background:var(--color-surface-2);}
  .philosophy-card blockquote{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;max-width:26ch;line-height:1.12;}
  [data-theme="dark"] .philosophy-card blockquote{color:var(--color-text);}
  .philosophy-card .accent{color:var(--color-accent-soft);font-style:italic;}
  .philosophy-card .accent-blue{color:var(--color-slate);font-style:italic;}
  .philosophy-meta{display:flex;gap:var(--space-10);margin-top:var(--space-10);flex-wrap:wrap;}
  .philosophy-meta div{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;opacity:.7;}
  .philosophy-meta strong{display:block;font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;opacity:1;margin-top:.35em;}

  /* work bento grid */
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
  @media (max-width:900px){.work-grid{grid-template-columns:1fr;}}
  .work-card{
    background:var(--color-surface);border:0px solid var(--color-line);
    border-radius:var(--radius-lg);padding:var(--space-8);
    position:relative;transition:transform .3s,box-shadow .3s,border-color .3s;
    display:flex;flex-direction:column;
    background-color: var(--color-card-back);
    transition: background-color 1.5s ease, transform 0.5s ease;
  }
  .work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent; background-color:var(--color-card-back-attention);}
  .work-card.feature{grid-column:span 2;}
  @media (max-width:900px){.work-card.feature{grid-column:span 1;}}
  .work-card.wide{grid-column:span 3;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-6);}
  .work-card.wide .wide-text{flex:1;}
  .work-card.wide .no{margin-bottom:0;}
  .work-card.wide .org{margin-top:0;padding-top:0;white-space:nowrap;}
  @media (max-width:900px){.work-card.wide{grid-column:span 1;flex-direction:column;align-items:flex-start;}.work-card.wide .org{margin-top:var(--space-4);}}
  .work-card .no{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-faint);}
  .work-card h3{margin-top:var(--space-4);font-size:var(--text-lg);}
  .work-card.feature h3{font-size:var(--text-xl);}
  .work-card p{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);max-width:48ch;}
  .work-card .org{margin-top:auto;padding-top:var(--space-6);display:flex;align-items:center;}
  .work-card .org-logo{height:64px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.8;}
  [data-theme="dark"] .work-card .org-logo{filter:grayscale(1) invert(1);opacity:.75;}
  .work-card .org-mark{display:flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);letter-spacing:.06em;}
  .work-card .org-mark svg{color:var(--color-accent);flex-shrink:0;}

  /* experience */
  .timeline{display:flex;flex-direction:column;gap:var(--space-4);}
  .trow{
    display:grid;grid-template-columns:150px 1fr 220px;gap:var(--space-8);
    padding:var(--space-8);align-items:start;
    background:var(--color-surface);border:0px solid var(--color-line);
    border-radius:var(--radius-lg);transition:box-shadow .3s,transform .3s;
  }
  .trow:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);}
  @media (max-width:760px){.trow{grid-template-columns:1fr;gap:var(--space-3);}}
  .trow .yr{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);}
  .trow h3{font-size:var(--text-lg);font-weight:600;}
  .trow .co{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1);}
  .trow p{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-sm);max-width:60ch;}
  .trow .tags{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-start;}
  @media (min-width:761px){.trow .tags{justify-content:flex-end;}}
  .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-pill);background:var(--color-surface-2);padding:.4em .8em;color:var(--color-text-muted);}
  .tag:nth-child(2n){color:var(--color-slate);}

  /* about / education */
  .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:start;}
  @media (max-width:800px){.about-grid{grid-template-columns:1fr;}}
  .about-card{background:var(--color-surface);border:0px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-10);}
  .about-card p{color:var(--color-text-muted);margin-bottom:var(--space-4);max-width:60ch;}
  .about-card p:last-of-type{margin-bottom:0;}
  .edu-list{display:flex;flex-direction:column;gap:var(--space-4);}
  .edu-item{background:var(--color-surface);border:0px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-6);display:flex;}
  .edu-item .deg{font-weight:600;}
  .edu-item .school{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1);}
  .edu-item .yr{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);}
  .edu-item .edu-text{flex:1;}
  .edu-item .org img.org-logo{height:50px;}

  /* footer */
  footer{padding-block:var(--space-24) var(--space-16);}
  .foot-card{
    background:var(--color-ink);color:var(--color-on-ink);
    border-radius:var(--radius-xl);padding:var(--space-16) var(--space-12);
    position:relative;overflow:hidden;
  }
  [data-theme="dark"] .foot-card{background:var(--color-surface-2); color:var(--color-text);}
  .foot-grid{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--space-8);position:relative;z-index:1;}
  .foot-grid h2{font-size:var(--text-xl);max-width:20ch;}
  .foot-links{display:flex;gap:var(--space-3);flex-wrap:wrap;}
  .foot-links a{text-decoration:none;color:var(--color-on-ink);border:1px solid color-mix(in srgb, var(--color-on-ink) 30%, transparent);border-radius:var(--radius-pill);padding:.75em 1.4em;font-size:var(--text-sm);transition:background .25s,color .25s;}
  [data-theme="dark"] .foot-links a{color:var(--color-text);border-color:var(--color-text);}
  .foot-links a:hover{background:var(--color-accent);border-color:var(--color-accent);color:#14161a;}
  .fine{margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid color-mix(in srgb, var(--color-on-ink) 18%, transparent);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-sm);opacity:.65;flex-wrap:wrap;gap:var(--space-3);position:relative;z-index:1;}

/* =====================================================
   Shared additions: work cards as links + case study pages
   ===================================================== */
a.work-card{text-decoration:none;color:var(--color-text);}
.work-card .org{justify-content:space-between;gap:var(--space-4);}
.work-card .go{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-faint);letter-spacing:.04em;white-space:nowrap;transition:color .25s,transform .25s;}
.work-card:hover .go{color:var(--color-slate);transform:translateX(3px);}
img.is-missing{visibility:hidden;}

/* breadcrumb + hero */
.breadcrumb{padding-top:var(--space-8);}
.breadcrumb-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);}
.breadcrumb-row a{text-decoration:none;color:var(--color-text-muted);}
.breadcrumb-row a:hover{color:var(--color-text);}
.breadcrumb-row .here{color:var(--color-text);}
.case-hero{padding-block:var(--space-12) var(--space-12);position:relative;}
.case-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6);position:relative;z-index:1;}
.case-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);}
.status-pill{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;color:var(--color-slate);border:1px solid color-mix(in srgb,var(--color-slate) 45%,transparent);border-radius:var(--radius-pill);padding:.2em .8em;}
.case-title{font-size:var(--text-display);max-width:18ch;position:relative;z-index:1;}
.case-sub{margin-top:var(--space-6);font-size:var(--text-lg);color:var(--color-text-muted);max-width:56ch;position:relative;z-index:1;}
.case-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6) var(--space-8);margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-line);position:relative;z-index:1;}
.case-meta .k{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint);}
.case-meta .v{margin-top:.3em;font-weight:500;}
.case-visual{margin-top:var(--space-12);border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-lg);position:relative;z-index:1;}
.case-visual img{width:100%;aspect-ratio:16/8;object-fit:cover;}
.case-visual.contain img{object-fit:contain;aspect-ratio:auto;max-height:620px;}
.case-visual .slot{margin-top:0;}
.case-visual .slot-ph{border:0;border-radius:0;min-height:clamp(260px,34vw,440px);}

/* stats + at a glance */
.case-stats{padding-block:var(--space-8) var(--space-4);}
.stats-grid.n3{grid-template-columns:repeat(3,1fr);}
@media (max-width:800px){.stats-grid.n3{grid-template-columns:1fr;}}
.stat-num.long{font-size:var(--text-lg);padding-block:.45em;}
.case-note{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--color-text-faint);}
.glance{padding-block:var(--space-12) var(--space-8);}
.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
@media (max-width:900px){.glance-grid{grid-template-columns:1fr;}}
.glance-card{background:var(--color-surface);border-radius:var(--radius-lg);border-top:3px solid var(--color-accent);padding:var(--space-8) var(--space-6);box-shadow:var(--shadow-sm);}
.glance-card:nth-child(2){border-top-color:var(--color-slate);}
.glance-card p{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-base);}

/* scroll cue */
.story-cue{padding-block:var(--space-16) var(--space-8);}
.story-cue-row{display:flex;align-items:center;gap:var(--space-4);}
.story-cue-row .line{flex:1;height:1px;background:var(--color-line);}
.story-cue-row .arrow{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--color-line);color:var(--color-slate);flex-shrink:0;}
.story-cue p{margin-top:var(--space-4);color:var(--color-text-muted);max-width:56ch;}

/* long form */
.story-wrap{padding-block:var(--space-8) var(--space-16);}
.story{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-16);align-items:start;}
@media (max-width:960px){.story{grid-template-columns:1fr;}.toc{display:none;}}
.toc{position:sticky;top:110px;}
.toc .label{display:block;margin-bottom:var(--space-4);}
.toc a{display:block;text-decoration:none;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.35;padding:.5em 0 .5em var(--space-4);border-left:2px solid var(--color-line);transition:color .2s,border-color .2s;}
.toc a:hover{color:var(--color-text);}
.toc a.active{color:var(--color-text);border-left-color:var(--color-accent);font-weight:500;}
.story-main{max-width:820px;}
.story-sec{padding-block:0;scroll-margin-top:110px;}
.story-sec + .story-sec{margin-top:var(--space-20);padding-top:var(--space-20);border-top:1px solid var(--color-line);}
.story-sec .eyebrow{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.12em;color:var(--color-accent);}
.story-sec h2{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-6);}
.story-sec h3{font-size:var(--text-lg);margin:var(--space-10) 0 var(--space-3);}
.story-sec p{color:var(--color-text-muted);max-width:68ch;}
.story-sec p + p{margin-top:var(--space-5);}
.story-sec p a{color:var(--color-slate);}
.story-sec ul{list-style:none;display:grid;gap:var(--space-3);margin-top:var(--space-5);max-width:68ch;}
.story-sec li{position:relative;padding-left:1.5em;color:var(--color-text-muted);}
.story-sec li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--color-slate);}
.story-sec li strong{color:var(--color-text);font-weight:600;}
.pill-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);}
.pill{font-size:var(--text-sm);background:var(--color-surface);border-radius:var(--radius-pill);padding:.35em .95em;color:var(--color-text-muted);box-shadow:var(--shadow-sm);}

/* figures */
.fig{margin-top:var(--space-8);}
.fig img{border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm);}
.fig figcaption,.slot figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-faint);}
.stage{background:color-mix(in srgb,var(--color-slate) 12%,var(--color-surface));border-radius:var(--radius-xl);padding:var(--space-6);}
.stage img{box-shadow:none;background:transparent;border-radius:0;}
.gallery{display:grid;gap:var(--space-5);margin-top:var(--space-8);}
.gallery .fig{margin-top:0;}
.gallery.g2{grid-template-columns:repeat(2,1fr);}
.gallery.g3{grid-template-columns:repeat(3,1fr);}
.gallery.g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:760px){.gallery.g3,.gallery.g4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gallery.g2,.gallery.g3,.gallery.g4{grid-template-columns:1fr;}}
.gallery.phones{max-width:700px;}
.gallery.phones img{border-radius:var(--radius-lg);}
.video-frame{margin-top:var(--space-8);display:flex;flex-direction:column;align-items:center;}
.video-frame video{width:100%;max-width:300px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:#000;}
.video-frame figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-faint);}
.embed{margin-top:var(--space-8);}
.embed iframe{width:100%;height:560px;border:0;border-radius:var(--radius-lg);background:var(--color-surface-2);}
@media (max-width:640px){.embed iframe{height:420px;}}

/* image slots (drop a file at the suggested path and it appears automatically) */
.slot{margin-top:var(--space-8);}
.slot-ph{display:flex;gap:var(--space-5);align-items:flex-start;min-height:clamp(220px,26vw,320px);padding:var(--space-8);border:1.5px dashed color-mix(in srgb,var(--color-slate) 60%,transparent);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-slate) 8%,var(--color-surface));}
.slot.tall .slot-ph{min-height:clamp(300px,36vw,460px);}
.slot-ph > svg{flex-shrink:0;color:var(--color-slate);margin-top:.2em;}
.slot-label{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);}
.slot-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);line-height:1.15;margin-top:var(--space-2);color:var(--color-text);}
.slot-desc{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-sm);max-width:58ch;}
.slot-file{display:inline-block;margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);background:var(--color-surface);color:var(--color-text-muted);border-radius:var(--radius-sm);padding:.25em .7em;}
.slot.is-filled img{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.case-visual .slot.is-filled img{border-radius:0;box-shadow:none;aspect-ratio:16/8;object-fit:cover;}

/* pager */
.pager-section{padding-block:var(--space-16) var(--space-8);}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);}
@media (max-width:700px){.pager{grid-template-columns:1fr;}}
.pager a{background:var(--color-card-back);border-radius:var(--radius-lg);padding:var(--space-8);text-decoration:none;color:var(--color-text);display:flex;flex-direction:column;transition:transform .5s ease,box-shadow .3s,background-color 1.5s ease;}
.pager a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background-color:var(--color-card-back-attention);}
.pager .dir{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);}
.pager h3{margin-top:var(--space-3);font-size:var(--text-lg);}
.pager .org-logo{margin-top:var(--space-5);height:48px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.8;}
[data-theme="dark"] .pager .org-logo{filter:grayscale(1) invert(1);opacity:.75;}
.pager a.next{text-align:right;align-items:flex-end;}
.back-row{margin-top:var(--space-8);display:flex;justify-content:center;}

/* =====================================================
   Motion system (scroll reveals, pinned stories, local nav)
   Gated behind html.js, which is only set when the visitor has
   not requested reduced motion.
   ===================================================== */
:root{--ease-out:cubic-bezier(.16,1,.3,1);}

/* progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--color-accent);transform-origin:0 50%;transform:scaleX(var(--prog,0));z-index:80;pointer-events:none;}

/* local section nav (replaces left rail) */
.story{display:block;}
.story-main{max-width:none;}
.localnav-wrap{position:sticky;top:84px;z-index:40;display:flex;justify-content:center;pointer-events:none;margin-bottom:var(--space-10);}
.localnav{pointer-events:auto;display:flex;align-items:center;gap:var(--space-1);max-width:100%;background:color-mix(in srgb,var(--color-surface) 94%,transparent);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:.3rem;box-shadow:var(--shadow-sm);overflow-x:auto;scrollbar-width:none;}
.localnav::-webkit-scrollbar{display:none;}
.localnav a{white-space:nowrap;text-decoration:none;font-size:var(--text-sm);color:var(--color-text-muted);padding:.45em 1em;border-radius:var(--radius-pill);transition:background .3s var(--ease-out),color .3s var(--ease-out);}
.localnav a:hover{color:var(--color-text);}
.localnav a.active{background:var(--color-ink);color:var(--color-on-ink);}
.story-sec{scroll-margin-top:150px;}
.fig{max-width:920px;}
.fig.full{max-width:none;}
.fig.sm{max-width:560px;}
.slot{max-width:none;}

/* statement band */
.statement{padding-block:var(--space-8);}
.statement-card{background:var(--color-ink);color:var(--color-on-ink);border-radius:var(--radius-xl);padding:var(--space-20) var(--space-12);position:relative;overflow:hidden;}
[data-theme="dark"] .statement-card{background:var(--color-surface-2);color:var(--color-text);}
.statement-card p{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;line-height:1.14;max-width:30ch;text-wrap:balance;position:relative;z-index:1;}
.statement-card .hl{color:var(--color-accent-soft);font-style:italic;}
.statement-card .hl-b{color:var(--color-slate);font-style:italic;}
@media (max-width:640px){.statement-card{padding:var(--space-12) var(--space-6);}}
.js .sw{opacity:.2;transition:opacity .45s var(--ease-out);}
.js .sw.on{opacity:1;}

/* hero title: word by word */
.case-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;}
.case-title .w > span{display:inline-block;}
.js .case-title .w > span{transform:translateY(110%);opacity:0;filter:blur(6px);transition:transform 1s var(--ease-out),opacity .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms + 120ms);}
.js.ready .case-title .w > span{transform:none;opacity:1;filter:none;}

/* hero visual grows into place as you scroll */
.js .case-visual{transform:scale(var(--s,.9));transform-origin:50% 0;will-change:transform;}
.js .case-visual > img,.js .case-visual > .slot{transform:scale(var(--is,1.08));transform-origin:50% 50%;}
.js .case-visual{overflow:hidden;}

/* reveals: opacity + focus pull, no layout movement */
.js .case-kicker,.js .case-sub,.js .breadcrumb-row,
.js .case-meta > div,.js .glance-card,.js .stat-card,
.js .story-cue-row,.js .story-cue p,.js .pager a,
.js .story-sec > .eyebrow,.js .story-sec > h2,.js .story-sec > h3,.js .story-sec > p,.js .story-sec > ul > li,
.js .pill-list .pill,.js .case-note{opacity:0;filter:blur(8px);transition:opacity .9s var(--ease-out),filter .9s var(--ease-out),transform .5s ease,box-shadow .3s,background-color 1.5s ease;transition-delay:var(--d,0ms);}
.js .case-kicker.in,.js .case-sub.in,.js .breadcrumb-row.in,
.js .case-meta > div.in,.js .glance-card.in,.js .stat-card.in,
.js .story-cue-row.in,.js .story-cue p.in,.js .pager a.in,
.js .story-sec > .eyebrow.in,.js .story-sec > h2.in,.js .story-sec > h3.in,.js .story-sec > p.in,.js .story-sec > ul > li.in,
.js .pill-list .pill.in,.js .case-note.in{opacity:1;filter:none;}
.js .case-sub{--d:380ms;}
.js .pager a.in{transition-delay:0ms;}
/* media eases in: focus pull + gentle scale (transform does not affect layout) */
.js .story-sec > .fig,.js .story-sec > .slot,.js .story-sec > .gallery,.js .story-sec > .video-frame,.js .story-sec > .embed{opacity:0;filter:blur(10px);transform:scale(.96);transform-origin:50% 0;transition:opacity 1s var(--ease-out),filter 1s var(--ease-out),transform 1.2s var(--ease-out);}
.js .story-sec > .fig.in,.js .story-sec > .slot.in,.js .story-sec > .gallery.in,.js .story-sec > .video-frame.in,.js .story-sec > .embed.in{opacity:1;filter:none;transform:none;}

/* scroll cue arrow */
@keyframes nudge{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
.js .story-cue .arrow svg{animation:nudge 2.2s var(--ease-out) infinite;}

/* pinned storytelling */
.pin{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-12);margin-top:var(--space-8);}
.pin-steps{padding-block:var(--space-4);}
.pin-step{min-height:58vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s var(--ease-out);}
.pin-step.active{opacity:1;}
.story-sec .pin-step h3{margin:0 0 var(--space-3);}
.story-sec .pin-step .no{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.12em;color:var(--color-accent);margin-bottom:var(--space-3);}
.pin-step p{color:var(--color-text-muted);max-width:44ch;}
.pin-stage-col{position:relative;}
.pin-stage{position:sticky;top:150px;height:min(64vh,540px);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-slate) 12%,var(--color-surface));overflow:hidden;}
.pin-stage img{position:absolute;inset:var(--space-6);width:calc(100% - 3rem);height:calc(100% - 3rem);object-fit:contain;opacity:0;transform:scale(.95);transition:opacity .7s var(--ease-out),transform 1s var(--ease-out);}
.pin-stage img.on{opacity:1;transform:none;}
.pin:not(.live) .pin-stage img:first-child{opacity:1;transform:none;}
.pin-inline{display:none;}
@media (max-width:960px){
  .pin{display:block;}
  .pin-stage-col{display:none;}
  .pin-step{min-height:0;opacity:1;margin-top:var(--space-10);}
  .pin-inline{display:block;margin-top:var(--space-5);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-slate) 12%,var(--color-surface));padding:var(--space-5);}
}

/* horizontal swipe gallery */
.hscroll-wrap{margin-top:var(--space-8);}
.hscroll{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:var(--space-2);}
.hscroll::-webkit-scrollbar{display:none;}
.hscroll figure{flex:0 0 var(--w,420px);scroll-snap-align:start;margin:0;}
.hscroll figure.stagepad{background:color-mix(in srgb,var(--color-slate) 12%,var(--color-surface));border-radius:var(--radius-lg);padding:var(--space-5);}
.hscroll img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--color-surface);}
.hscroll figure.stagepad img{box-shadow:none;background:transparent;border-radius:0;}
.hscroll figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-faint);}
.hscroll.w-sm{--w:250px;}.hscroll.w-md{--w:340px;}.hscroll.w-lg{--w:620px;}
@media (max-width:640px){.hscroll.w-md{--w:78vw;}.hscroll.w-lg{--w:86vw;}}
.hs-ctrl{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-4);}
.hs-ctrl button{width:40px;height:40px;border-radius:50%;border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,color .25s,opacity .25s;}
.hs-ctrl button:hover:not(:disabled){background:var(--color-ink);color:var(--color-on-ink);}
.hs-ctrl button:disabled{opacity:.35;cursor:default;}

/* ===== story cue: centered instructional copy ===== */
.story-cue{text-align:center;}
.story-cue p{margin:0 auto;max-width:48ch;font-style:italic;color:var(--color-text-faint);font-size:var(--text-base);}
.story-cue .arrow{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--color-line);color:var(--color-slate);margin-top:var(--space-5);}
.js .story-cue .arrow{opacity:0;transition:opacity .9s var(--ease-out);transition-delay:.25s;}
.js .story-cue .arrow.in{opacity:1;}

/* ===== extra figure + hero variants ===== */
.fig.xs{max-width:300px;}
.fig.xs img{box-shadow:none;background:transparent;}
.case-visual.stage-hero{background:color-mix(in srgb,var(--color-slate) 14%,var(--color-surface));display:flex;justify-content:center;}
.case-visual.stage-hero img{width:auto;max-width:100%;max-height:640px;aspect-ratio:auto;object-fit:contain;padding:var(--space-8);}

/* ===== full-page previews that scroll inside a browser frame ===== */
.pv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8);}
.pv{margin:0;}
.pv-frame{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-md);}
.pv-bar{display:flex;gap:6px;align-items:center;height:28px;padding-inline:12px;background:var(--color-surface-2);}
.pv-bar i{width:8px;height:8px;border-radius:50%;background:var(--color-line);display:block;}
.pv-view{--fh:520px;height:var(--fh);overflow:hidden;position:relative;}
.pv-view img{width:100%;height:auto;display:block;}
.pv figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-faint);text-align:center;}
.js .pv-view img{animation:pvscroll var(--pvd,24s) ease-in-out infinite alternate;animation-delay:var(--pvl,0s);}
.js .pv:hover .pv-view img{animation-play-state:paused;}
.pv:nth-child(1){--pvd:20s;}.pv:nth-child(2){--pvd:24s;--pvl:-6s;}.pv:nth-child(3){--pvd:34s;--pvl:-12s;}
@keyframes pvscroll{from{transform:translateY(0);}to{transform:translateY(calc(-100% + var(--fh)));}}
@media (max-width:760px){
  .pv-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-4);padding-bottom:var(--space-3);}
  .pv{flex:0 0 78%;scroll-snap-align:start;}
  .pv-view{--fh:460px;}
}
.js .story-sec > .pv-row{opacity:0;filter:blur(10px);transform:scale(.96);transform-origin:50% 0;transition:opacity 1s var(--ease-out),filter 1s var(--ease-out),transform 1.2s var(--ease-out);}
.js .story-sec > .pv-row.in{opacity:1;filter:none;transform:none;}

/* ===== homepage motion ===== */
h1.headline .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em 0;margin:0 -.08em -.14em 0;}
h1.headline .w > span{display:inline-block;}
.js h1.headline .w > span{transform:translateY(110%);opacity:0;filter:blur(6px);transition:transform 1s var(--ease-out),opacity .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms + 150ms);}
.js.ready h1.headline .w > span{transform:none;opacity:1;filter:none;}
.js .hero .kicker,.js .hero .lede,.js .hero .hero-cta,.js .hero-figure{opacity:0;filter:blur(8px);translate:0 24px;transition:opacity 1s var(--ease-out),filter 1s var(--ease-out),translate 1.1s var(--ease-out);}
.js .hero .kicker{transition-delay:.05s;}
.js .hero .lede{transition-delay:.55s;}
.js .hero .hero-cta{transition-delay:.7s;}
.js .hero-figure{translate:0 40px;transition-delay:.35s;transition-duration:1.2s;}
.js.ready .hero .kicker,.js.ready .hero .lede,.js.ready .hero .hero-cta,.js.ready .hero-figure{opacity:1;filter:none;translate:0 0;}
.js .hero-figure .frame img{transform:translateY(calc(var(--py,0) * 1px)) scale(1.14);will-change:transform;}
.js .hero .glow{transform:translateY(calc(var(--gy,0) * 1px));}

.js .section-head,.js .logos-head,.js .logo-tile,.js .work-card,.js .trow,.js .about-card,.js .edu-item,.js .philosophy-card,.js .foot-card{
  opacity:0;filter:blur(8px);translate:0 28px;
  transition:opacity .9s var(--ease-out),filter .9s var(--ease-out),translate 1s var(--ease-out),transform .5s ease,box-shadow .3s,background-color 1.5s ease;
  transition-delay:var(--d,0ms);}
.js .section-head.in,.js .logos-head.in,.js .logo-tile.in,.js .work-card.in,.js .trow.in,.js .about-card.in,.js .edu-item.in,.js .philosophy-card.in,.js .foot-card.in{opacity:1;filter:none;translate:0 0;}
.js .work-card.done,.js .trow.done{transition-delay:0ms;transition:background-color 1.5s ease,transform .5s ease,box-shadow .3s;}
.js .logo-tile img{transition:opacity .25s;}
.js .philosophy-card blockquote .sw{opacity:.18;}
.js .philosophy-card blockquote .sw.on{opacity:1;}
.js .stats-section .stat-card{translate:0 28px;transition:opacity .9s var(--ease-out),filter .9s var(--ease-out),translate 1s var(--ease-out);transition-delay:var(--d,0ms);}
.js .stats-section .stat-card.in{translate:0 0;}
.case-visual.native img{aspect-ratio:auto;height:auto;object-fit:contain;}
.case-visual.stage-hero img{max-height:560px;padding:var(--space-8) var(--space-6);}
html,body{overflow-x:clip;}

/* ===== selected work showcase ===== */
.showcase{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12);align-items:stretch;}
.sc-list{display:flex;flex-direction:column;justify-content:center;}
.sc-item{position:relative;display:grid;grid-template-columns:2.6rem 1fr auto;align-items:baseline;gap:var(--space-3);padding:var(--space-4) 0;text-decoration:none;color:var(--color-text-faint);border-bottom:1px solid var(--color-line);transition:color .35s var(--ease-out),padding .35s var(--ease-out);}
.sc-item:first-child{border-top:1px solid var(--color-line);}
.sc-item .no{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;}
.sc-item .t{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;line-height:1.1;}
.sc-item .arr{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s var(--ease-out);color:var(--color-accent);}
.sc-item:hover{color:var(--color-text);}
.sc-item.is-active{color:var(--color-text);padding-left:var(--space-3);}
.sc-item.is-active .no{color:var(--color-accent);}
.sc-item.is-active .arr{opacity:1;transform:none;}
.sc-item .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%;}
.sc-item.is-active .bar{transform:scaleX(1);}
.js .sc-item.is-active .bar{transform:scaleX(0);animation:scbar 6.5s linear forwards;}
.showcase.is-paused .sc-item.is-active .bar{animation-play-state:paused;}
@keyframes scbar{to{transform:scaleX(1);}}
.sc-stage{position:relative;min-height:620px;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-lg);}
.sc-slide{position:absolute;inset:0;display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out),visibility 0s linear .7s;}
.sc-slide.is-active{opacity:1;visibility:visible;transition:opacity .7s var(--ease-out),visibility 0s;z-index:1;}
.sc-media{flex:0 0 62%;min-height:0;position:relative;overflow:hidden;background:var(--color-surface-2);}
.sc-media.tint{background:color-mix(in srgb,var(--color-slate) 14%,var(--color-surface));}
.sc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);}
.sc-media.contain img,.sc-media.tint img{object-fit:contain;padding:var(--space-6);}
.sc-media.flush img{padding:0;}
.js .sc-media img{transform:scale(1.07);translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -8px);transition:transform 1.8s var(--ease-out),translate .6s var(--ease-out);}
.js .sc-slide.is-active .sc-media img{transform:scale(1.02);}
.sc-info{flex:1;padding:var(--space-5) var(--space-8) var(--space-6);background:var(--color-surface);position:relative;}
.sc-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.sc-meta .no{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-faint);letter-spacing:.06em;}
.sc-info .org-logo{height:38px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1);opacity:.8;}
[data-theme="dark"] .sc-info .org-logo{filter:grayscale(1) invert(1);opacity:.75;}
.sc-info h3{margin-top:var(--space-3);font-size:var(--text-lg);}
.sc-info p{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-base);max-width:52ch;}
.sc-info .go{display:inline-flex;margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.04em;color:var(--color-accent);transition:transform .3s var(--ease-out);}
.sc-slide:hover .go{transform:translateX(4px);}
.js .sc-slide .sc-info > *{opacity:0;translate:0 14px;transition:opacity .6s var(--ease-out),translate .7s var(--ease-out);}
.js .sc-slide.is-active .sc-info > *{opacity:1;translate:0 0;transition-delay:calc(var(--k,0) * 70ms + 180ms);}
.sc-info > :nth-child(2){--k:1;}.sc-info > :nth-child(3){--k:2;}.sc-info > :nth-child(4){--k:3;}
.js .showcase{opacity:0;filter:blur(8px);translate:0 28px;transition:opacity .9s var(--ease-out),filter .9s var(--ease-out),translate 1s var(--ease-out);}
.js .showcase.in{opacity:1;filter:none;translate:0 0;}
@media (max-width:900px){
  .showcase{grid-template-columns:1fr;gap:var(--space-5);}
  .sc-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity;gap:var(--space-2);padding-bottom:var(--space-2);margin-inline:calc(var(--space-6) * -1);padding-inline:var(--space-6);scrollbar-width:none;}
  .sc-list::-webkit-scrollbar{display:none;}
  .sc-item,.sc-item:first-child{flex:0 0 auto;display:flex;gap:.6em;align-items:baseline;border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:.55em 1.1em;scroll-snap-align:start;white-space:nowrap;}
  .sc-item.is-active{padding-left:1.1em;background:var(--color-ink);color:var(--color-on-ink);border-color:var(--color-ink);}
  .sc-item .t{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;}
  .sc-item .arr,.sc-item .bar{display:none;}
  .sc-stage{min-height:560px;}
  .sc-info{padding:var(--space-5) var(--space-6) var(--space-6);}
  .sc-info h3{font-size:var(--text-lg);}
}

/* ===== selected work: horizontal scroll-pinned gallery ===== */
#work.pg-section{padding-block:0;}
.pg-sticky{padding-block:var(--space-24) var(--space-16);}
.pg-sticky .section-head{margin-bottom:var(--space-8);}
.pg-viewport{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;}
.pg-viewport::-webkit-scrollbar{display:none;}
.pg-track{display:flex;gap:var(--space-6);width:max-content;padding-inline:var(--pg-pad,var(--space-8));padding-block:var(--space-4) var(--space-8);}
.pg-card{--s:1;--o:1;--ix:0;flex:0 0 clamp(290px,80vw,440px);height:clamp(440px,64vh,540px);display:flex;flex-direction:column;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-lg);text-decoration:none;color:var(--color-text);scroll-snap-align:start;transform:scale(var(--s));opacity:var(--o);transform-origin:50% 60%;transition:box-shadow .4s var(--ease-out);}
.pg-card:hover{box-shadow:0 30px 60px -20px rgba(20,22,26,.28);}
.pg-media{flex:0 0 56%;min-height:0;position:relative;overflow:hidden;background:var(--color-surface-2);}
.pg-media.tint{background:color-mix(in srgb,var(--color-slate) 14%,var(--color-surface));}
.pg-media img{position:absolute;inset:-4% -8%;width:116%;height:108%;max-width:none;object-fit:cover;translate:calc(var(--ix) * 1px) 0;transition:transform 1.2s var(--ease-out);}
.pg-media.contain img{object-fit:contain;padding:var(--space-5);}
.pg-media.flush img{padding:0;}
.pg-card:hover .pg-media img{transform:scale(1.05);}
.pg-info{flex:1;padding:var(--space-5) var(--space-6) var(--space-6);display:flex;flex-direction:column;}
.pg-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.pg-meta .no{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-faint);letter-spacing:.06em;}
.pg-info .org-logo{height:34px;width:auto;max-width:100px;object-fit:contain;filter:grayscale(1);opacity:.8;}
[data-theme="dark"] .pg-info .org-logo{filter:grayscale(1) invert(1);opacity:.75;}
.pg-info h3{margin-top:var(--space-3);font-size:var(--text-lg);}
.pg-info p{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-sm);max-width:44ch;}
.pg-info .go{margin-top:auto;padding-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.04em;color:var(--color-accent);transition:transform .3s var(--ease-out);}
.pg-card:hover .go{transform:translateX(4px);}
.pg-foot{display:none;}
@media (max-width:900px){.pg-sticky{padding-block:var(--space-16) var(--space-12);}.pg-card{height:480px;}}

/* pinned mode (desktop, motion allowed) */
.js .pg.is-pinned{height:var(--pg-h,320vh);}
.js .pg.is-pinned .pg-sticky{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-block:92px 24px;overflow:hidden;}
.js .pg.is-pinned .section-head{margin-bottom:var(--space-4);}
.js .pg.is-pinned .pg-viewport{overflow:visible;}
.js .pg.is-pinned .pg-track{transform:translate3d(var(--pg-x,0px),0,0);will-change:transform;padding-block:var(--space-3);}
.js .pg.is-pinned .pg-card{scroll-snap-align:none;will-change:transform,opacity;}
.js .pg.is-pinned .pg-foot{display:flex;align-items:center;gap:var(--space-6);margin-top:var(--space-2);}
.pg-bar{flex:1;height:2px;background:var(--color-line);border-radius:2px;overflow:hidden;}
.pg-bar i{display:block;height:100%;width:100%;background:var(--color-accent);transform:scaleX(var(--pg-p,0));transform-origin:0 50%;}
.pg-hint{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;color:var(--color-text-faint);white-space:nowrap;}

.pg-sticky > .wrap{width:100%;}
.pg-viewport{scroll-padding-inline:var(--space-5);}
@media (max-width:640px){.pg-track{padding-inline:var(--space-5);}}