/* ============================================================
   All Who Rested Here  ·  book.css
   The novella's pages, listen.html and room.html. Everything comes
   from the site.css tokens. No new colours, no cards, hairlines only.
   ============================================================ */

/* the first page of the book, set as a page, with a note beside it */
.excerpt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(22px,4.4vw,64px);align-items:start}
@media(max-width:820px){.excerpt{grid-template-columns:1fr}}
.excerpt .page p{margin:0 0 .5em;font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);line-height:1.46;
  letter-spacing:-.006em;max-width:30ch;text-wrap:pretty}
.excerpt .page p.long{max-width:38ch}
.excerpt .page p.last{margin-top:1.1em}
.excerpt .side{border-top:1px solid var(--rule);padding-top:14px}
.excerpt .side p{margin:0 0 14px;color:var(--dim);font-size:15px;line-height:1.74;max-width:36ch}
.excerpt .side .lab{color:var(--gold);margin:0 0 10px}

/* the release schedule */
.sched{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.sched li{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr) auto;gap:6px clamp(14px,3vw,38px);
  align-items:baseline;padding-block:clamp(14px,2.1vw,21px);border-bottom:1px solid var(--rule)}
.sched .wk{color:var(--gold);white-space:nowrap}
.sched h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.7vw,31px);line-height:1.08;margin:0;letter-spacing:-.015em}
.sched .meta{display:block;margin-top:7px;color:var(--dim);font-size:13.5px;line-height:1.6}
.sched li.bonus h3{color:var(--dim)}
.pill{display:inline-block;white-space:nowrap;padding:6px 10px;border:1px solid var(--rule);color:var(--dim)}
.pill.out{border-color:var(--hot);color:var(--hot)}
@media(max-width:640px){.sched li{grid-template-columns:1fr;gap:4px}.sched .pill{justify-self:start;margin-top:6px}}

/* the three ways in, laid out like the two rooms on founders.html */
.room .price{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,52px);line-height:1;margin:0 0 12px;
  letter-spacing:-.02em;font-variant-numeric:lining-nums;color:var(--ink)}
.room .gets{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--rule)}
.room .gets li{padding-block:9px;border-bottom:1px solid var(--rule);color:var(--dim);font-size:14.5px;line-height:1.6}
.room .gets li b{color:var(--ink);font-weight:600}
.room .cta{font-size:10.5px;color:#FFF6F0;letter-spacing:.2em}
/* site.css colours every link in a .room amber, which turned the $5 button into
   amber on amber. The buttons keep their own colours here. */
.room .cta.q{color:var(--ink)}
.room .cta:hover{border-bottom-color:var(--hot)}
.room{display:flex;flex-direction:column}
.room .gets{flex:1 0 auto}
.room .cta{align-self:flex-start}
/* before the Gumroad links exist the buttons read as a quiet outline, never a blank block */
.cta[aria-disabled="true"]{background:transparent;border-color:var(--rule);color:var(--dim);pointer-events:none}
.fine{margin:clamp(18px,2.4vw,26px) 0 0;color:var(--dim);font-size:13.5px;line-height:1.7;max-width:62ch}

/* the listening room */
.gate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;max-width:640px}
@media(max-width:560px){.gate{grid-template-columns:1fr}}
.gate .cta{padding-block:13px}
.msg{margin:12px 0 0;color:var(--hot);font-size:14px;line-height:1.6;max-width:60ch}
.msg.ok{color:var(--dim)}
.welcome{display:flex;justify-content:space-between;align-items:baseline;gap:10px 24px;flex-wrap:wrap;
  border-top:1px solid var(--ink);padding-top:14px}
.welcome p{margin:0;color:var(--dim);font-size:15px;line-height:1.7;max-width:56ch}
.welcome p b{color:var(--ink);font-weight:600}
.chs{display:grid;gap:0;border-top:1px solid var(--rule)}
.ch{border-bottom:1px solid var(--rule)}
.ch summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr) auto;
  gap:6px clamp(14px,3vw,38px);align-items:baseline;padding-block:clamp(14px,2.1vw,21px)}
.ch summary::-webkit-details-marker{display:none}
.ch summary h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.7vw,31px);line-height:1.08;margin:0;letter-spacing:-.015em}
.ch summary .wk{color:var(--gold);white-space:nowrap}
.ch summary .meta{display:block;margin-top:7px;color:var(--dim);font-size:13.5px}
.ch[open] summary h3{color:var(--hot)}
.ch.locked summary{cursor:default}
.ch.locked summary h3{color:var(--dim)}
@media(max-width:640px){.ch summary{grid-template-columns:1fr;gap:4px}.ch summary .pill{justify-self:start;margin-top:6px}}
.qs{display:grid;gap:18px;padding-bottom:clamp(20px,3vw,32px);max-width:700px}
.qs .field > span{color:var(--ink)}
.qs .field small{display:block;color:var(--dim);font-size:13px;letter-spacing:0;text-transform:none;line-height:1.5;margin-top:-2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--dim)}
.check input{margin-top:3px;accent-color:var(--hot)}
.saved{color:var(--dim)}
.credit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;max-width:640px}
@media(max-width:560px){.credit{grid-template-columns:1fr}}
.admin pre{background:var(--surf);border:1px solid var(--rule);padding:14px;overflow-x:auto;font-size:12.5px;line-height:1.5;max-height:420px}

/* the wait list, before the doors open */
.notify{margin-top:clamp(22px,3vw,34px);padding-top:clamp(16px,2.2vw,22px);border-top:1px solid var(--rule)}
/* the audio sample, beside the first page */
.sample{margin-top:18px}
.sample audio{width:100%;max-width:360px}
/* questions */
.faq{border-top:1px solid var(--rule)}
.q{border-bottom:1px solid var(--rule)}
.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:clamp(13px,1.9vw,18px)}
.q summary::-webkit-details-marker{display:none}
.q h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.3vw,26px);line-height:1.15;margin:0;letter-spacing:-.012em}
.q .plus{color:var(--dim);font-size:20px;line-height:1;transition:transform .2s}
.q[open] .plus{transform:rotate(45deg);color:var(--hot)}
.q[open] h3{color:var(--hot)}
.q p{margin:0 0 clamp(14px,2vw,20px);color:var(--dim);font-size:15.5px;line-height:1.74;max-width:62ch}
.about .sig{color:var(--gold);margin-top:6px}

/* the kicker above the title carries the opening date, and it is longer than
   the site's labels: let it wrap on a phone rather than push the page sideways */
.title .slab{white-space:normal;flex-wrap:wrap}