/* ==========================================================================
   Oakvale Martial Arts Academy
   Two files, no build step, no JS.
   Layout follows the reference template; palette stays near-black + one red.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   Ratios are measured against --ink (#0D0D0D) unless stated.
   --accent is 3.92:1 on --ink, so it never carries body-size text. It is used
   for fills, rules, and display type >=24px bold (which needs only 3:1).
   --accent-lift is the same hue lifted to 5.73:1 for small text and focus rings.
   Text on an --accent fill is #FFF (4.96:1); --paper there is 4.40:1 and fails.
   -------------------------------------------------------------------------- */
:root {
  --ink:        #0D0D0D;
  --ink-2:      #141414;
  --ink-3:      #1C1C1C;
  --ink-line:   #2E2E2E;

  --paper:      #F4F1EC;  /* body text      17.25:1 */
  --paper-dim:  #B8B3AC;  /* secondary       9.33:1 */

  --accent:      #D7263D;
  --accent-lift: #F2545B;
  --accent-deep: #8E1826;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  --step-2:  clamp(1.375rem, 1.2rem + 0.88vw, 1.875rem);
  --step-3:  clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --step-4:  clamp(2.5rem, 1.7rem + 4vw, 4.5rem);
  --step-5:  clamp(3rem, 1.2rem + 9vw, 8.5rem);

  --gutter:  clamp(1.25rem, 4vw, 5rem);
  --band:    clamp(4rem, 9vw, 9rem);
  --maxw:    82rem;

  /* The rect MUST carry an opacity. Without it feTurbulence paints full-strength
     colour static. saturate=0 keeps it grey so it cannot tint the accent red. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;   /* clears the two-row sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  background-image: var(--grain);
  background-attachment: fixed;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent-lift); }
a:hover { color: var(--paper); }

:focus-visible { outline: 3px solid var(--accent-lift); outline-offset: 3px; }

.skip-link {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--accent);
  color: #FFF;
  font-family: var(--font-display);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
}
.skip-link:focus-visible { transform: translateY(0); color: #FFF; }

/* --------------------------------------------------------------------------
   Header — centred wordmark over a centred nav row, as in the reference
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.6rem var(--gutter);
}

.topbar__aside {
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.topbar__aside { display: none; }

.topbar__brand {
  grid-column: 1;
  justify-self: start;
  text-align: left;
  text-decoration: none;
  color: var(--paper);
  line-height: 1;
}
.topbar__brand:hover { color: var(--accent-lift); }
.topbar__brand-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.topbar__brand-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.topbar__phone {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-height: 44px;
  line-height: 1.2;
  text-decoration: none;
}
.topbar__phone-label {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.topbar__phone-number {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.topbar__phone:hover .topbar__phone-number { color: var(--accent-lift); }

.nav { border-top: 1px solid var(--ink-line); }
.nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(0.9rem, 2.5vw, 2.25rem);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-dim);
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { color: var(--paper); border-bottom-color: var(--accent); }

@media (min-width: 52rem) {
  .topbar__aside { display: block; }
  .topbar__brand { grid-column: 2; justify-self: center; text-align: center; }
  .topbar__brand-mark { font-size: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Buttons — hard edges, no radius, no shadow
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 2px solid transparent;
  padding: 1rem 2rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #FFF; }
.btn--primary:hover,
.btn--primary:active { background: var(--accent-deep); border-color: var(--accent-deep); color: #FFF; }

/* --------------------------------------------------------------------------
   Image slots
   aspect-ratio reserves the box before the file lands, so nothing reflows.
   The hatch is the empty state: a deliberate dark block, not a white hole.
   -------------------------------------------------------------------------- */
.shot,
.hero__media {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--ink-3);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.022) 0 2px,
    transparent 2px 9px
  );
}
.shot > img,
.hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: var(--step--1);   /* keeps alt text legible while the file is missing */
  color: var(--paper-dim);
}
.shot--4x3 { aspect-ratio: 4 / 3; }
.shot--3x2 { aspect-ratio: 3 / 2; }
.shot--4x5 { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   Hero — the one centred block on the page, per the reference
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; }

.hero__media { position: absolute; inset: 0; z-index: -2; }

/* ---- Cross-fading slideshow, no JavaScript ------------------------------
   Four slides, 20s cycle, so each holds for 5s. Negative delays start every
   slide mid-cycle, which means all four animations run at once and the
   wrap from slide 4 back to slide 1 cross-fades like every other step.
   Only `opacity` animates: it is compositor-only, so this never triggers
   layout or paint. Animating `left` or `display` here would jank on mobile.
   ------------------------------------------------------------------------ */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The file is cropped so the fighters sit dead centre horizontally. `cover`
     still trims top and bottom on wide screens; 45% keeps heads and the kicking
     foot in frame rather than centring on the fighters' waists. */
  object-position: 50% 45%;
  opacity: 0;
  animation: hero-fade 20s linear infinite;
  will-change: opacity;
}

/* One slide is not a slideshow. Without this the lone image would obey the
   keyframes and sit at opacity 0 for 14 of every 20 seconds. Add slides back
   and both rules stop matching on their own. */
.hero__slide:only-child { animation: none; opacity: 1; }
.hero:has(.hero__slide:only-child) .hero__pause { display: none; }

.hero__slide:nth-child(1) { animation-delay:   0s; }
.hero__slide:nth-child(2) { animation-delay: -15s; }
.hero__slide:nth-child(3) { animation-delay: -10s; }
.hero__slide:nth-child(4) { animation-delay:  -5s; }

@keyframes hero-fade {
  0%   { opacity: 1; }
  20%  { opacity: 1; }   /* held for 4s of its 5s slot */
  25%  { opacity: 0; }   /* 1s cross-fade out */
  95%  { opacity: 0; }
  100% { opacity: 1; }   /* 1s cross-fade back in, overlapping the slide before it */
}

/* The pause control. :checked freezes every slide where it stands. */
.hero__pause-input:checked ~ .hero__media .hero__slide { animation-play-state: paused; }

.hero__pause-input {
  /* Visually hidden but still focusable — never `display: none`, which would
     remove it from the tab order and strand the label. */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
}

.hero__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--paper-dim);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
}
.hero__pause:hover { border-color: var(--accent); color: var(--accent-lift); }
.hero__pause-off { display: none; }
.hero__pause-input:checked ~ .hero__body .hero__pause-on  { display: none; }
.hero__pause-input:checked ~ .hero__body .hero__pause-off { display: inline; }
/* The real focus ring lives on the hidden input, so forward it to the label. */
.hero__pause-input:focus-visible ~ .hero__body .hero__pause {
  outline: 3px solid var(--accent-lift);
  outline-offset: 3px;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Guarantees the headline's contrast survives whatever photograph lands here. */
  background:
    linear-gradient(to bottom, rgba(13,13,13,0.72) 0%, rgba(13,13,13,0.80) 55%, rgba(13,13,13,0.95) 100%);
}

.hero__body {
  max-width: 60rem;
  margin-inline: auto;
  padding: clamp(4rem, 13vw, 10rem) var(--gutter) clamp(3.5rem, 9vw, 7rem);
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: 1.25rem;
}

.hero__title {
  font-size: var(--step-5);
  line-height: 0.86;
  margin-bottom: 1.5rem;
}

.hero__lede {
  font-size: var(--step-1);
  font-weight: 500;
  max-width: 40ch;
  margin: 0 auto 2.5rem;
  color: var(--paper);
}

.hero__phone { margin: 2rem 0 0; }
.hero__phone a {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--paper);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 0.1em;
}
.hero__phone a:hover { color: var(--accent-lift); }

/* ---- Narrow screens: the photo sits above the text, not behind it -------
   The photo is 1.72:1. A phone hero is roughly 0.7:1. Used as a `cover`
   background it would show about a third of the frame's width — two torsos,
   no kick. Stacking it keeps the whole photograph and removes the need for a
   dark scrim over the headline.
   ------------------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .hero__media {
    position: relative;   /* the slides are absolute; they need this as their box */
    inset: auto;
    z-index: auto;
    aspect-ratio: 748 / 435;   /* must track the real file, or the box shifts on load */
  }
  .hero__media::after { display: none; }
  .hero__body { padding-top: clamp(2.5rem, 8vw, 3.5rem); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--band); border-top: 1px solid var(--ink-line); }
.section--alt { background: var(--ink-2); }

.section__head,
.section__foot,
.feature-cards,
.panel-cards,
.audiences,
.price-grid,
.prices__effective,
.prices__included,
.split,
.coaches,
.contact,
.table-scroll,
.gallery,
.todo,
.subsection__title {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section__title {
  font-size: var(--step-4);
  margin-bottom: 1.25rem;
  border-left: 8px solid var(--accent);
  padding-left: 1rem;
  margin-left: -1.5rem;
}
/* Below 40rem the gutter is smaller than the negative margin, so it would overflow. */
@media (max-width: 40rem) {
  .section__title { margin-left: 0; border-left-width: 6px; padding-left: 0.75rem; }
}

.section__intro { font-size: var(--step-1); color: var(--paper-dim); max-width: 48ch; margin-bottom: 0; }
.section__foot  { margin-top: 2rem; color: var(--paper-dim); font-size: var(--step--1); }
.subsection__title { font-size: var(--step-3); margin-top: clamp(3.5rem, 7vw, 6rem); margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   Author TODO markers — delete these rules once every fact is supplied
   -------------------------------------------------------------------------- */
.todo {
  border-left: 6px solid var(--accent);
  background: rgba(215, 38, 61, 0.09);
  font-size: var(--step--1);
  line-height: 1.5;
  padding-block: 0.875rem;
  margin-bottom: 2rem;
}
.todo strong {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-lift);
}
.todo--tight { padding-inline: 1rem; margin-bottom: 1rem; }
.tbd { color: var(--paper-dim); }

.todo-inline {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-lift);
  border: 1px solid var(--accent);
  padding: 0.1rem 0.4rem;
}

/* --------------------------------------------------------------------------
   "Who it's for" — shared by both card kinds
   -------------------------------------------------------------------------- */
.who {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-line);
  color: var(--paper-dim);
  font-size: var(--step--1);
}
.who span {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lift);   /* 5.73:1 — small text needs the lifted tint */
}

/* --------------------------------------------------------------------------
   Classes — three photo cards, then four panel cards
   The 1px gaps are the hairlines between butted blocks.
   -------------------------------------------------------------------------- */
.feature-cards { display: grid; gap: 1px; margin-bottom: 1px; }

.feature-card { display: grid; background: var(--ink-line); gap: 1px; }

.feature-card__panel {
  background: var(--ink-3);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.feature-card__panel > p:last-child { margin-bottom: 0; }

/* One card takes the red fill, as the reference does. Everything inside it
   switches to #FFF, because --paper on --accent is 4.40:1 and fails. */
.feature-card__panel--accent { background: var(--accent); color: #FFF; }
/* Full white, not faded: #FFF at 65% over --accent measures 2.81:1 and fails
   even the 3:1 bar for large bold text. Hierarchy comes from size, not opacity. */
.feature-card__panel--accent .feature-card__index { color: #FFF; }
.feature-card__panel--accent .who { border-top-color: rgba(255,255,255,0.35); color: #FFF; }
.feature-card__panel--accent .who span { color: #FFF; }

.feature-card__index {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--accent);        /* >=22px bold, so the 3:1 bar applies */
  margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.feature-card__title { font-size: var(--step-3); margin-bottom: 1rem; }

@media (min-width: 56rem) {
  .feature-card { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
  .feature-card__media { height: 100%; aspect-ratio: auto; }
  .feature-card:nth-child(even) .feature-card__media { order: 2; }
  .feature-card:nth-child(even) { grid-template-columns: 1fr 1.25fr; }
  .feature-card__panel { display: flex; flex-direction: column; justify-content: center; }
}

.panel-cards { display: grid; gap: 1px; background: transparent; }
.panel-card {
  background: var(--ink-3);
  border-top: 4px solid var(--accent);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.panel-card > p:last-child { margin-bottom: 0; }
.panel-card__index {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--accent-lift);
  letter-spacing: 0.1em;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.panel-card__title { font-size: var(--step-2); margin-bottom: 0.9rem; }

@media (min-width: 48rem) { .panel-cards { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   Kids and Ladies — deliberately outside the numbered adult run.
   Different audiences, so they get photographs, their own price, and their own
   call to action. Framed with a red top rule rather than filled solid red: a
   fill would make them louder than Muay Thai, which leads for a reason.
   -------------------------------------------------------------------------- */
.audiences {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 56rem) { .audiences { grid-template-columns: 1fr 1fr; } }

.audience {
  display: flex;
  flex-direction: column;
  background: var(--ink-3);
  outline: 1px solid var(--ink-line);
  border-top: 6px solid var(--accent);
}
.audience__body {
  display: flex;
  flex-direction: column;
  flex: 1;                         /* both bodies stretch, so the two CTAs line up */
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.audience__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: 0.6rem;
}
.audience__title { font-size: var(--step-3); margin-bottom: 1rem; }

/* The single `auto` margin lives here: it eats the slack so the price and the
   button below it sit flush with the bottom of the card. Two `auto` margins in
   one flex column would split the slack between them and align nothing. */
.audience__price {
  margin: 1.25rem 0 0;
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.audience__cta { margin-top: 1.25rem; align-self: flex-start; }

.audience__video { margin: 1.25rem 0 0; }

.video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.4rem 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  border-bottom: 2px solid var(--accent);
}
.video-link:hover { color: var(--accent-lift); }
.video-link__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  /* fill="currentColor" on the <svg>, so the glyph tracks the link's text colour
     through hover and focus without a second rule. */
}

/* Available to a screen reader, invisible on screen. Never `display: none`,
   which would hide it from assistive tech too. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Cards sit inside a padded container, so the 1px gap needs a backing colour
   only where two cards meet. A wrapper background would bleed into the gutter. */
.feature-cards, .panel-cards { background: transparent; }
.feature-card { outline: 1px solid var(--ink-line); outline-offset: 0; }
.panel-card   { outline: 1px solid var(--ink-line); outline-offset: 0; }

/* --------------------------------------------------------------------------
   Timetable
   Narrow screens scroll the table sideways rather than restacking it.
   Restacking (display:block + ::before labels) destroys the table role in the
   accessibility tree: <th scope="row"> stops being a row header. The scroll
   container is focusable so keyboard users can actually reach and scroll it.
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-scroll + .table-scroll { margin-top: clamp(2rem, 4vw, 3rem); }

.timetable {
  width: 100%;
  min-width: 52rem;   /* six columns; below this they compress into unreadable slivers */
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
  table-layout: fixed;
}
.timetable--sat { min-width: 0; }   /* two columns fit any phone */
.timetable caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding-bottom: 0.75rem;
}
.timetable th,
.timetable td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--ink-line);
  border-right: 1px solid var(--ink-line);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.timetable th:last-child,
.timetable td:last-child { border-right: 0; }

/* The time column is fixed; the five day columns share what is left equally. */
.timetable col,
.timetable thead th:first-child { width: 7.5rem; }

/* A class inside a cell. Two can share one slot — Monday and Wednesday at 6:30
   run a kids class and an adults class side by side on the mat. */
.cls {
  /* Flex row: text on the left, Book button on the right. align-items:center
     centres the button against the two-line text block (title + time), which is
     the "vertically centred on the right" ask. Flex keeps the button in normal
     flow so it can never overlap the text in a narrow cell — an absolutely
     positioned button could. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--paper);
}
/* Take all the width left of the button and let a long class name wrap INSIDE
   this block (min-width:0 lets a flex item shrink below its content width so the
   text wraps instead of shoving the button onto a new line). Result: the Book
   button sits in the same place in every cell, regardless of name length. */
.cls__body { display: block; flex: 1 1 auto; min-width: 0; }
/* Reserve two lines for the name so a short (one-line) name takes the same height
   as a long (two-line) one. line-height is 1.2, so 2 lines = 2.4em. This is what
   makes the blocks — and therefore the Book buttons — equal height across a row. */
.cls__name { display: block; min-height: 2.4em; }
.cls + .cls {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--ink-line);
}
.cls__book {
  flex: none;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-lift);
  padding: 0.4rem 0.7rem;
  min-height: 36px;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.cls__book:hover,
.cls__book:focus-visible { background: var(--accent); color: #FFF; }
.cls__time {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-dim);
  /* Ranges line up down the column: 4:45pm and 12:00pm occupy the same width. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Empty slots are struck out rather than left blank, so a scanning eye reads
   "nothing on" instead of "the page failed to load". */
.timetable .is-empty {
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px), var(--ink-line) 50%, transparent calc(50% + 1px)
  );
}
.timetable thead th {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFF;                 /* 4.96:1 on --accent. --paper would be 4.40:1. */
  background: var(--accent);
  border-bottom: 0;
}
.timetable tbody th {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--paper);
}
.timetable tbody tr:nth-child(odd) { background: var(--ink-3); }

@media (min-width: 48rem) {
  .timetable { font-size: var(--step-0); }
  .timetable th, .timetable td { padding: 1.1rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   Prices — one column per discipline. No tiers, no badge, no anchoring:
   every card carries the same weight, because every card is a real option.
   -------------------------------------------------------------------------- */
.prices__effective {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 2rem;
}

.price-grid { display: grid; gap: 1px; }
@media (min-width: 40rem) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-3);
  outline: 1px solid var(--ink-line);
  border-top: 4px solid var(--accent);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.price-card__title {
  font-size: var(--step-2);
  margin-bottom: 1.25rem;
  min-height: 2.2em;   /* keeps the first price row aligned across cards */
}
.price-card__list { margin: 0; }

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--ink-line);
}
.price-row dt { color: var(--paper-dim); font-size: var(--step--1); }
.price-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  /* Tabular figures: £7 and £45 keep their currency signs in a straight column. */
  font-variant-numeric: tabular-nums;
}

.price-card__note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-line);
  color: var(--paper-dim);
  font-size: var(--step--1);
}

.prices__included {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* padding-inline comes from the shared container rule; the rule sits on the
     container edge so it lines up with the section title's rule above it. */
  border-left: 6px solid var(--accent);
}
.prices__included-title {
  font-size: var(--step-2);
  margin-bottom: 1rem;
}
.prices__included-list li {
  padding-block: 0.4rem;
  color: var(--paper-dim);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Red full-bleed panel — the reference's one solid colour break
   -------------------------------------------------------------------------- */
.creed {
  background: var(--accent);
  color: #FFF;                 /* every ratio in here is measured against --accent */
  padding-block: var(--band);
  border-top: 1px solid var(--ink-line);
}
.creed__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.creed__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #FFF;   /* faded white on red drops to 3.63:1 — small text needs the full 4.5:1 */
  margin-bottom: 0.75rem;
}
.creed__title { font-size: var(--step-4); margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.creed__list { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .creed__list { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.creed__item { border-top: 3px solid rgba(255, 255, 255, 0.6); padding-top: 1.25rem; }
.creed__index {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.creed__heading { font-size: var(--step-2); margin-bottom: 0.75rem; }
.creed__item p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   About + coaches
   -------------------------------------------------------------------------- */
.split { display: grid; gap: 2.5rem; }
.split__lead { font-size: var(--step-1); font-weight: 500; }
.split__body p:not(.split__lead) { color: var(--paper-dim); }
.split__body p:last-child { margin-bottom: 0; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; } }

.coaches { display: grid; gap: 1px; }
.coach {
  background: var(--ink-3);
  outline: 1px solid var(--ink-line);
  padding: 1.5rem;
}
@media (min-width: 40rem) { .coaches { grid-template-columns: repeat(3, 1fr); } }

.coach__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; text-transform: uppercase; margin: 0 0 0.4rem; }
.coach__discipline {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lift);
}
.coach__credential { margin: 0; color: var(--paper-dim); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Gallery — CSS scroll-snap carousel. Swipes, trackpads and arrow keys all
   work with no JavaScript. Tiles are plain links to the full-size JPEG:
   a :target overlay would have no Escape key and no focus trap.
   -------------------------------------------------------------------------- */
/* The scroll lives on .gallery, not on the track, so that the element carrying
   role="region" is the element that actually scrolls. */
.gallery {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;   /* room for the scrollbar, so it never covers a caption */
}

.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 1px;
}
.gallery__item { scroll-snap-align: start; }

.gallery__link {
  display: block;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink-3);
  outline: 1px solid var(--ink-line);
}
.gallery__link .shot > img { transition: opacity 160ms ease-out; }
.gallery__link:hover .shot > img { opacity: 0.82; }

.gallery__caption {
  display: block;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 3px solid var(--accent);
}
.gallery__link:hover .gallery__caption { color: var(--accent-lift); }

@media (min-width: 40rem) { .gallery__track { grid-auto-columns: 44%; } }
@media (min-width: 64rem) { .gallery__track { grid-auto-columns: 26%; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: 3rem; }
@media (min-width: 52rem) { .contact { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.contact__label {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ink-line);
}
.contact__col > .contact__label ~ .contact__label { margin-top: 2.5rem; }

.contact__address { font-style: normal; font-size: var(--step-1); line-height: 1.6; }
.contact__postcode {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  border: 2px solid var(--accent);
  padding: 0.15rem 0.6rem;
}

.contact__big { margin-bottom: 0.4rem; }
.contact__big a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  /* Padding, not min-height — min-height would strand the underline below the text. */
  padding-block: 0.45rem 0.2rem;
}
.contact__big--email a { font-size: var(--step-1); }
.contact__big a:hover { color: var(--accent-lift); }

.contact__meta { color: var(--paper-dim); font-size: var(--step--1); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 4px solid var(--accent); padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.5rem;
}
.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.social { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  border-bottom: 2px solid var(--accent);
}
.social a:hover { color: var(--accent-lift); }
.tbd-link { border-bottom-style: dashed; }

.site-footer__meta,
.site-footer__legal { margin: 0; color: var(--paper-dim); font-size: var(--step--1); }
.site-footer__postcode {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--paper);
}

@media (min-width: 52rem) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; row-gap: 2rem; }
  .social { justify-content: flex-end; }
  .site-footer__legal { text-align: right; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery { scroll-snap-type: none; }   /* snapping is motion the user did not ask for */

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

  /* The blanket rule above would leave all four slides stacked at opacity 1.
     Show the first, drop the rest, and hide a pause button for a thing that
     is no longer moving. */
  .hero__slide { animation: none !important; }
  .hero__slide:nth-child(1) { opacity: 1; }
  .hero__slide:not(:nth-child(1)) { display: none; }
  .hero__pause { display: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  body { background: #FFF; color: #000; background-image: none; }
  .site-header, .hero__media, .gallery { display: none; }
  .creed { background: #FFF; color: #000; }
  a { color: #000; }
}

/* --------------------------------------------------------------------------
   Auth control (header) + modals
   The auth control is one <li> in the nav. JavaScript (js/app.js) fills it:
   a "Log in" button when logged out, or the user's name + "Log out" (plus an
   Admin badge) when logged in.
   -------------------------------------------------------------------------- */
.auth-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}
.auth-control__login,
.auth-control__logout {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-lift);
  padding: 0.35rem 0.85rem;
  min-height: 34px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.auth-control__login:hover,
.auth-control__logout:hover,
.auth-control__login:focus-visible,
.auth-control__logout:focus-visible { background: var(--accent); color: #FFF; }
.auth-control__user {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}
.auth-control__badge {
  padding: 0.1rem 0.45rem;
  background: var(--accent);
  color: #FFF;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Native <dialog>. It centres itself; we style the panel and backdrop. */
.modal {
  border: 1px solid var(--ink-line);
  background: var(--ink-2);
  color: var(--paper);
  padding: 0;
  max-width: 26rem;
  width: calc(100% - 2rem);
}
.modal::backdrop { background: rgba(0, 0, 0, 0.7); }
/* Booking dialog only: wider so the session list has room, and capped in height
   so a long list scrolls inside the panel instead of overflowing the screen. */
.modal--wide { max-width: 40rem; }
.modal--wide .sessions { max-height: 60vh; overflow-y: auto; }
.modal__panel {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--paper-dim);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { color: var(--paper); }
.modal__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modal__eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lift);
}
.modal__meta {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.modal__info { margin: 0 0 1.25rem; color: var(--paper-dim); }
.modal__message {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--ink-3);
  color: var(--paper);
}

/* Auth forms share the panel; JS shows one at a time. */
.field { display: block; margin-bottom: 1rem; }
.field span {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ink-line);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
}
.field textarea { resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: 3px solid var(--accent-lift); outline-offset: 2px; }
.auth-form .btn { width: 100%; margin-top: 0.25rem; }
.auth-form__switch {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  color: var(--paper-dim);
}
.linkbtn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent-lift);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.linkbtn:hover { color: var(--paper); }
.auth-form__error {
  margin: 1rem 0 0;
  color: var(--accent-lift);
  font-size: var(--step--1);
}
.auth-form__error:empty { display: none; }
.auth-form__notice {
  margin: 1rem 0 0;
  color: var(--paper);
  font-size: var(--step--1);
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--ink-3);
}
.auth-form__notice:empty { display: none; }
/* Book buttons on the class cards. Filled accent so they read on the dark card
   backgrounds; overridden to white on the red Muay Thai panel. */
.card-book {
  margin-top: 1.25rem;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #FFF;
  padding: 0.7rem 1.5rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.card-book:hover,
.card-book:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }
.feature-card__panel--accent .card-book {
  background: #FFF;
  border-color: #FFF;
  color: var(--accent-deep);
}
.feature-card__panel--accent .card-book:hover,
.feature-card__panel--accent .card-book:focus-visible { background: var(--ink); border-color: var(--ink); color: #FFF; }

/* The two audience cards keep their Book + "Ask Alex" buttons on one row. */
.audience__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}
.audience__actions .card-book,
.audience__actions .audience__cta { margin-top: 0; }

/* Session list inside the booking popup. */
.sessions { margin: 0.5rem 0 0; padding: 0; list-style: none; max-height: 22rem; overflow-y: auto; }
.session {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ink-line);
}
.session__when { flex: 1 1 auto; min-width: 0; }
.session__day {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}
.session__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step--2);
  color: var(--paper-dim);
}
.session__slots {
  flex: none;
  font-size: var(--step--2);
  color: var(--accent-lift);
  white-space: nowrap;
}
.session__slots.is-full { color: var(--paper-dim); }
.session__book {
  flex: none;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-lift);
  padding: 0.4rem 0.9rem;
  min-height: 38px;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.session__book:hover:not(:disabled),
.session__book:focus-visible { background: var(--accent); color: #FFF; }
.session__book:disabled { border-color: var(--ink-line); color: var(--paper-dim); cursor: default; }
/* Cancel-my-booking: same size as Book, muted outline so it reads as a secondary
   (undo) action rather than a primary call to action. */
.session__cancel {
  flex: none;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--paper-dim);
  padding: 0.4rem 0.9rem;
  min-height: 38px;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}
.session__cancel:hover:not(:disabled),
.session__cancel:focus-visible { border-color: var(--paper); color: var(--paper); }
.session__cancel:disabled { color: var(--paper-dim); cursor: default; }
.session--cancelled .session__day { text-decoration: line-through; color: var(--paper-dim); }
.session__reason {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--step--2);
  color: var(--accent-lift);
}
.session__admin {
  flex: none;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--paper-dim);
  padding: 0.35rem 0.7rem;
  min-height: 38px;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.session__admin:hover { color: var(--paper); border-color: var(--paper-dim); }

/* Admin timetable controls (shown only to admins by js/timetable.js). */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--maxw);
  margin: 0 auto 1.5rem;
  padding-inline: var(--gutter);
}
/* Without this, `.admin-bar { display:flex }` overrides the `hidden` attribute
   (equal specificity, author rule wins), so the bar would show for everyone. */
.admin-bar[hidden] { display: none; }
.admin-bar__label {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lift);
}
.admin-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #FFF;
  padding: 0.5rem 1rem;
  min-height: 40px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.admin-btn:hover { background: var(--accent-deep); }
.cls__admin { display: flex; gap: 0.4rem; flex-basis: 100%; }
.cls__edit,
.cls__del {
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--paper-dim);
  padding: 0.2rem 0.55rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.cls__edit:hover { color: var(--paper); border-color: var(--paper-dim); }
.cls__del:hover { color: #FFF; background: var(--accent-deep); border-color: var(--accent-deep); }