/* =====================================================================
   NinetyNine Regent Street: page compositions
   Every section gets one idea. Column numbers refer to the 12-column grid (.cols);
   phones use 6 columns so offsets survive.
   ===================================================================== */

:root { --col: calc((min(100vw - 2 * var(--gutter), var(--max)) - 11 * var(--colgap)) / 12); }
@media (min-width: 768px) { .indent { display: block; padding-left: calc(var(--col) + var(--colgap)); } }

/* ---------- frames: graded renders with a soft lens edge ---------- */
.frame { position: relative; overflow: hidden; background: var(--espresso); }
.frame picture, .frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 45%, rgba(18, 6, 6, 0) 58%, rgba(18, 6, 6, 0.32) 100%); box-shadow: inset 0 0 0 1px rgba(244, 242, 233, 0.05); }
    
figcaption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--fg-faint); }


/* the grain lives on dark surfaces only, never over cream text */
.theme-dark, .theme-espresso, .theme-oxblood, .theme-oxblood-deep, .site-footer { background-image: url("../brand/grain.png"); background-size: 128px 128px; }

/* =====================================================================
   HEROES
   ===================================================================== */
.hero { position: relative; min-height: 100svh; max-height: 1000px; display: grid; align-items: end; color: var(--cream); isolation: isolate; overflow: hidden; background: var(--ink);
  --fg: var(--cream); --fg-muted: rgba(244,242,233,.86); --fg-faint: rgba(244,242,233,.66); --line: rgba(244,242,233,.18); --line-strong: rgba(244,242,233,.5); --label: var(--gold); --focus: var(--gold); }
.hero-mid { min-height: 86svh; max-height: 940px; }
.hero-short { min-height: 64svh; max-height: 760px; }
@media (max-height: 700px) { .hero { min-height: 94svh; } }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(18,6,6,.35) 0%, rgba(18,6,6,0) 18%),
  linear-gradient(0deg, #120606 0%, rgba(18,6,6,.86) 14%, rgba(18,6,6,.4) 42%, rgba(18,6,6,0) 64%),
  radial-gradient(140% 100% at 70% 35%, transparent 50%, rgba(18,6,6,.4) 100%); }
@media (max-width: 767.98px) {
  .hero-home .hero-scrim { background: linear-gradient(180deg, rgba(18,6,6,.35), transparent 18%), linear-gradient(0deg, #120606 0%, rgba(18,6,6,.92) 34%, rgba(18,6,6,.6) 52%, transparent 72%); }
}
.hero-inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: calc(var(--header-h) + 3rem) clamp(2.25rem, 4.5vw, 4.5rem); row-gap: 1.5rem; align-items: end; }
.hero-title { grid-column: 1 / -1; }
.hero-side { grid-column: 1 / -1; display: grid; gap: 1rem; align-content: end; }
.hero-side .lede { color: var(--fg-muted); }
@media (min-width: 1024px) {
  .hero-title { grid-column: 1 / 10; }
  .hero-side { grid-column: 9 / 13; }
  .hero-side.wide { grid-column: 1 / 10; }
}


/* split hero: copy beside a framed plate (book, membership) */
.hero-split { position: relative; display: grid; isolation: isolate; overflow: hidden; }
.hero-split .plate { position: relative; }
.hero-split .plate .frame { aspect-ratio: 4 / 5; max-height: 74svh; width: 100%; }
.hero-split .hero-copy { display: grid; gap: 1.25rem; align-content: center; padding: 2.5rem var(--gutter) var(--pad-s); }
.hero-split .t-xl { font-size: min(var(--fs-xl), 6.4vw); }
.hero-split .t-xl.long { font-size: min(var(--fs-xl), 6vw); }
@media (max-width: 1023.98px) { .hero-split .t-xl, .hero-split .t-xl.long { font-size: var(--fs-xl); } }
/* phones: a shorter photograph, then title, lede and the action, with the longer copy after it */
@media (max-width: 767.98px) {
  .hero-split .plate .frame { aspect-ratio: 3 / 2; max-height: 40svh; }
  .hero-split .hero-copy { padding-top: 1.75rem; gap: 1rem; }
  .hero-split .prose { display: contents; }
  .hero-split .prose > p:not(.lede) { order: 3; }
  .hero-split .stack { order: 2; margin-top: 0; }
  /* the plate is a short strip here: each photo can set its own phone framing */
  .hero-split .plate img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
}
/* small tablets: a landscape plate so the title and the action share the first screen */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-split .plate .frame { aspect-ratio: 16 / 9; max-height: 46svh; }
  .hero-split .hero-copy { padding-top: 2.5rem; }
}
@media (min-width: 1024px) {
  .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; max-height: 1000px; }
  .hero-split .plate { order: 2; }
  /* the photograph fills the plate exactly, so its framing (--pos) holds at every desktop size */
  .hero-split .plate .frame { position: absolute; inset: 0; height: auto; aspect-ratio: auto; max-height: none; }
  .hero-split .hero-copy { padding: calc(var(--header-h) + 3rem) clamp(2.5rem, 5vw, 5rem) var(--pad-s) max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}
.hero-split .stack { display: grid; gap: 1rem; justify-items: start; margin-top: 0.5rem; }

.sub-routes { font-size: var(--fs-small); color: var(--fg-muted); }
.sub-routes a { text-decoration: underline; text-underline-offset: 0.2em; display: inline-block; padding-block: 0.625rem; margin-block: -0.625rem; }

/* =====================================================================
   HOME
   ===================================================================== */
/* Club Room: full bleed, the title straddles the photograph's bottom edge */
.room-club .frame { aspect-ratio: 4 / 5; --pos: 58% 50%; }
@media (min-width: 640px) { .room-club .frame { aspect-ratio: 16 / 9; --pos: 55% 50%; } }
.room-club .frame { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.room-club .frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(18, 6, 6, 0.78), rgba(18, 6, 6, 0) 30%); }
.straddle { position: relative; z-index: 3; margin-top: -0.52em; }

/* Vinyl Room: a narrow, enclosed portrait */
.room-vinyl { margin-top: clamp(6rem, 3rem + 8vw, 10rem); row-gap: 2rem; align-items: center; }
.room-vinyl .copy { display: grid; gap: 1.25rem; align-content: center; }
.room-vinyl .copy .t-xl { max-width: 8ch; }
/* the two room titles are the links on to the club page */
@media (hover: hover) { .rooms h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.1em; } }
.room-vinyl .img { grid-column: 2 / -1; }
.room-vinyl .frame { aspect-ratio: 4 / 5; --pos: 26% 60%; }
@media (min-width: 768px) {
  .room-vinyl .copy { grid-column: 1 / 6; grid-row: 1; }
  .room-vinyl .img { grid-column: 7 / 13; grid-row: 1; }
}
.rooms { padding-top: var(--pad-s); padding-bottom: calc(var(--pad-m) + 12vh); }

/* story: the staircase straddles the section boundary */
.story { position: relative; z-index: 1; padding-bottom: var(--pad-m); }
.story .cols { row-gap: 1.5rem; }
.story-img { grid-column: 1 / 6; margin-top: -4rem; }
.story-img .frame { aspect-ratio: 4 / 5; --pos: 50% 30%; }
.story-copy { display: grid; gap: 1.25rem; align-content: end; margin-top: 1rem; }
@media (min-width: 768px) {
  .story-img { grid-column: 1 / 8; margin-top: -12vh; grid-row: 1; }
  .story-copy { grid-column: 8 / 13; grid-row: 1; margin-top: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .story-copy { padding-top: clamp(2rem, 4vw, 3rem); }
}
@media (min-width: 1024px) {
  .story-img { grid-column: 1 / 7; margin-top: -22vh; }
  .story-copy { grid-column: 8 / 13; }
}



/* close: the door, then three ways in */
.close .cols { row-gap: 3rem; align-items: center; }
.close-door { grid-column: 1 / 6; }
.close-door .frame { aspect-ratio: 4 / 5; }
.ways { display: grid; gap: 3rem; }
.way { display: grid; gap: 0.6rem; justify-items: start; }
@media (min-width: 768px) { .close-door { grid-column: 1 / 6; } .ways { grid-column: 7 / 13; } }

/* =====================================================================
   CLUB
   ===================================================================== */
.year { display: block; color: var(--oxblood); margin-left: -0.04em; padding-top: 0.12em; }
.story-row { margin-top: clamp(2rem, 4vw, 3.5rem); row-gap: 2rem; }
.story-text { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.62; max-width: 34em; }
.story-text p + p { margin-top: 1.1em; }
.story-text .first { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.45; }
@media (min-width: 768px) { .story-text { grid-column: 6 / 12; } }

/* club room with the title inside the photograph */
.room-frame { position: relative; }
.room-frame .frame { aspect-ratio: 4 / 5; --pos: 58% 50%; }
@media (min-width: 640px) { .room-frame .frame { aspect-ratio: 16 / 9; } }
.room-frame .frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(18, 6, 6, 0.74), rgba(18, 6, 6, 0) 42%); }
.in-frame-title { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); bottom: clamp(1.5rem, 3.4vw, 3rem); color: var(--cream); }
.room-text { margin-top: clamp(2.5rem, 4vw, 4rem); row-gap: 1.5rem; }
.room-text .lede { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); max-width: 26ch; }
@media (min-width: 768px) { .room-text .lede { grid-column: 1 / 6; } }

.after-spec { margin-top: 2.5rem; }
.pair { margin-top: var(--pad-s); row-gap: 2rem; align-items: start; }
.pair .a .frame { aspect-ratio: 3 / 2; }
.pair .b .frame { aspect-ratio: 4 / 5; }
.pair .b { grid-column: 2 / -1; }
@media (min-width: 768px) { .pair .a { grid-column: 1 / 8; } .pair .b { grid-column: 9 / 13; margin-top: 6rem; } }

/* vinyl room: enclosed and centred */
.vinyl-head { text-align: center; position: relative; z-index: 3; }
.vinyl-head .t-xl { margin-top: 0.75rem; margin-bottom: -0.2em; position: relative; z-index: 3; }
.vinyl-img { position: relative; z-index: 1; }
.vinyl-img .frame { aspect-ratio: 4 / 5; --pos: 50% 55%; }
@media (min-width: 640px) { .vinyl-img .frame { aspect-ratio: 3 / 2; } }
@media (min-width: 768px) { .vinyl-img { grid-column: 3 / 11; } .vinyl-text { grid-column: 4 / 10; } }
.vinyl-text { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; gap: 1.25rem; }
.vinyl-text .lede { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); text-align: center; max-width: none; justify-self: center; max-width: 30ch; }
/* the record turns beneath the Vinyl Room copy */
.vinyl-text .record { justify-self: center; width: min(14rem, 52vw); margin-top: 0.5rem; }
#vinyl-room .after-spec { justify-content: center; }

/* galleries: square sleeves that slide, with glass controls */
.gallery { position: relative; margin-top: var(--pad-s); }
.strip { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline-offset: -3px; }
.strip > figure { position: relative; flex: 0 0 min(72vw, 26rem); scroll-snap-align: start; scroll-snap-stop: always; }
.strip img { -webkit-user-drag: none; user-select: none; }
.strip .frame { aspect-ratio: 1; }
.gallery-ui { display: flex; align-items: center; gap: 1rem; width: min(100% - 2 * var(--gutter), var(--max)); margin: 1.25rem auto 0; }
.gallery-progress { position: relative; flex: 0 0 7.5rem; height: 1px; background: var(--line-strong); overflow: hidden; }
.gallery-progress i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0.2); }
.gallery-btn { display: none; width: 3rem; height: 3rem; border-radius: 50%; place-items: center; color: var(--cream); background: rgba(28, 8, 7, 0.72); border: 1px solid rgba(244, 242, 233, 0.24);
  transition: background-color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease; }
.gallery-btn svg { width: 1rem; height: 1rem; }
.gallery-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .gallery-btn { display: inline-grid; }
  .gallery-btn:not([aria-disabled="true"]):hover { background: rgba(244, 242, 233, 0.12); border-color: rgba(244, 242, 233, 0.44); }
  .strip { cursor: grab; }
  .strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .strip.is-dragging * { pointer-events: none; user-select: none; }
}
.gallery-ui .spacer { flex: 1; }

/* a drawn record: fine grooves, two track gaps, a fixed warm sheen and an oxblood label with the 99 */
.record { position: relative; width: min(18rem, 62vw); aspect-ratio: 1; border-radius: 50%; margin-top: 1rem;
  background:
    radial-gradient(circle, transparent 0 33.6%, rgba(255, 236, 214, 0.06) 34%, transparent 35.2%),
    radial-gradient(circle, transparent 0 57%, rgba(255, 236, 214, 0.045) 57.6%, transparent 58.6%),
    radial-gradient(circle, transparent 0 78%, rgba(255, 236, 214, 0.045) 78.6%, transparent 79.6%),
    radial-gradient(circle, transparent 0 97.2%, rgba(255, 236, 214, 0.12) 97.8%, transparent 99%),
    repeating-radial-gradient(circle, #15100e 0 1.2px, #080505 1.2px 2.6px);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(244, 242, 233, 0.06); }
.record::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 18deg, transparent 0deg, rgba(255, 214, 170, 0.13) 22deg, transparent 54deg, transparent 182deg, rgba(255, 214, 170, 0.08) 204deg, transparent 236deg); }
.record-label { position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center; color: rgba(244, 242, 233, 0.92);
  background: radial-gradient(circle at 50% 38%, #7c0a0c 0%, #5b0406 62%, #430406 100%); box-shadow: inset 0 0 0 1px rgba(244, 242, 233, 0.1), inset 0 0 0 6px rgba(18, 6, 6, 0.18); }
.record-label svg { width: 30%; height: auto; transform: translateY(-66%); }
.record-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: #080505; box-shadow: 0 0 0 1px rgba(244, 242, 233, 0.12); }

/* design: a sample card */
.design .cols { row-gap: 1.5rem; align-items: end; }
@media (min-width: 768px) { .design .h2 { grid-column: 1 / 7; } }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: clamp(2.5rem, 4vw, 4rem); }
.swatches .frame { aspect-ratio: 1; }
.swatches figcaption { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.4; color: var(--fg-muted); padding-right: 0.5rem; }
@media (max-width: 767.98px) { .swatches { row-gap: 1.5rem; } }
@media (min-width: 768px) { .swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sit { margin-top: clamp(2.5rem, 4vw, 4rem); row-gap: 3rem; align-items: start; }
.sit article { display: grid; gap: 0.75rem; justify-items: start; align-content: start; }
.sit article .frame { margin-bottom: 0.75rem; }
.sit .a .frame { aspect-ratio: 3 / 2; width: 100%; }
.sit .b .frame { aspect-ratio: 4 / 5; width: 100%; }
.sit .b { grid-column: 2 / -1; }
.sit p { color: var(--fg-muted); max-width: 36ch; }
@media (min-width: 768px) { .sit .a { grid-column: 1 / 8; } .sit .b { grid-column: 9 / 13; margin-top: 6rem; } }

/* three spaces as tall panels that open on hover */
.panels { display: grid; gap: 2.5rem 0.5rem; margin-top: clamp(2.5rem, 4vw, 4rem); }
.panel { position: relative; display: grid; align-content: start; }
.panel .frame { aspect-ratio: 4 / 5; }
.panel-inner { display: grid; gap: 0.85rem; padding-top: 1.25rem; }
.panel-detail { display: grid; gap: 0.6rem; justify-items: start; }
.panel-detail p { color: var(--fg-muted); max-width: 40ch; }
@media (min-width: 640px) and (max-width: 1023.98px) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (hover: hover) {
  .panels { display: flex; gap: 0.5rem; height: min(72svh, 760px); }
  .panel { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--cream); transition: flex-grow 0.8s var(--ease); }
  .panel .frame { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  .panel .frame img { object-position: var(--pos-d, var(--pos, 50% 50%)); }
  .panel .frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(18, 6, 6, 0.88), rgba(18, 6, 6, 0) 58%); }
  .panel-inner { position: absolute; z-index: 2; left: 1.75rem; right: 1.75rem; bottom: 1.75rem; padding-top: 0; }
  .panel-detail { max-height: 0; opacity: 0; overflow: hidden; padding: 0.375rem; margin: -0.375rem; transition: max-height 0.8s var(--ease), opacity 0.5s ease 0.1s; }
  .panel-detail p { color: rgba(244, 242, 233, 0.84); }
  .panel:hover, .panel:focus-within { flex-grow: 1.7; }
  .panel:hover .panel-detail, .panel:focus-within .panel-detail { max-height: 16rem; opacity: 1; }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: reduce) { .panel, .panel-detail { transition: none; } }


/* =====================================================================
   FORMS, INFORMATION, CONTACT
   ===================================================================== */
.form-layout { row-gap: 2.5rem; }
.form-aside { display: grid; gap: 1rem; align-content: start; }
.form-aside p { color: var(--fg-muted); max-width: 34ch; }
.form-aside p a { text-decoration: underline; text-underline-offset: 0.2em; display: inline-block; padding-block: 0.875rem; margin-block: -0.875rem; }
@media (min-width: 1024px) {
  .form-aside { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  .form-layout .form { grid-column: 6 / 13; }
}
@media (min-width: 1024px) and (max-height: 760px) { .form-aside { position: static; } }

.run-block { row-gap: 1.5rem; }
@media (min-width: 768px) { .run-block .run { grid-column: 1 / 12; } }

.policy-layout { row-gap: 2.5rem; }
.anchor-row { display: flow-root; background: var(--bg); border-bottom: 1px solid var(--line); }
/* the row scrolls sideways, so give focus rings room inside it */
.anchor-row ul { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; padding: 6px; margin: -6px; scroll-padding-inline: 6px; }
/* on phones the row fades out at its right edge, so it reads as a strip that scrolls rather than a cut word */
@media (max-width: 1023.98px) { .anchor-row ul { margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: 2.5rem; scroll-padding-left: var(--gutter);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 2.75rem), transparent); } }
@media (hover: hover) { .anchor-row a:hover { color: var(--fg); border-bottom-color: currentColor; } }
@media (max-width: 1023.98px) {
  .policy-side { position: sticky; top: var(--header-h); z-index: 30; background: var(--bg); }
  /* keyboard focus moving up the page stops below the pinned row, not underneath it */
  html:has(.policy-side) { scroll-padding-top: calc(var(--header-h) + 4.25rem); }
}
.anchor-row ul::-webkit-scrollbar { display: none; }
.anchor-row a { display: inline-block; white-space: nowrap; font-size: 0.9375rem; color: var(--fg-faint); padding: 0.8rem 0; border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; }
.anchor-row a[aria-current] { color: var(--fg); border-bottom-color: currentColor; }
@media (min-width: 1024px) {
  .policy-side { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  .policy-main { grid-column: 5 / 12; }
  .anchor-row { position: static; border: 0; background: none; }
  .anchor-row ul { flex-direction: column; gap: 0.25rem; overflow: visible; }
  .anchor-row a { padding: 0.45rem 0; border-bottom: 0; }
}
.policy { display: grid; gap: 0.85rem; padding-block: clamp(2rem, 3vw, 2.75rem); scroll-margin-top: calc(var(--header-h) + 4rem); }
.policy:first-child { padding-top: 0; }
.policy + .policy { border-top: 1px solid var(--line); }
.policy h2, .policy h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); letter-spacing: -0.01em; }
.policy p { max-width: 60ch; }

.contact-grid { margin-top: clamp(2.5rem, 4vw, 3.5rem); row-gap: 3rem; }
.contact-card { display: grid; gap: 0.85rem; align-content: start; justify-items: start; }
.contact-card .big { font-family: var(--sans-display); font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.003em; word-spacing: 0.06em; display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.contact-card a.big:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.contact-card p { color: var(--fg-muted); max-width: 38ch; }
@media (min-width: 768px) { .contact-grid .contact-card:first-child { grid-column: 1 / 6; } .contact-grid .contact-card:last-child { grid-column: 7 / 13; } }
.findus { margin-top: var(--pad-s); row-gap: 2rem; align-items: end; }
.findus .addr { font-family: var(--sans-display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.003em; word-spacing: 0.06em; }
.findus .copy { display: grid; gap: 1.25rem; justify-items: start; }
.findus figure { grid-column: 2 / -1; }
.findus .frame { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .findus .copy { grid-column: 1 / 6; } .findus figure { grid-column: 8 / 13; } }

/* =====================================================================
   WHATSAPP BUTTON: a round booking button in the corner of every screen (the client's request)
   ===================================================================== */
.sticky-cta { position: fixed; z-index: 35; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: none; opacity: 1; visibility: visible; transition: transform 0.5s var(--ease-out), opacity 0.35s ease, visibility 0s; }
@media (min-width: 1024px) { .sticky-cta { right: 1.75rem; bottom: 1.75rem; } }
.wa-fab { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: var(--ink); -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #faf8f2 0%, #ece7d9 100%); border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 32px -12px rgba(0, 0, 0, 0.6); transition: transform 0.35s var(--ease-out), color 0.3s ease, background-color 0.3s ease; }
.wa-fab svg { width: 1.625rem; height: 1.625rem; }
@media (hover: hover) { .wa-fab:hover { transform: translateY(-2px); } }
.wa-fab:active { transform: scale(0.94); }
/* a link brought into view by the keyboard never lands under the button */
html.show-sticky:not(.at-footer):not(.at-form) { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
html.show-sticky:not(.hub-past):has(> body.page-index) { scroll-padding-bottom: 0; }
/* over cream it turns to ink lacquer, so it never melts into the page */
.sticky-cta.on-light .wa-fab { color: var(--cream); background: linear-gradient(180deg, #2b1311, #120606); border-color: #120606; box-shadow: inset 0 1px 0 rgba(255, 214, 170, 0.14), 0 14px 30px -14px rgba(18, 6, 6, 0.6); }
/* it steps aside with the menu open, over forms (never on a field) and at the footer, which has its own WhatsApp link */
html:not(.show-sticky) .sticky-cta, .menu-open .sticky-cta, .form-focus .sticky-cta, .at-footer .sticky-cta, .at-form .sticky-cta, .dock-clear .sticky-cta {
  transform: translate3d(0, 1rem, 0) scale(0.6); opacity: 0; visibility: hidden; transition: transform 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s; }

/* =====================================================================
   LANDSCAPE: phones, and tablets below 1024px held sideways
   ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1199.98px), (orientation: landscape) and (max-width: 1023.98px) {
  
  
  
  /* split heroes: copy and photograph side by side, the action before the longer copy */
  .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
  .hero-split .plate { order: 2; }
  .hero-split .plate .frame { position: absolute; inset: 0; height: auto; aspect-ratio: auto; max-height: none; }
  .hero-split .hero-copy { padding: calc(var(--header-h) + 1rem) var(--gutter) 1.5rem; gap: 0.85rem; }
  .hero-split .t-xl, .hero-split .t-xl.long { font-size: clamp(2.25rem, 1.5rem + 7svh, 4rem); }
  .hero-split .prose { display: contents; }
  .hero-split .prose > p:not(.lede) { order: 3; }
  .hero-split .stack { order: 2; margin-top: 0; }
}
/* landscape phones only: a slimmer header, no dock, and the booking action inside the first screen */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1199.98px) {
  :root { --header-h: 3.5rem; }
  .hero-split .stack { gap: 0.6rem; }
  .hero-split .stack .small { display: none; }
  .hero-split .btn-number { min-height: 3.25rem; }
}

/* =====================================================================
   HOME HUB: at every size the first screen is the front door from Alin's mockups: the lockup over the sun
   photograph, the five ways in between crimson rules, the address and Instagram at the foot. Portrait screens stack
   it (phone mockup), landscape screens set the ways in as one row (desktop mockup), landscape phones put the
   lockup and the ways in side by side. The sun fills 20.7% to 43.4% of the photograph's height, and every
   layout keeps type off the disc.
   ===================================================================== */
.hero-home { align-items: stretch; max-height: none; --hub-rule: var(--crimson); }
.hub { display: grid; justify-items: center; text-align: center; min-height: 100svh; color: var(--cream); }
.hub-brand { display: grid; justify-items: center; gap: 0.85rem; filter: drop-shadow(0 1px 14px rgba(18, 6, 6, 0.45)); }
.hub-brand .mark-99 { height: auto; }
.hub-word { display: grid; justify-items: center; gap: 0.6rem; }
.hub-word svg { width: var(--w); height: auto; }
.hub-word .brand-sub { font-size: calc(var(--w) / 18.5); letter-spacing: 0.3em; margin-right: -0.3em; }
.hub-nav { width: 100%; }
.hub-nav a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; color: var(--cream); text-transform: uppercase; -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 2px rgba(18, 6, 6, 0.5), 0 2px 22px rgba(18, 6, 6, 0.7); transition: opacity 0.25s ease; }
.hub-nav a:active { opacity: 0.55; transition-duration: 0s; }
.hub-nav a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.hub-foot { font-family: var(--sans); font-weight: 500; line-height: 1.3; text-transform: uppercase; white-space: nowrap; color: rgba(244, 242, 233, 0.86); }
.hub-foot a { display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; }
/* Instagram takes the slot after the address: a small glyph with a full-size target that adds no height */
.hub-foot .hub-ig { display: inline-grid; place-items: center; padding: 0.8125rem; margin: -0.8125rem; filter: drop-shadow(0 1px 6px rgba(18, 6, 6, 0.55)); }
.hub-ig .ico { width: max(1.125rem, 1.5em); height: max(1.125rem, 1.5em); }
.hub-ig:active { opacity: 0.55; }
.hub-ig:focus-visible { outline: 1px solid currentColor; outline-offset: -0.375rem; }
/* without JavaScript nothing brings the bar back over the hub, and the hub and footer carry every link */
html:not(.js) body.page-index .site-header { display: none; }
/* the bar and the corner button step aside while the hub's own lockup is on screen, and return as it scrolls away */
html.js:not(.hub-past) body.page-index .sticky-cta { transform: translate3d(0, 1rem, 0) scale(0.6); opacity: 0; visibility: hidden; transition: transform 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s; }
html.js:not(.hub-past):not(.menu-open) body.page-index .site-header { opacity: 0; visibility: hidden; translate: 0 -0.75rem; transition: opacity 0.2s ease, translate 0.3s ease, visibility 0s linear 0.3s; }
html.js.hub-past:not(.menu-open):not(.menu-closing) body.page-index .site-header { transition: color 0s linear 0.12s, opacity 0.5s ease, translate 0.6s var(--ease-out), visibility 0s; }

/* portrait (phones and tablets): the phone mockup. The photograph covers by height, so the sun sits at fixed svh */
@media (orientation: portrait) {
  .hero-home .hero-scrim { background:
    linear-gradient(180deg, rgba(18,6,6,.5) 0%, rgba(18,6,6,.12) 24%, rgba(18,6,6,.08) 38%, rgba(18,6,6,.42) 58%, rgba(18,6,6,.5) 78%, rgba(18,6,6,.88) 100%); }
  .hub { grid-template-rows: 20.5svh 25svh auto 1fr auto;
    padding: env(safe-area-inset-top) var(--gutter) calc(env(safe-area-inset-bottom) + clamp(1.25rem, 3.2svh, 2rem)); }
  .hub-brand { grid-row: 1; align-self: center; --w: clamp(9.25rem, 37vw, 17rem); }
  .hub-brand .mark-99 { width: clamp(2.375rem, 9.6vw, 4.5rem); }
  .hub-nav { grid-row: 3; }
  .hub-nav li { display: grid; justify-items: center; }
  .hub-nav li + li::before { content: ""; display: block; width: clamp(3.25rem, 8vw, 4.5rem); height: 1px; background: var(--hub-rule); margin-block: clamp(0.15rem, 0.6svh, 0.5rem); }
  .hub-nav a { padding: clamp(0.4rem, 1.2svh, 0.85rem) 0.75rem; font-family: var(--serif-deck); font-weight: 400; font-size: clamp(0.9375rem, 4.1vw, 1.625rem);
    line-height: 1.05; letter-spacing: 0.07em; text-wrap: balance; }
  .hub-foot { grid-row: 5; display: grid; justify-items: center; gap: 0.65rem; font-size: clamp(0.5625rem, 2.4vw, 0.8125rem); letter-spacing: 0.22em; }
  .hub-foot span { margin-right: -0.22em; }
  .hub-foot i { display: block; width: 1.5rem; height: 1px; background: var(--hub-rule); }
}
/* short phones (iPhone SE in Safari, 547px): a tighter hub that still keeps the sun clear */
@media (orientation: portrait) and (max-width: 767.98px) and (max-height: 600px) {
  .hub { grid-template-rows: 22svh 22svh auto 1fr auto; padding-bottom: calc(env(safe-area-inset-bottom) + 0.875rem); }
  .hub-brand .mark-99 { width: 2.125rem; }
  .hub-nav a { min-height: 2.5rem; padding-block: 0.2rem; }
  .hub-nav li + li::before { margin-block: 0.125rem; }
  .hub-foot { gap: 0.5rem; }
}

/* landscape (tablets and desktops): the desktop mockup. The photograph covers by width from its top edge on wide
   screens and by height on squarer ones, so the sun's band is the larger of the two measures */
@media (orientation: landscape) {
  .hero-home { --sun-top: max(13.8vw, 20.7svh); --sun-bot: max(28.9vw, 43.4svh); }
  .hero-home .hero-scrim { background:
    radial-gradient(calc(var(--sun-top) * 1.6) calc(var(--sun-top) * 0.55) at 50% calc(var(--sun-top) * 0.5), rgba(18,6,6,.5), rgba(18,6,6,0)),
    linear-gradient(180deg, rgba(18,6,6,.55) 0%, rgba(18,6,6,.15) 18%, rgba(18,6,6,0) 40%, rgba(18,6,6,.3) 58%, rgba(18,6,6,.6) 82%, rgba(18,6,6,.88) 100%); }
  .hub { grid-template-rows: var(--sun-top) calc(var(--sun-bot) - var(--sun-top)) 1.3fr auto 1fr auto; padding: 0 var(--gutter) clamp(1.25rem, 3svh, 2.25rem); }
  .hub-brand { grid-row: 1; align-self: center; gap: 0.65rem; --w: calc(var(--sun-top) * 1.15); }
  .hub-brand .mark-99 { width: calc(var(--sun-top) * 0.36); }
  .hub-nav { grid-row: 4; }
  .hub-nav ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 0.25rem; }
  .hub-nav li { display: flex; align-items: center; }
  .hub-nav li + li::before { content: ""; width: 1px; height: clamp(1.5rem, 1.1vw, 2.25rem); margin-inline: clamp(0.9rem, 2.1vw, 3.5rem); background: var(--hub-rule); }
  .hub-nav a { padding: 0.75rem 0; margin-right: -0.24em; font-family: var(--sans); font-weight: 400; font-size: clamp(0.75rem, 0.3rem + 0.65vw, 1.375rem); letter-spacing: 0.24em; }
  .hub-foot { grid-row: 6; display: flex; align-items: center; gap: 0.9rem; font-weight: 400; font-size: clamp(0.625rem, 0.25rem + 0.52vw, 1.125rem); letter-spacing: 0.24em; }
  .hub-foot span { margin-right: -0.24em; }
  .hub-foot i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }
}
/* wide, short windows: the photo slides up a little so the sun, the row and the address all fit the first screen */
@media (orientation: landscape) and (min-aspect-ratio: 5/2) {
  .hero-home .hero-media img { object-position: 50% 18%; }
  .hero-home { --sun-top: calc(13.8vw - (66.667vw - 100svh) * 0.18); --sun-bot: calc(28.9vw - (66.667vw - 100svh) * 0.18); }
}
/* portrait tablets: the scrim deepens just under the sun, so the stacked rules hold over the DJ booth */
@media (orientation: portrait) and (min-width: 768px) {
  .hero-home .hero-scrim { background: linear-gradient(180deg, rgba(18,6,6,.5) 0%, rgba(18,6,6,.12) 24%, rgba(18,6,6,.08) 44%, rgba(18,6,6,.58) 54%, rgba(18,6,6,.62) 78%, rgba(18,6,6,.88) 100%); }
}
/* narrower landscape screens (tablets, small laptops): tighter tracking and rules so the five ways in stay on one row */
@media (orientation: landscape) and (max-width: 1279.98px) {
  .hub-nav a { letter-spacing: 0.18em; margin-right: -0.18em; }
  .hub-nav li + li::before { margin-inline: clamp(0.75rem, 1.4vw, 1.25rem); }
}
/* landscape phones: the lockup and the address on the left, the ways in on the right */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .hero-home .hero-scrim { background: linear-gradient(90deg, rgba(18,6,6,.35), rgba(18,6,6,.1) 45%, rgba(18,6,6,.45)), linear-gradient(0deg, rgba(18,6,6,.6), rgba(18,6,6,0) 40%); }
  .hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto 1fr; align-items: center; column-gap: 2rem;
    padding: calc(env(safe-area-inset-top) + 1rem) max(var(--gutter), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 1rem) max(var(--gutter), env(safe-area-inset-left)); }
  .hub-brand { grid-column: 1; grid-row: 1 / 3; align-self: center; gap: 0.85rem; --w: 9.25rem; }
  .hub-brand .mark-99 { width: 2.375rem; }
  .hub-foot { grid-column: 1; grid-row: 3; align-self: end; display: grid; justify-items: center; gap: 0.65rem; font-size: 0.5625rem; letter-spacing: 0.22em; }
  .hub-foot i { width: 1.5rem; height: 1px; border-radius: 0; background: var(--hub-rule); opacity: 1; }
  .hub-nav { grid-column: 2; grid-row: 1 / 4; }
  .hub-nav ul { display: block; }
  .hub-nav li { display: grid; justify-items: center; }
  .hub-nav li + li::before { width: 3.25rem; height: 1px; margin: 0.1rem 0; }
  .hub-nav a { padding: 0.15rem 0.75rem; margin-right: 0; font-family: var(--serif-deck); font-weight: 400; font-size: 1.0625rem; line-height: 1.05; letter-spacing: 0.07em; }
}

/* =====================================================================
   MENUS & FLOOR PLANS: two documents, then the dish that is not on either
   ===================================================================== */
/* the two documents run the full width of the copy column, one rule above each and one below the last */
.hero-split .docs { display: grid; justify-items: stretch; gap: 0; width: 100%; max-width: 32rem; margin-top: 0.5rem; }
.docs li { border-top: 1px solid var(--line-strong); }
.docs li:last-child { border-bottom: 1px solid var(--line-strong); }
.docs a { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; padding-block: 0.75rem;
  font-family: var(--sans-display); font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.003em; -webkit-tap-highlight-color: transparent; }
.docs .doc-name { display: inline-flex; align-items: center; gap: 0.8rem; }
.docs .doc-name .ico { width: 1.5rem; height: 1.5rem; color: var(--amber); }
.docs .doc-type { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-weight: 500; font-size: 0.875rem; color: var(--fg-muted); }
.docs .doc-type svg { width: 0.875rem; height: 0.875rem; transition: transform 0.45s var(--ease-out); }
/* a long name wraps; the PDF tag and its arrow keep their size */
.docs .doc-type, .docs .doc-type svg { flex: none; }
@media (hover: hover) { .docs a:hover .doc-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .docs a:hover svg { transform: translateY(3px); } }
.docs a:active { opacity: 0.6; }

/* =====================================================================
   PRIVACY: the gist in three lines, then one topic per row, each opening on tap (one at a time)
   ===================================================================== */
.privacy { padding-block: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem)) var(--pad-m); }
.privacy-layout { row-gap: clamp(2.5rem, 5vw, 3.5rem); }
.privacy-head .lede { margin-top: 1.25rem; color: var(--fg-muted); }
.pv-short { display: grid; gap: 0.85rem; margin-top: 2rem; max-width: 30rem; }
.pv-short li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.pv-short .ico { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--crimson); }
.pv-updated { margin-top: 2rem; font-size: 0.875rem; color: var(--fg-faint); max-width: 30rem; }
.pv-list { border-top: 1px solid var(--line); align-self: start; }
.pv { border-bottom: 1px solid var(--line); }
.pv summary { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem; gap: 1.25rem; align-items: center; min-height: 2.75rem; padding-block: 1.1rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.pv summary::-webkit-details-marker { display: none; }
.pv summary::marker { content: ""; }
.pv summary h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); letter-spacing: -0.01em; line-height: 1.25; }
.pv summary .policy-ico { grid-row: auto; }
.pv summary .ico-chevron { width: 1.25rem; height: 1.25rem; color: var(--fg-muted); transition: transform 0.4s var(--ease-out); }
.pv[open] summary .ico-chevron { transform: rotate(180deg); }
.pv summary:active { opacity: 0.6; }
@media (hover: hover) { .pv summary:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } }
.pv-body { display: grid; gap: 0.9rem; padding: 0 0 1.75rem calc(2.75rem + 1.25rem); max-width: calc(62ch + 4rem); color: var(--fg-muted); }
.pv-body b { font-weight: 500; color: var(--fg); }
.pv-body ul { display: grid; gap: 0.65rem; }
.pv-body li { position: relative; padding-left: 1.1rem; }
.pv-body li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--crimson); }
@media (max-width: 479.98px) { .pv-body { padding-left: 0; } }
@media (min-width: 1024px) {
  .privacy-head { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  .privacy-layout .pv-list { grid-column: 6 / 13; }
}

/* =====================================================================
   GUEST LIST & ENTRY: the house rules beside their title
   ===================================================================== */
.entry-layout { row-gap: 2rem; }
@media (min-width: 1024px) {
  .entry-title { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  .entry-layout .policy-main { grid-column: 5 / 12; }
}
/* guest list: the plate is the stairwell's bright skylight, so the bar's type gets a soft shade over it */
.page-guest-list .hero-split .plate .frame::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--header-h) + 3rem); z-index: 1; pointer-events: none; opacity: 1; background: linear-gradient(180deg, rgba(18, 6, 6, 0.6), rgba(18, 6, 6, 0)); }

/* private hire: the client's introduction under the title, with the enquiry and the brochure */
.hire-intro { padding-block: var(--pad-s); }
.hire-copy { display: grid; gap: 1.25rem; max-width: 46rem; }
.hire-copy .lede { max-width: none; }
.hire-copy p:not(.lede) { color: var(--fg-muted); max-width: 52ch; }
.hire-copy .btn-row { margin-top: 0.5rem; }
.hire-copy .btn svg { width: 0.875rem; height: 0.875rem; }

/* =====================================================================
   ABOUT US: the client's story, set like their mockup, the arch photograph fading into deep red
   ===================================================================== */
.about-hero .hero-scrim { background: linear-gradient(180deg, rgba(18,6,6,.35) 0%, rgba(18,6,6,0) 20%), linear-gradient(0deg, #120606 0%, rgba(18,6,6,.82) 18%, rgba(18,6,6,.25) 50%, rgba(18,6,6,0) 70%); }
.about-story { padding-block: clamp(0.5rem, 2vw, 2rem) var(--pad-m); background: linear-gradient(180deg, #120606 0%, #1c0706 40%, #2a0908 100%); }
.caps-title { font-family: var(--serif); font-weight: 300; font-size: min(calc(6.5vw - 0.15rem), clamp(1.625rem, 1.05rem + 2.7vw, 3.75rem)); line-height: 1.04; letter-spacing: 0.005em; text-transform: uppercase; text-wrap: balance; max-width: 26ch; }
.story-intro { display: grid; gap: 1rem; }
.story-intro .lede { max-width: none; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); text-wrap: balance; }
/* phones keep the mockup's two columns: the period on the left, its story on the right */
@media (max-width: 479.98px) {
  /* the caps headline leads, in the mockup's two lines; the statements below it sit a step smaller */
  .caps-title { line-height: 1; }
  .close-line { font-size: 1.5rem; }
  .close-line span { font-size: 0.72em; }
}
/* phones: the arch photograph shown whole, so the headline starts on the first screen as in the mockup */
@media (max-width: 767.98px) and (orientation: portrait) { .hero.about-hero { min-height: min(150vw, 74svh); } }

.about-close { padding-block: var(--pad-m) clamp(2.5rem, 5vw, 4rem); text-align: center; color: var(--cream); border-top: 1px solid rgba(142, 21, 38, 0.45);
  background: radial-gradient(120% 90% at 50% 0%, #5a0d0e 0%, #3d0608 55%, #2a0908 100%);
  --fg: var(--cream); --fg-muted: rgba(244,242,233,.82); --focus: var(--cream); }
.close-line { font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.close-line span { display: block; margin-top: 0.3rem; font-size: 0.66em; color: var(--fg-muted); }
.close-foot { display: grid; justify-items: center; gap: 0.9rem; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-top: clamp(1.5rem, 3vw, 2rem); width: min(100%, 44rem); border-top: 1px solid rgba(244, 242, 233, 0.16); }
.close-addr, .close-links a { font-family: var(--sans); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.close-addr { color: var(--fg-muted); display: inline-flex; align-items: center; gap: 0.6rem; padding-block: 0.6rem; margin-block: -0.6rem; }
.close-links { display: flex; align-items: center; gap: 1.25rem; }
.close-links a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
.about-close .ico { width: 1.25rem; height: 1.25rem; color: var(--amber); }
.close-links i { width: 1px; height: 1rem; background: rgba(244, 242, 233, 0.55); }
@media (hover: hover) { .close-addr:hover, .close-links a:hover { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; } }

/* private hire on desktops: a shorter hero so the client's introduction and its two actions share the first screen */
@media (min-width: 1024px) and (orientation: landscape) {
  .page-private-hire .hero-mid { min-height: 64svh; max-height: 760px; }
  .hire-copy { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colgap); align-items: start; }
  .hire-copy .lede { grid-column: 1 / 8; grid-row: 1 / span 2; }
  .hire-copy p:not(.lede) { grid-column: 9 / 13; grid-row: 1; padding-top: 0.2em; }
  .hire-copy .btn-row { grid-column: 9 / 13; grid-row: 2; margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) and (orientation: landscape) {
  .hire-copy p:not(.lede), .hire-copy .btn-row { grid-column: 8 / 13; }
}
/* tablets: the introduction stops short of the corner button's lane */
@media (min-width: 640px) and (max-width: 1023.98px) { .hire-copy { max-width: min(46rem, 100% - 3rem); } }

/* the corner button: still with reduced motion (a fade only), solid in forced colours */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transform: none !important; }
  .wa-fab, .wa-fab:hover, .wa-fab:active { transform: none; transition: color 0.3s ease, background-color 0.3s ease; }
}
@media (forced-colors: active) { .wa-fab { background: Canvas; border-color: ButtonText; color: ButtonText; } }

/* book a table: the client's closing line introduces the WhatsApp button */
.hero-split .awaits { font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
/* guest list: the admission terms are read before the button, on phones too */
.page-guest-list .hero-split .stack { order: 4; }

/* =====================================================================
   ABOUT US: the story as three chapters on a rail. A tap opens one and closes the one before;
   the open chapter's dot lights like the Club Room's sun and the rail fills down to it
   ===================================================================== */
.chapters { --rail-x: 0.5rem; --year: clamp(2.25rem, 1.5rem + 3.4vw, 4.75rem); --year-col: clamp(8.5rem, 4rem + 12vw, 15rem); position: relative; margin-top: clamp(2.25rem, 4vw, 3.75rem); padding-left: 2.5rem; }
.chapters::before, .chapters::after { content: ""; position: absolute; left: var(--rail-x); top: var(--rail-top, 0px); width: 1px; pointer-events: none; }
.chapters::before { height: var(--rail-h, 0px); background: rgba(142, 21, 38, 0.75); }
.chapters::after { height: var(--fill, 0px); background: linear-gradient(180deg, rgba(227, 182, 124, 0.3), var(--amber)); transition: height 0.7s var(--ease-io); }
.chapter { position: relative; border-top: 1px solid rgba(142, 21, 38, 0.45); }
.chapter:last-child { border-bottom: 1px solid rgba(142, 21, 38, 0.45); }
.chapter-head { margin: 0; font: inherit; }
.chapter-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "year icon" "name icon"; align-items: center; column-gap: 1rem; row-gap: 0.4rem;
  width: 100%; padding-block: 1.25rem; text-align: left; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chapter-year { grid-area: year; position: relative; top: 0.085em; font-family: var(--serif); font-weight: 300; font-size: var(--year); line-height: 1; letter-spacing: -0.02em; transition: color 0.5s ease, transform 0.6s var(--ease-out); }
.chapter-name { grid-area: name; font-size: 0.9375rem; color: var(--fg-muted); transition: color 0.5s ease; }
.chapter-icon { grid-area: icon; position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(244, 242, 233, 0.24);
  transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.6s var(--ease-out); }
.chapter-icon::before, .chapter-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.875rem; height: 1px; margin: -0.5px 0 0 -0.4375rem; background: currentColor; transition: transform 0.5s var(--ease-out); }
.chapter-icon::after { transform: rotate(90deg); }
.chapter-btn:active .chapter-icon { transform: scale(0.9); }
.chapter-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (hover: hover) { .chapter-btn:hover { background: rgba(227, 182, 124, 0.04); } .chapter-btn:hover .chapter-icon { border-color: rgba(244, 242, 233, 0.6); } .chapter-btn:hover .chapter-year { transform: translateX(0.3rem); } }
@media (min-width: 1024px) { .chapters { max-width: 68rem; } }
.chapter.is-open .chapter-year { color: var(--amber); transform: translateX(0.3rem); }
.chapter.is-open .chapter-name { color: var(--fg); }
.chapter.is-open .chapter-icon { transform: rotate(180deg); border-color: rgba(227, 182, 124, 0.6); background: rgba(227, 182, 124, 0.08); }
.chapter.is-open .chapter-icon::after { transform: rotate(0deg); }
/* the dot on the rail: a crimson ring until its chapter opens, then a small sun */
.chapter-dot { position: absolute; left: calc(var(--rail-x) - 2.5rem - 5.5px); top: calc(1.25rem + var(--year) / 2 - 5.5px); width: 11px; height: 11px; border-radius: 50%;
  background: #1c0706; border: 1px solid rgba(142, 21, 38, 0.95); transition: transform 0.6s var(--ease-out), background 0.5s ease, box-shadow 0.6s ease, border-color 0.5s ease; }
.chapter.is-past .chapter-dot { border-color: var(--amber); }
.chapter-name .ico { display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.45em; vertical-align: -0.2em; color: var(--amber); opacity: 0.85; }
.chapter.is-open .chapter-dot { transform: scale(1.4); border-color: transparent; background: radial-gradient(circle at 50% 45%, #fff8ec 0%, #f4d9b0 45%, var(--amber) 100%);
  box-shadow: 0 0 0 4px rgba(227, 182, 124, 0.14), 0 0 18px 4px rgba(255, 214, 170, 0.45); }
/* until the first tap, the first dot breathes, inviting it */
.chapters.is-seen:not(.is-touched) .chapter:first-child .chapter-dot { animation: nn-dot-invite 2.4s ease-in-out 2; }
@keyframes nn-dot-invite { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 182, 124, 0); } 50% { box-shadow: 0 0 0 7px rgba(227, 182, 124, 0.2); } }
/* the chapter opens to its own height, its text rising into place */
.chapter-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.65s var(--ease-io); }
.chapter-inner { min-height: 0; overflow: hidden; }
.chapter-inner p { max-width: 62ch; color: var(--fg-muted); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.3s ease, transform 0.5s var(--ease-out); }
.chapter-inner p + p { margin-top: 1em; }
.chapter-inner p:first-child { margin-top: 0.15rem; }
.chapter-inner p:last-child { margin-bottom: 1.75rem; }
.chapter-inner strong { font-weight: 500; color: var(--fg); }
.chapter-statement { font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15; color: var(--fg) !important; }
.chapter.is-open .chapter-panel { grid-template-rows: 1fr; }
.chapter.is-open .chapter-inner p { opacity: 1; transform: none; transition: opacity 0.6s ease 0.18s, transform 0.8s var(--ease-out) 0.18s; }
/* without JavaScript every chapter simply reads open */
html:not(.js) .chapter-panel, .chapters.is-static .chapter-panel { grid-template-rows: 1fr; }
html:not(.js) .chapter-inner p, .chapters.is-static .chapter-inner p { opacity: 1; transform: none; }
html:not(.js) .chapter-icon, html:not(.js) .chapters::after, .chapters.is-static .chapter-icon, .chapters.is-static::after { display: none; }
html:not(.js) .chapters::before, .chapters.is-static::before { top: calc(1.25rem + var(--year) / 2); bottom: 0; height: auto; }
html:not(.js) .chapter-dot, .chapters.is-static .chapter-dot { animation: none; }
html:not(.js) .chapter-btn, .chapters.is-static .chapter-btn { cursor: default; }
@media (min-width: 768px) {
  .chapter-btn { grid-template-columns: minmax(0, var(--year-col)) minmax(0, 1fr) auto; grid-template-areas: "year name icon"; column-gap: 1.5rem; }
  .chapter-inner { padding-left: calc(var(--year-col) + 1.5rem); padding-right: 4.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-panel, .chapter-inner p, .chapter-year, .chapter-icon, .chapter-icon::after, .chapter-dot, .chapters::after { transition: none !important; }
  .chapters .chapter-dot { animation: none !important; }
}

/* membership: the three benefits as icons, not a run of text */
.perks { display: grid; gap: 1.75rem; }
.perks li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: center; column-gap: 1.25rem; }
.perks .ico { width: 3.25rem; height: 3.25rem; padding: 0.85rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--oxblood); }
.perks b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.1; letter-spacing: -0.01em; }
.perks span { display: block; margin-top: 0.3rem; color: var(--fg-muted); }
@media (min-width: 768px) {
  .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--colgap); }
  .perks li { grid-template-columns: 1fr; justify-items: start; align-items: start; row-gap: 1.25rem; }
}
/* guest list: each house rule carries its icon */
.policy:has(.policy-ico) { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
.policy:has(.policy-ico) > :not(.policy-ico) { grid-column: 2; }
.policy-ico { grid-column: 1; grid-row: 1 / span 6; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--oxblood); }
.policy-ico .ico { width: 1.3rem; height: 1.3rem; }

/* guest list: the dress code staged with icons, the client's words unchanged */
.policy-do { display: grid; gap: 0.6rem; list-style: none; padding: 0; }
.policy-do li, .policy-no { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.policy-do .ico, .policy-no .ico { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--crimson); }
.policy-no { padding: 0.9rem 1rem; border-radius: 14px; background: rgba(122, 20, 24, 0.06); border: 1px solid rgba(122, 20, 24, 0.16); }
.policy-note { font-size: 0.9375rem; color: var(--fg-muted); }
/* book a table: the client's room-choice paragraphs open the section that shows the rooms */
.sit-intro { margin-top: 1.25rem; color: var(--fg-muted); max-width: 46rem; }
.sit-intro p:first-child { font-size: var(--fs-lede); line-height: 1.5; color: var(--fg); }