/* ==========================================================================
   Kindred — variant 1 (index.html)
   Paper-collage hero + "The distance" story section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — paper-cut collage artwork
   Geometry was measured from the artwork, not eyeballed:
     desktop (3:2)  clock centre 50% / 45.4%,  radius 13.6%w x 20.5%h
     mobile  (2:3)  clock centre 50% / 52.2%,  radius 16.9%w x 11.25%h

   Light treatment. The clock sits dead centre here, so — unlike variant 2 —
   the quiet zones are the BANDS ABOVE AND BELOW it, where the copy lives, and
   the middle of the frame is left alone entirely. Three layers:
     .hero-art    deepened and saturated, so the collage gets richer, not greyer
     .hero-hush   top and bottom bands only: saturation, contrast and detail
                  pulled out, brightness pushed back up, giving the type clean
                  paper. It never touches the clock band.
     .hero-focus  the clock ellipse: brightness restored past the global dim and
                  contrast nudged up, so the walnut, ivory and brass end up the
                  brightest and crispest materials in the frame.
   Net effect: the product is the most vivid thing on screen and the copy sits
   on quiet ground, without a dark overlay anywhere.
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-sizing: border-box;
  /* Deep foot padding lifts the lede off the dark foliage at the bottom of
     the collage and onto the pale distant town just under the clock, which is
     the only light ground below the dial. Cheaper than any overlay. */
  padding: clamp(30px, 4.6vh, 60px) var(--gutter) clamp(120px, 20vh, 190px);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: #efe4cd;
  color: #2a2016;
}

.kindred-gutter {
  --card-inset: 48px;
  margin: var(--card-inset);
  background: white;
  border-radius: 24px;
  /* A rounded card has to clip, or anything absolutely positioned inside it
     squares the corners off again: the reserve slide paints its photograph on
     a child div, and both clock plates fill the card edge to edge. */
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/hero-paper.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.14) brightness(0.84);
}

/* Two contained lobes — one over the brand block, one over the lede — rather
   than full-width bands. Full-width bands reached the houses at the left and
   right edges and pulled 15-20% of the saturation out of them; these die out
   well before the edges, so the blue and orange worlds keep everything.
   mask-composite defaults to `add`, so the two lobes union. */
.hero-hush {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(0.6) contrast(0.82) brightness(1.15)
    blur(1.1px);
  backdrop-filter: saturate(0.6) contrast(0.82) brightness(1.15) blur(1.1px);
  -webkit-mask-image:
    radial-gradient(
      ellipse 28% 16% at 50% 15%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 34%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0.24) 82%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 26% 13% at 50% 72%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 34%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0.24) 82%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 28% 16% at 50% 15%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 34%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0.24) 82%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 26% 13% at 50% 72%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 34%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0.24) 82%,
      transparent 100%
    );
}

/* The product, given back what the global dim took and then a little more. */
.hero-focus {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: brightness(1.2) saturate(1.08) contrast(1.06);
  backdrop-filter: brightness(1.2) saturate(1.08) contrast(1.06);
  -webkit-mask-image: radial-gradient(
    ellipse 26% 38% at 50% 45.4%,
    #000 0%,
    rgba(0, 0, 0, 0.9) 42%,
    rgba(0, 0, 0, 0.5) 68%,
    rgba(0, 0, 0, 0.18) 86%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 26% 38% at 50% 45.4%,
    #000 0%,
    rgba(0, 0, 0, 0.9) 42%,
    rgba(0, 0, 0, 0.5) 68%,
    rgba(0, 0, 0, 0.18) 86%,
    transparent 100%
  );
}

.hero-top,
.hero-mid,
.hero-bottom {
  position: relative;
  z-index: 4;
}

.hero-top {
  align-self: start;
}
.hero-bottom {
  align-self: end;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2.4vh, 24px);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 8.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
  color: #1d1409;
}

.hero-tagline {
  margin: 14px 0 0;
  font-size: clamp(11px, 1.5vw, 12.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a3822;
  /* The artwork is cover-scaled, so the walnut frame grows and climbs as the
     viewport gets shorter — at 1512x800 it sits directly under this line, at
     luminance ~128, where dark ink drops to ~2.9:1. No fixed position avoids
     it at every aspect ratio (the pale band below the clock is 42px tall and
     the lede needs 61px), so the type carries its own ground: a paper-coloured
     glow, invisible over cream, and enough to lift the ink off walnut. */
  text-shadow:
    0 0 14px rgba(246, 238, 224, 0.92),
    0 0 6px rgba(246, 238, 224, 0.88),
    0 0 2px rgba(246, 238, 224, 0.85);
}

.hero-lede {
  margin: 0;
  max-width: 27em;
  font-size: clamp(16px, 2.3vw, 19px);
  line-height: 1.6;
  color: #2b2015;
  /* The artwork is cover-scaled, so the walnut frame grows and climbs as the
     viewport gets shorter — at 1512x800 it sits directly under this line, at
     luminance ~128, where dark ink drops to ~2.9:1. No fixed position avoids
     it at every aspect ratio (the pale band below the clock is 42px tall and
     the lede needs 61px), so the type carries its own ground: a paper-coloured
     glow, invisible over cream, and enough to lift the ink off walnut. */
  /* Stronger than the tagline's, because this line has the harder job: the
     tagline now sits on clean sky, while the lede lands on the town below the
     clock — busy, mid-tone ground that swallows dark ink. Opaque paper at four
     radii roughly doubles the separation between glyph and background
     (measured 88 -> 100 on the worst segment) while still reading as the
     paper glowing behind the type rather than a panel laid over the art. */
  text-shadow:
    0 0 24px rgba(250, 244, 233, 1),
    0 0 13px rgba(250, 244, 233, 1),
    0 0 6px rgba(250, 244, 233, 0.98),
    0 0 2px rgba(250, 244, 233, 0.95);
}

.hero-cue {
  width: 1px;
  height: clamp(22px, 4vh, 38px);
  background: linear-gradient(#8a6a2e, rgba(138, 106, 46, 0));
  opacity: 0.7;
}

/* Keyed on orientation, not width alone: a phone held sideways is also under
   760px, and there the portrait artwork scales by WIDTH, blowing the clock up
   under the headline. Landscape handsets fall through to the desktop rules,
   which already suit that shape. */
@media (max-width: 760px) and (orientation: portrait) {
  /* Portrait art on a portrait screen. `cover` always scales by HEIGHT (every
     phone is narrower than 2:3), so these vertical bands hold on any handset:
       0    – 41%    sky / blue panel  -> wordmark + tagline
       41   – 63.5%  the clock         -> nothing over it
       63.5 – 72%    pale distant town -> the lede
       72   – 100%   warm panel        -> left alone; it is the most saturated
                                          part of the whole collage
     Measured on the raw art: the foot runs at luminance 62-118 with saturation
     0.58-0.69, so the old bottom-anchored lede sat on the darkest, richest
     ground in the frame. Deep foot padding moves it up into the pale town
     band instead, which reads at 180 — no overlay needed. */
  /* Same idea as the desktop rule above, one regime simpler: a phone in
     portrait is always narrower than the art's 2:3, so `cover` always scales
     by HEIGHT and the clock sits at a fixed fraction of the viewport.
       clock bottom  = (52.2% + 11.25%)·h = 0.6345h
       gap to bottom = 0.3655h
     less the 3-line lede (~105px), the cue and its gap (~51px) and a 16px
     margin. Checked: 375x667 -> 72px, 390x844 -> 137px, both landing the lede
     16px clear of the frame. */
  .hero {
    padding: clamp(46px, 7vh, 72px) 22px
      clamp(60px, calc(36.55vh - 172px), 240px);
  }

  .hero-art {
    background-image: url("../img/hero-paper-mobile.jpg");
  }

  .hero-lede {
    max-width: 19em;
  }

  .hero-focus {
    -webkit-mask-image: radial-gradient(
      ellipse 34% 20% at 50% 52.2%,
      #000 0%,
      rgba(0, 0, 0, 0.9) 44%,
      rgba(0, 0, 0, 0.5) 70%,
      rgba(0, 0, 0, 0.18) 87%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 34% 20% at 50% 52.2%,
      #000 0%,
      rgba(0, 0, 0, 0.9) 44%,
      rgba(0, 0, 0, 0.5) 70%,
      rgba(0, 0, 0, 0.18) 87%,
      transparent 100%
    );
  }

  .hero-hush {
    -webkit-backdrop-filter: saturate(0.6) contrast(0.82) brightness(1.22)
      blur(1px);
    backdrop-filter: saturate(0.6) contrast(0.82) brightness(1.22) blur(1px);
    -webkit-mask-image:
      radial-gradient(
        ellipse 44% 11% at 50% 11%,
        #000 0%,
        rgba(0, 0, 0, 0.93) 34%,
        rgba(0, 0, 0, 0.62) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 42% 10% at 50% 69%,
        #000 0%,
        rgba(0, 0, 0, 0.93) 34%,
        rgba(0, 0, 0, 0.62) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      );
    mask-image:
      radial-gradient(
        ellipse 44% 11% at 50% 11%,
        #000 0%,
        rgba(0, 0, 0, 0.93) 34%,
        rgba(0, 0, 0, 0.62) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 42% 10% at 50% 69%,
        #000 0%,
        rgba(0, 0, 0, 0.93) 34%,
        rgba(0, 0, 0, 0.62) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      );
  }
}

/* --------------------------------------------------------------------------
   Keeping the lede off the clock at any window shape
   The artwork is `cover`, so the clock's on-screen size and position move with
   the viewport — which is why a fixed foot padding puts the lede on clean paper
   at one window size and across the walnut frame at another.

   Derived from the geometry documented above (3:2 art, clock centre 45.4%,
   vertical radius 20.5%):

     viewport WIDER than 3:2  — art scales by width, overflow cropped equally
         clock bottom  = 0.106·w + 0.5·h        (px from the top)
         gap to bottom = 0.5h − 0.106w
     viewport TALLER than 3:2 — art scales by height, cropped left/right
         clock bottom  = 0.659·h
         gap to bottom = 0.341h

   Subtract the lede (~61px), the cue and its gap (~51px) and a 16px breathing
   margin, and the padding below falls out. Checked against measurements:
   1512x800 -> 112px (clock bottom 560, lede top 576) and
   1440x900 -> 169px (clock bottom 603, lede top 619).

   If the hero artwork is ever replaced, these constants must be re-derived or
   the lede will drift back onto the frame. -------------------------------- */
@media (min-width: 761px) and (min-aspect-ratio: 3/2) {
  .hero {
    padding-bottom: clamp(90px, calc(50vh - 10.6vw - 128px), 400px);
  }
}
@media (min-width: 761px) and (max-aspect-ratio: 3/2) {
  .hero {
    padding-bottom: clamp(90px, calc(34.1vh - 139px), 400px);
  }
}

/* A sideways phone runs the desktop layout in ~420px of height, where the
   display type and its clamp floors push the tagline onto the clock face.
   Scale both ends down so the copy clears the dial. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    padding: clamp(26px, 7vh, 44px) var(--gutter) clamp(56px, 18vh, 96px);
  }

  /* In ~500px of height the desktop lobes fall in the wrong places: the lede
     ends up at 80-90% of the frame, on the dark hills. Foot padding lifts it
     to 67% and the lobes follow it. */
  .hero-hush {
    -webkit-mask-image:
      radial-gradient(
        ellipse 28% 20% at 50% 12%,
        #000 0%,
        rgba(0, 0, 0, 0.92) 34%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 30% 16% at 50% 74%,
        #000 0%,
        rgba(0, 0, 0, 0.92) 34%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      );
    mask-image:
      radial-gradient(
        ellipse 28% 20% at 50% 12%,
        #000 0%,
        rgba(0, 0, 0, 0.92) 34%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 30% 16% at 50% 74%,
        #000 0%,
        rgba(0, 0, 0, 0.92) 34%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.24) 82%,
        transparent 100%
      );
  }
  .hero-title {
    font-size: clamp(32px, 6vw, 52px);
  }
  .hero-lede {
    font-size: clamp(14px, 1.9vw, 16px);
  }
  .hero-bottom {
    gap: clamp(10px, 2vh, 18px);
  }
  .hero-cue {
    height: clamp(16px, 3vh, 26px);
  }
}

/* --------------------------------------------------------------------------
   "01 — The distance"
   The background reads as light fading across a physical room rather than a
   designed gradient: one warm pool anchored near the left edge and vertically
   centred, over a flat near-black base. Values were sampled from the design
   mock and fitted, so edit the stop curve with care.
   -------------------------------------------------------------------------- */
.distance {
  position: relative;
  overflow: hidden;
  padding: clamp(104px, 17vh, 180px) var(--gutter) clamp(112px, 20vh, 200px);
  background:
    radial-gradient(
      ellipse 52% 97% at 14% 50%,
      rgba(99, 56, 26, 1) 0%,
      rgba(99, 56, 26, 0.86) 13%,
      rgba(99, 56, 26, 0.8) 20%,
      rgba(99, 56, 26, 0.72) 29%,
      rgba(99, 56, 26, 0.49) 48%,
      rgba(99, 56, 26, 0.25) 69%,
      rgba(99, 56, 26, 0.08) 85%,
      rgba(99, 56, 26, 0) 100%
    ),
    #181411;
}

/* Material texture — meant to be felt, not seen. */
.distance-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.distance-inner {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin: 0 auto;
}

/* Slower, gentler reveal than the rest of the page. */
.distance [data-fade] {
  --fade-y: 12px;
  --fade-dur: 1.4s;
  --fade-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.distance-label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a08a62;
  margin: 0 0 20px;
}
.distance-label span {
  color: #7c6949;
}

.distance-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(27px, 4.8vw, 50px);
  line-height: 1.14;
  margin: 0;
  color: #f0e4cd;
  text-wrap: balance;
}

.distance-scene {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(48px, 7.5vh, 84px) auto clamp(38px, 5.5vh, 60px);
  overflow: visible;
}

.distance-times {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 2.6vw, 26px);
}
.distance-time-here {
  color: #f2e6cc;
}
.distance-time-there {
  color: #8e8270;
}

.distance-copy {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.5;
  color: #cfc2ab;
}
.distance-child {
  margin: clamp(32px, 5.5vh, 52px) 0 0;
  font-style: italic;
  color: var(--gold);
}
.distance-parent {
  margin: clamp(14px, 2.4vh, 24px) 0 0;
}

.distance-close {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(28px, 6vw, 80px);
  margin-top: clamp(56px, 10vh, 112px);
}
.distance-aside {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.7;
  color: #9a8d79;
  margin: 0;
  max-width: 36ch;
}
.distance-final {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21px, 3.1vw, 32px);
  line-height: 1.3;
  color: #efe3cc;
  margin: 0;
  text-align: right;
}

@media (max-width: 760px) {
  .distance-close {
    grid-template-columns: 1fr;
    gap: clamp(34px, 7vh, 54px);
  }
  .distance-final {
    text-align: left;
  }
  .distance-scene {
    width: calc(100% + 44px);
    margin-left: -22px;
  }
  .distance-times {
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   02 — The clock
   Two blocks over clean plates. Every word is HTML, nothing is baked into a
   photograph, so copy changes are text edits and the pins move by editing a
   coordinate rather than re-exporting an image.
   -------------------------------------------------------------------------- */

/* Each clock figure is now its own section, so each is its own card. The
   plate fills the card edge to edge, which is why the card has to clip: with
   overflow visible the photograph ignores the 12px radius and spills past the
   rounded corners. */
.clock-slide {
  color: var(--ink);
  padding: 0;
}

/* Fade without the slide. [data-fade] lifts each element 14px as it reveals,
   which is right for a text block and wrong for two photographs that meet
   edge to edge: mid-animation a 14px cream seam opens between them. */
.dials,
.glow {
  --fade-y: 0px;
}

/* ---- Two time zones ---------------------------------------------------- */

/* Clean plate, every word in HTML. The pins are rebuilt to match the design:
   a light chip with the label, the description below it aligned to the chip's
   TEXT rather than its edge, and a leader line out to a dot on the dial. */
/* Fills its own card. This used to break out to 100vw to escape a padded
   section; inside a 24px-inset card that overflowed it by 24px a side. */
.dials {
  position: relative;
  width: 100%;
  margin: 0;
}

/* The leaders and pins sit inside <picture> so they position against the
   photograph itself. On desktop the plate fills the figure, so this is the
   same box as before; on mobile the copy sits above the plate and only this
   box is the picture. */
.dials picture {
  position: relative;
  display: block;
}

.dials-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* One grid per plate. The landscape SVG is the desktop plate's pixel grid, the
   portrait one is the stacked plate's; each is hidden at the other breakpoint. */
.dials-lines--portrait {
  display: none;
}

/* Sits under the dark core so the leader survives crossing the bezel. */
.dials-lead-halo {
  fill: none;
  stroke: rgba(252, 248, 240, 0.6);
  stroke-width: 3.5;
}

/* The white leader is white because it crosses the walnut, exactly as the
   desktop one does. It also has to cross pale wall and a cream dial face,
   where white alone disappears, so its halo inverts to dark. */
.dials-lead-halo--dark {
  stroke: rgba(59, 51, 42, 0.5);
}

/* The portrait grid is 1024 units across a ~358px plate, so a stroke tuned for
   the 1536-unit landscape grid lands at a third of its intended weight. These
   two restore the ~1.3px core the desktop leaders draw. */
.dials-lines--portrait .dials-lead path {
  stroke-width: 3.6;
}

/* Shown uncropped at its own aspect, which is what lets the viewBox above be
   the photograph's own pixel grid. */
.dials-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dials-lead path {
  fill: none;
  stroke-width: 1.6;
}
.dials-lead--dark path {
  stroke: #6f6252;
}
.dials-lead--dark circle {
  fill: #3b332a;
}
/* White, because this one crosses the walnut bezel. */
.dials-lead--light path {
  stroke: #fff;
}
.dials-lead--light circle {
  fill: #fff;
}

.dials-copy {
  position: absolute;
  z-index: 3;
  left: 11%;
  top: 13%;
  width: 26%;
  margin: 0;
}

.dials-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.35vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}

.dials-body--stacked {
  display: none;
}

.dials-body {
  margin: clamp(10px, 1.6vh, 18px) 0 0;
  font-size: clamp(11px, 1.68vw, 18px);
  line-height: 1.75;
  color: var(--ink-soft);
}

/* --- the pins ----------------------------------------------------------- */

.dials-pin {
  position: absolute;
  z-index: 3;
}
/* Widths come from the design, where these two bodies measure about 10% and
   13.5% of the frame and both wrap to two lines. At 20% the first stopped
   wrapping and the second ran off the right edge. */
/* The vertical leader drops onto the chip's top edge about 57% across it. */
.dials-pin--local {
  left: 32%;
  top: 45.3%;
  width: 12%;
}
/* The horizontal leader meets this chip's left edge at its vertical middle. */
.dials-pin--their {
  left: 83.6%;
  top: 64.45%;
  width: 14%;
  transform: translateY(-1.15em);
}

.dials-pin-title {
  display: inline-block;
  margin: 0;
  padding: 0.42em 0.72em;
  border-radius: 7px;
  background: rgba(243, 240, 235, 0.94);
  font-size: clamp(11px, 1.08vw, 16px);
  font-weight: 600;
  line-height: 1.25;
  color: #241f1b;
  white-space: nowrap;
}

/* Aligned to the chip's text, not the chip, which is how the design sets it.
   Near-black rather than the softer grey the design uses: the right-hand pin
   lands in the clock's cast shadow, where the grey measured 3.82:1. */
.dials-pin-body {
  margin: 0.5em 0 0;
  padding-left: 0.72em;
  font-size: clamp(10px, 1vw, 15px);
  line-height: 1.45;
  color: #241f1b;
}

/* ---- Notifications ----------------------------------------------------- */

/* Clean split plate, all copy in HTML over it. The left half is lit daylight
   and takes dark type; the right half is an evening room and takes light. */
.glow {
  position: relative;
  width: 100%;
  margin: 0;
}

.glow-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* Geometry comes from the photograph, not the design. The clock was traced
   band by band: it is widest between 28% and 48% down, where the bezel reaches
   in to 18.3%, and below 68% the bottom-left corner is plant and sideboard.
   So the column lives inside 4.2%-18.3% and has to finish above 66%. The
   comp's clock was smaller and let the copy run to 26%, which is why the type
   here is a size down from it. */
.glow-copy {
  position: absolute;
  z-index: 2;
  left: 4.2%;
  top: 7.6%;
  width: 15.5%;
  margin: 0;
}

.glow-copy .section-label {
  margin-bottom: clamp(6px, 1.1vh, 13px);
  /* The gold measured 3.38:1 on this wall. */
  color: var(--ink-soft);
}

.glow-pair,
.glow-title--stacked,
.glow-body--stacked {
  display: none;
}

.glow-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 2.45vw, 37px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}

.glow-body {
  margin: clamp(8px, 1.4vh, 16px) 0 0;
  font-size: clamp(9.5px, 0.95vw, 14px);
  line-height: 1.55;
  color: var(--ink-soft);
  /* The heading may run to 19.7%, where the bezel still clears it; the body
     sits lower, where the clock is widest, and must stop at 18.3%. */
  max-width: 91%;
}

.glow-states {
  list-style: none;
  position: absolute;
  z-index: 2;
  left: 22%;
  top: 63%;
  width: 27%;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 1.1vh, 33px);
}
.glow-states li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(8px, 1.1vw, 16px);
}

/* --- the three icons, redrawn from the design ---------------------------- */

.glow-icon {
  display: block;
  width: clamp(17px, 1.82vw, 27px);
  height: clamp(17px, 1.82vw, 27px);
  flex: none;
  overflow: visible;
  color: #2b2622;
}
.glow-icon circle,
.glow-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
}
.glow-icon-rays path {
  stroke-linecap: round;
}

/* The ON ring is the same dark circle wearing an amber halo, and that halo is
   the whole point of the icon. A single soft drop-shadow all but vanished
   against a 2px stroke, so it is stacked: a tight bright one to read at this
   size, then two wider ones for the falloff. */
.glow-icon--lit {
  filter: drop-shadow(0 0 1.5px rgba(227, 146, 48, 1))
    drop-shadow(0 0 4px rgba(227, 146, 48, 0.95))
    drop-shadow(0 0 9px rgba(227, 146, 48, 0.7));
}

.glow-state-title {
  margin: 0;
  font-size: clamp(8.5px, 0.78vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.glow-state-body {
  margin: 0.45em 0 0;
  font-size: clamp(9px, 0.88vw, 13px);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* --- the closing line, on the dark half ---------------------------------- */

.glow-note {
  position: absolute;
  z-index: 2;
  left: 72.3%;
  top: 63.5%;
  width: 14.5%;
  padding-left: clamp(10px, 1.2vw, 20px);
}
.glow-note-title {
  margin: 0;
  font-size: clamp(8.5px, 0.78vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #f0e5d2;
}
.glow-note-body {
  margin: 0.7em 0 0;
  font-size: clamp(10px, 0.98vw, 14.5px);
  line-height: 1.5;
  color: #e3d6bf;
}

/* ---- Stacked ----------------------------------------------------------- */

@media (max-width: 860px) {
  /* 48px a side costs 23% of a 414px screen. The radius comes down with it so
     the corner stays in proportion to the card. */
  .kindred-gutter {
    --card-inset: 16px;
    border-radius: 16px;
  }

  /* The hero drops out of the card treatment here and goes full bleed. Its own
     cream has to be restated because .kindred-gutter sets `background`, the
     shorthand, which had overwritten it. --card-inset goes to 0 so the
     inset-compensation rule below still resolves to the plain gutter for
     anything inside. */
  .hero.kindred-gutter {
    --card-inset: 0px;
    margin: 0;
    border-radius: 0;
    background: #efe4cd;
  }

  /* The reserve card keeps its inset and its white, and loses only the
     rounding. */
  .cta-section.kindred-gutter {
    border-radius: 0;
  }

  /* Copy inside a card was indented twice: once by the card and again by its
     own gutter, so it sat at 40px while copy in a full-bleed section sat at
     24px and the two columns did not line up down the page. Subtracting the
     card's own inset puts every left edge on the same 24px. */
  .kindred-gutter .dials-copy,
  .kindred-gutter .glow-copy,
  .kindred-gutter .glow-pair,
  .kindred-gutter .glow-note {
    margin-left: max(0px, calc(var(--gutter) - var(--card-inset)));
    margin-right: max(0px, calc(var(--gutter) - var(--card-inset)));
  }

  /* Copy first, then the portrait plate. The leaders and both pins go: they
     describe the landscape plate's geometry and point at nothing here. What
     the pins said is carried by .dials-body--stacked instead. */
  .dials {
    display: flex;
    flex-direction: column;
  }
  .dials-lines:not(.dials-lines--portrait),
  .dials-body:not(.dials-body--stacked) {
    display: none;
  }
  .dials-lines--portrait {
    display: block;
  }

  /* Labels go above and below the bezel rather than beside it. Beside the
     anchors the wall clears dark ink for only 18% of the width, about 70px;
     above and below it clears 71% and 70%. Stacked, each label gets the full
     band and the two cannot collide, which is what killed the side-by-side
     attempt. Both anchors sit at x 61.4%, so the labels centre on that axis
     and the leaders are two short verticals on the same line. */
  /* Left-aligned and off the anchors' axis, which is what gives the leader
     something to turn through. The left edge sits at 16% because the clear
     wall above the bezel only starts at 15.5%; left of that is the window. */
  .dials-pin {
    display: block;
    position: absolute;
    left: 16%;
    width: 46%;
    margin: 0;
    padding: 0;
    border-left: none;
    text-align: left;
    transform: none;
  }
  .dials-pin--local {
    top: 4%;
  }
  /* The chip alone is pushed right, to 96%, because that is where the leader's
     horizontal leg ends. The body copy underneath keeps the full 40% to 96%
     box, which it needs for two lines and which the desktop label does not,
     having the width to sit in the chip's own column. 40% to 96% is the clear
     run below the clock: the plant closes the left to 34%, the wall stays
     open to 96%. */
  .dials-pin--their {
    left: 40%;
    width: 56%;
    top: 62.7%;
    text-align: right;
  }
  /* Back to left, against the chip above it: the chip is right-aligned only
     so the leader has something to land on, and ragged-left body copy reads
     worse than the two edges not matching. */
  .dials-pin--their .dials-pin-body {
    text-align: left;
  }
  .dials-pin-title {
    display: inline-block;
    margin: 0;
    padding: 0.22em 0.6em;
    border-radius: 6px;
    background: rgba(243, 240, 235, 0.94);
    font-size: 12px;
  }
  .dials-pin-body {
    margin: 5px 0 0;
    padding-left: 0;
    font-size: 11.5px;
    line-height: 1.4;
  }
  .dials-body--stacked {
    display: block;
  }
  .dials-copy {
    order: -1;
    position: static;
    width: auto;
    transform: none;
    /* The figure is full bleed, so stacked copy has to restore the gutter. */
    margin: 0 var(--gutter) clamp(22px, 3.4vh, 34px);
  }
  /* Padding is zero on desktop so the plates can meet the card edges. Here
     text leads and the last thing in each card is copy, so both need room. */
  .clock-slide {
    padding: 24px 0px;
  }

  /* The desktop sizes are vw-based and tuned for narrow overlay columns, so on
     a phone they bottom out at their clamp floor: the headings landed near
     20px and the body near 11px against sketches asking for roughly 26 and 15.
     Full-width stacked copy gets its own scale. */
  .dials-title,
  .glow-title--stacked {
    font-size: clamp(24px, 6.2vw, 32px);
  }
  .dials-body--stacked,
  .glow-body--stacked {
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.5;
  }

  /* Copy, then the two states side by side. The split plate carries the
     comparison on its own, so the icon list and the closing line are dropped
     and the shorter heading and body take over. */
  .glow {
    display: flex;
    flex-direction: column;
  }
  .glow > picture,
  .glow-photo,
  .glow-states,
  .glow-note,
  .glow-title:not(.glow-title--stacked),
  .glow-body:not(.glow-body--stacked) {
    display: none;
  }
  .glow-title--stacked,
  .glow-body--stacked {
    display: block;
  }
  .glow-copy {
    order: -1;
    position: static;
    width: auto;
    margin: 0 var(--gutter) clamp(18px, 2.8vh, 26px);
  }
  .glow-body--stacked {
    max-width: none;
  }

  .glow-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 3.8vw, 20px);
    list-style: none;
    margin: 0 var(--gutter);
    padding: 0;
  }
  .glow-pair img {
    display: block;
    width: 100%;
    height: auto;
  }
  .glow-pair-title {
    margin: clamp(10px, 1.6vh, 16px) 0 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
  }
  .glow-pair-body {
    margin: 5px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-muted);
  }
}

/* --------------------------------------------------------------------------
   The closing strip, desktop only
   --------------------------------------------------------------------------
   .closing-inner caps at 640px in kindred.css and every child inherits it, so
   the three-point strip was splitting a text column between three cards: 189px
   each, photographs rendering 189x106. The strip itself already asks for
   var(--measure) (1120px) in kindred.css, so it was built wide and was being
   squeezed to half. Giving the wrapper the measure and pinning the two text
   blocks back to 640px lets the strip have the width it declares while the
   column above and below it is unchanged. Cards go to 349px, which is also the
   width the img sizes attribute has been claiming all along: before this the
   browser fetched the 1046w file for a 189px slot and threw away 5.5x the
   pixels it used.

   The card type comes up with the cards. 21.6px heads under a 38px coda read
   as a footnote at 349px wide.

   Overriding here rather than in kindred.css because v2.html shares that file
   and uses the same .closing-inner and .showcase-grid. Scoped to min-width so
   the stacked layout is untouched by construction.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .closing-inner {
    max-width: var(--measure);
  }
  .closing-coda,
  .closing blockquote {
    max-width: 640px;
  }
  .closing .showcase-head {
    font-size: 25px;
  }
  .closing .showcase-body {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   The delayed reservation rail
   --------------------------------------------------------------------------
   Revealed by js/sticky-cta.js once the visitor has been shown the main offer
   and scrolled past it. Cream and a hairline rather than a bright pill: it is
   the same offer waiting where it can be reached, not a second pitch, so it
   borrows the page's own ground and the Reserve button it already has.

   No entrance transition on purpose. The rail appears and disappears several
   times on the way down the page — every time an on-page Reserve button
   crosses the viewport — and anything that animates would read as a tic.
   -------------------------------------------------------------------------- */

:root {
  --sticky-cta-h: 71px;
}

/* `hidden` is the whole show/hide mechanism. It needs no rule here: kindred.css
   already carries a global [hidden] { display: none !important }, so nothing
   below can leave the rail on screen or keyboard-focusable. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Modal <dialog> paints in the top layer, so this cannot cover the founder
     or exit-intent dialogs whatever the value. It only has to clear the page. */
  z-index: 40;
  background: var(--cream);
  border-top: 1px solid var(--rule);
  /* Resolves to 0 today: the inset only reports a value under
     viewport-fit=cover, and index.html's viewport meta does not ask for it, so
     the layout viewport already stops above the home indicator. Written as
     padding rather than margin so the cream reaches the screen edge rather
     than leaving a white band if the page ever does go edge to edge. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Added on the first unlock and never removed, so showing and hiding the rail
   never changes document height and the footer is reachable the whole time. */
body.has-sticky-cta {
  padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom, 0px));
}

.sticky-cta-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 16px;
  /* --sticky-cta-h is the rail's TOTAL height, hairline included, because that
     is the number the body padding above reserves. Leaving the border out here
     made the rail a pixel taller than its own gap and it clipped the footer. */
  min-height: calc(var(--sticky-cta-h) - 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sticky-cta-note {
  margin: 0;
  /* Must be allowed to shrink and wrap, or a narrow screen pushes the button
     off the right edge instead of taking a third line. */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

/* Borrowed from .hero-title: the same Fraunces cut, weight, optical tracking
   and ink the wordmark wears at the top of the page, so the rail signs off in
   the voice the page opened in. Sentence case, where this was uppercase
   Archivo and read like a system label rather than the brand. */
.sticky-cta-brand {
  font-family: var(--font-display);
  font-weight: 400;
  /* 24px on a phone, where the wordmark has the whole left side to itself and
     16px read like a caption. Measured: it sets on one line at 320px with 8px
     still between it and the button. */
  font-size: 24px;
  letter-spacing: -0.012em;
  text-transform: none;
  color: #1d1409;
}

/* A phone has room for the wordmark and nothing else beside the button. */
.sticky-cta-tagline {
  display: none;
}

/* The button's label changes with the width rather than the rail's left side,
   because on a phone the wordmark is already sitting beside it and "Reserve
   Kindred" would print the brand twice in one bar. Swapped with display, so
   the hidden half leaves the accessible name alone. */
.sticky-label-lg {
  display: none;
}

.sticky-cta .cta-button {
  flex: none;
  /* Solid on cream. The shared .cta-button fill is a translucent dark meant to
     sit into a photograph; over this ground it would read as grey smoke. */
  background: var(--night);
  border-color: rgba(201, 162, 75, 0.55);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 11px;
  letter-spacing: 0.11em;
  /* Vertical padding is load-bearing: 12 + the 26px disc + 12 is the 50px tap
     target. Only the horizontal values come in to make room for the note. */
  padding: 12px 10px 12px 16px;
  gap: 12px;
}
.sticky-cta .cta-button:hover {
  background: #332a22;
  box-shadow: none;
}
.sticky-cta .cta-reserve-group {
  gap: 10px;
}

/* The rail is the one control that can be on screen with no surrounding page
   context, so it states its own focus ring rather than relying on the UA's. */
.sticky-cta .cta-button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* At 320px the button leaves the note 64px, which is too narrow for "Fully
   refundable" to sit on one line, so each of the two spans wrapped again and
   the note became four lines inside a 71px rail. Buying the note ~30px back
   from the button's padding, its letter-spacing and the gaps restores the two
   lines the design asks for, without shrinking the 54px tap target. */
@media (max-width: 360px) {
  .sticky-cta-inner {
    padding: 0 12px;
    gap: 8px;
  }
  .sticky-cta-note {
    font-size: 10.5px;
  }
  .sticky-cta .cta-button {
    padding: 12px 8px 12px 12px;
    gap: 8px;
    letter-spacing: 0.08em;
  }
  .sticky-cta .cta-reserve-group {
    gap: 8px;
  }
}

@media (min-width: 861px) {
  :root {
    --sticky-cta-h: 78px;
  }

  .sticky-cta-inner {
    padding: 0 var(--gutter);
    gap: 24px;
  }

  .sticky-cta-note {
    font-size: 13px;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }

  /* Same 24px as the phone. The desktop rail is taller than the mobile one, so
     if the wordmark fits at 71px it fits here; holding one size keeps it from
     reading smaller on the bigger screen. */
  .sticky-cta-brand {
    font-size: 24px;
  }

  .sticky-label-sm {
    display: none;
  }
  .sticky-label-lg {
    display: inline;
  }

  /* The divider is a hairline rather than a typed "|", because the rail's own
     button already separates its label from its price with one and a pipe
     glyph would sit on a different baseline and weight. Carried on the
     tagline's own border so there is no extra element to hide on a phone. */
  .sticky-cta-tagline {
    display: inline;
    border-left: 1px solid var(--rule);
    padding-left: 14px;
  }

  .sticky-cta .cta-button {
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 13px 13px 13px 22px;
    gap: 18px;
  }
  .sticky-cta .cta-reserve-group {
    gap: 14px;
  }
}