/* ==========================================================================
   Solverv Arctic Resort & Casino — solarentreprenad.com
   Design system "Polar Day / Polar Night".
   Single stylesheet. Mobile-first. Breakpoints: 480 / 768 / 1024 / 1200 / 1440.

   Contents
   00. CSS ↔ JS state contract
   01. Design tokens
   02. Fonts
   03. Reset and base
   04. Layout: container, grid, sections, surfaces
   05. Typography
   06. Brand details: sun divider, sun glow, polar-night glow, grain, arch frame
   07. Buttons, chips, badges, cards
   08. Site header
   09. Nav sheet (bottom sheet)
   10. Site footer
   11. Home sections S1–S14
   12. Contact page and interest form
   13. Legal pages
   14. JS-created components: sentinels, reveal, lightbox, back-to-top
   15. Utilities
   16. Reduced motion
   ========================================================================== */


/* ==========================================================================
   00. CSS ↔ JS state contract
   JS sets exactly these names; CSS styles exactly these states.
   --------------------------------------------------------------------------
   Header after 80px ........ .site-header.is-scrolled
   Bottom sheet menu ........ .nav-sheet.is-open
   Burger ................... [aria-expanded] on .nav-toggle
   Scroll lock .............. html.is-scroll-locked
   Scroll-spy ............... .site-nav__link.is-active
   Sun dividers ............. --sun-pos custom property on .sun-divider
                              (unitless number 0–100 = percent along the arc;
                              JS sets 8 … 92 by divider index)
   Hero ..................... .hero__slide.is-active, [aria-current] on dots,
                              [aria-pressed] on the pause button
   Daylight widget .......... [data-state="midnight-sun" | "polar-night" | "day"] on .daylight
   Light Year tabs .......... [aria-selected] on [role="tab"], [hidden] on panels,
                              .light-year.is-<season>, season = polar-night |
                              spring | midnight-sun | autumn
                              (polar-night and autumn use the night surface)
   Room dialog .............. native <dialog class="room-dialog">, [open];
                              gallery images: [hidden] on all but the current one
   Strips / filmstrip ....... [disabled] on .strip__prev / .strip__next at the ends,
                              .strip.is-dragging
   Hero controls (JS-built) . .hero__controls > .hero__dot[aria-current], .hero__pause
   Gallery controls ......... .strip__prev / .strip__next may sit outside .strip;
                              they point at the track with aria-controls
   Filmstrip counter ........ [data-strip-current] inside .strip__counter
   FAQ and footer ........... [aria-expanded]
   Form errors (JS-built) ... [aria-invalid="true"] on the field,
                              .field__error after it, linked by aria-describedby
   Form status (JS-built) ... .interest-form__status[role="status"]
   Nav sheet drag ........... .nav-sheet.is-dragging, --sheet-drag on the panel
   Reveal ................... .reveal → .reveal.is-revealed
   Back to top (JS-built) ... .back-to-top.is-visible
   Lightbox (JS-built) ...... .lightbox with __figure, __img, __close, __prev,
                              __next, __counter; page siblings get [inert]
   Sentinels (JS-built) ..... .scroll-sentinel, height from --sentinel-h
   ========================================================================== */


/* ==========================================================================
   01. Design tokens
   ========================================================================== */
:root {
  /* --- Palette ---------------------------------------------------------- */
  --c-snow:       #F7F5F0;  /* main light background */
  --c-frost:      #E7EDF0;  /* alternating section background */
  --c-frost-2:    #D6DFE4;  /* cards and borders on light */
  --c-sun:        #E9A23B;  /* sun amber — decorative, NOT for text on light (1.99:1) */
  --c-sun-deep:   #8F5310;  /* text and link accent on light */
  --c-sun-light:  #F4C98A;  /* accent word over hero imagery only */
  --c-ember:      #D2643A;  /* sunset coral — sparingly: gradients, one detail per screen */
  --c-night:      #0F1422;  /* polar-night sections, main text on light */
  --c-night-2:    #19213A;  /* cards on dark */
  --c-night-dim:  rgba(15, 20, 34, .68);  /* secondary text on light */
  --c-aurora:     #86D6BE;  /* accent on dark: links, focus, markers */
  --c-aurora-dim: rgba(134, 214, 190, .18);
  --c-ice:        #E3EAF0;  /* main text on dark */
  --c-ice-dim:    rgba(227, 234, 240, .72);  /* secondary text on dark */
  --c-line:       rgba(15, 20, 34, .12);
  --c-line-dark:  rgba(227, 234, 240, .16);
  --c-field-line: #7A8591;  /* form field borders: 3.45 on snow, 3.18 on frost (≥ 3:1) */
  --c-error:      #A3321F;  /* form errors: 6.35 on snow, 5.86 on frost */

  /* Glow ingredients */
  --c-sun-glow:    rgba(233, 162, 59, .10);   /* ≤ .10 per brief */
  --c-aurora-glow: rgba(134, 214, 190, .08);  /* ≤ .08 per brief */
  --c-violet-glow: rgba(84, 78, 196, .10);    /* ≤ .10 per brief */

  /* --- Checked contrast (WCAG 2.x, text ≥ 4.5:1, focus ring ≥ 3:1) -------
     night    / snow     16.86   night    / frost    15.54   night / frost-2 13.59
     night-dim/ snow      6.14   night-dim/ frost     5.94   night-dim / frost-2 5.55
     sun-deep / snow      5.65   sun-deep / frost     5.21   sun-deep / frost-2 4.55
     snow     / night    16.86   (primary button)
     ice      / night    15.12   ice      / night-2  13.10
     ice-dim  / night     8.22   ice-dim  / night-2   7.43
     aurora   / night    10.82   aurora   / night-2   9.38
     sun      / night     8.48   sun      / night-2   7.35
     night    / sun       8.48   (primary button on dark)
     Focus rings sit 3px outside the element, so they are measured against
     the section background: sun-deep on light ≥ 5.21, aurora on dark ≥ 9.38.
     ---------------------------------------------------------------------- */

  /* --- Surface variables (Polar Day by default) ------------------------ */
  --bg:        var(--c-snow);
  --text:      var(--c-night);
  --text-dim:  var(--c-night-dim);
  --accent:    var(--c-sun-deep);
  --line:      var(--c-line);
  --glow:      rgba(233, 162, 59, .55);      /* card hover shadow */
  --card:      var(--c-frost);
  --card-line: var(--c-frost-2);
  --btn-bg:    var(--c-night);
  --btn-text:  var(--c-snow);
  --btn-dot:   var(--c-sun);
  --marker:    var(--c-sun);                 /* sun on dividers */
  --marker-glow: rgba(233, 162, 59, .45);

  /* --- Typography ------------------------------------------------------- */
  --ff-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ff-sans:  "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-h1:   clamp(2.8rem, 6.4vw, 5.6rem);
  --fs-h2:   clamp(2.1rem, 4.2vw, 3.6rem);
  --fs-h3:   clamp(1.35rem, 2.2vw, 1.85rem);
  --fs-num:  clamp(2.4rem, 4.8vw, 4rem);
  --fs-body: clamp(1rem, 1.05vw, 1.08rem);
  --fs-small: .875rem;
  --fs-eyebrow: .72rem;
  --fs-chip: .66rem;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1320px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 62ch;
  --section-space: clamp(4.5rem, 9vw, 9rem);
  --grid-gap: clamp(1.25rem, 2.4vw, 2rem);
  --header-h: 4.5rem;

  /* --- Shape and motion ------------------------------------------------- */
  --radius: 20px;
  --radius-btn: 12px;
  --radius-sheet: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 400ms;
  --dur-slow: 600ms;
}


/* ==========================================================================
   02. Fonts
   Self-hosted from /fonts (SIL OFL 1.1, see fonts/OFL.txt).
   Instrument Serif has no Cyrillic: Ukrainian text is set in Onest.
   ========================================================================== */

/* Instrument Serif 400 — latin */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif 400 — latin-ext */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif 400 italic — latin */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif 400 italic — latin-ext */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Onest variable 100–900 — cyrillic */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Onest variable 100–900 — latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Onest variable 100–900 — latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   03. Reset and base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body,
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

/* Sticky footer on short pages */
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--c-snow);
  color: var(--c-night);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.site-main {
  flex: 1 0 auto;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

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

[hidden] {
  display: none !important;
}


/* ==========================================================================
   04. Layout: container, grid, sections, surfaces
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Long-form text column */
.measure {
  max-width: var(--measure);
}

/* 12-column grid from 1024px; single column below */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid--3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Sections ------------------------------------------------------------
   Rhythm: light → frost → night. Each surface redefines the variables below,
   so any component inside picks up the right colours automatically.
   Glows and grain live on ::before / ::after (z-index 0), content on z-index 1.
   ------------------------------------------------------------------------ */
.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-space);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* Content above the glow layers. Dialogs are excluded: a modal <dialog> must
   stay position: fixed, otherwise opening it scrolls the page to the top. */
.section > :not(dialog),
.section--night > :not(dialog) {
  position: relative;
  z-index: 1;
}

/* Polar Day, alternating tone */
.section--frost {
  --bg:   var(--c-frost);
  --card: var(--c-snow);
}

/* Polar Night (also used by the footer, which is not a .section) */
.section--night {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
}

/* Night surface variables — shared with the dark seasons of the Light Year */
.section--night,
.light-year.is-polar-night,
.light-year.is-autumn {
  --bg:        var(--c-night);
  --text:      var(--c-ice);
  --text-dim:  var(--c-ice-dim);
  --accent:    var(--c-aurora);
  --line:      var(--c-line-dark);
  --glow:      rgba(134, 214, 190, .32);
  --card:      var(--c-night-2);
  --card-line: var(--c-line-dark);
  --btn-bg:    var(--c-sun);
  --btn-text:  var(--c-night);
  --btn-dot:   var(--c-night);
  --marker:    var(--c-aurora);
  --marker-glow: rgba(134, 214, 190, .5);
  color-scheme: dark;
}

.section--night ::selection {
  background: var(--c-aurora);
  color: var(--c-night);
}


/* ==========================================================================
   05. Typography
   ========================================================================== */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.05;
  color: inherit;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; }

/* One or two accent words in H1/H2 */
h1 em, h2 em, .h1 em, .h2 em {
  font-style: italic;
  color: var(--accent);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}

.text-dim {
  color: var(--text-dim);
}

.small {
  font-size: var(--fs-small);
  line-height: 1.55;
}

strong, b {
  font-weight: 500;
}

/* Stack helper: vertical rhythm for flowing content */
.flow > * + * {
  margin-top: var(--flow-space, 1.25rem);
}

/* --- Eyebrow --------------------------------------------------------------
   Onest 600, uppercase, preceded by a tiny logo: a half-sun on a horizon line.
   ------------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin-bottom: 1.25rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 12px;
  height: 8px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 100%, currentColor 0 3.5px, transparent 4px) center top / 8px 4px no-repeat;
}

/* --- Figures (project numbers, daylight hours) --------------------------- */
.figure-num {
  font-family: var(--ff-sans);
  font-size: var(--fs-num);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.figure-label {
  margin-top: .5rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

/* Ukrainian text: Onest only (Instrument Serif has no Cyrillic) */
:lang(uk) {
  font-family: var(--ff-sans);
}


/* ==========================================================================
   06. Brand details
   ========================================================================== */

/* --- 6.1 Sun-path divider -------------------------------------------------
   A horizon line with a flat arc above it; the sun (or an aurora dot on
   dark surfaces) sits on the arc at --sun-pos. JS sets --sun-pos once per
   divider (8 → 92), so scrolling down the sun travels from east to west.
   The dot follows the ellipse: y = h · (1 − √(1 − t²)), t = pos/50 − 1.
   Markup: <div class="sun-divider container" aria-hidden="true"></div>
   ------------------------------------------------------------------------ */
.sun-divider {
  --sun-pos: 50;
  --arc-h: 36px;
  --arc-top: 14px;
  position: relative;
  height: calc(var(--arc-top) + var(--arc-h));
  pointer-events: none;
}

/* Arc + horizon, drawn inside the container padding */
.sun-divider::before {
  content: "";
  position: absolute;
  top: var(--arc-top);
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.sun-divider::after {
  --t: calc(var(--sun-pos) / 50 - 1);
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--marker);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marker) 18%, transparent), 0 0 18px 4px var(--marker-glow);
  left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * var(--sun-pos) / 100);
  /* Fallback for browsers without sqrt(): near the top of the arc */
  top: calc(var(--arc-top) + var(--arc-h) * .15);
  top: calc(var(--arc-top) + var(--arc-h) * (1 - sqrt(1 - var(--t) * var(--t))));
  transform: translate(-50%, -50%);
}

/* On polar-night surfaces: a thin aurora point instead of the sun */
.section--night .sun-divider::after,
.sun-divider.section--night::after {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 12px 3px var(--marker-glow);
}

/* --- 6.2 Sun glow on light sections ---------------------------------------
   Low sun just beyond the edge of the screen. Corner alternates:
   default bottom-left, .section--glow-end top-right.
   ------------------------------------------------------------------------ */
.section:not(.section--night)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60vmax 45vmax at 0% 100%, var(--c-sun-glow), transparent 70%);
}

.section--glow-end:not(.section--night)::before {
  background: radial-gradient(60vmax 45vmax at 100% 0%, var(--c-sun-glow), transparent 70%);
}

/* --- 6.3 Polar-night glow + grain ---------------------------------------- */
.section--night::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70vmax 40vmax at 85% 0%, var(--c-aurora-glow), transparent 70%),
    radial-gradient(60vmax 45vmax at 5% 100%, var(--c-violet-glow), transparent 70%);
}

.section--night::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
}

/* --- 6.4 Media frames -----------------------------------------------------
   All images and cards: 20px radius. The arch frame (a rising sun) is for
   concept-aerial and build-solar-facade only — max one per screen.
   ------------------------------------------------------------------------ */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
}

.media > img,
.media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--1x1  { aspect-ratio: 1 / 1; }

.media--arch {
  border-radius: 999px 999px var(--radius) var(--radius);
}

/* Artist's impression note under images and sections */
.impression-note {
  margin-top: 1rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-dim);
}


/* ==========================================================================
   07. Buttons, chips, badges, cards
   ========================================================================== */

/* --- 7.1 Buttons ----------------------------------------------------------
   Radius 12px (not pills). Primary carries a small sun that "rises" 4px
   on hover. Colours come from the surface: night fill on light, sun fill
   on dark.
   ------------------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 48px;
  padding: .8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--ff-sans);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.button:hover {
  text-decoration: none;
}

.button--primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.button--primary:hover {
  color: var(--btn-text);
  box-shadow: 0 12px 28px -16px var(--glow);
}

/* Explicit dark-surface variant (e.g. inside the night-coloured nav sheet) */
.button--sun {
  background: var(--c-sun);
  color: var(--c-night);
  --btn-dot: var(--c-night);
}

.button--sun:hover {
  color: var(--c-night);
}

.button__sun {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--btn-dot);
  transition: transform var(--dur) var(--ease);
}

.button:hover .button__sun,
.button:focus-visible .button__sun {
  transform: translateY(-4px);
}

.button--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.button--secondary:hover {
  color: var(--text);
  border-color: var(--accent);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* --- 7.2 Chips ------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .75em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Season chip icons */
.chip__icon {
  flex: none;
  width: 10px;
  height: 10px;
}

.chip__icon--sun {
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
}

.chip__icon--star {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- 7.3 Badges ------------------------------------------------------------ */
.badge-18 {
  display: inline-grid;
  place-items: center;
  min-width: 2.2em;
  height: 2.2em;
  padding-inline: .35em;
  margin-right: .5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

/* --- 7.4 Cards ------------------------------------------------------------
   Lift 4px + glow shadow on hover-capable devices only. Images do not zoom.
   ------------------------------------------------------------------------ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-line);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card__media {
  border-radius: 0;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px var(--glow);
  }
}


/* ==========================================================================
   08. Site header
   Fixed. On the home page it starts transparent over the hero (snow text on
   a soft dark gradient); after 80px JS adds .is-scrolled. Inner pages ship
   with .is-scrolled in the markup.
   ========================================================================== */
.site-header {
  /* Transparent state: surface variables for text over imagery */
  --accent:   var(--c-sun);
  --line:     rgba(247, 245, 240, .35);
  --btn-bg:   var(--c-sun);
  --btn-text: var(--c-night);
  --btn-dot:  var(--c-night);
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  color: var(--c-snow);
  transition: color var(--dur) var(--ease);
}

/* Readability gradient over the hero */
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

/* Brief asks for .55; the top is .72 so the menu stays ≥ 4.5:1 over the
   brightest hero frame (midnight-sun sky), measured on the pixels */
.site-header::before {
  inset: 0 0 -3rem;
  background: linear-gradient(to bottom, rgba(15, 20, 34, .72) 0%, rgba(15, 20, 34, .5) 55%, rgba(15, 20, 34, 0) 100%);
}

.site-header:not(.is-scrolled) .site-nav__link,
.site-header:not(.is-scrolled) .brand__name {
  text-shadow: 0 1px 10px rgba(15, 20, 34, .55);
}

/* Solid frosted bar. Kept on a pseudo-element on purpose: backdrop-filter on
   the header itself would become the containing block for the fixed sheet. */
.site-header::after {
  inset: 0;
  background: rgba(247, 245, 240, .9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--c-line);
  opacity: 0;
}

.site-header.is-scrolled {
  --accent:   var(--c-sun-deep);
  --line:     var(--c-line);
  --btn-bg:   var(--c-night);
  --btn-text: var(--c-snow);
  --btn-dot:  var(--c-sun);
  color: var(--c-night);
}

.site-header.is-scrolled::before {
  opacity: 0;
}

/* Phones: no backdrop blur (scroll cost on low-end Android), a denser bar instead */
@media (max-width: 767px) {
  .site-header::after {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(247, 245, 240, .97);
  }
}

.site-header.is-scrolled::after {
  opacity: 1;
}

/* Without JavaScript nothing can add .is-scrolled, so use the solid state */
@media (scripting: none) {
  .site-header {
    --accent: var(--c-sun-deep);
    --btn-bg: var(--c-night);
    --btn-text: var(--c-snow);
    --btn-dot: var(--c-sun);
    color: var(--c-night);
  }

  .site-header::before {
    opacity: 0;
  }

  .site-header::after {
    opacity: 1;
  }
}

/* Inner pages: content starts below the fixed header */
.page-inner .site-main {
  padding-top: var(--header-h);
}

.site-header__inner {
  position: relative;
  z-index: 2;              /* above the sheet backdrop, so the burger stays usable */
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .75rem;
  height: 100%;
}

/* --- 8.1 Logo -------------------------------------------------------------
   Monogram: an S in a circle crossed by the horizon line, drawn in CSS.
   Wordmark hidden below 480px (the link keeps its aria-label).
   ------------------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}

.brand:hover {
  color: inherit;
}

.brand__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* The S */
.brand__mark::before {
  content: "S";
  font-family: var(--ff-serif);
  font-size: 21px;
  line-height: 1;
  transform: translateY(-2px);
}

/* The horizon, running through the lower part of the circle and past it */
.brand__mark::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: 64%;
  height: 1.5px;
  background: currentColor;
}

.brand__name {
  display: none;
  font-family: var(--ff-sans);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
}

@media (min-width: 480px) {
  .brand__name {
    display: inline;
  }
}

/* --- 8.2 Desktop navigation ---------------------------------------------- */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.site-nav__link {
  position: relative;
  display: block;
  padding: .55rem .7rem;
  color: inherit;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover {
  color: inherit;
}

/* Sun dot above the active / hovered item */
.site-nav__link::before {
  content: "";
  position: absolute;
  top: .05rem;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-sun);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.site-nav__link:hover::before,
.site-nav__link.is-active::before,
.site-nav__link[aria-current]::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Header CTA: compact below 1200px */
.site-header__cta {
  grid-column: 3;
  min-height: 40px;
  padding: .5rem .9rem;
  font-size: .85rem;
  gap: .55rem;
}

/* Only one CTA on screen: the sheet has its own */
.site-header:has(.nav-sheet.is-open) .site-header__cta {
  visibility: hidden;
}

@media (max-width: 359px) {
  .site-header__cta {
    padding-inline: .7rem;
    font-size: .8rem;
  }

  .site-header__cta .button__sun {
    display: none;
  }
}

/* --- 8.3 Burger → cross (driven by aria-expanded) ------------------------ */
.nav-toggle {
  grid-column: 4;
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: inherit;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(7px); width: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  width: 22px;
  transform: rotate(-45deg);
}

/* Burger sits on the dark backdrop while the sheet is open */
.site-header:has(.nav-sheet.is-open) {
  color: var(--c-snow);
}

.site-header:has(.nav-sheet.is-open)::before,
.site-header:has(.nav-sheet.is-open)::after {
  opacity: 0;
}

.site-header:has(.nav-sheet.is-open) .brand {
  visibility: hidden;
}

/* --- 8.4 Desktop layout ≥ 1200px ----------------------------------------- */
@media (min-width: 1200px) {
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
  }

  .brand {
    justify-self: start;
  }

  .site-nav {
    display: block;
    grid-column: 2;
  }

  .site-header__cta {
    grid-column: 3;
    justify-self: end;
    min-height: 44px;
    padding: .65rem 1.15rem;
    font-size: .9rem;
  }

  .nav-toggle {
    display: none;
  }
}

/* Scroll lock while the sheet or a modal is open */
html.is-scroll-locked {
  overflow: hidden;
}


/* ==========================================================================
   09. Nav sheet (bottom sheet) — below 1200px
   Slides up from the bottom to ~85% of the viewport. Closed: visibility
   hidden, so it is out of the tab order and the accessibility tree.
   Closes via the cross, Esc, backdrop click, or a swipe down on the handle
   (all wired in JS, Stage 6).
   ========================================================================== */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 1;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.nav-sheet:not(.is-open) {
  visibility: hidden;
  transition: visibility 0s linear var(--dur);
}

.nav-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 34, .6);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.nav-sheet.is-open .nav-sheet__backdrop {
  opacity: 1;
}

.nav-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: min(85vh, calc(100vh - var(--header-h)));
  height: min(85svh, calc(100svh - var(--header-h)));
  padding: 0 var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
  touch-action: pan-y;
}

.nav-sheet.is-open .nav-sheet__panel {
  transform: translateY(0);
}

/* Swipe handle: a large touch target around a small bar */
.nav-sheet__handle {
  display: grid;
  place-items: center;
  flex: none;
  height: 32px;
  margin-inline: auto;
  width: 96px;
  cursor: grab;
  touch-action: none;
}

.nav-sheet__handle::before {
  content: "";
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-line-dark);
}

.nav-sheet nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-sheet__list {
  padding-block: .5rem 1rem;
}

.nav-sheet__item + .nav-sheet__item {
  border-top: 1px solid var(--line);
}

.nav-sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 0;
  font-family: var(--ff-serif);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.1;
  color: var(--text);
  text-decoration: none;
}

.nav-sheet__link::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-aurora);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.nav-sheet__link:hover,
.nav-sheet__link.is-active {
  color: var(--text);
}

.nav-sheet__link:hover::after,
.nav-sheet__link.is-active::after {
  opacity: 1;
}

.nav-sheet__cta {
  flex: none;
  width: 100%;
  margin-top: 1rem;
}

@media (min-width: 1200px) {
  .nav-sheet {
    display: none;
  }
}


/* ==========================================================================
   10. Site footer
   Polar-night surface with glow. 4 columns ≥ 1024px, 2 columns ≥ 768px,
   accordion below 768px (brand column always open). Accordion height uses
   grid-template-rows 1fr ↔ 0fr, state from aria-expanded (JS, Stage 6).
   ========================================================================== */
.site-footer {
  flex: none;
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  font-size: .95rem;
  overflow: hidden;
}

.site-footer a {
  color: var(--text);
  text-decoration-color: var(--line);
}

.site-footer a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* --- 10.1 Brand column --------------------------------------------------- */
.footer-col--brand {
  display: grid;
  gap: .9rem;
  padding-bottom: 2rem;
  color: var(--text-dim);
}

.footer-col--brand p:first-of-type {
  color: var(--text);
  font-family: var(--ff-serif);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.25;
  max-width: 26ch;
}

.brand--footer {
  margin-bottom: .5rem;
  color: var(--text);
}

.brand--footer .brand__name {
  display: inline;
}

.footer-col--brand a[href^="mailto:"] {
  color: var(--accent);
}

/* --- 10.2 Link columns / accordion --------------------------------------- */
.footer-col:not(.footer-col--brand) {
  border-top: 1px solid var(--line);
}

.footer-col__title {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.4;
}

.footer-col__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
}

.footer-col__chevron {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.footer-col__toggle[aria-expanded="true"] .footer-col__chevron {
  transform: translateY(2px) rotate(-135deg);
}

.footer-col__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.footer-col__inner {
  min-height: 0;
  overflow: hidden;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.footer-col:has(.footer-col__toggle[aria-expanded="false"]) .footer-col__body {
  grid-template-rows: 0fr;
}

.footer-col:has(.footer-col__toggle[aria-expanded="false"]) .footer-col__inner {
  visibility: hidden;
  transition: visibility 0s linear var(--dur);
}

.footer-col__inner > * {
  margin-bottom: 1rem;
}

.footer-col__inner > p {
  color: var(--text-dim);
}

.footer-col__list {
  display: grid;
  gap: .55rem;
}

.footer-col__list a {
  text-decoration: none;
}

.footer-col__list a:hover,
.footer-col__list a[aria-current] {
  text-decoration: underline;
}

#footer-contact .footer-col__list li {
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* Tablet and up: no accordion, headings look like headings */
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2.5rem;
  }

  .footer-col--brand {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }

  .footer-col:not(.footer-col--brand) {
    border-top: 0;
  }

  .footer-col__toggle {
    min-height: 0;
    margin-bottom: 1.1rem;
    cursor: default;
  }

  .footer-col__chevron {
    display: none;
  }

  /* Columns are always open here, whatever the stored mobile state */
  .footer-col .footer-col__body {
    grid-template-rows: 1fr !important;
  }

  .footer-col .footer-col__inner {
    visibility: visible !important;
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  }

  .footer-col--brand {
    grid-column: auto;
    padding-right: 1rem;
  }
}

/* --- 10.3 Bottom row ------------------------------------------------------ */
.site-footer__bottom {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
}

.footer__play {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 72ch;
}

.footer__play .badge-18 {
  margin-right: 0;
  color: var(--c-sun);
}

.footer__play a {
  color: var(--accent);
}

.footer__owner {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--text);
}

@media (min-width: 1024px) {
  .site-footer__bottom {
    grid-template-columns: auto 1fr;
    column-gap: 3rem;
  }

  .footer__copy,
  .footer__energy {
    grid-column: 1;
  }

  .footer__play {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .footer__owner {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   11. Home sections
   ========================================================================== */

/* --- 11.0 Shared section parts ------------------------------------------- */

/* Sections that open with a sun-path divider start tighter */
.section--divided {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.section--divided > .sun-divider {
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}

.section-head {
  max-width: 62rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head > .lead {
  margin-top: 1.4rem;
}

.section-head .lead {
  max-width: var(--measure);
}

.callout {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--c-sun);
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  background: var(--card);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 62rem;
}

figcaption {
  margin-top: .75rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

/* Strip controls are useless without JavaScript */
@media (scripting: none) {
  .strip__controls {
    display: none !important;
  }
}


/* --- 11.1 S1 Hero ---------------------------------------------------------
   Full-screen crossfade of three frames. Content in the lower left third,
   Daylight widget lower right (under the buttons on phones).
   ------------------------------------------------------------------------ */
.hero {
  --accent:   var(--c-sun);
  --text:     var(--c-snow);
  --text-dim: rgba(247, 245, 240, .82);
  --line:     rgba(247, 245, 240, .45);
  --btn-bg:   var(--c-sun);
  --btn-text: var(--c-night);
  --btn-dot:  var(--c-night);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-night);
  color: var(--text);
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Darkening: night from the bottom (.7) to clear at 55% height, plus a
   scrim behind the text column so bright frames (the midnight sun) stay
   readable. Phones get a taller scrim because the text column is wider. */
.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 20, 34, .78) 0%, rgba(15, 20, 34, .55) 55%, rgba(15, 20, 34, .2) 85%, rgba(15, 20, 34, 0) 100%);
}

@media (min-width: 768px) {
  .hero__slides::after {
    background:
      linear-gradient(to top, rgba(15, 20, 34, .7) 0%, rgba(15, 20, 34, 0) 55%),
      linear-gradient(to right, rgba(15, 20, 34, .62) 0%, rgba(15, 20, 34, .38) 40%, rgba(15, 20, 34, 0) 68%);
  }
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide picture,
.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__slide img {
  object-fit: cover;
  transform: scale(1);
  transition: transform 8.4s linear;
}

.hero__slide.is-active img {
  transform: scale(1.04);
}

.hero__inner {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: clamp(4.25rem, 9vh, 6.5rem);
}

.hero__content {
  position: relative;
  max-width: 48rem;
}

/* Soft local scrim behind the text block (no stacking context on the
   parent, so z-index -1 places it just above the slides) */
.hero__content::before {
  content: "";
  position: absolute;
  inset: -40% -22% -14% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(15, 20, 34, .78), rgba(15, 20, 34, .7) 62%, rgba(15, 20, 34, 0));
}

/* Accent word on imagery: a lighter amber that holds contrast on the scrim */
.hero__title em {
  color: var(--c-sun-light);
}

.hero .eyebrow {
  margin-bottom: 1rem;
  color: var(--c-snow);
}

.hero__lead,
.hero__note,
.hero .eyebrow {
  text-shadow: 0 1px 12px rgba(15, 20, 34, .45);
}

.hero__title {
  font-size: var(--fs-h1);
  text-shadow: 0 1px 24px rgba(15, 20, 34, .25);
}

.hero__lead {
  max-width: 36rem;
  margin-top: 1.1rem;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--text-dim);
}

.hero__actions {
  margin-top: 1.5rem;
}

.hero .button--secondary {
  background: rgba(15, 20, 34, .18);
}

.hero__note {
  margin-top: 1rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-dim);
}

@media (max-width: 479px) {
  .hero__actions {
    gap: .5rem;
  }

  .hero__actions .button {
    min-height: 44px;
    padding: .65rem .85rem;
    font-size: .88rem;
    gap: .5rem;
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
  }
}

/* Daylight widget: glass card; compact row on phones */
.daylight {
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: 22rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(247, 245, 240, .18);
  border-radius: var(--radius);
  background: rgba(15, 20, 34, .38);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

@media (max-width: 767px) {
  .daylight {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(15, 20, 34, .55);
  }
}

@media (min-width: 1024px) {
  .daylight {
    padding: 1.1rem 1.25rem;
    margin-bottom: .5rem;
  }
}

/* Sun above (or below) the horizon line, set by data-state */
.daylight__sun {
  --sun-y: 7px;
  --sun-c: var(--c-sun);
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  overflow: hidden;
  border-bottom: 1.5px solid rgba(247, 245, 240, .7);
}

.daylight__sun::before {
  content: "";
  position: absolute;
  left: 9px;
  top: var(--sun-y);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sun-c);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--sun-c) 55%, transparent);
}

.daylight[data-state="midnight-sun"] .daylight__sun {
  --sun-y: 1px;
}

.daylight[data-state="polar-night"] .daylight__sun {
  --sun-y: 17px;
  --sun-c: var(--c-aurora);
}

.daylight__label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-sun);
}

.daylight__value {
  margin-top: .15rem;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.daylight__note {
  margin-top: .2rem;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--text-dim);
}

/* Slide dots + pause (created by HeroFade) */
.hero__controls {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 1.75rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .25rem;
  transform: translateX(-50%);
}

.hero__dot,
.hero__pause {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-snow);
}

.hero__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hero__dot[aria-current="true"]::before {
  background: var(--c-sun);
  border-color: var(--c-sun);
  box-shadow: 0 0 10px 2px rgba(233, 162, 59, .5);
}

.hero__pause {
  margin-left: .5rem;
  border: 1px solid rgba(247, 245, 240, .45);
}

/* Pause icon (two bars) / play icon (triangle) */
.hero__pause::before {
  content: "";
  width: 8px;
  height: 10px;
  border-left: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}

.hero__pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 5.5px 0 5.5px 9px;
  border-color: transparent transparent transparent currentColor;
}


/* --- 11.2 S2 Concept ------------------------------------------------------ */
.concept__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.concept__aerial {
  width: min(100%, 30rem);
  justify-self: center;
}

.concept__main {
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 1024px) {
  .concept__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .concept__text {
    grid-column: 1 / span 5;
  }

  .concept__aerial {
    grid-column: 7 / span 6;
    width: min(100%, 34rem);
    justify-self: end;
  }
}

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.figures__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

.figures__item .figure-label {
  margin-top: 0;
}

.figures .figure-num {
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  white-space: nowrap;
}

/* Narrow columns: "about" sits on its own line above the number */
@media (max-width: 1023px) {
  .figures .figure-num__pre {
    display: block;
    margin-bottom: .15em;
    font-size: .45em;
    vertical-align: baseline;
  }
}

.figure-num__pre {
  font-size: .4em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: .6em;
}


/* --- 11.3 S3 The Light Year -----------------------------------------------
   Day seasons (spring, midnight sun) use the light surface; polar night and
   autumn switch to the night surface (variables in block 04).
   ------------------------------------------------------------------------ */
.light-year {
  transition: background-color var(--dur-slow) ease, color var(--dur-slow) ease;
}

/* Sun glow (day) and aurora glow (night) cross-fade */
.section.light-year::before {
  opacity: 1;
  transition: opacity var(--dur-slow) ease;
}

.section.light-year::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(70vmax 40vmax at 85% 0%, var(--c-aurora-glow), transparent 70%),
    radial-gradient(60vmax 45vmax at 5% 100%, var(--c-violet-glow), transparent 70%);
  transition: opacity var(--dur-slow) ease;
}

.light-year.is-polar-night::before,
.light-year.is-autumn::before {
  opacity: 0;
}

.light-year.is-polar-night::after,
.light-year.is-autumn::after {
  opacity: 1;
}

.light-year__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 640px) {
  .light-year__tabs {
    display: flex;
    flex-wrap: wrap;
  }
}

.light-year__tab {
  min-height: 44px;
  padding: .6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.light-year__tab:hover {
  border-color: var(--accent);
}

.light-year__tab[aria-selected="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.light-year__panel:focus-visible {
  outline-offset: 6px;
  border-radius: var(--radius);
}

.light-year__info {
  display: grid;
  gap: 1rem 2.5rem;
  margin-top: 1.75rem;
}

@media (min-width: 1024px) {
  .light-year__info {
    grid-template-columns: 1fr 1.7fr 1fr;
    align-items: start;
  }
}

.light-year__months {
  margin-top: .4rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.light-year__daylight {
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.light-year__daylight strong {
  display: block;
  margin-top: .25rem;
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.light-year__disclaimer {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: var(--fs-small);
  color: var(--text-dim);
}


/* --- 11.4 S4 The Build ---------------------------------------------------- */

/* Stepper: vertical on phones, horizontal from 1024px */
.stepper {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.stepper__step {
  position: relative;
  padding-left: 2.5rem;
}

/* Connecting line */
.stepper__step::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.2rem;
  bottom: -1.75rem;
  width: 1px;
  background: var(--line);
}

.stepper__step:last-child::before {
  display: none;
}

.stepper__dot {
  position: absolute;
  left: 0;
  top: .25rem;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}

.stepper__step.is-done .stepper__dot {
  background: var(--accent);
}

.stepper__step.is-current .stepper__dot {
  border-color: var(--c-sun);
  background: var(--c-sun);
  box-shadow: 0 0 0 5px rgba(233, 162, 59, .2), 0 0 16px 4px rgba(233, 162, 59, .35);
}

.stepper__chip {
  margin-bottom: .6rem;
}

.stepper__title {
  font-size: 1.35rem;
  line-height: 1.15;
}

.stepper__step p {
  margin-top: .5rem;
  font-size: .94rem;
  color: var(--text-dim);
}

@media (min-width: 1024px) {
  .stepper {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .stepper__step {
    padding-left: 0;
    padding-top: 2.5rem;
  }

  .stepper__step::before {
    left: 1.25rem;
    right: -1.75rem;
    top: calc(.25rem + 7px);
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .stepper__dot {
    top: .25rem;
  }

  .stepper__chip {
    position: absolute;
    top: 0;
    left: 1.6rem;
  }
}

.build__photos {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .build__photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.energy {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 7vw, 6rem);
}

.energy__title {
  margin-bottom: 1.5rem;
}

.energy__facade {
  width: min(100%, 22rem);
}

.energy__cards {
  display: grid;
  gap: 1rem;
}

.energy-card__title {
  font-family: var(--ff-serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.15;
}

.energy-card p {
  font-size: .95rem;
  color: var(--text-dim);
}

.energy__materials .media {
  height: 100%;
}

@media (min-width: 640px) {
  .energy__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .energy {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .energy__aside {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .energy__cards {
    grid-column: 5 / span 8;
  }
}


/* --- 11.5 S5 Rooms ---------------------------------------------------------- */
.rooms__grid {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .rooms__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rooms__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.room-card .card__body {
  align-items: flex-start;
}

.room-card__open {
  margin-top: auto;
}

.room-card .card__meta {
  margin-bottom: .5rem;
}

/* Descriptions block (no-JS fallback and dialog source) */
.room-details {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.room-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.room-details__summary::-webkit-details-marker {
  display: none;
}

.room-details__summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
}

.room-details[open] > .room-details__summary::after {
  content: "–";
}

.room-details__list {
  display: grid;
  column-gap: 3rem;
}

@media (min-width: 1024px) {
  .room-details__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.room-info {
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.room-info__title {
  font-size: var(--fs-h3);
}

.room-info__facts {
  margin-top: .35rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.room-info__text {
  margin-top: .9rem;
}

.room-info__amenities {
  display: grid;
  gap: .35rem;
  margin-top: 1rem;
  font-size: .94rem;
}

.room-info__amenities li {
  position: relative;
  padding-left: 1.2rem;
}

.room-info__amenities li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-sun);
}

/* Room dialog */
.room-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1120px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-snow);
  color: var(--c-night);
  overflow: auto;
  overscroll-behavior: contain;
}

.room-dialog::backdrop {
  background: rgba(15, 20, 34, .72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

@media (max-width: 767px) {
  .room-dialog {
    width: 100vw;
    max-height: 100svh;
    height: 100svh;
    border-radius: 0;
  }
}

.room-dialog__inner {
  position: relative;
  display: grid;
}

@media (min-width: 900px) {
  .room-dialog__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

.room-dialog__gallery {
  position: relative;
  background: var(--c-night);
  touch-action: pan-y;
}

.room-dialog__track {
  aspect-ratio: 4 / 3;
}

.room-dialog__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .room-dialog__gallery {
    position: sticky;
    top: 0;
  }
}

.room-dialog__close,
.room-dialog__prev,
.room-dialog__next {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 245, 240, .92);
  color: var(--c-night);
}

.room-dialog__close {
  top: .75rem;
  right: .75rem;
  z-index: 3;
}

/* Cross */
.room-dialog__close span,
.room-dialog__close span::before {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}

.room-dialog__close span::before {
  content: "";
  transform: rotate(90deg);
}

.room-dialog__prev,
.room-dialog__next {
  top: 50%;
  transform: translateY(-50%);
}

.room-dialog__prev { left: .75rem; }
.room-dialog__next { right: .75rem; }

/* Chevrons */
.room-dialog__prev::before,
.room-dialog__next::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.room-dialog__prev::before { transform: translateX(2px) rotate(-135deg); }
.room-dialog__next::before { transform: translateX(-2px) rotate(45deg); }

.room-dialog__counter {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: rgba(15, 20, 34, .7);
  color: var(--c-snow);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.room-dialog__counter:empty {
  display: none;
}

.room-dialog__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.room-dialog__title {
  padding-right: 3rem;
  font-size: var(--fs-h2);
}

.room-dialog__content .room-info__title {
  display: none;
}

.room-dialog__cta {
  margin-top: 1.75rem;
}


/* --- 11.6 S6 Dining --------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.split__media--narrow {
  width: min(100%, 26rem);
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .split__media {
    grid-column: 1 / span 7;
  }

  .split__text {
    grid-column: 9 / span 4;
  }

  .split--reverse .split__media {
    grid-column: 8 / span 5;
    grid-row: 1;
    justify-self: end;
  }

  .split--reverse .split__text {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}

.split__text p {
  color: var(--text-dim);
}

.menu-light__title {
  margin-bottom: 1.5rem;
}

.menu-light__grid {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .menu-light__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dish-card .card__body {
  align-items: flex-start;
}

.dish-card h4 {
  font-family: var(--ff-serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.15;
}

.dish-card p {
  font-size: .95rem;
  color: var(--text-dim);
}

.counter-block {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--card);
}

.counter-block__media {
  width: min(100%, 24rem);
}

.counter-block__text p:not(.eyebrow) {
  color: var(--text-dim);
}

@media (min-width: 768px) {
  .counter-block {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}


/* --- 11.7 S7 Gaming lounge ------------------------------------------------ */
.lounge__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.chip--licence {
  padding: .45em 1em;
  background: var(--c-aurora-dim);
  font-size: .7rem;
}

.lounge__hero {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lounge__intro {
  max-width: var(--measure);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lounge__info {
  display: grid;
  gap: var(--grid-gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 768px) {
  .lounge__info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.info-block {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.info-block__title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.info-block__list {
  display: grid;
  gap: .75rem;
}

.info-block__list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.2rem;
}

/* Marker slot the same width as the 18+ badge, so all items align */
.info-block__list li:not(:first-child)::before {
  content: "";
  flex: none;
  width: 1.65rem;
  height: 6px;
  background: radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px);
}

.info-block__list .badge-18 {
  margin-right: 0;
  color: var(--c-sun);
}

.info-block p {
  color: var(--text-dim);
}

.lounge h4,
.spa-card__title {
  font-family: var(--ff-serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.15;
}

.lounge .card p,
.spa-card p {
  font-size: .95rem;
  color: var(--text-dim);
}

/* --- Strip (card carousel) — shared by the lounge and the spa on phones -- */
.strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.strip__title {
  font-size: 1.5rem;
}

.strip__controls {
  display: flex;
  gap: .5rem;
  margin-left: auto;
}

.strip__prev,
.strip__next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.strip__prev:hover:not(:disabled),
.strip__next:hover:not(:disabled) {
  border-color: var(--accent);
}

.strip__prev:disabled,
.strip__next:disabled {
  opacity: .35;
  cursor: default;
}

.strip__track {
  --strip-gap: var(--grid-gap);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80%, 20rem);
  gap: var(--strip-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-bottom: .75rem;
}

.strip__track:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius);
}

.strip__item {
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .strip__track {
    grid-auto-columns: calc((100% - 2 * var(--strip-gap)) / 2.4);
  }
}

@media (min-width: 1024px) {
  .strip__track {
    grid-auto-columns: calc((100% - 2 * var(--strip-gap)) / 3.3);
  }
}


/* --- 11.8 S8 Spa ---------------------------------------------------------- */

/* Phones: strip. From 768px: a 2×2 grid, cards side-by-side from 1024px */
@media (min-width: 768px) {
  .strip--spa .strip__head {
    display: none;
  }

  .strip__track.spa__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .spa-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .spa-card .card__body {
    justify-content: flex-end;
  }
}

.rhythm {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.rhythm__title {
  margin-bottom: 1.5rem;
}

.rhythm__steps {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .rhythm__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.rhythm__step {
  position: relative;
}

.rhythm__step h4 {
  margin-top: 1rem;
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.1;
}

.rhythm__step p {
  margin-top: .35rem;
  color: var(--text-dim);
}

/* Arrow between steps */
@media (min-width: 768px) {
  .rhythm__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    left: 76px;
    right: -1.25rem;
    height: 1px;
    background: linear-gradient(to right, var(--line), var(--c-sun));
  }
}

.rhythm__icon {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}

/* Sauna: warm full sun */
.rhythm__icon--sauna {
  background: radial-gradient(circle at 50% 40%, #F2BD6A, var(--c-sun) 55%, var(--c-ember));
  box-shadow: 0 0 20px 2px rgba(233, 162, 59, .35);
}

/* Sea: cold circle with waves in the lower half */
.rhythm__icon--sea {
  border: 1.5px solid var(--c-night);
  background:
    repeating-linear-gradient(to bottom, transparent 0 5px, var(--c-night) 5px 6.5px) bottom / 100% 50% no-repeat,
    var(--c-frost);
}

/* Rest: quiet outline with a horizon */
.rhythm__icon--rest {
  border: 1.5px solid var(--c-night);
  background: linear-gradient(var(--c-night), var(--c-night)) center 60% / 100% 1.5px no-repeat;
}

.spa__note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  color: var(--text-dim);
}

/* --- 11.9 S9 Gatherings ----------------------------------------------------- */
.events__hero {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.events__cards {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .events__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.event-card__title,
.exp-card__title {
  font-size: 1.5rem;
}

.event-card p,
.exp-card p {
  font-size: .95rem;
  color: var(--text-dim);
}

/* Capacity table: scrolls inside its own box on phones */
.capacity {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
}

.table-scroll:focus-visible {
  outline-offset: 3px;
}

.capacity__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.capacity__table caption {
  caption-side: top;
  padding: 1.1rem 1.5rem .6rem;
  font-family: var(--ff-serif);
  font-size: 1.45rem;
  text-align: left;
}

.capacity__table th,
.capacity__table td {
  padding: .9rem 1.5rem;
  border-top: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.capacity__table th:first-child {
  text-align: left;
}

.capacity__table thead th {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-dim);
}

.capacity__table tbody th {
  font-weight: 500;
}

.capacity__table td {
  font-size: 1.15rem;
  font-weight: 300;
}

.capacity__table caption .chip {
  margin-left: .6rem;
  vertical-align: .35em;
  font-family: var(--ff-sans);
}

.events__cta {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.events__cta .button {
  justify-self: start;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .events__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }

  .events__cta .flow {
    max-width: var(--measure);
  }
}


/* --- 11.10 S10 Experiences -------------------------------------------------- */
.exp__grid {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 640px) {
  .exp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .exp__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.exp-card .card__body {
  align-items: flex-start;
}

/* Long season labels wrap instead of overflowing the card */
.exp-card .chip {
  max-width: 100%;
  white-space: normal;
}


/* --- 11.11 S11 Gallery: full-bleed filmstrip -------------------------------
   One row of fixed height; frames keep their own ratio (4:5 / 3:2).
   The track bleeds to the window edges but starts in line with the container.
   ------------------------------------------------------------------------ */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.gallery__head .section-head {
  margin-bottom: 0;
}

.strip--film {
  --film-h: clamp(320px, 52vh, 560px);
  --film-inset: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}

@media (max-width: 767px) {
  .strip--film {
    --film-h: 65vw;
  }
}

/* .strip prefix: must beat the ul[class] padding reset */
.strip .film__track {
  display: flex;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding-inline: var(--film-inset);
  scroll-padding-inline: var(--film-inset);
  padding-bottom: .75rem;
}

.film__item {
  flex: none;
  height: var(--film-h);
}

.film__item--portrait  { aspect-ratio: 4 / 5; }
.film__item--landscape { aspect-ratio: 3 / 2; }

.film__link {
  display: block;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-frost);
  cursor: zoom-in;
}

.film__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.film__link:focus-visible {
  outline-offset: -4px;
}

/* Mouse drag in progress (Strip, Stage 6) */
.strip.is-dragging .strip__track {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.strip.is-dragging .film__link {
  cursor: grabbing;
}

.gallery__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
}

.strip__counter {
  font-size: var(--fs-small);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

@media (scripting: none) {
  .strip__counter {
    display: none;
  }
}


/* --- 11.12 S12 Region map ---------------------------------------------------
   Text labels over an image without text. Percentages match region-map.webp.
   ------------------------------------------------------------------------ */
.region__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .region__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .region-map {
    grid-column: 1 / span 8;
  }

  .region__text {
    grid-column: 9 / span 4;
  }
}

.region__text p {
  color: var(--text-dim);
}

.region-map__frame {
  --map-fs: clamp(.62rem, 1.35vw, .9rem);
  position: relative;
  aspect-ratio: 1024 / 765;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-frost);
  container-type: inline-size;
}

.region-map__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Label size follows the map width, not the window */
.region-map__frame > * {
  --map-fs: clamp(.6rem, 2.1cqi, .95rem);
}

.region-map__label {
  position: absolute;
  font-size: var(--map-fs);
  line-height: 1.2;
  color: var(--c-night);
  white-space: nowrap;
}

/* Town labels: dot + name */
.region-map__label--town {
  display: flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  transform: translate(-.35em, -50%);
}

.region-map__label--town::before {
  content: "";
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--c-night);
  box-shadow: 0 0 0 2px var(--c-snow);
}

.region-map__label--bodo {
  left: 86%;
  top: 8%;
}

.region-map__label--rana {
  left: 65.5%;
  top: 52%;
}

.region-map__label--coast {
  left: 12%;
  top: 56%;
  font-family: var(--ff-serif);
  font-size: calc(var(--map-fs) * 1.55);
  font-style: italic;
  letter-spacing: .02em;
  color: rgba(15, 20, 34, .78);
  transform: rotate(-32deg);
  transform-origin: left center;
}

/* Project area: soft sun halo on the coast */
.region-map__label--project {
  left: 70%;
  top: 29%;
  display: flex;
  align-items: center;
  gap: .5em;
  transform: translate(-.9em, -50%);
}

.region-map__pin {
  flex: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-sun) 0 28%, rgba(233, 162, 59, .35) 30% 60%, rgba(233, 162, 59, 0) 62%);
}

.region-map__project-text {
  padding: .3em .6em;
  border-radius: 6px;
  background: rgba(15, 20, 34, .86);
  color: var(--c-snow);
  font-weight: 500;
  white-space: normal;
  max-width: 13em;
}

/* Arctic Circle: dashed line across the map at ≈ 38.8% */
.region-map__circle {
  position: absolute;
  left: 0;
  right: 0;
  top: 38.8%;
  border-top: 1.5px dashed rgba(15, 20, 34, .55);
}

.region-map__circle-label {
  position: absolute;
  left: 3%;
  bottom: .3em;
  font-size: var(--map-fs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15, 20, 34, .8);
}

/* Small maps: shorter project note under the pin */
@media (max-width: 479px) {
  .region-map__project-text {
    max-width: 9.5em;
  }
}


/* --- 11.13 S13 FAQ ---------------------------------------------------------- */
.faq__layout {
  display: grid;
  gap: 1rem clamp(2rem, 5vw, 5rem);
}

@media (min-width: 1024px) {
  .faq__layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .faq__head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.faq__head > p:last-child {
  margin-top: 1.25rem;
}

.faq__item {
  border-top: 1px solid var(--line);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  font-family: var(--ff-sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 64px;
  padding: 1rem 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  font: inherit;
}

.faq__toggle:hover {
  color: var(--accent);
}

/* Plus that turns into a minus */
.faq__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__toggle[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.faq__a-inner {
  min-height: 0;
  overflow: hidden;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.faq__a-inner > :last-child {
  margin-bottom: 1.5rem;
}

.faq__a-inner p {
  max-width: var(--measure);
  color: var(--text-dim);
}

.faq__item:has(.faq__toggle[aria-expanded="false"]) .faq__a {
  grid-template-rows: 0fr;
}

.faq__item:has(.faq__toggle[aria-expanded="false"]) .faq__a-inner {
  visibility: hidden;
  transition: visibility 0s linear var(--dur);
}

/* Without JavaScript every answer stays open */
@media (scripting: none) {
  .faq__item .faq__a {
    grid-template-rows: 1fr !important;
  }

  .faq__item .faq__a-inner {
    visibility: visible !important;
  }

  .faq__icon {
    display: none;
  }
}

.faq__note {
  margin-top: .75rem;
  font-size: var(--fs-small);
  font-style: italic;
}


/* --- 11.14 S14 Interest list CTA band ------------------------------------
   Text on the left, over the dark side of the frame; the sun is on the right.
   ------------------------------------------------------------------------ */
.cta-band {
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 62vh, 40rem);
  overflow: hidden;
}

.cta-band > .cta-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}

.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 34, .62);
}

@media (min-width: 768px) {
  .cta-band__media::after {
    background:
      linear-gradient(to right, rgba(15, 20, 34, .82) 0%, rgba(15, 20, 34, .6) 38%, rgba(15, 20, 34, 0) 70%),
      linear-gradient(to top, rgba(15, 20, 34, .45), rgba(15, 20, 34, 0) 50%);
  }
}

.cta-band__inner {
  padding-block: clamp(4rem, 8vw, 6rem);
}

.cta-band__title {
  max-width: 14ch;
  font-size: var(--fs-h2);
  color: var(--c-snow);
}

.cta-band__text {
  max-width: 24rem;
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--c-ice);
}


/* ==========================================================================
   12. Contact page and interest form
   ========================================================================== */

/* Breadcrumbs (contact and legal pages) */
.breadcrumbs {
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.breadcrumbs__list li + li::before {
  content: "/";
  margin-right: .35rem;
  color: var(--line);
}

.breadcrumbs__list a {
  color: var(--text-dim);
}

.breadcrumbs__list a:hover {
  color: var(--accent);
}

.contact {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.contact__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }
}

.contact__title {
  font-size: var(--fs-h1);
}

.contact__intro .lead {
  max-width: var(--measure);
}

.contact__form-wrap {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--c-frost);
}

.contact__direct {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* --- Form fields --------------------------------------------------------- */
.interest-form {
  display: grid;
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: .4rem;
}

.field__label {
  font-size: .92rem;
  font-weight: 500;
}

.field__input {
  width: 100%;
  min-height: 50px;
  padding: .7rem .9rem;
  border: 1px solid var(--c-field-line);
  border-radius: var(--radius-btn);
  background: var(--c-snow);
  color: var(--c-night);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field__input:hover {
  border-color: var(--c-night);
}

.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--c-night);
}

.field__select {
  position: relative;
}

.field__select select {
  appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
}

.field__select::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--c-night);
  border-bottom: 1.5px solid var(--c-night);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  font-size: .92rem;
  line-height: 1.5;
}

.field__check {
  width: 22px;
  height: 22px;
  margin: .1rem 0 0;
  accent-color: var(--c-sun-deep);
  cursor: pointer;
}

/* Error state (text is created by FormValidate, Stage 6) */
.field__input[aria-invalid="true"],
.field__check[aria-invalid="true"] {
  border-color: var(--c-error);
  outline-color: var(--c-error);
}

.field__error {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--c-error);
}

.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--c-error);
  color: var(--c-snow);
  font-size: .7rem;
  font-weight: 700;
}

.interest-form__submit {
  justify-self: start;
  margin-top: .25rem;
}

.interest-form__note {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* --- Department emails ------------------------------------------------------ */
.contact-emails {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.emails {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .emails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .emails {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.emails__item {
  display: grid;
  gap: .35rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--card);
  overflow-wrap: anywhere;
}

.emails__label {
  font-size: var(--fs-small);
  color: var(--text-dim);
}


/* --- 404 ------------------------------------------------------------------ */
.not-found {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 10rem);
}

.not-found__inner {
  max-width: 52rem;
}

/* A sun sinking below the horizon */
.not-found__sun {
  display: block;
  width: 72px;
  height: 36px;
  margin-bottom: 2rem;
  border-bottom: 1.5px solid var(--c-night);
  overflow: hidden;
  position: relative;
}

.not-found__sun::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-sun);
  box-shadow: 0 0 24px 4px rgba(233, 162, 59, .45);
}

.not-found__title {
  font-size: var(--fs-h1);
}

.not-found .lead {
  max-width: var(--measure);
  margin-top: 1.25rem;
}

.not-found__actions {
  margin-top: 2rem;
}

.not-found__links {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.not-found__links-title {
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.not-found__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: .75rem;
  padding: 0;
  list-style: none;
}


/* ==========================================================================
   13. Legal pages — narrow 720px column, contents list, tables
   ========================================================================== */
.legal {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.legal__wrap {
  max-width: calc(720px + 2 * var(--gutter));
}

.legal__title {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
}

.legal__meta {
  margin-top: .9rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.legal__head .lead {
  margin-top: 1.25rem;
}

/* Contents */
.legal__toc {
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
}

.legal__toc-title {
  margin-bottom: .75rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.legal__toc ol {
  margin: 0;
  padding-left: 1.4rem;
  font-size: .95rem;
}

.legal__toc li {
  margin-bottom: .35rem;
  break-inside: avoid;
}

/* Two columns that read top to bottom */
@media (min-width: 640px) {
  .legal__toc ol {
    columns: 2;
    column-gap: 2.5rem;
  }
}

.legal__toc a {
  color: var(--text);
  text-decoration-color: var(--line);
}

.legal__toc a:hover {
  color: var(--accent);
}

/* Body text */
.legal__body {
  --flow-space: 1rem;
}

.legal__body > section {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.legal__body > section + section {
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.legal__body h2 {
  margin-bottom: .9rem;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
}

.legal__body h3 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-family: var(--ff-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.legal__body p + p,
.legal__body ul + p,
.legal__body p + ul,
.legal__body .table-scroll + p {
  margin-top: .9rem;
}

.legal__body ul {
  display: grid;
  gap: .45rem;
  margin: .75rem 0 0;
  padding-left: 1.25rem;
}

.legal__body li::marker {
  color: var(--c-sun-deep);
}

.legal__body code {
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--c-frost);
  font-size: .88em;
  overflow-wrap: anywhere;
}

/* Tables */
.legal__body .table-scroll {
  margin-top: 1rem;
}

.legal__table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: .92rem;
  line-height: 1.5;
}

.legal__table caption {
  padding: 1rem 1.25rem .5rem;
  font-weight: 600;
  text-align: left;
}

.legal__table th,
.legal__table td {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal__table thead th {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-dim);
}

/* Owner / publisher facts */
.legal__facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.legal__facts > div {
  display: grid;
  gap: .15rem 1.5rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .legal__facts > div {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

.legal__facts dt {
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.legal__facts dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   14. JS-created components: sentinels, reveal, lightbox, back-to-top,
       form status
   ========================================================================== */

/* Invisible markers for IntersectionObserver (header state, back-to-top) */
.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--sentinel-h, 80px);
  pointer-events: none;
}

/* Reveal: added only to blocks below the first screen, never with reduced motion */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Nav sheet follows the finger while its handle is dragged */
.nav-sheet.is-open .nav-sheet__panel {
  transform: translateY(var(--sheet-drag, 0px));
}

.nav-sheet.is-dragging .nav-sheet__panel {
  transition: none;
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: 4.5rem clamp(.5rem, 2vw, 1.5rem) 3.5rem;
  background: rgba(15, 20, 34, .95);
  color: var(--c-snow);
  animation: lightbox-in var(--dur) var(--ease);
  touch-action: pan-y;
}

@keyframes lightbox-in {
  from { opacity: 0; }
}

.lightbox__figure {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  margin: 0;
}

/* Contained, never stretched */
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(247, 245, 240, .35);
  border-radius: 50%;
  background: rgba(15, 20, 34, .6);
  color: var(--c-snow);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  border-color: var(--c-sun);
}

.lightbox :focus-visible {
  outline-color: var(--c-sun);
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.lightbox__close span,
.lightbox__close span::before {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}

.lightbox__close span::before {
  content: "";
  transform: rotate(90deg);
}

.lightbox__prev::before,
.lightbox__next::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.lightbox__prev::before { transform: translateX(2px) rotate(-135deg); }
.lightbox__next::before { transform: translateX(-2px) rotate(45deg); }

.lightbox__counter {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* Phones: arrows sit at the bottom, the image takes the full width */
@media (max-width: 767px) {
  .lightbox {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: .5rem;
    padding-bottom: 5rem;
  }

  .lightbox__prev,
  .lightbox__next {
    position: absolute;
    bottom: .75rem;
  }

  .lightbox__prev { left: 1rem; }
  .lightbox__next { right: 1rem; }
}

/* --- Back to top ---------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(247, 245, 240, .25);
  border-radius: 50%;
  background: var(--c-night);
  color: var(--c-snow);
  box-shadow: 0 10px 30px -12px rgba(15, 20, 34, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}

/* A small rising sun */
.back-to-top::before {
  content: "";
  width: 14px;
  height: 7px;
  border-radius: 14px 14px 0 0;
  background: var(--c-sun);
  box-shadow: 0 1.5px 0 var(--c-snow);
}

.back-to-top:focus-visible {
  outline-color: var(--c-sun);
}

/* Form status after the mail app opens */
.interest-form__status {
  padding: .75rem 1rem;
  border-left: 3px solid var(--c-sun);
  border-radius: 0 8px 8px 0;
  background: var(--c-snow);
  font-size: .9rem;
}

/* Footer column headings are disabled buttons on tablet and desktop */
.footer-col__toggle:disabled {
  opacity: 1;
}


/* ==========================================================================
   15. Utilities
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: off-screen until focused, always the first tab stop */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .7rem 1.1rem;
  border-radius: var(--radius-btn);
  background: var(--c-night);
  color: var(--c-snow);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: none;
  outline-color: var(--c-sun);
}


/* ==========================================================================
   16. Reduced motion
   Disables smooth scrolling, every transition and animation, the hero
   crossfade and zoom, card lift and the rising sun in buttons.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1 !important;
  }

  .card:hover,
  .button:hover .button__sun,
  .button:focus-visible .button__sun,
  .hero__slide,
  .hero__slide img {
    transform: none !important;
  }
}