:root { --bg:#f4efe5; --paper:#fffaf0; --ink:#211b16; --muted:#796f65; --accent:#c64f20; --gold:#96721a; --line:rgba(33,27,22,.15); --serif:'Noto Serif SC','Songti SC',serif; --mono:'Space Mono',monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; padding:0 24px 100px; background:var(--bg); color:var(--ink); font-family:var(--serif); line-height:2; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.readerTop { height:62px; position:sticky; z-index:10; top:0; margin:0 -24px 70px; padding:0 max(24px,calc((100vw - 780px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(244,239,229,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.readerTop b { font-size:13px; letter-spacing:.08em; }
.readerTop a { color:var(--accent); font:10px var(--mono); letter-spacing:.12em; text-decoration:none; }
.readerIntro { max-width:780px; margin:0 auto 70px; padding:54px; border:2px solid var(--ink); background:var(--paper); box-shadow:8px 8px 0 var(--gold); }
.readerIntro span { font:9px var(--mono); letter-spacing:.2em; color:var(--accent); }
.readerIntro h1 { font-size:clamp(38px,6vw,64px); line-height:1.15; margin:18px 0; }
.readerIntro p { color:var(--muted); margin:0; }
.introPromise { display:block; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); color:var(--accent); font-size:17px; }
.readingMap { max-width:780px; margin:-32px auto 82px; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.readingMap a { min-height:130px; padding:24px; display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,250,240,.58); color:var(--ink); text-decoration:none; transition:.2s; }
.readingMap a:hover { background:var(--paper); transform:translateY(-2px); }
.readingMap span { font:9px var(--mono); color:var(--accent); letter-spacing:.18em; }
.readingMap b { font-size:18px; margin:14px 0 2px; }
.readingMap small { color:var(--muted); }
.letterBody { max-width:720px; margin:auto; }
.letterBody > h1 { font-size:clamp(28px,4vw,40px); line-height:1.35; margin:2.5em 0 .8em; padding-top:1em; border-top:1px solid var(--line); }
.letterBody > h1:first-child { border:0; padding:0; }
.letterBody h2 { font-size:24px; line-height:1.45; margin:2em 0 .6em; }
.letterBody p { font-size:17px; margin:1.15em 0; }
.letterBody strong { color:var(--accent); }
.letterBody blockquote { margin:2em 0; padding:22px 28px; border-left:3px solid var(--gold); background:rgba(150,114,26,.07); color:#5f564e; }
.letterBody .keyQuote { margin:2.8em -34px; padding:34px 38px; border:2px solid var(--ink); border-left:8px solid var(--accent); background:var(--paper); box-shadow:6px 6px 0 var(--gold); }
.letterBody .keyQuote p { margin:0; font-size:clamp(20px,3vw,27px); line-height:1.65; }
.letterBody ul { padding:22px 24px 22px 44px; border:1px solid var(--line); background:rgba(255,250,240,.62); }
.letterBody ol { list-style:none; counter-reset:item; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.letterBody ol li { counter-increment:item; padding:20px 16px; border:1px solid var(--line); background:var(--paper); }
.letterBody ol li::before { content:'0' counter(item); display:block; margin-bottom:12px; font:9px var(--mono); letter-spacing:.14em; color:var(--accent); }
.letterBody li { margin:.55em 0; }
.letterBody a { color:var(--accent); word-break:break-all; }
.storyImage { margin:34px auto 28px; max-width:560px; padding:12px 12px 16px; background:var(--paper); border:1px solid var(--line); box-shadow:7px 7px 0 var(--gold); }
.storyImageWide { max-width:720px; }
.storyImage img { display:block; width:100%; height:auto; }
.storyImage figcaption { padding:13px 4px 0; font:9px var(--mono); letter-spacing:.12em; color:var(--muted); text-align:center; }
.letterEnd { max-width:720px; margin:80px auto 0; padding-top:30px; border-top:1px solid var(--line); text-align:center; }
.letterEnd a { display:inline-block; padding:13px 22px; background:var(--accent); color:var(--paper); text-decoration:none; font-weight:700; }
.assignmentCard { margin:34px -34px; padding:36px 38px; background:var(--ink); color:var(--paper); box-shadow:8px 8px 0 var(--accent); }
.assignmentCard span { font:9px var(--mono); letter-spacing:.18em; color:var(--accent); }
.assignmentCard p { margin:22px 0 10px; font-size:clamp(22px,4vw,32px); line-height:1.55; font-weight:700; }
.assignmentCard small { color:rgba(255,250,240,.55); }
#title-block-header, #目录 { display:none; }
@media(max-width:760px){body{padding-left:20px;padding-right:20px}.readerTop{margin-left:-20px;margin-right:-20px;margin-bottom:40px}.readerIntro{padding:30px 24px}.readingMap{grid-template-columns:1fr;margin-top:-15px;margin-bottom:55px}.readingMap a{min-height:auto}.letterBody p{font-size:16px}.letterBody>h1{font-size:29px}.letterBody .keyQuote,.assignmentCard{margin-left:0;margin-right:0;padding:26px 22px}.letterBody ol{grid-template-columns:1fr}}