/* =========================================================
   Racket Hour
   White is the ground. Dark green does the job black does.
   Archivo is the only face, and its width axis is the range.
========================================================== */

:root {
  /* Two greens, two jobs. --dark is structure: it goes wherever an app
     would put black. --green only marks state, so a bright green anywhere
     on the page means there is information at that spot. */
  --dark: #1E3932;
  --dark-soft: #2C4C43;
  --green: #00704A;
  --green-tint: #E4F0EA;

  --white: #FFFFFF;
  --shell: #F2F2EF;
  --shell-deep: #E7E7E2;

  --ink: var(--dark);
  --ink-dim: rgba(30, 57, 50, 0.68);
  --ink-faint: rgba(30, 57, 50, 0.5);
  --hair: rgba(30, 57, 50, 0.09);
  --hair-soft: rgba(30, 57, 50, 0.06);

  --on-dark: #FFFFFF;
  --on-dark-dim: rgba(255, 255, 255, 0.68);
  --on-dark-faint: rgba(255, 255, 255, 0.5);

  /* Three depths, used consistently. A white card on a white page
     disappears, so every raised thing gets a hairline and one of these.
     Tinted green rather than black: a black shadow over a warm ground goes
     muddy and reads cheap. */
  --lift-1: 0 1px 2px rgba(30, 57, 50, 0.06), 0 4px 10px -6px rgba(30, 57, 50, 0.14);
  --lift-2: 0 1px 3px rgba(30, 57, 50, 0.07), 0 10px 24px -10px rgba(30, 57, 50, 0.2);
  --lift-3: 0 2px 6px rgba(30, 57, 50, 0.08), 0 22px 46px -20px rgba(30, 57, 50, 0.34);

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;

  --measure: 62ch;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --page: 1180px;

  /* Reserved by the floating tab bar so the last card is never under it. */
  --tabbar-clear: 5.5rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-stretch: 100%;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--dark); color: var(--white); }

/* `height: auto` matters: width/height attributes on an <img> are honoured as
   presentational hints, and an explicit height beats `aspect-ratio`. Without
   this, an image carrying the attributes that prevent layout shift renders at
   its literal pixel height. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Visually hidden, still read aloud. Used for headings a page needs for
   structure but the design does not draw. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   TYPE
   One family, so hierarchy comes from width, weight and size.
========================================================== */

/* Headlines. The width axis is what makes Archivo feel like display type
   rather than UI type. */
.display {
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1.display { font-size: clamp(2rem, 6.2vw, 3.4rem); }
h2.display { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3.display { font-size: clamp(1.15rem, 2.4vw, 1.4rem); letter-spacing: -0.02em; }

/* Numerals: hours, prices, dates. Always tabular so columns line up. */
.figure {
  font-stretch: 112%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.lede {
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  color: var(--ink-dim);
  max-width: var(--measure);
}

.label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

.eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}

p { max-width: var(--measure); }

/* =========================================================
   THE WORDMARK
   Archivo 700 at width 112%, letterspaced. This is the logo.
========================================================== */
.wordmark {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-lg {
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  letter-spacing: 0.11em;
}
.on-dark .wordmark,
.wordmark.on-dark { color: var(--white); }

/* =========================================================
   APP BAR
   Sticky, quiet, and short. On a laptop it also carries the nav, so the
   floating pill below is a phone-only device.
========================================================== */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 58px;
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair-soft);
}
@media (prefers-reduced-transparency: reduce) {
  .appbar { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.appbar-inner {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.appnav { display: none; gap: 0.2rem; align-items: center; }
.appnav a {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.appnav a:hover { color: var(--dark); }
.appnav a[aria-current="page"] { color: var(--white); background: var(--dark); }

.appbar-city {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (min-width: 760px) {
  .appnav { display: flex; }
  .appbar-city { display: none; }
}

/* =========================================================
   TAB BAR — the floating pill, phones only
========================================================== */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 0.15rem;
  background: var(--white);
  border: 1px solid var(--hair);
  box-shadow: var(--lift-2);
  border-radius: 999px;
  padding: 0.28rem;
  max-width: calc(100vw - 2rem);
}
.tabbar a {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.tabbar a[aria-current="page"] { color: var(--white); background: var(--dark); }

@media (min-width: 760px) {
  .tabbar { display: none; }
  :root { --tabbar-clear: 0rem; }
}

/* =========================================================
   LAYOUT
========================================================== */
.page {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.stack { display: flex; flex-direction: column; }

section.band {
  padding-block: clamp(2.75rem, 7vw, 5rem);
}
section.band + section.band { border-top: 1px solid var(--hair-soft); }

.band-head {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.25rem);
}

/* =========================================================
   CARDS
   A card is a thing you can act on. Everything else is spacing.
========================================================== */
.card {
  background: var(--white);
  border: 1px solid var(--hair);
  box-shadow: var(--lift-2);
  border-radius: var(--r);
  padding: 0.95rem 1.05rem 1.05rem;
  display: grid;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
}

/* The one card that takes money is the dark one. */
.card-dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--on-dark);
}
.card-dark .label,
.card-dark .card-meta { color: var(--on-dark-dim); }

.card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-when {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.card-what { font-size: 0.92rem; line-height: 1.42; max-width: none; }
.card-meta {
  font-size: 0.78rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

a.card { transition: transform 0.22s cubic-bezier(.22,.6,.2,1), box-shadow 0.22s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--lift-3); }
a.card:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  a.card, a.card:hover { transform: none; transition: none; }
}

/* Seats: how full a session is, without naming anybody. */
.seats { display: flex; gap: 3px; align-items: center; margin-top: 0.15rem; }
.seat {
  width: 17px; height: 5px;
  border-radius: 3px;
  background: rgba(30, 57, 50, 0.15);
}
.seat.taken { background: var(--green); }
.card-dark .seat { background: rgba(255, 255, 255, 0.22); }
.card-dark .seat.taken { background: var(--white); }

/* =========================================================
   BUTTONS
========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.72em 1.25em;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}
.btn:active { transform: scale(0.985); }

.btn-dark { background: var(--dark); color: var(--white); }
.btn-dark:hover { background: var(--dark-soft); }

.btn-light { background: var(--white); color: var(--dark); }
.btn-light:hover { background: var(--shell); }

.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: #005B3C; }

.btn-ghost { background: transparent; color: var(--dark); border-color: var(--hair); }
.btn-ghost:hover { border-color: var(--dark); }
.on-dark .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.34); }
.on-dark .btn-ghost:hover { border-color: var(--white); }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-wide { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transition: none; transform: none; }
}

/* =========================================================
   PANELS — a dark block, used sparingly
========================================================== */
.panel {
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 5vw, 2.75rem);
}
.panel-dark { background: var(--dark); color: var(--on-dark); }
.panel-dark .lede { color: var(--on-dark-dim); }
.panel-dark .label,
.panel-dark .eyebrow { color: var(--on-dark-faint); }
.panel-shell { background: var(--shell); color: var(--ink); }

/* =========================================================
   REVEAL
   Hidden only once script has proved it can un-hide. No JS, a hidden tab,
   a crawler: the page still reads.
========================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(.22,.6,.2,1), transform 0.7s cubic-bezier(.22,.6,.2,1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   FOOTER
========================================================== */
footer.site {
  background: var(--dark);
  color: var(--on-dark);
  margin-top: clamp(3rem, 8vw, 5rem);
  padding: clamp(2.5rem, 7vw, 4rem) var(--gutter) calc(clamp(2.5rem, 6vw, 3.5rem) + var(--tabbar-clear));
}
footer.site .inner {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  gap: 1.4rem;
}
footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
footer.site nav a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
footer.site nav a:hover { color: var(--white); }
footer.site .legal {
  font-size: 0.68rem;
  color: var(--on-dark-faint);
  letter-spacing: 0.04em;
  max-width: none;
  line-height: 1.7;
}
footer.site .legal a { color: var(--on-dark-dim); }

footer.site .foot-right { display: grid; gap: 1.1rem; justify-items: start; }

/* =========================================================
   BRIDGE
   Membership, coaching, FAQ, About and Book keep the layouts they already
   had; only the shell around them was rebuilt. Their page-level CSS reads
   the old token names, so the old names are kept here and pointed at the
   new system. Nothing new should use them.

   The one real translation: mustard was the old single accent and it did
   two different jobs, buttons and panels. Buttons become dark green,
   panels become the shell grey, because the new system reserves bright
   green for status and nothing else.
========================================================== */
:root {
  --forest: var(--dark);
  --forest-deep: #14251F;
  --mustard: var(--dark);
  --mustard-deep: var(--dark-soft);
  --on-mustard: #FFFFFF;
  --cream: var(--white);
  --cream-warm: var(--shell);
  --taupe: rgba(30, 57, 50, 0.68);
  --taupe-dim: rgba(30, 57, 50, 0.5);
  --on-forest: #FFFFFF;
  --on-forest-dim: rgba(255, 255, 255, 0.68);

  --script: var(--sans);
  --display: var(--sans);
  --serif: var(--sans);
}

.voice-script,
.voice-display,
.voice-serif {
  font-family: var(--sans);
  font-style: normal;
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.voice-caps {
  font-family: var(--sans);
  font-stretch: 62%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.pill {
  display: inline-block;
  background: var(--dark);
  color: var(--white);
  border-radius: 999px;
  padding: 0.42em 1em;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
}

.panel { border-radius: var(--r-lg); padding: clamp(1.5rem, 5vw, 2.75rem); }
.panel-forest  { background: var(--dark);  color: var(--on-dark); }
.panel-mustard { background: var(--shell); color: var(--ink); }
.panel-cream   { background: var(--white); color: var(--ink); border: 1px solid var(--hair); box-shadow: var(--lift-2); }
.panel-forest .eyebrow  { color: var(--on-dark-faint); }
.panel-mustard .eyebrow { color: var(--ink-faint); }