@charset "utf-8";

/* ==========================================================================
   Holly Springs STEM Academy PTA
   Design system — built on Brand Guide v1.0, August 2026.

   The guide's own token block (guide p.10) is reproduced verbatim in the
   `brand` section below. Everything after it is derived. Two rules from the
   guide are load-bearing here and are worth stating once at the top:

     1. Gold is an accent, never a field and never text on a light ground.
        Gold on white is 1.9:1. Every gold surface in this file carries ink
        labels, and there is no rule anywhere that puts gold text on Chalk.
     2. Roughly 60% neutral / 25% maroon / 10% gold / 5% ink. The page is
        mostly Chalk. Maroon carries the weight. Gold marks one thing at a
        time — the active tab, a single underline, the primary button.

   No third hue appears in this file except the three semantic colors, which
   exist so "approved" and "over budget" cannot be confused with the school's
   primary color.
   ========================================================================== */

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

:root {
  /* brand — sampled from HSES Logo.png, not matched by eye */
  --hs-maroon: #8d2538;
  --hs-maroon-800: #4d141e;
  --hs-maroon-700: #691c2a;
  --hs-maroon-400: #d2556c;
  --hs-maroon-200: #eebec7;
  --hs-maroon-50: #faedef;
  --hs-gold: #f9b024;
  --hs-gold-700: #956304;
  --hs-gold-600: #d08b06;
  --hs-gold-300: #fbd07e;
  --hs-gold-100: #feedcd;
  --hs-ink: #0b0a09;
  --hs-chalk: #fbf7f2;

  /* surfaces & text — light */
  --hs-bg: var(--hs-chalk);
  --hs-surface: #ffffff;
  --hs-surface-2: #fdfaf7;
  --hs-text: var(--hs-ink);
  --hs-text-muted: #6e605c;
  --hs-rule: #e4dad3;

  /* the color maroon-role UI takes. Swaps to maroon-400 in dark mode, where
     full-strength maroon is 2.2:1 and fails as text. Use this, not --hs-maroon,
     for anything that has to READ as maroon. */
  --hs-brand-ui: var(--hs-maroon);
  /* the accent that is safe as text on the current ground. Gold in dark, maroon
     in light — because gold text on Chalk is the guide's headline mistake. */
  --hs-accent-text: var(--hs-maroon);

  /* semantic — deliberately outside the brand hues */
  --hs-success: #2e6b43;
  --hs-warning: #b26a00;
  --hs-danger: #b3261e;

  /* type */
  --hs-font-display: "Anton", "Oswald", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --hs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid scale, anchored on the guide's steps: 44 / 30 / 19 / 16 / 13.5 / 11 */
  --fs-hero: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);
  --fs-display: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.15vw, 1.875rem);
  --fs-h3: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: 0.84375rem;
  --fs-label: 0.6875rem;

  --lh-tight: 0.92;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --measure: 65ch;

  /* space — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(11 10 9 / 0.05), 0 1px 3px rgb(11 10 9 / 0.04);
  --shadow: 0 2px 4px rgb(11 10 9 / 0.04), 0 8px 20px -6px rgb(11 10 9 / 0.09);
  --shadow-lg: 0 4px 8px rgb(11 10 9 / 0.05), 0 20px 44px -12px rgb(11 10 9 / 0.16);
  --shadow-ring: 0 0 0 1px var(--hs-rule);

  --container: 76rem;
  --container-narrow: 46rem;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
  --dur-slow: 480ms;

  --header-h: 4.5rem;

  color-scheme: light;
}

/* Dark mode. Per the guide: gold becomes the accent (10.6:1 on ink);
   full-strength maroon is a fill only, never text.

   The site defaults to LIGHT for everyone — the layout stamps
   `data-theme="light"` on <html>, so this media block is inert unless someone
   has explicitly chosen dark. It is kept rather than deleted so that following
   the OS preference is a one-line change (drop the attribute from the layout)
   if that is ever wanted again. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hs-bg: #141011;
    --hs-surface: #1d1719;
    --hs-surface-2: #241d1f;
    --hs-text: #f3ebe7;
    --hs-text-muted: #a79a96;
    --hs-rule: #332829;
    --hs-brand-ui: var(--hs-maroon-400);
    --hs-accent-text: var(--hs-gold);
    --hs-success: #63b183;
    --hs-warning: #e0a34a;
    --hs-danger: #e8817a;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 8px 20px -6px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 20px 44px -12px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --hs-bg: #141011;
  --hs-surface: #1d1719;
  --hs-surface-2: #241d1f;
  --hs-text: #f3ebe7;
  --hs-text-muted: #a79a96;
  --hs-rule: #332829;
  --hs-brand-ui: var(--hs-maroon-400);
  --hs-accent-text: var(--hs-gold);
  --hs-success: #63b183;
  --hs-warning: #e0a34a;
  --hs-danger: #e8817a;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 8px 20px -6px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 20px 44px -12px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  min-height: 100svh;
  background: var(--hs-bg);
  color: var(--hs-text);
  font-family: var(--hs-font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "cv08" 1;
  overflow-x: hidden;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

a {
  color: var(--hs-brand-ui);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
  text-decoration-color: currentColor;
}

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

/* Gold as a focus ring is safe: it is a 3px graphic against the page, not text,
   and it is the one thing on screen we always want found first. */

::selection {
  background: var(--hs-maroon);
  color: #fff;
}

hr {
  border: none;
  border-top: 1px solid var(--hs-rule);
  margin: var(--sp-6) 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

/* Anton: display only. Never a paragraph, never below 18px, always caps with
   positive tracking — at default tracking the caps jam together. */
.display,
h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--hs-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}

h1,
.h1 {
  font-size: var(--fs-display);
  letter-spacing: 0.015em;
  line-height: 1.05;
}

.hero-title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}

h2,
.h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0.022em;
}

h3,
.h3 {
  font-size: var(--fs-h3);
  letter-spacing: 0.025em;
}

/* Sentence-case display, for the rare place where shouting is wrong —
   a person's name, a document title. Still Anton, still above 18px. */
.display--sentence {
  text-transform: none;
  letter-spacing: 0.005em;
}

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

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--hs-text-muted);
}

.small {
  font-size: var(--fs-small);
  line-height: 1.55;
}

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

/* The label style from the guide: 11px, caps, wide. Used for eyebrows and
   section markers. Inter, not Anton — Anton has a floor of 18px. */
.label {
  font-family: var(--hs-font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--hs-text-muted);
}

.label--accent {
  color: var(--hs-accent-text);
}

/* Money, budget tables, the ledger, anywhere digits stack. */
.tnum,
.money,
td.num,
.stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.prose > * + * {
  margin-block-start: var(--sp-4);
}

.prose h2 {
  margin-block-start: var(--sp-7);
}

.prose h3 {
  margin-block-start: var(--sp-6);
}

.prose ul,
.prose ol {
  padding-inline-start: 1.35em;
}

.prose li + li {
  margin-block-start: var(--sp-2);
}

.prose strong {
  font-weight: 700;
}

/* A single gold underline is the guide's sanctioned gold usage. One per view. */
.rule-gold {
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--hs-gold);
  margin-block: var(--sp-3) var(--sp-5);
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

@media (min-width: 48rem) {
  .container {
    padding-inline: var(--sp-6);
  }
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-9));
}

.section--tight {
  padding-block: var(--sp-7);
}

.section--ink {
  background: var(--hs-ink);
  color: #fff;
}

.section--ink .muted,
.section--ink .lede {
  color: #cfc6c2;
}

.section--ink .label {
  color: var(--hs-gold);
}

.section--maroon {
  background: var(--hs-maroon);
  color: #fff;
}

.section--maroon .muted,
.section--maroon .lede {
  color: #f3dfe3;
}

.section--maroon .label {
  color: var(--hs-gold);
}

.section--surface {
  background: var(--hs-surface);
}

.section-head {
  margin-block-end: var(--sp-6);
}

.section-head .lede {
  margin-block-start: var(--sp-3);
}

.stack > * + * {
  margin-block-start: var(--sp-4);
}

.stack-lg > * + * {
  margin-block-start: var(--sp-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

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

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

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

.split {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-8);
  }

  .split--sidebar {
    grid-template-columns: 1fr 20rem;
  }

  .split--reverse > :first-child {
    order: 2;
  }
}

.sticky-side {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}

/* --------------------------------------------------------------------------
   5. Skip link, banner
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-start: -100%;
  z-index: 200;
  background: var(--hs-ink);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start var(--dur) var(--ease);
}

.skip-link:focus {
  inset-block-start: var(--sp-3);
}

.demo-banner {
  background: var(--hs-ink);
  color: var(--hs-gold);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--sp-2) var(--sp-5);
  line-height: 1.4;
}

/* Gold on ink is 10.6:1 — one of the two places gold text is allowed. */

.demo-banner strong {
  color: #fff;
}

.demo-banner button {
  color: inherit;
  text-decoration: underline;
  margin-inline-start: var(--sp-3);
  font-size: inherit;
  opacity: 0.75;
}

.demo-banner button:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--hs-bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header[data-scrolled="true"] {
  border-block-end-color: var(--hs-rule);
  background: color-mix(in srgb, var(--hs-bg) 94%, transparent);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--hs-bg);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Lockup: the seal at 44px would break the guide's 96px floor, so the header
   pairs a drawn monogram with type instead of shrinking the seal. The full
   seal appears at legal size in the hero and the footer. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.lockup__mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.lockup__text {
  display: grid;
  line-height: 1.1;
}

.lockup__name {
  font-family: var(--hs-font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--hs-brand-ui);
}

.lockup__sub {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hs-text-muted);
}

@media (max-width: 26rem) {
  .lockup__sub {
    display: none;
  }
}

.nav {
  display: none;
  margin-inline-start: auto;
  align-items: center;
  gap: var(--sp-1);
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
  }
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hs-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav__link:hover {
  background: color-mix(in srgb, var(--hs-brand-ui) 8%, transparent);
  color: var(--hs-brand-ui);
}

.nav__link .icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  transition: transform var(--dur) var(--ease);
}

.nav__item:hover .nav__link .icon,
.nav__item:focus-within .nav__link .icon {
  transform: rotate(180deg);
}

/* Gold marks the active tab — the guide's own dashboard example. */
.nav__link[aria-current="page"] {
  color: var(--hs-brand-ui);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-3);
  bottom: 0.15rem;
  height: 3px;
  border-radius: 2px;
  background: var(--hs-gold);
}

.nav__panel {
  position: absolute;
  top: calc(100% + var(--sp-2));
  inset-inline-start: 0;
  min-width: 19rem;
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__panel a {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--hs-text);
  transition: background var(--dur) var(--ease);
}

.nav__panel a:hover {
  background: var(--hs-maroon-50);
}

:root[data-theme="dark"] .nav__panel a:hover {
  background: color-mix(in srgb, var(--hs-maroon-400) 14%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__panel a:hover {
    background: color-mix(in srgb, var(--hs-maroon-400) 14%, transparent);
  }
}

.nav__panel strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.nav__panel span {
  display: block;
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
}

@media (min-width: 62rem) {
  .header-actions {
    margin-inline-start: var(--sp-3);
  }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--hs-text);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.icon-btn:hover {
  background: color-mix(in srgb, var(--hs-text) 7%, transparent);
  border-color: var(--hs-rule);
}

.icon-btn__badge {
  position: absolute;
  top: -0.15rem;
  inset-inline-end: -0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--hs-maroon);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.icon-btn--cart {
  position: relative;
}

.search-trigger {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  height: 2.5rem;
  padding-inline: var(--sp-3);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-full);
  background: var(--hs-surface);
  color: var(--hs-text-muted);
  font-size: var(--fs-small);
  min-width: 13.5rem;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.search-trigger:hover {
  border-color: var(--hs-brand-ui);
  color: var(--hs-text);
}

@media (min-width: 68rem) {
  .search-trigger {
    display: inline-flex;
  }
}

kbd {
  font-family: var(--hs-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-sm);
  background: var(--hs-bg);
  margin-inline-start: auto;
  line-height: 1.4;
}

.nav-toggle {
  display: inline-grid;
}

@media (min-width: 62rem) {
  .nav-toggle {
    display: none;
  }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--hs-bg);
  padding: var(--sp-5);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--sp-4);
}

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--radius);
  border-block-end: 1px solid var(--hs-rule);
  text-decoration: none;
  color: var(--hs-text);
  font-family: var(--hs-font-display);
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mobile-nav a[aria-current="page"] {
  color: var(--hs-brand-ui);
}

.mobile-nav .mobile-nav__sub {
  font-family: var(--hs-font-body);
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: 0;
  padding-block: var(--sp-2);
  padding-inline-start: var(--sp-5);
  border: none;
  color: var(--hs-text-muted);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8125rem var(--sp-5);
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Primary action — maroon carries the weight. */
.btn--primary {
  background: var(--hs-maroon);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--hs-maroon-700);
  box-shadow: var(--shadow);
}

/* Highlight action — gold field, INK label. Never white on gold: 1.9:1. */
.btn--gold {
  background: var(--hs-gold);
  color: var(--hs-ink);
}

.btn--gold:hover {
  background: var(--hs-gold-300);
}

.btn--secondary {
  background: transparent;
  color: var(--hs-text);
  border-color: var(--hs-rule);
}

.btn--secondary:hover {
  border-color: var(--hs-brand-ui);
  color: var(--hs-brand-ui);
  background: color-mix(in srgb, var(--hs-brand-ui) 6%, transparent);
}

.btn--ghost {
  background: transparent;
  color: var(--hs-brand-ui);
  padding-inline: var(--sp-3);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--hs-brand-ui) 9%, transparent);
}

/* On a maroon or ink field, the outline button needs a light border. */
.section--maroon .btn--secondary,
.section--ink .btn--secondary,
.hero .btn--secondary {
  color: #fff;
  border-color: rgb(255 255 255 / 0.35);
}

.section--maroon .btn--secondary:hover,
.section--ink .btn--secondary:hover,
.hero .btn--secondary:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: #fff;
  color: #fff;
}

.btn--lg {
  padding: 1rem var(--sp-6);
  font-size: 1.0625rem;
}

.btn--sm {
  padding: 0.5rem var(--sp-4);
  font-size: var(--fs-small);
}

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

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn--busy {
  position: relative;
  color: transparent !important;
}

.btn--busy::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  color: #fff;
  animation: spin 700ms linear infinite;
}

.btn--gold.btn--busy::after {
  color: var(--hs-ink);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   8. Cards & surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease);
}

.card--link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--hs-brand-ui) 40%, var(--hs-rule));
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card--ink {
  background: var(--hs-ink);
  color: #fff;
  border-color: transparent;
}

.card--maroon {
  background: var(--hs-maroon);
  color: #fff;
  border-color: transparent;
}

.card--maroon .muted,
.card--ink .muted {
  color: #d8ccc9;
}

.card__title {
  margin-block-end: var(--sp-2);
}

.card__body > * + * {
  margin-block-start: var(--sp-3);
}

/* Quick-action tiles: the four things most people came for. */
.quick-actions {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.quick-action {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease);
}

.quick-action:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--hs-brand-ui) 45%, var(--hs-rule));
}

.quick-action__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--hs-maroon);
  color: #fff;
  flex-shrink: 0;
}

.quick-action:nth-child(2) .quick-action__icon {
  background: var(--hs-gold);
  color: var(--hs-ink);
}

.quick-action__label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.quick-action__note {
  display: block;
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

/* --------------------------------------------------------------------------
   9. Badges & pills
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.badge--maroon {
  background: var(--hs-maroon);
  color: #fff;
}

.badge--maroon-700 {
  background: var(--hs-maroon-700);
  color: #fff;
}

.badge--maroon-400 {
  background: var(--hs-maroon-400);
  color: var(--hs-ink);
}

.badge--gold {
  background: var(--hs-gold);
  color: var(--hs-ink);
}

.badge--gold-600 {
  background: var(--hs-gold-600);
  color: var(--hs-ink);
}

.badge--ink {
  background: var(--hs-ink);
  color: #fff;
}

.badge--soft {
  background: var(--hs-maroon-50);
  color: var(--hs-maroon-700);
}

.badge--outline {
  border: 1px solid var(--hs-rule);
  color: var(--hs-text-muted);
}

.badge--success {
  background: color-mix(in srgb, var(--hs-success) 15%, transparent);
  color: var(--hs-success);
}

.badge--danger {
  background: color-mix(in srgb, var(--hs-danger) 15%, transparent);
  color: var(--hs-danger);
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--hs-maroon);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Depth without a gradient on the mark itself — the guide bans effects on the
   seal, not on the page behind it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 40rem at 78% -10%, color-mix(in srgb, var(--hs-maroon-400) 55%, transparent), transparent 62%),
    radial-gradient(45rem 35rem at 8% 108%, var(--hs-maroon-800), transparent 64%);
}

/* Photograph on the right, bleeding off the edge, fading into the maroon field
   so there is no hard seam. Only rendered when the file exists — the build omits
   the element otherwise and the hero falls back to plain maroon.

   Two knobs worth knowing about, both set here rather than buried:
   `--hero-photo-width` is how far across the photo reaches, and
   `--hero-photo-pos` is the crop. A gym shot is usually worth pulling upward
   (a value below 50%) so heads sit in frame rather than floor. */
.hero__photo {
  --hero-photo-width: 58%;
  /* Centered. The picture is wider than this slot, so the crop is horizontal and
     the vertical value only bites on very wide, short viewports. Center puts the
     seal on the maroon dado rather than on anyone's face. */
  --hero-photo-pos: 50% 45%;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--hero-photo-width);
  z-index: -2;
  background-image: url("/assets/img/hero-gym.jpg");
  background-size: cover;
  background-position: var(--hero-photo-pos);
  background-repeat: no-repeat;
}

/* The blend itself. Solid maroon where the photo starts, thinning to the right
   so the picture reads without ever fully leaving the brand field. The seal sits
   around 70% across, where this is still maroon-dominant — which is what keeps
   it legible and keeps the guide's "quiet ground under the mark" rule intact. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--hs-maroon) 0%,
    color-mix(in srgb, var(--hs-maroon) 92%, transparent) 18%,
    color-mix(in srgb, var(--hs-maroon) 62%, transparent) 48%,
    color-mix(in srgb, var(--hs-maroon) 34%, transparent) 100%
  );
}

/* Below the hero's two-column breakpoint the text would sit on top of the
   photograph, so the photo comes out entirely and the maroon field stands alone. */
@media (max-width: 61.99rem) {
  .hero__photo {
    display: none;
  }
}

/* Fine grain. Keeps a large maroon field from looking like flat printer ink. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner {
  display: grid;
  gap: var(--sp-7);
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9));
  align-items: center;
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--sp-8);
  }
}

.hero__eyebrow {
  color: var(--hs-gold);
  margin-block-end: var(--sp-4);
}

.hero__title .accent {
  color: var(--hs-gold);
}

/* Gold on maroon is 4.6:1 — AA for body, AAA at 24px+. This is a display
   headline well above 24px, so it is comfortably inside the rule. */

.hero__lede {
  margin-block-start: var(--sp-5);
  color: #f4e2e5;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  max-width: 34rem;
}

.hero__actions {
  margin-block-start: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero__seal {
  justify-self: center;
  width: min(20rem, 62vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.hero__seal img {
  width: 100%;
  height: auto;
  /* Clear space: 25% of the seal diameter on all four sides. */
  padding: 12.5%;
}

.hero__proof {
  margin-block-start: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.18);
}

.hero__proof div {
  min-width: 6rem;
}

.hero__proof dt {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #e8ccd2;
}

.hero__proof dd {
  font-family: var(--hs-font-display);
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Page header for interior pages */
.page-head {
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-8)) var(--sp-6);
  border-block-end: 1px solid var(--hs-rule);
}

.page-head .lede {
  margin-block-start: var(--sp-4);
}

.breadcrumb {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
  margin-block-end: var(--sp-3);
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--hs-brand-ui);
}

/* --------------------------------------------------------------------------
   11. Stats, thermometer, spend chart
   -------------------------------------------------------------------------- */

.stat {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
}

.stat-value {
  display: block;
  font-family: var(--hs-font-display);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--hs-brand-ui);
}

.stat-label {
  display: block;
  margin-block-start: var(--sp-3);
  font-weight: 600;
  font-size: 0.9375rem;
}

.stat-note {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

.section--ink .stat,
.section--maroon .stat {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.14);
}

.section--ink .stat-value,
.section--maroon .stat-value {
  color: var(--hs-gold);
}

.section--ink .stat-note,
.section--maroon .stat-note {
  color: #cfc2be;
}

/* Fundraising thermometer */
.thermo {
  display: grid;
  gap: var(--sp-4);
}

.thermo__figures {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.thermo__raised {
  font-family: var(--hs-font-display);
  font-size: clamp(2.5rem, 2rem + 2.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.thermo__goal {
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

.thermo__track {
  position: relative;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--hs-ink) 10%, transparent);
  overflow: hidden;
}

.section--ink .thermo__track,
.section--maroon .thermo__track {
  background: rgb(255 255 255 / 0.16);
}

.thermo__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--hs-gold);
  width: 0;
  transition: width 1.4s var(--ease-out);
}

.thermo__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hs-text-muted);
}

.section--ink .thermo__ticks,
.section--maroon .thermo__ticks {
  color: #cfc2be;
}

/* "Where the money goes" — a stacked bar plus a legend. Series colors come
   from the maroon and gold ramps only. */
.spend-bar {
  display: flex;
  height: 3rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hs-rule);
}

.spend-bar__seg {
  position: relative;
  transition: flex-grow var(--dur-slow) var(--ease-out);
}

.spend-legend {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.spend-legend li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block-end: 1px solid var(--hs-rule);
  max-width: none;
}

.spend-legend .swatch {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.spend-legend .amount {
  margin-inline-start: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.swatch-maroon { background: var(--hs-maroon); }
.swatch-maroon-800 { background: var(--hs-maroon-800); }
.swatch-maroon-700 { background: var(--hs-maroon-700); }
.swatch-maroon-400 { background: var(--hs-maroon-400); }
.swatch-gold { background: var(--hs-gold); }
.swatch-gold-600 { background: var(--hs-gold-600); }
.swatch-ink { background: var(--hs-ink); }

/* --------------------------------------------------------------------------
   12. Events
   -------------------------------------------------------------------------- */

.event-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease);
}

.event-card:hover {
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--hs-brand-ui) 35%, var(--hs-rule));
}

.event-card[hidden] {
  display: none;
}

.date-chip {
  display: grid;
  place-content: center;
  text-align: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius);
  background: var(--hs-maroon);
  color: #fff;
  flex-shrink: 0;
  line-height: 1;
}

.date-chip__month {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.85;
}

.date-chip__day {
  font-family: var(--hs-font-display);
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  margin-block-start: 0.1rem;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
  margin-block-start: var(--sp-2);
}

.event-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.event-card__meta .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.event-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
}

.event-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
}

.chip {
  padding: 0.4rem var(--sp-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--hs-rule);
  background: var(--hs-surface);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--hs-text-muted);
  transition: all var(--dur) var(--ease);
}

.chip:hover {
  border-color: var(--hs-brand-ui);
  color: var(--hs-text);
}

.chip[aria-pressed="true"] {
  background: var(--hs-maroon);
  border-color: var(--hs-maroon);
  color: #fff;
}

.countdown {
  display: flex;
  gap: var(--sp-3);
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  text-align: center;
  min-width: 3.25rem;
}

.countdown__num {
  display: block;
  font-family: var(--hs-font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.countdown__label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
  margin-block-start: 0.2rem;
}

/* --------------------------------------------------------------------------
   13. Spirit Rock calendar
   -------------------------------------------------------------------------- */

.rock-cal {
  display: grid;
  gap: var(--sp-6);
}

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

.rock-cal__month {
  font-family: var(--hs-font-display);
  font-size: 1.375rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rock-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
}

.rock-cal__dow {
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hs-text-muted);
  padding-block: var(--sp-2);
}

.rock-day {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hs-rule);
  background: var(--hs-surface);
  display: grid;
  place-content: center;
  gap: 0.15rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  transition: all var(--dur) var(--ease);
}

.rock-day--empty {
  border: none;
  background: none;
}

.rock-day--available {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--hs-maroon) 30%, var(--hs-rule));
}

.rock-day--available::after {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--hs-gold);
  margin-inline: auto;
}

.rock-day--available:hover {
  background: var(--hs-maroon);
  color: #fff;
  border-color: var(--hs-maroon);
  transform: scale(1.06);
  z-index: 1;
}

.rock-day--available[aria-pressed="true"] {
  background: var(--hs-maroon);
  color: #fff;
  border-color: var(--hs-maroon);
  box-shadow: 0 0 0 3px var(--hs-gold);
}

.rock-day--booked {
  background: var(--hs-maroon-50);
  color: var(--hs-maroon-700);
  border-color: var(--hs-maroon-200);
  cursor: not-allowed;
}

.rock-day--blackout {
  background: color-mix(in srgb, var(--hs-ink) 5%, transparent);
  color: var(--hs-text-muted);
  border-style: dashed;
  cursor: not-allowed;
}

.rock-day--past {
  opacity: 0.35;
  cursor: not-allowed;
}

.rock-cal__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

.rock-cal__key span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.rock-cal__key i {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
  border: 1px solid var(--hs-rule);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   14. Shop
   -------------------------------------------------------------------------- */

.product-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
  align-items: stretch;
}

/* The filter wrapper sits between the grid and the card, so the card needs to
   be told to fill it — otherwise cards with two option menus stand taller than
   their neighbors and the Add-to-cart buttons stop lining up. */
[data-shop-item] {
  display: flex;
}

[data-shop-item] > .product {
  flex: 1;
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.product__art {
  aspect-ratio: 4 / 3;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.product__art svg {
  width: 62%;
  height: auto;
}

.product__flag {
  position: absolute;
  top: var(--sp-3);
  inset-inline-start: var(--sp-3);
}

.product__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.product__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.product__blurb {
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
  flex: 1;
}

.product__price {
  font-family: var(--hs-font-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--hs-brand-ui);
}

.product__options {
  display: grid;
  gap: var(--sp-2);
}

.field {
  display: grid;
  gap: var(--sp-1);
}

.field label,
.field > .label {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hs-text-muted);
}

select,
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  width: 100%;
  padding: 0.6rem var(--sp-3);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-sm);
  background: var(--hs-bg);
  font-size: var(--fs-small);
  transition: border-color var(--dur) var(--ease);
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--hs-brand-ui);
}

/* Cart drawer */
.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(26rem, 100vw);
  z-index: 170;
  background: var(--hs-bg);
  border-inline-start: 1px solid var(--hs-rule);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.drawer[data-open="true"] {
  transform: translateX(0);
}

.drawer__head,
.drawer__foot {
  padding: var(--sp-5);
  border-block-end: 1px solid var(--hs-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.drawer__foot {
  border-block-end: none;
  border-block-start: 1px solid var(--hs-rule);
  display: grid;
  gap: var(--sp-3);
}

.drawer__body {
  overflow-y: auto;
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.cart-line {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--hs-rule);
}

.cart-line__art {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cart-line__art svg {
  width: 70%;
}

.cart-line__name {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.cart-line__variant {
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.qty button {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  color: var(--hs-text-muted);
  transition: background var(--dur) var(--ease);
}

.qty button:hover {
  background: color-mix(in srgb, var(--hs-text) 8%, transparent);
  color: var(--hs-text);
}

.qty span {
  min-width: 1.75rem;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
}

.cart-total .money {
  font-family: var(--hs-font-display);
  font-size: 1.625rem;
  letter-spacing: 0.02em;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgb(11 10 9 / 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.scrim[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  color: var(--hs-text-muted);
}

.empty-state .icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto;
  margin-block-end: var(--sp-3);
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   15. Command palette
   -------------------------------------------------------------------------- */

.palette {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: start center;
  padding: clamp(var(--sp-5), 10vh, var(--sp-9)) var(--sp-4);
  background: rgb(11 10 9 / 0.45);
  backdrop-filter: blur(3px);
}

.palette[hidden] {
  display: none;
}

.palette__box {
  width: min(38rem, 100%);
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: palette-in 220ms var(--ease-out);
}

@keyframes palette-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
}

.palette__search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--hs-rule);
}

.palette__search input {
  border: none;
  background: none;
  padding: 0;
  font-size: 1.0625rem;
  flex: 1;
}

.palette__search input:focus {
  outline: none;
}

.palette__results {
  max-height: min(24rem, 55vh);
  overflow-y: auto;
  padding: var(--sp-2);
}

.palette__group {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hs-text-muted);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}

.palette__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border-radius: var(--radius);
  text-align: start;
  text-decoration: none;
  color: var(--hs-text);
  transition: background var(--dur) var(--ease);
}

.palette__item[data-active="true"],
.palette__item:hover {
  background: var(--hs-maroon-50);
}

:root[data-theme="dark"] .palette__item[data-active="true"],
:root[data-theme="dark"] .palette__item:hover {
  background: color-mix(in srgb, var(--hs-maroon-400) 16%, transparent);
}

.palette__item .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--hs-brand-ui);
  flex-shrink: 0;
}

.palette__item strong {
  font-weight: 600;
  font-size: 0.9375rem;
  display: block;
}

.palette__item span {
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
  display: block;
}

.palette__foot {
  padding: var(--sp-3) var(--sp-5);
  border-block-start: 1px solid var(--hs-rule);
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   16. Accordion, tables, docs
   -------------------------------------------------------------------------- */

.accordion {
  border-block-start: 1px solid var(--hs-rule);
}

.accordion details {
  border-block-end: 1px solid var(--hs-rule);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary:hover {
  color: var(--hs-brand-ui);
}

.accordion summary .icon {
  flex-shrink: 0;
  color: var(--hs-text-muted);
  transition: transform var(--dur) var(--ease);
}

.accordion details[open] summary .icon {
  transform: rotate(180deg);
}

.accordion__panel {
  padding-block-end: var(--sp-5);
  color: var(--hs-text-muted);
}

.doc-list {
  display: grid;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
}

.doc-list li {
  max-width: none;
}

.doc {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius);
  background: var(--hs-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.doc:hover {
  border-color: var(--hs-brand-ui);
  background: var(--hs-maroon-50);
}

:root[data-theme="dark"] .doc:hover {
  background: color-mix(in srgb, var(--hs-maroon-400) 12%, transparent);
}

.doc__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--hs-maroon-50);
  color: var(--hs-maroon-700);
  flex-shrink: 0;
}

:root[data-theme="dark"] .doc__icon {
  background: color-mix(in srgb, var(--hs-maroon-400) 18%, transparent);
  color: var(--hs-maroon-400);
}

.doc__title {
  font-weight: 600;
  font-size: 0.9375rem;
}

.doc__desc {
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

.doc__meta {
  margin-inline-start: auto;
  text-align: end;
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
  flex-shrink: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  text-align: start;
  padding: var(--sp-3);
  border-block-end: 1px solid var(--hs-rule);
}

th {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-text-muted);
  font-weight: 700;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--hs-maroon) 3%, transparent);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   17. People, sponsors, volunteer
   -------------------------------------------------------------------------- */

.person {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-lg);
}

.avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--hs-maroon);
  color: #fff;
  font-family: var(--hs-font-display);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* A real photo rather than initials. Headshots arrive in every crop a phone
   produces, so the box is fixed and the image is covered inside it — otherwise
   one portrait sets the row height for the whole board. The gold ring is the
   accent doing the job the brand guide reserves it for: small, on maroon-
   adjacent content, never as text. */
.avatar--photo {
  object-fit: cover;
  object-position: center 30%;
  background: var(--hs-surface-2);
  box-shadow: 0 0 0 2px var(--hs-gold);
}

.person__role {
  font-size: var(--fs-label);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hs-accent-text);
}

.person__name {
  font-weight: 700;
  font-size: 1.0625rem;
}

.tier {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--hs-surface);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius-lg);
  position: relative;
}

.tier--popular {
  border-color: var(--hs-maroon);
  box-shadow: 0 0 0 1px var(--hs-maroon);
}

.tier__flag {
  position: absolute;
  top: calc(var(--sp-4) * -1);
  inset-inline-start: var(--sp-6);
}

.tier__price {
  font-family: var(--hs-font-display);
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.tier__benefits {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  flex: 1;
}

.tier__benefits li {
  display: flex;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  max-width: none;
}

.tier__benefits .icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-block-start: 0.2rem;
  color: var(--hs-success);
}

.partner-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}

.partner {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius);
  background: var(--hs-surface);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.partner:hover {
  border-color: var(--hs-brand-ui);
  transform: translateY(-2px);
}

.partner__name {
  font-family: var(--hs-font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.partner__blurb {
  font-size: var(--fs-small);
  color: var(--hs-text-muted);
}

/* A tile whose logo the build downloaded from the dashboard. Logos arrive in
   every shape a business has ever used, so the box is fixed and the image is
   contained inside it — otherwise one wide banner sets the row height for
   everybody. */
.partner__logo {
  justify-self: center;
  max-width: 100%;
  height: 3.5rem;
  object-fit: contain;
  object-position: center;
}

/* The name reads as a caption under a logo, not as the headline it is on a
   wordmark-only tile. */
.partner--logo .partner__name {
  font-family: var(--hs-font-body);
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hs-text-muted);
}

.role {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--hs-rule);
  border-radius: var(--radius);
  background: var(--hs-surface);
}

.role__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.role__title {
  font-weight: 700;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--hs-ink);
  color: #cfc6c2;
  padding-block: var(--sp-8) var(--sp-6);
  margin-block-start: var(--sp-8);
}

.site-footer h2,
.site-footer h3 {
  color: #fff;
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.footer-brand {
  display: grid;
  gap: var(--sp-4);
  max-width: 22rem;
}

.footer-seal {
  width: 6rem;
  height: 6rem;
}

.footer-col h3 {
  font-size: var(--fs-label);
  font-family: var(--hs-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-gold);
  margin-block-end: var(--sp-3);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.footer-col a {
  color: #cfc6c2;
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-affil {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
}

.footer-affil img {
  height: 2.25rem;
  width: auto;
  opacity: 0.85;
}

.footer-bottom {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--fs-small);
}

.footer-social {
  display: flex;
  gap: var(--sp-2);
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid rgb(255 255 255 / 0.18);
  color: #cfc6c2;
  transition: all var(--dur) var(--ease);
}

.footer-social a:hover {
  background: var(--hs-gold);
  border-color: var(--hs-gold);
  color: var(--hs-ink);
}

/* --------------------------------------------------------------------------
   19. Toast
   -------------------------------------------------------------------------- */

.toast-region {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline: var(--sp-5);
  z-index: 210;
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  background: var(--hs-ink);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toast-in 260ms var(--ease-out);
  pointer-events: auto;
  max-width: min(28rem, 100%);
}

.toast .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--hs-gold);
  flex-shrink: 0;
}

.toast--error .icon {
  color: var(--hs-danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* --------------------------------------------------------------------------
   20. Motion
   -------------------------------------------------------------------------- */

/* Scoped to `.js`, which the inline head script adds. Without that scope a
   visitor whose JavaScript failed to load would get a page full of invisible
   `opacity: 0` cards and no way to know content was missing. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.js [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .drawer {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */

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

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-block-start: 0; }
.mt-3 { margin-block-start: var(--sp-3); }
.mt-4 { margin-block-start: var(--sp-4); }
.mt-5 { margin-block-start: var(--sp-5); }
.mt-6 { margin-block-start: var(--sp-6); }
.mt-7 { margin-block-start: var(--sp-7); }
.flex-1 { flex: 1; }
.list-none { list-style: none; padding: 0; }
.no-max { max-width: none; }
.full-bleed-list li { max-width: none; }

/* --------------------------------------------------------------------------
   22. Dark-mode parity

   A handful of rules above are written against the explicit toggle
   (`[data-theme="dark"]`) because they tint a surface rather than swap a token.
   They are repeated here for the system-preference path, so the default
   "follow my OS" setting looks identical to the toggled one.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .palette__item[data-active="true"],
  :root:not([data-theme="light"]) .palette__item:hover {
    background: color-mix(in srgb, var(--hs-maroon-400) 16%, transparent);
  }

  :root:not([data-theme="light"]) .doc:hover {
    background: color-mix(in srgb, var(--hs-maroon-400) 12%, transparent);
  }

  :root:not([data-theme="light"]) .doc__icon {
    background: color-mix(in srgb, var(--hs-maroon-400) 18%, transparent);
    color: var(--hs-maroon-400);
  }

  /* maroon-50 is a light-mode tint; on a dark ground it blows out. */
  :root:not([data-theme="light"]) .badge--soft {
    background: color-mix(in srgb, var(--hs-maroon-400) 20%, transparent);
    color: var(--hs-maroon-200);
  }
}

:root[data-theme="dark"] .badge--soft {
  background: color-mix(in srgb, var(--hs-maroon-400) 20%, transparent);
  color: var(--hs-maroon-200);
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --hs-bg: #fff;
    --hs-surface: #fff;
    --hs-text: #000;
    --hs-text-muted: #444;
    --hs-rule: #bbb;
  }

  .site-header,
  .mobile-nav,
  .palette,
  .drawer,
  .scrim,
  .toast-region,
  .demo-banner,
  .skip-link,
  .event-card__actions,
  .hero__actions {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .hero,
  .section--maroon,
  .section--ink {
    background: #fff !important;
    color: #000 !important;
  }

  .hero__title .accent,
  .section--ink .label,
  .section--maroon .label {
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }

  .card,
  .event-card,
  .product {
    break-inside: avoid;
    box-shadow: none;
  }
}