/* r4 continuation styles, carried forward unchanged except asset paths (../assets). r5 encounter styles follow in encounter.css. */
/* r4 — "The Loveliest Place". Light and Dark are complete appearances; Quiet and reduced motion are independent. */
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}

/* ---------- tokens: DARK (approved pure-black field) ---------- */
:root{
  color-scheme:dark;
  --bg:#000;
  --bg-2:#07090a;            /* quiet raised surface */
  --paper:#0d1110;           /* object surfaces: keep card, copy record */
  --ink:#ede7da;             /* lamplit ivory */
  --ink-2:#c4beb1;
  --muted:#9aa19b;
  --rule:rgba(237,231,218,.13);
  --rule-2:rgba(237,231,218,.24);
  --accent:#8dc7aa;          /* sea glass: relationships */
  --accent-ink:#8dc7aa;
  --copper:#d2a28d;          /* rose copper: marked phrases, choice */
  --mark:rgba(201,152,132,.30);
  --mark-ink:#fff4e6;
  --lamp:#f0d9a8;
  --btn-bg:#f0d9a8; --btn-ink:#1a140a;
  --focus:#8dc7aa;
  --shadow-obj:0 1px 1px rgba(0,0,0,.6),0 22px 44px -22px rgba(0,0,0,.95);
  --shadow-card:0 40px 80px -48px rgba(141,199,170,.22);
  --serif:"Crimson Pro",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:37rem;
  --ease:cubic-bezier(.22,.8,.2,1);        /* settle: things arriving or responding */
  --ease-settle:var(--ease);
  --ease-draw:cubic-bezier(.45,0,.2,1);     /* draw: a relation line being traced, gentle start */
  --ease-breathe:cubic-bezier(.45,0,.55,1); /* breathe: ambient lamp light only */
  --t1:.24s; --t2:.5s; --t3:.9s;
}
/* ---------- tokens: LIGHT (warm paper; the night art becomes a lit window on the page) ---------- */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f3eee3; --bg-2:#ece5d6; --paper:#fbf8f1;
    --ink:#1b1814; --ink-2:#433d34; --muted:#665f55;
    --rule:rgba(27,24,20,.13); --rule-2:rgba(27,24,20,.26);
    --accent:#2d6b55; --accent-ink:#245a47;
    --copper:#8c4e39; --mark:rgba(196,128,98,.24); --mark-ink:#1b1814;
    --lamp:#8a5a1f;
    --btn-bg:#1f3a30; --btn-ink:#f6f1e6; --focus:#245a47;
    --shadow-obj:0 1px 2px rgba(58,40,22,.22),0 20px 36px -20px rgba(58,40,22,.5);
    --shadow-card:0 1px 2px rgba(58,40,22,.08),0 30px 60px -36px rgba(58,40,22,.35);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3eee3; --bg-2:#ece5d6; --paper:#fbf8f1;
  --ink:#1b1814; --ink-2:#433d34; --muted:#665f55;
  --rule:rgba(27,24,20,.13); --rule-2:rgba(27,24,20,.26);
  --accent:#2d6b55; --accent-ink:#245a47;
  --copper:#8c4e39; --mark:rgba(196,128,98,.24); --mark-ink:#1b1814;
  --lamp:#8a5a1f;
  --btn-bg:#1f3a30; --btn-ink:#f6f1e6; --focus:#245a47;
  --shadow-obj:0 1px 2px rgba(58,40,22,.22),0 20px 36px -20px rgba(58,40,22,.5);
  --shadow-card:0 1px 2px rgba(58,40,22,.08),0 30px 60px -36px rgba(58,40,22,.35);
}

*{box-sizing:border-box}
html{scroll-padding-top:7rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color var(--t2) var(--ease),color var(--t2) var(--ease)}
:root[data-theme="light"] body,:root:not([data-theme]) body{background-image:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
::selection{background:var(--mark);color:var(--mark-ink)}
i,em{font-style:italic}

/* review ribbon — outside the design */
.review-ribbon{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.45rem 1.25rem;background:#d9d6cf;color:#1b1814;font:500 11.5px/1.4 var(--sans)}

/* ---------- header & display settings ---------- */
.site-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.5rem;padding:.85rem clamp(1rem,4vw,3rem);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);border-bottom:1px solid var(--rule)}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font:400 1.3rem/1 var(--serif);letter-spacing:.005em;margin-right:auto}
.brand img{border-radius:6px}
.brand.small{font-size:1.05rem}
.site-head nav{display:flex;gap:1.5rem;font-size:.9rem}
.site-head nav a{text-decoration:none;color:var(--ink-2);transition:color var(--t1) var(--ease)}
.site-head nav a:hover{color:var(--ink)}
.display{position:relative}
.display summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink);padding:.4rem .8rem;border:1px solid var(--rule-2);border-radius:999px}
.display summary::-webkit-details-marker{display:none}
.display-dot{width:.8rem;height:.8rem;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:1px solid var(--ink)}
.display-panel{position:absolute;right:0;top:calc(100% + .5rem);width:17rem;padding:1rem 1.1rem;border-radius:14px;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-obj);animation:pop var(--t1) var(--ease)}
.display fieldset{border:0;margin:0 0 .8rem;padding:0}
.display fieldset:last-child{margin:0}
.display legend{font:italic 400 1rem var(--serif);color:var(--accent-ink);margin-bottom:.35rem;padding:0}
.display label{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;align-items:baseline;font-size:.9rem;padding:.2rem 0;cursor:pointer}
.display label small{grid-column:2;display:block;color:var(--muted);font-size:.78rem}
.display input{accent-color:var(--accent)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- shared type ---------- */
.overline{margin:0 0 1.1rem;font:italic 400 1.15rem/1.3 var(--serif);color:var(--accent-ink)}
.label{margin:0 0 .5rem;font:italic 400 1rem/1.3 var(--serif);color:var(--accent-ink)}
h1{font:400 clamp(2.7rem,5.6vw,5.1rem)/1.02 var(--serif);letter-spacing:-.016em;margin:0 0 1.5rem}
h2{font:400 clamp(2rem,3.5vw,3rem)/1.08 var(--serif);letter-spacing:-.008em;margin:0 0 .8rem}
.lede{font-size:clamp(1.05rem,1.3vw,1.17rem);color:var(--ink-2);max-width:36rem;margin:0 0 1.4rem}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.28em;text-decoration-thickness:1px;transition:text-decoration-color var(--t1) var(--ease)}
.link:hover{text-decoration-color:currentColor}
.meta{font-size:.8rem;color:var(--muted);margin:.8rem 0 0}
.meta.proto{font-style:italic}
.btn{display:inline-flex;align-items:baseline;gap:.6rem;font:600 .95rem/1 var(--sans);padding:1rem 1.4rem;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);text-decoration:none;border:0;cursor:pointer;transition:transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--btn-bg) 70%,transparent)}
.btn:active{transform:translateY(0)}
.btn-quiet{display:inline-flex;align-items:baseline;gap:.6rem;font:600 .93rem/1 var(--sans);padding:.95rem 1.3rem;border-radius:999px;background:none;color:var(--ink);border:1px solid var(--rule-2);text-decoration:none;cursor:pointer;transition:border-color var(--t1) var(--ease)}
.btn-quiet:hover{border-color:var(--ink)}
.dur{font:400 .78rem var(--sans);opacity:.72}

/* ---------- opening ---------- */
.opening{position:relative;min-height:min(calc(100svh - 6.4rem),860px);display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,8vh,6rem) clamp(1rem,6vw,5.5rem) clamp(3rem,7vh,5rem);overflow:hidden;isolation:isolate}
.plate{position:absolute;inset:0;margin:0;z-index:-1}
.plate img{width:100%;height:100%;object-fit:cover;object-position:62% 72%}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 62%,var(--bg) 100%),linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.2) 48%,rgba(0,0,0,0) 70%)}
.window-glow{position:absolute;left:86.5%;top:86%;width:170px;height:110px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(240,190,110,.45),rgba(240,190,110,0));animation:breathe 9s var(--ease-breathe) infinite;pointer-events:none;will-change:opacity}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.opening-copy{max-width:43rem}
.promise{font:400 clamp(1.12rem,1.5vw,1.3rem)/1.55 var(--sans);color:var(--ink);max-width:35rem;margin:0 0 2rem}
.opening-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.2rem;margin-bottom:2rem}
.provenance{font-size:.84rem;color:var(--ink-2);max-width:33rem;margin:0;padding-left:.9rem;border-left:1px solid var(--copper)}

/* Light: the night painting becomes a plate on the page — a lit window seen from a day room. */
:root[data-theme="light"] .opening{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
:root[data-theme="light"] .plate{position:relative;inset:auto;z-index:0;order:2;aspect-ratio:4/5;max-height:min(70svh,640px);width:100%;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(58,40,22,.2),0 40px 80px -40px rgba(20,24,30,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="light"] .plate img{object-position:84% 70%}
:root[data-theme="light"] .plate::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,0) 60%,rgba(0,0,0,.25));box-shadow:inset 0 0 0 10px rgba(243,238,227,.06)}
:root[data-theme="light"] .window-glow{left:78%;top:86%}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .opening{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
  :root:not([data-theme="dark"]) .plate{position:relative;inset:auto;z-index:0;order:2;aspect-ratio:4/5;max-height:min(70svh,640px);width:100%;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(58,40,22,.2),0 40px 80px -40px rgba(20,24,30,.55)}
  :root:not([data-theme="dark"]) .plate img{object-position:84% 70%}
  :root:not([data-theme="dark"]) .plate::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,0) 60%,rgba(0,0,0,.25))}
  :root:not([data-theme="dark"]) .window-glow{left:78%;top:86%}
}

/* ---------- one connection (quick demonstration) ---------- */
.connection{max-width:1240px;margin:0 auto;padding:clamp(4.5rem,9vw,7.5rem) clamp(1rem,6vw,5.5rem) clamp(3rem,6vw,5rem)}
.connection h2{max-width:34rem}
.triad{position:relative;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:2.4rem;margin:3rem 0 2.4rem;--cover:132px}
.t-book{margin:0;display:flex;flex-direction:column}
.t-book img{width:var(--cover);aspect-ratio:2/3;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:var(--shadow-obj);transition:transform var(--t3) var(--ease)}
.t-book figcaption{position:relative;padding-top:2.6rem}
.t-book figcaption::before{content:"";position:absolute;top:1.05rem;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--bg);transform:scale(.35);transition:transform .6s var(--ease)}
.t-book q{display:block;quotes:none;font:italic 400 clamp(1.2rem,1.7vw,1.45rem)/1.3 var(--serif);color:var(--ink)}
.t-book span{display:block;margin-top:.45rem;font-size:.8rem;color:var(--muted)}
.t-thread{position:absolute;left:4px;right:12%;top:calc(var(--cover) * 1.5 + 1.05rem + 4px);height:1.3px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease-draw) .15s}
.triad.on .t-thread{transform:scaleX(1)}
.triad.on .t-book figcaption::before{transform:scale(1)}
.triad .t-book:nth-child(2) figcaption::before{transition-delay:.45s}
.triad .t-book:nth-child(3) figcaption::before{transition-delay:.9s}
.js .triad:not(.on) .t-book q{color:var(--ink-2)}
.t-book q{transition:color .7s var(--ease)}
.triad .t-book:nth-child(2) q{transition-delay:.45s}
.triad .t-book:nth-child(3) q{transition-delay:.9s}
.connection-line{font:400 clamp(1.4rem,2.3vw,1.9rem)/1.3 var(--serif);max-width:40rem;margin:0 0 .9rem}
.connection-limit{max-width:38rem;color:var(--ink-2);margin:0 0 1.6rem}
.connection-next{margin:0;font-size:1rem}
.connection-next .or{color:var(--muted);margin:0 .5rem}

/* ---------- movement rail ---------- */
.movements{position:sticky;top:3.55rem;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.movements.done{opacity:0;transform:translateY(-6px);pointer-events:none}
.movements ol{list-style:none;display:flex;justify-content:center;gap:clamp(.9rem,2.6vw,2.4rem);margin:0;padding:.65rem 1rem;overflow-x:auto;scrollbar-width:none}
.movements a{white-space:nowrap;text-decoration:none;font-size:.82rem;color:var(--muted);transition:color var(--t1) var(--ease)}
.movements i{font:italic 400 1.02rem var(--serif);margin-right:.3rem}
.movements a.on{color:var(--ink)}
.movements a.on i{color:var(--copper)}

/* ---------- movements ---------- */
.movement{position:relative;padding:clamp(4.5rem,9vw,7.5rem) clamp(1rem,6vw,5.5rem) 1.5rem;max-width:1240px;margin:0 auto}
.movement,.ordinary,.what{container-type:inline-size}
.mv-head{max-width:42rem;margin:0 0 3rem}
.numeral{margin:0 0 .3rem;font:italic 400 1.35rem var(--serif);color:var(--copper)}
.mv-sub{font:italic 400 clamp(1.15rem,1.6vw,1.32rem)/1.45 var(--serif);color:var(--ink-2);margin:0}

.reading{display:grid;grid-template-columns:minmax(140px,196px) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.book{margin:0;position:sticky;top:8.2rem}
.book img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:var(--shadow-obj)}
.book figcaption{margin-top:.9rem;font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.book figcaption b{display:block;font-weight:600;color:var(--ink)}
.book figcaption span{display:block;color:var(--muted)}
.passages{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,14rem);column-gap:3rem}
.passages>*{grid-column:1}
.passages>.gloss{grid-column:2;align-self:start;margin-top:.5rem}

blockquote{margin:0}
.verse,.prose{font-family:var(--serif);color:var(--ink);quotes:none;hanging-punctuation:first;font-feature-settings:"kern","liga"}
.verse{font-size:clamp(1.25rem,1.85vw,1.5rem);line-height:1.52;margin:0 0 2.6rem}
.verse p,.prose p{margin:0 0 .85rem}
.verse.small{font-size:1.2rem;margin:.6rem 0 .9rem}
.prose{font-size:clamp(1.18rem,1.6vw,1.34rem);line-height:1.56}
.prose.large{font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.28;margin-bottom:2rem}
.gap{color:var(--muted);letter-spacing:.3em;padding-left:1.1rem}
.who{font:italic 400 1rem/1 var(--serif)!important;color:var(--muted);margin:1.3rem 0 .6rem!important}
.gloss{font-size:.86rem;line-height:1.6;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:.7rem}
.interp{max-width:var(--measure);color:var(--ink-2);font-size:1.06rem;margin:0 0 1.2rem}

mark{background:none;color:inherit;background-image:linear-gradient(transparent 60%,transparent 60%);transition:color var(--t3) var(--ease);padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.lit{background-image:linear-gradient(transparent 60%,var(--mark) 60%);color:var(--mark-ink)}
:root:not(.js) mark{background-image:linear-gradient(transparent 60%,var(--mark) 60%)}

.first-answer{margin-top:.6rem;padding-top:1.5rem;border-top:1px solid var(--rule);max-width:var(--measure)}
.answer{font:400 1.7rem/1.25 var(--serif);margin:0 0 .4rem}
.aside-copy{color:var(--ink-2);margin:.2rem 0 0}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4.5vw,4.5rem)}
.src-title{font-size:.84rem;color:var(--ink-2);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
.src-title i{color:var(--muted)}

.echo{margin:4.5rem 0 0;padding:0}
.echo ol{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;position:relative}
.echo ol::before{content:"";position:absolute;left:4px;right:10%;top:calc(.62rem + 3.8px);height:1.3px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));transform-origin:left;transform:scaleX(0);transition:transform 1.5s var(--ease-draw) .15s}
.echo li{position:relative;padding-top:2.2rem}
.js .echo:not(.on) q{color:var(--ink-2)}
.echo q{transition:color .7s var(--ease)}
.echo li::before{content:"";position:absolute;top:.62rem;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--bg);transform:scale(.35);transition:transform .6s var(--ease)}
.echo q{display:block;font:italic 400 clamp(1.2rem,1.7vw,1.45rem)/1.3 var(--serif);quotes:none}
.echo span{display:block;margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.echo.on ol::before{transform:scaleX(1)}
.echo.on li::before{transform:scale(1)}
.echo.on li:nth-child(2) q,.echo.on li:nth-child(2)::before{transition-delay:.5s}
.echo.on li:nth-child(3) q,.echo.on li:nth-child(3)::before{transition-delay:1s}

.turn{max-width:44rem;margin:4.5rem auto 0}
.turn-line{font:400 clamp(2rem,4.2vw,3.3rem)/1.1 var(--serif);margin:0 0 1.3rem;letter-spacing:-.01em}
.turn-line em{color:var(--lamp)}
.turn-body{font-size:1.1rem;color:var(--ink-2);max-width:40rem}
.turn-limit{margin:1.2rem 0 0;padding-left:1rem;border-left:2px solid var(--copper);color:var(--ink-2)}
.why{margin-top:1.6rem;border-top:1px solid var(--rule);padding-top:1rem;color:var(--ink-2);font-size:.95rem}
.why summary{cursor:pointer;color:var(--accent-ink);font:italic 400 1.05rem var(--serif)}
.why p{margin:.7rem 0}

/* your reading — rows, not boxes */
.readings{border:0;margin:0;padding:0;max-width:50rem;border-top:1px solid var(--rule)}
.reading-opt{position:relative;display:grid;grid-template-columns:1.6rem 1fr auto;gap:1rem;align-items:baseline;padding:1rem .4rem 1rem .2rem;border-bottom:1px solid var(--rule);cursor:pointer;transition:background-color var(--t2) var(--ease)}
.reading-opt::before{content:"";width:1rem;height:1rem;border-radius:50%;border:1.5px solid var(--rule-2);align-self:center;transition:border-color var(--t1) var(--ease),box-shadow var(--t2) var(--ease)}
.reading-opt:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.reading-opt input{position:absolute;opacity:0;pointer-events:none}
.opt-line{font:400 clamp(1.2rem,1.9vw,1.42rem)/1.32 var(--serif)}
.opt-tag{font:italic 400 .95rem var(--serif);color:var(--muted)}
.reading-opt:has(input:checked)::before{border-color:var(--copper);box-shadow:inset 0 0 0 3.5px var(--bg),inset 0 0 0 10px var(--copper)}
.reading-opt:has(input:checked) .opt-tag{color:var(--copper)}
.reading-opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.reading-opt.earlier .opt-line{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.reading-opt.earlier .opt-tag::after{content:" · earlier"}
.own-field{padding:.8rem 0 0 2.6rem}
.own-field textarea{width:100%;font:400 1.3rem/1.4 var(--serif);color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:10px;padding:.8rem 1rem;resize:vertical}
.weigh{margin-top:2.4rem;display:grid;grid-template-columns:1fr 1px 1fr;gap:0 2.2rem;max-width:62rem;min-height:7rem}
.weigh::before{content:"";grid-column:2;grid-row:1;background:var(--rule)}
.weigh-empty{grid-column:1/-1;color:var(--muted);margin:0;font:italic 400 1.05rem var(--serif)}
.weigh .col{grid-row:1}
.weigh .col.for{grid-column:1}
.weigh .col.against{grid-column:3}
.weigh .col.chips-col{grid-column:1/-1}
.weigh .against .label{color:var(--copper)}
.weigh q{display:block;font:400 1.14rem/1.45 var(--serif);quotes:none;margin:0 0 .3rem}
.weigh cite{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-bottom:1rem}
.weigh .note{font-size:.95rem;color:var(--ink-2);margin:0}
.weigh .col{animation:rise var(--t2) var(--ease) both}
.weigh .col.against{animation-delay:.08s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font:inherit;font-size:.86rem;color:var(--ink-2);background:none;border:1px solid var(--rule-2);border-radius:999px;padding:.42rem .85rem;cursor:pointer;transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.chip[data-s="for"]{border-color:var(--accent);color:var(--accent-ink)}
.chip[data-s="against"]{border-color:var(--copper);color:var(--copper)}
.revision{margin-top:1.6rem;max-width:50rem;color:var(--ink-2);font:italic 400 1.08rem/1.5 var(--serif);padding-left:1rem;border-left:2px solid var(--accent);animation:rise var(--t2) var(--ease) both}
.revision s{color:var(--muted)}
.revision b{font-style:normal;font-weight:400;color:var(--ink)}

/* keep card — an object, so it stays a card */
.keepcard{position:relative;max-width:48rem;padding:clamp(1.6rem,4vw,2.8rem);border-radius:14px;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-card);transition:transform .7s var(--ease),opacity .7s var(--ease)}
.kc-q{font:italic 400 1.18rem/1.35 var(--serif);color:var(--ink-2);margin:0 0 1.5rem}
.kc-reading{font:400 clamp(1.6rem,2.8vw,2.2rem)/1.2 var(--serif);margin:0 0 1.6rem}
.kc-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;padding:1.2rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kc-quotes{font:400 1.04rem/1.45 var(--serif);color:var(--ink-2)}
.kc-quotes p{margin:0 0 .6rem}
.kc-quotes small{display:block;font:400 .76rem var(--sans);color:var(--muted)}
.kc-method{padding:1.3rem 0;border-bottom:1px solid var(--rule)}
.method-name{font:600 1.35rem/1.2 var(--serif);color:var(--lamp);margin:0 0 .3rem}
.kc-method p:last-child{margin:0;color:var(--ink-2)}
.kc-next{display:flex;gap:1.3rem;padding-top:1.3rem}
.kc-next img{width:70px;height:auto;align-self:flex-start;border-radius:2px 3px 3px 2px;box-shadow:var(--shadow-obj)}
.kc-next p{margin:0;color:var(--ink-2)}
.keep-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.6rem}
.keep-note{flex-basis:100%;font-size:.85rem;color:var(--muted);margin:.2rem 0 0}
.kept-shelf{margin-top:2rem;max-width:48rem}
.kept-shelf ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.kept-shelf li{display:flex;justify-content:space-between;gap:1rem;font:400 1.08rem var(--serif);padding:.75rem .2rem;border-bottom:1px solid var(--rule)}
.kept-shelf li small{font:400 .78rem var(--sans);color:var(--muted);white-space:nowrap}
.flying{position:fixed;z-index:40;pointer-events:none;font:400 1.3rem/1.2 var(--serif);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:.7rem 1rem;box-shadow:var(--shadow-obj)}

/* ---------- ordinary shelf: a composed, unfolding sequence ---------- */
.ordinary{max-width:1240px;margin:0 auto;padding:clamp(5rem,10vw,8rem) clamp(1rem,6vw,5.5rem) 3rem;border-top:1px solid var(--rule)}
.ord-head{max-width:44rem;margin-bottom:2.2rem}
.illus{font-size:.86rem;color:var(--ink-2);padding-left:.9rem;border-left:1px solid var(--copper);margin:0}
.ord-ask{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;max-width:56rem;padding:0 0 2rem;border-bottom:1px solid var(--rule)}
.ord-q{margin:0;flex:1 1 22rem;font:italic 400 clamp(1.35rem,2.2vw,1.7rem)/1.3 var(--serif)}
.who-you{display:block;font:400 .8rem var(--sans);font-style:normal;color:var(--lamp);margin-bottom:.35rem}
.ord-result{position:relative;max-width:56rem;padding:2.2rem 0 0 2.2rem;margin-left:.3rem}
.ord-result::before{content:"";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1.3px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 15%,transparent));transform-origin:top;transform:scaleY(1);transition:transform 1.1s var(--ease-draw)}
.js .ord-result.closed::before{transform:scaleY(0)}
.js .ord-result.closed{display:none}
.step{position:relative;margin:0 0 2.2rem}
.step::before{content:"";position:absolute;left:calc(-2.2rem - 4px);top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--accent)}
.ord-lead::before{background:var(--accent)}
.js .ord-result.unfolding .step{animation:rise .6s var(--ease) both}
.js .ord-result.unfolding .step:nth-child(2){animation-delay:.12s}
.js .ord-result.unfolding .step:nth-child(3){animation-delay:.24s}
.js .ord-result.unfolding .step:nth-child(4){animation-delay:.32s}
.js .ord-result.unfolding .step:nth-child(5){animation-delay:.4s}
.suggest-k{margin:0 0 .6rem;font:italic 400 1.2rem/1.3 var(--serif);color:var(--accent-ink)}
.suggest-mark{display:inline-block;width:.5em;height:.5em;border:1.5px solid currentColor;transform:translateY(-.1em) rotate(45deg);margin-right:.45rem}
.sep{display:inline-block;width:.38em;height:.38em;margin:0 .55em .08em .35em;border-top:1.2px solid currentColor;border-right:1.2px solid currentColor;transform:rotate(45deg);opacity:.7}
.suggest-src{display:block;font:400 .8rem var(--sans);font-style:normal;color:var(--muted);margin-top:.2rem}
.lead-line{margin:0;font:400 clamp(1.45rem,2.4vw,1.95rem)/1.3 var(--serif);max-width:42rem}
.ord-evidence{display:grid;grid-template-columns:68px minmax(0,1fr);gap:1.4rem;align-items:start}
.ord-book{margin:0}
.ord-book img{width:68px;aspect-ratio:2/3;object-fit:cover;border-radius:2px 3px 3px 2px;box-shadow:var(--shadow-obj)}
.ord-quotes blockquote{margin:0 0 1.2rem}
.ord-quotes blockquote p{margin:0 0 .3rem}
.ord-quotes footer{font:400 .8rem var(--sans);color:var(--muted)}
.ord-limit{margin:.2rem 0 0;font-size:.92rem;color:var(--ink-2);max-width:38rem}
.limit-k{font:italic 400 1rem var(--serif);color:var(--copper)}
.lead-meta{margin:.4rem 0 0;font-size:.86rem;color:var(--muted)}
.next-list{margin:0 0 1.3rem;padding:0;list-style:none}
.next-list li{padding:.5rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.next-list li:first-child{border-top:1px solid var(--rule)}
.planned{font-size:.74rem;color:var(--muted);border:1px solid var(--rule-2);border-radius:4px;padding:.1rem .4rem;margin-left:.3rem;white-space:nowrap}
.ord-end{margin:1rem 0 0;font:italic 400 1.3rem/1.35 var(--serif);color:var(--lamp);animation:rise var(--t2) var(--ease) both}
.drawer{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.2rem 0}
.drawer summary{cursor:pointer;display:grid;grid-template-columns:1rem auto 1fr;gap:.4rem 1.2rem;align-items:center;padding:1rem 0;list-style:none}
.drawer-text{display:flex;flex-wrap:wrap;gap:.1rem 1rem;align-items:baseline}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::before{content:"+";font:400 1.1rem var(--sans);color:var(--accent-ink);width:1rem;transition:transform var(--t2) var(--ease)}
.drawer[open] summary::before{transform:rotate(45deg)}
.drawer-k{font:italic 400 1.1rem var(--serif);color:var(--ink)}
.drawer-sum{font-size:.84rem;color:var(--muted)}
.inventory{margin:.2rem 0 1rem 2rem}
.inventory div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.65rem 0;border-top:1px solid var(--rule)}
.inventory dt{font:italic 400 1rem var(--serif);color:var(--accent-ink)}
.inventory dd{margin:0;font-size:.92rem;color:var(--ink-2)}
.drawer[open] .inventory{animation:rise var(--t2) var(--ease) both}

/* the shelf is the evidence: readability shown as light on book objects (text equivalent in the drawer) */
.shelf-row{display:flex;align-items:flex-end;gap:5px;padding-bottom:1.1rem;position:relative}
.obj{position:relative;display:block;width:30px;height:45px;border-radius:1px 2px 2px 1px}
.obj img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.obj.lit img{box-shadow:0 0 0 1px var(--accent),0 6px 14px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
.obj.half img{opacity:.55;filter:saturate(.5)}
.obj.lit{margin-right:1.1rem}.obj.half{margin-right:1.3rem}
.obj.notes{margin-left:.6rem}
.obj.outline{border:1px dashed var(--rule-2);width:22px}
.obj.notes{width:22px;border:1px dotted var(--rule-2);opacity:.6}
.obj i{position:absolute;top:calc(100% + .2rem);left:0;white-space:nowrap;font:italic 400 .72rem var(--serif);color:var(--muted)}
.obj i.span4{left:auto;right:0}
.obj.notes i{left:0}
.fn-ref{font:400 .8rem var(--sans);margin-left:.1rem}
.fn-ref a{text-decoration:none;color:var(--accent-ink)}
.fn{margin:.5rem 0 0;font-size:.8rem;color:var(--muted);max-width:36rem}

/* Alternative ordinary-shelf composition: an open editorial spread (for comparison) */
[data-shelf="spread"] .ord-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 3.5rem;max-width:none;padding-left:0;margin-left:0}
[data-shelf="spread"] .ord-result::before,[data-shelf="spread"] .step::before{display:none}
[data-shelf="spread"] .ord-lead{grid-column:1}
[data-shelf="spread"] .ord-evidence{grid-column:2;grid-row:1/span 2}
[data-shelf="spread"] .ord-further{grid-column:1}
[data-shelf="spread"] .drawer,[data-shelf="spread"] .ord-next{grid-column:1/-1}

/* ---------- what the app does ---------- */
.what{max-width:1240px;margin:0 auto;padding:clamp(5rem,10vw,8rem) clamp(1rem,6vw,5.5rem) 3rem;border-top:1px solid var(--rule)}
.what-head{max-width:46rem;margin-bottom:2.8rem}
.shelf-strip{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:22px 6px;align-items:end;padding:1.4rem 0 .6rem;background:repeating-linear-gradient(180deg,transparent 0,transparent calc(50% - 2px),var(--rule-2) calc(50% - 2px),var(--rule-2) 50%)}
.shelf-strip div{min-width:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.shelf-strip img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:1px 2px 2px 1px;box-shadow:0 6px 10px -6px rgba(0,0,0,.6)}
.shelf-strip div.dim{opacity:.32}
.shelf-strip div.dim img{filter:saturate(.35)}
.shelf-strip div.lit{transform:translateY(-9px)}
.copy-record{display:grid;grid-template-columns:84px 1fr;gap:1.5rem;margin:3.2rem 0;max-width:44rem;padding:1.5rem 1.6rem;border-radius:14px;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-card)}
.copy-record>img{width:84px;border-radius:2px 3px 3px 2px;box-shadow:var(--shadow-obj)}
.cr-title{font:400 1.45rem/1.2 var(--serif);margin:0 0 .3rem}
.cr-title span{font-style:italic;color:var(--ink-2)}
.cr-place{font-size:.87rem;color:var(--ink-2);margin:0 0 1rem}
.cr-memory{font:italic 400 1.14rem/1.45 var(--serif);margin:0}
.cr-memory span{display:block;font:400 .8rem var(--sans);font-style:normal;color:var(--accent-ink);margin-bottom:.35rem}
.capabilities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.6rem 2.6rem;max-width:66rem}
.capabilities li{color:var(--ink-2);font-size:.97rem;border-top:1px solid var(--rule);padding-top:.9rem}
.capabilities b{display:block;font:400 1.28rem/1.2 var(--serif);color:var(--ink);margin-bottom:.35rem}
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:0 2.6rem;margin-top:3rem;border-top:1px solid var(--rule)}
.route{display:block;padding:1.1rem 0;border-bottom:1px solid var(--rule);text-decoration:none}
.route span{display:block;font:400 1.2rem/1.3 var(--serif)}
.route span::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;border-top:1.5px solid var(--accent-ink);border-right:1.5px solid var(--accent-ink);transform:translateY(-.08em) rotate(45deg);transition:transform var(--t1) var(--ease)}
.route:hover span::after{transform:translate(.2em,-.08em) rotate(45deg)}
.route small{color:var(--muted);font-size:.82rem}

.status{max-width:1240px;margin:0 auto;padding:4rem clamp(1rem,6vw,5.5rem) 5rem;border-top:1px solid var(--rule)}
.status h2{font-size:1.8rem}
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.5rem;margin:1rem 0 2rem;color:var(--ink-2)}
.status-grid b{color:var(--ink)}
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding:2rem clamp(1rem,6vw,5.5rem) 3rem;border-top:1px solid var(--rule);font-size:.85rem;color:var(--muted)}
.site-foot p{margin:.4rem 0 0}
.foot-links{display:flex;gap:1.3rem}
.foot-links a{text-decoration:none}
.made-by .anavi{font:600 .92rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-left:.3rem}

/* ---------- reveal (transform/opacity only; content is never withheld for long) ---------- */
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Variant B: discovery-first opening (comparison) ---------- */
[data-variant="B"] .connection.as-opening{position:relative;max-width:none;padding:clamp(3rem,8vh,5.5rem) clamp(1rem,6vw,5.5rem) 3.5rem;isolation:isolate;overflow:hidden}
[data-variant="B"] .connection.as-opening>*{max-width:1100px;margin-left:auto;margin-right:auto}
[data-variant="B"] .connection.as-opening .b-plate{position:absolute;inset:0;z-index:-1;margin:0;max-width:none}
[data-variant="B"] .connection.as-opening .b-plate img{width:100%;height:100%;object-fit:cover;object-position:60% 75%;opacity:.45}
[data-variant="B"] .connection.as-opening .b-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 30%,color-mix(in srgb,var(--bg) 85%,transparent) 70%,var(--bg) 100%)}
[data-variant="B"] .connection.as-opening h2{font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.04;max-width:44rem}
[data-variant="B"] .b-question{font:italic 400 clamp(1.3rem,2vw,1.6rem)/1.35 var(--serif);color:var(--ink-2);margin:0 0 1rem}
[data-variant="B"] .opening.as-second{min-height:0;padding-top:4rem;padding-bottom:4rem}
[data-variant="B"] .opening.as-second .plate{display:none}
[data-variant="B"] .opening.as-second h1{font-size:clamp(2rem,3.6vw,3rem)}

/* ---------- QUIET: same substance, no art, no motion — independent of Light/Dark ---------- */
.quiet .shelf-row img,.quiet .plate,.quiet .b-plate,.quiet .shelf-strip,.quiet .copy-record>img,.quiet .kc-next img,.quiet .book img,.quiet .t-book img,.quiet .ord-book{display:none!important}
.quiet *,.quiet *::before,.quiet *::after{animation:none!important;transition:none!important}
.quiet .reveal{opacity:1!important;transform:none!important}
.quiet .opening{display:block!important;min-height:0;padding-top:4rem}
.quiet .reading{grid-template-columns:1fr}
.quiet .book{position:static}
.quiet .passages{grid-template-columns:1fr}
.quiet .passages>.gloss{grid-column:1;margin:-1.4rem 0 2.4rem}
.quiet .pair,.quiet .triad,.quiet .echo ol{grid-template-columns:1fr}
.quiet .t-thread,.quiet .echo ol::before{display:none}

.quiet .t-book figcaption::before,.quiet .echo li::before{transform:scale(1)}
.quiet .t-book figcaption{padding-top:0}
.quiet .t-book figcaption::before{display:none}
.quiet mark{background-image:none;text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:4px}
.quiet .movement,.quiet .ordinary,.quiet .what,.quiet .connection{max-width:46rem}
.quiet .ord-evidence{grid-template-columns:1fr}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .echo li::before,.t-book figcaption::before{transform:scale(1)}
  .echo ol::before,.t-thread{transform:none!important}
}

/* ---------- more contrast (user preference) ---------- */
@media (prefers-contrast:more){
  :root{--ink-2:var(--ink);--muted:color-mix(in srgb,var(--ink) 82%,var(--bg));--rule:color-mix(in srgb,var(--ink) 35%,transparent);--rule-2:color-mix(in srgb,var(--ink) 55%,transparent)}
  .plate::after{background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.45))}
  mark.lit{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
}
/* ---------- forced colors / high contrast ---------- */
@media (forced-colors:active){
  mark,mark.lit{background:Mark;color:MarkText;forced-color-adjust:none}
  .btn,.btn-quiet,.display summary,.chip{border:1px solid ButtonText}
  .echo ol::before,.t-thread,.ord-result::before{background:CanvasText}
  .reading-opt::before{border-color:ButtonText}
  .reading-opt:has(input:checked)::before{background:Highlight;box-shadow:none}
  .plate::after,.b-plate::after{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .site-head nav{display:none}
  .pair{grid-template-columns:1fr}
  .triad{grid-template-columns:1fr;gap:1.6rem;--cover:74px}
  .t-book{display:grid;grid-template-columns:var(--cover) 1fr;gap:1.4rem;align-items:start}
  .t-book figcaption{padding-top:.2rem;padding-left:1.6rem}
  .t-book figcaption::before{top:.55rem;left:0}
  .t-thread{left:calc(var(--cover) + 1.4rem + 4px);right:auto;top:1rem;bottom:1rem;width:1.3px;height:auto;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));transform-origin:top;transform:scaleY(0)}
  .triad.on .t-thread{transform:scaleY(1)}
  .echo ol{grid-template-columns:1fr;gap:1.6rem;padding-left:1.6rem}
  .echo li{padding-top:0}
  .echo li::before{top:.55rem;left:-1.6rem}
  .echo ol::before{left:4px;right:auto;top:.9rem;bottom:2.4rem;width:1.3px;height:auto;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));transform-origin:top;transform:scaleY(0)}
  .echo.on ol::before{transform:scaleY(1)}
  [data-shelf="spread"] .ord-result{grid-template-columns:1fr}
  [data-shelf="spread"] .ord-evidence{grid-column:1;grid-row:auto}
}
@media (max-width:720px){
  body{font-size:1rem}
  .review-ribbon{font-size:10.5px;padding:.4rem 1rem}
  .display-label{display:none}
  .display summary{padding:.5rem}
  .opening{min-height:min(calc(100svh - 6rem),760px);justify-content:flex-start;padding-top:3.5rem}
  .plate img{object-position:88% 70%}
  .window-glow{left:85%;top:89%;width:120px;height:80px}
  .plate::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.35) 75%,var(--bg) 100%)}
  :root[data-theme="light"] .opening{grid-template-columns:1fr;gap:1.8rem}
  :root[data-theme="light"] .plate{order:-1;aspect-ratio:16/10;max-height:none}
  .movements{top:3.25rem}
  .movements ol{justify-content:flex-start}
  .reading{grid-template-columns:1fr;gap:1.4rem}
  .book{position:static;display:flex;gap:1rem;align-items:flex-end}
  .book img{width:86px}
  .book figcaption{margin:0}
  .passages{grid-template-columns:1fr}
  .passages>.gloss{grid-column:1;margin:-1.4rem 0 2.4rem}
  .weigh{grid-template-columns:1fr;gap:1.6rem}
  .weigh::before{display:none}
  .weigh .col.for,.weigh .col.against{grid-column:1;grid-row:auto}
  .weigh .col.against{padding-top:1.4rem;border-top:1px solid var(--rule)}
  .kc-cols{grid-template-columns:1fr}
  .reading-opt{grid-template-columns:1.4rem 1fr;gap:.8rem}
  .opt-tag{grid-column:2}
  .own-field{padding-left:0}
  .shelf-strip{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px 4px;background:none}
  .copy-record{grid-template-columns:1fr}
  .ord-result{padding-left:1.5rem}
  .step::before{left:calc(-1.5rem - 4px)}
  .ord-evidence{grid-template-columns:1fr}
  .ord-book img{width:56px}
  .inventory{margin-left:0}
  .drawer summary{grid-template-columns:1rem 1fr}
  .drawer-text{grid-column:2}
  .inventory div{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-color-scheme:light) and (max-width:720px){
  :root:not([data-theme="dark"]) .opening{grid-template-columns:1fr;gap:1.8rem}
  :root:not([data-theme="dark"]) .plate{order:-1;aspect-ratio:16/10;max-height:none}
}
/* stack reading columns when text is enlarged or space is short (rem-based so it follows text size) */
@container (max-width:56rem){
  .reading{grid-template-columns:1fr}
  .book{position:static;display:flex;gap:1rem;align-items:flex-end}
  .book img{width:86px}
  .book figcaption{margin:0}
  .passages{grid-template-columns:1fr}
  .passages>.gloss{grid-column:1;margin:-1.4rem 0 2.4rem}
  .pair{grid-template-columns:1fr}
}
/* very narrow screens / 400% zoom: smaller book objects that may wrap (no horizontal scroll) */
@media (max-width:360px){
  .shelf-row{flex-wrap:wrap;row-gap:1.3rem}
  .obj{width:22px;height:33px}
  .obj.outline,.obj.notes{width:15px}
  .obj.lit{margin-right:1.6rem}.obj.half{margin-right:1.8rem}
  .drawer-text,.drawer-sum{min-width:0;overflow-wrap:anywhere}
}