/* ============================================================
   Shared case-study components — pairs with site.css tokens
   Ivory / charcoal / burgundy · editorial serif + grotesk
   ============================================================ */

/* reading progress */
.read-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:80;transition:transform .1s linear}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#FFFDF9 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,74px);align-items:center;padding-block:clamp(52px,8vw,108px)}
.hero h1{font-size:clamp(34px,5.4vw,66px);line-height:1.05;letter-spacing:-.022em;margin:16px 0 22px;font-weight:400}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lead{font-size:clamp(17.5px,1.8vw,21px);color:var(--ink-soft);max-width:44ch}
.role-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:8px 14px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.role-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero-art{position:relative}

/* device frame — restrained, hairline, no toy chrome */
.device{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0;overflow:hidden;box-shadow:0 34px 64px -40px rgba(23,19,16,.34)}
.device .bar{display:flex;gap:6px;padding:11px 13px;border-bottom:1px solid var(--line);background:var(--bg-warm)}
.device .bar i{width:7px;height:7px;border-radius:50%;background:#C9C1B6;display:block}
.device img,.device image-slot{display:block;width:100%;background:var(--bg-deep)}

/* ---------- meta strip ---------- */
.meta-strip{border-bottom:1px solid var(--line);background:var(--surface)}
.meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.meta-cell{padding:clamp(22px,2.6vw,32px) clamp(14px,2vw,30px);border-left:1px solid var(--line-soft)}
.meta-cell:first-child{border-left:0;padding-left:0}
.meta-cell .k{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 9px}
.meta-cell .v{font-size:15.5px;line-height:1.5;color:var(--ink);margin:0}

/* ---------- section furniture ---------- */
.split-head{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,76px);align-items:start}
.split-head h2.sec-title{margin-bottom:0}

/* findings */
.findings{display:grid;gap:0;border-top:1px solid var(--line)}
.finding{display:grid;grid-template-columns:56px 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;padding:clamp(22px,2.8vw,34px) 0;border-bottom:1px solid var(--line)}
.finding .n{font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:.05em;padding-top:5px}
.finding h3{font-size:clamp(19px,2.1vw,25px);line-height:1.2;letter-spacing:-.01em;margin:0 0 9px}
.finding p{font-size:16.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.finding .quote{margin-top:16px}

/* callout / big statement */
.callout{border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r);background:var(--surface);padding:clamp(24px,3vw,40px)}
.callout .big{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);line-height:1.34;letter-spacing:-.01em;color:var(--ink);max-width:46ch;margin:0}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}
.quote{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r);padding:clamp(22px,2.6vw,32px);margin:0}
.quote p{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink);margin:0 0 14px}
.quote .src{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}

/* recommendations */
.recs{display:grid;gap:clamp(18px,2.2vw,26px)}
.rec{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);transition:border-color .22s,box-shadow .22s,transform .22s}
.rec:hover{border-color:var(--accent-line);box-shadow:0 22px 44px -32px rgba(23,19,16,.3);transform:translateY(-2px)}
.rec .rk{font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:.05em;padding-top:3px}
.rec h3{font-size:18.5px;line-height:1.25;margin:0 0 8px}
.rec p{font-size:15.5px;line-height:1.58;color:var(--ink-soft);margin:0}
.rec .rv{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);display:block}

/* personas */
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}
.persona{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.6vw,32px)}
.persona-head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.persona-avatar{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-tint);color:var(--accent);font-family:var(--serif);font-size:19px}
.persona-head h3{font-size:20px;line-height:1.2;margin:0 0 4px}
.persona-head .pr{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:0}
.persona-rows{display:grid;gap:14px}
.persona-row{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start;font-size:15.5px;line-height:1.55}
.persona-row .pk{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.persona-row .pn{color:var(--ink-soft);margin:0}
.persona-quote{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink);font-style:italic}

/* profile (simple key/value block) */
.profile{display:grid;gap:12px}
.profile .r{display:grid;grid-template-columns:130px 1fr;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);font-size:15.5px;line-height:1.55}
.profile .r:last-child{border-bottom:0;padding-bottom:0}
.profile .k{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);padding-top:3px;margin:0}
.profile .v{color:var(--ink-soft);margin:0}

/* timeline */
.timeline{border-top:1px solid var(--line)}
.tl-row{display:grid;grid-template-columns:60px 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line)}
.tl-num{font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:.05em;padding-top:4px}
.tl-row h3{font-size:19px;line-height:1.22;margin:0 0 8px}
.tl-row p{font-size:16px;line-height:1.58;color:var(--ink-soft);margin:0}
.tl-row .tagsm{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:12px}
.tl-row .tagsm span,.tagsm span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}

/* severity / priority bars */
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}
/* artifact mats: every screenshot sits contained on a fixed-height warm mat, so
   portrait and landscape artifacts read as one framing system */
.flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.2vw,26px);align-items:start}
.flow-grid > figure,.flow-grid > div{margin:0}
.flow-grid img,.flow-grid image-slot,.flow-grid .summa-shot{width:100%;height:380px;max-height:380px;object-fit:contain;object-position:center top;background:var(--bg-warm);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.a11y{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.2vw,28px)}
.a11y h3{font-size:17.5px;line-height:1.25;margin:0 0 10px}
.a11y p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0}
.barwrap{display:grid;gap:12px;margin-top:8px}
.bar{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;font-size:13.5px}
.bar .t{font-weight:600;letter-spacing:.05em;color:var(--ink-soft)}
.bar .bk{height:6px;background:var(--bg-deep);border-radius:2px;overflow:hidden}
.bar .cnt{font-size:12.5px;font-weight:600;color:var(--ink-mute);letter-spacing:.06em}
.sw{display:block;height:100%;border-radius:2px;background:var(--accent)}
.sw-crit{background:var(--accent)}
.sw-major{background:#8A5054}
.sw-minor{background:#B79A97}
.priority-key{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.priority-key .k{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);border-radius:var(--r);padding:6px 11px}
.priority-key .bdot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block}
.tag-crit,.tag-major{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--accent-line);border-radius:var(--r);padding:3px 8px;color:var(--accent)}
.tag-major{border-color:var(--line);color:var(--ink-mute)}
.bar-crit .sw{background:var(--accent)}
.bar-major .sw{background:#8A5054}

/* value proposition canvas */
.vp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}
.vp-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px)}
.vp-title{font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 16px;font-family:var(--sans)}
.vp-block{margin-bottom:18px}
.vp-block:last-child{margin-bottom:0}
.vp-block h4{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);margin:0 0 8px}
.vp-block ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vp-block li{font-size:15px;line-height:1.5;color:var(--ink-soft);padding-left:13px;position:relative}
.vp-block li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;background:var(--accent-line)}

/* contributions / reflection */
.contrib{display:grid;gap:12px;margin-top:8px}
.contrib li,.reflect li{display:flex;gap:11px;align-items:flex-start;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.contrib li svg,.reflect li svg{flex:none;width:14px;height:14px;color:var(--accent);margin-top:5px}
.reflect{display:grid;gap:clamp(18px,2.2vw,26px)}

/* ---------- editorial narrative rows (reusable across case studies) ---------- */
.ed-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(26px,4vw,56px);align-items:center;padding-block:clamp(30px,4vw,46px);border-top:1px solid var(--line-soft)}
.ed-row:first-of-type{border-top:0}
.ed-row.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.ed-copy .k{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.ed-copy h3{font-family:var(--serif);font-size:clamp(22px,2.5vw,30px);font-weight:400;line-height:1.14;letter-spacing:-.015em;margin:0 0 13px;max-width:22ch}
.ed-copy p{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 11px;max-width:46ch}
.ed-copy p:last-child{margin-bottom:0}
.ed-copy .pull{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:var(--accent-deep);margin:18px 0 6px;padding-top:16px;border-top:1px solid var(--accent-line);max-width:34ch}
.ed-copy .attr{margin:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
.ed-shot figure{margin:0}
.ed-shot img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;object-position:top center;display:block;background:var(--bg-warm);border-radius:var(--r);cursor:zoom-in}
.ed-shot .cap{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-mute)}
.ed-shot .cap b{color:var(--ink-soft);font-weight:600}
.ed-shot.doc img{aspect-ratio:auto}
.ed-shot.doc .doc-window{max-height:none;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
@media (max-width:860px){.ed-row,.ed-row.rev{grid-template-columns:1fr;gap:22px;padding-block:28px}.ed-copy p,.ed-copy h3{max-width:none}}
/* carousel for genuinely related screen groups */
.caro{position:relative}
.caro .frames{position:relative}
.caro .frames figure{margin:0;display:none}
.caro .frames figure[data-active]{display:block}
.caro-nav{display:flex;align-items:center;gap:10px;margin-top:11px}
.caro-nav button{appearance:none;width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.caro-nav button:hover{border-color:var(--accent);color:var(--accent)}
.caro-nav svg{width:13px;height:13px}
.caro-dots{display:flex;gap:6px;margin-left:2px}
.caro-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block;cursor:pointer;transition:background .15s}
.caro-dots i[data-active]{background:var(--accent)}
.caro-count{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- shared artifact sizing system (all case studies) ---------- */
.art{margin:0}
.art img,.art image-slot,.summa-shot,.tvc-shot,.pilr-shot,.bit-shot{width:100%;display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
/* featured: one wide hero artifact per section */
.art-feature img{object-position:top center}
.art-feature{max-width:640px}
figure.art.art-feature img{height:auto;max-height:none;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:var(--bg-warm)}
.shot-row{display:grid;gap:16px;align-items:start;max-width:860px}
.shot-row.two{grid-template-columns:1fr 1fr}
.shot-row.three{grid-template-columns:1fr 1fr}
.shot-row figure{margin:0}
.shot-row img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top center;display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-warm);cursor:zoom-in}
.shot-row.three img:last-child{grid-column:auto}
.shot-row .cap{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-mute)}
.shot-row .cap b{color:var(--ink-soft);font-weight:600}
/* tall documents: crop to a readable window, expand for the rest */
.art-doc{max-width:520px;margin-inline:auto}
.art-doc .doc-window{max-height:380px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.art-doc .doc-window img{border:0;border-radius:0;max-height:none;cursor:zoom-in}
@media (max-width:860px){.shot-row.two,.shot-row.three{grid-template-columns:1fr}.shot-row img{aspect-ratio:16/10}}
.art figcaption{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-mute);max-width:72ch}
.art figcaption b{color:var(--ink-soft);font-weight:600}
.img-reveal{overflow:hidden}
html.js-anim .img-reveal img{opacity:0;transform:scale(1.02)}
html.js-anim .img-reveal.in img{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}

/* next-project nav */
.cs-next{border-top:1px solid var(--line);background:var(--bg-warm)}
.cs-next .wrap{padding-block:clamp(34px,4.6vw,58px)}
.cs-next-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cs-next a{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:color .18s,border-color .18s}
.cs-next a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.cs-next a svg{width:15px;height:15px;transition:transform .2s}
.cs-next a:hover svg{transform:translateX(3px)}
.cs-next a.prev:hover svg{transform:translateX(-3px)}

@media (max-width:1040px){
  .hero-inner{grid-template-columns:1fr;gap:34px}
  .split-head{grid-template-columns:1fr}
  .meta-grid{grid-template-columns:1fr 1fr}
  .meta-cell{border-left:0;border-top:1px solid var(--line-soft);padding-inline:0}
  .meta-cell:first-child,.meta-cell:nth-child(2){border-top:0}
  .persona-grid,.quotes,.a11y-grid,.vp-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .finding,.tl-row{grid-template-columns:1fr;gap:10px}
  .persona-row,.profile .r{grid-template-columns:1fr;gap:4px}
  .bar{grid-template-columns:1fr auto;gap:8px}
  .bar .bk{grid-column:1/-1}
  .rec{grid-template-columns:1fr;gap:12px}
}

/* slot frames */
image-slot{display:block;width:100%;min-height:150px;max-height:230px;border:1px dashed var(--line);border-radius:var(--r);background:var(--bg-warm)}
.slot-hint{font-size:13px;line-height:1.5;color:var(--ink-mute);margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line)}
.slot-hint b{color:var(--accent);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px;display:inline-block;margin-right:8px}
.device image-slot{border:0;border-radius:0;min-height:200px;max-height:260px}
.art image-slot{border:1px dashed var(--line)}
.summa-shot,.pilr-shot,.tvc-shot,.bit-shot{width:100%;display:block}
image-slot.summa-shot,image-slot.pilr-shot,image-slot.tvc-shot,image-slot.bit-shot{aspect-ratio:auto;height:200px;min-height:0;max-height:200px}

/* recovered rules for markup that outlived the old inline stylesheets */
.meta-cell .v small{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:var(--ink-mute);letter-spacing:.01em}
.meta-cell .v a{color:var(--accent);border-bottom:1px solid var(--accent-line);text-decoration:none}
.meta-cell .v a:hover{border-color:var(--accent);text-decoration:none}
.card .ic,.callout .ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--accent-line);border-radius:var(--r);color:var(--accent);font-size:12px;line-height:1;background:var(--accent-tint)}

/* interview-script sheet */
.script-sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,34px)}
.script-top{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:clamp(18px,2.2vw,26px)}
.script-k{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 7px}
.script-meta{font-size:14px;color:var(--ink-mute);margin:0}
.script-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.2vw,28px)}
.script-sec{border-top:1px solid var(--line-soft);padding-top:14px}
.script-h{display:flex;gap:10px;align-items:baseline;font-family:var(--serif);font-size:16.5px;line-height:1.25;color:var(--ink);margin:0 0 10px}
.script-h span{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--accent)}
.script-sec ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.script-sec li{font-size:14.5px;line-height:1.5;color:var(--ink-soft);padding-left:13px;position:relative}
.script-sec li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;background:var(--accent-line)}