/* ==========================================================================
   BBQOps storefront
   Palette comes straight from the brand kit (docs/brand-kit): pit charcoal,
   ember orange, fire gold, smoke cream, hickory tan, bark brown.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --char-950: #150d0b;
  --char-900: #1a100d;
  --char-800: #201512;
  --char-700: #2c1e19;
  --char-600: #3b2a23;
  --ember: #e45720;
  --ember-hi: #ff7a3d;
  --ember-ink: #b8400d;
  --gold: #ffb23f;
  --cream: #faf6ef;
  --cream-2: #f1e9dc;
  --tan: #cdb79b;
  --bark: #5f4a3b;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wrap: 1180px;
  --nav-h: 72px;
  /* Side gutters grow with the screen: phone, tablet, desktop. */
  --gutter: 1.25rem;

  color-scheme: dark;
}

/* Section themes. Components read these, so the same markup works on either. */
.section-dark,
.hero,
.page-hero,
.stats,
.footer {
  --bg: var(--char-800);
  --fg: var(--cream);
  --muted: rgba(250, 246, 239, 0.68);
  /* 0.52 keeps small mono labels at 5:1+ on the darkest surfaces (0.46 measured 4.4:1, under AA). */
  --faint: rgba(250, 246, 239, 0.52);
  --surface: rgba(250, 246, 239, 0.05);
  --surface-hi: rgba(250, 246, 239, 0.09);
  --line: rgba(250, 246, 239, 0.12);
  --accent: var(--ember-hi);
  --accent-ink: var(--gold);
  --shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
  background: var(--bg);
  color: var(--fg);
}
.section-cream {
  --bg: var(--cream);
  --fg: var(--char-800);
  --muted: var(--bark);
  /* #8a7565 measured 4.36:1 on white; this is 5.4:1 on white and 5.0:1 on the cream. */
  --faint: #7a6657;
  --surface: #ffffff;
  --surface-hi: #ffffff;
  --line: rgba(32, 21, 18, 0.12);
  --accent: var(--ember);
  --accent-ink: var(--ember-ink);
  --shadow: 0 1px 0 rgba(32, 21, 18, 0.04), 0 18px 40px -26px rgba(32, 21, 18, 0.35);
  background: var(--bg);
  color: var(--fg);
}

/* ---------------------------------------------------------------- base --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--char-950);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cream);
  background: var(--char-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ico {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--gold);
  color: var(--char-950);
  font-weight: 700;
  transition: top 0.2s;
}
.skip:focus {
  top: 1rem;
}

h1,
h2 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.7rem, 6.4vw, 5.2rem);
}
h2 {
  font-size: clamp(1.95rem, 3.8vw, 3.1rem);
}
h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--muted);
  max-width: 60ch;
  text-wrap: pretty;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.2s,
    gap 0.2s var(--ease);
}
.textlink:hover {
  border-color: currentColor;
  gap: 0.7rem;
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0 1.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.25s,
    background 0.2s,
    border-color 0.2s;
}
.btn .ico {
  transition: transform 0.2s var(--ease);
}
.btn:hover .ico {
  transform: translateX(3px);
}
.btn-primary {
  color: #1a0f0b;
  background: linear-gradient(135deg, var(--ember-hi), var(--ember) 55%, #f0661f);
  box-shadow:
    0 10px 30px -10px rgba(228, 87, 32, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -10px rgba(255, 122, 61, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-ghost {
  color: var(--cream);
  border-color: rgba(250, 246, 239, 0.28);
  background: rgba(250, 246, 239, 0.04);
}
.btn-ghost:hover {
  border-color: rgba(250, 246, 239, 0.6);
  background: rgba(250, 246, 239, 0.1);
}
.btn-ghost-dark {
  color: var(--char-800);
  border-color: rgba(32, 21, 18, 0.28);
}
.btn-ghost-dark:hover {
  border-color: var(--char-800);
  background: rgba(32, 21, 18, 0.05);
}
.section-dark .btn-ghost-dark {
  color: var(--cream);
  border-color: rgba(250, 246, 239, 0.28);
}
.section-dark .btn-ghost-dark:hover {
  border-color: rgba(250, 246, 239, 0.6);
  background: rgba(250, 246, 239, 0.08);
}
.btn-dark {
  color: var(--cream);
  background: var(--char-900);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
.btn-dark:hover {
  transform: translateY(-2px);
  background: #000;
}
.btn-ghost-light {
  color: var(--char-950);
  border-color: rgba(21, 13, 11, 0.45);
}
.btn-ghost-light:hover {
  background: rgba(21, 13, 11, 0.08);
  border-color: var(--char-950);
}

/* ----------------------------------------------------------------- nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Nearly opaque on purpose: browsers tint their toolbar from the colour at
     the top edge of the page, and this must match theme-color (#1a100d). */
  background: rgba(26, 16, 13, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(250, 246, 239, 0.08);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: 54px;
  width: auto;
}
.footer-brand .brand-logo {
  height: 72px;
}
@media (max-width: 640px) {
  .brand-logo {
    height: 44px;
  }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-links > a:not(.btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  font-size: 0.94rem;
  font-weight: 560;
  color: rgba(250, 246, 239, 0.74);
  text-decoration: none;
  border-radius: 999px;
  transition:
    color 0.2s,
    background 0.2s;
}
.nav-links > a:not(.btn):hover {
  color: var(--cream);
  background: rgba(250, 246, 239, 0.07);
}
.nav-links > a[aria-current="page"] {
  color: var(--cream);
}
.nav-links > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ember);
}
.nav-cta {
  margin-left: 0.6rem;
  min-height: 42px;
  padding: 0 1.1rem;
  font-size: 0.9rem;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(250, 246, 239, 0.18);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .ico {
  width: 22px;
  height: 22px;
}
.nav-toggle .ico-close,
.nav.open .nav-toggle .ico-open {
  display: none;
}
.nav.open .nav-toggle .ico-close {
  display: block;
}

/* ---------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.glow-a {
  width: 720px;
  height: 720px;
  left: -220px;
  bottom: -320px;
  background: radial-gradient(circle, var(--ember), transparent 68%);
  animation: breathe 9s ease-in-out infinite;
}
.glow-b {
  width: 640px;
  height: 640px;
  right: -180px;
  top: -260px;
  background: radial-gradient(circle, rgba(255, 178, 63, 0.7), transparent 68%);
  animation: breathe 11s ease-in-out -4s infinite;
}
.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 246, 239, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 246, 239, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.68;
  }
}

.embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.embers i {
  position: absolute;
  bottom: -14px;
  left: var(--x, 50%);
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffe0a8, var(--ember));
  box-shadow: 0 0 12px 2px rgba(255, 122, 61, 0.7);
  opacity: 0;
  animation: rise var(--t, 10s) linear var(--d, 0s) infinite;
}
.embers i:nth-child(1) {
  --x: 4%;
  --s: 3px;
  --t: 11s;
  --d: 0s;
  --dx: 24px;
}
.embers i:nth-child(2) {
  --x: 11%;
  --s: 5px;
  --t: 14s;
  --d: -3s;
  --dx: -18px;
}
.embers i:nth-child(3) {
  --x: 18%;
  --s: 3px;
  --t: 9s;
  --d: -6s;
  --dx: 30px;
}
.embers i:nth-child(4) {
  --x: 26%;
  --s: 4px;
  --t: 12s;
  --d: -1s;
  --dx: -26px;
}
.embers i:nth-child(5) {
  --x: 33%;
  --s: 2px;
  --t: 10s;
  --d: -8s;
  --dx: 14px;
}
.embers i:nth-child(6) {
  --x: 41%;
  --s: 5px;
  --t: 15s;
  --d: -4s;
  --dx: -34px;
}
.embers i:nth-child(7) {
  --x: 48%;
  --s: 3px;
  --t: 11s;
  --d: -9s;
  --dx: 22px;
}
.embers i:nth-child(8) {
  --x: 55%;
  --s: 4px;
  --t: 13s;
  --d: -2s;
  --dx: -12px;
}
.embers i:nth-child(9) {
  --x: 62%;
  --s: 3px;
  --t: 9s;
  --d: -5s;
  --dx: 28px;
}
.embers i:nth-child(10) {
  --x: 69%;
  --s: 5px;
  --t: 14s;
  --d: -7s;
  --dx: -22px;
}
.embers i:nth-child(11) {
  --x: 75%;
  --s: 2px;
  --t: 10s;
  --d: -10s;
  --dx: 16px;
}
.embers i:nth-child(12) {
  --x: 81%;
  --s: 4px;
  --t: 12s;
  --d: -3s;
  --dx: -30px;
}
.embers i:nth-child(13) {
  --x: 87%;
  --s: 3px;
  --t: 11s;
  --d: -6s;
  --dx: 20px;
}
.embers i:nth-child(14) {
  --x: 93%;
  --s: 4px;
  --t: 13s;
  --d: -1s;
  --dx: -16px;
}
.embers i:nth-child(15) {
  --x: 22%;
  --s: 2px;
  --t: 16s;
  --d: -12s;
  --dx: 36px;
}
.embers i:nth-child(16) {
  --x: 58%;
  --s: 2px;
  --t: 15s;
  --d: -11s;
  --dx: -28px;
}
.embers i:nth-child(17) {
  --x: 8%;
  --s: 3px;
  --t: 13s;
  --d: -7s;
  --dx: -14px;
}
.embers i:nth-child(18) {
  --x: 97%;
  --s: 3px;
  --t: 10s;
  --d: -4s;
  --dx: -24px;
}
@keyframes rise {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  8% {
    opacity: 0.95;
  }
  55% {
    opacity: 0.7;
  }
  100% {
    transform: translate(var(--dx, 20px), -78vh) scale(0.25);
    opacity: 0;
  }
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 8vw, 6.5rem);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.42rem 0.95rem 0.42rem 0.8rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(250, 246, 239, 0.16);
  border-radius: 999px;
  background: rgba(250, 246, 239, 0.05);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(250, 246, 239, 0.82);
}
.pulse {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ember-hi);
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ember-hi);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  80%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--gold) 0%, var(--ember-hi) 45%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 180% 100%;
  animation: sheen 7s ease-in-out infinite alternate;
}
@keyframes sheen {
  to {
    background-position: 100% 0;
  }
}
.hero-lede {
  margin-top: 1.6rem;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--muted);
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.1rem;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2.2rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-proof .ico {
  color: var(--gold);
}

/* phone preview */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}
.phone {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 9 / 18;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(160deg, #3a2b25, #0e0806 55%);
  box-shadow:
    0 0 0 1px rgba(250, 246, 239, 0.14),
    0 50px 90px -30px rgba(0, 0, 0, 0.85),
    0 0 120px -20px rgba(228, 87, 32, 0.55);
  transform: rotate(3.5deg);
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: rotate(3.5deg) translateY(0);
  }
  50% {
    transform: rotate(3.5deg) translateY(-12px);
  }
}
.phone-notch {
  position: absolute;
  top: 19px;
  left: 50%;
  z-index: 2;
  width: 82px;
  height: 22px;
  border-radius: 999px;
  background: #050302;
  transform: translateX(-50%);
}
.phone-screen {
  height: 100%;
  overflow: hidden;
  padding: 52px 16px 16px;
  border-radius: 36px;
  background: radial-gradient(120% 60% at 50% 0%, #3a2219, #1a100d 60%);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ph-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.ph-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
}
.ph-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember-hi);
  box-shadow: 0 0 10px var(--ember-hi);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}
.ph-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(250, 246, 239, 0.62);
}
.ph-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 178, 63, 0.16);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.7rem;
}
.ph-now {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 15px 15px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(228, 87, 32, 0.95), rgba(176, 58, 12, 0.95));
  box-shadow:
    0 18px 36px -18px rgba(228, 87, 32, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
}
.ph-now small {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  opacity: 0.85;
}
.ph-now strong {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ph-now > span {
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.9;
}
.ph-bar {
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
}
.ph-bar i {
  display: block;
  height: 100%;
  width: 42%;
  border-radius: 6px;
  background: linear-gradient(90deg, #fff, var(--gold));
  animation: fill 9s ease-in-out infinite alternate;
}
@keyframes fill {
  to {
    width: 78%;
  }
}
.ph-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  opacity: 0.85;
}
.ph-next {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ph-next li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(250, 246, 239, 0.06);
  border: 1px solid rgba(250, 246, 239, 0.07);
  font-size: 0.8rem;
}
.ph-next time {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.78rem;
}
.float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem 0.8rem;
  border-radius: 16px;
  background: rgba(32, 21, 18, 0.78);
  border: 1px solid rgba(250, 246, 239, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: nowrap;
}
.float-chip .ico {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ember-hi), var(--ember));
  color: #1a0f0b;
}
.float-chip b {
  display: block;
  font-weight: 700;
}
.float-chip small {
  color: var(--muted);
  font-size: 0.74rem;
}
/* Anchored to the phone's centre line so they straddle its bezel instead of
   covering the screen text, at any column width. */
.fc-a {
  right: calc(50% + 112px);
  top: 17%;
  animation: bob 6s ease-in-out infinite;
}
.fc-b {
  left: calc(50% + 100px);
  bottom: 9%;
  animation: bob 7s ease-in-out -3s infinite;
}
@keyframes bob {
  50% {
    transform: translateY(-9px);
  }
}

/* -------------------------------------------------------------- ticker --- */

/* Same charcoal as the hero and the stats strip it sits between, so it reads
   as part of the page, not a banner laid across it. Only hairlines mark its
   edges; the ends of the scroll fade out instead of being cut off. */
.ticker {
  --bg: var(--char-800);
  --fg: var(--cream);
  --muted: rgba(250, 246, 239, 0.66);
  --line: rgba(250, 246, 239, 0.09);
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  padding-block: 0.7rem;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 0;
  background: var(--bg);
  color: var(--fg);
  border-block: 1px solid var(--line);
}
.ticker-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  padding: 0.32rem 0.8rem 0.32rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ember-hi) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  /* The admin sets how long one pass takes and how many passes run; with a
     fixed count it stops on the second copy, which looks identical to the start. */
  animation: marquee var(--ticker-seconds, 80s) linear var(--ticker-loops, infinite) forwards;
  will-change: transform;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}
.ticker-copy {
  display: contents;
}
.tick {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 2.4rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.tick b {
  font-weight: 700;
  color: var(--fg);
}
.tick em {
  font-style: normal;
}
.tick .mono {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ember) 16%, transparent);
  color: var(--gold);
}
.tick .dot {
  box-shadow: 0 0 8px color-mix(in srgb, var(--c, var(--ember)) 70%, transparent);
}
/* Which grand champion this is — "GC · Master" or "GC · Backyard". Master wears
   the ember tint; Backyard, and a plain "GC" with no series, the plain one — but the
   words carry it either way. */
.tick-gc {
  flex: none;
  padding: 1px 7px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
  background: color-mix(in srgb, var(--ember) 16%, transparent);
}
.tick-gc-neutral {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}
/* Scores KCBS has not certified yet: the word Unofficial, never colour alone. */
.tick-unofficial {
  flex: none;
  text-transform: uppercase;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--gold);
  white-space: nowrap;
}
.dot-msg {
  --c: var(--gold);
}
.tick-msg {
  color: var(--fg);
  font-weight: 600;
}
.tick-ext {
  width: 0.9em;
  height: 0.9em;
  opacity: 0.6;
}
.tick-link,
.tick-msg-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tick-link::after,
.tick-msg-link::after {
  /* Grows the tap target to the full height of the strip. */
  content: "";
  position: absolute;
  inset: -14px -4px;
}
.tick-link:hover,
.tick-msg-link:hover {
  border-bottom-color: var(--ember-hi);
}
.tick-link:focus-visible,
.tick-msg-link:focus-visible {
  outline-color: var(--gold);
  outline-offset: 2px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------- stats --- */

.stats {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1.5rem;
}
.stat {
  padding-left: 1.2rem;
  border-left: 2px solid var(--ember);
}
.stat-num {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #ffd9bd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------ sections --- */

.section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.section-tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.sec-head {
  display: grid;
  gap: 1rem;
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.sec-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.6rem;
}
.sec-toolbar-stack {
  flex-direction: column;
  align-items: flex-start;
}
.toolbar-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sec-link {
  margin-top: 2rem;
}
.more {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.more a {
  color: var(--accent-ink);
  font-weight: 650;
}

/* chips + tabs */
.chips,
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip,
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.chip:hover,
.tab:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.chip[aria-pressed="true"],
.tab[aria-selected="true"] {
  color: #1a0f0b;
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--ember-hi));
  box-shadow: 0 8px 22px -10px rgba(228, 87, 32, 0.8);
}
.tab-count {
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.74rem;
}
.tabs {
  margin-bottom: 1.6rem;
}
.tab .pulse {
  background: var(--ember);
}
.tabpanel[hidden] {
  display: none;
}

/* sanctioning-body tags */
.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--c, var(--tan));
  display: inline-block;
}
.src-kcbs {
  --c: #e45720;
}
.src-ibca {
  --c: #f2a21b;
}
.src-mbn {
  --c: #6fae8a;
}
.src {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  /* The brand colour itself is 3.6:1 for KCBS on its own tint over a dark surface; lifted toward white it is 5:1+. */
  color: color-mix(in srgb, var(--c) 72%, #fff);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.section-cream .src {
  color: color-mix(in srgb, var(--c) 55%, #201512);
}

/* result cards */
.rgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 1.1rem;
}
.rcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.3rem 1.3rem 1.2rem;
  border-radius: var(--radius-lg, 22px);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s,
    box-shadow 0.3s;
}
.rcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 80% at 0% 0%,
    color-mix(in srgb, var(--ember) 14%, transparent),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.rcard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line));
}
.rcard:hover::before {
  opacity: 1;
}
.rcard[hidden],
.srow[hidden],
.sgroup[hidden] {
  display: none;
}
.rcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rcard-date {
  font-size: 0.76rem;
  color: var(--faint);
}
.rcard-tags {
  /* Also where a badge's explanation opens (under this row, never past the screen's edge): see .rstat-note. */
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}
/* Results status: Unofficial (amber), Official (green), Corrected (blue), Posted (neutral).
   Always a word plus a symbol, and dark text on a pale tint (or pale text on a dark tint
   in the dark sections) so the contrast holds on both section themes. */
.rstat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--rs-line);
  background: var(--rs-bg);
  color: var(--rs-fg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
.rstat-ico {
  width: 13px;
  height: 13px;
  flex: none;
}
/* The badge is a native disclosure: a tap, Enter or Space on it opens the one-line explanation
   (hover shows it as a tooltip, a screen reader reads it with the word). It works without any
   script. The pill itself is small, so an invisible area around it brings the tap target to 44px. */
.rstat-d {
  display: block;
  flex: none;
}
/* A block-level flex box, not an inline one: no line box around the pill, so it lines up with its neighbours. */
.rstat-d > summary.rstat {
  position: relative;
  display: flex;
  width: fit-content;
  list-style: none;
  cursor: pointer;
}

.rstat-d > summary::-webkit-details-marker {
  display: none;
}
.rstat-d > summary::after {
  content: "";
  position: absolute;
  inset: -14px -4px;
}
.rstat-d > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.rstat-note {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: block;
  max-width: 22rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--char-700);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
}
.section-cream .rstat-note {
  background: #ffffff;
  color: var(--char-800);
  border-color: rgba(32, 21, 18, 0.2);
}
.rstat-amber {
  --rs-fg: #ffd98f;
  --rs-bg: rgba(255, 178, 63, 0.16);
  --rs-line: rgba(255, 178, 63, 0.45);
}
.rstat-green {
  --rs-fg: #a9e7c3;
  --rs-bg: rgba(111, 174, 138, 0.2);
  --rs-line: rgba(111, 174, 138, 0.5);
}
.rstat-blue {
  --rs-fg: #b4d0ff;
  --rs-bg: rgba(110, 156, 255, 0.18);
  --rs-line: rgba(110, 156, 255, 0.5);
}
.rstat-neutral {
  --rs-fg: var(--muted);
  --rs-bg: var(--surface-hi);
  --rs-line: var(--line);
}
.section-cream .rstat-amber {
  --rs-fg: #6b3d00;
  --rs-bg: #fdeccb;
  --rs-line: #d9a441;
}
.section-cream .rstat-green {
  --rs-fg: #14532d;
  --rs-bg: #dcf2e4;
  --rs-line: #7ab594;
}
.section-cream .rstat-blue {
  --rs-fg: #1e3a8a;
  --rs-bg: #dbe8ff;
  --rs-line: #8aa9e6;
}
.rlegend {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.rlegend strong {
  color: var(--fg);
  font-weight: 700;
}
.rcard h3 {
  font-size: 1.12rem;
  text-wrap: balance;
  /* A contest name with one very long word must wrap inside its card, not widen the page. */
  overflow-wrap: anywhere;
}
.rcard-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.rcard-meta .ico {
  width: 15px;
  height: 15px;
  margin-right: 0.15rem;
}
.podium {
  display: grid;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.podium-row {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.8rem;
  border-radius: 13px;
  border: 1px solid var(--line);
}
.podium-row dt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.podium-row abbr {
  text-decoration: none;
  cursor: help;
}
.podium-row dd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
}
.podium-row strong {
  font-weight: 720;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.podium-row dd .mono {
  flex: none;
  font-size: 0.8rem;
  color: var(--muted);
}
.podium-row {
  position: relative;
  transition:
    border-color 0.2s,
    background 0.2s;
}
/* The champion's name is a link; its ::after stretches it over the whole
   row, so the row is the click target without nesting anything. The GC/RGC
   label stays above the overlay so its tooltip still works. */
.tlink {
  color: inherit;
  text-decoration: none;
}
.tlink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
}
.tlink:focus-visible {
  outline: none;
}
.tlink:focus-visible::after {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.podium-row dt {
  position: relative;
  z-index: 1;
}
.podium-row:has(.tlink:hover) {
  border-color: color-mix(in srgb, var(--ember) 70%, transparent);
}
.podium-row:has(.tlink:hover) strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.podium-row.gc {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--gold) 22%, transparent),
    color-mix(in srgb, var(--ember) 10%, transparent)
  );
}
.podium-row.gc dt {
  color: var(--accent-ink);
}
.section-cream .podium-row.gc {
  background: linear-gradient(100deg, rgba(255, 178, 63, 0.3), rgba(228, 87, 32, 0.08));
}
.podium-row.rgc dt {
  color: var(--faint);
}
.podium-row.rgc strong {
  font-weight: 600;
  color: var(--muted);
}

/* ------------------------------------------------------------- bento ---- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.7rem 1.6rem 1.6rem;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s;
}
.bento-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--ember) 22%, transparent),
    transparent 70%
  );
  opacity: 0.7;
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s;
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line));
}
.bento-card:hover::after {
  transform: scale(1.5);
  opacity: 1;
}
.bento-wide {
  grid-column: span 2;
}
.bento-ico {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--gold), var(--ember));
  color: #1a0f0b;
  box-shadow: 0 12px 24px -12px rgba(228, 87, 32, 0.9);
}
.bento-ico .ico {
  width: 24px;
  height: 24px;
}
.bento-card h3 {
  font-size: 1.28rem;
}
.bento-card p {
  color: var(--muted);
  max-width: 52ch;
}

/* ---------------------------------------------------- team of the year --- */

.toy-layout {
  display: grid;
  gap: 1.6rem 2.2rem;
  align-items: start;
}
.toy-board {
  min-width: 0;
}
.toy-list {
  display: grid;
  gap: 0.55rem;
}
.toy-row {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto auto 1.1rem;
  grid-template-areas: "rank team web pts go";
  align-items: center;
  column-gap: 0.9rem;
  padding: 0.95rem 1.1rem 1.1rem;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s;
}
.toy-row:hover {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--ember) 60%, var(--line));
}
.toy-rank {
  grid-area: rank;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--faint);
}
/* Stretched link: ::after covers the whole row (the <li> is the positioned
   ancestor), so the row is one big target and there is a single anchor for it. */
.toy-team {
  grid-area: team;
  min-width: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.toy-team::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.toy-team:focus-visible {
  outline: none;
}
.toy-team:focus-visible::after {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.toy-row:hover .toy-team {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* The team's own site sits above the overlay, so it is its own target. */
.toy-web {
  grid-area: web;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.toy-web::before {
  /* Grows the tap target to 44px without growing the pill. */
  content: "";
  position: absolute;
  inset: -4px -2px;
}
.toy-web .ico {
  width: 0.95em;
  height: 0.95em;
}
.toy-web:hover {
  color: #1a0f0b;
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--ember-hi));
}
.toy-web:focus-visible {
  outline-offset: 2px;
}
.toy-pts {
  grid-area: pts;
  font-weight: 700;
  color: var(--accent-ink);
}
.toy-go {
  grid-area: go;
  display: grid;
  color: var(--faint);
  transition:
    transform 0.25s var(--ease),
    color 0.25s;
}
.toy-go .ico {
  width: 1.05rem;
  height: 1.05rem;
}
.toy-row:hover .toy-go {
  color: var(--accent-ink);
  transform: translateX(3px);
}
.toy-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--line);
}
.toy-bar i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, var(--ember), var(--gold));
}
.toy-aside {
  display: grid;
  gap: 0.7rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border-radius: 22px;
  border: 1px dashed var(--line);
}
.toy-aside h2,
.toy-aside h3 {
  font-size: 1.05rem;
}
.toy-aside p {
  font-size: 0.92rem;
  color: var(--muted);
}
.toy-aside p + h2,
.toy-aside p + h3 {
  margin-top: 0.7rem;
}
.toy-aside .btn {
  justify-self: start;
  margin-top: 0.4rem;
}
.toy-top .toy-rank {
  font-size: 1.5rem;
}
.toy-p1 {
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--gold) 20%, var(--surface)),
    var(--surface) 70%
  );
}
.toy-p1 .toy-rank {
  color: var(--gold);
}
.section-cream .toy-p1 .toy-rank {
  color: #c98a12;
}
.toy-p2 .toy-rank {
  color: var(--tan);
}
.section-cream .toy-p2 .toy-rank {
  color: #9a8467;
}
.toy-p3 .toy-rank {
  color: var(--ember);
}
.toy-foot {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ------------------------------------------------------------ schedule --- */

.slist {
  display: grid;
  gap: 0.7rem;
}
.sgroup + .sgroup {
  margin-top: 2.6rem;
}
/* An anchor jump stops under the sticky bar, not behind it. */
.sgroup {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.sched-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-bottom: 1.8rem;
}
.filter-status {
  flex: 1 1 100%;
}
.month-jump {
  /* A positioned scroller: the screen-reader-only text inside each link is absolutely
     positioned, and without this it escapes the clipping and makes the whole page
     scroll sideways on a phone. */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.5rem;
  /* A year of months scrolls sideways on a phone instead of wrapping into rows. */
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: thin;
}
.month-jump a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.month-jump a:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.month-jump a[hidden] {
  display: none;
}
.month-jump small {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--faint);
}
.state-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.state-pick select {
  min-height: 44px;
  padding: 0 2.2rem 0 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--fg);
  font: inherit;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 620;
  letter-spacing: 0;
  cursor: pointer;
}
.state-pick select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Without the script a filter would do nothing, so the markup starts hidden and
   store.js shows it. */
.state-pick[hidden] {
  display: none;
}
.filter-status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sgroup-title {
  margin-bottom: 1rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.srow {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 0.9rem 1.2rem 0.9rem 0.9rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s;
}
.srow:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line));
}
.sdate {
  display: grid;
  justify-items: center;
  padding: 0.55rem 0;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--char-700), var(--char-900));
  color: var(--cream);
  line-height: 1.1;
}
.sdate span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.sdate b {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.sdate small {
  font-size: 0.68rem;
  color: rgba(250, 246, 239, 0.6);
}
.sbody h3 {
  font-size: 1.05rem;
  text-wrap: balance;
}
.sbody p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.sloc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.sloc .ico {
  width: 14px;
  height: 14px;
}
.note {
  padding: 1px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  color: var(--accent-ink);
  font-size: 0.74rem;
  font-weight: 650;
}
.sreg {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.sreg:hover {
  color: #1a0f0b;
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--ember-hi));
}

/* ------------------------------------------------------------- pricing --- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.3rem;
  max-width: 920px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.9rem 1.9rem;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.plan-featured {
  background:
    linear-gradient(var(--surface-hi), var(--surface-hi)) padding-box,
    linear-gradient(150deg, var(--gold), var(--ember) 55%, var(--ember-ink)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 30px 70px -34px rgba(228, 87, 32, 0.75);
}
.section-dark .plan-featured {
  background:
    linear-gradient(var(--char-700), var(--char-800)) padding-box,
    linear-gradient(150deg, var(--gold), var(--ember) 55%, var(--ember-ink)) border-box;
}
.plan-flag {
  position: absolute;
  top: -13px;
  left: 1.7rem;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--ember-hi));
  color: #1a0f0b;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan h3 {
  font-size: 1.4rem;
}
.plan-desc {
  color: var(--muted);
  font-size: 0.95rem;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.4rem;
  border-block: 1px solid var(--line);
}
.plan-price b {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.plan-price span {
  color: var(--muted);
  font-size: 0.92rem;
}
.plan-list {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  font-size: 0.93rem;
}
.plan-list li {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--muted);
}
.plan-list .ico {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  color: var(--accent-ink);
  stroke-width: 2.4;
}
.plan .btn {
  margin-top: auto;
}
.addons {
  max-width: 920px;
  margin-top: 1.6rem;
  padding: 1.5rem 1.6rem;
  border-radius: 24px;
  border: 1px dashed var(--line);
}
.addons h3 {
  margin-bottom: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.addons li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.8rem;
}
.addons li + li {
  border-top: 1px solid var(--line);
}
.addon-ico {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ember) 18%, transparent);
  color: var(--accent-ink);
}
.addon-name b {
  display: block;
}
.addon-name small {
  color: var(--muted);
}
.addon-price {
  font-weight: 700;
  color: var(--accent-ink);
}

/* the pricing page's tiers: the plan card, a line under it for what it needs, a table, the short answers */
.plan-flag + h3 {
  margin-top: 0.2rem;
}
.tier-who {
  margin-top: -0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.tier .plan-price b {
  font-size: 2.1rem;
}
.tier-soon {
  margin-left: 0.2rem;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.plan-notes {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  padding: 0.9rem 0 0;
  border-top: 1px dashed var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}
.plan-notes li {
  padding-left: 0.9rem;
  position: relative;
}
.plan-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-ink);
}
.plans-more {
  margin-top: 1.4rem;
  font-weight: 650;
}
.plans-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-ink);
}
.tier-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.tier-table-wrap:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.tier-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.tier-table caption {
  padding: 0.9rem 1.1rem;
  text-align: left;
  font-size: 0.86rem;
  color: var(--muted);
  caption-side: bottom;
}
.tier-table th,
.tier-table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.tier-table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.tier-table th[scope="row"],
.tier-table thead th:first-child {
  position: sticky;
  left: 0;
  text-align: left;
  background: var(--surface);
  font-weight: 650;
}
.tier-table tbody tr:last-child th,
.tier-table tbody tr:last-child td {
  border-bottom: 0;
}
.tier-yes {
  color: var(--accent-ink);
  font-weight: 800;
}
.tier-no {
  color: var(--faint);
}
.faq {
  display: grid;
  gap: 0.6rem;
  max-width: 62rem;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.faq-item summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 650;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  float: right;
  font-family: var(--font-mono);
  color: var(--accent-ink);
}
.faq-item[open] summary::after {
  content: "–";
}
.faq-item p {
  margin: 0;
  padding: 0 1.2rem 1.1rem;
  color: var(--muted);
}

/* ------------------------------------------------------------ university --- */

.uni-note {
  max-width: 62rem;
  margin-bottom: 2.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-ink);
  border-radius: 14px;
  background: var(--surface);
}
.uni-note p {
  margin: 0;
}
.uni-note a {
  color: var(--accent-ink);
  text-decoration: underline;
}
.uni-track + .uni-track {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.uni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.1rem;
}
.uni-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.3rem 1.3rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.uni-card-soon {
  border-style: dashed;
  box-shadow: none;
}
.uni-card h3 {
  font-size: 1.12rem;
  line-height: 1.3;
}
.uni-card h3 a {
  color: inherit;
  text-decoration: none;
}
.uni-card h3 a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}
.uni-chips,
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.uni-chip {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.uni-chip-free {
  border-color: color-mix(in srgb, #2f8f4e 45%, transparent);
  background: color-mix(in srgb, #2f8f4e 12%, transparent);
  color: #1f6a39;
}
.uni-chip-full {
  border-color: color-mix(in srgb, var(--ember) 40%, transparent);
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  color: var(--ember-ink);
}
.uni-chip-soon {
  border-style: dashed;
}
.uni-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.uni-covers {
  display: grid;
  gap: 0.35rem;
  margin: 0.2rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px dashed var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}
.uni-covers li {
  position: relative;
  padding-left: 0.9rem;
}
.uni-covers li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--faint);
}
.uni-read {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
  font-weight: 650;
  color: var(--accent-ink);
}
.lesson {
  display: grid;
  gap: 1.6rem;
  max-width: 46rem;
}
.lesson-meta a {
  margin-left: 0.4rem;
  font-size: 0.86rem;
  color: var(--accent-ink);
  text-decoration: underline;
}
.prose {
  font-size: 1.06rem;
  line-height: 1.7;
}
.prose p {
  margin: 0 0 1.1rem;
}
.prose h2 {
  margin: 2.2rem 0 0.7rem;
  font-size: 1.5rem;
  line-height: 1.25;
}
.prose h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.prose ul,
.prose ol {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
}
.prose ul {
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li::marker {
  color: var(--accent-ink);
}
.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
}
.uni-box {
  margin: 0 0 1.1rem;
  padding: 1rem 1.2rem 0.4rem;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 14px;
  background: var(--surface);
}
.uni-box ul {
  margin-bottom: 0.8rem;
}
.uni-good {
  border-left-color: #2f8f4e;
}
.uni-good h3 {
  color: #1f6a39;
}
.uni-bad {
  border-left-color: #c0392b;
}
.uni-bad h3 {
  color: #8f2519;
}
.uni-tip {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 20%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.uni-tip p {
  margin: 0;
}
.uni-links {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}
.prose .uni-links {
  padding-left: 0;
  list-style: none;
}
.uni-links li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
}
.uni-links span {
  color: var(--muted);
  font-size: 0.92rem;
}
.uni-table th,
.uni-table td {
  text-align: left;
  vertical-align: top;
  font-size: 0.93rem;
}
.uni-table tbody th {
  white-space: nowrap;
}
.prose .tier-table-wrap {
  margin-bottom: 1.4rem;
}
.uni-cta {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.uni-cta h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}
.uni-cta p {
  margin: 0 0 0.9rem;
  color: var(--muted);
}
.uni-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}
.lesson-nav {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.lesson-nav a {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.lesson-nav a:hover {
  border-color: var(--accent-ink);
}
.lesson-nav small {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.lesson-nav span {
  font-weight: 650;
}

/* the smokers page: fuels as a row of facts, kinds of cooker as plain lists */
.smk-fuels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.smk-fuels li {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.smk-fuels span {
  font-size: 0.86rem;
  color: var(--muted);
}
.smk-group {
  margin-bottom: 1.6rem;
}
.smk-group h3 {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
}
.smk-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.smk-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

/* ---------------------------------------------------------- cta + empty --- */

.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  text-align: center;
  color: var(--char-950);
  background:
    radial-gradient(70% 140% at 50% 120%, rgba(255, 178, 63, 0.75), transparent 70%),
    linear-gradient(135deg, #f0661f, var(--ember) 55%, #c9460f);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(21, 13, 11, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 13, 11, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000, transparent 80%);
}
.cta-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
}
.cta-inner h2 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
}
.cta-inner p {
  max-width: 48ch;
  font-size: 1.1rem;
  opacity: 0.85;
}
.cta-inner .hero-cta {
  justify-content: center;
}
.empty {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 24px;
  color: var(--muted);
}
.empty h3 {
  color: var(--fg);
}
.empty-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ember) 16%, transparent);
  color: var(--accent-ink);
}
.empty-ico .ico {
  width: 26px;
  height: 26px;
}
.lost {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* -------------------------------------------------------- inner-page hero --- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.2rem, 7vw, 5.5rem) clamp(2.8rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 120% at 85% -10%, rgba(228, 87, 32, 0.4), transparent 65%),
    radial-gradient(40% 90% at 0% 110%, rgba(255, 178, 63, 0.16), transparent 70%), var(--char-800);
}
.page-hero .wrap {
  position: relative;
  display: grid;
  gap: 1.1rem;
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
}
.page-hero .embers i {
  animation-duration: 14s;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.6rem;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}

/* -------------------------------------------------------------- footer --- */

.footer {
  --bg: var(--char-950);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.2rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.7fr));
  gap: 2.5rem;
}
.footer-tag {
  margin-top: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  color: var(--gold);
}
.footer-sub {
  margin-top: 0.5rem;
  max-width: 38ch;
  font-size: 0.92rem;
  color: var(--muted);
}
.footer-col {
  display: grid;
  align-content: start;
  gap: 0.7rem;
}
.footer-col h2 {
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.footer-col a {
  width: fit-content;
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--cream);
}
.footer-legal {
  display: grid;
  gap: 0.55rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--muted);
}
.footer-fine {
  max-width: 100ch;
  font-size: 0.76rem;
  color: var(--faint);
}

/* ------------------------------------------------- scroll reveal (CSS only) --- */

@supports (animation-timeline: view()) {
  /* The 0.001ms rule in the reduced-motion block does not reach a scroll-driven
     animation (its length is the scroll distance), so the effect is switched on
     only for visitors who have not asked for less motion. */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(26px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* --------------------------------------------------------- team pages --- */

.crumb {
  margin: -0.5rem 0 -0.3rem;
}
.crumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.crumb a:hover {
  color: var(--cream);
}
.crumb .ico {
  width: 1em;
  height: 1em;
  transform: rotate(180deg);
}
.team-hero .wrap {
  gap: 0.9rem;
}
.team-name {
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  overflow-wrap: anywhere;
}
.team-name-long {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
}
.badge .ico {
  width: 15px;
  height: 15px;
}
.badge abbr {
  text-decoration: none;
  cursor: help;
}
.badge-toy {
  color: #1a0f0b;
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--ember-hi));
  font-weight: 750;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.25s;
}
.badge-toy::before {
  content: "";
  position: absolute;
  inset: -4px -2px;
}
.badge-toy:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(255, 122, 61, 0.9);
}
.team-aka {
  max-width: 70ch;
  font-size: 0.88rem;
  color: var(--muted);
}
.team-aka q {
  color: var(--cream);
}
.team-cta {
  align-items: center;
  margin-top: 0.7rem;
}
.team-host {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.team-body .wrap {
  display: grid;
  /* minmax(0, …): a wide chart must scroll inside its box, not stretch the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.4rem, 5vw, 3.8rem);
}
.team-body {
  padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 6vw, 5rem);
}
.team-h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.team-sub {
  margin-top: 0.45rem;
  max-width: 62ch;
  font-size: 0.95rem;
  color: var(--muted);
}

/* totals */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 1.1rem 1.1rem 1.15rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.kpi dd {
  order: -1;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-gc {
  border-color: color-mix(in srgb, var(--gold) 70%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 24%, #fff), #fff 75%);
}
.kpi-abbr abbr {
  display: inline-block;
  margin-left: 0.2rem;
  padding: 0 0.4rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--gold) 34%, transparent);
  color: var(--ember-ink);
  text-decoration: none;
  cursor: help;
}
.kpi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.kpi-tags .src {
  font-size: 0.78rem;
  padding: 3px 10px;
}
.kpi-wide dd {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
}

/* categories */
.cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin-top: 1.3rem;
}
.cat {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.2rem 1.25rem 1.1rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cat h3 {
  font-size: 1.1rem;
}
.cat-typical {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.84rem;
  color: var(--muted);
}
.cat-typical b {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.cat-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--line);
}
.cat-meter i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ember), var(--gold));
}
.cat-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.cat-stats dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cat-stats dd {
  font-size: 1.15rem;
  font-weight: 750;
}

/* by-year charts */
.charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.3rem;
}
.chart {
  min-width: 0;
  margin: 0;
  padding: 1.2rem 1rem 1rem;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.chart figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  margin: 0 0 0.7rem 0.4rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.chart figcaption b {
  font-size: 1rem;
  color: var(--fg);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
  margin: 0 0 0.9rem 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.sw {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
}
.sw-gc {
  background: var(--gold);
}
.sw-top {
  background: var(--ember);
}
.sw-rest {
  background: #d9ccb9;
}
.chart-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 12px;
}
.chart-scroll:focus-visible {
  outline-offset: 0;
}
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
.ch-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.ch-base {
  stroke: color-mix(in srgb, var(--fg) 30%, transparent);
}
.ch-axis,
.ch-year,
.ch-val {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--muted);
}
.ch-val {
  font-weight: 700;
  fill: var(--fg);
}
.ch-line {
  fill: none;
  stroke: var(--ember);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ch-dot {
  fill: var(--surface);
  stroke: var(--ember);
  stroke-width: 2.5;
}
.ch-gc,
.ch-top,
.ch-rest {
  stroke: var(--surface);
  stroke-width: 1;
}
.ch-gc {
  fill: var(--gold);
}
.ch-top {
  fill: var(--ember);
}
.ch-rest {
  fill: #d9ccb9;
}

/* recent results */
.rlist {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.rrow {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.85rem 1.2rem 0.85rem 0.85rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.rrow-gc {
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
}
.place {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.1rem;
  min-height: 3.4rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  line-height: 1.1;
  color: var(--muted);
}
.place b {
  font-size: 1.05rem;
  font-weight: 800;
}
.place abbr {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: help;
}
.place-gc {
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--ember-hi));
  color: #1a0f0b;
}
.place-rgc {
  border-color: transparent;
  background: var(--ember);
  color: #1a0f0b;
}
.place-top10 {
  border-color: color-mix(in srgb, var(--ember) 35%, transparent);
  background: color-mix(in srgb, var(--ember) 9%, transparent);
  color: var(--ember-ink);
}
.rbody {
  min-width: 0;
}
.rbody h3 {
  font-size: 1rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.rbody p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.85rem;
  margin-top: 0.35rem;
  font-size: 0.84rem;
  color: var(--muted);
}
.rbody .sloc {
  min-width: 0;
  max-width: min(100%, 22rem);
}
.sloc-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rscore {
  font-size: 0.95rem;
  font-weight: 700;
}

.claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding: 1.7rem 1.8rem;
  border-radius: 24px;
  border: 1px solid rgba(250, 246, 239, 0.12);
  background: linear-gradient(135deg, var(--char-700), var(--char-900));
  color: var(--cream);
  box-shadow: 0 30px 60px -36px rgba(32, 21, 18, 0.9);
}
.claim h2 {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}
.claim p {
  max-width: 52ch;
  margin-top: 0.4rem;
  color: rgba(250, 246, 239, 0.72);
}
.team-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 72ch;
  font-size: 0.86rem;
  color: var(--muted);
}
.team-note .ico {
  margin-top: 0.2rem;
  color: var(--accent-ink);
}

/* -------------------------------------------------------------- responsive --- */

/* Three deliberate layouts, plus the phone dropdown nav:
     phone   under 768px        one column, hamburger menu
     tablet  768px – 1099px     two-column grids, inline nav, side-by-side hero from 900px
     desktop 1100px and up      full grids, side panels, floating chips from 1181px   */

@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
  }
  .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chart {
    padding: 1.4rem 1.4rem 1.2rem;
  }
}
@media (min-width: 1180px) {
  .charts:has(.chart + .chart) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  :root {
    --gutter: 2.5rem;
  }
  /* Desktop: use the full measure — plans side by side, the calendar in two columns. */
  .plans,
  .addons {
    max-width: none;
  }
  .slist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
  .cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- nav: inline from tablet up ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-inner {
    gap: 0.75rem;
  }
  .nav-links > a:not(.btn) {
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
  }
  .nav-links > a[aria-current="page"]::after {
    left: 0.6rem;
    right: 0.6rem;
  }
  .nav-cta {
    margin-left: 0.3rem;
    padding: 0 0.95rem;
    font-size: 0.86rem;
  }
}
@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.8rem var(--gutter) 1.2rem;
    background: var(--char-950);
    border-bottom: 1px solid rgba(250, 246, 239, 0.1);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s var(--ease);
  }
  .nav.open .nav-links {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-links > a:not(.btn) {
    padding: 0.85rem 0.6rem;
    font-size: 1.05rem;
    border-radius: 12px;
  }
  .nav-links > a[aria-current="page"]::after {
    display: none;
  }
  .nav-cta {
    margin: 0.6rem 0 0;
    min-height: 50px;
  }
}

/* ---- hero ---- */
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 5.2rem);
}
@media (max-width: 767px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-visual {
    min-height: 520px;
  }
}
/* Large phones and small tablets, stacked: copy on top, the phone and its two
   chips as a wide stage below. */
@media (min-width: 640px) and (max-width: 767px) {
  .hero-copy {
    max-width: 38rem;
  }
}
/* Tablet and small laptops: side by side, the phone scaled to its column. */
@media (min-width: 768px) and (max-width: 1240px) {
  .hero-visual {
    min-height: 0;
  }
  .phone {
    zoom: 0.8;
  }
  .float-chip {
    display: none;
  }
}
@media (min-width: 1000px) and (max-width: 1240px) {
  .phone {
    zoom: 0.92;
  }
}
@media (max-width: 639px) {
  .float-chip {
    display: none;
  }
  .hero-visual {
    min-height: 480px;
  }
  .hero-cta .btn {
    flex: 1 1 11rem;
  }
}

/* ---- sections ---- */
@media (min-width: 1000px) {
  .toy-layout {
    grid-template-columns: minmax(0, 1fr) 19.5rem;
  }
  .toy-aside {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
  }
}
@media (max-width: 999px) {
  .toy-aside-home {
    display: none;
  }
  .toy-aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2rem;
  }
  .toy-aside .btn {
    grid-column: 1 / -1;
  }
}
@media (max-width: 639px) {
  .toy-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 999px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Two columns: the last wide card would leave the one before it alone on a row. */
  .bento-wide:last-child {
    grid-column: auto;
  }
}
@media (max-width: 639px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento-wide {
    grid-column: auto;
  }
  .bento-card {
    padding: 1.4rem 1.3rem;
  }
  .srow {
    grid-template-columns: 3.8rem minmax(0, 1fr);
    padding: 0.7rem 0.8rem 0.7rem 0.7rem;
    gap: 0.5rem 0.9rem;
  }
  /* The weekday under the date is also in the screen-reader text; dropping it
     here saves a line of height on every row of a long list. */
  .sdate small {
    display: none;
  }
  .month-jump {
    flex-basis: 100%;
  }
  .sreg {
    grid-column: 2;
    justify-self: start;
    min-height: 44px;
    padding: 0 0.85rem;
    font-size: 0.82rem;
  }
  .slist {
    gap: 0.55rem;
  }
  .toy-row {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    grid-template-areas: "rank team pts";
    column-gap: 0.7rem;
    padding: 0.9rem 0.9rem 1.1rem;
  }
  /* A row with a website puts it under the name; one without stays a single line. */
  .toy-row.has-site {
    grid-template-areas:
      "rank team pts"
      "rank web pts";
  }
  .toy-web {
    justify-self: start;
    margin-top: 0.6rem;
  }
  .toy-go {
    display: none;
  }
  .rrow {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    padding-right: 0.9rem;
  }
  .rscore {
    grid-column: 2;
  }
  .claim {
    padding: 1.4rem 1.3rem;
  }
  .claim .btn {
    width: 100%;
  }
  .addons li {
    grid-template-columns: 2.6rem minmax(0, 1fr);
  }
  .addon-price {
    grid-column: 2;
  }
  .rcard {
    padding: 1.15rem 1.1rem 1.1rem;
  }
}

/* ---- footer ---- */
.footer-top {
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
}
@media (max-width: 767px) {
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ---- touch-sized targets wherever a finger is likely ---- */
@media (max-width: 1180px), (pointer: coarse) {
  .footer-col {
    gap: 0;
  }
  .footer-col h2 {
    margin-bottom: 0.4rem;
  }
  .footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .textlink {
    min-height: 44px;
  }
  .nav-cta {
    min-height: 44px;
  }
}
.sreg {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .embers {
    display: none;
  }
  /* The ticker stands still: one pass, as a list that scrolls sideways. The second
     copy is hidden above, so a track left on its end keyframe (half its width to
     the left, the "forwards" fill) would push the first half of the real list —
     the featured contests — off-screen with no way to reach it. */
  .ticker-track {
    animation: none !important;
    transform: none !important;
  }
  .ticker-viewport {
    overflow-x: auto;
  }
  .ticker-copy {
    display: none;
  }
}

/* ------------------------------------------------------------------ print --- */

/* Ctrl/Cmd+P on any public page. The screen design is a dark site with light
   sections; paper gets one plain light page. Nothing relies on a background to
   be readable, and the few things that do (medal numbers, bars) ask for it, so
   the result is the same with the browser's "Background graphics" box on or off. */

/* ===================================================================== tools ===
   The page around the tools: the promises line and the cards that lead to them. The tools themselves (the
   builder, the plan, the schedule) are in tools.css, which the tool pages and the team app share. */

.ct-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}
.ct-promises li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ct-promises .ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.section-cream {
  color-scheme: light;
}
.tool-band-inner {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--ember) 45%, var(--line));
  border-radius: 24px;
  background:
    radial-gradient(
      90% 140% at 0% 0%,
      color-mix(in srgb, var(--ember) 16%, transparent),
      transparent 60%
    ),
    var(--surface-hi);
}
@media (min-width: 800px) {
  .tool-band-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
.tool-band-inner h2,
.tool-band-inner p {
  margin: 0;
}
.tool-band-inner .lede {
  margin-top: 0.6rem;
  max-width: 52ch;
}
.tool-band-cta {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}
.tool-band-cta small {
  color: var(--muted);
}
.tool-cards {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.tool-card {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  justify-items: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.tool-card h2,
.tool-card p {
  margin: 0;
}
.tool-card p {
  color: var(--muted);
}

@media print {
  @page {
    margin: 0.55in 0.6in 0.85in;
    @bottom-left {
      content: "BBQOps · Run the pit. Rule the cook.";
      font-family: "Inter", system-ui, sans-serif;
      font-size: 7pt;
      color: #4d463f;
      vertical-align: top;
      padding-top: 7pt;
    }
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-family: "Inter", system-ui, sans-serif;
      font-size: 7pt;
      color: #4d463f;
      vertical-align: top;
      padding-top: 7pt;
    }
  }

  :root {
    color-scheme: light;
    --wrap: 100%;
    --gutter: 0;
    --nav-h: 0px;
  }
  html,
  body {
    background: #fff;
    color: var(--char-800);
    font-size: 10.5pt;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Every section prints on the light theme the cream sections already use. */
  .section-dark,
  .section-cream,
  .hero,
  .page-hero,
  .stats,
  .footer,
  .ticker {
    --bg: #fff;
    --fg: var(--char-800);
    --muted: var(--bark);
    --faint: #6b5a4d;
    --surface: #fff;
    --surface-hi: #fff;
    --line: rgba(32, 21, 18, 0.22);
    --accent: var(--ember-ink);
    --accent-ink: var(--ember-ink);
    --shadow: none;
    background: #fff;
    color: var(--fg);
  }

  /* Things that belong to the screen. */
  .skip,
  .nav-links,
  .nav-toggle,
  .ticker,
  .hero-bg,
  .hero-visual,
  .float-chip,
  .hero-cta,
  .cta-band,
  .tabs,
  .sec-toolbar,
  .more,
  .sec-link,
  .crumb,
  .btn,
  .toy-aside .btn,
  .claim,
  .footer-top {
    display: none !important;
  }
  /* ...except the team's own website address, which sits in the same row as its button. */
  .hero-cta.team-cta {
    display: flex !important;
  }

  /* The top of the page is just the BBQOps logo. */
  .nav {
    position: static;
    height: auto;
    padding-block: 0 8pt;
    background: none;
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-inner {
    width: 100%;
    justify-content: flex-start;
  }
  .brand-logo {
    height: 34pt;
  }

  .wrap {
    max-width: none;
    padding-inline: 0;
  }
  .hero {
    margin-top: 0;
    padding-top: 0;
    overflow: visible;
  }
  .hero-inner {
    display: block;
    padding-block: 12pt;
  }
  .section,
  .section-tight,
  .stats,
  .page-hero {
    padding-block: 14pt;
  }
  .sec-head {
    margin-bottom: 12pt;
  }
  .embers,
  .glow,
  .grid-lines {
    display: none;
  }

  /* Gradient lettering is a background clipped to the letters: solid on paper. */
  .hero h1 .grad,
  .stat-num,
  .eyebrow {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
  .hero h1 .grad,
  .stat-num {
    color: var(--ember-ink);
  }
  .eyebrow {
    color: var(--bark);
    border-color: var(--line);
  }

  /* The scroll-in effect never fires on paper; show everything. */
  [data-reveal],
  .tabpanel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Without the tab bar a printout would show only the tab that happened to be
     open and not say so, leaving out the other weekends or the other series.
     So every panel prints, each under the name its tab had. */
  .tabpanel[hidden] {
    display: block !important;
  }
  .tabpanel::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 8pt;
    font-size: 12pt;
    font-weight: 700;
    color: var(--fg);
    break-after: avoid;
  }
  .tabpanel + .tabpanel {
    margin-top: 20pt;
  }
  /* A standings board keeps its source line with its last rows. The board and
     its side note stack in the page flow, so a long board can run onto the
     next sheet instead of being pushed whole past a gap. */
  .toy-layout {
    display: block;
  }
  .toy-aside {
    margin-top: 16pt;
  }
  /* Tighter rows, so a ten-team board fits on one sheet; the arrow and the
     team's Website pill (a link with no address on paper) are left out. */
  .toy-list {
    gap: 4pt;
  }
  .toy-row {
    padding: 6pt 10pt 9pt;
  }
  .toy-web,
  .toy-go {
    display: none;
  }
  .toy-foot {
    break-before: avoid;
  }

  /* The sections that are dark on screen use pale tints for tags and badges;
     on paper they take the same dark-on-light colours the cream sections use. */
  .src {
    color: color-mix(in srgb, var(--c) 55%, #201512);
  }
  .rstat-amber {
    --rs-fg: #6b3d00;
    --rs-bg: #fdeccb;
    --rs-line: #d9a441;
  }
  .rstat-green {
    --rs-fg: #14532d;
    --rs-bg: #dcf2e4;
    --rs-line: #7ab594;
  }
  .rstat-blue {
    --rs-fg: #1e3a8a;
    --rs-bg: #dbe8ff;
    --rs-line: #8aa9e6;
  }
  .toy-p1 .toy-rank {
    color: #c98a12;
  }
  .toy-p2 .toy-rank {
    color: #9a8467;
  }
  .podium-row.gc {
    background: linear-gradient(100deg, rgba(255, 178, 63, 0.3), rgba(228, 87, 32, 0.08));
  }

  /* Schedule: the dark date tile becomes an outlined one, and the Register
     links (which go nowhere on paper) are left out. */
  .sdate {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--char-800);
  }
  .sdate span {
    color: var(--ember-ink);
  }
  .sdate small {
    color: var(--muted);
  }
  .sreg {
    display: none;
  }

  /* The highlighted plan is a dark card on screen; on paper a light one with the same ember edge. */
  .section-dark .plan-featured {
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(150deg, var(--gold), var(--ember) 55%, var(--ember-ink)) border-box;
    box-shadow: none;
  }

  /* Keep each card, result and row whole; never strand a heading. */
  .rcard,
  .bento-card,
  .plan,
  .addons,
  .srow,
  .toy-row,
  .kpi,
  .cat,
  .chart,
  .rrow,
  .addons li,
  .stat,
  .podium-row {
    break-inside: avoid;
  }
  h1,
  h2,
  h3,
  .sec-head,
  .team-h2 {
    break-after: avoid;
  }

  /* The footer is the small print only: the link columns are for the screen. */
  .footer {
    padding-block: 10pt 0;
    border-top: 0;
  }
  .footer-legal {
    display: block;
    margin-top: 6pt;
    padding-top: 8pt;
    font-size: 8pt;
    color: var(--muted);
    break-inside: avoid;
  }
  .footer-legal p + p {
    margin-top: 4pt;
  }
  .footer-fine {
    font-size: 7.5pt;
    color: var(--faint);
    /* If it does not fit the sheet it moves whole, not split by a line. */
    orphans: 3;
    widows: 3;
  }
  .footer .brand,
  .footer-tag,
  .footer-sub {
    display: none;
  }

  /* tools (Comp Day Timeline): the page around them; the tools' own print rules are in tools.css */
  .nav,
  .footer,
  .page-hero,
  .ct-promises,
  .cta-band,
  .tool-band,
  .ct-extra {
    display: none !important;
  }
}