/* ============================================
   Components — michaeldariuseastwood.com
   Eden Design DNA · Glass cards · Gold accents · Premium micro-interactions
   ============================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.65rem 1.35rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--gold-btn);
  color: #ffffff;
  border-color: var(--gold-btn);
  box-shadow: 0 2px 12px hsla(38, 65%, 42%, 0.25);
}

.btn-primary:hover {
  background: var(--gold-btn-hover);
  border-color: var(--gold-btn-hover);
  color: #ffffff;
  box-shadow: 0 6px 24px hsla(38, 65%, 42%, 0.32);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--ink-sec);
  border-color: var(--border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-secondary:hover {
  background: var(--bg-surface);
  border-color: var(--gold-border);
  color: var(--ink);
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--bg-accent);
  color: var(--text-inverse);
  border-color: var(--bg-accent);
}

.btn-dark:hover {
  background: var(--bg-accent-soft);
  color: var(--text-inverse);
  border-color: var(--gold);
}

@media (max-width: 720px) {
  .btn {
    padding: 0.7rem 1.2rem;
    font-size: var(--text-xs);
  }
}

/* ---- Cards (glass-morphism + warm-tinted shadow) ---- */
.card {
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--gold-border);
  transform: translateY(-2px);
}

/* -- Gold hairline at top of card on hover -- */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, hsla(38, 65%, 42%, 0.04), transparent 60%);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
}

.card:hover::before { opacity: 1; }

.card-surface {
  background: var(--bg-surface);
  border-color: var(--hairline);
}

/* ---- Nav ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: hsla(42, 25%, 97%, 0.88);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2xl);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--ink);
}

.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(28, 28, 25, 0.08);
}

.nav-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.nav-links {
  display: flex;
  gap: var(--space-2xl);
  list-style: none;
}

.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-sec);
  transition: color var(--duration-fast) var(--ease-out);
  letter-spacing: 0.01em;
}

.nav-links a:hover {
  color: var(--gold-text);
}

@media (max-width: 720px) {
  .site-nav {
    height: auto;
    padding: var(--space-sm) 0;
  }
  .nav-inner {
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0 var(--space-lg);
  }
  .nav-brand { gap: var(--space-sm); width: 100%; }
  .nav-avatar { width: 28px; height: 28px; }
  .nav-name { font-size: var(--text-sm); }
  .nav-links {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-lg);
    padding: var(--space-xs) 0;
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex-shrink: 0; white-space: nowrap; }
  .nav-links a { font-size: 0.6875rem; }
}

/* ---- Evidence badge ---- */
.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-sec);
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.evidence-badge:hover {
  border-color: var(--gold-border);
  color: var(--gold-text);
}

/* ---- Proof item ---- */
.proof-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.proof-item .stat-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: linear-gradient(135deg, var(--ink) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Book formats ---- */
.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.format-card {
  padding: var(--space-xl);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
  background: var(--paper-card);
}

.format-card:hover {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.format-type {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-bottom: var(--space-xs);
}

.format-price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

@media (max-width: 720px) {
  .format-grid { grid-template-columns: 1fr; }
}

/* ---- Story prose ---- */
.story-prose {
  font-size: var(--text-md);
  color: var(--ink-sec);
  line-height: 1.85;
  margin-bottom: var(--space-lg);
}

.story-closing {
  font-size: var(--text-md);
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}

/* ---- Contact ---- */
.join-text {
  color: var(--ink-sec);
  margin-bottom: var(--space-2xl);
  line-height: 1.7;
}

.join-buttons {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Section backgrounds ---- */
section:nth-child(even) {
  background: var(--bg-surface);
}

section:nth-child(odd) {
  background: var(--bg-primary);
}

/* ---- Footer ---- */
.site-footer {
  background: var(--bg-accent);
  color: var(--text-inverse);
  padding: var(--space-4xl) 0 var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsla(38, 65%, 42%, 0.3), transparent);
}

.site-footer a {
  color: hsla(42, 25%, 97%, 0.6);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer a:hover {
  color: var(--gold);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2xl);
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsla(42, 25%, 97%, 0.4);
  margin-bottom: var(--space-md);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-tagline {
  color: hsla(42, 25%, 97%, 0.55);
  max-width: 400px;
  line-height: 1.75;
  font-size: var(--text-sm);
}

.footer-bottom {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid hsla(42, 25%, 97%, 0.08);
  font-size: var(--text-xs);
  color: hsla(42, 25%, 97%, 0.3);
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .footer-links a { font-size: var(--text-sm); }
}

/* ---- Focus-visible ---- */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
  outline: none;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- Mobile: stack CTA buttons, full-width ---- */
@media (max-width: 720px) {
  .hero-ctas {
    flex-direction: column;
  }
  .hero-ctas .btn {
    justify-content: center;
    text-align: center;
  }
}

/* ---- Claim ledger ----
   The four claims were one 532-character paragraph. Measured in a real browser
   at 390px it rendered as twelve unbroken lines with d/(d+1), alpha <= 2 and
   beta > k buried mid-sentence in body text, typographically identical to the
   words around them. The differentiator of the whole position is that the
   quantities are stated, and the layout was the one thing hiding them.

   Two columns on desktop so the quantity sits in its own gutter, stacked on a
   phone so nothing is cramped. Hairline between rows, no card, no box: this is
   a register, not a feature grid. */
.claim-ledger {
  list-style: none;
  margin: var(--space-md) 0 var(--space-xl);
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.claim-ledger li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--hairline);
}

.claim-q {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.claim-t {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink-sec);
}

@media (max-width: 720px) {
  .claim-ledger li {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    padding: var(--space-sm) 0;
  }
}

/* ---------------------------------------------------------------------------
   QUOTATIONS ARE ITALIC. Operator directive, 8 August 2026, site-wide and
   mandatory. Every quotation on every page, not only .pull-quote blocks.

   Declared on the CONTAINER as well as the paragraph on purpose. The italic
   previously lived in one declaration on ".pull-quote p", so any future rule
   touching font-style on a paragraph inside a blockquote would have silently
   killed every quotation on the site. It would have failed quietly and looked
   deliberate, which is the worst way for a convention to die.

   cite is the exception: an attribution is a caption and stays upright, so the
   quotation is the thing that stands out rather than competing with its label.
   --------------------------------------------------------------------------- */
blockquote,
blockquote p,
.pull-quote,
.pull-quote p { font-style: italic; }
blockquote cite,
.hero-epigraph cite,
.pull-quote cite { font-style: normal; }

/* The standing record: the same three columns wherever the block appears (7 September 2026).
   Sub-headings take the site's small label form, rows sit on hairlines, one column under 900px. */
.standing-record{margin:var(--space-3xl) 0 0;padding-top:var(--space-2xl);border-top:1px solid var(--hairline)}
.standing-record h2{font-size:var(--text-2xl);margin:0 0 var(--space-sm)}
.standing-record__lede{font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink-sec);max-width:62ch;margin:0 0 var(--space-xl)}
.standing-record__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl)}
.standing-record__col h3{font-family:var(--font-mono);font-size:0.625rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-text);line-height:1.4;margin:0 0 var(--space-sm)}
.standing-record__col ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.standing-record__col li{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;color:var(--ink);padding:var(--space-sm) 0;border-bottom:1px solid var(--hairline);overflow-wrap:anywhere}
.standing-record__col li sup,.standing-record__col li sub{font-size:0.72em}
.standing-record__foot{font-family:var(--font-body);font-size:var(--text-xs);color:var(--ink-sec);margin:var(--space-xl) 0 0}
@media (max-width:900px){.standing-record__cols{grid-template-columns:1fr;gap:var(--space-lg)}}
/* ---- The map: the site's own contents, after the why (9 September 2026) ----
   The operator's instruction was that the page always starts with the why, the problem and the
   belief, never with routing, and that there is one map and not three. PR 800 put this block in
   the hero's second column under the portrait, and the page also carried a journey walk and a
   field frame, so a reader met three wayfinding surfaces and three of the destinations were
   offered only once on the whole page. The three become one. This block absorbs the journey
   walk's six ordinals as its first group, keeps its own six record rows as its second, and the
   field frame moves inside it whole as its closing region. The journey block leaves the homepage.

   The idiom is unchanged and is the standing-record idiom, reused rather than reinvented: a mono
   uppercase label, rows on hairlines at --text-sm, a foot at --text-xs, and no box. Four things
   are deliberate and are not to be tidied away.

   1. THE PLACEMENT. The map is its own section after the hero and before the argument, not a grid
      child of the hero. The two-column arrangement inside the hero is therefore gone, along with
      the alignment it bought, where this block's first hairline sat level with the "I believe"
      statement. That alignment was worth less than one map instead of three, and it is recorded
      here rather than mourned. The reader who came to read scrolls past the map into the argument.

   2. THE AIR. Every row carries twelve pixels above and below, not eight. At eight each of the
      twelve rows sat flush under the rule above it and its description flush over the rule below,
      which is twenty flush edges in the block this change exists to build. The operator law is
      that text never sits flush against a line and that air is the emphasis, so each group label
      also takes twelve pixels above its list's rule and the map's heading takes thirty two below
      its own. The cost is about 96 pixels of map height at 390 and it is paid deliberately.

   3. THE TOUCH TARGET AND THE UNDERLINE, both unchanged. The link text is the label alone, per
      the 6 September ruling that a link carries no tail and no trailing punctuation; the hit area
      is the whole row, given by an empty ::after stretched over the positioned row, which clears
      44 pixels while leaving the accessible name as the label, and the description is never
      inside the anchor. brand.css exempts nav from the running-prose underline and a contents
      block is that exemption; the underline returns on hover and on focus.

   4. THE GROUP LABEL'S COLOUR. It takes --ink-sec and not the --ink-dim the single title carried.
      At 9 pixels these two labels are the map's only signposts, and --ink-dim computes to 4.09 to
      1 on this page's --paper-warm ground, below the 4.5 to 1 floor for text this size; --ink-sec
      is 5.52 to 1 and is already the colour of the descriptions and of the honesty line in the
      same block, so it costs no new decision. Grey rather than gold either way, so gold stays the
      link colour and the label does not compete with the twelve things a reader can press.

   Widths. Above 900 the two groups are columns of one full-measure block, which is the whole
   reason the map is full measure, and the resume row spans both. Below 901 they stack in reading
   order, capped at 62ch so the description lines stay readable in the hand at 720; the cap moved
   here from the deleted grid-child rule, which carried it. At 390 the container is 342 and the
   cap never binds. The portrait moves below the why on the phone, scoped to .hero--why so the one
   declaration cannot reach the seven language mirrors, which carry .hero-grid and .hero-photo-wrap
   and do not yet carry this arrangement. */
.hero-entry__eyebrow{font-family:var(--font-mono);font-size:0.625rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-text);line-height:1.4;margin:0 0 var(--space-sm)}
.hero-entry__routes{font-family:var(--font-body);font-size:var(--text-md);color:var(--ink-sec);line-height:1.75;margin:0 0 var(--space-xl);max-width:62ch}
.hero-deck{font-family:var(--font-body);font-size:var(--text-xl);line-height:1.55;color:var(--ink);margin:0 0 var(--space-xl);max-width:42ch}
.entry-map{padding:var(--space-3xl) 0 var(--space-4xl);margin:0}
.entry-map__h{border-top:1px solid var(--hairline);padding-top:var(--space-2xl);font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.2;color:var(--ink);margin:0 0 var(--space-md)}
.hero-argument{padding:var(--space-4xl) 0}
.hero-frontmatter{margin:0}
.hero-frontmatter__group{margin:0}
.hero-frontmatter__group-title{font-family:var(--font-mono);font-size:0.5625rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-sec);line-height:1.4;margin:0 0 var(--space-md)}
.hero-frontmatter ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.hero-frontmatter ul.hero-frontmatter__resume{border-top:0;margin:0}
.hero-frontmatter ul.hero-frontmatter__resume li{border-top:1px solid var(--hairline);margin-bottom:var(--space-xl)}
.hero-frontmatter li{position:relative;padding:var(--space-md) 0;border-bottom:1px solid var(--hairline)}
.hero-frontmatter li[hidden]{display:none}
.hero-frontmatter li a{display:inline-block;font-family:var(--font-mono);font-size:0.625rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-text);line-height:1.4;text-decoration:none}
.hero-frontmatter li a::after{content:"";position:absolute;inset:0}
.hero-frontmatter li a:hover,.hero-frontmatter li a:focus-visible{color:var(--accent-link-hover);text-decoration:underline;text-underline-offset:2px}
.hero-frontmatter li p{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;color:var(--ink-sec);margin:var(--space-2xs) 0 0}
.hero-frontmatter__foot{font-family:var(--font-body);font-size:var(--text-xs);line-height:1.55;color:var(--ink-sec);margin:var(--space-md) 0 0}
/* The tail sits outside its anchor per the 6 September ruling, and the gap is a margin
   rather than a space so there is no break opportunity between a label and its arrow:
   at 390 the track-record label filled its line to the edge and the arrow fell to the
   next line on its own. Unbreakable, the pair wraps together. */
.link-tail{color:var(--ink-dim);margin-left:0.4em}
@media (min-width:901px){
  .hero-frontmatter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-4xl);align-items:start}
  ul.hero-frontmatter__resume{grid-column:1 / -1}
  /* The measure, added at acceptance because the design predicted this and was right to.
     Each column is 488 pixels of the map's 1,056, which is 68 wider than the block measured
     before it became full measure, and the longest description then ran 85 characters a line
     against the 75 the refutation allows. Measured rather than guessed: 54ch gives 81
     characters, 52ch gives 76, and 50ch gives 73. Below 901 this must not apply, because the
     block already carries its own 62ch cap there and a second, tighter one would narrow the
     hand column the 62ch was restored to protect. */
  .hero-frontmatter__group{max-width:50ch}
}
@media (max-width:900px){
  .hero-frontmatter{max-width:62ch}
  .hero-frontmatter__group + .hero-frontmatter__group{margin-top:var(--space-2xl)}
  .hero--why .hero-grid > .hero-photo-wrap{order:2}
}
@media (max-width:720px){
  .entry-map{padding:var(--space-2xl) 0 var(--space-3xl)}
}
/* ---- The homepage top: the stage, the why, the beliefs, the how, who is speaking (9 September 2026) ----
   The operator's order of 20:15Z: set the stage first, then the why, then the beliefs, then the how
   and the what. The epigraph rises to second so the headline and the book's own paragraph close
   their seam, the why is set as three paragraphs at the draft's own two hinges, and the portrait
   gains the visible caption his 19:00Z question asked for. Every selector is scoped to .hero--why,
   which no language mirror carries, so no mirror is reachable. The epigraph declares no italic of
   its own: it inherits the estate's own quotation contract above. The seed line takes no rail on
   purpose, because it is the author's own sentence and not a quotation. .hero-tail carries order:3
   because layout.css gives .hero-content order:1 and any grid child without an order places first. */
.hero--why .hero-epigraph{margin:var(--space-xl) 0;padding-left:var(--space-md);border-left:3px solid var(--gold)}
.hero--why .hero-epigraph blockquote{margin:0;font-family:var(--font-display);font-size:var(--text-xl);line-height:1.5;color:var(--ink);max-width:46ch}
.hero--why .hero-epigraph blockquote p{margin:0}
.hero--why .hero-epigraph__cite{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;color:var(--ink-sec);margin:var(--space-md) 0 0}
.hero--why .hero-deck{margin-bottom:var(--space-lg)}
.hero--why .hero-seed{font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);line-height:1.45;color:var(--ink);margin:0 0 var(--space-2xl);max-width:34ch}
.hero--why .hero-belief-2{margin-top:var(--space-sm)}
.hero--why .hero-photo-wrap{margin:0}
.hero--why .hero-photo-cap{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;color:var(--ink-sec);margin:var(--space-md) 0 0;max-width:46ch}
.hero--why .hero-tail{order:3}
@media (min-width:901px){.hero--why .hero-grid{row-gap:var(--space-xl)}}

/* ---- The four surfaces, standing between the hero and the contents (9 September 2026) ----
   The operator's instruction of 20:45Z: the four sentences are the what, so they follow the why,
   the beliefs and the how and stand before the map rather than after it. The block moved out of
   the entry map's container and is now a section of its own, which cost it the two rules the
   entry map lent it, so the geometry it had is restated here and nothing about it changes on the
   eye: the same 900 pixel measure, the same left edge as the hero's own column, the same nought
   horizontal padding inside the block. The section carries the container's box instead, so its
   cards begin exactly where the headline above and the Contents rule below begin, and the cap
   rides on the children rather than on the section. Air on both sides and never a collision: the
   hero's own five rem below it and three rem here above the block, three rem below the block and
   the map's three rem after that, so the block breathes on its own rather than leaning on either
   neighbour. Scoped to .hero--why, which no language mirror carries, so no mirror is reachable,
   and the four other pages that carry the block are untouched because none of them is a hero.
   The rule the map lent the block, .entry-map .ff, is gone with it: index.html is the only page
   that carries an entry map, the block no longer stands inside one, and a rule left behind saying
   the four surfaces live inside the contents would tell the next reader something untrue.
   The bands are the other thing a new section costs. Section backgrounds alternate on
   :nth-child, so a section arriving second turned every band below it into its neighbour's,
   which was measured rather than guessed: fifteen sections changed colour and not one of them
   was asked to. So the block takes no band of its own and lets the hero's ground carry through,
   which is what the reading says it is, the last beat of the top rather than the first of the
   map; and the alternation is turned back for every section after it, so each one paints the
   colour it painted before. Both rules are keyed on the block standing exactly where it stands.
   Move it and they stop matching and the original alternation resumes on its own. */
.hero--why + .ff{max-width:var(--max-width);margin:0 auto;padding:var(--space-3xl) var(--space-2xl);background:transparent}
.hero--why + .ff > *{max-width:900px}
.hero--why + .ff ~ section:nth-child(even){background:var(--bg-primary)}
.hero--why + .ff ~ section:nth-child(odd){background:var(--bg-surface)}
@media (max-width:720px){.hero--why + .ff{padding:var(--space-2xl) var(--space-xl)}}

/* THE EVIDENCE SNAPSHOT (11 September 2026, GitHub issue 819 point 5).
   The block is written by scripts/build-visible-register.py from
   research/data/prediction-outcomes.json and research/data/falsification.json,
   and it stands inside the record section on the homepage.
   It carries the class vr as well as vr-snap, so the visible register's own
   table rules dress it: this page already ships them with the register block at
   its foot, and a second inline <style> would send the same declarations down
   the wire twice. Only what differs is written here. What differs is the box,
   because the block sits inside a section's container rather than standing on
   its own at page width; the heading, because it is an h3 under a section's h2
   and not an h2; and the two stacked labels the narrow layout prints before
   each cell, because the register's table has five columns and this one has
   three, so the inherited labels would name the wrong fields. */
.vr-snap{max-width:none;margin:1.6rem 0 0;padding:0}
.vr-snap h3{font-family:'Source Serif 4',Georgia,serif;font-size:1.05rem;margin:0 0 .6rem;color:#1c1c19}
.vr-snap-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vr.vr-snap table{min-width:0}
.vr.vr-snap td:nth-child(3){white-space:normal}
.vr-snap-foot{margin:.85rem 0 0;font-size:.86rem}
@media (max-width:720px){
  .vr-snap{padding:0}
  .vr.vr-snap td:nth-child(2)::before{content:'Current result'}
  .vr.vr-snap td:nth-child(3)::before{content:'Grade'}
}