/* ==========================================================================
   STRATO MELBOURNE — Homepage design pass, 25 September 2026
   Loaded last. No animation: this is hierarchy, rhythm, surface and detail.

   What the audit found at 1440px:
     · Every section heading measured exactly 38.4px. Hero 64px, then six
       identical headings — nothing signalled relative importance.
     · Six of seven sections had no background of their own, so the page ran
       6,277px in one flat navy.
     · Section padding was 88px top and bottom on every single band.
     · Section heights were 792 / 900 / 825 / 794 / 792 — a metronome — then
       the gallery at 1,305px, twice anything else.
     · The gold offset frame on the events image was the one distinctive
       detail on the page, and it appeared exactly once.
   ========================================================================== */

/* --------------------------------------------------------------------------
   H1. TYPE HIERARCHY
   Three levels instead of one, so the page has a shape when you skim it:
     hero            — the arrival
     statement       — the brand line, the biggest moment after the hero
     section titles  — the four pillars
     utility titles  — gallery and the closing CTA, deliberately quieter
   -------------------------------------------------------------------------- */
.home .statement__title {
  max-width: 22ch;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.home .statement__body .body-large {
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  color: var(--color-cream);
}

/* The four content pillars keep the h2 size but gain a tighter measure. */
.home .pillar__content .section-title,
.home .events-premium__title {
  max-width: 18ch;
  line-height: 1.12;
}

/* Utility sections step down — they close the page, they don't lead it. */
.home .gallery .section-title,
.home .finale__title {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
}

/* The hero support line was small next to a 64px headline. */
.home .hero__sub {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   H2. SURFACE RHYTHM
   Alternating bands so the eye can tell one section from the next. Each
   tinted band gets a hairline so the seam is intentional rather than a
   gradient smudge.
   -------------------------------------------------------------------------- */
.home .whatson,
.home .gallery {
  background: var(--color-navy-deep);
  border-top: 1px solid var(--color-navy-line);
}
.home .statement,
.home .pillar--restaurant {
  background: var(--color-navy);
}
.home .pillar--restaurant,
.home .pillar--bar {
  border-top: 1px solid var(--color-navy-line);
}
.home .events-premium {
  border-top: 1px solid var(--color-navy-line);
  border-bottom: 1px solid var(--color-navy-line);
}

/* --------------------------------------------------------------------------
   H3. VERTICAL RHYTHM
   Padding was identical everywhere. The pillars get a little more room to
   breathe than the list sections, which breaks the metronome.
   -------------------------------------------------------------------------- */
.home .pillar { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.home .whatson { padding-block: clamp(3rem, 1.8rem + 4vw, 5rem); }
.home .gallery { padding-block: clamp(3rem, 1.8rem + 4vw, 5rem); }

/* --------------------------------------------------------------------------
   H4. THE FRAMED IMAGE MOTIF
   The gold offset hairline behind the events image was the best detail on the
   page and it only appeared once. Repeating it on both pillars ties the page
   together — and mirroring it on the reversed pillar keeps it from reading as
   a copy-paste.
   -------------------------------------------------------------------------- */
.home .pillar__media--square { position: relative; }
.home .pillar__media--square .pillar__figure { position: relative; z-index: 1; }

.home .pillar__media--square::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  z-index: 0;
  border: 1px solid rgba(232, 163, 92, 0.4);
  border-radius: var(--radius-lg);
}
/* Mirrored on the reversed pillar so the two don't lean the same way. */
.home .pillar--reverse .pillar__media--square::before {
  inset: 1.25rem 1.25rem -1.25rem -1.25rem;
}

@media (max-width: 47.99em) {
  .home .pillar__media--square::before,
  .home .pillar--reverse .pillar__media--square::before {
    inset: 0.75rem -0.75rem -0.75rem 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   H5. SECTION HEADS
   A short gold rule above the label. One small editorial detail, repeated,
   does more for a page than any amount of movement.
   -------------------------------------------------------------------------- */
.home .eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: var(--space-xs);
  background: var(--color-gold);
  opacity: 0.8;
}
/* Centred sections centre their rule too. */
.home .statement .eyebrow::before,
.home .finale .eyebrow::before { margin-inline: auto; }
/* The hero label sits over photography and already reads — leave it alone. */
.home .hero__eyebrow::before { display: none; }

.home .section-head { align-items: end; }

/* --------------------------------------------------------------------------
   H7. GALLERY
   822px of grid inside a 1,305px section made it the heaviest block on the
   page, for the least important content. Capped, and the images get the same
   rounded treatment as every other card on the site.
   -------------------------------------------------------------------------- */
.home .gallery__grid { gap: var(--space-sm); }
.home .gallery__item {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* The hero tile was `aspect-ratio: 4/5` across two columns, which made the
   grid 813px tall — the heaviest block on the page, for the least important
   content. Fixed rows are the reliable way to control a mixed-span grid:
   letting the tiles keep their own aspect ratios means whichever tile is
   tallest decides the row, and the tall tile then stretches to match. Two
   20rem rows give a predictable ~656px band. */
@media (min-width: 48em) {
  .home .gallery__grid { grid-auto-rows: 20rem; }
  .home .gallery__item,
  .home .gallery__item--hero,
  .home .gallery__item--wide,
  .home .gallery__item:not(.gallery__item--hero):not(.gallery__item--wide) {
    aspect-ratio: auto;
  }
  .home .gallery__item img { width: 100%; height: 100%; object-fit: cover; }
}

/* --------------------------------------------------------------------------
   H8. PROOF STATS — Redesigned luxury banner
   -------------------------------------------------------------------------- */
.home .proof {
  margin-top: var(--space-2xl);
  padding: 0;
  border-top: none;
}
.home .proof__inner {
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.25rem) clamp(1.25rem, 1rem + 2vw, 3rem);
  background: linear-gradient(135deg, rgba(23, 32, 47, 0.75) 0%, rgba(11, 18, 32, 0.95) 100%);
  border: 1px solid rgba(232, 163, 92, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(244, 239, 232, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.home .proof__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 163, 92, 0.6), transparent);
}
.home .proof__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.home .proof__item {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  padding: var(--space-xs) var(--space-md);
  position: relative;
  transition: transform var(--t-fast);
}
.home .proof__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(43, 54, 74, 0.8), transparent);
}
.home .proof__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(232, 163, 92, 0.08);
  border: 1px solid rgba(232, 163, 92, 0.25);
  color: var(--color-gold);
  transition: all var(--t-fast);
}
.home .proof__item:hover .proof__icon {
  background: rgba(232, 163, 92, 0.16);
  border-color: var(--color-gold);
  transform: scale(1.06);
}
.home .proof__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.home .proof__value {
  font-family: var(--font-accent);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  font-weight: 400;
  color: var(--color-cream);
  line-height: 1.15;
}
.home .proof__label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   H9. MENU LINK (restaurant and bar pillars)
   The four PDF-style menu cards are gone; each pillar links straight to its
   menu on the Menus page instead.
   -------------------------------------------------------------------------- */
.home .pillar__menulink { margin: var(--space-md) 0 0; }

/* --------------------------------------------------------------------------
   H10. EVENTS BAND — Editorial space architecture (replaces button cards)
   -------------------------------------------------------------------------- */
.home .events-premium__spaces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(232, 163, 92, 0.25);
  border-bottom: 1px solid var(--color-navy-line);
}
.home .events-premium__space {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.home .events-premium__space:first-child {
  padding-right: var(--space-md);
  border-right: 1px solid var(--color-navy-line);
}
.home .events-premium__space-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.home .events-premium__space-tier {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.home .events-premium__space-title {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
  font-weight: 400;
  color: var(--color-cream);
  line-height: 1.2;
}
.home .events-premium__space-desc {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   H10b. OPENING HOURS — the week at a glance
   Seven columns, Monday to Sunday, under a gold rule. Each day names itself
   in the serif; its sittings sit at the foot of the column, so the evening
   times line up across the week and the weekend lunch rises above them.
   Closed days are hatched and dimmed. Today (hours.js) gets a gold cap and
   a tag. Below 64em the week becomes a list, one day per row.
   -------------------------------------------------------------------------- */
.home .visit {
  padding-block: clamp(3rem, 1.8rem + 4vw, 5.5rem);
  background: var(--color-navy);
  border-top: 1px solid var(--color-navy-line);
}

.home .visit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-xl);
}
.home .visit__where {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--color-text);
}
.home .visit__where p { margin: 0; }
.home .visit__where a:not(.link-arrow) { color: var(--color-cream); transition: color var(--t-fast); }
.home .visit__where a:not(.link-arrow):hover { color: var(--color-gold); }

.home .week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(232, 163, 92, 0.45);
  border-bottom: 1px solid var(--color-navy-line);
}
.home .week__day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 13rem;
  padding: var(--space-md) clamp(0.75rem, 0.3rem + 0.8vw, 1.35rem) var(--space-lg);
}
.home .week__day + .week__day { border-left: 1px solid var(--color-navy-line); }

.home .week__name {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-cream);
}

.home .week__sessions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: auto 0 0;
}
.home .week__sessions div { display: flex; flex-direction: column; gap: 0.2rem; }
.home .week__sessions dt {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.home .week__sessions dd {
  margin: 0;
  font-size: var(--fs-body);
  white-space: nowrap;
  color: var(--color-cream);
}

.home .week__closed {
  margin: auto 0 0;
  font-size: var(--fs-body);
  color: var(--color-muted);
}
.home .week__day--closed {
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(244, 239, 232, 0.03) 10px 11px);
}
.home .week__day--closed .week__name { color: var(--color-muted); }

/* Today */
.home .week__day.is-today {
  background: linear-gradient(to bottom, rgba(232, 163, 92, 0.1), rgba(232, 163, 92, 0) 75%);
}
.home .week__day.is-today::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-gold);
}
.home .week__today {
  position: absolute;
  top: 0;
  right: clamp(0.75rem, 0.3rem + 0.8vw, 1.35rem);
  transform: translateY(-50%);
  padding: 0.2rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy-deep);
  background: var(--color-gold);
  border-radius: var(--radius-sm);
}
.home .week__today[hidden] { display: none; }

.home .visit__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}
.home .visit__note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* Tablet and phone: one day per row — name left, sittings right. */
@media (max-width: 63.99em) {
  .home .week { grid-template-columns: 1fr; }
  .home .week__day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 var(--space-sm); /* no row gap: the Today row is empty on other days */
    min-height: 0;
    padding: var(--space-sm) var(--space-sm);
  }
  .home .week__day + .week__day { border-left: 0; border-top: 1px solid var(--color-navy-line); }
  .home .week__name { grid-column: 1; grid-row: 1; }
  .home .week__sessions,
  .home .week__closed { grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: right; }
  .home .week__sessions { gap: 0.35rem; }
  .home .week__sessions div { flex-direction: row; align-items: baseline; justify-content: flex-end; gap: var(--space-xs); }
  .home .week__day.is-today::before { top: 0; bottom: 0; right: auto; width: 3px; height: auto; }
  .home .week__today { position: static; transform: none; justify-self: start; grid-column: 1; grid-row: 2; margin-top: 0.4rem; }
}

/* --------------------------------------------------------------------------
   H11. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Tablet: the pillars stack, so the offset frame would collide with the copy
   below it. Drop it and let the image sit square. */
@media (max-width: 61.99em) {
  .home .pillar__grid { gap: var(--space-xl); }
}

/* Phone */
@media (max-width: 47.99em) {
  .home .statement__title { max-width: 18ch; }
  .home .pillar__content .section-title,
  .home .events-premium__title { max-width: none; }

  .home .events-premium__spaces {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .home .events-premium__space:first-child {
    padding-right: 0;
    padding-bottom: var(--space-md);
    border-right: none;
    border-bottom: 1px solid var(--color-navy-line);
  }

  .home .proof { margin-top: var(--space-lg); }
  .home .proof__list {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .home .proof__item {
    padding: var(--space-sm) 0;
  }
  .home .proof__item:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 54, 74, 0.8), transparent);
  }

}