/* ============================================================
   Skanda Sriganesh — Portfolio design system
   Light. Editorial. Slightly expressive.
   ============================================================ */

:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --bg-elevated:#F7F7F5;
  --text:#141414;
  --text-secondary:#5A5A58;
  --text-tertiary:#8B8B87;
  --line:rgba(20,20,20,.08);
  --line-strong:rgba(20,20,20,.16);
  --selection:rgba(20,20,20,.1);
  --accent:#1F4B45;
  --accent-soft:rgba(31,75,69,.1);
  --glow:rgba(20,20,20,.04);
  --glass-bg:rgba(255,255,255,.52);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.7);

  --font:"Satoshi",system-ui,-apple-system,sans-serif;
  --font-display:"Cabinet Grotesk",var(--font);
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --size-display:clamp(40px,5.4vw,64px);
  --size-heading:clamp(26px,2.6vw,34px);
  --size-lede:18px;
  --size-body:16px;
  --size-small:13px;
  --size-micro:11px;
  --leading-display:1.05;
  --leading-body:1.65;
  --tracking-display:-.035em;
  --tracking-tight:-.02em;
  --tracking-label:.14em;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --max:1100px;
  --pad:clamp(22px,4vw,40px);
  --section:clamp(96px,14vw,160px);
  --gap:clamp(48px,8vw,96px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);
  font-weight:var(--weight-regular);
  font-size:var(--size-body);
  line-height:var(--leading-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--selection);color:var(--text)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
em{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:var(--weight-medium);
  color:var(--accent);
}

.wrap{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ---------- Site nav (index + case studies) ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(12,12,12,.94);
  border-bottom:1px solid transparent;
  transition:transform .3s var(--ease-soft),border-color .25s;
  will-change:transform;
}
.site-nav.is-scrolled{
  border-bottom-color:rgba(255,255,255,.08);
}
.site-nav.is-hidden{
  transform:translateY(-100%);
  pointer-events:none;
}
.site-nav-inner{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:0 var(--pad);
  display:flex;align-items:center;justify-content:flex-end;
  gap:16px;min-height:56px;
}
.site-nav .mark{
  font-family:var(--font-display);
  font-size:14px;font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);color:#fff;
  text-decoration:none;flex:none;
}
.site-nav .mark:hover{color:rgba(255,255,255,.8)}
.site-nav .mark:focus-visible,
.site-nav .links a:focus-visible{
  outline:2px solid #fff;outline-offset:3px;border-radius:2px;
}
.site-nav .links{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:4px 18px;
}
.site-nav .links a{
  font-size:13px;font-weight:var(--weight-medium);
  color:rgba(255,255,255,.55);text-decoration:none;
  transition:color .2s;
}
.site-nav .links a:hover{color:#fff}
@media (max-width:720px){
  .site-nav-inner{min-height:52px}
  .site-nav .links{gap:4px 12px}
  .site-nav .links a{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .site-nav{transition:border-color .25s}
}

/* ---------- Top bar (legacy case studies) ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 24px rgba(20,20,20,.04);
  transition:border-color .35s var(--ease-soft),padding .35s var(--ease-soft),background .35s var(--ease-soft),box-shadow .35s var(--ease-soft);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:rgba(255,255,255,.94)}
}
.topbar.scrolled{
  border-bottom-color:var(--line);
  padding:14px var(--pad);
  background:rgba(255,255,255,.78);
}
.topbar .mark{
  font-family:var(--font-display);
  font-size:17px;font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);color:var(--text);
  transition:letter-spacing .35s var(--ease-out);
}
.topbar .mark:hover{letter-spacing:.01em}
.topbar .mark:focus-visible,
.topbar .back:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.topbar .back{
  font-size:var(--size-small);font-weight:var(--weight-medium);
  color:var(--text);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  transition:color .25s,gap .25s var(--ease-out),background .25s,border-color .25s;
}
.topbar .back svg{width:14px;height:14px;margin-left:-1px}
.topbar .back:hover{
  color:var(--text);
  background:rgba(255,255,255,.72);
  border-color:rgba(20,20,20,.1);
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font);font-size:var(--size-small);font-weight:var(--weight-medium);
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;
  transition:color .25s,background .25s,border-color .25s,transform .35s var(--ease-out),gap .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.btn svg{width:14px;height:14px;transition:transform .35s var(--ease-out);margin-right:-1px}
.btn{padding:13px 18px 13px 22px}
.btn-primary{
  background:rgba(31,75,69,.88);
  color:#fff;
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 28px rgba(31,75,69,.18);
}
.btn-primary:hover{
  background:rgba(31,75,69,.96);
  border-color:rgba(255,255,255,.4);
  color:#fff;gap:12px;
}
.btn-primary:hover svg{transform:translateX(2px)}
.btn-ghost{
  color:var(--text);
  background:rgba(255,255,255,.48);
  border-color:rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 6px 20px rgba(20,20,20,.05);
}
.btn-ghost:hover{
  border-color:rgba(20,20,20,.12);
  background:rgba(255,255,255,.72);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn-primary{background:var(--accent)}
  .btn-ghost{background:rgba(255,255,255,.92)}
}

/* ---------- Section ---------- */
.section{padding:var(--section) 0}
.sec-head{margin-bottom:var(--gap)}
.sec-head h2{
  font-family:var(--font-display);
  font-size:var(--size-heading);font-weight:var(--weight-medium);
  line-height:var(--leading-display);letter-spacing:var(--tracking-tight);
  max-width:22ch;
}
.sec-label{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.eyebrow{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);
}

/* ---------- Résumé ---------- */
.resume-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px}
.aside h4,.experience h4{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:20px;
}
.exp-item{
  display:grid;grid-template-columns:120px 1fr;gap:24px;
  padding:22px 0;border-top:1px solid var(--line);
}
.exp-item:last-child{border-bottom:1px solid var(--line)}
.exp-when{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.04em;color:var(--text-tertiary);padding-top:3px;
}
.exp-role{
  font-family:var(--font-display);
  font-size:17px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight)
}
.exp-co{font-size:var(--size-small);color:var(--text-secondary);margin-top:4px}
.exp-co span{color:var(--text-tertiary)}
.exp-bullets{list-style:none;margin:12px 0 0;font-size:var(--size-small);color:var(--text-secondary);line-height:1.6}
.exp-bullets li{margin-bottom:8px;padding-left:14px;position:relative}
.exp-bullets li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:4px;height:4px;background:var(--text-tertiary);
}
.skills-list{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:32px}
.skill{font-size:var(--size-small);color:var(--text-secondary)}

/* ---------- Contact ---------- */
.contact h2{
  font-family:var(--font-display);
  font-size:var(--size-display);font-weight:var(--weight-medium);
  line-height:var(--leading-display);letter-spacing:var(--tracking-display);
  max-width:14ch;
}
.contact .mailto{
  display:inline-flex;align-items:center;gap:12px;margin-top:36px;
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,28px);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);
  border-bottom:1px solid var(--line-strong);padding-bottom:6px;
  transition:border-color .3s,gap .35s var(--ease-out),color .3s;
}
.contact .mailto:hover{border-color:var(--accent);color:var(--accent);gap:16px}
.contact-meta{
  display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:48px;
  font-size:var(--size-small);color:var(--text-secondary);
}
.contact-meta a{transition:color .2s}
.contact-meta a:hover{color:var(--text)}

footer{
  padding:40px 0 80px;text-align:left;
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-tertiary);
}

/* ---------- Case study ---------- */
.cs-hero{padding:120px 0 40px}
.cs-hero--tight{padding:120px 0 24px}
.cs-hero .meta{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);
}
.cs-hero h1{
  font-family:var(--font-display);
  font-size:var(--size-display);font-weight:var(--weight-medium);
  line-height:var(--leading-display);letter-spacing:var(--tracking-display);
  margin-top:20px;max-width:18ch;
}
.cs-lede{
  margin-top:28px;max-width:52ch;
  font-size:var(--size-lede);line-height:1.55;
  color:var(--text-secondary);
}
/* Case study text sections: avoid stacking .section + .cs-section padding */
.section:has(.cs-section),
.section:has(.cs-prose),
.section:has(.brief){
  padding:0;
}
.cs-section{
  display:grid;grid-template-columns:200px 1fr;gap:48px;
  padding:clamp(28px,4vw,40px) 0;border-top:1px solid var(--line);
}
.cs-section .num,
.impact .num{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-tertiary);
}
.cs-section h2,
.impact h2,
.shead h2{
  font-family:var(--font-display);
  font-size:var(--size-heading);font-weight:var(--weight-medium);
  line-height:var(--leading-display);letter-spacing:var(--tracking-tight);
  margin-top:12px;max-width:16ch;
}
.cs-body{max-width:52ch}
.cs-body--wide{max-width:none}
.cs-body--wide > p{max-width:52ch}
.cs-body p{
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);margin-bottom:14px;
}
.cs-body p:last-child{margin-bottom:0}
.cs-body strong{color:var(--text);font-weight:var(--weight-medium)}
.cs-body .pull{
  font-size:var(--size-lede);font-weight:var(--weight-medium);
  line-height:1.4;letter-spacing:var(--tracking-tight);
  color:var(--text);margin:28px 0 0;
  border-left:1px solid var(--line-strong);padding-left:20px;max-width:36ch;
}
.cs-list{display:flex;flex-direction:column;margin-top:8px}
.cs-list .row{
  display:grid;grid-template-columns:28px 1fr;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:start;
}
.cs-list .row:first-child{border-top:1px solid var(--line)}
.cs-list .k{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);color:var(--text-tertiary);padding-top:4px;
}
.cs-list .v h3{
  font-size:16px;font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);
}
.cs-list .v p{
  font-size:var(--size-small);color:var(--text-secondary);
  margin-top:5px;line-height:1.55;max-width:48ch;
}
.figband{padding:4px 0 24px}
.figband--lead{padding:0 0 32px}
.figband .frame{
  overflow:hidden;border:1px solid var(--line);background:var(--bg-elevated);
}
.figband .frame img{width:100%;display:block}
.figband .frame--video{background:#000}
.figband .frame--video video{
  width:100%;display:block;aspect-ratio:16/10;object-fit:contain;background:#000;
}
.figband figcaption{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.06em;color:var(--text-tertiary);
  margin-top:14px;display:flex;align-items:center;gap:10px;
}
.figband figcaption::before{content:"";width:16px;height:1px;background:var(--line-strong);flex:none}
.cs-prose{
  max-width:52ch;
  display:flex;flex-direction:column;gap:18px;
  border-top:1px solid var(--line);padding:clamp(28px,4vw,40px) 0;
}
.cs-prose p{
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);
}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.grp{padding:22px;border:1px solid var(--line)}
.grp .lab,.grp .glab{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:14px;
}
.grp ul{list-style:none}
.grp li{
  font-size:var(--size-small);color:var(--text-secondary);
  padding:8px 0;border-top:1px solid var(--line);line-height:1.4;
}
.grp li:first-child{border-top:none}
.impact{border-top:1px solid var(--line);padding:clamp(28px,4vw,40px) 0}
.impact-lede{
  margin-top:20px;max-width:58ch;
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);
}
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.stat{padding:0;border:none;background:none}
.stat .big{
  font-family:var(--font-display);
  font-size:var(--size-heading);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);line-height:1.15;
  color:var(--accent);
}
.stat .cap{font-size:var(--size-small);color:var(--text-secondary);margin-top:10px;line-height:1.45}
.closing{padding:clamp(56px,8vw,88px) 0;border-top:1px solid var(--line);text-align:left}
.closing h2{
  font-family:var(--font-display);
  font-size:var(--size-display);font-weight:var(--weight-medium);
  line-height:var(--leading-display);letter-spacing:var(--tracking-display);
  max-width:18ch;margin-top:0;
}
.closing .note,.closing .cnote{
  margin-top:20px;color:var(--text-secondary);
  font-size:var(--size-body);max-width:42ch;
}
.closing .btn{margin-top:36px}

/* ---------- Project prev/next ---------- */
.project-nav{padding:0 0 100px}
.project-nav .inner{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.project-link{
  display:block;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:border-color .2s;
}
.project-link:hover{border-color:var(--line-strong)}
.project-link.next{text-align:right}
.project-link .label{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:8px;
}
.project-link .title{
  font-family:var(--font-display);
  font-size:var(--size-lede);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);
}

/* Case study extras used by other pages */
.tooling-figures{display:flex;flex-direction:column;gap:36px;margin-top:8px;margin-left:248px;padding-top:24px;max-width:640px}
.tooling-figures figure{margin:0}
.tooling-figures .frame{overflow:hidden;border:1px solid var(--line);background:var(--bg-elevated);padding:10px}
.tooling-figures .frame img{width:100%;display:block}
.tooling-figures figcaption{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.06em;color:var(--text-tertiary);margin-top:12px;
  display:flex;align-items:center;gap:10px;
}
.tooling-figures figcaption::before{content:"";width:16px;height:1px;background:var(--line-strong);flex:none}
.demo-stage{
  margin:8px 0 24px;border:none;background:transparent;
  overflow:visible;display:flex;align-items:center;justify-content:center;
  min-height:0;padding:0;
  border-radius:0;box-shadow:none;
}
.demo-stage img{
  width:auto;max-width:100%;height:650px;object-fit:contain;object-position:center;
}
.demo-stage--lock img{
  clip-path:inset(2px 4.5% 2px 1.8%);
}
.flow-compare{display:flex;flex-direction:column;gap:26px;margin-top:28px}
.flow-shot{border:1px solid var(--line);overflow:hidden;background:var(--bg-elevated)}
.flow-shot img{width:100%;display:block}
.flow-shot .lab{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);padding:12px 14px;border-top:1px solid var(--line);
}
.flow-shot--after .lab{color:var(--text)}
.baf{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.baf .shot{border:1px solid var(--line);overflow:hidden;background:var(--bg-elevated)}
.baf .shot img{width:100%;display:block}
.baf .lab{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);padding:12px 14px;border-top:1px solid var(--line);
}
.baf .after .lab{color:var(--text)}
.notebar .note{
  width:100%;margin:34px 0 0;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:22px 24px;border:1px solid var(--line);background:var(--bg-elevated);
}
.notebar .note .ic{width:18px;height:18px;stroke:var(--text-secondary);margin-top:2px;flex:none}
.notebar .note .lab{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:7px;
}
.notebar .note p{font-size:var(--size-small);line-height:1.6;color:var(--text-secondary)}
.notebar .note strong{color:var(--text);font-weight:var(--weight-medium)}
.notebar + .section .cs-section{border-top:none}
.wide{max-width:1320px}

/* South's Most Stunning — keep native-ish display size to avoid upscaling */
.sms-gallery{
  max-width:920px;
  margin:0 auto;
}
.sms-gallery .figrow,
.sms-gallery .covers,
.sms-gallery .stack,
.sms-gallery .ba2{
  max-width:100%;
}
.sms-gallery .shot{
  width:100%;
  max-width:100%;
}
.sms-gallery .covers{
  gap:16px;
  margin:0 0 36px;
}
.sms-gallery .stack{gap:32px}
.sms-gallery .figrow{margin:0 0 28px}
.sms-gallery .shead{margin-bottom:20px}
.detail-row{
  display:flex;gap:30px;flex-wrap:wrap;margin-top:34px;
  font-size:var(--size-small);color:var(--text-secondary);
}
.balabel{font-size:var(--size-micro);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary);margin-bottom:10px}
.balabel.after{color:var(--text)}
.detail-row > div{display:flex;flex-direction:column;gap:4px;min-width:120px}
.detail-row b{font-weight:var(--weight-medium);color:var(--text);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}

/* Demo */
.demo{padding:0 0 32px}
.demo-cap{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.06em;color:var(--text-tertiary);
  margin-top:14px;display:flex;align-items:center;gap:10px;
}
.demo-cap::before{content:"";width:16px;height:1px;background:var(--line-strong);flex:none}
.figband--phone .frame{max-width:320px;margin:0 auto}

/* Competitive / content grids */
.comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.comp-shot{margin:0;border:1px solid var(--line);overflow:hidden;background:var(--bg-elevated)}
.comp-shot img{width:100%;display:block;object-fit:cover;object-position:top}
.comp-shot--tall img{max-height:520px;object-fit:contain;background:var(--bg-elevated)}
.baf .col{border:1px solid var(--line);background:var(--bg-elevated);padding:0}
.baf .col .lab{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);padding:12px 16px;border-bottom:1px solid var(--line);
}
.baf .col.after .lab{color:var(--text)}
.baf .pair{padding:16px;border-bottom:1px solid var(--line)}
.baf .pair:last-child{border-bottom:none}
.baf .pair .t{font-size:var(--size-body);font-weight:var(--weight-medium);margin-bottom:6px}
.baf .pair p{font-size:var(--size-small);color:var(--text-secondary);line-height:1.5;margin:0}
.content-visuals{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:28px}
.content-visual{margin:0}
.content-visual .lab{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:10px;
}
.content-visual .frame{border:1px solid var(--line);overflow:hidden;background:var(--bg-elevated)}
.content-visual .frame img{width:100%;display:block}
.content-visual figcaption{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.06em;color:var(--text-tertiary);margin-top:12px;
}

/* Editorial / print case study */
.brief{border-top:1px solid var(--line);padding:clamp(28px,4vw,40px) 0}
.brief-quote{
  font-size:var(--size-heading);font-weight:var(--weight-medium);
  line-height:1.3;letter-spacing:var(--tracking-tight);max-width:28ch;
}
.brief-body{display:grid;grid-template-columns:120px 1fr;gap:24px;margin-top:36px;max-width:52ch}
.brief-body .lbl{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary);
}
.brief-body p{
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);
}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.shead .note{font-size:var(--size-small);color:var(--text-tertiary)}
.ba-note{
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);max-width:48ch;margin-bottom:24px;
}
.figrow{margin:0 0 36px}
.figrow .shot,.shot{width:100%;border:1px solid var(--line);background:var(--bg-elevated)}
.figrow figcaption,.stack figcaption{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.06em;color:var(--text-tertiary);margin-top:12px;
}
.covers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 48px}
.covers figure{margin:0}
.covers-cap{
  grid-column:1/-1;font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.06em;color:var(--text-tertiary);margin-top:-8px;
}
.stack{display:flex;flex-direction:column;gap:48px}
.stack figure{margin:0}
.ba2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ba2 figure{margin:0}
.ba2 .shot{width:100%}

@media (max-width:820px){
  .cs-section{grid-template-columns:1fr;gap:16px;padding:32px 0}
  .impact-grid{grid-template-columns:1fr;gap:28px}
  .groups{grid-template-columns:1fr}
  .resume-grid{grid-template-columns:1fr;gap:48px}
  .tooling-figures{margin-left:0;max-width:100%}
  .baf{grid-template-columns:1fr}
  .comp-grid,.content-visuals,.covers,.ba2{grid-template-columns:1fr}
  .brief-body{grid-template-columns:1fr;gap:8px}
}
@media (max-width:760px){
  .exp-item{grid-template-columns:1fr;gap:6px}
  .exp-when{padding-top:0}
  .project-nav .inner{grid-template-columns:1fr}
  .project-link.next{text-align:left}
  .demo-stage img{height:525px}
}

/* ---------- Design system mini case studies ---------- */
.ds-page{
  --ds-accent:var(--accent);
  --ds-measure:66ch;
}
.ds-hero .cs-lede{max-width:58ch}
.ds-note{
  margin-top:22px;max-width:52ch;
  font-size:var(--size-small);line-height:1.55;
  color:var(--text-tertiary);
  border-left:1px solid var(--line-strong);
  padding-left:16px;
}
.ds-nav{
  position:sticky;top:64px;z-index:40;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .25s,background .25s;
}
.ds-nav.is-stuck{
  border-bottom-color:var(--line);
  background:rgba(255,255,255,.78);
}
.ds-nav-inner{
  display:flex;gap:6px;flex-wrap:wrap;
  padding-top:12px;padding-bottom:12px;
}
.ds-nav-link{
  font-size:var(--size-small);font-weight:var(--weight-medium);
  color:var(--text);
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
  border:1px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.ds-nav-link:hover{color:var(--text);background:rgba(255,255,255,.55)}
.ds-nav-link.is-active{
  color:var(--text);
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.ds-nav-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.mini{
  padding:clamp(48px,7vw,80px) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:120px;
}
.mini-head{max-width:720px;margin-bottom:clamp(28px,4vw,40px)}
.mini-num{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:14px;
}
.mini-head h2{
  font-family:var(--font-display);
  font-size:clamp(28px,3.4vw,40px);font-weight:var(--weight-medium);
  line-height:1.12;letter-spacing:var(--tracking-tight);
  max-width:18ch;
}
.mini-sum{
  margin-top:14px;max-width:var(--ds-measure);
  font-size:var(--size-lede);line-height:1.5;
  color:var(--text-secondary);
}
.mini-meta{
  display:flex;flex-wrap:wrap;gap:18px 32px;
  margin-top:28px;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.mini-meta div{min-width:140px}
.mini-meta dt{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:6px;
}
.mini-meta dd{
  font-size:var(--size-small);color:var(--text);line-height:1.4;
}
.mini-tldr{
  margin-top:22px;max-width:var(--ds-measure);
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);
}
.mini-tldr span{
  display:inline-block;margin-right:10px;
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text);
}

.mini-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px;
  gap:48px;
  align-items:start;
}
.mini-main{min-width:0}
.mini-block{margin-bottom:32px}
.mini-block h3{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:12px;
}
.mini-block p,
.mini-list{
  max-width:var(--ds-measure);
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);
}
.mini-block p + p{margin-top:14px}
.mini-subhead{
  margin:22px 0 10px !important;
  font-size:var(--size-small) !important;
  font-weight:var(--weight-medium) !important;
  color:var(--text) !important;
}
.mini-list{list-style:none;padding:0}
.mini-list li{
  position:relative;
  padding:10px 0 10px 18px;
  border-top:1px solid var(--line);
}
.mini-list li:last-child{border-bottom:1px solid var(--line)}
.mini-list li::before{
  content:"";
  position:absolute;left:0;top:1.15em;
  width:6px;height:1px;background:var(--line-strong);
}

.mini-aside{
  display:flex;flex-direction:column;gap:12px;
  position:sticky;top:140px;
}
.stat-card{
  padding:18px 16px;
  border:1px solid var(--line);
  background:var(--bg-elevated);
}
.stat-card-num{
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,36px);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);line-height:1;
  color:var(--accent);
}
.stat-card-lab{
  margin-top:10px;
  font-size:var(--size-small);line-height:1.4;
  color:var(--text-secondary);
}

.mini-pull{
  margin:8px 0 0;
  padding:22px 0 0;
  border-top:1px solid var(--line);
  max-width:36ch;
}
.mini-pull p{
  font-size:clamp(18px,2vw,22px);font-weight:var(--weight-medium);
  line-height:1.35;letter-spacing:var(--tracking-tight);
  color:var(--text);
}

.callout{
  display:grid;grid-template-columns:auto 1fr;gap:14px 18px;
  align-items:start;
  max-width:var(--ds-measure);
  margin:0 0 28px;
  padding:18px 20px;
  border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
}
.callout-lab{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);padding-top:3px;
}
.callout p{
  margin:0;
  font-size:var(--size-body);line-height:1.55;
  color:var(--text);
}

.mini-figures{
  display:flex;flex-direction:column;gap:28px;
  margin:8px 0 36px;max-width:640px;
}
.mini-figures .frame{
  border:1px solid var(--line);background:var(--bg-elevated);overflow:hidden;
}
.mini-figures .frame img{width:100%;display:block}
.mini-figures figcaption{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:.06em;color:var(--text-tertiary);
  margin-top:12px;display:flex;align-items:center;gap:10px;
}
.mini-figures figcaption::before{
  content:"";width:16px;height:1px;background:var(--line-strong);flex:none;
}

.stage-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:8px;
}
.stage-card{
  border:1px solid var(--line);
  background:var(--bg);
  padding:22px 20px;
}
.stage-card--ready{border-color:var(--line-strong)}
.stage-label{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:10px;
}
.stage-card h4{
  font-size:18px;font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);margin-bottom:10px;
}
.stage-obj{
  font-size:var(--size-small);line-height:1.55;
  color:var(--text-secondary);margin-bottom:18px;
}
.stage-req-label{
  font-size:var(--size-micro);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text);margin-bottom:8px;
}
.stage-req{list-style:none;padding:0;margin:0}
.stage-req li{
  font-size:var(--size-small);line-height:1.45;
  color:var(--text-secondary);
  padding:8px 0 8px 16px;
  border-top:1px solid var(--line);
  position:relative;
}
.stage-req li:last-child{border-bottom:1px solid var(--line)}
.stage-req li::before{
  content:"";
  position:absolute;left:0;top:.9em;
  width:6px;height:6px;border:1px solid var(--text-tertiary);
}

.ds-close .ds-close-body{
  margin-top:18px;max-width:52ch;
  font-size:var(--size-body);line-height:var(--leading-body);
  color:var(--text-secondary);
}
.ds-close .btn{margin-top:28px}

@media (max-width:900px){
  .mini-grid{grid-template-columns:1fr;gap:28px}
  .mini-aside{
    position:static;
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  }
}
@media (max-width:700px){
  .ds-nav{top:56px}
  .mini-aside{grid-template-columns:1fr}
  .stage-grid{grid-template-columns:1fr}
  .mini-meta{flex-direction:column;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .ds-nav-link{transition:none}
}

/* ---------- Scroll reveal — quiet, no blur theater ---------- */
.reveal{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@keyframes fade-up{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:none}
}
.who,
.bio,
.cs-hero .meta,
.cs-hero h1,
.cs-lede{
  animation:fade-up .55s var(--ease-soft) both;
}
.bio{animation-delay:.06s}
.cs-hero h1{animation-delay:.06s}
.cs-lede{animation-delay:.12s}
@media (prefers-reduced-motion:reduce){
  .who,.bio,
  .cs-hero .meta,.cs-hero h1,.cs-lede{animation:none}
}

/* ============================================================
   Case study reading layout — narrow measure, generous air
   (overrides earlier case-study rules; keeps light aesthetic)
   ============================================================ */
body:has(.cs-hero),
body.ds-page{
  --cs-max:680px;
  --cs-gap:clamp(40px,6.5vw,72px);
  --cs-gap-sm:clamp(28px,4.5vw,48px);
}
body:has(.cs-hero) .wrap,
body.ds-page .wrap{
  max-width:var(--cs-max);
}

body:has(.cs-hero) .cs-hero,
body.ds-page .cs-hero{
  padding:120px 0 var(--cs-gap);
}
body:has(.cs-hero):has(.demo) .cs-hero{
  padding-bottom:12px;
}
body:has(.cs-hero) .cs-hero--tight,
body.ds-page .cs-hero--tight{
  padding:120px 0 var(--cs-gap-sm);
}
body:has(.cs-hero) .cs-hero h1,
body.ds-page .cs-hero h1{
  font-size:clamp(36px,5vw,52px);
  line-height:1.08;
  max-width:14ch;
  margin-top:18px;
}
body:has(.cs-hero) .cs-lede,
body.ds-page .cs-lede{
  margin-top:28px;
  max-width:none;
  font-size:clamp(17px,1.55vw,19px);
  line-height:1.65;
}

body:has(.cs-hero) .cs-section{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:var(--cs-gap) 0;
  border-top:none;
}
body:has(.cs-hero) .cs-section .label{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body:has(.cs-hero) .cs-section h2,
body:has(.cs-hero) .impact h2,
body:has(.cs-hero) .shead h2,
body.ds-page .mini-head h2{
  font-size:clamp(26px,3vw,34px);
  line-height:1.15;
  margin-top:0;
}
body:has(.cs-hero) .cs-body,
body:has(.cs-hero) .cs-body--wide,
body:has(.cs-hero) .cs-body--wide > p{
  max-width:none;
}
body:has(.cs-hero) .cs-body p,
body:has(.cs-hero) .cs-prose p,
body:has(.cs-hero) .impact-lede,
body:has(.cs-hero) .ba-note,
body:has(.cs-hero) .brief-body p{
  font-size:17px;
  line-height:1.7;
}
body:has(.cs-hero) .cs-body .pull{
  border-left:none;
  padding-left:0;
  margin-top:28px;
  font-family:var(--font-display);
  font-size:clamp(18px,1.8vw,22px);
  line-height:1.4;
}

body:has(.cs-hero) .cs-prose,
body:has(.cs-hero) .impact,
body:has(.cs-hero) .brief,
body:has(.cs-hero) .closing{
  border-top:none;
  padding:var(--cs-gap) 0;
}
body:has(.cs-hero) .figband{
  padding:var(--cs-gap-sm) 0;
}
body:has(.cs-hero) .figband--lead{
  padding:0 0 var(--cs-gap);
}

body:has(.cs-hero) .figband .frame,
body:has(.cs-hero) .tooling-figures .frame,
body:has(.cs-hero) .flow-shot,
body:has(.cs-hero) .baf .shot,
body:has(.cs-hero) .comp-shot,
body:has(.cs-hero) .content-visual .frame,
body:has(.cs-hero) .figrow .shot,
body:has(.cs-hero) .shot,
body:has(.cs-hero) .sms-gallery .shot,
body.ds-page .mini-figures .frame,
body.ds-page .callout,
body.ds-page .stage-card{
  border-radius:16px;
  border-color:rgba(20,20,20,.08);
}

body:has(.cs-hero) .figband figcaption,
body:has(.cs-hero) .tooling-figures figcaption{
  display:block;
  margin-top:16px;
  letter-spacing:.04em;
}
body:has(.cs-hero) .figband figcaption::before,
body:has(.cs-hero) .tooling-figures figcaption::before,
body:has(.cs-hero) .demo-cap::before{
  display:none;
}

body:has(.cs-hero) .tooling-figures{
  margin-left:0;
  max-width:none;
  gap:var(--cs-gap-sm);
  padding-top:8px;
}
body:has(.cs-hero) .tooling-figures .frame{padding:0}

body:has(.cs-hero) .impact-grid{
  gap:28px;
  margin-top:36px;
}
body:has(.cs-hero) .stat .big{
  font-size:clamp(28px,3.2vw,36px);
}
body:has(.cs-hero) .closing h2{
  font-size:clamp(32px,4.2vw,48px);
  line-height:1.1;
  max-width:16ch;
}
body:has(.cs-hero) .closing .note,
body:has(.cs-hero) .closing .cnote{
  margin-top:24px;
  font-size:17px;
  line-height:1.65;
}
body:has(.cs-hero) .project-nav{padding:0 0 120px}
body:has(.cs-hero) .grp,
body:has(.cs-hero) .notebar .note{
  border-radius:14px;
  border-color:rgba(20,20,20,.08);
  background:rgba(255,255,255,.5);
}
body:has(.cs-hero) .cs-list .row{
  padding:20px 0;
  border-color:rgba(20,20,20,.06);
}
body:has(.cs-hero) .brief-quote{
  max-width:22ch;
  line-height:1.25;
}
body:has(.cs-hero) .brief-body{
  margin-top:32px;
  max-width:none;
}
body:has(.cs-hero) .sms-gallery{
  max-width:100%;
}
body:has(.cs-hero) .sms-gallery .stack{gap:var(--cs-gap-sm)}
body:has(.cs-hero) .sms-gallery .figrow{margin:0 0 var(--cs-gap-sm)}

/* Design system page aligns to same measure */
body.ds-page{
  --ds-measure:100%;
}
body.ds-page .ds-hero .cs-lede{max-width:none}
body.ds-page .ds-note{
  max-width:none;
  border-left:none;
  padding-left:0;
  margin-top:20px;
}
body.ds-page .mini{
  padding:var(--cs-gap) 0;
  border-top:none;
}
body.ds-page .mini-head{
  max-width:none;
  margin-bottom:var(--cs-gap-sm);
}
body.ds-page .mini-sum,
body.ds-page .mini-block p,
body.ds-page .mini-pull{
  max-width:none;
  font-size:17px;
  line-height:1.7;
}
body.ds-page .mini-meta{
  border-color:rgba(20,20,20,.06);
}
body.ds-page .ds-nav .wrap{
  max-width:var(--cs-max);
}

@media (max-width:820px){
  body:has(.cs-hero) .cs-section{
    padding:var(--cs-gap-sm) 0;
  }
  body:has(.cs-hero) .impact-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   Interface polish (from make-interfaces-feel-better — selective)
   ============================================================ */
h1,h2,h3,
.cs-hero h1,
.cs-section h2,
.impact h2,
.closing h2,
.mini-head h2,
.sec-head h2,
.who .name,
.proj-body h3,
.brief-quote{
  text-wrap:balance;
}
p,
.bio,
.cs-lede,
.cs-body p,
.cs-prose p,
.impact-lede,
.aside-note,
.proj-body p,
.mini-sum,
.closing .note,
.closing .cnote{
  text-wrap:pretty;
}

.exp-when,
.stat .big,
.cs-section .num,
.impact .num,
.mini-num,
.cs-list .k{
  font-variant-numeric:tabular-nums;
}

/* Soft edge instead of hard border on media */
body:has(.cs-hero) .figband .frame,
body:has(.cs-hero) .tooling-figures .frame,
body:has(.cs-hero) .flow-shot,
body:has(.cs-hero) .baf .shot,
body:has(.cs-hero) .comp-shot,
body:has(.cs-hero) .content-visual .frame,
body:has(.cs-hero) .figrow .shot,
body:has(.cs-hero) .shot,
body:has(.cs-hero) .sms-gallery .shot,
body.ds-page .mini-figures .frame{
  border:none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 1px 2px -1px rgba(0,0,0,.05),
    0 2px 4px rgba(0,0,0,.03);
}
body:has(.cs-hero) .demo-stage{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
}
body:has(.cs-hero) .figband .frame img,
body:has(.cs-hero) .tooling-figures .frame img,
body:has(.cs-hero) .flow-shot img,
body:has(.cs-hero) .baf .shot img,
body:has(.cs-hero) .comp-shot img,
body:has(.cs-hero) .content-visual .frame img,
body:has(.cs-hero) .figrow .shot img,
body:has(.cs-hero) .shot img,
body:has(.cs-hero) .sms-gallery .shot img,
body.ds-page .mini-figures .frame img{
  outline:1px solid rgba(0,0,0,.1);
  outline-offset:-1px;
}

/* Concentric radii: outer = inner + padding (8px pad → 16 outer / 8 inner) */
body:has(.cs-hero) .tooling-figures .frame:has(img),
body.ds-page .mini-figures .frame{
  border-radius:16px;
}
body:has(.cs-hero) .grp{
  border:none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 1px 2px -1px rgba(0,0,0,.05);
}