/* Case study layer v4: section index, chapter markers, figure numbering, next-case card. */

/* ---------- chapter markers ---------- */
.s .eyebrow.ch{ display:flex; align-items:baseline; gap:14px; letter-spacing:.16em; margin-bottom:18px; }
.s .eyebrow.ch .ch-n{ font-family:var(--f-display); font-size:clamp(44px,4.4vw,64px); line-height:.9; letter-spacing:0; text-transform:none; color:var(--acc); font-style:italic; }
.s .eyebrow.ch .ch-l{ font-family:var(--f-mono); font-size:12px; color:var(--cs-muted); }
.tone-dark .eyebrow.ch .ch-n{ color:var(--acc-soft); }
.s h2{ font-size:clamp(34px,4vw,54px) !important; line-height:1.04 !important; }

/* ---------- figure numbers ---------- */
main{ counter-reset:fig; }
.s figure.shot figcaption::before{ counter-increment:fig; content:"Fig. " counter(fig); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-right:10px; }

/* ---------- section index: fixed on the far left; content shifts right so nothing overlaps ---------- */
:root{ --toc-w:236px; --toc-x:32px; }
.toc{ position:fixed; top:110px; left:var(--toc-x); width:calc(var(--toc-w) - var(--toc-x) - 28px); max-height:calc(100vh - 150px); overflow-y:auto; z-index:80;
  opacity:0; pointer-events:none; transform:translateX(-8px); transition:opacity .3s, transform .35s cubic-bezier(.22,1,.36,1); scrollbar-width:none; }
.toc::-webkit-scrollbar{ display:none; }
.toc.on{ opacity:1; pointer-events:auto; transform:none; }
.toc .toc-k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-muted); margin-bottom:12px; }
.toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--cs-line); }
.toc a{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:6px; padding:6px 0 6px 12px; margin-left:-1px; border-left:2px solid transparent; font-size:13.5px; line-height:1.35; color:var(--cs-muted); text-decoration:none; transition:color .2s, border-color .2s; }
.toc a b{ font-family:var(--f-mono); font-weight:500; font-size:11px; padding-top:2px; }
.toc a:hover{ color:var(--cs-ink); }
.toc a:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }
.toc a.on{ color:var(--cs-ink); border-left-color:var(--acc); font-weight:600; }
.toc a.on b{ color:var(--acc); }
.toc.tone-dark a.on{ border-left-color:var(--acc-soft); } .toc.tone-dark a.on b{ color:var(--acc-soft); }
@media (min-width:1180px){
  main > section.s, main > .wrap.next, main > .next{ padding-left:var(--toc-w) !important; }
}
@media (min-width:1600px){ :root{ --toc-w:280px; --toc-x:48px; } }
@media (max-width:1179px){ .toc{ display:none; } }

/* tablets and phones: a Sections button opens the same list as a sheet */
.toc-btn{ display:none; }
@media (max-width:1179px){
  .toc-btn{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:150; display:flex; align-items:center; gap:8px; border:1px solid var(--cs-line); background:var(--cs-bg); color:var(--cs-ink);
    font:600 14px var(--f-body); padding:11px 16px; border-radius:999px; box-shadow:0 12px 30px -14px rgba(0,0,0,.35); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s, transform .3s cubic-bezier(.22,1,.36,1); }
  .toc-btn.on{ opacity:1; pointer-events:auto; transform:none; }
  .toc-btn i{ font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--acc); }
  .toc-sheet{ position:fixed; inset:auto 0 0 0; z-index:161; background:var(--cs-bg); border-radius:20px 20px 0 0; padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px)); max-height:70vh; overflow-y:auto;
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.4); transform:translateY(105%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
  .toc-sheet.open{ transform:none; }
  .toc-sheet .toc-k{ display:flex; justify-content:space-between; align-items:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-muted); margin-bottom:10px; }
  .toc-sheet .toc-k button{ border:0; background:none; font:600 14px var(--f-body); color:var(--cs-ink); padding:8px; cursor:pointer; }
  .toc-sheet ol{ list-style:none; margin:0; padding:0; }
  .toc-sheet a{ display:grid; grid-template-columns:30px minmax(0,1fr); padding:12px 4px; border-top:1px solid var(--cs-line); font-size:16px; color:var(--cs-ink); text-decoration:none; }
  .toc-sheet a b{ font-family:var(--f-mono); font-size:12px; font-weight:500; color:var(--cs-muted); padding-top:3px; }
  .toc-sheet a.on b{ color:var(--acc); } .toc-sheet a.on{ font-weight:600; }
  .toc-scrim{ position:fixed; inset:0; z-index:160; background:rgba(10,12,20,.35); opacity:0; pointer-events:none; transition:opacity .3s; }
  .toc-scrim.open{ opacity:1; pointer-events:auto; }
}
@media (min-width:1180px){ .toc-sheet, .toc-scrim{ display:none; } }
/* ---------- next case: a quiet row, aligned with the section text ---------- */
main > .wrap.next{ display:none; }
section.s.s-next{ padding-top:8px !important; padding-bottom:64px !important; border-top:0 !important; margin-top:0 !important; }
.nx{ display:grid; grid-template-columns:248px minmax(0,1fr) auto; align-items:center; column-gap:32px; padding:28px 0; border-top:1px solid var(--cs-line); border-bottom:1px solid var(--cs-line); color:var(--cs-ink); text-decoration:none; -webkit-tap-highlight-color:transparent; }
.nx.nx-noimg{ grid-template-columns:minmax(0,1fr) auto; }
.nx-img{ display:block; width:248px; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:#0d1424; box-shadow:0 0 0 1px var(--cs-line), 0 18px 36px -24px rgba(20,18,40,.45); }
.nx-img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.nx-txt{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.nx .nx-k{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-muted); }
.nx .nx-t{ font-family:var(--f-display); font-weight:500; font-size:clamp(28px,2.6vw,38px); line-height:1.1; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx .nx-a{ width:52px; height:52px; border-radius:50%; border:1px solid var(--cs-line); display:grid; place-items:center; color:var(--acc); background:transparent; transition:transform .35s cubic-bezier(.22,1,.36,1), background-color .2s, color .2s, border-color .2s; }
@media (hover:hover){
  .nx:hover .nx-img img{ transform:scale(1.04); }
  .nx:hover .nx-a{ transform:translateX(4px); background:var(--acc); color:#fff; border-color:var(--acc); }
}
.nx:active .nx-img, .nx:active .nx-a{ transform:scale(.97); transition:transform .1s ease-out; }
.nx:focus-visible{ outline:2px solid var(--acc); outline-offset:6px; border-radius:10px; }
@media (max-width:900px){ .nx{ grid-template-columns:180px minmax(0,1fr) auto; column-gap:22px; } .nx-img{ width:180px; } }
@media (max-width:640px){ .nx{ grid-template-columns:116px minmax(0,1fr); column-gap:16px; padding:20px 0; } .nx-img{ width:116px; border-radius:10px; } .nx .nx-a{ display:none; } .nx .nx-t{ white-space:normal; font-size:24px; } }
@media (prefers-reduced-motion:reduce){ .nx-img img, .nx .nx-a{ transition:none; } .nx:hover .nx-img img{ transform:none; } }

/* ---------- consistent section rhythm ---------- */
main > section.s{ padding-top:88px !important; padding-bottom:88px !important; margin-top:0 !important; }
main > section.s + section.s{ border-top:1px solid var(--cs-line); }
@media (max-width:640px){ main > section.s{ padding-top:56px !important; padding-bottom:56px !important; } }
.lede-s{ margin-top:14px; }

/* ---------- callouts: one standard style ---------- */
.pivot{ background:transparent !important; border:0 !important; border-left:3px solid var(--acc) !important; border-radius:0 !important; padding:4px 0 4px 24px !important; box-shadow:none !important; }
.pivot .pivot-k{ color:var(--acc) !important; }
.pivot p strong{ background:none !important; }

/* ---------- section index: back link + per-item contrast ---------- */
.toc .toc-back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:26px; padding:8px 14px 8px 12px; border:1px solid var(--cs-line); border-radius:999px; font-size:13px; font-weight:500; color:var(--cs-ink); text-decoration:none; background:var(--cs-bg); transition:border-color .2s, color .2s, background .2s; }
.toc .toc-back:hover{ border-color:var(--acc); color:var(--acc); }
.toc .on-dark{ color:rgba(244,241,232,.62) !important; }
.toc a.on.on-dark, .toc a.on-dark:hover{ color:#f4f1e8 !important; }
.toc a.on.on-dark b{ color:var(--acc-soft) !important; } .toc a.on.on-dark{ border-left-color:var(--acc-soft) !important; }
.toc .toc-back.on-dark{ background:rgba(255,255,255,.06); border-color:rgba(244,241,232,.22); color:#f4f1e8 !important; }
.toc .toc-k.on-dark{ color:rgba(244,241,232,.55) !important; }
.toc a, .toc .toc-k, .toc .toc-back{ transition:color .12s linear, border-color .12s linear, background .12s linear; }

/* ---------- lightbox ---------- */
main figure img{ cursor:zoom-in; }
.lb{ position:fixed; inset:0; z-index:300; background:#080a12; opacity:0; pointer-events:none; transition:opacity .2s; }
.lb.open{ opacity:1; pointer-events:auto; }
.lb-in{ position:absolute; inset:68px 24px 52px; display:flex; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(244,241,232,.3) transparent; }
.lb-in img{ display:block; flex:none; margin:auto; max-width:100%; max-height:100%; width:auto; height:auto; border-radius:10px; cursor:zoom-in; user-select:none; -webkit-user-drag:none; }
.lb.zoomed .lb-in img{ max-width:none; max-height:none; cursor:grab; border-radius:4px; }
.lb.zoomed.drag .lb-in img{ cursor:grabbing; }
.lb-cap{ position:absolute; left:24px; right:24px; bottom:16px; color:rgba(244,241,232,.72); font-size:13.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-bar{ position:absolute; top:14px; right:16px; display:flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(244,241,232,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lb-bar button{ width:40px; height:40px; border-radius:50%; border:0; background:transparent; color:#f4f1e8; display:grid; place-items:center; cursor:pointer; transition:background .15s; }
.lb-bar button svg{ width:18px; height:18px; }
.lb-bar button:hover{ background:rgba(255,255,255,.12); }
.lb-bar button:disabled{ opacity:.35; cursor:default; background:transparent; }
.lb-bar button:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.lb-bar .lb-pct{ min-width:52px; text-align:center; font-family:var(--f-mono, ui-monospace, monospace); font-size:12px; letter-spacing:.04em; color:rgba(244,241,232,.85); font-variant-numeric:tabular-nums; }
.lb-bar .lb-sep{ width:1px; height:22px; background:rgba(244,241,232,.2); margin:0 4px; }
@media (max-width:640px){ .lb-in{ inset:64px 8px 48px; } .lb-bar{ right:8px; top:10px; } .lb-bar button{ width:38px; height:38px; } .lb-bar .lb-pct{ min-width:44px; } .lb-cap{ left:12px; right:12px; } }

@media (prefers-reduced-motion:reduce){ .toc a, .toc-sheet, .toc-btn, .next a, .next a span{ transition:none; } }
/* images read clearly on the light page */
main section.s:not(.tone-dark) figure.shot img{ border:1px solid rgba(21,20,42,.12) !important; box-shadow:0 1px 2px rgba(21,20,42,.06), 0 28px 60px -34px rgba(21,20,42,.42) !important; }
/* sub-section headings read as headings */
.s h3.sub{ font-size:clamp(28px,3vw,40px) !important; line-height:1.12 !important; letter-spacing:-.015em; color:var(--cs-ink); margin-bottom:12px !important; padding-top:16px; position:relative; }
.s h3.sub::before{ content:""; position:absolute; left:0; top:0; width:44px; height:3px; border-radius:2px; background:var(--acc); }
.tone-dark h3.sub::before{ background:var(--acc-soft); }
.hero .hero-sub{ max-width:62ch; }
.hero .impact-band{ margin-top:44px; }
.hero .meta{ margin-top:8px; }
main > section.s:has(+ section.s-next){ padding-bottom:40px !important; }
/* content column sits next to the section index with breathing room on the right */
@media (min-width:1180px){
  main > section.s > .wrap, main > section.s > figure.shot{ max-width:1080px; margin-left:0; margin-right:auto; }
  main > section.s > figure.shot{ padding-left:28px; padding-right:28px; }
}
.stage p + .ctx{ margin-top:22px; }

/* role / team / timeline sit under the hero image, with real gaps between columns */
.hero .wrap.meta-wrap{ padding-top:0; }
.hero .meta.meta-after{ margin-top:40px; column-gap:48px; max-width:1080px; }
.hero .meta.meta-after > div{ padding:22px 0 4px; }
@media (max-width:900px){ .hero .meta.meta-after{ grid-template-columns:1fr; row-gap:4px; } }

/* landing on a section from a homepage link: brief highlight on the heading */
@keyframes cs-flash{ 0%{ background-color:var(--cs-flash, rgba(55,48,163,.12)); } 100%{ background-color:transparent; } }
.cs-target h2{ animation:cs-flash 2.2s ease-out .4s 1 both; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* key insights: read the finding first, then the question, then what was built */
.in-card{ display:flex !important; flex-direction:column; padding:28px 26px 26px !important; }
.in-card .in-k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-muted) !important; margin:0 0 14px; }
.in-card h3.in-f{ font-family:var(--f-display); font-weight:500; font-size:25px; line-height:1.2; letter-spacing:-.01em; color:var(--cs-ink); margin:0 0 22px; }
.in-card .in-q{ border-left:3px solid var(--cs-cobalt); padding:2px 0 2px 16px; margin:0 0 22px; }
.in-card .in-ql, .in-card .in-dl{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.in-card .in-ql{ color:var(--cs-cobalt); }
.in-card .in-q{ font-family:var(--f-body); } .in-card .in-q p{ font-family:var(--f-body); font-size:17px; line-height:1.5; color:var(--cs-ink); margin:0; font-weight:500; }
.in-card .in-d{ margin-top:auto; padding-top:16px; border-top:1px solid var(--cs-line); }
.in-card .in-dl{ color:var(--cs-muted); }
.in-card .in-d p{ font-size:15px; line-height:1.55; color:var(--cs-body); margin:0; }


.theme .th-k{ display:block; font-family:var(--f-mono); font-size:11px !important; letter-spacing:.12em; text-transform:uppercase; color:var(--cs-cobalt) !important; margin-bottom:10px; }

/* impact timeline: the line runs from the first dot to the last, nothing above or below */
.tl{ border-left:0 !important; padding-left:30px !important; }
.tl-row::before{ left:-29px; z-index:1; }
.tl-row:not(:last-child)::after{ content:""; position:absolute; left:-24px; top:20px; bottom:-26px; width:2px; background:currentColor; opacity:.28; color:var(--cs-cobalt-soft, #b9a2ff); }

/* persona photo note */
.photo-note{ margin-top:14px !important; font-size:13.5px !important; color:var(--cs-muted) !important; }
.persona .avimg{ object-fit:cover; box-shadow:0 0 0 3px var(--cs-bg, #fff), 0 0 0 4px var(--cs-line); }

/* foundations: three points on the left, a larger architecture image on the right */
.pair.pair-big{ grid-template-columns:minmax(0,4fr) minmax(0,6fr) !important; gap:44px !important; }
@media (min-width:1440px){ main > section.s > .wrap .pair.pair-big{ margin-right:-120px; } }
@media (min-width:1600px){ main > section.s > .wrap .pair.pair-big{ margin-right:-200px; } }
@media (max-width:980px){ .pair.pair-big{ grid-template-columns:1fr !important; } }

/* project timeline: month labels centred under their phase */
.ptl-m.ptl-m-phase{ justify-content:flex-start; gap:6px; }
.ptl-m.ptl-m-phase span{ flex:0 0 calc(var(--w) - 5px); text-align:center; }

/* ---------- scannable problem + research blocks (Sortika) ---------- */
.sk-k{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-muted); margin:40px 0 14px; }
.sk-stat{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin:32px 0 8px; padding:22px 26px; border-radius:18px; border:1px solid var(--cs-line); background:color-mix(in srgb, var(--cs-cobalt, #6d4fd8) 6%, transparent); }
.sk-stat > b{ font-family:var(--f-display); font-weight:400; font-size:clamp(44px,5vw,60px); line-height:1; color:var(--cs-cobalt, #4c33b5); letter-spacing:-.02em; }
.sk-stat p{ margin:0 !important; font-size:17px; line-height:1.5; color:var(--cs-ink); }
.sk-stat cite{ display:block; margin-top:6px; font-style:normal; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cs-muted); }
.sk-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sk-card{ border:1px solid var(--cs-line); border-radius:16px; padding:20px 22px; background:var(--cs-card, rgba(255,255,255,.6)); }
.sk-tag{ display:block; font-weight:600; font-size:16px; color:var(--cs-ink); margin-bottom:8px; }
.sk-card p{ margin:0 !important; font-size:15.5px; line-height:1.55; color:var(--cs-body); }
.sk-list{ list-style:none; margin:0; padding:0; counter-reset:sk; display:grid; gap:12px; }
.sk-list li{ counter-increment:sk; position:relative; padding-left:44px; font-size:16.5px; line-height:1.55; color:var(--cs-body); }
.sk-list li::before{ content:counter(sk); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); font-size:12.5px; color:var(--cs-cobalt, #4c33b5); border:1px solid currentColor; }
.sk-list b{ color:var(--cs-ink); }
.sk-methods{ list-style:none; margin:0; padding:0; border:1px solid var(--cs-line); border-radius:16px; overflow:hidden; counter-reset:skm; }
.sk-methods li{ counter-increment:skm; display:grid; grid-template-columns:34px minmax(0,220px) 1fr; gap:14px; align-items:baseline; padding:14px 20px; border-top:1px solid var(--cs-line); }
.sk-methods li:first-child{ border-top:0; }
.sk-methods li::before{ content:counter(skm, decimal-leading-zero); font-family:var(--f-mono); font-size:12px; color:var(--cs-cobalt, #4c33b5); }
.sk-methods b{ font-size:16px; font-weight:600; color:var(--cs-ink); }
.sk-methods span{ font-size:15px; line-height:1.45; color:var(--cs-body); }
.sk-rows{ border-top:1px solid var(--cs-line); }
.sk-row{ display:grid; grid-template-columns:minmax(0,1.15fr) 36px minmax(0,1fr); gap:16px; align-items:center; padding:20px 0; border-bottom:1px solid var(--cs-line); }
.sk-src{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-muted); margin-bottom:6px; }
.sk-l p{ margin:0 !important; font-size:16px; line-height:1.5; color:var(--cs-body); }
.sk-l p b{ font-family:var(--f-display); font-weight:400; font-size:22px; color:var(--cs-ink); }
.sk-arrow{ font-size:20px; color:var(--cs-cobalt, #4c33b5); text-align:center; }
.sk-r{ font-size:16px; line-height:1.5; font-weight:600; color:var(--cs-ink); padding:12px 16px; border-radius:12px; background:color-mix(in srgb, var(--cs-cobalt, #6d4fd8) 7%, transparent); }
.sk-src-line{ margin-top:12px !important; font-size:13px !important; color:var(--cs-muted) !important; }
@media (max-width:760px){
  .sk-two{ grid-template-columns:1fr; }
  .sk-methods li{ grid-template-columns:30px 1fr; row-gap:2px; } .sk-methods span{ grid-column:2; }
  .sk-row{ grid-template-columns:1fr; gap:10px; } .sk-arrow{ text-align:left; transform:rotate(90deg); width:20px; }
  .sk-stat{ grid-template-columns:1fr; gap:10px; }
}
.sk-learn{ list-style:none; margin:0; padding:0; border-top:1px solid var(--cs-line); }
.sk-learn li{ display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--cs-line); }
.sk-learn .sk-src{ margin:0; }
.sk-learn p{ margin:0 !important; font-size:16px; line-height:1.55; color:var(--cs-body); }
.sk-learn strong{ color:var(--cs-ink); font-weight:600; }
@media (max-width:760px){ .sk-learn li{ grid-template-columns:1fr; gap:4px; } }
.sk-stat.sk-stat-impact{ margin:30px 0 26px; background:rgba(255,255,255,.05); border-color:rgba(244,241,232,.16); }
.tone-dark .sk-stat.sk-stat-impact > b{ color:#c4b5fd; }
.tone-dark .sk-stat.sk-stat-impact p{ color:#f4f1e8; font-size:18px; }
.tone-dark .sk-stat.sk-stat-impact cite{ color:rgba(244,241,232,.6); }

/* clean-up: flat heroes, no one-word italics */
header.hero.tone-dark{background:var(--hero-bg,#15142a)!important}
.hero::before,.hero::after{background-image:none!important;-webkit-mask-image:none!important;mask-image:none!important}
.highlight{background:#fff!important}
h1 em,h2 em,h3 em,.footer h2 .it,.hero h1 .it{font-style:normal!important;color:inherit!important}
.s .eyebrow.ch .ch-n,.nav-brand{font-style:normal!important}