/* ==========================================================================
   Seafront Residences · v2 page styles
   The engine (scrollcraft.css) is untouched; this file themes it with tokens
   and styles the page's own markup. Grammar: filmic one-shot, day into night.
   ========================================================================== */

:root {
  --paper:      #EEE9E1;
  --paper-2:    #E6DFD4;
  --taupe:      #CFC7BA;
  --night:      #0F1823;
  --night-2:    #16222F;
  --bone:       #F4EFE7;      /* light ink on images and at night */

  --ink:        #26221E;
  --ink-soft:   #5F574D;
  --tan:        #7A5D3C;
  --sea:        #2B4A5E;      /* THE accent: focus, sight lines, links */
  --lamp:       #F2CB8A;      /* the lamps at night: the live dot only */

  --sc-canvas:      var(--paper);
  --sc-surface:     var(--paper-2);
  --sc-ink:         var(--ink);
  --sc-ink-soft:    var(--ink-soft);
  --sc-accent:      var(--sea);
  --sc-accent-ink:  var(--bone);
  --sc-font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sc-font-text:    "Albert Sans", system-ui, sans-serif;
  --sc-shadow-color: 30 20% 30%;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 64px;
}

html { background: var(--night); }
body { background: var(--paper); color: var(--ink); }

/* ------------------------------------------------------------ type ------- */
.display { font-family: var(--sc-font-display); font-weight: 300; line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; margin: 0; }
.display em, .ev__line em { font-style: italic; }
.display--lg { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem); max-width: 15ch; }
.display--md { font-size: clamp(1.9rem, 1.3rem + 2vw, 3.1rem); max-width: 18ch; }
.label { font-family: var(--sc-font-text); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tan); margin: 0; }
.body { font-size: clamp(1rem, 0.96rem + 0.18vw, 1.08rem); line-height: 1.7; color: var(--ink-soft); max-width: 56ch; text-wrap: pretty; margin: 0; }
.small { font-size: 0.8rem; line-height: 1.6; color: var(--ink-soft); max-width: 72ch; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; transform: translateY(-200%); transition: transform 160ms var(--ease); }
.skip:focus { transform: none; }

/* --------------------------------------------------------- buttons ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 1.8rem;
  border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  font-family: var(--sc-font-text); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--light { background: var(--bone); color: var(--night); }
.btn--light:hover { background: #fff; }
.btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: progress; }

/* ------------------------------------------------------------- bar ------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--sc-gutter); color: var(--bone);
  transition: color 300ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.bar__mark { display: grid; text-decoration: none; color: inherit; line-height: 1.15; }
.bar__name { font-family: var(--sc-font-display); font-size: 1.32rem; font-weight: 400; letter-spacing: 0.01em; }
.bar__by { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }
.bar__cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem;
  border: 1px solid currentColor; border-radius: 2px; color: inherit; text-decoration: none;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.bar[data-tone="image"] { text-shadow: 0 1px 3px rgba(15, 20, 28, 0.45); }
.bar[data-tone="image"] .bar__cta:hover, .bar[data-tone="dark"] .bar__cta:hover { background: var(--bone); color: var(--night); border-color: var(--bone); text-shadow: none; }
.bar[data-tone="paper"], .bar[data-tone="paper2"], .bar[data-tone="taupe"] {
  color: var(--ink); background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(38, 34, 30, 0.08);
}
.bar[data-tone="paper2"] { background: color-mix(in oklab, var(--paper-2) 88%, transparent); }
.bar[data-tone="taupe"] { background: color-mix(in oklab, var(--taupe) 88%, transparent); }
.bar[data-tone="paper"] .bar__cta:hover, .bar[data-tone="paper2"] .bar__cta:hover, .bar[data-tone="taupe"] .bar__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bar[data-tone="dark"] { color: var(--bone); background: color-mix(in oklab, var(--night) 82%, transparent); backdrop-filter: blur(10px); }
.bar.is-at-form .bar__cta { visibility: hidden; }
@media (max-width: 600px) {
  :root { --bar-h: 56px; }
  .bar__by { display: none; }
  .bar__name { font-size: 1.12rem; }
  .bar__cta { min-height: 38px; padding: 0 0.8rem; font-size: 0.6rem; letter-spacing: 0.12em; }
  .bar__name { white-space: nowrap; }
}
@media (max-width: 380px) {
  .bar__name { font-size: 1rem; }
  .bar__cta { padding: 0 0.55rem; letter-spacing: 0.07em; }
}

/* ---------------------------------------------------------- arrival ------ */
/* Every plane shares one frame geometry (the render's 2400:1197 box covering
   the stage), written in px by site.js; the svh/vw values are the no-JS
   fallback. Planes are siblings in the stage so the title can sit between. */
.arrival__stage {
  --fw: max(100vw, 200.5svh);
  --fh: calc(var(--fw) / 2.005);
  --fl: calc((100vw - var(--fw)) / 2);
  --ft: calc((100svh - var(--fh)) / 2);
  background: #9AAABB;
}
.pl { position: absolute; left: var(--fl); top: var(--ft); width: var(--fw); max-width: none; height: auto; will-change: transform; }
.pl--sky {
  transform-origin: 50% 35%;
  transform: translate3d(calc(var(--mx, 0) * -4px), calc(var(--my, 0) * -3px), 0) scale(calc(1.06 - var(--sc-p, 0) * 0.04));
}
.pl--title {
  left: 0; right: 0; width: auto;
  top: max(calc(var(--ft) + var(--fh) * 0.07), calc(var(--bar-h) + 1.2rem));
  text-align: center; color: var(--bone); pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--sc-p, 0) * var(--fh) * 0.17 + var(--my, 0) * -4px), 0);
}
.pl--title span {
  display: inline-block;
  font-family: var(--sc-font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(3.1rem, 0.8rem + 8.6vw, 10rem); line-height: 1;
  letter-spacing: 0.3em; text-indent: 0.3em;
  text-shadow: 0 2px 30px rgba(40, 52, 70, 0.25);
}
.pl--land {
  transform-origin: 50% 80%;
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--sc-p, 0) * var(--fh) * -0.04 + var(--my, 0) * -7px), 0) scale(calc(1.02 + var(--sc-p, 0) * 0.03));
}
.pl--haze {
  height: var(--fh); pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 64%, rgba(255, 216, 170, 0.16) 73%, transparent 82%),
    radial-gradient(55% 45% at 88% 8%, rgba(255, 228, 190, 0.22), transparent 70%);
  opacity: calc(0.75 + var(--sc-p, 0) * 0.25);
}
.pl--sea {
  transform-origin: 50% 70%;
  transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--sc-p, 0) * var(--fh) * -0.1 + var(--my, 0) * -11px), 0) scale(calc(1.03 + var(--sc-p, 0) * 0.04));
}
/* the only scrim on the cover: a corner of dusk where the copy sits */
.arrival__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(10, 17, 26, 0.86) 0%, rgba(10, 17, 26, 0.76) 30%, rgba(10, 17, 26, 0.36) 46%, rgba(10, 17, 26, 0) 62%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 44%, transparent 74%);
  mask-image: linear-gradient(to top, #000 0%, #000 44%, transparent 74%);
}
.arrival__copy {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem);
  max-width: min(40rem, 86vw); color: var(--bone); z-index: 3;
}
.tag {
  display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.1rem;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.tag__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); flex: none;
  box-shadow: 0 0 0 0 rgba(242, 203, 138, 0.6);
}
.is-live .tag__dot { animation: live 2.8s ease-out -1.2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(242, 203, 138, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(242, 203, 138, 0); } }
.arrival__h1 {
  font-family: var(--sc-font-display); font-weight: 300; margin: 0;
  font-size: clamp(2.4rem, 1.2rem + 3.1vw, 4.2rem); line-height: 1.02; letter-spacing: -0.015em;
  max-width: 20ch; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(10, 16, 24, 0.35);
}
.arrival__sub {
  margin: 1rem 0 1.8rem; max-width: 34ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.5; color: #E9E3D9;
  text-shadow: 0 1px 10px rgba(10, 16, 24, 0.5);
}
@media (max-width: 860px) {
  .arrival__scrim { -webkit-mask-image: none; mask-image: none; background: linear-gradient(to top, rgba(10, 17, 26, 0.9) 0%, rgba(10, 17, 26, 0.72) 34%, rgba(10, 17, 26, 0.3) 52%, rgba(10, 17, 26, 0) 66%); }
  .arrival__copy { right: var(--sc-gutter); bottom: clamp(1.5rem, 6vh, 3rem); }
}

/* ------------------------------------------------------------ proof ------ */
.proof__stage {
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.75fr);
  grid-template-rows: 1fr;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  padding: calc(var(--bar-h) + clamp(1.5rem, 5vh, 3.5rem)) var(--sc-gutter) clamp(1.5rem, 5vh, 3rem);
}
.proof__copy { grid-column: 1; grid-row: 1; align-self: center; display: grid; gap: 1.6rem; }
.proof__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 3.1rem); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--ink); text-wrap: balance;
}
.proof__pair--after, .proof__line--more { opacity: 0; }
.proof__lines { position: relative; min-height: 10.5em; font-size: clamp(1.4rem, 1.05rem + 1vw, 2.05rem); }
.proof__pair { position: absolute; inset: 0 0 auto 0; display: grid; gap: 0.55em; }
.proof__line {
  margin: 0; font-family: var(--sc-font-display); font-weight: 300; line-height: 1.18; color: var(--ink);
  text-wrap: pretty;
}
.proof__line + .proof__line { color: var(--ink-soft); }
.proof__fig { grid-column: 2; grid-row: 1; margin: 0; min-height: 0; display: grid; align-content: center; gap: 0.8rem; }
.section { width: 100%; height: auto; max-height: calc(100svh - var(--bar-h) - 15rem); overflow: visible; }
.proof__cap { display: flex; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--ink-soft); }
/* the drawing: a presentation section, line weights by role */
.section { --cut: #1E1B18; --line: #4A443C; --beyond: #A39A8E; --sage: #7D8A68; }
.ln { fill: none; stroke: var(--line); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ln--ground { stroke: var(--cut); stroke-width: 1.9; }
.ln--sea { stroke: var(--sea); stroke-width: 1.5; }
.ln--waterhatch { stroke: #7FA0B2; stroke-width: 0.6; }
.ln--beyond { stroke: var(--beyond); stroke-width: 0.6; }
.ln--glass { stroke: #7F9CAD; stroke-width: 0.6; }
.ln--rail { stroke: var(--line); stroke-width: 0.7; }
.ln--dash { stroke: #8E857A; stroke-width: 0.7; stroke-dasharray: 3 2.5; fill: rgba(247, 243, 236, 0.5); }
.ln--leader { stroke: var(--line); stroke-width: 0.6; }
.ln--ghost-ground { stroke: #9A9187; stroke-width: 1.3; }
.ln--ghost-sight { stroke: #9A9187; stroke-width: 0.8; }
.ln--blocked { stroke: #A0533F; stroke-width: 1; }
.ln--cross { stroke: #A0533F; stroke-width: 1.5; opacity: 0; }
.ln--sight { stroke: url(#sight-fade); stroke-width: 1; transition: opacity 200ms var(--ease), stroke-width 200ms var(--ease); }
.cut { fill: var(--cut); }
.bfill { fill: #F7F3EC; transition: fill 200ms var(--ease); }
.slat { fill: #7A5D3C; }
.water { fill: #9DBFCF; }
.water-body { fill: url(#water-fill); }
.earth { fill: #E4D9C7; }
.earth-hatch { fill: url(#hatch-earth); }
.hatch-line { stroke: #C4B397; stroke-width: 0.8; }
.hatch-line--ghost { stroke: #CFC8BD; }
.ghost-earth { fill: url(#hatch-ghost); }
.ghost-fill { fill: #F2EEE7; }
.ghost-cut { fill: #9A9187; }
.stone { fill: url(#stone); stroke: var(--line); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.stone-ground { fill: #D9CCB6; }
.stone-piece { fill: #E6DCCB; stroke: #A69882; stroke-width: 0.6; }
.tree .canopy circle { fill: rgba(125, 138, 104, 0.2); stroke: var(--sage); stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.tree .trunk { fill: none; stroke: #6B5E4D; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cypress { fill: rgba(96, 112, 84, 0.28); stroke: #607054; stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.person { fill: var(--cut); }
.eye { fill: var(--sea); transition: r 200ms var(--ease); }
.callout circle { fill: var(--paper); stroke: var(--cut); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.callout text { font-family: var(--sc-font-text); font-size: 12px; font-weight: 500; fill: var(--cut); }
.blk { outline: none; }
.is-complete .blk { cursor: pointer; }
.blk.is-hot .bfill { fill: #FFFDF8; }
.sight.has-hot .ln--sight, .sight.has-hot .eye { opacity: 0.18; }
.sight.has-hot .ln--sight.is-hot, .sight.has-hot .eye.is-hot { opacity: 1; }
.sight.has-hot .ln--sight.is-hot { stroke-width: 1.8; }
.blk:focus-visible .bfill { fill: #FFFDF8; }
.blk:focus-visible { outline: none; }
.tx { font-family: var(--sc-font-text); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; fill: var(--ink-soft); font-weight: 500; }
.tx--blk { font-size: 11px; letter-spacing: 0.1em; fill: #6F675D; }
.tx--warn { fill: #A0533F; }
.tx--tip { fill: var(--sea); letter-spacing: 0.12em; opacity: 0; transition: opacity 160ms var(--ease); }
.tx--tip.is-on { opacity: 1; }
.proof__key { list-style: none; margin: 0.2rem 0 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; counter-reset: key; font-size: 0.78rem; color: var(--ink-soft); }
.proof__key li { counter-increment: key; display: flex; align-items: center; gap: 0.45rem; }
.proof__key li::before { content: counter(key); display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--ink); border-radius: 50%; font-size: 0.66rem; font-weight: 500; color: var(--ink); }
@media (max-width: 960px) {
  .proof__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-top: calc(var(--bar-h) + 1.2rem); padding-bottom: 1.5rem; row-gap: 0.6rem; }
  .proof__copy { grid-row: 1; align-self: start; gap: 0.6rem; }
  .proof__lines { min-height: 7.4em; font-size: clamp(1.1rem, 0.95rem + 1.2vw, 1.5rem); }
  .proof__fig { grid-column: 1; grid-row: 2; }
  .proof__title { font-size: clamp(1.5rem, 1.2rem + 2vw, 2.1rem); }
  .section { max-height: 44svh; }
  .callout, .proof__key, .tx--blk { display: none; }
  /* strokes do not scale with the drawing, so thin them at phone size */
  .ln { stroke-width: 0.55; }
  .ln--ground { stroke-width: 1.1; }
  .ln--sight { stroke-width: 0.7; }
  .ln--sea { stroke-width: 1; }
  .stone { stroke-width: 0.5; }
}

/* ------------------------------------------------------------- home ------ */
.home__stage { background: var(--paper); }
.home__wipe, .home__media, .evening__wipe, .evening__media { position: absolute; inset: 0; }
.home__wipe, .evening__wipe { will-change: clip-path; }
/* The copy lives in the sky of the open wall, centred; the sky is light, so
   the type is ink. */
/* The clip opens under the oak ceiling and ends under the sky: light type on
   a dusk band at the top reads over both. */
.home__scrim {
  position: absolute; inset: 0 0 auto 0; height: 58%; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(18, 14, 10, 0.8) 0%, rgba(18, 14, 10, 0.66) 42%, rgba(18, 14, 10, 0.3) 70%, rgba(18, 14, 10, 0) 100%);
}
.home__copy {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--bar-h) + 6vh);
  width: min(34rem, 82vw); height: 12rem; translate: -50% 0; text-align: center; color: var(--bone);
  text-shadow: 0 1px 2px rgba(12, 9, 6, 0.6), 0 4px 24px rgba(12, 9, 6, 0.45);
}
/* the lead and the three types take turns in the same place */
.home__lead, .home__types, .type { position: absolute; inset: 0 0 auto 0; }
.home__lead {
  margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.9rem); line-height: 1.1; text-wrap: balance;
}
.type { display: grid; justify-items: center; gap: 0.35rem; }
.type__kind { margin: 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); }
.type__size { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); line-height: 1; color: var(--bone); font-variant-numeric: lining-nums; }
.type__note { margin: 0; font-size: 0.92rem; color: #EDE6DA; max-width: 34ch; }
@media (max-width: 860px) {
  .home__copy { top: calc(var(--bar-h) + 4svh); }
}

/* -------------------------------------------------------- materials ------ */
.materials__stage { background: var(--paper-2); display: flex; align-items: center; }
.rail { gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--sc-gutter); align-items: flex-end; }
.rail > * { flex: 0 0 auto; }
.rail__lead { width: min(28rem, 80vw); display: grid; gap: 1rem; align-self: center; }
.mat { width: clamp(16rem, 27vw, 25rem); margin: 0; }
.mat__img { overflow: hidden; }
.mat img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transform: scale(calc(1.08 - var(--sc-p, 0) * 0.06)); }
.mat h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.4rem; margin: 0.9rem 0 0.15rem; color: var(--ink); }
.mat p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.rail__note { width: min(22rem, 70vw); align-self: center; padding-right: var(--sc-gutter); }
@media (prefers-reduced-motion: no-preference) {
  .mat { opacity: calc(0.55 + 0.45 * min(1, var(--sc-p, 0) * 3)); }
}

/* ---------------------------------------------------------- evening ------ */
.evening__stage { background: var(--night); }
.evening__media::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 9rem; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(10, 17, 26, 0.5), rgba(10, 17, 26, 0));
}
/* Measured against the clip: light type only reaches 4.5:1 on its own once the
   film is nearly at night, which happens as the stage leaves. So the corner
   behind the night lines darkens with the dusk, from p 0.38 to 0.52. */
/* By day the type is ink on the sky; a faint wash of the paper behind it keeps
   the small line clear where the sky deepens. It leaves as the night shade comes. */
.evening__dayscrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to left, rgba(244, 239, 231, 0.4) 0%, rgba(244, 239, 231, 0.3) 38%, rgba(244, 239, 231, 0.1) 50%, rgba(244, 239, 231, 0) 60%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 70%);
  opacity: clamp(0, calc((0.5 - var(--sc-p, 0)) / 0.06), 1);
}
.evening__nightscrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to left, rgba(8, 14, 24, 0.74) 0%, rgba(8, 14, 24, 0.62) 38%, rgba(8, 14, 24, 0.22) 50%, rgba(8, 14, 24, 0) 60%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 74%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 74%);
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.4) / 0.1), 1);
}
.evening__copy {
  position: absolute; z-index: 3; right: var(--sc-gutter); top: calc(var(--bar-h) + 5vh);
  width: min(30rem, 84vw);
}
.ev__line { position: absolute; inset: 0 0 auto 0; margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.8rem); line-height: 1.12; text-wrap: balance; }
.ev__day, .ev__own { position: absolute; inset: 0 0 auto 0; }
/* restate the colour on each block, not only on its children: the block's own
   colour is what decides which way its contrast is graded */
.ev__day { color: var(--ink); }
.ev__own { color: var(--bone); }
.ev__day .ev__line, .ev__own .ev__line { position: static; }
.ev__line--day { color: var(--ink); }
.ev__line--night { color: var(--bone); text-shadow: 0 2px 18px rgba(8, 14, 22, 0.45); }
.ev__body { margin: 1rem 0 0; font-size: 1rem; line-height: 1.65; color: #E3E8EC; max-width: 44ch; text-shadow: 0 1px 10px rgba(8, 14, 22, 0.6); }
.ev__body--day { color: #2E2924; text-shadow: none; }
@media (max-width: 860px) {
  .evening__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(var(--bar-h) + 2.5vh); }
  /* on a phone the facts line would run into the cypresses: the headline carries the beat */
  .ev__body--day { display: none; }
  .evening__dayscrim { -webkit-mask-image: none; mask-image: none; background: linear-gradient(to bottom, rgba(244, 239, 231, 0.62) 0%, rgba(244, 239, 231, 0.5) 32%, rgba(244, 239, 231, 0) 55%); }
  .evening__nightscrim { -webkit-mask-image: none; mask-image: none; background: linear-gradient(to bottom, rgba(8, 14, 24, 0.76) 0%, rgba(8, 14, 24, 0.6) 40%, rgba(8, 14, 24, 0) 64%); }
}

/* --------------------------------------------------------- priority ------ */
.priority { position: relative; background: var(--night); color: var(--bone); padding: clamp(6rem, 12vw, 10rem) 0 clamp(5rem, 9vw, 8rem); overflow: hidden;
  --ink: var(--bone); --ink-soft: #AEB6BD; --tan: #C9A97C; --sc-ink: var(--bone); --sc-ink-soft: #AEB6BD; --sea: #9CC0D3; --sc-accent: #9CC0D3; --sc-accent-ink: var(--night); }
.priority__bg {
  position: absolute; inset: 0 0 auto 0; height: 80vh; pointer-events: none;
  background: url("assets/evening-end.webp") center 70% / cover no-repeat;
  opacity: 0.38;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
}
.priority__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.priority__intro { display: grid; gap: 1.4rem; }
.priority__intro .display { color: var(--bone); }
.priority__lede { color: #C9D2D9; }
.launch { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.launch::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 26px; width: 1px; background: rgba(236, 229, 217, 0.28); }
.launch__step { position: relative; display: grid; grid-template-columns: 1.9rem auto 1fr; column-gap: 0.6rem; row-gap: 0.15rem; padding-bottom: 1.3rem; align-items: baseline; }
.launch__mark { grid-row: 1 / span 2; width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(236, 229, 217, 0.55); background: var(--night); margin-top: 0.3rem; }
.launch__when { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #9FAAB3; }
.launch__name { font-family: var(--sc-font-display); font-size: 1.45rem; font-weight: 400; color: var(--bone); }
.launch__what { grid-column: 2 / span 2; font-size: 0.92rem; color: #B9C2C9; }
.launch__step.is-now .launch__mark { background: var(--lamp); border-color: var(--lamp); }
.is-live .launch__step.is-now .launch__mark { animation: live 2.8s ease-out -0.6s infinite; }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }
.launch__step.is-now .launch__when { color: var(--lamp); }
.priority__honest { margin: 0.4rem 0 0; font-size: 0.86rem; line-height: 1.6; color: #AEB6BD; border-left: 1px solid rgba(236, 229, 217, 0.3); padding-left: 1rem; max-width: 48ch; }
@media (max-width: 900px) { .priority__grid { grid-template-columns: 1fr; } }

/* the form, on a lit glass panel */
.eoi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.6rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: rgba(22, 34, 47, 0.78); border: 1px solid rgba(236, 229, 217, 0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.f { display: grid; gap: 0.45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.f--wide { grid-column: 1 / -1; }
.f label, .f legend { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #C9BFB0; padding: 0; }
.opt { letter-spacing: 0.1em; text-transform: none; font-weight: 400; color: #97A0A8; margin-left: 0.4rem; }
.eoi input[type="text"], .eoi input[type="email"], .eoi input[type="tel"], .eoi select, .eoi textarea {
  width: 100%; min-height: 46px; background: rgba(236, 229, 217, 0.05);
  border: 0; border-bottom: 1px solid rgba(236, 229, 217, 0.42); border-radius: 0; color: var(--bone);
  padding: 0.7rem 0.3rem; font-size: 1rem;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.eoi select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #C9BFB0 50%), linear-gradient(135deg, #C9BFB0 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.8rem; }
.eoi select option { color: #26221E; }
.eoi textarea { resize: vertical; min-height: 5rem; }
.eoi input:hover, .eoi select:hover, .eoi textarea:hover { border-bottom-color: rgba(236, 229, 217, 0.75); }
.eoi input:focus-visible, .eoi select:focus-visible, .eoi textarea:focus-visible { outline: none; border-bottom-color: #9CC0D3; background: rgba(156, 192, 211, 0.1); }
.eoi [aria-invalid="true"] { border-bottom-color: #E59A84 !important; }
.f__phone { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips label { position: relative; letter-spacing: 0; text-transform: none; font-size: 0.92rem; font-weight: 400; color: var(--bone); }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(236, 229, 217, 0.4); transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
.chips input:hover + span { border-color: rgba(236, 229, 217, 0.8); }
.chips input:checked + span { background: var(--bone); color: var(--night); border-color: var(--bone); }
.chips input:focus-visible + span { outline: 2px solid #9CC0D3; outline-offset: 3px; }
.consent { display: grid !important; grid-template-columns: 1.4rem 1fr; gap: 0.7rem; align-items: start; letter-spacing: 0 !important; text-transform: none !important; font-size: 0.86rem !important; font-weight: 400 !important; color: #B3BCC3 !important; line-height: 1.55; }
.consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: #9CC0D3; }
.consent a { color: var(--bone); }
.f--submit { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.eoi__status { margin: 0; font-size: 0.9rem; color: #C9D6DD; max-width: 40ch; }
.eoi__status.is-error { color: #F0B3A2; }
.eoi__download {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; padding: 0 1.1rem;
  border: 1px solid var(--bone); color: var(--bone); text-decoration: none;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.eoi__download:hover { background: var(--bone); color: var(--night); }
.eoi__download:focus-visible { outline: 2px solid #9CC0D3; outline-offset: 3px; }
@media (max-width: 640px) { .eoi { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ frame ------ */
.frame { background: var(--taupe); padding-block: clamp(6rem, 13vw, 11rem) clamp(4rem, 8vw, 6rem); text-align: center; --tan: #5E4A33; --ink-soft: #4F4840; }
.frame__inner { display: grid; justify-items: center; gap: 1rem; }
.frame__line { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); color: var(--ink); }
.frame__admit { text-align: center; color: var(--ink-soft); max-width: 52ch; }
.frame__rule { width: 4rem; border: 0; border-top: 1px solid rgba(38, 34, 30, 0.35); margin: 1.6rem 0 0.6rem; }
.frame__mark { margin: 0; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; font-size: 0.84rem; color: var(--ink); }
/* the base: its own small dark section under the taupe close, centred */
.frame { padding-bottom: 0; }
.frame__base { margin-top: clamp(4.5rem, 10vw, 7rem); background: #1F1C19; color: #CFC7BA; }
.frame__baseinner { display: grid; justify-items: center; gap: 1.3rem; padding-block: clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
/* phones: keep the last lines clear of the back-to-top ring */
@media (max-width: 760px) { .frame__baseinner { padding-bottom: calc(54px + 2.6rem + env(safe-area-inset-bottom)); } }
.frame__legal { margin: 0; max-width: 64ch; color: #B9B0A3; text-align: center; }
.frame__legal a { color: #E9E2D6; }
.frame__social { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 0.8rem; }
.frame__social a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(236, 229, 217, 0.4); color: #ECE5D9;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.frame__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.frame__social .dot { fill: currentColor; stroke: none; }
.frame__social a:hover { background: #ECE5D9; color: #1F1C19; border-color: #ECE5D9; }
.frame__social a:focus-visible { outline: 2px solid #9CC0D3; outline-offset: 3px; }

/* --------------------------------------------------- reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  .pl, .pl--title, .mat img { transform: none !important; }
  .home__wipe, .evening__wipe { clip-path: none !important; }
  .tag__dot, .launch__step.is-now .launch__mark { animation: none; }
}

/* ---------------------------------------------- materials on touch ------ */
/* Phones and touch tablets get a rail the finger swipes sideways; the
   scroll-driven rail stays for mouse and trackpad. */
.materials-m { display: none; }
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .materials { display: none; }
  .materials-m { display: block; background: var(--paper-2); padding: clamp(4rem, 12vw, 6rem) 0 clamp(3rem, 9vw, 4.5rem); }
  .materials-m__head { display: grid; gap: 0.9rem; margin-bottom: 1.8rem; }
  .mrail {
    display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter);
    padding: 0 var(--sc-gutter) 0.6rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mrail::-webkit-scrollbar { display: none; }
  .mrail > * { flex: 0 0 auto; scroll-snap-align: start; }
  .mrail .mat { width: min(78vw, 22rem); opacity: 1; }
  .mrail .mat img { transform: none; }
  .mrail__end { width: min(70vw, 18rem); align-self: center; padding-right: var(--sc-gutter); }
  .mrail__hint { margin: 1rem 0 0; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tan); }
  .mrail__hint span { display: inline-block; margin-left: 0.3rem; }
  .mrail:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference), (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .is-live .mrail__hint span { animation: nudge 2.4s var(--ease) -0.8s infinite; }
}
@keyframes nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } }

/* ------------------------------------------------------------- reel ------ */
.reel { background: var(--paper); padding: clamp(5rem, 11vw, 9rem) 0; }
.reel__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.reel__media { margin: 0; justify-self: end; width: min(100%, 26rem); }
.reel__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #1b2530; box-shadow: 0 30px 70px -35px rgba(38, 34, 30, 0.55); }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__controls { position: absolute; right: 0.8rem; bottom: 0.8rem; display: flex; gap: 0.5rem; }
.reel__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(244, 239, 231, 0.55); background: rgba(16, 22, 30, 0.38); color: var(--bone);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 160ms var(--ease);
}
.reel__btn:hover { background: rgba(16, 22, 30, 0.65); }
.reel__btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.reel__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reel__play .i-play { fill: currentColor; stroke: none; display: none; }
.reel__play.is-paused .i-play { display: block; }
.reel__play.is-paused .i-pause { display: none; }
.reel__sound .i-on { display: none; }
.reel__sound[aria-pressed="true"] .i-on { display: block; }
.reel__sound[aria-pressed="true"] .i-off { display: none; }
.reel__cap { margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.reel__text { max-width: 34rem; }
.reel__text .display { max-width: 12ch; }
.reel__lede { margin-top: 1.4rem !important; }
.reel__moments { list-style: none; margin: 2.2rem 0 0 !important; padding: 0; border-top: 1px solid rgba(38, 34, 30, 0.16); }
.reel__moments li {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.95rem 0; border-bottom: 1px solid rgba(38, 34, 30, 0.16);
  font-family: var(--sc-font-display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.3; color: var(--ink);
}
.reel__moments span { font-family: var(--sc-font-text); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tan); }
@media (max-width: 860px) {
  .reel__grid { grid-template-columns: 1fr; }
  .reel__media { justify-self: center; width: min(100%, 22rem); }
  .reel__moments li { grid-template-columns: 6rem 1fr; }
}

/* ------------------------------------------------------------ coast ------ */
.coast { padding: 0; }
.coast__fig { position: relative; margin: 0; height: min(92svh, 56vw); min-height: 26rem; overflow: hidden; }
.coast__img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none; object-fit: cover; will-change: transform; }
.coast__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10, 17, 26, 0.72) 0%, rgba(10, 17, 26, 0.38) 30%, rgba(10, 17, 26, 0) 55%); }
.coast__cap { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(2rem, 7vh, 4.5rem); color: var(--bone); }
.coast__line { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.8rem); line-height: 1.04; max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 22px rgba(10, 16, 24, 0.4); }
.coast__sub { margin: 0.9rem 0 0; max-width: 40ch; font-size: 1rem; line-height: 1.55; color: #E8E2D8; text-shadow: 0 1px 10px rgba(10, 16, 24, 0.55); }

/* --------------------------------------------------------- a day here ---- */
.day { background: var(--paper); padding: clamp(5rem, 11vw, 9rem) 0 clamp(5rem, 10vw, 8rem); overflow: hidden; }
.day__title { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.day__row { display: grid; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; }
.day__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.day__row--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(100%, 52rem); margin: clamp(3rem, 7vw, 6rem) 0 0 auto; }
.day__item { margin: 0; }
.plx { will-change: transform; }
.day__item--low { margin-top: clamp(3rem, 9vw, 8rem); }
.day__item img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.day figcaption { margin-top: 0.9rem; font-family: var(--sc-font-display); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.3; color: var(--ink); }
.day figcaption span { display: block; margin-bottom: 0.3rem; font-family: var(--sc-font-text); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tan); }
.day__wide { margin: clamp(3.5rem, 8vw, 7rem) 0 0; }
.day__wideframe { height: min(78svh, 52vw); overflow: hidden; position: relative; }
.day__wideframe img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; will-change: transform; }
@media (max-width: 760px) {
  .day__row--three, .day__row--two { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
  .day__row--three .day__item:last-child { grid-column: 1 / -1; width: 70%; justify-self: center; }
  .day__item--low { margin-top: 2.5rem; }
  .day__row--two { margin-top: 2.5rem; }
  /* phones: no drift on the gallery columns, so captions never get covered */
  .day .plx, .later .plx { transform: none !important; }
}

/* ------------------------------------------------------- later still ----- */
.later { background: var(--night); color: var(--bone); padding: clamp(5rem, 10vw, 8rem) 0 clamp(2rem, 5vw, 4rem);
  --ink: var(--bone); --ink-soft: #AEB6BD; --sc-ink: var(--bone); }
.later__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.later__item { margin: 0; }
.later__item--low { margin-top: clamp(4rem, 10vw, 9rem); }
.later__item img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.later__text { text-align: center; display: grid; gap: 1rem; justify-items: center; }
.later__text .display { color: var(--bone); }
.later__text .body { color: #C9D2D9; max-width: 26ch; text-align: center; }
@media (max-width: 760px) {
  .later__grid { grid-template-columns: 1fr 1fr; }
  .later__text { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1rem; }
  .later__item--low { margin-top: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .coast__img, .day__wideframe img, .plx { transform: none !important; }
}

/* ------------------------------------------------------- back to top ----- */
.totop {
  position: fixed; right: clamp(1rem, 2.4vw, 2rem); bottom: calc(clamp(1rem, 2.4vw, 2rem) + env(safe-area-inset-bottom));
  z-index: 59; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20, 26, 34, 0.62); color: #F4EFE7;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -8px rgba(10, 14, 20, 0.5);
  opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), background-color 160ms var(--ease);
}
.totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: rgba(20, 26, 34, 0.75); }
.totop:active { transform: scale(0.96); }
.totop:focus-visible { outline: 2px solid #9CC0D3; outline-offset: 3px; }
.totop svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.totop__track { fill: none; stroke: rgba(244, 239, 231, 0.22); stroke-width: 1.6; }
.totop__ring { fill: none; stroke: #F4EFE7; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.totop__arrow { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 24px 24px; }
@media (prefers-reduced-motion: reduce) { .totop { transition: opacity 120ms linear; transform: none; } }