/* Reader feedback revision: scene-attached dialogue and a clear editorial navigation. */
:root{--site-header-height:80px;--header-height:80px}
.site-header{padding-inline:0;border-bottom:3px solid var(--ink);background:var(--paper);box-shadow:0 3px 0 rgb(24 26 24 / .1)}
.header-row{width:min(100% - 2*var(--gut),1440px);margin:auto;min-height:77px;padding:0;gap:2rem;align-items:center}
.identity{display:flex;flex-direction:column;align-items:start;gap:3px;flex:none;text-decoration:none;transform:rotate(-2deg)}
.identity img{width:112px;height:auto;max-width:none}.identity small{font-size:.8125rem;letter-spacing:.015em;line-height:1.2;font-weight:750}
.header-row nav{display:flex;gap:clamp(1.2rem,2.5vw,2.6rem);align-items:center;margin-left:auto}
.header-row nav a{font:800 clamp(1rem,1.3vw,1.2rem)/1.2 var(--display);position:relative;min-height:44px;display:flex;align-items:center;text-decoration:none}
.header-row nav a::after{content:"";position:absolute;bottom:4px;left:0;width:100%;height:4px;background:var(--orange);transform:scaleX(0) rotate(-3deg);transform-origin:left;transition:transform .18s ease}
.header-row nav a:hover::after,.header-row nav a[aria-current]::after{transform:scaleX(1) rotate(-3deg)}
.header-row nav a:last-child{background:var(--ink);color:var(--light);padding:.55rem 1rem;border-radius:0;transform:rotate(-2deg)}
.header-row nav a:last-child::after{display:none}.header-row nav a:last-child:hover{background:var(--moss)}
.motion-switch{border:0;background:transparent;padding:0;gap:.45rem;font-size:.8125rem;font-weight:700;flex:none}.variant-bar{margin:0}.switch-track{width:32px;height:20px}.switch-track>span{width:12px;height:12px}.motion-switch[aria-checked=true] .switch-track>span{transform:translateX(12px)}
.hero-art{scroll-margin-top:0}
.hero-toolbar:has(.controls[hidden]){visibility:hidden}
@media(min-width:1101px) and (min-aspect-ratio:13/10){.hero-toolbar{position:absolute;top:.65rem;right:var(--gut);height:44px;min-height:44px;padding:0 .5rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);z-index:4}.hero-toolbar .controls button{color:var(--ink)}}
.hero-art .hero-conversation{position:absolute!important;inset:0!important;width:100%!important;height:100%;margin:0!important;display:block!important;z-index:3;pointer-events:none;order:initial!important}
.hero-art .hero-conversation .balloon{position:absolute!important;margin:0!important;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.3;padding:.9rem 1rem;max-width:none;color:var(--ink)}
.hero-art .hero-conversation .balloon:first-child{left:auto;right:2%;top:23%;width:27%;--tail:8%}
.hero-art .hero-conversation .balloon:last-child{left:8%;top:61%;width:22%;--tail:80%}
/* Each strip is one illustrated frame. Speech occupies nearby negative space, never a separate UI row. */
.story{position:relative;padding-top:3.4rem;margin-top:1rem}.story .scene-tools{position:absolute;right:0;top:0;margin:0;min-height:44px}.scene-tools button{font-size:.875rem;font-weight:750;padding:.4rem .7rem;background:var(--ink);color:var(--light);border-radius:0;gap:.45rem}.scene-tools button span{font-size:1.1rem}.scene-tools button:hover{background:var(--moss);text-decoration:none}
.strip .panel{position:relative;display:block;overflow:hidden;min-width:0;scroll-margin-top:0}
.strip .panel-art{width:100%;height:clamp(25rem,34vw,34rem);margin:0;position:relative}
.strip .panel-speech{position:absolute;z-index:3;left:5%;top:4%;width:90%;min-height:0;padding:0;pointer-events:none}
.strip .panel-speech .balloon{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.35;padding:.8rem 1rem;max-width:100%;margin:0;--tail:30%}
.strip-work .panel-0 .balloon{--tail:30%}
.strip-work .panel-1 .balloon{--tail:26%}
.strip-work .panel-2 .balloon{--tail:48%}
.strip-lead .panel-1 .balloon{--tail:30%}
.strip-contact .panel-art{height:clamp(23rem,29vw,30rem)}
.strip-contact .panel-0 .balloon{--tail:28%}.strip-contact .panel-1 .balloon{--tail:38%}.strip-contact .panel-2 .balloon{--tail:65%}
/* Taxonomy reads as metadata; the single case action has a clear filled affordance. */
.work-tags{display:flex;gap:.25rem .9rem;flex-wrap:wrap;list-style:none;padding:0;margin:1rem 0 1.5rem}
.work-tags li{border:0!important;border-radius:0!important;background:none!important;padding:0!important;font-size:.875rem;font-weight:600;line-height:1.6;opacity:.85}
.work-tags li+li::before{content:"/";margin-right:.8rem;opacity:.7}
.case-read{display:inline-flex;gap:1.3rem;align-items:center;background:var(--light);color:var(--ink);padding:.7rem 1.1rem;min-height:44px;border:2px solid var(--ink);border-radius:0;font-weight:800;text-decoration:none}
.case-read::after{display:none!important}.case-card>a:is(:hover,:focus-visible) .case-read{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.process-marquee{padding:.4em 0 .4em clamp(1.5rem,4vw,4rem);line-height:1.4;overflow:hidden;clip-path:none;contain:none;mask-image:none}
.marquee-group{display:flex;align-items:center;gap:1.15em;padding-inline:0 1.15em;overflow:visible;flex:none;white-space:nowrap}
.marquee-group span{display:block;overflow:visible;padding-block:.08em}.marquee-group b{font-size:.6em;font-weight:500;color:var(--moss)}
.marquee-track{overflow:visible}
.motion-off .process-marquee,html:not(.js-ready) .process-marquee{font-size:clamp(1.4rem,4vw,3.5rem);padding-inline:0}
.motion-off .marquee-track,html:not(.js-ready) .marquee-track{width:100%;animation:none}
.motion-off .marquee-group,html:not(.js-ready) .marquee-group{width:100%;padding:.25em 1rem;white-space:normal;flex-wrap:wrap;justify-content:center;gap:.4em .8em;text-align:center}
.motion-off .marquee-group:nth-child(2),.motion-off .marquee-group b,html:not(.js-ready) .marquee-group:nth-child(2),html:not(.js-ready) .marquee-group b{display:none}
.motion-off .process-marquee::before,.motion-off .process-marquee::after,html:not(.js-ready) .process-marquee::before,html:not(.js-ready) .process-marquee::after{display:none}
@media(max-width:1100px){.header-row{gap:1rem}.header-row nav{gap:1rem}.hero-art .hero-conversation .balloon:first-child{right:3%;top:13%;width:31%}.hero-art .hero-conversation .balloon:last-child{left:5%;top:61%;width:26%}}
@media(max-width:960px){:root{--site-header-height:112px;--header-height:112px}.header-row{padding-block:.65rem;min-height:109px;flex-wrap:wrap;gap:.3rem 1rem}.identity img{width:98px}.header-row nav{order:3;width:100%;justify-content:space-between;margin:0;gap:.5rem}.header-row nav a{font-size:1rem}.header-row nav a:last-child{padding:.4rem .7rem;min-height:36px}.variant-bar{margin-left:auto}.strip .panel-art{height:26rem}.hero-art .hero-conversation .balloon:first-child{right:3%;top:9%;width:37%}.hero-art .hero-conversation .balloon:last-child{left:3%;top:59%;width:31%}}
@media(max-width:640px){.story{padding-top:0}.story .scene-tools{position:relative;top:auto;right:auto;justify-content:flex-end;margin:.75rem 0 0}.strip .panel-art,.strip-contact .panel-art{height:28rem}.strip .panel-speech .balloon{font-size:1rem}.hero-art .hero-conversation .balloon{font-size:1rem;line-height:1.25;padding:.65rem .75rem}.hero-art .hero-conversation .balloon:first-child{right:2%;top:1%;width:48%;max-width:12rem}.hero-art .hero-conversation .balloon:last-child{left:2%;top:52%;width:43%;max-width:11rem}.hero-art{min-height:23rem}.hero-art>svg:not(.attached-tail){min-height:23rem;object-fit:cover}.work-tags{margin:.65rem 0 1rem}.process-marquee{font-size:2rem}.header-row{width:calc(100% - 2rem)}.header-row nav a{font-size:.95rem}.motion-switch{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){.header-row nav a::after{transition:none}}
@media(max-width:640px){.process-marquee{font-size:clamp(1.4rem,7.5vw,2rem)}}
.strip-contact .panel-2 .balloon{--tail:80%;padding:.8rem .9rem}
/* Keep the illustration's own rectangle as the bubble coordinate space. */
@media(max-width:1100px),(max-aspect-ratio:13/10){.experimental .hero-art{display:block!important;min-height:0;padding:0}.experimental .hero-art>svg:not(.attached-tail){display:block;width:120vw;height:auto;min-height:0;margin-left:-7.5vw}.hero-art .hero-conversation .balloon:first-child{top:1%}.hero-art .hero-conversation .balloon:last-child{top:55%}}
@media(max-width:640px){.header-row nav{flex-wrap:nowrap!important;gap:.4rem}.header-row nav a{padding:0;white-space:nowrap;min-width:0;font-size:.875rem}.header-row nav a:last-child{padding:.4rem .6rem}.hero-art .hero-conversation .balloon:first-child{width:46%;font-size:.9375rem}.hero-art .hero-conversation .balloon:last-child{top:54%;width:40%;font-size:.9375rem}}

/* Original static narrative artwork; editable speech is composed into the same frame. */
.raster-comic{width:100%;border:3px solid var(--ink);background:var(--moss);max-width:none;overflow:hidden}
.raster-comic-scene{position:relative;isolation:isolate;aspect-ratio:3/2;overflow:hidden}
.raster-comic-scene>img{display:block;width:100%;height:100%;object-fit:contain}
.raster-comic-dialogue{position:absolute;left:var(--bubble-x);top:var(--bubble-y);width:var(--bubble-w);z-index:3}
.raster-comic .balloon{width:100%;margin:0!important;padding:.6rem .65rem;line-height:1.25;font-size:1rem;font-weight:650;max-width:none}
@media(max-width:640px){.raster-comic .balloon{padding:.5rem .55rem;font-size:1rem}}
.strip-work .panel-0,.strip-work .panel-1,.strip-work .panel-2{grid-column:span 4}

@media(max-width:640px){.strip-work .panel-0,.strip-work .panel-1,.strip-work .panel-2{grid-column:1/-1}}
@media(max-width:640px){.strip .panel-art,.strip-contact .panel-art{height:24rem}}
@media(max-width:360px){.header-row{width:calc(100% - 1.5rem)}.header-row nav{display:grid;grid-template-columns:repeat(5,max-content);gap:.4rem;justify-content:space-between}.header-row nav a{font-size:.8125rem;letter-spacing:0;min-height:40px}.header-row nav a:last-child{padding:.35rem .45rem}.identity img{width:90px}.motion-switch{font-size:.8125rem}}
@media(max-width:640px){.hero-art .hero-conversation .balloon:last-child{top:40%}}
/* Tall laptop windows retain a two-line headline instead of a narrow middle orphan. */
@media(min-width:1101px) and (max-width:1350px) and (min-aspect-ratio:13/10){.experimental .hero-copy{width:54vw}}

/* One shared speech silhouette, with the short pointer merged into its outline. */
.speech-composed .speech-shell{overflow:visible}.speech-composed .speech-shell path{stroke-width:3;stroke-linejoin:round}