:root{--bg:#f5f0e4;--paper:#fffdf8;--ink:#23463f;--muted:#71827a;--line:#d7d2c4;--accent:#315f54}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#34473f;font-family:"Noto Serif TC","Songti TC","PMingLiU",serif}.nav{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;background:rgba(245,240,228,.96);z-index:5}.brand{font-weight:700;color:var(--ink);text-decoration:none}.nav nav{display:flex;gap:28px}.nav nav a{font-size:13px;color:#53655e;text-decoration:none}.nav nav a.active{color:var(--ink);font-weight:700}main{max-width:1080px;margin:auto;padding:72px 28px 100px}.intro{max-width:720px}.eyebrow,.group-label{font-family:Arial,sans-serif;letter-spacing:.22em;font-size:10px;color:#6d887f}.intro h1{font-size:44px;line-height:1.1;margin:12px 0 16px;color:var(--ink);font-weight:500}.intro>p:last-child{font-size:14px;color:#64746e}.selectors{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;margin:42px 0 54px;align-items:center}.sel{border:0;background:none;padding:0;cursor:pointer;text-align:left;transition:.28s ease;opacity:.55;filter:saturate(.55)}.sel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:.28s ease}.sel span{display:block;font-size:12px;margin-top:9px;color:#50645c}.sel:hover{opacity:.82;filter:saturate(.8);transform:translateY(-2px)}.sel.active{opacity:1;filter:none;transform:scale(1.08);z-index:1}.sel.active span{color:var(--ink);font-weight:700}.letter{max-width:830px;margin:auto;background:var(--paper);padding:62px 72px 58px;box-shadow:0 10px 30px rgba(54,62,54,.045);border:1px solid rgba(94,104,93,.08)}.letter-head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:32px}.letter h2{font-size:27px;color:var(--ink);font-weight:600;margin:8px 0 0}.letter-body p{font-size:15px;line-height:2.05;margin:0 0 1.25em;text-align:justify}.signoff{font-size:13px;line-height:1.8;margin:36px 0 34px;color:#55665f}.signoff strong{display:block;color:var(--ink);margin-bottom:8px}.letter figure{margin:34px 0 0}.letter figure img{display:block;width:82%;max-height:480px;object-fit:cover;margin:auto}.letter figcaption{text-align:center;margin-top:10px;font-size:10px;letter-spacing:.16em;color:#839089}footer{background:#ece6d5;border-top:1px solid #d7d0bd;padding:48px 6vw 24px;display:grid;grid-template-columns:1.4fr .7fr 1fr 1.3fr;gap:34px;font-size:11px;color:#69766e}footer strong{color:var(--ink)}footer b{font-family:Arial,sans-serif;font-size:9px;letter-spacing:.08em;color:#3e5149}footer a,footer span,footer p{display:block;color:#69766e;text-decoration:none;line-height:1.8;margin:5px 0}footer small{border-top:1px solid #d7d0bd;padding-top:20px;margin-top:22px;grid-column:1/3}.right{grid-column:3/5;text-align:right}@media(max-width:800px){.nav nav{display:none}main{padding:48px 18px}.intro h1{font-size:36px}.selectors{grid-template-columns:repeat(3,1fr);gap:20px 12px;margin-bottom:40px}.sel.active{transform:scale(1.04)}.letter{padding:38px 24px}.letter-body p{font-size:14px;line-height:1.95}.letter figure img{width:100%}footer{grid-template-columns:1fr 1fr}.right,footer small{grid-column:auto}}@media(max-width:480px){.selectors{grid-template-columns:repeat(2,1fr)}footer{grid-template-columns:1fr}.right,footer small{text-align:left}}

/* Approved readability sizes */
.nav .brand{font-size:16px}.nav nav a{font-size:15px}
footer{font-size:14px}footer strong{font-size:16px}footer b{font-size:11px}footer small{font-size:11px}
@media(min-width:801px) and (max-width:1080px){.nav{padding:0 3vw}.nav .brand{font-size:14px}.nav nav{gap:12px}.nav nav a{font-size:13px}}
