/* ==========================================================================
   NOCTURNALS — the direct storefront
   Direction: "The Posted Instrument". A dark house that hands you paper.

   The palette is measured off the five covers: their ground sits between
   #191214 and #1e181f, their filigree and title metal is a warm gold, and
   only The Hunt admits a cold blue. Nothing here is invented; it is sampled.

   Two materials, and the site cuts hard between them:
     INK    — the world. Near-black rooms, candle falloff, gold hairlines.
     VELLUM — the product. Ruled paper, printed figures, posted clauses.

   Signature: .reck — the Reckoning. A true linear scale of the debt, and
   then the eleven years the five books happen in.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------------------
     THE DUSK, GONE VIOLET

     Five vampire romances. The ground is a violet-black rather than a warm
     one, the paper has had the brown taken out of it, and blood is a working
     accent rather than a colour used twice. Gold stays: it is the filigree and
     title metal on all five covers, and gold on violet is the whole look.

     Every value here is solved, not picked. Hue and chroma are the design
     decision; lightness is arithmetic — each is walked until its pair clears
     4.5:1 for text or 3.0:1 for a meaningful rule. The ratio in each comment
     is against the ground that colour is used on.
     ------------------------------------------------------------------------ */

  /* Ground */
  --ink:          #0d0916;
  --ink-raised:   #171029;
  --ink-sunk:     #070410;

  /* Paper — the printed object */
  --vellum:       #e7e2ee;
  --vellum-deep:  #d5cee2;
  --paper-ink:    #1c1427;   /* 14.01:1 on vellum */
  --paper-em:     #322643;   /* 11.05:1 */
  --paper-body:   #443756;   /*  8.57:1 */
  --paper-ash:    #6b5f7c;   /*  4.65:1 */
  --paper-rule:   rgba(60, 40, 96, 0.18);

  /* Bone — text on the dark ground */
  --bone-bright:  #e4dfea;   /* 15.02:1 on ink */
  --bone:         #cec8d7;   /* 12.05:1 */
  --bone-dim:     #b5acc1;   /*  9.02:1 */
  --body-soft:    #9b91a8;   /*  6.56:1 */
  --ash:          #8d849a;   /*  5.53:1 */
  --ash-dim:      #80778d;   /*  4.63:1 — it sets TEXT, not rules */

  /* Candle — the filigree and title metal on every cover */
  --candle:       #c9a24c;   /*  8.20:1 on ink */
  --candle-bright:#e8c77e;   /* 12.08:1 */
  --candle-deep:  #8a6c2c;

  /* Blood — the seal, the warning, the bite */
  --blood:        #992437;   /*  6.20:1 on vellum; a fill or a rule on ink */
  --blood-bright: #cf5b6e;   /*  5.03:1 on ink */

  /* Amethyst — the cool note, where the blue used to be */
  --amethyst:     #6e33a2;   /*  6.21:1 on vellum */
  --amethyst-bright: #9f68cf;/*  5.02:1 on ink */

  /* Surface-relative. Several components — the ledger, the set cards, the
     next/previous rail — are set on BOTH the ink ground and the vellum one.
     A component that names `--paper-ash` is right on one surface and illegible
     on the other; the basket's volume titles once rendered at 1.09:1 that way.
     So components name these, and the surface decides what they mean. */
  --strong:       var(--bone-bright);  /* headings, drop caps, emphasis     */
  --reading:      var(--bone);         /* long-form body copy               */
  --muted:        var(--ash-dim);      /* captions, meta, figures           */
  --accent:       var(--blood-bright); /* numerals, seals, marks            */
  --link-quiet:   var(--ash);
  --link-hover:   var(--candle-bright);

  /* The hero picture fades into the page. The image and its violet tint both
     wear this, so the two can never drift apart. */
  --hero-fade: linear-gradient(180deg,
      rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.30) 26%, rgba(0,0,0,0.95) 48%,
      rgba(0,0,0,1) 58%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0) 80%);
  /* --body-soft, in the ramp above, is the sixth of these: dimmed prose. */

  /* Type */
  --face-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --face-body:    "Spectral", Georgia, "Times New Roman", serif;
  --face-figure:  "Courier Prime", "Courier New", ui-monospace, monospace;

  /* A scale with a wide jaw: the display face is a Didone and wants the room */
  --t-hero:   clamp(2.85rem, 8.2vw, 7.5rem);
  --t-h2:     clamp(2rem, 4.4vw, 3.5rem);
  --t-h3:     clamp(1.5rem, 2.6vw, 2.25rem);
  --t-lede:   clamp(1.075rem, 1.5vw, 1.3rem);
  --t-body:   1.0625rem;
  --t-small:  0.875rem;
  --t-figure: 0.8125rem;
  --t-eyebrow:0.6875rem;

  --measure: 63ch;
  --shell: 76rem;
  --shell-tight: 58rem;

  --gap-section: clamp(5rem, 11vh, 9rem);
  --gap-block: clamp(2.25rem, 5vh, 4rem);

  --rule-gold: 1px solid rgba(201, 162, 76, 0.28);
  --rule-gold-firm: 1px solid rgba(201, 162, 76, 0.5);

  --ease-open: cubic-bezier(0.16, 0.84, 0.28, 1);
}

/* Paper grain. One SVG, reused by every vellum surface. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--face-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--candle-bright); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--candle-bright);
  outline-offset: 3px;
}

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.shell--tight { width: min(100% - 2.5rem, var(--shell-tight)); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--vellum); color: var(--paper-ink);
  padding: 0.6rem 1rem; font-family: var(--face-figure); font-size: var(--t-figure);
  transition: top 140ms var(--ease-open);
}
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------------------
   THE VELLUM SURFACES

   One list, because the answer to "is this vellum?" has to live in one place.
   Anything that paints itself --vellum belongs here, and adding it here is what
   makes every component inside it — the ledger, a link, a caption — resolve to
   the readable half of its pair. The skip link was missing from this list, and
   hovering it produced gold on cream at 1.20:1.
   --------------------------------------------------------------------------- */
.paper,
.asking__card,
.skip-link {
  --strong:     var(--paper-ink);
  --reading:    var(--paper-em);
  --body-soft:  var(--paper-body);
  --muted:      var(--paper-ash);
  --accent:     var(--blood);
  --link-quiet: var(--paper-ash);
  --link-hover: var(--paper-ink);
}

/* THE RAISED SURFACES — the third ground.
   `--ink-raised` is a lifted panel, not the page ground, and the tokens were
   solved against the page ground. On the alternating house panels `--muted`
   fell to 4.32:1. Anything that paints itself --ink-raised belongs here.
   (`.totals__ship select` does not: it names its own text colour.) */
.house--alt {
  --muted:      #847b91;   /* 4.57:1 on --ink-raised */
  --link-quiet: #92899e;   /* 5.51:1 */
}


/* --------------------------------------------------------------------------
   2. Shared type roles
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--candle);
  margin: 0 0 1.15rem;
}
.eyebrow--paper { color: var(--muted); }

.display {
  font-family: var(--face-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0;
}

.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.62;
  color: var(--bone-dim);
  max-width: var(--measure);
}

.figure {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.section { padding-block: var(--gap-section); }
.section-head { margin-bottom: var(--gap-block); }

/* --------------------------------------------------------------------------
   3. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--rule-gold);
}

.masthead__mark {
  font-family: var(--face-display);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-bright);
  text-decoration: none;
  white-space: nowrap;
}
.masthead__mark:hover { color: var(--candle-bright); }

.masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }

.masthead__link {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
}
.masthead__link:hover { color: var(--candle-bright); }

@media (max-width: 52rem) {
  .masthead__link[data-optional] { display: none; }
}

/* On a phone the masthead keeps only its two jobs: get home, and pay. */
@media (max-width: 34rem) {
  .masthead { padding-inline: 1.25rem; gap: 1rem; }
  .masthead__mark { font-size: 0.95rem; letter-spacing: 0.2em; }
  .masthead__link:not(.masthead__link--basket) { display: none; }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--candle-deep);
  background: transparent;
  color: var(--candle-bright);
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease-open), color 180ms var(--ease-open),
              border-color 180ms var(--ease-open);
}
.btn:hover { background: var(--candle); border-color: var(--candle); color: var(--ink); }

.btn--solid { background: var(--candle); border-color: var(--candle); color: var(--ink); }
.btn--solid:hover { background: var(--candle-bright); border-color: var(--candle-bright); }

.btn--quiet { border-color: rgba(141, 132, 154, 0.4); color: var(--bone); }
.btn--quiet:hover { background: rgba(231, 226, 238, 0.1); border-color: var(--ash); color: #fff; }

.btn--paper {
  border-color: rgba(28, 20, 39, 0.45);
  color: var(--paper-ink);
  background: transparent;
}
.btn--paper:hover { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--vellum); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

.btn--small { padding: 0.55rem 1rem; font-size: 0.75rem; letter-spacing: 0.14em; }

/* --------------------------------------------------------------------------
   6. The shelf — five covers in candlelight
   -------------------------------------------------------------------------- */

.shelf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.6rem, 1.8vw, 1.6rem);
  align-items: end;
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

.shelf__item { position: relative; text-decoration: none; display: block; }

.shelf__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2560;
  object-fit: cover;
  border: 1px solid rgba(201, 162, 76, 0.22);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.95),
              0 2px 0 rgba(255, 240, 210, 0.05) inset;
  transition: transform 320ms var(--ease-open), box-shadow 320ms var(--ease-open),
              border-color 320ms var(--ease-open);
}

.shelf__item:hover .shelf__cover,
.shelf__item:focus-visible .shelf__cover {
  transform: translateY(-10px);
  border-color: rgba(201, 162, 76, 0.55);
  box-shadow: 0 30px 54px -20px rgba(0, 0, 0, 0.95),
              0 0 34px -8px rgba(201, 162, 76, 0.3);
}

.shelf__label {
  margin-top: 0.8rem;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
  text-align: center;
}
.shelf__item:hover .shelf__label { color: var(--candle); }

@media (max-width: 44rem) {
  .shelf { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .shelf__item:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shelf__item:hover .shelf__cover { transform: none; }
}

/* --------------------------------------------------------------------------
   7. Volumes
   -------------------------------------------------------------------------- */

.volumes { border-top: var(--rule-gold); }

.volume {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 44rem);
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3rem, 7vh, 5.5rem);
  border-bottom: 1px solid rgba(201, 162, 76, 0.13);
}
.volume:last-child { border-bottom: 0; }

.volume--flip .volume__plate { order: 2; }

@media (max-width: 54rem) {
  .volume { grid-template-columns: 1fr; gap: 2rem; }
  .volume--flip .volume__plate { order: 0; }
  .volume__plate { max-width: 15rem; }
}

.volume__plate { position: relative; }

/* the pool of candlelight the cover stands in */
.volume__plate::after {
  content: "";
  position: absolute; left: -12%; right: -12%; bottom: -14%; height: 42%;
  background: radial-gradient(50% 100% at 50% 100%,
              rgba(201, 162, 76, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.volume__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2560;
  object-fit: cover;
  border: 1px solid rgba(201, 162, 76, 0.24);
  box-shadow: 0 26px 56px -24px rgba(0, 0, 0, 0.95);
}

.volume__numeral {
  font-family: var(--face-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 162, 76, 0.55);
  margin: 0 0 0.4rem;
  letter-spacing: 0.06em;
}

.volume__title {
  font-size: var(--t-h2);
  color: var(--bone-bright);
  margin: 0;
}

.volume__subtitle {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--candle);
  margin: 0.8rem 0 0;
}

.volume__hook {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--bone);
  font-style: italic;
  margin: 1.5rem 0 0;
  max-width: 46ch;
}

.volume__body { margin: 1.15rem 0 0; max-width: var(--measure); color: var(--body-soft); }

/* The spec strip. Every book in this series carries its own named instrument
   and its own register — the series bible says so. That is the honest thing
   to put here, not a row of flame glyphs. */
.spec {
  margin: 1.75rem 0 0;
  border-top: 1px solid rgba(201, 162, 76, 0.16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.spec__cell {
  padding: 0.95rem 1.2rem 0.95rem 0;
  border-bottom: 1px solid rgba(201, 162, 76, 0.1);
}

.spec__key {
  display: block;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin-bottom: 0.35rem;
}

.spec__val { font-size: 0.95rem; color: var(--bone); line-height: 1.45; }

.warnings {
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--blood);
  background: rgba(123, 30, 40, 0.08);
  font-size: 0.94rem;
  color: var(--bone-dim);
}
.warnings strong {
  display: block;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blood-bright);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

/* --- format picker on each volume ----------------------------------------- */

.formats { margin-top: 1.9rem; display: grid; gap: 0.55rem; max-width: 46rem; }

.format {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0.25rem 0.85rem 0;
  border-top: 1px solid rgba(201, 162, 76, 0.14);
}
.format:last-child { border-bottom: 1px solid rgba(201, 162, 76, 0.14); }

.format__name {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
}
.format__meta { display: block; letter-spacing: 0.06em; text-transform: none; color: var(--ash-dim); margin-top: 0.3rem; }

.format__price {
  font-family: var(--face-figure);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--candle-bright);
  white-space: nowrap;
}
.format__price--none { color: var(--ash-dim); font-size: var(--t-figure); }

/* The ladder note under the headline price. It had no rule of its own, so it
   inherited `nowrap` from .format__price and pushed a 390px page 15px wide.
   It is secondary information: give it its own line and let it wrap. */
.format__from {
  display: block;
  white-space: normal;
  font-size: var(--t-figure);
  color: var(--muted);
  margin-top: 0.3rem;
}

@media (max-width: 34rem) {
  .format { grid-template-columns: minmax(0, 1fr) auto; }
  .format .btn { grid-column: 1 / -1; justify-self: start; }
}

/* --------------------------------------------------------------------------
   8. VELLUM — the paper surfaces
   -------------------------------------------------------------------------- */

.paper {
  position: relative;
  background: var(--vellum);
  color: var(--paper-ink);
  isolation: isolate;
}

.paper::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* the torn top edge where the dark ends and the page begins */
.paper::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg,
              var(--candle-deep) 0%, var(--candle) 22%, var(--candle-bright) 50%,
              var(--candle) 78%, var(--candle-deep) 100%);
  opacity: 0.65;
}

.paper .eyebrow { color: var(--paper-ash); }
.paper .display { color: var(--paper-ink); }
.paper .lede { color: var(--paper-body); }
.paper a { color: var(--blood); }
.paper a:hover { color: var(--paper-ink); }

/* --------------------------------------------------------------------------
   9. The ledger
   -------------------------------------------------------------------------- */

.ledger-wrap { position: relative; }

/* the account book's ruled field and its red margin */
.ledger-sheet {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem) 0 0 clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(123, 30, 40, 0.45);
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ledger caption { text-align: left; }

.ledger thead th {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 0.75rem 0.7rem 0;
  border-bottom: 1.5px solid rgba(28, 20, 39, 0.55);
  white-space: nowrap;
}
.ledger th.num, .ledger td.num { text-align: right; }

.ledger tbody th, .ledger tfoot th { text-align: left; font-weight: 400; }

.ledger td,
.ledger tbody th {
  padding: 0.7rem 0.75rem 0.7rem 0;
  vertical-align: baseline;
}

.ledger tbody tr { border-bottom: 1px solid var(--paper-rule); }
.ledger tbody tr[data-first="1"] { border-top: 1px solid rgba(28, 20, 39, 0.22); }

.ledger tbody tr:hover td { background: rgba(60, 40, 96, 0.05); }

/* The same ledger is set on vellum (printing, the reference table) and on ink
   (the basket). It must not name a colour: `--paper-ink` here rendered the
   basket's volume titles at 1.09:1 on the dark ground. Inherit the surface. */
.ledger__vol {
  font-family: var(--face-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ledger__no {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  color: var(--muted);
  white-space: nowrap;
}
.ledger__fmt { font-family: var(--face-figure); font-size: var(--t-figure); }
.ledger__spec { font-family: var(--face-figure); font-size: var(--t-figure); color: var(--muted); }
.ledger__price { font-family: var(--face-figure); font-size: 0.95rem; white-space: nowrap; }
.ledger__price--none { color: var(--muted); font-size: var(--t-figure); font-style: italic; }

/* a volume's first row carries the title; the rest are its formats */
.ledger .is-repeat { visibility: hidden; }

.ledger__foot > * {
  border-top: 2px solid rgba(28, 20, 39, 0.6);
  border-bottom: 0;
  padding-top: 1.1rem;
}

/* `contain: paint` keeps the table's overflow inside its own scroll box.
   Without it Chrome leaks the table width into the document and paints a dead
   horizontal scrollbar on narrow screens. */
.ledger-scroll { overflow-x: auto; max-width: 100%; contain: paint; }

@media (max-width: 52rem) {
  .ledger th[data-collapse], .ledger td[data-collapse] { display: none; }
}

/* the complete set, called out */
.set {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  border: 1.5px solid rgba(28, 20, 39, 0.55);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2rem;
  align-items: center;
  background: rgba(255, 253, 246, 0.4);
}
.set__title { font-family: var(--face-display); font-size: var(--t-h3); margin: 0; }
.set__body { margin: 0.6rem 0 0; color: var(--body-soft); max-width: 48ch; font-size: 0.98rem; }
.set__buy { text-align: right; }
.set__price { font-family: var(--face-figure); font-size: 1.5rem; display: block; margin-bottom: 0.75rem; }
.set__price--none { font-size: 0.9rem; color: var(--muted); font-style: italic; }

@media (max-width: 44rem) {
  .set { grid-template-columns: 1fr; }
  .set__buy { text-align: left; }
}

/* --------------------------------------------------------------------------
   10. The law — numbered clauses
   -------------------------------------------------------------------------- */

.law { counter-reset: clause; margin: 0; padding: 0; list-style: none; }

.law__item {
  counter-increment: clause;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(28, 20, 39, 0.16);
}
.law__item:first-child { border-top: 1.5px solid rgba(28, 20, 39, 0.5); }

.law__item::before {
  content: counter(clause, upper-roman) ".";
  font-family: var(--face-display);
  font-size: 1.35rem;
  color: var(--accent);
  line-height: 1.3;
}

.law__head {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  /* The same list runs on vellum (policies) and on ink (the till). Inherit. */
  font-weight: 400;
}
.law__text { margin: 0; color: var(--body-soft); max-width: 60ch; }

@media (max-width: 34rem) {
  .law__item { grid-template-columns: 2.75rem minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   11. The printing
   -------------------------------------------------------------------------- */

.printing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 54rem) { .printing { grid-template-columns: 1fr; } }

.tally { margin: 0; border-top: var(--rule-gold-firm); }
.tally__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(201, 162, 76, 0.14);
}
.tally__key {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin: 0;
}
.tally__val {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  font-variant-numeric: tabular-nums;
  color: var(--candle-bright);
  margin: 0;
  text-align: right;
}

/* --------------------------------------------------------------------------
   13. The asking — the age notice, posted before anything else
   -------------------------------------------------------------------------- */

.asking {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(5, 4, 4, 0.94);
  backdrop-filter: blur(6px);
}
.asking[hidden] { display: none; }

.asking__card {
  width: min(34rem, 100%);
  background: var(--vellum);
  color: var(--paper-ink);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-top: 3px solid var(--candle);
  position: relative;
}
.asking__card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none;
}
.asking__card > * { position: relative; }

.asking__title { font-family: var(--face-display); font-size: clamp(1.6rem, 4.5vw, 2.15rem); margin: 0.5rem 0 0; line-height: 1.1; }
.asking__body { color: var(--body-soft); margin: 1rem 0 0; font-size: 0.98rem; }
.asking__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.asking__decline {
  background: none; border: 0; cursor: pointer; padding: 0.5rem 0;
  font-family: var(--face-figure); font-size: var(--t-figure);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  text-decoration: underline; text-underline-offset: 0.25em;
}
.asking__decline:hover { color: var(--link-hover); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.foot {
  border-top: var(--rule-gold);
  padding-block: clamp(3rem, 7vh, 4.5rem) 2.5rem;
  background: var(--ink-sunk);
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem;
}

.foot__head {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--candle);
  margin: 0 0 1rem;
  font-weight: 400;
}

.foot__list { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.foot__list li { margin-bottom: 0.55rem; }
.foot__list a { color: var(--body-soft); text-decoration: none; }
.foot__list a:hover { color: var(--link-hover); text-decoration: underline; }

.foot__isbn { font-family: var(--face-figure); font-size: var(--t-eyebrow); color: var(--ash-dim); line-height: 1.9; }

.foot__rule { margin: 2.5rem 0 1.5rem; border: 0; border-top: 1px solid rgba(201, 162, 76, 0.14); }

.foot__base {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-family: var(--face-figure); font-size: var(--t-eyebrow);
  letter-spacing: 0.1em; color: var(--ash-dim);
}

/* --------------------------------------------------------------------------
   15. Book pages
   -------------------------------------------------------------------------- */

.bookhead {
  display: grid;
  grid-template-columns: minmax(0, 23rem) minmax(0, 44rem);
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 7vh, 5rem);
}
@media (max-width: 54rem) {
  .bookhead { grid-template-columns: 1fr; }
  .bookhead__plate { max-width: 16rem; }
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; color: var(--bone-dim); }
.prose p:first-child { color: var(--bone); font-size: var(--t-lede); line-height: 1.6; }
.prose em { color: var(--bone); }
.prose strong { color: var(--bone-bright); font-weight: 400; }

/* The same prose set on paper. Inline overrides on the wrapper cannot reach
   the paragraphs, so the paper context restates them. */
.paper .prose p { color: var(--paper-body); }
.paper .prose p:first-child { color: var(--paper-ink); }
.paper .prose em { color: var(--paper-em); }
.paper .prose strong { color: var(--paper-ink); }

.readmore { margin-top: 1.25rem; }
.readmore__more[hidden] { display: none; }

.crumb {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
  padding-top: 2rem;
}
.crumb a { color: var(--ash); text-decoration: none; }
.crumb a:hover { color: var(--link-hover); }

.nextprev {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  border-top: var(--rule-gold);
  padding-top: 1.75rem;
  margin-top: var(--gap-block);
}
.nextprev a {
  font-family: var(--face-figure); font-size: var(--t-figure);
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--link-quiet);
}
.nextprev a:hover { color: var(--link-hover); }

/* ==========================================================================
   17. The free pages — reading, reference, lexicon, questions
   ========================================================================== */

/* A reading measure. Narrower than the shop's, because this is prose you are
   meant to stay inside for three thousand words. */
.shell--reading { width: min(100% - 2.5rem, 40rem); margin-inline: auto; }

.chapterhead { padding-block: clamp(1.5rem, 4vh, 2.75rem) clamp(2.25rem, 5vh, 3.25rem); }

.chapterhead__note {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--candle-deep);
  background: rgba(201, 162, 76, 0.06);
  font-size: 0.94rem;
  color: var(--bone-dim);
  max-width: var(--measure);
}

/* A definition list of hard facts, for readers who skim and machines that
   parse. */
.factlist {
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  border-top: 1px solid rgba(201, 162, 76, 0.18);
  max-width: 40rem;
}
.factlist > div {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid rgba(201, 162, 76, 0.1);
}
.factlist dt {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin-bottom: 0.3rem;
}
.factlist dd {
  margin: 0;
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  font-variant-numeric: tabular-nums;
  color: var(--candle-bright);
}

/* --- the chapter itself -------------------------------------------------- */

.chapter { padding-block: clamp(3rem, 8vh, 5.5rem); }

.chapter__body {
  font-size: 1.125rem;
  line-height: 1.78;
  color: var(--reading);
  hanging-punctuation: first last;
}
/* A POV marker inside a chapter — `### LIORA` in the manuscript. It is a
   heading for the outline's sake, but it reads as a speaker label, so it is
   set like one rather than like a section title. */
.chapter__pov {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.6rem;
}
.chapter__pov + p { margin-top: 0; }


.chapter__body p { margin: 0 0 1.35rem; }

/* Printed-book manners: the opening paragraph gets a drop cap, and the
   paragraphs after a scene break start flush. */
.chapter__body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--face-display);
  font-size: 4.1em;
  line-height: 0.78;
  padding: 0.06em 0.09em 0 0;
  color: var(--strong);
}

.chapter__body > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

.chapter__body em { font-style: italic; }

.chapter__body h2 {
  font-family: var(--face-display);
  font-size: var(--t-h3);
  font-weight: 400;
  margin: 3rem 0 1.5rem;
  color: var(--strong);
}

/* Scene break. A short centred rule with a diamond on it — the way a printed
   book marks a jump in time without saying so. */
.chapter__body .scene {
  border: 0;
  margin: 2.4rem auto;
  width: 7rem;
  height: 1rem;
  position: relative;
}
.chapter__body .scene::before {
  content: "";
  position: absolute; top: 50%; left: 0; right: 0;
  border-top: 1px solid rgba(28, 20, 39, 0.28);
}
.chapter__body .scene::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  transform: rotate(45deg);
  background: var(--vellum);
  box-shadow: 0 0 0 1px rgba(28, 20, 39, 0.4), 0 0 0 4px var(--vellum);
}

.chapter__end {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1.5px solid rgba(28, 20, 39, 0.5);
  text-align: center;
}
.chapter__endmark {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.chapter__endnote {
  font-family: var(--face-display);
  font-size: 1.2rem;
  color: var(--strong);
  margin: 0.7rem 0 0;
}

/* --- "where should I start" cards ---------------------------------------- */

.picks {
  margin-top: 1.75rem;
  display: grid;
  gap: 0;
  border-top: var(--rule-gold-firm);
}

.pick {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(201, 162, 76, 0.14);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 0.6rem 2.5rem;
  align-items: start;
}
@media (max-width: 44rem) { .pick { grid-template-columns: 1fr; } }

.pick__want {
  margin: 0;
  font-size: 1.02rem;
  font-style: italic;
  color: var(--bone);
  line-height: 1.45;
}

.pick__title { font-size: 1.35rem; margin: 0; }
.pick__title a { color: var(--bone-bright); text-decoration: none; }
.pick__title a:hover { color: var(--link-hover); }

.pick__why { margin: 0.5rem 0 0; color: var(--body-soft); font-size: 0.98rem; }
.pick__meta { display: block; margin-top: 0.6rem; color: var(--ash-dim); }

/* The paper context inverts the card colours. */
.paper .pick__want { color: var(--paper-ink); }
.paper .pick__title a { color: var(--paper-ink); }
.paper .pick__why { color: var(--paper-body); }

/* Clause list, but on ink rather than vellum. */
.law__item--dark { border-bottom-color: rgba(201, 162, 76, 0.14); }
.law__item--dark:first-child { border-top-color: rgba(201, 162, 76, 0.5); }
.law__item--dark::before { color: var(--candle); }
.law__item--dark .law__head { color: var(--bone-bright); }
.law__item--dark .law__head a { color: inherit; text-decoration: none; }
.law__item--dark .law__head a:hover { color: var(--candle-bright); }
.law__item--dark .law__text { color: var(--body-soft); }

/* --- content warnings ---------------------------------------------------- */

.cw {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(28, 20, 39, 0.16);
}
.cw:first-of-type { border-top: 1.5px solid rgba(28, 20, 39, 0.5); }

.cw__no { color: var(--accent); font-size: 0.95rem; margin: 0.35rem 0 0; }
.cw__title { font-size: 1.45rem; margin: 0; }
.cw__title a { color: var(--strong); text-decoration: none; }
.cw__title a:hover { color: var(--accent); }
.cw__sub { display: block; color: var(--muted); margin: 0.35rem 0 0; letter-spacing: 0.16em; text-transform: uppercase; }

.cw__text {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1.05rem;
  border-left: 2px solid var(--blood);
  background: rgba(123, 30, 40, 0.07);
  color: var(--paper-body);
  max-width: 62ch;
}

.cw__reg { display: block; margin: 0.8rem 0 0; color: var(--muted); }

@media (max-width: 34rem) {
  .cw { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.75rem; }
}

/* --- lexicon ------------------------------------------------------------- */

.lexgroup + .lexgroup { margin-top: 3rem; }

.lexgroup__head {
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1.5px solid rgba(28, 20, 39, 0.5);
}

.lex { margin: 0; }

.lex__term {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--strong);
  margin-top: 1.5rem;
  scroll-margin-top: 5rem;
}
.lex__term:first-of-type { margin-top: 0; }

.lex__gloss {
  margin: 0.5rem 0 0;
  color: var(--body-soft);
  max-width: 62ch;
  border-left: 1px solid rgba(60, 40, 96, 0.25);
  padding-left: 1rem;
}

/* --- questions ----------------------------------------------------------- */

.qa {
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(28, 20, 39, 0.16);
}
.qa:first-of-type { border-top: 1.5px solid rgba(28, 20, 39, 0.5); }

.qa__q {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin: 0;
  color: var(--strong);
  line-height: 1.2;
}

.qa__a { margin: 0.75rem 0 0; color: var(--body-soft); max-width: 64ch; }


/* ==========================================================================
   18. Atmosphere art
   The covers hold the people; these hold the rooms. They are always
   subordinate: darkened, masked into the ground, and never competing with
   type or with the five covers.
   ========================================================================== */

/* --- the hero sky -------------------------------------------------------- */

.hero__scene {
  position: absolute;
  inset: 0 0 auto;
  height: 118%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0.62;
  /* Hold the headline over near-black, let the land show through where the
     light-band sits, then fall away entirely into the shelf. */
  -webkit-mask-image: var(--hero-fade);
  mask-image: var(--hero-fade);
}

/* Darken the left and right edges so the covers keep a clean silhouette
   against the land instead of dissolving into it. */
.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--ink) 0%, rgba(12, 10, 11, 0.35) 12%,
    transparent 30%, transparent 70%,
    rgba(12, 10, 11, 0.35) 88%, var(--ink) 100%);
}

/* The candle glow and the type both sit above the sky. */
.hero::before { z-index: 1; }
.hero__inner,
.hero > .shell { position: relative; z-index: 2; }

/* --- full-width bands ---------------------------------------------------- */

.artband {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink-sunk);
  height: clamp(210px, 30vw, 420px);
}

.artband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
}

/* Feather both ends into the ground so a band reads as part of the page
   rather than as a picture that was pasted onto it. */
.artband::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--ink) 0%, transparent 15%, transparent 80%, var(--ink) 100%),
    linear-gradient(90deg, var(--ink) 0%, transparent 8%, transparent 92%, var(--ink) 100%);
}

/* ---------------------------------------------------------------------------
   THE ROOMS, IN VIOLET

   One list, like the vellum surfaces: these are the elements that hold
   atmosphere art. The covers are NOT here and must never be — `.row__plate`,
   `.shelf__cover` and the rest hold the books, and the books keep their own
   gold.

   The art is lit by lanterns and candles, so it photographs warm, and a warm
   picture under a violet palette is exactly the brown the page was trying to
   lose. Rather than regenerate eleven images: strip the colour, then blend
   amethyst-to-blood back in. `mix-blend-mode: color` takes hue and saturation
   from the gradient and keeps the picture's own luminance, so the rooms stay
   readable and join the palette instead of fighting it.
   --------------------------------------------------------------------------- */

.artband,
.hero__scene,
.lawhead__plate { isolation: isolate; }

.lawhead__plate { position: relative; }

.artband img,
.hero__scene img,
.lawhead__plate img {
  filter: grayscale(1) contrast(1.08) brightness(0.86);
}

.artband::before,
.hero__scene::before,
.lawhead__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(155deg,
              var(--amethyst) 0%, var(--ink-raised) 52%, var(--blood) 100%);
  mix-blend-mode: color;
}

/* The hero image is masked into the page; its tint has to carry the same mask
   or it would colour the air above and below the picture. Declared once, in
   --hero-fade, so the two cannot drift apart. */
.hero__scene::before {
  -webkit-mask-image: var(--hero-fade);
  mask-image: var(--hero-fade);
}

/* Anything painted over the art — the feather, the edge darkening — sits above
   the tint, or it feathers into nothing. */
.artband::after,
.hero__scene::after { z-index: 2; }

.artband--tall { height: clamp(240px, 34vw, 470px); }

/* Between the dark chapter header and the vellum page: fade down into paper,
   and carry the same gold hairline the vellum sections use. */
.artband--chapter {
  height: clamp(230px, 33vw, 460px);
}
.artband--chapter::after {
  background:
    linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 72%, var(--vellum) 100%),
    linear-gradient(90deg, var(--ink) 0%, transparent 8%, transparent 92%, var(--ink) 100%);
}

/* On paper the band is inset and ruled, like a plate in a book. */
.artband--lex {
  height: clamp(180px, 25vw, 330px);
  margin-bottom: 1.5rem;
  background: transparent;
  border-top: 1px solid rgba(28, 20, 39, 0.28);
  border-bottom: 1px solid rgba(28, 20, 39, 0.28);
}
/* These are 16:9 in a much wider box, so bias the crop up towards the horizon
   rather than letting it centre on the ground. */
.artband--lex img { opacity: 0.92; object-position: 50% 38%; }
.artband--lex::after {
  background: linear-gradient(90deg,
    rgba(231, 226, 238, 0.85) 0%, transparent 12%,
    transparent 88%, rgba(231, 226, 238, 0.85) 100%);
}

/* --- the law's posted notice --------------------------------------------- */

.lawhead {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: var(--gap-block);
}

.lawhead__plate {
  margin: 0;
  border: 1px solid rgba(28, 20, 39, 0.35);
  overflow: hidden;
  background: var(--ink-sunk);
}
.lawhead__plate img { width: 100%; height: auto; display: block; }

@media (max-width: 54rem) {
  .lawhead { grid-template-columns: 1fr; }
  .lawhead__plate { max-width: 20rem; }
}

/* Nothing here is load-bearing; if images are blocked the page is unchanged. */
@media (prefers-reduced-motion: reduce) {
  .hero__scene img { opacity: 0.5; }
}

/* ==========================================================================
   19. THE RECKONING — the signature element
   A true linear scale of Dusk Reckoning. The top rail runs from the First
   Bargain to the last volume, 2,013 years, and shows that every book falls
   inside the final eleven; the lower rail expands that window so the same
   object is also the shop's index. Both rails are positioned from real years
   computed in the template — nothing here is eyeballed.
   ========================================================================== */

.section--reck { padding-block: clamp(3.5rem, 9vh, 6.5rem); }

.reck { margin: 0; }

.reck__cap {
  max-width: 46ch;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  font-family: var(--face-display);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.3;
  color: var(--bone-bright);
}

.reck__eyebrow {
  display: block;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--candle);
  margin-bottom: 0.9rem;
}

/* --- the long rail ------------------------------------------------------- */

.reck__rail {
  position: relative;
  height: 4.5rem;
  border-bottom: 1px solid rgba(201, 162, 76, 0.55);
}

.reck__ticks {
  position: absolute;
  inset: auto 0 0 0;
  height: 12px;
  background-image: repeating-linear-gradient(90deg,
    rgba(223, 216, 236, 0.42) 0 1px, transparent 1px 2.5%);
}
.reck__ticks--zoom {
  background-image: repeating-linear-gradient(90deg,
    rgba(223, 216, 236, 0.42) 0 1px, transparent 1px 8.333%);
}

.reck__mark {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 2.4rem;
  background: var(--candle-bright);
}
.reck__mark-label {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  white-space: nowrap;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}
/* A mark past halfway hangs its label to the LEFT of the tick, so the rail
   can narrow to a phone without pushing the page sideways. */
.reck__mark--end .reck__mark-label { left: auto; right: 0; text-align: right; }

/* The last mark would run off the right edge; hang it back inside. */
.reck__mark:last-of-type .reck__mark-label { transform: translateX(-100%); padding-right: 0.5rem; }

/* The window the five books occupy: 0.55% of the scale, so it is drawn at a
   minimum width and labelled rather than left invisible. */
.reck__window {
  position: absolute;
  bottom: -1px;
  width: 3px;
  height: 3.4rem;
  background: var(--blood);
  box-shadow: 0 0 0 1px rgba(123, 30, 40, 0.35), 0 0 18px 3px rgba(123, 30, 40, 0.5);
}

/* --- the bridge into the zoom ------------------------------------------- */

.reck__bridge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0 0;
}
.reck__bridge span:first-child,
.reck__bridge span:last-child {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 30, 40, 0.75));
}
.reck__bridge span:last-child { background: linear-gradient(90deg, rgba(123, 30, 40, 0.75), transparent); }
.reck__bridge-word {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blood-bright);
}

/* --- the expanded window ------------------------------------------------- */

.reck__zoom {
  position: relative;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 3.5rem 0 0;
  min-height: 12rem;
  border-top: 1px solid rgba(201, 162, 76, 0.55);
}
.reck__zoom .reck__ticks { inset: 0 0 auto 0; }

.reck__vol {
  position: absolute;
  top: 2.6rem;
  transform: translateX(-50%);
  width: 8.5rem;
  text-align: center;
}
.reck__vol a {
  display: block;
  text-decoration: none;
  padding-top: 1.4rem;
  position: relative;
}
.reck__vol a::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 1.1rem;
  background: var(--candle);
}
.reck__no {
  display: block;
  font-family: var(--face-display);
  font-size: 1.15rem;
  color: var(--candle-bright);
}
.reck__title {
  display: block;
  font-family: var(--face-display);
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--bone);
  margin-top: 0.2rem;
}
.reck__year {
  display: block;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  color: var(--ash-dim);
  margin-top: 0.3rem;
}
.reck__vol a:hover .reck__title,
.reck__vol a:focus-visible .reck__title { color: var(--candle-bright); }

.reck__foot { margin: 1.5rem 0 0; color: var(--ash-dim); }

/* Below the fold of a phone the marks collide, so the expanded window becomes
   an ordinary list. The long rail still carries the argument. */
@media (max-width: 46rem) {
  .reck__zoom {
    padding-top: 1.5rem;
    min-height: 0;
    display: grid;
    gap: 0.5rem;
  }
  .reck__zoom .reck__ticks { display: none; }
  .reck__vol {
    position: static;
    transform: none;
    width: auto;
    text-align: left;
    border-bottom: 1px solid rgba(201, 162, 76, 0.14);
  }
  .reck__vol a { padding: 0.6rem 0; display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: baseline; gap: 0.75rem; }
  .reck__vol a::before { display: none; }
  .reck__no, .reck__title, .reck__year { margin: 0; }
}


/* ==========================================================================
   20. Shop rows
   ========================================================================== */

.rows { list-style: none; margin: 2rem 0 0; padding: 0; border-top: var(--rule-gold-firm); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 5vh, 3rem) 0;
  border-bottom: 1px solid rgba(201, 162, 76, 0.14);
  scroll-margin-top: 5rem;
}
@media (max-width: 44rem) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row__plate { max-width: 11rem; }
}

.row__plate { display: block; }
.row__plate img {
  width: 100%;
  border: 1px solid rgba(201, 162, 76, 0.24);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.95);
}

.row__no { color: var(--ash-dim); margin: 0; letter-spacing: 0.18em; text-transform: uppercase; }
.row__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.5rem 0 0; }
.row__title a { color: var(--bone-bright); text-decoration: none; }
.row__title a:hover { color: var(--link-hover); }
.row__sub { display: block; margin: 0.45rem 0 0; color: var(--candle); letter-spacing: 0.2em; text-transform: uppercase; }
.row__hook { margin: 1rem 0 0; max-width: var(--measure); font-style: italic; color: var(--bone); }
.row__meta { display: block; margin: 0.8rem 0 0; color: var(--ash-dim); }

/* --- the format filter, CSS only ---------------------------------------- */

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}
.filter__label { color: var(--ash-dim); margin-right: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; }
.filter input { position: absolute; opacity: 0; pointer-events: none; }
.filter label {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(141, 132, 154, 0.4);
  color: var(--bone);
  cursor: pointer;
}
.filter label:hover { border-color: var(--candle); color: var(--candle-bright); }
.filter input:checked + label { background: var(--candle); border-color: var(--candle); color: var(--ink); }
.filter input:focus-visible + label { outline: 2px solid var(--candle-bright); outline-offset: 3px; }

/* One checked radio hides the formats it is not. The rows themselves never
   move, so nothing reflows. */
.filter:has(#f-print:checked) ~ .rows .format:not([data-fmt="print"]),
.filter:has(#f-ebook:checked) ~ .rows .format:not([data-fmt="ebook"]),
.filter:has(#f-audio:checked) ~ .rows .format:not([data-fmt="audio"]) { display: none; }


/* ==========================================================================
   21. Basket and totals
   ========================================================================== */

.basket-count {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  margin-left: 0.5rem;
  background: var(--candle);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.basket-count[data-empty="1"] {
  background: transparent;
  color: var(--ash-dim);
  box-shadow: inset 0 0 0 1px rgba(141, 132, 154, 0.4);
}

.totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 44rem) { .totals { grid-template-columns: 1fr; } }

.totals__ship label { display: block; margin-bottom: 0.5rem; color: var(--ash-dim); letter-spacing: 0.2em; text-transform: uppercase; }
.totals__ship select {
  width: 100%;
  max-width: 24rem;
  padding: 0.7rem 0.8rem;
  background: var(--ink-raised);
  color: var(--bone);
  border: 1px solid rgba(141, 132, 154, 0.45);
  font-family: var(--face-figure);
  font-size: var(--t-figure);
}
.totals__zone { display: block; margin: 0.7rem 0 0; color: var(--ash-dim); }

.totals__sums { width: 100%; }
.totals__grand th, .totals__grand td {
  border-top: 1.5px solid rgba(201, 162, 76, 0.5);
  font-size: 1.15rem;
  color: var(--candle-bright);
  padding-top: 0.9rem;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(141, 132, 154, 0.4);
}
.qty button {
  background: none; border: 0; cursor: pointer;
  width: 1.9rem; height: 1.9rem;
  font-family: var(--face-figure); font-size: 0.95rem; color: var(--bone);
}
.qty button:hover { background: rgba(231, 226, 238, 0.1); }
.qty output {
  min-width: 2rem; text-align: center;
  font-family: var(--face-figure); font-size: var(--t-figure);
  font-variant-numeric: tabular-nums;
}

.line__remove {
  background: none; border: 0; cursor: pointer; padding: 0.25rem 0;
  font-family: var(--face-figure); font-size: var(--t-eyebrow);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash-dim);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.line__remove:hover { color: var(--blood-bright); }

.cart__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }


/* ==========================================================================
   22. Small shared pieces
   ========================================================================== */

.section--head { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }

.prose-note { max-width: var(--measure); margin: 1.25rem 0 0; color: var(--body-soft); }
.paper .prose-note { color: var(--paper-body); }

.more { margin: 1.5rem 0 0; font-family: var(--face-figure); font-size: var(--t-figure); letter-spacing: 0.12em; text-transform: uppercase; }
.more a { color: var(--candle); text-decoration: none; }
.more a:hover { color: var(--link-hover); text-decoration: underline; }
.paper .more a { color: var(--blood); }

.keywords { display: block; margin: 1.5rem 0 0; color: var(--ash-dim); line-height: 2; }

/* Anywhere a number is a proposal rather than a measurement, the page says so
   next to the number. */
.unverified {
  margin: 0.9rem 0 0;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  color: var(--blood-bright);
}
.unverified--block {
  margin-top: 1.5rem;
  padding: 0.85rem 1.05rem;
  border-left: 2px solid var(--blood);
  background: rgba(123, 30, 40, 0.09);
  font-size: var(--t-figure);
  letter-spacing: 0.02em;
  max-width: var(--measure);
}
.paper .unverified, .paper .unverified--block { color: var(--blood); }

.shelf__sub {
  display: block;
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  color: var(--ash-dim);
  text-align: center;
  margin-top: 0.25rem;
}

.set__note { display: block; margin-top: 0.8rem; color: var(--muted); }

/* The full retail copy folds away in a <details>, which needs no script. */
.readmore { margin-top: 1.5rem; }
.readmore > summary { display: inline-flex; list-style: none; }
.readmore > summary::-webkit-details-marker { display: none; }
.readmore[open] > summary { display: none; }

/* --- tables that used to be divs ---------------------------------------- */

.tally { width: 100%; border-collapse: collapse; border-top: var(--rule-gold-firm); }
.tally caption { text-align: left; }
.tally th, .tally td {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(201, 162, 76, 0.14);
  vertical-align: baseline;
}
/* --------------------------------------------------------------------------
   What comes with the set

   Stated once, quietly, where the money is. It is a real term, not a banner:
   a gold rule and a claim line, no badge and no exclamation.
   -------------------------------------------------------------------------- */
.included {
  border-left: 2px solid var(--candle);
  padding: 0.2rem 0 0.2rem 1.25rem;
}
.included__claim {
  font-family: var(--face-display);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.included__line {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  color: var(--candle);
  margin: 0.9rem 0 0;
  line-height: 1.7;
}
.tally__note {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  color: var(--muted);
  margin: 0.8rem 0 0;
  line-height: 1.7;
}

.tally th {
  font-family: var(--face-figure);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
  text-align: left;
}
.tally td, .tally .num {
  font-family: var(--face-figure);
  font-size: var(--t-figure);
  font-variant-numeric: tabular-nums;
  color: var(--candle-bright);
  text-align: right;
}
.paper .tally th { color: var(--paper-ash); }
.paper .tally td { color: var(--paper-ink); }
.paper .tally, .paper .tally th, .paper .tally td { border-color: rgba(28, 20, 39, 0.2); }

.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin: 1.75rem 0 0; border-top: 1px solid rgba(201, 162, 76, 0.16); }
.spec__cell { padding: 0.95rem 1.2rem 0.95rem 0; border-bottom: 1px solid rgba(201, 162, 76, 0.1); }
.spec__val { margin: 0; }

.shelf { list-style: none; padding: 0; }
.shelf > li { margin: 0; }


/* ==========================================================================
   23. Motion
   Entrances are CSS with `backwards` fill, so the page is already in its
   finished state if animations never run. Nothing here is gated on a class a
   script adds — that is a permanently blank page when the script fails.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__inner > * { animation: rise 700ms var(--ease-open) backwards; }
.hero__inner > :nth-child(1) { animation-delay: 60ms; }
.hero__inner > :nth-child(2) { animation-delay: 140ms; }
.hero__inner > :nth-child(3) { animation-delay: 240ms; }
.hero__inner > :nth-child(4) { animation-delay: 340ms; }

.reck__rail,
.reck__zoom { animation: rise 800ms var(--ease-open) 200ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .hero__inner > *,
  .reck__rail,
  .reck__zoom { animation: none; }
}

/* ==========================================================================
   24. The houses — the lore pages

   Two kinds of picture, handled oppositely.

   A SIGIL is a photograph of an engraved plate: black ink on a sheet of aged
   paper, shot on white. It is not tinted with the rooms. It sits on a vellum
   card and blends `multiply`, which drops the white surround into the card and
   leaves only the ink — the same trick a real plate tipped into a book does.

   A PORTRAIT is a painted face on a dark ground, so it belongs to the rooms:
   grayscaled and re-tinted violet like every other picture on the site, or the
   nine of them would drag the warm brown back in one face at a time.
   ========================================================================== */

.house { padding-block: clamp(3rem, 7vw, 5.5rem); }
.house--alt { background: var(--ink-raised); }

.house__head {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.house__seat {
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0.5rem 0 1.25rem;
}

.house__book {
  margin: 1.5rem 0 0;
  color: var(--muted);
  line-height: 1.9;
}
.house__book a { color: var(--link-quiet); }
.house__book a:hover { color: var(--link-hover); }

/* --- the house mark ------------------------------------------------------ */

.sigil {
  margin: 0;
  background: var(--vellum);
  border: 1px solid var(--paper-rule);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.95);
  /* A square window onto the plate. The masters are photographs of a whole
     sheet with a wide margin and a deckle edge, so shown whole the emblem ends
     up tiny; zooming past the margin makes the mark read as printed on this
     card rather than as a snapshot of a piece of paper. All five plates are
     centred compositions, so one number does for all of them. */
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
}
.sigil img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.42;
  /* The plate was photographed on white. `multiply` on the vellum card turns
     that white into the card and leaves the ink standing. Do not add a filter
     here — these are the one set of images the rooms' duotone must not touch. */
  mix-blend-mode: multiply;
}

/* --- the people ---------------------------------------------------------- */

.folk {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.folk__item {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(201, 162, 76, 0.14);
}

.folk__plate {
  margin: 0;
  isolation: isolate;
  position: relative;
  border: 1px solid rgba(201, 162, 76, 0.24);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.95);
}
.folk__plate img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.06) brightness(0.9);
}
/* The same duotone the rooms wear, but at about half strength. A room can take
   the full tint; a face cannot — at full strength the modelling that makes a
   painted portrait readable goes flat and everyone turns the same shade of
   magenta. Held back, the grayscale shows through and they read as aged plates
   that happen to sit in a violet room. */
.folk__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(150deg,
              var(--amethyst) 0%, var(--ink-raised) 60%, var(--blood) 100%);
  mix-blend-mode: color;
  opacity: 0.55;
}

.folk__name {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  margin: 0;
  color: var(--strong);
}
.folk__role {
  margin: 0.4rem 0 0.9rem;
  color: var(--candle);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
}
.folk__note {
  margin: 0;
  max-width: 54ch;
  color: var(--body-soft);
}

@media (max-width: 54rem) {
  .house__head { grid-template-columns: minmax(0, 1fr); }
  .sigil { max-width: 13rem; }
}

@media (max-width: 40rem) {
  .folk__item { grid-template-columns: minmax(0, 1fr); }
  .folk__plate { max-width: 11rem; }
}

/* ==========================================================================
   25. How it works — the mechanisms, and the sketches that explain them

   A SKETCH is graphite on sketchbook paper, photographed. Like the house
   marks and unlike the rooms, it is not tinted: it goes on a pale card and
   blends `multiply`, so the paper of the photograph becomes the paper of the
   card and only the graphite is left. Tinting a pencil drawing violet would
   turn the one handmade thing on the site into another rendered surface.

   The sketches carry no lettering — generated type is gibberish, and a diagram
   whose labels are nonsense is worse than no diagram. The page does the
   labelling in real text beside them, which is also the only version a screen
   reader or a crawler can use.
   ========================================================================== */

.mechs {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.mech {
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
/* Alternate the side the drawing sits on, so the page reads as a notebook
   being turned rather than as a list with pictures. */
.mech:nth-child(even) .sketch { order: 2; }

.mech__no {
  color: var(--candle);
  letter-spacing: 0.28em;
  margin: 0 0 0.5rem;
  font-size: var(--t-eyebrow);
}
.mech__title {
  font-size: clamp(1.4rem, 2.9vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--strong);
}
.mech__body {
  margin: 0;
  max-width: 56ch;
  color: var(--reading);
}
.mech__so {
  margin: 1.25rem 0 0;
  max-width: 56ch;
  color: var(--body-soft);
  border-left: 2px solid var(--candle-deep);
  padding-left: 1rem;
}
.mech__so-label {
  display: block;
  color: var(--candle);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  margin-bottom: 0.35rem;
}

/* --- the sketch itself --------------------------------------------------- */

.sketch {
  margin: 0;
  background: var(--vellum);
  border: 1px solid var(--paper-rule);
  box-shadow: 0 26px 52px -30px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}
.sketch img {
  display: block;
  width: 100%;
  height: auto;
  /* The photograph includes the desk around the sketchbook. Scaling past it
     leaves the drawing and its paper, and `multiply` merges that paper into
     the card. No filter — this is the one handmade thing here, and the rooms'
     duotone would flatten it into another rendered surface. */
  scale: 1.14;
  transform-origin: center;
  mix-blend-mode: multiply;
}

.sketch--wide { max-width: 60rem; }

/* A sketch tucked beside a lexicon entry: small, floated out of the measure so
   the definition still reads as a definition rather than as a caption. */
.sketch--inline {
  float: right;
  width: min(22rem, 44%);
  margin: 0.25rem 0 1rem 1.75rem;
  shape-outside: margin-box;
}
@media (max-width: 44rem) {
  .sketch--inline { float: none; width: 100%; max-width: 24rem; margin: 1.25rem 0 0; }
}
.sketch__cap {
  color: var(--muted);
  padding: 0 1rem 0.9rem;
  margin: 0;
  line-height: 1.7;
}

@media (max-width: 60rem) {
  .mech { grid-template-columns: minmax(0, 1fr); }
  .mech:nth-child(even) .sketch { order: 0; }
  .sketch { max-width: 30rem; }
}