/* ═══════════════════════════════════════════════════════════════
   Bronze Age — The Radio
   Marketing site styles v2
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Palette */
  --cream:       #f5efe5;
  --cream-muted: rgba(245, 239, 229, 0.82);
  --ink:         #1a150d;
  --ink-muted:   rgba(26, 21, 13, 0.62);
  --bg:          #110d07;
  --bronze:      #b08d57;

  /* Paper surface */
  --paper:       #f0e9db;
  --paper-ink:   #1a150d;

  /* Fonts */
  --display:    "Cormorant Garamond", "Times New Roman", Times, serif;
  --typewriter: "Special Elite", "Courier New", Courier, monospace;

  /* Selection */
  --selection-bg: #3d2e1e;
  --selection-fg: #f5efe5;

  /* Layout */
  --pad-x: clamp(1.5rem, 5vw, 4rem);
  --pad-y: clamp(2rem, 6vh, 4.5rem);

  /* Type scale — extreme contrast: enormous light headlines, quiet body */
  --type-title:    clamp(3rem, 10vw, 8rem);
  --type-headline: clamp(2.5rem, 5.8vw, 5rem);
  --type-sub:      clamp(1.0625rem, 1.65vw, 1.375rem);
  --type-body:     clamp(0.9375rem, 1.15vw, 1.0625rem);
  --type-list:     clamp(0.6875rem, 0.8vw, 0.75rem);
  --type-tag:      clamp(0.5625rem, 0.62vw, 0.625rem);
  --type-note:     clamp(0.9375rem, 1.15vw, 1.0625rem);
  --type-origin:   clamp(0.875rem, 2.15vw, 2.0625rem);
  --type-hero-hl:  clamp(2rem, 3.6vw, 3rem);
  --type-manifesto: clamp(1.75rem, 4vw, 3.25rem);
}

[hidden] { display: none !important; }

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  color: var(--cream);
  font-family: var(--display);
  font-size: var(--type-note);
  line-height: 1.55;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg) url("img/hero.webp") center 42% / cover no-repeat;
}

.hero__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 0% 100%,   rgba(10,7,5,.75)  0%, transparent 65%),
    radial-gradient(ellipse 90% 65% at 100% 100%,  rgba(10,7,5,.9)   0%, rgba(10,7,5,.48) 42%, transparent 70%),
    radial-gradient(ellipse 80% 45% at 50% 0%,     rgba(10,7,5,.52)  0%, transparent 55%),
    linear-gradient(180deg, rgba(10,7,5,.22) 0%, transparent 36%, transparent 60%, rgba(10,7,5,.18) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(var(--pad-y), env(safe-area-inset-top))
    max(var(--pad-x), env(safe-area-inset-right))
    max(var(--pad-y), env(safe-area-inset-bottom))
    max(var(--pad-x), env(safe-area-inset-left));
}

/* —— Centered brand lockup —— */

.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2.5vh, 1.75rem);
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.15rem, .5vh, .35rem);
}

.hero__title-word {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--type-title);
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--cream);
  font-feature-settings: "liga" 1, "kern" 1;
}

.hero__title-word--last {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
}

.hero__origin {
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(.875rem, 1.4vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  color: rgba(245, 239, 229, .78);
  text-shadow: 0 1px 8px rgba(10, 7, 5, .5);
}

/* —— Foot: anchored to the bottom —— */

.hero__foot {
  position: absolute;
  bottom: max(var(--pad-y), env(safe-area-inset-bottom));
  left: max(var(--pad-x), env(safe-area-inset-left));
  right: max(var(--pad-x), env(safe-area-inset-right));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.hero__headline {
  margin: 0;
  max-width: min(100%, 26rem);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: .005em;
  color: rgba(245, 239, 229, .7);
  text-wrap: balance;
}

/* Scroll indicator — bottom right */

.hero__scroll {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: rgba(245, 239, 229, .45);
  transition: color .3s ease;
}

.hero__scroll:hover {
  color: rgba(245, 239, 229, .8);
}

.hero__scroll-label {
  font-family: var(--typewriter);
  font-size: .5rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.hero__scroll-arrow {
  display: block;
  width: 12px;
  height: 20px;
  animation: scroll-bob 2.2s ease-in-out infinite;
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(4px); opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   MANIFESTO — the pause between hero and product
   ═══════════════════════════════════════════════════════════════ */

.manifesto {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 18vh, 12rem) var(--pad-x);
  background: var(--bg);
  text-align: center;
}

.manifesto__tag {
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  font-family: var(--typewriter);
  font-size: .5rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(245, 239, 229, .3);
}

.manifesto__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.75rem, 1.8vh, 1.25rem);
  max-width: 42rem;
}

.manifesto__line {
  font-family: var(--display);
  font-size: var(--type-manifesto);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.manifesto__line--muted {
  color: rgba(245, 239, 229, .32);
}

.manifesto__line--accent {
  color: var(--cream);
  font-style: italic;
  font-weight: 400;
  margin-top: clamp(1rem, 3vh, 2rem);
}

.manifesto__scroll {
  position: absolute;
  bottom: clamp(2.5rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: rgba(245, 239, 229, .4);
  transition: color .3s ease;
}

.manifesto__scroll:hover {
  color: rgba(245, 239, 229, .7);
}

.manifesto__scroll-tag {
  font-family: var(--typewriter);
  font-size: clamp(.5625rem, .7vw, .6875rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.manifesto__scroll-arrow {
  font-family: var(--display);
  font-size: 1rem;
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}


/* ═══════════════════════════════════════════════════════════════
   BOTTOM BAR — finish + reserve, appears after the hero
   ═══════════════════════════════════════════════════════════════ */

.bottombar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding:
    .85rem
    max(var(--pad-x), env(safe-area-inset-right))
    max(.85rem, env(safe-area-inset-bottom))
    max(var(--pad-x), env(safe-area-inset-left));
  opacity: 0;
  translate: 0 .6rem;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.4,0,.2,1), translate .45s cubic-bezier(.4,0,.2,1);
  background: var(--bg);
  border-top: 1px solid rgba(245, 239, 229, .08);
}

.bottombar.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.bottombar__finishes {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.bottombar__finish {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bottombar__swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 229, .18);
  transition: box-shadow .25s ease;
}

.bottombar__swatch--bronze {
  background: radial-gradient(circle at 32% 30%, #b08d57 0%, #8c6a3f 55%, #6d4f2c 100%);
}

.bottombar__swatch--aluminium {
  background: radial-gradient(circle at 32% 30%, #e3e4e2 0%, #c2c4c3 55%, #9fa2a1 100%);
}

.bottombar__swatch--dark {
  background: radial-gradient(circle at 32% 30%, #4a4038 0%, #2b241d 55%, #1a1510 100%);
}

.bottombar__finish.is-selected .bottombar__swatch {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(245, 239, 229, .55);
}

.bottombar__label {
  font-family: var(--typewriter);
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245, 239, 229, .35);
  white-space: nowrap;
  transition: color .2s ease;
}

.bottombar__finish.is-selected .bottombar__label {
  color: rgba(245, 239, 229, .85);
}

.bottombar__reserve {
  display: flex;
  align-items: baseline;
  gap: clamp(.75rem, 2vw, 1.5rem);
  flex-shrink: 0;
}

.bottombar__price {
  margin: 0;
  font-family: var(--display);
  font-size: .8125rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(245, 239, 229, .7);
  white-space: nowrap;
}

.bottombar__cta {
  font-family: var(--typewriter);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 239, 229, .55);
  transition: color .25s ease;
  white-space: nowrap;
}

.bottombar__cta:hover { color: var(--cream); }


/* ═══════════════════════════════════════════════════════════════
   RESERVATION CTA — shared pill button
   ═══════════════════════════════════════════════════════════════ */

.reservation__cta {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--typewriter);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 239, 229, .55);
  cursor: pointer;
  transition: color .25s ease;
}

.reservation__cta:hover {
  color: var(--cream);
}

.reservation__cta:active {
  opacity: .8;
}

.reservation__cta:focus-visible {
  outline: 1px solid rgba(245, 239, 229, .4);
  outline-offset: 4px;
}

.reservation__cta--outline {
  margin-top: .25rem;
  padding: .85rem 2.5rem;
  border: 1px solid rgba(245, 239, 229, .55);
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(.8125rem, 1vw, .875rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}

.reservation__cta--outline:hover {
  border-color: var(--cream);
  background: rgba(245, 239, 229, .08);
  color: #fff;
}

.panel--paper .reservation__cta--outline {
  border-color: rgba(26, 21, 13, .55);
  color: var(--paper-ink);
}

.panel--paper .reservation__cta--outline:hover {
  border-color: var(--paper-ink);
  background: rgba(26, 21, 13, .05);
  color: var(--paper-ink);
}


/* ═══════════════════════════════════════════════════════════════
   PANELS — section system
   ═══════════════════════════════════════════════════════════════ */

.panel {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 18vh, 12rem) var(--pad-x);
}

.panel__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
}

/* —— Split layout —— */

.panel--split { padding: 0; }

.panel__inner--split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  text-align: left;
}

.panel--split-flip .panel__inner--split > figure { order: 2; }

.panel__inner--split > figure {
  position: relative;
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
}

.panel--split .photo__img,
.panel--split .room-stage__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  scale: 1.06;
}

.panel--split .room-stage__img[hidden] { display: none; }

.panel--split .placeholder {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* —— Copy column —— */

.panel__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 36rem;
  padding: clamp(5rem, 14vh, 9rem) clamp(2.5rem, 7vw, 6rem);
}

.panel__copy .panel__headline,
.panel__copy .panel__sub,
.panel__copy .panel__body { text-align: left; text-wrap: pretty; }

.panel__copy .panel__tag { text-align: left; }

/* Split-column headlines: restrained — the column is narrow */
.panel__copy .panel__headline {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.015em;
}

/* Tighter grouping: tag sits close to headline, gap opens after */
.panel__copy .panel__tag {
  margin-bottom: -.5rem;
}

/* Supporting text: slightly smaller in split columns, still legible */
.panel__copy .panel__body {
  margin-top: .25rem;
}
.panel__copy .panel__list {
  font-size: clamp(.6875rem, .78vw, .75rem);
}
.panel__copy .panel__sub {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
}

/* Paper overrides for split copy */
.panel--paper .panel__copy .panel__list { color: rgba(26, 21, 13, .6); }
.panel--paper .panel__copy .panel__sub  { color: rgba(26, 21, 13, .65); }
.panel--paper .panel__copy .panel__body { color: rgba(26, 21, 13, .72); }


/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — panel content
   ═══════════════════════════════════════════════════════════════ */

.panel__tag {
  margin: 0;
  font-family: var(--typewriter);
  font-size: var(--type-tag);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(26, 21, 13, .38);
}

.panel__headline {
  margin: 0;
  font-family: var(--display);
  font-size: var(--type-headline);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: balance;
}

.panel__sub {
  margin: 0;
  font-family: var(--display);
  font-size: var(--type-sub);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .015em;
  color: rgba(245, 239, 229, .82);
  text-wrap: balance;
}

.panel__body {
  margin: 0;
  max-width: 30rem;
  font-family: var(--display);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .012em;
  color: rgba(245, 239, 229, .8);
  text-wrap: pretty;
}

.panel__body--muted {
  font-style: italic;
  font-weight: 300;
  color: rgba(245, 239, 229, .58);
}

.panel__list {
  margin: 0;
  font-family: var(--typewriter);
  font-size: var(--type-list);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .08em;
  color: rgba(245, 239, 229, .55);
}


/* ═══════════════════════════════════════════════════════════════
   PANEL VARIANTS
   ═══════════════════════════════════════════════════════════════ */

/* Paper — warm, textured */

.panel--paper {
  background: var(--paper) url("img/paper.webp") center / cover;
  color: var(--paper-ink);
}

.panel--paper .panel__headline { color: var(--paper-ink); }
.panel--paper .panel__sub   { color: rgba(26, 21, 13, .68); }
.panel--paper .panel__body  { color: rgba(26, 21, 13, .75); }
.panel--paper .panel__list  { color: rgba(26, 21, 13, .6); }
.panel--paper .panel__body--muted { color: rgba(26, 21, 13, .55); }
.panel--paper .panel__tag   { color: rgba(26, 21, 13, .5); }

/* Dark */

.panel--dark {
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(52,38,20,.3) 0%, transparent 70%),
    var(--bg);
}

/* Cocoa — the Radio reveal */

@property --story-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(52, 38, 20, 0.35);
}

@property --story-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #110d07;
}

.panel--cocoa {
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, var(--story-glow) 0%, transparent 70%),
    var(--story-bg);
  color: var(--cream);
  transition: --story-glow .9s ease, --story-bg .9s ease;
}

.panel--cocoa[data-finish="machine-age"] {
  --story-glow: rgba(62, 66, 74, .4);
  --story-bg: #0f1013;
}

.panel--cocoa[data-finish="dark-age"] {
  --story-glow: rgba(42, 34, 28, .5);
  --story-bg: #0a0705;
}

.panel--cocoa .panel__tag,
.panel--dark  .panel__tag,
.panel--bleed .panel__tag {
  color: rgba(245, 239, 229, .3);
}



/* ═══════════════════════════════════════════════════════════════
   STORY — scroll-linked product reveal
   ═══════════════════════════════════════════════════════════════ */

.panel--story {
  display: block;
  padding: 0;
  --story-zoom: .26;
}

/* Full-bleed blurred background image */
.story__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  clip-path: inset(0);
}

.story__bg-img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center 40%;
  filter: blur(40px) saturate(1.2) brightness(.45);
  scale: 1.15;
}

.story {
  position: relative;
  z-index: 1;
  height: 300svh;
}

.story__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
  padding: clamp(3rem, 8vh, 5rem) var(--pad-x);
  overflow: hidden;
  text-align: center;
}

.story__copies { display: grid; justify-items: center; }

.story__copy {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vh, 2rem);
  will-change: opacity;
}

.story__copy--phase {
  opacity: 0;
  pointer-events: none;
}

.story .finishes-group {
  opacity: 0;
  pointer-events: none;
}

.story__product {
  position: relative;
  width: min(100%, 52rem);
  margin: 0 auto;
  transform-origin: 48% 78%;
  will-change: scale;
}

.story__hotspots {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Finish filter */
.story__product .float__img { transition: filter .9s ease; }

.float[data-finish="machine-age"] .float__img {
  filter: saturate(.08) brightness(1.1) contrast(1.02);
}

.float[data-finish="dark-age"] .float__img {
  filter: saturate(.6) brightness(.62) contrast(1.1);
}

/* Keys line */

.story__keys {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-height: 2.6rem;
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  opacity: 0;
  transition: opacity .3s ease;
}

.story__keyline,
.story__hint {
  margin: 0;
  font-family: var(--typewriter);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.story__keyline {
  display: none;
  font-size: .6875rem;
  color: rgba(245, 239, 229, .8);
}

.story__hint {
  font-size: .5625rem;
  letter-spacing: .14em;
  color: rgba(245, 239, 229, .38);
}

/* Cue ring */

.story__hotspots.is-cued .hotspot:first-child::after {
  content: "";
  position: absolute;
  inset: -20%;
  translate: 0 18%;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 210, .75);
  animation: cue-ring 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes cue-ring {
  0%   { transform: scale(.7); opacity: 0; }
  18%  { opacity: .85; }
  100% { transform: scale(2.2); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   HOTSPOTS
   ═══════════════════════════════════════════════════════════════ */

.hotspot {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  width: 4.5%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,224,.35) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .2s ease;
}

.hotspot:hover::before,
.hotspot:focus-visible::before { opacity: 1; }

.hotspot.is-pressed::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(255,244,224,.65) 0%, transparent 70%);
}

.hotspot__label {
  position: absolute;
  top: 120%;
  left: 50%;
  translate: -50%;
  font-family: var(--typewriter);
  font-size: clamp(.5rem, .85vw, .7rem);
  letter-spacing: .08em;
  white-space: nowrap;
  color: rgba(255, 236, 210, .8);
  text-shadow: 0 1px 6px rgba(10,7,5,.65);
}

.hotspot:focus-visible {
  outline: 2px solid rgba(245, 239, 229, .5);
  outline-offset: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   FINISHES
   ═══════════════════════════════════════════════════════════════ */

.finishes-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.finishes {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 2.8vw, 2.25rem);
}

.finish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.finish__swatch {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(26, 21, 13, .2);
  transition: box-shadow .3s ease, transform .3s ease;
}

.finish__swatch--bronze {
  background: radial-gradient(circle at 32% 30%, #b08d57 0%, #8c6a3f 55%, #6d4f2c 100%);
}

.finish__swatch--aluminium {
  background: radial-gradient(circle at 32% 30%, #e3e4e2 0%, #c2c4c3 55%, #9fa2a1 100%);
}

.finish__swatch--dark {
  background: radial-gradient(circle at 32% 30%, #4a4038 0%, #2b241d 55%, #1a1510 100%);
}

.finish.is-selected .finish__swatch {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(245, 239, 229, .5);
}

.finish:hover .finish__swatch { transform: translateY(-2px); }

.finish__name {
  font-family: var(--typewriter);
  font-size: clamp(.5625rem, .72vw, .65rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245, 239, 229, .4);
  white-space: nowrap;
  transition: color .2s ease;
}

.finish.is-selected .finish__name { color: rgba(245, 239, 229, .9); }


/* ═══════════════════════════════════════════════════════════════
   FLOAT — product image
   ═══════════════════════════════════════════════════════════════ */

.float {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.float__img {
  display: block;
  width: min(100%, 52rem);
  height: auto;
}


/* ═══════════════════════════════════════════════════════════════
   PHOTOS — split-section images
   ═══════════════════════════════════════════════════════════════ */

.photo {
  position: relative;
  margin: 0;
  width: 100%;
}

.photo__img {
  display: block;
  width: 100%; height: auto;
  border-radius: 2px;
  box-shadow: 0 32px 80px -32px rgba(10,7,5,.5);
}

/* Soft dissolve edges */

.panel--split .photo--soft {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(90deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(90deg, #000 78%, transparent 100%);
  mask-composite: intersect;
}

.panel--split-flip .photo--soft {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(270deg, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(270deg, #000 78%, transparent 100%);
}

.panel--split .photo--soft.photo--soft-no-top {
  -webkit-mask-image:
    linear-gradient(180deg, #000 88%, transparent 100%),
    linear-gradient(90deg, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(180deg, #000 88%, transparent 100%),
    linear-gradient(90deg, #000 78%, transparent 100%);
}


/* ═══════════════════════════════════════════════════════════════
   ROOMS
   ═══════════════════════════════════════════════════════════════ */

.room-stage {
  margin: 0;
  width: 100%;
  transition: opacity .35s ease;
}

.panel--split .room-stage__img {
  transition: opacity .35s ease;
}

.room-copy { min-height: 5em; }

.rooms {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.2vw, 1.85rem);
  padding-top: clamp(.25rem, 1vh, .75rem);
}

.room {
  padding: 0 0 4px;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--typewriter);
  font-size: clamp(.5625rem, .78vw, .6875rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(26, 21, 13, .5);
  transition: color .25s ease, border-color .25s ease;
}

.room:hover { color: rgba(26, 21, 13, .75); }

.room.is-selected {
  color: rgba(26, 21, 13, .9);
  border-bottom-color: rgba(26, 21, 13, .6);
}


/* ═══════════════════════════════════════════════════════════════
   PLACEHOLDER
   ═══════════════════════════════════════════════════════════════ */

.placeholder {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c8c3ba;
  border-radius: 2px;
}

.placeholder__label {
  font-family: var(--typewriter);
  font-size: clamp(.625rem, .85vw, .75rem);
  line-height: 1.8;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(26, 21, 13, .4);
}


/* ═══════════════════════════════════════════════════════════════
   BLEED SECTIONS — image backgrounds (used by finale)
   ═══════════════════════════════════════════════════════════════ */

.panel__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 70% at 50% 55%, rgba(10,7,5,.65) 0%, rgba(10,7,5,.32) 55%, rgba(10,7,5,.12) 100%),
    linear-gradient(180deg, rgba(10,7,5,.32) 0%, transparent 30%, transparent 70%, rgba(10,7,5,.42) 100%);
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   FEATURES GRID — 6 cards, one section
   ═══════════════════════════════════════════════════════════════ */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bg);
}

.feature {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1 / 1;
  background: var(--bg) center / cover no-repeat;
  cursor: default;
}

/* Image zoom on hover */
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.feature:hover::before {
  transform: scale(1.04);
}

/* Scrim — gradient from bottom for text legibility */
.feature__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(10, 7, 5, .08) 0%,
      rgba(10, 7, 5, .15) 35%,
      rgba(10, 7, 5, .7)  70%,
      rgba(10, 7, 5, .88) 100%
    );
  transition: background .5s ease;
  pointer-events: none;
}

.feature:hover .feature__scrim {
  background:
    linear-gradient(
      180deg,
      rgba(10, 7, 5, .05) 0%,
      rgba(10, 7, 5, .1)  35%,
      rgba(10, 7, 5, .65) 70%,
      rgba(10, 7, 5, .85) 100%
    );
}

/* Text block */
.feature__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1.2vh, .75rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
}

.feature__tag {
  margin: 0;
  font-family: var(--typewriter);
  font-size: .5rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(245, 239, 229, .45);
}

.feature__headline {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
}

.feature__body {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(.8125rem, 1vw, .9375rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .01em;
  color: rgba(245, 239, 229, .72);
  max-width: 24rem;
}

.feature__aside {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(.8125rem, .95vw, .875rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(245, 239, 229, .52);
}


@media (max-width: 767px) {
  .features {
    grid-template-columns: 1fr;
  }

  .feature__headline {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  .feature__body {
    font-size: clamp(.75rem, 3vw, .8125rem);
  }

  .feature__text {
    padding: clamp(1rem, 4vw, 1.5rem);
  }
}


/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */

.panel__inner--faq {
  max-width: 38rem;
  width: 100%;
}

.faq {
  width: 100%;
  text-align: left;
  border-top: 1px solid rgba(245, 239, 229, .1);
}

.faq__item {
  border-bottom: 1px solid rgba(245, 239, 229, .1);
}

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.2rem, 2.5vh, 1.75rem) 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--cream);
  transition: color .2s ease;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--typewriter);
  font-size: .8em;
  color: rgba(245, 239, 229, .3);
  transition: color .2s ease, transform .3s ease;
}

.faq__item[open] .faq__q::after {
  content: "–";
  transform: none;
}

.faq__q:hover { color: #fff; }
.faq__q:hover::after { color: var(--cream); }

.faq__a {
  padding: 0 3rem clamp(1.2rem, 2.2vh, 1.65rem) 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.6;
  color: rgba(245, 239, 229, .65);
  text-wrap: pretty;
}


/* Closing statement — party image */
.panel--closing {
  background: var(--bg) url("img/party.webp") center top / cover no-repeat;
}

.panel--closing .panel__overlay {
  background:
    radial-gradient(ellipse 55% 60% at 50% 55%, rgba(10,7,5,.78) 0%, rgba(10,7,5,.45) 58%, rgba(10,7,5,.12) 100%),
    linear-gradient(180deg, rgba(10,7,5,.35) 0%, transparent 28%, transparent 72%, rgba(10,7,5,.45) 100%);
}

/* Long-sentence headlines: elegant italic, slightly smaller */
.panel__headline--statement {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  max-width: 42rem;
}

/* ═══════════════════════════════════════════════════════════════
   FINALE — finish picker + reserve, blurred bg
   ═══════════════════════════════════════════════════════════════ */

.panel--finale {
  background: var(--bg);
  overflow: hidden;
  padding: clamp(6rem, 14vh, 10rem) var(--pad-x);
}

.finale__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.finale__bg-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: blur(50px) saturate(1.1) brightness(.35);
  scale: 1.2;
}

.panel__inner--finale {
  max-width: 52rem;
  gap: clamp(2.5rem, 6vh, 4rem);
}

.panel__headline--finale {
  max-width: 38rem;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.12;
}

.finale__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(.75rem, 1.5vh, 1.25rem);
}

.finale__product {
  margin: 0;
  width: min(100%, 44rem);
}

.finale__product .float__img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .9s ease;
}

.finale__product[data-finish="machine-age"] .float__img {
  filter: saturate(.08) brightness(1.1) contrast(1.02);
}

.finale__product[data-finish="dark-age"] .float__img {
  filter: saturate(.6) brightness(.62) contrast(1.1);
}

.finale__finish {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2.5vh, 1.75rem);
}

.finale__commerce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin-top: clamp(.5rem, 2vh, 1.5rem);
}

.reservation__price {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(245, 239, 229, .78);
}

.reservation__cta--primary {
  padding: .85rem 2.5rem;
  border: 1px solid rgba(245, 239, 229, .6);
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(.8125rem, 1vw, .875rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}

.reservation__cta--primary:hover {
  border-color: var(--cream);
  background: rgba(245, 239, 229, .08);
  color: #fff;
}

.finale__note {
  margin: 0;
  font-family: var(--typewriter);
  font-size: .625rem;
  letter-spacing: .1em;
  line-height: 1.9;
  color: rgba(245, 239, 229, .5);
  text-wrap: balance;
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.footer {
  position: relative;
  background: var(--bg);
  color: var(--cream);
  border-top: 1px solid rgba(245, 239, 229, .06);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: clamp(5rem, 12vh, 8rem) var(--pad-x) max(clamp(3.5rem, 8vh, 5rem), env(safe-area-inset-bottom));
}

.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer__brand {
  display: block;
  text-decoration: none;
  transition: opacity .25s ease;
}

.footer__brand:hover { opacity: .7; }

.footer__kite {
  display: block;
  width: 2rem; height: 2rem;
  opacity: .85;
}

.footer__origin {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: .03em;
  color: rgba(245, 239, 229, .6);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem clamp(2rem, 3.5vw, 3rem);
  margin-top: .5rem;
}

.footer__nav a {
  font-family: var(--typewriter);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 239, 229, .4);
  transition: color .25s ease;
}

.footer__nav a:hover { color: var(--cream); }

.footer__legal {
  margin: 1.5rem 0 0;
  font-family: var(--typewriter);
  font-size: .5rem;
  letter-spacing: .1em;
  color: rgba(245, 239, 229, .22);
}


/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(1.8rem);
  transition:
    opacity 1.1s cubic-bezier(.16, 1, .3, 1),
    transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.reveal:nth-child(2) { transition-delay: .12s; }
.reveal:nth-child(3) { transition-delay: .22s; }
.reveal:nth-child(4) { transition-delay: .32s; }
.reveal:nth-child(5) { transition-delay: .42s; }
.reveal:nth-child(6) { transition-delay: .5s; }

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


/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  :root {
    --pad-x: 1.35rem;
    --pad-y: 1.5rem;
    --type-title:    clamp(2.25rem, 12vw, 3.25rem);
    --type-headline: clamp(2rem, 9vw, 2.75rem);
    --type-hero-hl:  clamp(1.65rem, 6.8vw, 2rem);
    --type-manifesto: clamp(1.4rem, 6vw, 2rem);
    --type-body:     clamp(.875rem, 3.5vw, .9375rem);
    --type-sub:      clamp(.9375rem, 3.8vw, 1.0625rem);
    --type-list:     clamp(.6875rem, 2.8vw, .75rem);
    --type-tag:      .5rem;
    --type-note:     clamp(.9375rem, 3.9vw, 1.03125rem);
    --type-origin:   clamp(.875rem, 3.4vw, 1.0625rem);
  }

  .hero { height: 100dvh; }

  .hero__media {
    background: var(--bg) url("img/party.webp") center center / cover no-repeat;
  }

  .hero__video { display: none; }

  .hero__overlay {
    background:
      linear-gradient(102deg,
        rgba(10,7,5,.9)  0%,
        rgba(10,7,5,.65) 36%,
        rgba(10,7,5,.2)  60%,
        transparent       78%
      ),
      linear-gradient(180deg,
        rgba(10,7,5,.6) 0%,
        rgba(10,7,5,.2)  22%,
        transparent       44%,
        rgba(10,7,5,.75) 100%
      );
  }

  .hero__title-word { line-height: .9; }

  .hero__origin { font-size: clamp(.75rem, 3.2vw, .9375rem); }

  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .hero__headline { font-size: clamp(1.1rem, 4.5vw, 1.35rem); }

  /* Manifesto */
  .manifesto { min-height: 85svh; }
  .manifesto__line { font-size: clamp(1.25rem, 5.5vw, 1.75rem); }

  /* Panels */
  .panel { min-height: 100dvh; }
  .panel__inner { gap: 1.25rem; }

  .panel__inner--split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .panel__inner--split > figure { min-height: 50svh; }

  .panel--split .panel__copy {
    padding: 3rem var(--pad-x) 4rem;
  }

  .panel__inner--split > .panel__copy:first-child {
    padding-top: 5.5rem;
  }

  .panel--split-flip .panel__inner--split > figure { order: 0; }

  .panel__body br,
  .panel__sub br,
  .story__copy .panel__headline br { display: none; }

  /* Story */
  .panel--story { --story-zoom: .8; }

  .story__stage {
    gap: clamp(1.25rem, 3vh, 2rem);
    padding-top: 4.5rem;
  }

  .float { gap: 2.25rem; }
  .hotspot__label { display: none; }
  .story__keyline { display: block; }
  .story__hint    { display: none; }

  /* AI */
  .panel--chatting { align-items: flex-end; }

  .panel--chatting .panel__inner {
    align-items: flex-start;
    text-align: left;
    padding-bottom: 1rem;
  }

  .panel--chatting .panel__headline,
  .panel--chatting .panel__body { text-align: left; }

  .panel--chatting .panel__overlay {
    background: linear-gradient(180deg, rgba(10,7,5,.12) 0%, rgba(10,7,5,.3) 38%, rgba(10,7,5,.88) 100%);
  }

  .bottombar {
    flex-wrap: wrap;
    row-gap: .55rem;
  }

  .bottombar__label { display: none; }

  .bottombar__reserve {
    margin-left: auto;
  }

  .bottombar__price { font-size: .75rem; }
}

/* Short screens */

@media (max-width: 767px) and (max-height: 740px) {
  :root {
    --type-title:   clamp(2rem, 9.5vw, 2.5rem);
    --type-headline: 2rem;
    --type-hero-hl:  1.5rem;
    --type-manifesto: 1.35rem;
    --type-body:     .875rem;
    --type-sub:      .9375rem;
    --type-list:     .6875rem;
    --type-note:     .9375rem;
    --type-origin:   clamp(.75rem, 2.6vw, .9375rem);
    --pad-y: 1rem;
  }

  .hero__lead { gap: .4rem; }
  .hero__headline { margin-bottom: clamp(.85rem, 1.8vh, 1.15rem); }
  .hero__inner { gap: .75rem; }
  .hero__foot  { gap: 1rem; }
}

/* Tall desktop */

@media (min-width: 768px) and (min-height: 700px) {
  :root {
    --type-title: clamp(4rem, 13vw, 10rem);
  }
}

/* Very short screens */

@media (max-height: 640px) {
  :root {
    --type-title:    clamp(2.25rem, 8vw, 3.25rem);
    --type-headline: 2rem;
    --type-hero-hl:  1.5rem;
    --type-manifesto: 1.35rem;
    --type-body:     .875rem;
    --type-sub:      .9375rem;
    --type-list:     .6875rem;
    --type-note:     .9375rem;
    --type-origin:   clamp(.75rem, 2.6vw, .9375rem);
  }

  .hero__lead { gap: .35rem; }
  .hero__headline { margin-bottom: .75rem; }
  .hero__inner { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__video { display: none; }

  .reservation__cta { transition: none; }
  .reservation__cta:active { opacity: 1; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hotspot::before { transition: none; }

  .story__hotspots.is-cued .hotspot:first-child::after {
    animation: none;
    transform: scale(1.4);
    opacity: .65;
  }

  .story { height: auto; }
  .story__keys { opacity: 1; }
  .story__stage { position: static; }

  .story__copies {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vh, 3rem);
  }

  .story__copy--phase { opacity: 1; }

  .story .finishes-group {
    opacity: 1;
    pointer-events: auto;
  }

  .story__hotspots {
    opacity: 1;
    pointer-events: auto;
  }

  .hero__scroll-line { animation: none; opacity: .5; }
  .manifesto__scroll-arrow { animation: none; }
}