/* ============================================================================
   The Library - orendaacademy.com/library/

   ⚠ THIS WAS REBUILT THREE TIMES. Read why before restyling it.

   The first two versions used tokens.css and were STILL off-brand, because
   TOKENS ARE NOT A DESIGN - they carry colour and type and nothing else. The
   second version was a full-width grid of bordered cards under a dark
   masthead. Every part of that is something this brand does not do:

     - `pastures/site-v2/src/pages/bitcoin.astro` says it in its own header:
       "The parallels are one line each - label, dash, sentence. They were CARDS
       with gold rules; THE CARDS WERE THE SPRAWL." Kyle cut cards from exactly
       this kind of page. Do not bring them back.
     - Same file: "five full bands spent ~700px on padding" - sections share ONE
       band rather than each getting their own.
     - The farm never opens on a dark band. Forest is for the footer and the
       closing offer; you land on cream.

   So: one narrow column, flat on the page, sections divided by hairline rules,
   gold on a single word or an edge and nowhere else. The 820px measure is
   lifted from `.why .band-inner` on the Bitcoin page; the 62ch text measure
   from the same file.

   Nav and footer are ported rule for rule from the farm's Nav.astro and
   Footer.astro. When adding a page here, COPY THE COMPONENT - do not rebuild
   it from tokens, which is how the first two attempts went wrong.

   Checked at 1280px and 390px. A layout reviewed only at desktop width looks
   fine and is unreadable on a phone.
   ========================================================================== */

/* margin: 0 is here because nothing else sets it - tokens.css styles body but leaves the
   browser default 8px, which put a cream gutter round every forest band on the live site
   and an inset hero on this one. Found 2026-09-13 at 390px. */
/* 2026-09-15: one line changed here ON PURPOSE to move the ?v= hash. Cloudflare's edge had cached
   the home page's HTML under /library/library.css?v=35317cdf (the _redirects limit incident,
   see public/_redirects) and browsers hold it for four hours; a new hash sidesteps that. */
body { background: var(--bg); margin: 0; }

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Nav - ported from the farm's Nav.astro ------------------------------- */
.nav {
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.nav__name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text);
  line-height: 1;
}
.nav__right { display: flex; align-items: center; gap: 24px; }
.nav__link {
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  text-decoration: none;
  color: var(--text);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--gold-dark); }
.btn--sm { padding: 9px 18px; font-size: 13px; text-decoration: none; }

/* --- The opening ----------------------------------------------------------
   A headline, not a masthead. The Bitcoin page's own note: "an argument page
   needs a headline." Gold carries one phrase inside it and appears nowhere
   else above the fold. */
.masthead { padding-top: clamp(46px, 6vw, 70px); padding-bottom: 8px; }
.masthead h1 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 14px;
  line-height: var(--lh-tight);
  max-width: 17ch;
}
.masthead h1 em { font-style: normal; color: var(--gold-dark); }
/* THE LEDE CARRIES ITS OWN WEIGHT. Rendering every lead paragraph as .intro gave
   two identical blocks of small muted text and read as a wall - Kyle, 2026-08-30:
   "the header copy formatting is still bad." Larger, full-strength ink, and what
   follows it stays quiet. */
.masthead .lede {
  font-size: clamp(17px, 1.7vw, 19.5px);
  line-height: 1.62;
  color: var(--text);
  margin: 0 0 14px;
  max-width: 58ch;
}
.masthead .intro { color: var(--text-muted); max-width: 62ch; margin: 0; }
/* The lead can be more than one paragraph now, and margin:0 ran them together
   into a wall. Found on the first render of the rewritten lead, 2026-08-30. */
.masthead .intro + .intro { margin-top: 15px; }

/* --- Sections share one band, divided by hairlines ------------------------ */
.sheet { padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(38px, 5vw, 54px); }
.sec {
  margin: 0 0 2px;
  font-size: clamp(22px, 2.4vw, 26px);
  padding-top: 34px;
  border-top: 1px solid var(--border);
}
.sec--first { border-top: 0; padding-top: 30px; }
.sec__l { color: var(--text-muted); font-size: var(--fs-ui); margin: 0 0 26px; }

/* --- The nine ideas: one line each, no cards ------------------------------ */
.ideas { list-style: none; margin: 0; padding: 0; }
.idea {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.idea:last-child { border-bottom: 0; }
.idea > a { display: contents; text-decoration: none; color: inherit; }
.idea__n {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--text-light);
  line-height: 1.5;
}
.idea__t {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  margin: 0;
  line-height: 1.35;
}
.idea a:hover .idea__t { color: var(--accent); }
.idea__l { color: var(--text-muted); margin: 3px 0 0; font-size: var(--fs-ui); }
.idea__s {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-light);
  margin: 5px 0 0;
}
.idea--off .idea__t { color: var(--text-muted); }

/* --- The works: one line each -------------------------------------------- */
.works { list-style: none; margin: 0; padding: 0; }
.work { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.work:last-child { border-bottom: 0; }
.work > a { text-decoration: none; color: inherit; display: block; }
.work__t { font-family: var(--font-serif); font-size: 17px; }
.work a:hover .work__t { color: var(--accent); }
.work__m {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-light);
  margin: 3px 0 0;
}
.work--off .work__t { color: var(--text-muted); }

/* Unwritten is said once, quietly, in the metadata line - never as a badge on
   every row. Twenty-two pills is the sprawl again in a different costume. */
.soon { color: var(--text-light); font-style: italic; }

/* --- The tiles: the written pieces, on the index -------------------------
   ⚠ NOT A RETURN OF CARDS. See the note at the top of this file. Two large
   tiles carrying the piece's own artwork is a cover; a grid of small bordered
   boxes with badges is the sprawl Kyle cut. Keep them big and keep them few. */
.tiles { display: grid; gap: 22px; margin: 26px 0 0; }
@media (min-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; gap: 26px; } }

.tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  background: var(--card);
}
.tile:hover { border-color: var(--gold-dark); }
.tile__art {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.tile__body { display: block; padding: 18px 20px 20px; }
.tile__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-spacing);
  color: var(--text-light);
  margin-bottom: 7px;
}
.tile__t {
  display: block;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: var(--lh-heading);
  color: var(--text);
}
.tile:hover .tile__t { color: var(--accent); }
/* COMING SOON. Deliberately a different object from a written tile: no artwork,
   no link, no read time. The difference is the signal - eight identical boxes
   where six are empty is the slate Kyle cut once already, in a new costume. */
.tiles--soon { margin-top: 14px; }
@media (min-width: 720px) { .tiles--soon { grid-template-columns: 1fr 1fr 1fr; gap: 14px; } }
.soon__h {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-spacing);
  color: var(--text-light);
  margin: 34px 0 0;
}
.tile--soon {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-soft);
  cursor: default;
}
.tile--soon:hover { border-color: var(--line-soft); }
.tile--soon .tile__body { padding: 15px 16px 16px; }
.tile--soon .tile__t { font-size: 17px; color: var(--text-muted); }
.tile--soon .tile__m { font-size: var(--fs-caption); }
.tile__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-spacing);
  color: var(--text-light);
  margin-bottom: 7px;
}

.tile__m {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  color: var(--text-muted);
  margin-top: 5px;
}

/* --- The Academy home: a hero, then two DOORS ---------------------------
   ⚠ A DOOR IS NOT A TILE, and that is the whole point of this block. Kyle,
   2026-08-30: "the library tile cant look the same as a tile ON the library."
   Tile  = ink on cream, plain image, text in a white body underneath.
   Door  = tall, image-led, cream type ON a flat forest overlay, with an arrow.
   ⚠ The hero above stays CREAM. This file's own header records it: the farm
   never opens on a dark band - forest is for the footer and the closing offer,
   and the doors sit in that position. */
.hero { padding-top: clamp(46px, 6vw, 78px); padding-bottom: clamp(40px, 5vw, 60px); }
.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-spacing);
  color: var(--text-light);
  margin: 0 0 12px;
}
/* `.hero` is the Academy HOME only - the shelf and the work pages use
   .masthead. So this measure is safe to tune for one headline. It was 18ch,
   which suited the 43-character headline it was built for; Kyle's 93-character
   one wrapped to five lines and left "agriculture." alone on the last, and
   pushed both doors under the fold. 30ch holds it to three and is the last
   value that changes anything - 32ch and up wrap identically, because 820px is
   where the line breaks naturally. Changed 2026-08-30 with the copy, not before
   it - the measure follows the words. */
.hero h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: var(--lh-tight);
  margin: 0 0 16px;
  max-width: 30ch;
}
.hero h1 em { font-style: normal; color: var(--gold-dark); }
/* 2026-09-13: the gold moved down to the line with Kyle's new copy - the H1 is a greeting now. */
.hero__l em { font-style: normal; color: var(--gold-dark); }
.hero__l { font-size: clamp(17px, 1.8vw, 20px); color: var(--text); max-width: 48ch; }
.hero__l {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 54ch;
  margin: 0;
}

.doors { display: grid; gap: 18px; margin: 38px 0 0; }
@media (min-width: 760px) { .doors { grid-template-columns: 1fr 1fr; gap: 22px; } }
.doors > * { min-width: 0; }

.door {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--forest);
  min-height: 400px;
}
/* THE BOOK DOOR IS EARTH, NOT FOREST, and it is not a style preference. The
   cover art has a deep forest band through its middle, so on a forest door the
   book dissolved into the background and read as two floating cream fragments.
   Earth separates it cleanly, and two doors in two brand colours tell a reader
   they are two different things before they read a word. Found 2026-08-30. */
.door--book { background: var(--earth); }
.door__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* A FLAT overlay, never a gradient - the brand does not do digital gradients,
   and flat keeps the type legible over every part of the artwork. */
.door--library::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(43, 59, 34, 0.78);
}
.door__in {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 400px;
  padding: 28px 28px 26px;
}
.door__cover {
  display: block;
  margin: 0 auto auto;
  padding: 6px 0 22px;
}
.door__cover img {
  display: block;
  height: 200px; width: auto;
  margin: 0 auto;
  box-shadow: 0 10px 26px rgba(29, 31, 30, 0.34);
}
.door__foot { display: block; }
.door__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-spacing);
  color: var(--gold);
  margin-bottom: 8px;
}
.door__t {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: var(--lh-heading);
  color: var(--cream);
}
.door__l {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
  margin: 9px 0 0;
  max-width: 42ch;
}
.door__go {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--gold);
  margin-top: 16px;
}
.door:hover .door__go { text-decoration: underline; text-underline-offset: 3px; }
.door:hover .door__t { color: #fff; }

/* Doors and tiles shorter on a phone, 2026-09-13 - "resize tiles for mobile layout". A 330px
   door and a 3:2 tile image each ate most of a phone screen; the page was all scroll. */
@media (max-width: 600px) {
  .door, .door__in { min-height: 230px; }
  .door__in { padding: 20px 20px 18px; }
  .door__cover { padding: 4px 0 14px; }
  .door__cover img { height: 110px; }
  .door__t { font-size: 22px; }
  .door__l { font-size: 14px; margin-top: 6px; }
  .door__go { margin-top: 10px; }
  .tile__art { aspect-ratio: 2 / 1; }
  .tile__body { padding: 13px 16px 15px; }
  .tile__t { font-size: 19px; }
  .tiles { gap: 16px; }
  .hero { padding-top: 30px; padding-bottom: 28px; }
  .hero h1 { font-size: 28px; }
  .doors { margin-top: 24px; gap: 14px; }
}

/* --- A piece -------------------------------------------------------------- */
.back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  text-decoration: none;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.back::before { content: "\2190"; margin-right: 7px; }
.back:hover { color: var(--accent); }

.piece { padding-top: clamp(34px, 4vw, 48px); }
/* THE PIECE HEADER, rebuilt 2026-09-13. Kyle on the old one, from a phone: "the title and
   header it's hideous." What it was: a three-part uppercase eyebrow that wrapped to two
   lines at 390px, a 26px regular-weight title with no air, then a wall of grey idea names
   that linked nowhere (no idea page is published). What it is: author and year as a short
   eyebrow, the title big and bold, one quiet meta line, a hairline. The idea names only
   render when an idea page exists to link to. */
/* Every header selector below is doubled with .piece-hero: the hero div sits OUTSIDE
   article.piece, and on 2026-09-13 half the header styling silently missed it. */
.piece .eyebrow, .piece-hero .eyebrow { margin: 0 0 14px; }
.piece h1, .piece-hero h1 {
  font-size: clamp(34px, 5.2vw, 48px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.1;
  max-width: 18ch;
}
/* The gold: the brand spec's short harvest-gold underline under a Lora heading, and the
   byline in gold. Kyle on the first hero, 2026-09-13: "formatting sucks and need splash of
   color or something." The rule sits between title and byline; the deck follows tight. */
.piece .byline, .piece-hero .byline { font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 500; color: var(--gold-dark); margin: 0 0 14px; }
.piece h1::after, .piece-hero h1::after { content: ""; display: block; width: 56px; height: 3px; background: var(--gold); margin: 16px 0 14px; }
.piece-hero .byline { color: var(--gold); }
.piece-hero .deck { font-size: clamp(17px, 1.9vw, 20px); max-width: 44ch; }
.piece .deck, .piece-hero .deck {
  font-family: var(--font-sans);
  font-size: clamp(16.5px, 1.7vw, 18.5px);
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  max-width: 54ch;
}
.piece-hero .deck { color: var(--cream); }
.piece-hero .deck em { color: var(--cream); font-style: italic; }
.piece .meta {
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  color: var(--text-muted);
  margin: 0 0 30px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--border);
}
.piece .sub { color: var(--text-muted); margin: 0 0 22px; max-width: 52ch; }

/* --- THE HERO, 2026-09-13 ----------------------------------------------------------------
   The header laid over a plate under a FLAT forest overlay - the same treatment as the
   Academy doors, so it is already in the brand's vocabulary; never a gradient. The plate
   is one of the piece's own illustrations, generated for this slot, so nothing appears on
   the page twice. Type is cream, the eyebrow gold. The image shows through at about a
   third; enough to read as a place, not enough to fight the title. */
.piece-hero { position: relative; background: var(--forest); overflow: hidden; }
.piece-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.piece-hero::after { content: ""; position: absolute; inset: 0; background: rgba(43, 59, 34, 0.66); }
.piece-hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(340px, 42vw, 480px); padding-top: 28px; padding-bottom: 40px; }
.piece-hero .back { color: color-mix(in srgb, var(--cream) 78%, transparent); margin-bottom: auto; padding-bottom: 40px; }
.piece-hero .back:hover { color: var(--gold); }
.piece-hero .eyebrow { color: var(--gold); }
.piece-hero h1 { color: var(--cream); margin-bottom: 0; font-size: clamp(38px, 5.8vw, 58px); }
.piece-hero .meta { color: color-mix(in srgb, var(--cream) 78%, transparent); border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.piece--hero { padding-top: clamp(24px, 3vw, 36px); }
@media (max-width: 640px) { .piece-hero__in { min-height: 320px; padding-bottom: 30px; } }
.cited, .feeds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 34px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-light);
}
.feeds a { color: var(--text-muted); }

.prose { max-width: 62ch; }
.prose h2 { font-size: clamp(21px, 2.2vw, 24px); margin: 46px 0 12px; }
/* Section headings bolder and bigger, 2026-09-13 - at 19px regular they sank into the
   17px body on a phone. Kyle: "the sub headers aren't bold enough to pop." */
.prose h3 { font-size: clamp(22px, 2.5vw, 26px); font-weight: 600; margin: 44px 0 12px; line-height: 1.2; }
.prose h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-spacing);
  color: var(--text-muted);
  margin: 30px 0 8px;
}
.prose p { margin: 0 0 18px; }
.prose strong { font-weight: 600; color: var(--text); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 40px 0; }
.prose code {
  font-size: 0.92em;
  background: var(--cream-dark);
  padding: 1px 5px;
  border-radius: 4px;
}
/* ⚠ GREY, NOT GOLD, AND THE REASON MATTERS. This started as the gold-edged
   pull quote ported from the creed on /bitcoin/. On a Library piece a
   blockquote is always the BOOK talking - the thesis quote and every receipt -
   and gold means Orenda everywhere else on the farm. Leaving it gold would
   have said the source's words were ours, which is the one thing a piece
   built on quoting other people cannot get wrong. Gold moved to .sec-p--orenda
   below. Changed 2026-08-29 when the first piece was written; before that no
   page on this site had a blockquote, so nothing looked wrong. */
.prose blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--border);
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--text-muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* --- Two voices, one device ----------------------------------------------
   Gold left rule = Orenda talking (why it's in the book, the collisions,
   Kyle's read). Grey left rule = the source talking. The reader can tell which
   is which without being told, which is the whole value of the format.
   Do NOT add a third colour, a background tint, or a second typeface here. */
.sec-p { margin: 0; }
.sec-p--orenda {
  border-left: 2px solid var(--gold);
  padding-left: 20px;
}
.sec-p--orenda > h3 { margin-top: 34px; }

/* --- Claim and receipt ---------------------------------------------------
   The eight claims. Closed by default; the receipt is for the reader who wants
   proof. Native <details>, so this works with no JavaScript and prints open. */
.claim { border-bottom: 1px solid var(--line-soft); padding: 15px 0; }
.claim:first-of-type { border-top: 1px solid var(--line-soft); }
.claim > summary {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}
.claim > summary::-webkit-details-marker { display: none; }
.claim__n {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.claim__t { display: block; font-size: 18px; line-height: 1.45; }
/* Lowercase on purpose. Uppercase with the eyebrow letter-spacing wrapped a
   frame tag onto three lines at 390px, which turned the one design idea into
   the sprawl. Checked on a phone 2026-08-29. */
.claim__f,
.claim__cue {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
}
.claim__cue { text-transform: uppercase; letter-spacing: var(--eyebrow-spacing); font-size: var(--fs-eyebrow); }
.claim__f { margin-top: 6px; color: var(--text-muted); }
/* A claim that never declared its frame looks broken on purpose. */
.claim__f--missing { color: var(--accent); }
.claim__cue { margin-top: 6px; color: var(--gold-dark); }
.claim__cue::before { content: "\25B8"; margin-right: 6px; }
.claim[open] .claim__cue { visibility: hidden; }
.claim summary:hover .claim__t { color: var(--accent); }
.claim blockquote { margin: 14px 0 2px 2.4em; }
@media (max-width: 480px) {
  .claim > summary { grid-template-columns: 1.9em 1fr; }
  .claim blockquote { margin-left: 0; }
  .sec-p--orenda { padding-left: 14px; }
}


/* ============================================================================
   THE PIECE PAGE - ported from the approved design, 2026-08-30.
   One addition to the brand kit, and it earns its place: --loss, the red of
   oxidised subsoil. It is the colour you are looking at when the topsoil has
   gone, so it carries every loss figure on the page and NOTHING else. Do not
   reach for it for ordinary emphasis.
   ========================================================================== */
:root { --loss: #8A3A24; }

/* The piece page runs the full 820 column so the case profile and the two
   grids can breathe; running prose keeps its own 64ch measure. Without this
   the .prose 62ch cap squashes a five-column row into a stack on desktop. */
.piece .prose { max-width: none; }
.piece .prose > .sec-p > p,
.piece .prose > .sec-p > ul,
.piece .prose > .sec-p > ol,
.piece .prose > .sec-p > blockquote { max-width: 64ch; }
.piece .claim > summary { max-width: 64ch; }

/* --- The mechanism: one sequence, set as a row ---------------------------- */
/* --- The illustration band ---
   ⚠ CLASS IS .illus, NOT .band - `.band` is already the page shell's layout
   class (`<article class="band piece">`) and reusing it silently constrained
   every illustration to the wrong width. Collision found 2026-08-30. ------------------------------------------------
   ⚠ aspect-ratio + object-fit:cover means only the MIDDLE 5:2 of a 3:2 plate is
   ever on the page. generate.py writes a _crop-*.png proving what that is, and
   THAT is the file to judge - an image can look fine at full size while its
   middle is nothing at all. Found 2026-08-30.

   ⚠ height:auto is a GUARD, not a style. A broken <img> falls back to its
   width/height attributes and would render 933px tall, which is exactly what
   tore the book-cover band apart on 2026-08-29. Do not remove it. */
/* The caption is the label tying the picture to the case beside it, so it is
   set as page furniture - small sans, muted, hanging under the image - never as
   a competing piece of prose. */
.illus figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-light);
  line-height: 1.5;
  margin-top: 9px;
  max-width: 62ch;
}
.illus { margin: 32px 0; }
.illus img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 2; object-fit: cover;
  background: var(--card); border: 1px solid var(--border);
}
@media (max-width: 600px) { .illus { margin: 24px 0; } .illus img { aspect-ratio: 3 / 2; } }

/* --- A chart -------------------------------------------------------------
   ⚠ NOT CROPPED, unlike .illus. An illustration is decoration and can lose its
   edges to a 5:2 band; a chart is evidence, and cutting the middle out of it
   makes it wrong. Natural ratio, no border - the chart's own cream ground is
   the page's cream ground, so it sits on the page rather than in a box. */
.chart { margin: 34px 0; }
.chart img { display: block; width: 100%; height: auto; }

/* ⚠ THE BEAT ROW IS FIVE WIDE, HARD-CODED, SO A MECHANISM MUST BE FIVE BEATS.
   A sixth beat wraps to a second row and leaves a large empty cell beside it,
   which reads as a broken page rather than a design. Found writing piece 02 on
   2026-08-30; LIBRARY-PIECE-FORMAT.md had promised "four to six" and now says
   five. If a book genuinely needs six, change this line - do not ship the
   orphan. */
.beats { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 22px 0 0; }
@media (min-width: 720px) { .beats { grid-template-columns: repeat(5, 1fr); } }
.beat { background: var(--card); padding: 17px 16px; }
.beat b { display: block; font-family: var(--font-serif); font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.beat span { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* ⚠ THE .prose SELECTORS BELOW ARE LOAD-BEARING. These headings are <h4>, and
   .prose h4 is a small-caps sans eyebrow - it beats a bare class on specificity
   and silently turned every case name into an uppercase label. Do not shorten
   .prose .case__where back to .case__where. Found on the first live render,
   2026-08-30. */

/* --- The case file: a soil profile ---------------------------------------
   The rail colour is computed per case by the generator - dark organic topsoil
   at the top of the record, pale exhausted subsoil at the bottom - so the
   section reads downward the way a soil pit does. */
.profile { margin: 26px 0 0; }
.case { display: grid; grid-template-columns: 14px 1fr; gap: 0 22px; padding: 26px 0; border-bottom: 1px solid var(--line-soft); }
.case:first-child { border-top: 1px solid var(--border); }
.horizon { border-radius: 2px; }
.prose .case__where { font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin: 0; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--text); }
.case__when { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--eyebrow-spacing); color: var(--text-light); margin: 5px 0 0; font-variant-numeric: tabular-nums; }
.case__body { margin: 12px 0 0; font-size: 16px; line-height: 1.6; }
.case__body p { margin: 0 0 10px; }
.case__body p:last-child { margin-bottom: 0; }

.figure { display: block; font-family: var(--font-serif); color: var(--loss); font-size: clamp(21px, 3vw, 26px); line-height: 1.3; font-weight: 600; margin: 14px 0 0; max-width: 46ch; }
.figure small { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-light); margin-top: 5px; }

/* The book talking, wherever it appears inside a block. */
.said { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); border-left: 2px solid var(--border); padding-left: 14px; margin: 14px 0 0; font-size: 15.5px; max-width: 56ch; }

/* --- The ones that held ---------------------------------------------------
   Living green, never the loss colour. If every work on the shelf confirmed
   the worldview the shelf would be propaganda; these are the proof it isn't. */
.held { display: grid; gap: 14px; margin: 24px 0 0; }
@media (min-width: 700px) { .held { grid-template-columns: repeat(3, 1fr); } }
.holds { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--pasture); padding: 20px 18px; }
.prose .holds h4 { font-family: var(--font-serif); font-size: 19px; margin: 0 0 4px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
.holds .when { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: var(--eyebrow-spacing); color: var(--text-light); font-weight: 600; margin: 0 0 10px; }
.holds p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--text-muted); }

/* --- Collisions ----------------------------------------------------------- */
.collide { border-top: 1px solid var(--border); padding: 24px 0 0; margin: 24px 0 0; }
.prose .collide h4 { font-family: var(--font-serif); font-size: 21px; margin: 0 0 3px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
.collide .who { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--eyebrow-spacing); color: var(--text-light); margin: 0 0 12px; }
.breaks { margin: 14px 0 0; padding: 14px 18px; background: var(--cream-dark); font-size: 15.5px; line-height: 1.6; }
.breaks b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: var(--eyebrow-spacing); color: var(--loss); margin-bottom: 5px; }
.breaks--missing { color: var(--loss); }

/* --- The closing band -----------------------------------------------------
   GOLD SPARINGLY. tokens.css says so outright, and a solid gold panel here
   read as an advert dropped onto the piece rather than part of it. Forest
   ground; gold is the eyebrow, the hairline and the price. Nothing else. */
.getit { background: var(--bg-dark); color: var(--on-dark); margin-top: 66px; padding: 56px 0 60px; }
.getit .wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }
/* THE BOOK CTA, third shape, 2026-09-13. Two earlier shapes died the same day: a bordered
   tile that repeated the title under a small grey sentence ("this is your idea of good
   formatting mate?"), then a bare sentence with a cover floating beside a button ("worse").
   Kyle's brief after that: take creative license, make it look like a real website CTA.
   So: a lifted panel on the forest band, the cover large on the left with a real shadow,
   and on the right the four things every product CTA has - eyebrow, title, one line, one
   button. The eyebrow and the sub-line are Kyle's sentence, split at its natural joint.
   Gold is spent twice: the eyebrow and the button. Nothing else on the band is gold. */
.getit__panel { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; background: var(--forest-light); border: 1px solid #4F6641; padding: 36px 40px 36px 36px; }
/* A PANEL WITH NO COVER RUNS ONE COLUMN. The whitepaper and Shelling Out are not books and have
   no cover, and on 2026-09-13 their buy panels rendered the whole text inside the 200px cover
   column - Kyle: "all fucked up at the bottom." The generator stamps .getit__panel--nocover
   when there is no cover image; the text then takes the full width and the lede its own measure.
   The phone rule below repeats it, because .getit .getit__panel outranks a bare class. */
.getit__panel--nocover { grid-template-columns: 1fr; }
.getit__panel--nocover .getit__lede { max-width: 58ch; }
.getit__cover { display: block; width: 200px; }
.getit__cover img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.5; object-fit: cover; border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); }
.getit__eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--eyebrow-spacing); color: var(--gold); margin: 0 0 12px; }
.getit h2 { color: var(--on-dark); font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 6px; }
.getit__sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.4; color: var(--on-dark-muted); margin: 0 0 16px; }
.getit__lede { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65; color: var(--on-dark-muted); margin: 0 0 24px; max-width: 46ch; }
.getit__lede em { color: var(--on-dark); font-style: normal; }
.getit__btn { text-decoration: none; padding: 15px 30px; font-size: 15px; white-space: nowrap; }
.getit__price { font-family: var(--font-sans); font-size: 15px; color: var(--on-dark-muted); margin-left: 16px; white-space: nowrap; }
@media (max-width: 640px) {
  .getit { padding: 40px 0 44px; }
  .getit__panel { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px 30px; }
  .getit__cover { width: 150px; margin: 0 auto; }
  .getit__body { text-align: center; }
  .getit__lede { margin-left: auto; margin-right: auto; }
  .getit__price { display: block; margin: 12px 0 0; }
}

/* THE TWO ASKS, 2026-09-13. The Fundamentals panel moved to the MIDDLE of the essay
   (.getit--mid, placed between two sections by the generator) and the foot of the page now
   sells the source book (.getit--buy) with the same panel: cover left, eyebrow / title / by-line
   / one sentence / one button. Kyle's brief: the mid one is "Enjoying this?", the foot one is
   the affiliate ask made attractive, and it says in words that it is an affiliate link and the
   proceeds support the farm and the work. The old .also block (a text link, an ISBN, a grey
   disclosure line) is gone with it. */
.getit--mid { margin: 46px 0; padding: 0; }
.getit--mid .wrap { max-width: none; padding: 0; }
.getit--mid .getit__panel { padding: 30px 34px 30px 30px; gap: 32px; grid-template-columns: 150px 1fr; }
.getit--mid .getit__cover { width: 150px; }
.getit--mid h2 { font-size: clamp(24px, 3vw, 30px); }
/* The source books' covers come in every proportion (Human Action lists as a boxed set), so
   the buy panel shows the whole image rather than cropping it to the Fundamentals ratio. */
.getit--buy .getit__cover img { aspect-ratio: auto; object-fit: contain; }
.getit--buy .getit__price { font-variant-numeric: tabular-nums; }
/* THE SHELF, 2026-09-13. Hero like the pieces; the tiles start straight under it; the book
   panel at the foot uses the piece-page band. */
.shelf-hero .back { margin-bottom: auto; }
.shelf-hero h1 { max-width: none; }
.shelf-hero .deck { margin-top: 0; max-width: 60ch; }
.shelf-hero .deck--quiet { color: color-mix(in srgb, var(--cream) 78%, transparent); font-size: clamp(15.5px, 1.6vw, 17.5px); margin-top: 10px; }
.sheet--shelf { padding-top: clamp(26px, 3.4vw, 40px); }
.sheet--shelf .tiles { margin-top: 0; }
/* Five tiles in two columns leaves one alone on the last row and reads unfinished. The
   first tile runs the full width with a wider crop, then two rows of two. */
@media (min-width: 720px) {
  .sheet--shelf .tiles > .tile:first-child { grid-column: 1 / -1; }
  .sheet--shelf .tiles > .tile:first-child .tile__art { aspect-ratio: 5 / 2; }
}
.getit--foot { margin-top: 0; }
/* PHONE PANELS, 2026-09-13 - Kyle: "the mobile Fundamentals CTA is too big... make smaller
   but keep the cover shot in there." Cover small on the left, text beside it, everything a
   size down; the earlier stacked-and-centred version ran most of a screen. */
@media (max-width: 640px) {
  .getit--mid { margin: 30px 0; }
  /* .getit .x outranks the .getit--mid .x desktop rules above; a bare .getit__panel did not. */
  .getit .getit__panel { grid-template-columns: 84px 1fr; gap: 16px; padding: 18px 16px 18px 16px; align-items: start; }
  .getit .getit__panel--nocover { grid-template-columns: 1fr; }
  .getit .getit__cover { width: 84px; margin: 0; }
  .getit__cover img { box-shadow: 0 8px 18px rgba(0,0,0,.4); }
  .getit .getit__body { text-align: left; }
  .getit__eyebrow { font-size: 11px; margin-bottom: 6px; }
  .getit h2 { font-size: 20px; margin-bottom: 3px; }
  .getit .getit__sub { display: none; }   /* the subtitle is three italic lines at this width */
  .getit h2 { margin-bottom: 8px; }
  .getit__lede { font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
  .getit__btn { padding: 10px 18px; font-size: 13.5px; }
  .getit .getit__price { display: inline; margin: 0 0 0 10px; font-size: 13px; }
}

@media (max-width: 620px) {
  .case { grid-template-columns: 8px 1fr; gap: 0 16px; }
}

/* --- The close - a plain invitation, ported from .close on /bitcoin/ ------ */
.offer {
  background: var(--bg-dark);
  color: var(--on-dark);
  padding-top: clamp(34px, 4.5vw, 48px);
  padding-bottom: clamp(34px, 4.5vw, 48px);
}
.offer h2 { color: var(--on-dark); font-size: clamp(22px, 2.4vw, 26px); margin: 0 0 10px; }
.offer p { color: var(--on-dark-muted); margin: 0 0 22px; max-width: 44ch; }
.offer .btn { text-decoration: none; }

/* --- Footer - one line, 2026-09-13 ("go bare minimal") --------------------- */
.foot { background: var(--bg-dark); color: var(--on-dark-muted); border-top: 1px solid var(--gold-dark); }
.foot__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 13px;
}
.foot__name { font-family: var(--font-serif); font-size: 15px; color: var(--on-dark); }
.foot__links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot__links a { color: var(--on-dark-muted); text-decoration: none; }
.foot__links a:hover { color: var(--gold); }
.foot__copy { color: var(--gold-soft); font-size: 12px; }

:where(a, button):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Phone ---------------------------------------------------------------- */
/* PHONE NAV, 2026-09-13 - Kyle's read of the live home on his phone: "get the book on the top
   right nav, eliminate Orenda Pastures button, remove Orenda Academy stub". The nav no longer
   wraps to a second row: brand left, the one gold button right, the Pastures link hidden at
   phone width (the footer still carries it). */
@media (max-width: 640px) {
  .nav__inner { padding: 8px 18px; gap: 12px; flex-wrap: nowrap; min-height: 56px; }
  .nav__right { gap: 0; width: auto; }
  .nav__link { display: none; }
  .nav__name { font-size: 17px; }

  .masthead { padding-top: 34px; }
  .masthead h1 { max-width: none; }

  .idea { grid-template-columns: 2.2rem 1fr; }
  .foot__inner { padding: 14px 18px; gap: 8px 16px; }
}