/* ==========================================================================
   MITC design system (proposal 3.3)
   - Body text 19px on phones, 20px from 48em; line height 1.5; nothing under 16px (1rem).
   - Atkinson Hyperlegible for text, Source Serif 4 (600) for headings; both self-hosted, SIL OFL.
   - Ink #1C2421 on paper #FBF9F4 (15.1:1). Buttons: white on club green #0B5A45 (8.2:1).
     Secondary text #4A5550 (7.4:1). Yellow #F3EE5B only ever sits BEHIND dark text.
   - Buttons at least 48px tall, links underlined, visible focus, no motion, works from 320px wide.
   - All url() paths are relative to this file. No inline styles in the HTML (the CSP blocks them).
   Page-specific CSS goes in assets/css/pages/<slug>.css, linked with front matter "pageCss: <slug>".
   Sections: 1 fonts · 2 tokens · 3 base · 4 layout · 5 utilities · 6 site chrome · 7 components · 8 print
   ========================================================================== */

/* ---------- 1. Fonts ---------- */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* One heading weight; declared for 600-700 so bold inside a heading doesn't get a synthetic (smeared) bold. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */

:root {
  --ink: #1c2421;
  --paper: #fbf9f4;
  --white: #ffffff;
  --green: #0b5a45; /* club green: buttons, links */
  --green-dark: #084233; /* hover */
  --green-tint: #e5efe9; /* callouts, notice bar, date blocks */
  --sand: #f2eee3; /* tinted sections, "coming later", placeholders */
  --muted: #4a5550; /* secondary text */
  --yellow: #f3ee5b; /* logo yellow: only behind dark text */
  --yellow-pale: #fbf8d2; /* demo callouts */
  --line: #d8d2c4; /* decorative borders */
  --line-strong: #5e6763; /* form borders and dashed outlines (5:1 or more) */
  --error: #a0201c;

  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;

  --gutter: 1rem; /* 16px side gutter on phones */
  --max: 72rem; /* content width */
  --measure: 42rem; /* comfortable line length for text */
  --radius: 0.5rem;
  --radius-btn: 0.375rem;
  --tap: 3rem; /* 48px minimum control height */
}

@media (min-width: 48em) {
  :root {
    --gutter: 1.5rem;
  }
}

/* ---------- 3. Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto; /* no motion */
  scroll-padding-top: 6rem; /* keeps focused and linked items clear of the sticky header */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1875rem; /* 19px */
  line-height: 1.5;
  overflow-wrap: break-word;
}

@media (min-width: 48em) {
  body {
    font-size: 1.25rem; /* 20px */
  }
}

main {
  display: block;
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: anywhere; /* only a word too long for the screen breaks, e.g. "Monadnock" at 200% text on a phone */
}

h1 {
  font-size: 2.125rem;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 1.625rem;
}
h3 {
  font-size: 1.3125rem;
}
h4 {
  font-family: var(--font-body);
  font-size: 1.1em;
  font-weight: 700;
}

@media (min-width: 48em) {
  h1 {
    font-size: 2.75rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.4375rem;
  }
}

@media (min-width: 75em) {
  h1 {
    font-size: 3.25rem;
  }
  h2 {
    font-size: 2.25rem;
  }
}

p,
ul,
ol,
dl,
figure,
blockquote,
address,
table {
  margin: 0 0 1em;
}

address {
  font-style: normal;
}

ul,
ol {
  padding-left: 1.25em;
}

li + li {
  margin-top: 0.25em;
}

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

a:hover {
  color: var(--green-dark);
  text-decoration-thickness: 2px;
}

/* The club's email address is one long word: let it break anywhere rather than push the page wider than the screen. */
a[href^="mailto:"]:not(.btn) {
  overflow-wrap: anywhere;
}

strong,
b {
  font-weight: 700;
}

small {
  font-size: 1rem; /* 16px: the smallest text on the site */
}

hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

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

::selection {
  background: var(--yellow);
  color: var(--ink);
}

/* ---------- 4. Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

.prose {
  max-width: var(--measure);
}

.section {
  padding-block: 3rem;
}

.section--tint {
  background: var(--sand);
}

.section--green {
  background: var(--green-tint);
}

@media (min-width: 48em) {
  .section {
    padding-block: 4.5rem;
  }
}

.section > .container > :last-child,
.section > :last-child {
  margin-bottom: 0;
}

/* Inner-page heading block: <div class="page-intro container"><h1>…</h1><p class="lead">…</p></div> */
.page-intro {
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.page-intro > :last-child {
  margin-bottom: 0;
}

.lead {
  max-width: var(--measure);
  font-size: 1.15em;
}

/* Vertical rhythm for a group: <div class="stack">…</div> */
.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-top: var(--stack-space, 1rem);
}

/* Items in a row that wrap: buttons, badges, links */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* Single-column grids get a zero minimum (minmax(0, 1fr)), so a long word such as the club's email address wraps
   instead of widening the column, and the page, past the screen (WCAG 1.4.10 reflow, enlarged text). */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

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

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

/* Two columns from 60em (text beside a photo); stacked below */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (min-width: 60em) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
  .split--center {
    align-items: center;
  }
}

/* ---------- 5. Utilities ---------- */

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

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

.small {
  font-size: 1rem;
}

.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-l {
  margin-top: 2.5rem !important;
}

.list-plain {
  list-style: none;
  padding-left: 0;
}

.list-plain > li + li {
  margin-top: 0.5rem;
}

/* Tick list: <ul class="list-check" role="list"> */
.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check > li {
  position: relative;
  padding-left: 1.9em;
}

.list-check > li + li {
  margin-top: 0.5rem;
}

.list-check > li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.4em;
  width: 0.95em;
  height: 0.5em;
  border-left: 3px solid var(--green);
  border-bottom: 3px solid var(--green);
  transform: rotate(-45deg);
}

/* Label/value pairs: <dl class="facts"><dt>Address</dt><dd>…</dd></dl> */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
}

.facts dt {
  font-weight: 700;
}

.facts dd {
  margin: 0 0 0.75rem;
}

@media (min-width: 40em) {
  .facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .facts dd {
    margin-bottom: 0.5rem;
  }
}

/* ---------- 6. Site chrome ---------- */

/* Skip link */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-btn);
  font-weight: 700;
  transform: translateY(-200%);
}

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

/* Demo ribbon (every page while the DEMO switch is on) */
.demo-ribbon {
  background: var(--yellow);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-size: 1rem;
}

.demo-ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding-block: 0.25rem;
}

.demo-ribbon p {
  margin: 0;
}

.demo-ribbon__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75rem;
}

/* The two links are on every page: give each a 44px-tall target, well apart. */
.demo-ribbon a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
}

.demo-ribbon a:hover {
  color: var(--ink);
}

/* Notice bar (optional; disappears after its end date) */
.notice-bar {
  background: var(--green-tint);
  border-bottom: 2px solid var(--green);
}

.notice-bar p {
  margin: 0;
  padding-block: 0.75rem;
}

.notice-bar[hidden] {
  display: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* The row wraps when enlarged text makes logo, Book a court and Menu too wide for one line: the buttons then move to
   a second row, on the right, instead of pushing the page wider than the screen. site.js stops the header sticking
   when it gets that tall. */
.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 4.25rem;
  padding-block: 0.5rem;
}

.site-header--tall {
  position: static;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--tap);
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand__mark {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

.brand__short {
  display: none;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 600;
}

.brand__name {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.15;
}

.brand__line2 {
  display: block;
}

.brand:hover .brand__name,
.brand:hover .brand__short {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Phones: the logo mark (+ "MITC" from 384px, where logo, "MITC", Book a court and Menu fit with both gutters),
   Book a court and Menu */
@media (max-width: 47.99em) {
  .brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 24em) and (max-width: 47.99em) {
  .brand__short {
    display: inline;
  }
}

/* Header buttons: ".site-header" in front so these outrank .btn, which comes later in this file.
   Book a court carries a second line, "Members only"; slimmer padding keeps the header low. min-width: 0 lets the
   button shrink and its words wrap when the text is very large. */
.site-header .site-header__book {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.3125rem 0.875rem;
  font-size: 1.0625rem;
}

@media (min-width: 48em) {
  .site-header__inner {
    gap: 1rem;
  }
  .brand__mark {
    width: 3.25rem;
    height: 3.25rem;
  }
  .site-header .site-header__book {
    padding-inline: 1.25rem;
    font-size: 1em;
  }
}

.site-header__book .btn__note {
  margin-top: 0;
}

/* Wide navigation (75em and up) */
.nav-wide {
  display: none;
}

.nav-wide__list {
  display: flex;
  align-items: center;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-wide__list > li + li {
  margin-top: 0;
}

.nav-wide__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 0.125rem;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-wide__link:hover {
  color: var(--green-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav-wide__link[aria-current="page"] {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

/* Menu button and panel (below 75em). A <details> element, so it works without JavaScript. */
.nav-menu {
  flex: none;
}

.site-header .nav-menu__button {
  min-width: 5rem;
  padding-inline: 0.875rem;
  font-size: 1.0625rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.nav-menu__button::-webkit-details-marker {
  display: none;
}

.nav-menu__button::marker {
  content: "";
}

.nav-menu__close-label,
.nav-menu[open] .nav-menu__open-label {
  display: none;
}

.nav-menu[open] .nav-menu__close-label {
  display: inline;
}

.nav-menu[open] .nav-menu__button {
  background: var(--green-tint);
}

.nav-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 3px solid var(--green);
  box-shadow: 0 12px 24px rgba(28, 36, 33, 0.18);
}

.nav-menu__list {
  margin: 0;
  padding: 0.25rem var(--gutter) 0.75rem;
  list-style: none;
}

.nav-menu__list > li + li {
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.nav-menu__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-menu__link:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

.nav-menu__link[aria-current="page"] {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* The narrowest phones (under 360px): tighten the header so logo, Book a court and Menu fit on one row */
@media (max-width: 22.49em) {
  .site-header__inner {
    gap: 0.375rem;
  }
  .brand__mark {
    width: 2.5rem;
    height: 2.5rem;
  }
  .site-header .site-header__book,
  .site-header .nav-menu__button {
    min-width: 0;
    padding-inline: 0.625rem;
  }
}

@media (min-width: 75em) {
  html {
    scroll-padding-top: 1rem;
  }
  .site-header {
    position: static;
  }
  .site-header__inner {
    gap: 1.5rem;
    min-height: 5.5rem;
  }
  .nav-wide {
    display: block;
  }
  .nav-menu {
    display: none;
  }
  .brand__mark {
    width: 3.5rem;
    height: 3.5rem;
  }
  .brand__name {
    font-size: 1.1875rem;
  }
}

/* Footer */
.site-footer {
  padding-block: 3rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
}

.site-footer a {
  color: var(--paper);
}

.site-footer a:hover {
  color: var(--white);
  text-decoration-thickness: 2px;
}

.site-footer :focus-visible {
  outline-color: var(--paper);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
}

.site-footer__heading {
  margin-bottom: 0.75rem;
  color: var(--paper);
  font-size: 1.25rem;
}

.site-footer__address {
  margin-bottom: 0.75rem;
}

.site-footer__base {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(251, 249, 244, 0.35);
  font-size: 1rem;
}

.site-footer__base p {
  margin-bottom: 0.5rem;
}

.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list > li + li {
  margin-top: 0.5rem;
}

/* Bottom bar: only when opened from the home-screen icon */
.app-bar {
  display: none;
}

/* --app-bar-space is the bar's real height, measured by site.js (it grows when "Members only" wraps on a narrow
   phone or with large text); the fallback covers a two-line bar. scroll-padding-bottom keeps a focused or linked
   element clear of the bar when the browser scrolls it into view (WCAG 2.4.11, focus not obscured). */
@media (display-mode: standalone) {
  html {
    scroll-padding-bottom: calc(var(--app-bar-space, calc(5.5rem + env(safe-area-inset-bottom, 0px))) + 0.75rem);
  }
  body {
    padding-bottom: var(--app-bar-space, calc(5.5rem + env(safe-area-inset-bottom, 0px)));
  }
  .app-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); /* Book a court + "Members only" get the room */
    gap: 0.5rem;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 2px solid var(--ink);
  }
  .app-bar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0.25rem 0.375rem;
    background: var(--white);
    border: 2px solid var(--green);
    border-radius: var(--radius-btn);
    color: var(--green);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }
  .app-bar__link--book {
    background: var(--green);
    color: var(--white);
  }
  .app-bar__note {
    display: block;
    font-weight: 400;
  }
  .app-bar__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

/* ---------- 7. Components ---------- */

/* Buttons: <a class="btn btn--primary" href="book">Book a court</a>
   Optional second line: <span class="btn__note">Members only</span> */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere; /* only a word wider than the screen breaks (very large text) */
}

.btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.btn--secondary {
  background: var(--white);
  border-color: var(--green);
  color: var(--green);
}

.btn--secondary:hover {
  background: var(--green-tint);
  color: var(--green-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.btn--large {
  min-height: 3.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 1.1em;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn__note {
  display: block;
  margin-top: 0.125rem;
  font-size: 1rem;
  font-weight: 400;
}

/* A button that does nothing in the demo: <button type="button" class="btn btn--demo" aria-disabled="true"> */
.btn--demo,
.btn[aria-disabled="true"] {
  background: var(--sand);
  border: 2px dashed var(--line-strong);
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0;
}

/* Badges: <span class="badge badge--sample">Sample</span> */
.badge {
  display: inline-block;
  padding: 0.0625rem 0.625rem;
  background: var(--sand);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}

.badge--sample,
.badge--highlight {
  background: var(--yellow);
  border-color: var(--ink);
}

.badge--members {
  background: var(--green-tint);
  border-color: var(--green);
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.card-grid > li {
  display: flex;
  margin: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card > * {
  margin: 0;
}

.card__title {
  font-size: 1.375rem;
}

.card__media {
  margin: -1.5rem -1.5rem 0.25rem;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card__media img {
  width: 100%;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Price cards (Single, Family, Stockholder) */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
  margin: 0 0 1.5rem;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--white);
  border: 2px solid var(--line);
  border-top: 6px solid var(--green);
  border-radius: var(--radius);
}

.price-card > * {
  margin: 0;
}

.price-card__name {
  font-size: 1.625rem;
}

.price-card__covers {
  color: var(--muted);
}

.price-card__price {
  margin-top: 0.25rem;
}

.price-card__amount {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.price-card__period {
  display: block;
  color: var(--muted);
}

.price-card__total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.price-card__label {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 1rem;
}

/* "To be confirmed with the board." on its own line under the badge, not wrapped raggedly beside it */
.price-card__confirm {
  display: block;
  margin-top: 0.375rem;
}

/* Cards side by side share their rows (subgrid), so names, prices, totals and labels line up even when one card's
   "covers" line wraps. Each card has exactly --price-card-rows children (the priceCard macro in ui.njk). */
@supports (grid-template-rows: subgrid) {
  .price-card {
    --price-card-rows: 7;
    display: grid;
    grid-row: span var(--price-card-rows);
    grid-template-rows: subgrid;
    row-gap: 0.5rem;
  }
  .price-card__label {
    align-self: end;
    margin-top: 0;
  }
}

/* Tables: wrap wide tables in <div class="table-scroll" role="region" aria-label="…" tabindex="0"> */
.table-scroll {
  margin: 0 0 1.5rem;
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.table-scroll > .table {
  margin: 0;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

.table caption {
  padding: 1rem;
  caption-side: top;
  font-weight: 700;
  text-align: left;
}

.table th,
.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--sand);
  border-bottom: 2px solid var(--ink);
}

.table tbody tr:last-child > * {
  border-bottom: 0;
}

.table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Phones: <table class="table table--stack"> turns rows into blocks; give each <td> a data-label */
@media (max-width: 39.99em) {
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .table--stack tr {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .table--stack tbody tr:last-child {
    border-bottom: 0;
  }
  .table--stack th,
  .table--stack td {
    display: block;
    padding: 0.125rem 0;
    border: 0;
  }
  .table--stack td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
  }
  .table--stack .num {
    text-align: left;
  }
}

/* Event list: see the eventItem macro in _includes/macros/ui.njk */
.event-list {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.event-list > li + li {
  margin-top: 0;
}

.event {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  padding: 0.5rem 0.25rem;
  background: var(--green-tint);
  border-radius: var(--radius);
  line-height: 1.15;
  text-align: center;
}

.event__weekday,
.event__month {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event__day {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
}

.event__body > * {
  margin: 0 0 0.375rem;
}

.event__body > :last-child {
  margin-bottom: 0;
}

.event__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.event__title {
  font-size: 1.375rem;
}

.event__when {
  font-weight: 700;
}

.event__repeat,
.event__meta {
  color: var(--muted);
}

.event__sessions {
  margin-top: 0.5rem;
}

.event__sessions summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.event__action {
  grid-column: 1 / -1;
}

@media (min-width: 48em) {
  .event {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    align-items: start;
    padding: 1.5rem;
  }
  .event__action {
    grid-column: auto;
    align-self: center;
  }
}

/* When the list is narrow for its text size (the smallest phones, or large text on any screen), the date block moves
   above the text, as one line, so the text keeps the full width. A container query, so it follows the text size:
   em here is the list's own font size. */
.event-list {
  container-type: inline-size;
}

@container (max-width: 30em) {
  .event {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
  .event__action {
    grid-column: 1 / -1;
    align-self: auto;
  }
}

@container (max-width: 16em) {
  .event {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  .event__date {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-self: start;
    gap: 0 0.5rem;
    padding: 0.25rem 0.75rem;
  }
  .event__day {
    font-size: 1.5rem;
  }
  .event__action {
    grid-column: 1 / -1;
  }
}

.event-list__empty {
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* Callouts: <div class="callout"><p class="callout__title">…</p><p>…</p></div>
   Variants: callout--note (neutral), callout--demo (demo-only explanations), callout--important */
.callout {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--green-tint);
  border-left: 6px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 1.1em;
  font-weight: 700;
}

.callout--note {
  background: var(--sand);
  border-left-color: var(--line-strong);
}

.callout--demo {
  background: var(--yellow-pale);
  border-left-color: var(--ink);
}

.callout--important {
  background: var(--white);
  border: 2px solid var(--green);
  border-left-width: 6px;
}

/* Forms: <div class="field"><label class="field__label" for="x">Name (required)</label>
          <span class="field__hint" id="x-hint">…</span><input class="input" id="x" …></div> */
.form {
  max-width: 38rem;
}

.field {
  margin: 0 0 1.5rem;
}

.field__label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 700;
}

.field__hint {
  display: block;
  margin: -0.125rem 0 0.5rem;
  color: var(--muted);
  font-size: 1rem;
}

.field__error {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--error);
  font-weight: 700;
}

.input,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0.625rem 0.75rem;
  background: var(--white);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
}

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

.input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink);
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.field--error .input,
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--error);
}

.choices {
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.choices legend {
  margin-bottom: 0.5rem;
  padding: 0;
  font-weight: 700;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.375rem 0;
  cursor: pointer;
}

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

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.form-status {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--green-tint);
  border-left: 6px solid var(--green);
}

.form-status--error {
  background: var(--white);
  border-left-color: var(--error);
}

/* Link tiles (Members' guide): <a class="tile" href="book"><span class="tile__title">…</span>…</a>
   "Coming later": <div class="tile tile--later"><span class="tile__status">Coming later</span>…</div> */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.tile-grid > li {
  display: flex;
  margin: 0;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  min-height: 6rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}

.tile__title {
  color: var(--green);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.25;
}

.tile__desc {
  color: var(--muted);
}

a.tile:hover {
  background: var(--green-tint);
  color: var(--ink);
}

a.tile:hover .tile__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.tile--primary {
  background: var(--green);
}

.tile--primary .tile__title,
.tile--primary .tile__desc {
  color: var(--white);
}

a.tile--primary:hover {
  background: var(--green-dark);
}

a.tile--primary:hover .tile__title,
a.tile--primary:hover .tile__desc {
  color: var(--white);
}

.tile--later {
  background: var(--sand);
  border: 2px dashed var(--line-strong);
}

.tile--later .tile__title {
  color: var(--muted);
}

.tile__status {
  align-self: flex-start;
  padding: 0.0625rem 0.625rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

/* Photos: output of the {% photo %} shortcode */
.figure {
  margin: 0 0 1.5rem;
}

.figure img,
.photo img,
.photo-link img {
  width: 100%;
  border-radius: var(--radius);
}

.figure figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

.photo-link {
  display: block;
  border-radius: var(--radius);
}

.photo-link:hover img {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* Full-size photo viewer (site.js): only in the home-screen app, where the bare image file would have no way back. */
.photo-viewer {
  width: min(100vw - 1rem, 90rem);
  max-width: none;
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - 1rem);
  padding: 0.75rem;
  background: var(--ink);
  border: 0;
  border-radius: var(--radius);
  color: var(--paper);
}

.photo-viewer::backdrop {
  background: rgba(28, 36, 33, 0.85);
}

.photo-viewer__bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.photo-viewer img {
  width: 100%;
  max-height: calc(100vh - 10rem);
  max-height: calc(100dvh - 10rem);
  object-fit: contain;
}

.photo-viewer__caption {
  margin: 0.75rem 0 0;
}

.photo-viewer__caption:empty {
  display: none;
}

.photo-viewer :focus-visible {
  outline-color: var(--paper);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.gallery > li {
  margin: 0;
}

.gallery .figure {
  margin: 0;
}

/* Placeholder box (pros, members' photos, anything waiting for approval) */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  background: var(--sand);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.placeholder > * {
  max-width: 22rem;
  margin: 0;
}

.placeholder--portrait {
  aspect-ratio: 3 / 4;
}

.placeholder--square {
  aspect-ratio: 1;
}

.placeholder--wide {
  aspect-ratio: 16 / 9;
}

.placeholder--auto {
  aspect-ratio: auto;
  min-height: 6rem;
}

/* Numbered steps: <ol class="steps" role="list"><li><strong>…</strong> …</li></ol> */
.steps {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  min-height: 2.5rem;
  margin: 0 0 1.25rem;
  padding-left: 3.25rem;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  top: -0.125rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--green);
  border-radius: 50%;
  color: var(--white);
  font-weight: 700;
}

/* ---------- 8. Print ---------- */

@media print {
  .skip-link,
  .nav-wide,
  .nav-menu,
  .site-header__book,
  .app-bar,
  .notice-bar {
    display: none !important;
  }
  body {
    background: #fff;
    font-size: 12pt;
  }
  .site-header {
    position: static;
    border: 0;
  }
  .site-footer {
    background: none;
    color: #000;
    border-top: 1px solid #000;
  }
  .site-footer a,
  .site-footer__heading {
    color: #000;
  }
  .btn {
    border: 1px solid #000 !important;
    background: none !important;
    color: #000 !important;
  }
  .section--tint,
  .section--green {
    background: none;
  }
}