.letter-shell { max-width:1080px; margin:auto; padding:64px 40px 32px; }
.skip-link { position:absolute; left:16px; top:-80px; z-index:100; background:var(--ink); color:var(--bg); padding:12px; }
.skip-link:focus { top:8px; }
.edition, .letter-meta, .figure-label, .letter-footer, .archive-head { font-size:calc((11px) * var(--text-scale, 1)); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.edition { display:flex; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.edition a { text-decoration:none; }
.letter-hero { padding:48px 0 36px; }
.letter-hero h1 { max-width:850px; font-size:calc((clamp(30px,4vw,44px)) * var(--text-scale, 1)); line-height:1.25; font-weight:400; letter-spacing:-.055em; color:var(--ink); text-wrap:balance; }
.letter-meta { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:24px; }
.hero-art { width:100%; height:auto; display:block; border:1px solid var(--line); margin:0 0 42px; }
.letter-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:48px; align-items:start; }
.contents { position:sticky; top:100px; font-size:calc((12px) * var(--text-scale, 1)); line-height:1.6; }
.contents span { display:block; color:var(--dim); font-size:calc((10px) * var(--text-scale, 1)); letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.contents a { display:block; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line); color:var(--dim); }
.contents a:hover { color:var(--ink); }
.letter-body { min-width:0; max-width:680px; }
.letter-body p { margin-bottom:20px; }
.letter-body .thesis { font-size:calc((17px) * var(--text-scale, 1)); line-height:1.75; color:var(--ink); margin-bottom:36px; }
.letter-body section { padding:36px 0 12px; border-top:1px solid var(--line); scroll-margin-top:88px; }
.letter-body h2 { font-size:calc((23px) * var(--text-scale, 1)); font-weight:400; line-height:1.4; letter-spacing:-.04em; color:var(--ink); margin-bottom:24px; }
.section-number { color:var(--dim); display:block; font-size:calc((11px) * var(--text-scale, 1)); letter-spacing:.12em; margin-bottom:10px; }
.letter-body a { text-decoration-color:var(--ghost); text-underline-offset:4px; }
.letter-body a:hover { text-decoration-color:var(--ink); color:var(--ink); }
.letter-body strong { font-weight:500; color:var(--ink); }
.letter-body .punchline { padding-left:18px; border-left:2px solid var(--ink); color:var(--ink); margin:28px 0; }
.letter-body h3 { font-size:calc((15px) * var(--text-scale, 1)); font-weight:500; line-height:1.5; color:var(--ink); margin:30px 0 12px; }
.letter-body ul { list-style:none; margin:0 0 22px; padding:0; }
.letter-body li { position:relative; padding:0 0 10px 22px; }
.letter-body li::before { content:"—"; position:absolute; left:0; color:var(--dim); }
.archive-list { margin-top:48px; }
.archive-list .archive-head { border-bottom:1px solid var(--line); }
.archive-item { display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.archive-item .figure-label { white-space:nowrap; }
.archive-item h3 { font-size:calc((16px) * var(--text-scale, 1)); font-weight:400; line-height:1.5; letter-spacing:-.03em; color:var(--ink); }
.archive-item time { font-size:calc((11px) * var(--text-scale, 1)); color:var(--dim); white-space:nowrap; }
.archive-item:hover h3 { text-decoration:underline; text-decoration-color:var(--ghost); text-underline-offset:4px; }
.diagram { margin:28px 0; border:1px solid var(--line); }
.diagram img { display:block; width:100%; height:auto; }
.diagram figcaption { padding:12px 16px; border-top:1px solid var(--line); font-size:calc((11px) * var(--text-scale, 1)); color:var(--dim); }
.conclusion { color:var(--ink); font-size:calc((17px) * var(--text-scale, 1)); line-height:1.75; }
.signature { padding-top:10px; }
.letter-end { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; border-top:1px solid var(--line); margin-top:36px; padding:24px 0; font-size:calc((12px) * var(--text-scale, 1)); }
.letter-footer { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:22px; margin-top:56px; font-size:calc((10px) * var(--text-scale, 1)); }
.archive-intro { max-width:540px; margin-top:20px; }
.archive-head { display:flex; justify-content:space-between; padding:18px 0; border-top:1px solid var(--line); }
.featured-letter { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); text-decoration:none; }
.featured-letter .hero-art { margin:0; border:0; width:100%; height:100%; object-fit:contain; border-right:1px solid var(--line); }
.featured-copy { padding:34px; }
.featured-copy h2 { color:var(--ink); font-size:calc((25px) * var(--text-scale, 1)); font-weight:400; line-height:1.4; letter-spacing:-.045em; margin:22px 0 16px; }
.featured-copy p { font-size:calc((13px) * var(--text-scale, 1)); color:var(--dim); }
.read-letter { display:inline-block; margin-top:28px; font-size:calc((12px) * var(--text-scale, 1)); color:var(--ink); border-bottom:1px solid var(--ghost); }
.featured-letter:hover .read-letter { border-color:var(--ink); }
.featured-letter:hover { border-color:var(--dim); }
@media(max-width:760px) {
 .letter-shell { padding:36px 24px 24px; }
 .letter-hero { padding:32px 0 28px; }
 .letter-layout { grid-template-columns:1fr; gap:30px; }
 .contents { position:static; display:flex; flex-wrap:wrap; gap:6px 18px; }
 .contents span { width:100%; margin:0; }
 .contents a { padding:6px 0; }
 .hero-art { margin-bottom:26px; }
 .letter-body .thesis, .conclusion { font-size:calc((15px) * var(--text-scale, 1)); }
 .featured-letter { grid-template-columns:1fr; }
 .featured-letter .hero-art { border-right:0; border-bottom:1px solid var(--line); max-height:260px; }
 .featured-copy { padding:26px; }
 .archive-item { grid-template-columns:1fr; gap:6px; }
 .letter-footer { margin-top:36px; flex-wrap:wrap; }
}
@media(max-width:380px) {
 .letter-shell { padding-left:18px; padding-right:18px; }
 .edition { font-size:calc((10px) * var(--text-scale, 1)); letter-spacing:.04em; }
 .letter-hero h1 { font-size:calc((29px) * var(--text-scale, 1)); }
 .letter-body h2 { font-size:calc((21px) * var(--text-scale, 1)); }
}
@media print {
 :root { --bg:var(--palette-surface-fff); --ink:var(--palette-fg-111); --text:var(--palette-fg-222); --dim:var(--palette-fg-555); --line:var(--palette-line-ccc); }
 .site-nav, .contents, .skip-link, .letter-end { display:none; }
 .letter-shell { padding:0; }
 .letter-layout { display:block; }
 .letter-body { max-width:none; }
 .hero-art { max-height:160px; object-fit:contain; }
 .diagram { break-inside:avoid; }
}
/* Wide figures (Letter 003): break out of the text column on desktop */
.diagram.wide a { display:block; }
@media(min-width:1000px) {
 .diagram.wide { position:relative; left:50%; width:min(1200px, calc(100vw - 64px)); transform:translateX(calc(-50% - 48px)); }
}