/* The reading is a paper object beside an unhurried, horizontally typeset commentary. */
#reading {
  --reading-serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
  gap:24px 64px;max-width:1280px;margin:auto;padding:38px 48px 64px;
  height:auto;min-height:100svh;overflow:visible;
}
#reading[hidden]{display:none}
#reading .reading-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;height:auto;min-height:54px;padding:0 0 20px;font:14px/1.8 var(--reading-serif);letter-spacing:.06em}
#reading .reading-nav span:last-child{display:block;width:100%;font:12px/1.7 system-ui;color:#b9ac97}
#reading .scroll-stage{height:auto;min-height:0;padding:8px 0 30px;align-self:start;position:sticky;top:24px}
#reading .scroll-reveal{width:100%;max-width:420px;max-height:none;aspect-ratio:auto;min-height:650px;transform:none;margin:auto;
  background:radial-gradient(ellipse at 16% 12%,#f0e5c8 0,transparent 65%),linear-gradient(90deg,#c7b08c 0,#e5d4ad 3%,#e9dabb 94%,#cfb88e);
  border:1px solid #bda982;box-shadow:0 18px 40px #0008,inset 0 0 24px #80654220;
  --paper-brush:"Kaiti SC","STKaiti","KaiTi",var(--reading-serif);
}
#reading .scroll-reveal::before{inset:18px;border:1px solid #8d654653;box-shadow:none}
#reading .scroll-reveal::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;background-image:url("../assets/paper-fibre.svg");z-index:3}
#reading .scroll-reveal canvas{position:absolute;inset:0;opacity:.08;pointer-events:none}
#reading .scroll-copy{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;padding:50px 38px 52px;min-height:650px;box-sizing:border-box;overflow:visible;opacity:1;color:#382c21;font-family:var(--paper-brush)}
#reading .scroll-heading{position:static;writing-mode:horizontal-tb;max-height:none;height:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:24px;border-bottom:1px solid #8d65464d;width:100%}
#reading .scroll-heading span{font:15px/1.5 var(--reading-serif);letter-spacing:.32em;color:#823c2c}
#reading .scroll-heading strong{font:25px/1.5 var(--paper-brush);letter-spacing:.12em;white-space:normal}
#reading .scroll-heading b{font:inherit;font-size:34px}
#reading .scroll-heading .paper-fortune{display:inline-block;padding:3px 10px;border:1px solid #8b3a2e;color:#813729;font:16px/1.6 var(--paper-brush);letter-spacing:.15em}
#reading .paper-grade-note{font:12px/1.5 var(--reading-serif);color:#76513c;letter-spacing:.08em}
#reading .guidance-note{display:block;margin-top:16px;font:12px/1.8 system-ui;color:#c0ad93}
#reading .scroll-copy blockquote{position:static;writing-mode:horizontal-tb;text-orientation:mixed;max-width:none;max-height:none;width:100%;height:auto;margin:34px 0;overflow:visible;text-align:center;font:24px/1.85 var(--paper-brush);letter-spacing:.07em;flex:1}
#reading .scroll-copy blockquote span{display:block;margin:0 0 8px;text-wrap:balance}
#reading .scroll-reveal[data-poem-density="tight"] blockquote{font-size:20px}
#reading .scroll-allusion{position:static;writing-mode:horizontal-tb;height:auto;display:flex;align-items:center;gap:12px;margin-top:8px}
#reading .scroll-allusion span{font:13px/1.7 var(--reading-serif);color:#823c2c}
#reading .scroll-allusion b{font:18px/1.7 var(--paper-brush);max-height:none;letter-spacing:.08em}
#reading .scroll-copy > .scroll-seal{position:static;align-self:center;width:36px;height:36px;margin-top:24px;opacity:.5;filter:none}
#reading .interpretation{display:block;direction:ltr;height:auto;overflow:visible;border:0;padding:8px 0}
#reading .fortune-verdict{padding:0 0 28px;border-bottom:1px solid #b59a6952;margin-bottom:10px;writing-mode:horizontal-tb}
#reading .fortune-verdict > span{display:block;font:14px/1.6 var(--reading-serif);color:#d3b77f;letter-spacing:.12em}
#reading .fortune-verdict strong{display:block;margin:12px 0;font:32px/1.5 var(--reading-serif);color:#e8c88f;letter-spacing:.12em}
#reading .fortune-verdict p{font:17px/1.95 var(--reading-serif);color:#e2d9c7;margin:0 0 14px;white-space:pre-line}
#reading .fortune-verdict small{font:12px/1.8 system-ui;color:#c0ad93}
#reading .interpretation article{display:block;min-height:0;height:auto;padding:26px 0;border:0;border-bottom:1px solid #b59a6938;overflow:visible;background:none}
#reading .interpretation h2,#reading .interpretation h3,#reading .interpretation p{writing-mode:horizontal-tb;text-orientation:mixed;max-width:none;max-height:none;overflow:visible;display:block}
#reading .interpretation h2{font:26px/1.65 var(--reading-serif);letter-spacing:.02em;margin:0 0 24px;text-shadow:none;color:#eee2ca}
#reading .interpretation h3{font:16px/1.6 var(--reading-serif);letter-spacing:.08em;color:#d3b77f;margin:0 0 14px}
#reading .interpretation article p{font:16px/2.05 var(--reading-serif);letter-spacing:.02em;color:#d9d0bf;white-space:pre-line;-webkit-line-clamp:unset}
#reading .reading-actions{grid-column:1/-1;gap:24px;padding:24px 0 0;border-top:1px solid #b59a6938}
#reading .reading-actions button{width:200px;min-height:54px;font:15px/1.5 var(--reading-serif)}
#reading .reading-actions a{display:block;font:13px/1.7 var(--reading-serif);color:#d0b88e}
@media(max-width:850px){
  #reading{display:block;padding:24px 22px 42px}
  #reading .scroll-stage{position:relative;top:auto;padding:20px 0 36px}
  #reading .scroll-reveal{width:100%;max-width:380px;min-height:540px}
  #reading .scroll-copy{min-height:540px;padding:38px 30px 36px}
  #reading .scroll-copy blockquote{font-size:23px;margin:28px 0}
  #reading .scroll-reveal[data-poem-density="tight"] blockquote{font-size:19px}
  #reading .interpretation{max-width:620px;margin:auto}
  #reading .interpretation h2{font-size:24px}
  #reading .reading-actions{display:flex;flex-direction:column;align-items:stretch}
  #reading .reading-actions button{width:100%}
  #reading .reading-actions a{text-align:center}
}