/* =====================================================================
   PAGE: inner pages: case studies, résumé, 404.
   Shared pieces (nav, glass, buttons, contact, footer) live in site.css.
   ===================================================================== */

.progress{position:fixed;top:0;left:0;right:0;z-index:150;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- Back link (case, work and résumé pages) ---------- */
.back-link{gap:8px}
.chev-left{width:.42em;height:.42em;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(1px,-1px);transition:translate .3s var(--spring)}
@media (hover:hover){.back-link:hover .chev-left{translate:-2px 0}}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Shared width for case, work and résumé pages ---------- */
.wrap{max-width:calc(1180px + var(--gx) * 2);margin:0 auto;padding:0 var(--gx)}

/* ---------- Case study: a product story ----------
   Hero on the scene → three numbers → the story as beats
   (Problem → Insight → Decision → …), one diagram, the deck. The Decision
   beat is the one glass surface on the page. */
.case-hero{padding-top:clamp(28px,5vh,56px)}
.case-hero .sec-label{margin-top:clamp(48px,8vh,96px)}
.case-title{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.03em;font-weight:700;margin-top:20px;max-width:17ch;text-wrap:balance}
.case-lead{max-width:680px;margin-top:28px;font-size:var(--fs-lead);line-height:1.45;color:var(--text-2);text-wrap:pretty}
.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:20px clamp(28px,5vw,72px);margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid var(--line)}
.case-meta dt{font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.case-meta dd{margin-top:8px;font-size:.9375rem;line-height:1.4;color:var(--text-2)}
.case-meta a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
@media (hover:hover){.case-meta a:hover{text-decoration-color:currentColor}}

.case-stats{padding-top:clamp(56px,7vw,96px)}
.case-stats dl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.stat{padding-top:20px;border-top:1px solid var(--line)}
.stat dt{font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);line-height:1;letter-spacing:-.035em;font-weight:700;font-variant-numeric:tabular-nums}
.stat dd{margin-top:12px;font-size:.9375rem;line-height:1.45;color:var(--text-3);max-width:28ch}

/* The story */
.story{--bgap:clamp(32px,5vw,80px);padding-top:var(--section);display:flex;flex-direction:column;gap:clamp(72px,10vw,144px)}
.beat{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);gap:24px var(--bgap);align-items:start}
.beat-label{position:sticky;top:calc(var(--nav-h) + 40px);display:flex;align-items:baseline;gap:12px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.beat-label span{color:var(--text-2);font-variant-numeric:tabular-nums}
.beat-head{font-size:var(--fs-statement);line-height:1.18;letter-spacing:-.022em;font-weight:650;max-width:24ch;text-wrap:balance}
.beat-body{margin-top:24px;max-width:640px;font-size:1.125rem;line-height:1.6;color:var(--text-3);text-wrap:pretty}
.beat-body p+p{margin-top:1em}
.beat-body em{font-style:normal;color:var(--text-2)}
.beat-list{display:grid;gap:14px;list-style:none;padding:0}
.beat-list li{position:relative;padding:0 0 14px 22px;border-bottom:1px solid var(--line)}
.beat-list li:last-child{border-bottom:0;padding-bottom:0}
.beat-list li:before{content:'';position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--text-4)}
.beat-list b{color:var(--text);font-weight:600;margin-right:6px}
/* The decision: the one glass surface */
.beat-key{padding:clamp(28px,4.5vw,64px);border-radius:var(--radius);margin:0 calc(clamp(28px,4.5vw,64px) * -1)}
.beat-key .beat-label{position:static}
.beat-key .beat-label span{color:var(--signal)}
.beat-key .beat-head{color:var(--text);font-size:clamp(1.625rem,1.1rem + 2vw,2.75rem);line-height:1.1}
.beat-key .beat-body{color:var(--text-2)}
/* A closing line with no body */
.beat-quote .beat-head{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em;max-width:20ch}

/* ---------- Diagrams ---------- */
.viz{margin:0;padding-left:calc((100% - var(--bgap)) / 4 + var(--bgap))}   /* lines up with the beat text */
.viz figcaption{margin-bottom:28px}
.viz-caption{margin-top:24px;font-size:.9375rem;color:var(--text-3);max-width:60ch}
.viz-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:var(--fs-meta);color:var(--text-3)}
.viz-legend span{display:inline-flex;align-items:center;gap:8px}
.viz-legend span:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--dot)}
/* Flow: steps on a line; data-level marks friction (ok | mid | high | key) */
.flow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;list-style:none;padding:0;position:relative}
.flow:before{content:'';position:absolute;left:6px;right:6px;top:6px;height:1px;background:linear-gradient(90deg,var(--line),rgba(255,255,255,.2),var(--line))}
.flow-step{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:30px;font-size:.875rem;line-height:1.4;color:var(--text-3)}
.flow-step b{font-size:1rem;color:var(--text);font-weight:600;letter-spacing:-.01em}
.flow-dot{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--scene-base);box-shadow:inset 0 0 0 1.5px var(--dot)}
[data-level]{--dot:rgba(255,255,255,.35)}
[data-level="mid"]{--dot:rgba(233,183,127,.55)}
[data-level="high"]{--dot:var(--signal)}
[data-level="key"]{--dot:var(--text)}
.flow-step[data-level="high"] .flow-dot,.flow-step[data-level="key"] .flow-dot{background:var(--dot);box-shadow:0 0 0 5px rgba(255,255,255,.06),0 0 24px var(--dot)}
.flow-step[data-level="high"] b{color:var(--signal)}
/* Bars: horizontal, sorted; the vertical tick marks the threshold */
.bars{list-style:none;padding:0;display:grid;gap:10px}
.bar{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 3rem;align-items:center;gap:16px;font-size:.9375rem;color:var(--text-3)}
.bar b{font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right}
.bar-track{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.05)}
.bar-track:after{content:'';position:absolute;top:-6px;bottom:-6px;left:calc(var(--t) * 100%);width:1px;background:rgba(255,255,255,.28)}
.bar-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);border-radius:inherit;background:rgba(255,255,255,.22);transform-origin:left;transition:transform 1.2s var(--spring)}
.bar.hi{color:var(--text)}
.bar.hi .bar-fill{background:var(--signal)}
.bar.hi b{color:var(--signal)}
.js .viz:not(.in) .bar-fill{transform:scaleX(0)}

/* ---------- The deck ---------- */
.case-deck{padding-top:var(--section)}
.deck{margin-top:var(--gap-lg);border-radius:var(--radius);overflow:hidden;padding:8px}
.deck-frame{aspect-ratio:16/9;border-radius:calc(var(--radius) - 8px);overflow:hidden;background:var(--graphite)}
.deck-frame iframe{width:100%;height:100%;border:0;display:block}
.case-deck .page-actions{margin-top:24px}

/* ---------- Previous / next ---------- */
.case-more{padding-top:var(--section)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.pager a{display:flex;flex-direction:column;gap:8px;padding:clamp(24px,3vw,36px);border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);-webkit-backdrop-filter:none;backdrop-filter:none;transition:scale .45s var(--spring),background-color .3s var(--ease)}
.pager a:before{display:none}
.pager a:active{scale:.97;transition:scale .1s ease-out}
@media (hover:hover){.pager a:hover{scale:1.01;background:var(--surface-hover)}}
.pager small{font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.pager b{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.02em}
.pager .next{text-align:right;align-items:flex-end}
.pager .next:only-child{grid-column:2}

/* ---------- Work page: every case study ---------- */
.work-hero{padding-top:clamp(28px,5vh,56px)}
.work-hero .sec-label{margin-top:clamp(48px,8vh,96px)}
.work-title{font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;font-weight:700;margin-top:20px}
.work-bar{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;margin:var(--gap-lg) 0 clamp(28px,3vw,40px)}
.work-count{font-size:.9375rem;color:var(--text-3)}

@media (max-width:900px){
  .case-meta{grid-template-columns:1fr 1fr}
  .beat{grid-template-columns:1fr;gap:16px}
  .beat-label{position:static}
  .beat-key{margin:0}
  .viz{padding-left:0}
  .flow{grid-template-columns:1fr;gap:0}
  .flow:before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:var(--line)}
  .flow-step{padding:0 0 22px 32px}
  .case-stats dl{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bar{grid-template-columns:1fr 2.5rem;gap:6px 12px}
  .bar-label{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.js .viz:not(.in) .bar-fill{transform:none}}

/* ---------- Résumé ----------
   A web version of the PDF: label column on the left, content on the right,
   hairlines between entries. Numbers in <b> stand out for scanning. */
.res-hero{padding-top:clamp(28px,5vh,56px)}
.res-hero .sec-label{margin-top:clamp(48px,8vh,96px)}
.res-name{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.03em;font-weight:700;margin-top:20px}
.res-headline{margin-top:16px;font-size:var(--fs-lead);line-height:1.4;color:var(--text-2)}
.res-contact{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(28px,4vw,40px);padding-top:20px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--text-3)}
.res-contact a{color:var(--text-2)}
@media (hover:hover){.res-contact a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}
.res .page-actions{margin-top:32px}

.res-sec{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);gap:20px clamp(32px,5vw,80px);padding-top:clamp(64px,8vw,112px);align-items:start}
.res-label{position:sticky;top:calc(var(--nav-h) + 40px);font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.res-body{min-width:0}
.res-summary{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.55;letter-spacing:-.012em;color:var(--text-2);max-width:62ch;text-wrap:pretty}
.res-group{font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding-bottom:16px}
.res-group:not(:first-child){margin-top:clamp(40px,5vw,56px)}
.res-item{padding:24px 0;border-top:1px solid var(--line)}
.res-item:first-child{padding-top:0;border-top:0}
.res-group+.res-item{border-top:1px solid var(--line);padding-top:24px}
.res-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap}
.res-head h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;font-weight:700}
.res-dates,.res-tag{font-size:.8125rem;font-weight:600;color:var(--text-2);white-space:nowrap;padding:4px 12px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.res-tag{color:var(--text-3)}
.res-role{margin-top:8px;font-size:1rem;line-height:1.45;color:var(--text-2)}
.res-note{margin-top:4px;font-size:.9375rem;line-height:1.45;color:var(--text-3);font-style:italic}
.res-item ul:not(.res-tags){margin-top:16px;display:grid;gap:10px;max-width:68ch}
.res-item ul:not(.res-tags) li{position:relative;padding-left:20px;font-size:1rem;line-height:1.6;color:var(--text-3)}
.res-item ul:not(.res-tags) li:before{content:'';position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--text-4)}
.res-item b,.res-summary b{color:var(--text);font-weight:600}
.res-link{margin-top:16px;font-size:.9375rem}
.res-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.res-tags li{padding:7px 14px;border-radius:999px;font-size:.9375rem;color:var(--text-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.res-skills{display:grid;gap:28px}
.res-skills dt{font-size:1rem;font-weight:600;color:var(--text)}
.res-skills .res-tags{margin-top:12px}
.res-skill-note{margin-top:6px;font-size:.9375rem;color:var(--text-3)}
.res-end{display:flex;justify-content:center;padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
@media (max-width:900px){
  .res-sec{grid-template-columns:1fr;gap:16px}
  .res-label{position:static}
}

/* ---------- 404 ---------- */
.notfound{min-height:62vh;display:grid;place-items:center;padding:60px var(--gx)}
.notfound-panel{text-align:center;max-width:560px;padding:clamp(40px,7vw,72px) clamp(24px,5vw,56px);border-radius:36px}
.notfound-panel h1{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.012em;margin-top:8px}
.notfound-panel p{margin-top:14px;color:var(--text-3)}
.notfound-panel .pill{margin-top:28px}

@media (max-width:640px){
  .case-meta{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager .next,.pager .next:only-child{grid-column:auto}
}