/* tastemaker · project: OLAM by Plasseril · mood: premium (brand-locked palette, not generated) · pages: 4
 * macrostructures: index = 12 Poster Fold · rooms = 3 Editorial Index · island = 10 Manifesto · stay = 11 Catalogue
 * arc (index): hook(H3/aperture) -> problem(built day-band diagram) -> solution(F1 window bands, one deliberately unglazed)
 *              -> welcome(owner copy) -> proof(P4 verified-facts strip) -> close(C2).
 *              how-it-works is deliberately merged into stay.html, which IS the enquiry flow.
 * nav: N4 editorial masthead · hero: H3 knob=aperture-crop (NOT full-bleed — the knob delta from the three sibling concepts)
 * footer: Ft1 masthead on deep green · cta: C2 + C4 sticky enquiry rail
 * palette: brand-locked, extended + verified (check_contrast.py --matrix). ink/cream 15.45 · teak/cream 6.86 · green/cream 8.23
 *          cream/green 8.23 · gold-light/green 5.47 · gold/cream 2.11 = DECORATIVE ONLY, never text.
 * motion: vanilla CSS transitions + a rAF geometry sweep (brief forbids frameworks, so no GSAP; and an IO-only
 *         reveal can leave a hidden-tab load stuck at opacity 0) · motif: concentric ripple = "olam"
 * critique: ShowTell 4 · Phil 5 · Hier 5 · Spec 5 · Restr 5 · Var 5
 *
 * Photography: the property's own images, curated in ../assets/img/ (see /assets/images.json).
 * Brand marks: the owners' real logo, ../assets/brand/. Nothing sourced externally; no attribution owed or shown.
 */

/* ============================================================ TOKENS */
:root {
  /* ground + surfaces */
  --cream:      #F3EEE4;
  --surface:    #EAE3D5;
  --surface-2:  #E2D9C7;

  /* warm neutrals (decorative weight only) */
  --sand:       #B5A188;
  --sage:       #A29369;

  /* gold — DECORATIVE ONLY on light grounds (2.11:1 on cream). Hairlines, marks, rules. */
  --gold:       #BCA36D;
  --gold-dark:  #9E7D45;
  --gold-light: #DAC28A;

  /* teak — text-safe on cream (6.86) and on surface (6.22) */
  --teak:       #6A4B25;
  --teak-deep:  #4C2E1A;
  --teak-press: #3B2413;

  /* deep green — the dark anchor, used sparingly */
  --green:      #454736;
  --green-press:#363826;

  /* ink */
  --ink:        #1A1712;
  --ink-soft:   #5A5140;

  /* hairlines */
  --hair:          #DCD2BF;
  --hair-strong:   #C9BEA8;
  --hair-gold:     #BCA36D;
  --hair-on-green: #5D5F49;

  /* type */
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:      clamp(2.55rem, 1.45rem + 4.1vw, 5.1rem);
  --fs-statement: clamp(2.1rem, 1.35rem + 2.9vw, 3.8rem);   /* one deliberate large moment, island.html only */
  --fs-display:   clamp(1.85rem, 1.3rem + 2.1vw, 3.05rem);  /* section heads: ~60% of hero */
  --fs-sub:       clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  --fs-lead:      clamp(1.06rem, 1rem + 0.42vw, 1.28rem);
  --fs-body:      1.0625rem;
  --fs-small:     0.9375rem;
  --fs-micro:     0.8125rem;
  --fs-label:     0.75rem;
  --fs-figure:    clamp(2.2rem, 1.6rem + 2vw, 3.2rem);

  --track-label: 0.22em;
  --track-display: 0.005em;

  /* spacing — 4px base, named steps only */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* section rhythm — pivotal / standard / connective */
  --sec-pivotal:    clamp(4.5rem, 2.6rem + 5.4vw, 9rem);
  --sec-standard:   clamp(3.25rem, 2.3rem + 2.9vw, 6rem);
  --sec-connective: clamp(2.5rem, 2rem + 1.5vw, 4rem);

  /* layout */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 60ch;
  --measure-tight: 46ch;

  /* radius — one scale, deliberately near-square */
  --r-sm: 2px;
  --r-md: 3px;

  /* easing — slow, weighted, circular. The ripple motif made kinetic. */
  --ease-slow: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 200ms;
  --dur-ui:    320ms;
  --dur-slow:  900ms;
  --dur-image: 1400ms;
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--track-display);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}
p, ul, ol, dl, figure, table { margin: 0; }
address { font-style: normal; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--teak); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--teak-deep); }
button { font: inherit; color: inherit; }

/* focus — never transitioned, always visible */
:focus-visible {
  outline: 2px solid var(--teak-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-green :focus-visible,
.mast__sheet :focus-visible { outline-color: var(--gold-light); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--green); color: var(--cream);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-small); letter-spacing: 0.06em;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-4); color: var(--cream); }

/* ============================================================ LAYOUT PRIMITIVES */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 920px; }
.measure { max-width: var(--measure); }
.measure--tight { max-width: var(--measure-tight); }

.sec { padding-block: var(--sec-standard); }
.sec--pivotal { padding-block: var(--sec-pivotal); }
.sec--connective { padding-block: var(--sec-connective); }

/* one consistent section-boundary mechanism site-wide:
   generous padding + a single gold hairline. Deep-green panels are
   deliberate surfaces (the footer, one island statement), not boundaries. */
.sec--ruled { border-top: 1px solid var(--hair-gold); }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--ink); }
.soft { color: var(--ink-soft); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); line-height: 1.55; color: var(--ink-soft); }

.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-6);
}
.on-green .label { color: var(--gold-light); }

/* section heads — S1 hanging by default; capped well below hero scale */
.head { font-size: var(--fs-display); line-height: 1.12; max-width: 18ch; }
.head--wide { max-width: 26ch; }
.sub { font-family: var(--font-display); font-size: var(--fs-sub); line-height: 1.25; }

.stack > * + * { margin-top: var(--sp-6); }
.stack-lg > * + * { margin-top: var(--sp-12); }

/* spacing utilities — named scale steps only, never arbitrary values */
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }

/* ============================================================ MASTHEAD — N4 editorial */
.mast {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--hair-gold);
}
/* a single extra hairline once the page has moved. Applied instantly, not
   transitioned — a 1px shadow does not need to animate. */
.mast.is-stuck { box-shadow: 0 1px 0 0 var(--hair); }

.mast__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.mast__brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--ink);
}
.mast__mark { width: 30px; height: 30px; object-fit: contain; }
.mast__wordwrap { display: flex; flex-direction: column; padding-left: 0.34em; }
.mast__word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
}
.mast__by {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1;
}
.mast__place {
  grid-column: 1;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mast__act { grid-column: 3; justify-self: end; display: flex; gap: var(--sp-2); align-items: center; }

.mast__bar {
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
.mast__nav { display: flex; gap: clamp(var(--sp-6), 3vw, var(--sp-16)); }
.mast__nav a {
  position: relative;
  display: block;
  padding: var(--sp-3) 2px;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
/* the rule wipes in from the left as a translate inside a clipped box —
   a translate, not a scale-from-zero. */
.mast__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 8px;
  height: 1px; background: var(--teak);
  transform: translateX(-101%);
  transition: transform var(--dur-ui) var(--ease-out);
}
.mast__nav a:hover { color: var(--ink); }
.mast__nav a:focus-visible::after { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .mast__nav a:hover::after { transform: none; }
}
.mast__nav a[aria-current="page"] { color: var(--ink); }
.mast__nav a[aria-current="page"]::after { transform: none; background: var(--gold-dark); }

.mast__toggle { display: none; }
.mast__sheet { display: none; }

@media (max-width: 60rem) {
  .mast__top { grid-template-columns: auto 1fr auto; padding-block: var(--sp-2); }
  .mast__place { display: none; }
  .mast__brand { grid-column: 2; justify-self: center; }
  .mast__act { grid-column: 3; }
  .mast__bar { display: none; }

  .mast__toggle {
    grid-column: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .mast__bars { display: block; width: 20px; height: 9px; position: relative; }
  .mast__bars i {
    position: absolute; left: 0; right: 0; height: 1px;
    background: var(--ink);
    transition: transform var(--dur-ui) var(--ease-out);
  }
  .mast__bars i:first-child { top: 0; }
  .mast__bars i:last-child { bottom: 0; }
  .mast__toggle[aria-expanded="true"] .mast__bars i:first-child { transform: translateY(4px) rotate(13deg); }
  .mast__toggle[aria-expanded="true"] .mast__bars i:last-child { transform: translateY(-4px) rotate(-13deg); }

  .mast__sheet {
    display: block;
    border-top: 1px solid var(--hair-gold);
    background: var(--cream);
  }
  .mast__sheet[hidden] { display: none; }
  .mast__sheet nav { display: flex; flex-direction: column; }
  .mast__sheet a {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
    text-decoration: none;
    min-height: 44px;
    display: flex; align-items: center;
  }
  .mast__sheet a:last-child { border-bottom: 0; }
  .mast__sheet a[aria-current="page"] { color: var(--teak); }
}

/* no scripting: the menu button cannot work, so the real link row is shown
   at every width instead, wrapping as needed. */
html:not(.js) .mast__toggle { display: none; }
html:not(.js) .mast__bar { display: grid; }
html:not(.js) .mast__nav { flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-6); }

/* narrow phones: the wordmark must not wrap, and the header action collapses
   to its glyph — the label stays in the accessibility tree, not on screen. */
@media (max-width: 30rem) {
  .mast__word { font-size: 0.9375rem; letter-spacing: 0.26em; }
  .mast__by { font-size: 0.5rem; letter-spacing: 0.18em; white-space: nowrap; }
  .mast__act .btn { padding-inline: var(--sp-3); min-width: 44px; }
  .mast__act .btn > span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-slow),
              color var(--dur-ui) var(--ease-slow),
              border-color var(--dur-ui) var(--ease-slow);
}
.btn__ico { width: 17px; height: 17px; flex: none; fill: currentColor; }

.btn--primary { background: var(--green); color: var(--cream); border-color: var(--green); }
.btn--primary:hover { background: var(--green-press); border-color: var(--green-press); color: var(--cream); }
.btn--primary:active { background: var(--green-press); }

.btn--ghost { background: transparent; color: var(--teak); border-color: var(--gold-dark); }
.btn--ghost:hover { background: var(--teak); border-color: var(--teak); color: var(--cream); }

.btn--onGreen { background: var(--cream); color: var(--green); border-color: var(--cream); }
.btn--onGreen:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--ink); }

.btn--onGreenGhost { background: transparent; color: var(--cream); border-color: var(--gold-light); }
.btn--onGreenGhost:hover { background: var(--cream); border-color: var(--cream); color: var(--green); }

.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-label); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--ink-soft);
  border-color: var(--hair-strong);
}

/* C3 typographic link */
.tlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teak); text-decoration: none;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--gold-dark);
  transition: border-color var(--dur-ui) var(--ease-slow), color var(--dur-ui) var(--ease-slow);
}
.tlink:hover { color: var(--teak-deep); border-color: var(--teak-deep); }
.tlink span { transition: transform var(--dur-ui) var(--ease-out); display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .tlink:hover span { transform: translateX(4px); }
}
.tlink--onGreen { color: var(--gold-light); border-color: var(--gold-light); }
.tlink--onGreen:hover { color: var(--cream); border-color: var(--cream); }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* ============================================================ THE WINDOW SYSTEM
   Every photograph on this site is an aperture cut into a cream wall,
   with a gold hairline set off from it like an architrave reveal.
   Three proportions only. Nothing bleeds to the edge except by intent. */
.win { position: relative; display: block; margin: 0; }
.win__frame {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  width: 100%;
}
.win__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js .win__frame img {
  transform: scale(1.045);
  transition: transform var(--dur-image) var(--ease-slow);
}
.win.is-in .win__frame img { transform: none; }
.win::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--hair-gold);
  pointer-events: none;
}
.js .win::after {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-slow) 180ms;
}
.win.is-in::after { opacity: 1; }
@media (max-width: 48rem) { .win::after { inset: -6px; } }

.win--wide  .win__frame { aspect-ratio: 4 / 3; }
.win--tall  .win__frame { aspect-ratio: 3 / 4; }
.win--panel .win__frame { aspect-ratio: 5 / 4; }
.win--pano  .win__frame { aspect-ratio: 16 / 9; }

.win__cap {
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}
.win__cap b { font-weight: 500; color: var(--ink); }

/* An unglazed window: a real, honest gap in the photography.
   Same aperture, no glass. Marked in the markup with a PLACEHOLDER comment. */
.win--empty .win__frame {
  background: var(--surface-2);
  display: grid;
  place-items: center;
  border: 1px solid var(--hair-strong);
}
.win__await {
  text-align: center;
  padding: var(--sp-6);
  max-width: 30ch;
}
.win__await .label { margin-bottom: var(--sp-2); color: var(--ink-soft); }
.win__await p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.win__await .ripple { margin: 0 auto var(--sp-6); }

/* ============================================================ RIPPLE — the brand motif
   The mark is a ring of interlaced curling waves. "Olam" is a ripple. */
.ripple {
  display: block;
  position: relative;
  width: 56px; height: 56px;
  flex: none;
}
.ripple::before,
.ripple::after {
  content: "";
  position: absolute;
  inset: 40%;
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.ripple::before { transform: scale(2.3); opacity: 0.5; }
.ripple::after  { transform: scale(4.2); opacity: 0.26; }
.ripple--onGreen::before,
.ripple--onGreen::after { border-color: var(--gold-light); }
.ripple span {
  position: absolute;
  inset: 40%;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
}
.ripple.is-in span { animation: ripple-out 7s var(--ease-slow) infinite; }
.ripple span:nth-child(2) { animation-delay: 2.33s; }
.ripple span:nth-child(3) { animation-delay: 4.66s; }
@keyframes ripple-out {
  0%   { transform: scale(1); opacity: 0; }
  12%  { opacity: 0.95; }
  100% { transform: scale(5); opacity: 0; }
}
.ripple--sm { width: 34px; height: 34px; }
.ripple--onGreen span { border-color: var(--gold-light); }

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding-block: var(--sec-connective);
}
.divider::before, .divider::after {
  content: ""; height: 1px; background: var(--hair-gold); flex: 1 1 auto; max-width: 280px;
}

/* ============================================================ REVEAL */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================ HERO — H3, aperture crop (index)
   The knob that separates this from every other Olam concept: the photograph
   is NOT full-bleed. It is a wide aperture cut into the cream ground, with the
   type standing above it on the wall. */
.hero { padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem) var(--sec-pivotal); }
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 var(--sp-8);
}
.hero__eyebrow::before { content: ""; width: 48px; height: 1px; background: var(--gold-dark); }
.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.07;
  max-width: 17ch;
  margin: 0;
}
.hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-10);
  align-items: end;
  margin-top: var(--sp-12);
}
.hero__lede {
  font-size: var(--fs-lead);
  line-height: 1.62;
  max-width: 46ch;
  color: var(--ink);
}
.hero__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

.hero__win { margin-top: clamp(var(--sp-10), 4vw, var(--sp-16)); }
.hero__win .win__frame { aspect-ratio: 21 / 9; }
.hero__win .win__frame img { object-position: center 48%; }
.hero__cue {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-12);
  text-decoration: none; color: var(--ink-soft);
  font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  width: max-content;
}
.hero__cue:hover { color: var(--ink); }

@media (max-width: 60rem) {
  .hero__meta { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .hero h1 { max-width: 16ch; }
  .hero__cta .btn { flex: 1 1 12rem; }
}
@media (max-width: 48rem) {
  .hero__win .win__frame { aspect-ratio: 4 / 3; }
}

/* ============================================================ DAY BAND — index problem beat */
.dayband { margin-top: var(--sp-16); }
.dayband__track {
  position: relative;
  height: 96px;
  border-bottom: 1px solid var(--hair-strong);
}
.dayband__block {
  position: absolute;
  bottom: 0;
  height: 14px;
  background: var(--gold-light);
  border: 1px solid var(--gold-dark);
  border-bottom: 0;
}
.dayband__block--dawn { left: 6%; width: 13%; }
.dayband__block--dusk { left: 69%; width: 16%; }
.dayband__pin {
  position: absolute;
  bottom: 26px;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.dayband__pin::after {
  content: ""; position: absolute; left: 0; bottom: -18px;
  width: 1px; height: 14px; background: var(--gold-dark);
}
.dayband__pin--dawn { left: 6%; }
.dayband__pin--dusk { left: 69%; }
.dayband__scale {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dayband__cap { margin-top: var(--sp-8); max-width: 54ch; color: var(--ink-soft); font-size: var(--fs-small); }
@media (max-width: 48rem) {
  .dayband__track { height: 120px; }
  .dayband__pin { font-size: 0.6875rem; }
  .dayband__pin--dusk { left: auto; right: 0; text-align: right; }
  .dayband__pin--dusk::after { left: auto; right: 0; }
}

/* ============================================================ BANDS — F1 alternating (index) */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-10), 5vw, var(--sp-24));
  align-items: center;
  padding-block: var(--sec-standard);
}
.band + .band { border-top: 1px solid var(--hair); }
.band--flip .band__media { order: 2; }
.band__copy h3 { font-size: var(--fs-display); line-height: 1.14; max-width: 14ch; }
.band__copy p { margin-top: var(--sp-6); max-width: 44ch; color: var(--ink-soft); }
.band__copy .tlink { margin-top: var(--sp-8); }
@media (max-width: 60rem) {
  .band { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .band--flip .band__media { order: 0; }
}

/* ============================================================ FACTS — P4 verified-facts strip */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-12);
}
.fact { padding: var(--sp-6) 0 0; border-top: 1px solid var(--hair-gold); }
.fact__fig {
  font-family: var(--font-display);
  font-size: var(--fs-figure);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--teak-deep);
}
.fact__fig sup { font-size: 0.42em; vertical-align: super; letter-spacing: 0.04em; }
.fact__q { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); max-width: 26ch; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--gold-dark);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teak);
}

/* ============================================================ INDEX LIST — rooms.html (Editorial Index) */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  padding-block: var(--sec-standard);
}
.entry + .entry { border-top: 1px solid var(--hair); }
@media (min-width: 60rem) {
  .entry {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--sp-10), 5vw, var(--sp-20));
    align-items: center;
  }
  .entry__media { grid-column: 1; grid-row: 1; }
  .entry__copy  { grid-column: 2; grid-row: 1; }
  .entry--flip .entry__media { grid-column: 2; }
  .entry--flip .entry__copy  { grid-column: 1; }
}
.entry__no {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--teak);
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-4);
}
.entry__copy h3 { font-size: var(--fs-sub); line-height: 1.22; max-width: 20ch; }
.entry__copy p { margin-top: var(--sp-6); color: var(--ink-soft); max-width: 40ch; }

/* a quieter two-up window grid — a different rhythm from .entry on the same page */
.gridwins {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-10), 4vw, var(--sp-16));
}
@media (min-width: 48rem) {
  .gridwins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gridwins--offset > *:nth-child(even) { margin-top: clamp(var(--sp-12), 5vw, var(--sp-24)); }
}

/* ============================================================ SPEC SHEET — F6 (facilities, village life) */
.spec { border-top: 1px solid var(--hair-gold); }
.spec li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--hair);
}
.spec li > span:first-child {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  color: var(--teak);
  letter-spacing: 0.12em;
}
.spec li > span:last-child { font-size: var(--fs-body); }
@media (min-width: 60rem) {
  .spec--2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(var(--sp-12), 5vw, var(--sp-24)); }
}
.spec--plain li { grid-template-columns: minmax(0, 1fr); }
.spec--plain li > span:first-child {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: normal;
  color: var(--ink);
}

/* ============================================================ DISTANCE SCALE — island.html */
.scale { margin-top: var(--sp-16); }
.scale__rail {
  position: relative;
  height: 150px;
  border-bottom: 1px solid var(--hair-strong);
}
.scale__origin {
  position: absolute; left: 0; bottom: 0;
  width: 1px; height: 100%; background: var(--gold-dark);
}
.scale__rings {
  position: absolute; left: -22px; bottom: -22px;
  width: 44px; height: 44px;
}
.scale__mark { position: absolute; bottom: 0; width: 1px; }
.scale__mark::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 1px; height: 100%; background: var(--hair-gold);
}
.scale__mark span {
  position: absolute; bottom: calc(100% + var(--sp-2)); left: var(--sp-3);
  white-space: nowrap;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.scale__mark b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--teak-deep);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.scale__mark--a { left: 3.6%; height: 34%; }
.scale__mark--b { left: 32.1%; height: 64%; }
.scale__mark--c { left: 100%; height: 94%; }
.scale__mark--c span { left: auto; right: var(--sp-3); text-align: right; }
.scale__home {
  position: absolute; left: 0; bottom: calc(100% + var(--sp-4));
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink);
}
.scale__foot {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 60rem) { .scale { display: none; } }

.dtable { width: 100%; border-collapse: collapse; text-align: left; }
.dtable caption { text-align: left; font-size: var(--fs-small); color: var(--ink-soft); padding-bottom: var(--sp-4); }
.dtable th, .dtable td { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.dtable thead th {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom-color: var(--hair-gold);
}
.dtable tbody th { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-body); }
.dtable td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--teak-deep); }
.dtable td:last-child { color: var(--ink-soft); font-size: var(--fs-small); }
.tablewrap { overflow-x: auto; }

/* ============================================================ GREEN PANEL — the one dark moment */
.on-green {
  background: var(--green);
  color: var(--cream);
}
.on-green h2, .on-green h3 { color: var(--cream); }
.on-green p { color: var(--surface); }
.on-green a:not(.btn) { color: var(--gold-light); }
.on-green a:not(.btn):hover { color: var(--cream); }
.on-green .statement {
  font-size: var(--fs-statement);
  line-height: 1.1;
  max-width: 17ch;
}

/* ============================================================ FORM — stay.html */
.form { display: grid; gap: var(--sp-8); }
.field { display: grid; gap: var(--sp-2); align-content: start; }
.field label { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--dur-ui) var(--ease-slow);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold-dark); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--teak);
  outline: 2px solid var(--teak-deep);
  outline-offset: 2px;
}
.field .hint { font-size: var(--fs-micro); color: var(--ink-soft); }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--teak-deep); box-shadow: inset 0 0 0 1px var(--teak-deep); }
.field__err { font-size: var(--fs-micro); color: var(--teak-deep); font-weight: 500; }
.field__err[hidden] { display: none; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
@media (max-width: 34rem) { .pair { grid-template-columns: minmax(0, 1fr); } }

.preview {
  background: var(--surface);
  border: 1px solid var(--hair-strong);
  border-left: 2px solid var(--gold-dark);
  padding: var(--sp-6);
}
.preview .label { margin-bottom: var(--sp-3); }
.preview p { font-size: var(--fs-small); color: var(--ink); line-height: 1.65; white-space: pre-wrap; }

/* ============================================================ CHANNEL LIST — stay.html */
.chan { border-top: 1px solid var(--hair-gold); }
.chan li { border-bottom: 1px solid var(--hair); }
.chan a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-6);
  text-decoration: none;
  color: var(--ink);
}
.chan a:hover .chan__t { color: var(--teak-deep); }
.chan__t { display: block; font-family: var(--font-display); font-size: var(--fs-sub); line-height: 1.2; transition: color var(--dur-ui) var(--ease-slow); }
.chan__d { display: block; font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--sp-1); max-width: 46ch; }
.chan__arrow { color: var(--teak); transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .chan a:hover .chan__arrow { transform: translateX(5px); }
}

/* ============================================================ STICKY ENQUIRY RAIL — C4 */
.rail {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: var(--cream);
  border-top: 1px solid var(--hair-gold);
  transform: translateY(110%);
  /* 560ms is over the 300ms UI budget on purpose: this is a drawer sliding in
     from off-screen, not a state change on a control. Killed under reduced motion. */
  transition: transform 560ms var(--ease-out);
}
.rail.is-up { transform: none; }
/* with scripting off the rail can never be raised, so it is not rendered at all;
   every action it holds is reachable from the masthead and the footer. */
html:not(.js) .rail { display: none; }
.rail__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-3);
}
.rail__t { font-size: var(--fs-small); color: var(--ink-soft); }
.rail__t b { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: var(--ink); display: block; }
.rail__acts { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 48rem) {
  .rail__t { display: none; }
  .rail__in { padding-block: var(--sp-2); }
  .rail__acts { width: 100%; }
  .rail__acts .btn { flex: 1 1 0; padding-inline: var(--sp-3); }
}

/* ============================================================ FOOTER — Ft1 masthead on green */
.foot { background: var(--green); color: var(--cream); padding-block: var(--sec-standard) var(--sec-connective); }
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--hair-on-green);
}
@media (min-width: 60rem) {
  .foot__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--sp-10), 4vw, var(--sp-20)); }
}
.foot__logo { width: 108px; height: auto; }
.foot__tag { margin-top: var(--sp-6); font-family: var(--font-display); font-size: 1.2rem; line-height: 1.4; color: var(--cream); max-width: 24ch; }
.foot h2 { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--sp-4); }
.foot address { font-style: normal; font-size: var(--fs-small); line-height: 1.75; color: var(--surface); }
.foot__links li + li { margin-top: var(--sp-3); }
.foot__links a { font-size: var(--fs-small); color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--hair-on-green); padding-bottom: 2px; transition: border-color var(--dur-ui) var(--ease-slow), color var(--dur-ui) var(--ease-slow); }
.foot__links a:hover { color: var(--gold-light); border-color: var(--gold-light); }
.foot__links .note { display: block; font-size: var(--fs-micro); color: var(--surface); margin-top: var(--sp-1); max-width: 34ch; }
.foot__bot {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  align-items: center; justify-content: space-between;
  padding-top: var(--sp-8);
  font-size: var(--fs-micro);
  color: var(--surface);
}
.foot__bot .chip { border-color: var(--gold-light); color: var(--gold-light); }

/* ============================================================ PAGE HEAD (inner pages) */
.phead { padding-block: var(--sec-pivotal) var(--sec-standard); }
.phead h1 { font-size: var(--fs-hero); line-height: 1.06; max-width: 14ch; }
.phead .lead { margin-top: var(--sp-8); max-width: 52ch; }
.phead__meta { margin-top: var(--sp-12); display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* ============================================================ TWO-COLUMN EDITORIAL */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
}
@media (min-width: 60rem) {
  .duo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(var(--sp-12), 6vw, var(--sp-24)); align-items: start; }
  .duo--center { align-items: center; }
}

/* ============================================================ TOUCH TARGETS
   Below 48rem every interactive element clears 44x44. Footer links swap their
   drawn rule for a text underline so the padding can grow without the line
   drifting away from the words. */
@media (max-width: 48rem) {
  .btn--sm { min-height: 44px; }
  .tlink { padding-block: var(--sp-3); }
  .hero__cue { min-height: 44px; align-items: center; }
  .mast__brand { padding-block: var(--sp-2); }
  .foot a {
    display: inline-block;
    padding-block: var(--sp-3);
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: var(--hair-on-green);
    text-underline-offset: 0.25em;
  }
  .foot__links li + li { margin-top: 0; }
  .foot__links .note { margin-top: 0; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-property: opacity, color, background-color, border-color !important;
  }
  .js [data-reveal] { transform: none; }
  .js .win__frame img { transform: none; }
  .js .win::after { opacity: 1; }
  .ripple span { opacity: 0.5; transform: scale(4.6); animation: none !important; }
  .ripple span:nth-child(2) { transform: scale(3); opacity: 0.38; }
  .ripple span:nth-child(3) { transform: scale(1.6); opacity: 0.26; }
  .rail { transform: none; }
  .rail:not(.is-up) { display: none; }
}