/* =============================================================================
   fm-constellare - "Amberlinden" (likeness rebuild, original code)
   Ivory hospitality ground, floating white nav pill, full-bleed photo hero with a
   width-fitted serif brand word, translucent white cards, bronze accents, a deep
   bronze footer band carrying a second fitted wordmark.
   Fonts: EB Garamond (display + headings) / Alegreya Sans (body).
   ============================================================================= */

/* ---------------------------------------------------------------- fonts ---- */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreyasans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreyasans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreyasans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/* --------------------------------------------------------------- tokens ---- */
:root {
  /* palette: our own hexes, reference hue family, deepened for AA */
  --paper: #f4efe3;         /* Vellum ivory page ground */
  --paper-tint: #efe8d9;    /* Vellum deep, band tint */
  --white: #ffffff;
  --veil: rgba(255, 255, 255, 0.5);   /* translucent card fill */
  --veil-soft: rgba(255, 255, 255, 0.34);
  --accent: #8a6836;        /* Antique Bronze, display only (>=24px) */
  --accent-deep: #7a5a2c;   /* Deep Bronze, all small text + fills */
  --accent-soft: #6e6650;   /* unlit scrub word, 4.98:1 on paper */
  --accent-wash: rgba(122, 90, 44, 0.1);
  --ink: #565040;           /* Olive Slate body */
  --ink-strong: #271007;    /* Espresso, card body */
  --chalk: #f9f7f4;         /* text over photography */
  --dark: #241608;          /* scrim base */
  --footer-bg: #7a5a2c;
  --footer-muted: #e8e0cf;
  --hairline: rgba(122, 90, 44, 0.16);
  --hairline-soft: rgba(122, 90, 44, 0.09);

  /* radii */
  --r-pill: 100px;
  --r-chip: 14px;
  --r-card: 18px;
  --r-tile: 16px;
  --r-lg: 24px;
  --r-panel: 32px;
  --r-note: 37px;

  /* type */
  --ff-display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --ff-body: "Alegreya Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: 75px;
  --fs-h2: 56px;
  --fs-h2-lg: 60px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-scrub: 32px;
  --fs-body: 19.5px;
  --fs-small: 17px;
  --fs-label: 15px;
  --fs-btn: 16px;

  /* motion */
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* fitted display words (JS refines; these fallbacks paint with no script) */
  --display-fs: 23.3vw;
  --wordmark-fs: 15.2vw;
}

/* ---------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ff-display); font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 4px; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 90;
  background: var(--white); color: var(--accent-deep);
  padding: 10px 18px; border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 700;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: 12px; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ containers --- */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 25px; }
.wrap-1350 { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 45px; }
.wrap-1300 { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 70px; }
.wrap-1230 { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 105px; }
.wrap-1150 { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 145px; }
.wrap-hero { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }

section { position: relative; }
.band { padding: 100px 0; }
.band-faq { padding: 72px 0 76px; }
.band-locale { padding: 64px 0; }
.band-story { padding: 80px 0; }
.band-journal { padding: 120px 0; }

/* ------------------------------------------------------------- headings ---- */
.h2 {
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--accent); text-align: center;
}
.h2-left { text-align: left; }
.h2-lg { font-size: var(--fs-h2-lg); line-height: 0.95; }
.lead {
  margin: 24px auto 0; max-width: 600px;
  font-size: var(--fs-body); line-height: 1.6; color: var(--ink); text-align: center;
}
.lead-narrow { max-width: 530px; }
.lead-tight { max-width: 400px; }
.kicker {
  font-size: var(--fs-small); font-weight: 500; color: var(--accent-deep);
}

/* --------------------------------------------------------------- header ---- */
.topbar {
  position: fixed; top: 10px; left: 20px; right: 20px; z-index: 40;
  display: flex; justify-content: center; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.pill-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 1320px; max-width: 100%;
  height: 60px; padding: 8px 8px 8px 16px;
  background: var(--paper); border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: width var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.topbar.is-collapsed .pill-bar { width: 823px; background: var(--white); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand svg { width: 24px; height: 24px; flex-shrink: 0; }
.brand span {
  font-family: var(--ff-body); font-size: 21px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--accent-deep); white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 16px; }
.nav a:not(.pill) {
  display: block; padding: 4px 14px; border-radius: 10px;
  font-size: var(--fs-small); font-weight: 700; color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:not(.pill):hover { background: var(--accent-wash); color: var(--accent-deep); }
.nav a[aria-current="page"]:not(.pill) { color: var(--accent-deep); }
.burger { display: none; }
.mobile-bar, .mobile-menu { display: none; }

/* pill buttons (disc + sliding label) */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  height: 44px; padding: 4px 20px 4px 4px;
  background: var(--accent-deep); border-radius: 50px;
  color: var(--chalk); white-space: nowrap;
  transition: background-color var(--t-base) var(--ease);
}
.pill .disc {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0;
  background: var(--chalk); border-radius: 50%; color: var(--accent-deep);
  transition: transform var(--t-base) var(--ease);
}
.pill .disc svg { width: 16px; height: 16px; }
.pill .swap { display: grid; flex: 0 0 auto; height: 17px; overflow: hidden; }
.pill .swap i {
  display: block; font-style: normal; font-size: var(--fs-btn); font-weight: 700;
  line-height: 17px; letter-spacing: 0.01em;
  transition: transform var(--t-base) var(--ease);
}
.pill:hover { background: var(--accent); }
.pill:hover .swap i { transform: translateY(-17px); }
.pill:hover .disc { transform: translateX(3px); }
.pill-inverse { background: var(--paper); color: var(--accent-deep); }
.pill-inverse .disc { background: var(--accent-deep); color: var(--chalk); }
.pill-inverse:hover { background: var(--white); }
.pill-wide { height: 50px; padding: 12px 28px; justify-content: center; width: 100%; }
.pill-wide .swap { height: 20px; }
.pill-wide .swap i { line-height: 20px; font-size: 17px; }

/* ----------------------------------------------------------- hero (home) --- */
.hero { min-height: 100vh; overflow: hidden; display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(36, 22, 8, 0.70) 0%, rgba(36, 22, 8, 0.50) 24%, rgba(36, 22, 8, 0.14) 52%, rgba(36, 22, 8, 0.10) 100%),
    linear-gradient(to left, rgba(36, 22, 8, 0.34) 0%, rgba(36, 22, 8, 0.05) 46%, transparent 70%),
    linear-gradient(to right, rgba(36, 22, 8, 0.32) 0%, rgba(36, 22, 8, 0.08) 32%, transparent 56%),
    rgba(36, 22, 8, 0.13);
}
.hero-inner { position: relative; width: 100%; padding-bottom: 24px; }
.hero-stack { display: flex; flex-direction: column; align-items: flex-end; }
.hero-lead {
  margin-top: 25px; width: 450px; max-width: 100%;
  font-size: var(--fs-body); line-height: 1.6; color: var(--chalk); text-align: right;
}
.display {
  display: block; width: 100%; margin-top: 33px;
  font-family: var(--ff-display); font-weight: 400;
  font-size: var(--display-fs); line-height: 0.7; letter-spacing: -0.015em;
  color: var(--paper); white-space: nowrap;
}

/* rating chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 20px 5px 4px; border-radius: var(--r-chip);
  background: rgba(244, 239, 227, 0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.chip-faces { display: flex; }
.chip-faces .face { margin-right: -7px; }
.chip-faces .face:last-child { margin-right: 0; }
.face {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 10px; background: var(--accent-deep); color: var(--chalk);
  font-family: var(--ff-display); font-size: 20px; font-weight: 600; line-height: 1;
  box-shadow: 0 0 0 2px rgba(244, 239, 227, 0.85);
}
.chip-score {
  font-family: var(--ff-display); font-size: 48px; font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.chip-meta { display: flex; flex-direction: column; gap: 6px; }
.chip-meta b { font-size: var(--fs-body); font-weight: 500; line-height: 1; color: var(--chalk); }
.stars { display: flex; gap: 3px; color: var(--chalk); }
.stars svg { width: 15px; height: 15px; }
.chip-dark .face { box-shadow: 0 0 0 2px var(--paper); }
.chip-dark { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; }
.chip-dark .chip-score { color: var(--accent); }
.chip-dark .chip-meta b { color: var(--ink); }
.chip-dark .stars { color: var(--accent); }

/* ---------------------------------------------------------- inner heroes --- */
.hero-inner-page {
  position: relative; height: 472px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero-inner-page .hero-scrim {
  background: linear-gradient(to bottom, rgba(36, 22, 8, 0.55) 0%, rgba(36, 22, 8, 0.48) 46%, rgba(36, 22, 8, 0.62) 100%);
}
.hero-inner-body { position: relative; width: 100%; max-width: 1326px; padding: 0 25px; }
.hero-inner-body h1 {
  font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.02em; color: var(--paper);
}
.hero-inner-body .lead { color: var(--chalk); max-width: 500px; margin-top: 26px; }
.hero-inner-body .pill { margin-top: 31px; }
.hero-short { height: 429px; }

/* ----------------------------------------------------------- philosophy ---- */
.scrub {
  margin: 64px auto 0; max-width: 600px;
  font-family: var(--ff-display); font-size: var(--fs-scrub); font-weight: 600;
  line-height: 1.4; letter-spacing: -0.01em; color: var(--accent); text-align: center;
}
.scrub span { transition: color var(--t-base) var(--ease); }
.js .scrub span { color: var(--accent-soft); }
.js .scrub span.lit { color: var(--accent-deep); }
.philosophy .pill { margin-top: 64px; }
.philosophy-cta { text-align: center; }
.offset-pair {
  display: flex; align-items: flex-start; justify-content: center; gap: 64px; margin-top: 114px;
}
.offset-pair figure { margin: 0; width: 450px; }
.offset-pair figure img { width: 100%; height: 556px; object-fit: cover; border-radius: var(--r-tile); }
.offset-pair figure:first-child { margin-top: 70px; }

/* ------------------------------------------------------------ why / grid --- */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  grid-auto-rows: 285px; margin-top: 49px;
}
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 32px; background: var(--veil); border-radius: var(--r-tile); text-align: center;
}
.tile .ico { color: var(--accent-deep); }
.tile .ico svg { width: 26px; height: 26px; }
.tile h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.03em; color: var(--accent); }
.tile p { max-width: 300px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.why-grid .tile:nth-of-type(1) { grid-area: 1 / 1; }
.why-grid .tile:nth-of-type(2) { grid-area: 2 / 1; }
.why-grid .tile:nth-of-type(3) { grid-area: 1 / 3; }
.why-grid .tile:nth-of-type(4) { grid-area: 2 / 3; }
.why-photo { grid-area: 1 / 2 / span 2 / span 1; border-radius: var(--r-tile); overflow: hidden; }
.why-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- host tabs --- */
.host-grid {
  display: grid; grid-template-columns: 583px 1fr; gap: 64px;
  align-items: start; margin-top: 56px;
}
.host-list { padding-top: 0; }
.host-row {
  display: block; width: 100%; text-align: left; padding: 0 0 24px;
  border-bottom: 1px solid var(--hairline-soft); position: relative;
}
.host-row + .host-row { padding-top: 24px; }
.host-row h3 {
  font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.03em;
  color: var(--ink); transition: color var(--t-base) var(--ease);
}
.host-row[aria-selected="true"] h3 { color: var(--accent); }
.host-row .bar {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--accent-deep);
}
.host-row[aria-selected="true"] .bar { width: 100%; }
.js .host-row[aria-selected="true"] .bar { animation: hostbar 6000ms linear forwards; }
@keyframes hostbar { from { width: 0; } to { width: 100%; } }
.host-media { position: relative; height: 521px; border-radius: var(--r-lg); overflow: hidden; }
.host-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.host-media img.on { opacity: 1; }
.host-caption {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  padding: 18px 20px; background: var(--white); border-radius: var(--r-tile);
  font-size: var(--fs-small); line-height: 1.6; color: var(--ink-strong); text-align: center;
}
.host-caption p { display: none; }
.host-caption p.on { display: block; }

/* --------------------------------------------------------------- rooms ----- */
.rooms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.rooms-head h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.03em; color: var(--accent); }
.rooms-head .sub { margin-top: 8px; font-size: var(--fs-body); color: var(--accent-deep); }
.rooms-head .lead { margin: 8px 0 0; width: 340px; text-align: left; max-width: none; }
.rooms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 78px; }
.room { display: flex; flex-direction: column; gap: 4px; }
.room-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 54px; padding: 4px 4px 4px 24px;
  background: var(--white); border-radius: var(--r-card);
}
.room-bar h3 {
  font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; color: var(--accent-deep);
}
.rate {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px;
  background: var(--accent-deep); border-radius: var(--r-chip); color: var(--chalk);
}
.rate small {
  font-size: 11px; font-weight: 700; line-height: 1.15; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.92; max-width: 62px;
}
.rate b {
  font-family: var(--ff-display); font-size: 32px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.room-well { display: block; height: 480px; border-radius: var(--r-card); overflow: hidden; }
.room-well img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.room:hover .room-well img { transform: scale(1.025); }

/* -------------------------------------------------------- testimonials ----- */
.tm-chip { display: flex; justify-content: center; margin-top: 26px; }
.quote {
  width: 756px; max-width: 100%; margin: 60px auto 0; padding: 38px 38px 34px;
  background: var(--veil-soft); border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg); text-align: center;
}
.quote .face { width: 100px; height: 100px; border-radius: var(--r-lg); margin: 0 auto; font-size: 38px; }
.quote .stars { justify-content: center; margin-top: 24px; color: var(--accent); }
.quote .stars svg { width: 17px; height: 17px; }
.quote h3 {
  margin-top: 18px; font-size: var(--fs-h3); line-height: 1.2;
  letter-spacing: -0.02em; color: var(--accent);
}
.quote p.words {
  max-width: 560px; margin: 20px auto 0; font-size: var(--fs-small);
  line-height: 1.5; color: var(--ink-strong);
}
.quote p.who { margin-top: 20px; font-size: var(--fs-body); color: var(--accent-deep); }
.quote-panel { position: relative; }
.quote-panel .quote { display: none; }
.quote-panel .quote.on { display: block; }
.picker {
  display: flex; justify-content: center; gap: 4px; margin: 45px auto 0;
  padding: 4px; background: var(--white); border-radius: var(--r-tile); width: max-content;
}
.picker button {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--paper-tint); color: var(--accent-deep);
  font-family: var(--ff-display); font-size: 16px; font-weight: 600; line-height: 1;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.picker button[aria-selected="true"] { background: var(--accent-deep); color: var(--chalk); }

/* ----------------------------------------------------------- film band ----- */
.film { position: relative; width: 1150px; max-width: 100%; height: 647px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; }
.film img { width: 100%; height: 100%; object-fit: cover; }
.js .film img { animation: filmdrift 34s linear infinite alternate; }
.film.paused img { animation-play-state: paused; }
@keyframes filmdrift { from { transform: scale(1); } to { transform: scale(1.07); } }
.film-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(36, 22, 8, 0.5), rgba(36, 22, 8, 0.34) 52%, rgba(36, 22, 8, 0.58));
}
.film h2 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 800px; max-width: calc(100% - 48px);
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--chalk); text-align: center;
}
.film-toggle {
  position: absolute; right: 24px; bottom: 24px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(249, 247, 244, 0.82); color: var(--accent-deep);
}
.film-toggle svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------- notes ------ */
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 80px; }
.note {
  display: block; padding: 4px; background: var(--veil);
  border-radius: var(--r-note); transition: background-color var(--t-base) var(--ease);
}
.note:hover { background: rgba(255, 255, 255, 0.78); }
.note-well { display: block; height: 294px; border-radius: 33px; overflow: hidden; }
.note-well img { width: 100%; height: 100%; object-fit: cover; }
.note-body { display: block; padding: 17px 12px 20px; }
.note-body time { display: block; font-size: var(--fs-small); color: var(--ink); }
.note-body h3 {
  margin-top: 8px; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--accent-deep);
}
.notes-cta { display: flex; justify-content: center; margin-top: 24px; }

/* ---------------------------------------------------------------- faq ------ */
.faq-panel {
  width: 600px; max-width: 100%; margin: 48px auto 0; padding: 4px;
  background: var(--veil); border-radius: 22px;
}
.faq-row {
  background: var(--paper); border-radius: var(--r-card); overflow: hidden;
}
.faq-row + .faq-row { margin-top: 4px; }
.faq-row summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px; cursor: pointer; list-style: none;
  font-size: var(--fs-body); line-height: 1.6; color: var(--ink);
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row .mark {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  background: var(--accent-deep); border-radius: 50%; color: var(--chalk);
  transition: transform var(--t-base) var(--ease);
}
.faq-row .mark svg { width: 14px; height: 14px; }
.faq-row[open] .mark { transform: rotate(180deg); }
.faq-row .answer {
  padding: 0 16px 18px; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-strong);
}

/* -------------------------------------------------------------- follow ----- */
.fan {
  position: relative; height: 448px; margin-top: 52px;
  perspective: 1200px; overflow: hidden;
}
.fan figure {
  position: absolute; top: 0; margin: 0; border-radius: 20px; overflow: hidden;
  transform-style: preserve-3d;
}
.fan figure img { width: 100%; height: 100%; object-fit: cover; }
.fan .fan-mid { left: 50%; width: 285px; height: 448px; margin-left: -142px; z-index: 2; }
.fan .fan-l, .fan .fan-r { width: 311px; height: 400px; top: 43px; z-index: 1; }
.fan .fan-l { left: 50%; margin-left: -450px; transform: rotateZ(-9deg) rotateY(-38deg) translateZ(-40px); transform-origin: 100% 50%; }
.fan .fan-r { left: 50%; margin-left: 139px; transform: rotateZ(9deg) rotateY(38deg) translateZ(-40px); transform-origin: 0% 50%; }

/* -------------------------------------------------------------- footer ----- */
.foot { background: var(--footer-bg); color: var(--chalk); padding: 56px 0 25px; overflow: hidden; }
.foot-grid {
  display: grid; grid-template-columns: 200px 327px 1fr 400px; gap: 24px;
}
.foot-col h3 {
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: 500;
  line-height: 1; color: var(--chalk); letter-spacing: 0.01em;
}
.foot-col ul { margin-top: 13px; }
.foot-col li { line-height: 1; }
.foot-col li + li { margin-top: 9px; }
.foot-col a, .foot-col .flat {
  display: inline-block; font-size: 21px; font-weight: 500; line-height: 1;
  color: var(--chalk);
}
.foot-col a { transition: opacity var(--t-fast) var(--ease); }
.foot-col a:hover { opacity: 0.72; }
.foot-contact { margin-top: 13px; }
.foot-contact p { font-size: var(--fs-body); line-height: 1.5; color: var(--footer-muted); }
.foot-contact p + p { margin-top: 2px; }
.foot-contact .gap { margin-top: 20px; }
.foot-contact a { color: var(--footer-muted); }
.foot-contact a:hover { color: var(--chalk); }
.foot-legal { margin-top: 26px; font-size: var(--fs-body); color: var(--chalk); }
.foot-note { margin-top: 6px; font-size: var(--fs-small); color: var(--footer-muted); max-width: 520px; }
.wordmark {
  display: block; width: 100%; margin-top: 30px;
  font-family: var(--ff-display); font-weight: 600;
  font-size: var(--wordmark-fs); line-height: 0.72; letter-spacing: 0.008em;
  color: var(--paper); white-space: nowrap; text-transform: uppercase;
}
.wordmark-clip { overflow: hidden; height: clamp(78px, 10.6vw, 300px); }
.foot-wordmark-bleed { width: 100%; padding: 0 25px; }

/* --------------------------------------------------------- about page ------ */
.story {
  display: grid; grid-template-columns: 624px 1fr; gap: 24px;
  padding: 24px; background: var(--veil); border-radius: var(--r-panel);
}
.story-media { position: relative; border-radius: var(--r-panel); overflow: hidden; height: 624px; }
.story-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.story-media img.on { opacity: 1; }
.story-addr {
  position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 12px;
  background: var(--white); border-radius: var(--r-tile);
  font-size: var(--fs-body); color: var(--accent-deep); text-align: center;
}
.story-body { padding: 100px 24px 0 28px; }
.story-body h2 {
  font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; color: var(--accent);
}
.story-body p { margin-top: 24px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 34px; }
.stat { padding: 28px; background: var(--paper-tint); border-radius: var(--r-tile); }
.stat b {
  display: block; font-family: var(--ff-display); font-size: 56px; font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 12px; font-size: var(--fs-body); color: var(--ink); }
.stat-note { margin-top: 10px; font-size: var(--fs-label); color: var(--ink); }
.story-body .pill { margin-top: 24px; }

/* history: pinned horizontal track */
.history { position: relative; height: 3214px; }
.history-stage {
  position: sticky; top: 0; height: 100vh; min-height: 760px;
  display: flex; align-items: center; overflow: hidden;
}
.history-head { position: relative; z-index: 2; flex-shrink: 0; width: 437px; padding-left: 40px; }
.history-head h2 { font-size: var(--fs-h2-lg); line-height: 0.95; letter-spacing: -0.03em; color: var(--accent); text-align: left; }
.history-head p { margin-top: 22px; max-width: 397px; font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.history-track { display: flex; gap: 24px; will-change: transform; }
.history-card { width: 642px; flex-shrink: 0; }
.history-card .well { display: block; height: 500px; border-radius: 29px; overflow: hidden; }
.history-card .well img { width: 100%; height: 100%; object-fit: cover; }
.history-card b {
  display: block; margin-top: 32px; font-family: var(--ff-display); font-size: 32px;
  font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.history-card h3 {
  margin-top: 15px; font-size: var(--fs-h4); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--accent-deep);
}

/* openings */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 66px; }
.role {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 32px; background: var(--white); border-radius: var(--r-lg);
}
.role .tags { display: flex; gap: 8px; }
.role .tags span {
  padding: 3px 12px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--accent-deep);
}
.role h3 { margin-top: 12px; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; color: var(--accent); }
.role .ghost {
  flex-shrink: 0; padding: 10px 20px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 700;
  color: var(--accent-deep); transition: background-color var(--t-base) var(--ease);
}
.role .ghost:hover { background: var(--accent-wash); }

/* ------------------------------------------------------- booking page ------ */
.book-grid { display: grid; grid-template-columns: 554px 500px; justify-content: space-between; gap: 64px; margin-top: 100px; }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 22px; }
.field { display: block; }
.field.full { grid-column: 1 / -1; }
.field > span { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--ink-strong); }
.field input, .field select, .field textarea {
  width: 100%; margin-top: 8px; padding: 13px 16px; min-height: 48px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-tile);
  font-family: var(--ff-body); font-size: var(--fs-small); font-weight: 500; color: var(--ink-strong);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent-deep); }
.form-foot { margin-top: 26px; }
.form-note { margin-top: 14px; font-size: var(--fs-label); color: var(--ink); }
.form-ok {
  display: none; margin-top: 18px; padding: 16px 20px;
  background: var(--white); border-left: 3px solid var(--accent-deep); border-radius: var(--r-tile);
  font-size: var(--fs-small); color: var(--ink-strong);
}
.form-ok.on { display: block; }
.info-card {
  display: block; padding: 20px; background: var(--white); border-radius: var(--r-lg);
}
.info-card + .info-card { margin-top: 8px; }
.info-card span { display: block; font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--ink); }
.info-card b { display: block; margin-top: 4px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-strong); }
.info-shot { margin-top: 20px; border-radius: var(--r-panel); overflow: hidden; height: 316px; }
.info-shot img { width: 100%; height: 100%; object-fit: cover; }
.locale { height: 500px; border-radius: var(--r-panel); overflow: hidden; position: relative; }
.locale img { width: 100%; height: 100%; object-fit: cover; }
.locale .tagline {
  position: absolute; left: 24px; bottom: 24px; padding: 14px 22px;
  background: var(--white); border-radius: var(--r-tile);
  font-size: var(--fs-small); color: var(--ink-strong);
}

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1200px) {
  :root { --fs-h1: 60px; --fs-h2: 46px; --fs-h2-lg: 50px; --fs-h3: 25px; --fs-scrub: 28px; }
  .wrap-1230, .wrap-1150, .wrap-1300, .wrap-1350 { padding: 0 32px; }
  .host-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .story { grid-template-columns: 1fr 1fr; }
  .story-media { height: 520px; }
  .story-body { padding: 40px 0 0; }
  .book-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}
@media (max-width: 980px) {
  .pill-bar { display: none; }
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; display: block;
    background: var(--paper);
  }
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    height: 55px; padding: 12px 24px;
  }
  .burger {
    display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px;
    color: var(--accent-deep);
  }
  .burger svg { width: 22px; height: 22px; }
  .mobile-menu {
    display: none; padding: 12px 24px 20px;
  }
  .mobile-menu.on { display: block; }
  .mobile-menu a:not(.pill) {
    display: block; padding: 10px 0; font-size: 18px; font-weight: 700;
    color: var(--ink); border-bottom: 1px solid var(--hairline-soft);
  }
  .mobile-menu .pill { margin-top: 16px; }
  .wrap, .wrap-hero, .wrap-1350, .wrap-1300, .wrap-1230, .wrap-1150 { padding: 0 20px; }
  .hero { align-items: flex-end; }
  .hero-inner { padding-bottom: 64px; }
  .hero-stack { align-items: flex-start; }
  .hero-lead { width: 100%; text-align: left; font-size: var(--fs-small); margin-top: 13px; }
  .chip { min-width: 288px; padding: 5px 16px 5px 4px; border-radius: 15px; gap: 8px; }
  .face { width: 38px; height: 38px; font-size: 15px; }
  .chip-faces .face { margin-right: -6px; }
  .chip-score { font-size: 36px; }
  .chip-meta b { font-size: var(--fs-small); }
  .display { margin-top: 10px; line-height: 0.99; }
  .hero-inner-page { height: 449px; }
  .hero-short { height: 389px; }
  .hero-inner-body { padding: 0 40px; max-width: none; }
  .hero-inner-body .lead { max-width: 310px; font-size: var(--fs-small); margin-top: 20px; }
  .hero-inner-body .pill { margin-top: 24px; }
  .band { padding: 64px 0; }
  .philosophy { padding: 80px 0 79px; }
  .scrub { margin-top: 24px; max-width: 358px; line-height: 1.4; }
  .philosophy .pill { margin-top: 32px; }
  .offset-pair { gap: 12px; margin-top: 57px; }
  .offset-pair figure { width: 50%; }
  .offset-pair figure img { height: 209px; border-radius: 12px; }
  .offset-pair figure:first-child { margin-top: 0; }
  .why-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 20px; }
  .why-grid .tile, .why-photo { grid-area: auto !important; }
  .why-photo { height: 317px; }
  .tile { padding: 20px; gap: 12px; }
  .tile p { max-width: none; font-size: var(--fs-small); }
  .host-grid { grid-template-columns: 1fr; gap: 28px; }
  .host-media { height: 300px; order: -1; }
  .rooms-head { flex-direction: column; gap: 16px; }
  .rooms-head .lead { width: auto; }
  .rooms-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .room-bar { height: 45px; padding: 4px 4px 4px 16px; }
  .room-bar h3 { font-size: 18px; }
  .rate { height: 37px; padding: 0 12px; gap: 8px; }
  .rate b { font-size: 24px; }
  .rate small { font-size: 10px; max-width: 56px; }
  .room-well { height: 252px; }
  .band-tm { padding: 40px 0; }
  .quote { margin-top: 32px; padding: 20px 16px; }
  .picker { margin-top: 28px; }
  .tm-chip { margin-top: 18px; }
  .quote .face { width: 76px; height: 76px; font-size: 30px; }
  .quote p.words { font-size: var(--fs-small); }
  .band-film { padding: 32px 0; }
  .film { height: 197px; }
  .film h2 { width: 310px; font-size: 24px; line-height: 1.1; }
  .film-toggle { right: 14px; bottom: 14px; width: 38px; height: 38px; }
  .band-journal { padding: 64px 0; }
  .notes-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .note-well { height: 248px; }
  .note-body { padding: 14px 10px 16px; }
  .faq-panel { width: 100%; margin-top: 32px; }
  .fan { height: 448px; }
  .band-follow { padding: 80px 0; }
  .band-story { padding: 36px 0; }
  .story { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
  .story-media { height: 280px; border-radius: 20px; }
  .story-body { padding: 12px 8px 16px; }
  .stat { padding: 20px; }
  .stat b { font-size: 40px; }
  .history { height: 1597px; }
  .history-stage { height: 844px; min-height: 0; align-items: center; }
  .history-head { width: 330px; padding-left: 20px; }
  .history-head p { max-width: 290px; }
  .history-track { gap: 16px; }
  .history-card { width: 300px; }
  .history-card .well { height: 300px; border-radius: 20px; }
  .history-card b { margin-top: 20px; font-size: 26px; }
  .history-card h3 { margin-top: 10px; }
  .roles { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .role { flex-direction: column; align-items: stretch; padding: 24px; gap: 18px; }
  .role .ghost { text-align: center; }
  .role { padding: 18px 20px; gap: 12px; }
  .role h3 { font-size: 22px; }
  .book-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .field-grid { grid-template-columns: 1fr; gap: 16px; }
  .info-shot { height: 220px; }
  .locale { height: 280px; border-radius: 20px; }
  .foot { padding: 40px 0 25px; text-align: center; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-col ul { margin-top: 10px; }
  .foot-col li + li { margin-top: 10px; }
  .foot-contact p { text-align: center; }
  .foot-legal, .foot-note { text-align: center; }
  .foot-note { margin-left: auto; margin-right: auto; }
  .wordmark-clip { height: 78px; }
  .foot-wordmark-bleed { padding: 0 20px; }
  .wordmark { margin-top: 24px; }
}
@media (max-width: 520px) {
  :root { --fs-h1: 40px; --fs-h2: 24px; --fs-h2-lg: 28px; --fs-h3: 24px; --fs-h4: 18px; --fs-scrub: 22px; --fs-body: 17px; --fs-small: 16px; }
  .lead { margin-top: 18px; }
  .scrub { line-height: 1.35; }
  .quote h3 { font-size: 24px; }
  .foot-col a, .foot-col .flat { font-size: 19px; }
}

/* ------------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .scrub span, .scrub span { opacity: 1 !important; }
  .js .host-row[aria-selected="true"] .bar { animation: none; width: 100%; }
  .js .film img { animation: none; transform: none; }
  .history { height: auto !important; }
  .history-stage { position: static; height: auto; min-height: 0; display: block; overflow: visible; }
  .history-head { width: auto; }
  .history-track { transform: none !important; overflow-x: auto; margin-top: 32px; }
  .history-card { width: 420px; }
  .history-card .well { height: 320px; }
}