/* ═══════════════════════════════════════════════════════════
   The front page. Extends base.css; restates no palette value.
   Arc: Arrival → Honesty → Nerve → Intimacy → Proof → Rest → Act → Onward
   ═══════════════════════════════════════════════════════════ */

/* ── F1 Arrival ────────────────────────────────────────────────
   The photograph runs at full strength with nothing laid over it. The
   words sit below it on slate, where legibility is not a negotiation.
   The lit window in the frame is the only warm source in this viewport;
   the first amber call to action does not appear until the book. */

.arrival {
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  height: clamp(17rem, 54vh, 33rem);
  overflow: clip;
  background: var(--slate);
}

.arrival__img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 64%;   /* keeps the oak and the lit window in frame */
}

/* Only a seam — the band settles into the page instead of ending on a line.
   Nothing else touches the photograph, so the storm runs at full strength. */
.arrival::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -2;
  height: 22%;
  background: linear-gradient(180deg, transparent, var(--slate));
}

/* Film grain — fine and organic, never a texture you notice */
.arrival::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.arrival-copy {
  padding-block: var(--space-lg) var(--space-xl);
}

.arrival-copy .label {
  font-size: 0.9375rem;       /* a shade larger than the default label */
}

.arrival-copy h1 {
  margin-top: var(--space-sm);
  max-width: 14ch;
}

.arrival__line {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 38ch;
  color: var(--text-lead);
}

/* The lit window is in the photograph, not drawn on top of it. */

@media (prefers-reduced-motion: no-preference) {
  .arrival__img { animation: settle var(--dur-slow) var(--ease) both; }
  }

/* ── F2 The book ───────────────────────────────────────────── */

.book {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 52rem) {
  .book { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-xl); }
  .book__cover { order: 2; position: sticky; top: var(--space-md); }
}

.book__cover img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px var(--shadow-cast);
}

.hook {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  max-width: 24ch;
  text-wrap: balance;
}

.promise {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 30ch;
  border-left: 2px solid var(--rule-carrying);
  padding-left: var(--space-md);
}

/* ── F3 figure ─────────────────────────────────────────────── */

.premise-figure {
  margin: var(--space-lg) 0;
}

.premise-figure img {
  width: 100%;
  border-radius: var(--radius-md);
}

/* ── F4 Three beats ────────────────────────────────────────── */

.beats {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.beat__img {
  width: 100%;
  max-width: 18.75rem;          /* the source is 300px; do not upscale past it */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.beat h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

.beat p { max-width: 34ch; }

/* ── F5 Proof ──────────────────────────────────────────────── */

/* Reedsy Discovery's verdict, set at headline size because it is the strongest
   outside evidence on the page — and set in bone, not amber. Amber is the buy
   button; a warm badge here would turn a reviewer's word into an advertisement
   and put two warm sources in one view. The source line carries the same
   weight as the mark: without it this is our claim rather than theirs. */
.verdict {
  max-width: var(--measure-tight);
  margin-bottom: var(--space-md);
}

.verdict__mark {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.verdict__source {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

/* Body size rather than meta size: it sits alone on its line and it is the
   only thing here a reader is asked to click. --text-sm would make the one
   target on the page smallest. */
.review-link {
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
}

.getting {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.getting li {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule-carrying);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ── F6 Where to start ─────────────────────────────────────── */

.shelf {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-md);
}

.shelf li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.shelf__title { font-size: var(--text-lg); font-weight: 600; }

.shelf__status {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── F7 The town ───────────────────────────────────────────── */

.release {
  max-width: 46ch;
  color: var(--text-muted);
}

.directory {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.directory a {
  display: block;
  height: 100%;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--rule-on-surface);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}

.directory a:hover { border-color: var(--text); }

.directory h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }

.directory p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted-on-surface);
  max-width: none;
}

/* Donna's sign — quiet, and a long way from "Welcome to Millfield" */
.sign {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--rule-carrying);
  border-radius: var(--radius-md);
  text-align: center;
}

.sign p {
  max-width: none;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.sign .meta { margin-top: var(--space-sm); }