/* ══════════════════════════════════════════════════════════════════════════
   psychology.hautelumiere.life — the volume page.

   One landing page per volume, laid beside canon.css, which carries the seven
   registers and the furniture. This sheet adds only what a single volume needs:
   a head, a jacket slot that stays closed until there is a jacket, the prose,
   the one place a reader is asked to read, and the rails that stop a page from
   being a dead end.

   Radius zero. Hairline rules. Gold marks and never fills — no gold button on
   this page or any other. The sheet is its own container, so every measurement
   here is in cqi and the page sets its own scale rather than the window's.
   ══════════════════════════════════════════════════════════════════════════ */

body.volume .sheet{container-type:inline-size;max-width:64em}

/* THE CRUMB — where you are, in the smallest voice on the page. */
.crumb{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin:3.4em 0 0;text-align:center}
.crumb a{color:var(--muted);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 34%,transparent)}
.crumb a:hover{color:var(--gold-d)}

/* THE HEAD. A title long enough to be a sentence has to be allowed to be one,
   so the measure is generous and the weight stays at 300 the whole way up. */
.vol-head{max-width:26em;margin:0 auto;text-align:center;padding:2.2em 0 0}
.vol-head h1{font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,5.6cqi,58px);line-height:1.06;color:var(--ink);
  margin:.42em 0 0;text-wrap:balance}
.vol-head .deck{font-style:italic;font-size:clamp(18px,2.1cqi,22px);color:var(--muted);
  margin:1.2em auto 0;max-width:27em;line-height:1.5}
.stat{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin:2em 0 0}
.stat .sep{color:var(--rule)}
.stat .voiced{color:var(--gold-d)}
.vol-head .hair{height:1px;background:var(--rule);margin:2.6em auto 0;max-width:8em}

/* THE JACKET. Closed until a jacket exists — a volume with no cover shows no
   frame, no placeholder and no apology, and the same markup opens by itself the
   day the file lands at /covers/<slug>.png. Nothing else on this page casts. */
.jacket{margin:3.4em auto 0;max-width:23em;padding:0}
.jacket img{display:block;width:100%;height:auto;
  box-shadow:0 40px 90px -40px rgba(var(--veil),.42);filter:var(--photo-grade)}
.jacket figcaption{font-family:var(--sans);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:1.2em 0 0;text-align:center}

/* THE PROSE. One measure, and it is the same measure as the overview. */
.prose{max-width:34em;margin:3.6em auto 0}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--gold-d)}
.prose a{color:var(--gold-d);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.prose .drop::first-letter{font-family:var(--serif);font-weight:300;font-size:74px;
  line-height:.74;float:left;padding:.06em .1em 0 0;color:var(--gold-d)}

/* THE ASKING. The one block on the page that wants something, and it is set
   like everything else: hairline above and below, no panel, no gold fill.
   A reader who is not going to read the book should be able to pass it. */
.take{max-width:34em;margin:4.6em auto 0;padding:2.4em 0;
  border-block:1px solid var(--rule);text-align:center}
.take .kicker{margin-bottom:1.1em}
.take p.line{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2cqi,23px);
  line-height:1.45;color:var(--ink);margin:0 auto;max-width:22em}
.acts{display:flex;flex-wrap:wrap;gap:1px;justify-content:center;
  background:var(--rule);border:1px solid var(--rule);margin:2.2em 0 0}
.act{flex:1 1 12em;background:var(--paper);color:var(--ink);text-decoration:none;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:1.35em 1.2em;
  transition:color 200ms var(--ease),background 200ms var(--ease)}
.act:hover{color:var(--gold-d);background:var(--paper-2)}
.act .under{display:block;font-family:var(--serif);font-size:13px;font-weight:400;
  letter-spacing:.02em;text-transform:none;font-style:italic;color:var(--muted);
  margin-top:.5em;line-height:1.3}
.fine{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--muted);
  margin:1.8em auto 0;max-width:28em}
.fine a{color:var(--muted);border-bottom:1px solid var(--rule);text-decoration:none}
.fine a:hover{color:var(--gold-d)}

/* THE SHAPE OF IT — what the volume is made of, said in numbers rather than
   adjectives, because a reader deciding whether to start wants the numbers. */
.shape{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  max-width:34em;margin:4.6em auto 0}
.shape .cell{background:var(--paper);padding:1.8em 1.4em;text-align:center}
.shape .n{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1;
  color:var(--gold-d);display:block;font-variant-numeric:tabular-nums}
.shape .l{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);display:block;margin-top:.9em}

/* THE RAIL — four other volumes, chosen by what they are about rather than by
   where they fall in the alphabet. A page with no way onward is a dead end, and
   a dead end is where a reader closes the tab. */
.near{max-width:52em;margin:5.4em auto 0}
.near h2,.pager h2{font-family:var(--sans);font-size:9px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  margin:0 0 1.6em;text-align:center}
.near-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.near-grid a{background:var(--paper);padding:1.7em 1.5em;text-decoration:none;
  color:inherit;display:block;transition:background 200ms var(--ease)}
.near-grid a:hover{background:var(--paper-2)}
.near-grid a:hover .t{color:var(--gold-d)}
.near-grid .t{display:block;font-family:var(--serif);font-size:17px;line-height:1.28;
  color:var(--ink);transition:color 200ms var(--ease)}
.near-grid .m{display:block;font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.8em}

/* THE PAGER. The alphabet is not an argument, but it is a direction. */
.pager{max-width:52em;margin:4.4em auto 0;padding:2.2em 0 0;border-top:1px solid var(--rule)}
.pager-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.pager-row a{background:var(--paper);padding:1.6em 1.5em;text-decoration:none;color:inherit;
  transition:background 200ms var(--ease)}
.pager-row a:hover{background:var(--paper-2)}
.pager-row a:hover .t{color:var(--gold-d)}
.pager-row .d{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);display:block}
.pager-row .t{display:block;font-family:var(--serif);font-size:17px;line-height:1.28;
  color:var(--ink);margin-top:.7em;transition:color 200ms var(--ease)}
.pager-row .next{text-align:right}

/* THE DECLARATION. It is on every book surface in the house and it is on this
   one, at the foot, in the smallest voice — never hidden, never enlarged. */
.method{max-width:34em;margin:5.4em auto 0;padding:2.2em 0 0;border-top:1px solid var(--rule)}
.method p{font-size:15px;line-height:1.62;color:var(--muted);margin:0 0 .9em}
.method a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.method a:hover{color:var(--gold-d)}

@media (max-width:640px){
  .pager-row{grid-template-columns:1fr}
  .pager-row .next{text-align:left}
}

/* ── THE OVERVIEW'S INDEX ──────────────────────────────────────────────────
   The shelf on the front page became a hundred and fifteen links, so it needs
   two things it did not need as a list: a way to jump, and a row that behaves
   like a door. */
.jump{display:flex;flex-wrap:wrap;gap:1px;justify-content:center;background:var(--rule);
  border:1px solid var(--rule);margin:0 0 2.6em}
.jump a{background:var(--paper);color:var(--muted);text-decoration:none;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;
  padding:.85em 0;flex:1 1 2.2em;text-align:center;
  transition:color 200ms var(--ease),background 200ms var(--ease)}
.jump a:hover{color:var(--gold-d);background:var(--paper-2)}
ol.canon li a{text-decoration:none;color:inherit;display:block;
  transition:color 200ms var(--ease)}
ol.canon li a:hover .t{color:var(--gold-d)}
ol.canon li .letter{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* WHERE TO START. Four doors, named for what a reader might actually be
   standing in the middle of. */
.start{max-width:52em;margin:5.4em auto 0}
.start-head{max-width:33em;margin:0 auto 2.4em;text-align:center}
.start-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,4cqi,36px);
  color:var(--ink);margin:.5em 0 0;line-height:1.12}
.start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.start-grid a{background:var(--paper);padding:2em 1.7em;text-decoration:none;color:inherit;
  transition:background 200ms var(--ease)}
.start-grid a:hover{background:var(--paper-2)}
.start-grid a:hover .t{color:var(--gold-d)}
.start-grid .w{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);display:block}
.start-grid .t{display:block;font-family:var(--serif);font-size:19px;line-height:1.24;
  color:var(--ink);margin:.8em 0 .6em;transition:color 200ms var(--ease)}
.start-grid .why{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;
  color:var(--muted);margin:0}