/* ==========================================================================
   Kindred — shared styles
   Used by both index.html (variant 1) and v2.html (variant 2).
   Variant-specific hero/story styles live in home.css and kindred2.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette */
  --ink: #2b2622; /* body text on light sections */
  --ink-soft: #4a4238;
  --ink-muted: #6b5f4e;
  --cream: #f2e8d5; /* body text on dark sections, light section bg */
  --cream-warm: #eae0cb; /* founder section bg */
  --gold: #c9a24b; /* primary accent, buttons, links */
  --gold-bright: #e4c170; /* accent hover */
  --gold-deep: #8a7455; /* small labels on light backgrounds */
  --gold-dim: #b08d42; /* numerals in the feature columns */
  --sand: #b9ac97; /* secondary copy on dark */
  --sand-dim: #8a7d6b;
  --rule: #d6c7a8; /* hairline dividers on light sections */
  --night: #241f1b;
  --night-deep: #1d1815;

  /* type */
  --font-display: "Fraunces", serif;
  --font-ui: "Archivo", sans-serif;

  /* the shared content measure — every section aligns to this grid */
  --measure: 1120px;
  --gutter: 24px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: white;
  font-family: var(--font-ui);
  color: var(--cream);
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  color: var(--gold-bright);
}

::selection {
  background: var(--gold);
  color: var(--night);
}

img {
  max-width: 100%;
}

/* Form styling is dormant: the email capture is commented out in both pages
   while the $5 Stripe reservation is live. Kept so restoring it is one edit. */
input::placeholder {
  color: var(--sand-dim);
}
input:focus {
  outline: none;
  border-color: var(--gold) !important;
}

/* --------------------------------------------------------------------------
   3. Scroll-triggered reveal
   Elements marked [data-fade] start hidden and are revealed by js/kindred.js
   when they scroll into view. Tune per element with the custom properties:
     style="--fade-delay:.7s"
   -------------------------------------------------------------------------- */
[data-fade] {
  opacity: 0;
  transform: translateY(var(--fade-y, 14px));
  transition:
    opacity var(--fade-dur, 1s) var(--fade-ease, ease) var(--fade-delay, 0s),
    transform var(--fade-dur, 1s) var(--fade-ease, ease) var(--fade-delay, 0s);
}

/* Line-drawing SVGs: paths start fully dashed and are animated open. */
#drawScene [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fadeInEl {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #drawScene [data-draw] {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  [data-fade] {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. Layout helper
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

/* Symbols live in the inline sprite at the top of each page. Colour comes from
   the context: `color` drives the strokes, `--icon-accent` the fills. */
.icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
}

/* Small tracked uppercase label that opens each numbered section. */
.section-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
   5. "The clock" — product section (light)
   -------------------------------------------------------------------------- */
.product {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(90px, 14vh, 150px) var(--gutter);
}

.product-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 5.5vw, 52px);
  line-height: 1.12;
  margin: 0 0 48px;
  max-width: 900px;
  text-wrap: balance;
}

/* Large room shot beside two stacked detail crops. */
.photo-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.85fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "hero bezel"
    "hero dial";
  height: clamp(260px, 38vw, 420px);
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-grid img:nth-child(1) {
  grid-area: hero;
}
.photo-grid img:nth-child(2) {
  grid-area: bezel;
}
.photo-grid img:nth-child(3) {
  grid-area: dial;
}

.product-rule {
  height: 1px;
  background: var(--rule);
  margin: 40px 0 34px;
}

.feature-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.feature-num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-dim);
  margin: 0 0 14px;
}
.feature-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.25;
  margin: 0 0 12px;
}
.feature-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.product-note {
  max-width: 520px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gold-deep);
  margin: 44px 0 0;
}

@media (max-width: 760px) {
  .photo-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "hero" "bezel" "dial";
    height: auto;
  }
  .photo-grid img {
    height: clamp(160px, 44vw, 230px);
  }
  .feature-cols {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* --------------------------------------------------------------------------
   6. Reservation CTA
   Left-aligned editorial column over the photograph, with the artwork pushed
   to the right by a strong left-to-right gradient. Geometry follows the mock:
   the column starts at ~4.6% of the frame and wraps around 32%.
   -------------------------------------------------------------------------- */
.cta-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--ink), var(--night-deep));

  /* The section carries the photo's own 3:2 aspect, which is what lets the
     background `cover` fill edge to edge without cropping the clock off the
     top or the laptop off the bottom. Change this and the crop changes. */
  box-sizing: border-box;
  min-height: clamp(520px, 64.6vw, 1180px);
  display: grid;
  align-items: center;
  padding: clamp(48px, 6vh, 80px) clamp(24px, 4.6vw, 72px);
}

/* Blur and scrim were calibrated against the design mock: edge-transition
   width matches at 4.0px, mean tone deviation 4.9/255. Adjust with care. */
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../img/family-call.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Two jobs: sink the left third to near-black so the copy has a clean ground,
   and keep the original vertical shaping so the scene still reads on the right. */
.cta-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(12, 9, 7, 0.96) 0%,
      rgba(13, 10, 8, 0.92) 18%,
      rgba(14, 11, 8, 0.74) 32%,
      rgba(16, 12, 9, 0.44) 46%,
      rgba(18, 13, 10, 0.18) 62%,
      rgba(20, 15, 11, 0.06) 78%,
      rgba(20, 15, 11, 0) 100%
    ),
    radial-gradient(
      ellipse 94% 84% at 62% 46%,
      rgba(24, 18, 13, 0) 42%,
      rgba(22, 16, 12, 0.2) 76%,
      rgba(18, 13, 10, 0.5) 100%
    ),
    linear-gradient(
      180deg,
      rgba(30, 24, 18, 0.24) 0%,
      rgba(26, 20, 16, 0.12) 38%,
      rgba(18, 14, 11, 0.38) 100%
    ),
    linear-gradient(0deg, rgba(201, 162, 75, 0.05), rgba(201, 162, 75, 0.05)),
    linear-gradient(0deg, rgba(90, 110, 140, 0.04), rgba(90, 110, 140, 0.04));
}

.cta-panel {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}
.cta-inner {
  max-width: min(420px, 100%);
  text-align: left;
}

/* eyebrow + the short rule under it */
.cta-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c39a55;
  margin: 0 0 14px;
}
.cta-eyebrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 14px;
  background: rgba(195, 154, 85, 0.55);
}

.cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.008em;
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  color: var(--cream);
  /* em, not ch or px: the measure scales with the headline itself, which is
     what holds the mock's three-line break — "Never miss / the window / again." */
  max-width: 5.2em;
}
/* one word carries the accent — set it per page in the markup */
.cta-title .accent {
  color: #d9ab63;
  font-style: normal;
}
.cta-section h2 {
  text-shadow: 0 2px 18px rgba(18, 13, 9, 0.6);
}

.cta-lede {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: #c8bda9;
  margin: 0 0 clamp(26px, 3.4vh, 40px);
  max-width: 34ch;
}

.cta-actions {
  display: block;
}

/* Dark glass with a brass rim, rather than a bright slab. The fill is mostly
   transparent so the photograph reads through it — the button sits INTO the
   scene instead of on top of it — and the brass edge plus a low outer glow are
   what give it shape. backdrop-filter is a progressive enhancement; the rgba
   fill alone still carries the contrast if a browser ignores it. */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(26, 20, 14, 0.55);
  color: #dfc58a;
  border: 1px solid rgba(201, 162, 75, 0.6);
  border-radius: 3px;
  padding: 18px 26px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 18px rgba(201, 162, 75, 0.1);
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
/* Must restate colour: the global a:hover would otherwise recolour the label. */
.cta-button:hover {
  background: rgba(34, 26, 18, 0.7);
  color: #f0dfae;
  border-color: rgba(228, 193, 112, 0.75);
  box-shadow: 0 0 26px rgba(228, 193, 112, 0.2);
}

.cta-arrow {
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.25s ease;
}
.cta-button:hover .cta-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .cta-arrow {
    transition: none;
  }
  .cta-button:hover .cta-arrow {
    transform: none;
  }
}

/* The Reserve CTA, and only that one. Everything else wearing .cta-button — a
   form submit, the exit-intent capture, the dormant signup — keeps the plain
   label + arrow. This treatment belongs to the button that takes money.

   The em dash was doing two jobs at once (separating the price and pointing
   at it) and the arrow floated in the middle of the padding. A hairline rule
   separates, and a filled brass disc sits at the right edge as the thing you
   press. Sized to the same footprint as the old button — ~265x54 against
   267x53 — so this reads as a different button, not a bigger one. */
.cta-button--reserve {
  justify-content: space-between;
  gap: 18px;
  /* Asymmetric on purpose: the badge carries its own visual weight and needs
     less room around it than the text does. */
  padding: 12px 12px 12px 22px;
  border-radius: 4px;
}

/* Label and price travel together, so space-between pushes only the badge. */
.cta-reserve-group {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.cta-rule {
  width: 1px;
  height: 15px;
  background: rgba(201, 162, 75, 0.45);
  flex: none;
}

.cta-amount {
  color: #e9d09a;
  letter-spacing: 0.1em;
}

.cta-chev {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c9a24b;
  border: 1px solid #c9a24b;
  /* Dark glyph on brass — the one place on the page where the fill is solid
     enough to carry reversed-out ink. */
  color: #241f1b;
  display: grid;
  place-items: center;
  flex: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.cta-chev svg {
  width: 11px;
  height: 11px;
  display: block;
}
/* The badge moves, not the whole glyph — the arrow used to drift away from
   its own container on hover. */
.cta-button--reserve:hover .cta-chev {
  background: #e4c170;
  border-color: #e4c170;
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .cta-chev {
    transition: none;
  }
  .cta-button--reserve:hover .cta-chev {
    transform: none;
  }
}

/* Under the button, three descending beats. The offer has four things to say
   ($5 now, what it buys, what the product will cost, that it is refundable)
   and saying them in one paragraph turns this into a terms box. Splitting them
   one-per-line and stepping the weight down at each beat keeps it a cascade:
   the eye takes the benefit, then the price, then the safety net, and can stop
   at any point still understanding the offer. */
.cta-benefit {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #cbbda4;
  max-width: 44ch;
}
.cta-price {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #9d927f;
  max-width: 44ch;
}
/* One beat of brass on the figure itself. It makes the number findable at a
   glance — which is the point of disclosing it — without giving the line
   enough weight to compete with the button above it. */
.cta-price-figure {
  color: #c39a55;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cta-reassure {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.65;
  color: #877d6c;
  max-width: 44ch;
}
.cta-smallprint {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #7d7264;
  max-width: 40ch;
}

@media (max-width: 860px) {
  .cta-section {
    min-height: auto;
    padding-block: clamp(72px, 10vh, 110px);
  }
  .cta-inner {
    max-width: 100%;
  }
  .cta-scrim {
    background:
      linear-gradient(
        180deg,
        rgba(12, 9, 7, 0.9) 0%,
        rgba(14, 11, 8, 0.78) 42%,
        rgba(16, 12, 9, 0.6) 70%,
        rgba(18, 13, 10, 0.62) 100%
      ),
      linear-gradient(0deg, rgba(201, 162, 75, 0.05), rgba(201, 162, 75, 0.05));
  }
}

/* The UA rule for [hidden] is display:none, but ANY author `display` beats it
   — so a hidden element with a display rule stays on screen. Every JS path in
   this codebase that hides something uses .hidden, so guard it once here. */
[hidden] {
  display: none !important;
}

/* Visually hidden but read aloud — used for the "about" in "~$150". */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6b. The three-point strip that closes the CTA
   -------------------------------------------------------------------------- */
.cta-strip {
}
.cta-strip ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 36px);
}
.cta-strip li {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.8vw, 26px);
  padding-left: clamp(24px, 2.6vw, 36px);
  border-left: 1px solid rgba(201, 162, 75, 0.13);
}
.cta-strip li:first-child {
  padding-left: 0;
  border-left: none;
}

.cta-strip .icon {
  width: clamp(64px, 5.8vw, 84px);
  height: clamp(64px, 5.8vw, 84px);
  color: #c39a55;
  --icon-accent: #e4c170;
}

.cta-point-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--cream);
}
.cta-point-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: #948976;
  margin: 0;
}

@media (max-width: 860px) {
  .cta-strip ul {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .cta-strip li {
    padding-left: 0;
    border-left: none;
    padding-top: 30px;
    border-top: 1px solid rgba(201, 162, 75, 0.13);
  }
  .cta-strip li:first-child {
    padding-top: 0;
    border-top: none;
  }
}

/* NOTE: the photographic variant below must stay AFTER the media query above.
   It overrides .cta-strip li at the same specificity, so source order is the
   only thing deciding it. Moving it earlier silently restores the doubled
   divider on the stacked layout. */

/* --------------------------------------------------------------------------
   Reserve strip — photographic variant
   The icon version lays each point out as a flex row with a hairline rule on
   its left. Photographs stack instead, so those rules go and the cell becomes
   a block. Everything else is inherited from .cta-strip above: the section chrome, the
   three-column grid and the single-column collapse are all unchanged.

   Type deliberately matches .cta-point-title and .cta-point-body exactly, so
   swapping icons for photographs changes the picture and nothing else.
   -------------------------------------------------------------------------- */
.cta-strip--photo li {
  display: block;
  padding-left: 0;
  border-left: none;
}

/* The files are exported at 1046px, roughly 3x the 349px cell, which covers a
   2x display on both the three-column and the stacked layout. The first cut
   shipped the 2048px masters and let the browser squeeze them into the cell;
   at nearly 6x down that visibly mushed the tick marks and the wordmark.
   Pre-sizing is also 100K lighter across the three. */
.showcase-photo {
  display: block;
  width: 100%;
  /* height:auto is load-bearing. The img carries width/height attributes so the
     browser can reserve space before the file lands, and with BOTH dimensions
     definite it ignores aspect-ratio outright — the cells first rendered as
     1536px portraits. Releasing the height lets aspect-ratio drive the crop. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: clamp(16px, 2.4vh, 24px);
}

/* Both of these are 3:2 at source, so 16:9 only trims a little off the top and
   bottom, and the offset decides what that costs. The glow shot in the middle
   is an abstract diagonal with no bounded subject, so it needs no offset.

   Compared against 20/35/50/65% and 20/30/42/55% on the real page. The dial
   keeps the brass hub and both main hands at the top, which is what makes the
   sub-dial read as sitting INSIDE a larger dial, while leaving the lower
   markers whole. The room shot holds the entire clock with air above and below
   it; past 42% the bezel starts to clip and it stops reading as round. */
.showcase-photo--dial {
  object-position: center 35%;
}
.showcase-photo--room {
  object-position: center 30%;
}

.showcase-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--cream);
}

.showcase-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: #948976;
  margin: 0;
}

@media (max-width: 860px) {
  /* The photograph already separates one point from the next, so the hairline
     the icon version adds between stacked cells would be a second divider. */
  .cta-strip--photo li {
    padding-top: 0;
    border-top: none;
  }
  .showcase-photo {
    aspect-ratio: 3 / 2;
  }
}

/* Dormant — styles the commented-out email capture so restoring it is a
   markup-only change. See the CTA block in index.html / v2.html. */
.cta-input {
  background: transparent;
  border: 1px solid #5c4e3e;
  border-radius: 3px;
  padding: 14px 20px;
  font-size: 16px;
  color: var(--cream);
  font-family: var(--font-ui);
}
.cta-button--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 13px 20px;
}
.cta-button--ghost:hover {
  background: rgba(201, 162, 75, 0.12);
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   7. Founder
   -------------------------------------------------------------------------- */
.founder {
  background: var(--cream-warm);
  color: var(--ink);
  padding: clamp(80px, 12vh, 130px) var(--gutter);
}
.founder-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: center;
  justify-content: center;
}
.founder-photo {
  width: 150px;
  height: 150px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 62% 40%;
  border: 1.5px solid #b7a784;
}
.founder-text {
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}
.founder-quote {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 22px);
  line-height: 1.55;
  font-weight: 300;
  margin: 0 0 18px;
}
.founder-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  margin: 0;
  color: var(--gold-deep);
}
.founder-more {
  margin: 10px 0 0;
}

.founder-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-color: #c4b491;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.founder-link:hover {
  color: var(--ink-muted);
}

/* Modal: native <dialog> driven by HTML invoker commands (command /
   commandfor) — deliberately no JavaScript. Fullscreen at every size. */
#founderModal {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--cream-warm);
  color: var(--ink);
}
#founderModal::backdrop {
  background: rgba(24, 18, 13, 0.55);
}

.founder-modal-inner {
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: clamp(48px, 9vh, 110px) var(--gutter);
  overflow-y: auto;
}
.founder-modal-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-deep);
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
}
.founder-modal-close:hover {
  background: rgba(138, 116, 85, 0.12);
}

.founder-modal-body {
  max-width: 560px;
  text-align: center;
}
.founder-modal-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.6vw, 38px);
  margin: 0 0 18px;
}
.founder-modal-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.founder-modal-body p.is-last {
  margin: 0;
}
.founder-modal-body p.is-closing {
  margin: 24px 0 0;
}

.founder-books {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 16px;
  text-align: left;
}
.founder-books li {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.founder-book-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #b7a784;
  text-underline-offset: 3px;
}
.founder-book-link:hover {
  color: var(--gold-deep);
}
.founder-book-title {
  font-family: var(--font-display);
  font-size: 18px;
}
.founder-book-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8. Closing note
   -------------------------------------------------------------------------- */
.closing {
  background: radial-gradient(
    ellipse 110% 90% at 50% 30%,
    var(--night) 0%,
    #181411 62%,
    #120e0b 100%
  );
  padding: clamp(110px, 18vh, 190px) var(--gutter);
  display: grid;
  place-items: center;
  text-align: center;
}
.closing-inner {
  max-width: 640px;
  display: grid;
  gap: 34px;
  justify-items: center;
}

.closing-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(228, 193, 112, 0.75);
  box-shadow:
    0 0 18px rgba(228, 193, 112, 0.65),
    0 0 44px rgba(201, 162, 75, 0.35);
  animation: breatheSoftClose 4.6s ease-in-out infinite;
}
@keyframes breatheSoftClose {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.closing blockquote {
  margin: 0;
}
.closing-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.6;
  margin: 0;
  color: var(--cream);

  text-wrap: balance;
}
.closing-cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-dim);
}
.closing-coda {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.4;
  margin: 0;
  color: var(--gold);

  text-wrap: balance;
}

/* The reservation CTA, repeated at the very foot. Same .cta-button as the
   main CTA section, so js/stripe-link.js (UTM + client_reference_id) and
   js/meta-events.js (InitiateCheckout) pick it up automatically — both select
   every a[href*="buy.stripe.com"] rather than a single element. */
.closing-cta {
  display: grid;
  justify-items: center;
  gap: 16px;
}
/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--night-deep);
  padding: 26px 32px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Same symbol as the CTA strip, smaller and quieter — the overlap keeps a
   little warmth so the mark still reads as two homes sharing one moment. */
.brand-mark {
  width: 30px;
  height: 30px;
  color: #6b5f4e;
  --icon-accent: var(--gold);
}

/* --------------------------------------------------------------------------
   10. Exit-intent modal
   Deliberately has no entry point anywhere in the page — js/exit-intent.js is
   the only thing that opens it, once per browser, when a desktop pointer
   leaves through the top of the viewport. Nothing here should ever compete
   with the $5 reservation during normal browsing.

   Native <dialog>, same as the founder modal: free Esc-to-close, focus
   trapping and a real ::backdrop. Unlike that one this is small and centred,
   so it also closes on a backdrop click.
   -------------------------------------------------------------------------- */
.exit-modal {
  width: min(430px, calc(100vw - 40px));
  max-width: none;
  padding: 0;
  border: 1px solid rgba(201, 162, 75, 0.22);
  border-radius: 6px;
  overflow: hidden;
  background: #1a1512;
  color: var(--cream);
  box-shadow:
    0 40px 90px rgba(10, 7, 5, 0.6),
    0 6px 20px rgba(10, 7, 5, 0.4);
}
.exit-modal::backdrop {
  background: rgba(24, 18, 13, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* A crop of the existing bezel macro — walnut, the light ring, two brass
   markers. The mask fades its foot into the panel so it reads as one object
   rather than a picture sitting on top of a box. */
.exit-art {
  height: 132px;
  background-image: url("../img/clock-bezel.png");
  background-size: cover;
  background-position: 50% 62%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.55) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0, 0, 0, 0.55) 82%,
    transparent 100%
  );
}

.exit-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.3);
  background: rgba(18, 13, 10, 0.55);
  color: #cbbda4;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.exit-close:hover {
  background: rgba(34, 26, 18, 0.8);
  color: var(--cream);
  border-color: rgba(228, 193, 112, 0.55);
}
.exit-close:focus-visible {
  outline: 2px solid rgba(228, 193, 112, 0.8);
  outline-offset: 2px;
}

.exit-body {
  padding: 4px clamp(24px, 6vw, 34px) clamp(28px, 5vw, 34px);
}

.exit-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 5.2vw, 30px);
  line-height: 1.16;
  margin: 0 0 10px;
  color: var(--cream);
}
.exit-lede {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 22px;
  color: #b0a48f;
}

/* Visually hidden — the field is self-evident, but it still needs a label. */
.exit-srlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.exit-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(12, 9, 7, 0.4);
  border: 1px solid #5c4e3e;
  border-radius: 3px;
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: 16px; /* 16px keeps iOS from zooming the field on focus */
  color: var(--cream);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.exit-input::placeholder {
  color: #7d7264;
}
.exit-input:focus-visible {
  outline: none;
  border-color: rgba(201, 162, 75, 0.75);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.14);
}

.exit-form .cta-button {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
}

/* Replaces the form in place — no navigation, no second screen. */
.exit-thanks .exit-lede {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .exit-modal[open] {
    animation: exitModalIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes exitModalIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}