/* =====================================================================
   Bowen Island Judo Club — site.css  ("Hinomaru Poster")
   Black, white and red. Anton for display, Archivo for text.
   The red circle (hinomaru) from the club badge is the recurring device.

   The shared stylesheet for every page (read-only for page builders; see STYLEGUIDE.md).
   Sections 14-16 style the three reference pages (Home, Classes, 404).
   Other page-only rules live in assets/css/page-<stem>.css, linked after this file
   (page-About-Us.css, page-About-Judo.css, page-Contact.css), scoped by the class on <main>.

   Contents
     1  Tokens                    10  Contact links
     2  Base                      11  Forms
     3  Utilities                 12  Header + navigation
     4  Type roles                13  Footer
     5  Buttons                   14  Home
     6  Sections                  15  Classes
     7  Inner-page hero           16  404
     8  Split media / text        17  Motion + print
     9  Prose, figures, lists
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --ink: #0a0a0a;
  --ink-2: #1c1c1c;
  --ink-line: #333333;        /* hairlines on ink */
  --white: #ffffff;
  --paper: #f3f0e9;           /* warm off-white bands */
  --paper-line: #d6d3cc;      /* hairlines on white / paper */
  --red: #ff0000;             /* logo red: discs + graphics; small text only on ink (4.95:1) */
  --red-ink: #d10000;         /* red text + filled buttons on white (5.66:1) / paper (4.97:1) */
  --grey: #5c5c5c;            /* muted text on white (6.69:1) / paper (5.88:1) */
  --grey-on-dark: #a3a3a3;    /* muted text on ink (7.85:1) */
  --text-soft: #333333;       /* long-form body copy on white / paper */
  --text-on-dark: #d9d9d9;    /* body copy on ink (14:1) */
  --error-bg: #fff1f1;
  --focus: var(--ink);        /* focus ring colour; set to white inside dark surfaces */

  /* type */
  --f-display: "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-hero: clamp(2.5rem, .25rem + 10.6vw, 6.25rem);      /* home H1 */
  --t-page: clamp(4.5rem, .5rem + 15vw, 14rem);           /* inner-page H1, one short word */
  --t-display: clamp(2.75rem, 1rem + 4.6vw, 6rem);        /* class names, display H2s */
  --t-statement: clamp(2.125rem, 1rem + 3.3vw, 4.5rem);   /* one-line statements (red band) */
  --t-figure: clamp(2rem, 1.25rem + 1.3vw, 2.75rem);      /* times + prices */
  --t-h2: clamp(1.75rem, 1.15rem + 1.8vw, 2.75rem);
  --t-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --t-lead: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-kicker: .8125rem;

  /* layout */
  --max: 1320px;
  --measure: 36em;            /* ~65-75 characters a line in Archivo (68ch ran to 80+: Archivo's "0" is wide) */
  --gutter: clamp(16px, 4vw, 56px);
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));  /* viewport edge → container content edge */
  --header-h: 84px;
  --sec: clamp(64px, 7.5vw, 120px);   /* vertical section rhythm */

  /* tatami: a 4.5-mat pinwheel tile drawn as hairlines (paper bands only) */
  --tatami: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cpath d='M0 .5H192M.5 0V192M0 64.5H128M128.5 0V128M64.5 64V192M64 128.5H192' fill='none' stroke='%23000' stroke-opacity='.045'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(209, 0, 0, .16);
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* smooth only for in-page link jumps (the link holds focus), never for scripted scrolls or find-in-page */
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p, h1, h2, h3, h4, ul, ol, dl, dd, blockquote, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; text-wrap: balance; }
/* no one-word last lines in running text */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark, .section--ink, .site-footer, .hero__panel, .bjj__card, .fees { --focus: var(--white); }

/* ---------- 3. Utilities ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.nowrap { white-space: nowrap; }   /* keep a short phrase on one line, e.g. "Monthly price" in a wrapping list */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 300;
  background: var(--ink); color: var(--white); padding: 12px 18px;
  font-weight: 700; text-decoration: none; border-radius: 0 0 6px 6px;
}
.skip-link:focus { top: 0; outline-color: var(--red); }

/* Photography: black-and-white treatment, so mismatched photos sit in one poster world.
   Not used on the "Judo is for everyone." collage (colour on purpose) or on historic images. */
.bw { filter: grayscale(1) contrast(1.1) brightness(.97); }

/* Faint tatami hairlines — paper bands only, never behind photos or on ink */
.tatami { background-color: var(--paper); background-image: var(--tatami); background-size: 192px 192px; }

/* The red disc. A .sun is decorative: always aria-hidden="true"; size + place it per use. */
.sun { border-radius: 50%; background: var(--red); pointer-events: none; }
.dot {
  display: inline-block; flex: none;
  width: .78em; height: .78em; border-radius: 50%;
  background: var(--red); vertical-align: -.06em;
}

/* ---------- 4. Type roles ---------- */
/* Anton (always caps) is reserved for: the home H1, page H1s, the red band statement,
   "Judo is for everyone.", class names, prices and times. Everything else is Archivo. */
.display {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-display); line-height: .92;
  letter-spacing: .005em; text-transform: uppercase;
}
.h2 { font-family: var(--f-body); font-weight: 800; font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.012em; }
.h3 { font-family: var(--f-body); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.005em; }
.lead { font-size: var(--t-lead); line-height: 1.5; font-weight: 500; color: var(--ink); }
.muted { color: var(--grey); }
.on-dark .muted, .section--ink .muted { color: var(--grey-on-dark); }

.kicker {
  display: flex; align-items: center; gap: .6em;
  font-family: var(--f-body); font-weight: 800;
  font-size: var(--t-kicker); line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.kicker--on-dark { color: var(--white); }
.kicker--red { color: var(--red-ink); }
.on-dark .kicker--red, .section--ink .kicker--red, .fees .kicker--red { color: var(--red); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 14px 28px;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--f-body); font-weight: 800; font-size: .9375rem;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.1;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; opacity: .9; flex: none;
}
.btn:hover { transform: translateY(-2px); }
.btn--red { background: var(--red-ink); border-color: var(--red-ink); color: var(--white); }
.btn--red:hover { background: var(--ink); border-color: var(--ink); }
.on-dark .btn--red:hover, .section--ink .btn--red:hover, .hero__panel .btn--red:hover,
.bjj__card .btn--red:hover, .fees .btn--red:hover, .site-footer .btn--red:hover, .site-nav .btn--red:hover {
  background: var(--white); border-color: var(--white); color: var(--ink);
}
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--red-ink); border-color: var(--red-ink); }
.band-red .btn--ink:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--ghost-light { border-color: var(--white); color: var(--white); background: transparent; }
.btn--ghost-light:hover { background: var(--white); color: var(--ink); }
.btn--sm { min-height: 46px; padding: 11px 22px; font-size: .875rem; }
.btn--xl { min-height: 64px; padding: 18px 40px; font-size: 1.0625rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: progress; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* small phones: labels never wrap (nowrap above), so tighten them until "Meet the Instructors" fits a 320px card */
@media (max-width: 399px) {
  .btn { font-size: .875rem; letter-spacing: .05em; padding-inline: 20px; }
  .btn--xl { padding-inline: 24px; }
}

/* ---------- 6. Sections ---------- */
.section { padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .6); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--white); }
.section--ink .lead { color: var(--white); }
.section--ink p { color: var(--text-on-dark); }
.section__head { display: grid; gap: 16px; margin-bottom: clamp(28px, 3.4vw, 52px); max-width: 52rem; }
.stack > * + * { margin-top: var(--stack, 1.25rem); }

/* ---------- 7. Inner-page hero (Classes, About Us, About Judo, Contact, 404) ---------- */
.page-hero { --ph-pb: clamp(36px, 4.4vw, 64px); position: relative; overflow: hidden; background: var(--paper); }
.page-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 420px);
  gap: clamp(28px, 4vw, 64px); align-items: end;
  padding-top: clamp(36px, 5vw, 80px); padding-bottom: var(--ph-pb);
}
.page-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.page-hero__head { position: relative; }
.page-hero__title {
  position: relative; z-index: 2;
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-page);
  line-height: .84; text-transform: uppercase; letter-spacing: .005em;
  text-wrap: initial;
}
.page-hero__title--m { font-size: clamp(3.5rem, .5rem + 9.2vw, 9.5rem); }   /* 8-11 letters: ABOUT US, CONTACT US, INSTRUCTORS */
.page-hero__title--l { font-size: clamp(3rem, .5rem + 7.4vw, 7.75rem); line-height: .88; } /* longer, may wrap: WHAT IS JUDO? */
.page-hero__title .kicker { margin-bottom: clamp(16px, 1.8vw, 26px); font-size: clamp(.8125rem, .7rem + .35vw, 1rem); line-height: 1.2; }
.page-hero__word { display: block; }
.page-hero__head > :not(.page-hero__title):not(.page-hero__sun) { position: relative; z-index: 2; }
.page-hero__side { position: relative; z-index: 2; display: grid; gap: 22px; align-content: end; }
.page-hero__side .btn { justify-self: start; }
.page-hero__lead { font-size: var(--t-lead); line-height: 1.5; font-weight: 500; max-width: 40ch; }
/* The sun rises from the hero's bottom edge behind the H1 (desktop) and straddles the
   title / side boundary at the right (phones). Tune per page with --sun-x and --sun-size. */
.page-hero__sun {
  position: absolute; z-index: 1;
  width: var(--sun-size, clamp(240px, 34vw, 480px)); aspect-ratio: 1;
  left: var(--sun-x, 30%); bottom: calc(-1 * var(--ph-pb)); transform: translateY(50%);
}
@media (max-width: 899px) {
  /* minmax(0, …): a one-word H1 can never widen the column (and push the side list off-screen),
     and 22vw leaves room for +.12em user letter-spacing (WCAG 1.4.12) on "CLASSES" at 320px */
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page-hero__title { font-size: 22vw; }
  .page-hero__title--m { font-size: 17.5vw; }
  .page-hero__title--l { font-size: 13vw; }
  .page-hero__sun { width: var(--sun-size-m, 40vw); left: auto; right: -10vw; bottom: 0; }
  .page-hero__title--m ~ .page-hero__sun, .page-hero__title--l ~ .page-hero__sun { --sun-size-m: 34vw; } /* stays clear of the kicker */
  /* the side hides the sun's lower half, edge to edge */
  .page-hero__side { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
}

/* Black strap under a page hero (Classes tagline) */
.tagline-band { position: relative; z-index: 2; background: var(--ink); color: var(--white); }
.tagline-band p {
  display: flex; align-items: center; gap: .9em;
  padding-block: 20px;
  font-family: var(--f-body); font-weight: 800;
  font-size: clamp(.875rem, .78rem + .45vw, 1.1875rem);
  line-height: 1.35; letter-spacing: .16em; text-transform: uppercase;
  text-wrap: balance;
}
.tagline-band .dot { width: 14px; height: 14px; }

/* On-this-page list (Classes hero side) */
.jump { display: grid; border-top: 3px solid var(--ink); }
.jump a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
  min-height: 64px; padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
}
.jump__name { font-weight: 800; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; }
.jump__sub { grid-column: 1; font-size: .9375rem; line-height: 1.35; color: var(--grey); font-weight: 500; }
.jump a::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2;
  width: 12px; height: 12px; border-radius: 50%; background: var(--ink);
  transition: background-color .18s ease, transform .18s ease;
}
.jump a:hover .jump__name { color: var(--red-ink); }
.jump a:hover::after { background: var(--red); transform: scale(1.35); }
.jump__sub { text-wrap: balance; }
/* on ink (e.g. the About Us registration panel) */
.jump--on-dark { border-top-color: var(--white); }
.jump--on-dark a { border-bottom-color: var(--ink-line); }
.jump--on-dark .jump__name { color: var(--white); }
.jump--on-dark .jump__sub { color: var(--grey-on-dark); }
.jump--on-dark a::after { background: var(--white); }
.jump--on-dark a:hover .jump__name { color: var(--red); }
.jump--on-dark a:hover::after { background: var(--red); }

/* ---------- 8. Split: media + text, photo bleeds to the viewport edge ---------- */
.split { padding-top: var(--sec); }
.split--last, .split:last-child { padding-bottom: var(--sec); }
.split__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
  padding-right: var(--edge);
}
.split--flip .split__grid { padding-right: 0; padding-left: var(--edge); }
.split--flip .split__media { order: 2; }
.split--wide-media .split__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip.split--wide-media .split__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split__media { position: relative; align-self: stretch; min-height: clamp(320px, 38vw, 600px); overflow: hidden; background: var(--ink); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* natural: keep the photo's own ratio (portraits, long text beside it) */
.split--natural .split__grid { align-items: start; }
.split--natural .split__media { align-self: start; min-height: 0; background: none; }
.split--natural .split__media img { position: static; width: 100%; height: auto; }
/* contained: photo stays inside the page margins instead of bleeding */
.split--contained .split__grid, .split--contained.split--flip .split__grid {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .split--sticky .split__media { position: sticky; top: calc(var(--header-h) + 28px); }
}
@media (max-width: 899px) {
  .split__grid, .split--flip .split__grid,
  .split--wide-media .split__grid, .split--flip.split--wide-media .split__grid { grid-template-columns: 1fr; padding: 0; }
  .split--flip .split__media { order: 0; }
  .split__media { min-height: 0; aspect-ratio: 3 / 2; }
  .split--natural .split__media { aspect-ratio: auto; }
  .split__body { padding-inline: var(--gutter); }
  .split--contained .split__grid, .split--contained.split--flip .split__grid { padding-inline: var(--gutter); }
  .split--contained .split__body { padding-inline: 0; }
}

/* ---------- 9. Prose, figures, lists ---------- */
/* Long-form reading: bios, the history essay. Put headings, paragraphs, lists, figures inside. */
.prose {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.72; color: var(--text-soft);
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.1em; color: var(--ink);
  font-family: var(--f-body); font-weight: 800; font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.012em;
}
.prose h3 { margin-top: 1.9em; color: var(--ink); font-size: var(--t-h3); line-height: 1.25; }
.prose h2 + *, .prose h3 + *, .prose .kicker + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.prose a { color: var(--red-ink); text-decoration-thickness: .08em; text-underline-offset: .18em; }
.prose a:hover { color: var(--ink); }
.prose ul > li { position: relative; padding-left: 1.6em; }
.prose ul > li + li { margin-top: .5em; }
.prose ul > li::before {
  content: ""; position: absolute; left: .2em; top: .62em;
  width: .5em; height: .5em; border-radius: 50%; background: var(--red);
}
.prose ol { padding-left: 1.4em; }
.prose ol > li + li { margin-top: .5em; }
.prose ol > li::marker { font-weight: 800; color: var(--red-ink); }
.prose blockquote {
  padding-left: 1.1em; border-left: 6px solid var(--red);
  font-size: 1.2em; line-height: 1.5; font-weight: 600; color: var(--ink);
}
.prose hr { width: 12px; height: 12px; margin: 2.6em 0; border: 0; border-radius: 50%; background: var(--red); }
.prose .lead, .prose > .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); font-weight: 500; }
.prose--on-dark, .section--ink .prose { color: var(--text-on-dark); }
.section--ink .prose h2, .section--ink .prose h3, .section--ink .prose strong { color: var(--white); }
.section--ink .prose a { color: var(--white); }
.prose--center { margin-inline: auto; }
.prose::after { content: ""; display: table; clear: both; } /* contain floated figures */

/* Figure + optional caption. Captions are copy: only use one if its text is verbatim from CONTENT.md. */
.figure img { width: 100%; height: auto; }
.figure__caption, .figure figcaption {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 12px; font-size: .875rem; line-height: 1.45; color: var(--grey); font-weight: 600;
}
.figure__caption::before, .figure figcaption::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); transform: translateY(-1px);
}
.figure--frame img { border: 3px solid var(--ink); }
.prose .figure { margin-block: 2em; }
.figure--narrow { max-width: 420px; }
@media (min-width: 900px) {
  .prose .figure--left, .prose .figure--right { width: min(44%, 400px); margin-block: .35em 1.4em; }
  .prose .figure--left { float: left; margin-right: clamp(24px, 3vw, 44px); }
  .prose .figure--right { float: right; margin-left: clamp(24px, 3vw, 44px); }
  .prose .figure--wide { margin-inline: calc(-1 * clamp(0px, 6vw, 96px)); }
}
@media (max-width: 899px) {
  .prose .figure--left, .prose .figure--right { max-width: 420px; }
}

/* Red-dot list with hairlines (Classes "Classes include:"). .aside = the bracketed detail line. */
.dots li {
  position: relative; padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--paper-line);
  font-weight: 700; line-height: 1.45;
}
.dots li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--red);
}
.dots .aside { display: block; font-weight: 400; color: var(--grey); font-size: var(--t-small); margin-top: 2px; }
.list-label {
  padding-bottom: 12px; border-bottom: 3px solid var(--ink);
  font-family: var(--f-body); font-weight: 800; font-size: var(--t-kicker);
  letter-spacing: .18em; text-transform: uppercase;
}

/* ---------- 10. Contact links (email / phone / address with red icons) ---------- */
.contact-links { display: grid; gap: 6px; }
.contact-links a, .contact-links .contact-links__item {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; text-decoration: none; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere;
}
.contact-links svg { flex: none; color: var(--red-ink); }
.contact-links a:hover { color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; }
.contact-links--on-dark a, .contact-links--on-dark .contact-links__item { color: var(--white); }
.contact-links--on-dark svg { color: var(--red); }
.contact-links--on-dark a:hover { color: var(--white); text-decoration-color: var(--red); }

/* ---------- 11. Forms (contact / registration) ---------- */
.form { display: grid; gap: 22px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.field__label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: var(--t-kicker); letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
}
.field__label .req { width: 7px; height: 7px; border-radius: 50%; background: var(--red-ink); flex: none; }
.field__input {
  width: 100%; min-height: 54px; padding: 13px 16px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--white); color: var(--ink);
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
  scroll-margin-top: 44px;   /* when site.js focuses an invalid field, its label stays clear of the sticky header */
}
textarea.field__input { min-height: 168px; resize: vertical; line-height: 1.55; }
.field__input::placeholder { color: #767676; opacity: 1; }  /* 4.54:1 on white */
.field__input:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.field__input:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: var(--red-ink); background: var(--error-bg); box-shadow: inset 0 0 0 1px var(--red-ink); }

.check { display: flex; align-items: center; gap: 14px; min-height: 48px; cursor: pointer; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.check__input {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 6px;
  background: var(--white) center / 18px 18px no-repeat; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.check__input:checked {
  background-color: var(--red-ink); border-color: var(--red-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.6 3.4L14.5 5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.check--boxed { padding: 14px 18px; border: 2px solid var(--ink); background: var(--white); }
.check--boxed:has(.check__input:checked) { border-color: var(--red-ink); box-shadow: inset 0 0 0 1px var(--red-ink); }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form[aria-busy="true"] [type="submit"] { opacity: .6; cursor: progress; transform: none; }
/* the status region stays rendered (live regions must exist before they change). Until a message shows
   it is taken out of the grid flow, so it adds no empty row or 22px gap under Submit. */
.form > .form__status:not([data-state="success"], [data-state="error"], [data-state="fallback"]) { position: absolute; }
.form__msg {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-left: 6px solid var(--ink);
  font-weight: 700; line-height: 1.45;
  /* site.js scrolls a result into view: keep it clear of the sticky header and off the screen's bottom edge */
  scroll-margin: calc(var(--header-h) + 16px) 0 24px;
}
.form__msg[hidden] { display: none; }
.form__msg::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: .38em; border-radius: 50%; background: currentColor; }
.form__msg--success { background: var(--ink); color: var(--white); border-left-color: var(--red); }
.form__msg--success::before { background: var(--red); }
.form__msg--error { background: var(--error-bg); color: var(--ink); border-left-color: var(--red-ink); }
.form__msg--error::before { background: var(--red-ink); }
/* fallback (no email service / offline): never says "sent". The existing "Contact us" label over the club's
   email + phone rows (the .contact-links pattern), so the visitor has a direct way to reach the club. */
.form__msg--fallback {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; row-gap: 4px;
  background: var(--paper); color: var(--ink); border-left-color: var(--ink);
}
.form__msg--fallback::before { grid-column: 1; grid-row: 1; margin-top: 4px; }   /* level with the label */
.form__msg--fallback > * { grid-column: 2; }
.form__msg-label { font-weight: 800; font-size: var(--t-kicker); letter-spacing: .16em; text-transform: uppercase; line-height: 1.45; }
.form__msg--fallback .contact-links { gap: 0; margin-top: 2px; }
.form__msg--fallback a { color: var(--ink); }
.form__msg--fallback a:hover { color: var(--red-ink); }
/* honeypot: off-screen, never display:none (some bots skip hidden fields) */
.form__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 12. Header + navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 3px solid var(--ink);
}
.header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex: none; }
.brand__logo { width: 60px; height: 60px; }
.brand__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.25rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}
.brand__name span { display: block; color: var(--red-ink); }

.nav-list { display: flex; align-items: center; gap: 6px; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-body); font-weight: 700; font-size: .9375rem;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.nav-link:hover { color: var(--red-ink); }
/* current page: red dot under the label (About gets it via .is-current on its button) */
.nav-link[aria-current="page"]::after, .sub-toggle.is-current::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--red);
}
.sub-toggle.is-current::after { margin-left: -10px; }
.chev { transition: transform .18s ease; }
.sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-cta {
  margin-left: 10px; padding-inline: 22px;
  background: var(--ink); color: var(--white); border-radius: 999px;
}
.nav-cta:hover { background: var(--red-ink); color: var(--white); }
.nav-cta[aria-current="page"] { background: var(--red-ink); }
.nav-cta[aria-current="page"]::after { display: none; }

.has-sub { position: relative; }
.sub {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: var(--ink); padding: 8px; border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
  --focus: var(--white);
}
.sub-toggle[aria-expanded="true"] + .sub { display: block; }
.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* hover bridge to the menu */
.sub a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 14px; border-radius: 4px;
  color: var(--white); text-decoration: none;
  font-weight: 700; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase;
}
.sub a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grey-on-dark); flex: none; }
.sub a:hover { background: var(--ink-2); }
.sub a:hover::before, .sub a[aria-current="page"]::before { background: var(--red); }
.sub a:focus-visible { outline-offset: -3px; }

.nav-toggle { display: none; }
/* html's scroll-padding-top would make Chrome treat the sticky header's own controls as hidden
   under it and scroll the page up whenever one takes focus: cancel it for them */
.site-header :is(a, button) { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }

@media (max-width: 899px) {
  :root { --header-h: 68px; }
  .brand { gap: 10px; }
  .brand__logo { width: 48px; height: 48px; }
  .brand__name { font-size: 1.0625rem; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 0 18px 0 20px; margin-right: -4px;
    background: var(--ink); color: var(--white);
    border: 0; border-radius: 999px; cursor: pointer;
    font-weight: 800; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  }
  .nav-toggle__bars { position: relative; width: 20px; height: 12px; flex: none; }
  .nav-toggle__bars span {
    position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: currentColor;
    transition: transform .2s ease, top .2s ease;
  }
  .nav-toggle__bars span:first-child { top: 0; }
  .nav-toggle__bars span:last-child { top: 9.5px; }
  .nav-toggle[aria-expanded="true"] { background: var(--red-ink); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { top: 5px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { top: 5px; transform: rotate(-45deg); }

  /* full-screen black overlay under the header */
  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 99;
    background: var(--ink); color: var(--white);
    padding: 20px var(--gutter) 40px;
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    --focus: var(--white);
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  /* lock the root only: overflow on body as well would make body its own scroll container,
     the sticky header would stick to that instead of the viewport and scroll away with the page */
  html.menu-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid #2a2a2a; }
  .nav-list > li:last-child { border-bottom: 0; }
  .nav-link {
    width: 100%; justify-content: space-between;
    min-height: 64px; padding: 12px 0;
    font-family: var(--f-display); font-weight: 400; font-size: 2.25rem; letter-spacing: .01em; line-height: 1.1;
    color: var(--white);
  }
  .nav-link:hover { color: var(--white); }
  .nav-link[aria-current="page"]::after, .sub-toggle.is-current::after {
    position: static; order: 2; margin: 0 0 0 auto; width: 14px; height: 14px;
  }
  .sub-toggle.is-current::after { margin-right: 14px; }
  .chev { width: 20px; height: 20px; order: 3; }
  .sub { position: static; display: none; min-width: 0; background: none; box-shadow: none; padding: 0 0 16px; border-radius: 0; }
  .sub a { font-size: 1.125rem; padding: 10px 0 10px 4px; }
  .sub a:hover { background: none; color: var(--red); }
  .nav-cta {
    margin: 28px 0 0; justify-content: center; min-height: 56px;
    background: var(--red-ink);
    font-family: var(--f-body); font-weight: 800; font-size: 1rem; letter-spacing: .1em;
  }
  .nav-cta:hover { background: var(--white); color: var(--ink); }
  .nav-cta[aria-current="page"] { background: var(--white); color: var(--ink); }
}
@media (max-width: 359px) {
  .brand__logo { width: 42px; height: 42px; }
  .brand__name { font-size: .9375rem; }
  .nav-toggle { padding-inline: 14px 16px; gap: 10px; }
}

/* No JavaScript: dropdown opens on hover/focus; on phones the nav becomes a plain row of links */
@media (scripting: none) {
  .has-sub:hover > .sub, .has-sub:focus-within > .sub { display: block; }
  .nav-toggle { display: none !important; }
}
@media (scripting: none) and (max-width: 899px) {
  .site-header { position: relative; }
  .header-bar { flex-wrap: wrap; padding-block: 10px; }
  .site-nav { position: static; visibility: visible; opacity: 1; transform: none; width: 100%; padding: 0; background: none; color: var(--ink); overflow: visible; --focus: var(--ink); }
  .nav-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .nav-list > li { border: 0; }
  .nav-link { width: auto; min-height: 44px; padding: 10px; font-family: var(--f-body); font-weight: 700; font-size: .9375rem; letter-spacing: .06em; color: var(--ink); }
  .nav-link:hover { color: var(--red-ink); }
  .nav-link[aria-current="page"]::after { position: absolute; left: 50%; bottom: 2px; width: 8px; height: 8px; margin-left: -4px; }
  .sub { position: absolute; z-index: 5; min-width: 200px; padding: 8px; background: var(--ink); border-radius: 6px; }
  .nav-cta { margin: 0; min-height: 44px; padding-inline: 18px; background: var(--ink); color: var(--white); }
}

/* ---------- 13. Footer ---------- */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--white);
  padding-top: clamp(56px, 6vw, 96px);
}
/* stacking: hairline (auto) < sun (2) < bottom-row text (3); the grid above never reaches the sun */
.footer__sun {
  position: absolute; z-index: 2;
  width: clamp(240px, 30vw, 440px); aspect-ratio: 1;
  right: clamp(-120px, -4vw, -40px); bottom: 0; transform: translateY(66%);
}
.footer__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 40px; align-items: start;
}
.footer__brand { display: flex; gap: 22px; align-items: flex-start; }
.footer__logo { width: 92px; height: 92px; flex: none; background: var(--white); border-radius: 50%; padding: 3px; }
.footer__address { line-height: 1.65; color: var(--text-on-dark); }
.footer__address strong {
  display: inline-block; margin-bottom: 4px;
  font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1;
  color: var(--white); text-transform: uppercase; letter-spacing: .01em;
}
.footer__contact { padding-top: 2px; }
.footer__base {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  margin-top: clamp(44px, 5vw, 80px); padding-top: 18px; padding-bottom: 24px;
}
.footer__base::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  border-top: 1px solid var(--ink-line);
}
.footer__copy { font-size: .875rem; color: var(--grey-on-dark); }
.footer__copy, .footer__nav { position: relative; z-index: 3; }
.footer__credit a { color: var(--text-on-dark); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.footer__credit a:hover { color: var(--white); }
@media (max-width: 599px) {
  .footer__sep { display: none; }
  .footer__credit { display: block; margin-top: 2px; }   /* phones: the credit gets its own line */
}
.footer__nav { margin-right: clamp(0px, 24vw, 340px); } /* keep clear of the red sun */
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-on-dark); text-decoration: none;
}
.footer__nav a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.footer__nav a[aria-current="page"] { color: var(--white); }
/* narrow desktops: the Anton club name stays on one line beside the logo */
@media (min-width: 900px) and (max-width: 1023px) {
  .footer__address strong { font-size: 1.25rem; }
}
@media (max-width: 899px) {
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__brand { flex-direction: column; gap: 18px; }
  .footer__logo { width: 76px; height: 76px; }
  /* a low cap of sun in the bottom-right corner, clear of the last link and the copyright line */
  .footer__sun { width: 220px; right: -120px; transform: translateY(74%); }
  .footer__base { flex-direction: column-reverse; align-items: flex-start; }
  .footer__nav { margin-right: 0; }
  .footer__nav ul { gap: 0 16px; }                 /* all four links on one row at 390 */
  .footer__nav a { letter-spacing: .03em; }
  .footer__copy { padding-bottom: 4px; }
}
@media (max-width: 399px) { .footer__nav ul { gap: 0 12px; } }   /* still one row down to 360 */
@media (max-width: 359px) {
  /* 320: a tidy 2 x 2 block instead of INSTRUCTORS alone on a second row */
  .footer__nav ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 28px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* tablets: brand + contact side by side, the button on its own row */
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__cta { grid-column: 1 / -1; }
}

/* ---------- 14. Home ---------- */
/* Hero: headline over the rising sun; the photo + class times panel is the horizon. */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero__head { position: relative; z-index: 3; padding-top: clamp(20px, 2.5vw, 38px); padding-bottom: clamp(18px, 2vw, 28px); }
.hero__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-hero);
  line-height: .98; letter-spacing: .005em; text-transform: uppercase;
  text-wrap: initial;
}
.hero__title .kicker { margin-bottom: clamp(12px, 1.3vw, 18px); font-size: clamp(.8125rem, .7rem + .35vw, 1rem); }
.hero__line { display: block; }
.hero__line--indent { padding-left: clamp(0px, 8vw, 128px); }
/* commas tucked up so they don't hang onto the next line ("JUDO'FOR") */
.hero__title .comma { position: relative; top: -.1em; margin-left: -.02em; }

.hero__stage {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 42%);
}
.hero__sun {
  position: absolute; z-index: 0;
  width: clamp(260px, 37vw, 540px); aspect-ratio: 1;
  right: clamp(-60px, 12vw, 260px); top: 0; transform: translateY(-62%);
}
.hero__photo { position: relative; z-index: 1; min-height: 340px; background: var(--ink); }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 67% 45%; }
/* big screens: a taller photo so the wide strip keeps the thrower's standing leg (Register Now stays above the fold) */
@media (min-width: 1600px) and (min-height: 1000px) { .hero__photo { min-height: 520px; } }
.hero__panel {
  position: relative; z-index: 1;
  background: var(--ink); color: var(--white);
  padding: clamp(22px, 2vw, 30px) var(--edge) clamp(22px, 2vw, 30px) clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.hero__panel .kicker { font-size: .75rem; }
.slot { padding: 12px 0; border-top: 1px solid var(--ink-line); }
.slot:first-child { border-top: 0; padding-top: 0; }
.slot__time { line-height: 1; }
.slot__day {
  display: block; margin-bottom: 5px;
  font-family: var(--f-body); font-weight: 800; font-size: .75rem; line-height: 1.2;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.slot__hours {
  display: block;
  font-family: var(--f-display); font-weight: 400; font-size: var(--t-figure);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.slot__who { margin-top: 7px; font-size: .9375rem; line-height: 1.45; color: var(--text-on-dark); }
.slot__who strong { color: var(--white); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; }
.slot__where {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px;
  padding-top: 12px; border-top: 1px solid var(--ink-line);
  font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--white);
}
.slot__where svg { color: var(--red); flex: none; }
.slot__where span + span { color: var(--grey-on-dark); font-weight: 500; }
.hero__panel .btn-row { margin-top: 2px; }
/* short laptop screens (1366x768, 1280x800): scale the headline by height so Register Now stays above the fold */
@media (min-width: 900px) and (max-height: 860px) {
  .hero__head { padding-top: 22px; padding-bottom: 20px; }
  .hero__title { font-size: clamp(3.5rem, 9.4vh, 6.25rem); }
  .hero__sun { width: clamp(260px, 50vh, 540px); right: 21vw; transform: translateY(-60%); }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero__panel { padding-block: 16px; gap: 8px; }
  .slot { padding: 8px 0; }
}
@media (max-width: 899px) {
  .hero__line--indent { padding-left: 0; }
  .hero__stage { grid-template-columns: 1fr; }
  .hero__sun { width: 68vw; right: -14vw; transform: translateY(-56%); }
  .hero__head { padding-top: 16px; padding-bottom: 16px; }
  .hero__title .kicker { margin-bottom: 10px; }
  .hero__photo { min-height: 0; aspect-ratio: 1.85; }
  .hero__panel { padding: 18px var(--gutter) 28px; gap: 8px; }
  .slot { padding: 8px 0; }
  .slot__day { margin-bottom: 3px; }
  .slot__who { font-size: .875rem; margin-top: 4px; }
  .slot__where { padding-top: 8px; font-size: .875rem; }
  .hero__panel .btn-row { gap: 10px; }
  .hero__panel .btn-row .btn { flex: 1 1 auto; }
}
/* phones: a little more air between lines so "FUN," never sits on "FOR" */
@media (max-width: 599px) { .hero__title { line-height: 1.02; } }
/* tablets in portrait (768x1024): a shorter photo and headline put both buttons in the first screen */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__photo { aspect-ratio: 2.4; }
  .hero__title { font-size: 9.2vw; }
}
/* short phones (iPhone SE/8, 375x667): same idea, tighter */
@media (max-width: 899px) and (max-height: 700px) {
  .hero__title { font-size: min(var(--t-hero), 10.6vw); }
  .hero__photo { aspect-ratio: 3.2; }
  .hero__head { padding-top: 12px; padding-bottom: 10px; }
  .hero__panel { padding-top: 14px; padding-bottom: 20px; gap: 6px; }
  .slot { padding: 6px 0; }
  .slot__hours { font-size: 1.75rem; }
  .slot__where { padding-top: 6px; }
}

/* Belief: the club's voice in Archivo, beside the juniors */
.belief { padding-block: var(--sec); }
.belief__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.belief__text {
  font-family: var(--f-body); font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 1.75vw, 2.625rem);
  line-height: 1.2; letter-spacing: -.018em;
  text-wrap: pretty;
}
.belief__text .hl { color: var(--red-ink); }
.belief__copy .btn { margin-top: clamp(26px, 2.8vw, 40px); }
.belief__photo { position: relative; }
.belief__crop { display: block; overflow: hidden; aspect-ratio: 1; background: var(--ink); }
.belief__crop img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%; transform: scale(1.08); transform-origin: 50% 12%; }
.sun--stamp {
  position: absolute; width: clamp(88px, 10vw, 150px); aspect-ratio: 1;
  left: clamp(-75px, -5vw, -44px); bottom: clamp(28px, 4vw, 64px);
}
@media (max-width: 899px) {
  .belief__grid { grid-template-columns: 1fr; }
  .belief__photo { margin-right: calc(var(--gutter) * -1); }
  .belief__crop { aspect-ratio: 3 / 2; }
  .belief__crop img { transform: scale(1.06); transform-origin: 50% 20%; }
  .sun--stamp { left: auto; right: calc(var(--gutter) + 16px); bottom: auto; top: -40px; width: 80px; }
}

/* Red band: the definition of judo */
.band-red { background: var(--red); color: var(--ink); padding-block: clamp(56px, 6.5vw, 104px); }
.band-red__grid {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 80px); align-items: end;
}
.band-red__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-statement); line-height: .98; text-transform: uppercase; letter-spacing: .005em;
  text-wrap: balance;
}
.band-red__text { font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin-bottom: 26px; }
@media (max-width: 899px) { .band-red__grid { grid-template-columns: 1fr; } }

/* BJJ: full-bleed groundwork photo with an overlapping black card */
.bjj { position: relative; padding-bottom: calc(var(--sec) * .6); }
.bjj__photo { height: clamp(300px, 40vw, 580px); background: var(--ink); }
.bjj__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
/* the card overlaps the photo by ~60% of its height, so it doesn't hang far below it */
.bjj__wrap { position: relative; z-index: 1; margin-top: clamp(-260px, -17vw, -64px); display: flex; justify-content: flex-end; }
.bjj__card {
  width: min(100%, 620px);
  background: var(--ink); color: var(--white);
  padding: clamp(28px, 3.4vw, 52px);
  display: grid; gap: 22px; justify-items: start;
}
.bjj__text { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.4; font-weight: 500; }
@media (max-width: 899px) {
  .bjj__wrap { padding-inline: 0; margin-top: -40px; }
  .bjj__card { width: 100%; }   /* edge to edge: no sliver of photo beside the card */
}
@media (max-width: 399px) { .bjj__card { padding-inline: 22px; } }

/* Safety: breakfall photo + body-awareness copy */
.safety { padding-bottom: var(--sec); }
.safety__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; gap: clamp(32px, 5vw, 88px);
  padding-right: var(--edge);
}
.safety__photo { overflow: hidden; background: var(--ink); }
.safety__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 54% 45%; }
.safety__lead {
  position: relative; padding-top: 30px;
  font-family: var(--f-body); font-weight: 800;
  font-size: clamp(1.625rem, 1rem + 1.7vw, 2.5rem);
  line-height: 1.14; letter-spacing: -.012em;
}
.safety__lead::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 18px; height: 18px; border-radius: 50%; background: var(--red);
}
.safety__text { margin-top: 20px; font-size: clamp(1.125rem, 1rem + .3vw, 1.3125rem); line-height: 1.55; color: var(--text-soft); max-width: 44ch; }
@media (max-width: 899px) {
  .safety__grid { grid-template-columns: 1fr; padding-right: 0; }
  .safety__copy { padding-inline: var(--gutter); }
}

/* Everyone: the colour moment. Collage is full colour, staggered like tatami (no four corners meet). */
.everyone { padding-top: var(--sec); padding-bottom: 6px; }
.everyone__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 4vw, 64px); align-items: end;
  padding-bottom: clamp(36px, 4.4vw, 64px);
}
.everyone__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3rem, 1rem + 7vw, 8.5rem);
  line-height: .9; text-transform: uppercase;
}
.stop {
  display: inline-block; width: .2em; height: .2em; margin-left: .06em;
  border-radius: 50%; background: var(--red);
  color: transparent; overflow: hidden; vertical-align: baseline; line-height: 0;
}
.everyone__text { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); line-height: 1.45; font-weight: 500; padding-bottom: .4em; }
.gallery {
  display: grid; gap: 6px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: clamp(200px, 21vw, 330px) clamp(200px, 21vw, 330px) clamp(240px, 27vw, 420px);
}
.g { position: relative; overflow: hidden; background: var(--ink); }
.g img { width: 100%; height: 100%; object-fit: cover; }
.g--a { grid-column: 1 / 8; grid-row: 1 / 3; }
.g--a img { object-position: 62% 55%; }
.g--b { grid-column: 8 / 13; grid-row: 1; }
.g--b img { object-position: 40% 60%; }
.g--c { grid-column: 8 / 13; grid-row: 2; }
.g--c img { object-position: 70% 22%; }
.g--d { grid-column: 1 / 6; grid-row: 3; }
.g--d img { object-position: 50% 60%; }
.g--e { grid-column: 6 / 13; grid-row: 3; }
.g--e img { object-position: 30% 82%; }   /* keeps the thrown boy's head in the wide desktop crop */
@media (max-width: 899px) {
  .everyone__head { grid-template-columns: 1fr; }
  /* 5-column mobile grid: seams at 3/5 then 2/5 so the joints stagger */
  .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; gap: 4px; }
  .g { aspect-ratio: auto; height: clamp(150px, 42vw, 300px); }
  .g--a { grid-column: 1 / -1; grid-row: auto; height: auto; aspect-ratio: 3 / 2; }
  .g--b { grid-column: 1 / 4; grid-row: auto; }
  .g--c { grid-column: 4 / 6; grid-row: auto; }
  .g--d { grid-column: 1 / 3; grid-row: auto; }
  .g--e { grid-column: 3 / 6; grid-row: auto; }
  .g--c img { object-position: 64% 30%; }
  .g--d img { object-position: 46% 55%; }
}

/* ---------- 15. Classes ---------- */
.klass__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-display);
  line-height: .9; text-transform: uppercase;
}
.klass__meta {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  line-height: 1.1; text-transform: uppercase;
}
.klass__meta .ages { background: var(--ink); color: var(--white); padding: .12em .4em .1em; }
.klass__meta .when { white-space: nowrap; }
.klass__meta .slash { color: var(--red-ink); margin-right: .25em; }
.klass__note {
  margin-top: 18px; display: flex; gap: 12px; align-items: baseline;
  font-weight: 700; font-size: var(--t-body);
}
.klass__note .dot { width: 12px; height: 12px; transform: translateY(-1px); }
.klass .list-label { margin-top: clamp(30px, 3.2vw, 46px); }
.klass .split__media img { transform: scale(1.07); transform-origin: 50% 28%; }
/* stack the chip over the time wherever the line could wrap (phones, and the half-width column up to
   ~1080px where "AGES 15+/ADULT / FRIDAYS…" would otherwise break and start a line with the red slash) */
@media (max-width: 1099px) {
  .klass__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .klass__meta .slash { display: none; }
  .klass__meta .when { white-space: normal; }
}

/* Pricing */
.pricing { padding-block: var(--sec); }
.pricing__head { padding-bottom: clamp(26px, 3vw, 44px); }
.pricing__title {
  display: flex; align-items: center; gap: .16em;
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-display); line-height: .9; text-transform: uppercase;
}
.pricing__title .dot { width: .4em; height: .4em; }
.price-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border: 3px solid var(--ink); background: var(--white);
}
.price-card { padding: clamp(22px, 2.6vw, 40px); display: flex; flex-direction: column; }
.price-card h3 {
  font-family: var(--f-body); font-weight: 800; font-size: var(--t-kicker);
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.2;
}
.price-card--season h3 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 2px; }
.price-stack { display: grid; grid-template-rows: auto 1fr; border-left: 3px solid var(--ink); }
.price-stack .price-card + .price-card { border-top: 3px solid var(--ink); }
.amt {
  font-family: var(--f-display); font-weight: 400; font-size: var(--t-figure);
  line-height: 1; letter-spacing: .01em; color: var(--ink);
}
/* single-price rows: label and Anton price share one baseline */
.price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink);
}
.price-row__label { font-weight: 800; font-size: var(--t-body); }
.price-row .amt { margin-left: auto; font-size: clamp(2.5rem, 1.2rem + 2.4vw, 3.75rem); }
/* drop-in: no row label in the copy, so the kicker and the price share the row */
.price-card--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.price-card--inline .amt { font-size: clamp(2.5rem, 1.2rem + 2.4vw, 3.75rem); }
.season { width: 100%; border-collapse: collapse; }
.season th, .season td { padding: 14px 0; border-bottom: 1px solid var(--paper-line); text-align: left; vertical-align: baseline; }
.season tr:last-child th, .season tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.season th { font-weight: 800; font-size: var(--t-body); }
.season td { color: var(--grey); font-weight: 500; padding-left: 16px; }
.season td.amt { color: var(--ink); text-align: right; }

.fees {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;   /* Registration column is as wide as its button */
  gap: clamp(28px, 4vw, 64px); align-items: start;
  background: var(--ink); color: var(--white);
  padding: clamp(28px, 4vw, 56px);
}
.fees__title {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--f-body); font-weight: 800; font-size: var(--t-kicker); line-height: 1.2;
  letter-spacing: .16em; color: var(--red);
}
.fees p { color: var(--text-on-dark); }
.fees p + p { margin-top: 14px; text-wrap: balance; }   /* the one-line Gi note never leaves "instructors." alone */
.fees strong { color: var(--white); font-weight: 800; }
.register { display: grid; justify-items: start; gap: 18px; }
.register .kicker { line-height: 1.2; }
.register .contact-links { margin-top: 2px; gap: 0; }
@media (max-width: 899px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-stack { border-left: 0; border-top: 3px solid var(--ink); grid-template-rows: auto; }
  .fees { grid-template-columns: minmax(0, 1fr); }
  .register { padding-top: 26px; border-top: 1px solid var(--ink-line); }
}
@media (max-width: 599px) {
  /* stack season over months; price stays right-aligned */
  .season tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
               padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
  .season tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .season th, .season td { padding: 0; border: 0; }
  .season th { grid-column: 1; grid-row: 1; }
  .season td { grid-column: 1; grid-row: 2; padding-left: 0; font-size: var(--t-small); }
  .season td.amt { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(2.25rem, 1.4rem + 3vw, 2.75rem); }
  .price-row .amt, .price-card--inline .amt { font-size: clamp(2.25rem, 1.4rem + 3vw, 2.75rem); }
}

/* ---------- 16. 404 ---------- */
/* the giant 404 on the left, the way out (Home / Classes / Contact us) stacked in the side column */
.notfound .page-hero__grid { min-height: clamp(380px, 56vh, 600px); align-items: end; }
.notfound .page-hero__title { font-size: clamp(7rem, 2rem + 22vw, 20rem); }
/* the zero is drawn as the red sun; the text stays "404" for screen readers */
.zero {
  display: inline-block; width: .76em; height: .76em; margin: 0 .05em;
  border-radius: 50%; background: var(--red);
  color: transparent; overflow: hidden; line-height: 0; vertical-align: .05em;
}
@media (min-width: 900px) {
  .notfound .page-hero__side { justify-items: end; }
  .notfound .page-hero__side .btn-row { flex-direction: column; align-items: stretch; width: min(100%, 300px); padding-bottom: .4em; }
}
@media (max-width: 899px) {
  .notfound .page-hero__grid { align-items: start; align-content: center; }   /* rows don't stretch: buttons sit under the 404 */
  .notfound .page-hero__title { font-size: 40vw; }
}

/* ---------- 17. Motion + print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:hover { transform: none; }
}
@media print {
  .site-header { position: static; }
  .nav-toggle, .site-nav, .skip-link, .sun, .footer__nav { display: none !important; }
  .bw { filter: grayscale(1); }
  body { font-size: 11pt; }
}