/* =========================================================
   NOWHERE BAR — Stylesheet
   Design grammar reference: waygood.com.au (measured live,
   desktop + mobile) — type scale, whitespace, split ratios,
   link-style CTAs. Content/brand: Nowhere Bar.
   Fonts: Jost (headings + labels/CTAs, closest available
   stand-in for Waygood's Sailec / schoolbook-condensed pairing),
   EB Garamond (body copy).
   ========================================================= */

@import url('fonts.css'); /* self-hosted Jost + EB Garamond (was Google Fonts) */

/* ---------- Tokens ---------- */
:root{
  --cream:      #F6EFE1;
  --cream-2:    #EFE6D3;
  --ink:        #1A1712;
  --ink-soft:   rgba(26,23,18,.66);
  --line:       rgba(26,23,18,.15);
  --line-on-ink:rgba(246,239,225,.22);
  --orange:     #FC6522;
  --orange-dark:#DE5015;
  --sky:        #8FADC7;
  --white:      #FFFFFF;

  --font-display: 'Jost', sans-serif;   /* headings */
  --font-sans:    'Jost', sans-serif;   /* nav / labels / CTAs */
  --font-body:    'EB Garamond', serif; /* paragraphs */

  --container: 1280px;
  --gutter: 6vw;
  --section-pad: 10.5rem;
  --measure: 30ch;

  --ease: cubic-bezier(.42,.0,.16,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .002em;
  text-transform: uppercase;
  line-height: 1.06;
  color: var(--ink);
}
h1{ font-size: clamp(2.25rem, 1.7vw + 1.85rem, 3.2rem); }
h2{ font-size: clamp(2.35rem, 1.85vw + 2.05rem, 3.75rem); }
h3{ font-size: clamp(1.2rem, .8vw + 1rem, 1.5rem); font-weight:500; }
h3.display{ font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem); }
.on-ink{ color: var(--cream); }

.eyebrow{
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  display:inline-block;
  margin-bottom: 1.4rem;
}
.on-ink .eyebrow, .eyebrow.on-ink{ color: var(--sky); }

.lede{
  font-family: var(--font-body);
  font-size: clamp(1.05rem, .25vw + 1rem, 1.18rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.on-ink .lede{ color: rgba(246,239,225,.78); }
.lede + .lede{ margin-top: 1.1rem; }

.small-note{
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ---------- CTAs — typographic links, not buttons ---------- */
.btn{
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding: 0 0 .35em;
  border: none;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--ink);
  border-radius: 0;
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
  white-space: nowrap;
}
.btn::after{ content:"\2192"; display:inline-block; transition: transform .2s var(--ease); }
.btn:hover{ color: var(--orange); }
.btn:hover::after{ transform: translateX(4px); }
.btn.btn-outline{ color: var(--ink); }
.btn.btn-outline:hover{ color: var(--orange); }
.on-ink .btn{ color: var(--cream); }
.on-ink .btn:hover{ color: var(--orange); }
.btn.btn-orange{ color: var(--orange); }
.btn.btn-orange:hover{ color: var(--ink); }
.on-ink .btn.btn-orange:hover{ color: var(--cream); }

/* ---------- Header / Nav ----------
   WAYGOOD reference: a genuinely thin single row — logo, then plain
   nav links of equal weight, the booking link included among them
   rather than singled out as a coloured CTA button. No permanent
   border; a subtle shadow fades in via JS once the page scrolls. */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: var(--cream);
  border-bottom: none;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand{ display:flex; align-items:center; }
.brand img{ height: 30px; width:auto; }
.nav-links{ display:flex; gap: 1.9rem; align-items:center; }
.nav-links a{
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover{ border-color: var(--orange); color: var(--orange); }
.nav-links a.is-active{ color: var(--orange); border-color: var(--orange); }
.nav-cta{
  font-family: var(--font-sans);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink);
  padding:.4rem 0; border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-cta:hover{ color: var(--orange); border-color: var(--orange); }

.nav-toggle{
  display:none; flex-direction:column; gap:6px; width:34px;
  background:none; border:none; padding:6px 2px;
}
.nav-toggle span{ height:2px; width:100%; background: var(--ink); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.nav-overlay{
  position: fixed; inset:0; background: var(--cream);
  z-index: 70;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 1.9rem;
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
}
.nav-overlay.is-open{ transform: translateY(0); }
.nav-overlay a{
  font-family: var(--font-display);
  font-size: clamp(1.8rem,5vw,2.6rem);
  text-transform: uppercase;
  letter-spacing:.01em;
}
.nav-overlay a:hover{ color: var(--orange); }
.nav-overlay-close{
  position:absolute; top: 32px; right: var(--gutter);
  background:none; border:none; font-size:2rem; line-height:1; color:var(--ink);
}
.nav-overlay .overlay-art{ width: 140px; opacity:.8; margin-top: 1rem; }

/* ---------- Sections & rhythm ---------- */
.section{ padding: var(--section-pad) 0; }
.bg-cream{ background: var(--cream); }
.bg-ink{ background: var(--ink); color: var(--cream); }
.bg-cream2{ background: var(--cream-2); }

.rule{ border:none; border-top:1px solid var(--line); margin:0; }
.on-ink .rule, .bg-ink .rule{ border-top-color: var(--line-on-ink); }

/* Split feature (image + text), asymmetric ~55/45 by default,
   image-dominant variant for sections where the reference gives
   photography more room than copy. Height is driven by the
   image's aspect-ratio, not a fixed min-height. */
.split{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  align-items:stretch;
}
.split.split--wide-media{ grid-template-columns: 1.75fr 1fr; }
.split .split-media{ position:relative; overflow:hidden; }
.split .split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.split .split-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding: 4vw calc(var(--gutter) + 1vw);
  gap: 1.9rem;
}
.split.media-right{ direction: rtl; }
.split.media-right .split-copy{ direction: ltr; }
.split.media-right .split-media{ direction: ltr; }
.split-copy .cta-row{ display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; margin-top:.2rem; }
.split-icon{ width:54px; height:54px; opacity:.85; margin-bottom:.2rem; }

/* Simple centered feature — generous whitespace, no card/box */
.feature-intro{ text-align:center; max-width: 680px; margin: 0 auto; padding: 0 var(--gutter); }
.feature-intro .lede{ margin: 0 auto 2.2rem; }

/* Full-bleed photography interruption — pure image, no overlay copy */
.banner{
  position: relative; min-height: 82vh; overflow:hidden;
  background: var(--ink);
}
.banner img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Breathing room before the footer — every page gets at least one
   full scroll of clear space between its last piece of content and
   the footer, so the footer never feels like it's crowding in. */
.pre-footer-space{ min-height: clamp(4rem, 12vh, 9rem); } /* was 100vh — read as an empty/broken screen before the footer */

/* Two-photo strip — breaks up a text-heavy page (e.g. Contact,
   between the intro copy and the details grid) with a quick
   flash of atmosphere, no copy overlay. */
.contact-photo-strip{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: clamp(2.5rem, 6vw, 4rem) 0;
}
.contact-photo-strip img{
  width:100%; height:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  display:block;
}

/* Newsletter */
.newsletter{ text-align:center; }
.newsletter form{
  display:flex; gap:1.2rem; justify-content:center; margin-top: 2.6rem; flex-wrap:wrap;
}
.field{
  display:flex; flex-direction:column; gap:.4rem; text-align:left;
}
.field label{ font-family: var(--font-sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: var(--font-body);
  font-size:1rem;
  border: none; border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: .6rem .2rem;
  min-width: 220px;
  color: var(--ink);
  outline:none;
  transition: border-color .2s var(--ease);
}
.field textarea{ min-width: 100%; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--orange); }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#B23A2E; }
.field .error-msg{ font-family: var(--font-sans); font-size:.72rem; color:#B23A2E; min-height:1em; }
.field .field-note{ display:block; font-family: var(--font-sans); font-size:.72rem; color: var(--ink-soft); margin-top:.3rem; }
.on-ink .field input, .on-ink .field select, .on-ink .field textarea{ color:var(--cream); border-color: var(--line-on-ink); }
.newsletter-submit-row{ display:flex; align-items:flex-end; }
.form-status{ margin-top:1.2rem; font-family: var(--font-sans); font-size:.85rem; letter-spacing:.04em; min-height:1.4em; }
.form-status.ok{ color:#3E7D4C; }
.form-status.err{ color:#B23A2E; }

/* Two-up feature (asymmetric text + image) */
.two-up{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items:center; }
.two-up img{ width:100%; aspect-ratio: 4/5; object-fit:cover; }

/* Footer */
.site-footer{ background: var(--cream); border-top:1px solid var(--line); padding: 6rem 0 2.6rem; text-align:center; }
.site-footer .brand-mark{ height:42px; margin: 0 auto 2.6rem; opacity:.95; }
.footer-address{ font-family: var(--font-sans); font-size: .95rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.8rem; }
.footer-meta{ font-family: var(--font-sans); font-size:.85rem; letter-spacing:.04em; color: var(--ink-soft); display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem; margin-bottom:1.8rem; }
.footer-meta a:hover{ color: var(--orange); }
.footer-social{ display:flex; justify-content:center; gap:1.6rem; font-family: var(--font-sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:2.4rem; }
.footer-social a:hover{ color: var(--orange); }
.footer-hours{ font-family: var(--font-body); font-style: italic; color: var(--ink-soft); margin-bottom: 2.6rem; }
.footer-bottom{ font-family: var(--font-sans); font-size:.72rem; letter-spacing:.06em; color: var(--ink-soft); border-top:1px solid var(--line); padding-top:1.8rem; }
.footer-staff-link{ display:block; text-align:center; font-family: var(--font-sans); font-size:.68rem; letter-spacing:.06em; color: var(--ink-soft); opacity:.6; margin-top:.9rem; }
.footer-staff-link:hover{ color: var(--orange); opacity:1; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Big list links (Menu page pattern) ---------- */
.link-list{ margin-top: 3.5rem; }
.link-list-item{ border-bottom: 1px solid var(--line); }
.link-list-item a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family: var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size: clamp(2rem, 5vw, 3.6rem);
  padding: 1.7rem 0;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.link-list-item a:hover{ color: var(--orange); padding-left: .6rem; }
.link-list-item a > span:first-child{ min-width:0; overflow-wrap: break-word; }
.link-list-item a .arrow{ font-family: var(--font-sans); font-size:1.2rem; opacity:.5; flex-shrink:0; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.link-list-item a:hover .arrow{ opacity:1; transform: translateX(6px); }

/* ---------- Menu content blocks ---------- */
.menu-block{ padding-top: 5.5rem; scroll-margin-top: 110px; }
.menu-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 3rem; margin-top: 2.6rem; }
.menu-row{ display:flex; justify-content:space-between; gap:1rem; padding: .4rem 0; font-family: var(--font-body); }
.menu-row .name{ font-size:1.08rem; flex: 1 1 auto; min-width:0; }
.menu-row .desc{ display:block; font-size:.88rem; color: var(--ink-soft); font-style: italic; margin-top:.15rem; }
.menu-row .price{ font-family: var(--font-sans); font-size:.88rem; color: var(--ink-soft); white-space:nowrap; padding-top:.2rem; flex-shrink:0; }
.menu-note{ margin-top:2.6rem; font-family: var(--font-sans); font-size:.8rem; letter-spacing:.03em; color: var(--ink-soft); }

/* ---------- What's On — editorial rows, not a card grid ---------- */
.event-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 4rem 3.5rem; margin-top: 3.5rem; }
.event-card{ display:flex; flex-direction:column; gap:1.3rem; }
.event-card .event-media{ aspect-ratio: 4/5; overflow:hidden; }
.event-card .event-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.event-card:hover .event-media img{ transform: scale(1.04); }
.event-card .event-day{ font-family: var(--font-sans); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color: var(--orange); }
.event-card h3{ font-size: clamp(1.3rem,1.6vw+.9rem,1.8rem); }
.event-card p{ font-family: var(--font-body); font-size:1.02rem; color: var(--ink-soft); max-width: 34ch; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items:start; }
.info-list{ display:flex; flex-direction:column; gap: 2.3rem; margin-top: 2.6rem; }
.info-list .info-item .eyebrow{ margin-bottom:.6rem; }
.info-list .info-item p, .info-list .info-item a{ font-family: var(--font-body); font-size:1.25rem; }
.map-embed{ width:100%; aspect-ratio: 4/3; border:1px solid var(--line); filter: grayscale(.15) contrast(1.02); }

/* ---------- Functions page — plain stat row, no boxes ---------- */
.capacity-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:2.5rem; margin: 3.5rem 0; text-align:center; }
.capacity-item{ padding: 0; border:none; }
.capacity-item .num{ font-family: var(--font-display); font-weight:400; font-size: clamp(2.2rem,3vw+1.6rem,3.2rem); }
.capacity-item .label-sm{ font-family: var(--font-sans); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); margin-top:.6rem; }

.enquiry-form{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.9rem 2.2rem; margin-top: 2.8rem; }
.enquiry-form .field.full{ grid-column: 1 / -1; }
.enquiry-form .submit-row{ grid-column: 1 / -1; display:flex; align-items:center; gap:1.8rem; margin-top:.8rem; }

/* ---------- Page hero (secondary pages) ---------- */
.page-hero{ padding: 7.5rem 0 4rem; text-align:center; }

/* =========================================================
   HOMEPAGE — WAYGOOD composition system.
   These sections translate specific WAYGOOD screenshots
   (supplied as literal layout references) into Nowhere's
   own photography, colour and voice. Secondary pages keep
   using .split/.feature-intro/.two-up above, untouched.
   ========================================================= */

/* WAYGOOD 01 — hero / image-first opening.
   Nav, then immediately one dominant photograph. No headline,
   no copy, no gradient — the photo is the whole section. */
.wg-hero{
  position: relative;
  height: 88vh; min-height: 520px; max-height: 900px;
  overflow: hidden;
}
.wg-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

/* WAYGOOD 02 — "A meeting place..." — near 50/50, candid photo
   one side, a short oversized statement centred in the other,
   with huge breathing room and one small graphic underneath. */
.wg-intro{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 82vh;
}
.wg-intro-media{ position:relative; overflow:hidden; }
.wg-intro-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.wg-intro-copy{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 4rem 3.5rem;
}
.wg-intro-copy .eyebrow{ display:block; }
.wg-intro-copy h1{
  max-width: 15ch; margin: 0 auto; font-weight:600;
  font-size: clamp(2.35rem, 1.85vw + 2.05rem, 3.75rem);
}
.wg-intro-copy .small-note{ margin: 1.4rem auto 0; max-width: none; }
.wg-intro-copy .wg-graphic{ width:56px; height:auto; margin-top: 2.4rem; opacity:.85; }

/* WAYGOOD 03 — "Belly full, heart full" — small label, large
   headline, short paragraph, understated text CTA, and ONE
   vertical photograph contained (not bled) within the section. */
.wg-menu{
  display:grid;
  grid-template-columns: minmax(280px, 44%) 1fr;
  align-items:center;
  gap: 4vw;
  padding: var(--section-pad) var(--gutter);
}
.wg-menu-copy{ max-width: 420px; }
.wg-menu-copy h2{ font-weight:600; margin-bottom: 1.5rem; }
.wg-menu-copy .lede{ margin-bottom: 2rem; }
.wg-menu-media{ overflow:hidden; }
.wg-menu-media img{ width:100%; height:auto; display:block; aspect-ratio: 3/4; object-fit:cover; }
.wg-menu.wg-menu--reverse{ direction: rtl; }
.wg-menu.wg-menu--reverse .wg-menu-copy,
.wg-menu.wg-menu--reverse .wg-menu-media{ direction: ltr; }

/* WAYGOOD 04 — "Honest cellar service" — a bold change of pace:
   a photograph fills one half, a single Nowhere brand colour
   fills the other, with centred headline/copy/CTA. Not a card. */
.wg-colour{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:stretch;
  min-height: 82vh;
}
.wg-colour-media{ position:relative; overflow:hidden; }
.wg-colour-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.wg-colour-copy{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background: var(--orange);
  color: var(--cream);
  padding: 4rem 3.5rem;
}
.wg-colour-copy .eyebrow{ color: var(--cream); opacity:.8; }
.wg-colour-copy h2{ color: var(--cream); font-weight:600; max-width: 14ch; margin: 0 auto; }
.wg-colour-copy .lede{ color: rgba(246,239,225,.82); margin: 1.6rem auto 2rem; max-width: 32ch; }
.wg-colour-copy .btn{ color: var(--cream); }
.wg-colour-copy .btn:hover{ color: var(--ink); }
.wg-colour.wg-colour--reverse{ direction: rtl; }
.wg-colour.wg-colour--reverse .wg-colour-media,
.wg-colour.wg-colour--reverse .wg-colour-copy{ direction: ltr; }

/* Full-bleed photographic interruption — pure image, no copy,
   used sparingly as a pacing break between editorial moments. */
.interruption-full{
  position:relative; height: 62vh; min-height: 420px; overflow:hidden;
}
.interruption-full img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Photographic interruption, collage variant — a looser, more
   "made not templated" pacing break: grain-textured paper ground,
   a handful of real moments framed and loosely offset. Still
   full-bleed, still no headline copy — texture and photography only. */
.interruption-gallery{
  position: relative;
  background: var(--cream-2);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  overflow: hidden;
}
.interruption-gallery::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
}
.interruption-gallery .g-grid{
  position:relative;
  max-width: 1320px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "a b d"
    "a c d";
  gap: clamp(1.1rem, 2.2vw, 2rem);
}
.interruption-gallery .g-item{
  position:relative;
  overflow:hidden;
  background: var(--cream);
  border: 8px solid var(--cream);
  box-shadow: 0 18px 40px rgba(26,23,18,.16);
}
.interruption-gallery .g-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.interruption-gallery .g1{ grid-area:a; aspect-ratio: 3/4; transform: rotate(-1.2deg); }
.interruption-gallery .g2{ grid-area:b; aspect-ratio: 4/3; align-self:end; transform: rotate(1.4deg); }
.interruption-gallery .g3{ grid-area:c; aspect-ratio: 4/3; align-self:start; transform: rotate(-.9deg); }
.interruption-gallery .g4{ grid-area:d; aspect-ratio: 3/4; transform: rotate(1deg); }
.interruption-gallery .g-mark{
  position:absolute; width: clamp(34px, 4vw, 48px); height:auto; opacity:.75;
  right: clamp(-.5rem, -1vw, 0); bottom: -1.2rem;
}

/* Full-bleed collage print — one large image, edge to edge,
   sitting flat against the page. No card, no border, no shadow —
   scale and generous cream space either side carry the moment. */
.collage-full{
  background: var(--cream);
  padding: clamp(3rem, 7vw, 6rem) 0;
}
.collage-full-frame{ overflow:hidden; }
.collage-full-frame img{ width:100%; height:auto; display:block; }

/* ============ MENU PAGE — editorial system ============
   Category labels replace ad-hoc inline-styled sub-headings;
   .menu-editorial / .menu-feature bring photography into the
   layout itself rather than dropping a bordered photo in. */
.menu-category{
  display:block;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 3rem 0 1.3rem;
}
.menu-category:first-of-type{ margin-top: 2.4rem; }

/* One larger, asymmetrically-placed editorial photograph used
   as the pause between major menu sections — bleeds to one edge,
   generous cream on the other. Sits flat, no frame. */
.menu-editorial{ padding: clamp(3rem, 6vw, 5rem) 0; }
.menu-editorial-media{
  margin-left: auto;
  width: min(920px, 78%);
  aspect-ratio: 16/10;
  overflow:hidden;
}
.menu-editorial-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* A menu subsection composed alongside its own photograph,
   rather than a small photo dropped between lists. */
.menu-feature{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items:center;
  margin-top: 2.6rem;
}
.menu-feature-media{ aspect-ratio: 4/5; overflow:hidden; }
.menu-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.menu-feature .menu-category:first-of-type{ margin-top:0; }

/* ============ WHAT'S ON — Quiz Night ============
   One full-width photograph, then the title stretched
   edge-to-edge directly beneath it (sized to fit the page
   exactly by js/quiz.js — the font-size below is only the
   pre-JS fallback). A single info line and one CTA carry
   the rest; no cards, no extra sections. */
.quiz-image{ overflow:hidden; }
.quiz-image img{ width:100%; height:auto; display:block; }

.quiz-title-band{
  position:relative;
  background: var(--orange);
  background-image: repeating-linear-gradient(-38deg,
    rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1.5px,
    transparent 1.5px, transparent 30px);
  padding: clamp(2rem, 5.5vw, 4rem) 0 clamp(2.4rem, 6vw, 4.5rem);
  overflow:hidden;
  text-align:center;
}
.quiz-title-kicker{
  display:block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  letter-spacing:.02em;
  color: var(--cream);
  opacity:.88;
  margin-bottom: clamp(.5rem, 1.6vw, .9rem);
}
.quiz-title-fit{
  display:block;
  margin:0;
  text-align:center;
  white-space:nowrap;
  color: var(--cream);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1;
  font-size: 14vw; /* fallback before JS measures and fits it */
}
.quiz-title-rule{
  display:block;
  width: 46px;
  height: 3px;
  background: var(--cream);
  opacity:.85;
  margin: clamp(1.1rem, 3vw, 1.8rem) auto 0;
}

.quiz-info{
  text-align:center;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
}
.quiz-info .eyebrow{ display:block; }
.quiz-info .lede{ margin: 0 auto 2.2rem; }

/* ---------- Utility ---------- */
.mt-lg{ margin-top: 3rem; }
.text-center{ text-align:center; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--cream); padding:.6rem 1rem; z-index:200; }
.skip-link:focus{ left: 10px; top:10px; }

/* =========================================================
   RESPONSIVE — 1440 desktop baseline above, then step down.
   Whitespace and type scale stay generous down to mobile;
   the clamp() functions above already do most of the work,
   so these breakpoints mainly change LAYOUT, not shrink type.
   ========================================================= */

/* Laptop / 1200 */
@media (max-width: 1200px){
  :root{ --section-pad: 8.5rem; }
}

/* Tablet / 1024 */
@media (max-width: 1024px){
  :root{ --gutter: 5.5vw; --section-pad: 7rem; }
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .split{ grid-template-columns: 1fr; }
  .split.split--wide-media{ grid-template-columns: 1fr; }
  .split .split-media img{ aspect-ratio: 4/3; }
  .split.media-right{ direction: ltr; }
  .split .split-copy{ padding: 4rem var(--gutter); }
  .two-up{ grid-template-columns:1fr; gap:2.8rem; }
  .two-up img{ aspect-ratio: 16/10; }
  .contact-grid{ grid-template-columns:1fr; gap:3.5rem; }
  .event-grid{ grid-template-columns: repeat(2,1fr); gap:2.6rem 2rem; }
  .capacity-grid{ grid-template-columns: repeat(3,1fr); gap:1.4rem; }
  .menu-grid{ grid-template-columns:1fr; }

  /* Homepage WAYGOOD system — collapse the 50/50 grids to a
     single column, keep photography full-width above copy. */
  .wg-hero{ height: 76vh; min-height: 460px; }
  .wg-intro{ grid-template-columns: 1fr; min-height:auto; }
  .wg-intro-media{ min-height: 52vh; }
  .wg-intro-copy{ padding: 3.5rem var(--gutter); }
  .wg-menu{ grid-template-columns: 1fr; gap: 2.6rem; padding: 6rem var(--gutter); }
  .wg-menu-media{ order:-1; max-width: 420px; margin: 0 auto; }
  .wg-menu-copy{ max-width: none; }
  .wg-colour{ grid-template-columns: 1fr; min-height:auto; }
  .wg-colour-media{ min-height: 52vh; }
  .wg-colour-copy{ padding: 3.5rem var(--gutter); }
  .interruption-full{ height: 52vh; }
  .interruption-gallery .g-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "a b"
      "a c"
      "d d";
  }
  .interruption-gallery .g4{ aspect-ratio: 16/9; }

  .menu-feature{ grid-template-columns: 1fr; }
  .menu-feature-media{ aspect-ratio: 16/10; order:-1; }

}

/* Tablet / 768 */
@media (max-width: 768px){
  :root{ --section-pad: 5.5rem; }
  body{ font-size: 15.5px; }
  .site-header .container{ height: 56px; }
  .brand img{ height: 25px; }
  .split .split-copy{ padding: 3.2rem var(--gutter); gap:1.5rem; }
  .banner{ min-height: 58vh; }
  .newsletter form{ flex-direction:column; align-items:center; }
  .field input, .field select{ min-width: 260px; }
  .event-grid{ grid-template-columns: 1fr; gap:3rem; }
  .capacity-grid{ grid-template-columns: repeat(3,1fr); gap:1rem; }
  .enquiry-form{ grid-template-columns: 1fr; }
  .footer-meta{ flex-direction:column; gap:.6rem; }

  .wg-hero{ height: 64vh; min-height: 400px; }
  .wg-intro-media{ min-height: 42vh; }
  .wg-intro-copy{ padding: 3rem var(--gutter); }
  .wg-menu{ padding: 4.5rem var(--gutter); }
  .wg-colour-media{ min-height: 42vh; }
  .wg-colour-copy{ padding: 3rem var(--gutter); }
  .interruption-full{ height: 46vh; min-height: 320px; }
  .interruption-gallery{ padding: 3.5rem var(--gutter); }
  .interruption-gallery .g-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "a" "b" "c" "d";
  }
  .interruption-gallery .g-item{ transform:none !important; aspect-ratio: 4/3; }
  .interruption-gallery .g1{ aspect-ratio: 5/4; }
  .interruption-gallery .g-mark{ display:none; }

  .menu-editorial-media{ width: 100%; margin-left:0; aspect-ratio: 4/3; }

}

/* Mobile / 480 & down (390/430 target) —
   type keeps its clamp() scale; only spacing and stacking change. */
@media (max-width: 480px){
  :root{ --gutter: 6.5vw; --section-pad: 4.5rem; }
  .link-list-item a{ font-size: clamp(1.6rem, 8.5vw, 2.4rem); }
  .nav-overlay a{ font-size: 1.5rem; }
  .site-footer{ padding: 4.5rem 0 2rem; }
  .capacity-grid{ grid-template-columns: 1fr; gap:2rem; }

  .wg-hero{ height: 58vh; min-height: 360px; }
  .wg-menu{ padding: 3.5rem var(--gutter); }
}

/* ---------- Menu: tapped-beer price table (added Oct 2026) ----------
   Four serve sizes shown as small line-drawn glasses, matching the
   site's existing menu typography (Garamond names, Jost prices). */
.beer-table{ width:100%; max-width:640px; border-collapse:collapse; margin-top:1.6rem; font-family: var(--font-body); }
.beer-table th, .beer-table td{ padding:.55rem .4rem; text-align:center; border-bottom:1px dotted var(--line); }
.beer-table thead th{ border-bottom:1px solid var(--line); vertical-align:bottom; color: var(--ink-soft); }
.beer-table tbody th{ text-align:left; font-weight:400; font-size:1.08rem; }
.beer-table td{ font-family: var(--font-sans); font-size:.88rem; color: var(--ink-soft); white-space:nowrap; width:14%; }
.glass-icon{ display:inline-block; vertical-align:bottom; }
.menu-row .name em{ font-style: italic; }

/* =========================================================
   HOUSE × NOWHERE (v2) — campaign-style page, Oct 2026.
   HOUSE's colour is the brand sky blue; Nowhere stays orange.
   One bold move: the oversized, edge-cropped HOUSE wordmark.
   Everything else is left-aligned, quiet and asymmetric.
   ========================================================= */
.hx{ --hx-sky:#8FADC7; --hx-sky-deep:#5F7E9A; }
.hx p{ font-family: var(--font-body); color: var(--ink-soft); line-height:1.7; }

/* Hero */
.hx-hero{ background: var(--hx-sky); color: var(--ink); overflow:hidden; padding: clamp(1.5rem,3vw,2.5rem) 0 clamp(2.5rem,4vw,3.5rem); }
.hx-wordmark{ margin:0; color: var(--ink); line-height:.8; }
.hx-house{ display:block; font-weight:600; font-size: clamp(6rem, 29.5vw, 28rem); letter-spacing:-.035em; margin-left: -.045em; white-space:nowrap; }
.hx-with{ display:block; font-family: var(--font-display); font-weight:400; font-size: clamp(1.6rem, 3.6vw, 3.4rem); letter-spacing:.01em; padding-left: var(--gutter); margin-top: .5rem; }
.hx-x{ color: var(--orange); font-weight:300; margin-right:.35em; }
.hx-hero-foot{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) auto; gap: clamp(1.5rem,4vw,4rem); align-items:end; padding: clamp(2rem,3.5vw,3rem) var(--gutter) 0; }
.hx .hx-hero-line{ font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.25rem, 1.4vw + .8rem, 2rem); line-height:1.15; color: var(--ink); max-width: 22ch; margin:0; }
.hx .hx-hero-sub{ color: rgba(26,23,18,.78); max-width: 44ch; margin:0; }
.hx-tag{ display:block; background: var(--ink); color: var(--cream); padding: 1.1rem 1.3rem 1.2rem; min-width: 210px; transform: rotate(-2deg); transition: transform .25s var(--ease); }
.hx-tag:hover, .hx-tag:focus-visible{ transform: rotate(0deg); }
.hx-tag span{ display:block; }
.hx-tag-label{ font-family: var(--font-body); font-style: italic; font-size:.95rem; color: var(--hx-sky); }
.hx-tag-date{ font-family: var(--font-display); font-weight:600; text-transform: uppercase; font-size:1.35rem; line-height:1.1; margin:.2rem 0; }
.hx-tag-note{ font-family: var(--font-body); font-size:.95rem; color: rgba(246,239,225,.75); }

/* Meet the HOUSEmate */
.hx-meet{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,6vw,7rem); padding: clamp(3.5rem,6vw,5.5rem) var(--gutter) clamp(3rem,5vw,4.5rem); max-width: 1440px; margin:0 auto; }
.hx-meet h2{ font-size: .95rem; font-weight:500; letter-spacing:.08em; color: var(--hx-sky-deep); margin-bottom: 1.4rem; }
.hx .hx-name{ font-family: var(--font-display); font-weight:600; text-transform: uppercase; font-size: clamp(3rem, 6.5vw, 6.4rem); line-height:.88; color: var(--ink); margin:0; letter-spacing:-.01em; }
.hx-meet-body{ padding-top: clamp(0rem, 3.2vw, 3rem); max-width: 640px; }
.hx .hx-big{ font-size: clamp(1.3rem, .9vw + 1rem, 1.7rem); line-height:1.45; color: var(--ink); margin:0 0 1.4rem; }
.hx-facts{ margin: 2.4rem 0 0; border-top: 1px solid var(--line); }
.hx-facts div{ display:grid; grid-template-columns: 11rem 1fr; gap:1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.hx-facts dt{ font-family: var(--font-sans); font-size:.85rem; color: var(--ink-soft); }
.hx-facts dd{ margin:0; font-family: var(--font-body); font-size:1.08rem; color: var(--ink); }

/* Good food. No fuss. — an inset ink panel, offset to the left, with the quote breaking out on the right */
.hx-food{ position:relative; display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items:end; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.hx-food-panel{ background: var(--ink); color: var(--cream); padding: clamp(2.8rem,5vw,4.5rem) clamp(2rem,5vw,4.5rem); }
.hx-food-panel h2{ color: var(--cream); font-weight:600; font-size: clamp(2.8rem, 5vw, 5rem); line-height:.95; margin-bottom: 2.4rem; }
.hx-points{ list-style:none; margin:0; padding:0; display:grid; gap: 1.4rem; max-width: 52ch; }
.hx-points li{ font-family: var(--font-body); font-size:1.08rem; line-height:1.6; color: rgba(246,239,225,.78); padding-left: 1.6rem; position:relative; }
.hx-points li::before{ content:""; position:absolute; left:0; top:.62em; width:.6rem; height:.6rem; background: var(--hx-sky); }
.hx-points strong{ font-weight:500; color: var(--cream); }
.hx-quote{ margin: 0 0 clamp(2rem,4vw,3.5rem) calc(-1 * clamp(2rem,5vw,5rem)); background: var(--orange); padding: clamp(2rem,3.5vw,3rem); position:relative; z-index:1; }
.hx .hx-quote p{ font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.35rem, 1.3vw + .9rem, 2rem); line-height:1.15; color: var(--ink); margin:0; }
.hx-quote cite{ display:block; margin-top: 1.2rem; font-style: italic; font-family: var(--font-body); color: var(--ink); }

/* The HOUSE menu — the page's destination */
.hx-menu{ display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,5vw,5rem); align-items:center; padding: clamp(3.5rem,6vw,5.5rem) var(--gutter) clamp(2.5rem,4vw,3.5rem); max-width: 1440px; margin:0 auto; scroll-margin-top: 90px; }
.hx-menu-card{ border: 2px solid var(--ink); background: var(--cream); padding: clamp(2.2rem,4.5vw,4rem); box-shadow: 14px 14px 0 var(--hx-sky); }
.hx-menu-card h2{ font-weight:600; font-size: clamp(2.4rem, 4.2vw, 4.2rem); line-height:.95; margin-bottom: 1.6rem; }
.hx .hx-menu-status{ display:inline-block; font-family: var(--font-display); font-size: 1rem; color: var(--cream); background: var(--hx-sky-deep); padding: .35rem .8rem; margin:0 0 1.2rem; }
.hx .hx-menu-text{ font-size: 1.15rem; max-width: 40ch; margin:0; }
.hx .hx-signoff{ font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 1.4vw + 1rem, 2.2rem); line-height:1.05; color: var(--ink); margin: 0 0 1.8rem; }
.hx-signoff span{ display:block; white-space:nowrap; }
.hx-links{ display:flex; flex-wrap:wrap; gap: .8rem 1.6rem; margin:0; }
.hx-links a{ font-family: var(--font-sans); font-size:1rem; color: var(--ink); border-bottom: 1.5px solid var(--orange); padding-bottom:.15rem; }
.hx-links a:hover{ color: var(--orange); }
.hx a:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; }

@media (max-width: 1024px){
  .hx-hero-foot{ grid-template-columns: 1fr 1fr; }
  .hx-tag{ grid-column: 1 / -1; justify-self:start; }
  .hx-food{ grid-template-columns: 1fr; }
  .hx-quote{ margin: -1.5rem 0 0 clamp(1.5rem,8vw,5rem); }
}
@media (max-width: 768px){
  .hx-hero-foot{ grid-template-columns: 1fr; }
  .hx-meet{ grid-template-columns: 1fr; gap: 1.6rem; }
  .hx-meet-body{ padding-top:0; }
  .hx-facts div{ grid-template-columns: 1fr; gap:.15rem; }
  .hx-food{ padding: 0; }
  .hx-quote{ margin: -1.5rem var(--gutter) 0 calc(var(--gutter) * 2); }
  .hx-menu{ grid-template-columns: 1fr; }
  .hx-menu-card{ box-shadow: 8px 8px 0 var(--hx-sky); }
}
@media (prefers-reduced-motion: reduce){ .hx-tag{ transition:none; } }