/* Recruiter-facing case study, preserving the portfolio's editorial case shell.
   Native CSS; DESIGN_VARIANCE 6, MOTION_INTENSITY 3, VISUAL_DENSITY 3.
   Lavender comes from the supplied product UI. Real screenshots stay unchanged.
   Layer scale: content 0, chapter navigation 10, header 20, skip link 30. */
:root{--paper:#f4f4f5;--ink:#28262f;--muted:#65616c;--accent:#695694;--line:#dcd8e4;--tint:#eae6f0;--header:rgba(244,244,245,.96);color-scheme:light;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
:root[data-theme=dark]{--paper:#1d1c24;--ink:#f0edf4;--muted:#b8b1c4;--accent:#c0ade6;--line:#3d374a;--tint:#2b2635;--header:rgba(29,28,36,.96);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:30px}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
[hidden]{display:none!important}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.045em}
p{font-size:16px;line-height:1.9;color:var(--muted);text-wrap:pretty}
::selection{background:var(--tint);color:var(--ink)}
.skip{position:fixed;top:-80px;left:24px;z-index:30;background:var(--paper);padding:12px 18px}
.skip:focus{top:12px}
.masthead{position:absolute;top:0;left:0;right:0;z-index:20;min-height:80px;padding:16px 3.4vw;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:16px;min-height:44px}
.brand b{font-size:34px;letter-spacing:-.12em}
.brand span{font-size:12px;font-weight:600;letter-spacing:.06em}
.header-actions{display:flex;align-items:center;gap:24px;font-size:13px}
.back,.theme-toggle{display:flex;align-items:center;min-height:44px;white-space:nowrap}
.theme-toggle{padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.chapters{position:fixed;top:50%;left:3.4vw;width:146px;transform:translateY(-50%);z-index:10;display:grid;gap:20px}
.chapters a{display:flex;align-items:center;gap:18px;min-height:32px;font-size:13px;color:var(--muted);white-space:nowrap}
.chapters span{font-size:11px;font-variant-numeric:tabular-nums}
.chapters a[aria-current]{color:var(--accent);font-weight:650}
.chapters a:hover,.back:hover,.case-footer a:hover{color:var(--accent)}
main,.case-footer{margin-left:clamp(210px,16.5vw,300px);margin-right:3.4vw}
.chapter{position:relative;max-width:1440px;margin-inline:auto;min-height:100dvh;padding:72px 0 54px;display:flex;flex-direction:column;justify-content:center}
.chapter+.chapter{border-top:1px solid var(--line)}
.section-heading{max-width:720px;margin-bottom:36px}
.section-heading h2{font-size:clamp(34px,3.4vw,52px);line-height:1.3;font-weight:650}
.section-heading>p{max-width:36em;margin-top:20px}
.cover{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5%;align-items:center;padding-top:100px}
.project-kind{font-size:13px;letter-spacing:.04em;margin-bottom:24px}
.cover h1{font-size:clamp(72px,7vw,108px);font-weight:700;line-height:1.1}
.cover h1 span{display:block;font-size:clamp(27px,2.5vw,39px);line-height:1.4;font-weight:600;letter-spacing:-.05em;margin-top:22px}
.lead{margin-top:24px;max-width:26em;font-size:17px}
.start{display:inline-flex;gap:50px;align-items:center;min-height:44px;margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:600;white-space:nowrap}
.start span{color:var(--accent)}
.cover-art{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;max-width:570px;justify-self:end;width:100%;padding:16px 0 52px}
.hero-screen{max-width:250px;width:100%;justify-self:center}
.hero-letter{padding-top:70px}
.journey-tabs{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:20px}
.journey-tab{text-align:left;padding:12px 15px;border-radius:12px;min-height:72px;transition:background .2s,transform .2s}
.journey-tab b{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em}
.journey-tab span{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin-top:7px}
.journey-tab[aria-selected=true]{background:var(--tint);color:var(--accent)}
.journey-tab:active{transform:scale(.98)}
.journey-arrow{color:var(--muted);font-size:20px}
.journey-stage{padding-top:30px}
.journey-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:12%;min-height:350px}
.journey-copy h3{font-size:clamp(24px,2.3vw,34px);line-height:1.45;font-weight:600}
.journey-copy>p{margin-top:18px;max-width:25em}
.work-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);max-width:25em;font-size:13px;line-height:1.8}
.work-note dt{color:var(--muted);margin-bottom:6px}
.work-note dd{color:var(--ink)}
.journey-image{width:clamp(156px,14vw,195px);justify-self:center}
.record-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:5%}
.record-figure{width:min(100%,232px);justify-self:center}
figcaption{margin-top:16px;font-size:13px;color:var(--muted);text-align:center}
.record-explanation{display:grid;gap:22px;max-width:275px;justify-self:center}
.record-explanation h3{font-size:21px;line-height:1.45;font-weight:600}
.record-explanation p{font-size:15px;margin-top:12px}
.record-connector{font-size:30px;color:var(--accent)}
.reply{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:10%;align-items:center}
.reply .section-heading{margin-bottom:26px}
.reply-principles{display:grid;gap:22px}
.reply-principles>div{padding-left:22px;border-left:2px solid var(--line)}
.reply-principles span{font-size:12px;color:var(--accent)}
.reply-principles h3{font-size:18px;font-weight:600;line-height:1.5;margin-top:6px}
.reply-principles p{font-size:14px;margin-top:6px;max-width:27em}
.reply-visual{display:grid;justify-items:center;gap:28px}
.reply-screen{width:min(100%,270px)}
.reply-visual blockquote{max-width:24em;border-left:2px solid var(--accent);padding-left:18px}
.reply-visual blockquote p{font-size:16px;line-height:1.75;color:var(--accent)}
.reflection-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%}
.reflection-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.88fr);align-items:center;gap:22px}
.reflection-copy h3{font-size:24px;font-weight:600;line-height:1.4}
.reflection-copy p{font-size:15px;margin-top:14px}
.reflection-feature .xinji-window{max-width:215px;justify-self:end}
.case-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;min-height:100px;font-size:13px;color:var(--muted)}
.case-footer a{min-height:44px;display:flex;align-items:center}
@media(min-width:1100px) and (max-height:800px){.chapter{padding-block:56px 36px}.cover{padding-top:96px}.cover-art{max-width:450px;gap:20px}.hero-letter{padding-top:46px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:38px}.section-heading>p{margin-top:14px;font-size:15px}.record-figure{max-width:198px}.reply-screen{max-width:215px}.reply-principles{gap:16px}.reply-visual{gap:22px}.journey-image{width:155px}.journey-panel{min-height:310px}.definition .section-heading{margin-bottom:20px}.definition .journey-stage{padding-top:20px}.reflection-feature .xinji-window{max-width:180px}}
@media(min-width:1100px) and (max-height:650px){.chapter{min-height:100dvh;padding-block:42px}.cover{padding-top:80px}.section-heading h2{font-size:34px}.section-heading{margin-bottom:22px}.cover-art{max-width:360px}.cover h1{font-size:76px}.hero-letter{padding-top:24px}.journey-image{width:142px}.journey-panel{min-height:290px}.record-figure{max-width:166px}.reply-screen{max-width:190px}.reply-principles{gap:14px}.reply-principles p{font-size:13px}}
@media(max-width:1099px){main,.case-footer{margin-left:190px;margin-right:30px}.chapters{left:28px;width:130px}.chapter{padding-block:64px 48px}.cover{gap:5%;padding-top:110px}.cover-art{gap:16px}.hero-letter{padding-top:40px}.cover h1{font-size:72px}.cover h1 span{font-size:27px}.lead{font-size:15px}.desktop-break{display:none}.section-heading h2{font-size:36px}.journey-tabs{gap:6px}.journey-tab{padding:10px 8px}.journey-tab b{font-size:17px}.journey-tab span{font-size:11px}.journey-panel{gap:7%}.journey-copy h3{font-size:27px}.record-layout{gap:4%;grid-template-columns:1fr .95fr 1fr}.record-explanation h3{font-size:18px}.record-explanation p{font-size:14px}.reply{gap:7%}.reflection-layout{gap:6%}.reflection-feature{grid-template-columns:1fr;gap:24px}.reflection-feature .xinji-window{justify-self:start;max-width:180px}.reflection-copy{max-width:20em}.reflection-copy h3{font-size:22px}}
@media(max-width:767px){html{scroll-padding-top:64px}.masthead{position:relative;min-height:64px;padding:10px 20px}.brand b{font-size:28px}.brand span{display:none}.header-actions{gap:15px;font-size:12px}.theme-toggle{padding:5px 10px;min-height:36px}.chapters{position:sticky;top:0;left:auto;transform:none;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;max-width:none;width:100%;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--header);backdrop-filter:blur(12px)}.chapters::-webkit-scrollbar{display:none}.chapters a{font-size:12px;gap:7px;min-height:32px;flex-shrink:0}.chapters span{font-size:10px}main,.case-footer{margin-left:20px;margin-right:20px}.chapter{min-height:auto;padding:64px 0;scroll-margin-top:0}.cover{display:flex;align-items:stretch;padding-top:44px;gap:38px;min-height:calc(100dvh - 120px)}.project-kind{margin-bottom:18px;font-size:12px}.cover h1{font-size:66px}.cover h1 span{font-size:28px;margin-top:18px}.lead{font-size:16px;margin-top:18px}.start{margin-top:22px}.cover-art{padding:0 4px 24px;width:100%;max-width:440px;align-self:center;gap:20px;grid-template-columns:1fr 1fr}.hero-letter{padding-top:32px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:32px;line-height:1.4}.section-heading>p{font-size:15px;margin-top:16px}.journey-tabs{grid-template-columns:1fr 1fr;gap:8px;padding-bottom:16px}.journey-arrow{display:none}.journey-tab{min-height:72px;padding:12px 14px}.journey-tab b{font-size:18px}.journey-tab span{font-size:12px}.journey-stage{padding-top:28px}.journey-panel{grid-template-columns:1fr;gap:32px;min-height:0}.journey-copy h3{font-size:25px}.journey-copy>p{font-size:15px;margin-top:14px;max-width:none}.work-note{margin-top:20px;padding-top:16px;max-width:none}.journey-image{width:min(62%,230px)}.record-layout{grid-template-columns:1fr 1fr;gap:32px 18px;align-items:start}.record-figure{max-width:205px}.record-figure:last-child{grid-column:2;grid-row:1}.record-explanation{grid-column:1/-1;grid-row:2;max-width:none;gap:22px}.record-connector{display:none}.record-explanation h3{font-size:20px}.record-explanation p{font-size:15px}.reply{display:flex;gap:38px}.reply-principles{gap:24px}.reply-principles h3{font-size:18px}.reply-principles p{font-size:15px;max-width:none}.reply-screen{width:min(75%,270px)}.reply-visual{gap:24px}.reply-visual blockquote{max-width:22em}.reflection-layout{grid-template-columns:1fr;gap:42px}.reflection-feature{grid-template-columns:minmax(0,1fr) minmax(135px,.85fr);gap:20px}.reflection-copy h3{font-size:22px}.reflection-copy p{font-size:14px}.reflection-feature .xinji-window{max-width:190px;justify-self:end}.case-footer{min-height:88px;font-size:12px}}
@media(max-width:389px){.masthead{padding-inline:16px}main,.case-footer{margin-inline:16px}.chapters{padding-inline:16px;gap:18px}.cover h1{font-size:58px}.cover h1 span{font-size:25px}.section-heading h2{font-size:29px}.cover-art{gap:14px}.reflection-feature{gap:16px;grid-template-columns:minmax(0,1fr) minmax(125px,.85fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(prefers-reduced-transparency:reduce){.chapters{background:var(--paper);backdrop-filter:none}}