/* Layout — container, sticky header, sections/bands, hero, footer, and the
   responsive rules that make the page reflow cleanly on mobile / tablet.
   (The source design was desktop-only and overflowed on narrow screens.) */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Edge-to-edge sections (the home page's hero and year): content runs to the
   viewport's side padding instead of the centered column. */
.edge {
  padding-inline: var(--edge);
}

/* Full-bleed colour bands; inner .wrap keeps content aligned. */
.band {
  padding-block: clamp(4rem, 8vw, 7rem);
}
.band--warm {
  background: var(--warm-2);
  border-block: 1px solid var(--border);
}
.band--soft {
  background: var(--linen);
}
.band--sand {
  background: var(--linen);
}
.band--white {
  background: var(--warm-2);
  border-top: 2px solid var(--linen);
}
.band--teal {
  background: var(--accent-deep);
  color: var(--bone);
}
/* The dark grounds swap the teal focus ring for bone (10.65:1 on --accent-deep). */
.band--teal,
.site-footer {
  --focus: var(--bone);
}
.band--teal h1,
.band--teal h2,
.band--teal h3 {
  color: var(--white);
}
.band--tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.section-title {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.2rem);
  margin-bottom: 1rem;
  max-width: 22ch;
}
.lede {
  max-width: 42ch;
  color: var(--teal-body);
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
}
.band--teal .lede {
  color: var(--bone);
}
.band--teal .meta-line {
  color: var(--on-dark-dim);
}
.band--teal .meta-line a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Sticky header + nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--accent-deep);
  color: var(--on-dark-dim);
  --focus: var(--coral);
}
.nav.wrap {
  max-width: none;
  padding-inline: var(--edge);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem; /* at least the lockup's clear space (~18px at 140px wide) */
  min-height: var(--nav-h);
  padding-block: 0.75rem;
}
.nav-links {
  display: none; /* desktop-only; the disclosure menu covers mobile */
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  list-style: none;
}
.nav-links a,
.nav-drawer a {
  color: var(--on-dark-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.nav-links a[aria-current='page'] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.nav-drawer a {
  color: var(--accent-strong);
}
.nav-drawer a:hover,
.nav-drawer a[aria-current='page'] {
  color: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* The header's Start free: a step smaller than a page button, on one line, so it
   sits level with the nav links instead of standing taller than the bar. */
.nav-actions .btn {
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
}

/* Mobile disclosure menu (a CSS-only <details>). */
.nav-menu {
  position: relative;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--on-dark-mute) 60%, transparent);
  background: transparent;
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker {
  display: none;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--bone);
  border-radius: 2px;
}
.nav-toggle-bars {
  position: relative;
}
.nav-toggle-bars::before {
  position: absolute;
  top: -6px;
}
.nav-toggle-bars::after {
  position: absolute;
  top: 6px;
}
.nav-drawer {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding: 0.5rem;
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(23, 90, 97, 0.14);
}
.nav-drawer a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}
.nav-drawer a:hover {
  background: var(--warm-2);
}

/* Desktop: inline links, no hamburger. */
@media (min-width: 64rem) {
  .nav-links {
    display: flex;
  }
  .nav-menu {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero {
    grid-template-columns: 1.1fr 1fr;
  }
}
.hero h1 {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 3.375rem);
  margin-bottom: 1.25rem;
}
.hero p {
  font-size: 1.1875rem;
  color: var(--teal-body);
  max-width: 34ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.hero-fineprint {
  font-size: 0.875rem;
  color: var(--teal-muted);
  margin-top: 1rem;
}
.hero-mock {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}

/* ---------- Two-column "job" rows (features + home tour) ---------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 55rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--flip .split-media {
    order: -1;
  }
}
.split + .split {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.split-body h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  margin-bottom: 0.75rem;
}
.split-body p {
  color: var(--teal-body);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--accent-deep);
  color: var(--on-dark-mute);
  /* One slim footer for every page (src/_includes/footer.njk, from base.njk). */
  padding-block: 1.25rem 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--on-dark-mute) 25%, transparent);
}
.site-footer .wrap {
  max-width: none;
  padding-inline: var(--edge);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.footer-tagline {
  font-size: 0.8125rem;
  color: var(--on-dark-mute);
  margin-top: 0.2rem; /* reads as the lockup's own descriptor; clear space surrounds the pair */
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
}
.footer-links a {
  color: var(--on-dark-dim);
  font-size: 0.9375rem;
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Page intro header: the deep band every inner page opens on, with the long
   table's tabletop drawn along its foot. Full-bleed colour from a centered column:
   the box-shadow paints the band out to the viewport, clip-path keeps it from
   bleeding up or down. */
.page-header {
  position: relative;
  background: var(--accent-deep);
  box-shadow: 0 0 0 100vmax var(--accent-deep);
  clip-path: inset(0 -100vmax);
  color: var(--on-dark-dim);
  --focus: var(--coral);
  /* One height for every inner page's opening (the home hero is its own). */
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(3.5rem, 6vw, 4.75rem);
}
.page-header::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.25rem, 2.2vw, 1.75rem);
  height: 10px;
  border-radius: 5px;
  background: var(--bone);
  opacity: 0.9;
}
.page-header h1 {
  font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.2rem);
  margin-bottom: 1rem;
  color: var(--white);
  /* Shared measure for every page's opening: the heading runs about two-thirds of
     the column and the paragraph under it about as far. */
  max-width: 22ch;
}
.page-header .lede {
  color: var(--on-dark-dim);
  max-width: 72ch;
}
.page-header a:not(.btn) {
  color: var(--white);
}
.page-header--center {
  text-align: center;
}
.page-header--center .lede {
  margin-inline: auto;
}

/* An opening with a photo behind it (/contact/): the photo spans the full width like
   the header's own background, under a teal tint deep enough for its text. The photo
   is decorative (alt=""); the heading says what the page is. */
.page-header--photo {
  isolation: isolate;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4.5rem, 8vw, 6.5rem);
}
.page-header-pic,
.page-header--photo::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}
.page-header-pic {
  z-index: -2;
  /* The base img rule caps width at the column's; this one spans the viewport. */
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}
.page-header--photo::before {
  content: '';
  z-index: -1;
  background: rgb(14 61 66 / 0.86);
}
/* Wide screens: the hand rises beside the heading, so the tint lifts on that side
   only, and is back to full strength before the text starts. */
@media (min-width: 60rem) {
  .page-header--photo::before {
    background: linear-gradient(
      to right,
      rgb(14 61 66 / 0.45) 0%,
      rgb(14 61 66 / 0.6) 12%,
      rgb(14 61 66 / 0.88) 24%,
      rgb(14 61 66 / 0.88) 100%
    );
  }
}

/* Narrower reading column (FAQ). */
.narrow {
  max-width: 48rem;
}

/* Generic centered prose (about / simple pages). */
.prose {
  max-width: 42rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.prose h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  margin-bottom: 1rem;
}
.prose p + p {
  margin-top: 1rem;
}

/* Long-form legal/policy pages (privacy, terms) — wider reading column than
   .prose since these mix headings, lists, a table, and a jump-nav. */
.legal {
  max-width: 48rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.legal h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  margin-bottom: 0.5rem;
}
.legal > * + * {
  margin-top: 1rem;
}
.legal > h2 {
  margin-top: 2.75rem;
  font-size: 1.5rem;
}
.legal > h3 {
  margin-top: 1.5rem;
  font-size: 1.1875rem;
}
/* Fourth level — the consent tiers inside "Cookies, analytics, and your tracking
   choices". Sized a step under h3 so the nesting reads without a size collision. */
.legal > h4 {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
}
.legal p,
.legal li {
  color: var(--teal-body);
}
.legal ul,
.legal ol {
  padding-left: 1.35rem;
}
.legal li + li {
  margin-top: 0.4rem;
}
.legal .card h2 {
  font-size: 1.25rem;
}
.legal .card > * + * {
  margin-top: 0.75rem;
}

/* "DRAFT — not yet in effect" flag above a legal-page h1. */
.legal-draft {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--coral-ink);
  background: var(--coral-bg);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
}

/* Bracketed fields counsel still needs to fill in. */
.legal-tbd {
  background: var(--coral-bg);
  color: var(--coral-ink);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-weight: 600;
}

/* =====================================================================
   The long table: shared section patterns for the redesign. Deep teal is
   the table at night, linen the paper, coral the seats. Each page picks
   from these rather than repeating one layout.
   ===================================================================== */

/* The tabletop and its two legs, drawn under a deep section. */
.lt-table {
  position: relative;
  height: 40px;
  pointer-events: none;
}
.lt-table-top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 12px;
  border-radius: 6px;
  background: var(--bone);
}
.lt-table-leg {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 26px;
  border-radius: 0 0 5px 5px;
  background: var(--bone);
  left: 6%;
}
.lt-table-leg + .lt-table-leg {
  left: auto;
  right: 6%;
}

/* ---------- Home hero ---------- */
/* The copy on the deep teal, the club's photo down the right side, and the long
   table across the foot of both. A phone stacks them: copy, a strip of the photo,
   the table. */
.lt-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  background: var(--accent-deep);
  color: var(--on-dark-dim);
  --focus: var(--coral);
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}
@media (min-width: 40rem) {
  .lt-hero {
    grid-template-columns: minmax(0, 54%) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    min-height: clamp(520px, 78svh, 860px);
  }
}
.lt-hero-copy {
  display: grid;
  gap: 1.4rem;
  max-width: 620px;
}
.lt-hero h1 {
  font-size: clamp(2.6rem, 1.2rem + 5vw, 5.6rem);
  color: var(--white);
}
.lt-hero-lede {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  max-width: 44ch;
}
.lt-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
}
.lt-hero .link-arrow {
  color: var(--white);
}
.lt-hero-fine {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--on-dark-mute);
}

/* The photo: the hero's right side, top to bottom, crossfading. Its foot darkens
   into the teal so the table reads across it, as on the year stage. A phone gets
   it as a short full-bleed strip under the copy instead, its foot under the table;
   the strip's height is fixed, so nothing moves when the photo arrives. */
.lt-hero-pics {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 54%;
}
@media (max-width: 39.99rem) {
  .lt-hero-pics {
    position: relative;
    z-index: 0;
    inset: auto;
    height: 11.25rem;
    margin-inline: calc(var(--edge) * -1);
    margin-bottom: -1.5rem;
  }
}
.lt-hero-pics img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.lt-hero-pics img.is-on {
  opacity: 1;
}
.lt-hero-pics::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(to top, rgb(14 61 66 / 0.9), rgb(14 61 66 / 0));
}

/* The same tabletop and legs as the other pages, across the whole hero. */
@media (min-width: 40rem) {
  .lt-hero-table {
    grid-column: 1 / -1;
    align-self: end;
  }
}

/* Two photo cards along the hero's foot, leading into the page. Only on a desktop,
   where the hero is the photo behind the copy; a smaller screen has the table. */
.lt-hero-cards {
  display: none;
  list-style: none;
}
.lt-hero-cards li {
  flex: 1 1 0;
  min-width: 0;
}
.lt-hero-cards a {
  display: grid;
  width: clamp(170px, 16vw, 224px);
  background: var(--bone);
  color: var(--walnut);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 0.25s var(--ease);
}
.lt-hero-cards a:hover {
  transform: translateY(-4px);
}
.lt-hero-cards img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.lt-hero-cards span {
  padding: 0.6rem 0.8rem;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
}

/* Desktop: the club photos fill the hero behind the copy, crossfading, with a deep
   panel holding the copy and the photo cards at the foot, not the long table. */
@media (min-width: 60rem) {
  .lt-hero {
    grid-template-rows: none;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    min-height: clamp(560px, 78svh, 860px);
    padding-block: clamp(3rem, 7vw, 6.5rem) clamp(9rem, 16vw, 13rem);
  }
  .lt-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 46% 0 0;
    background: rgb(14 61 66 / 0.86);
  }
  .lt-hero-pics {
    z-index: -2;
    inset: 0;
  }
  .lt-hero-pics::after,
  .lt-hero-table {
    display: none;
  }
  .lt-hero-cards {
    display: flex;
    gap: 14px;
    position: absolute;
    right: var(--edge);
    bottom: clamp(1.25rem, 2.4vw, 2.25rem);
  }
}

/* ---------- Now vs. with LongTable ---------- */
.fixes-band {
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem);
}
/* No lede beside this heading (the year and plans headings have one), so it runs
   wider instead and sets in two lines across the column. */
.fixes-band .section-title {
  max-width: 32ch;
}
.fixes-key,
.fix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
}
.fixes-key {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  font-size: 0.875rem;
  font-weight: 700;
}
.fixes-key span:first-child {
  color: var(--teal-muted);
}
.fixes-key span:last-child {
  grid-column: 3;
  color: var(--accent-strong);
}
.fixes {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 0.6rem;
}
.fix-now,
.fix-lt {
  padding: 1.1rem 1.4rem 1.25rem;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
}
.fix-now {
  background: var(--linen);
  color: var(--teal-body);
}
.fix-now h3 {
  font-size: 1.25rem;
  color: var(--walnut);
  line-height: 1.2;
}
.fix-now p {
  font-size: 0.98rem;
}
.fix-lt {
  background: var(--accent-deep);
  color: var(--on-dark-dim);
}
.fix-lt h3 {
  font-size: 1.35rem;
  color: var(--white);
  line-height: 1.2;
}
.fix-to {
  display: grid;
  place-items: center;
  color: var(--coral);
  font-size: 1.8rem;
  font-weight: 700;
}
.fix-lab {
  display: none;
  font-size: 0.875rem;
  font-weight: 700;
}
@media (max-width: 47.99rem) {
  .fixes-key {
    display: none;
  }
  .fix {
    grid-template-columns: 1fr;
  }
  .fix-to {
    padding: 0.2rem 0;
    transform: rotate(90deg);
    font-size: 1.4rem;
  }
  .fix-lab {
    display: block;
  }
  .fix-lt .fix-lab {
    color: var(--coral);
  }
}
/* Phones read each pair as one beat, the way the wide screens' side-by-side does:
   the "now" card holds under the nav while its LongTable answer slides up over it,
   then the pair scrolls on together. Where scroll-driven animations run, the "now"
   card also sinks back as it is covered. It changes scale and shade, never its
   text's opacity, so whatever part is still showing keeps full contrast. With
   reduced motion the pairs stay a plain stack. */
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  .fixes {
    gap: 2.5rem;
  }
  .fix {
    timeline-scope: --fix-lt;
  }
  /* The arrow passes under the held card; the answer slides over it. */
  .fix-now {
    position: sticky;
    z-index: 1;
    top: calc(var(--nav-h) + 0.75rem);
    transform-origin: 50% 0;
  }
  .fix-lt {
    position: relative;
    z-index: 2;
    box-shadow: 0 -10px 28px rgb(14 61 66 / 0.28);
    view-timeline: --fix-lt block;
    view-timeline-inset: calc(var(--nav-h) + 0.75rem) 0px;
  }
  /* The "now" card sinks over the answer's last 12rem up to the line it holds at. */
  @supports (animation-timeline: view()) {
    .fix-now {
      animation: fix-sink linear both;
      animation-timeline: --fix-lt;
      animation-range: exit -12rem exit 0%;
    }
  }
}
@keyframes fix-sink {
  to {
    transform: scale(0.94);
    /* A shade under --linen; the card's text still clears 5.8:1 on it. */
    background-color: #d8ccb6;
  }
}

/* ---------- Every club has a table: sample clubs ---------- */
/* The sample clubs sit below the fold on every screen, and their six photos (lazy,
   but within the browser's lazy-load distance) would otherwise start loading with
   the hero's. Skipping the section's layout until it nears the viewport holds them
   back until then. The height is a placeholder near the section's real one (about
   950-1,400px across widths); `auto` keeps the real one once it has rendered. */
#clubs {
  content-visibility: auto;
  contain-intrinsic-size: auto 1150px;
}
.clubs-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.clubs-head .section-title {
  margin-bottom: 0;
  max-width: 14ch;
}
/* A longer lede than the other heads carry, so it takes the room beside the
   heading rather than stacking into a narrow column at the right. */
.clubs-head .lede {
  flex: 1 1 26rem;
  max-width: 60ch;
}
.clubs-grid {
  list-style: none;
  display: grid;
  gap: clamp(12px, 1.6vw, 22px);
}
/* Two across from phone width, the right column a little lower, like seats along
   a table (three across on wide screens, the middle one lower). The grid's foot
   leaves room for the lowered column. A screen under 20rem keeps one column. */
@media (min-width: 20rem) {
  .clubs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: clamp(1.75rem, 5vw, 2.5rem);
  }
  .club-card:nth-child(2n) {
    transform: translateY(clamp(1.75rem, 5vw, 2.5rem));
  }
}
@media (min-width: 55rem) {
  .clubs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 0;
  }
  .club-card:nth-child(2n) {
    transform: none;
  }
  .club-card:nth-child(3n + 2) {
    transform: translateY(clamp(0px, 3vw, 40px));
  }
}
.club-card {
  background: var(--white);
  color: var(--teal-body);
  display: grid;
  align-content: start;
}
.club-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.club-card div {
  padding: 0.9rem 1rem 1.1rem;
  display: grid;
  gap: 0.25rem;
}
.band--teal .club-card h3 {
  font-size: 1.4rem;
  color: var(--accent-deep);
  line-height: 1.2;
}
.club-card p {
  font-size: 0.95rem;
}
.club-card .tabular {
  font-weight: 700;
  color: var(--accent);
}
/* Two across on a phone: a smaller card, so each name still fits a line or two. */
@media (min-width: 20rem) and (max-width: 33.99rem) {
  .club-card div {
    padding: 0.6rem 0.7rem 0.75rem;
  }
  .band--teal .club-card h3 {
    font-size: 1.1rem;
  }
  .club-card p {
    font-size: 0.85rem;
    line-height: 1.35;
  }
}
/* ---------- One year at the table: scroll through the months ---------- */
.year {
  --year-head-top: clamp(3.5rem, 7vw, 6rem);
  /* The height of the bar the stage shrinks to on narrow screens. */
  --year-bar-h: 5.5rem;
  border-top: 2px solid var(--linen);
  /* /#how (the nav's How it works) stops with the heading just under the nav, not
     the head's top padding, so the pinned stage below starts in view. */
  scroll-margin-top: calc(-1 * var(--year-head-top));
}
.year-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1rem 3rem;
  padding-block: var(--year-head-top) clamp(1.75rem, 3.5vw, 3rem);
}
.year-head .section-title {
  margin-bottom: 0;
}
.year-grid {
  display: grid;
}
@media (min-width: 60rem) {
  .year-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }
}

/* The stage: pinned while the chapters scroll past. Wide screens give it the
   viewport's height beside them; narrow ones shrink it to a bar above them, the
   month (or job) over the long table, with no photo (each chapter opens on its
   own). */
.year-stage {
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
  height: var(--year-bar-h);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 60% 42%, rgb(240 138 102 / 0.2), transparent 70%),
    linear-gradient(160deg, #175a61, #0e3d42 70%);
  color: var(--white);
}
@media (min-width: 60rem) {
  .year-stage {
    height: calc(100svh - var(--nav-h));
  }
}
@media (max-width: 59.99rem) {
  .year-pics,
  .year-stage::after {
    display: none;
  }
  .year .year-stage .year-stage-month {
    left: var(--edge);
    right: var(--edge);
    top: 0.6rem;
    max-width: none;
    overflow: hidden;
    font-size: 1.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: none;
  }
  .year .year-stage .year-table {
    left: var(--edge);
    right: var(--edge);
    bottom: 0.5rem;
    height: 2.4rem;
  }
  .year .year-stage .lt-table-top {
    bottom: 0;
    height: 6px;
  }
  .year .year-stage .lt-table-leg {
    display: none;
  }
  .year .year-stage .year-seats {
    bottom: 10px;
  }
  /* Each seat's whole column takes the tap, not just its dot. */
  .year .year-stage .year-seat {
    min-height: 1.9rem;
    align-content: end;
    gap: 4px;
    font-size: 0.66rem;
  }
  .year .year-stage .year-seat i {
    width: 11px;
    height: 11px;
  }
}
.year-stage-month {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 2.75rem);
  top: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  line-height: 1;
  color: var(--white);
}
.year-pics img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.9s ease,
    transform 1.6s var(--ease);
}
.year-pics img.is-on {
  opacity: 1;
  transform: none;
}
.year-stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(to top, rgb(14 61 66 / 0.92), rgb(14 61 66 / 0));
  pointer-events: none;
}
.year-stage-month {
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}
/* The long table along the stage's foot: twelve seats, one per month. */
.year-table {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 2.75rem);
  right: clamp(1.25rem, 3vw, 2.75rem);
  bottom: 1.75rem;
  height: 76px;
}
.year-table .lt-table-top {
  bottom: 22px;
}
.year-table .lt-table-leg {
  height: 24px;
}
.year-seats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  list-style: none;
}
.year-seat {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-dark-mute);
  text-decoration: none;
}
.year-seat i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--on-dark-mute);
  transition:
    transform 0.4s var(--ease),
    background-color 0.3s ease,
    border-color 0.3s ease;
}
a.year-seat i {
  border-color: var(--coral);
  background: rgb(240 138 102 / 0.35);
}
a.year-seat.is-done i {
  background: var(--coral);
}
a.year-seat.is-on {
  color: var(--white);
}
a.year-seat.is-on i {
  background: var(--coral);
  border-color: var(--white);
  transform: scale(1.55);
}

/* The chapters scroll past the stage. */
.year-ch {
  display: grid;
  align-content: center;
  gap: 1.1rem;
  padding: clamp(3rem, 7vw, 6rem) var(--edge);
  min-width: 0;
  /* A seat or a link to a chapter stops with it just below the narrow bar. */
  scroll-margin-top: var(--year-bar-h);
}
@media (min-width: 60rem) {
  .year-ch {
    min-height: 82svh;
    scroll-margin-top: 0;
    padding-left: clamp(2rem, 4vw, 4rem);
  }
}
/* What happens that month, above the chapter heading. */
.year-ch-label {
  font-weight: 600;
  color: var(--accent);
}
.year-ch h3 {
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.2rem);
}
.year-ch > p {
  max-width: 40ch;
}
.year-ch .meta-line,
.year-ch .meta-list {
  margin: 0;
}
.year-ch + .year-ch {
  border-top: 2px solid var(--linen);
}
@media (min-width: 60rem) {
  .year-ch + .year-ch {
    border-top: 0;
  }
}
/* Each chapter shows that month's screen; narrow screens also get its photo. */
.year-ch-screen {
  margin-top: 0.5rem;
  max-width: 28rem;
}
.year-ch-photo {
  position: relative;
  overflow: hidden;
  margin-inline: calc(var(--edge) * -1);
  margin-top: calc(clamp(3rem, 7vw, 6rem) * -1);
  margin-bottom: 0.75rem;
}
.year-ch-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.year-ch-photo span {
  position: absolute;
  left: var(--edge);
  bottom: 0.75rem;
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--white);
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
@media (min-width: 60rem) {
  .year-ch-photo {
    display: none;
  }
}
/* On narrow screens each part of a chapter fades in, 20px up, as it scrolls into
   view, and its photo settles from a slight zoom, as the wide stage's photos do
   (src/js/year.js adds .is-fading, then .is-in part by part). */
@media (max-width: 59.99rem) and (prefers-reduced-motion: no-preference) {
  .year.is-fading .year-ch > * {
    transition:
      opacity 0.5s ease,
      transform 0.6s var(--ease);
  }
  .year.is-fading .year-ch > :not(.is-in) {
    opacity: 0;
    transform: translateY(20px);
  }
  .year.is-fading .year-ch-photo img {
    transition: transform 1.6s var(--ease);
  }
  .year.is-fading .year-ch-photo:not(.is-in) img {
    transform: scale(1.06);
  }
}

/* The home page's year on narrow screens: a row of month cards to swipe through
   under the bar, each the month's photo with its screen and story laid over it,
   the next card peeking in from the right. Every card gives its screen the same
   window at the top, so the story starts at the same height on each and does not
   jump as you swipe (src/js/year.js sizes the window to the longest story). */
@media (max-width: 59.99rem) {
  .year--swipe .year-chapters {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    padding: 0.75rem var(--edge) clamp(2.5rem, 6vw, 4rem);
    scrollbar-width: none;
  }
  .year--swipe .year-chapters::-webkit-scrollbar {
    display: none;
  }
  .year--swipe .year-ch {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 0 0 min(calc(100% - 1.75rem), 34rem);
    flex-direction: column;
    gap: 0.5rem;
    /* One screen tall under the bar, with a floor for a phone on its side. A
       floor, not a fixed height: a story that outgrows it under large text grows
       every card in the row instead of being cut off. */
    min-height: max(30rem, calc(100svh - var(--nav-h) - var(--year-bar-h) - 1.5rem));
    padding: 1.25rem 1.15rem 1.35rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--accent-deep);
    color: var(--white);
    scroll-snap-align: start;
  }
  .year--swipe .year-ch + .year-ch {
    border-top: 0;
  }
  .year--swipe .year-ch-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
  }
  .year--swipe .year-ch-photo img {
    height: 100%;
    aspect-ratio: auto;
  }
  /* The teal rises behind the story and clears well before the top, so the
     photo shows around the screen. */
  .year--swipe .year-ch-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgb(14 61 66 / 0.95) 0%,
      rgb(14 61 66 / 0.88) 38%,
      rgb(14 61 66 / 0.55) 55%,
      rgb(14 61 66 / 0) 72%
    );
  }
  /* The bar above already names the month. */
  .year--swipe .year-ch-photo span {
    display: none;
  }
  /* The screen's window: the same height on every card, its screen drawn a size
     smaller so it keeps its wide layout, and cut off with a fade when it runs
     longer than the window. */
  .year--swipe .year-ch-screen {
    order: -1;
    flex: 0 0 auto;
    height: var(--year-screen-h, auto);
    margin: 0 0 0.75rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
    color: var(--teal-body);
  }
  .year--swipe .year-ch-screen > * {
    zoom: 0.8;
  }
  /* The assistant's chat fills the window and, as each message arrives, scrolls
     to keep the newest in view above the fade, as a chat does (src/js/year.js). */
  .year--swipe .year-ch-screen:has(.ai-panel) {
    display: flex;
    flex-direction: column;
  }
  .year--swipe .year-ch-screen .ai-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  .year--swipe .year-ch-screen .ai-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .year--swipe .year-ch > .year-ch-label {
    font-size: 0.9rem;
    color: var(--coral);
  }
  .year--swipe .year-ch h3 {
    font-size: clamp(1.55rem, 1.1rem + 2vw, 2.1rem);
    color: var(--white);
  }
  .year--swipe .year-ch > p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--on-dark-dim);
  }
  .year--swipe .year-ch .meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    font-size: 0.8rem;
    color: var(--on-dark-mute);
  }
  .year--swipe .year-ch .meta-list li {
    border-left-color: rgb(255 253 248 / 0.25);
  }
  .year--swipe .year-ch .meta-line {
    font-size: 0.85rem;
    color: var(--on-dark-dim);
  }
  .year--swipe .year-ch .meta-line a {
    color: var(--white);
  }
}
@media (max-width: 59.99rem) and (prefers-reduced-motion: no-preference) {
  .year--swipe .year-chapters {
    scroll-behavior: smooth;
  }
}

/* ---------- Seats + plans (home and pricing) ---------- */
.seats-top {
  display: grid;
  gap: 1rem clamp(1.75rem, 5vw, 5rem);
  align-items: end;
}
@media (min-width: 55rem) {
  .seats-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.seats-top .section-title {
  margin-bottom: 0;
}
.seat-picker {
  margin-top: clamp(2rem, 4vw, 3rem);
}
/* The picker ships `hidden` until src/js/seats.js shows it. Where scripts run, it
   keeps its place meanwhile (laid out but invisible, so it cannot be focused or
   read), or showing it would push the plan cards down after the first paint. */
@media (scripting: enabled) {
  .seat-picker[hidden] {
    display: block;
    visibility: hidden;
  }
}
.seat-ctl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem 1.4rem;
  padding: 1.1rem 1.4rem;
  background: var(--linen);
}
.seat-ctl label {
  font-weight: 700;
  color: var(--accent-deep);
}
.seat-ctl input {
  width: 100%;
  min-width: 0;
  height: 32px;
  accent-color: var(--accent-strong);
}
.seat-ctl output {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--accent-deep);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.seat-table {
  position: relative;
  margin-top: 1.25rem;
  padding-bottom: 20px;
}
.seat-table .lt-table-top {
  bottom: 0;
  height: 14px;
  background: var(--accent-strong);
}
.seat-diners {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-inline: 3%;
  min-height: 22px;
  align-items: flex-end;
}
.seat-diners i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--coral);
  animation: sit 0.35s var(--ease) both;
}
@keyframes sit {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
}
@media (max-width: 32rem) {
  .seat-ctl {
    grid-template-columns: 1fr auto;
  }
  .seat-ctl input {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
.plans--seats {
  gap: 12px;
}
/* A phone has room for one card, so the plans become a row to swipe through, edge
   to edge with the next card peeking in, as the four sit side by side on desktop.
   seats.js slides the row to the plan that fits as the slider moves. */
@media (max-width: 39.99rem) {
  .plans--seats {
    position: relative; /* the cards' offsetParent, for seats.js */
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 21rem);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .plans--seats > .plan {
    scroll-snap-align: center;
  }
}
/* Once a club is seated (seats.js), the recommended plan goes back to paper and
   only the plan that fits stays lit. */
.is-seated .plan--featured:not(.is-fit) {
  background: transparent;
  border-color: var(--linen);
  color: inherit;
}
.is-seated .plan--featured:not(.is-fit) .plan-name {
  color: var(--accent-deep);
}
.is-seated .plan--featured:not(.is-fit) .plan-price {
  color: var(--accent-strong);
}
.is-seated
  .plan--featured:not(.is-fit)
  :is(.plan-blurb, .plan-note, .plan-features, .plan-feature-note, .plan-price small) {
  color: var(--teal-body);
}
.is-seated .plan--featured:not(.is-fit) .plan-features .plan-features-head {
  color: var(--teal-ink);
}
.is-seated .plan--featured:not(.is-fit) .btn--ghost {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}
.plans-foot {
  margin-top: 1.5rem;
  color: var(--teal-body);
}

/* ---------- Closing call to action ---------- */
.close {
  position: relative;
  padding-block: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(50% 80% at 85% 20%, rgb(240 138 102 / 0.18), transparent 70%),
    var(--accent-deep);
}
.close .cta-block {
  text-align: left;
}
/* With a photo: the picture fills the band and a deep gradient rises under the text. */
.close--photo {
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(8rem, 16vw, 15rem);
}
.close-pic {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.close--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(14 61 66 / 0.94) 25%, rgb(14 61 66 / 0.35));
}
.close .cta-block h2 {
  font-size: clamp(2.6rem, 1.2rem + 5.5vw, 6rem);
  max-width: 12ch;
  margin-bottom: 1.25rem;
}
.close .cta-block p {
  max-width: 40ch;
  font-size: 1.15rem;
  color: var(--on-dark-dim);
}
.close .lt-table--close {
  max-width: var(--container);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  margin-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}

/* ---------- Inner-page header variants ---------- */
.page-header--center h1,
.page-header--center .lede {
  margin-inline: auto;
}

/* Legal pages open on the same deep header as every other page (terms, privacy,
   acceptable use, subprocessors); only the reading column below is narrower. */
.page-header .meta-line {
  color: var(--on-dark-mute);
  max-width: 72ch;
}
.page-header--legal + .legal {
  padding-top: clamp(2rem, 4vw, 3rem);
}
.legal > h2 {
  padding-top: 1.25rem;
  border-top: 2px solid var(--linen);
}

/* ---------- Features: the jobs as one scroll (the year's stage, ten seats) ---------- */
.year--jobs {
  border-top: 0;
}
.year-seats--jobs {
  grid-template-columns: repeat(10, 1fr);
}
.year--jobs .year-stage-month {
  font-size: clamp(2.2rem, 3.6vw, 4rem);
  max-width: 12ch;
}
.year--jobs .year-ch {
  min-height: 0;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
@media (min-width: 60rem) {
  .year--jobs .year-ch {
    min-height: 90svh;
  }
}
.job h2 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
}
.job .checklist {
  max-width: 40rem;
}
.job .year-ch-screen {
  background: var(--accent-deep);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 32rem;
}
.job .year-ch-photo {
  margin-top: calc(clamp(3.5rem, 8vw, 6.5rem) * -1);
}

/* ---------- Seat your club: plan cards and the contact form in one cell ----------
   Shared by the home page and /pricing/ (src/_includes/seat-plans.njk). Past the
   largest plan the cards fade out and the form fades in where they were, and back
   again. Only the one showing sets the cell's height: the hidden one is taken out of
   the flow while it fades, so no gap is left under the shorter one (the stacked cards
   on a phone are about three times the form's height). */
.seat-stack {
  position: relative;
  display: grid;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.seat-stack > * {
  grid-area: 1 / 1;
  min-width: 0;
  align-self: start;
}
.seat-stack > .plans {
  margin-top: 0;
}
.plans--seats,
.seat-contact-wrap {
  transition:
    opacity 0.45s ease,
    transform 0.55s var(--ease),
    visibility 0s linear 0.45s;
}
.plans--seats.is-over,
.seat-contact-wrap:not(.is-open) {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
}
.plans--seats:not(.is-over),
.seat-contact-wrap.is-open {
  transition-delay: 0s;
}
.seat-contact-wrap[hidden] {
  display: none;
}
/* ---------- Contact forms ----------
   The panel a contact form sits in (the macros.njk `contactForm` shell): the
   large-club panel in the seat picker and the general form on /contact/. */
.contact-panel {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--accent-deep);
  color: var(--on-dark-dim);
  --focus: var(--bone);
  /* The field colors every contact form reads; a light panel swaps them. */
  --field-label: var(--white);
  --field-ink: var(--teal-ink);
  --field-fill: var(--bone);
  --field-edge: transparent;
  --field-focus: var(--coral);
}
.contact-panel :is(h2, h3) {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
  color: var(--white);
  margin-bottom: 0.75rem;
}
/* A long word or address wraps on a phone rather than overflowing. */
.contact-panel p {
  max-width: 60ch;
  margin: 0;
  overflow-wrap: anywhere;
}
.contact-panel p + p {
  margin-top: 0.75rem;
}
.contact-panel a:not(.btn) {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.contact-done :is(h2, h3) {
  margin-bottom: 0.5rem;
}
.contact-done:focus {
  outline: none;
}

/* The form (src/js/contact.js shows it once the CAPTCHA can run). Wide screens put
   the heading beside the fields; the fields run two across, three on wide screens. */
@media (min-width: 55rem) {
  .contact-panel:has(.contact-form:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
  }
}
.contact-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.contact-form[hidden] {
  display: none;
}
@media (min-width: 36rem) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 55rem) {
  .contact-form {
    margin-top: 0;
  }
}
.field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.field--wide {
  grid-column: 1 / -1;
}
.field label,
.field-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--field-label);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--field-ink);
  background: var(--field-fill);
  border: 2px solid var(--field-edge);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--field-focus);
  outline: none;
}
.field [aria-invalid='true'] {
  border-color: var(--field-focus);
}
.field textarea {
  resize: vertical;
}
/* The AWS WAF puzzle renders here, in a group hidden until Send (src/js/contact.js). */
.field[hidden] {
  display: none;
}
.captcha-slot {
  /* AWS's own styles set black text, so the puzzle sits on a light card. */
  min-height: 78px;
  padding: 0.75rem;
  background: var(--white);
  border-radius: var(--radius);
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
/* `.btn`'s display beats the browser's own [hidden] rule; Send hides while the
   puzzle is up (src/js/contact.js). */
.contact-actions .btn[hidden] {
  display: none;
}
.contact-actions .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}
.contact-status {
  color: var(--field-label);
}

/* ---------- /contact/: a letter on the long table ----------
   The page's own look. The form is a sheet of paper with a coral header rule, set on
   the wordmark's table (the shared .tabletop); the notes beside it are place cards. */
.contact-desk {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 60rem) {
  .contact-desk {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }
}
.contact-guide h2 {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem);
  margin-bottom: 1rem;
}
.contact-notes {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-notes li {
  position: relative;
  padding: 1rem 1.1rem 1rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--border);
  color: var(--teal-body);
}
/* The place card's folded edge. */
.contact-notes li::before {
  content: '';
  position: absolute;
  inset: 0.8rem auto 0.8rem 0;
  width: 4px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.contact-notes li.contact-note--alert::before {
  background: var(--coral-ink);
}
.contact-notes a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.contact-table {
  position: relative;
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.contact-table .tabletop {
  margin: 0 -1.25rem;
}
.contact-panel--letter {
  position: relative;
  margin: 0 clamp(0rem, 2vw, 1.5rem);
  background: var(--white);
  color: var(--teal-body);
  border: 1px solid var(--border);
  border-top: 6px solid var(--coral);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 18px 40px -24px rgb(14 61 66 / 45%);
  --focus: var(--accent-strong);
  --field-label: var(--accent-strong);
  --field-ink: var(--teal-ink);
  --field-fill: var(--bone);
  --field-edge: var(--border-2);
  --field-focus: var(--accent);
}
.contact-panel--letter :is(h2, h3) {
  color: var(--accent-strong);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
}
.contact-panel--letter a:not(.btn) {
  color: var(--accent-strong);
}
.contact-panel--letter .contact-copy {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border-2);
}
/* The letter always reads top to bottom; only the seat panel sits side by side. */
@media (min-width: 55rem) {
  .contact-panel--letter:has(.contact-form:not([hidden])) {
    display: block;
  }
}
.contact-panel--letter .contact-form {
  margin-top: 0;
}
.contact-panel--letter select {
  font-weight: 600;
}

/* ---------- The way into the full comparison ---------- */
/* Each compact card ends on a link into its plan's features. */
.plan-features .plan-more {
  margin-top: 0.35rem;
}
.plan-more a {
  font-weight: 700;
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.plan-more a:hover {
  text-decoration-color: var(--coral);
}
.plan--featured .plan-more a,
.plan.is-fit .plan-more a {
  color: var(--white);
}
.is-seated .plan--featured:not(.is-fit) .plan-more a {
  color: var(--accent-strong);
}
/* Under the cards: one wide band, the whole of it a link. */
.plans-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--linen);
  color: var(--teal-body);
  text-decoration: none;
  border-left: 6px solid var(--coral);
  transition:
    background-color 0.25s ease,
    transform 0.25s var(--ease);
}
.plans-more:hover {
  background: color-mix(in srgb, var(--linen) 70%, var(--coral) 10%);
  transform: translateY(-2px);
}
.plans-more-body {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 26rem;
  max-width: 46rem;
}
.plans-more-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  color: var(--accent-deep);
}
.plans-more-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--accent-deep);
  color: var(--bone);
  font-weight: 700;
}
.plans-more:hover .plans-more-go {
  background: var(--accent-strong);
}
/* The months with no chapter: a smaller, dimmer seat on the table. */
.year-seat--empty i {
  width: 10px;
  height: 10px;
  margin-top: 2px;
  opacity: 0.6;
}