:root { --paper:#f6f2e9; --ink:#2a413b; --muted:#69716a; --line:#d9dbce; --accent:#b95c3c; --pale:#edcbb0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:35px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
.wrap { width:min(1200px, calc(100% - 104px)); margin-inline:auto; }
.skip { position:absolute; left:24px; top:-100px; padding:12px; background:var(--paper); z-index:5; }
.skip:focus { top:12px; }
.site-header { height:111px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.wordmark { font-family:Georgia, 'Times New Roman', serif; font-size:34px; font-weight:bold; letter-spacing:-1.7px; display:inline-flex; align-items:center; }
.wordmark span { font-weight:normal; }
.wordmark i { font-size:24px; color:var(--accent); margin-left:14px; font-style:normal; }
nav { display:flex; gap:36px; align-items:center; font-size:13px; }
nav a:hover, .site-footer a:hover { color:var(--accent); }
nav .sibling { border-left:1px solid var(--line); padding-left:32px; }
.sibling span { margin-left:15px; }
.hero { position:relative; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:24px; padding-block:65px 86px; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:1.9px; display:flex; align-items:center; gap:9px; margin:0 0 27px; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.edition { font-size:9px; color:var(--muted); margin-left:17px; font-weight:400; }
h1, h2, h3, .verse, dt { font-family:Georgia, 'Times New Roman', serif; font-weight:normal; }
h1 { font-size:clamp(60px,6.8vw,94px); line-height:.99; letter-spacing:-4px; margin:0; }
h1 em { color:var(--accent); font-weight:normal; }
.intro { font-size:16px; line-height:1.8; margin:29px 0 30px; }
.text-link { font-size:12px; display:inline-flex; align-items:center; gap:22px; padding-bottom:7px; border-bottom:1px solid currentColor; line-height:1.5; }
.text-link span { font-size:20px; line-height:1; transition:transform .2s; }
.text-link:hover span { transform:translate(3px, -2px); }
.hero-art { margin:0; padding:0 0 20px; }
.hero-art svg { display:block; width:100%; max-height:550px; }
.hero-art figcaption { font-size:8px; letter-spacing:2.2px; text-align:center; margin-top:-20px; color:var(--muted); }
.hero-bottom { position:absolute; bottom:27px; font-size:8px; letter-spacing:2.1px; color:var(--muted); }
.welcome { border-top:1px solid var(--line); padding-block:57px 68px; display:grid; grid-template-columns:1fr 2fr; gap:70px; }
.section-no { font-size:9px; letter-spacing:1.7px; color:var(--muted); display:block; padding-top:5px; line-height:1.7; }
h2 { font-size:35px; letter-spacing:-1.1px; line-height:1.15; margin:0 0 24px; }
p { font-size:14px; line-height:1.9; }
.welcome p { max-width:690px; margin:14px 0 0; }
.poetry-section { background:#e9eddf; }
.poetry-grid { padding-block:67px; display:grid; grid-template-columns:1fr 1.32fr; gap:100px; }
.poem-note { padding-top:10px; }
.poem-note .eyebrow { font-size:9px; margin-bottom:33px; }
.poem-note h2 { font-size:82px; letter-spacing:-3px; margin:0 0 26px; }
.poem-note h2 span { display:block; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:400; letter-spacing:0; padding-top:18px; }
.book-tag { display:inline-flex; gap:50px; border-top:1px solid #bbc7b5; border-bottom:1px solid #bbc7b5; padding-block:11px; font-size:9px; letter-spacing:2px; }
.poem-note p { margin:26px 0 30px; font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-size:21px; line-height:1.55; }
.poem-note .text-link { max-width:100%; font-size:11px; gap:14px; }
.reading .section-no { margin-bottom:27px; }
h3 { font-size:25px; letter-spacing:-.6px; margin:29px 0 15px; }
.reading h3:first-of-type { margin-top:0; }
.reading p { font-size:13px; line-height:1.95; margin:14px 0; }
.reading .editorial-note { font-size:10px; line-height:1.8; color:#61705f; margin-top:24px; padding-top:18px; border-top:1px solid #cbd4c2; }
.history { padding-block:68px; display:grid; grid-template-columns:1fr 2fr; gap:70px; }
.history h2 { margin-bottom:24px; }
.history p { font-size:13px; }
.history .text-link { margin-top:10px; font-size:11px; }
.original { position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:42px; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.original .eyebrow { font-size:9px; margin-bottom:18px; text-transform:uppercase; }
.original h2 { font-size:29px; margin-bottom:10px; }
.original div>p:last-child { font-size:10px; color:var(--muted); margin:0; }
.verse { font-size:22px; font-style:italic; line-height:1.85; margin:0; padding-right:20px; }
.asterisk { position:absolute; right:0; top:40px; font-size:30px; color:var(--accent); }
.words { padding-block:65px 58px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.section-heading .section-no { margin-bottom:23px; }
.section-heading h2 { margin:0; }
.translation-label { font-size:10px; color:var(--muted); margin-bottom:4px; }
.word-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin:35px 0 0; }
.word-grid>div { border-top:1px solid var(--ink); padding-top:19px; }
dt { font-size:28px; letter-spacing:-.6px; display:flex; justify-content:space-between; align-items:center; }
dt span { font:9px Arial, sans-serif; color:var(--muted); }
dd { margin:17px 0 0; font-size:11px; line-height:1.8; }
dd>span { display:block; font-size:11px; color:var(--accent); margin-top:17px; }
.sources { border-top:1px solid var(--line); padding-block:47px 50px; display:grid; grid-template-columns:1fr 1.3fr; gap:75px; }
.sources h2 { font-size:29px; margin-top:24px; }
.source-links a { display:grid; grid-template-columns:1fr auto; border-bottom:1px solid var(--line); padding:17px 0; row-gap:7px; }
.source-links a:first-child { padding-top:0; }
.source-links a>span:first-child { font-size:13px; }
.source-links small { grid-column:1; grid-row:2; font-size:9px; color:var(--muted); }
.source-links a>span:last-child { grid-column:2; grid-row:1 / 3; align-self:center; }
.source-links a:hover { color:var(--accent); }
.site-footer { min-height:130px; display:flex; justify-content:space-between; align-items:center; gap:25px; }
.site-footer .wordmark { font-size:26px; }
.site-footer p { font-size:10px; color:var(--muted); }
.site-footer>a:last-child { font-size:11px; }
@media (min-width:1500px) { .hero { padding-top:80px; padding-bottom:110px; } }
@media (max-width:1000px) {
  .wrap { width:calc(100% - 64px); }
  .hero { padding-top:50px; gap:0; }
  h1 { font-size:76px; }
  .eyebrow { letter-spacing:1.2px; font-size:8px; }
  .edition { margin-left:8px; font-size:8px; }
  .welcome,.history { gap:35px; grid-template-columns:.7fr 2fr; }
  .poetry-grid { gap:50px; grid-template-columns:.9fr 1.3fr; }
  .poem-note h2 { font-size:70px; }
  h2 { font-size:31px; }
  .word-grid { gap:18px; }
  dt { font-size:24px; }
  .original { gap:35px; }
  .verse { font-size:19px; }
}
@media (max-width:700px) {
  .wrap { width:calc(100% - 40px); }
  .site-header { height:82px; }
  .wordmark { font-size:29px; }
  .wordmark i { font-size:20px; margin-left:9px; }
  nav { gap:20px; font-size:11px; }
  nav>a:nth-child(2) { display:none; }
  nav .sibling { padding-left:0; border:0; }
  .sibling span { margin-left:4px; }
  .hero { grid-template-columns:1fr; padding-top:43px; padding-bottom:62px; }
  .eyebrow { font-size:8px; margin-bottom:26px; }
  h1 { font-size:clamp(54px, 15.5vw, 76px); line-height:1; letter-spacing:-2.6px; }
  .intro { font-size:14px; margin:24px 0; }
  .hero-art { width:100%; max-width:410px; justify-self:center; margin-top:25px; padding:0; }
  .hero-art svg { max-height:410px; }
  .hero-art figcaption { margin-top:-14px; font-size:7px; }
  .hero-bottom { bottom:21px; font-size:7px; letter-spacing:1.5px; }
  .welcome,.history { grid-template-columns:1fr; gap:23px; padding-block:39px; }
  h2 { font-size:29px; }
  p { font-size:13px; }
  .welcome p { margin-top:15px; }
  .poetry-grid { grid-template-columns:1fr; gap:38px; padding-block:40px; }
  .poem-note { border-bottom:1px solid #cbd4c2; padding-bottom:35px; }
  .poem-note h2 { font-size:72px; }
  .poem-note .eyebrow { margin-bottom:23px; }
  .poem-note p { font-size:21px; }
  .reading .section-no { margin-bottom:23px; }
  h3 { font-size:24px; }
  .reading p,.history p { font-size:13px; }
  .original { grid-template-columns:1fr; gap:24px; padding-block:33px; }
  .original h2 { font-size:28px; }
  .verse { font-size:20px; padding-right:0; }
  .asterisk { top:26px; font-size:26px; }
  .words { padding-block:39px; }
  .section-heading { display:block; }
  .section-heading h2 { font-size:28px; }
  .translation-label { display:block; margin-top:14px; }
  .word-grid { grid-template-columns:repeat(2,1fr); gap:28px 22px; margin-top:28px; }
  dt { font-size:28px; }
  dd { margin-top:10px; }
  dd>span { margin-top:9px; }
  .sources { grid-template-columns:1fr; gap:11px; padding-block:35px; }
  .sources h2 { font-size:28px; }
  .source-links a { padding-block:17px; }
  .source-links a:first-child { padding-top:5px; }
  .site-footer { min-height:144px; flex-wrap:wrap; gap:8px; padding-block:27px; }
  .site-footer p { order:3; flex-basis:100%; margin:0; }
  .site-footer .wordmark { font-size:28px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }