/* ==========================================================================
   Dead Thinkers — holding page layout
   Every visual constant comes from tokens.css.

   Structure: one `.screen` that is exactly a viewport tall at every size,
   followed by `.band` sections that are a deliberate scroll. The screen's
   fold budget is fixed; the bands' is not. Keep that line clean.
   ========================================================================== */

/* --- Self-hosted body face --------------------------------------------------
   If the woff2 is absent the @font-face simply fails and the stack in
   --face-body falls through to the machine's own old-style serif. Nothing
   breaks, and no request ever leaves the visitor's browser either way. */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--face-body);
  font-size: var(--t-body);
  line-height: var(--lead-body);
  color: var(--ink);

  /* Paper photograph over the paper colour — absent asset degrades to colour.
     The source sheet's deckled edge and torn corner are cropped off upstream;
     what ships is the clean interior field, so `cover` never reveals a border.
     No `background-attachment: fixed` — it janks or mis-scales on iOS. */
  background-color: var(--paper);
  background-image: url("paper-ground.jpg");
  background-size: cover;
  background-position: center;

  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   SECTION — the screen
   ========================================================================== */

.screen {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--frame);
  padding-bottom: calc(var(--frame) + 2.4rem);   /* room for the scroll cue */
}

.sheet {
  width: min(100%, 66rem);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3.4rem);
}

@media (max-width: 860px), (max-height: 560px) {
  .sheet { grid-template-columns: 1fr; gap: var(--s3); }
}

/* --- The vanitas plate ---------------------------------------------------- */

.frontispiece {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--plate) url("hero-vanitas.jpg") center / cover no-repeat;
  border-radius: var(--radius);

  /* An engraved plate mark: hairline rule inset from a wider paper margin. */
  box-shadow:
    0 0 0 1px var(--rule),
    0 0 0 clamp(6px, 1.1vw, 12px) var(--paper-deep),
    0 0 0 calc(clamp(6px, 1.1vw, 12px) + 1px) var(--rule),
    0 clamp(6px, 1.4vw, 16px) clamp(14px, 3vw, 34px) rgba(43, 32, 24, 0.22);
}

@media (max-width: 860px), (max-height: 560px) {
  .frontispiece { aspect-ratio: 16 / 7; }
}
/* A short phone has no room for a wide plate and the words both. The plate
   narrows rather than disappearing — the art is the reason to stay. */
@media (max-width: 860px) and (max-height: 740px) {
  .frontispiece { aspect-ratio: 16 / 5; }
}

/* --- The text column ------------------------------------------------------ */

/* The hero column is centred as a unit — masthead, rule, copy, CTA all share
   one axis. The bands below stay ranged left, where a reading measure wants
   a hard left edge; this is a title page, and a title page is centred. */
.leaf {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

/* Set on one line. Stacking it cost ~100px of fold on every laptop screen,
   and letterspaced caps carry the engraved-titlepage feel without the height. */
.masthead {
  margin: 0;
  font-size: var(--t-masthead);
  font-weight: 400;
  line-height: var(--lead-tight);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;

  /* The masthead is nowrap and genuinely wider than the 47ch prose measure, so
     it cannot be centred by `text-align` OR by `fit-content` — both leave the
     overflow hanging off one side (measured 24.9px right of the rest of the
     stack). It has to escape the measure: max-content gives it its true width,
     then left/translateX centres that box on .leaf however wide it ends up.
     The left padding replaces the phantom trailing space letterspacing appends
     after the final S, so the box is symmetrical around the glyphs. */
  width: max-content;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 0.13em;
}

/* An engraved fleuron rule cut from the ornaments plate. It is white-ground
   line art, so `multiply` drops the white and lets the paper's fibre read
   straight through the ink — no keying, and therefore no halo. */
.rule {
  height: clamp(13px, 1.8vw, 22px);
  border: 0;
  margin: var(--s3) 0;
  background: url("rule-fleuron.jpg") center / contain no-repeat;
  mix-blend-mode: multiply;
}

.epitaph {
  margin: 0 0 var(--s3);
  font-size: var(--t-lede);
  font-style: italic;
  line-height: 1.34;
  letter-spacing: var(--track-lede);
}

.thesis { margin: 0 0 var(--s3); color: var(--ink-soft); }

.beats {
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}
/* Centred, so the hanging hairline markers are gone: a bullet pinned to a left
   edge that no longer exists reads as a mistake. Spacing carries the rhythm
   instead. */
.beats li { margin-bottom: var(--s2); }
.beats li:last-child { margin-bottom: 0; }
.beats strong { color: var(--ink); font-weight: 400; }

.aside {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-faint);
}
.aside strong { font-weight: 400; font-style: normal; color: var(--ink-soft); }
.aside a { color: inherit; }

/* ==========================================================================
   SECTION — the waiting list
   Posts straight to Kit; no Kit JavaScript is loaded, so the only third party
   on this page is the analytics tag the colophon declares.
   ========================================================================== */

.enrol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin: 0;
}

.enrol input[type="email"] {
  flex: 1 1 15ch;
  min-width: 0;
  max-width: 26ch;
  padding: 0.6em 0.85em 0.56em;
  font-family: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.enrol input[type="email"]::placeholder { color: var(--ink-faint); font-style: italic; }
.enrol input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--wax);
  box-shadow: 0 0 0 3px rgba(140, 28, 19, 0.18);
}

.enrol button { cursor: pointer; font-family: inherit; background: none; }

.enrol-done {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

/* Visible to screen readers only. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- The CTA: the one piece of wax in the type ---------------------------- */

.seal {
  display: inline-block;
  color: var(--wax);
  text-decoration: none;
  font-size: var(--t-body);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.62em 1.2em 0.58em;
  border: 1px solid var(--wax);
  border-radius: var(--radius);
  transition: background-color 140ms ease, color 140ms ease;
}
.seal:hover,
.seal:focus-visible { background-color: var(--wax); color: var(--paper); outline: none; }
.seal:focus-visible { box-shadow: 0 0 0 3px rgba(140, 28, 19, 0.28); }

/* ==========================================================================
   SECTION — the screen's two marks: letterhead emblem and wax seal
   Both are DECORATION, so both are out of flow. That is the whole point: the
   screen promises one viewport, and anything in flow spends fold budget.
   They are absolute to `.screen`, NOT fixed — fixed would float them over the
   bands during the scroll.
   Both are white-ground art composited with `multiply`, so they must sit on
   PAPER. Multiply over the dark frontispiece plate would crush them to black —
   which is why the seal is not stamped on the plate corner, where it would
   otherwise belong.
   ========================================================================== */

.emblem, .stamp {
  position: absolute;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}
.emblem {
  top: var(--frame); left: var(--frame);
  width: clamp(64px, 7vw, 96px);
  opacity: 0.92;
}
.stamp {
  right: var(--frame); bottom: calc(var(--frame) + 1.6rem);
  width: clamp(68px, 7vw, 104px);
  transform: rotate(-7deg);
}

/* Hidden wherever the layout stacks or the corners get crowded — a decoration
   that collides with the words is worse than no decoration. */
@media (max-width: 1000px), (max-height: 700px) { .stamp  { display: none; } }
@media (max-width: 860px),  (max-height: 640px) { .emblem { display: none; } }

/* --- Scroll cue ------------------------------------------------------------
   The screen is a full viewport with no visible cut-off, so without this a
   visitor has no reason to believe anything follows it. */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: calc(var(--frame) * 0.6);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.35em;

  font-size: var(--t-fine);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 1.5rem;
  background: linear-gradient(to bottom, var(--rule), transparent);
}
.scroll-cue:hover { color: var(--ink-soft); }

/* ==========================================================================
   SECTION — the bands
   ========================================================================== */

.band {
  padding: clamp(2.6rem, 7vh, 5rem) var(--frame);
  border-top: 1px solid var(--rule);
}
/* Every other band takes a faint wash so the scroll reads as separate leaves
   rather than one long column. */
.band--alt { background-color: rgba(184, 165, 134, 0.14); }

.band-inner { width: min(100%, 62rem); margin: 0 auto; }

/* Headings centre; prose keeps a left edge for readability but the BLOCK is
   centred. Ranging everything left inside a 62rem container left the right
   half of every band empty, which read as a broken layout rather than a
   choice. */
.band h2 {
  margin: 0 0 var(--s3);
  font-size: clamp(1.24rem, 2.5vw, 1.85rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.03em;
  text-align: center;
}

.band-note {
  margin: 0 auto var(--s3);
  max-width: 58ch;
  color: var(--ink-soft);
}
/* The one paragraph that introduces a band reads as a standfirst, so it centres. */
.band-lede { text-align: center; max-width: 54ch; }
.band-note em { color: var(--ink); }
.band .seal { margin-top: var(--s2); }

/* --- Band 1: the library -------------------------------------------------- */

.emblem-strip {
  display: block;
  width: min(100%, 44rem);
  margin: 0 auto var(--s4);   /* centred in the band, not ranged left */
  mix-blend-mode: multiply;
  opacity: 0.88;
}

/* --- The gallery ----------------------------------------------------------
   ⛔ This was a 13-cameo scroll rail. The scrollbar was solving a problem the
   count created. Six wraps instead: 6 across → 3×2 → 2×3, so it always divides
   evenly and never leaves an orphan on the last row. */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  width: min(100%, 46rem);
  margin: 0 auto var(--s2);
  padding: 0;
  list-style: none;
}
.gallery li { width: 100%; max-width: 108px; text-align: center; }

@media (max-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); width: min(100%, 24rem); } }
@media (max-width: 400px) { .gallery { grid-template-columns: repeat(2, 1fr); width: min(100%, 17rem); } }
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.gallery span {
  display: block;
  margin-top: 0.45em;
  font-size: var(--t-fine);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.gallery-note {
  margin: 0 0 var(--s4);
  text-align: center;
  font-size: var(--t-fine);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Band 2: the specimen ------------------------------------------------- */

/* ⛔ This was a float, and a float was wrong. Wrapping text around a tall
   portrait gave a two-or-three-word sliver beside the frame and then a hard
   jump to full width — the ragged edge read as broken, not as a book plate.
   A real two-column grid keeps every line the same measure. */
.specimen {
  display: grid;
  grid-template-columns: clamp(160px, 22vw, 248px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.3rem, 3.4vw, 2.6rem);
}

.cameo { margin: 0.3rem 0 0; }
.cameo img {
  display: block;
  width: 100%;
  height: auto;
  /* White-ground art on paper: multiply drops the ground and lets the fibre
     read through the engraving, same as every other plate here. */
  mix-blend-mode: multiply;
}

/* The heading and prose live in the right column, so they keep a left edge
   rather than taking the centred treatment the other bands use. */
.specimen-text h2 { text-align: left; }
.specimen-text .band-note { margin-inline: 0; max-width: none; }

@media (max-width: 700px) {
  .specimen { grid-template-columns: 1fr; }
  .cameo { width: min(58%, 210px); margin: 0 auto; }
  .specimen-text h2 { text-align: center; }
}

/* The question that produced the specimen. Without it the excerpt is just a
   nice sentence; with it, it is evidence. */
.band-ask {
  margin: 0 0 var(--s2);
  font-size: var(--t-small);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

blockquote { margin: 0 0 var(--s3); }
/* A second excerpt from the same answer, not a second source — the ellipsis
   marks the cut so the join is never mistaken for continuous text. */
.quote-cont { text-indent: 0; }        /* the hanging-quote indent is wrong once the mark is an ellipsis */
.quote-cont::before { content: "\2026\00A0\201C"; }
blockquote p {
  margin: 0 0 var(--s2);
  font-size: var(--t-lede);
  font-style: italic;
  line-height: 1.44;
  text-indent: -0.4em;   /* hang the opening quote mark */
}
blockquote p::before { content: "\201C"; }
blockquote p::after  { content: "\201D"; }
blockquote footer {
  font-size: var(--t-small);
  color: var(--ink-faint);
  line-height: 1.5;
}
blockquote footer strong { color: var(--ink-soft); font-weight: 400; }

/* --- Band 3: build status -------------------------------------------------- */

.status { margin: 0 0 var(--s3); }
.status > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(0.6rem, 2.5vw, 2rem);
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(184, 165, 134, 0.5);
}
.status > div:first-child { border-top: 1px solid rgba(184, 165, 134, 0.5); }
.status dt {
  font-size: var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.status dd { margin: 0; color: var(--ink-soft); max-width: 58ch; }

@media (max-width: 700px) {
  .status > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- Band 4: the comparison ----------------------------------------------- */

/* A real table, because this is a real comparison — and without the column
   headings a reader cannot tell which side is which, which was the whole
   point of the band. */
.compare {
  width: 100%;
  margin: 0 0 var(--s4);
  border-collapse: collapse;
  text-align: left;
}
.compare th,
.compare td {
  width: 50%;
  padding: 0.62em clamp(0.6rem, 2vw, 1.8rem) 0.62em 0;
  border-bottom: 1px solid rgba(184, 165, 134, 0.5);
  font-weight: 400;
  vertical-align: top;
}
.compare thead th {
  font-size: var(--t-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--rule);
}
.compare tbody td:first-child { color: var(--ink); }
.compare tbody td:last-child  { color: var(--ink-soft); }

/* ==========================================================================
   SECTION — colophon
   ========================================================================== */

.colophon {
  padding: var(--s3) var(--frame) calc(var(--frame) + var(--s2));
  border-top: 1px solid var(--rule);

  font-size: var(--t-fine);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.colophon a { color: inherit; }

/* The site claims your key never leaves the browser. It also runs an analytics
   tag. Both are true, and the second one is stated here rather than left for
   someone to find in devtools — an undisclosed tracker underneath a privacy
   claim is precisely what would discredit the claim. */
.ledger {
  margin: 0 auto var(--s3);
  max-width: 62rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.colophon-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  max-width: 62rem;
  margin: 0 auto;
}

/* Dark-mode browsers force-invert a cream page and the ink reads white.
   Declaring the scheme keeps the paper as paper. */
:root { color-scheme: only light; }

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