:root {
  --orange: #e24a2f;
  --black: #000000;
  --white: #ffffff;
  --page: min(100% - 48px, 1240px);
  --ease: cubic-bezier(.22, .72, 0, 1);
  /* The spine. Every indented block in the page - section headlines, the arc
     cards, the reservation notes - hangs off this one edge. They used to sit at
     four different left positions (25%, 33%, 35% and flush), which is why the
     page read as styled rather than composed: same job, four answers. */
  --spine: 33.3333%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
/* The header is fixed, so every in-page anchor ("Follow the room", "Back to
   top") used to land its target underneath it. */
:target, [id] { scroll-margin-top: 104px; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--orange); color: var(--black); }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 12px 18px;
  background: var(--white);
  color: var(--black);
  transition: transform 300ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.current-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .42;
}
.grain {
  position: fixed;
  /* Was z-index 8, above main (2): with mix-blend-mode soft-light the noise
     rendered on top of every letter, and soft-light grain over Cardo's hairline
     serifs is exactly what softened the joins. Sits below the text now, above
     the canvas field (0), so the texture stays on photography and ground only. */
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
main, .site-footer { position: relative; z-index: 2; }

.site-header {
  position: fixed;
  z-index: 10;
  top: 18px;
  left: 50%;
  width: min(calc(100% - 36px), 1280px);
  min-height: 64px;
  padding: 7px 8px 7px 14px;
  display: grid;
  grid-template-columns: 170px 1fr auto auto;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(18px) saturate(1.2);
  transform: translateX(-50%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}
.venue-mark { display: block; width: 152px; }
.venue-mark__frame {
  display: inline-flex;
  align-items: center;
  height: 18px;
  overflow: visible;
}
.venue-mark__frame img {
  height: 18px;
  width: auto;
  max-width: none;
  display: block;
}
.site-header__meta {
  display: flex;
  justify-self: center;
  gap: 30px;
  color: rgba(255, 255, 255, .64);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-header__meta span + span::before { content: "·"; margin-right: 30px; color: var(--orange); }
.header-action, .primary-action {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  padding: 5px 6px 5px 22px;
  background: var(--orange);
  color: var(--white);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform 600ms var(--ease), background 600ms var(--ease), color 600ms var(--ease);
}
.header-action i, .primary-action i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .16);
  transition: transform 650ms var(--ease);
}

/* Arrows are drawn, not typed. Neither mandated face has a unicode-range that
   covers U+2197, so every "up-right" arrow was silently rendering in a system
   fallback - Times on the Cardo CTAs, Arial on the Josefin scroll cue - i.e.
   two typefaces nobody chose, differing across macOS/Windows/Android. The mark
   is a 24-unit box stroked at 1.4 (~0.058em), close to Josefin's UI stem. */
.ic { display: block; width: 15px; height: 15px; }
.utility-card .ic, .text-link .ic { width: 17px; height: 17px; }
.scroll-cue .ic { width: 12px; height: 12px; }
.header-action:hover i, .primary-action:hover i { transform: translate(2px, -2px) scale(1.06); }
.header-action:active, .primary-action:active { transform: scale(.98); }

.hero {
  position: relative;
  min-height: 100dvh;
  padding: 150px max(24px, calc((100vw - 1240px) / 2)) 84px;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* .96 across the left 38% buried the bar behind the headline, so the hero
     read as a black gradient over an abstract ceiling. The room is the strongest
     argument this page has for an upmarket night; let it be visible. The type
     still clears WCAG AA against what shows through - checked at the tagline,
     which sits over the lightest part of the ramp. */
  background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0 34%, rgba(0, 0, 0, .40) 68%, rgba(0, 0, 0, .74) 100%);
}
.hero__photograph { position: absolute; z-index: -2; inset: 0; }
.hero__photograph img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; filter: saturate(.82) contrast(1.12); transform: scale(1.03); }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .62)); }
.hero__copy { width: min(880px, 78vw); position: relative; }
.eyebrow {
  margin: 0 0 24px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
}
/* balance equalises line lengths on short blocks (headlines); pretty fills the
   measure and kills orphan last lines on running text. They are not the same
   job, and they were both being asked of headings and body alike. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 {
  margin: 0;
  font-weight: 300;
  letter-spacing: -.075em;
  line-height: .73;
}
/* wght 200, not 300: light type reversed out of black optically blooms, so a
   display line on black wants a lighter cut than the same size would on white.
   The variable axis is unlocked in the font request, so 200 is a real instance,
   not a synthesised one. */
h1 span { display: block; font-size: clamp(5.6rem, 14.2vw, 13.5rem); font-weight: 200; }
h1 em {
  display: block;
  margin: .26em 0 0 .64em;
  color: var(--orange);
  font-family: "Cardo", serif;
  font-size: clamp(2.2rem, 5.7vw, 5.7rem);
  font-weight: 400;
  /* Cardo is a tightly fitted text serif; negative tracking closes its counters
     and merges the joins into mush. It wants roughly neutral spacing. */
  letter-spacing: -.005em;
}
.hero__line {
  margin: 44px 0 0;
  font-family: "Cardo", serif;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  line-height: 1.15;
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 60px;
  margin-top: 44px;
}
.hero__facts div { display: grid; gap: 7px; }
.hero__facts small { color: rgba(255, 255, 255, .55); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.hero__facts strong { font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.hero__actions { display: flex; align-items: center; gap: 20px; margin-top: 46px; }
.sound-action {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 0 21px;
  background: rgba(0, 0, 0, .42);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: border-color 500ms var(--ease), transform 500ms var(--ease);
}
.sound-action:hover { border-color: var(--orange); transform: translateY(-2px); }
.sound-action__icon { height: 14px; display: flex; align-items: end; gap: 2px; }
.sound-action__icon b { display: block; width: 2px; height: 30%; background: var(--orange); transform-origin: bottom; }
.sound-action[aria-pressed="true"] .sound-action__icon b { animation: soundbar 800ms var(--ease) infinite alternate; }
.sound-action[aria-pressed="true"] .sound-action__icon b:nth-child(2) { animation-delay: 160ms; }
.sound-action[aria-pressed="true"] .sound-action__icon b:nth-child(3) { animation-delay: 320ms; }
.sound-action[aria-pressed="true"] .sound-action__icon b:nth-child(4) { animation-delay: 480ms; }
@keyframes soundbar { to { height: 100%; } }
.hero__index { position: absolute; right: max(24px, calc((100vw - 1240px) / 2)); top: 50%; display: flex; align-items: center; gap: 9px; writing-mode: vertical-rl; font-size: 8px; letter-spacing: .2em; }
.hero__index b { display: block; width: 1px; height: 110px; background: linear-gradient(var(--orange), rgba(255, 255, 255, .2)); }
.scroll-cue { position: absolute; right: max(24px, calc((100vw - 1240px) / 2)); bottom: 38px; display: flex; gap: 14px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue span { color: var(--orange); }

.section { width: var(--page); margin: 0 auto; padding: 150px 0; }
.section__intro { display: grid; grid-template-columns: var(--spine) 1fr; align-items: start; }
/* -.07em pulled Josefin's already-tight display pairs into collisions (the Wa,
   ry, yo pairs overlap). -.055 clears them without loosening the line. */
h2 { margin: 0; font-size: clamp(3.2rem, 7vw, 7.2rem); font-weight: 300; letter-spacing: -.055em; line-height: .88; }
/* The serif italic must not inherit that negative tracking - it is the reason
   the orange italics read soft. Reset it to near-neutral. */
h2 em { color: var(--orange); font-family: "Cardo", serif; font-weight: 400; letter-spacing: -.005em; }
.section__intro h2 { grid-column: 2; }
.arc__stages { margin: 90px 0 0 var(--spine); }
.arc-card { display: grid; grid-template-columns: 150px 1fr; gap: 48px; padding: 38px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.arc-card:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.arc-card__time { color: var(--orange); font-family: "Cardo", serif; font-size: 1.55rem; font-style: italic; }
.arc-card h3 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 400; letter-spacing: -.02em; }
.arc-card p { max-width: 600px; margin: 0; color: rgba(255, 255, 255, .62); font-family: "Cardo", serif; font-size: 1.06rem; }

.curator { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; align-items: center; }
.portrait-shell { position: relative; padding: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); }
.portrait-shell::after { content: ""; position: absolute; inset: 8px; background: var(--orange); mix-blend-mode: multiply; opacity: .28; pointer-events: none; }
.portrait-shell img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.12); }
.portrait-shell__stamp { position: absolute; z-index: 2; right: -38px; bottom: 70px; color: var(--orange); font-size: 11px; letter-spacing: .3em; transform: rotate(90deg); }
.curator__copy h2 { font-size: clamp(4.4rem, 9vw, 9rem); }
.curator__lede { margin: 44px 0 22px; font-family: "Cardo", serif; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.14; }
.curator__copy > p:not(.eyebrow):not(.curator__lede) { max-width: 540px; color: rgba(255, 255, 255, .63); font-family: "Cardo", serif; font-size: 1.05rem; }
.text-link { display: inline-flex; gap: 14px; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid var(--orange); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.text-link span { color: var(--orange); transition: transform 500ms var(--ease); }
.text-link:hover span { transform: translate(2px, -2px); }

.room { width: 100%; padding-inline: max(24px, calc((100vw - 1400px) / 2)); display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: center; background: var(--orange); color: var(--black); }
.room__collage { min-height: 720px; position: relative; }
/* Each figure multiplies against its OWN orange ground. Without the isolate the
   overlapping figures multiplied through one another as well as through the
   section, and the doubled blend rendered as solid black rectangles wherever
   two images crossed - the one thing on the page a stranger would call a bug. */
.room__image { position: absolute; margin: 0; overflow: hidden; border: 7px solid var(--orange); isolation: isolate; background: var(--orange); }
/* Multiply drives every shadow to the ground colour, so grayscale+contrast on
   already-dark interior shots crushed most of the collage to solid black
   rectangles - it read as a rendering fault rather than a treatment. Lift the
   black point and flatten the curve BEFORE the blend so the room survives it. */
.room__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.22) contrast(.92); mix-blend-mode: multiply; }
.room__image--wide { inset: 5% 14% 24% 0; }
.room__image--drink { width: 42%; height: 48%; right: 0; bottom: 0; }
.room__image--wall { width: 31%; height: 36%; right: 2%; top: 0; }
.room .eyebrow { color: var(--black); }
.room h2 em { color: var(--white); }
.room__copy > p:last-child { max-width: 500px; margin-top: 38px; font-family: "Cardo", serif; font-size: 1.12rem; }

.current-list { padding-bottom: 90px; }
.current-list__panel { min-height: 630px; padding: clamp(38px, 7vw, 92px); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255, 255, 255, .18); background: radial-gradient(circle at 85% 15%, rgba(226, 74, 47, .36), rgba(0, 0, 0, .94) 48%); box-shadow: inset 0 1px rgba(255, 255, 255, .08); }
/* "The next has no date." is set in Cardo italic, which runs much wider than the
   Josefin line above it; at the shared h2 size it broke to a third line with one
   orphaned word. Slightly smaller, slightly wider measure, two clean lines. */
.current-list__heading { max-width: 920px; }
.current-list__heading h2 { font-size: clamp(2.9rem, 5.4vw, 5.4rem); }
.current-list__heading > p:last-child { max-width: 510px; margin: 36px 0 0; color: rgba(255, 255, 255, .64); font-family: "Cardo", serif; font-size: 1.05rem; }
.primary-action--light { background: var(--white); color: var(--black); align-self: flex-start; }
.primary-action--light i { background: var(--orange); color: var(--white); }
.current-list__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 28px 0 0 var(--spine); color: rgba(255, 255, 255, .45); font-size: 10px; letter-spacing: .06em; }

.essentials { padding-top: 110px; }
.essentials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 80px; }
.utility-card { position: relative; min-height: 296px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .035); text-align: left; cursor: pointer; transition: transform 650ms var(--ease), background 650ms var(--ease), border-color 650ms var(--ease); }
.utility-card:hover { transform: translateY(-7px); background: var(--orange); border-color: var(--orange); }
.utility-card > span { color: var(--orange); font-family: "Cardo", serif; font-size: 1.3rem; font-style: italic; }
.utility-card:hover > span { color: var(--black); }
/* "auto" pushed the title up off a bottom-anchored paragraph, so a card whose
   copy ran to three lines started its h3 24px higher than its neighbours - a
   visible baseline break across a 3-up grid, and two-thirds of every card sat
   empty above it. Anchor from the top instead: the titles align by construction
   and the slack falls to the foot of the card where the eye does not read it. */
.utility-card h3 { margin: 52px 0 12px; font-size: 1.55rem; font-weight: 400; }
.utility-card p { margin: 0; color: rgba(255, 255, 255, .54); font-family: "Cardo", serif; }
.utility-card:hover p { color: var(--black); }
.utility-card i { position: absolute; top: 24px; right: 24px; }

.site-footer { width: var(--page); margin: 80px auto 0; padding: 60px 0 42px; border-top: 1px solid rgba(255, 255, 255, .16); }
.site-footer__logos { display: flex; align-items: center; gap: 24px; }
.venue-mark__frame--footer { height: 24px; }
.venue-mark__frame--footer img { height: 24px; }
.site-footer__cross { color: var(--orange); font-family: "Cardo", serif; font-size: 1.4rem; }
.site-footer__sync { font-size: 14px; font-weight: 300; letter-spacing: .28em; text-transform: uppercase; }
.site-footer > p { margin: 54px 0 22px; color: rgba(255, 255, 255, .55); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 28px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.site-footer__links button { padding: 0; border: 0; background: none; cursor: pointer; text-transform: uppercase; }
.site-footer__links a:hover, .site-footer__links button:hover { color: var(--orange); }

.current-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .94); color: var(--white); }
.current-dialog::backdrop { background: rgba(0, 0, 0, .92); backdrop-filter: blur(12px); }
.current-dialog[open] { display: grid; place-items: center; animation: dialog-in 700ms var(--ease) both; }
@keyframes dialog-in { from { opacity: 0; } }
.current-dialog__shell { position: relative; width: min(100% - 32px, 860px); max-height: calc(100dvh - 32px); padding: clamp(28px, 6vw, 70px); overflow: auto; border: 1px solid rgba(255, 255, 255, .18); background: var(--black); box-shadow: inset 0 1px rgba(255, 255, 255, .08); }
.current-dialog__shell::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--orange); }
.dialog-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: none; cursor: pointer; font-family: "Cardo", serif; font-size: 1.4rem; }
.current-dialog h2 { font-size: clamp(3.2rem, 7vw, 6.4rem); }
/* Email was the 180px column, so its placeholder truncated mid-sentence to
   "So we can hold your" - at the moment of commitment. Email strings are longer
   than names, not shorter. */
#currentForm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
#currentForm > label, #currentForm fieldset { display: grid; gap: 9px; }
#currentForm label > span, #currentForm legend { font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
#currentForm input, #currentForm select { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; outline: 0; background: rgba(255, 255, 255, .05); color: var(--white); }
#currentForm input:focus, #currentForm select:focus { border-color: var(--orange); }
#currentForm fieldset { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; border: 0; }
/* The venue-consent line. Full width, sentence case, and deliberately not
   styled as a field label: it is a separate permission, not part of the RSVP. */
#currentForm > label.check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 11px; margin-top: -6px; cursor: pointer; }
#currentForm > label.check input { width: 18px; min-height: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; accent-color: var(--orange); }
#currentForm > label.check > span { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; opacity: .78; }
.current-choice { position: relative; display: block !important; cursor: pointer; }
.current-choice input { position: absolute; opacity: 0; pointer-events: none; }
.current-choice span { min-height: 76px; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255, 255, 255, .18); transition: border-color 400ms var(--ease), background 400ms var(--ease); }
.current-choice b { font-size: 13px; font-weight: 500; }
.current-choice small { color: rgba(255, 255, 255, .55); font-size: 10px; }
.current-choice input:checked + span { border-color: var(--orange); background: rgba(226, 74, 47, .14); }
.current-dialog__submit { grid-column: 1 / -1; margin-top: 12px; }
.form-note { grid-column: 1 / -1; margin: 0; color: rgba(255, 255, 255, .45); font-family: "Cardo", serif; font-size: .9rem; }
.request-ready { margin-top: 50px; }
.request-ready__note { margin: 22px 0 28px; padding: 24px; border-left: 3px solid var(--orange); background: rgba(255, 255, 255, .05); white-space: pre-wrap; font-family: "Cardo", serif; }
.request-ready__back { margin: 24px 0 0; padding: 0 0 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .35); background: none; cursor: pointer; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }

.js .reveal { opacity: 0; transform: translateY(38px); transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 860px) {
  :root { --page: calc(100% - 32px); }
  .site-header { top: 10px; width: calc(100% - 20px); grid-template-columns: 112px 1fr auto; min-height: 58px; padding-left: 10px; }
  .venue-mark { width: auto; }
  .venue-mark__frame { height: 14px; }
  .venue-mark__frame img { height: 14px; }
  /* The persistent CTA was a bare 44px circle holding an arrow on every phone,
     while desktop - which carries almost none of the traffic - got the worded
     pill. An unlabelled circle reads as decoration, not as the way in. The date
     that used to occupy this space is repeated in the hero facts a few hundred
     pixels below, so the header buys the label rather than duplicating it. */
  .site-header { grid-template-columns: 112px 1fr auto; }
  .site-header__meta { display: none; }
  .header-action { width: auto; height: 44px; min-height: 44px; padding: 3px 3px 3px 18px; gap: 10px; }
  .header-action span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 10px; letter-spacing: .14em; }
  .header-action i { width: 38px; height: 38px; }
  .hero { padding: 120px 20px 86px; align-items: end; }
  .hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .94) 70%); }
  /* 62% center framed Humboldt's faceted ceiling, so the phone hero - which is
     where essentially all the traffic lands - showed red polygons and no bar,
     no bottles, no room. Drop the focal point to the bar itself. */
  .hero__photograph img { object-position: 58% 78%; }
  .hero__copy { width: 100%; }
  /* 22vw sized "Subcurrent" to within half a pixel of the glass at every phone
     width - 389.5 of 390, 374.4 of 375, 429.8 of 430. It never overflowed the
     document, so scrollWidth checks passed, but the word was breaking out of
     the 20px gutter that the eyebrow, tagline, facts and buttons all hold, and
     the flat terminal of Josefin Sans's "t" landed on the bezel. Bleeding is a
     legitimate move; doing it on one side only, by accident, is not. */
  h1 span { font-size: clamp(4.2rem, 20vw, 7rem); }
  h1 em { margin-left: .3em; font-size: clamp(2rem, 11vw, 4rem); }
  .hero__line { margin-top: 34px; }
  .hero__facts { gap: 22px 36px; margin-top: 32px; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions > * { justify-content: space-between; width: 100%; }
  .hero__index { display: none; }
  .scroll-cue { left: 20px; right: auto; bottom: 28px; }
  .section { padding: 100px 0; }
  .section__intro { display: block; }
  .section__intro h2 { margin-top: 28px; }
  .arc__stages { margin: 58px 0 0; }
  .arc-card { grid-template-columns: 76px 1fr; gap: 20px; }
  .curator { grid-template-columns: 1fr; gap: 64px; }
  .curator__portrait { width: 88%; }
  .portrait-shell__stamp { right: -40px; }
  .room { grid-template-columns: 1fr; gap: 64px; padding-inline: 16px; }
  .room__collage { min-height: 510px; }
  .room__copy { padding: 0 16px; }
  .current-list__panel { min-height: 570px; padding: 32px 24px; }
  .current-list__notes { margin-left: 0; grid-template-columns: 1fr; gap: 8px; }
  .essentials__grid { grid-template-columns: 1fr; }
  .utility-card { min-height: 230px; }
  .site-footer__logos { flex-wrap: wrap; }
  .site-footer__sync { font-size: 11px; }
  .site-footer > p { line-height: 1.8; }
}

@media (max-width: 560px) {
  #currentForm { grid-template-columns: 1fr; }
  #currentForm fieldset, .current-dialog__submit, .form-note { grid-column: 1; }
  .current-choice span { align-items: flex-start; flex-direction: column; gap: 7px; }
  .current-dialog__shell { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 58px 22px 30px; }
  .room__collage { min-height: 420px; }
  .room__image--wide { inset: 0 7% 20% 0; }
  .room__image--drink { width: 47%; height: 43%; }
  .room__image--wall { width: 35%; height: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .current-field { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* --- RSVP mechanics: capacity line, held-confirmation lede, calendar + invite share --- */
.current-capacity {
  margin: 18px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.current-capacity::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--orange);
  vertical-align: middle;
  transform: translateY(-1px);
}
.request-ready__lede {
  margin: 14px 0 0;
  font-family: "Cardo", serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}
.request-ready__cal {
  display: inline-block;
  margin: 20px 0 0;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.request-ready__cal:hover { color: #fff; border-color: var(--orange); }
.request-ready__share {
  margin: 30px 0 0;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(226, 74, 47, .06);
}
.request-ready__share-copy {
  margin: 0 0 16px;
  font-family: "Cardo", serif;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}
.request-ready__sharebtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px 11px 20px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.request-ready__sharebtn:hover { border-color: var(--orange); background: rgba(226, 74, 47, .12); }
.request-ready__sharebtn i {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  background: var(--orange);
  color: #fff;
  font-style: normal;
}

/* [hidden] must beat the #currentForm display:grid rule (ID specificity) so the
   form actually disappears when the held-confirmation shows. */
#currentForm[hidden] { display: none; }

/* --- The night, kept: the recap plate ---------------------------------------
   /night (22 frames, 2 films) shipped as an orphan page: live, indexed, and
   reachable only by typing the URL. The operators who do this well do not bury
   it in a nav labelled "gallery" - Boiler Room puts "Browse the archive" beside
   "Find an Event" in the hero, Dekmantel gives the retrospective its own named
   top-level slot ("Rewind"), Cercle and Afterlife make it a full-bleed image
   plate with a title and one arrow. So the recap gets four touchpoints (header
   link, hero line, this plate, footer) and the plate carries the weight: it
   sits immediately after the hero, before the page explains anything, and it
   shows the frames instead of describing them. Proof of the room is the
   enticement; a text link is not. */
.aftermath { width: 100%; padding: 0 max(24px, calc((100vw - 1288px) / 2)); }
.aftermath__plate {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  /* Height tracks width, not viewport height: at 900px the svh version stood
     820px tall and half the plate was empty ceiling. */
  min-height: clamp(560px, 68vw, 780px);
  padding: clamp(30px, 5.4vw, 78px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #050505;
}
.aftermath__film { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
/* A still, not the reels. Both films are 1080x1920: cropped to a landscape plate
   they show a centre slice of a vertical composition and end on a branded outro
   card that collides with the headline. The moving contact sheet below carries
   the motion instead, and the CTA is what promises the film. */
.aftermath__film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(.94) contrast(1.04) brightness(.96);
  transform: scale(1.05);
  animation: plate-drift 38s ease-in-out infinite alternate;
}
@keyframes plate-drift { to { transform: scale(1.13) translate(-1.6%, -1.4%); } }
.aftermath__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .88) 32%, rgba(0, 0, 0, .52) 66%, rgba(0, 0, 0, .2) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .86) 0%, transparent 54%);
  transition: opacity 900ms var(--ease);
}
/* Hover states are gated on a real pointer: a tap on a phone leaves :hover stuck
   on the plate, which was repainting the white CTA orange and freezing the reel
   for the rest of the visit. */
@media (hover: hover) and (pointer: fine) {
  .aftermath__plate:hover .aftermath__veil { opacity: .86; }
  .aftermath__plate:hover .primary-action { background: var(--orange); color: var(--white); }
  .aftermath__plate:hover .primary-action i { transform: translate(2px, -2px) scale(1.06); background: rgba(0, 0, 0, .16); }
  .aftermath__plate:hover .aftermath__reel { animation-play-state: paused; }
  .aftermath__plate:hover .aftermath__reel img { opacity: 1; }
}

.aftermath__copy { align-self: end; max-width: 720px; }
.aftermath h2 { font-size: clamp(3rem, 6vw, 5.9rem); }
.aftermath__lede {
  max-width: 520px;
  margin: 34px 0 0;
  color: rgba(255, 255, 255, .72);
  font-family: "Cardo", serif;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
}
.aftermath__cta { display: flex; align-items: center; gap: 26px; margin-top: 42px; flex-wrap: wrap; }
.aftermath__cta small { color: rgba(255, 255, 255, .5); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }

/* Full-bleed to the plate edge: the strip reads as a contact sheet running under
   the copy, not as a row of buttons inside it. */
.aftermath__strip {
  margin: clamp(34px, 5vw, 62px) calc(-1 * clamp(30px, 5.4vw, 78px)) calc(-1 * clamp(30px, 5.4vw, 78px));
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .42);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* gap is fixed at 10px because the loop shift is exact: for a set duplicated
   once, -50% overshoots by half a gap, so the seam is corrected by -5px. A
   clamped gap would put the jump back. */
.aftermath__reel {
  display: flex;
  gap: 10px;
  width: max-content;
  padding: 16px 0;
  animation: night-reel 58s linear infinite;
}
@keyframes night-reel { to { transform: translateX(calc(-50% - 5px)); } }
.aftermath__reel img {
  height: clamp(78px, 8.6vw, 116px);
  width: auto;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  opacity: .82;
  transition: opacity 600ms var(--ease);
}
.aftermath__plate:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* Header slot. Hidden under 860px: the phone header already carries the mark and
   the worded CTA, and the plate two screens' worth of scroll below is the
   stronger entry point there anyway. */
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: end;
  margin-right: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
  transition: color 500ms var(--ease);
}
.header-link .ic { width: 12px; height: 12px; }
.header-link i { display: grid; place-items: center; color: var(--orange); transition: transform 500ms var(--ease); }
.header-link:hover { color: var(--white); }
.header-link:hover i { transform: translate(2px, -2px); }

/* Above the fold, in the hero, as a line of prose rather than a third button:
   the hero already stacks two full-width actions on a phone and a third would
   push the scroll cue off the glass. */
.hero__night {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color 500ms var(--ease), border-color 500ms var(--ease);
}
.hero__night em { color: var(--orange); font-family: "Cardo", serif; font-size: 1.16em; font-style: italic; letter-spacing: 0; text-transform: none; }
.hero__night b { font-weight: 600; color: var(--white); }
.hero__night span { color: var(--orange); transition: transform 500ms var(--ease); }
.hero__night .ic { width: 13px; height: 13px; }
.hero__night:hover { color: var(--white); border-color: var(--orange); }
.hero__night:hover span { transform: translate(2px, -2px); }

@media (max-width: 860px) {
  .header-link { display: none; }
  .aftermath { padding: 0 16px; }
  .aftermath__plate { min-height: clamp(520px, 76svh, 720px); }
  .aftermath__film img { object-position: 62% 48%; }
  /* Portrait crop puts faces directly behind the lede, so the phone scrim runs
     heavier than the desktop one and keeps only the ceiling glow uncovered. */
  .aftermath__veil { background: linear-gradient(0deg, rgba(0, 0, 0, .93) 0%, rgba(0, 0, 0, .88) 34%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, .24) 100%); }
  .aftermath__lede { margin-top: 26px; }
  .aftermath__cta { gap: 18px; margin-top: 32px; }
  .aftermath__cta .primary-action { width: 100%; justify-content: space-between; }
  .hero__night { margin-top: 26px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The global reduce rule collapses animation-duration, which would leave the
     reel frozen mid-transform; hold it at the head of the strip instead. */
  .aftermath__reel { animation: none; transform: none; }
  .aftermath__film img { animation: none; transform: scale(1.05); }
}

/* --- Stay-posted panel: CTA + the scannable card -----------------------------
   The night is past, so the panel's job changed from "request a place" to "be
   told when there is a date". The QR sits beside the button rather than in a
   footer because the panel is the thing that gets photographed off a screen and
   dropped into a deck or a print; a link nobody can tap is useless there. Dark
   modules on a white card, never inverted - light-on-dark QR is a coin flip on
   older scanners. It resolves to /list, which lands on #stay with the form open. */
.current-list__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.current-list__foot .primary-action--light { align-self: flex-end; }
.qr-card {
  margin: 0;
  padding: 14px 14px 10px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9);
}
.qr-card img { width: 132px; height: 132px; }
.qr-card figcaption {
  margin-top: 9px;
  color: rgba(0, 0, 0, .62);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

/* Two quiet exits from the confirmation: the record of the last night, and a
   table at Humboldt - which is worth offering on a night that does not exist yet. */
.request-ready__then { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 34px; }
.request-ready__then .text-link { margin-top: 0; }

@media (max-width: 860px) {
  .current-list__foot { align-items: stretch; flex-direction: column; }
  .current-list__foot .primary-action--light { width: 100%; justify-content: space-between; align-self: stretch; }
  .qr-card { align-self: flex-start; }
}