:root{--body:Manrope,system-ui,sans-serif}
/* Complete shared components: interaction states, project media viewer and case information. */
.motion-switch{min-height:44px;padding:.35rem .1rem .35rem .4rem;gap:.55rem;font-family:var(--body);font-size:.8125rem;font-weight:650;line-height:1;white-space:nowrap}
.motion-switch>span:last-child{display:flex;align-items:baseline;gap:.35rem}.motion-switch b{display:none;font-size:.6875rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;font-weight:600;opacity:.65;min-width:1.55em}
.motion-switch .switch-track{width:28px;height:16px;border:1.5px solid var(--ink);background:transparent;box-shadow:none;display:block;position:relative;flex:none}
.motion-switch .switch-track>span{position:absolute;width:8px;height:8px;left:2px;top:2.5px;background:var(--ink);border:0;transform:none}
.motion-switch[aria-checked=true] .switch-track{background:var(--moss)}
.motion-switch[aria-checked=true] .switch-track>span{background:var(--paper);transform:translateX(12px)}
.motion-switch:hover{color:var(--moss)}.motion-switch:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.hero-art .hero-conversation .balloon:first-child{left:auto!important;right:7%!important;top:36%!important;width:37%}
.hero-art .hero-conversation .balloon:last-child{left:4%!important;right:auto!important;top:61%!important;width:25%}
.strip .panel-speech{position:absolute;z-index:3;min-height:0;padding:0;pointer-events:none;top:var(--bubble-y);left:var(--bubble-x);width:var(--bubble-width);--bubble-y:var(--bubble-y-wide)}
.strip .panel{grid-column:span 4}.strip .panel-art{height:auto;aspect-ratio:4/5}
.comic-chapter:nth-child(n){grid-column:span 6}
.chapter-art{height:auto;aspect-ratio:3/2}
.strip .panel-art .scene-portrait{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.strip .panel:has(.scene-portrait){background:#c4def0}
.strip .panel-speech .balloon{display:block;width:100%}
@media(max-width:1100px),(max-aspect-ratio:13/10){.hero-art .hero-conversation .balloon:first-child{right:3%!important;top:5%!important;width:41%}}
@media(max-width:640px){
 .strip .panel-speech{--bubble-y:var(--bubble-y-phone)}
 .hero-art .hero-conversation .balloon:first-child{right:2%!important;top:1%!important;width:46%;max-width:12rem}
 .hero-art .hero-conversation .balloon:last-child{left:3%!important;top:47%!important;width:40%;max-width:11rem}
}

/* Native dialog scrolls the image, while its controls stay in a stable separate footer. */
html.viewer-open{overflow:hidden}
.project-viewer{box-sizing:border-box;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;inset:0;background:#222621;color:#fff8e8;overflow:hidden}
.project-viewer::backdrop{background:#151915}
.project-viewer[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0}
.viewer-stage,.viewer-edges{grid-area:1/1;min-width:0;min-height:0}
.viewer-stage{overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;scroll-behavior:auto;background:#252923;outline-offset:-4px}
.viewer-stage.can-pan{cursor:grab}.viewer-stage.is-dragging{cursor:grabbing;user-select:none}
.viewer-surface{display:grid;place-items:center;min-width:100%;min-height:100%}
.viewer-image{display:block;max-width:none;max-height:none;object-fit:contain;user-select:none;-webkit-user-drag:none}
.viewer-image.is-loading{visibility:hidden}
.viewer-footer{grid-row:2;position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.7rem 1rem max(.7rem,env(safe-area-inset-bottom));background:#222621;color:#fff8e8}
.viewer-caption{max-width:80ch;text-align:center;font-size:.875rem;line-height:1.45;margin:0}
.viewer-bar{display:flex;align-items:center;justify-content:center;gap:.2rem;padding:.1rem .35rem;border:1px solid #8f978c;border-radius:1.8rem;background:#353c32}
.project-viewer button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;border:0;background:transparent;color:#fff8e8;padding:0;line-height:1;font-family:var(--body);font-size:1.5rem;cursor:pointer;border-radius:50%}
.project-viewer button:hover:not(:disabled){background:#55614e}.project-viewer button:focus-visible{outline:2px solid #f2c74c;outline-offset:2px}.project-viewer button:disabled{opacity:.35;cursor:default}
.viewer-bar output{min-width:4.1rem;text-align:center;font:600 .875rem/1 var(--body);font-variant-numeric:tabular-nums}
.viewer-bar [data-viewer-fit]{margin-left:.25rem;border-left:1px solid #8f978c;border-radius:0;font-size:1.35rem}
.viewer-count{padding:0 .65rem;border-left:1px solid #8f978c;font:500 .8125rem/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;color:#dce3d5}
.project-viewer .viewer-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:6;background:#fff8e8;color:#181a18;font-size:1.8rem;box-shadow:0 1px 5px #181a1855}
.project-viewer .viewer-close:hover{background:#f2c74c}
.project-viewer .viewer-nav{position:absolute;top:calc(50% - 3rem);z-index:5;background:#181a18aa;font-size:2.1rem}
.viewer-prev{left:12px}.viewer-next{right:12px}
.viewer-edges{position:relative;pointer-events:none;z-index:2;overflow:hidden}
.viewer-edges i{position:absolute;display:block;opacity:0;transition:opacity .15s;pointer-events:none}.viewer-edges i.on{opacity:1}
[data-viewer-edge=top]{inset:0 0 auto;height:38px;background:linear-gradient(#14191499,transparent)}
[data-viewer-edge=bottom]{inset:auto 0 0;height:38px;background:linear-gradient(transparent,#14191499)}
[data-viewer-edge=left]{inset:0 auto 0 0;width:38px;background:linear-gradient(90deg,#14191499,transparent)}
[data-viewer-edge=right]{inset:0 0 0 auto;width:38px;background:linear-gradient(90deg,transparent,#14191499)}
.viewer-intro{position:absolute;bottom:8.5rem;left:50%;transform:translateX(-50%);z-index:5;padding:.5rem .8rem;background:#181a18dd;color:#fff8e8;border-radius:1.5rem;white-space:nowrap;font-size:.8125rem;pointer-events:none;margin:0;animation:viewer-cue .35s ease-out both}
.viewer-loading{position:absolute;inset:40% 10% auto;text-align:center;font-size:1rem;pointer-events:none}
.project-viewer [hidden]{display:none!important}
@keyframes viewer-cue{from{opacity:0;transform:translate(-50%,5px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.viewer-edges i{transition:none}.viewer-intro{animation:none}}

@media(max-width:640px){.strip .panel{grid-column:1/-1}}

/* The source chapters give the scan a rhythm; evidence units stay together. */
.case-chapter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem;padding-block:3.5rem;border-bottom:1px solid #181a184d;align-items:start;scroll-margin-top:.5rem}
.case-chapter .case-reading-section{display:block;padding:0;border:0;scroll-margin-top:.5rem}
.case-chapter .case-reading-section+.case-reading-section{margin-top:3.25rem;padding-top:2.75rem;border-top:1px solid #181a1829}
.case-reading-section>h3{font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.2;letter-spacing:-.025em;margin:0 0 1.5rem;text-wrap:balance}
.case-section-detail:not(:empty){margin-top:1.75rem}
.case-section-lead.has-illustration{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center}
.case-section-illustration{margin:0;max-width:26rem}
.case-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.75rem 0 2rem}
.case-metrics>div{display:flex;flex-direction:column-reverse;justify-content:end;border-top:2px solid #181a18;padding-top:.85rem;gap:.65rem}
.case-metrics dt{font-size:.875rem;line-height:1.45;min-height:2.9em}.case-metrics dd{margin:0;font:800 clamp(2rem,4.1vw,3.75rem)/1 var(--display);letter-spacing:-.04em}
.case-metrics .metric-focus{border-top-color:#8e301a}.case-metrics .metric-focus dd{color:#8e301a}
.case-metrics.metrics-listening{grid-template-columns:repeat(6,minmax(0,1fr))}
.metrics-listening>div{grid-column:span 3}.metrics-listening>div.metric-focus{grid-column:span 2}
.case-metrics.metrics-listening>div{display:grid;grid-template-rows:auto 1fr;align-content:start}
.metrics-listening dt{grid-row:2}.metrics-listening dd{grid-row:1;white-space:nowrap}
.case-insight{border-left:4px solid #315540;padding:1rem 1.25rem;background:#dce3cd;margin:1.5rem 0}
.case-insight p:last-child{margin-bottom:0}.case-insight .case-label{font-size:.75rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;margin:0 0 .45rem}
.case-definitions,.case-decision-details,.case-tradeoffs,.case-comparison{margin:1.5rem 0 0;display:grid;gap:1.1rem}
.case-definitions>div,.case-decision-details>div{display:grid;grid-template-columns:minmax(7rem,.32fr) minmax(0,1fr);gap:1rem}
.case-definitions dt,.case-decision-details dt,.case-tradeoffs dt,.case-comparison dt{font-weight:800;line-height:1.45}.case-definitions dd,.case-decision-details dd,.case-tradeoffs dd,.case-comparison dd{margin:0}
.case-tradeoffs,.case-comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.case-tradeoffs>div,.case-comparison>div{border-top:2px solid #181a18;padding-top:.9rem}.case-tradeoffs dd,.case-comparison dd{margin-top:.5rem}
.case-numbered{display:grid;gap:.85rem;margin:1.5rem 0 0;padding-left:1.75rem}.case-numbered li{padding-left:.35rem}.case-numbered li::marker{font-weight:800;color:#8e301a}
.case-decisions{display:grid;gap:2rem}.case-decision{padding-top:1rem;border-top:2px solid #181a18}.case-decision h4{display:flex;gap:1rem;align-items:baseline;font-size:1.25rem;line-height:1.35;margin:0}.case-decision h4>span{color:#8e301a;font-size:.875rem;letter-spacing:.03em}.case-decision-details{margin-top:1rem}
.case-process-steps{display:grid;gap:1.5rem;padding-left:1.5rem;margin:1.5rem 0}.case-process-steps h4,.case-learning h4{margin:0 0 .5rem;font-size:1.15rem}.case-process-steps li::marker{font-weight:800;color:#8e301a}.case-process-steps p{margin:0}.case-learning{display:grid;gap:1.5rem}
@media(max-width:900px){.case-chapter{column-gap:1.5rem}.case-chapter>.case-section-heading{grid-column:1/5}.case-chapter>.case-section-body{grid-column:5/13}.case-section-lead.has-illustration{display:block}.case-section-illustration{max-width:23rem;margin-bottom:1.5rem}.case-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.case-chapter{display:block;padding-block:2.5rem}.case-chapter>.case-section-heading{position:static;margin-bottom:1.75rem}.case-chapter .case-reading-section+.case-reading-section{margin-top:2.5rem;padding-top:2rem}.case-definitions>div,.case-decision-details>div{display:block}.case-definitions dd,.case-decision-details dd{margin-top:.3rem}.case-tradeoffs,.case-comparison{grid-template-columns:1fr}.case-metrics{gap:1.25rem .8rem}.case-metrics dt{min-height:0}.case-metrics dd{font-size:2.75rem}}
@media(max-width:640px){.case-metrics.metrics-listening dd{font-size:clamp(1.85rem,8.6vw,2.75rem)}}
.case-final-design{margin-top:2.75rem;padding-top:2rem;border-top:1px solid #181a1840}.case-final-design h3{font-size:1.9rem;line-height:1.2;margin:0 0 .6rem}.case-final-design>p{margin:0 0 1.5rem;font-size:1rem;line-height:1.6}
.case-final-design .case-section-media{display:grid;grid-template-columns:1fr;gap:2rem}.case-final-design .plate:has(img[src*="giathuoctot.com-3."]){max-width:30rem;margin-inline:auto}
.case-pinned-image{position:relative}.case-figure-pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:1.8rem;height:1.8rem;border:2px solid #fff8e6;border-radius:50%;box-shadow:0 0 0 1px #181a18;background:#315540;color:#fff8e6;font-size:.8rem;font-weight:800;line-height:1;pointer-events:none}
.case-figure-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.5rem;margin:1rem 0 0;font-size:.875rem;line-height:1.5}.case-figure-legend>div{display:flex;align-items:baseline;gap:.7rem}.case-figure-legend dt{font-weight:800;color:#315540}.case-figure-legend dd{margin:0}
@media(max-width:640px){.case-figure-pin{width:1.25rem;height:1.25rem;font-size:.65rem;border-width:1px}.case-figure-legend{grid-template-columns:1fr}}
/* Reserve the same space above Búp's ears even when the lettering keeps its
   readable font size on a narrower panel. The slot stays fixed during acting. */
.strip-work .panel-0 .panel-speech{top:auto;bottom:47%}

/* A stacked hero gives its controls a real row above the art. Lettering owns
   the image area; a hidden preference state reserves the same rail height. */
@media(min-width:641px) and (max-width:1100px),(min-width:641px) and (max-aspect-ratio:13/10){
 .hero-figure{display:flex;flex-direction:column}
 .hero-toolbar{order:-1;position:relative;inset:auto;justify-content:flex-end;flex-shrink:0}
}

/* Source callouts and the enlargement action occupy separate figure regions. */
.case-section-media .plate.has-callouts figcaption{max-width:none}
.case-figure-caption{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.case-figure-caption>span{min-width:0;max-width:66ch}
.case-section-media .plate.has-callouts .plate-open{position:static;flex-shrink:0}

/* The two-line phone reply needs the same clear ear space as its one-line
   desktop version. This is a fixed camera composition, not an acting effect. */
@container comic-panel (max-width:320px){
 .contact-bup-pose{transform:translate(0,70px) scale(.88);transform-origin:560px 1300px}
 .strip-contact .panel-1 .panel-speech{top:auto;bottom:calc(64% + clamp(10px,7cqw,26px) + 8px)}
}

.case-figure-legend{font-weight:500}

/* Lettering grows upward within authored headroom when a reply wraps. */
.strip .panel{container-type:inline-size;container-name:comic-panel}
.strip-work .panel-1 .panel-speech{top:auto;bottom:calc(65% + clamp(10px,7cqw,26px) + 8px)}
.strip-lead .panel-1 .panel-speech{top:auto;bottom:calc(69% + clamp(10px,7cqw,26px) + 8px)}
/* Three readable frames need enough width. A narrow tablet uses the same
   sequential reading order as a phone rather than compressed columns. */
@media(min-width:641px) and (max-width:860px){
 .story{max-width:420px;margin-inline:auto}
 .strip .panel{grid-column:1/-1}
}