/* ==========================================================================
   Fonts: self-hosted variable woff2, latin + latin-ext.
   No third-party request, no flash of Georgia on a slow connection.
   Source: Google Fonts (Faustina v23, Libre Franklin v20), both SIL OFL 1.1.
   ========================================================================== */

@font-face {
  font-family: "Faustina";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/faustina-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Faustina";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/faustina-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Traditions Golf and Country Club: 2026 rebuild
   One stylesheet. CSS custom properties. Mobile-first. No dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground and surface. Warm stone, deliberately not cream-yellow. */
  --stone:        #f5f2e9;
  --stone-deep:   #eae5d6;
  --white:        #ffffff;

  /* Ink. Deep green-black, never pure black. */
  --ink:          #1c2a22;
  --ink-soft:     #47564c;   /* 7.07:1 on white, 6.31:1 on stone */
  --ink-faint:    #7a8880;

  /* Anchor. Deep forest green carries the large fields. */
  --field:        #1d4433;
  --field-deep:   #12301f;
  --field-mid:    #2c6349;   /* 6.32:1 on white */
  --field-pale:   #dbe7de;

  /* Signal. Brushed gold, reserved for action. */
  --signal:       #c9a227;
  --signal-dim:   #8f6f0c;
  --signal-pale:  #f7eed2;

  /* Section accents. One per page, rotated by the page-theme classes. */
  --fairway:      #3c8c52;
  --wine:         #8c3a46;

  /* Twenty7's own colors, sampled from the printed summer 2026 menu. */
  --navy:         #141a63;
  --navy-deep:    #0c0e4f;
  --sky:          #a9d4f0;
  --sky-pale:     #e6f1fa;

  /* The live accent. Pages override this single token. */
  --accent:       var(--signal);
  --accent-dim:   var(--signal-dim);
  --accent-pale:  var(--signal-pale);

  /* Lines */
  --line:         #ddd7c6;
  --line-strong:  #c4bda6;
  --line-onlake:  rgba(255, 255, 255, 0.18);

  /* Type */
  --display: "Faustina", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --text:    "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step--2: 0.78rem;
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.125rem;
  --step-5:  clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --step-6:  clamp(2.75rem, 1.6rem + 5vw, 4.75rem);

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.625rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --wrap: 78rem;
  --wrap-narrow: 46rem;

  /* Depth. Offset plus soft blur; never a zero-offset halo. */
  --lift-1: 0 1px 2px rgba(24, 38, 30, 0.06), 0 2px 8px rgba(24, 38, 30, 0.05);
  --lift-2: 0 2px 4px rgba(24, 38, 30, 0.07), 0 8px 24px rgba(24, 38, 30, 0.08);
  --lift-3: 0 4px 10px rgba(24, 38, 30, 0.09), 0 18px 48px rgba(24, 38, 30, 0.11);

  --radius: 4px;
  --radius-lg: 8px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Page themes. Each page sets one class on <body>; only --accent moves. */
body.theme-dining  { --accent: var(--navy); --accent-dim: var(--navy-deep); --accent-pale: var(--sky-pale); }
body.theme-academy { --accent: var(--fairway);  --accent-dim: #2d6d3f; --accent-pale: #e0f0e5; }
body.theme-members { --accent: var(--field-mid);--accent-dim: #1d4433; --accent-pale: var(--field-pale); }

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: var(--step-6); letter-spacing: -0.022em; }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-1); font-family: var(--text); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--sp-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--field-mid); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--field); }

ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-1); }

strong { font-weight: 600; }

/* Browser surfaces themed from the palette, not left at defaults. */
::selection { background: var(--signal-pale); color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--field-mid);
  outline-offset: 3px;
  border-radius: 2px;
}
html { scrollbar-color: var(--line-strong) var(--stone); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--stone); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
  border: 3px solid var(--stone);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100%;
  z-index: 200;
  background: var(--field);
  color: var(--white);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: var(--white); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--loose { padding-block: var(--sp-8); }
.section--stone { background: var(--stone-deep); }
.section--white { background: var(--white); }

@media (min-width: 60rem) {
  .section { padding-block: var(--sp-8); }
}

/* Section heads. No eyebrow labels anywhere: the heading carries itself. */
.section-head { margin-bottom: var(--sp-6); max-width: 54ch; }
.section-head p {
  font-size: var(--step-1);
  color: var(--ink-soft);
  margin-top: var(--sp-3);
  line-height: 1.6;
}

/* The one repeated graphic mark: a short accent bar above a heading. */
.mark {
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--accent);
  margin-bottom: var(--sp-4);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--text);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}

.btn--primary {
  background: var(--signal);
  color: var(--ink);
  box-shadow: var(--lift-1);
}
.btn--primary:hover {
  background: var(--signal-dim);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--lift-2);
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn--line {
  background: transparent;
  color: var(--field);
  border-color: var(--line-strong);
}
.btn--line:hover {
  background: var(--white);
  border-color: var(--field);
  color: var(--field);
}

.btn--field { background: var(--field); color: var(--white); }
.btn--field:hover { background: var(--field-deep); color: var(--white); transform: translateY(-1px); }

.btn .icon { width: 1.05em; height: 1.05em; flex: none; }

/* A quiet text action with a moving rule under it. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--field);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--accent);
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.link-more:hover { gap: 0.9rem; color: var(--field-deep); }
.link-more .icon { width: 0.95em; height: 0.95em; }

/* --------------------------------------------------------------------------
   5. Utility bar and header
   -------------------------------------------------------------------------- */

.utility {
  background: var(--field-deep);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step--2);
  letter-spacing: 0.03em;
}
.utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  padding-block: 0.55rem;
}
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { color: var(--white); text-decoration: underline; }
.utility__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.utility .icon { width: 0.95em; height: 0.95em; opacity: 0.75; }

@media (min-width: 60rem) {
  .utility__inner { justify-content: flex-end; }
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--stone);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.header.is-stuck { box-shadow: var(--lift-2); background: rgba(245, 242, 233, 0.97); backdrop-filter: blur(8px); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* The club mark is a 578x114 horizontal lockup, so it has to be sized down hard
   on narrow phones or the header runs past the viewport. */
.brand img { width: 142px; height: 28px; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  position: relative;
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  white-space: nowrap;    /* "Golf Academy" broke onto two lines at 1024 */
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--field); }

.header__actions { display: flex; align-items: center; gap: var(--sp-2); }
.header__actions .btn { padding: 0.65rem 0.85rem; font-size: var(--step--1); white-space: nowrap; }

/* Below 64rem both header buttons live in the drawer only, which keeps the
   phone header to the club mark and the menu toggle. The tour button returns
   with the full nav; the foundation link only fits beside it from 80rem up. */
.header__actions .btn { display: none; }
@media (min-width: 64rem) { .header__actions .btn--primary { display: inline-flex; } }
@media (min-width: 80rem) { .header__actions .header__foundation { display: inline-flex; } }

@media (min-width: 26rem) {
  .header__inner { gap: var(--sp-4); }
  .header__actions { gap: var(--sp-3); }
  .header__actions .btn { padding: 0.7rem 1.15rem; }
  .brand img { width: 178px; height: 35px; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.6rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle .icon { width: 1.25em; height: 1.25em; }
.nav-toggle__label { display: none; }
@media (min-width: 30rem) {
  .nav-toggle { padding: 0.6rem 0.85rem; }
  .nav-toggle .icon { width: 1.1em; height: 1.1em; }
  .nav-toggle__label { display: inline; }
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
  padding: var(--sp-4) 0 var(--sp-5);
}
.drawer.is-open { display: block; }
.drawer__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--line); }
.drawer__link {
  display: block;
  padding: var(--sp-3) 0;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.drawer__link[aria-current="page"] { color: var(--field); }
.drawer .btn { width: 100%; justify-content: center; }
.drawer .btn + .btn { margin-top: var(--sp-3); }

@media (min-width: 64rem) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .drawer { display: none !important; }
  .brand img { width: 206px; height: 41px; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--field-deep);
  color: var(--white);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(14, 34, 24, 0.82) 0%, rgba(14, 34, 24, 0.70) 38%, rgba(14, 34, 24, 0.30) 68%, rgba(14, 34, 24, 0.10) 82%, rgba(14, 34, 24, 0.45) 100%);
}

.hero__inner {
  padding-block: var(--sp-8) var(--sp-7);
  max-width: 44rem;
}
.hero h1 {
  color: var(--white);
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 18px rgba(14, 34, 24, 0.55);
}
.hero__lede {
  font-size: var(--step-2);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  max-width: 38ch;
  margin-bottom: var(--sp-5);
  text-shadow: 0 1px 12px rgba(14, 34, 24, 0.6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-onlake);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  max-width: none;
  text-shadow: 0 1px 10px rgba(14, 34, 24, 0.7);
}
.hero__proof span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__proof .icon { width: 1em; height: 1em; color: var(--signal); }

@media (min-width: 60rem) {
  .hero::before {
    background:
      radial-gradient(95% 130% at -5% 42%, rgba(14, 34, 24, 0.95) 0%, rgba(14, 34, 24, 0.86) 28%, rgba(14, 34, 24, 0.52) 52%, rgba(14, 34, 24, 0.10) 76%, rgba(14, 34, 24, 0) 100%),
      linear-gradient(to bottom, rgba(14, 34, 24, 0.22) 0%, rgba(14, 34, 24, 0.06) 45%, rgba(14, 34, 24, 0.30) 100%);
  }
  .hero__inner { padding-block: calc(var(--sp-8) * 1.35) var(--sp-8); max-width: 50rem; }
}

/* --------------------------------------------------------------------------
   7. The week: a rigid schedule lattice, not cards
   -------------------------------------------------------------------------- */

.week { background: var(--white); border-bottom: 1px solid var(--line); }
.week__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5) var(--sp-4);
}
.week__head h2 { font-size: var(--step-3); }
.week__note { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }

.week__grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--ink);
}
.week__row {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.week__day {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);          /* 6.63:1 on white, 5.92:1 on stone */
  font-variant-numeric: tabular-nums;
}
.week__what { min-width: 0; }
.week__what h3 { font-size: var(--step-2); margin-bottom: 0.15rem; }
.week__what p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.week__when {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.week__row.is-today .week__day { color: #8a5a08; }  /* 5.15:1 on marigold-pale */
.week__row.is-today::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  top: 0; bottom: 0;
  background: var(--signal-pale);
  z-index: -1;
}
/* Injected by main.js as real text, so it reaches assistive tech too. */
.week__today {
  display: inline-block;
  margin-left: var(--sp-2);
  background: var(--signal);
  color: var(--ink);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
}

.week__grid { position: relative; z-index: 0; }

@media (max-width: 40rem) {
  .week__row { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
  .week__day { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   8. Feature blocks: asymmetric, photo-led, never a row of equal cards
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
.feature__media { position: relative; }
.feature__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.feature__body h2 { margin-bottom: var(--sp-4); }
.feature__body p { color: var(--ink-soft); font-size: var(--step-1); }
.feature__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); align-items: center; }

.feature__logo { height: 72px; width: auto; margin-bottom: var(--sp-4); }
/* Media and copy share a top edge where the block leads with a headline. */
.feature--top { align-items: start; }

@media (min-width: 60rem) {
  .feature { grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); }
  .feature__media img { aspect-ratio: 5 / 4; }
}

/* A solid lake field, used once, as the page's full stop. */
.band--solid { background: var(--field); }
.band--solid::before { display: none; }
.band--solid .feature__media img { aspect-ratio: 4 / 5; box-shadow: var(--lift-3); }

/* A portrait photo keeps a portrait shape, cropped from the bottom so a head is never cut,
   and on wide screens takes the narrower column so it does not tower over the text. */
.feature--portrait .feature__media img { aspect-ratio: 4 / 5; object-position: top; }

/* Text first and the photo second on wide screens, so it does not echo a photo-left block nearby. */
.feature--spaced { margin-top: var(--sp-8); }
@media (min-width: 60rem) {
  .feature--flip { grid-template-columns: 1fr 1.4fr; }
  .feature--flip .feature__media { order: 2; }
}
@media (min-width: 60rem) {
  .feature--portrait { grid-template-columns: 1fr 1.4fr; }
}

/* A dark photographic band is fine; a dark page is not. */
.band {
  position: relative;
  isolation: isolate;
  background: var(--field);
  color: var(--white);
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(14, 34, 24, 0.95) 0%, rgba(14, 34, 24, 0.86) 48%, rgba(14, 34, 24, 0.55) 100%);
}
.band h2, .band h3 { color: var(--white); }
.band p { color: rgba(255, 255, 255, 0.86); }
.band .mark { background: var(--signal); }

/* --------------------------------------------------------------------------
   9. Facts: editorial proof, not a stat-tile row
   -------------------------------------------------------------------------- */
.facts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts__list li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  margin: 0;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.facts__list li:first-child { border-top: 1px solid var(--line); }
.facts__list .icon { width: 1.3rem; height: 1.3rem; color: var(--field-mid); margin-top: 0.2rem; }
.facts__list strong { color: var(--ink); }

@media (min-width: 60rem) {
}

/* --------------------------------------------------------------------------
   10. Events rail: real portrait posters on a horizontal scroller
   -------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
   11. Closing call to action
   -------------------------------------------------------------------------- */

.cta {
  background: var(--signal);
  color: var(--ink);
  text-align: center;
}
.cta h2 { max-width: 20ch; margin-inline: auto; margin-bottom: var(--sp-4); }
.cta p {
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--step-1);
  color: #402d06;
  margin-bottom: var(--sp-5);
}
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.cta .btn--field { box-shadow: var(--lift-2); }
.cta .btn--line { border-color: var(--field); }   /* 5.2:1 boundary, was 1.28:1 */

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--field-deep);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--step--1);
  padding-block: var(--sp-7) var(--sp-5);
}
.footer h3 {
  color: var(--white);
  font-family: var(--text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer p { max-width: 34ch; }

.footer__grid { display: grid; gap: var(--sp-6); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--sp-2); }

.footer__brand img {
  width: 200px; height: 39px; margin-bottom: var(--sp-4);
  opacity: 0.95;
}

.footer__hours { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--sp-3); }
.footer__hours dt { font-weight: 600; color: rgba(255, 255, 255, 0.95); white-space: nowrap; }
.footer__hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-onlake);
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer__social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.footer__social .icon { width: 1.15rem; height: 1.15rem; }

.footer__base {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-onlake);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   13. Motion: one authored moment, off by default under reduced motion
   -------------------------------------------------------------------------- */

.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal[data-delay="1"] { transition-delay: 0.08s; }
  .js .reveal[data-delay="2"] { transition-delay: 0.16s; }
  .js .reveal[data-delay="3"] { transition-delay: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .utility, .drawer, .cta, .footer__social { display: none; }
  body { background: #fff; color: #000; }
  .hero::before, .band::before { display: none; }
}

/* --------------------------------------------------------------------------
   15. Course block: breaks the two-up rhythm and puts the course on the page
   -------------------------------------------------------------------------- */


.facts__list--wide { max-width: none; }

@media (min-width: 48rem) {
  .facts__list--wide {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-7);
  }
  .facts__list--wide li:nth-child(2) { border-top: 1px solid var(--line); }
}

@media (min-width: 60rem) {
}

.footer__more { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   16. Season index: the year's events on the week lattice's grammar.
   Typographic on the page; each name opens that event's flier in the lightbox
   (Avery, 2026-10-26), knowing some fliers still carry past years' dates.
   -------------------------------------------------------------------------- */

.season {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--ink);
}
.season__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: 0;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.season__name {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.season__foot { margin-top: var(--sp-5); }
/* Each name opens its flier in the lightbox (main.js); with no JS it is a plain link to the image. */
.season__link {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
}
.season__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.season__cue .icon { width: 0.9em; height: 0.9em; transition: transform 0.2s var(--ease); }
.season__link:hover .season__name { color: var(--field-mid); }
.season__link:hover .season__cue { color: var(--field-mid); }
.season__link:hover .season__cue .icon { transform: translateX(3px); }
.season__link:focus-visible { outline: 2px solid var(--field-mid); outline-offset: 4px; border-radius: 2px; }

@media (min-width: 48rem) {
  .season { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
}
@media (min-width: 72rem) {
  .season { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   17. Video: real narrated films, so click-to-play with a poster.
   preload="none" means a visitor pays nothing unless they choose to watch.
   -------------------------------------------------------------------------- */

.filmstrip {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-3);
  background: var(--field-deep);
}
.filmstrip video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--field-deep);
}
.filmstrip figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--field);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--step--1);
}
.filmstrip figcaption strong { color: var(--white); font-weight: 600; }
.filmstrip__meta { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.7); }

/* In a two-up feature the film replaces the still. */
.feature__media .filmstrip { box-shadow: var(--lift-3); }

/* --------------------------------------------------------------------------
   18. Interior page hero: compact, so interior pages never ape the home page
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--field);
  color: var(--white);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 140% at 0% 50%, rgba(14, 34, 24, 0.93) 0%, rgba(14, 34, 24, 0.80) 34%, rgba(14, 34, 24, 0.42) 62%, rgba(14, 34, 24, 0.20) 100%),
    linear-gradient(to bottom, rgba(14, 34, 24, 0.25), rgba(14, 34, 24, 0.35));
}
.page-hero__inner { padding-block: var(--sp-7); max-width: 46rem; }
.page-hero h1 {
  color: var(--white);
  font-size: var(--step-5);
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 16px rgba(14, 34, 24, 0.5);
}
.page-hero p {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.92);
  max-width: 44ch;
  text-shadow: 0 1px 10px rgba(14, 34, 24, 0.6);
}
/* Sub-brand lockups sit on photography, so they ship in white and carry a
   shadow of their own: the hero image behind them will change. */
.page-hero .sub-logo {
  height: 52px;
  width: auto;
  margin-bottom: var(--sp-4);
  filter: drop-shadow(0 2px 10px rgba(14, 34, 24, 0.75));
}
/* The Twenty7 lockup is near-square, the Academy's is wide; matching heights
   makes the first read small, so give it its own. */
.page-hero .sub-logo--tall { height: 66px; }

@media (min-width: 60rem) {
  .page-hero .sub-logo { height: 58px; }
  .page-hero .sub-logo--tall { height: 76px; }
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

@media (min-width: 60rem) {
  .page-hero__inner { padding-block: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   19. Menus: the SECTION is the box, not each dish.
   -------------------------------------------------------------------------- */

/* A grid forced every row to the tallest card, so a short section left a
   crater beside a long one. Column flow lets each section take exactly the
   height it needs and the next one starts immediately underneath. */
.menu-grid { display: grid; gap: var(--sp-5); }

/* Rate and plan cards exist to be compared, so they sit side by side. The
   Twenty7 menu plates deliberately do not: there the section is the unit. */
@media (min-width: 46rem) {
  .menu-grid--compare { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

  /* Cards built to be compared must line their figures up. Pushing the list to
     the bottom does not do it, because the lists are different lengths. Instead
     the price block moves directly under the heading, where the rows above it
     are a fixed height, so all three price blocks start at the same y and the
     prose explains underneath. On a rates page the number is the headline. */
  .menu-grid--compare .menu-group { display: flex; flex-direction: column; }
  .menu-grid--compare .menu-group > h3 {
    order: 1;
    /* box-sizing is border-box, so two lines of heading plus its own padding
       and rule: 2.3em of text + --sp-3 + the 2px border. */
    min-height: calc(2.3em + var(--sp-3) + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu-grid--compare .menu-group__note { order: 2; }
  .menu-grid--compare .rate-list       { order: 3; border-top: 0; }
  .menu-grid--compare .menu-group > p:not(.menu-group__note):not(.note) {
    order: 4;
    margin-top: var(--sp-4);
    /* No border-top. The rate list rules every row including its last, so that
       rule already terminates the price block. Adding one here painted a second
       hairline 24px below the first on all ten compare cards: the full-width menu
       plates put this prose ABOVE the list, where the two never met, and the flex
       reorder moved it underneath. */
    padding-top: var(--sp-3);
  }
  .menu-grid--compare .note { order: 5; margin-top: auto; padding-top: var(--sp-4); }
  .menu-grid--compare .rate-list li:first-child { padding-top: 0; }
}
/* Two short cards stacked in one column beside a tall one (Lessons & Rates), so a
   row holds two cards at a readable width instead of three squeezed ones. The two
   share the column's height evenly. */
.menu-stack { display: grid; gap: var(--sp-5); grid-auto-rows: 1fr; }
.menu-group {
  background: var(--white);
  break-inside: avoid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}

/* Section headings follow the printed menu: wide-tracked caps over a rule. */
.menu-group > h3 {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--accent);
  margin-bottom: var(--sp-2);
}
.menu-group__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
  max-width: none;          /* p{max-width:68ch} was centring it inside a narrower box */
  margin: calc(var(--sp-2) * -1) auto var(--sp-4);
}

/* The printed menu runs two sections reversed out of a navy field. */
.menu-group--feature {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: rgba(255, 255, 255, 0.9);
}
.menu-group--feature > h3 { color: var(--sky); border-bottom-color: var(--sky); }
.menu-group--feature .menu-group__note { color: rgba(255, 255, 255, 0.72); }
.menu-group--feature .menu-list li { border-bottom-color: rgba(255, 255, 255, 0.16); }
.menu-group--feature .menu-list b { color: var(--sky); }
.menu-group--feature .menu-list span { color: rgba(255, 255, 255, 0.82); }
.menu-group--feature .menu-list em { color: rgba(255, 255, 255, 0.66); }

/* The printed menu runs full-width sections and flows the dishes inside them
   into columns. That keeps each description at a readable measure without
   breaking a section across the page. */
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li {
  margin: 0;
  padding-block: var(--sp-3);
  break-inside: avoid;
  page-break-inside: avoid;
}
/* Every item carries a bottom rule, including the last. Under `columns` the
   list is fragmented visually but selectors still reason in DOM order, so
   neither :last-child nor :first-child can find a column edge. Ruling every
   item makes all three columns terminate identically, which is also how a
   printed menu with ruled entries actually behaves. */
.menu-list li { border-top: 0; border-bottom: 1px solid var(--line); }

@media (min-width: 52rem) {
  .menu-list { columns: 2; column-gap: var(--sp-7); }
}
@media (min-width: 82rem) {
  .menu-list { columns: 3; column-gap: var(--sp-7); }
}
.menu-list b {
  display: block;
  font-family: var(--text);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
}
.menu-list span { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.2rem; }
/* The live menu's NEW! flag on a dish, as a small badge after its name. */
.menu-new {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
  background: var(--accent);
  color: var(--white);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 0.12em;
  line-height: 1.2;
}
.menu-group--feature .menu-new { background: var(--sky); color: var(--navy-deep); }
/* Options and caveats, the small print under a dish on the real menu. */
.menu-list em {
  display: block;
  font-size: var(--step--2);
  font-style: normal;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

/* The seasonal stamp and the statutory footnote the printed menu carries. */
.menu-season {
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--sp-3);
}
.menu-footnote {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--accent);
  font-size: var(--step--2);
  color: var(--ink-soft);
  text-align: center;
  max-width: none;
}

/* --------------------------------------------------------------------------
   20. Hours, rates, and other tabular truth
   -------------------------------------------------------------------------- */

.hours-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 46rem) { .hours-grid { grid-template-columns: repeat(3, 1fr); } }

.hours-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--lift-1);
}
.hours-card h3 {
  font-family: var(--text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--field-mid);
  margin-bottom: var(--sp-3);
}
.hours-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem var(--sp-3); margin: 0; }
.hours-card dt { color: var(--ink-soft); }
.hours-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.hours-card dd.is-closed { color: var(--ink-soft); font-style: italic; }

.rate-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.rate-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  margin: 0;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.rate-list b {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  hyphens: none;
  text-wrap: balance;
}
.rate-list span { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.2rem; max-width: 60ch; }
.rate-list .price {
  font-weight: 700;
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--field);
}
.rate-list .price small { display: block; font-size: var(--step--2); font-weight: 600; color: var(--ink-faint); text-align: right; }

/* --------------------------------------------------------------------------
   21. Navigational card grids (overview pages only)
   -------------------------------------------------------------------------- */

.tiles { display: grid; gap: var(--sp-4); }
@media (min-width: 46rem) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .tiles--4 { grid-template-columns: repeat(4, 1fr); } }

/* Three menus want one row, not a row of two plus an orphan. Jumping straight
   from one column to three skips the orphan stage entirely. */
.tiles--3 { grid-template-columns: 1fr; }
@media (min-width: 56rem) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lift-1);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--lift-2); color: inherit; }
.tile::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: var(--sp-2);
}
.tile h3 { font-size: var(--step-2); }
.tile p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.tile__go { margin-top: auto; padding-top: var(--sp-2); font-size: var(--step--1); font-weight: 600; color: var(--field-mid); }

/* --------------------------------------------------------------------------
   22. Third-party embeds
   -------------------------------------------------------------------------- */

.embed {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-1);
}
.embed iframe { display: block; width: 100%; border: 0; }
.embed__fallback {
  max-width: none;          /* p{max-width} left the strip half-width with white beside it */
  padding: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--stone);
}

/* --------------------------------------------------------------------------
   23. Prose blocks for longer reading passages
   -------------------------------------------------------------------------- */

.prose { display: grid; gap: var(--sp-5); }
@media (min-width: 58rem) { .prose--2 { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); } }
.prose h3 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.prose p { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   24. Section subnav: sibling pages, without a 11-file dropdown to maintain
   -------------------------------------------------------------------------- */

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.subnav a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.subnav a:hover { background: var(--white); border-color: var(--field); color: var(--field); }
.subnav a[aria-current="page"] {
  background: var(--field);
  border-color: var(--field);
  color: var(--white);
}

.note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-left: 1px solid var(--accent);
  padding-left: var(--sp-3);
  margin-top: var(--sp-5);
}

.section-head--spaced { margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   25. Content inside a dark band.
   These MUST stay last in the file. Component rules like `.prose p` and
   `.band p` carry equal specificity, so source order decides the winner, and a
   component defined later would otherwise paint dark ink onto a dark field.
   -------------------------------------------------------------------------- */

.band .prose p,
.band .facts__list li,
.band .note,
.band .menu-group > p,
.band dd,
.band li { color: rgba(255, 255, 255, 0.86); }

.band .prose h3,
.band .menu-group > h3,
.band .facts__list strong,
.band .note strong { color: var(--white); }

.band .facts__list li,
.band .note { border-color: var(--line-onlake); }
.band .facts__list li:first-child { border-top-color: var(--line-onlake); }
.band .facts__list .icon { color: var(--signal); }
.band .note { border-left-color: var(--signal); }
.band a { color: var(--white); }


/* --------------------------------------------------------------------------
   26. Event board: fliers, details and sign-ups inline, no second page
   -------------------------------------------------------------------------- */

.board { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-4); }
.board:empty { display: none; }
.board:empty + .board__empty { display: block; }
.board__empty { display: none; font-size: var(--step-1); color: var(--ink-soft); }

/* Cards rather than ruled rows: at two across, horizontal rules between items
   read as a broken table. Rows stretch so neighbours line up. */
.board__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
  align-content: start;
}

.board__flier {
  display: block;
  align-self: start;      /* or the link stretches and its ground shows below the flier */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--lift-2);
  background: var(--stone-deep);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.board__flier:hover { transform: translateY(-2px); box-shadow: var(--lift-3); }
.board__flier img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.board__body { min-width: 0; }
.board__body h3 { font-size: var(--step-2); margin-bottom: var(--sp-1); }
.board__meta {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--field-mid);
  margin-bottom: var(--sp-2);
}
.board__body > p { color: var(--ink-soft); font-size: var(--step--1); }
.board__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); }
.board__actions .btn { padding: 0.6rem 1.05rem; font-size: var(--step--1); }
/* An event with several sign-up slots: a label, then one button per slot. */
.board__body > .board__seats { margin-top: var(--sp-3); font-size: var(--step--1); font-weight: 700; color: var(--ink); }
.board__seats + .board__actions { margin-top: var(--sp-2); gap: var(--sp-2); }
.board__seats + .board__actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; line-height: 1.25; padding-inline: 0.75rem; }   /* phones: one full-width row per slot */
@media (min-width: 40rem) { .board__seats + .board__actions .btn { flex: 0 0 auto; } }
.board__tag {
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--signal-pale);
  border: 1px solid var(--signal);
  border-radius: 2px;
  padding: 0.1rem 0.45rem;
  margin-bottom: var(--sp-2);
}

@media (min-width: 40rem) {
  .board__item { grid-template-columns: 8.5rem 1fr; gap: var(--sp-4); padding: var(--sp-5); }
}

/* Two across once there is room for a flier plus a readable measure beside it.
   Five or six events stacked single-file made the page far too long. */
@media (min-width: 64rem) {
  .board { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

/* An event with no flier yet: the body takes the whole card. Sits after the
   breakpoints above so it beats their two-column track at equal specificity. */
.board__item--text { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   27. Dated schedule, for a series that runs to a published calendar
   -------------------------------------------------------------------------- */

.dates { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.dates li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  margin: 0;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.dates time {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.dates b { font-family: var(--display); font-size: var(--step-1); font-weight: 600; }
.dates li[data-next] time { color: var(--accent-dim); }
.dates li[data-next] b::after {
  content: "Next up";
  display: inline-block;
  margin-left: var(--sp-2);
  vertical-align: middle;
  background: var(--accent);
  color: var(--white);
  font-family: var(--text);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
}
@media (max-width: 34rem) {
  .dates li { grid-template-columns: 1fr; row-gap: 0.15rem; }
}

/* --------------------------------------------------------------------------
   28. Flier lightbox. Built on <dialog>, so Escape, focus trapping and the
   top layer come from the browser rather than from script.
   -------------------------------------------------------------------------- */

.lightbox {
  width: min(92vw, 60rem);
  max-width: none;
  max-height: 92vh;
  padding-block: var(--sp-3);
  padding-inline: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--lift-3);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(14, 34, 24, 0.82); }

.lightbox__frame {
  display: block;
  max-height: calc(88vh - (var(--sp-3) * 2));
  max-width: 100%;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--stone-deep);
}

.lightbox__close {
  position: absolute;
  top: -0.9rem;
  right: -0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--lift-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.lightbox__close:hover { background: var(--field); color: var(--white); border-color: var(--field); transform: scale(1.05); }
.lightbox__close .icon { width: 1.3rem; height: 1.3rem; }


@media (max-width: 34rem) {
  .lightbox { width: 94vw; }
  .lightbox__close { top: -0.75rem; right: -0.75rem; width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in 0.22s var(--ease); }
  @keyframes lightbox-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
  }
}

/* A flier card with no sign-up attached: the events showcase, not the board. */
.board__item--plain .board__actions { margin-top: var(--sp-3); }


/* --------------------------------------------------------------------------
   29. Centered paragraphs.
   p carries max-width: var(--measure) for readability, which silently makes
   text-align: center center inside a narrower box than the container. Any
   centered paragraph must opt out of the measure or auto-center its own box.
   -------------------------------------------------------------------------- */

.section-head p[style*="center"],
.menu-group__note,
.hero__proof { max-width: none; }

/* --------------------------------------------------------------------------
   30. Staff. Portraits where they exist, a monogram where they do not, so a
   missing photo never ships as a grey placeholder box.
   -------------------------------------------------------------------------- */

.team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.team li { margin: 0; }

.team__portrait {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-lg);
  background: var(--stone-deep);
  box-shadow: var(--lift-2);
  margin-bottom: var(--sp-3);
}
.team__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: var(--field);
  color: var(--white);
  font-family: var(--display);
  font-size: var(--step-5);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: var(--lift-2);
  margin-bottom: var(--sp-3);
}
.team__name { font-family: var(--display); font-size: var(--step-2); font-weight: 600; line-height: 1.2; }
.team__role {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--field-mid);
  margin-top: 0.25rem;
}

@media (min-width: 34rem) { .team { grid-template-columns: repeat(2, 1fr); } }
/* Four across on wide screens. Flex rather than grid so a short last row
   (ten people: 4, 4, 2) sits centered instead of hugging the left edge. */
@media (min-width: 58rem) {
  .team:not(.team--row) { display: flex; flex-wrap: wrap; justify-content: center; }
  .team:not(.team--row) li { flex: 0 0 calc((100% - 3 * var(--sp-5)) / 4); }
}
.team--row { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 58rem) { .team--row { grid-template-columns: repeat(4, 1fr); } }

/* Visiting details: address, phone, directions. */
.visit { display: grid; gap: var(--sp-5); }
@media (min-width: 58rem) { .visit { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.visit address { font-style: normal; font-size: var(--step-1); line-height: 1.7; }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* A row of plain claims, for the club's own proof points. */
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.claims li {
  margin: 0;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
}
.claims li:first-child { border-top: 1px solid var(--line); }
.claims b { display: block; font-family: var(--display); font-size: var(--step-3); font-weight: 600; margin-bottom: 0.2rem; }
@media (min-width: 52rem) {
  .claims { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  .claims li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* A four-across team row, used as a band on the home page. */
.team--row { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 58rem) { .team--row { grid-template-columns: repeat(4, 1fr); } }
.band .team__role { color: var(--sky); }
.band .team__name { color: var(--white); }
.band .team__monogram { background: var(--field-mid); }

/* --------------------------------------------------------------------------
   31. Video. Browser control chrome belongs to no design system, so the films
   keep controls but only once playing; before that the poster is the surface.
   -------------------------------------------------------------------------- */

.filmstrip { position: relative; }
.filmstrip video { cursor: pointer; }

.filmstrip__play {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% - 3.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(to bottom, rgba(14, 34, 24, 0.12), rgba(14, 34, 24, 0.42));
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.filmstrip__play:hover { background: rgba(14, 34, 24, 0.28); }
.filmstrip__play span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 100px;
  background: var(--signal);
  color: var(--ink);
  box-shadow: var(--lift-3);
  transition: transform 0.25s var(--ease);
}
.filmstrip__play:hover span { transform: scale(1.06); }
.filmstrip__play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; }
.filmstrip.is-playing .filmstrip__play { display: none; }


/* A three-item prose list wants three columns, not two and a gap. */
@media (min-width: 58rem) { .prose--3 { grid-template-columns: repeat(3, 1fr); } }


/* --------------------------------------------------------------------------
   32. Club calendar (Members). js/calendar.js draws it from the club's Google
   Calendar: the weekly regulars on the week lattice's grammar, then the dated
   events as a list under month heads. Side by side once there is room.
   -------------------------------------------------------------------------- */

.cal { display: grid; gap: var(--sp-6); }
.cal__status {
  max-width: none;
  padding: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cal__part { min-width: 0; }
.cal__label {
  font-family: var(--text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.cal .week__what h4 { font-family: var(--display); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.15rem; }
.cal .week__row { grid-template-columns: 7rem 1fr auto; }
.cal .week__row.is-cont .week__day { visibility: hidden; }

.cal__month {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ink);
}
.cal__month:not(:first-of-type) { margin-top: var(--sp-5); }
.cal__list { list-style: none; margin: 0; padding: 0; }
.cal__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  margin: 0;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.cal__date {
  display: grid;
  justify-items: center;
  padding-block: 0.35rem 0.45rem;
  border-radius: var(--radius);
  background: var(--field);
  color: var(--white);
  line-height: 1;
}
.cal__dow { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.85; }
.cal__num { font-family: var(--display); font-size: var(--step-3); font-weight: 600; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.cal__item.is-today .cal__date { background: var(--signal); color: var(--ink); }
.cal__body { min-width: 0; }
.cal__title { font-family: var(--display); font-size: var(--step-2); font-weight: 600; line-height: 1.15; margin: 0 0 0.2rem; color: var(--ink); }
.cal__meta { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); margin-bottom: 0.3rem; }
.cal__about { font-size: var(--step--1); color: var(--ink-soft); }
.cal__none { color: var(--ink-soft); }

@media (max-width: 40rem) {
  .cal .week__row { grid-template-columns: 1fr auto; }
  .cal .week__row.is-cont .week__day { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 64rem) {
  .cal.is-loaded { grid-template-columns: 1fr 1.15fr; gap: var(--sp-7); align-items: start; }
}