/* ==========================================================================
   Layout — page shell, sections, the day-arc rhythm
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 1100px; }

/* Every section carries its own ground so the light/dark rhythm of the day
   is set by one class on the section, not by cascading overrides. */
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--s-7);
}

.section--flush { padding-block: 0; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* ---- the hour mark: the day-arc structural device ---- */
.hour {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.hour__time {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

.hour__label { color: var(--muted); }

.hour::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ---- generic two-column editorial block ---- */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--wide-left { grid-template-columns: 1.25fr 1fr; }
  .duo--wide-right { grid-template-columns: 1fr 1.25fr; }
  .duo--flip .duo__media { order: 2; }
}

.duo__text { max-width: 46ch; }

.duo__text > * + * { margin-top: var(--s-3); }

/* A column is not a full-bleed heading slot — the page-level display size
   breaks into three-word lines in here. */
.duo__text h2 { font-size: clamp(1.9rem, 3.3vw, 3rem); }

/* ---- header ---- */
.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: clamp(1rem, 2.2vw, 1.75rem) var(--gutter);
  color: var(--limewash);
  transition: background-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
              padding 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

.head.is-stuck {
  background: rgba(10, 12, 11, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--stone-line);
  padding-block: 0.85rem;
}

.head__mark {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.head__mark em {
  font-style: normal;
  color: var(--amber);
}

.head__nav {
  display: none;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  align-items: center;
}

@media (min-width: 820px) {
  .head__nav { display: flex; }
}

.head__link {
  font-size: var(--t-util);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--limewash);
  opacity: 0.72;
  position: relative;
  padding-block: 0.4rem;
  transition: opacity 0.3s var(--ease);
}

.head__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.head__link:hover { opacity: 1; }
.head__link:hover::after,
.head__link[aria-current='page']::after { transform: scaleX(1); }
.head__link[aria-current='page'] { opacity: 1; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-deep);
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Scrim: keeps the display type legible over any photograph without
   flattening the image. Two stops — bottom for text, top for the header. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Weighted to the lower half, where the type sits, while leaving the lit
     middle of the house alone. */
  background:
    linear-gradient(to top, rgba(10, 12, 11, 0.94) 0%, rgba(10, 12, 11, 0.78) 22%,
                    rgba(10, 12, 11, 0.46) 48%, rgba(10, 12, 11, 0.12) 72%,
                    rgba(10, 12, 11, 0.52) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--s-3);
  color: var(--limewash);
  /* insurance: the eyebrow is small and can land on a bright patch of sky */
  text-shadow: 0 1px 18px rgba(10, 12, 11, 0.9);
}

.hero__eyebrow span:first-child { color: var(--amber); }

.hero__title {
  margin-bottom: var(--s-3);
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(10, 12, 11, 0.55);
  font-variation-settings: 'opsz' 144;
}

.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--amber-warm);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: var(--s-4);
}

.hero__note {
  max-width: 34ch;
  font-size: var(--t-sm);
  color: rgba(228, 226, 218, 0.72);
}

/* scroll cue */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 8vh, 6rem);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.75rem;
  writing-mode: vertical-rl;
  color: var(--limewash);
  opacity: 0.6;
}

@media (min-width: 1080px) { .hero__cue { display: flex; } }

.hero__cue-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  animation: cue 2.8s var(--ease) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* ==========================================================================
   Full-bleed statement sections
   ========================================================================== */

.bleed {
  position: relative;
  min-height: clamp(520px, 82vh, 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  padding: var(--s-6) var(--gutter);
  background: var(--ink-deep);
}

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

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

/* Flat wash plus a centre vignette: the flat layer seats the photograph on the
   ink ground, the radial one guarantees contrast under the type wherever the
   picture happens to be bright. */
.bleed__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10, 12, 11, 0.7), rgba(10, 12, 11, 0) 70%),
    rgba(10, 12, 11, 0.58);
}

.bleed__inner {
  position: relative;
  z-index: 2;
  max-width: min(46rem, 92vw);
}

.bleed--quote .bleed__inner { max-width: min(40rem, 92vw); }

.bleed__quote {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.3vw, 2.9rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 110;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: var(--ink-deep);
  color: var(--ash);
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid var(--stone-line);
}

.foot__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); }
}

.foot__mark {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--limewash);
  letter-spacing: 0.02em;
}

.foot h4 {
  font-family: var(--body);
  font-size: var(--t-util);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: var(--s-2);
}

.foot__list li + li { margin-top: 0.6rem; }

.foot__list a {
  text-decoration: none;
  color: var(--limewash);
  opacity: 0.78;
  font-size: var(--t-sm);
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

.foot__list a:hover { opacity: 1; color: var(--amber); }

.foot__base {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--stone-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  font-size: var(--t-util);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash-dark);
}

/* ==========================================================================
   Hero entry sequence — load-triggered, not scroll-triggered

   The .reveal system is driven by IntersectionObserver, which is the wrong
   trigger here: the hero is in view at first paint, so this is timed off page
   load instead. It borrows .reveal's visual language (opacity + a 22px rise on
   --ease-out) so the two read as one motion vocabulary.

   The timing is set against the jaali: the screen over the hero photograph
   starts opening at 260ms and finishes around 2.16s (0.5s transition-delay +
   1.4s duration). The text begins at 1.4s and lands as the stone clears, so
   the sequence resolves as one gesture rather than two.

   Only opacity and transform animate, so nothing reflows when they resolve.
   ========================================================================== */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Gated on .js for the same reason .reveal is: with no JavaScript the jaali
   never closes, so there is no entry sequence to join and the text must
   simply be there. */
.js .hero__eyebrow,
.js .hero__title,
.js .hero__foot {
  animation: hero-rise var(--dur) var(--ease-out) both;
}

.js .hero__eyebrow { animation-delay: 1.40s; }
.js .hero__title   { animation-delay: 1.52s; }
.js .hero__foot    { animation-delay: 1.64s; }

/* A very slow settle on the hero photograph. --ease rather than --ease-out:
   --ease-out is steep enough to spend most of the movement in the first
   couple of seconds, which is visible; this stays under the threshold and
   only reads in aggregate. .hero has overflow:hidden and the image is
   object-fit:cover, so the overscale never exposes an edge. */
@keyframes hero-drift {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.js .hero__media img {
  animation: hero-drift 24s var(--ease) both;
}

/* The global reduced-motion block collapses animation-duration but not
   animation-delay — left to it, the hero text would hold its from-state
   (invisible) for 1.4s. These have to be switched off outright. */
@media (prefers-reduced-motion: reduce) {
  .js .hero__eyebrow,
  .js .hero__title,
  .js .hero__foot {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .hero__media img { animation: none; transform: none; }
}


/* ==========================================================================
   Hero departure

   Replaces the scroll-hijacked expansion. Nothing is intercepted: the page
   scrolls at its own speed and the hero simply stays where it is while the
   first section slides up over it, so the day begins by covering the night
   before rather than by scrolling it away. The hero's own text lifts and
   fades as it is covered, so it is never caught half-buried under a section
   edge.

   --hp (0..1) is hero-departure progress, written by the scroll loop that
   already runs for the header, the booking bar and the parallax.
   ========================================================================== */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
}

/* Everything after the hero rides over it. .section and .bleed are already
   positioned; they only need to win the stacking order. */
main > .section,
main > .bleed { z-index: 1; }

.foot { position: relative; z-index: 1; }

.js .hero__inner {
  opacity: calc(1 - var(--hp, 0) * 1.7);
  transform: translateY(calc(var(--hp, 0) * -40px));
}

/* The cue has done its job the moment the page moves. */
.js .hero__cue { opacity: calc(0.6 - var(--hp, 0) * 5); }

@media (prefers-reduced-motion: reduce) {
  .js .hero__inner { opacity: 1; transform: none; }
  .js .hero__cue { opacity: 0.6; }
}