@font-face{font-family:'Cover Space';src:url('/fonts/zm-space-grotesk-vf.woff2') format('woff2');font-weight:300 700;font-display:swap}
/* Only the English headline changes; preserve all incumbent hero colors and geometry. */
#hero .ascii-fallback{font-family:'Cover Space',sans-serif!important;font-weight:600;font-size:clamp(48px,8vw,116px);line-height:1.08;letter-spacing:-.035em;text-align:left;color:#f2ede5}
/* Fit three original screenshots to their actual proportions, without cropping. */
#featured .ms-home-montage{display:grid;grid-template-columns:.58fr 1fr;grid-template-rows:1fr 1fr;gap:20px 24px;padding:28px;aspect-ratio:auto;height:auto;align-items:stretch}
#featured .ms-home-montage figure{display:flex;flex-direction:column;gap:10px;margin:0;min-width:0;min-height:0}
#featured .ms-home-montage .ms-cover-camera{grid-row:1/3}
#featured .ms-home-montage img{display:block;position:static;width:100%;height:auto;max-width:100%;min-height:0;aspect-ratio:auto;object-fit:contain;border-radius:6px;flex:1;transform:none}
#featured .ms-home-montage figcaption{font:500 13px/1.5 var(--body);color:#625d56;flex:none}
@media(max-width:600px){#hero .ascii-fallback{font-size:clamp(36px,9vw,54px);letter-spacing:-.03em}#featured .ms-home-montage{gap:12px;padding:14px}#featured .ms-home-montage figure{gap:6px}#featured .ms-home-montage figcaption{font-size:11px}}
/* Desktop browsing: show the work and its explanation together, not across two screens. */
@media(min-width:1025px){
 #featured .ms-home-montage{grid-template-columns:.48fr 1fr 1fr;grid-template-rows:auto;gap:24px;padding:24px;height:clamp(310px,40svh,420px)}
 #featured .ms-home-montage .ms-cover-camera{grid-row:auto}
 #featured .ms-home-montage figure{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:12px}
 #featured .ms-home-montage img{width:100%;height:100%;max-height:100%;object-fit:contain;min-height:0}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-panel:not([hidden]){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-media{height:clamp(280px,38svh,380px);min-height:0;aspect-ratio:auto;align-self:center;background:var(--paper)}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-media img{width:100%;height:100%;object-fit:contain;transform:none}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-copy{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:28px;border-top:0;border-left:1px solid var(--line)}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-heading h3{font-size:clamp(24px,2vw,32px);line-height:1.35}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-detail{display:block}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-detail p{font-size:15px;line-height:1.75}
}
/* Match the frame to the source proportions instead of adding letterbox bands. */
@media(min-width:1025px){
 #featured .ms-home-montage{grid-template-columns:.468fr 1.60858fr 1.62162fr;gap:8px;padding:0;height:auto;align-items:start}
 #featured .ms-home-montage figure{display:block}
 #featured .ms-home-montage img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0;flex:none}
 #featured .ms-home-montage figcaption{padding:10px 12px;margin:0}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-panel:not([hidden]){grid-template-columns:minmax(0,min(60%,67.555svh,675px)) minmax(0,1fr)}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-media{height:auto;min-height:0;aspect-ratio:16/9;align-self:stretch;padding:0;margin:0;overflow:hidden}
 [data-work-carousel][aria-label="李豪账号 AI 教程作品轮播"] .work-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
}
/* One substantial accent surface per chapter, using the incumbent palette. */
#featured{--chapter-accent:#0072e3;--chapter-ink:#fff}
#tutorials{--chapter-accent:#ffb200;--chapter-ink:#171714}
#vibe{--chapter-accent:#ff5c38;--chapter-ink:#171714}
:is(#featured,#tutorials,#vibe) .work-hero-copy{background:var(--chapter-accent);color:var(--chapter-ink);border-color:transparent}
:is(#featured,#tutorials,#vibe) .work-hero-copy :is(h3,p,a,span){color:var(--chapter-ink)}
:is(#featured,#tutorials,#vibe) .work-hero-copy a{border-color:currentColor}
:is(#featured,#tutorials,#vibe) .work-hero-copy a:hover{text-decoration:underline;text-underline-offset:5px}
:is(#featured,#tutorials,#vibe) .work-hero-copy a:focus-visible{outline:2px solid var(--chapter-ink);outline-offset:5px}
/* Make the deliverables and their corresponding case chapters explicit. */
#featured .ms-evidence-grid{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto;gap:8px;padding:0;height:auto;align-items:stretch}
#featured .ms-evidence-item{display:block;min-width:0;color:var(--ink);text-decoration:none}
#featured .ms-evidence-item figure{display:block;height:100%}
#featured .ms-evidence-image{height:clamp(230px,30svh,320px);overflow:hidden;background:#fff}
#featured .ms-evidence-image img{width:100%;height:100%;object-fit:cover;object-position:center;max-height:none;border-radius:0}
#featured .ms-evidence-lead img{object-position:50% 90%}
#featured .ms-evidence-item figcaption{padding:16px 18px 20px}
#featured .ms-evidence-item h4{font:600 clamp(16px,1.25vw,20px)/1.4 var(--body);margin:0 0 8px;color:#171714}
#featured .ms-evidence-item h4 span{float:right}
#featured .ms-evidence-item p{font-size:14px;line-height:1.7;color:#625d56;margin:0}
#featured .ms-evidence-item:hover h4{text-decoration:underline;text-underline-offset:4px}
#featured .ms-evidence-item:focus-visible{outline:3px solid #171714;outline-offset:-3px}
#featured .ms-evidence-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 30px}
#featured .ms-evidence-summary h3{margin:0 0 10px}
#featured .ms-evidence-summary p{margin:0;font-size:14px;line-height:1.7}
#featured .ms-case-entry{flex-shrink:0;font-weight:600;font-size:15px;padding:12px 0;text-decoration:underline;text-underline-offset:6px}
@media(max-width:800px){#featured .ms-evidence-grid{grid-template-columns:1fr}#featured .ms-evidence-image{height:240px}#featured .ms-evidence-lead .ms-evidence-image{height:280px}#featured .ms-evidence-item figcaption{padding:14px 18px 18px}#featured .ms-evidence-item h4{font-size:18px}#featured .ms-evidence-summary{display:block;padding:24px}#featured .ms-case-entry{display:inline-block;margin-top:12px}}
#featured .ms-evidence-lead img{object-position:center bottom}
@media(max-width:800px){
 #featured .ms-evidence-grid{grid-template-columns:1fr 1fr}
 #featured .ms-evidence-lead{grid-column:1/-1}
 #featured .ms-evidence-image{height:150px}
 #featured .ms-evidence-lead .ms-evidence-image{height:220px}
 #featured .ms-evidence-item figcaption{padding:12px}
 #featured .ms-evidence-item h4{font-size:16px}
 #featured .ms-evidence-item p{font-size:13px}
}
/* Subtle edge and meaningful interaction; retain the approved color blocks. */
#featured .ms-home-project{border:1px solid #c5d4e2}
#featured .ms-evidence-item:hover h4,
#featured .ms-evidence-item:focus-visible h4{color:#0066cc}
#featured .ms-evidence-item:focus-visible{outline-color:#0066cc}