/* GAZDA design system — "Midnight Salon".
   Tokens → base → layout → components → sections. Page-specific rules live at the end, grouped by page. */

/* ---------- Fonts ---------- */
/* Served from assets/fonts (SIL Open Font License, licences alongside). Each file covers one character set and is
   only downloaded when a page uses characters from it: Latin, extended Latin (Ž in Živeli), maths and symbols. */
/* Bodoni Moda italic, math */
@font-face {font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-italic-math.woff2') format('woff2'); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
/* Bodoni Moda italic, symbols */
@font-face {font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-italic-symbols.woff2') format('woff2'); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda italic, latin-ext */
@font-face {font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda italic, latin */
@font-face {font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Bodoni Moda, math */
@font-face {font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-math.woff2') format('woff2'); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
/* Bodoni Moda, symbols */
@font-face {font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-symbols.woff2') format('woff2'); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda, latin-ext */
@font-face {font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda, latin */
@font-face {font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/bodoni-moda-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Instrument Sans, latin-ext */
@font-face {font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Instrument Sans, latin */
@font-face {font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Libre Baskerville, latin-ext */
@font-face {font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/libre-baskerville-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Libre Baskerville, latin */
@font-face {font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/libre-baskerville-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0c0907;
  --bg-2: #14100c;
  --surface: #1b1510;
  --text: #f1e8da;
  --text-2: #ddd1bd;
  --muted: #b2a48c;
  --line: rgba(201, 164, 90, .2);
  --line-strong: rgba(201, 164, 90, .48);
  --brass: #c9a45a;
  --brass-hi: #e6c77e;
  --brass-ink: #1a1208;
  --oxblood: #3a1113;
  --oxblood-2: #4c181a;
  /* Paper is aged parchment under lamplight, not bright linen; cards printed on it are one shade lighter. */
  --paper: #d2c3a5;
  --paper-2: #c4b392;
  --paper-card: #e2d5bb;
  --paper-ink: #1a120a;
  --paper-muted: #47392a;
  --paper-line: rgba(60, 42, 18, .32);
  --paper-accent: #664310;

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --logo: 'Libre Baskerville', 'Baskerville', Georgia, serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(88px, 12vw, 168px);
  --header-h: 76px;

  --fs-label: .75rem;
  --fs-small: .875rem;
  --fs-body: 1.0625rem;
  --fs-lede: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-h3: clamp(1.4rem, 2vw, 1.75rem);
  --fs-h2: clamp(2.5rem, 5.4vw, 4.75rem);
  --fs-display: clamp(3.25rem, 9vw, 8.25rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

/* Light theme swaps the page ground for warm parchment (deliberately not bright cream, so it sits with the paper
   sections and never glares); hero, oxblood and footer bands stay dark on purpose. Paper sections are one shade deeper. */
body[data-theme="light"] {
  --bg: #ddd0b6;
  --bg-2: #d3c5a9;
  --surface: #e9ddc6;
  --text: #1a120a;
  --text-2: #3b2d1e;
  --muted: #54442f;
  --line: rgba(60, 42, 18, .24);
  --line-strong: rgba(60, 42, 18, .5);
  --brass: #664310;
  --brass-hi: #4f3509;
  --brass-ink: #fdf8ee;
  --paper: #cbbb98;
  --paper-2: #bead89;
  --paper-card: #e2d5bb;
  color-scheme: light;
}

/* Scope that always renders dark, whatever the theme. */
.on-dark {
  --bg: #0c0907;
  --bg-2: #14100c;
  --surface: #1b1510;
  --text: #f1e8da;
  --text-2: #ddd1bd;
  --muted: #b8aa92;
  --line: rgba(201, 164, 90, .22);
  --line-strong: rgba(201, 164, 90, .5);
  --brass: #c9a45a;
  --brass-hi: #e6c77e;
  --brass-ink: #1a1208;
  color: var(--text);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 450 var(--fs-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Bodoni Moda thins its hairlines as the type grows (optical size). Holding it at the text cut keeps the
     hairlines readable at headline sizes, in brass on paper above all, while staying a Didone.
     Instrument Sans has no optical size, so this only touches the serif. */
  font-variation-settings: 'opsz' 14;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--brass); }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
::selection { background: var(--brass); color: var(--brass-ink); }

.skip {
  position: fixed; z-index: 200; top: 12px; left: 12px;
  padding: 10px 16px; background: var(--brass); color: var(--brass-ink);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--paper {
  --text: var(--paper-ink); --text-2: #33271a; --muted: var(--paper-muted);
  --line: var(--paper-line); --line-strong: rgba(60, 42, 18, .55); --brass: var(--paper-accent); --brass-hi: #4f3509; --brass-ink: #fdf8ee;
  background: var(--paper); color: var(--text); color-scheme: light;
}
.section--oxblood { background: radial-gradient(120% 90% at 85% 10%, var(--oxblood-2), var(--oxblood) 60%, #240a0b); }
.section--ink { background: var(--bg-2); }

/* ---------- Typography helpers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  color: var(--brass);
  font: 600 var(--fs-label)/1.2 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
}
.kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.display { font-size: var(--fs-display); line-height: .92; letter-spacing: -.025em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.12; }
.lede, .prose .lede { font: 600 var(--fs-lede)/1.5 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text); }
.muted { color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--text-2); }
.numeral {
  display: block;
  margin-bottom: 18px;
  font: 600 clamp(3.5rem, 7vw, 6rem)/.9 var(--serif);
  color: var(--brass); opacity: .6;
  user-select: none;
}
/* Strong enough for 3:1 against every ground it sits on, smoke, ink, oxblood and day linen. */
body[data-theme="light"] .numeral { opacity: .75; }
body[data-theme="light"] .on-dark .numeral { opacity: .6; }

/* ---------- Buttons & links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px;
  border: 1px solid transparent;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--brass { background: var(--brass); color: var(--brass-ink); }
.btn--brass:hover { background: var(--brass-hi); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .75rem; }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding-block: 8px;
  color: var(--brass);
  font: 600 .8125rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
}
.link-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(6px); }
.link-arrow--external::after { content: '↗'; }
.link-arrow--up::after { content: '↑'; }
.link-arrow--up:hover::after { transform: translateY(-4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}
.has-hero .site-header { position: fixed; inset: 0 0 auto; background: transparent; border-color: transparent; backdrop-filter: none; }
.has-hero .site-header.is-solid { background: color-mix(in srgb, var(--bg) 97%, transparent); border-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 28px; height: 100%; }
.brand { display: grid; gap: 3px; text-decoration: none; line-height: 1; margin-right: auto; }
/* The GAZDA logo: Libre Baskerville Bold, wide and low in contrast, with the name in spaced serif capitals beneath.
   Used for the logo only; headings stay in Bodoni. */
.brand { justify-items: center; gap: 5px; }
.footer-brand .brand { justify-items: start; }
.brand__name { font: 700 1.85rem/1 var(--logo); letter-spacing: .05em; padding-left: .05em; color: var(--brass); }
.brand__sub { font: 700 .5rem/1 var(--logo); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; color: var(--text); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; padding: 10px 12px;
  color: var(--text-2); text-decoration: none;
  font: 500 .875rem/1 var(--sans); letter-spacing: .02em;
  transition: color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--brass); }
.nav__extra { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 12px;
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
  font: 500 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.nav-toggle { display: none; }
.has-hero .site-header:not(.is-solid) { --text: #f1e8da; --text-2: #e3d6c2; --line: rgba(241, 232, 218, .28); --brass: #e0bf74; --brass-hi: #e6c77e; --muted: #cfc0a8; --brass-ink: #1a1208; }
/* Over the photo the Enquire button is outlined like the rest of the header, filling with brass on hover; it turns solid once the header does. */
.has-hero .site-header:not(.is-solid) .btn--brass { border-color: color-mix(in srgb, var(--brass) 75%, transparent); background: rgba(12, 9, 7, .28); color: var(--brass); }
.has-hero .site-header:not(.is-solid) .btn--brass:hover { border-color: var(--brass); background: var(--brass); color: var(--brass-ink); }

@media (max-width: 1080px) {
  .site-header__inner { gap: 12px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; order: 3;
    min-height: 44px; padding: 0 14px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--text);
    font: 600 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before { display: block; width: 16px; height: 1px; background: currentColor; transition: transform .25s; }
  .nav-toggle__bars::before { content: ''; transform: translateY(5px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(-90deg); }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: 99;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 24px var(--gutter) 48px; overflow-y: auto;
    background: #0c0907; --text: #f1e8da; --text-2: #cfc0a8;
  }
  .nav.open { display: flex; }
  .nav a { padding: 16px 0; border-bottom: 1px solid rgba(201, 164, 90, .18); font: 600 1.75rem/1.1 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text); }
  .nav a[aria-current="page"] { color: #e6c77e; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav__extra { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 28px; }
  .nav__extra a { font: 500 .9375rem/1.2 var(--sans); padding: 12px 0; color: var(--text-2); }
  .site-header__actions .btn { display: none; }
  body.nav-open { overflow: hidden; }
  /* backdrop-filter would make the fixed menu panel position itself inside the header. */
  .site-header, .has-hero .site-header.is-solid { backdrop-filter: none; }
  .site-header, .has-hero .site-header.is-solid { background: var(--bg); }
  .has-hero .site-header:not(.is-solid) { background: transparent; }
  .has-hero .site-header:has(.nav.open) { background: #0c0907; }
}
@media (max-width: 480px) {
  .theme-toggle__label { display: none; }
  .brand__name { font-size: 1.55rem; }
  .brand__sub { font-size: .45rem; letter-spacing: .32em; padding-left: .32em; white-space: nowrap; }
  .site-header__inner { gap: 8px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-content: end;
  min-height: max(640px, 100svh);
  padding-top: calc(var(--header-h) + 48px);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(1.01); }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 6, 5, .94) 0%, rgba(8, 6, 5, .72) 42%, rgba(8, 6, 5, .2) 100%),
    linear-gradient(0deg, rgba(8, 6, 5, .96) 0%, rgba(8, 6, 5, 0) 45%);
}
.hero__content { padding-bottom: clamp(40px, 6vw, 72px); }
.hero__content .display { max-width: 11ch; }
.hero__lede { max-width: 34ch; margin-top: 28px; font: italic 600 var(--fs-lede)/1.5 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text-2); }
.hero .actions { margin-top: 36px; }

/* The next-opening "cigar band". */
/* The notch keeps the same proportion at any height (site.js sets --notch from the band's height),
   so a taller band on a phone or in the "on the list" state still reads as a band, not a box. */
.band {
  --notch: 14px;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(24px, 4vw, 44px);
  padding: 18px max(clamp(22px, 3vw, 40px), calc(var(--notch) + 16px));
  background: linear-gradient(90deg, #b8914a, #e2c47c 50%, #b8914a);
  color: #1a1208; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%);
}
.band::before { content: ''; position: absolute; inset: 6px calc(var(--notch) + 8px); border-block: 1px solid rgba(26, 18, 8, .35); pointer-events: none; }
/* Hover brightens through an overlay inside the clipped shape; a filter can make browsers drop the clip for a frame. */
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 246, 220, .14); opacity: 0; transition: opacity .25s; pointer-events: none; }
.band:hover::after, .band:focus-visible::after { opacity: 1; }
.band__label { font: 700 .6875rem/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.band__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.band__main strong { font: 600 clamp(1.35rem, 2.4vw, 1.9rem)/1.1 var(--serif); font-variation-settings: 'opsz' 14; }
.band__main span { font: 500 .9375rem/1.3 var(--sans); }
.band__cta { font: 700 .75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 720px) {
  .band { --notch: 26px; grid-template-columns: 1fr; gap: 8px; padding-block: 18px; }
}

/* ---------- Chapters (editorial split sections) ---------- */
.chapter { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.chapter__media { grid-column: 1 / span 7; position: relative; }
.chapter__body { grid-column: 8 / -1; position: relative; }
.chapter--flip .chapter__media { grid-column: 6 / -1; order: 2; }
.chapter--flip .chapter__body { grid-column: 1 / span 5; }
.chapter__body .h2 { margin-bottom: 28px; }
.chapter__body .actions, .chapter__body .link-arrow { margin-top: 32px; }
@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter__media, .chapter__body, .chapter--flip .chapter__media, .chapter--flip .chapter__body { grid-column: auto; order: 0; }
}

.frame { position: relative; margin: 0; }
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(241, 232, 218, .35); pointer-events: none; }
.frame figcaption {
  position: absolute; left: 30px; top: 28px;
  color: #f1e8da; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.frame--tall img { aspect-ratio: 4 / 5; }

/* ---------- Printed menu card ---------- */
.menu-card {
  position: relative;
  padding: clamp(28px, 4vw, 52px);
  background: var(--paper-card);
  color: var(--paper-ink);
  box-shadow: 0 30px 60px -30px rgba(40, 25, 8, .45);
}
.menu-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--paper-line); outline: 1px solid var(--paper-line); outline-offset: -5px; pointer-events: none; }
.menu-card__head { text-align: center; padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--paper-line); }
/* The real GAZDA wordmark (assets/logo), cropped to its letters: the Didone set as type loses its hairlines on paper. */
.menu-card__mark { display: block; width: min(240px, 72%); height: auto; aspect-ratio: 4; margin: 0 auto; object-fit: cover; object-position: 50% 0; }
.menu-card__head span { display: block; margin-top: 8px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--paper-muted); }
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-list li { padding: 18px 0; border-bottom: 1px dotted var(--paper-line); }
.menu-list li:last-child { border-bottom: 0; }
.menu-item__row { display: flex; align-items: baseline; gap: 12px; }
.menu-item__name { font: 600 1.3rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.menu-item__row::after { content: ''; flex: 1; order: 1; border-bottom: 1px dotted var(--paper-line); transform: translateY(-4px); }
.menu-item__tag { order: 2; font: 600 .6875rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-accent); white-space: nowrap; }
.menu-item__desc { margin-top: 6px; color: var(--paper-muted); font-size: .9375rem; line-height: 1.55; }
.menu-card__foot { margin-top: 18px; text-align: center; font: italic 600 .9375rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; color: var(--paper-muted); }

/* ---------- Steps / ritual ---------- */
.section-head { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 32px 64px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head .kicker { margin-bottom: 18px; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 32px 28px 8px 0; border-top: 1px solid var(--line-strong); }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps__time { display: block; margin-bottom: 26px; font: 600 2.75rem/1 var(--serif); color: var(--brass); }
.steps h3 { font-size: 1.5rem; margin-bottom: 12px; }
.steps p { color: var(--text-2); font-size: .98rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 26px 0 18px; border-left: 0; }
}

/* ---------- Membership feature ---------- */
.member-feature .frame img { aspect-ratio: 4 / 5; }
.mini-pass {
  position: absolute; right: clamp(-12px, -2vw, -32px); bottom: clamp(-28px, -3vw, -44px);
  width: min(66%, 340px); aspect-ratio: 1.586;
  display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px;
  /* The member card's face: walnut, a brass edge and the inset rule. */
  background: linear-gradient(135deg, #221912, #0d0a08 55%, #2b1f12);
  border: 1px solid rgba(201, 164, 90, .6); border-radius: 12px;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .9), inset 0 0 0 5px rgba(12, 9, 7, .7), inset 0 0 0 6px rgba(201, 164, 90, .25);
  color: #f1e8da; transform: rotate(-4deg); overflow: hidden;
}
.mini-pass__row { display: flex; justify-content: space-between; gap: 10px; font: 600 .5rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #c9a45a; }
.mini-pass__mark { display: grid; justify-items: center; gap: 6px; }
.mini-pass__mark b { font: 600 2.2rem/1 var(--serif); font-variation-settings: 'opsz' 14; letter-spacing: .1em; color: #e0bf74; }
.mini-pass__mark small { font: 600 .4375rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: #cfc0a8; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 26px 0 30px; padding-block: 18px; border-block: 1px solid var(--line); }
.price-line strong { font: 600 2.25rem/1 var(--serif); color: var(--brass-hi); }
.price-line span { font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.benefits li { position: relative; padding-left: 22px; color: var(--text-2); font-size: .98rem; line-height: 1.45; }
/* Private hire on the events page: when, notice, price and the member rate. */
.hire-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.hire-terms dt { margin-bottom: 6px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.hire-terms dd { margin: 0; color: var(--text-2); font-size: .98rem; line-height: 1.45; }
@media (max-width: 560px) { .hire-terms { grid-template-columns: 1fr; } }
.benefits li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--brass); transform: rotate(45deg); }
@media (max-width: 560px) { .benefits { grid-template-columns: 1fr; } }
/* ---------- House icons: benefits and the Events ticket, in the menu's illustrated style ---------- */
/* Drawn by assets/js/house-icons.js. Brass outlines with real colour inside; each plays once as it comes into view
   (paused on its first frame until then) and simply shows its finished drawing for reduced motion. */
.house-icon { --house-line: var(--brass); --house-ink: #2a1d13; display: inline-flex; flex: none; width: 32px; height: 32px; }
.house-icon svg { width: 100%; height: 100%; overflow: visible; }
.house-icon__line { fill: none; stroke: var(--house-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.house-icon__edge { stroke: #8a6a2e; stroke-width: .8; stroke-linejoin: round; }
.house-icon__hole { fill: var(--house-ink); }
.house-icon__mark { fill: none; stroke: var(--house-ink); stroke-width: 1.6; stroke-linecap: round; }
.house-icon__dot { fill: var(--house-ink); }
.house-icon__brass { fill: #c9a45a; stroke: #8a6a2e; stroke-width: .8; }
.house-icon__brass-line { fill: none; stroke: #c9a45a; stroke-width: 2.6; stroke-linecap: round; }
.house-icon__wax { fill: #efe3c8; stroke: var(--house-line); stroke-width: .8; }
.house-icon__paper { fill: #efe3c8; stroke: var(--house-line); stroke-width: 1; stroke-linejoin: round; }
.house-icon__pocket { fill: #e2d1ad; stroke: var(--house-line); stroke-width: 1; stroke-linejoin: round; }
.house-icon__card-face { fill: #fffaf0; stroke: rgba(102, 67, 16, .35); stroke-width: .6; }
.house-icon__card-line { fill: none; stroke: #b59a6a; stroke-width: 1; stroke-linecap: round; }
.house-icon--ticket .house-icon__card-line { stroke-dasharray: 1.6 1.6; }
.house-icon__seal, .house-icon__claret { fill: #8e2a35; }
.house-icon__claret { stroke: var(--house-line); stroke-width: .8; }
.house-icon__punch { fill: var(--house-ink); }
.house-icon__wood { fill: #5a3420; stroke: var(--house-line); stroke-width: .8; }
.house-icon__knob { fill: #e0bf74; }
.house-icon__shadow { fill: rgba(0, 0, 0, .28); }
.house-icon__silk { fill: #1d1714; stroke: var(--house-line); stroke-width: 1; stroke-linejoin: round; }
.house-icon__knot { fill: #2c221c; stroke: var(--house-line); stroke-width: .8; }
/* Where each moving part turns or grows from, in the drawing's own units. */
.house-icon svg * { transform-box: view-box; }
.house-icon__fill, .house-icon__card, .house-icon__drop { transform-origin: 16px 16px; }
.house-icon__swing { transform-origin: 11px 16px; }
.house-icon__turn { transform-origin: 16px 16px; }
.house-icon__flame { transform-origin: 16px 11.5px; }
.house-icon__glow { transform-origin: 16px 7.5px; }
.house-icon__seal { transform-origin: 16px 21.5px; }
.house-icon__punch { transform-origin: 20px 16px; }
.house-icon__swirl { transform-origin: 16px 20px; }
.house-icon__leaf { transform-origin: 9px 16px; transform: scaleX(.5); }
.house-icon__shadow { transform-origin: 16px 28.5px; }
.house-icon__tie { transform-origin: 16px 16px; }
.house-icon__shirt { fill: #f4ecdc; }
.house-icon__satin { fill: #2c221c; stroke: var(--house-line); stroke-width: .7; stroke-linejoin: round; }
.house-icon__sheen { fill: none; stroke: rgba(255, 245, 225, .55); stroke-width: .7; stroke-linecap: round; }
.house-icon__stud { fill: #e0bf74; }
.house-icon__square { fill: #fffaf0; stroke: var(--house-line); stroke-width: .5; stroke-linejoin: round; }
.house-icon__cloth { fill: #d9e2ea; stroke: var(--house-line); stroke-width: .9; stroke-linejoin: round; }
.house-icon__seam { fill: none; stroke: rgba(40, 30, 20, .35); stroke-width: .7; stroke-linecap: round; }
.house-icon__button { fill: #8f9aa6; }
.house-icon__felt { fill: #3c4350; stroke: var(--house-line); stroke-width: .8; stroke-linejoin: round; }
.house-icon__brim { fill: #2b3039; stroke: var(--house-line); stroke-width: .8; stroke-linejoin: round; }
.house-icon--cap .house-icon__seam { stroke: rgba(255, 255, 255, .22); }
.house-icon__no { fill: none; stroke: var(--house-no, #d27a73); stroke-width: 2; stroke-linecap: round; }
.house-icon__tie--small { transform-origin: 16px 8.6px; }
.house-icon__hang { transform-origin: 16px 4.5px; }
.house-icon__rise { transform-origin: 16px 30px; }
.house-icon__square { transform-origin: 21.5px 15.6px; }
/* Dress-code tiers: one drawing in each card's corner. */
.house-icon--tuxedo .house-icon__rise > .house-icon__silk { fill: #2e241d; }
body[data-theme="light"] .house-icon--tuxedo .house-icon__rise > .house-icon__silk { fill: #1d1714; }
.tier__icon.house-icon { position: absolute; top: clamp(18px, 2.4vw, 28px); right: clamp(18px, 2.4vw, 28px); width: 60px; height: 60px; }
.tier--refused { --house-no: #d27a73; }
body[data-theme="light"] .tier--refused { --house-no: #9b3a33; }
.house-icon__velvet { fill: none; stroke: #8e2a35; stroke-width: 4.4; stroke-linecap: round; }
.house-icon__velvet-sheen { fill: none; stroke: rgba(255, 205, 200, .3); stroke-width: 1.1; stroke-linecap: round; }
.house-icon__hook { fill: #c9a45a; stroke: #8a6a2e; stroke-width: .6; }
.house-icon__glint { fill: none; stroke: rgba(255, 250, 235, .9); stroke-width: .8; stroke-linecap: round; opacity: .35; }
.house-icon__drape { transform-origin: 60px 23.5px; }
.house-icon__post--1 { transform-origin: 22px 66px; }
.house-icon__post--2 { transform-origin: 98px 66px; }
.house-icon--rope .house-icon__shadow { transform-origin: 60px 67.5px; }
body[data-theme="light"] .house-icon--rope .house-icon__shadow { fill: rgba(60, 42, 18, .16); }
/* The 404 page: the velvet rope above the message. */
.not-found__art.house-icon { display: flex; width: min(240px, 62vw); height: auto; aspect-ratio: 120 / 72; margin: 0 auto 30px; }
/* Benefit lists: the drawing takes the diamond's place. */
.benefits li.has-icon { padding-left: 46px; }
.benefits li.has-icon::before { display: none; }
.benefits li > .house-icon { position: absolute; left: 0; top: -.25em; }
.portal-benefits li.has-icon { grid-template-columns: 36px 1fr; column-gap: 16px; }
.portal-benefits li > .house-icon { grid-row: span 2; width: 36px; height: 36px; margin-top: 2px; }
/* The Events ticket is paper, so its drawings are inked in the ticket's own brown. */
.ticket__rows .house-icon { --house-line: var(--paper-accent); width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .house-icon svg * { animation-play-state: paused; }
  .house-icon.is-shown svg * { animation-play-state: running; }
  /* The welcome drink pours in. */
  .house-icon__fill { animation: house-pour 1.1s cubic-bezier(.35, .6, .3, 1) .1s both; }
  @keyframes house-pour { from { transform: translateY(8px); } 85% { transform: translateY(-.4px); } }
  /* The tag swings on its string and settles. */
  .house-icon__swing { animation: house-swing 1.6s ease-out both; }
  @keyframes house-swing { 0% { transform: rotate(-22deg); } 30% { transform: rotate(11deg); } 55% { transform: rotate(-5deg); } 78% { transform: rotate(2deg); } 100% { transform: none; } }
  /* The key slides into the lock and turns. */
  .house-icon__turn { animation: house-key 1.3s cubic-bezier(.4, 0, .2, 1) both; }
  @keyframes house-key { 0% { opacity: 0; transform: translateX(-7px); } 45% { opacity: 1; transform: none; } 70% { transform: scaleY(.2); } 100% { transform: none; } }
  /* The candle is lit, then flickers a while. */
  .house-icon__flame { animation: house-light .6s cubic-bezier(.16, 1, .3, 1) .15s both, house-flicker 1.7s ease-in-out .75s 5; }
  @keyframes house-light { from { transform: scale(0); } }
  @keyframes house-flicker { 25% { transform: scale(.94, 1.06) rotate(-3deg); } 60% { transform: scale(1.04, .95) rotate(2deg); } }
  .house-icon__glow { animation: house-glow 1.7s ease-in-out .3s 5 both; }
  @keyframes house-glow { 0% { opacity: 0; transform: scale(.5); } 50% { opacity: .8; } 100% { opacity: 1; } }
  /* The invitation rises out of its envelope, then the seal is pressed. */
  .house-icon__card { animation: house-card .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
  @keyframes house-card { from { transform: translateY(8px); } }
  .house-icon__seal { animation: house-press .45s cubic-bezier(.34, 1.56, .64, 1) .85s both; }
  @keyframes house-press { from { transform: scale(0); } }
  /* The tasting swirls in the glass. */
  .house-icon__swirl { animation: house-swirl 1.8s ease-out both; }
  @keyframes house-swirl { 0% { transform: translateY(4px) rotate(-16deg); } 30% { transform: rotate(12deg); } 55% { transform: rotate(-6deg); } 80% { transform: rotate(2deg); } 100% { transform: none; } }
  /* The RSVP ticket is punched. */
  .house-icon__punch { animation: house-press .4s cubic-bezier(.34, 1.56, .64, 1) .45s both; }
  /* The door swings open onto the light. */
  .house-icon__leaf { animation: house-door 1.2s cubic-bezier(.3, .7, .3, 1) .15s both; }
  @keyframes house-door { from { transform: none; } 75% { transform: scaleX(.42); } }
  /* The pin drops onto the map. */
  .house-icon__drop { animation: house-drop .7s cubic-bezier(.55, 0, 1, .45) both, house-bounce .35s ease-out .7s; }
  @keyframes house-drop { from { opacity: 0; transform: translateY(-12px); } }
  @keyframes house-bounce { 40% { transform: translateY(-2px) scaleY(1.04); } }
  .house-icon__shadow { animation: house-shadow .7s ease-in both; }
  @keyframes house-shadow { from { opacity: 0; transform: scale(.3); } }
  /* The bow tie pulls itself straight. */
  .house-icon__tie { animation: house-tie .9s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
  @keyframes house-tie { from { transform: scaleX(.15) rotate(-12deg); } }
  /* The dinner jacket rises into place, its tie straightens, the pocket square tucks in and light crosses the lapel. */
  .house-icon__rise { animation: house-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes house-rise { from { opacity: 0; transform: translateY(4px); } }
  .house-icon__tie--small { animation-delay: .45s; }
  .house-icon__square { animation: house-press .4s cubic-bezier(.34, 1.56, .64, 1) .8s both; }
  .house-icon__sheen { animation: house-sheen 1.2s ease-in-out 1s both; }
  @keyframes house-sheen { 0% { opacity: 0; } 40% { opacity: 1; stroke: #fff; } 100% { opacity: 1; } }
  /* The shirt swings on its hanger and settles. */
  .house-icon__hang { animation: house-swing 1.7s ease-out both; }
  /* The cap is struck through: the ring draws round, then the line crosses. */
  .house-icon__no { stroke-dasharray: 1; animation: house-strike .55s cubic-bezier(.4, 0, .2, 1) .5s both; }
  .house-icon__no--strike { animation-delay: .95s; animation-duration: .35s; }
  @keyframes house-strike { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  /* The rope's posts rise in turn, the rope drops between them and settles, then light runs down the brass. */
  .house-icon__post { animation: house-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
  .house-icon__post--2 { animation-delay: .12s; }
  .house-icon__drape { animation: house-drape 1.6s cubic-bezier(.3, .7, .3, 1) .45s both; }
  @keyframes house-drape { 0% { opacity: 0; transform: scaleY(.1); } 30% { opacity: 1; transform: scaleY(1.18); } 55% { transform: scaleY(.92); } 78% { transform: scaleY(1.04); } 100% { transform: none; } }
  .house-icon__glint { animation: house-glint 1.4s ease-in-out 1.4s both; }
  @keyframes house-glint { 40% { opacity: 1; } }
}
@media (max-width: 900px) { .mini-pass { right: 12px; } .member-feature .chapter__media { margin-bottom: 40px; } }

/* ---------- House cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .3s, transform .3s var(--ease); }
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card__media { aspect-ratio: 16 / 11; overflow: hidden; background: #111; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { display: grid; gap: 12px; padding: 26px 26px 28px; flex: 1; align-content: start; }
.card__body .kicker { margin-bottom: 0; font-size: var(--fs-label); color: var(--brass); }
.card__body h3 { font-size: 1.6rem; }
.card__body p { color: var(--text-2); font-size: .98rem; }
.card__body .link-arrow { margin-top: auto; padding-top: 10px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } .card__media { aspect-ratio: 16 / 9; } }

/* ---------- Closing call to action ---------- */
.closing { text-align: center; }
.closing .kicker { justify-content: center; }
.closing .kicker::after { content: ''; width: 28px; height: 1px; background: currentColor; }
.closing .h2 { max-width: 14ch; margin-inline: auto; }
.closing p { max-width: 46ch; margin: 26px auto 0; color: var(--text-2); }
.closing .actions { justify-content: center; margin-top: 38px; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 30px; color: var(--brass); }
.ornament::before, .ornament::after { content: ''; width: 60px; height: 1px; background: var(--line-strong); }
.ornament span { width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }

/* ---------- Tagline ribbon ---------- */
.ribbon { border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.ribbon__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 38px; padding-block: 22px; font: italic 600 clamp(1.1rem, 2vw, 1.5rem)/1.2 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text-2); }
.ribbon__inner span:not(:last-child)::after { content: '◆'; margin-left: 38px; font-size: .6em; vertical-align: middle; color: var(--brass); font-style: normal; }

/* ---------- Footer ---------- */
.site-footer { background: #080605; border-top: 1px solid rgba(201, 164, 90, .22); padding-top: clamp(64px, 8vw, 104px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-heading { margin: 0 0 18px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.footer-grid a:not(.brand) { display: inline-block; padding: 6px 0; color: var(--text-2); text-decoration: none; font-size: .9375rem; }
.footer-grid a:not(.brand):hover { color: var(--text); }
.footer-brand p { margin-top: 22px; color: var(--text-2); font-size: .9375rem; line-height: 1.7; }
.footer-brand .footer-tagline { font: italic 600 1.2rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; margin-top: clamp(56px, 7vw, 88px); padding-block: 26px; border-top: 1px solid rgba(201, 164, 90, .16); color: var(--muted); font-size: .8125rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Motion ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hero__media { animation: hero-settle 2.4s var(--ease) both; }
  @keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1.01); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Utilities (CSP forbids inline style attributes) ---------- */
[data-space="md"] { margin-top: 36px; }
[data-space="lg"] { margin-top: 56px; }
img.is-top { object-position: top; }

[hidden] { display: none !important; }

/* =====================================================================
   Page components
   ===================================================================== */

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(88px, 11vw, 150px) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 90% at 90% 0%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 60%), var(--bg);
}
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.page-title { font-size: clamp(3rem, 8vw, 6.75rem); line-height: .95; letter-spacing: -.02em; }
.page-hero__lede { max-width: 38ch; font: italic 600 var(--fs-lede)/1.5 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text-2); }
.page-hero__lede + .actions { margin-top: 28px; }
.page-hero::after {
  content: 'GAZDA'; position: absolute; right: -.06em; bottom: -.26em; z-index: -1;
  font: 600 clamp(8rem, 24vw, 22rem)/1 var(--serif); letter-spacing: .04em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--line) 55%, transparent); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
}
@media (max-width: 800px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero::after { display: none; } }

.page-hero--image {
  display: grid; align-content: end; min-height: min(86svh, 820px);
  padding-top: calc(var(--header-h) + 64px); border-bottom: 0; background: #0c0907;
}
.page-hero--image::after { display: none; }
.page-hero--image .hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero--image::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 6, 5, .92), rgba(8, 6, 5, .55) 55%, rgba(8, 6, 5, .25)), linear-gradient(0deg, rgba(8, 6, 5, .95), rgba(8, 6, 5, 0) 55%);
}

/* ---------- Three-column steps variant ---------- */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps .link-arrow { margin-top: 14px; }
@media (max-width: 900px) { .steps--3 { grid-template-columns: 1fr; } .steps--3 li, .steps--3 li + li { padding: 26px 0 18px; border-left: 0; } }

/* ---------- Choice panels (lounge mood, arrival, bar mood) ---------- */
.choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.choice__copy { min-height: 4.5em; margin-top: 26px; font: italic 600 clamp(1.3rem, 2.2vw, 1.75rem)/1.45 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text); }
.choice__options { display: grid; border-top: 1px solid var(--line-strong); }
.choice__options button {
  position: relative; display: flex; align-items: baseline; gap: 22px; width: 100%;
  padding: 26px 8px 26px 26px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text-2); text-align: left; cursor: pointer;
  font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--serif); font-variation-settings: 'opsz' 14;
  transition: color .25s, background .25s;
}
.choice__options button span { font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; color: var(--muted); }
.choice__options button::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; background: var(--brass); transform: scaleY(0); transition: transform .3s var(--ease); }
.choice__options button:hover { color: var(--text); }
.choice__options button[aria-pressed="true"] { color: var(--brass); background: color-mix(in srgb, var(--brass) 6%, transparent); }
.choice__options button[aria-pressed="true"]::before { transform: none; }
.choice__detail { margin-top: 28px; padding: 26px 28px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.choice__detail strong { display: block; margin-bottom: 8px; font: 600 1.6rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.choice__detail p { color: var(--text-2); }
.choice__detail .link-arrow { margin-top: 14px; }
.suggestion { padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line-strong); background: var(--surface); }
.suggestion .kicker { margin-bottom: 16px; }
.suggestion strong { display: block; font: 600 clamp(2.2rem, 4vw, 3.2rem)/1 var(--serif); color: var(--text); }
.suggestion > span { display: block; margin-top: 8px; font: italic 600 1.25rem/1.3 var(--serif); font-variation-settings: 'opsz' 10; color: var(--brass); }
.suggestion p { margin-top: 20px; color: var(--text-2); }
.suggestion .actions { margin-top: 26px; }
@media (max-width: 900px) { .choice { grid-template-columns: 1fr; } }

/* ---------- Ticket (next opening) ---------- */
.ticket {
  position: relative; padding: clamp(28px, 4vw, 44px);
  background: var(--paper); color: var(--paper-ink);
  -webkit-mask: radial-gradient(circle 16px at 0 64%, transparent 97%, #000 100%), radial-gradient(circle 16px at 100% 64%, transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 16px at 0 64%, transparent 97%, #000 100%), radial-gradient(circle 16px at 100% 64%, transparent 97%, #000 100%);
  mask-composite: intersect;
}
.ticket .kicker { color: var(--paper-accent); }
.ticket__date { display: block; font: 600 clamp(2.2rem, 4.5vw, 3.4rem)/1 var(--serif); }
.ticket__rows { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px dashed var(--paper-line); list-style: none; }
.ticket__rows li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dotted var(--paper-line); font-size: .9375rem; }
.ticket__rows li span:first-child { font: 600 var(--fs-label)/1.8 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-muted); }
.ticket .actions { margin-top: 26px; }
.ticket .btn--brass { background: var(--paper-ink); color: var(--paper); }
.ticket .btn--brass:hover { background: #3b2c1c; }

/* ---------- Calendar ---------- */
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.calendar { padding: clamp(14px, 3vw, 32px); border: 1px solid var(--line); background: var(--surface); }
.calendar-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.calendar-controls strong { font: 600 clamp(1.5rem, 2.5vw, 2rem)/1 var(--serif); font-variation-settings: 'opsz' 14; }
.calendar-controls button { width: 46px; height: 46px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 1.1rem; cursor: pointer; transition: border-color .2s, color .2s; }
.calendar-controls button:hover { border-color: var(--brass); color: var(--brass); }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-weekdays { margin-bottom: 8px; }
.calendar-weekdays span { padding: 6px 0; text-align: center; font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.calendar-day, .calendar-blank { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(48px, 7vw, 76px); padding: 8px; }
.calendar-day { color: var(--muted); font-size: .875rem; }
button.calendar-day { border: 1px solid var(--line-strong); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: 500 .9375rem/1 var(--sans); transition: background .2s, border-color .2s; }
button.calendar-day:hover { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 8%, transparent); }
button.calendar-day i { font: 600 .6875rem/1 var(--sans); letter-spacing: .06em; color: var(--brass); }
button.calendar-day.special { border-color: #8a3a3a; background: color-mix(in srgb, #8a2a2a 22%, transparent); }
button.calendar-day.selected { border-color: var(--brass); background: var(--brass); color: var(--brass-ink); }
button.calendar-day.selected i { color: var(--brass-ink); }
/* Nights that have passed stay on the calendar as a record, but are no longer choices. */
.calendar-day.past { border: 1px dashed var(--line); color: var(--muted); }
.calendar-day.past i { font: 600 .6875rem/1 var(--sans); letter-spacing: .06em; color: var(--muted); font-style: normal; }
.calendar-day.past.special { border-color: color-mix(in srgb, #8a3a3a 60%, transparent); }
/* Long character names wrap rather than push the RSVP panel, stub or band out of shape. */
.rsvp__note strong, .band__main b, .account-for strong { overflow-wrap: anywhere; }
.opening-detail { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 10px; padding: clamp(24px, 3vw, 36px); background: radial-gradient(120% 90% at 85% 10%, var(--oxblood-2), var(--oxblood) 60%, #240a0b); }
.opening-detail .kicker { margin-bottom: 6px; }
.opening-detail strong { font: 600 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 var(--serif); font-variation-settings: 'opsz' 14; }
.opening-detail > span { color: var(--brass-hi); font-weight: 500; }
.opening-detail p { color: var(--text-2); }
.opening-countdown { margin-top: 8px; padding-block: 14px; border-block: 1px solid var(--line); font: italic 600 1.1rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.opening-detail .btn { justify-self: start; margin-top: 10px; }
.rsvp { display: grid; gap: 10px; margin-top: 4px; }
.rsvp__count { font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi); }
.opening-detail .rsvp__note { color: var(--text-2); font-size: .9375rem; }
.rsvp__note strong { font: 600 1.15rem/1.3 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.rsvp__character { max-width: 320px; }
.opening-detail .rsvp__feedback { min-height: 1.4em; color: var(--text-2); font-size: .875rem; }
.calendar-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; color: var(--muted); font-size: .875rem; }
.calendar-key__item { display: inline-flex; align-items: center; gap: 10px; }
.calendar-key__swatch { flex: none; width: 14px; height: 14px; border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 22%, transparent); }
@media (max-width: 900px) { .calendar-layout { grid-template-columns: 1fr; } .opening-detail { position: static; } }
@media (max-width: 480px) { .calendar-weekdays, .calendar-days { gap: 3px; } .calendar-weekdays span { letter-spacing: 0; } .calendar-day, .calendar-blank { padding: 5px; } button.calendar-day i { font-size: .6875rem; letter-spacing: 0; } }

/* ---------- Membership card (3D, flips) ---------- */
.membership-card {
  position: relative; display: block; width: min(100%, 460px); aspect-ratio: 1.586; margin: 0 auto;
  padding: 0; border: 0; background: none; color: #f1e8da;
  perspective: 1400px; cursor: grab; touch-action: pan-y;
}
.membership-card.is-dragging { cursor: grabbing; }
.membership-card__scene { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--card-rotate-x, 0deg)) rotateY(var(--card-rotate-y, 0deg)); transition: transform .8s var(--ease); }
.membership-card.is-dragging .membership-card__scene { transition: none; }
.membership-card__face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 3.4vw, 28px); border: 1px solid rgba(201, 164, 90, .6); border-radius: 16px;
  background: linear-gradient(135deg, #221912, #0d0a08 55%, #2b1f12);
  box-shadow: 0 50px 80px -34px rgba(0, 0, 0, .9), inset 0 0 0 6px rgba(12, 9, 7, .7), inset 0 0 0 7px rgba(201, 164, 90, .25);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; text-align: left;
}
.membership-card__face::before { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 236, 190, .1) 50%, transparent 60%); pointer-events: none; }
.membership-card__face--back { transform: rotateY(180deg); }
.membership-card__row { display: flex; justify-content: space-between; gap: 12px; font: 600 clamp(.6875rem, 1.3vw, .75rem)/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #c9a45a; }
.membership-card__mark { display: grid; justify-items: center; gap: 8px; }
.membership-card__mark b { font: 600 clamp(2.4rem, 7vw, 3.6rem)/1 var(--serif); letter-spacing: .1em; color: #e0bf74; }
.membership-card__mark small { font: 600 clamp(.5rem, 1.2vw, .625rem)/1 var(--sans); letter-spacing: .36em; text-transform: uppercase; color: #cfc0a8; }
.membership-card__title { font: 600 clamp(1.3rem, 3.4vw, 1.9rem)/1.05 var(--serif); font-variation-settings: 'opsz' 14; color: #f1e8da; }
.membership-card__stripe { height: 30px; margin-inline: calc(-1 * clamp(18px, 3.4vw, 28px)); background: linear-gradient(90deg, #050403, #1b140e, #050403); }
.membership-card__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.membership-card__fields small { display: block; margin-bottom: 4px; font: 600 .6875rem/1.2 var(--sans); letter-spacing: .12em; color: #a89a82; }
.membership-card__fields b { font: 600 clamp(.75rem, 1.6vw, .9375rem)/1.2 var(--serif); font-variation-settings: 'opsz' 14; color: #f1e8da; }
.membership-card__note { font: italic 600 clamp(.75rem, 1.5vw, .875rem)/1.3 var(--serif); font-variation-settings: 'opsz' 14; color: #cfc0a8; text-align: center; }
.card-stage { position: relative; isolation: isolate; padding: clamp(24px, 5vw, 64px) 0 20px; text-align: center; }
.card-stage::before { content: ''; position: absolute; inset: 10% 5% 20%; z-index: -1; background: radial-gradient(closest-side, rgba(201, 164, 90, .22), transparent); filter: blur(20px); }
.card-stage__hint { display: block; margin-top: 30px; font: 600 .6875rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- Dos and don'ts ---------- */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.dos h3 { margin-bottom: 16px; font-size: 1.5rem; }
.dos ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.dos li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.dos li::before { content: '◆'; font-size: .6rem; color: var(--brass); transform: translateY(-2px); }
.dos--no li::before { content: '—'; font-size: .9rem; color: var(--muted); }
@media (max-width: 640px) { .dos { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form-card {
  --text: var(--paper-ink); --text-2: #33271a; --muted: var(--paper-muted); --line: var(--paper-line); --line-strong: rgba(60, 42, 18, .5); --brass: var(--paper-accent); --brass-hi: #4f3509; --brass-ink: #fdf8ee; --surface: var(--paper-card);
  position: relative; padding: clamp(28px, 4vw, 52px); background: var(--paper); color: var(--paper-ink); color-scheme: light;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.form-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--paper-line); pointer-events: none; }
.form-card > * { position: relative; }
.form-card__title { margin-bottom: 26px; font: 600 1.9rem/1.1 var(--serif); font-variation-settings: 'opsz' 14; }
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.form-row--top { align-items: start; }
.field-wrap { display: grid; gap: 8px; min-width: 0; }
.field-hint { color: var(--text-2); font-size: .875rem; line-height: 1.45; }
/* The first question decides the rest of the form, so it reads as a heading, not a field label. */
.field--lead { gap: 12px; padding-bottom: 6px; }
.field.field--lead > span { font: 600 1.5rem/1.2 var(--serif); font-variation-settings: 'opsz' 9; letter-spacing: .005em; text-transform: none; color: var(--text); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field > span { font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); color: var(--text);
  font: 500 1rem/1.4 var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.form-card ::placeholder { color: #5a4a35; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent); }
.form .btn { justify-self: start; }
.form-card .btn--brass { background: var(--paper-ink); color: #fbf6ec; }
.form-card .btn--brass:hover { background: #3b2c1c; }
.form-section { margin: 8px 0 -4px; padding: 0 0 10px; border-bottom: 1px solid var(--line-strong); font: 600 1.5rem/1.2 var(--serif); font-variation-settings: 'opsz' 9; letter-spacing: .005em; color: var(--text); }
.form-section:first-child { margin-top: 0; }
.form-group { display: grid; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-group[hidden] { display: none; }
.form-hint { color: var(--text-2); font-size: .9375rem; }
/* Discord as the contact method: join the server (or connect Discord) and tick that you have. */
.discord-join { display: grid; gap: 14px; margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line); background: rgba(88, 101, 242, .06); }
.discord-join__lead { color: var(--text); }
.discord-join__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* The member rate or member prices, shown to signed-in active members. */
.member-rate { margin-top: 14px; padding: 12px 16px; border-left: 2px solid var(--brass); background: rgba(201, 164, 90, .08); color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.member-rate strong { display: block; color: var(--text); font-weight: 600; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 20px; }
.check { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 1rem; cursor: pointer; }
.check input, .field .check input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brass); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; color: var(--text-2); font-size: .9375rem; }
.form-status a { color: var(--brass); }
.turnstile-widget { min-height: 65px; }
.application-tracker { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--brass) 7%, transparent); }
.application-tracker__state { font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; color: var(--brass); }
.application-tracker strong { font: 600 1.4rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.application-tracker ol { display: flex; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.application-tracker li { flex: 1; padding-top: 10px; border-top: 2px solid var(--line); font: 600 .6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.application-tracker li.is-current { border-color: var(--brass); color: var(--brass); }

.aside-list { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.aside-list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.aside-list li > span { font: italic 600 1.4rem/1 var(--serif); font-variation-settings: 'opsz' 10; color: var(--brass); }
.aside-list strong { display: block; margin-bottom: 4px; font: 500 1.05rem/1.3 var(--sans); color: var(--text); }
.aside-list p { color: var(--text-2); font-size: .9375rem; }

/* ---------- Split layout helper ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split__sticky { position: sticky; top: calc(var(--header-h) + 32px); }
.split__sticky .h2 { margin-bottom: 24px; }
.split__sticky .actions { margin-top: 30px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__sticky { position: static; } }

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font: 600 clamp(1.3rem, 2.2vw, 1.65rem)/1.25 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); font: 300 1.3rem/1 var(--sans); color: var(--brass); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brass); }
.faq details p { max-width: 62ch; padding: 0 0 28px; color: var(--text-2); }

/* ---------- Menu page ---------- */

/* ---------- Auth panels (login, admin, portal entry) ---------- */
.auth { position: relative; isolation: isolate; display: grid; place-items: center; min-height: calc(100svh - var(--header-h)); padding: clamp(40px, 8vw, 96px) var(--gutter); overflow: hidden; background: #0c0907; }
.auth__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(.9); transform: scale(1.05); }
.auth::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 80% at 50% 50%, rgba(12, 9, 7, .72), rgba(12, 9, 7, .95)); }
.auth__panel { width: min(100%, 580px); padding: clamp(32px, 5vw, 56px); border: 1px solid var(--line-strong); background: rgba(12, 9, 7, .82); backdrop-filter: blur(10px); }
.auth__panel h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin-bottom: 22px; }
.auth__panel .lead { color: var(--text-2); }
.auth__panel .actions, .auth__panel .form { margin-top: 30px; }
.login-note { margin-top: 18px; color: var(--muted); font-size: .875rem; }
.login-message { margin-bottom: 20px; padding: 14px 16px; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--brass) 8%, transparent); color: var(--text); }
.login-message.error { border-color: #c0554f; background: rgba(192, 85, 79, .12); }

/* ---------- Member portal ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 50; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 97%, transparent); }
.subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; }
.portal-nav { display: flex; gap: 4px; overflow-x: auto; }
.portal-nav a { padding: 10px 12px; color: var(--text-2); text-decoration: none; font-size: .875rem; white-space: nowrap; }
.portal-nav a[aria-current] { color: var(--brass); box-shadow: inset 0 -1px 0 var(--brass); }
.portal-shell { padding-block: clamp(48px, 7vw, 96px); }
.portal-entry { max-width: 640px; margin: clamp(24px, 6vw, 80px) auto; padding: clamp(32px, 5vw, 56px); border: 1px solid var(--line-strong); background: var(--surface); text-align: center; }
.portal-entry .kicker { justify-content: center; }
.portal-entry h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.portal-entry .portal-message { margin: 20px auto 30px; max-width: 42ch; color: var(--text-2); }
.portal-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.portal-hero h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
.portal-hero .lead { color: var(--text-2); margin-top: 14px; }
.portal-status { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-strong); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.portal-dashboard { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.portal-column { display: grid; gap: clamp(20px, 3vw, 32px); }
.portal-panel { padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); background: var(--surface); scroll-margin-top: calc(var(--header-h) + 80px); }
.portal-panel__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 22px; }
.portal-panel__head h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
/* The Members Area: the card stays in view beside the panels on wide screens. */
.portal-column--card { position: sticky; top: calc(var(--header-h) + 80px); }
.portal-member-card { display: grid; gap: 14px; justify-items: center; scroll-margin-top: calc(var(--header-h) + 80px); }
.portal-hero { scroll-margin-top: calc(var(--header-h) + 80px); }
.portal-member-card .membership-card { width: 100%; }
.portal-entry__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; }
.portal-note { color: var(--muted); font-size: .9375rem; }
.portal-note a { color: var(--brass); }
.portal-note strong { color: var(--text); font-weight: 500; }
.portal-panel__lead { margin-bottom: 22px; color: var(--text-2); }
.portal-panel > .portal-note:first-of-type { margin-bottom: 18px; }
.portal-panel > .link-arrow, .portal-panel > .btn { margin-top: 24px; }
.portal-panel [data-rsvp-feedback]:not(:empty) { margin-top: 14px; }
.portal-panel .evening .btn { min-height: 38px; }
.portal-rate { padding: 7px 12px; border: 1px solid var(--brass); color: var(--brass-hi); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.portal-benefits { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.portal-benefits li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.portal-benefits strong { font: 600 1.2rem/1.25 var(--serif); font-variation-settings: 'opsz' 10; }
.portal-benefits span { color: var(--text-2); font-size: .9375rem; }
.portal-card__state { margin-bottom: 18px; color: var(--text-2); }
.portal-card__state strong { color: var(--text); font-weight: 500; }
.portal-card__form { display: grid; gap: 18px; }
.portal-drink { border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); }
.portal-drink__code { margin-bottom: 16px; padding: 18px 20px; border: 1px dashed var(--brass); color: var(--brass-hi); font: 600 clamp(1.35rem, 5.6vw, 2.3rem)/1 var(--serif); letter-spacing: .06em; white-space: nowrap; overflow-wrap: normal; text-align: center; font-variant-numeric: lining-nums; user-select: all; }
.portal-drink__warning { color: var(--text-2); }

/* A house pop-up: the member card's walnut with the brass inset rule, the same in both themes.
   Used for the welcome drink, where the code must be noted before it is closed. */
.house-dialog {
  --text: #f1e8da; --text-2: #ddd1bd; --muted: #a89a82; --brass: #c9a45a; --brass-hi: #e6c77e; --brass-ink: #1a1208; --line: rgba(201, 164, 90, .24); --line-strong: rgba(201, 164, 90, .45);
  width: min(520px, calc(100% - 32px)); max-width: none; margin: auto; padding: 0; border: 0; background: none; color: var(--text); overflow: visible;
}
.house-dialog::backdrop { background: rgba(8, 6, 4, .78); backdrop-filter: blur(4px); }
.house-dialog[open] { animation: house-dialog-in .35s var(--ease); }
@keyframes house-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .house-dialog[open] { animation: none; } }
.house-dialog__card {
  position: relative; display: grid; gap: 18px; padding: clamp(30px, 6vw, 44px);
  border: 1px solid rgba(201, 164, 90, .6); border-radius: 16px;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 228, 170, .1), transparent 55%), linear-gradient(135deg, #221912, #0d0a08 55%, #2b1f12);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95), inset 0 0 0 6px rgba(12, 9, 7, .7), inset 0 0 0 7px rgba(201, 164, 90, .25);
  text-align: center;
}
.house-dialog__kicker { color: var(--brass); font: 600 .6875rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.house-dialog h2 { font-size: clamp(2rem, 6vw, 2.6rem); color: var(--text); }
.house-dialog h2 em { color: var(--brass-hi); }
.house-dialog__lead { color: var(--text-2); }
.house-dialog__lead strong { color: var(--text); font-weight: 500; }
.house-dialog__error { color: #e59a92; font-size: .9375rem; }
.house-dialog__code { display: grid; gap: 10px; justify-items: center; padding: 22px 16px 16px; border: 1px dashed var(--brass); background: rgba(5, 4, 3, .45); }
.house-dialog__code span { color: #e0bf74; font: 600 clamp(1.35rem, 6.4vw, 2.3rem)/1 var(--serif); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: lining-nums; user-select: all; }
.house-dialog__notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-left: 2px solid var(--brass); background: rgba(201, 164, 90, .08); text-align: left; }
.house-dialog__notice span { color: var(--brass); font-size: .7rem; line-height: 1.9; }
.house-dialog__notice p { color: var(--text-2); font-size: .9375rem; }
.house-dialog__notice strong { color: var(--text); font-weight: 500; }
.house-dialog__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.house-dialog .desk-link { color: var(--brass); }
.house-dialog > .house-dialog__card > .btn { justify-self: center; }
/* A confirmation the guest ticks before going on (signed in to Fleeca, and so on). */
.house-dialog__check { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 14px 16px; border: 1px solid var(--line); color: var(--text); font-size: .98rem; cursor: pointer; }
.house-dialog__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--brass); }
.portal-drink__warning strong { color: var(--text); font-weight: 500; }
.portal-card__choices { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.portal-choice { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.portal-choice:has(input:checked) { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 6%, transparent); }
.portal-choice input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brass); }
.portal-choice span { display: grid; gap: 3px; }
.portal-choice strong { font-weight: 500; color: var(--text); }
.portal-choice small { color: var(--muted); font-size: .875rem; }
.portal-card__form .field textarea { min-height: 72px; }
.portal-card__actions { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 900px) {
  .portal-hero, .portal-dashboard { grid-template-columns: 1fr; }
  .portal-column--card { position: static; }
  .portal-member-card { width: min(100%, 420px); justify-self: center; }
}
@media (max-width: 560px) { .portal-panel__head { flex-wrap: wrap; } }

/* ---------- Staff workspace ---------- */
.workspace { padding-block: clamp(40px, 6vw, 80px); }
.workspace h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.workspace .lead { margin-top: 14px; color: var(--text-2); }
.staff-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin: 36px 0 16px; padding: 20px 0; border-block: 1px solid var(--line); }
.staff-toolbar__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.workspace label { display: grid; gap: 8px; font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.workspace select, .workspace input, .workspace textarea { min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: 450 .9375rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.workspace textarea { min-height: 96px; resize: vertical; }
.staff-feedback { min-height: 1.5em; margin: 8px 0 16px; color: var(--text-2); font-size: .9375rem; }
.staff-applications { display: grid; gap: 18px; }
.staff-application { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); background: var(--surface); }
.staff-application__meta { display: flex; justify-content: space-between; gap: 12px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.staff-application__meta time { color: var(--muted); letter-spacing: .06em; }
.staff-application h2 { font-size: 2rem; }
.staff-application__reference { color: var(--brass-hi); font-weight: 500; }
.staff-application > p:not([class]) { color: var(--text-2); white-space: pre-wrap; }
.staff-application__actions, .staff-rsvp__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.staff-application__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.staff-application__ref { color: var(--text); letter-spacing: .12em; white-space: nowrap; }
/* Who the applicant is, one ruled row per identity. */
.staff-identity { display: grid; margin: 0; border-top: 1px solid var(--line); }
.staff-identity > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.staff-identity dt { color: var(--muted); font: 600 var(--fs-label)/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.staff-identity dd { margin: 0; color: var(--text); }
.staff-identity small { margin-left: 8px; color: var(--muted); font-size: .8125rem; }
.staff-application__member { justify-self: start; padding: 6px 12px; border: 1px solid var(--line-strong); color: var(--text-2); font-size: .875rem; }
.staff-application__member strong { color: var(--brass-hi); font-weight: 500; }
.staff-application__reviewed, .staff-application__hint { color: var(--muted); font-size: .8125rem; }
.staff-member--awaiting_payment .staff-member__status { border-style: dashed; }
.staff-member--suspended .staff-member__status, .staff-member--ended .staff-member__status { color: var(--muted); }
@media (max-width: 560px) { .staff-identity > div { grid-template-columns: 1fr; gap: 4px; } }
.staff-directory, .staff-rsvp-desk { margin-top: clamp(56px, 8vw, 96px); }
.staff-directory__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 12px; }
.staff-directory__head h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.staff-directory__controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.staff-members, .staff-rsvps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.staff-member, .staff-rsvp { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.staff-member h3, .staff-rsvp h3 { font-size: 1.6rem; margin-top: 8px; }
.staff-member p, .staff-rsvp p { color: var(--text-2); font-size: .9375rem; }
.staff-member__status { display: inline-block; padding: 5px 10px; border: 1px solid var(--line-strong); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.staff-member__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.staff-member__meta strong { color: var(--text); font-weight: 500; }
.staff-drink { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); }
.staff-drink__result { display: grid; gap: 8px; flex: 1 1 100%; color: var(--text-2); font-size: .9375rem; }
.staff-drink__result:empty { display: none; }
.staff-drink__result strong { color: var(--text); font-weight: 500; }
.staff-drink__result .btn { justify-self: start; }
.staff-drink__served { color: #d27a73; }
.staff-member__card { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .875rem; }
.staff-member__card p { font-size: .875rem; }
.staff-member__card span { color: var(--muted); }
.staff-member__card strong { color: var(--text); font-weight: 500; }
.staff-member__card .staff-member__card-by { color: var(--muted); }
.staff-member__card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.staff-member__card-actions .desk-link { padding-inline: 0; }
@media (max-width: 800px) { .staff-members, .staff-rsvps { grid-template-columns: 1fr; } }

/* ---------- Lightbox ---------- */
.image-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 6, 5, .97); color: #f1e8da; }
.image-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.image-lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.image-lightbox__toolbar { text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--gutter); border-bottom: 1px solid rgba(201, 164, 90, .2); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; color: #c9a45a; }
.image-lightbox__toolbar div { display: flex; gap: 8px; }
.image-lightbox__toolbar button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(201, 164, 90, .45); background: transparent; color: #f1e8da; cursor: pointer; font: 500 .875rem/1 var(--sans); }
.image-lightbox__toolbar button:hover { border-color: #e6c77e; color: #e6c77e; }
.image-lightbox__viewer { min-height: 0; overflow: auto; padding: 20px; overscroll-behavior: contain; cursor: grab; -webkit-overflow-scrolling: touch; }
.image-lightbox__viewer.is-dragging { cursor: grabbing; user-select: none; }
.image-lightbox__viewer:focus-visible { outline-offset: -3px; }
/* Readable width at 100%: the full viewer width on phones, capped at 900px on large screens. */
.image-lightbox__viewer img { display: block; width: min(calc(var(--zoom, 1) * 100%), calc(var(--zoom, 1) * 900px)); max-width: none; height: auto; margin: 0 auto; -webkit-user-drag: none; }
.image-lightbox__hint { padding: 12px var(--gutter) 18px; text-align: center; color: #a89a82; font-size: .8125rem; }
img[role="button"] { cursor: zoom-in; }

/* ---------- 404 ---------- */
.not-found { min-height: calc(100svh - var(--header-h)); display: grid; place-items: center; text-align: center; padding: 80px var(--gutter); }
.not-found .kicker { justify-content: center; }
.not-found p:not(.kicker) { margin: 22px auto 32px; max-width: 40ch; color: var(--text-2); }
.not-found .actions { justify-content: center; }
.chapter--even .chapter__body { grid-column: 1 / span 6; }
.chapter--even .chapter__media { grid-column: 8 / -1; }
@media (max-width: 900px) { .chapter--even .chapter__body, .chapter--even .chapter__media { grid-column: auto; } }

/* ---------- Interactive menu ---------- */
.bar-menu__tabs { position: relative; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--paper-line); scrollbar-width: none; }
.bar-menu__tabs::-webkit-scrollbar { display: none; }
.bar-menu__tabs [role="tab"] {
  flex: none; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 14px 18px 16px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent; color: var(--paper-muted); cursor: pointer;
  font: 600 1.3rem/1 var(--serif); font-variation-settings: 'opsz' 10; transition: color .2s, border-color .2s;
}
.bar-menu__tabs [role="tab"] span { font: 600 .6875rem/1 var(--sans); letter-spacing: .1em; color: var(--paper-muted); }
.bar-menu__tabs [role="tab"]:hover { color: var(--paper-ink); }
.bar-menu__tabs [role="tab"][aria-selected="true"] { color: var(--paper-ink); border-bottom-color: var(--paper-accent); }
.bar-menu:not(.is-interactive) .bar-menu__tabs { display: none; }
.bar-menu__body { display: grid; gap: clamp(20px, 3vw, 40px); margin-top: clamp(24px, 3vw, 36px); }
.bar-menu.is-interactive .bar-menu__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.bar-menu__panels { display: grid; gap: 24px; }
.bar-menu__panel { position: relative; padding: clamp(24px, 3.5vw, 44px); background: var(--paper-card); box-shadow: 0 30px 60px -30px rgba(40, 25, 8, .55); }
.bar-menu__panel::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--paper-line); pointer-events: none; }
.bar-menu__panel:focus-visible { outline-offset: -4px; }
.bar-menu__note { margin-bottom: 10px; font: italic 600 1.05rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; color: var(--paper-muted); }
.bar-menu__items { margin: 0; padding: 0; list-style: none; }
.bar-menu__item {
  position: relative; display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 15px 4px 15px 22px; border: 0; border-bottom: 1px dotted var(--paper-line);
  background: transparent; color: var(--paper-ink); text-align: left; cursor: pointer;
  font: 600 1.25rem/1.25 var(--serif); font-variation-settings: 'opsz' 10; transition: color .2s, background .2s;
}
.bar-menu__item::after { content: ''; flex: 1; order: 1; border-bottom: 1px dotted var(--paper-line); transform: translateY(-5px); }
.bar-menu__price { order: 2; font: 600 .9375rem/1 var(--sans); color: var(--paper-accent); white-space: nowrap; }
.bar-menu.is-member .bar-menu__price { font-weight: 500; color: var(--paper-muted); text-decoration: line-through; }
.bar-menu__member-price { order: 3; font: 600 .9375rem/1 var(--sans); color: var(--paper-accent); white-space: nowrap; }
.bar-menu__item::before { content: '◆'; position: absolute; left: 2px; top: 50%; font-size: .55rem; color: var(--paper-accent); opacity: 0; transform: translate(-6px, -50%); transition: opacity .2s, transform .2s var(--ease); }
.bar-menu__item:hover { color: var(--paper-accent); }
.bar-menu__item[aria-pressed="true"] { color: var(--paper-accent); background: rgba(122, 85, 24, .07); }
.bar-menu__item[aria-pressed="true"]::before { opacity: 1; transform: translate(0, -50%); }
.bar-menu__item:focus-visible { outline-offset: -2px; }
.bar-menu__detail {
  position: sticky; top: calc(var(--header-h) + 24px);
  display: grid; gap: 14px; padding: clamp(26px, 3.5vw, 44px);
  background: radial-gradient(120% 90% at 85% 10%, #1f1711, #0d0a08 70%); border: 1px solid rgba(201, 164, 90, .45);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8);
}
.bar-menu__detail .kicker { margin-bottom: 0; }
.bar-menu__detail h3 { font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.02; }
.bar-menu__detail-price { font: 600 2rem/1 var(--serif); font-variation-settings: 'opsz' 14; color: var(--brass-hi); }
.bar-menu__detail-price s { margin-left: 8px; font-size: 1.1rem; color: var(--text-2); }
.bar-menu__member { margin-top: -6px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.bar-menu__detail-desc { color: var(--text-2); font-size: 1.02rem; }
.bar-menu__pairs { padding-top: 16px; border-top: 1px solid var(--line); }
.bar-menu__pairs-label { margin-bottom: 8px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.bar-menu__pairs ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bar-menu__pairs button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; cursor: pointer;
  font: 600 1.05rem/1.3 var(--serif); font-variation-settings: 'opsz' 10; transition: border-color .2s, color .2s;
}
.bar-menu__pairs button span:last-child { font: 600 .875rem/1 var(--sans); color: var(--brass); white-space: nowrap; }
.bar-menu__pairs button span:first-child::after { content: ' →'; color: var(--brass); }
.bar-menu__pairs button:hover { border-color: var(--brass); color: var(--brass-hi); }
.bar-menu__detail .btn { justify-self: start; margin-top: 6px; }
/* Light mode: the detail panel becomes a lit card rather than a dark box, and its pour art is inked for paper. */
body[data-theme="light"] .bar-menu__detail {
  --bg: #ddd0b6; --bg-2: #d3c5a9; --surface: #e9ddc6; --text: #1a120a; --text-2: #3b2d1e; --muted: #54442f;
  --line: rgba(60, 42, 18, .24); --line-strong: rgba(60, 42, 18, .5); --brass: #664310; --brass-hi: #4f3509; --brass-ink: #fdf8ee;
  color: var(--text); color-scheme: light;
  background: radial-gradient(120% 90% at 85% 10%, #f1e7d3, #e2d5bb 70%); border-color: rgba(102, 67, 16, .35);
  box-shadow: 0 40px 70px -44px rgba(60, 42, 18, .55);
}
body[data-theme="light"] .bar-menu__detail .bar-art__line, body[data-theme="light"] .bar-menu__detail .bar-art__vessel-body, body[data-theme="light"] .bar-menu__detail .bar-art__vessel-rim { stroke: #8a5f1c; }
body[data-theme="light"] .bar-menu__detail .bar-art__glass { fill: rgba(255, 255, 255, .35); stroke: rgba(102, 67, 16, .14); }
body[data-theme="light"] .bar-menu__detail .bar-art__wall { stroke: rgba(102, 67, 16, .4); }
body[data-theme="light"] .bar-menu__detail .bar-art__highlight { stroke: rgba(255, 255, 255, .75); }
body[data-theme="light"] .bar-menu__detail .bar-art__ice { fill: rgba(255, 255, 255, .45); stroke: rgba(102, 67, 16, .3); }
body[data-theme="light"] .bar-menu__detail .bar-art__smoke { stroke: rgba(71, 57, 42, .4); }
body[data-theme="light"] .bar-menu__detail .bar-art__ripple { stroke: rgba(255, 255, 255, .85); }
.bar-menu__footnote { max-width: 60ch; margin: 28px auto 0; text-align: center; font: italic 600 1rem/1.5 var(--serif); font-variation-settings: 'opsz' 10; color: var(--paper-muted); }
@media (max-width: 900px) {
  .bar-menu.is-interactive .bar-menu__body { grid-template-columns: 1fr; }
  .bar-menu__detail { position: static; scroll-margin-top: calc(var(--header-h) + 16px); }
}

/* ---------- Home: typographic card ---------- */
.card__media--type { display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 90% at 80% 10%, var(--oxblood-2), var(--oxblood) 60%, #240a0b); }
.card__media--type span { font: 600 clamp(1.7rem, 2.6vw, 2.2rem)/1.15 var(--serif); font-variation-settings: 'opsz' 14; color: #f1e8da; text-align: center; transition: transform .6s var(--ease); }
.card__media--type em { color: #e0bf74; }
.card:hover .card__media--type span { transform: scale(1.04); }

/* ---------- Maker's mark ---------- */
.maker { display: inline-flex; align-items: center; gap: 14px; margin: 0; color: var(--text-2); }
/* The KrisoDev mark (assets/krisodev-mark.svg, from the KrisoDev brand kit), lifting slightly on hover. */
.maker__mark { flex: none; width: 44px; height: 44px; transition: transform .5s var(--ease); }
.maker:hover .maker__mark { transform: translateY(-2px) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .maker__mark { transition: none; } }
.maker__text { display: grid; gap: 4px; line-height: 1; }
.maker__text small { font: 600 .625rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.maker__text strong { font: italic 600 1.3rem/1 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); letter-spacing: .01em; }
.maker__text strong::first-letter { color: #e0bf74; }

/* ---------- Dress code ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.jump a { padding: 10px 14px; border: 1px solid var(--line-strong); color: var(--text-2); text-decoration: none; font: 500 .8125rem/1 var(--sans); letter-spacing: .06em; transition: border-color .2s, color .2s; }
.jump a:hover { border-color: var(--brass); color: var(--brass); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.tier { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line); background: var(--surface); }
.tier__badge { justify-self: start; align-self: flex-start; padding: 7px 12px; border: 1px solid currentColor; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tier h3 { margin-top: 10px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.tier__summary { font: italic 600 1.1rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text-2); }
.tier ul { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tier li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: .98rem; }
.tier li::before { content: '✓'; flex: none; width: 14px; font-weight: 600; color: var(--brass); }
.tier--preferred { border-color: var(--brass); }
.tier--preferred .tier__badge { color: var(--brass); background: color-mix(in srgb, var(--brass) 10%, transparent); }
.tier--refused { border-color: rgba(192, 85, 79, .6); background: color-mix(in srgb, #8a2a2a 10%, var(--surface)); }
.tier--refused .tier__badge { color: #d27a73; }
body[data-theme="light"] .tier--refused .tier__badge { color: #9b3a33; }
.tier--refused li::before { content: '✕'; color: #d27a73; }
body[data-theme="light"] .tier--refused li::before { color: #9b3a33; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.rule-of-thumb { margin-top: clamp(28px, 4vw, 44px); padding: 22px 26px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--brass) 7%, transparent); font: 600 clamp(1.15rem, 1.8vw, 1.35rem)/1.5 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text); }
.rule-of-thumb span { margin-right: 8px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.rule-of-thumb a { color: var(--brass); }
.door-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.door-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.door-list li > span { font: 600 2rem/1 var(--serif); font-variation-settings: 'opsz' 14; color: var(--brass); }
.door-list h3 { margin-bottom: 10px; font-size: 1.6rem; }
.door-list p { color: var(--text-2); }
.door-list a { color: var(--brass-hi); }
.dress-card { margin: 0; }
.dress-card img { width: 100%; height: auto; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.dress-card figcaption { margin-top: 14px; text-align: center; color: var(--muted); font-size: .875rem; }

/* ---------- Signature heroes: each page leads with its own object ---------- */
.page-hero--ticket .page-hero__lede, .page-hero--card .page-hero__lede { margin-top: 28px; }
.page-hero__note { max-width: 46ch; margin-top: 18px; color: var(--text-2); font-size: .9375rem; }

/* Events: the next-opening ticket is the hero, so the calendar comes straight after it. */
.page-hero--ticket { min-height: 0; padding-block: calc(var(--header-h) + clamp(48px, 7vw, 96px)) clamp(48px, 6vw, 80px); }
.page-hero--ticket .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 440px); align-items: end; }
.ticket__rows a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--paper-accent) 55%, transparent); text-underline-offset: 4px; }
.ticket__rows a:hover { color: var(--paper-accent); }
.ticket__note { margin-top: 18px; color: var(--paper-muted); font-size: .9375rem; line-height: 1.5; }

/* A real admission ticket: the body and a tear-off stub, punched exactly on the perforation. */
.ticket--split { padding: 0; background: none; -webkit-mask: none; mask: none; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .55)); transform: rotate(-1.2deg); }
.ticket__main, .ticket__stub { padding: clamp(26px, 3.6vw, 40px); background: var(--paper); }
.ticket__main {
  padding-bottom: clamp(22px, 3vw, 30px);
  -webkit-mask: radial-gradient(circle 14px at 0 100%, transparent 96%, #000 100%), radial-gradient(circle 14px at 100% 100%, transparent 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 14px at 0 100%, transparent 96%, #000 100%), radial-gradient(circle 14px at 100% 100%, transparent 96%, #000 100%);
  mask-composite: intersect;
}
.ticket__stub {
  padding-top: clamp(20px, 2.6vw, 26px);
  background: var(--paper-2);
  background-image: linear-gradient(90deg, var(--paper-line) 50%, transparent 0);
  background-size: 10px 1px; background-repeat: repeat-x; background-position: 18px 0;
  -webkit-mask: radial-gradient(circle 14px at 0 0, transparent 96%, #000 100%), radial-gradient(circle 14px at 100% 0, transparent 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 14px at 0 0, transparent 96%, #000 100%), radial-gradient(circle 14px at 100% 0, transparent 96%, #000 100%);
  mask-composite: intersect;
}
.ticket__stub .ticket__note { margin-top: 0; }
.ticket__stub .actions { margin-top: 18px; }
/* The stub carries the next night's RSVP, so it speaks in paper colours like the rest of the ticket. */
.ticket__stub {
  --text: var(--paper-ink); --text-2: #33271a; --muted: var(--paper-muted);
  --line: var(--paper-line); --line-strong: rgba(60, 42, 18, .5);
  --brass: var(--paper-accent); --brass-hi: #4f3509; --brass-ink: #fdf8ee;
  color: var(--paper-ink);
}
.ticket__stub .rsvp { gap: 12px; margin: 0; }
.ticket__stub .rsvp__note { color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.ticket__stub .rsvp__note strong { font-size: 1.1rem; }
.ticket__stub .rsvp .btn { justify-self: start; }
.ticket__stub .rsvp__feedback { min-height: 1.3em; color: var(--text-2); font-size: .875rem; }
.ticket__stub .rsvp__feedback:empty { min-height: 0; }
.ticket__stub .rsvp__hint a, .ticket__stub .rsvp__switch { color: var(--paper-accent); }
/* On the guest list: the house has punched your ticket. */
.rsvp__admit { display: grid; gap: 2px; }
.rsvp__admit-label { font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi); }
.rsvp__admit-name strong { display: block; font: 600 clamp(1.5rem, 2.4vw, 1.9rem)/1.1 var(--serif); font-variation-settings: 'opsz' 14; color: var(--text); overflow-wrap: anywhere; }
.rsvp__admit-when { color: var(--text-2); font: italic 600 1rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; }
.rsvp__admit + .btn { margin-top: 8px; }
/* In the stub, the punch is a real hole through the paper, beside the corner notches. */
@property --punch { syntax: '<length>'; inherits: false; initial-value: 9px; }
.ticket__stub:has(.rsvp__admit) {
  -webkit-mask: radial-gradient(circle 14px at 0 0, transparent 96%, #000 100%), radial-gradient(circle 14px at 100% 0, transparent 96%, #000 100%), radial-gradient(circle var(--punch) at calc(100% - 46px) 46px, transparent 94%, #000 100%);
  -webkit-mask-composite: source-in, source-in;
  mask: radial-gradient(circle 14px at 0 0, transparent 96%, #000 100%), radial-gradient(circle 14px at 100% 0, transparent 96%, #000 100%), radial-gradient(circle var(--punch) at calc(100% - 46px) 46px, transparent 94%, #000 100%);
  mask-composite: intersect;
}
.ticket__stub .rsvp__admit { padding-right: 56px; }
@media (prefers-reduced-motion: no-preference) {
  .ticket__stub:has(.rsvp__admit.is-new) { animation: ticket-punch .45s var(--ease) both; }
  .rsvp__admit.is-new > * { animation: ticket-ink .6s var(--ease) both; }
  .rsvp__admit.is-new > :nth-child(2) { animation-delay: .12s; }
  .rsvp__admit.is-new > :nth-child(3) { animation-delay: .24s; }
  @keyframes ticket-punch { from { --punch: 0px; } 60% { --punch: 11px; } to { --punch: 9px; } }
  @keyframes ticket-ink { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
}
.ticket__elsewhere { display: inline-block; margin-top: 14px; padding-block: 4px; color: var(--paper-accent); font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.ticket__elsewhere::after { content: ' ↓'; }
.ticket__elsewhere:hover { color: var(--paper-ink); }
.ticket__when {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'day weekday' 'day month';
  column-gap: 16px; align-items: end; margin: 2px 0 0;
}
.ticket__when [data-part="day"] { grid-area: day; font: 600 clamp(4.5rem, 8vw, 6rem)/.8 var(--serif); letter-spacing: -.03em; color: var(--paper-ink); }
.ticket__when [data-part="weekday"] { grid-area: weekday; font: italic 600 clamp(1.25rem, 1.9vw, 1.55rem)/1.1 var(--serif); font-variation-settings: 'opsz' 14; color: var(--paper-accent); }
.ticket__when [data-part="month"] { grid-area: month; padding-bottom: .12em; font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--serif); font-variation-settings: 'opsz' 14; color: var(--paper-ink); }
@media (max-width: 800px) { .ticket--split { transform: none; } }

/* Special events read as oxblood nights on the calendar, marked with the brass diamond. */
button.calendar-day.special { border-color: color-mix(in srgb, #c9a45a 55%, transparent); background: radial-gradient(130% 120% at 85% 0%, var(--oxblood-2), var(--oxblood) 70%); color: #f1e8da; }
button.calendar-day.special i { color: #e6c77e; }
button.calendar-day.special::after { content: ''; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; background: #e6c77e; transform: rotate(45deg); }
button.calendar-day.special:hover { border-color: #e6c77e; background: radial-gradient(130% 120% at 85% 0%, #5e1f21, var(--oxblood-2) 70%); }
button.calendar-day.special.selected { border-color: var(--brass); background: var(--brass); color: var(--brass-ink); }
button.calendar-day.special.selected i { color: var(--brass-ink); }
button.calendar-day.special.selected::after { background: var(--brass-ink); }
.calendar-key .calendar-key__swatch.calendar-special-key { border-color: color-mix(in srgb, #c9a45a 55%, transparent); background: var(--oxblood); }

/* Dress code: the official card is the hero; numbered sections follow the jump links in order. */
.page-hero--card::after { display: none; }
.page-hero--card .page-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 400px); align-items: center; }
.page-hero--card .dress-card img { transform: rotate(1.5deg); transition: transform .5s var(--ease); cursor: zoom-in; }
.page-hero--card .dress-card:hover img { transform: none; }
.page-hero--card .dress-card figcaption { max-width: 40ch; margin: 22px auto 0; line-height: 1.5; }
@media (max-width: 800px) {
  .page-hero--ticket .page-hero__grid, .page-hero--card .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero--card .dress-card { width: min(100%, 340px); margin-inline: auto; }
}

.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin: 0; padding: 0; list-style: none; }
.reasons li { padding: 30px 0 34px; border-top: 1px solid var(--line-strong); }
.reasons h3 { margin-bottom: 12px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.reasons p { max-width: 46ch; color: var(--text-2); }
@media (max-width: 640px) { .reasons { grid-template-columns: 1fr; } }

/* ---------- Lounge: walk the room ---------- */
/* The room leads as a wide still with its title set over it; the other stops follow as a numbered strip, in tour order. */
.walk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.walk__stop { position: relative; display: flex; flex-direction: column; }
.walk__stop--lead { grid-column: 1 / -1; }
.walk__view { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #0c0907; overflow: hidden; cursor: pointer; }
.walk__view img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease), filter .6s var(--ease); }
.walk__view::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(241, 232, 218, .3); pointer-events: none; transition: border-color .3s; }
.walk__view:hover img { transform: scale(1.03); filter: brightness(1.08); }
.walk__view:hover::after { border-color: rgba(230, 199, 126, .7); }
.walk__caption h3 { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.walk__no { flex: none; min-width: 1.6em; color: #e0bf74; font: 600 1rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .06em; }
.walk__caption p { margin-top: 6px; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }

.walk__stop--lead .walk__view img { aspect-ratio: 21 / 9; object-position: 50% 45%; }
.walk__stop--lead .walk__view::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 6, 5, .9) 0%, rgba(8, 6, 5, .35) 38%, rgba(8, 6, 5, 0) 62%), linear-gradient(90deg, rgba(8, 6, 5, .78) 0%, rgba(8, 6, 5, .4) 34%, rgba(8, 6, 5, 0) 58%); pointer-events: none; }
.walk__stop--lead .walk__view::after { z-index: 2; inset: 14px; }
.walk__stop--lead .walk__caption { position: absolute; left: clamp(28px, 4vw, 56px); bottom: clamp(24px, 3.4vw, 48px); z-index: 3; max-width: 34ch; pointer-events: none; }
.walk__stop--lead .walk__caption h3 { margin-top: 0; font-size: var(--fs-h2); line-height: .95; color: #f1e8da; }
.walk__stop--lead .walk__no { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.walk__stop--lead .walk__caption p { margin-top: 14px; color: #e3d6c2; font: italic 600 var(--fs-lede)/1.45 var(--serif); font-variation-settings: 'opsz' 14; }
.walk__cue {
  position: absolute; top: clamp(26px, 3vw, 36px); right: clamp(26px, 3vw, 36px); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
  border: 1px solid rgba(224, 191, 116, .6); background: rgba(12, 9, 7, .62); color: #e0bf74;
  font: 600 .75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.walk__cue::before { content: ''; width: 8px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.walk__view:hover .walk__cue { background: rgba(12, 9, 7, .85); border-color: #e0bf74; }

/* One authored moment: the room opens like the booth curtains, from the middle outwards. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .walk .walk__stop--lead .walk__view img { clip-path: inset(0 50% 0 50%); transition: clip-path 1.6s cubic-bezier(.16, 1, .3, 1) .15s, transform .6s var(--ease), filter .6s var(--ease); }
  .js-reveal .walk.is-revealed .walk__stop--lead .walk__view img { clip-path: inset(0 0 0 0); }
}

@media (max-width: 900px) {
  .walk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .walk__stop--lead .walk__view img { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .walk__stop--lead .walk__view img { aspect-ratio: 4 / 5; }
  .walk__stop--lead .walk__caption { left: 24px; right: 24px; bottom: 26px; }
  .walk__cue { top: 22px; right: 22px; padding: 10px 12px; }
  .walk__caption h3 { font-size: 1.2rem; gap: 8px; }
  .walk__caption p { font-size: .875rem; }
}

/* House customs, printed like the menu card. */
.customs { align-items: center; }
.notice { max-width: 540px; margin-left: auto; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); transform: rotate(-1deg); }
.notice .menu-item__desc a { display: block; width: fit-content; margin-top: 8px; color: var(--paper-accent); font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.notice .menu-item__desc a::after { content: ' →'; }
.notice .menu-item__desc a:hover { color: var(--paper-ink); }
.customs .chapter__body .h2 { margin-bottom: 20px; }
@media (max-width: 900px) { .notice { margin-inline: auto; } }

/* The next-opening band can close a page as well as open one. */
.band + .link-arrow { margin-top: -4px; }

/* ---------- Partners: a featured bill and what the house welcomes ---------- */
.bill {
  position: relative; max-width: 560px; margin: 0 auto;
  padding: clamp(22px, 3vw, 36px);
  background: var(--paper-card); color: var(--paper-ink);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
  transform: rotate(-1.2deg);
}
.bill::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--paper-line); outline: 1px solid var(--paper-line); outline-offset: -5px; pointer-events: none; }
.bill__head { padding-bottom: 16px; text-align: center; border-bottom: 1px solid var(--paper-line); }
.bill__head .menu-card__mark { width: min(200px, 64%); }
.bill__head span { display: block; margin-top: 8px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--paper-muted); }
.bill img { width: 100%; margin-block: 18px; }
.bill__foot { padding-top: 14px; border-top: 1px solid var(--paper-line); text-align: center; font: italic 600 1rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; color: var(--paper-muted); }

.offer-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.offer-list li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px 32px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); }
.offer-list h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.offer-list p { color: var(--text-2); }
@media (max-width: 560px) { .offer-list li { grid-template-columns: 1fr; } }
.staff-verified, .staff-unverified { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; font-size: .875rem; }
.staff-verified { border: 1px solid rgba(110, 170, 110, .45); background: rgba(110, 170, 110, .1); color: #a9d4a4; }
.staff-verified::before { content: '✓'; font-weight: 600; }
.staff-unverified { border: 1px solid var(--line); color: var(--muted); }
body[data-theme="light"] .staff-verified { color: #2f6b2a; }

/* ---------- Applicant identity (membership application) ---------- */
.identity { display: grid; gap: 6px; margin-bottom: 26px; padding: 18px 20px; border: 1px dashed var(--line-strong); background: rgba(122, 85, 24, .05); }
.identity__label { font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.identity__name { font: 600 1.3rem/1.25 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.identity__name span { font: 500 .9375rem/1 var(--sans); color: var(--muted); }
.identity .btn { justify-self: start; margin-top: 8px; }
/* A signed-out membership applicant sees only the type list until they sign in. */
.form[data-gated] > :not(.field--lead) { display: none !important; }
.application-tracker__next { display: grid; gap: 14px; justify-items: start; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.application-tracker__next strong { display: block; font: 600 1.15rem/1.3 var(--serif); font-variation-settings: 'opsz' 10; }
.application-tracker .discord-button, .application-tracker .discord-button:hover { color: #fff; text-decoration: none; }
.application-tracker__state { text-transform: uppercase; }
.identity__note { color: var(--text-2); font-size: .9375rem; }
.identity .btn { justify-self: start; margin-top: 8px; }
.identity.is-verified { border-style: solid; border-color: rgba(60, 120, 60, .45); background: rgba(60, 120, 60, .06); }
.identity.is-verified .identity__label { color: #2f6b2a; }
.identity.is-verified .identity__label::before { content: '✓ '; }


/* ---------- Staff workspace ("desk"): overview, guest lists, events ---------- */
.desk { --desk-good: #8fc48a; --desk-bad: #d27a73; }
.desk__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
.desk__head h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.desk__who { display: flex; flex-wrap: wrap; gap: 10px; }
.desk__tabs { position: sticky; top: var(--header-h, 72px); z-index: 5; display: flex; gap: 4px; margin: clamp(24px, 4vw, 40px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.desk__tabs::-webkit-scrollbar { display: none; }
.desk__tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 0; background: none; color: var(--muted); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s; }
.desk__tabs button::after { content: ''; position: absolute; inset: auto 12px -1px; height: 2px; background: var(--brass); transform: scaleX(0); transition: transform .25s; }
.desk__tabs button:hover { color: var(--text); }
.desk__tabs button[aria-selected="true"] { color: var(--text); }
.desk__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.desk__tabs button:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }
.desk__badge { min-width: 22px; padding: 4px 6px; border-radius: 999px; background: var(--brass); color: var(--bg); font-size: .6875rem; letter-spacing: 0; text-align: center; }
.desk__empty { padding: 28px 0; color: var(--muted); }
.desk-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.desk-link { padding: 6px 2px; border: 0; background: none; color: var(--brass); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.desk-link:hover { color: var(--brass-hi); text-decoration: underline; text-underline-offset: 4px; }
.desk-link.is-danger { color: var(--desk-bad); }
.desk-link:disabled { opacity: .5; cursor: wait; }
.desk-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.desk-section-head h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.desk-select { min-width: 200px; }

/* Toast */
.desk__toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: min(520px, calc(100vw - 32px)); padding: 14px 18px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); font-size: .9375rem; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s; }
.desk__toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.desk__toast[data-tone="good"] { border-color: rgba(143, 196, 138, .55); }
.desk__toast[data-tone="bad"] { border-color: rgba(210, 122, 115, .6); }
.desk__toast[data-tone="warn"] { border-color: var(--brass); }

/* Overview */
.desk-overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 28px); align-items: start; }
.desk-next { display: grid; gap: 12px; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--line-strong); background: radial-gradient(120% 120% at 100% 0%, var(--oxblood-2), var(--oxblood) 55%, #240a0b); }
.desk-next h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.desk-next__when { color: var(--text-2); }
.desk-next__countdown { justify-self: start; padding: 8px 14px; border: 1px solid var(--line-strong); color: var(--brass-hi); font: italic 600 1.15rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.desk-next.is-live .desk-next__countdown { border-color: rgba(143, 196, 138, .55); color: var(--desk-good); }
.desk-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 14px 0 6px; border-block: 1px solid var(--line); }
.desk-stats div { display: grid; gap: 6px; padding: 18px 0; }
.desk-stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.desk-stats dt { order: 2; color: var(--muted); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.desk-stats dd { margin: 0; font: 600 clamp(2.2rem, 4vw, 3rem)/1 var(--serif); color: var(--text); }
.desk-upcoming { display: grid; gap: 14px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); background: var(--surface); }
.desk-upcoming h2 { font-size: 1.6rem; }
.desk-upcoming ol { display: grid; margin: 0; padding: 0; list-style: none; }
.desk-upcoming li + li { border-top: 1px solid var(--line); }
.desk-upcoming li button { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 4px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.desk-upcoming li button:hover { background: rgba(201, 164, 90, .06); }
.desk-upcoming time { color: var(--brass); font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.desk-upcoming__title { display: flex; align-items: center; min-width: 0; }
.desk-upcoming__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-upcoming__title i { flex: none; }
.desk-upcoming__title i, .desk-event h3 i { margin-left: 8px; padding: 3px 7px; border: 1px solid var(--line-strong); color: var(--brass); font: 600 .625rem/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; }
.desk-upcoming__count { color: var(--muted); font-size: .875rem; }

/* Guest lists */
.desk-guests { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.desk-nights { position: sticky; top: calc(var(--header-h, 72px) + 72px); display: grid; gap: 4px; max-height: calc(100vh - var(--header-h, 72px) - 100px); overflow-y: auto; }
.desk-nights__label { margin: 10px 0 4px; color: var(--muted); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.desk-nights__label:first-child { margin-top: 0; }
.desk-night { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border: 1px solid transparent; background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.desk-night time { grid-column: 1; color: var(--brass); font: 600 .6875rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.desk-night span { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.desk-night b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--text); font: 600 1.4rem/1 var(--serif); font-variation-settings: 'opsz' 10; }
.desk-night:hover { background: rgba(201, 164, 90, .06); }
.desk-night.is-selected { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.desk-night.is-cancelled { opacity: .6; }
.desk-list { min-width: 0; }
.desk-list__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.desk-list__head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.desk-list__head p:not(.kicker) { color: var(--text-2); }
.desk-list__tally { color: var(--muted); font-size: .9375rem; }
.desk-list__tally strong { color: var(--text); font: 600 2rem/1 var(--serif); font-variation-settings: 'opsz' 14; }
.desk-list__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; }
.desk-search { flex: 1 1 220px; }
.desk-search input { width: 100%; }
.desk-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); background: none; color: var(--text-2); font: 500 .8125rem/1 var(--sans); cursor: pointer; }
.desk-filters button b { color: var(--muted); font-weight: 600; }
.desk-filters button[aria-pressed="true"] { border-color: var(--brass); background: rgba(201, 164, 90, .12); color: var(--text); }
.desk-filters button[aria-pressed="true"] b { color: var(--brass-hi); }
.desk-guestlist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.desk-guest { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 10px 4px; border-bottom: 1px solid var(--line); transition: background .2s; }
.desk-guest:hover { background: rgba(201, 164, 90, .04); }
.desk-guest__number { color: var(--muted); font: 600 .9375rem/1 var(--serif); font-variation-settings: 'opsz' 10; }
.desk-guest__who { display: grid; gap: 4px; min-width: 0; }
.desk-guest__who strong { font: 600 1.25rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; overflow-wrap: anywhere; }
.desk-guest__who span { color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.desk-guest__note { color: var(--muted); font-size: .8125rem; }
.desk-guest.is-cancelled, .desk-guest.is-removed { opacity: .65; }
.desk-guest.is-removed .desk-guest__who strong { text-decoration: line-through; text-decoration-color: var(--desk-bad); }

/* Events */
.desk-events { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.desk-eventlist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.desk-event { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.desk-event__date { display: grid; justify-items: center; padding: 10px 0; border: 1px solid var(--line-strong); }
.desk-event__date b { font: 600 1.6rem/1 var(--serif); font-variation-settings: 'opsz' 10; }
.desk-event__date span { color: var(--brass); font: 600 .625rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.desk-event__body { display: grid; gap: 6px; min-width: 0; }
.desk-event h3 { font-size: 1.4rem; }
.desk-event__body p { color: var(--text-2); font-size: .9375rem; }
.desk-event__description { color: var(--muted) !important; }
.desk-event__audit { color: var(--muted); font-size: .8125rem; }
.desk-event__actions { display: flex; flex-direction: column; align-items: end; gap: 6px; }
.desk-event.is-cancelled, .desk-event.is-past { opacity: .62; }
.desk-past { margin-top: 24px; }
.desk-past summary { padding: 12px 0; color: var(--text-2); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.desk-past summary b { color: var(--muted); }
.desk-form { position: sticky; top: calc(var(--header-h, 72px) + 72px); display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line-strong); background: var(--surface); }
.desk-form.is-editing { border-color: var(--brass); }
.desk-form h2 { font-size: 1.8rem; }
.desk-form input, .desk-form textarea { width: 100%; }
.desk-form__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.desk-form__preview { min-height: 1.4em; color: var(--brass); font: italic 600 1rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; }
.desk-form__note { color: var(--muted); font-size: .8125rem; }

@media (max-width: 960px) {
  .desk-overview, .desk-events { grid-template-columns: 1fr; }
  .desk-form { position: static; }
  .desk-guests { grid-template-columns: 1fr; }
  /* Nights become a swipeable strip above the list. */
  .desk-nights { position: static; display: flex; max-height: none; overflow-x: auto; padding-bottom: 6px; }
  .desk-nights__label { display: none; }
  .desk-night { flex: 0 0 auto; min-width: 150px; border-color: var(--line); }
}
@media (max-width: 560px) {
  .desk__tabs button { padding: 0 12px; }
  .desk-stats div + div { padding-left: 12px; }
  .desk-guest { grid-template-columns: minmax(0, 1fr) auto; }
  .desk-guest__number { display: none; }
  .desk-form__row { grid-template-columns: 1fr 1fr; }
  .desk-form__row label:first-child { grid-column: 1 / -1; }
  .desk-upcoming li button { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .desk-upcoming time { grid-column: 1 / -1; }
  .desk-event { grid-template-columns: 52px minmax(0, 1fr); }
  .desk-event__actions { grid-column: 2; flex-direction: row; align-items: center; }
}
.image-lightbox__toolbar button { white-space: nowrap; }
@media (max-width: 480px) {
  .image-lightbox__toolbar { padding-inline: 12px; }
  .image-lightbox__toolbar > span { display: none; }
  .image-lightbox__toolbar div { width: 100%; justify-content: space-between; }
}

/* =====================================================================
   Immersion: icons, atmosphere, interaction and polish
   ===================================================================== */

/* ---------- Brass line-art icons ---------- */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.steps__time--icon { color: var(--brass); }
.steps__time--icon .icon { width: 46px; height: 46px; stroke-width: 1.25; }
.ticket__rows li > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.ticket__rows .icon { width: 20px; height: 20px; color: var(--paper-accent); }

.bar-menu__tabs [role="tab"][aria-selected="true"] .icon { color: var(--paper-accent); }

/* ---------- Menu tab icons: the illustrations' drinks in miniature (drawn in assets/js/menu.js) ---------- */
/* Every glass shows its drink half poured; hover raises it a little; the chosen tab is poured full, in full colour.
   Outlines are darkened so they read on the menu's paper. */
.menu-icon { display: inline-flex; flex: none; align-self: center; height: 30px; transform-origin: 50% 90%; }
.menu-mini__svg { height: 30px; width: auto; overflow: visible; }
.menu-mini__svg--cigar { height: 22px; align-self: center; }
.menu-mini { --liquid-top: #e3a04c; --liquid-bottom: #7a3f12; opacity: .85; filter: saturate(.75); }
[role="tab"]:hover .menu-mini, [role="tab"]:focus-visible .menu-mini, [role="tab"][aria-selected="true"] .menu-mini { opacity: 1; filter: none; }
.menu-mini__line { fill: none; stroke: var(--paper-accent); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.menu-mini__wall { stroke-width: 1px; opacity: .6; }
.menu-mini__glass { fill: rgba(255, 250, 240, .38); }
.menu-mini__shine { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.menu-mini__liquid { transform: translateY(var(--rest)); }
[role="tab"]:not([aria-selected="true"]):hover .menu-mini__liquid { transform: translateY(var(--sip)); }
[role="tab"][aria-selected="true"] .menu-mini__liquid { transform: translateY(var(--fill)); }
.menu-mini__surface { fill: var(--liquid-top); filter: brightness(1.12); }
.menu-mini__foam { fill: #fff6e3; }
.menu-mini__ice { fill: rgba(255, 255, 255, .35); stroke: rgba(255, 255, 255, .8); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.menu-mini__bubble { fill: rgba(255, 255, 255, .75); }
.menu-mini__band { fill: #c9a45a; stroke: #8a6a2e; stroke-width: .4; }
.menu-mini__ash { fill: #9d968c; }
.menu-mini__ember { fill: #e0702a; opacity: .55; }
.menu-mini__smoke { fill: none; stroke: rgba(71, 57, 42, .55); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0; }
[role="tab"][aria-selected="true"] .menu-mini__ember { opacity: 1; fill: #ff8a3d; }
[role="tab"][aria-selected="true"] .menu-mini__smoke { opacity: 1; }
/* The underline moves to the chosen tab rather than jumping. */
.bar-menu__indicator { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--paper-accent); transform-origin: 0 0; pointer-events: none; }
.bar-menu__tabs.has-indicator [role="tab"][aria-selected="true"] { border-bottom-color: transparent; }
/* On narrow screens the row scrolls sideways; its fading right edge shows there is more. */
@media (max-width: 900px) { .bar-menu__tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } }
@media (prefers-reduced-motion: no-preference) {
  .menu-mini { transition: opacity .3s, filter .3s; }
  .menu-mini__liquid { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  .bar-menu__indicator.is-placed { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
  /* Choosing a category raises its glass and pours it full from empty. */
  .menu-icon.is-raised { animation: raise-glass .6s cubic-bezier(.16, 1, .3, 1); }
  @keyframes raise-glass { 35% { transform: translateY(-1.5px) rotate(-9deg); } }
  .menu-icon.is-raised .menu-mini__liquid { animation: mini-pour .9s cubic-bezier(.3, .7, .3, 1); }
  @keyframes mini-pour { from { transform: translateY(var(--empty)); } }
  [role="tab"][aria-selected="true"] .menu-mini__ember { animation: mini-ember 2.4s ease-in-out 3; }
  @keyframes mini-ember { 50% { opacity: .6; } }
  [role="tab"][aria-selected="true"] .menu-mini__smoke { animation: mini-smoke 3s ease-in-out 3 both; }
  @keyframes mini-smoke { 0% { opacity: 0; transform: translateY(2px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3px); } }
}

/* ---------- Living hero ---------- */
.hero__atmosphere { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }



/* ---------- Brass sheen (membership card, mini pass) ---------- */
.membership-card__face::after, .mini-pass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--sheen-x, 28%) var(--sheen-y, 18%), rgba(255, 228, 170, .26), rgba(255, 228, 170, .06) 28%, transparent 55%);
  mix-blend-mode: screen; transition: background-position .2s;
}

/* ---------- Walk-through tour ---------- */
.tour-launch {
  position: absolute; right: 26px; bottom: 26px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px;
  border: 1px solid rgba(241, 232, 218, .55); background: rgba(12, 9, 7, .78);
  color: #f1e8da; cursor: pointer; font: 600 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.tour-launch::before { content: ''; width: 9px; height: 12px; background: #e0bf74; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tour-launch:hover { background: rgba(12, 9, 7, .8); border-color: #e0bf74; }
.tour { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #080605; overflow: hidden; }
.tour::backdrop { background: #000; }
.tour[open] { display: block; }
.tour__stage { position: absolute; inset: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tour__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.tour__slide.is-active { opacity: 1; }
.tour__slide img { width: 100%; height: 100%; object-fit: cover; }
.tour__slide.is-active img { animation: tour-drift 14s ease-out both; }
/* A gentle drift that settles at full size, so the photo ends pin-sharp. */
@keyframes tour-drift { from { transform: scale(1.05) translate(.6%, .4%); } to { transform: scale(1) translate(0, 0); } }
.tour__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 6, 5, .92), rgba(8, 6, 5, .2) 55%, rgba(8, 6, 5, .45)); }
.tour__slide--finale { display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 40%, #3a1113, #0c0907 70%); }
/* The logo has a near-black square background; screen blending drops it into the oxblood backdrop. */
.tour__slide--finale img {
  width: min(62vmin, 520px); height: auto; mix-blend-mode: screen; opacity: .92; transform: none; animation: none;
  /* Fade the square's outer edge so no box shows; the logo's own frame sits inside this margin. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(transparent, #000 3.5%, #000 96.5%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(transparent, #000 3.5%, #000 96.5%, transparent); mask-composite: intersect;
}
@media (min-width: 900px) { .tour__slide--finale { place-items: center end; padding-right: 8vw; } }
@media (max-width: 899px) { .tour__slide--finale { place-items: start center; padding-top: calc(env(safe-area-inset-top, 0px) + 86px); } .tour__slide--finale img { width: min(58vw, 34vh); } }
.tour__slide--finale::after { display: none; }
.tour__caption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(100px, 14vh, 140px); max-width: 620px; }
.tour__caption h2 { font-size: clamp(2.6rem, 6vw, 4.8rem); margin-bottom: 14px; }
.tour__caption p:not(.kicker):not(.tour__count) { font: italic 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.5 var(--serif); font-variation-settings: 'opsz' 14; color: #e3d6c2; }
.tour__caption .actions { margin-top: 26px; }
.tour__count { margin-bottom: 14px; font: 500 .875rem/1 var(--sans); letter-spacing: .2em; color: #a89a82; }
.tour__controls { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 5vh, 48px); display: flex; align-items: center; gap: 18px; }
.tour__arrow { width: 50px; height: 50px; border: 1px solid rgba(241, 232, 218, .45); background: rgba(12, 9, 7, .4); color: #f1e8da; font-size: 1.2rem; cursor: pointer; }
.tour__arrow:hover { border-color: #e0bf74; color: #e0bf74; }
.tour__dots { display: flex; gap: 8px; }
.tour__dots button { width: 34px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.tour__dots button::before { content: ''; display: block; height: 2px; background: rgba(241, 232, 218, .3); transition: background .3s; }
.tour__dots button[aria-current="true"]::before { background: #e0bf74; }
.tour__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: var(--gutter); min-height: 44px; padding: 0 16px; border: 1px solid rgba(241, 232, 218, .45); background: rgba(12, 9, 7, .5); color: #f1e8da; cursor: pointer; font: 600 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
body.tour-open { overflow: hidden; }

/* ---------- Menu pour illustrations ---------- */
/* Each drink is drawn as real glassware with its drink inside; see assets/js/menu.js. The liquid's colours are set per
   drink, the level per glass (--fill). Everything is at rest by default; the pour plays only with motion allowed. */
.bar-art { --liquid-top: #e3a04c; --liquid-bottom: #7a3f12; position: relative; height: 190px; margin: -10px 0 0; }
.bar-art--type-coupe { --liquid-top: #f0a457; --liquid-bottom: #a4461c; }
.bar-art--type-pint { --liquid-top: #f3c95a; --liquid-bottom: #b8761d; }
.bar-art--type-highball { --liquid-top: #f5e3a6; --liquid-bottom: #c29a4e; }
.bar-art__svg { position: absolute; left: -14px; bottom: 0; height: 190px; width: 190px; overflow: hidden; }
.bar-art__svg--wide { width: 266px; }
.bar-art__glassware { width: 160px; }
.bar-art--coupe { --fill: 105px; }
.bar-art--rocks { --fill: 139px; }
.bar-art--shot { --fill: 151px; }
.bar-art--pint { --fill: 86px; }
.bar-art--highball { --fill: 97px; }
.bar-art__stop-top { stop-color: var(--liquid-top); }
.bar-art__stop-bottom { stop-color: var(--liquid-bottom); }
.bar-art__line { fill: none; stroke: #e0bf74; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bar-art__glass { fill: rgba(255, 240, 215, .05); stroke: rgba(224, 191, 116, .16); stroke-width: 6; stroke-linejoin: round; }
.bar-art__wall { fill: none; stroke: rgba(224, 191, 116, .45); stroke-width: 1.2; stroke-linecap: round; }
.bar-art__highlight { fill: none; stroke: rgba(255, 248, 235, .26); stroke-width: 2.4; stroke-linecap: round; }
.bar-art__pour { transform: translateY(var(--fill)); }
.bar-art__surface { transform-box: view-box; transform-origin: 0 0; transform: scaleY(.45); }
.bar-art__wave { fill: var(--liquid-top); }
.bar-art__wave--back { opacity: .55; }
.bar-art__foam { fill: #f4ead6; }
.bar-art__head { transform-box: view-box; transform-origin: 0 0; }
.bar-art__ripple { fill: none; stroke: rgba(255, 245, 225, .65); stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bar-art__bubble { fill: rgba(255, 250, 240, .75); opacity: 0; }
.bar-art__ice { fill: rgba(255, 255, 255, .2); stroke: rgba(255, 255, 255, .55); stroke-width: 1; }
.bar-art__ice-shine { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; stroke-linecap: round; }
.bar-art__glint { opacity: 0; }
.bar-art__stream { fill: none; stroke: var(--liquid-top); stroke-width: 3.4; stroke-linecap: round; opacity: 0; }
.bar-art__vessel { opacity: 0; transform-box: view-box; transform-origin: 114px 40px; }
.bar-art__vessel-body { fill: #2a1d13; stroke: #e0bf74; stroke-width: 1.4; stroke-linejoin: round; }
.bar-art__vessel-label { fill: rgba(201, 164, 90, .35); }
.bar-art__vessel-rim { fill: none; stroke: #e0bf74; stroke-width: 2; stroke-linecap: round; }
.bar-art__vein { fill: none; stroke: rgba(30, 15, 6, .35); stroke-width: .7; stroke-linecap: round; }
.bar-art__band-line { stroke: rgba(70, 45, 10, .6); stroke-width: .6; }
.bar-art__ash-line { stroke: rgba(60, 55, 50, .5); stroke-width: .7; }
.bar-art__smoke { fill: none; stroke: rgba(235, 222, 205, .42); stroke-width: 3; stroke-linecap: round; }
.bar-art__smoke--late { stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  /* The glass draws itself in brass. */
  .bar-art.is-pouring .bar-art__line { stroke-dasharray: 1; animation: art-draw .55s cubic-bezier(.4, 0, .2, 1) both; }
  @keyframes art-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .bar-art.is-pouring .bar-art__glass, .bar-art.is-pouring .bar-art__highlight, .bar-art.is-pouring .bar-art__wall { animation: art-fade .5s .2s both; }
  @keyframes art-fade { from { opacity: 0; } }
  /* Ice drops in before the pour. */
  .bar-art.is-pouring .bar-art__ice-drop { animation: ice-drop .55s cubic-bezier(.55, 0, 1, .45) .15s both; }
  @keyframes ice-drop { 0% { transform: translateY(-150px); } 82% { transform: translateY(2px); } 100% { transform: none; } }
  /* The bottle (or shaker) tilts in, pours, and tilts away. */
  .bar-art.is-pouring .bar-art__vessel { animation: vessel 2.3s cubic-bezier(.4, 0, .2, 1) .15s both; }
  @keyframes vessel { 0% { opacity: 0; transform: translate(34px, -30px) rotate(-26deg); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(30px, -26px) rotate(-22deg); } }
  /* The stream flows down into the glass, then its tail follows it in. */
  .bar-art.is-pouring .bar-art__stream { stroke-dasharray: 1 1; animation: stream 1.55s linear .5s both; }
  @keyframes stream { 0% { opacity: 0; stroke-dashoffset: 1; } 2% { opacity: 1; } 14% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; stroke-width: 3.4; opacity: 1; } 100% { stroke-dashoffset: -1; stroke-width: 1.2; opacity: 0; } }
  /* The drink rises, overshoots a touch and settles; its surface rolls and calms. */
  .bar-art.is-pouring .bar-art__pour { animation: pour 1.5s cubic-bezier(.35, .6, .3, 1) .58s both; }
  @keyframes pour { 0% { transform: translateY(205px); } 86% { transform: translateY(calc(var(--fill) - 2px)); } 100% { transform: translateY(var(--fill)); } }
  .bar-art.is-pouring .bar-art__surface { animation: settle 3.2s ease-out .6s both; }
  @keyframes settle { from { transform: scaleY(1.4); } to { transform: scaleY(.45); } }
  .bar-art.is-pouring .bar-art__wave { animation: roll 1.1s linear 5; }
  .bar-art.is-pouring .bar-art__wave--back { animation: roll-back 1.6s linear 4; }
  @keyframes roll { to { transform: translateX(-20px); } }
  @keyframes roll-back { to { transform: translateX(20px); } }
  .bar-art.is-pouring .bar-art__ripple { animation: ripple .9s ease-out .7s 2; }
  .bar-art.is-pouring .bar-art__ripple--late { animation-delay: 1.15s; }
  @keyframes ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2, 2); } }
  .bar-art.is-pouring .bar-art__head { animation: foam 1.6s ease-out .9s both; }
  @keyframes foam { from { transform: scaleY(.15); } }
  .bar-art.is-pouring .bar-art__bubble { animation: bubble 1.9s ease-in 1.6s 4 both; }
  .bar-art.is-pouring .bar-art__bubble:nth-of-type(2n) { animation-delay: 1.95s; }
  .bar-art.is-pouring .bar-art__bubble:nth-of-type(3n) { animation-delay: 2.3s; }
  @keyframes bubble { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .85; } 100% { opacity: 0; transform: translateY(-70px); } }
  /* Light crosses the glass once it is full. */
  .bar-art.is-pouring .bar-art__glint { animation: glint 1s ease-in-out 2.15s both; }
  @keyframes glint { 0% { opacity: 0; transform: translateX(0); } 30% { opacity: .5; } 100% { opacity: 0; transform: translateX(120px); } }
  /* The cigar slides in, its ember breathes and its smoke rises (the turbulence itself is animated in the SVG). */
  .bar-art.is-pouring .bar-art__cigar { animation: cigar-in .7s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes cigar-in { from { opacity: 0; transform: translateX(-14px); } }
  .bar-art.is-pouring .bar-art__ember { animation: ember 2.6s ease-in-out .5s 4; }
  @keyframes ember { 50% { opacity: .5; } }
  .bar-art.is-pouring .bar-art__smoke { animation: smoke-rise 4.5s ease-in-out .4s 3 both; }
  .bar-art.is-pouring .bar-art__smoke--late { animation-delay: 2.6s; }
  @keyframes smoke-rise { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
}


/* ---------- Page transitions: through warm dark, header stays put ---------- */
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: door-out .3s ease-in both; }
  ::view-transition-new(root) { animation: door-in .45s ease-out both; }
  @keyframes door-out { to { opacity: 0; filter: brightness(.35) sepia(.4); } }
  @keyframes door-in { from { opacity: 0; filter: brightness(.35) sepia(.4); } }
}

@media (max-width: 899px) and (max-height: 760px) { .tour__slide--finale img { display: none; } }

/* ---------- Header icons and sign-in ---------- */
/* The right side of the header: square icon button (theme), Enquire, then the round account button. */
.site-header__actions { gap: 8px; }
.theme-toggle[data-theme-toggle] { width: 42px; justify-content: center; padding: 0; }
.theme-toggle .icon { width: 19px; height: 19px; }
.site-header__inner > .account-chip, .site-header__inner > .account-menu { margin-left: -14px; }
.account-chip {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text-2);
  text-decoration: none; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.account-chip .icon { width: 19px; height: 19px; stroke-width: 1.5; }
.account-chip:hover, .account-chip[aria-expanded="true"] { border-color: var(--brass); background: rgba(201, 164, 90, .1); color: var(--brass); }
.account-chip:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
.account-chip__dot { display: none; }
/* A remembered sign-in: keep "Sign in" out of sight for the moment before the account button replaces it. */
.has-account a.account-chip:not(.is-signed-in) { visibility: hidden; }
/* Signed in: a brass ring and a small "present" dot. */
.account-chip.is-signed-in { border-color: var(--brass); color: var(--brass); }
.account-chip.is-signed-in .account-chip__dot { display: block; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; background: #8fc48a; }
/* Signed in with a character: name, then their monogram on a signet ring, then a chevron. The whole row is the button. */
.account-chip--named { width: auto; height: auto; gap: 12px; display: inline-flex; align-items: center; padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--text); }
.account-chip--named:hover, .account-chip--named[aria-expanded="true"] { background: none; color: var(--text); }
.account-chip--named:focus-visible { outline-offset: 4px; }
.account-chip__face {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--brass); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(230, 199, 126, .16), transparent 62%);
  transition: background .25s, border-color .25s;
}
/* The inner engraved ring of the signet. */
.account-chip__face::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(201, 164, 90, .3); border-radius: 50%; }
.monogram { font: 600 1rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .04em; color: var(--brass-hi); }
.account-chip--named:hover .account-chip__face, .account-chip--named[aria-expanded="true"] .account-chip__face { background: rgba(201, 164, 90, .14); border-color: var(--brass-hi); }
.account-chip__name { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 16ch; text-align: right; font: 600 1rem/1.15 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.account-chip__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__name small { font: 600 .6875rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.account-chip .account-chip__chevron { width: 14px; height: 14px; margin-left: -4px; color: var(--brass); stroke-width: 2; transition: transform .3s var(--ease); }
.account-chip[aria-expanded="true"] .account-chip__chevron { transform: rotate(180deg); }
/* Hidden where the full navigation needs the width, and on phones. */
@media (min-width: 1081px) and (max-width: 1279px), (max-width: 560px) { .account-chip__name, .account-chip .account-chip__chevron { display: none; } }
@media (max-width: 1080px) {
  .site-header__inner > .account-chip, .site-header__inner > .account-menu { order: 4; margin-left: 0; }
}
/* Phones: smaller account button so the menu and account buttons keep their places. */
@media (max-width: 560px) {
  .account-chip { width: 42px; height: 42px; }
  .account-chip--named { width: auto; height: auto; }
  .account-chip__face { width: 42px; height: 42px; }
}

/* ---------- Account page ---------- */

.account-notice { margin-top: 28px; padding: 14px 18px; border: 1px solid var(--line-strong); background: rgba(201, 164, 90, .08); color: var(--text); }
.account-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--text-2); }
.account-perks li { display: flex; gap: 12px; }
.account-perks li::before { content: '◆'; color: var(--brass); font-size: .7rem; line-height: 1.9; }
.account-note { color: var(--muted); font-size: .875rem; }
.account-note strong { color: var(--text); font-weight: 500; }
.account-for { margin-top: 18px; padding-block: 12px; border-block: 1px solid var(--line); color: var(--text-2); }
.account-for strong { font: 600 1.15rem/1.3 var(--serif); font-variation-settings: 'opsz' 10; color: var(--brass); }
.account-warning { padding: 12px 14px; border: 1px solid rgba(210, 122, 115, .5); color: var(--text-2); font-size: .9375rem; }
.account-warning a { color: var(--brass); }
.account-nick { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.account-nick .field { flex: 1 1 220px; display: grid; gap: 8px; }
.account-nick .field span { color: var(--muted); font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.account-nick select { width: 100%; }
.account-switch { display: flex !important; align-items: center; gap: 14px; color: var(--text-2) !important; font: 450 .9375rem/1.4 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
.account-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0 !important; }
.account-switch span { position: relative; flex: none; width: 42px; height: 24px; border: 1px solid var(--line-strong); border-radius: 999px; transition: background .2s, border-color .2s; }
.account-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.account-switch input:checked + span { border-color: var(--brass); background: rgba(201, 164, 90, .2); }
.account-switch input:checked + span::after { background: var(--brass); transform: translateX(18px); }
.account-switch input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 3px; }
.rsvp__hint a { color: var(--brass); }

/* Header account menu: who you are playing as, the other characters, then the account links.
   A small printed card with the house's double rule, dropped from the signet. */
.account-menu { position: relative; }
.account-menu__panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 120;
  display: grid; width: 300px; max-width: calc(100vw - 32px); padding: 8px;
  border: 1px solid var(--line-strong); background: var(--bg-2);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75);
  transform-origin: top right;
  animation: account-menu-in .22s var(--ease);
}
.account-menu__panel::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--line); pointer-events: none; }
.account-menu__panel[hidden] { display: none; }
@keyframes account-menu-in { from { opacity: 0; transform: translateY(-6px); } }
.account-menu__who { display: flex; align-items: center; gap: 14px; padding: 16px 14px 18px; border-bottom: 1px solid var(--line); }
.account-menu__seal { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass-hi); font: 600 1.2rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .04em; }
.account-menu__seal::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(201, 164, 90, .3); border-radius: 50%; }
.account-menu__who p { display: grid; gap: 4px; min-width: 0; }
.account-menu__who small { color: var(--muted); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.account-menu__who strong { overflow: hidden; color: var(--text); font: 600 1.4rem/1.1 var(--serif); font-variation-settings: 'opsz' 10; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__label { padding: 16px 14px 6px; color: var(--muted); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.account-menu__characters { display: grid; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.account-menu__character, .account-menu__link {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.account-menu__character { padding: 8px 14px; font: 600 1.1rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.account-menu__initials { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brass); font: 600 .8125rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .04em; transition: border-color .2s, background .2s; }
.account-menu__character:hover, .account-menu__character:focus-visible { background: rgba(201, 164, 90, .08); color: var(--brass-hi); }
.account-menu__character:hover .account-menu__initials, .account-menu__character:focus-visible .account-menu__initials { border-color: var(--brass); background: rgba(201, 164, 90, .1); }
.account-menu__character.is-busy { opacity: .6; cursor: wait; }
.account-menu__links { display: grid; padding-top: 6px; }
.account-menu__link { justify-content: space-between; padding: 13px 14px; font: 600 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.account-menu__link .icon { width: 16px; height: 16px; color: var(--brass); stroke-width: 1.75; transition: transform .25s var(--ease); }
.account-menu__link:hover, .account-menu__link:focus-visible { background: rgba(201, 164, 90, .08); color: var(--brass-hi); }
.account-menu__link:hover .icon, .account-menu__link:focus-visible .icon { transform: translateX(4px); }
.account-menu__link--quiet { color: var(--muted); }
.account-menu__panel :focus-visible { outline: 1px solid var(--brass); outline-offset: -1px; }
.has-hero .site-header:not(.is-solid) .account-menu__panel { --text: #f1e8da; --text-2: #e3d6c2; }
/* In light mode the panel is cream even over a hero photo, so it takes back the light theme's ink instead of the header's. */
body.has-hero[data-theme="light"] .site-header:not(.is-solid) .account-menu__panel {
  --text: #1a120a; --text-2: #3b2d1e; --muted: #54442f; --line: rgba(60, 42, 18, .24); --line-strong: rgba(60, 42, 18, .5); --brass: #664310; --brass-hi: #4f3509;
  color: var(--text); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
}
@media (prefers-reduced-motion: reduce) { .account-menu__panel { animation: none; } .account-chip__chevron, .account-menu__link .icon { transition: none; } }

/* ---------- Who's arriving: the guest book ----------
   One ruled line per character, like signing in at a private house: a brass monogram, the name in Bodoni,
   and the way in on the right. The same seal as "Your characters" on the account page. */
.arrival__list { display: grid; max-width: 760px; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.arrival__list li { border-bottom: 1px solid var(--line); }
.arrival__guest {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 28px);
  width: 100%; padding: clamp(18px, 2.4vw, 24px) clamp(4px, 1.5vw, 14px); border: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: background .25s var(--ease);
}
.arrival__seal { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brass); font: 600 1.05rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .04em; transition: border-color .25s, color .25s; }
.arrival__seal::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--line); border-radius: 50%; }
.arrival__name { overflow-wrap: anywhere; font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--serif); font-variation-settings: 'opsz' 14; letter-spacing: .005em; }
.arrival__action { color: var(--brass); font: 600 .6875rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.arrival__action span { display: inline-block; margin-left: 6px; letter-spacing: 0; transition: transform .25s var(--ease); }
.arrival__guest:hover, .arrival__guest:focus-visible { background: rgba(201, 164, 90, .06); }
.arrival__guest:hover .arrival__seal, .arrival__guest:focus-visible .arrival__seal { border-color: var(--brass); color: var(--brass-hi); }
.arrival__guest:hover .arrival__action span, .arrival__guest:focus-visible .arrival__action span { transform: translateX(4px); }
.arrival__guest:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: -2px; }
.arrival__guest.is-active .arrival__seal { border-color: var(--brass); color: var(--brass-hi); }
.arrival__guest.is-active .arrival__action { color: #8fc48a; }
.arrival__guest:disabled { cursor: wait; }
.arrival__guest:disabled:not(.is-active) { opacity: .55; }
@media (max-width: 480px) {
  .arrival__guest { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .arrival__action { grid-column: 2; }
  .arrival__seal { width: 44px; height: 44px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .arrival__guest, .arrival__seal, .arrival__action span { transition: none; } }
.account-switch-link, .rsvp__switch { color: var(--brass); white-space: nowrap; }

/* ---------- Footer ---------- */
.footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
.footer-heading { display: flex; align-items: center; gap: 12px; }
.footer-heading::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.footer-grid a:not(.brand) { position: relative; padding: 5px 0; transition: color .2s; }
.footer-grid a:not(.brand)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.footer-grid a:not(.brand):hover::after, .footer-grid a:not(.brand):focus-visible::after { transform: scaleX(1); }
.footer-brand { max-width: 340px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:last-child { grid-column: 1 / -1; } }

/* ---------- Sign-in buttons ---------- */
/* GTA World: the official logo on a dark plate, the only place the logo is used on the site. */
.gtaw-button {
  display: inline-flex; align-items: center; gap: 16px; justify-self: start;
  min-height: 60px; padding: 8px 22px 8px 14px;
  border: 1px solid rgba(255, 196, 0, .35); background: #0f0d0b; color: #f6f1e7;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.gtaw-button img { width: 92px; height: auto; flex: none; }
.gtaw-button span { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .14); }
.gtaw-button:hover { border-color: #ffc400; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.gtaw-button:focus-visible { outline: 2px solid #ffc400; outline-offset: 3px; }
.rsvp .gtaw-button { min-height: 54px; }
.rsvp .gtaw-button img { width: 78px; }
/* Discord: brand blurple with the Discord mark. */
.discord-button {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  min-height: 48px; padding: 0 22px; border-radius: 6px; background: #5865f2; color: #fff;
  font: 600 .875rem/1 var(--sans); text-decoration: none; transition: background .2s, transform .2s;
}
.discord-button:hover { background: #4752c4; transform: translateY(-1px); }
.discord-button .discord-mark { width: 22px; height: 22px; fill: currentColor; }
.discord-mark { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.2em; }

/* ---------- Account page: signed out ---------- */
.account-welcome { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.account-welcome h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
.account-benefits { display: grid; gap: 0; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.account-benefits li { display: grid; gap: 4px; padding: 18px 0 18px 34px; border-bottom: 1px solid var(--line); position: relative; }
.account-benefits li::before { content: '◆'; position: absolute; left: 4px; top: 21px; color: var(--brass); font-size: .7rem; }
.account-benefits strong { font: 600 1.35rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.account-benefits span { color: var(--text-2); font-size: .9375rem; }
.signin-card {
  position: relative; display: grid; gap: 18px; justify-items: start;
  padding: clamp(30px, 4vw, 48px); border: 1px solid var(--line-strong);
  background: radial-gradient(120% 100% at 100% 0%, var(--oxblood-2), var(--oxblood) 55%, #1c0809);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.signin-card::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201, 164, 90, .22); pointer-events: none; }
.signin-card__crest { font: 600 1rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .4em; color: var(--brass); }
.signin-card h2 { font-size: clamp(2.2rem, 3.6vw, 3rem); }
.signin-card > p:not(.signin-card__crest):not(.account-warning) { color: var(--text-2); }
.signin-card__note { color: var(--muted) !important; font-size: .8125rem; }

/* ---------- Account page: signed in ----------
   The guest book: a greeting beside the calling card, the characters, the staff band, then a ledger of two columns. */
.guestbook__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.guestbook__head h1 { text-wrap: balance; }
.guestbook__head .lead { max-width: 44ch; }
.guestbook__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; color: var(--text-2); font-size: .9375rem; }
.guestbook__meta .desk-link { margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--line); }
.gtaw-badge { display: inline-grid; place-items: center; padding: 4px 8px; border: 1px solid rgba(255, 196, 0, .3); background: #0f0d0b; }
.gtaw-badge img { width: 54px; height: auto; }
.guestbook__label { color: var(--muted); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }

.guestbook__characters { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.guestbook__character-list { display: flex; flex-wrap: wrap; gap: 10px; }
.guest-character { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.guest-character:hover:not(.is-active), .guest-character:focus-visible { border-color: var(--brass); background: rgba(201, 164, 90, .06); }
.guest-character:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
.guest-character.is-active { border-color: var(--line-strong); cursor: default; }
.guest-character:disabled:not(.is-active) { opacity: .6; cursor: wait; }
.guest-character__seal { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brass); font: 600 .875rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .04em; }
.guest-character.is-active .guest-character__seal { border-color: var(--brass); color: var(--brass-hi); }
.guest-character__text { display: grid; gap: 3px; }
.guest-character strong { font: 600 1.125rem/1.15 var(--serif); font-variation-settings: 'opsz' 10; }
.guest-character small { color: var(--muted); font: 600 .625rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.guest-character.is-active small { color: var(--brass); }

/* The member card in the account head, with the way into the Members Area beneath it. */
.guestbook__card { display: grid; gap: 18px; justify-items: center; width: clamp(300px, 32vw, 420px); }
.guestbook__card .membership-card { width: 100%; }
.guestbook__valid { color: var(--text-2); font-size: .875rem; text-align: center; }
.guestbook__valid strong { color: var(--text); font-weight: 500; }

/* Acceptance: a printed letter from the house, with the fee and the way to pay. It is a keepsake, so it is
   paper with the double rule and casts the table shadow. */
.acceptance {
  --text: var(--paper-ink); --text-2: #33271a; --muted: var(--paper-muted); --brass: var(--paper-accent);
  position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(30px, 4.4vw, 52px);
  background: linear-gradient(160deg, #f4ecdc, var(--paper) 60%, #e6d9bf); color: var(--text);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.acceptance::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--paper-line); outline: 1px solid var(--paper-line); outline-offset: -5px; pointer-events: none; }
.acceptance h2 { font-size: clamp(2rem, 3.6vw, 3rem); color: var(--text); }
.acceptance h2 em { color: var(--paper-accent); }
.acceptance__copy p { margin-top: 12px; max-width: 52ch; color: var(--text-2); }
.acceptance__pay { position: relative; display: grid; gap: 14px; justify-items: start; padding-left: clamp(24px, 4vw, 48px); border-left: 1px solid var(--paper-line); }
.acceptance__fee { display: grid; gap: 6px; }
.acceptance__fee span { color: var(--muted); font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.acceptance__fee strong { font: 600 clamp(2.4rem, 4vw, 3.2rem)/1 var(--serif); color: var(--text); font-variant-numeric: lining-nums; }
.acceptance__note { color: var(--muted); font-size: .8125rem; }
.btn--ink { background: var(--paper-ink); color: #fbf6ec; border-color: var(--paper-ink); }
.btn--ink:hover { background: #3b2c1c; color: #fbf6ec; }
.btn--ink:disabled { opacity: .6; cursor: wait; }
@media (max-width: 860px) {
  .acceptance { grid-template-columns: 1fr; }
  .acceptance__pay { padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--paper-line); }
  .guestbook__card { justify-self: center; width: min(100%, 380px); }
}

/* Staff: an oxblood band with the house's inset rule, dark in both themes. */
.staff-band {
  --text: #f1e8da; --text-2: #ddd1bd; --brass: #c9a45a; --brass-hi: #e6c77e; --brass-ink: #1a1208;
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(28px, 4vw, 44px) clamp(28px, 4.4vw, 52px);
  background: radial-gradient(120% 140% at 100% 0%, var(--oxblood-2), var(--oxblood) 55%, #1c0809); color: var(--text);
}
.staff-band::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201, 164, 90, .24); pointer-events: none; }
.staff-band h2 { font-size: clamp(2rem, 3.6vw, 3rem); color: var(--text); }
.staff-band h2 em { color: var(--brass-hi); }
.staff-band p { margin-top: 8px; color: var(--text-2); }
.staff-band .btn { position: relative; }

/* The house band on the account page: the Members Area for members, an invitation to apply for everyone else.
   Dark walnut with a brass inset rule in both themes, a quieter sibling of the staff band. */
.house-band {
  --text: #f1e8da; --text-2: #ddd1bd; --brass: #c9a45a; --brass-hi: #e6c77e; --brass-ink: #1a1208;
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(28px, 4vw, 44px) clamp(28px, 4.4vw, 52px);
  background: radial-gradient(120% 140% at 100% 0%, #3a2a18, #1d150d 55%, #0f0b07); color: var(--text);
}
.house-band::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201, 164, 90, .3); pointer-events: none; }
.house-band--members::before { border-color: rgba(201, 164, 90, .5); outline: 1px solid rgba(201, 164, 90, .2); outline-offset: -5px; }
.house-band__copy { max-width: 60ch; }
.house-band h2 { font-size: clamp(2rem, 3.6vw, 3rem); color: var(--text); }
.house-band h2 em { color: var(--brass-hi); }
.house-band p { margin-top: 8px; color: var(--text-2); }
.house-band .btn, .house-band__actions { position: relative; }
.house-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.house-band .link-arrow { color: var(--brass-hi); }

.guestbook__ledger { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.guestbook__section { padding-top: clamp(32px, 4vw, 44px); }
.guestbook__section:first-child { padding-right: clamp(28px, 4.5vw, 64px); border-right: 1px solid var(--line); }
.guestbook__section + .guestbook__section { padding-left: clamp(28px, 4.5vw, 64px); }
.guestbook__section h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.guestbook__section h2 .discord-mark { width: .7em; height: .7em; color: var(--brass); }
.guestbook__section .link-arrow { margin-top: 24px; }
.guestbook__intro { margin-bottom: 20px; color: var(--text-2); }
.guestbook__intro strong { color: var(--text); font-weight: 500; }
.guestbook__section--discord .account-perks { margin-bottom: 26px; }
.guestbook__section--discord .account-note { margin-top: 14px; }
.guestbook__section--discord .account-warning { margin-bottom: 18px; }
.setting { padding-block: 20px; border-top: 1px solid var(--line); }
.setting .account-note { margin-top: 12px; }
.guestbook__unlink { margin-top: 6px; padding-top: 18px; padding-inline: 0; border-top: 1px solid var(--line); width: 100%; text-align: left; color: var(--muted); }
.guestbook__unlink:hover { color: #d27a73; }

/* The guest's enquiries: ruled rows, the reference and date tracked small above the type, the status on the right. */
.guestbook__enquiries { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.guestbook__enquiries h2 { margin-bottom: 24px; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.guestbook__enquiries .link-arrow { margin-top: 24px; }
.enquiry-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.enquiry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.enquiry-row__what { display: grid; gap: 6px; min-width: 0; }
.enquiry-row__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font: 600 .6875rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.enquiry-row__meta span { color: var(--brass); }
.enquiry-row__what strong { font: 600 1.3rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.enquiry-row__excerpt { color: var(--text-2); font-size: .9375rem; }
.enquiry-row__state { display: grid; gap: 10px; justify-items: end; }
.enquiry-status { padding: 6px 12px; border: 1px solid var(--line-strong); color: var(--text); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.enquiry-status--awaiting_guest { border-color: var(--brass); color: var(--brass-hi); }
.enquiry-row__ticket { color: var(--brass); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.enquiry-status--accepted, .enquiry-status--application_approved { border-color: rgba(143, 196, 138, .55); color: #8fc48a; }
.enquiry-status--closed, .enquiry-status--application_declined { color: var(--muted); }
@media (max-width: 560px) {
  .enquiry-row { grid-template-columns: 1fr; }
  .enquiry-row__state { justify-items: start; }
}

/* Each RSVP is a ruled line: the day set large like the ticket's, then the night and the character. */
.evenings { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.evening { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.evening__date { display: grid; justify-items: center; gap: 6px; padding-right: 20px; border-right: 1px solid var(--line); }
.evening__date span { font: 600 2.4rem/.9 var(--serif); color: var(--brass-hi); font-variant-numeric: lining-nums; }
.evening__date small { color: var(--muted); font: 600 .6875rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.evening__what { display: grid; gap: 5px; min-width: 0; }
.evening__what strong { font: 600 1.3rem/1.15 var(--serif); font-variation-settings: 'opsz' 10; }
.evening__what span { color: var(--muted); font-size: .875rem; }
.evening__cancel { padding: 8px 2px; border: 0; background: none; color: var(--muted); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .2s; }
.evening__cancel:hover { color: #d27a73; text-decoration: underline; text-underline-offset: 4px; }
.evening__cancel:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.evening__cancel:disabled { opacity: .5; cursor: wait; }
.evenings-empty { display: grid; gap: 10px; justify-items: start; padding-top: 6px; }
.evenings-empty > p:first-child { font: italic 600 1.5rem/1.3 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text-2); }
.evenings-empty .link-arrow { margin-top: 12px; }

@media (max-width: 860px) {
  .account-welcome { grid-template-columns: 1fr; }
  .guestbook__head { grid-template-columns: 1fr; }
  .guestbook__ledger { grid-template-columns: 1fr; }
  .guestbook__section:first-child { padding-right: 0; border-right: 0; }
  .guestbook__section + .guestbook__section { padding-left: 0; margin-top: clamp(32px, 6vw, 44px); border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .gtaw-button { gap: 12px; padding-right: 16px; } .gtaw-button span { padding-left: 12px; }
  .guest-character { flex: 1 1 100%; }
  .guestbook__meta .desk-link { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; text-align: left; }
  .evening { grid-template-columns: 52px minmax(0, 1fr); }
  .evening__cancel { grid-column: 2; justify-self: start; padding-top: 0; }
}

/* ---------- Round two: one RSVP, quieter screen readers, pages that open on their object ---------- */

/* Events hero: copy, ticket, then the server-time note. On phones the ticket comes before the note,
   so "I'll be there" reaches the first screen. */
.page-hero--ticket .page-hero__grid { grid-template-areas: 'copy ticket' 'note ticket'; row-gap: 20px; }
.page-hero--ticket .page-hero__grid > :first-child { grid-area: copy; align-self: end; }
.page-hero--ticket .ticket { grid-area: ticket; align-self: end; }
.page-hero--ticket .page-hero__note { grid-area: note; align-self: start; margin-top: 0; }
@media (max-width: 800px) {
  .page-hero--ticket { padding-top: calc(var(--header-h) + 28px); }
  .page-hero--ticket .page-hero__grid { grid-template-areas: 'copy' 'ticket' 'note'; row-gap: 24px; }
  .page-hero--ticket .page-hero__lede { margin-top: 16px; }
}
/* Small phones: a tighter ticket so 'I'll be there' sits on the first screen. */
@media (max-width: 480px) {
  .page-hero--ticket { padding-top: calc(var(--header-h) + 16px); }
  .page-hero--ticket .kicker { margin-bottom: 14px; }
  .ticket__main, .ticket__stub { padding-inline: 22px; }
  .ticket__main { padding-top: 22px; }
  .ticket__rows { margin-top: 18px; padding-top: 12px; }
  .ticket__rows li { padding: 7px 0; }
}

/* Light theme: open and past nights keep a visible outline on the day linen. */
body[data-theme="light"] button.calendar-day:not(.special):not(.selected) { border-color: color-mix(in srgb, var(--brass) 70%, transparent); }
body[data-theme="light"] .calendar-day.past { border-color: var(--line-strong); }

/* Tagline ribbon on phones: the three words stay on one line, no orphaned diamond. */
@media (max-width: 560px) {
  .ribbon__inner { gap: 8px 14px; font-size: 1.05rem; }
  .ribbon__inner span:not(:last-child)::after { margin-left: 14px; }
}

/* FAQ: house notes, printed. */
.house-notes { max-width: 460px; margin-left: 0; }
.house-notes .menu-item__tag { white-space: normal; text-align: right; }
.house-notes .menu-card__foot a { color: var(--paper-accent); font-style: normal; font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.house-notes .menu-card__foot a::after { content: ' →'; }

/* Menu: the page opens on the menu itself. */
.menu-first { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px)); }
.menu-first .section-head .link-arrow { color: var(--paper-accent); }
.bar-menu__ask { margin-top: 18px; color: var(--muted); font: italic 600 1rem/1.4 var(--serif); font-variation-settings: 'opsz' 10; }
.bar-menu__footnote a { color: var(--paper-accent); }

/* Enquire: heading and steps beside the form; on phones heading, form, then what happens next. */
.split--enquire { grid-template-areas: 'head form' 'steps form'; grid-template-rows: auto 1fr; align-items: start; row-gap: 40px; }
.split--enquire > .enquire__head { grid-area: head; }
.split--enquire > .form-card { grid-area: form; }
.split--enquire > .enquire__steps { grid-area: steps; }
.enquire__head .page-title { font-size: clamp(2.8rem, 6vw, 5rem); }
.enquire__head .lede { margin-top: 22px; max-width: 34ch; }
.enquire { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 64px)); }
@media (max-width: 900px) {
  .split--enquire { grid-template-areas: 'head' 'form' 'steps'; row-gap: 32px; }
}

/* Dress code: the long title sits lower so the card and title share the first screen. */
.page-hero--card .page-title { font-size: clamp(2.8rem, 6vw, 5.25rem); }

/* Staff sign-in: the GTA World button has room under its paragraph. */
.workspace .lead + .gtaw-button { margin-top: 28px; }

/* ---------- Developer area ---------- */
.developer-panel { display: grid; gap: 18px; margin-top: 36px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); }
.developer-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.developer-panel .lead strong { color: var(--text); font-weight: 600; }
.developer-migrations { display: grid; margin: 0; padding: 0; list-style: none; }
.developer-migrations li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.developer-migrations code { font: 500 .9375rem/1.4 ui-monospace, Consolas, monospace; color: var(--text); overflow-wrap: anywhere; }
.developer-migrations .is-applied > span:first-child { color: #8fbf98; }
.developer-migrations .is-missing { background: rgba(229, 154, 146, .08); }
.developer-migrations .is-missing > span:first-child { color: #e59a92; }

/* ---------- Staff Area: Facebrowser ----------
   The GAZDA page laid out like Facebrowser, in the house style: a masthead over a real room photo, a feed of
   posts beside the page's notes, and a two-pane inbox. Square everywhere except people (avatars). */
.fb-masthead { position: relative; margin-bottom: clamp(18px, 2.5vw, 28px); border: 1px solid var(--line); background: var(--surface); }
.fb-masthead__cover { height: clamp(120px, 16vw, 190px); background: linear-gradient(180deg, rgba(12, 9, 7, .15), rgba(12, 9, 7, .9)), url("../gazda-bar-floor-960.webp") center 40% / cover; }
.fb-masthead__identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: clamp(14px, 2vw, 24px); margin-top: calc(-1 * clamp(40px, 5vw, 56px)); padding: 0 clamp(18px, 3vw, 32px) clamp(14px, 2vw, 20px); }
.fb-masthead__identity h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.05; }
.fb-masthead__identity h2 em { color: var(--brass); }
.fb-masthead__identity p { margin-top: 6px; color: var(--muted); font-size: .9375rem; }
.fb-masthead__identity .fb-avatar { width: clamp(84px, 9vw, 112px); height: clamp(84px, 9vw, 112px); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line-strong); }
.fb-nav { display: flex; gap: 4px; padding: 0 clamp(10px, 2vw, 22px); border-top: 1px solid var(--line); }
.fb-nav a { position: relative; display: inline-flex; align-items: center; min-height: 50px; padding: 0 16px; color: var(--muted); font: 600 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.fb-nav a::after { content: ""; position: absolute; inset: auto 12px -1px; height: 2px; background: var(--brass); transform: scaleX(0); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.fb-nav a:hover, .fb-nav a[aria-current="page"] { color: var(--text); }
.fb-nav a[aria-current="page"]::after { transform: scaleX(1); }

.fb-avatar { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-2); color: var(--brass); font: 600 1rem/1 var(--serif); font-variation-settings: 'opsz' 10; letter-spacing: .04em; }
.fb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fb-avatar--page { background: #0c0907; }

.fb-feed { display: grid; grid-template-columns: minmax(0, 680px) minmax(240px, 300px); justify-content: center; gap: clamp(20px, 3vw, 40px); align-items: start; }
.fb-feed__main { display: grid; gap: 18px; }
.fb-feed__notes { position: sticky; top: calc(var(--header-h, 72px) + 76px); padding: 22px 24px; border: 1px solid var(--line); }
.fb-feed__notes h3 { margin-bottom: 14px; font-size: 1.35rem; }
.fb-feed__notes h3 em { color: var(--brass); }
.fb-feed__notes ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fb-feed__notes li { padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.fb-feed__notes strong { color: var(--text); font-weight: 600; }

.fb-composer { border: 1px solid var(--line); background: var(--surface); }
.fb-composer__write { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 20px 6px; }
.fb-composer textarea, .fb-edit textarea, .fb-reply textarea { width: 100%; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: 450 1.0625rem/1.6 var(--sans); resize: vertical; }
.fb-composer textarea:focus, .fb-reply textarea:focus { outline: none; }
.fb-composer__write:focus-within, .fb-reply__field:focus-within { box-shadow: inset 0 -1px 0 var(--brass); }
.fb-composer__previews { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 20px 4px 74px; }
.fb-composer__previews figure { position: relative; width: 88px; height: 88px; margin: 0; border: 1px solid var(--line); }
.fb-composer__previews img { width: 100%; height: 100%; object-fit: cover; }
.fb-composer__previews button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: rgba(12, 9, 7, .85); color: #f1e8da; cursor: pointer; }
.fb-composer__previews .icon { width: 14px; height: 14px; }
.fb-composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.fb-composer__bar .btn { margin-left: auto; }
label.fb-tool, .fb-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--text-2); font: 600 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
.fb-tool:hover, .fb-tool:focus-within { background: color-mix(in srgb, var(--brass) 8%, transparent); color: var(--brass); }
.fb-tool .icon, .fb-post__actions .icon, .fb-post__media .icon { width: 18px; height: 18px; }

.fb-posts { display: grid; gap: 18px; }
.fb-post { border: 1px solid var(--line); background: var(--surface); }
.fb-post__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
.fb-post__head strong { display: block; color: var(--text); font: 600 1.15rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.fb-post__head time { color: var(--muted); font-size: .8125rem; }
.fb-post__text { padding: 12px 20px 16px; color: var(--text); font-size: 1.0625rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.fb-post__media { display: flex; align-items: center; gap: 8px; margin: 0 20px 16px; padding: 12px 14px; border: 1px dashed var(--line-strong); color: var(--text-2); font-size: .875rem; }
.fb-post__actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.fb-post__actions button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; border: 0; background: transparent; color: var(--text-2); font: 600 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
.fb-post__actions button + button { border-left: 1px solid var(--line); }
.fb-post__actions button:hover, .fb-post__actions button[aria-expanded="true"] { background: color-mix(in srgb, var(--brass) 7%, transparent); color: var(--brass); }
.fb-post__actions button[data-delete]:hover { color: #d27a73; }
.fb-edit { display: grid; gap: 10px; padding: 8px 20px 16px; }
.fb-edit textarea { padding: 10px 12px; border: 1px solid var(--line-strong); }
.fb-edit div { display: flex; gap: 10px; }
.fb-comments { padding: 4px 20px 16px; border-top: 1px solid var(--line); }
.fb-comments ol { margin: 0; padding: 0; list-style: none; }
.fb-comment { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fb-comment .fb-avatar { width: 32px; height: 32px; font-size: .8rem; }
.fb-comment strong { color: var(--text); font-weight: 600; font-size: .9375rem; }
.fb-comment p { margin-top: 2px; color: var(--text-2); font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.fb-reply { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-top: 12px; }
.fb-reply textarea { min-height: 40px; height: 40px; padding: 9px 0; resize: none; }
.fb-reply .fb-avatar { width: 32px; height: 32px; }
.fb-reply__field { display: block; }
.fb-send { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: var(--brass); color: var(--brass-ink); cursor: pointer; transition: background .2s, transform .2s cubic-bezier(.2, .7, .2, 1); }
.fb-send:hover { background: var(--brass-hi); transform: translateY(-1px); }
.fb-send:disabled { opacity: .5; transform: none; cursor: progress; }
.fb-send .icon { width: 18px; height: 18px; }
.fb-more { justify-self: center; }
.fb-empty { padding: 18px 2px; color: var(--muted); font-size: .9375rem; }

.fb-inbox { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); height: min(72vh, 680px); border: 1px solid var(--line); background: var(--surface); }
.fb-inbox__list { overflow-y: auto; border-right: 1px solid var(--line); scrollbar-color: var(--line-strong) transparent; }
.fb-inbox__list ul { margin: 0; padding: 0; list-style: none; }
.fb-inbox__list a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background .2s; }
.fb-inbox__list a:hover { background: color-mix(in srgb, var(--brass) 6%, transparent); }
.fb-inbox__list a[aria-current="page"] { background: color-mix(in srgb, var(--brass) 12%, transparent); box-shadow: inset 1px 0 0 var(--brass); }
.fb-inbox__list strong { display: block; font: 600 1.05rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.fb-inbox__list small { color: var(--muted); font-size: .8125rem; }
.fb-inbox__list .fb-empty { padding: 18px; }
.fb-thread { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.fb-thread > .fb-empty { place-self: center; }
.fb-thread__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.fb-thread__head h3 { font-size: 1.3rem; }
.fb-back { display: none; place-items: center; width: 40px; height: 40px; color: var(--text); }
.fb-back .icon { width: 20px; height: 20px; }
.fb-thread__messages { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 20px; overflow-y: auto; scrollbar-color: var(--line-strong) transparent; }
.fb-bubble { align-self: flex-start; max-width: min(72%, 520px); padding: 10px 14px; border: 1px solid var(--line); background: var(--bg-2); }
.fb-bubble p { color: var(--text); font-size: .9375rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.fb-bubble time { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; }
.fb-bubble.is-page { align-self: flex-end; border-color: var(--line-strong); background: color-mix(in srgb, var(--brass) 12%, transparent); }
.fb-thread > .fb-reply { padding: 12px 20px 16px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .fb-feed { grid-template-columns: 1fr; }
  .fb-feed__notes { position: static; }
  .fb-masthead__identity { grid-template-columns: auto minmax(0, 1fr); }
  .fb-masthead__identity .desk-link { grid-column: 1 / -1; }
  .fb-inbox { grid-template-columns: 1fr; height: min(78vh, 680px); }
  .fb-inbox__list { border-right: 0; }
  .fb-inbox.is-reading .fb-inbox__list, .fb-inbox:not(.is-reading) .fb-thread { display: none; }
  .fb-back { display: grid; }
}
@media (max-width: 560px) {
  .fb-composer__previews { padding-left: 20px; }
  .fb-post__actions button { letter-spacing: .08em; }
  .fb-bubble { max-width: 88%; }
}

/* Facebrowser: images shown through the site, the activity record and unread conversations. */
.fb-reply textarea { overflow: hidden; }
.fb-gallery { display: grid; gap: 4px; margin: 0 20px 16px; }
.fb-gallery--2, .fb-gallery--4 { grid-template-columns: 1fr 1fr; }
.fb-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fb-gallery--3 a:first-child { grid-row: span 2; }
.fb-gallery a { position: relative; display: block; min-height: 0; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.fb-gallery img { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.fb-gallery--2 img, .fb-gallery--3 img, .fb-gallery--4 img { aspect-ratio: 1; }
.fb-gallery a:hover img { transform: scale(1.03); }
.fb-gallery span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 9, 7, .62); color: #f1e8da; font: 600 1.8rem/1 var(--serif); font-variation-settings: 'opsz' 14; }
.fb-nav .desk__badge { margin-left: 8px; }
.fb-inbox__list a.is-unread strong { color: var(--brass); }
.fb-inbox__list a.is-unread small { color: var(--text-2); font-weight: 600; }
.fb-activity { max-width: 820px; margin: 0 auto; }
.fb-activity h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.fb-activity h3 em { color: var(--brass); }
.fb-activity__lead { margin: 6px 0 18px; color: var(--text-2); }
.fb-activity ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fb-activity__row { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fb-activity__row time { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.fb-activity__row p { color: var(--text-2); }
.fb-activity__row strong { color: var(--text); font-weight: 600; }
.fb-activity__row span { display: block; margin-top: 4px; color: var(--muted); font-size: .9375rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .fb-activity__row { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .fb-gallery img { transition: none; } }

/* ---------- From the house (the journal) ----------
   The list reuses the house cards; a post reads like a printed house note: a Bodoni title, an italic lede, the
   picture in the house's inset frame, then the text at a comfortable measure. */
.journal { padding-top: clamp(40px, 6vw, 72px); }
.journal__cards { margin-top: 0; }
.link-arrow--back::after { content: none; }
.link-arrow--back::before { content: '←'; transition: transform .25s var(--ease); }
.link-arrow--back:hover::before { transform: translateX(-6px); }
.journal-post { display: grid; gap: clamp(22px, 3vw, 32px); max-width: 760px; margin: 0 auto; }
.journal-post > .link-arrow--back { justify-self: start; }
.journal-post__head { display: grid; gap: 14px; }
.journal-post__meta { color: var(--brass); font: 600 var(--fs-label, .75rem)/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.journal-post__lede { max-width: 46ch; color: var(--text-2); font: italic 600 var(--fs-lede, 1.25rem)/1.5 var(--serif); font-variation-settings: 'opsz' 14; }
.journal-post__figure { position: relative; margin: 0; }
.journal-post__figure img { width: 100%; max-height: 520px; object-fit: cover; }
.journal-post__figure::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(241, 232, 218, .35); pointer-events: none; }
.journal-post__body { max-width: 66ch; }
.journal-post__body p { color: var(--text-2); font-size: 1.125rem; line-height: 1.75; }
.journal-post > .link-arrow:not(.link-arrow--back) { justify-self: start; }

/* Staff Area → Journal: the list of posts and the editor. */
.journal-desk { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.journal-desk__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 6px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background .2s; }
.journal-desk__row:hover { background: color-mix(in srgb, var(--brass) 6%, transparent); }
.journal-desk__state { justify-self: start; padding: 5px 9px; border: 1px solid var(--line-strong); color: var(--muted); font: 600 .6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.journal-desk__state.is-live { border-color: var(--brass); color: var(--brass); }
.journal-desk__title strong { display: block; font: 600 1.25rem/1.2 var(--serif); font-variation-settings: 'opsz' 10; }
.journal-desk__title small, .journal-desk__by { color: var(--muted); font-size: .8125rem; }
.journal-editor { display: grid; gap: 22px; }
.journal-editor > .link-arrow--back { justify-self: start; }
.journal-editor__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.journal-editor__main, .journal-editor__side { display: grid; gap: 18px; }
.journal-editor__group { display: grid; gap: 14px; margin: 0; padding: 18px 20px; border: 1px solid var(--line); }
.journal-editor__group legend { padding: 0 8px; font: 600 1.15rem/1 var(--serif); font-variation-settings: 'opsz' 10; color: var(--text); }
.journal-editor__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.journal-editor__kinds { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.journal-editor__preview img, .journal-editor__preview .card__media { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border: 1px solid var(--line); }
.journal-editor__preview .card__media span { font-size: 1.4rem; }
.journal-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.journal-editor__delete:hover { color: #d27a73; }
@media (max-width: 900px) { .journal-editor__grid, .journal-editor__pair { grid-template-columns: 1fr; } .journal-desk__row { grid-template-columns: 1fr; gap: 6px; } }
.journal-editor label.check { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 450 .9375rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
.journal-editor label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brass); }
/* The dress code card is a tall printed card: show its top, where the title is. */
.card__media img[src*="gazda-dress-code"] { object-position: top; }

/* "Your account": the way back from the Members, Staff and Developer areas to the account page. */
.area-back { margin-bottom: clamp(18px, 3vw, 30px); }
.subnav__back { flex: none; padding-right: 18px; border-right: 1px solid var(--line); white-space: nowrap; }
.subnav__back + .portal-nav { margin-right: auto; }

/* Developer area: the checks. */
.developer-summary { display: grid; gap: 6px; margin-top: 18px; }
.developer-summary strong { color: var(--text); font-weight: 600; }
.developer-summary__when { color: var(--muted); font-size: .875rem; }
.developer-panel h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.developer-panel h2 em { color: var(--brass); }
.dev-checks { display: grid; margin: 0; padding: 0; list-style: none; }
.dev-check { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.dev-check strong { display: block; color: var(--text); font-weight: 600; font-size: .9375rem; }
.dev-check small { display: block; margin-top: 2px; color: var(--text-2); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.dev-check__mark { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font: 700 .8rem/1 var(--sans); }
.dev-check--ok .dev-check__mark { color: #8fbf98; }
.dev-check--warn .dev-check__mark { color: var(--brass); }
.dev-check--fail .dev-check__mark { color: #e59a92; }
.dev-check--fail { background: rgba(229, 154, 146, .06); }

/* ---------- Monograms: soft glass ----------
   A character's initials on a softly rounded tile, in the sans so they stay crisp at any size. The character you
   are playing as is brass, lifted by a soft shadow; your other characters sit on frosted glass and warm up on hover. */
.monogram, .account-chip__face, .account-menu__seal, .account-menu__initials, .arrival__seal, .guest-character__seal {
  font-family: var(--sans); font-style: normal; font-weight: 600; font-variation-settings: normal; letter-spacing: .05em; text-indent: .05em; text-shadow: none;
}
.account-chip__face, .account-menu__seal, .account-menu__initials, .arrival__seal, .guest-character__seal { position: relative; border-radius: 30%; }
.account-chip__face::before, .account-menu__seal::before, .account-menu__initials::before, .arrival__seal::before, .guest-character__seal::before { content: none; }
.account-chip__face .monogram { font-size: .82rem; }
.account-menu__seal { font-size: .95rem; }
.account-menu__initials { font-size: .6875rem; }
.arrival__seal { font-size: .95rem; }
.guest-character__seal { font-size: .75rem; }
/* The one you are playing as: brass, lit from above. */
.account-chip__face, .account-menu__seal, .arrival__guest.is-active .arrival__seal, .guest-character.is-active .guest-character__seal {
  border: 0; color: #1a1208;
  background: linear-gradient(160deg, #f0d896, #c9a45a 60%, #a07a36);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.account-chip__face .monogram { color: #1a1208; }
.account-chip--named:hover .account-chip__face, .account-chip--named[aria-expanded="true"] .account-chip__face {
  background: linear-gradient(160deg, #f6e2aa, #d4b068 60%, #ad8640); box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* Your other characters: frosted glass. */
.account-menu__initials, .arrival__guest:not(.is-active) .arrival__seal, .guest-character:not(.is-active) .guest-character__seal {
  border: 0; color: var(--text-2); background: rgba(201, 164, 90, .07); box-shadow: inset 0 0 0 1px rgba(201, 164, 90, .2), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: color .25s, background .25s, box-shadow .25s;
}
.arrival__guest:not(.is-active):hover .arrival__seal, .arrival__guest:not(.is-active):focus-visible .arrival__seal,
.guest-character:not(.is-active):hover .guest-character__seal, .guest-character:not(.is-active):focus-visible .guest-character__seal,
.account-menu__character:hover .account-menu__initials, .account-menu__character:focus-visible .account-menu__initials {
  color: var(--brass-hi); background: rgba(201, 164, 90, .14); box-shadow: inset 0 0 0 1px rgba(201, 164, 90, .45), 0 6px 14px -6px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) { .account-menu__initials, .arrival__seal, .guest-character__seal { transition: none; } }
/* Developer area: the welcome drink test. */
.developer-test__steps { display: grid; gap: 8px; margin: 0; padding-left: 1.3em; color: var(--text-2); line-height: 1.5; }
.developer-test__steps a { color: var(--brass); }
.developer-test__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.developer-job { display: grid; gap: 10px; padding: 16px 18px; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--brass) 6%, transparent); }
.developer-job__list { display: grid; gap: 6px; margin: 0; padding-left: 1.2em; color: var(--text-2); line-height: 1.5; }