/* Artificial Limits — book page
   Rebuilt 2026-09-20 against the measured harvest. No cards, no radius, no
   shadow. The cover is a real typographic field, not a placeholder rectangle:
   Fitzcarraldo's covers ARE flat colour fields carrying type, and a grey
   "image to come" box reads as a missing file rather than as intent. */

.hero { padding-block: var(--s-8) var(--s-8); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 58rem) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__cover { max-width: 15rem; }
}

.hero__text h1 { margin-bottom: var(--s-4); }
.hero__text p:not(.hero__sub):not(.hero__byline) { max-width: var(--measure); }

.hero__sub {
  font-family: var(--face-display);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.22;
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
  max-width: 24ch;
}
.hero__byline {
  font-family: var(--face-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-7);
}

/* ---------- the cover: a designed object, not a stand-in ---------- */

.cover {
  /* Fixed, not theme-relative: a cover is a physical object and does not
     invert when the page does. In dark mode var(--ink) went pale and the
     white-alpha footer measured 1.16:1. */
  --cover-bg:  #16140f;
  --cover-ink: #fbfaf7;
  aspect-ratio: 2 / 3;
  background: var(--cover-bg);
  color: var(--cover-ink);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--s-5);
  border: 0;
}
.cover__title {
  font-family: var(--face-display);
  font-size: clamp(1.7rem, 1rem + 2.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  align-self: start;
  margin: 0;
  text-wrap: balance;
}
.cover__foot {
  border-top: 1px solid rgba(251,250,247,0.34);
  padding-top: var(--s-3);
  font-family: var(--face-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(251,250,247,0.78);
}
.cover__foot span { display: block; }

/* ---------- the two stances: a rule between, never two boxes ---------- */

.stances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7);
  margin-block: var(--s-6);
}
@media (max-width: 52rem) {
  .stances { grid-template-columns: 1fr; gap: var(--s-6); }
  .stances > * + * { border-top: 1px solid var(--rule); padding-top: var(--s-6); }
}
.stance { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.stance__role {
  font-family: var(--face-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 var(--s-3);
}
.stance p { max-width: var(--measure); }   /* uncapped it ran 97 CPL once single-column */
.stance p:last-child { margin-bottom: 0; }

/* ---------- proposals ---------- */

.proposal { padding-block: var(--s-5); border-top: 1px solid var(--rule); }
.proposal:first-child { border-top: 0; padding-top: 0; }
.proposal h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.proposal p { margin-bottom: 0; color: var(--ink-muted); }
.proposal em { color: var(--ink); font-style: italic; }
.stack > .proposal + .proposal { margin-top: 0; }

/* ---------- companion links: rows, not cards ---------- */

.pair { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pair__card {
  display: block;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.pair__card:hover { color: var(--ink); background: var(--paper-sunk); }
.pair__card h3 { margin-bottom: var(--s-3); font-size: var(--t-lg); }
.pair__card p { color: var(--ink-muted); max-width: var(--measure); }
.pair__go {
  font-family: var(--face-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ember) !important;
  margin-bottom: 0 !important;
}

/* ---------- notify ---------- */

.notify-row { display: flex; align-items: flex-end; gap: var(--s-3); }
.notify-row .btn { flex: none; padding-block: 0.92em; }
@media (max-width: 34rem) { .notify-row { flex-direction: column; align-items: stretch; } }