/* ==========================================================================
   The Commons — main stylesheet
   Editorial members'-club direction: warm white, cream, charcoal, near-black.
   Photography carries the colour. Mobile-first.

   Sections set a colour context (--bg, --fg, --fg-muted, --line) and
   components read from it, so the same component works on light and dark.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette */
  --white: #fbf9f5;      /* page background: warm white */
  --cream: #f3eee6;      /* quiet alternate background */
  --sand: #e8e1d6;       /* deepest neutral band */
  --charcoal: #2b2825;   /* primary text, dark sections */
  --black: #171513;      /* near-black for buttons and the darkest surfaces */
  --stone: #66605a;      /* secondary text (WCAG AA on all light backgrounds) */
  --stone-light: #b9b1a6;
  --error: #a3261c;
  --error-light: #ff9e92;

  /* Default (light) colour context */
  --bg: var(--white);
  --fg: var(--charcoal);
  --fg-muted: var(--stone);
  --line: rgb(43 40 37 / 0.14);
  --surface: var(--white);

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* A restrained scale: the largest heading is ~3.4rem on wide screens. */
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem);
  --step-3: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-4: clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);
  --step-5: clamp(2.25rem, 1.8rem + 2.2vw, 3.4rem);

  /* Space */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --space-2xl: clamp(3.5rem, 2.5rem + 6vw, 8.5rem);

  --container: 78rem;
  --narrow: 42rem;
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --radius: 2px;
  --focus: 2px solid currentColor;
}

/* Dark colour context */
.section--dark,
.section--evening,
.page-hero--dark,
.cta-band,
.home-hero,
.invitation {
  --bg: var(--charcoal);
  --fg: #f5f1ea;
  --fg-muted: #c9c1b6;
  --line: rgb(245 241 234 / 0.2);
  --surface: rgb(255 255 255 / 0.04);
  --error: var(--error-light);
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-s);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
}

h3 {
  font-size: var(--step-2);
  line-height: 1.25;
}

/* No decorative italics in headings. */
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: inherit;
}

p {
  margin: 0 0 var(--space-s);
  text-wrap: pretty;
}

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

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-color: var(--fg-muted);
}

:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

address {
  font-style: normal;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

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

/* ---------- 3. Layout primitives ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2 * var(--gutter), var(--narrow));
}

.section {
  padding-block: var(--space-2xl);
  background: var(--bg);
  color: var(--fg);
}

.section--paper {
  --bg: var(--cream);
}

.section--paper-deep {
  --bg: var(--sand);
  --line: rgb(43 40 37 / 0.18);
}

.section--dark,
.section--evening {
  --bg: var(--charcoal);
}

.split {
  display: grid;
  gap: var(--space-m) var(--space-xl);
}

@media (min-width: 52em) {
  .split {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

.prose {
  max-width: 38rem;
}

.prose p:first-child {
  font-size: var(--step-1);
  line-height: 1.55;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  align-items: center;
}

/* ---------- 4. Type helpers ---------- */
.display-title {
  font-size: var(--step-4);
  margin-bottom: var(--space-m);
}

.section-title {
  font-size: var(--step-4);
  max-width: 22ch;
}

.eyebrow {
  margin-bottom: var(--space-xs);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-muted);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 40rem;
}

.fine-print {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.text-link {
  display: inline-block;
  font-weight: 500;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.text-link:hover {
  text-decoration-color: var(--fg-muted);
}

.section-link {
  margin-top: var(--space-xl);
}

/* ---------- 5. Buttons ---------- */
/* One quiet, consistent button: solid near-black, with outline and light variants. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button:hover {
  background: #3a3632;
  border-color: #3a3632;
}

.button:disabled,
.button:disabled:hover {
  background: var(--black);
  border-color: var(--black);
  opacity: 0.5;
  cursor: not-allowed;
}

.button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
}

.button--outline,
.button--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

.button--outline:hover,
.button--ghost:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.button--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.button--light:hover {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.button--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgb(251 249 245 / 0.7);
}

.button--ghost-light:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* ---------- 6. Skip link, concept note, header, nav ---------- */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--black);
  color: var(--white);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(251 249 245 / 0.96);
  border-bottom: 1px solid rgb(43 40 37 / 0.1);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgb(251 249 245 / 0.88);
    backdrop-filter: blur(10px);
  }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 4.5rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
}

.nav-toggle {
  display: none;
}

.site-nav {
  flex-basis: 100%;
  padding-bottom: var(--space-s);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.site-nav a:not(.button) {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-nav a:not(.button):hover {
  border-bottom-color: var(--stone-light);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--charcoal);
}

.site-nav__cta {
  margin-top: var(--space-s);
}

/* With JavaScript, collapse the nav behind a toggle on small screens. */
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -5px;
}

.nav-toggle__bars::after {
  top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
  padding-bottom: var(--space-m);
}

.js .site-nav.is-open .site-nav__list {
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

.js .site-nav.is-open .site-nav__list a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  border-bottom: 1px solid var(--line);
}

.js .site-nav.is-open .site-nav__cta {
  margin-top: var(--space-m);
  width: 100%;
}

@media (min-width: 64em) {
  .js .nav-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav {
    display: flex;
    flex: 1;
    flex-basis: auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: 0;
    margin-left: var(--space-xl);
  }

  .site-nav__list {
    gap: 2rem;
  }

  .site-nav__cta {
    margin-top: 0;
  }
}

/* ---------- 7. Homepage ---------- */

/* 7a. Hero: one full-bleed photograph, centred text. */
.home-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(34rem, 86vh, 56rem);
  background: var(--black);
  color: var(--fg);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.home-hero__media,
.invitation__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.home-hero__media img,
.invitation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Legibility scrims: darkest only behind the centred text, fading toward the
   edges so the photographs keep their colour (sunset sky, sea). */
.home-hero__media::after,
.invitation__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 52%, rgb(23 21 19 / 0.55), rgb(23 21 19 / 0.12));
}

/* The closing photo's misty windows are pale right behind the text, so the
   scrim is deeper at the centre (measured to reach WCAG AA) and fades out
   toward the skyline and the seated figures. */
.invitation__media::after {
  background: radial-gradient(ellipse 58% 50% at 50% 48%, rgb(23 21 19 / 0.7), rgb(23 21 19 / 0.38) 70%, rgb(23 21 19 / 0.18));
}

/* Focal points. Hero: keep the umbrella canopies in frame on wide screens.
   Closing: keep the skyline and the seated figures low in the frame. */
.home-hero__media img {
  object-position: 50% 30%;
}

.invitation__media img {
  object-position: 50% 78%;
}

/* Phones and portrait tablets: the closing text spans most of the width, so
   darken a horizontal band behind it instead, leaving the beams above and
   the readers below lighter. */
@media (max-width: 52em) {
  .invitation__media::after {
    background: linear-gradient(rgb(23 21 19 / 0.25), rgb(23 21 19 / 0.6) 32%, rgb(23 21 19 / 0.6) 66%, rgb(23 21 19 / 0.25));
  }
}

/* Phones see only a narrow slice of each landscape photo, so aim it at the
   umbrellas and people (hero) and the seated readers by the window (closing). */
@media (max-width: 40em) {
  .home-hero__media img {
    object-position: 60% 40%;
  }

  .invitation__media img {
    object-position: 74% 50%;
  }

}

.home-hero__content {
  display: grid;
  justify-items: center;
  padding-block: var(--space-2xl);
}

.home-hero__title {
  max-width: 17ch;
  margin-bottom: var(--space-m);
  font-size: var(--step-5);
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
}

.home-hero__content .button {
  margin-top: var(--space-l);
  margin-bottom: calc(-1 * var(--space-l));
}

.home-hero__lede {
  max-width: 36rem;
  margin-bottom: var(--space-l);
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgb(251 249 245 / 0.9);
}

/* 7b. Introduction: a short, centred, text-only statement. */
.home-intro {
  padding-block: var(--space-2xl);
  text-align: center;
}

.home-intro .eyebrow {
  margin-bottom: var(--space-s);
}

.home-intro__title {
  margin-bottom: var(--space-m);
  font-size: var(--step-5);
  line-height: 1.1;
}

.home-intro__text {
  max-width: 34rem;
  margin-inline: auto;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--stone);
}

/* 7c. Membership preview: one quiet panel divided into three columns. */
.membership-preview {
  padding-block: var(--space-2xl);
  background: var(--cream);
}

.membership-preview__head {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.membership-preview__head p {
  max-width: 34rem;
  margin-inline: auto;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--stone);
}

/* Prefixed to outrank the ul[role="list"] reset. */
.membership-preview .membership-preview__list {
  display: grid;
  background: var(--white);
  border: 1px solid var(--line);
}

.membership-preview__item {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--space-m);
}

.membership-preview__item + .membership-preview__item {
  border-top: 1px solid var(--line);
}

.membership-preview__name {
  margin-bottom: var(--space-xs);
  font-size: var(--step-3);
}

.membership-preview__audience {
  margin-bottom: var(--space-l);
  color: var(--stone);
}

.membership-preview__item .price {
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.membership-preview__action {
  margin-top: var(--space-l);
  text-align: center;
}

@media (min-width: 52em) {
  .membership-preview .membership-preview__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .membership-preview__item {
    padding: var(--space-l);
  }

  .membership-preview__item + .membership-preview__item {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

/* Tier marks: small circles that fill as access grows
   (Community: open, Club: half, Studio: full). Decorative only. */
.tier-mark {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin-bottom: var(--space-s);
  border: 1px solid var(--fg);
  border-radius: 50%;
}

.tier-mark--club {
  background: linear-gradient(90deg, var(--fg) 50%, transparent 50%);
}

.tier-mark--studio {
  background: var(--fg);
}

/* 7d. Closing invitation over a full-bleed photograph. */
.invitation {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(28rem, 70vh, 44rem);
  background: var(--black);
  color: var(--fg);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.invitation__content {
  padding-block: var(--space-2xl);
}

.invitation__content .display-title {
  color: var(--white);
}

.invitation__content p {
  margin-bottom: var(--space-l);
  font-size: var(--step-1);
  color: rgb(251 249 245 / 0.88);
}

.invitation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-s) var(--space-l);
}

.text-link--light {
  color: var(--white);
}

/* ---------- 8. Inner page hero (secondary pages) ---------- */
.page-hero {
  --bg: var(--cream);
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--space-xl) var(--space-2xl);
}

.page-hero--dark {
  --bg: var(--charcoal);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.page-hero__title {
  font-size: var(--step-5);
  line-height: 1.1;
  max-width: 18ch;
}

.page-hero__media img {
  width: 100%;
}

/* Photographs from photos.js share one calm crop. */
.page-hero__media--photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-hero__media--membership img {
  object-position: 50% 68%;
}

/* About: the 4:3 frame trims the wide photo's sides. Favour the left so the
   glowing windows and the main group stay in, and the cut-off figure at the
   right edge drops out. A faint tint and soft vignette deepen the golden
   tones without hiding the scene. */
.page-hero__media--about {
  position: relative;
}

.page-hero__media--about img {
  object-position: 30% 50%;
}

.page-hero__media--about::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 75% at 45% 45%, transparent 55%, rgb(23 21 19 / 0.22)),
    linear-gradient(rgb(23 21 19 / 0.06), rgb(23 21 19 / 0.06));
}

@media (min-width: 60em) {
  .page-hero__inner:has(.page-hero__media) {
    grid-template-columns: 6fr 5fr;
  }
}

/* ---------- 9. Section heads ---------- */
.section-head {
  margin-bottom: var(--space-xl);
}

.section-head__text {
  max-width: 38rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-muted);
}

@media (min-width: 56em) {
  .section-head--row {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-xl);
    align-items: end;
  }

  .section-head--row .section-title {
    margin-bottom: 0;
  }
}

/* ---------- 10. Secondary-page components ----------
   Kept from Version 1 and moved onto the neutral palette. These pages
   will be redesigned in a later pass. */

/* Feature (image + text) */
.feature {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.feature__media img {
  width: 100%;
}

.feature__text > p:not(.eyebrow) {
  max-width: 36rem;
  color: var(--fg-muted);
}

.feature__text .button-row,
.feature__text .text-link {
  margin-top: var(--space-l);
}

@media (min-width: 60em) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .feature--reverse .feature__media {
    order: 2;
  }
}

/* Facts */
.facts {
  display: grid;
  margin: var(--space-l) 0 0;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
}

/* Membership tiers: open editorial columns divided by rules, not boxed cards.
   Hierarchy: name → price → who it's for → what's included → action. */
.tiers {
  display: grid;
  gap: var(--space-xl);
}

.tier {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-m);
  border-top: 1px solid var(--fg);
}

.tier__name {
  margin-bottom: var(--space-xs);
  font-size: var(--step-4);
  line-height: 1.1;
}

.tier .price {
  margin-bottom: var(--space-m);
}

.tier__audience {
  margin: 0;
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--line);
  color: var(--fg-muted);
}

.tier__includes-title {
  margin: var(--space-m) 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-muted);
}

/* `.tier` prefix: outranks the ul[role="list"] reset, which zeroes margins. */
.tier .tier__features {
  display: grid;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-l);
}

.tier__cta {
  margin-top: auto;
  align-self: flex-start;
}

@media (min-width: 56em) {
  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}

/* Price (src/_data/membership.js): "$120 / year", or text such as
   "Pricing upon inquiry" when there is no amount. */
.price {
  margin: 0;
  line-height: 1.15;
}

.price__amount {
  font-family: var(--font-display);
  font-size: var(--step-3);
}

.price__period {
  color: var(--fg-muted);
}

.price__text {
  font-family: var(--font-display);
  font-size: var(--step-2);
}

/* Zones, checks, steps, rooms */
.zone-list,
.room-list {
  display: grid;
  gap: var(--space-l);
}

.zone,
.room {
  padding-top: var(--space-m);
  border-top: 1px solid var(--fg);
}

.zone__level,
.room__meta {
  margin-bottom: var(--space-xs);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.zone p:last-child,
.room p:last-child,
.step p {
  color: var(--fg-muted);
}

@media (min-width: 44em) {
  .zone-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 68em) {
  .zone-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 52em) {
  .room-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.check-list {
  border-top: 1px solid var(--line);
}

.check-list li {
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--line);
}

.plain-list {
  display: grid;
  gap: var(--space-xs);
}

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-l);
}

.step {
  counter-increment: step;
  padding-top: var(--space-m);
  border-top: 1px solid var(--fg);
}

.step::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--fg-muted);
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Events list */
.event-list {
  border-top: 1px solid var(--line);
}

.event-row {
  display: grid;
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--line);
}

.event-row__when {
  color: var(--fg-muted);
}

.event-row p:last-child {
  color: var(--fg-muted);
  max-width: 42rem;
}

@media (min-width: 52em) {
  .event-row {
    grid-template-columns: 14rem 1fr;
  }
}

/* Coffee menu */
.menu-board {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-l) var(--space-m);
  background: var(--white);
  border: 1px solid var(--line);
}

.menu-board__heading {
  margin-bottom: var(--space-s);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--line);
  font-size: var(--step-2);
}

.menu {
  margin: 0;
}

.menu__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
}

.menu__item::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 1rem;
  border-bottom: 1px dotted var(--stone-light);
}

.menu__item dd {
  order: 2;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 52em) {
  .menu-board {
    grid-template-columns: repeat(3, 1fr);
    padding: var(--space-xl);
  }
}

/* Hours */
.hours {
  margin: 0;
}

.hours > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-s);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--line);
}

.hours dt {
  font-weight: 500;
}

.hours dd {
  margin: 0;
  color: var(--fg-muted);
}

.hours--large {
  font-size: var(--step-1);
}

.hours--large > div {
  padding-block: var(--space-s);
}

/* Table */
.table-wrap {
  margin-top: var(--space-xl);
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
}

.data-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table caption {
  padding: var(--space-m);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.data-table th,
.data-table td {
  padding: var(--space-s) var(--space-m);
  text-align: left;
  border-top: 1px solid var(--line);
}

.data-table thead th {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-muted);
}

.data-table tbody th {
  font-family: var(--font-display);
  font-weight: 400;
}

/* ---------- 11. Visit page: info & FAQ ---------- */
.info-grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
}

.info-block__title {
  font-size: var(--step-2);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--fg);
}

.info-block__address {
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
}

@media (min-width: 44em) {
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 72em) {
  .info-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.faq-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60em) {
  .faq-layout {
    grid-template-columns: 4fr 7fr;
  }

  .faq-layout__intro {
    position: sticky;
    top: 7rem;
    align-self: start;
  }
}

.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  position: relative;
  padding: var(--space-m) 2.5rem var(--space-m) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq__answer {
  padding-bottom: var(--space-m);
  max-width: 40rem;
  color: var(--fg-muted);
}

/* ---------- 12. Inquiry form ---------- */
.inquiry {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60em) {
  .inquiry {
    grid-template-columns: 4fr 7fr;
    align-items: start;
  }
}

/* Spam trap: moved off-screen rather than display:none, so bots still fill it in. */
.form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.demo-notice {
  margin-top: var(--space-l);
  padding: var(--space-m);
  border-left: 2px solid var(--charcoal);
  background: var(--white);
}

/* On the interest form: one plain notice directly above the form. */
.demo-notice__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.form {
  padding: var(--space-l) var(--space-m);
  background: var(--white);
  border: 1px solid var(--line);
}

@media (min-width: 40em) {
  .form {
    padding: var(--space-xl);
  }
}

.form__required-note {
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.field {
  margin: 0 0 var(--space-m);
  padding: 0;
  border: 0;
  min-width: 0;
}

.field[hidden] {
  display: none;
}

.field__label {
  display: block;
  margin-bottom: var(--space-2xs);
  padding: 0;
  font-weight: 500;
}

.field__optional {
  font-weight: 400;
  color: var(--fg-muted);
}

.field__hint {
  margin-bottom: var(--space-2xs);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.field__error {
  display: flex;
  gap: 0.4rem;
  margin-bottom: var(--space-2xs);
  font-size: 1rem;
  font-weight: 500;
  color: var(--error);
}

.field__error::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  font-size: 0.75rem;
}

.field__error[hidden] {
  display: none;
}

.field__input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #8f877d;
  border-radius: var(--radius);
  background: #fff;
  color: var(--charcoal);
  font: inherit;
  font-size: 1rem;
}

.field__input:hover {
  border-color: var(--charcoal);
}

.field__input:focus {
  outline: 2px solid var(--charcoal);
  outline-offset: 1px;
  border-color: var(--charcoal);
}

.field__input[aria-invalid="true"] {
  border: 2px solid var(--error);
}

.field__input--short {
  max-width: 14rem;
}

.field__textarea {
  min-height: 9rem;
  resize: vertical;
}

.field-row {
  display: grid;
  gap: 0 var(--space-m);
}

@media (min-width: 40em) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.choices {
  display: grid;
  gap: var(--space-xs);
}

@media (min-width: 30em) {
  .choices {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 52em) {
  .choices {
    grid-template-columns: repeat(3, 1fr);
  }

  .choices--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid #8f877d;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
}

.choice input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--charcoal);
}

.choice:hover {
  border-color: var(--charcoal);
}

.choice:has(input:checked) {
  border-color: var(--charcoal);
  box-shadow: inset 0 0 0 1px var(--charcoal);
  background: var(--cream);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.field--choices[aria-invalid="true"] .choice {
  border-color: var(--error);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.form__actions-note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* The demo note: muted, just above the submit button. */
.form__demo-note {
  margin: var(--space-l) 0 0;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.form__demo-note + .form__actions {
  margin-top: var(--space-s);
}

.error-summary {
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  border: 2px solid var(--error);
  background: #fff;
}

.error-summary__title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--error);
}

.error-summary__list {
  display: grid;
  gap: var(--space-2xs);
}

.error-summary__list a {
  color: var(--error);
  font-weight: 500;
}

.form-status {
  margin-top: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--charcoal);
  background: var(--cream);
}

.form-status h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.form__noscript {
  margin-top: var(--space-m);
  font-weight: 500;
  color: var(--error);
}

/* ---------- 13. CTA band (secondary pages) ---------- */
.cta-band {
  padding-block: var(--space-xl);
  background: var(--charcoal);
  color: var(--fg);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.cta-band__title {
  font-size: var(--step-3);
}

.cta-band p {
  max-width: 38rem;
  color: var(--fg-muted);
}

.cta-band .button {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.cta-band .button--ghost-light {
  background: transparent;
  color: var(--white);
}

@media (min-width: 56em) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
  }
}

/* ---------- 14. Footer ---------- */
.site-footer {
  padding-block: var(--space-xl) var(--space-l);
  background: var(--cream);
  color: var(--charcoal);
  font-size: 1rem;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--line);
}

.site-footer__brand p {
  margin-top: var(--space-s);
  color: var(--stone);
}

.site-footer__heading {
  margin-bottom: var(--space-s);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--stone);
}

.site-footer ul {
  display: grid;
  gap: var(--space-2xs);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer address {
  margin-bottom: var(--space-s);
}

.site-footer__legal {
  display: grid;
  gap: var(--space-s);
  padding-top: var(--space-m);
  font-size: 0.875rem;
  color: var(--stone);
}

.site-footer__legal p {
  max-width: 56rem;
}

/* The single concept disclosure: present on every page, but low emphasis
   (stone on cream still meets WCAG AA). */
.site-footer__disclosure {
  line-height: 1.6;
}

/* Copyright and photo credits on one quiet line. */
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-m);
}

.site-footer__meta p {
  margin: 0;
}

.credits summary {
  cursor: pointer;
  width: max-content;
  text-decoration: underline;
  text-decoration-color: var(--stone-light);
  text-underline-offset: 0.22em;
  list-style: none;
}

.credits summary::-webkit-details-marker {
  display: none;
}

.credits[open] {
  flex-basis: 100%;
}

.credits ul a {
  text-decoration: underline;
}

.credits ul {
  margin-top: var(--space-xs);
}

@media (min-width: 44em) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: 3fr 1fr;
  }
}

/* ---------- 15. 404 ---------- */
.not-found {
  min-height: 60vh;
  display: grid;
  align-items: center;
}

.not-found .lede {
  margin-bottom: var(--space-l);
}

/* ---------- 16. Privacy policy ---------- */
/* A readable single column, left-aligned with the page hero's text. */
.privacy-section {
  padding-block: var(--space-xl) var(--space-2xl);
}

.privacy-policy {
  max-width: 46rem;
}

.privacy-policy p {
  line-height: 1.75;
}

.privacy-policy ul {
  margin: 0 0 var(--space-s);
  padding-left: 1.25em;
  line-height: 1.75;
}

.privacy-policy li + li {
  margin-top: var(--space-2xs);
}

.privacy-policy h2 {
  margin: var(--space-l) 0 var(--space-s);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
  font-size: var(--step-3);
}

.privacy-policy__updated {
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.privacy-policy a {
  overflow-wrap: anywhere;
}

/* ---------- 17. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .cta-band,
  .home-hero__media,
  .invitation__media {
    display: none;
  }

  .home-hero,
  .invitation,
  .section--dark,
  .section--evening {
    --fg: #000;
    --fg-muted: #333;
    background: none;
    color: #000;
  }
}