/* The Business Club, site v5 (preview, 2026-10-13).
   One idea: the page is the evening. It opens on the room at six, reads in daylight,
   turns amber at dusk and ends at night. On cream, red marks the small labels and the chair's seat; on night, red is the chair alone. */

:root {
  --day: #F2F0EB;
  --day-warm: #ECE4D6;
  --dusk-1: #E4CFAA;
  --dusk-2: #CF9A5E;
  --ember: #6E4530;
  --night: #141418;
  --night-2: #1B1B20;
  --night-3: #0F0F12;
  --night-4: #0B0B0D;
  --ink: #17181B;
  --ink-2: #4B4D53;
  --ink-3: #6F6A62;
  --paper: #EFEAE0;
  --paper-2: #B9B2A6;
  --gold: #C99A48;
  --gold-hi: #E2C07F;
  --gold-deep: #8F6A2C;
  --red: #C8102E;
  --rule-d: rgba(23, 24, 27, .14);
  --rule-n: rgba(239, 234, 224, .14);
  --serif-d: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --w: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font-family: var(--serif); font-size: 19px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--gold); color: var(--ink); padding: 10px 14px; font-family: var(--sans); font-weight: 700; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nw { white-space: nowrap; }

/* ---------- type ---------- */
.label { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.display { font-family: var(--serif-d); font-weight: 400; line-height: .98; letter-spacing: -.012em; }
.h-xl { font-family: var(--serif-d); font-size: clamp(52px, 8.2vw, 106px); line-height: .94; letter-spacing: -.015em; }
.h-l { font-family: var(--serif-d); font-size: clamp(36px, 5.2vw, 68px); line-height: 1; letter-spacing: -.012em; }
.h-m { font-family: var(--serif-d); font-size: clamp(30px, 3.8vw, 48px); line-height: 1.05; }
.h-s { font-family: var(--serif-d); font-size: clamp(26px, 3vw, 36px); line-height: 1.12; }
em, .i { font-style: italic; }
.lede { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.55; }
.small { font-size: 16px; line-height: 1.55; }

/* ---------- tones: each section paints its own stretch of the evening ---------- */
.tone { background: linear-gradient(180deg, var(--c1, var(--day)) 0%, var(--c2, var(--c1, var(--day))) 100%); }
.tone-day { color: var(--ink); }
.tone-day .muted { color: var(--ink-2); }
.tone-night { color: var(--paper); }
.tone-night .muted { color: var(--paper-2); }
.sec { padding: clamp(56px, 6vw, 84px) 0; }
.sec-tight { padding: clamp(48px, 6vw, 84px) 0; }

/* ---------- buttons ---------- */
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .02em;
  padding: 18px 26px 18px 28px; border-radius: 2px; transition: transform .2s ease, background .2s ease;
}
.btn::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-top: 1px; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-hi); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #2a2b30; }
.cta-date { font-family: var(--sans); font-weight: 600; font-size: 15px; }
.cta-date.soft { font-weight: 500; opacity: .85; }
.quiet { font-family: var(--sans); font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.quiet:hover { color: var(--gold); }

/* ---------- masthead ---------- */
.masthead { position: absolute; inset: 0 0 auto 0; z-index: 5; color: #fff; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 22px; }
.masthead a.home { display: block; color: inherit; }
.mark { width: clamp(170px, 22vw, 230px); height: auto; fill: currentColor; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 32px); font-family: var(--sans); font-weight: 600; font-size: 15px; }
.nav a { text-decoration: none; opacity: .92; }
.nav a:hover, .nav a[aria-current] { opacity: 1; border-bottom: 1px solid currentColor; }
@media (max-width: 560px) { .nav a.n-evening { display: none; } .nav { font-size: 14px; } }
.masthead.solid { position: relative; }
.masthead.on-day { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(540px, 84svh, 820px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #1a1612; }
.hero-media { position: absolute; inset: 0; background: #1a1612 url(video/room-wide.jpg) center / cover no-repeat; }
@media (max-aspect-ratio: 4/5) { .hero-media { background-image: url(video/room-tall.jpg); } }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.5) 0%, rgba(12,11,10,.06) 24%, rgba(12,11,10,.14) 50%, rgba(12,11,10,.84) 100%); }
.hero-copy { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: clamp(40px, 7vw, 84px); }
.hero .label { color: var(--gold-hi); margin-bottom: 18px; }
.hero h1 { max-width: 12ch; }
.hero h1 em { color: var(--gold-hi); }
.hero .lede { max-width: 34ch; margin-top: 22px; color: rgba(255,255,255,.9); }
.hero .cta { margin-top: 28px; }
.hero .cta-date a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hero .assure { margin-top: 26px; font-style: italic; color: rgba(255,255,255,.82); font-size: 17px; }
.hero .motion { margin-top: 14px; }
.hero .motion button { background: none; border: 0; padding: 0; font: 600 13px/1.4 var(--sans); color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.hero .motion button:hover { color: #fff; }

/* ---------- why ---------- */
.split { display: grid; gap: clamp(36px, 6vw, 80px); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } .split.wide-l { grid-template-columns: 1.15fr .85fr; } }
.why h2 { max-width: 15ch; }
.heads { list-style: none; margin: 28px 0; padding: 0; border-top: 1px solid var(--rule-d); }
.heads li { font-family: var(--serif-d); font-style: italic; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; padding: 14px 0; border-bottom: 1px solid var(--rule-d); }
.body p + p { margin-top: 18px; }
.clip { border-radius: 3px; overflow: hidden; background: #2a2620; }
.clip video, .clip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cap { font-family: var(--sans); font-weight: 600; font-size: 14px; margin-top: 12px; }
.tone-day .cap { color: var(--ink-3); }
.tone-night .cap { color: var(--paper-2); }

/* ---------- stories: the numbers are the facts ---------- */
.stories { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.story { display: block; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--rule-d); }
.story h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.story p { font-size: clamp(19px, 2vw, 24px); line-height: 1.5; max-width: 34ch; }
@media (min-width: 900px) { .stories { grid-template-columns: 1fr 1fr; } }

/* ---------- who ---------- */
.facts { margin: 0; }
.facts > div { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--rule-d); }
.tone-night .facts > div { border-top-color: var(--rule-n); }
.facts dt { font-family: var(--sans); font-weight: 600; font-size: 15px; }
.facts dd { margin: 0; }
@media (min-width: 700px) { .facts > div { grid-template-columns: 220px 1fr; gap: 24px; } }
.fullbleed { margin: clamp(56px, 8vw, 100px) 0 0; }
.fullbleed img { width: 100%; height: auto; }
.fullbleed figcaption { padding-top: 14px; }

/* ---------- host ---------- */
.host .said { font-style: italic; max-width: 14ch; }
.host .by { font-family: var(--sans); font-weight: 600; font-size: 15px; margin-top: 18px; }
.host blockquote { margin: 0; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.6; }
.host blockquote p + p { margin-top: 18px; }
.host .kay { font-family: var(--serif-d); font-style: italic; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; margin-top: 26px; }
.host .cite { font-family: var(--sans); font-weight: 600; font-size: 14px; margin-top: 22px; }

/* ---------- the turn of the light ---------- */
.dusk-band { position: relative; height: clamp(300px, 52vh, 540px); overflow: hidden; background: var(--ember); }
.dusk-band video, .dusk-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dusk-band::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--dusk-2) 0%, rgba(207,154,94,.55) 14%, rgba(110,69,48,.15) 42%, rgba(20,20,24,.35) 72%, var(--night) 100%); }
.dusk-band .say-big { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(48px, 10vh, 110px); color: #fff; }
.dusk-band .say-big p { font-family: var(--serif-d); font-size: clamp(48px, 7.6vw, 104px); line-height: .9; letter-spacing: -.015em; }
.dusk-band .say-big p em { color: var(--gold-hi); }

/* ---------- the evening, by the clock ---------- */
.eve-head { max-width: 760px; }
.eve-head .label { color: var(--gold-hi); margin-bottom: 18px; }
.eve-head .say { margin-top: 22px; color: var(--paper-2); font-size: clamp(19px, 1.9vw, 22px); }
.clock { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border-bottom: 1px solid var(--rule-n); }
.clock > li { display: grid; grid-template-columns: 5.2em 1fr; gap: 6px 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule-n); }
.clock .t { font-family: var(--serif-d); font-size: clamp(34px, 3.6vw, 46px); line-height: 1; color: var(--gold); }
.clock .d { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; max-width: 52ch; }
.clock .d b { font-family: var(--sans); font-weight: 700; font-size: .9em; color: var(--gold-hi); }
@media (min-width: 900px) { .clock > li { grid-template-columns: 9em 1fr; } }
.eve-clips { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); }
.last-wrap { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--rule-n); }
.last h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--gold-hi); margin-bottom: 14px; }
.last p { font-family: var(--serif-d); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; max-width: 40ch; }
.photos { display: grid; gap: 20px; margin-top: clamp(40px, 6vw, 72px); }
.photos img { width: 100%; height: auto; border-radius: 3px; }
.photos figcaption { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--paper-2); margin-top: 12px; }
.photos figcaption b { color: var(--gold-hi); }
.eve-cta { margin-top: clamp(48px, 7vw, 80px); }

/* ---------- when you come ---------- */
.come .facts dt { color: var(--gold-hi); }
.come-photo img { width: 100%; height: auto; border-radius: 3px; }

/* ---------- the rule and the values ---------- */
.rule h2 { max-width: 16ch; font-size: clamp(44px, 7vw, 96px); line-height: .98; }
.rule .std-say { margin-top: 26px; max-width: 46ch; color: var(--paper-2); }
.vals { margin-top: clamp(48px, 6vw, 80px); }
.vals .label { color: var(--gold-hi); margin-bottom: 8px; }
.vals ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vals li { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; padding: 28px 0; border-top: 1px solid var(--rule-n); }
.vals .vn { grid-row: span 2; font-family: var(--serif-d); font-size: clamp(40px, 4.6vw, 60px); line-height: .85; color: var(--gold); min-width: .7em; }
.vals h3 { font-family: var(--serif-d); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; }
.vals p { color: var(--paper-2); max-width: 46ch; }
@media (min-width: 900px) { .vals ol { grid-template-columns: repeat(3, 1fr); gap: 0 36px; } .vals li { grid-template-columns: 1fr; } .vals .vn { grid-row: auto; margin-bottom: 18px; } }
.who-pays { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--rule-n); display: grid; gap: 16px; }
.who-pays h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--gold-hi); }
.who-pays p { max-width: 60ch; color: var(--paper-2); }
@media (min-width: 900px) { .who-pays { grid-template-columns: 280px 1fr; align-items: start; } .who-pays .quiet { grid-column: 2; justify-self: start; } }

/* ---------- the seat ---------- */
.seat-photo img { width: 100%; height: auto; border-radius: 3px; }
.seat-photo figcaption, .seat .cap { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--paper-2); margin-top: 12px; }
.seat-photo figcaption b { color: var(--gold-hi); }
.seat .label { color: var(--gold-hi); margin-bottom: 16px; }
.seat .say { margin-top: 22px; color: var(--paper-2); max-width: 44ch; }
.price .num-line { font-family: var(--serif-d); font-size: clamp(34px, 3.8vw, 50px); line-height: 1.02; color: var(--gold-hi); }
.price .why-price, .price .cap { margin-top: 16px; color: var(--paper-2); max-width: 40ch; }
.price .quiet { display: inline-block; margin-top: 26px; }

/* ---------- close ---------- */
.close { position: relative; overflow: hidden; }
.close-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: end; }
@media (min-width: 900px) { .close-grid { grid-template-columns: 1.3fr .7fr; } }
.close .vision { font-family: var(--serif-d); font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.012em; max-width: 18ch; }
.close .vision em { color: var(--gold-hi); }
.close .door { margin-top: 22px; color: var(--paper-2); }
.close .meta, .close .later { font-family: var(--sans); font-weight: 600; font-size: 15px; margin-top: 12px; }
.close .later a { color: var(--paper-2); }
.chair { width: clamp(72px, 9vw, 116px); height: auto; fill: var(--paper); margin-bottom: clamp(36px, 5vw, 56px); }
.chair polygon { fill: var(--red); }

/* ---------- footer ---------- */
footer { background: var(--night); color: var(--paper-2); border-top: 1px solid var(--rule-n); }
footer .in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 36px; padding-bottom: 48px; font-family: var(--sans); font-weight: 600; font-size: 14px; }
footer .mark { width: 160px; fill: var(--paper); }
footer a { text-decoration: none; }
footer a:hover { color: var(--gold-hi); }
footer .flinks { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-left: auto; }
@media (max-width: 700px) { footer .flinks { margin-left: 0; width: 100%; } }

/* ---------- gentle arrival, where the browser supports it (content is visible either way) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    @keyframes rv { from { opacity: .82; } to { opacity: 1; } }
  }
}

/* ---------- briefing band and quotes (off until switched on) ---------- */
.opt h2 { font-family: var(--serif-d); font-size: clamp(36px, 5vw, 60px); }
.opt .eyebrow { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--gold-hi); margin-bottom: 14px; }
.opt .opt-sub, .opt .opt-fine { color: var(--paper-2); max-width: 60ch; margin-top: 18px; }
.opt .calls { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 900px) { .opt .calls { grid-template-columns: repeat(3, 1fr); } }
.opt .calls h3 { font-family: var(--serif-d); font-size: 32px; margin-bottom: 10px; }
.opt .call { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule-n); text-decoration: none; }
.opt .call .pg { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--paper-2); }
.quotes .eyebrow { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--gold-hi); }
.quotes-grid { display: grid; gap: 32px; margin-top: 28px; }
.q blockquote { margin: 0; font-family: var(--serif-d); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.q figcaption { font-family: var(--sans); font-weight: 600; font-size: 14px; margin-top: 12px; color: var(--paper-2); }

/* ---------- inner pages ---------- */
.page-head { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 88px); }
.page-head .label { margin-bottom: 18px; }
.tone-night .page-head .label, .tone-night .label { color: var(--gold-hi); }
.tone-day .label { color: var(--gold-deep); }
.page-head h1 { font-family: var(--serif-d); font-size: clamp(46px, 7vw, 80px); line-height: .98; letter-spacing: -.014em; max-width: 16ch; }
.page-head .lede { margin-top: 26px; max-width: 40ch; }
.tone-night .page-head .lede { color: var(--paper-2); }
.tone-day .page-head .lede { color: var(--ink-2); }

/* membership */
.perks { display: grid; gap: 0; margin-top: clamp(56px, 8vw, 96px); }
.perks > div { padding: 24px 0; border-top: 1px solid var(--rule-n); }
.perks h2 { font-family: var(--serif-d); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; color: var(--paper); margin-bottom: 8px; }
.perks p { color: var(--paper-2); max-width: 40ch; }
@media (min-width: 800px) { .perks { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
@media (min-width: 1100px) { .perks { grid-template-columns: repeat(3, 1fr); } }
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; padding: 26px 0; border-top: 1px solid var(--rule-n); }
.tone-day .steps li { border-top-color: var(--rule-d); }
.steps .n { grid-row: span 2; font-family: var(--serif-d); font-size: clamp(54px, 7vw, 80px); line-height: .85; color: var(--gold); min-width: .7em; }
.tone-day .steps .n { color: var(--gold-deep); }
.steps h3, .steps .st { font-family: var(--serif-d); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; }
.steps p { max-width: 50ch; }
.tone-night .steps p { color: var(--paper-2); }
.tone-day .steps p { color: var(--ink-2); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); column-gap: 36px; } .steps li { grid-template-columns: 1fr; } .steps .n { grid-row: auto; margin-bottom: 16px; } }
.path, .plainly { margin-top: clamp(64px, 9vw, 112px); }
.path h2, .plainly h2 { font-family: var(--serif-d); font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 32px; }
.seat-go { margin-top: 30px; }
.seat-go .go-note { color: var(--paper-2); margin-bottom: 4px; }

/* ---------- testimonial video ---------- */
.testimonial { margin: 0; max-width: 360px; }
.testimonial video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; background: #000; }
.testimonial .cap { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--paper-2); margin-top: 12px; }
.quotes .split { align-items: center; }
@media (max-width: 799px) { .testimonial { margin: 0 auto 48px; max-width: 320px; } }

/* ---------- inner pages, v5 additions ---------- */
.fullbleed figcaption b { color: var(--gold-hi); }
.plainly.split h2 { margin: 0; }
.adv .night-block { border-top: 0; }
.adv .night-block p { color: var(--paper-2); }
.adv .night-block h2, .adv .tone-night h2 { color: var(--paper); }
.adv .block.split h2 { margin-bottom: 0; }
.adv .big-rule { font-family: var(--serif-d); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; color: var(--ink) !important; margin-top: 22px !important; }
.night-start .host-line { color: var(--paper-2); }
.night-start .host-line a { color: var(--paper); text-underline-offset: 4px; }
.night-start .fine a { color: var(--paper-2); text-underline-offset: 4px; }

/* ---------- phone masthead ---------- */
.nav a { white-space: nowrap; }
@media (max-width: 520px) { .masthead .wrap { gap: 12px; } .masthead .mark { width: 150px; } .nav { gap: 14px !important; } .nav a { font-size: 13px; } }

/* ---------- review fixes, 10/13 ---------- */
.masthead.solid { background: var(--night); }
.masthead.solid.on-day { background: var(--day); }
.hero-copy { text-shadow: 0 1px 28px rgba(0,0,0,.38); }
.hero-copy .btn { text-shadow: none; }

/* ---------- design pass 2, 10/13 (both reviews) ---------- */
/* scrim where the words sit, faces stay bright elsewhere */
@media (min-width: 900px) { .hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,11,10,.58) 0%, rgba(12,11,10,.32) 38%, rgba(12,11,10,0) 64%); } }
@media (max-width: 899px) { .hero-media::after { background: linear-gradient(180deg, rgba(12,11,10,.5) 0%, rgba(12,11,10,.08) 22%, rgba(12,11,10,.42) 46%, rgba(12,11,10,.82) 66%, rgba(12,11,10,.92) 100%); } }
.hero-media::after { z-index: 1; }
/* the voices, on daylight, right after the stories */
.quotes.tone-day .label, .quotes.tone-day .eyebrow { color: var(--gold-deep); }
.quotes.tone-day .q figcaption, .quotes.tone-day .testimonial .cap { color: var(--ink-3); }
.quotes .q blockquote { font-size: clamp(26px, 2.8vw, 36px); }
/* the biggest room, sized as a fact rather than a promise */
.room-fig { margin: clamp(28px, 4vw, 44px) 0 0; max-width: 560px; }
.room-fig img { width: 100%; height: auto; border-radius: 3px; }
/* advisor page: on a phone the seat box comes right after the opening line */
@media (min-width: 1000px) { .adv-top { grid-template-areas: "a t" "b t"; } .adv-a { grid-area: a; } .adv-b { grid-area: b; } .adv-top .terms { grid-area: t; } }
.adv-b .lede { margin-top: 26px; max-width: 40ch; color: var(--ink-2); }
@media (max-width: 999px) { .adv-b { margin-top: 8px; } }
.q { margin: 0; }

/* ---------- 10/13 night: stories as sentences, the voices, September 16 row ---------- */
.story h3 { color: var(--gold-deep); }
.story p.big { font-family: var(--serif-d); font-size: clamp(27px, 2.8vw, 38px); line-height: 1.12; max-width: 24ch; color: var(--ink); }
.story p.big + p { margin-top: 14px; font-size: 18px; color: var(--ink-2); }
@media (min-width: 800px) { .quotes-grid { grid-template-columns: 1fr 1fr; gap: 40px 56px; } }
.sep16 { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--rule-n); }
.sep16 .testimonial { max-width: 300px; margin: 8px auto 0; }

/* ---------- advisors, rebuilt 10/13 night: Lovable's shape, our words ---------- */
.av-hero { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(44px, 6vw, 72px); }
.av-hero h1 { font-family: var(--serif-d); font-size: clamp(44px, 7.2vw, 92px); line-height: .98; letter-spacing: -.014em; max-width: 13ch; margin-top: 18px; }
.av-hero .lede { margin-top: 22px; max-width: 48ch; color: var(--ink-2); }
.av-hero .cta { margin-top: 26px; }
.av-hero .cta-date { color: var(--ink-2); max-width: 48ch; }
.av-hero .cta-date a { color: var(--ink); text-underline-offset: 4px; }
.av-terms { background: var(--ink); color: var(--paper); }
.av-terms .wrap { display: grid; gap: 20px 36px; padding-top: 26px; padding-bottom: 28px; }
.av-terms .chair { width: 40px; margin: 0; }
.av-terms dl { margin: 0; display: grid; gap: 16px 32px; }
.av-terms dt { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--paper-2); margin-bottom: 4px; }
.av-terms dd { margin: 0; font-size: 17px; line-height: 1.45; }
.av-terms dd a { text-underline-offset: 4px; }
@media (min-width: 700px) { .av-terms dl { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .av-terms .wrap { grid-template-columns: auto 1fr; align-items: center; } }
.av-block { padding: clamp(44px, 6vw, 76px) 0; border-top: 1px solid var(--rule-d); }
.av-block.first { border-top: 0; padding-top: clamp(48px, 6vw, 80px); }
.av-block h2 { font-family: var(--serif-d); font-size: clamp(32px, 4vw, 50px); line-height: 1.04; max-width: 16ch; }
.av-block h2.wide { max-width: 22ch; }
.av-block p { max-width: 56ch; color: var(--ink-2); }
.av-block p + p { margin-top: 14px; }
.av-block .lead-p { margin-top: 18px; color: var(--ink); font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; }
.tone-day .av-block .quiet-label { color: var(--ink-3); }
.av-two { display: grid; gap: 28px 56px; }
@media (min-width: 900px) { .av-two { grid-template-columns: 1fr 1fr; align-items: start; } }
.av-figs { display: grid; gap: 24px; margin-top: 14px; }
.av-figs > div { padding-top: 16px; border-top: 1px solid var(--rule-d); }
.av-figs .n { display: block; font-family: var(--serif-d); font-size: clamp(48px, 5.2vw, 70px); line-height: .95; color: var(--ink); }
.av-figs .l { display: block; margin-top: 8px; color: var(--ink-2); max-width: 30ch; }
.av-figs .s { display: block; margin-top: 6px; font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--ink-3); }
@media (min-width: 600px) { .av-figs { grid-template-columns: 1fr 1fr; } }
.av-photo { margin: 0; }
.av-photo img { width: 100%; height: auto; border-radius: 3px; }
.av-photo figcaption { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.av-cats { list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1px solid var(--rule-d); }
.av-cats li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--rule-d); color: var(--ink-2); }
.av-cats li span { font-family: var(--serif-d); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; color: var(--ink); }
@media (min-width: 800px) { .av-cats li { grid-template-columns: 300px 1fr; gap: 24px; align-items: baseline; } }
.av-gb h3 { font-family: var(--serif-d); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; margin-bottom: 14px; }
.av-gb p b { color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: .92em; }
.av-rule { font-family: var(--serif-d); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: var(--ink); max-width: 20ch; }
.av-close { padding: clamp(56px, 8vw, 104px) 0; }
.av-close h2 { font-family: var(--serif-d); font-size: clamp(38px, 5.4vw, 68px); line-height: 1; }
.av-close .host-line { margin-top: 22px; max-width: 58ch; color: var(--paper-2); font-size: clamp(18px, 1.8vw, 21px); }
.av-close .host-line a { color: var(--paper); text-underline-offset: 4px; }
.av-close .steps { margin-top: clamp(32px, 5vw, 56px); }
.av-close .steps h3 { font-size: clamp(24px, 2.4vw, 30px); }
.av-close .actions { margin-top: 28px; }
.av-close .fine { margin-top: 14px; font-family: var(--sans); font-weight: 600; font-size: 15px; }
.av-close .fine a { color: var(--paper-2); text-underline-offset: 4px; }

/* phones get one clip, not two thumbnails */
@media (max-width: 599px) { .eve-clips { grid-template-columns: 1fr; } .eve-clips .clip:nth-child(2) { display: none; } }

/* membership: the upstairs room, close enough to see the people */
.mem-photo { margin: clamp(40px, 6vw, 72px) 0 0; }
.mem-photo img { width: 100%; height: auto; border-radius: 3px; }
.mem-photo figcaption { margin-top: 12px; }
/* advisors: the talk, beside the opening on a laptop, under the button on a phone */
.av-hero-grid { display: grid; gap: 32px; }
.av-hero-photo { margin: 0; }
.av-hero-photo img { width: 100%; height: auto; border-radius: 3px; }
.av-hero-photo figcaption { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink-3); margin-top: 10px; }
@media (min-width: 900px) { .av-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; } .av-hero-photo { margin-top: 42px; } }

/* photo frames carry no browser default indent anywhere on the site */
figure { margin: 0; }
/* September 16: the text, then the talk photo and the guests' video side by side at one height */
.sep16-media { display: grid; gap: 24px; margin-top: 28px; }
.sep16 .photos { margin-top: 0; }
@media (min-width: 900px) {
  .sep16-media { grid-template-columns: 727fr 273fr; align-items: start; }
  .sep16 .testimonial { max-width: none; margin: 0; justify-self: stretch; }
}

/* no one-word last lines on the price */
.price .num-line { text-wrap: balance; max-width: 12ch; }
/* rows of unequal height: the number, the heading and the text start at the top, never spread out */
.steps li, .vals li { align-content: start; }

/* ---------- the panel's fixes, 10/13 night ---------- */
.heads li, .q figcaption, .testimonial .cap, .photos figcaption { text-wrap: balance; }
@media (max-width: 700px) { footer .flinks { gap: 10px 16px; } }
.nav a, footer a { position: relative; }
.nav a::after, footer a::after { content: ""; position: absolute; left: -6px; right: -6px; top: -10px; bottom: -10px; }
body.day { background: var(--day); }
.quotes.sec-tight { padding-top: clamp(40px, 5vw, 56px); }
.who-cta { margin-top: 28px; }
.close .addr { display: block; font-weight: 500; color: var(--paper-2); margin-top: 4px; }
.price .first-fifty { margin-top: 16px; max-width: 40ch; color: var(--paper); }
.price .seat-go { margin-top: 26px; }
.av-gb .ask-again { margin-top: 18px; }

/* ---------- the no-gold version, Nik's pick 10/13 (was brand.css) ---------- */
:root {
  --gold: #F4F5F3;
  --gold-hi: #D3D6D9;
  --gold-deep: #17191C;
}
.btn-gold:hover { background: #FFFFFF; }
.hero h1 em, .dusk-band .say-big p em { color: inherit; }
.close .vision em { color: var(--paper-2); }
.tone-day .label, .quotes.tone-day .label, .quotes.tone-day .eyebrow, .story h3 { color: var(--red); }
.story h3 { color: var(--red); }
.quiet:hover, footer a:hover { color: var(--paper); }
.tone-day .quiet:hover { color: var(--red); }
:focus-visible { outline-color: var(--paper-2); }
.tone-day :focus-visible, .masthead.on-day :focus-visible, body.day :focus-visible { outline-color: var(--ink); }
.tone-night :focus-visible, .av-terms :focus-visible, .av-close :focus-visible { outline-color: var(--paper-2); }

/* the quotes and the guest video stay hidden until each person has said yes (Nik's rule, 10/2) */
[hidden] { display: none !important; }
@media (min-width: 900px) { .sep16-media:has(.testimonial[hidden]) { grid-template-columns: 1fr; } }

/* ---------- tighter, after the ChatGPT comparison, 10/13 night ---------- */
/* the strip along the bottom of the opening */
.hero-strip { display: grid; gap: 10px; margin-top: clamp(28px, 4vw, 44px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.86); }
.hero-strip .tag { font-family: var(--serif-d); font-size: clamp(22px, 2vw, 26px); color: #fff; }
.hero-strip .where a { color: inherit; text-underline-offset: 4px; }
.hero-strip .dot { margin: 0 10px; opacity: .6; }
.hero-strip .motion { margin: 0; }
.hero .assure { margin-top: 18px; }
@media (min-width: 900px) { .hero-strip { grid-template-columns: 1fr auto auto; align-items: baseline; gap: 32px; } }
/* the evening: clock left, the last Gathering right */
.eve-grid { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: clamp(36px, 4vw, 56px); }
@media (min-width: 1000px) { .eve-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.eve-grid .clock { margin-top: 0; }
.clock > li { grid-template-columns: 3.4em 1fr; }
@media (min-width: 900px) { .clock > li { grid-template-columns: 4.2em 1fr; } }
.clock .d h3 { font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--paper); }
.clock .d p { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--paper-2); max-width: 46ch; }
.eve-grid .sep16 { margin-top: 0; padding-top: 0; border-top: 0; }
.eve-grid .last p { font-size: clamp(22px, 2vw, 26px); max-width: 32ch; }
.eve-grid .sep16-media { grid-template-columns: 727fr 273fr; margin-top: 22px; gap: 14px; }
.eve-grid .sep16 .testimonial { max-width: none; margin: 0; }
.eve-grid .sep16 .testimonial .cap { font-size: 12px; }
.eve-grid .eve-cta { margin-top: 28px; }
/* the four questions */
.faq { display: grid; gap: 0 48px; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule-n); }
@media (min-width: 800px) { .faq { grid-template-columns: 1fr 1fr; } }
.faq details { border-bottom: 1px solid var(--rule-n); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--paper); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--paper-2); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; color: var(--paper-2); max-width: 52ch; font-size: 17px; }
/* $900 as a number */
.price .num-line { display: flex; align-items: baseline; gap: 12px; font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--paper-2); max-width: none; }
.price .num-line .amt { font-family: var(--serif-d); font-weight: 400; font-size: clamp(56px, 6vw, 76px); line-height: 1; color: var(--paper); letter-spacing: -.01em; }

/* ---------- membership, tightened after the ChatGPT comparison ---------- */
.mem-head { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 1000px) { .mem-head { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.price-card { border: 1px solid var(--rule-n); border-radius: 3px; padding: clamp(24px, 3vw, 36px); }
.price-card .label { margin-bottom: 14px; }
.price-card .num-line { display: flex; align-items: baseline; gap: 12px; font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--paper-2); }
.price-card .num-line .amt { font-family: var(--serif-d); font-weight: 400; font-size: clamp(64px, 7vw, 88px); line-height: 1; color: var(--paper); letter-spacing: -.01em; }
.price-card .first-fifty { margin-top: 16px; color: var(--paper); font-size: 19px; line-height: 1.5; max-width: 40ch; }
.price-card .why-price { margin-top: 10px; color: var(--paper-2); font-size: 16px; max-width: 44ch; }
.price-card .seat-go { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule-n); display: grid; gap: 12px; justify-items: start; }
.price-card .go-note { font-family: var(--sans); font-size: 14px; color: var(--paper-2); margin: 0; }
.mem-gets h2.h-m { margin-bottom: clamp(20px, 3vw, 32px); }
.mem-rows > div { display: grid; gap: 6px 40px; padding: 22px 0; border-top: 1px solid var(--rule-d); }
.mem-rows > div:last-child { border-bottom: 1px solid var(--rule-d); }
.mem-rows h3 { font-family: var(--serif-d); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.mem-rows p { color: var(--ink-2); max-width: 52ch; }
.mem-rows.small h3 { font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.5; }
.mem-rows.small > div { padding: 16px 0; }
@media (min-width: 800px) { .mem-rows > div { grid-template-columns: 300px 1fr; align-items: baseline; } }
.mem-gets .mem-photo { margin-top: clamp(32px, 4vw, 48px); }
.mem-also { margin-top: clamp(32px, 4vw, 48px); }
.mem-also .label { color: var(--ink-3); margin-bottom: 8px; }
/* the fine print as questions, on a light background */
.faq.day { border-top-color: var(--rule-d); margin-top: 0; grid-template-columns: 1fr !important; }
.faq.day details { border-bottom-color: var(--rule-d); }
.faq.day summary { color: var(--ink); }
.faq.day summary::after, .faq.day details p { color: var(--ink-2); }
.tone-day .steps .n { color: var(--ink); }

/* ---------- advisors: the seat card beside the headline, after the ChatGPT comparison ---------- */
.av-hero-grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1000px) { .av-hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.av-card { background: var(--ink); color: var(--paper); border-radius: 3px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; }
.av-card .chair { width: 34px; margin: 0; }
.av-card .card-head { font-family: var(--serif-d); font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; }
.av-card dl { margin: 0; }
.av-card dl > div { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule-n); }
.av-card dt { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--paper-2); padding-top: 3px; }
.av-card dd { margin: 0; font-size: 17px; line-height: 1.45; }
.av-card dd a { text-underline-offset: 4px; }
.av-card .btn { justify-self: start; }
.av-card .fine { font-family: var(--sans); font-size: 14px; color: var(--paper-2); }
.av-card .fine a { color: var(--paper); text-underline-offset: 4px; }
.av-card :focus-visible { outline-color: var(--paper-2); }
.av-who { display: grid; gap: 28px 56px; }
@media (min-width: 900px) { .av-who { grid-template-columns: 1fr 1fr; align-items: center; } }
.av-nums { padding-top: 0; border-top: 0; }
.av-nums .av-figs { margin-top: 10px; }
@media (min-width: 900px) { .av-nums .av-figs { grid-template-columns: repeat(2, minmax(0, 360px)); gap: 48px; } }

/* ---------- the brand's own fonts (Archivo + Source Serif 4), 10/13 night ----------
   Instrument Serif came out: tall and narrow, it read long and squished (Nik). Source Serif 4 is wider,
   so the big sizes come down about a fifth; the optical-size axis gives the large lines the display cut. */
.h-xl, .h-l, .h-m, .h-s, .rule h2, .close .vision, .page-head h1, .av-hero h1, .dusk-band .say-big p { letter-spacing: -.012em; line-height: 1.06; font-weight: 400; }
.h-xl { font-size: clamp(42px, 6.4vw, 84px); }
.h-l { font-size: clamp(30px, 4.2vw, 54px); }
.h-m { font-size: clamp(26px, 3.1vw, 40px); }
.heads li { font-size: clamp(21px, 2.3vw, 27px); }
.story p.big { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.host .kay { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.3; }
.dusk-band .say-big p { font-size: clamp(40px, 6vw, 84px); }
.clock .t { font-size: clamp(26px, 2.6vw, 34px); }
.last p, .eve-grid .last p { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.4; }
.rule h2 { font-size: clamp(34px, 5.4vw, 74px); }
.vals .vn { font-size: clamp(32px, 3.6vw, 46px); }
.vals h3 { font-size: clamp(22px, 2.1vw, 27px); line-height: 1.15; }
.price .num-line .amt, .price-card .num-line .amt { font-size: clamp(48px, 5vw, 64px); }
.close .vision { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; }
.page-head h1 { font-size: clamp(36px, 5.2vw, 64px); }
.av-hero h1 { font-size: clamp(36px, 5.4vw, 68px); }
.steps .n { font-size: clamp(40px, 5vw, 60px); }
.steps h3, .steps .st { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; }
.path h2, .plainly h2 { font-size: clamp(28px, 3.4vw, 44px); }
.q blockquote, .quotes .q blockquote { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.3; }
.av-block h2 { font-size: clamp(26px, 3.1vw, 40px); }
.av-figs .n { font-size: clamp(40px, 4.2vw, 56px); }
.av-cats li span { font-size: clamp(20px, 1.9vw, 24px); }
.av-gb h3 { font-size: clamp(22px, 2.4vw, 30px); }
.av-rule { font-size: clamp(22px, 2.4vw, 30px); }
.av-close h2 { font-size: clamp(30px, 4.2vw, 54px); }
.av-card .card-head { font-size: clamp(22px, 2.1vw, 27px); }
.mem-rows h3 { font-size: clamp(21px, 2.1vw, 26px); }
.hero-strip .tag { font-size: clamp(18px, 1.6vw, 21px); }
/* headlines in the sturdier text cut, like the ChatGPT version Nik liked (the display cut reads thin on video and dark) */
h1, h2, h3, .h-xl, .h-l, .h-m, .dusk-band .say-big p, .clock .t, .amt, .vision, .card-head, .vn, .steps .n, .av-figs .n, .q blockquote, .heads li, .story p.big, .kay, .last p, .tag { font-optical-sizing: none; font-variation-settings: "opsz" 20; }
.av-hero h1 { max-width: 17ch; } .page-head h1 { max-width: 18ch; }

/* ---------- the evening, tidied 10/13 night ---------- */
.clock > li { align-items: start; padding: 18px 0; }
.clock .t { line-height: 1; }
.clock .d { padding-top: 4px; }
.clock .d h3 { font-size: 16px; line-height: 1.3; }
.clock .d p { font-size: 16px; line-height: 1.5; margin-top: 4px; }
.eve-grid .last h3 { margin-bottom: 10px; }
.eve-grid .last p { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--paper-2); max-width: 46ch; font-variation-settings: normal; }
.eve-grid .sep16-media { margin-top: 24px; }
.eve-grid .photos figcaption, .eve-grid .testimonial .cap { font-size: 12px; margin-top: 10px; }

/* the four questions beside the food photo */
.faq-wrap { display: grid; gap: 24px; margin-top: clamp(40px, 5vw, 64px); }
.faq-wrap .faq { margin-top: 0; grid-template-columns: 1fr !important; }
.faq-photo { margin: 0; }
.faq-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.faq-photo figcaption { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--paper-2); margin-top: 10px; }
.faq-photo figcaption b { color: var(--paper); }
@media (min-width: 800px) { .faq-wrap { grid-template-columns: 300px 1fr; gap: 48px; align-items: start; } .faq-photo img { aspect-ratio: 4 / 5; } }

/* ---------- the video beside the voices; less empty space around the stories, 10/13 night ---------- */
.why.sec { padding-bottom: clamp(36px, 4vw, 52px); }
.quotes.sec-tight { padding-top: clamp(28px, 3vw, 40px); }
.stories { margin-top: clamp(36px, 4vw, 56px); gap: clamp(28px, 4vw, 56px); }
.story p.big { max-width: 32ch; }
.voices { display: grid; gap: 28px; margin-top: 22px; }
.voices .testimonial { max-width: 300px; margin: 0; }
.voices .testimonial video { aspect-ratio: 9 / 16; }
.voices .testimonial .cap { font-size: 13px; }
.voices .quotes-grid { grid-template-columns: 1fr !important; gap: 32px; margin-top: 0; }
@media (min-width: 900px) { .voices { grid-template-columns: 280px 1fr; gap: 64px; align-items: center; } }
.eve-grid .sep16-media { grid-template-columns: 1fr; }

.faq-wrap.no-photo { display: block; }
.faq-wrap.no-photo .faq { grid-template-columns: 1fr !important; }
@media (min-width: 800px) { .faq-wrap.no-photo .faq { grid-template-columns: 1fr 1fr !important; column-gap: 48px; } }

/* 10/13 night: the table clip runs clear, like a window into the room. No color wash; a short dark fade only under the words. */
.dusk-band { width: 100%; height: clamp(340px, 56.25vw, 86svh); background: #141414; }
.dusk-band video, .dusk-band img { object-position: 50% 40%; }
.dusk-band::before { background: linear-gradient(180deg, rgba(12,11,10,0) 0%, rgba(12,11,10,0) 58%, rgba(12,11,10,.55) 84%, rgba(12,11,10,.78) 100%); }
.dusk-band .say-big { bottom: clamp(28px, 5vw, 64px); text-shadow: 0 1px 24px rgba(0,0,0,.35); }

/* 10/13 night: the testimonial reel. Short vertical clips side by side; tap to play with sound. Five fit a laptop row; more scroll sideways. */
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: 64vw; gap: 16px; margin: 22px -16px 0; padding: 0 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; }
.vclip { margin: 0; scroll-snap-align: start; min-width: 0; }
.vclip video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; background: #000; }
.vclip figcaption { margin-top: 14px; }
.vclip q { display: block; font-family: var(--serif-d); font-size: 18px; line-height: 1.38; text-wrap: pretty; }
.vclip figcaption span { display: block; margin-top: 8px; font: 600 13px/1.45 var(--sans); color: var(--ink-3); text-wrap: balance; }
@media (min-width: 640px) { .reel { grid-auto-columns: 40vw; } }
@media (min-width: 900px) { .reel { grid-auto-columns: calc((100% - 4 * 24px) / 5); gap: 24px; margin: 28px 0 0; padding: 0 0 10px; scroll-padding: 0; } }
/* the logo link gets the same finger-sized tap area as the nav links */
.masthead a.home { position: relative; }
.masthead a.home::after { content: ""; position: absolute; left: -8px; right: -8px; top: -16px; bottom: -16px; }

/* 10/14: who has taken the floor. One square per Gathering in the club's cover style; one row, sideways scroll. */
.floor { margin-top: clamp(48px, 6vw, 72px); }
.floor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.floor-head .label { margin: 0; }
.floor-nav { display: none; gap: 8px; }
.floor-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-n); background: none; color: var(--paper); font: 600 18px/1 var(--sans); cursor: pointer; }
.floor-nav button:hover { border-color: var(--paper-2); }
.floor-reel { display: grid; grid-auto-flow: column; grid-auto-columns: 62vw; gap: 16px; margin: 18px -16px 0; padding: 0 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.ftile { margin: 0; scroll-snap-align: start; min-width: 0; }
.ftile img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 3px; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.ftile figcaption { margin-top: 10px; font: 600 13px/1.4 var(--sans); color: var(--paper-2); }
.ftile figcaption b { color: var(--paper); }
@media (min-width: 640px) { .floor-reel { grid-auto-columns: 40vw; } }
@media (min-width: 900px) { .floor-nav { display: flex; } .floor-reel { grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; margin: 22px 0 0; padding: 0 0 10px; scroll-padding: 0; } }

/* 10/14: the price reads like club dues, not a sale. The gate and what the seat is come first; the number is small and quiet. */
.seat .say { color: var(--paper); font-size: clamp(19px, 1.8vw, 21px); line-height: 1.5; max-width: 40ch; }
.seat-gets { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--rule-n); max-width: 44ch; }
.seat-gets li { padding: 12px 0; border-bottom: 1px solid var(--rule-n); color: var(--paper); font-size: 17px; line-height: 1.45; }
.stake { margin-top: 24px; font-family: var(--serif-d); font-style: italic; font-size: clamp(21px, 2vw, 24px); line-height: 1.3; color: var(--paper); max-width: 30ch; }
.dues { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule-n); }
.dues-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
.dues-k { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-2); }
.dues-v { font-family: var(--serif-d); font-size: clamp(26px, 2.4vw, 30px); line-height: 1.1; color: var(--paper); }
.dues-note { margin-top: 10px; color: var(--paper-2); font-size: 16px; line-height: 1.5; max-width: 44ch; }
.dues .quiet { display: inline-block; margin-top: 18px; }
.price-card .gate { color: var(--paper); font-size: 19px; line-height: 1.5; max-width: 40ch; }
.price-card .proof { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--red); color: var(--paper-2); font-size: 16px; line-height: 1.5; max-width: 42ch; }
.price-card .stake { margin-top: 18px; }
.price-card .dues { margin-top: 22px; }