/* ============================================================
   SANCTUARY: the design the author chose (2026-10-05).
   Palette  : warm ivory, aged gold, soft clay. Taken from the cover art.
   Shape    : softly rounded (6px), hairline borders.
   Scroll   : fade-and-rise, reading-progress rail in the nav.
   Hover    : lift with a warm shadow; gold wash on cards.
   Module   : tabbed media kit, single fixed pull quote.
   ============================================================ */
:root {
  --bg: #fbf6ed;
  --bg-alt: #f2e9d9;
  --surface: #fffdf9;
  --ink: #2a2119;
  --ink-soft: #5d5044;
  --ink-faint: #928676;
  --accent: #a8752f;
  --accent-ink: #ffffff;
  --accent-soft: #f2e3c9;
  --line: #e6d8c0;
  --danger: #a3362a;

  --radius-btn: 6px;
  --radius-card: 10px;
  --radius-img: 8px;
  --border-w: 1px;
  --btn-pad: 0.95rem 1.9rem;

  /* Cormorant Garamond: a light, high-waisted garalde. Wants to be set large
     and airy; at text sizes it disappears, which is why the display scale is up. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.015em;
  --display-scale: 1.06;
  --eyebrow-tracking: 0.18em;
  --display-leading: 1.06;

  --dur: 700ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-from: translateY(26px);
  --reveal-blur: 0px;

  --shadow-lg: 0 20px 55px rgba(94, 70, 30, 0.16);
}

/* A single warm shaft of light behind the hero, the cover's own gesture,
   at a fraction of the contrast so it never competes with the type. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto;
  width: 60vw; height: 60vw; max-width: 46rem; max-height: 46rem;
  background: radial-gradient(circle at 70% 30%, #f6e8cd 0%, rgba(246, 232, 205, 0) 62%);
  pointer-events: none; z-index: -1;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(168, 129, 63, 0.28); }
.btn--ghost:hover { --_bg: var(--accent-soft); --_bd: var(--accent); --_fg: var(--accent); box-shadow: none; }
.btn--quiet:hover { transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }

.card:hover, .review:hover, .retailer:hover, .kit__item:hover {
  transform: translateY(-3px);
  border-color: #d8c49a;
  box-shadow: 0 14px 34px rgba(94, 70, 30, 0.10);
}

.author__photo { box-shadow: 0 18px 44px rgba(94, 70, 30, 0.18); }

.pullquote { position: relative; }
.pullquote::before {
  content: ""; display: block; width: 3rem; height: 1px;
  background: var(--accent); margin: 0 0 2rem;
}