/* Shared columns keep Chinese left and English right; mobile follows English-first HTML. */
:root {
  --paper:#edf2f1;
  --ink:#183d3c;
  --muted:#526a68;
  --line:#c8d5d1;
  --wash:#e1ebe7;
  --serif:"Baskerville","Palatino Linotype","Book Antiqua",Georgia,"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
  --sans:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
  --gutter:clamp(3rem,7vw,6rem);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:.35em; }
a:focus-visible,summary:focus-visible { outline:2px solid var(--ink); outline-offset:7px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-6rem; left:1rem; background:white; padding:1rem; z-index:5; }
.skip-link:focus { top:1rem; }

.masthead { max-width:1240px; margin:auto; padding:2rem 3rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--sans); font-size:.9rem; }
.masthead a { text-decoration:none; }
.masthead a:first-child { font-size:1.05rem; }
.masthead a:hover { text-decoration:underline; }

.bilingual { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--gutter); }
.bilingual > .english { grid-column:2; grid-row:1; min-width:0; }
.bilingual > .chinese { grid-column:1; grid-row:1; min-width:0; }

.opening { position:relative; min-height:740px; height:min(860px,88svh); overflow:hidden; }
.nameplate { position:relative; z-index:1; width:100%; max-width:1120px; padding:4rem 3rem 0; margin:auto; text-align:center; }
.hero-name { position:relative; height:clamp(130px,16vw,190px); display:flex; align-items:center; justify-content:center; margin:0; font-weight:400; line-height:1.1; }
.name-english { font-size:clamp(5.5rem,11vw,9rem); letter-spacing:-.035em; }
.name-chinese { font-size:clamp(5.5rem,10vw,8.5rem); letter-spacing:.16em; padding-left:.16em; }
.pronunciation { position:absolute; bottom:-.7rem; left:0; right:0; font-family:var(--sans); font-size:.85rem; letter-spacing:.13em; line-height:1.5; }
.hero-verse { font-size:1.45rem; line-height:1.6; min-height:3.2em; margin:3rem 0 .8rem; }
.chinese .hero-verse { font-size:1.35rem; letter-spacing:.1em; }
.attribution { margin:0; font-size:.95rem; color:var(--muted); line-height:1.6; }
.landscape { position:absolute; bottom:-1px; left:0; width:100%; height:64%; object-fit:cover; object-position:center bottom; pointer-events:none; }
.landscape-verse { position:absolute; bottom:3rem; right:9%; writing-mode:vertical-rl; font-size:.95rem; letter-spacing:.35em; line-height:1.9; margin:0; }

.meaning { max-width:1120px; margin:auto; padding:6.5rem 3rem 7rem; }
.meaning h2 { font-size:2rem; font-weight:400; line-height:1.4; margin:0 0 2rem; }
.chinese h2 { letter-spacing:.12em; }
.meaning-copy p { font-size:1.17rem; line-height:1.8; margin:0 0 1.6rem; }
.chinese.meaning-copy p { line-height:2.1; }
.meaning-copy .context { font-size:1.05rem; color:var(--muted); margin:2rem 0 0; }

.reading { max-width:1120px; margin:0 auto 5rem; padding:0 3rem; }
summary { position:relative; cursor:pointer; list-style:none; padding:1rem 0 2.5rem; }
summary::-webkit-details-marker { display:none; }
.collection { display:block; font-size:.95rem; color:var(--muted); margin-bottom:.8rem; }
.poem-title { display:block; font-size:2.2rem; line-height:1.3; }
.chinese .poem-title { font-size:2.6rem; letter-spacing:.15em; }
.poem-heading .english { padding-right:1.5rem; }
.disclosure { position:absolute; right:0; top:4rem; width:1rem; height:1rem; }
.disclosure::before,.disclosure::after { content:""; position:absolute; top:50%; width:1rem; height:1px; background:var(--ink); }
.disclosure::after { transform:rotate(90deg); }
details[open] .disclosure::after { transform:rotate(0); }
.poem-history { margin:0 0 3rem; font-size:1.06rem; line-height:1.8; }
.poem-history .chinese { line-height:2.1; }
.poem-history p { margin:0 0 1rem; }
.poem-history strong { font-weight:600; }
.history-source { font-size:.92rem; color:var(--muted); }
.reading-note { color:var(--muted); font-size:.95rem; line-height:1.6; margin:0 0 1.5rem; }
.reading-note p { margin:0; }
.poem { padding:1rem 0 2rem; }
.stanza { padding:0 0 3rem; }
.stanza p { font-size:1.17rem; line-height:2.1; margin:0; }
.stanza .translation { font-size:1.12rem; line-height:1.85; }
mark { color:var(--ink); background:var(--wash); padding:.15em .2em; margin-left:-.2em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
footer { max-width:1240px; margin:auto; padding:1.8rem 3rem 2.5rem; display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; color:var(--muted); }

@media(max-width:760px) {
  .masthead { padding:1.5rem; font-size:.8rem; }
  .bilingual { grid-template-columns:minmax(0,1fr); row-gap:2rem; }
  .bilingual > .english,.bilingual > .chinese { grid-column:auto; grid-row:auto; }
  .opening { min-height:950px; height:auto; }
  .nameplate { padding:2rem 1.5rem 13rem; gap:3rem; }
  .hero-name { height:120px; }
  .name-english { font-size:clamp(5rem,23vw,7rem); }
  .name-chinese { font-size:clamp(5rem,23vw,6.5rem); }
  .hero-verse { margin:2rem 0 .6rem; font-size:1.25rem; min-height:0; }
  .chinese .hero-verse { font-size:1.2rem; }
  .attribution { font-size:.88rem; }
  .landscape { width:155%; max-width:none; left:-30%; height:40%; }
  .landscape-verse { right:7%; bottom:2rem; font-size:.85rem; }
  .meaning { padding:3.5rem 1.5rem 5rem; row-gap:3rem; }
  .meaning h2 { font-size:1.8rem; margin-bottom:1.5rem; }
  .meaning-copy p { font-size:1.1rem; }
  .reading { padding:0 1.5rem; margin-bottom:2rem; }
  .poem-heading { row-gap:1.5rem; }
  .poem-title { font-size:1.8rem; }
  .chinese .poem-title { font-size:2rem; }
  .poem-history { margin-bottom:2.5rem; }
  .reading-note { row-gap:.5rem; }
  .stanza { row-gap:1.5rem; padding-bottom:3.5rem; }
  .stanza .original { font-size:1.12rem; }
  .stanza .translation { font-size:1.1rem; }
  footer { padding:1.5rem; font-size:.8rem; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}