/* THE TOOLKIT — the reading room, rebuilt (2026-07-18, owner's red pen).
   THE TYPE LAW, OBEYED: every display line in this room is Akkurat Light
   caps — the same H1 register as every other room of the house. The only
   serif this site owns is Canela Light ITALIC, and it appears exactly where
   it always has: the questions, the spoken lines, the standfirsts. Roman
   Canela sets NOTHING, ever. No face appears here that does not already
   appear elsewhere on the site.

   The index is three full spreads — one per essay, each carrying its
   question and the first words of its real answer — so the page stands
   complete on its own material. Depends on main.css (tokens, chrome),
   scene.css (bands, wing circulation) and journal.css (essay prose).
   External JS only (js/read.js) — the CSP trusts no inline scripts. */

/* ============ the opener — a room, titled the house's way ============ */
.rd-open{position:relative;height:72svh;min-height:520px;overflow:hidden;background:#141F19}
.rd-open > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rd-open .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,31,25,.42),rgba(20,31,25,.08) 38%,rgba(20,31,25,.72) 100%)}
.rd-open .cap{position:absolute;top:calc(85px + 2.6vh);right:var(--mx);font-family:var(--mono);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);opacity:.75}
.rd-open .inner{position:absolute;left:var(--mx);right:var(--mx);bottom:clamp(40px,7vh,72px);color:var(--bone)}
.rd-open .kicker{font-size:.6875rem;color:var(--bone);opacity:.78}
/* essay titles: the approved jhero face, set on the plate in bone */
.rd-open h1{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.3;
  font-size:clamp(1.5rem,4vw,2.4rem);margin-top:16px;max-width:30em;color:var(--bone);text-wrap:balance}
/* the index: the house's index-page scale (hub, walk — same register) */
.rd-open.rd-index h1{letter-spacing:.08em;line-height:1.05;font-size:clamp(2.4rem,6vw,4.4rem);max-width:none}
.rd-open .standfirst{margin-top:16px;font-size:clamp(1.05rem,2vw,1.35rem);max-width:32em;opacity:.92;color:var(--bone)}
.rd-open .meta{display:block;margin-top:18px;color:var(--bone);opacity:.8}

/* ============ the brass line rides with the reader ============ */
.rd-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--brass);transform:scaleX(0);
  transform-origin:left;z-index:60;pointer-events:none;box-shadow:0 0 10px rgba(194,160,79,.35)}

/* ============ the spreads — one essay, one full spread ============ */
.jsp{padding:clamp(56px,8vh,100px) 0}
.jsp--bone{background:var(--bone)}
.jsp .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4.5vw,96px);align-items:center}
.jsp-plate{display:block;margin:0;overflow:hidden}
.jsp-plate img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .8s var(--ease)}
a.jsp-plate:hover img,a.jsp-plate:focus-visible img{transform:scale(1.04)}
.jsp--flip .jsp-plate{order:2}
.jsp-mt{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.jsp-q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.35;
  color:var(--green);margin:16px 0 0;text-wrap:balance;max-width:16em}
.jsp-ex{margin:1.5em 0 0;font-size:1.0625rem;line-height:1.9;color:var(--green);max-width:34em}
.jsp-go{display:inline-block;margin-top:1.9em;font-family:var(--sans);font-size:.6875rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green)}

/* ============ circulation — questions on the door cards ============ */
.rd-next .wing-door .ln{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.05rem;line-height:1.5}

/* invite extras (journal pages carry neither home.css nor record.css) */
.invite .sub{margin:1.6em 0 0;font-size:.9375rem;line-height:1.85;max-width:56ch;color:var(--bone);opacity:.85}
.invite .say{text-wrap:balance}

@media(max-width:880px){
  .rd-open{min-height:440px}
  .rd-open .cap{display:none}
  /* no mobile override — the locked opener clamp matches every other page */
  .jsp .wrap{grid-template-columns:1fr;gap:22px}
  .jsp--flip .jsp-plate{order:0}
  .jsp-plate img{aspect-ratio:16/9}
}