/* ============================================================
   HOMEPAGE — the dark room.

   Scoped almost entirely under `body.hp` so the ivory pages are
   untouched. The ground is the wine already on the hero veil,
   taken a stop deeper: the hero no longer ends at a seam, the
   whole page is the same room.

   No outer frame and no inset panel — unlike the reference,
   every section runs full-bleed, edge to edge.
   ============================================================ */

body.hp {
  --night: #17030a;
  --night-raised: #210610;
  --night-line: rgba(224, 205, 174, 0.16);
  --on-night: var(--ivory);
  --on-night-soft: rgba(246, 242, 236, 0.74);
  --on-night-faint: rgba(246, 242, 236, 0.46);

  background: var(--night);
  color: var(--on-night-soft);
}

body.hp .atmosphere { display: none; }

body.hp ::selection { background: var(--bordeaux-lift); color: var(--ivory); }


/* ------------------------------------------------------------
   HERO — full-bleed film, no card, no frame
   ------------------------------------------------------------ */

.hp-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hp-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--night); }

.hp-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.62;
}

/* keeps her red tint; darkest at the very top so the docked
   wordmark and the nav always have a ground */
.hp-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 2, 6, 0.82) 0%, rgba(15, 2, 6, 0.12) 26%, rgba(15, 2, 6, 0) 46%),
    linear-gradient(0deg, var(--night) 2%, rgba(23, 3, 10, 0.42) 34%, rgba(23, 3, 10, 0) 62%),
    linear-gradient(115deg, rgba(56, 7, 16, 0.52) 0%, rgba(110, 18, 37, 0.34) 45%, rgba(35, 5, 11, 0.62) 100%);
}

.hp-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--gutter) clamp(2.5rem, 6vh, 5rem);
}

/* the wordmark is a fixed, scroll-driven element — see .wm below.
   this reserves the space it occupies at rest so nothing collides */
.hp-hero-spacer { height: clamp(4.5rem, 13vw, 13rem); }

.hp-hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 4vh, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--night-line);
}

.hp-hero-kicker {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--champagne);
}

.hp-scroll-cue {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-night-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.hp-scroll-cue::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), transparent);
  animation: cue 2.4s var(--ease-silk) infinite;
}

@keyframes cue { 0%,100% { opacity: .3; transform: scaleX(.6) } 50% { opacity: 1; transform: scaleX(1) } }

/* The desktop cut is a high-key white studio, where the mobile cut is
   dark. Left at the shared 0.62 it composited 2.4x brighter behind the
   wordmark than the old desktop film did, so the wine read washed out.
   Scoped here so the phone, whose film has not changed, keeps its own
   value. The veil itself is untouched — dropping the video's opacity
   lets more of it through, so the red reads stronger, not weaker. */
@media (min-width: 901px) {
  .hp-hero-media video { opacity: 0.46; }
}


/* ------------------------------------------------------------
   THE WORDMARK — one line in the hero, two lines docked in the
   nav. Driven by --wm-* custom properties from js/home.js.
   ------------------------------------------------------------ */

.wm {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  transform-origin: top left;
  transform: translate3d(var(--wm-x, 0px), var(--wm-y, 0px), 0) scale(var(--wm-scale, 1));
  will-change: transform;
  pointer-events: none;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(3.4rem, 13.5vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.015em;
  color: var(--ivory);
  white-space: nowrap;
}

.wm-word { display: block; }

/* the second word is moved independently: to the right of the
   first at rest, directly beneath it once docked */
.wm-word-2 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(var(--w2-x, 0px), var(--w2-y, 0px), 0);
}

body.hp .nav-brand { opacity: var(--brand-opacity, 0); transition: opacity .25s ease; }


/* ------------------------------------------------------------
   INTRO — the lede and the figures, rehomed from the old hero
   ------------------------------------------------------------ */

.hp-intro {
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  max-width: 96rem;
  margin: 0 auto;
}

.hp-intro-lede {
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem);
  line-height: 1.5;
  color: var(--on-night);
  max-width: 34rem;
}

.hp-figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: 0.6rem;
}

.hp-figure strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--champagne);
}

.hp-figure span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--on-night-faint);
}


/* ------------------------------------------------------------
   SHARED — section label, counters, links
   ------------------------------------------------------------ */

.hp-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 6rem);
  line-height: 1;
  color: var(--on-night);
  margin: 0 0 clamp(2rem, 5vh, 4rem);
}

.hp-counter {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--champagne);
  margin-bottom: 1.1rem;
}

.hp-heading {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--on-night);
}

.hp-body { margin-top: 1.4rem; max-width: 32rem; color: var(--on-night-soft); }

.hp-link {
  display: inline-block;
  margin-top: 1.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-night);
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 0.35rem;
  transition: color var(--dur-mid) ease, border-color var(--dur-mid) ease;
}

.hp-link:hover { color: var(--champagne); }


/* ------------------------------------------------------------
   THE ARCHIVE — featured-entry browser
   ------------------------------------------------------------ */

.hp-archive { padding: clamp(4rem, 10vh, 8rem) var(--gutter) clamp(5rem, 12vh, 9rem); }

.hp-arch-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 96rem;
  margin: 0 auto;
}

.hp-arch-copy { padding-left: clamp(0rem, 6vw, 6rem); }

.hp-arch-figure { position: relative; margin: 0; }

.hp-arch-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--night-raised);
}

.hp-arch-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s var(--ease-silk);
}

.hp-arch-frame img.is-active { opacity: 1; }

.hp-arch-cap {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--on-night-faint);
  max-width: 30rem;
  min-height: 2.6em;
}

/* thumbnail selector, overlaid low on the image like the reference */
.hp-thumbs {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.hp-thumb {
  width: 3rem;
  height: 3.75rem;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--dur-mid) ease, border-color var(--dur-mid) ease, transform var(--dur-mid) var(--ease-silk);
}

.hp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-thumb:hover { opacity: 0.85; transform: translateY(-2px); }

.hp-thumb.is-active {
  opacity: 1;
  border-color: var(--ivory);
  box-shadow: 0 0 0 1px rgba(23, 3, 10, 0.6);
}

.hp-thumb:focus-visible { border-color: var(--champagne); opacity: 1; }


/* ------------------------------------------------------------
   THE ROOMS — scroll-driven horizontal accordion
   ------------------------------------------------------------ */

.hp-rooms { position: relative; }

/* the tall outer gives the sticky inner something to scrub against */
.hp-rooms-scroll { height: 420vh; position: relative; }

.hp-rooms-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vh, 5.5rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}

.hp-rooms-track {
  display: flex;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  /* panels share a top edge and the open one grows down from it, as in
     the reference — that drop is what gives the open panel its presence */
  align-items: flex-start;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  /* the label and the caption also have to fit inside one sticky
     viewport, so the panels take their height from what is left */
  height: clamp(16rem, 56svh, 34rem);
}

/* Both states are 3/4 portrait; only the height changes, and the width
   follows from aspect-ratio. Nothing to calculate, and the panel can
   never turn landscape however wide the row gets. */
.hp-room {
  position: relative;
  flex: 0 0 auto;
  height: 55%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--night-raised);
  transition: height .75s var(--ease-silk), filter .75s var(--ease-silk);
  filter: brightness(0.5) saturate(0.8);
}

.hp-room.is-open {
  height: 100%;
  filter: none;
}

.hp-room video,
.hp-room img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-rooms-caption {
  max-width: 96rem;
  margin: clamp(1.5rem, 4vh, 2.6rem) auto 0;
  min-height: 5.5rem;
}

.hp-rooms-caption .hp-heading {
  color: var(--on-night-faint);
  transition: opacity .45s var(--ease-silk);
}

.hp-rooms-caption.is-swapping .hp-heading { opacity: 0; }


/* ------------------------------------------------------------
   STATEMENT — full-bleed quote
   ------------------------------------------------------------ */

.hp-statement { position: relative; min-height: 86svh; display: grid; place-items: center; overflow: hidden; }

.hp-statement picture { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hp-statement img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; object-position: center 45%; }

.hp-statement::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--night), rgba(23, 3, 10, 0.55) 45%, var(--night));
}

.hp-statement-inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
  text-align: center;
}

.hp-quote {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem);
  line-height: 1.18;
  color: var(--on-night);
}

.hp-quote em { font-style: italic; color: var(--champagne); }

.hp-sign {
  margin-top: 2rem;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--on-night-faint);
}


/* ------------------------------------------------------------
   THE RECORD
   ------------------------------------------------------------ */

.hp-record { padding: clamp(5rem, 12vh, 9rem) var(--gutter); max-width: 96rem; margin: 0 auto; }

.hp-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}

.hp-record-figure { margin: 0; overflow: hidden; background: var(--night-raised); }
.hp-record-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-record-figure.is-square { aspect-ratio: 1; }
.hp-record-figure.is-tall { aspect-ratio: 4 / 5; }

.hp-record-list { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }

.hp-record-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--night-line);
}

.hp-record-row dt { color: var(--on-night); font-size: 0.95rem; }

.hp-record-row dd {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  text-align: right;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   CLOSING & FOOTER TAIL
   The background image of the door section extends through the footer.
   ------------------------------------------------------------ */

.hp-tail {
  position: relative;
  overflow: hidden;
  background: var(--night);
}

.hp-tail .hp-closing-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 25%;
  opacity: 0.48;
  pointer-events: none;
}

.hp-tail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(23, 3, 10, 0.92) 0%,
      rgba(23, 3, 10, 0.80) 36%,
      rgba(23, 3, 10, 0.30) 70%,
      rgba(23, 3, 10, 0.58) 100%
    ),
    linear-gradient(
      180deg,
      var(--night) 0%,
      transparent 12%,
      transparent 82%,
      rgba(23, 3, 10, 0.88) 100%
    );
}

.hp-closing {
  position: relative;
  z-index: 1;
  min-height: 70svh;
  display: flex;
  align-items: center;
  padding: clamp(4.5rem, 10vh, 7.5rem) var(--gutter);
  margin: 0;
}

.hp-tail .hp-closing::after {
  display: none;
}

.hp-tail .footer {
  position: relative;
  z-index: 1;
  background: transparent;
  border-top: 1px solid rgba(224, 205, 174, 0.16);
}

.hp-closing-inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0;
}

.hp-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* on the wine ground the filled button inverts, as in the hero fix */
body.hp .btn-wine { background: var(--ivory); color: var(--bordeaux-deep); }
body.hp .btn-wine:hover { background: var(--paper); }
body.hp .btn-line { border-color: rgba(246, 242, 236, 0.42); color: var(--ivory); }
body.hp .btn-line:hover { border-color: var(--ivory); background: rgba(246, 242, 236, 0.09); }


/* ------------------------------------------------------------
   REVEALS — per-line mask
   ------------------------------------------------------------ */

.rise { display: block; overflow: hidden; }

.rise > * {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .95s var(--ease-silk), opacity .95s var(--ease-silk);
  transition-delay: var(--rise-delay, 0s);
}

.rise.is-in > * { transform: none; opacity: 1; }


/* ------------------------------------------------------------
   NARROW
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .hp-intro,
  .hp-arch-grid,
  .hp-record-grid { grid-template-columns: 1fr; }

  .hp-arch-copy { padding-left: 0; }

  .hp-record-grid { gap: 2rem; }
  .hp-record-figure.is-tall { display: none; }

  /* the accordion cannot expand in place at this width — it becomes
     a snap-scrolling row, which is how the reference would degrade */
  .hp-rooms-scroll { height: auto; }
  .hp-rooms-sticky { position: static; height: auto; }

  .hp-rooms-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }

  .hp-rooms-track { height: auto; align-items: flex-start; }

  .hp-room,
  .hp-room.is-open {
    width: 68vw !important;
    flex: 0 0 68vw;
    height: auto;
    aspect-ratio: 3 / 4;
    scroll-snap-align: center;
  }

  .hp-room { filter: brightness(0.62) saturate(0.9); }

  .hp-room.is-open { filter: none; }

  /* touch targets: 44px minimum on both axes */
  .hp-thumbs { left: 0.55rem; bottom: 0.55rem; gap: 0.3rem; }
  .hp-thumb { width: 2.75rem; height: 3.4rem; }

  .hp-link { padding: 0.75rem 0; margin-top: 1.4rem; }

  /* the lede carries the page at this width, so give it room */
  .hp-intro { padding-top: clamp(3.5rem, 9vh, 6rem); gap: 2.5rem; }
  .hp-figures { gap: 1.6rem 2.4rem; }

  .hp-archive { padding-top: clamp(3rem, 8vh, 5rem); }
  .hp-arch-grid { gap: 2rem; }
  .hp-arch-cap { min-height: 0; margin-top: 0.85rem; }

  .hp-rooms-sticky { padding: clamp(3rem, 8vh, 5rem) var(--gutter) clamp(2rem, 5vh, 3rem); }
  .hp-rooms-caption { min-height: 0; margin-top: 1.2rem; }

  /* full-bleed edges read better than a gutter on a phone */
  .hp-statement img { object-position: center 50%; }

  .hp-record { padding-top: clamp(3.5rem, 9vh, 6rem); }
  .hp-closing {
    min-height: 65svh;
    padding: clamp(4rem, 10vh, 6rem) var(--gutter);
  }
  .hp-tail .hp-closing-bg {
    object-position: center 18%;
    opacity: 0.44;
  }
  .hp-tail::after {
    background: linear-gradient(
      180deg,
      var(--night) 0%,
      rgba(23, 3, 10, 0.68) 20%,
      rgba(23, 3, 10, 0.82) 80%,
      rgba(23, 3, 10, 0.95) 100%
    );
  }
  .hp-closing-inner { max-width: 100%; }
  .hp-actions .btn { flex: 1 1 12rem; text-align: center; }
}


@media (prefers-reduced-motion: reduce) {
  .hp-hero-media video { display: none; }
  .hp-scroll-cue::after { animation: none; }
  .rise > * { transform: none; opacity: 1; transition: none; }
  .hp-room { transition: none; }
  .wm { transition: none; }
}