/* Defensive Edge mockups: shared tokens, header with the ring clock, and the page components. */
@font-face { font-family: "Anton"; src: url("fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/ChakraPetch-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --black: #000000; --surface: #0B0B0B; --surface-2: #141414;
  --red: #FC0000; --red-deep: #C40000; --white: #F8F8F8;
  --ash: rgba(248, 248, 248, 0.56); --line: rgba(248, 248, 248, 0.14);
  --display: "Chakra Petch", "Kanit", sans-serif; /* Ben picked Chakra Petch for the red words, 2026-09-26; Anton stays loaded as the fallback option */
  --display-weight: 700;
  --body: "Kanit", system-ui, -apple-system, sans-serif;
  --utility: "Chakra Petch", "Kanit", monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --t-enter: 220ms; --t-exit: 140ms; --t-rule: 320ms; --t-wipe: 700ms; --t-page: 560ms; --stagger: 40ms;
  --angle: 27deg; --tan: 0.5095; --cut: 96px;
  --gutter: clamp(16px, 5vw, 72px);
  --measure: 34ch;
  --bar-h: 80px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color: var(--white); scroll-padding-top: calc(var(--bar-h) + 24px); }
body { margin: 0; font-family: var(--body); font-size: clamp(16px, 1.05vw + 12px, 18px); line-height: 1.5; background: var(--black); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }   /* the logo's <picture> (AVIF, WebP, PNG) lays out like the <img> in it */
video, canvas { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* View changes focus the new heading for assistive technology; it is not an interactive control. */
.view :is(h1, h2)[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, p, figure { margin: 0; }

/* ---------- grain ---------- */
.grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 0.6s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }

/* ---------- header: brand, tabs, the clock, the bell ---------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar-h); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 1.8vw, 28px); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); font-family: var(--utility); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
/* the bar is a material the page scrolls under. The blur sits on a pseudo-element: on the bar itself it would
   become the containing block for the fixed phone menu and collapse it */
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); }
@media (prefers-reduced-transparency: reduce) { .bar::before { background: var(--black); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.bar__brand { display: flex; align-items: center; gap: 12px; color: var(--white); white-space: nowrap; }
.bar__brand img { width: 64px; height: 64px; flex: none; object-fit: contain; }
.bar__nav { display: flex; justify-content: center; gap: clamp(12px, 1.5vw, 24px); min-width: 0; }
.bar__nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--white); white-space: nowrap; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--t-rule) var(--ease-out); }
.bar__nav a:hover::after, .bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.bar__right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bar__menu { display: none; background: none; border: 0; color: var(--white); font-family: var(--utility); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 0; }
/* the compact clock that rides on every page */
.tclock { display: flex; align-items: center; flex: none; gap: 10px; min-height: 52px; padding: 7px 10px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(248,248,248,0.2); --cut: 10px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * var(--tan)), 100% 100%, 0 100%); }
.tclock.is-live { box-shadow: inset 0 0 0 1px var(--red); }
.tclock__readout { display: grid; gap: 4px; }
.tclock__caption { color: #c4c4c4; font-size: 9px; line-height: 1; letter-spacing: 0.1em; white-space: nowrap; }
.tclock__label { display: grid; gap: 3px; line-height: 1.25; font-size: 10px; letter-spacing: 0.08em; }
.tclock__label b { color: var(--white); font-weight: 700; }
.segs { display: flex; align-items: center; gap: clamp(4px, 0.6vw, 8px); }
.seg { width: clamp(24px, 3vw, 42px); height: auto; flex: none; }
.seg rect { fill: var(--red); opacity: 0.12; }
.seg rect.on { opacity: 1; }
.colon { width: 10px; display: grid; gap: 16px; justify-items: center; flex: none; }
.colon i { display: block; width: 8px; height: 8px; background: var(--red); }
.colon.is-off i { opacity: 0.12; }
.segs--mini { gap: 3px; }
.segs--mini .seg { width: 13px; }
.segs--mini .colon { width: 5px; gap: 6px; }
.segs--mini .colon i { width: 3px; height: 3px; }
.bell { flex: none; width: 46px; height: 46px; background: none; border: 0; padding: 0; color: var(--white); transform-origin: 50% 10%; }
.bell svg { width: 100%; height: 100%; }
.bell--mini { width: 20px; height: 20px; }
.bell.is-ringing { animation: ring 900ms var(--ease-out); color: var(--red); }
@keyframes ring { 0% { transform: rotate(0); } 15% { transform: rotate(16deg); } 35% { transform: rotate(-13deg); } 55% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
.btn { --cut: 14px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 0; background: var(--red); color: var(--black); font-family: var(--utility); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * var(--tan)), 100% 100%, 0 100%); transition: background 120ms ease, transform var(--t-exit) var(--ease-out); }
.btn:hover { background: #ff3d32; }
.btn:focus-visible { outline-color: currentColor; outline-offset: -4px; }
.btn:active { transform: translateY(1px); }
/* hit-stop (depth.js): the press lands instantly, holds at least 50 ms, shifts 2px along the 27° strike line */
.btn.is-hit, .choice.is-hit, .filter__opt.is-hit { transform: translate(1.8px, 0.9px) scale(0.97); transition: none; }
.choice.is-hit { transform: translate(1.8px, 0.9px) scale(0.99); }
.btn--small { padding: 10px 16px; font-size: 12px; }
.btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { background: var(--surface-2); }
.bar__nav .bar__trial { padding: 12px 18px; color: var(--black); font-size: 12px; letter-spacing: 0.08em; }
.bar__nav .bar__trial[aria-current="page"] { color: var(--black); }
.bar__nav .bar__trial::after { display: none; }

@media (max-width: 1599px) { .tclock__label { display: none; } }
@media (max-width: 1359px) { .bar .btn--small { display: none; } .bar__nav { font-size: 11px; letter-spacing: 0.1em; } }

/* ---------- type and shared blocks ---------- */
.page { padding-top: var(--bar-h); }
.word { font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; font-size: clamp(52px, 7vw, 118px); line-height: 0.92; letter-spacing: 0.02em; color: var(--white); hyphens: manual; }
.word em { font-style: normal; color: var(--red); }
.word .keep { white-space: nowrap; }
.edge { display: inline-block; clip-path: polygon(0 0, calc(100% - 0.36em) 0, 100% 0.18em, 100% 100%, 0 100%); }
.title { font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; font-size: clamp(34px, 4.8vw, 68px); line-height: 1; letter-spacing: 0.02em; }
.title em { font-style: normal; color: var(--red); }
.eyebrow { font-family: var(--utility); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
/* Give the small section label its own space above each display heading. */
.eyebrow + :is(.title, .word) { margin-top: clamp(12px, 1.2vw, 18px); }
.line { max-width: var(--measure); color: var(--ash); font-size: clamp(17px, 1.3vw, 21px); margin-top: 22px; }
.line b { color: var(--white); font-weight: 500; }
.prose { max-width: 60ch; color: var(--ash); margin-top: 22px; }
.prose p + p { margin-top: 14px; }
.prose b { color: var(--white); font-weight: 500; }
.go { display: inline-block; position: relative; margin-top: 28px; padding-bottom: 8px; font-family: var(--utility); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.go::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0.28); transform-origin: 0 50%; transition: transform var(--t-rule) var(--ease-out); }
.go:hover::after { transform: scaleX(1); }
.rule { height: 3px; width: min(100%, 520px); background: var(--red); transform: scaleX(0); transform-origin: 50% 50%; margin-top: 18px; }
.is-in .rule { transition: transform var(--t-rule) var(--ease-out); transform: scaleX(1); }
/* reveals move with the individual translate property, so transform stays free for the depth layer's tilt */
[data-reveal] { opacity: 0; translate: 0 14px; }
[data-reveal].is-in { opacity: 1; translate: none; transition: opacity var(--t-enter) var(--ease-out), translate var(--t-enter) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * var(--tan)), 100% 100%, 0 100%); }
.wipe { position: relative; overflow: hidden; }
.wipe::after { content: ""; position: absolute; inset: -150%; background: var(--black); pointer-events: none; transform: rotate(calc(-1 * var(--angle))) translateY(var(--wipe-from, 0%)); }
.wipe.is-open::after { animation: wipe-off var(--t-wipe) var(--ease-out) both; animation-delay: var(--wipe-delay, 0ms); }
@keyframes wipe-off { from { transform: rotate(calc(-1 * var(--angle))) translateY(var(--wipe-from, 0%)); } to { transform: rotate(calc(-1 * var(--angle))) translateY(var(--wipe-to, 120%)); } }

/* page head for the tab pages */
.head { padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(32px, 5vw, 64px); background: var(--black); }
.head .line { max-width: 52ch; }
/* Keep the youth mascots together, beside the heading or beneath it on phones. */
.head--youth { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 400px); grid-template-areas: "heading mascots" "intro mascots"; column-gap: clamp(24px, 4vw, 64px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); }
.youth-head__heading { grid-area: heading; align-self: end; min-width: 0; }
.youth-head__intro { grid-area: intro; align-self: start; }
.youth-head__mascots { grid-area: mascots; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; align-self: center; gap: clamp(8px, 1vw, 16px); }
.youth-head__mascots img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 699px) {
  .head--youth { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "mascots" "intro"; row-gap: 20px; }
  .youth-head__mascots { width: min(80%, 300px); justify-self: center; }
  .head--youth .line { margin-top: 0; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--bar-h)); display: grid; place-items: center; background: var(--black); overflow: hidden; padding: 64px var(--gutter) 72px; }
.hero__video, .hero__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; pointer-events: none; }
/* The video only supplies pixels. Never expose its native playback UI, even when autoplay is blocked. */
.hero__video { visibility: hidden !important; opacity: 0 !important; }
.hero__background { opacity: 0; }
.hero__background.is-ready { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.15) 100%); }
.stamps { position: absolute; inset: 0; bottom: auto; height: min(100%, calc(100dvh - var(--bar-h))); display: grid; place-items: center; pointer-events: none; padding: 0 var(--gutter); perspective: 900px; }
.stamp { grid-area: 1 / 1; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(52px, 12vw, 180px); line-height: 0.9; text-transform: uppercase; color: var(--red); letter-spacing: 0.01em; text-align: center; opacity: 0; transform: translateZ(80px) rotateY(-12deg); }
.stamp.is-on { opacity: 1; transform: none; transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.stamp.is-off { opacity: 0; transform: none; transition: none; }
/* RELENTLESS and PRESSURE share a fitted cap height; the second phrase turns, then snaps. */
.stamp:nth-child(-n + 2) { font-size: min(clamp(30px, 12vw, 180px), calc((100vw - 2 * var(--gutter)) / 6.27)); }
.stamp:nth-child(3):not(.is-on):not(.is-off) { transform: translateX(-6%) rotateY(-30deg) rotateZ(7deg); }
.stamp:nth-child(3).is-on { transition-duration: var(--t-rule); }
.stamp:nth-child(4):not(.is-on):not(.is-off) { transform: translateX(4%) rotateY(-68deg) rotateZ(-5deg); }
.stamp:nth-child(4).is-on { transition-duration: var(--t-exit); }
.hero__inner { position: relative; width: min(100%, 980px); text-align: center; visibility: hidden; }
.hero.is-live .hero__inner { visibility: visible; }
.hero__logo { width: min(100%, 900px); margin: 0 auto; }
.hero__rule { margin: 26px auto 0; transform: scaleX(0); }
.hero.is-live .hero__rule { transform: scaleX(1); transition: transform var(--t-rule) var(--ease-out) 900ms; }
.hero__title { font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; font-size: clamp(38px, 6.4vw, 92px); line-height: 1; letter-spacing: 0.02em; margin-top: 30px; }
.hero__title em { font-style: normal; color: var(--red); }
.hero__title--motto { font-size: clamp(30px, 4.4vw, 64px); }   /* one line inside the hero's 980px down to ~700px wide */
.hero__est { display: block; margin-top: 16px; font-family: var(--utility); font-weight: 500; font-size: clamp(13px, 1.4vw, 19px); letter-spacing: 0.34em; color: var(--ash); }
.hero__sub { max-width: 46ch; margin: 18px auto 0; color: var(--ash); }
.hero__cta { margin-top: 28px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero [data-seq] { opacity: 0; transform: translateY(14px); }
.hero.is-live [data-seq] { opacity: 1; transform: none; transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.hero.is-live [data-seq="1"] { transition-delay: 1000ms; }
.hero.is-live [data-seq="2"] { transition-delay: 1060ms; }
.hero.is-live [data-seq="3"] { transition-delay: 1120ms; }
.hero__replay { position: absolute; right: var(--gutter); bottom: 22px; font-family: var(--utility); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); background: none; border: 0; padding: 6px 0; }
.hero__replay:hover { color: var(--white); }

/* ---------- the hero as a set of planes: smoke far, the word behind the logo, the logo in focus, the line nearest.
   The pointer moves the eye (depth.js writes --cx/--cy from -1 to 1); each plane moves --d px at the edge.
   Behind the logo moves with the eye, in front moves against it, the logo holds still. ---------- */
.layer { translate: calc(var(--cx, 0) * var(--d, 0) * 1px) calc(var(--cy, 0) * var(--d, 0) * 0.6px); }
.hero__plate { position: absolute; inset: -4%; opacity: 0.9; background: url("video/atmosphere-01.jpg") center / cover no-repeat; }
.hero__ghost { position: absolute; inset: 0; margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(96px, 21vw, 360px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(248, 248, 248, 0.055); pointer-events: none; opacity: 0; }
/* centred on the logo (depth.js measures --ghost-y), so the word runs behind the logo's panel and shows either side of it */
.hero__ghost span { position: absolute; left: 50%; top: var(--ghost-y, 50%); transform: translate(-50%, -54%); white-space: nowrap; }
.hero.is-live .hero__ghost { opacity: 1; transition: opacity var(--t-enter) var(--ease-out) 200ms; }

/* ---------- the WebGL title sequence (strike/strike.js). Its canvas sits over the smoke and under the title; it draws
   the words, the plaque's flight and the knockout, then the page's own <img> fades in over it (.is-landed) and the canvas
   lets the live smoke show through. is-live comes on the frame everything moves again after the hit-stop ---------- */
.hero__strike { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 160ms linear; }
.hero__strike.is-on { opacity: 1; transition: none; }
.hero--strike .stamps, .hero--strike .wipe::after { display: none; }
.hero--strike .hero__logo img { opacity: 0; }
.hero--strike.is-landed .hero__logo img { opacity: 1; transition: opacity 200ms linear; }
.hero--strike.is-live .hero__rule { transition-delay: 380ms; }
.hero--strike.is-live [data-seq="1"] { transition-delay: 470ms; }
.hero--strike.is-live [data-seq="2"] { transition-delay: 530ms; }
.hero--strike.is-live [data-seq="3"] { transition-delay: 590ms; }
/* the light behind the guardian mask at the knockout: strike.js draws it cooling, on its own canvas over the logo, screen
   blended, so it adds light to whatever is under it, the canvas's plaque and then the page's <img> alike */
.hero__light { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 160ms linear; }
.hero__light.is-on { opacity: 1; transition: none; }
.hero--strike.is-skipped .hero__rule, .hero--strike.is-skipped [data-seq], .hero--strike.is-skipped .hero__ghost, .hero--strike.is-skipped .hero__logo img { transition-delay: 0ms; }

/* ---------- chapters ---------- */
.chapter { position: relative; min-height: 100svh; display: grid; align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(96px, 12vh, 160px) var(--gutter); background: var(--surface); }
.chapter--black { background: var(--black); }
.chapter--short { min-height: 0; }
@media (min-width: 1100px) {
  .chapter { grid-template-columns: 6fr 6fr; }
  .chapter--flip .chapter__text { order: 2; }
  .chapter--flip .chapter__media { order: 1; }
  .chapter--wide { grid-template-columns: 5fr 7fr; }
}
/* the photo sits above the text, so a chapter word that slides across passes behind it (paint order follows the
   grid's order-modified order, so flipped chapters need the z-index too) */
.chapter__text { position: relative; z-index: 0; max-width: 640px; }
.chapter__media { position: relative; z-index: 1; }
.chapter > *, .build > *, .session > *, .coach > *, .fight__beat > * { min-width: 0; }

/* Home: a tighter story, with alternating photo/text positions and one continuous seam. */
.page--home .chapter {
  --t-enter: 420ms;
  --stagger: 60ms;
  min-height: 0;
  padding-block: clamp(64px, 8vw, 112px);
  gap: clamp(32px, 5vw, 72px);
}
.page--home .chapter::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--gutter);
  height: 1px;
  background: linear-gradient(to right, var(--red) 56px, var(--line) 56px);
}
.page--home #lineage .chapter__media { width: min(100%, 440px); justify-self: center; }
.page--home .home-wall { display: block; }
.page--home .home-wall .chapter__text { max-width: 760px; }
.page--home .home-wall .title { max-width: 16ch; }
.page--home .wall-stage { margin-top: clamp(28px, 4vw, 48px); }
.page--home .home-trial { display: block; }
.home-trial__intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.home-trial__intro > div { min-width: 0; }
.home-trial .title { max-width: 20ch; font-size: clamp(32px, 4.5vw, 64px); }
.home-trial .line { margin-top: 16px; }
.home-trial__action { flex: none; }
.home-trial .photo-band { margin-bottom: 0; }
.trial-coming-soon { min-height: calc(75svh - var(--bar-h)); display: grid; align-content: center; }
.trial-coming-soon .title { max-width: 12ch; font-size: clamp(48px, 8vw, 112px); }
.trial-coming-soon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.trial-coming-soon__actions .go { margin-top: 0; }

@media (min-width: 1100px) {
  .page--home #family { grid-template-columns: 7fr 5fr; }
}
@media (max-width: 1099px) {
  .page--home .chapter { padding-block: clamp(48px, 7vw, 76px); }
  .page--home #family .chapter__text { max-width: 640px; }
}

/* live grade: black, white and one red until you hold it */
.grade { position: relative; min-width: 0; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
/* The frame owns its size, including while an off-screen WebGL canvas is released. */
.grade canvas, .grade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grade.cut { --cut: clamp(24px, 8vw, 96px); }
.grade img { filter: grayscale(1) contrast(1.15) brightness(0.9); }
.grade.has-gl img { opacity: var(--mix, 0); filter: none; } /* The canvas under it draws the grade; colour is this real photo fading in on top (--mix from mockup.js), so a coloured photo is exactly the file. At 0 it stays in the tree for its alt text. */
@media (hover: hover) { .grade:not(.has-gl):hover img { filter: none; } } /* no WebGL: the plain photo still colours under the cursor */
.grade.is-sharp canvas { display: none; } /* full colour under a still cursor: only the file is drawn (mockup.js sharpen) */
.grade__hint, .grade__cap { position: absolute; left: 16px; bottom: 14px; font-family: var(--utility); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); background: rgba(0,0,0,0.55); padding: 6px 10px; pointer-events: none; transition: opacity var(--t-exit) linear; }
.grade__hint, .grade__cap { max-width: calc(100% - 32px); }
.grade.is-held .grade__hint { opacity: 0; }
body.grade-centre .grade__hint { display: none; }
.grade--portrait { aspect-ratio: 4 / 5; }
.grade--wide { aspect-ratio: 16 / 10; }
.grade--landscape { aspect-ratio: 4 / 3; }
.grade--tall { aspect-ratio: 3 / 4; }
.grade--square { aspect-ratio: 1 / 1; }
.grade--band { aspect-ratio: 8 / 3; }
.photo-band { margin-top: clamp(28px, 4vw, 48px); }
.photo-band > figcaption { margin-top: 10px; font-family: var(--utility); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }

/* the gallery wall on the home page */
.wall { display: grid; gap: 4px; grid-template-columns: repeat(2, 1fr); }
.wall .grade:first-child { grid-column: span 2; }
@media (min-width: 900px) { .wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } .wall .grade:first-child { grid-column: span 2; grid-row: span 2; } }
.wall .grade { aspect-ratio: 1; }
/* the wall lies flat like a floor and stands up as you arrive (scroll-driven, in the depth block below).
   A photo you point at only colours: moving it in 3D would resample it soft, and the rest never dim */
.wall-stage { perspective: 1500px; perspective-origin: 50% 0%; }
.wall { transform-style: preserve-3d; transform-origin: 50% 100%; }

/* ---------- the full ring clock board ---------- */
.ringclock { --cut: 28px; position: relative; background: var(--black); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 22px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * var(--tan)), 100% 100%, 0 100%); }
.ringclock.is-live { box-shadow: inset 0 0 0 1px var(--red); }
.ringclock__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--utility); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.ringclock__row b { color: var(--white); font-weight: 700; }
.ringclock__face { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }
.ringclock__class { margin-top: 16px; font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); }
.ringclock__class span { color: var(--ash); font-weight: 400; }
.ringclock__note { margin-top: 6px; font-family: var(--utility); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }

/* ---------- fight card ---------- */
.card { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.card + .card { margin-top: 18px; }
.card__day { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; padding: 18px 20px 12px; border-bottom: 3px solid var(--red); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.card__day small { font-family: var(--utility); font-size: 11px; letter-spacing: 0.12em; color: var(--ash); text-transform: none; }
.card__empty { padding: 18px 20px; color: var(--ash); font-family: var(--utility); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.row { display: grid; grid-template-columns: var(--time-col, 96px) 1fr auto; gap: 14px; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row__time { font-family: var(--utility); font-size: 14px; letter-spacing: 0.1em; color: var(--red); }
.row__name { font-weight: 500; }
.row__level { font-family: var(--utility); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.row.is-live { background: rgba(252,0,0,0.08); }
.row.is-live .row__level { color: var(--red); }
[data-reveal].row:not(.is-in) { translate: -24px 0; }   /* :not(.is-in), or it outranks the reveal and the rows never land */
/* two days across only once each card is wide enough for a class and its calendar button side by side (520px) */
.week { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(520px, calc(50% - 9px))), 1fr)); }
.week .card + .card { margin-top: 0; }

/* ---------- class list and coaches ---------- */
.page--classes .viewbar { background: var(--black); }

/* classes page: each class as a tale of the tape, in Dave's own phrases */
.tape { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
@media (min-width: 900px) { .tape { grid-template-columns: repeat(2, 1fr); } }
.tape > li, .tape > article { --cut: 34px; padding: 26px 24px 28px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * var(--tan)), 100% 100%, 0 100%); }
.tape h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; }
.tape dl { margin: 20px 0 0; display: grid; gap: 12px; }
.tape dl > div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline; }
.tape dt { font-family: var(--utility); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.tape dd { margin: 0; color: var(--ash); }
.tape dd b { color: var(--white); font-weight: 500; }
.tape dd .tape__gate { color: var(--red); }
.tape__forsa { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; padding: 26px 24px; box-shadow: inset 0 0 0 1px var(--line); }
.tape__forsa img { width: 96px; height: auto; }
.tape__forsa p { color: var(--ash); }
.tape__forsa b { color: var(--white); font-weight: 500; }
.gos { display: flex; flex-wrap: wrap; gap: 0 36px; }
.coaches { display: grid; gap: 4px; margin-top: 28px; }
@media (min-width: 700px) { .coaches { grid-template-columns: repeat(2, 1fr); } }
.coach { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.coach__portrait { width: 96px; height: 96px; background: var(--black); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; overflow: hidden; }
.coach__portrait img { width: 84px; height: 84px; object-fit: contain; }
/* Real portraits colour on desktop hover or in the same phone centre zone as the other photos. */
.coach__portrait--photo { display: block; }
.coach__portrait.coach__portrait--photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--portrait-position, center top); transform: scale(var(--portrait-scale, 1)); filter: grayscale(1) contrast(1.15) brightness(0.9); transition: filter var(--t-exit) var(--ease-out); }
.coach:hover .coach__portrait--photo img { filter: none; transition-duration: var(--t-enter); }
body.grade-centre #mt-coaches .coach__portrait.coach__portrait--photo img {
  filter: grayscale(calc(1 - var(--coach-color, 0))) contrast(calc(1.15 - 0.15 * var(--coach-color, 0))) brightness(calc(0.9 + 0.1 * var(--coach-color, 0)));
  transition: none;
}
.coach h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: 24px; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; }
.coach p { color: var(--ash); font-size: 15px; margin-top: 4px; }
.coach p b { color: var(--red); font-weight: 500; font-family: var(--utility); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.coach--profile { grid-template-columns: 128px minmax(0, 1fr); }
.coach--profile .coach__portrait { width: 128px; height: 128px; }
.coach--youth { margin-top: 24px; max-width: 450px; }
.tape .coach h3 { font-size: 24px; }

/* ---------- fighting styles: the chooser and the per-art views ---------- */
.view[hidden] { display: none; }
.view--smoke { position: relative; overflow: hidden; background: var(--black); }
.view--smoke .head, .view--smoke .choose { position: relative; z-index: 1; background: transparent; }
.choose { display: grid; gap: 4px; padding: 0 var(--gutter) clamp(64px, 10vw, 140px); background: var(--black); }
@media (min-width: 700px) { .choose { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 14px; padding: clamp(32px, 5vw, 64px) 24px clamp(28px, 4vw, 48px); background: var(--black); box-shadow: inset 0 0 0 1px var(--line); color: var(--white); --cut: 48px; transition: box-shadow 120ms ease, background-color 120ms ease; }
.choice:hover, .choice:focus-visible { box-shadow: inset 0 0 0 1px var(--red); background-color: var(--surface); }
/* each badge is a medallion: it turns toward the pointer (depth.js), a hard-edged grey copy behind it shows the rim
   on the side that turns toward you, and a shine masked to the badge's own shape follows the pointer */
.choice { --w: clamp(180px, 24vw, 320px); }
.medal { position: relative; display: block; width: var(--w); transform: perspective(900px) rotateX(var(--mrx, 0deg)) rotateY(var(--mry, 0deg)); filter: drop-shadow(var(--edx, 0px) var(--edy, 0px) 0 #2a2a2a); transition: translate var(--t-exit) var(--ease-out), scale var(--t-exit) var(--ease-out); }
.medal > img { display: block; width: 100%; height: auto; }
/* Team Forsa's ring fills its canvas (1196/1204 tall, top at 3); the upgraded Defensive Edge ring is 965/1254 of its canvas tall,
   top at 30, centred across, with the tassels below. Scale and offset the Forsa badge so both rings share one height and one
   centre line, and both boxes stay the same height. */
.medal--forsa { width: calc(var(--w) * .775); margin: calc(var(--w) * .022) 0 calc(var(--w) * .203); }
.medal__shine { position: absolute; inset: 0; pointer-events: none; opacity: var(--lit, 0); mix-blend-mode: overlay; background: radial-gradient(circle at var(--lx, 50%) var(--ly, 40%), rgba(255,255,255,0.75), rgba(255,255,255,0) 46%); -webkit-mask: url("brand/defensive-edge-badge-upgraded.webp") center / 100% 100% no-repeat; mask: url("brand/defensive-edge-badge-upgraded.webp") center / 100% 100% no-repeat; }
.medal--forsa .medal__shine { -webkit-mask-image: url("brand/team-forsa-badge.png"); mask-image: url("brand/team-forsa-badge.png"); }
/* Classes: the armband-free crops are 909px of the original 1096px canvas.
   Keep the rings at their existing visual size, with each badge's own shape for the shine. */
.medal--adult, .medal--youth { width: calc(var(--w) * 909 / 1096); }
.medal--adult .medal__shine { -webkit-mask-image: url("brand/defensive-edge-adult-no-armbands.webp"); mask-image: url("brand/defensive-edge-adult-no-armbands.webp"); }
.medal--youth .medal__shine { -webkit-mask-image: url("brand/defensive-edge-youth-no-armbands.webp"); mask-image: url("brand/defensive-edge-youth-no-armbands.webp"); }
/* Classes cards contain only a badge, title and Enter, aligned across the pair. */
.choose--classes .choice__go { margin-top: 0; }
@media (min-width: 700px) { .choose--classes .choice { grid-template-rows: auto 1fr auto; } }
/* the card you point at, or tab to, lights up: its surface lifts 5%, its badge lifts toward you, and a red blade is drawn
   down its 27° corner from the top end, like a strike. The blade is the cut's long side (cut / cos 27°) plus 8px past each
   end; the card's own clip trims it flush with the top and right edges, so it meets both in a clean mitre.
   The other card stays exactly as it was */
.choice:hover .medal, .choice:focus-visible .medal { translate: 0 -6px; scale: 1.03; transition-duration: var(--t-enter); }
.choice::before { content: ""; position: absolute; top: 0; left: calc(100% - var(--cut)); width: calc(var(--cut) * 1.1223 + 16px); height: 3px; background: var(--red); pointer-events: none; transform-origin: 0 0; transform: rotate(var(--angle)) translateX(-8px) scaleX(0); transition: transform var(--t-exit) var(--ease-out); }
.choice:hover::before, .choice:focus-visible::before { transform: rotate(var(--angle)) translateX(-8px) scaleX(1); transition-duration: var(--t-enter); }
.choice__name { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(34px, 4.4vw, 60px); text-transform: uppercase; letter-spacing: .02em; line-height: 1; position: relative; padding-bottom: 14px; }
.choice__name::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--t-rule) var(--ease-out); }
.choice:hover .choice__name::after, .choice:focus-visible .choice__name::after { transform: scaleX(1); }
.choice__line { color: var(--ash); max-width: 30ch; }
.choice__go { font-family: var(--utility); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-top: 6px; }
.viewbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 28px var(--gutter) 0; background: var(--surface); }
.viewbar .go { margin-top: 0; }
.viewbar--foot { padding-bottom: clamp(40px, 6vw, 80px); background: var(--black); }

/* ---------- jiu-jitsu page: Dave's paragraphs broken into moments ---------- */
.lead { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--white); margin-top: 24px; max-width: 38ch; }
.lead b { font-weight: 500; }
.block { padding: clamp(56px, 8vw, 120px) var(--gutter); background: var(--surface); }
.block--black { background: var(--black); }
.build, .session { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); }
@media (min-width: 1100px) { .build { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } .session { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.stack { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.stack li { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(32px, 4.4vw, 60px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; padding: 14px 0; border-bottom: 1px solid var(--line); }
.forsa-block { --cut: 36px; background: var(--black); box-shadow: inset 0 0 0 1px var(--line); padding: 28px; display: grid; gap: 20px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * var(--tan)), 100% 100%, 0 100%); }
.forsa-block > img { width: 120px; height: auto; }
.forsa-block > p { color: var(--ash); }
.forsa-block > p b { color: var(--white); font-weight: 500; }
.coach--inline { background: var(--surface-2); }
.rounds { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); counter-reset: none; }
.rounds li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rounds__n { font-family: var(--utility); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.rounds__name { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(20px, 2.4vw, 32px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.levels { display: grid; gap: 4px; margin-top: 20px; max-width: 900px; }
@media (min-width: 700px) { .levels { grid-template-columns: 1fr 1fr; } }
.level { --cut: 36px; padding: 26px 24px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * var(--tan)), 100% 100%, 0 100%); }
.level h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(28px, 3.4vw, 44px); text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.level p { color: var(--ash); margin-top: 8px; }
#bjj-levels .coaches { max-width: 900px; }
@media (max-width: 600px) { .rounds li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- thai boxing page: Dave's Muay Thai email as moments ---------- */
.levels--four { max-width: none; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .levels--four { grid-template-columns: repeat(4, 1fr); } }
.levels--four .level h3 { font-size: clamp(26px, 3vw, 44px); }
.level__count { display: block; margin-top: 10px; font-family: var(--utility); font-size: 13px; letter-spacing: .14em; color: var(--red); }
#curriculum { scroll-margin-top: var(--bar-h); }
.curriculum { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.curriculum li { display: grid; grid-template-columns: 56px 5fr 7fr; gap: 12px 28px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.curriculum__n { font-family: var(--utility); font-size: 13px; letter-spacing: .14em; color: var(--red); }
.curriculum__name { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(24px, 3vw, 40px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.curriculum__tag { display: block; margin-top: 8px; font-family: var(--utility); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.curriculum__tag--gate { color: var(--red); }
.curriculum__text { color: var(--ash); max-width: var(--measure); }
.curriculum__text b { color: var(--white); font-weight: 500; }
#mt-coaches .coaches { max-width: 900px; margin-top: 20px; }
/* Four distinct coaching photos, in a compact two-by-two grid. */
.coaching__label { margin-top: 40px; }
.coaching { display: grid; gap: 4px; grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-top: 20px; }
.coaching .grade { aspect-ratio: 1 / 1; }

/* a reel: photos of different shapes in one row at one height, filling the width. Each figure's --a is its width over height,
   the row's --sum adds them up, and --cap limits how tall a short row gets. On phones the row keeps a height and scrolls sideways */
.reel { display: flex; gap: 6px; min-width: 0; max-width: calc(var(--cap, 320px) * var(--sum, 4)); }
.reel > .grade { flex: var(--a) 1 0; aspect-ratio: var(--a); min-width: 0; }
.reel--guests { margin-top: 20px; }
.reel--youth { margin-top: 6px; }
@media (max-width: 699px) {
  .reel { max-width: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--red) var(--surface-2); }
  /* Even the widest photo fits in one stop; --max-a is the widest image in this reel. */
  .reel > .grade { flex: 0 0 auto; height: min(240px, calc((100vw - 2 * var(--gutter)) / var(--max-a, 1.8))); scroll-snap-align: start; }
  .coaching .grade__cap, .reel .grade__cap { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 7px; font-size: 10px; letter-spacing: 0.1em; }
}

/* competition: a fight night in its real order, one beat per row, then where the team competes and who they are */
.fight { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.fight__beat { display: grid; grid-template-columns: minmax(200px, 3fr) 9fr; gap: 16px 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.fight__step { display: flex; align-items: baseline; gap: 14px; }
.fight__step + .fight__step { margin-top: 10px; }
.fight__n { flex: none; width: 28px; font-family: var(--utility); font-size: 13px; letter-spacing: .14em; color: var(--red); }
.fight__name { text-wrap: balance; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(22px, 2.2vw, 32px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.fight__word { margin: 12px 0 0 42px; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(18px, 2vw, 26px); text-transform: uppercase; letter-spacing: .02em; color: var(--red); }
.fight__sub { margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 1099px) { .fight__beat { grid-template-columns: minmax(0, 1fr); } }
.events { display: grid; gap: 6px; margin-top: 20px; }
@media (min-width: 700px) { .events { grid-template-columns: repeat(3, 1fr); } }
.event .grade { aspect-ratio: 3 / 2; }
.event h3 { margin-top: 14px; font-family: var(--display); font-weight: var(--display-weight); font-size: 20px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.event p { margin-top: 6px; color: var(--ash); font-size: 15px; }
.team { display: grid; gap: 20px 40px; margin-top: 20px; align-items: center; }
@media (min-width: 900px) { .team { grid-template-columns: 2fr 1fr; } }
.team .grade { aspect-ratio: 3 / 2; }
.team__names { list-style: none; margin: 0; padding: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(24px, 3vw, 40px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
@media (max-width: 899px) { .curriculum li { grid-template-columns: 56px 1fr; } .curriculum__text { grid-column: 2; } }
@media (max-width: 600px) { .curriculum li { grid-template-columns: 1fr; gap: 8px; } .curriculum__text { grid-column: 1; } }

/* ---------- placeholders: every fact still waiting on Dave looks the same, so the copy reads as final and the gaps are easy to find ---------- */
.tbd { display: inline-block; max-width: 100%; padding: 1px 8px; border: 1px dashed rgba(248, 248, 248, 0.4); font-family: var(--utility); font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: 0.14em; line-height: 1.7; text-transform: uppercase; color: var(--ash); vertical-align: 0.12em; }
.foot__base .tbd { font-size: 10px; vertical-align: 0; }

/* ---------- words strip ---------- */
.strip { overflow: hidden; background: var(--black); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.strip__track { display: flex; gap: 56px; width: max-content; animation: strip 44s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__word { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(30px, 4.2vw, 60px); letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.strip__word--red { color: var(--red); }
@keyframes strip { to { transform: translateX(-50%); } }

/* ---------- footer: Dave's motto signs off every page, then the facts ---------- */
.foot { position: relative; background: var(--black); }

/* The sign-off. The D's strike line runs out of the badge and splits the band: red above it (Evolution, how we fight,
   still moving), black below it (Tradition, the ground we stand on since 1999), a white keyline where they meet.
   The words are set twice. The copy is red with black type and clipped to the upper side of the line, so a word crossing
   the line takes that side's colours. The badge is drawn once, over both, and the keyline covers the clip's edge (a clip
   anti-aliases each thing it cuts on its own, which leaves a red hairline where two layers meet). mockup.js lays the line
   along the spike edge of the badge's D (--sx/--sy) and strikes the red side in when the band first comes into view
   (--r: how far it still has to travel). The line runs at 27.36°, measured along the upgraded badge's spike. */
.signoff { --word: clamp(48px, 6.8vw, 104px); --badge: clamp(160px, 16vw, 232px); --sx: 50%; --sy: 50%; --r: 0px; --draw: 1;
  position: relative; display: grid; overflow: hidden; isolation: isolate; }
.signoff__set { grid-area: 1 / 1; position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  align-content: start; padding: clamp(28px, 3vw, 48px) var(--gutter); background: var(--black); color: var(--white);
  font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; }
.signoff__set--red { background: var(--red); color: var(--black); -webkit-user-select: none; user-select: none; pointer-events: none;
  /* a 4000px square whose lower edge lies on the line: d = (cos, -sin) runs up the line, n = (-sin, -cos) points into the red side */
  clip-path: polygon(calc(var(--sx) - 3553px - var(--r) * 0.4596) calc(var(--sy) + 1838px - var(--r) * 0.8881),
    calc(var(--sx) + 3553px - var(--r) * 0.4596) calc(var(--sy) - 1838px - var(--r) * 0.8881),
    calc(var(--sx) + 1715px - var(--r) * 0.4596) calc(var(--sy) - 5391px - var(--r) * 0.8881),
    calc(var(--sx) - 5391px - var(--r) * 0.4596) calc(var(--sy) - 1715px - var(--r) * 0.8881)); }
.signoff__evo, .signoff__trad { display: grid; font-size: var(--word); line-height: 0.86; letter-spacing: 0.01em; }
.signoff__evo { justify-self: start; justify-items: start; }
.signoff__trad { justify-self: end; justify-items: end; }
.signoff__meets { font-size: max(13px, 0.27em); line-height: 1; letter-spacing: 0.34em; margin-top: 0.6em; }
.signoff__est { font-size: max(11px, 0.15em); line-height: 1; letter-spacing: 0.38em; margin: 1.1em -0.38em 0 0; color: var(--red); }
.signoff__set--red .signoff__meets { color: var(--white); }
.signoff__set--red .signoff__est { color: var(--black); }
/* the badge sits in the words' flow (the red copy keeps an empty slot the same size) and is painted over both layers.
   It is a medallion like the ones on the chooser: depth.js turns it toward the pointer anywhere over the band */
/* tuck the badge into the space beside MEETS; wide screens also have room beside both large words */
.signoff__badge { display: block; justify-self: center; width: var(--badge); max-width: none; aspect-ratio: 1; margin: calc(var(--badge) * -0.12) 0 calc(var(--badge) * -0.08); }
@media (min-width: 1100px) { .signoff__badge { margin-block: calc(var(--badge) * -0.25) calc(var(--badge) * -0.22); } }
.signoff__badge.medal { z-index: 2; }
/* the keyline, between the layers and the badge, drawn out from the badge along the line (--seam-len: just long enough to cross the band) */
.signoff__seam { position: absolute; z-index: 1; left: var(--sx); top: var(--sy); width: var(--seam-len, 8000px); height: 3px; margin: -1.5px 0 0 calc(var(--seam-len, 8000px) / -2); background: var(--white); pointer-events: none; transform: rotate(-27.36deg) scaleX(var(--draw)); }
/* the strike: armed by mockup.js once it has placed the line, so without script (or with reduced motion) the band is simply finished */
.signoff.is-armed { --r: var(--reach, 2400px); --draw: 0; }
.signoff.is-armed.is-drawn { --draw: 1; }
.signoff.is-armed.is-struck { --r: 0px; }
/* the line draws like the site's rules; the red side crosses like the page blade */
.signoff.is-striking .signoff__seam { transition: transform 420ms var(--ease-out); }
.signoff.is-striking .signoff__set--red { transition: clip-path 520ms var(--ease-move); }
/* hit-stop: when the red side lands, the badge takes 2px along the strike and holds three frames */
.signoff.is-hit .signoff__badge.medal { translate: 0.92px 1.78px; transition: none; }
@media (max-width: 767px) {
  .signoff { --word: min(14.4vw, 72px); --badge: clamp(132px, 39vw, 180px); }
  .signoff__set { padding-block: 28px 32px; }
  .signoff__badge { margin: 12px 0 8px; }
  .signoff__seam { height: 2px; margin-top: -1px; }
}

/* the facts under it */
.foot__base { display: grid; gap: 28px clamp(24px, 3vw, 56px); align-items: start; padding: clamp(40px, 5vw, 72px) var(--gutter) 36px;
  font-family: var(--utility); font-size: 12px; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; color: var(--ash); }
@media (min-width: 1100px) { .foot__base { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto; } }
.foot__name { color: var(--white); font-size: 13px; line-height: 1.6; max-width: 26ch; text-wrap: balance; }
.foot__name b { display: block; font-family: var(--display); font-weight: var(--display-weight); font-size: 26px; letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 6px; }
.foot__group { display: grid; gap: 10px; justify-items: start; }
.foot__group p { margin: 0; }
.foot__group > p:not(.foot__label) { color: var(--white); }
.foot__label { color: var(--red); }
.foot__group a { position: relative; padding-bottom: 3px; color: var(--white); }
.foot__group a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-rule) var(--ease-out); }
.foot__group a:hover::after, .foot__group a:focus-visible::after, .foot__group a[aria-current="page"]::after { transform: scaleX(1); }
.foot__stamp { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); font-size: 11px; }

/* ---------- depth layer: cards and photos give under the pointer (depth.js adds .tilt and writes --rx/--ry).
   The transform exists only while a card is moving, so resting cards are not promoted to 3D layers ---------- */
.tilt { position: relative; }
.tilt.is-tilting { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
/* a glint along the 27° line passes under the pointer */
.tilt.is-tilting::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--lit, 0); background: linear-gradient(27deg, transparent calc(var(--band, 50%) - 16%), rgba(248, 248, 248, 0.07) var(--band, 50%), transparent calc(var(--band, 50%) + 16%)); }

/* ---------- depth layer, scroll-driven: the camera moves as you scroll. CSS only, no scroll listeners.
   Browsers without scroll timelines (Firefox today) keep the flat layout; reduced motion keeps it too ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the hero dollies back: the smoke falls behind, the word sinks, the logo and line lift away */
    .hero { view-timeline: --hero block; }
    .hero__plate { animation: dolly-far linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero__ghost { animation: dolly-mid linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero__inner { animation: dolly-near linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    /* chapter photos drift against the text as they pass */
    .chapter__media > * { animation: media-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* the photo wall stands up off the floor */
    .wall { animation: wall-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
    /* the chapter word arrives tucked behind its photo and slides out into its line as the chapter comes up,
       then holds while you read (depth.js measures --slide, the distance to tuck the word's end under the photo) */
    .chapter__text > .word { animation: word-slide linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes dolly-far { to { transform: translateY(16%) scale(1.06); } }
@keyframes dolly-mid { to { transform: translateY(8%) scale(0.94); } }
@keyframes dolly-near { to { transform: translateY(-14%); opacity: 0; } }
@keyframes media-drift { from { translate: 0 6%; } to { translate: 0 -6%; } }
@keyframes word-slide { 0%, 12% { translate: var(--slide, 0px) 0; } 45%, 100% { translate: 0 0; } }
@keyframes wall-rise { from { transform: rotateX(52deg) translateY(6%); } to { transform: none; } }

/* Size the schedule statement to its own column, including the narrow desktop split. */
#clock .chapter__text { container-type: inline-size; }
#clock .word--schedule { font-size: clamp(28px, 13cqi, 64px); line-height: 1.06; letter-spacing: 0.01em; hyphens: none; text-wrap: balance; }
#clock .word--schedule em { display: block; white-space: nowrap; }

/* ---------- the week: filter by art, trace one class across the days, take it home as a calendar file ---------- */
.weekbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 0; }
.filter { position: relative; display: flex; flex-wrap: wrap; gap: 4px; }
/* two filters side by side, the age group and the style; on a phone each is its own row */
.filters { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.filter__opt { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 16px 13px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ash); font-family: var(--utility); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; transition: color 120ms ease, background 120ms ease, transform var(--t-exit) var(--ease-out); }
.filter__opt:hover { color: var(--white); }
.filter__opt[aria-pressed="true"] { color: var(--white); background: var(--black); }
.filter__n { font-size: 11px; letter-spacing: 0.06em; color: var(--ash); font-variant-numeric: tabular-nums; }
/* in each group one red rule slides to the choice */
.filter__rule { position: absolute; left: 0; top: 0; width: 100px; height: 2px; background: var(--red); transform-origin: 0 50%; transform: translate(var(--fx, 0px), var(--fy, 0px)) scaleX(var(--fw, 0)); transition: transform var(--t-enter) var(--ease-out); pointer-events: none; }
.weekbar__note { flex-basis: 100%; font-family: var(--utility); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.weekbar__note b { color: var(--white); font-weight: 700; }
/* The note sits under the filters, and beside them only where even the longest note ("Golden Thaigers Level 2 2 classes a week", 328px)
   fits next to the 752px of filters. What it says never decides where it goes, so pointing at a class can't reflow the week. */
.weekbar { container-type: inline-size; }
@container (min-width: 1130px) { .weekbar__note { flex: 0 0 340px; text-align: right; white-space: nowrap; } }
.week { margin-top: 18px; }
.week-days { display: none; }
.week .row__name { border: 0; padding: 0; background: none; color: inherit; text-align: left; font: inherit; font-weight: 500; cursor: pointer; overflow-wrap: anywhere; }
/* every class reads at rest: the time, the class, and under it what the class is. The right end of the row stays
   clear for the calendar button, so the button never covers a word */
.week { --time-col: 132px; }   /* a class shows its whole span, 4:30–5:15 PM */
.week .row { position: relative; grid-template-columns: var(--time-col) minmax(0, 1fr) auto; row-gap: 3px; padding: 13px 20px; }
.week .row__level { grid-column: 2; }
.row__level:empty { display: none; }
/* the reveal keeps its stagger; the trace lights rows on its own delay, so the two never fight over one transition */
.week .row.is-in { transition: opacity var(--t-enter) var(--ease-out), translate var(--t-enter) var(--ease-out), background-color var(--t-exit) linear; transition-delay: calc(var(--i, 0) * var(--stagger)), calc(var(--i, 0) * var(--stagger)), 0ms; }
.row[hidden], .card__empty[hidden] { display: none; }
/* with a mouse, "Add to calendar" slides into the clear end of the row you point at */
.row__add { grid-column: 3; grid-row: 1 / span 2; align-self: center; height: max-content; translate: 8px 0; padding: 7px 10px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--white); font-family: var(--utility); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity var(--t-exit) linear, translate var(--t-exit) var(--ease-out), background 120ms ease, color 120ms ease, transform var(--t-exit) var(--ease-out); }
.row:hover .row__add, .row:focus-within .row__add, .row__add.is-done { opacity: 1; translate: none; }
.row__add:hover { background: var(--red); color: var(--black); box-shadow: none; }
.row__add.is-done { color: var(--red); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--red); }
.row__add.is-hit { transform: translate(1.8px, 0.9px) scale(0.97); transition: none; }
/* tracing: point at a class and every session of it lights up, a red edge drawn down each one, rippling out day by
   day from the one you picked. The rest of the week is left exactly as it was, so it all stays readable */
.week .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--t-exit) var(--ease-out); }
.week .row.is-traced::before { transform: none; transition-duration: var(--t-enter); transition-delay: calc(var(--far, 0) * var(--stagger)); }
.week .row.is-traced { background-color: rgba(248,248,248,0.05); }
.week .row.is-in.is-traced { transition-delay: calc(var(--i, 0) * var(--stagger)), calc(var(--i, 0) * var(--stagger)), calc(var(--far, 0) * var(--stagger)); }
.week .row.is-live.is-traced { background-color: rgba(252,0,0,0.13); }
@media (hover: hover) {
  .week .row:hover { background-color: rgba(248,248,248,0.08); }
  .week .row.is-live:hover { background-color: rgba(252,0,0,0.16); }
}
/* touch screens have no hover: tap a class to trace it, and each of its sessions offers the button at its right end */
@media (hover: none) {
  .week .row { grid-template-columns: var(--time-col) 1fr auto; }
  .row__add { position: static; grid-column: 3; grid-row: 1 / span 2; align-self: center; height: auto; margin: 0; translate: none; opacity: 1; display: none; }
  .week .row.is-traced .row__add { display: inline-block; }
}

/* ---------- page changes: a blade crosses the screen at the strike angle with a red edge, forward to the right,
   back to the left. Cross-page and same-page (the fighting styles views) use the same blade. The red is the
   image pair's own background showing through a 6px gap between the two pages. 51vh is the page height times
   tan 27°, the horizontal lean of the edge ---------- */
@view-transition { navigation: auto; }
::view-transition-image-pair(root) { background: var(--red); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-page); animation-timing-function: var(--ease-move); animation-fill-mode: both; mix-blend-mode: normal; }
::view-transition-old(root) { animation-name: blade-old; }
::view-transition-new(root) { animation-name: blade-new; }
.vt-back::view-transition-old(root) { animation-name: blade-new; animation-direction: reverse; }
.vt-back::view-transition-new(root) { animation-name: blade-old; animation-direction: reverse; }
@keyframes blade-new { from { clip-path: polygon(0 0, -6px 0, calc(-51vh - 6px) 100%, 0 100%); } to { clip-path: polygon(0 0, calc(100% + 51vh) 0, 100% 100%, 0 100%); } }
@keyframes blade-old { from { clip-path: polygon(0 0, 100% 0, 100% 100%, -51vh 100%); } to { clip-path: polygon(calc(100% + 51vh + 6px) 0, 100% 0, 100% 100%, calc(100% + 6px) 100%); } }

/* ---------- compact layouts ---------- */
@media (max-width: 1099px) {
  .bar { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--gutter); }
  .bar__right { justify-content: flex-end; gap: 12px; }
  .bar__nav { position: fixed; inset: var(--bar-h) 0 0; max-height: calc(100dvh - var(--bar-h)); display: none; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding: 20px var(--gutter) max(24px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--black); }
  .bar__nav a { width: 100%; max-width: 720px; margin-inline: auto; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(26px, 5vw, 42px); letter-spacing: 0.02em; text-transform: uppercase; }
  .bar__nav a[aria-current="page"] { color: var(--red); }
  .bar__nav .bar__trial { justify-content: center; margin-top: 24px; padding: 16px 20px; border: 0; font-family: var(--utility); font-size: 16px; }
  body.menu-open .bar__nav { display: flex; }
  body.menu-open { overflow: hidden; }
  .bar__menu { display: block; min-width: 52px; min-height: 44px; padding: 8px 4px; border-block: 1px solid var(--line); }
  .bar__menu:hover, .bar__menu[aria-expanded="true"] { color: var(--red); border-color: var(--red); }
  .bar__brand { min-height: 44px; }
  .tclock__label { display: none; }
  .bar .btn--small { display: none; }
  .chapter { min-height: 0; padding-block: clamp(56px, 8vw, 88px); }
  .chapter__text { max-width: 720px; }
  .chapter__media > .grade--portrait, .build > .grade--tall { width: min(100%, 560px); margin-inline: auto; }
  .foot__base { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__name, .foot__cta { grid-column: 1 / -1; }
  .foot__cta { justify-self: start; }
}
@media (max-width: 767px) {
  :root { --bar-h: 76px; }
  .bar { padding-left: var(--gutter); gap: 8px; }
  .bar__right { gap: 10px; }
  .tclock { gap: 8px; padding-inline: 8px; }
  .tclock .bell--mini { width: 18px; height: 18px; }
  .bar__brand span { display: none; }
  .bar__brand img { width: 60px; height: 60px; }
  .word { font-size: clamp(42px, 13vw, 90px); }
  .week { --time-col: 116px; }
  .week .row__time { letter-spacing: 0.04em; }
  .row, .week .row { grid-template-columns: var(--time-col, 76px) minmax(0, 1fr); gap: 3px 12px; padding: 14px 16px; }
  .row__level { grid-column: 2; }
  .week .row__add { display: none; grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; translate: none; opacity: 1; }
  .week .row.is-traced .row__add, .week .row:focus-within .row__add { display: inline-block; }
  /* each group is three buttons across, stacked, each count under its label like a scoreboard */
  .filters { width: 100%; }
  .filter { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .filter__opt { flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 11px; font-size: 11px; letter-spacing: 0.1em; }
  .card__day small { flex-basis: 100%; }
  .coach { grid-template-columns: 72px minmax(0, 1fr); }
  .coach__portrait { width: 72px; height: 72px; }
  .coach__portrait img { width: 62px; height: 62px; }
  .coach--profile { grid-template-columns: 96px minmax(0, 1fr); }
  .coach--profile .coach__portrait { width: 96px; height: 96px; }
  .go { min-height: 44px; padding-block: 10px; }
  .btn { min-height: 48px; max-width: 100%; white-space: normal; justify-content: center; text-align: center; }
  .hero { padding: 28px var(--gutter) 64px; }
  .hero__title { font-size: clamp(32px, 8.5vw, 54px); margin-top: 22px; }
  .hero__title--motto { font-size: clamp(28px, 7.6vw, 46px); }
  .hero__est { margin-top: 12px; letter-spacing: 0.3em; }
  .hero__rule { margin-top: 18px; }
  .hero__sub { margin-top: 14px; }
  .hero__cta { margin-top: 22px; gap: 8px 16px; }
  .hero__replay { min-height: 44px; bottom: 6px; }
  .ringclock { padding: 16px; }
  .ringclock__row { flex-wrap: wrap; gap: 6px 12px; }
  .ringclock__face { gap: 12px; }
  .ringclock .seg { width: clamp(18px, 5vw, 32px); }
  .ringclock .bell { width: 36px; height: 36px; }
  .week .row__name, .row__add { min-height: 44px; }
  .week-days { display: flex; position: sticky; top: var(--bar-h); z-index: 10; gap: 2px; margin-top: 20px; padding: 6px 0; overflow-x: auto; scrollbar-width: thin; background: var(--black); border-bottom: 1px solid var(--line); }
  .week-days a { display: grid; place-items: center; flex: 1 0 40px; min-height: 44px; font-family: var(--utility); font-size: 12px; color: var(--white); }
  .week-days a:hover, .week-days a:focus-visible { background: var(--surface-2); color: var(--red); }
  .week .card { scroll-margin-top: 64px; }
  .foot__base { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; padding-bottom: max(28px, env(safe-area-inset-bottom)); letter-spacing: 0.08em; }
  .foot__base nav.foot__group { grid-column: 1 / -1; grid-template-columns: repeat(2, max-content); gap: 0 28px; }
  .foot__base nav .foot__label { margin-bottom: 6px; }
  .foot__base nav .foot__label { grid-column: 1 / -1; }
  .foot__group a { min-height: 44px; display: flex; align-items: center; padding-bottom: 0; }
  .foot__group a::after { bottom: 8px; }
  .foot__cta { justify-self: stretch; }
}
@media (max-width: 699px) {
  .choice { --w: clamp(80px, 24vw, 120px); grid-template-columns: var(--w) minmax(0, 1fr); justify-items: start; align-items: start; text-align: left; gap: 8px 16px; padding: 24px 16px; --cut: 28px; }
  .choice .medal { grid-column: 1; grid-row: 1 / 4; align-self: center; justify-self: center; }
  .choice__name, .choice__line, .choice__go { grid-column: 2; }
  .choice__name { font-size: clamp(24px, 6vw, 34px); padding-bottom: 4px; }
  .choice__line { font-size: 15px; line-height: 1.45; }
  .choice__go { min-height: 24px; }
  .choose--classes .choice { grid-template-rows: auto auto; }
  .choose--classes .choice .medal { grid-row: 1 / 3; }
  .choose--classes .choice__name { align-self: end; }
  /* Anchor the mobile rule to Classes itself, including when the title wraps. */
  .choose--classes .choice__name::after { content: none; }
  .choose--classes .choice__word { display: inline-block; position: relative; }
  .choose--classes .choice__word::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -4px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--t-rule) var(--ease-out); }
  .choose--classes .choice:hover .choice__word::after, .choose--classes .choice:focus-visible .choice__word::after { transform: scaleX(1); }
  .choose { gap: 12px; }
}
@media (max-width: 480px) {
  .forsa-block { padding: 20px; }
  .coach--inline { grid-template-columns: 1fr; }
  .tape > li, .tape > article { padding: 24px 20px; }
  .tape__forsa { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .tape__forsa img { width: 64px; }
  .tape dl > div { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .hero__cta .btn { width: 100%; }
}
@media (max-height: 500px) and (max-width: 1099px) {
  .bar__nav { padding-top: 8px; }
  .bar__nav a { font-size: 24px; padding-block: 10px; }
  .chapter__media > .grade--portrait { max-width: calc(100svh * 0.8); }
  .build > .grade--tall { max-width: calc(100svh * 0.75); }
}
@media (min-width: 1920px) {
  :root { --gutter: max(72px, calc((100vw - 1760px) / 2)); }
}
@media (pointer: coarse) {
  .go, .btn--small, .filter__opt, .week .row__name, .row__add { min-height: 44px; }
}

/* ---------- reduced motion: hard cuts everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .hero [data-seq], [data-reveal] { opacity: 1 !important; transform: none !important; translate: none !important; }
  .rule, .hero__rule { transform: scaleX(1) !important; }
  .wipe::after, .stamps, .grain, .hero__video, .hero__background { display: none !important; }
  .hero__inner { visibility: visible !important; }
  .strip__track { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .choice:hover .medal, .choice:focus-visible .medal { translate: none; scale: none; }
}