/* ───────────────────────────────────────────────────────────────
   Sitehouse — the closing panel
   The last block on the landing page: a slow lake running behind a wash
   of the same accent green the panel used to be painted flat.

   The wash is what keeps this a brand panel rather than a stock video.
   White type and a white button both have to hold against it at every
   width, so the green never drops below about two thirds opaque
   anywhere the copy sits. bg-accent stays on the section, so the panel
   is the right colour before the film loads and if it never does.

   Loaded only by index.html — nothing else on the site uses either of
   these two pieces.
   ─────────────────────────────────────────────────────────────── */


/* ── Grain ─────────────────────────────────────────────────────
   A little paper tooth on the closing panel so a large flat colour
   does not read as a flat colour. One tiled SVG, no animation, no
   extra requests. */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.38;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='0.22'/></svg>");
  mix-blend-mode: overlay;
}
.grain > div { position: relative; z-index: 1; }

/* ── The closing panel ─────────────────────────────────────────
   Full-bleed film, the same language as the reel at the top of the
   page, so the two bookend it. The scrim is a dark green-black rather
   than a slab of accent: the picture is the panel, and the green now
   lives in the button and the grain instead of over the whole thing. */
.closer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0A090A;
  min-height: 82svh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 11vh;
}
@supports not (min-height: 1svh) { .closer { min-height: 82vh; } }

.closer .closer-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.closer .closer-media video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, center center);
  /* Fades up once there are real frames, so the panel never flicks from
     flat colour to picture. */
  opacity: 0;
  transition: opacity 1100ms ease;
}
.closer[data-backdrop="on"] .closer-media video { opacity: 1; }

/* Weighted towards the copy, with a little top and bottom and a
   vignette — three flat layers, nothing blended. */
.closer .closer-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(97deg,
      rgb(10 9 10 / 0.82) 0%,
      rgb(10 9 10 / 0.76) 34%,
      rgb(10 9 10 / 0.46) 62%,
      rgb(10 9 10 / 0.38) 78%,
      rgb(10 9 10 / 0.54) 100%),
    linear-gradient(180deg,
      rgb(10 9 10 / 0.34) 0%,
      rgb(10 9 10 / 0.06) 22%,
      rgb(10 9 10 / 0.12) 48%,
      rgb(10 9 10 / 0.62) 78%,
      rgb(10 9 10 / 0.74) 100%),
    radial-gradient(128% 96% at 52% 46%,
      rgb(0 0 0 / 0) 42%,
      rgb(0 0 0 / 0.30) 86%,
      rgb(0 0 0 / 0.44) 100%);
}

.closer.grain::before { z-index: 2; opacity: 0.24; }
.closer .closer-body { position: relative; z-index: 3; width: 100%; }

/* ── Type ──────────────────────────────────────────────────────
   The heading is the whole point of this panel, so it is given the
   room to be one: bigger than anything else on the page, tracked in
   tight, and set on a single line at every width it can manage. */
.closer-eyebrow {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.86);
}
.closer-eyebrow::before {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 1.6rem; height: 1px; margin-right: 0.7rem;
  background: rgb(255 255 255 / 0.42);
}

.closer-h {
  margin: 1.5rem 0 0;
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.024em;
  color: #FFFFFF;
  text-wrap: balance;
  max-inline-size: 16ch;
}

.closer-price { margin: 1rem 0 0; font-size: 0.9375rem; color: #FFFFFF; }
.closer-price strong { font-weight: 600; color: #FFFFFF; }

.closer-p {
  margin: 1.5rem 0 0;
  max-width: 31rem;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #FFFFFF;
}

.closer-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 1.05rem 2rem;
  border-radius: 0.375rem;
  /* The button is white in both themes, so it takes the fixed darker
     green rather than --c-accent-text, which lifts to a pale green in
     dark mode and would vanish on white. */
  background: #FFFFFF; color: rgb(173 26 33);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.005em;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}
.closer-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(0 0 0 / 0.28); }
.closer-cta:active { transform: translateY(0); }
.closer-cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

.closer-note {
  margin: 1.15rem 0 0;
  font-size: 0.8125rem; line-height: 1.55;
  color: #FFFFFF;
}
.closer-note a {
  font-weight: 600; color: #FFFFFF;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgb(255 255 255 / 0.45);
}
.closer-note a:hover { text-decoration-color: #FFFFFF; }

/* Anything narrower than the two-column split — phones and tablets
   alike — stacks the copy full width, so the weight goes to the bottom
   of the frame instead of the left of it. */
@media (max-width: 1023px) {
  .closer .closer-wash {
    background:
      linear-gradient(180deg,
        rgb(10 9 10 / 0.40) 0%,
        rgb(10 9 10 / 0.12) 18%,
        rgb(10 9 10 / 0.82) 46%,
        rgb(10 9 10 / 0.90) 76%,
        rgb(10 9 10 / 0.92) 100%),
      radial-gradient(120% 62% at 50% 30%,
        rgb(0 0 0 / 0) 46%,
        rgb(0 0 0 / 0.26) 100%);
  }
}

/* ── Phones ────────────────────────────────────────────────────
   The copy stacks full width, so the scrim turns bottom-weighted and
   the picture keeps the top of the frame to itself. */
@media (max-width: 767px) {
  .closer { min-height: 88svh; padding: 6rem 0 7vh; align-items: flex-end; }
  @supports not (min-height: 1svh) { .closer { min-height: 88vh; } }

  .closer .closer-media video { object-position: var(--focus-tall, center center); }


  .closer-h { margin-top: 1.1rem; font-size: clamp(2.25rem, 10vw, 2.9rem); line-height: 1.0; max-inline-size: 14ch; }
  .closer-p { margin-top: 1.1rem; font-size: 1rem; max-width: 26rem; }
  .closer-cta { width: 100%; }
}

@media (max-width: 360px) {
  .closer-h { font-size: 2.15rem; }
  .closer-p { font-size: 0.9375rem; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .closer { min-height: 0; padding: 3.5rem 0; align-items: center; }
  .closer-p { display: none; }
}

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