/* ==========================================================================
   Corner — Uptown Oxford, Ohio
   Black-and-white editorial system built on the "corner" motif:
   90-degree rules, corner-anchored composition, corner-bracket framing.
   Accent: the wine family already assigned to Corner Bar in the Bargroup
   design system (bar-group-homepage/data/venues.js → accent #7d3b4a).
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subsets, SIL OFL — see ../README.md) ----
   The `-v2` in these filenames is deliberate and is NOT decoration. /assets/* is
   served `immutable` for a year (netlify.toml), so a font whose bytes change
   while its name stays the same would keep serving the stale copy from cache.
   The v1 files were single-glyph subsets containing only `A`; renaming is what
   guarantees nobody keeps them. Rename again on any future font change.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-latin-400-v2.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/work-sans-latin-var-v2.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-mono-latin-400-v2.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-mono-latin-700-v2.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  /* surfaces */
  --black: #0c0c0d;        /* base dark surface */
  --true-black: #000000;   /* selective true black (header, footer) */
  --charcoal: #17171a;     /* raised dark surface */
  --paper: #f2efe9;        /* warm off-white editorial surface */
  --paper-bright: #fbf9f5;

  /* text */
  --text-on-dark: #e8e5df;
  --text-dim-on-dark: #b9b6b0;
  --label-on-dark: #93908a;
  --ink: #141416;          /* text on paper */
  --ink-soft: #45454a;

  /* rules */
  --rule-on-dark: #2e2e33;
  --rule-on-paper: #d5d1c7;

  /* accent — Corner's wine family */
  --wine: #7d3b4a;         /* fields + decorative marks */
  --wine-deep: #3e1b24;
  --wine-text-dark: #d18b9c;  /* accent text/focus on dark surfaces (AA) */
  --wine-text-paper: #7d3b4a; /* accent text on paper (AA) */

  /* type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-text: 'Work Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* smoked glass — used on three surfaces only: the sticky header, the
     mobile navigation panel, and the compact hero address plate. Translucent
     near-black, mild blur, one-pixel low-contrast edge. No rounding, no
     refraction, no halo. See ../README.md. */
  --glass-bg: rgba(12, 12, 13, 0.66);        /* header, top of page */
  --glass-bg-strong: rgba(9, 9, 10, 0.88);   /* header once scrolled, mobile nav */
  /* Plates that sit on photography. 0.68 is the thinnest this can go and still
     clear AA for the label if a near-white highlight lands behind it. */
  --glass-bg-media: rgba(10, 10, 12, 0.68);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.95);
  --glass-blur: 20px;
  --glass-saturation: 125%;
  /* opaque stand-ins used when backdrop-filter is unavailable */
  --glass-solid: #101012;
  --glass-solid-strong: #0a0a0b;

  /* layout */
  --measure: 34rem;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --header-h: 4rem;
  --bracket: 1.75rem;      /* corner-bracket arm length */
}

/* ---- Reset-ish ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text-on-dark);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Focus ---- */
:focus-visible {
  outline: 2px solid var(--wine-text-dark);
  outline-offset: 3px;
}
.section--paper :focus-visible,
.section--paper:focus-visible {
  outline-color: var(--wine-text-paper);
}

/* ---- Skip link ---- */
.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
  outline-color: var(--wine-text-paper);
}

/* ---- Shared bits ---- */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.7;
}

.accent { color: var(--wine-text-dark); }

/* Corner brackets: the motif's framing device (top-left + bottom-right). */
.corner-frame { position: relative; }
.corner-frame::before,
.corner-frame::after {
  content: '';
  position: absolute;
  width: var(--bracket);
  height: var(--bracket);
  pointer-events: none;
}
.corner-frame::before {
  top: 0; left: 0;
  border-top: 2px solid var(--wine);
  border-left: 2px solid var(--wine);
}
.corner-frame::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid var(--wine);
  border-right: 2px solid var(--wine);
}

/* L-rule: a horizontal rule that turns 90° down at its end. */
.rule-l {
  height: 2.25rem;
  border-top: 1px solid var(--rule-on-paper);
  border-right: 1px solid var(--rule-on-paper);
  margin-bottom: 0.5rem;
}
.rule-l--dark {
  border-color: var(--rule-on-dark);
}

/* Grain: barely-there print texture on dark surfaces only. Decorative. */
.section--dark { position: relative; }
.section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.section--dark > * { position: relative; z-index: 1; }

/* ---- Smoked glass ----
   One material, three surfaces. The blur is an enhancement: every glass
   surface is legible on the opaque fallback below, so text never depends on
   backdrop-filter being supported or affordable to render. */
.glass {
  background: var(--glass-solid);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  }
  /* Over a photograph the blur is the whole point, so this surface runs
     thinner and blurs harder than the header does over flat black. */
  .hero__plate {
    background: var(--glass-bg-media);
    -webkit-backdrop-filter: blur(26px) saturate(var(--glass-saturation));
    backdrop-filter: blur(26px) saturate(var(--glass-saturation));
  }
}

/* ---- Photography ----
   The black-and-white identity is carried by the type, the paper/black
   surfaces and the corner motif — not by draining the photographs. These are
   the real room, so they run in their own colour: the blue wall light, the
   warm bulbs and the reds are the point. Hover adds a small lift only; no
   colour is ever hidden behind an interaction, so touch sees the same picture. */
.photo {
  width: 100%;
  height: auto;
  filter: contrast(1.03) saturate(0.97);
  transition: filter 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  figure:hover > picture > .photo,
  .hero__figure:hover > picture > .photo {
    filter: contrast(1.05) saturate(1.04) brightness(1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo { transition: none; }
}

/* ---- Buttons + links ---- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary {
  background: var(--paper);
  color: var(--ink);
}
.btn--primary:hover,
.btn--primary:active {
  background: var(--wine);
  color: #ffffff;
}
.btn--ghost {
  border-color: var(--text-dim-on-dark);
  color: var(--text-on-dark);
}
.btn--ghost:hover,
.btn--ghost:active {
  border-color: var(--wine-text-dark);
  color: var(--wine-text-dark);
}
/* The primary button is a PAPER block on the dark surfaces it was designed for.
   On the paper sections that same fill lands cream-on-cream (about 1.05:1
   against --paper-bright) and stops reading as a button at all, so on light
   surfaces it inverts to ink. Same class, same role, legible on both grounds. */
.section--paper .btn--primary {
  background: var(--ink);
  color: var(--paper-bright);
}
.section--paper .btn--primary:hover,
.section--paper .btn--primary:active {
  background: var(--wine);
  color: #ffffff;
}
.btn--header {
  padding: 0.5rem 1rem;
  background: var(--paper);
  color: var(--ink);
}
.btn--header:hover,
.btn--header:active {
  background: var(--wine);
  color: #ffffff;
}

.text-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--wine);
  padding-bottom: 0.15rem;
}
.section--paper .text-link { color: var(--ink); }
.text-link:hover { color: var(--wine-text-paper); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--rule-on-dark);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* The glass is painted by a layer *behind* the header content rather than on
   the header box itself: a backdrop-filter on .site-header would make it the
   containing block for the fixed mobile navigation panel nested inside it,
   and the panel would stop covering the screen. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass-solid);
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease;
}
/* Scrolled state (main.js adds .is-scrolled via a sentinel): the header moves
   off the black hero and over the paper sections, so it becomes markedly more
   opaque to keep the navigation at AA contrast. Without JS there is no state
   to toggle, so the stronger surface — readable over both — is pinned on. */
.site-header.is-scrolled::before,
html:not(.js) .site-header::before { background: var(--glass-solid-strong); }
.site-header.is-scrolled,
html:not(.js) .site-header {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.site-header.is-scrolled { box-shadow: var(--glass-shadow); }

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .site-header::before {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  }
  .site-header.is-scrolled::before,
  html:not(.js) .site-header::before { background: var(--glass-bg-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::before { transition: none; }
}
/* The sentinel sits at the very top of the document; while it is on screen the
   header is at its "top of page" state. */
.header-sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
  padding: 0 var(--pad-x);
}
.site-header__brand { flex: none; }
.site-header__brand img {
  height: 2.1rem;
  width: auto;
}
.site-nav { margin-left: auto; }
.site-nav__toggle { display: none; }
.site-nav__list {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim-on-dark);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover {
  color: var(--text-on-dark);
  border-bottom-color: var(--wine);
}
.site-nav__meta { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--black);
  padding: clamp(2.5rem, 7vh, 5.5rem) var(--pad-x) clamp(3rem, 8vh, 6rem);
}
/* The hero is one composition: the headline holds the left field, a single
   photographic plane occupies an offset right-hand region, and a compact glass
   address plate overhangs the seam between the two. The corner brackets are
   drawn above the photograph so the frame and the image intersect. */
.hero__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 32vw, 21rem);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: clamp(2rem, 5vh, 3.5rem);
  align-items: end;
  container-type: inline-size;
}
.hero__inner::before,
.hero__inner::after { z-index: 2; }
/* 404 and any future hero without a media plane. */
.hero__inner--plain { grid-template-columns: minmax(0, 1fr); }

/* The right-hand plane — now the vertical clip in its glass shell — bled out to
   meet the corner frame line rather than floating inside it. */
.hero__media {
  position: relative;
  grid-column: 2;
  align-self: end;
  margin-right: calc(-1 * clamp(1.75rem, 4vw, 3.5rem));
}
.hero__media img { display: block; }

/* Sits over the dark ceiling at the top of the frame, never over the faces,
   and overhangs onto the black field so it bridges type and photograph. */
.hero__plate {
  position: absolute;
  top: clamp(1.25rem, 4vw, 2.5rem);
  left: 0;
  transform: translateX(-42%);
  margin: 0;
  padding: 0.75rem 1.1rem 0.75rem 0.9rem;
  border-left: 2px solid var(--wine);
  color: var(--text-on-dark);
  white-space: nowrap;
  z-index: 3;
}

/* The headline is measured against its own column, so it fills the type field
   at every width instead of chasing the viewport past the 72rem cap. */
.hero__type {
  grid-column: 1;
  align-self: end;
  container-type: inline-size;
}

.hero__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Sized against the hero grid rather than the viewport: past ~1280px the
     hero stops widening, so a vw-based headline would outgrow its column. */
  font-size: clamp(3.4rem, 9vw, 10.5rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper-bright);
  display: flex;
  flex-direction: column;
}
@supports (container-type: inline-size) {
  .hero__heading { font-size: clamp(3.4rem, 24cqw, 11rem); }
}
.hero__line--mid {
  color: var(--label-on-dark);
  margin-left: clamp(1.5rem, 8vw, 7rem);
}
@supports (-webkit-text-stroke: 2px black) {
  .hero__line--mid {
    color: transparent;
    -webkit-text-stroke: 2px var(--label-on-dark);
  }
}
.hero__line--corner {
  align-self: flex-end;
  border-bottom: 3px solid var(--wine);
  padding-bottom: 0.05em;
}
.hero__period { color: var(--wine-text-dark); }
.hero__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem 3rem;
}
.hero__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  min-width: min(100%, 27rem);
}
.hero__support {
  max-width: 27rem;
  margin: 0;
  font-size: 1.125rem;
  color: var(--text-dim-on-dark);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* ---- Hero clip ----
   The one moving image on the page, in a smoked-glass shell. The glass is a
   thin translucent mat AROUND the clip — near-black, hard blur, 1px light edge,
   inset highlight, oxblood left rule, square corners. Nothing is laid over the
   picture: no scrim, no tint, no gradient, no control, no label. The room, the
   screens, the DJ and the movement all have to stay plainly visible, so the
   glass frames the video and never drains it. The clip autoplays muted and
   loops (see index.html); there is no playback UI to style. */
.film {
  position: relative;
  margin: 0;
  padding: clamp(0.4rem, 0.9vw, 0.6rem);
  background: var(--glass-solid);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--wine);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .film {
    background: var(--glass-bg-media);
    -webkit-backdrop-filter: blur(26px) saturate(var(--glass-saturation));
    backdrop-filter: blur(26px) saturate(var(--glass-saturation));
  }
}
.film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1280;
  background: var(--charcoal);
  object-fit: cover;
  /* A touch of lift only — the clip was shot in a dark room and needs to read,
     not to be stylised. No saturation is removed. */
  filter: contrast(1.04) brightness(1.06);
}
/* Autoplay refused by the browser: the native control appears (main.js) and the
   poster stays. Nothing else changes. */
.film[data-autoplay="blocked"] .film__video { filter: none; }

/* ---- Live Open / Closed status ----
   A compact operational instrument in the smoked-glass vocabulary. Colour lives
   only in the indicator dot + glow; the STATE WORD (OPEN NOW / CLOSED / HOURS)
   and the next-transition line carry the meaning, so nothing depends on colour. */
.status { position: relative; }
.status__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
  border-left: 2px solid var(--wine);
  color: var(--text-on-dark);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
}
.status__dot {
  width: 0.6rem; height: 0.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--label-on-dark);
  box-shadow: 0 0 0 3px rgba(147, 144, 138, 0.14);
}
.status[data-status-mode="open"] .status__dot {
  background: #4ea36b;
  box-shadow: 0 0 0 3px rgba(78, 163, 107, 0.18), 0 0 10px 1px rgba(78, 163, 107, 0.38);
}
.status[data-status-mode="closed"] .status__dot {
  background: #c76470;
  box-shadow: 0 0 0 3px rgba(199, 100, 112, 0.16), 0 0 9px 1px rgba(199, 100, 112, 0.32);
}
.status__text { display: flex; flex-direction: column; line-height: 1.25; }
.status__state {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.status__detail {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim-on-dark);
}
.status__chevron {
  width: 0.5rem; height: 0.5rem;
  flex: none;
  margin-left: 0.15rem;
  border-right: 2px solid var(--text-dim-on-dark);
  border-bottom: 2px solid var(--text-dim-on-dark);
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 200ms ease;
}
.status__toggle[aria-expanded="true"] .status__chevron {
  transform: translateY(0.05em) rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
  .status__chevron { transition: none; }
}
.status__panel {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  max-width: 22rem;
  background: var(--glass-solid-strong);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--wine);
  box-shadow: var(--glass-shadow);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .status__panel {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturation));
    backdrop-filter: blur(20px) saturate(var(--glass-saturation));
  }
}
html.js .status__panel[hidden] { display: none; }
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-dim-on-dark);
}
.hours-row + .hours-row { border-top: 1px solid var(--rule-on-dark); }
.hours-row__day { text-transform: uppercase; }
.hours-row.is-today { color: var(--text-on-dark); }
.hours-row.is-today .hours-row__day::after {
  content: ' · today';
  color: var(--wine-text-dark);
}
/* The panel holds the weekly schedule and nothing else. The old "hours pending"
   note and its phone link are gone with the neutral state they belonged to. */

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: clamp(3.5rem, 9vh, 6.5rem) var(--pad-x); }
.section__inner { max-width: 72rem; margin: 0 auto; }
.section--paper {
  background: var(--paper);
  color: var(--ink);
}
/* The Specials ledger follows The Corner, so two paper sections meet. A step to
   the brighter paper plus one hairline keeps them from reading as a single long
   light slab, without breaking the black/paper alternation the page runs on. */
.section--paper-bright { background: var(--paper-bright); }
.section--paper + .section--paper { border-top: 1px solid var(--rule-on-paper); }
.section--dark { background: var(--black); }

.section__head { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.section__number { margin: 0 0 0.75rem; color: var(--ink-soft); }
.section--dark .section__number { color: var(--label-on-dark); }

.section__heading {
  margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* 01 — The Corner */
/* Copy and the practical plate hold the left column; the photograph runs the
   full height of the right one and meets them along a single vertical rule. */
.corner-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}
/* Copy at the top of the column, the practical plate anchored at its foot. */
.corner-grid__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vh, 3.5rem);
}
.address-plate { max-width: 26rem; }
.corner-figure {
  align-self: stretch;
  border-left: 1px solid var(--rule-on-paper);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.corner-figure img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;   /* keeps both people and the back bar in frame */
}
.corner-grid__copy p {
  max-width: var(--measure);
  color: var(--ink-soft);
}
.corner-grid__copy em { font-style: normal; font-weight: 600; color: var(--ink); }

/* The photograph and the address plate share one column and one vertical rule
   with the copy, so image, practical detail and text all meet at 90°. */
.corner-figure { margin: 0; }
.corner-figure img { display: block; }

.address-plate {
  padding: 2rem 1.75rem;
  background: var(--paper-bright);
}
.address-plate__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.9rem;
}
.address-plate__lines {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
}
.address-plate__lines a {
  color: inherit;
  text-decoration: none;
}
.address-plate__lines a:hover { color: var(--wine-text-paper); }

/* 02 — The Week (drink specials)
   A ledger, not a card deck: day names ranged along a left column, drinks and
   prices ranged along a right one, a single hairline between rows. Editorial
   and flat, the way the board over the bar reads. The only colour is the
   oxblood day rule and the TONIGHT mark — and TONIGHT is a word first, so the
   current night is never signalled by colour alone. */
.section__lede {
  max-width: var(--measure);
  margin: -0.5rem 0 clamp(2rem, 5vh, 3rem);
  color: var(--ink-soft);
  font-size: 1.125rem;
}

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(9rem, 2fr) minmax(0, 7fr);
  gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.1rem, 2.6vh, 1.6rem) 0;
  border-bottom: 1px solid var(--rule-on-paper);
}
.ledger__day {
  margin: 0;
  align-self: start;
  font-weight: 700;
  color: var(--ink);
  border-left: 2px solid var(--rule-on-paper);
  padding-left: 0.9rem;
}
.ledger__row.is-tonight .ledger__day { border-left-color: var(--wine); }

/* The current night, named. Sits under the day so the row never reflows when
   it appears or moves on at 2:20 AM. */
.ledger__tonight {
  display: block;
  margin-top: 0.15rem;
  color: var(--wine-text-paper);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Held to a short measure so the drink and its price stay one unit — a ledger
   line, not a name at one end of the page and a number at the other. */
.ledger__items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 28rem;
}
.ledger__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.15rem 0;
}
.ledger__name {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
}
.ledger__price {
  flex: none;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 03 — The Night */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-on-dark);
}
.diptych__panel {
  padding: 2rem 2.25rem 2rem 0;
}
.diptych__panel + .diptych__panel {
  border-left: 1px solid var(--rule-on-dark);
  padding-left: 2.25rem;
  padding-right: 0;
}
.diptych__label {
  color: var(--wine-text-dark);
  margin: 0 0 0.75rem;
}
.diptych__panel p:not(.diptych__label) {
  color: var(--text-dim-on-dark);
  max-width: 30rem;
}
/* The copy and the composed portrait occupy one row. The copy stacks inside its
   column so the two sides run to comparable heights and neither leaves a hole. */
.night-open {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* Both columns start on the same line. The copy simply runs out before the
     photograph does — ordinary editorial behaviour — rather than floating in
     the middle of an empty field. */
  align-items: start;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
.night-open .diptych { grid-template-columns: minmax(0, 1fr); }
.night-open .diptych__panel { padding-right: 0; }
.night-open .diptych__panel + .diptych__panel {
  border-left: 0;
  border-top: 1px solid var(--rule-on-dark);
  padding-left: 0;
}
/* Squared off, like every other corner on the page, and held to a height that
   sits with the copy beside it instead of towering over it. The crop favours
   the upper frame, where the faces and the Corner sign are. */
.night-lead { margin: 0; }
.night-lead .photo {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ---- Reconstructed sequences ----
   Each run is ONE photograph that was sliced into 4:5 slides for an Instagram
   carousel. Laid edge to edge with no gap and at identical scale, the slices
   re-form: white internal framing, cropped figures and wall lines run straight
   across every join. That only works if the slides stay the same width as each
   other and nothing is inserted between them — so: no gap, no border, no
   radius, no shadow, no hover transform on the slides.
   The six-slide run wraps after three, which puts its single intentional break
   between slides 3 and 4; the row gap is what says "this line continues below"
   rather than "these two edges meet". */
/* The band is edge-to-edge: it cancels the section's horizontal padding with a
   SYMMETRIC negative margin and carries no max-width of its own. Capping the
   band here is what used to break large screens — a fixed negative margin on
   both sides plus a max-width over-constrains the box, and CSS resolves that by
   giving all the leftover width to the right-hand margin, so the wall pinned
   itself to the left edge and left a dead black column on the right (640px of
   it at 2560px wide). The cap now lives on each run, where `margin-inline: auto`
   can still centre it. */
.night-runs {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  margin-inline: calc(-1 * var(--pad-x));
}
.night-run {
  display: grid;
  margin: 0;
  gap: 0;
  background: var(--true-black);
  /* Each run caps itself and centres inside the full-bleed band, so the outer
     gutters are always equal. The cap grows with the viewport instead of
     stopping dead at one width: full bleed up to 1920px, then widening with the
     screen so a large monitor gains picture rather than matting, and finally
     holding at 170rem so the slides never outrun the 1280px source assets. */
  --run-max: clamp(120rem, 82vw, 170rem);
  width: min(100%, var(--run-max));
  margin-inline: auto;
}
.night-run + .night-run { margin-top: clamp(2rem, 5vh, 3.5rem); }
.night-run--six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.75rem; }
.night-run--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* A separate, shorter carousel — held to the text column's width so it reads
     as a second, quieter sequence rather than a continuation of the first. */
  --run-max: 72rem;
}
.run__slide { display: block; min-width: 0; }
/* The slides are pieces of one picture, so they get none of the per-figure
   photo treatment — no hover lift, no filter that could differ across a join. */
.night-run .photo {
  width: 100%;
  height: auto;
  filter: none;
  transition: none;
}

.night-statement {
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper-bright);
  text-align: right;
  border-bottom: 1px solid var(--rule-on-dark);
  padding-bottom: 0.35em;
}

/* 04 — Visit
   Map on the left, the practical plate on the right, meeting along one vertical
   rule. The plate is plain markup and works on its own; the map is the
   enhancement beside it. */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}

.visit__map-wrap {
  position: relative;
  min-height: 22rem;
  background: var(--charcoal);
  border: 1px solid var(--ink);
}
/* No script, no map — and no empty grey rectangle either. The plate then takes
   the full width on its own. */
html:not(.js) .visit__map-wrap { display: none; }
html:not(.js) .visit { grid-template-columns: minmax(0, 1fr); }

.visit__map {
  position: absolute;
  inset: 0;
  background: var(--charcoal);
}
/* Corner runs black and white; the tiles are desaturated to sit inside that
   system, but only lightly graded — streets, the block and the labels all have
   to stay readable, so this is a grey map, not a dark one. */
.visit__map.is-ready .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.06) brightness(0.98);
}
.visit__map::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--label-on-dark);
  content: 'Loading map';
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.visit__map.is-ready::before,
.visit__map.is-fallback::before { content: none; }
.visit__map:focus-visible { outline: 2px solid var(--wine); outline-offset: -2px; }

.visit__map-message {
  position: absolute;
  right: 1rem; bottom: 1rem; left: 1rem;
  z-index: 500;                       /* above Leaflet's panes */
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--glass-solid-strong);
  border-left: 2px solid var(--wine);
  color: var(--text-on-dark);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Corner's marker: a square oxblood block with a warm-white keyline, squared
   off like every other corner on the page. Nothing bounces or pulses. */
.corner-marker__box {
  display: block;
  width: 22px;
  height: 22px;
  background: var(--wine);
  border: 2px solid var(--paper-bright);
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.8);
}

/* Leaflet chrome, squared off and de-branded to match the site. */
.visit__map .leaflet-container { font-family: var(--font-text); background: var(--charcoal); }
.visit__map .leaflet-control-zoom a {
  border-radius: 0;
  background: var(--paper-bright);
  color: var(--ink);
  border-color: var(--rule-on-paper);
}
.visit__map .leaflet-control-zoom a:hover { background: #ffffff; color: var(--wine-text-paper); }
.visit__map .leaflet-bar { border-radius: 0; border: 1px solid var(--rule-on-paper); }
.visit__map .leaflet-control-attribution {
  background: rgba(242, 239, 233, 0.9);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.visit__map .leaflet-control-attribution a { color: var(--wine-text-paper); }

.visit__plate {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vh, 1.75rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-bright);
  border-left: 2px solid var(--wine);
}
.visit__block { margin: 0; }
.visit__label {
  margin: 0 0 0.6rem;
  color: var(--wine-text-paper);
  font-weight: 700;
}
.visit__value {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.visit__tel {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--wine);
}
.visit__tel:hover { color: var(--wine-text-paper); }
.visit__cta { margin-top: auto; align-self: flex-start; }

/* The weekly hours, on paper. Same rows as the hero disclosure, same data. */
.hours-list--visit .hours-row {
  color: var(--ink-soft);
  border-color: var(--rule-on-paper);
}
.hours-list--visit .hours-row + .hours-row { border-top: 1px solid var(--rule-on-paper); }
.hours-list--visit .hours-row.is-today { color: var(--ink); font-weight: 700; }
.hours-list--visit .hours-row.is-today .hours-row__day::after { color: var(--wine-text-paper); }

/* ==========================================================================
   04 — Rentals
   The ask, set as a two-column editorial spread: the framing copy holds the
   left column and the form the right, meeting along one vertical rule like
   every other pairing on the page. Corner's vocabulary throughout — square
   corners, mono labels, the oxblood left rule, no rounding and no shadow — so
   it reads as part of this site rather than a form component dropped in.
   ========================================================================== */
.rental {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
/* The form is the taller column, so the copy is anchored at both ends — heading
   and framing at the top, the phone line pinned to the foot — instead of
   stopping halfway and leaving a hole beside the form. Same device as the
   address plate in The Corner and the directions button in Visit. */
.rental__intro {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
}
.rental__call { margin-top: auto; padding-top: 2rem; }
.rental__intro .section__heading { margin-bottom: 1.25rem; }
.rental__lede {
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: 1rem;
}
.rental__boundary { color: var(--ink-soft); max-width: var(--measure); }
.rental__call { color: var(--ink-soft); max-width: var(--measure); }
.rental__call a {
  color: var(--wine-text-paper);
  text-decoration: none;
  border-bottom: 2px solid var(--wine);
}

.inquiry-form {
  border-left: 1px solid var(--rule-on-paper);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}
/* Off-screen but still submitted, per Netlify's honeypot pattern. */
.honeypot {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.inquiry-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem clamp(1rem, 2vw, 1.75rem);
}
.form-field { display: grid; gap: 0.45rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-field__optional {
  color: var(--ink-soft);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
}
.form-field ::placeholder { color: #6f6f75; opacity: 1; }
.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.8rem;
  /* WCAG 2.2 SC 1.4.11: a form control's boundary needs 3:1 against BOTH the
     field fill and the surface behind it. The paper hairline (--rule-on-paper)
     is fine for decorative rules but only reaches ~1.5:1 here, so inputs get
     their own darker warm grey: 3.62:1 on white, 3.44:1 on --paper-bright. */
  border: 1px solid #8d8677;
  border-radius: 0;                 /* squared off, like every corner here */
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
}
.form-field textarea { min-height: 8rem; resize: vertical; }
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--wine);
  outline: 2px solid var(--wine-text-paper);
  outline-offset: 1px;
}
/* Only flag a field the visitor has actually left invalid after submitting —
   never while they are still typing into an empty form. */
.inquiry-form.is-submitted :invalid {
  border-color: var(--wine);
  box-shadow: inset 2px 0 0 var(--wine);
}
.inquiry-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}
.form-privacy {
  margin: 0;
  max-width: 24rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.form-privacy a { color: var(--wine-text-paper); }
.form-local-status {
  flex-basis: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border-left: 2px solid var(--wine);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.03em;
}
html.js .form-local-status[hidden] { display: none; }

@media (max-width: 900px) {
  .rental { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 4vh, 2.75rem); }
  .inquiry-form {
    border-left: 0;
    border-top: 1px solid var(--rule-on-paper);
    padding-left: 0;
    padding-top: clamp(1.75rem, 4vh, 2.5rem);
  }
}
@media (max-width: 560px) {
  /* One field per row: two columns at this width would put a date picker and a
     number spinner into measures too narrow to operate. */
  .inquiry-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Future menu + events modules (rendered by main.js only when enabled
   with valid content — see data/menu.js, data/events.js, ../README.md)
   ========================================================================== */
.menu-section .section__intro,
.events-section .section__intro {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.menu-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.menu-category__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.4rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.4rem;
}
.menu-category__note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}
.menu-items { list-style: none; margin: 1rem 0 0; padding: 0; }
.menu-item { padding: 0.65rem 0; border-bottom: 1px solid var(--rule-on-paper); }
.menu-item__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.menu-item__name { font-weight: 600; }
.menu-item__dots {
  flex: 1;
  border-bottom: 1px dotted var(--rule-on-paper);
  transform: translateY(-0.25em);
}
.menu-item__price {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: nowrap;
}
.menu-item__desc {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.menu-item__tags {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-text-paper);
}
.events-list { list-style: none; margin: 0; padding: 0; }
.events-list li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-on-dark);
}
.events-list .events-label { color: var(--wine-text-dark); }
.events-list .events-detail { color: var(--text-dim-on-dark); margin: 0.2rem 0 0; }

/* ==========================================================================
   Utility pages (thanks, 404) and the privacy notice
   Same vocabulary as the site, at a smaller scale: these are rooms off the main
   page, not a second design.
   ========================================================================== */
.utility {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.utility__inner { width: 100%; }
.utility__eyebrow { color: var(--label-on-dark); margin: 0 0 1.25rem; }
.utility .hero__heading { font-size: clamp(3rem, 12vw, 7rem); }
.utility__foot { margin-top: clamp(2rem, 5vh, 3rem); }
.utility .hero__support { max-width: 34rem; }

.legal { padding-top: clamp(3rem, 8vh, 5rem); }
.legal__inner { max-width: 44rem; }
.legal .section__heading { margin-bottom: 0.75rem; }
.legal__updated { color: var(--ink-soft); margin: 0 0 clamp(2rem, 5vh, 3rem); }
.legal h2 {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.25rem 0 0.6rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--wine);
}
.legal p { color: var(--ink-soft); max-width: var(--measure); }
.legal__link,
.legal p a {
  color: var(--wine-text-paper);
  text-decoration: none;
  border-bottom: 2px solid var(--wine);
}
.legal__back { margin-top: clamp(2.5rem, 6vh, 3.5rem); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--true-black);
  border-top: 1px solid var(--rule-on-dark);
  padding: clamp(3rem, 7vh, 4.5rem) var(--pad-x) 2rem;
}
.site-footer__inner { max-width: 72rem; margin: 0 auto; }
.site-footer__logo {
  height: 2.6rem;
  width: auto;
  margin-bottom: 2.25rem;
}
.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 4rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-on-dark);
}
.site-footer__address {
  margin: 0;
  color: var(--label-on-dark);
}
.site-footer__address a {
  color: inherit;
  text-decoration: none;
}
.site-footer__address a:hover { color: var(--text-on-dark); }
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__nav a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--label-on-dark);
}
.site-footer__nav a:hover { color: var(--text-on-dark); }
.site-footer__legal {
  margin: 1.5rem 0 0;
  color: var(--label-on-dark);
}

/* ==========================================================================
   Reveal animation (JS adds .is-in; no-JS shows everything immediately)
   ========================================================================== */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn, .site-nav__panel { transition: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  /* Deliberate vertical hero: headline, then the photograph as a wider band
     with the address plate riding its top-left corner, then the copy and
     actions. Not the desktop grid squeezed. */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.75rem, 6vh, 3.75rem);
  }
  .hero__type,
  .hero__media,
  .hero__foot { grid-column: 1; }
  /* The vertical clip is capped in height so the portrait plane never turns the
     mobile hero into a metre-tall column; it crops from the centre, keeping the
     DJ and the decks in frame. */
  .hero__media {
    margin-right: 0;
    max-width: 24rem;
  }
  .film__video {
    aspect-ratio: auto;
    height: min(56vh, 24rem);
    object-position: 50% 32%;
  }
  /* Straddles the top edge, over the dark ceiling, so it never sits on the
     action at the foot of the clip. */
  .hero__plate {
    top: 0;
    left: 0;
    transform: translate(clamp(0.75rem, 4vw, 2rem), -50%);
  }

  /* Copy, then the photograph, then the address plate. */
  .corner-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, 4vh, 2.75rem);
  }
  .corner-grid__col { display: contents; }
  .corner-figure {
    order: 1;
    align-self: start;
    max-width: 30rem;
    border-left: 0;
    padding-left: 0;
  }
  .corner-figure img { height: auto; }
  .address-plate { order: 2; max-width: 24rem; }

  /* Copy first, then the photograph. */
  .night-open { grid-template-columns: minmax(0, 1fr); }
  .night-lead { max-width: 30rem; }

  /* Map above, plate below. Stacked, the map runs the full width, so it needs
     real height or it reads as a letterbox strip rather than a map. */
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit__map-wrap { min-height: min(26rem, 60vh); }
}

/* Sequence layout. The order NEVER changes — only how many slides share a row,
   so a narrower screen reads the same run in the same direction, just folded
   sooner. Below 600px each slide takes the full width, because a 4:5 collage
   split two-up on a phone would make its internal panels unreadable. */
@media (max-width: 1023px) {
  .night-run--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .night-run--six,
  .night-run--two { grid-template-columns: minmax(0, 1fr); }
  /* Stacked slides are no longer edge-continuous, so a hair of black between
     them is honest: it reads as a sequence rather than a false vertical join. */
  .night-run { row-gap: 0.5rem; }
}

@media (max-width: 720px) {
  :root { --header-h: 3.6rem; }

  .btn--header { display: none; }

  /* Mobile navigation: full-screen panel */
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: 1px solid var(--rule-on-dark);
    color: var(--text-on-dark);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
  }
  .site-nav__toggle-bars {
    display: inline-block;
    width: 1rem;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor;
    transform: translateY(-3px);
  }
  /* Full-screen smoked-glass panel. Heavier than the header so the large
     navigation labels stay readable over whatever is behind them. */
  html.js .site-nav__panel {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--glass-solid-strong);
    padding: 2.5rem var(--pad-x);
    display: none;
    flex-direction: column;
    overflow-y: auto;
    border-top: 1px solid var(--glass-border);
  }
  @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    html.js .site-nav__panel {
      background: var(--glass-bg-strong);
      -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturation));
      backdrop-filter: blur(20px) saturate(var(--glass-saturation));
    }
  }
  html.js .site-nav__panel.is-open { display: flex; }
  html.js .site-nav__panel .site-nav__list {
    flex-direction: column;
    gap: 0.5rem;
  }
  html.js .site-nav__panel .site-nav__list a {
    display: block;
    font-family: var(--font-display);
    font-size: 2.6rem;
    letter-spacing: 0.02em;
    color: var(--paper-bright);
    border-bottom: 1px solid var(--rule-on-dark);
    padding: 0.75rem 0.25rem;
  }
  html.js .site-nav__panel .site-nav__list a:hover { color: var(--wine-text-dark); }
  html.js .site-nav__panel .site-nav__meta {
    display: block;
    margin-top: auto;
    padding-top: 2rem;
    color: var(--label-on-dark);
  }
  /* No-JS: keep links reachable in a simple wrapped row */
  html:not(.js) .site-nav__toggle { display: none; }
  html:not(.js) .site-nav__list { flex-wrap: wrap; gap: 0.9rem; justify-content: flex-end; }

  .hero { padding-left: 1rem; padding-right: 1rem; }
  .hero__inner { padding: 1.4rem 1.1rem; }
  .hero__line--mid { margin-left: 0.75rem; -webkit-text-stroke-width: 1.5px; }

  .corner-figure { max-width: 24rem; }

  .diptych { grid-template-columns: 1fr; }
  .diptych__panel { padding: 1.75rem 0; }
  .diptych__panel + .diptych__panel {
    border-left: 0;
    border-top: 1px solid var(--rule-on-dark);
    padding-left: 0;
  }

  /* Ledger: the day becomes a heading over its drinks rather than a column, so
     nothing is squeezed into two narrow measures. */
  .ledger__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
  .ledger__name { font-size: 1.2rem; }

  .events-list li { grid-template-columns: 1fr; gap: 0.25rem; }
}

@media (max-width: 420px) {
  .hero__heading { font-size: clamp(3rem, 16vw, 3.6rem); }
  .hero__actions { width: 100%; }
  /* Share the row when both fit, wrap as whole buttons when they do not —
     never break the label across two lines. */
  .hero__actions .btn { flex: 1 1 auto; text-align: center; white-space: nowrap; }
  .site-header__brand img { height: 1.8rem; }
}