@charset "UTF-8";
:root{--ink:#171717;--muted:#666;--blue:#171717;--line:#dededb;--paper:#fff;--soft:#f5f5f3;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit}img{display:block;max-width:100%;height:auto}button{font:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.1;font-weight:500;letter-spacing:-.045em}.wrap{width:min(var(--max),calc(100% - 7rem));margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;padding-block:2.2rem;gap:1rem}.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-weight:500;letter-spacing:-.025em}.monogram{font-size:1.6rem;font-weight:600;letter-spacing:-.12em;padding-right:.25rem}.header nav{display:flex;gap:2rem}.header nav a{text-decoration:none;font-size:.9rem}.header nav a:hover,.about-links a:hover{opacity:.6}.skip{position:fixed;left:1rem;top:-8rem;background:var(--ink);color:white;padding:1rem;z-index:100}.skip:focus{top:1rem}:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}.hero{padding-block:5.4rem 5.6rem}.hero h1{font-size:clamp(3.5rem,7.4vw,6.4rem);letter-spacing:-.065em;max-width:1100px;margin-top:1.6rem;line-height:1.02}.hero h1 span{color:var(--ink)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:4rem;margin-top:2.8rem}.hero-bottom p{font-size:1.1rem;max-width:33rem;color:var(--muted);line-height:1.7}.experience-note{font-size:.8rem;line-height:1.9;color:var(--muted);max-width:20rem}.experience-note strong{font-weight:400;color:var(--ink)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1.4rem;margin-bottom:2.8rem}.section-heading h2{font-size:1.15rem;letter-spacing:-.025em}.section-heading span{color:var(--muted);font-size:.8rem}.project-grid{display:grid;grid-template-columns:1fr;gap:4.6rem}.project-card{text-decoration:none;display:block}.project-art{overflow:hidden;background:transparent;border:0;padding:0;border-radius:0}.project-art img{width:100%;height:auto;object-fit:cover;transition:transform .45s}.project-card:hover .project-art img{transform:scale(1.015)}.card-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;color:var(--muted);margin-block:1.35rem .8rem;letter-spacing:.02em}.project-card h3{font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.045em}.project-card p{color:var(--muted);margin-top:.7rem;max-width:40rem;font-size:.95rem}.text-link{display:inline-block;font-size:.8rem;font-weight:400;margin-top:1.15rem;border-bottom:1px solid #999;padding-bottom:.1rem}.visual-section{margin-top:5.5rem}.visual-card{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line);overflow:hidden;text-decoration:none;align-items:center;gap:3rem;padding-block:2.5rem;background:var(--paper)}.visual-card>div{padding:0}.visual-card h2{font-size:2.7rem;margin-top:1rem}.visual-card p{max-width:23rem;color:var(--muted);margin-top:1.3rem;font-size:.95rem}.visual-card>img{width:100%;height:100%;max-height:360px;object-fit:contain}.about{display:block;padding-block:6.5rem}.about .section-heading{border-top:1px solid var(--line);padding-top:1.4rem}.about-intro{display:block;max-width:800px;margin-inline:auto}.portrait{width:160px;height:190px;object-fit:cover;border-radius:0;margin-bottom:2.2rem}.about-intro h2{font-size:clamp(2.7rem,5vw,4.2rem);margin-block:1.1rem 2.3rem;letter-spacing:-.055em}.about-copy{max-width:800px;margin-inline:auto}.about-copy>p{margin-bottom:1.2rem;color:var(--muted);max-width:720px}.about-copy .lead{font-size:1.4rem;line-height:1.55;color:var(--ink)}.about-links{display:flex;align-items:center;gap:2rem;margin-top:2rem;font-size:.85rem}.about-links a{text-underline-offset:.35rem}.button-link{display:inline-flex;align-items:center;justify-content:space-between;gap:2.5rem;border:1px solid var(--ink);padding:.8rem 1.1rem;text-decoration:none}.about-section{max-width:800px;margin:3.5rem auto 0;border-top:1px solid var(--line);padding-top:1.5rem}.focus-list{margin-top:1.2rem}.focus-list p{font-size:1.2rem;letter-spacing:-.02em;margin-block:.5rem}.career{margin-top:1.2rem}.career>div{display:block;padding-block:1.25rem;border-bottom:1px solid var(--line)}.career h3{font-size:1.2rem;letter-spacing:-.025em}.career p{font-size:.9rem;color:var(--muted);margin-top:.45rem}.career span{display:inline-block;margin-left:1.3rem;font-size:.8rem;color:var(--muted)}.footer{background:var(--paper);color:var(--ink);padding-block:4rem 1.7rem;border-top:1px solid var(--line)}.footer .eyebrow{color:var(--muted)}.footer h2{font-size:clamp(2.5rem,5vw,4.6rem);margin-block:1.3rem 2rem;letter-spacing:-.055em}.email{font-size:1.1rem;text-underline-offset:.35rem;overflow-wrap:anywhere}.footer-bottom{display:flex;gap:2rem;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:4rem;padding-top:1.5rem;font-size:.8rem;color:var(--muted)}.footer-bottom a{text-underline-offset:.25rem}.case-header{padding-block:3.5rem 2rem}.back-link{font-size:.85rem;text-underline-offset:.3rem}.case-header .eyebrow{margin-top:2.7rem}.case-header h1{font-size:clamp(2.8rem,5.5vw,5.1rem);max-width:1000px;margin-top:1.2rem}.case-deck{font-size:1.25rem;color:var(--muted);max-width:800px;margin-top:1.5rem}.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.5rem}.case-facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.case-facts dd{margin:.4rem 0 0;font-size:1rem}.case-cover{border:0;padding:0;border-radius:0;overflow:hidden;margin-block:1rem 3rem;background:transparent}.case-cover img{width:100%;height:auto;max-height:none}.case-cover .figure-image{border:0;background:transparent}.case-cover .figure-image img{max-height:none}.case-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:3.5rem;padding-block:1rem 5rem}.case-nav{position:sticky;top:2rem;align-self:start;display:flex;flex-direction:column;gap:.8rem;font-size:.8rem}.case-nav a{text-decoration:none;color:var(--muted)}.case-nav a:hover{color:var(--ink)}.case-content section{margin-bottom:3.5rem;scroll-margin-top:2rem}.case-content h2{font-size:2rem;margin-bottom:1.25rem}.case-content h3{font-size:1.3rem;margin-top:1.5rem;margin-bottom:.75rem}.case-content p{max-width:48rem;margin-bottom:1rem;color:var(--muted)}.case-content ul{padding-left:1.2rem;color:var(--muted);max-width:48rem}.case-content li{padding-left:.35rem;margin-bottom:.5rem}.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}.image-grid figure{min-width:0}.image-grid .wide{grid-column:1/-1}.figure-image{display:block;width:100%;padding:0;border:1px solid var(--line);background:var(--soft);cursor:zoom-in;border-radius:0;overflow:hidden}.figure-image img{width:100%;max-height:780px;object-fit:contain}figcaption{font-size:.8rem;color:var(--muted);padding-top:.6rem}.outcome-note{border-left:2px solid var(--ink);padding:1.3rem 1.5rem;background:var(--soft)}.outcome-note p:last-child{margin-bottom:0}.next-project{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:3rem;display:flex;justify-content:space-between;gap:1rem}.next-project a{text-underline-offset:.25rem}.lightbox{border:0;padding:1rem;background:white;border-radius:0;width:min(96vw,1500px);max-height:94vh}.lightbox::backdrop{background:rgba(0,0,0,.85)}.lightbox-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1rem}.lightbox-head p{font-size:.9rem;color:var(--muted)}.close-image{padding:.45rem 1rem;border:1px solid var(--line);background:white;cursor:pointer}.lightbox img{margin:auto;max-height:76vh;object-fit:contain}.lightbox a{display:inline-block;font-size:.85rem;margin-top:.6rem}.visual-gallery{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.visual-gallery img{max-height:650px;object-fit:contain}.case-label{font-size:.85rem;color:var(--muted)}
@media(min-width:1400px){.hero{padding-top:6.5rem}}
@media(max-width:900px){.wrap{width:calc(100% - 3rem)}.header nav{gap:1.5rem}.hero{padding-block:4rem}.hero-bottom{display:block}.experience-note{margin-top:1.5rem;max-width:none}.project-grid{gap:3.5rem}.visual-card{gap:2rem}.visual-card h2{font-size:2.2rem}.case-layout{grid-template-columns:1fr;gap:2rem}.case-nav{position:static;flex-direction:row;flex-wrap:wrap;border-block:1px solid var(--line);padding-block:1rem;gap:1rem}}
@media(max-width:600px){.wrap{width:calc(100% - 2.5rem)}.header{padding-block:1.5rem}.brand{gap:.5rem;font-size:.85rem}.monogram{font-size:1.4rem}.header nav{gap:1rem}.header nav a{font-size:.8rem}.hero{padding-block:3rem 3.5rem}.hero h1{font-size:clamp(2.3rem,9.7vw,3.7rem);line-height:1.08;margin-top:1.3rem;letter-spacing:-.06em}.hero-bottom{margin-top:1.6rem}.hero-bottom p{font-size:1rem}.eyebrow{font-size:.7rem}.section-heading{display:block;margin-bottom:1.8rem}.section-heading span{display:block;margin-top:.5rem}.project-grid{gap:3rem}.card-meta{font-size:.7rem;margin-top:1rem}.project-card h3{font-size:1.75rem}.project-card p{font-size:.9rem}.visual-section{margin-top:3.5rem}.visual-card{grid-template-columns:1fr;padding-block:2rem}.visual-card h2{font-size:2.3rem}.visual-card>img{max-height:300px}.about{padding-block:3.5rem}.about-intro h2{font-size:2.8rem}.portrait{width:140px;height:165px}.about-copy .lead{font-size:1.2rem}.about-section{margin-top:2.5rem}.focus-list p{font-size:1.1rem}.career span{display:block;margin-left:0;margin-top:.25rem}.about-links{gap:1.5rem}.button-link{gap:1.2rem}.footer{padding-top:3rem}.footer-bottom{align-items:start;flex-wrap:wrap;gap:1rem;margin-top:3rem}.footer-bottom span{width:100%}.email{font-size:1rem}.case-header{padding-block:2rem}.case-header .eyebrow{margin-top:2rem}.case-header h1{font-size:2.7rem}.case-deck{font-size:1.1rem}.case-facts{grid-template-columns:1fr;gap:1rem}.case-cover{margin-bottom:1.5rem}.case-content h2{font-size:1.75rem}.image-grid,.visual-gallery{grid-template-columns:1fr}.case-content section{margin-bottom:2.5rem}.next-project{flex-wrap:wrap}.lightbox{padding:.75rem}.lightbox img{max-height:70vh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-art img{transition:none}.project-card:hover .project-art img{transform:none}}

/* Selected excerpts from an unreleased project. */
.hanzi-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2rem;padding:2.5rem 4rem;background:#f5f5f3}.hanzi-preview-copy>span{font-size:.9rem;letter-spacing:.03em}.hanzi-preview-copy>p{font-size:clamp(1.8rem,3.7vw,3.5rem);color:var(--ink);line-height:1.1;letter-spacing:-.05em;margin-top:1.2rem}.hanzi-preview-copy small{display:block;color:var(--muted);font-size:.8rem;margin-top:1.6rem}.project-art.hanzi-preview img{height:100%;max-height:490px;object-fit:contain;width:100%;transition:none}.disclosure-note{font-size:.9rem;color:var(--muted);border-block:1px solid var(--line);padding:1.1rem 0;margin-top:1.5rem;line-height:1.7}.scope-caption{font-size:.9rem;color:var(--muted)}.hanzi-figure{margin-block:1.75rem}.excerpt-stage{display:flex;align-items:center;justify-content:center;padding:2.25rem;background:var(--soft)}.excerpt-stage img{width:350px;max-width:100%;height:auto}.hanzi-figure figcaption{max-width:38rem;line-height:1.6}.feedback-figure .excerpt-stage{padding-block:3rem}.decision-block{border-left:2px solid var(--line);padding-left:1.3rem;margin-top:2rem}.decision-block h3:first-child{margin-top:0}.recall-flow{margin-block:2rem;padding:2rem;border:1px solid var(--line);max-width:650px}.flow-node{border:1px solid var(--ink);padding:1rem 1.2rem;text-align:center;background:white}.flow-node span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}.flow-node strong{font-weight:500;font-size:1rem}.flow-connector{text-align:center;font-size:1.25rem;margin-block:.65rem}.flow-branches{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.25rem}.flow-branch{border:1px solid var(--line);padding:1rem;text-align:center;background:var(--soft)}.flow-branch-label{font-size:.8rem;display:block;color:var(--muted);margin-bottom:.3rem}.flow-branch p{font-size:1rem;margin-bottom:0}.current-project{font-size:.9rem}
@media(max-width:900px){.hanzi-preview{padding:2rem;gap:1.3rem}.project-art.hanzi-preview img{max-height:380px}}
@media(max-width:600px){.hanzi-preview{padding:1.3rem;gap:1rem;aspect-ratio:1.45}.hanzi-preview-copy>p{font-size:clamp(1.25rem,5.3vw,1.6rem);margin-top:.7rem}.hanzi-preview-copy>span{font-size:.75rem}.hanzi-preview-copy small{font-size:.7rem;margin-top:.8rem}.project-art.hanzi-preview img{max-height:230px}.excerpt-stage{padding:1.2rem}.feedback-figure .excerpt-stage{padding-block:2rem}.recall-flow{padding:1.2rem}.flow-branches{gap:.65rem}.flow-branch{padding:.8rem .5rem}.flow-node strong,.flow-branch p{font-size:.9rem}}

.career .career-detail{font-size:.85rem;max-width:650px;color:var(--muted);margin-top:.65rem}

/* FOSHO project overview: typography and a scope diagram. */
.fosho-work-preview{padding:1.5rem;background:var(--soft)}.project-art.fosho-work-preview img{object-fit:contain}.fosho-journey{list-style:none;padding:0!important;margin:2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:none!important}.fosho-journey li{border:1px solid var(--line);padding:1.2rem;margin:0;background:var(--soft)}.fosho-journey li:last-child{grid-column:1/-1}.fosho-journey span{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.55rem;letter-spacing:.04em}.fosho-journey strong{display:block;font-size:1rem;font-weight:500;line-height:1.4}.case-content .fosho-journey p{font-size:.85rem;line-height:1.55;margin:.6rem 0 0}.case-content section>figure{margin-top:1.75rem}.case-header .case-label{margin-top:1rem}
@media(max-width:600px){.fosho-work-preview{padding:.75rem}.fosho-journey{grid-template-columns:1fr}.fosho-journey li:last-child{grid-column:auto}}
.project-art.fosho-preview{display:flex;flex-direction:column;justify-content:space-between;padding:3rem 4rem;background:#1c1c1c;color:#fff}.fosho-preview>span{font-size:.9rem;letter-spacing:.05em}.project-card .fosho-preview>p{color:#fff;font-size:clamp(2.5rem,5.2vw,5rem);line-height:1.05;letter-spacing:-.055em;margin:1rem 0}.fosho-preview small{font-size:.8rem;color:#b8b8b8;border-top:1px solid #555;padding-top:1rem}.fosho-cover{background:var(--soft);padding:3rem 4rem;margin-block:1rem 3rem}.fosho-cover-title{font-size:clamp(2.8rem,6vw,5.4rem);line-height:1.05;letter-spacing:-.055em;margin-block:2.5rem 3.5rem}.fosho-cover-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.85rem;border-top:1px solid var(--line);padding-top:1.5rem}.fosho-contributions{border-top:1px solid var(--line);margin-top:2rem}.fosho-contributions>div{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:1rem;border-bottom:1px solid var(--line);padding-block:1.3rem}.fosho-contributions span{grid-row:1/3;font-size:.8rem;color:var(--muted);padding-top:.2rem}.fosho-contributions h3{margin:0 0 .55rem}.fosho-contributions p{margin:0;font-size:.95rem}.fosho-scope-figure{margin-block:2rem}.fosho-scope-flow{padding:2rem;border:1px solid var(--line);background:var(--soft)}.fosho-scope-figure figcaption{line-height:1.6}
@media(max-width:900px){.project-art.fosho-preview,.fosho-cover{padding:2.5rem}}
@media(max-width:600px){.project-art.fosho-preview{padding:1.5rem;aspect-ratio:1.45}.fosho-preview>span{font-size:.75rem}.project-card .fosho-preview>p{font-size:clamp(2rem,8vw,3rem);margin-block:1rem}.fosho-preview small{font-size:.7rem;padding-top:.65rem}.fosho-cover{padding:1.5rem}.fosho-cover-title{font-size:2.8rem;margin-block:2rem}.fosho-cover-strip{flex-direction:column;align-items:flex-start;gap:.5rem;font-size:.8rem}.fosho-scope-flow{padding:1.2rem}}

/* Hide presentation-board margins embedded in legacy cover assets. Source files remain intact. */
.cover-crop{position:relative;aspect-ratio:var(--cover-ratio)}
.cover-crop img{position:absolute;max-width:none;width:var(--cover-width);height:var(--cover-height);left:var(--cover-left);top:var(--cover-top);object-fit:fill}
.cover-classroom{--cover-ratio:1836/1366;--cover-width:136.165577%;--cover-height:131.551977%;--cover-left:-18.082789%;--cover-top:-15.739385%}
.cover-azure{--cover-ratio:1872/1310;--cover-width:133.547009%;--cover-height:137.175573%;--cover-left:-17.094017%;--cover-top:-18.625954%}
.cover-education{--cover-ratio:1906/1241;--cover-width:131.164743%;--cover-height:144.802579%;--cover-left:-14.270724%;--cover-top:-22.401289%}

/* About profile: a generous portrait alongside the introduction. */
.about-profile{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);align-items:start;gap:clamp(2rem,5vw,4.5rem)}
.about-profile .portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center bottom;margin:0}
.about-profile-text{min-width:0}
.about-profile .about-intro,.about-profile .about-copy{max-width:none;margin:0}
.about-profile .about-intro h2{font-size:clamp(2.7rem,4.4vw,3.8rem)}
@media(max-width:800px){.about-profile{grid-template-columns:1fr;gap:2.2rem}.about-profile .portrait{width:min(100%,320px)}.about-profile .about-intro h2{font-size:clamp(2.4rem,7vw,3.4rem)}}

/* Case studies: original design artifacts in an editorial narrative. */
.editorial-case .case-layout{display:block;padding:0 0 5rem}
.editorial-case .case-nav{position:sticky;top:0;z-index:5;display:flex;flex-direction:row;flex-wrap:wrap;gap:.65rem 1.8rem;background:#fff;border-block:1px solid var(--line);padding:1.2rem 0;margin-bottom:4.5rem;font-size:.78rem}
.editorial-case .case-content section{margin:0 0 6rem;scroll-margin-top:6.5rem}
.editorial-case .case-content p{line-height:1.75;max-width:none}
.editorial-case .case-content h2{font-size:clamp(2.1rem,4vw,3.5rem);letter-spacing:-.05em;line-height:1.08;margin:0 0 1.5rem}
.case-opening{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start;padding:1rem 0 2rem}
.case-opening>.eyebrow,.case-opening>div>.eyebrow{margin-bottom:1.5rem}
.design-principle{border-top:1px solid var(--ink);padding-top:1.5rem;margin-top:2.4rem}
.editorial-case .design-principle p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.25;letter-spacing:-.035em;color:var(--ink);margin:1.4rem 0 2rem}
.design-principle>div{font-size:.8rem;line-height:1.8;color:var(--muted)}
.chapter-heading{display:grid;grid-template-columns:230px minmax(0,1fr);gap:2rem;border-top:1px solid var(--line);padding-top:2.5rem;margin-bottom:2.5rem}
.chapter-heading>.eyebrow{padding-top:.55rem;line-height:1.7}
.chapter-heading>div>p{max-width:680px!important;font-size:1.05rem;margin:0}
.narrative-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0!important;margin:2.5rem 0;max-width:none!important}
.narrative-flow li{padding:1.25rem 1.3rem 1.5rem!important;margin:0!important;border-top:2px solid var(--ink);border-right:1px solid var(--line)}
.narrative-flow li:first-child{padding-left:0!important}.narrative-flow li:last-child{border-right:0}
.narrative-flow li>span{display:block;font-size:2.5rem;font-weight:400;letter-spacing:-.07em;line-height:1;color:#aaa;margin-bottom:1.25rem}
.narrative-flow strong{font-size:1.05rem;font-weight:500;color:var(--ink)}
.editorial-case .narrative-flow p{font-size:.84rem;line-height:1.6;margin:.55rem 0 0}
.story-pair{display:grid;grid-template-columns:340px minmax(0,1fr);gap:3rem;align-items:center;margin:2.5rem 0 3rem}
.story-pair.story-reverse{grid-template-columns:minmax(0,1fr) 340px}.story-reverse .story-copy{order:2}
.story-copy>.eyebrow{margin-bottom:1.1rem}
.editorial-case .story-copy h3{font-size:clamp(1.6rem,2.5vw,2.1rem);margin:0 0 1.3rem;line-height:1.15}
.story-copy p{font-size:.95rem}.story-visual{min-width:0}
.presentation-stage{padding:clamp(1.4rem,3vw,3rem);background:#f5f5f3}
.tone-fosho{background:#fff3ed}.tone-classroom{background:#eef5ed}.tone-azure{background:#eeefef}.tone-hanzi{background:#eaf3f1}
.source-figure{min-width:0;margin:0!important}
.source-window{display:block;position:relative;overflow:hidden;aspect-ratio:var(--crop-ratio);width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;text-align:left;color:var(--ink)}
.source-window img{position:absolute;left:var(--crop-left);top:var(--crop-top);width:var(--crop-width);max-width:none;height:auto;max-height:none;object-fit:initial}
.source-figure figcaption{font-size:.73rem;line-height:1.6;padding-top:.8rem;color:var(--muted)}
.figure-pin{position:absolute;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#171717;color:#fff;box-shadow:0 0 0 3px #fff;font-size:.75rem;font-weight:500;transform:translate(-50%,-50%);pointer-events:none}
.zoom-cue{position:absolute;right:.6rem;bottom:.6rem;width:28px;height:28px;display:grid;place-items:center;border:1px solid #ddd;background:#fffffff2;font-size:1rem;opacity:0;transition:opacity .2s}
.source-window:hover .zoom-cue,.source-window:focus-visible .zoom-cue{opacity:1}
.design-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem;margin:2rem 0}
.design-notes>div{border-top:1px solid var(--line);padding-top:1rem}
.design-notes>div>span{font-size:.72rem;letter-spacing:.05em;color:var(--muted)}
.editorial-case .design-notes h3{font-size:1.15rem;margin:.8rem 0 .65rem;letter-spacing:-.025em;line-height:1.3}
.editorial-case .design-notes p{font-size:.88rem;line-height:1.7;margin:0}
.review-composition{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:center;gap:3rem}
.editorial-case .review-sidebar h3{font-size:2.1rem;margin:1rem 0 1.3rem}.review-sidebar p{font-size:.95rem}
.decision-line{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2rem;border-block:1px solid var(--line);padding:1.5rem 0;margin:2.5rem 0}
.decision-line>span{font-size:.75rem;letter-spacing:.04em;color:var(--muted);padding-top:.3rem}
.editorial-case .decision-line p{font-size:1.12rem;color:var(--ink);margin:0;line-height:1.6;max-width:800px}
.delivery-stage{background:#171717;color:#fff;padding:3rem;display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;align-items:center}
.delivery-stage .eyebrow,.delivery-stage figcaption{color:#bdbdbd}
.editorial-case .delivery-stage h3{font-size:2.2rem;margin:1rem 0 1.3rem}.editorial-case .delivery-stage p{color:#c9c9c9;font-size:.95rem}
.comparison-board,.architecture-board{display:grid;gap:2rem;padding:2rem;background:#f5f5f3}
.comparison-label{display:block;font-size:.75rem;letter-spacing:.04em;color:var(--muted);margin-bottom:1rem}
.state-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin:3rem 0}
.state-sequence>div{min-width:0;background:#f3f5f2;padding:1.4rem}
.state-sequence>div>span{display:block;font-size:.75rem;margin-bottom:1.1rem}
.design-archive{border-block:1px solid var(--line);margin:3rem 0;padding:1.2rem 0}
.design-archive summary{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;cursor:pointer;font-size:1rem;list-style:none}
.design-archive summary::-webkit-details-marker{display:none}
.design-archive summary>span{font-size:.75rem;color:var(--muted)}
.design-archive summary>span>span{display:inline-block;margin-left:1.2rem;font-size:1.25rem}
.design-archive[open] summary>span>span{transform:rotate(45deg)}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
.archive-grid .source-window{aspect-ratio:16/10;background:var(--soft)}
.archive-grid .source-window img{left:0!important;top:0!important;width:100%!important;height:100%;object-fit:contain}
.admin-composition{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:5rem;align-items:center}
.admin-composition>.presentation-stage{padding:3rem 5rem}
.editorial-case .admin-explanation>h3{font-size:2.5rem;line-height:1.15;margin:1.2rem 0 1.5rem}
.admin-explanation .design-notes{display:block;margin-top:2rem}.admin-explanation .design-notes>div{margin-top:1.2rem}
.rule-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:3rem;background:#f2f3f3;padding:3rem;align-items:start}
.art-direction-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:4rem;align-items:center}
.editorial-case .art-direction-stage h3{font-size:3rem;line-height:1.08;margin:1.2rem 0 1.5rem}
.webpage-showcase{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:4rem;background:#faf4e5;padding:3rem;align-items:center}
.editorial-case .webpage-note h3{font-size:2.4rem;line-height:1.15;margin:1.2rem 0 1.5rem}.webpage-note p{font-size:.95rem}
.program-pair{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem;align-items:start}
.program-pair>div:first-child{background:#edf5e8;padding:2rem}.program-pair>div:last-child{background:#faf4e5;padding:2rem;margin-top:4rem}
.hanzi-learning-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5rem;background:#eaf3f1;padding:3.5rem 4.5rem;align-items:center}
.hanzi-ui-column{max-width:350px;width:100%;margin:auto}.hanzi-ui-column .source-window{box-shadow:0 18px 50px #123a3612}
.editorial-case .hanzi-explanation>h3{font-size:2.65rem;line-height:1.13;margin:1.2rem 0 2rem}
.hanzi-explanation .design-notes{display:block}.hanzi-explanation .design-notes>div{margin-top:1.1rem;border-color:#b9cfca}
.learning-logic{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:2rem;align-items:center;padding:2.5rem;background:#f5f5f3;margin:2rem 0}
.editorial-case .learning-logic h3{font-size:1.7rem;margin:1rem 0}.learning-logic p{font-size:.9rem;margin:0!important}
.learning-branches{border-inline:1px solid var(--line);padding-inline:2rem;display:grid;gap:1.8rem}
.learning-branches span{font-size:.75rem;color:var(--muted);display:block;margin-bottom:.45rem}
@media(max-width:1000px){.chapter-heading{grid-template-columns:180px 1fr}.story-pair,.review-composition{grid-template-columns:280px minmax(0,1fr);gap:2rem}.story-pair.story-reverse{grid-template-columns:minmax(0,1fr) 280px}.hanzi-learning-stage{gap:3rem;padding:3rem}.admin-composition{gap:3rem}.admin-composition>.presentation-stage{padding:2.5rem}.webpage-showcase{padding:2rem;gap:2rem}}
@media(max-width:800px){.editorial-case .case-nav{position:static;margin-bottom:3rem}.editorial-case .case-content section{margin-bottom:4rem}.case-opening,.chapter-heading,.story-pair,.story-pair.story-reverse,.review-composition,.delivery-stage,.admin-composition,.art-direction-stage,.webpage-showcase{grid-template-columns:1fr;gap:1.8rem}.story-reverse .story-copy{order:0}.design-principle{margin-top:0}.chapter-heading{padding-top:1.8rem;margin-bottom:2rem;gap:1rem}.chapter-heading>.eyebrow{padding:0}.narrative-flow{grid-template-columns:1fr 1fr}.narrative-flow li{border-right:0;border-top:1px solid var(--line);padding:1.1rem!important}.narrative-flow li:first-child{padding-left:1.1rem!important}.narrative-flow li:last-child{grid-column:1/-1}.narrative-flow li>span{font-size:1.8rem;margin-bottom:.8rem}.design-notes{gap:1.3rem}.decision-line{grid-template-columns:1fr;gap:.65rem}.delivery-stage{padding:2rem}.admin-composition>.presentation-stage{padding:2.5rem;max-width:440px;width:100%;margin:auto}.admin-explanation .design-notes{display:grid}.art-direction-stage>div{max-width:600px}.program-pair{gap:1.5rem}.program-pair>div:first-child,.program-pair>div:last-child{padding:1.4rem}.hanzi-learning-stage{grid-template-columns:1fr;gap:2rem}.hanzi-explanation .design-notes{display:grid}.learning-logic{grid-template-columns:1fr;gap:1.5rem}.learning-branches{border-inline:0;border-block:1px solid var(--line);padding:1.5rem 0;grid-template-columns:1fr 1fr}.rule-pair{padding:2rem;gap:1.5rem}}
@media(max-width:600px){.editorial-case .case-content h2{font-size:2.15rem}.editorial-case .case-content p{font-size:.95rem}.editorial-case .case-nav{gap:.55rem 1.2rem;padding:1rem 0;font-size:.72rem}.case-opening{padding-top:0}.design-principle p{font-size:1.8rem!important}.design-notes{grid-template-columns:1fr;gap:1.3rem}.editorial-case .design-notes p{font-size:.88rem}.presentation-stage{padding:1.1rem}.figure-pin{width:22px;height:22px;font-size:.65rem;box-shadow:0 0 0 2px #fff}.comparison-board,.architecture-board{padding:1rem;gap:1.5rem}.state-sequence,.archive-grid,.rule-pair,.program-pair{grid-template-columns:1fr}.state-sequence>div{padding:1.4rem}.state-sequence .source-figure{max-width:370px;margin-inline:auto!important}.design-archive summary{align-items:start;flex-direction:column;gap:.6rem}.admin-explanation .design-notes,.hanzi-explanation .design-notes{display:block}.hanzi-learning-stage{padding:1.5rem}.hanzi-ui-column{max-width:320px}.editorial-case .hanzi-explanation>h3{font-size:2.3rem}.editorial-case .art-direction-stage h3{font-size:2.5rem}.program-pair>div:last-child{margin-top:0}.rule-pair>div:last-child{max-width:300px;margin:auto;width:100%}.source-figure figcaption{font-size:.7rem}.zoom-cue{opacity:1;width:24px;height:24px;font-size:.9rem}.editorial-case .decision-line p{font-size:1rem}.delivery-stage{padding:1.4rem}.delivery-stage .source-window{min-height:0}.learning-logic{padding:1.5rem}.editorial-case .learning-logic p{font-size:.88rem}}
@media(prefers-reduced-motion:reduce){.zoom-cue{transition:none}}

.delivery-details{background:#fff;padding:1.5rem;color:#171717}.delivery-details figcaption{color:#666}.delivery-actions{max-width:205px;margin-top:2rem;margin-left:auto}.delivery-details .source-window{background:#fff}

/* Native device presentation keeps the selected source interface intact. */
.mobile-device{position:relative;width:100%;padding:9px;background:#08090a;border:2px solid #353638;border-radius:46px;box-shadow:inset 0 0 0 2px #121314,0 22px 45px #123a3629}
.mobile-device::before{content:"";position:absolute;left:-4px;top:98px;width:3px;height:42px;background:#202123;border-radius:2px;box-shadow:0 54px 0 #202123}
.mobile-device::after{content:"";position:absolute;right:-4px;top:142px;width:3px;height:66px;background:#202123;border-radius:2px}
.mobile-device-screen{position:relative;display:flex;align-items:center;aspect-ratio:9/19.5;overflow:hidden;border-radius:35px;background:#f1f8fb;padding-block:45px 28px}
.mobile-device-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:78px;height:23px;border-radius:20px;background:#08090a;z-index:2}
.mobile-device-island::after{content:"";position:absolute;right:10px;top:8px;width:7px;height:7px;border-radius:50%;background:#102330;box-shadow:inset 0 0 0 2px #152028}
.mobile-device-home{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:35%;height:4px;border-radius:5px;background:#171717}
.hanzi-ui-column .mobile-device .source-window{box-shadow:none;flex:none;width:100%}
.hanzi-ui-column .source-figure>figcaption{padding-top:1rem}
@media(max-width:600px){.mobile-device{padding:7px;border-radius:39px}.mobile-device-screen{border-radius:29px;padding-block:38px 23px}.mobile-device-island{width:67px;height:20px;top:10px}.mobile-device-island::after{top:7px;width:6px;height:6px}.mobile-device-home{height:3px;bottom:8px}}

/* Large designs remain readable, with scrolling inside the image viewer. */
body.image-preview-open{overflow:hidden}
.lightbox{width:min(96vw,1500px);max-height:94vh;max-height:94dvh;overflow:hidden}
.lightbox[open]{display:flex;flex-direction:column;height:92vh;height:92dvh}
.lightbox-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem 1rem;flex:none;margin-bottom:.75rem}
.lightbox-head p{margin:0;overflow-wrap:anywhere}
.lightbox-controls{grid-column:1/-1;display:flex;align-items:center;gap:.6rem}
.lightbox-controls button{border:1px solid var(--line);background:#fff;min-width:38px;min-height:36px;padding:.3rem .65rem;cursor:pointer;font-size:.85rem}
.lightbox-controls button:disabled{opacity:.35;cursor:default}
.image-zoom-level{min-width:3rem;text-align:center;font-size:.8rem;font-variant-numeric:tabular-nums}
.image-scroll-hint{margin-left:auto;color:var(--muted);font-size:.75rem}
.lightbox-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#f5f5f3;touch-action:pan-x pan-y pinch-zoom;scrollbar-gutter:stable}
.lightbox .lightbox-viewport img{display:block;width:100%;height:auto;max-width:none;max-height:none;margin:0;object-fit:initial}
.lightbox #original-image{flex:none;align-self:start;margin-top:.65rem}
@media(max-width:600px){.lightbox{padding:.7rem;width:96vw}.lightbox-head p{font-size:.75rem}.close-image{padding:.4rem .65rem}.lightbox-controls{gap:.4rem}.lightbox-controls button{min-width:34px;font-size:.8rem}.image-scroll-hint{font-size:.65rem}.lightbox #original-image{font-size:.75rem}}