/* Grassroots Classic 2026.
   Structure, spacing, type scale and control shapes are calibrated against the
   GRC marketing site (dev.grassrootsclub.co.nz) so the Classic reads as the same
   family. Palette stays the Classic sub brand: Leaf accents on Moss and Coal,
   near black body text on paper. */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("./assets/fonts/founders-grotesk-condensed-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/fonts/tiempos-text-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/fonts/tiempos-text-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/fonts/tiempos-text-regular-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- tokens (mirrors the marketing site) ---------- */
:root {
  --paper: #F2EDE3;
  --paper-2: #E9E2D2;
  --cream: #FFF9EE;
  --coal: #0B100D;
  --coal-2: #131A15;
  --ink: #131614;
  --ink-muted: #5C625B;
  --rule: rgba(19, 22, 20, 0.12);
  --coal-rule: rgba(255, 255, 255, 0.1);
  --moss: #1A4D2E;
  --moss-2: #246138;
  --leaf: #3CA673;
  --leaf-soft: #C5E0D2;
  /* The only leaf that clears 4.5:1 for small text on Moss or on the photo. */
  --leaf-hi: #5FC994;
  --alert: #A6301F;

  --display: "Founders Grotesk Condensed", "Impact", "Helvetica Neue Condensed",
    "Arial Narrow", sans-serif;
  --serif: "Tiempos Text", "Charter", "Georgia", serif;

  --t-section: clamp(36px, 5.4vw, 76px);
  --t-sub: clamp(26px, 3vw, 38px);
  --t-body-lg: clamp(17px, 1.3vw, 19px);
  --t-body: 17px;
  --t-utility: 13px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  --max: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(64px, 8vw, 112px);

  --radius-pill: 999px;
  --radius-card: 4px;
  --radius-input: 2px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
img, svg { max-width: 100%; display: block; }
p { margin: 0 0 0.9em; max-width: 62ch; }
a { color: var(--moss); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--moss-2);
  outline-offset: 2px;
}
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--moss); color: #fff; padding: 12px 16px;
}
.skip:focus { left: 0; }
.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
h1, h2, h3, legend, .display {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.section-h { font-size: var(--t-section); margin: 0 0 var(--space-sm); }
.sub-h { font-size: var(--t-sub); margin: 0 0 var(--space-sm); }
.eyebrow {
  font-family: var(--display);
  font-size: var(--t-utility); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--moss); margin: 0 0 var(--space-sm);
}
.lead { font-size: var(--t-body-lg); max-width: 56ch; }
section { padding: var(--section-pad) 0; }

/* ---------- brand bar ---------- */
.bar { background: var(--coal); color: #fff; }
.bar__inner {
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px;
}
.wordmark { display: inline-flex; line-height: 0; color: #fff; }
.wordmark svg { height: 30px; width: auto; }
.bar__back {
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--leaf-hi);
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.bar__back:hover { text-decoration: underline; }
.bar--hero { background: transparent; position: relative; z-index: 3; }

/* ---------- hero ---------- */
.hero {
  position: relative; padding: 0;
  background: var(--coal); isolation: isolate;
  min-height: 92vh;
  display: flex; flex-direction: column;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: grayscale(1) contrast(1.06) brightness(0.8);
}
/* Moss duotone: a moss plane multiplied into the greyscale photo. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--moss); mix-blend-mode: multiply; opacity: 0.6;
}
/* Scrim weighted to the top, where the photo's ceiling and banners are bright. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(9, 26, 17, 0.86) 0%,
    rgba(9, 26, 17, 0.56) 30%,
    rgba(9, 26, 17, 0.66) 58%,
    rgba(9, 26, 17, 0.95) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: var(--space-xl) var(--gutter) var(--space-lg);
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; flex: 1;
}
.hero__lockup { margin: 0 0 var(--space-md); }
.hero__lockup span { display: block; }
.hero__l1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(14px, 3.4vw, 20px); font-weight: 700; letter-spacing: 0.3em;
  color: #fff; margin-bottom: 6px;
}
.hero__l2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(44px, 15.6vw, 172px); font-weight: 700; line-height: 0.82;
  letter-spacing: -0.01em; color: var(--paper);
}
.hero__l3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(18px, 5vw, 36px); font-weight: 500; letter-spacing: 0.26em;
  color: var(--leaf-hi); margin-top: 10px;
}
.hero__facts {
  list-style: none; padding: 0; margin: 0 0 var(--space-lg);
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; letter-spacing: 0.08em;
  color: #fff;
}
.hero__price { color: var(--leaf-hi); }
.hero__cta { align-self: flex-start; }

/* ---------- buttons (marketing site pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 15px 26px;
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  text-decoration: none; text-align: center;
  background: var(--leaf); color: var(--coal);
  transition: background 120ms linear;
}
.btn:hover { background: #4FBB86; }
.btn:disabled { background: #7FA893; color: #24312A; cursor: not-allowed; }
.btn--lg { min-height: 56px; padding: 18px 34px; font-size: 15px; }
.btn--ghost {
  background: transparent; color: var(--moss);
  box-shadow: inset 0 0 0 2px var(--moss);
}
.btn--ghost:hover { background: rgba(26, 77, 46, 0.08); }
.btn--block { width: 100%; }

/* ---------- the Classic section ---------- */
.classic { background: var(--paper); }
.classic__intro { margin-bottom: var(--space-xl); }
.block-h {
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.005em; line-height: 1;
  margin: 0 0 var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

/* ---------- schedule board ---------- */
.board { list-style: none; margin: 0 0 var(--space-xl); padding: 0; max-width: 760px; }
.board li {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
@media (min-width: 560px) { .board li { grid-template-columns: 140px 1fr; } }
.board time {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: 0.04em; color: var(--moss); text-transform: uppercase;
}
.board-what {
  font-family: var(--display); font-size: 20px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.board-note {
  display: block; font-family: var(--serif); font-size: 16px;
  text-transform: none; letter-spacing: 0; color: var(--ink-muted); font-weight: 400;
}

/* ---------- divisions grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.grid > li { display: flex; }
.grid .card { flex: 1 1 auto; min-width: 0; }
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

.card {
  position: relative; display: flex; flex-direction: column;
  min-height: 168px; padding: 18px 16px 16px;
  background: var(--cream); border: 1px solid var(--rule);
  border-radius: var(--radius-card); text-align: left;
}
.card__sex {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 6px;
}
.card__name {
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(18px, 4.7vw, 32px); line-height: 1; letter-spacing: -0.01em;
  margin: 0 0 auto; overflow-wrap: anywhere;
}
.card__count {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss);
  margin: var(--space-sm) 0 12px; min-height: 22px;
}
.card__count.is-low { color: var(--alert); }
.card__count.is-hidden { visibility: hidden; }
.card .btn { width: 100%; min-height: 46px; padding: 12px 14px; }
.card--full { background: var(--paper-2); }

.skeleton {
  display: inline-block; height: 14px; width: 92px; border-radius: 2px;
  background: linear-gradient(90deg, var(--paper-2), var(--cream), var(--paper-2));
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite;
}
.skeleton--row { display: block; width: 100%; height: 40px; margin-bottom: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.grid-note { margin: var(--space-md) 0 0; color: var(--ink-muted); }
.board-intro { margin: 0 0 var(--space-md); }
.waitlist-form { margin-top: 10px; display: grid; gap: 8px; }
.waitlist-form input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius-input);
  font-family: var(--serif); font-size: 16px; background: #fff; color: var(--ink);
}
.waitlist-form label {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.waitlist-done { font-size: 16px; color: var(--moss); font-weight: 600; margin: 10px 0 0; }

/* ---------- form ---------- */
.form-wrap > * { max-width: 620px; }
.form-grid { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.field .hint { font-size: 16px; color: var(--ink-muted); }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius-input); appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--alert); border-width: 2px;
}
.field-error { font-size: 16px; color: var(--alert); font-weight: 600; }
.fieldset { border: 0; padding: 0; margin: 0; display: block; }
.fieldset > * + * { margin-top: var(--space-md); }
.fieldset > *:not(legend) { clear: both; }
/* A background line, not a border: a legend cuts a fieldset border in half.
   The float keeps the legend inside the box instead of straddling its top. */
.fieldset + .fieldset {
  padding-top: var(--space-lg);
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: top left;
}
.fieldset legend {
  float: left; width: 100%;
  font-size: var(--t-sub); margin: 0 0 var(--space-md);
}
.two-up { display: grid; gap: var(--space-md); }
@media (min-width: 560px) { .two-up { grid-template-columns: 1fr 1fr; } }

.check {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  align-items: start; padding: 9px 0; min-height: 44px; cursor: pointer;
}
.check input[type="checkbox"] {
  width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--moss);
}
.check span { font-size: 16px; line-height: 1.45; }

.waiver {
  max-height: 280px; overflow-y: auto; padding: 18px 20px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card);
  font-size: 16px; line-height: 1.55;
}
.waiver h3 { font-size: 20px; margin: 0 0 10px; }
.waiver h4 {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); margin: 20px 0 6px;
  font-weight: 700; line-height: 1.2;
}
.waiver p { max-width: none; }
.waiver strong { font-weight: 600; }

.collection {
  font-size: 16px; background: var(--paper-2); color: var(--ink-muted);
  border-left: 3px solid var(--moss); padding: 16px 18px;
  border-radius: var(--radius-input);
}
/* The policy recap is the last thing read before paying, so it stays plain
   text on the page rather than a second tinted panel next to the collection
   statement. */
.policy-recap {
  font-size: 16px; padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.collection p, .policy-recap p { max-width: none; }
.collection p:last-child { margin-bottom: 0; }
.policy-recap dl { margin: 0; }
.policy-recap dt {
  font-family: var(--display); font-size: var(--t-utility); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss);
  margin-top: 14px;
}
.policy-recap dt:first-of-type { margin-top: 0; }
.policy-recap dd { margin: 4px 0 0; }

.banner {
  padding: 16px 18px; border-radius: var(--radius-input); font-size: 16px;
  margin-bottom: var(--space-md);
  border-left: 3px solid var(--moss); background: var(--paper-2);
}
.banner--warn { border-left-color: var(--alert); background: #FBEDEA; color: #6E1F13; }
.banner--good { border-left-color: var(--leaf); background: #E6F4EC; }
.banner strong { font-weight: 600; }
.banner p:last-child { margin-bottom: 0; }

.spinner {
  width: 16px; height: 16px; margin-right: 10px; border-radius: 50%;
  border: 2px solid rgba(11, 16, 13, 0.35); border-top-color: var(--coal);
  animation: spin 700ms linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.price-line {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-top: var(--space-md); border-top: 1px solid var(--rule);
}
.price-line .amount {
  font-family: var(--display); font-size: 38px; font-weight: 700;
  letter-spacing: -0.01em;
}
.price-line .amount-note { font-size: 16px; color: var(--ink-muted); }

/* ---------- footer ---------- */
.footer { background: var(--coal); color: #E9E5DC; padding: var(--space-lg) 0; }
.footer a { color: var(--leaf-hi); }
.footer p { font-size: 16px; margin-bottom: 6px; }
.foot-mark {
  font-family: var(--display); font-size: var(--t-utility); letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(233, 229, 220, 0.66);
  margin-bottom: var(--space-sm);
}

/* ---------- partner page ---------- */
.partner-head { background: var(--moss); color: #fff; padding: var(--space-lg) 0; }
.partner-head h1 { font-size: clamp(32px, 7.5vw, 56px); margin: 0 0 var(--space-xs); }
.partner-head p { color: rgba(255, 255, 255, 0.86); margin: 0; }
.partner-head .eyebrow { color: var(--leaf-hi); }
.partner-body { padding: var(--space-lg) 0 var(--space-xl); }
.state-msg { max-width: 46ch; }

/* ---------- register page ---------- */
.register-head { background: var(--moss); color: #fff; padding: var(--space-lg) 0; }
.register-head h1 { font-size: clamp(34px, 8vw, 64px); margin: 0 0 var(--space-xs); }
.register-head p { color: rgba(255, 255, 255, 0.86); margin: 0; max-width: 48ch; }
.register-head .eyebrow { color: var(--leaf-hi); }
.register-body { padding: var(--space-lg) 0 var(--space-xl); }