/* =====================================================================
   Movelara · site.css
   One stylesheet for every page. Nothing loads from another host.

   MARKUP PATTERNS (shared by all pages)

   Header
     <header class="ml-header"><div class="ml-header__inner">
       <a class="ml-wordmark" href="index.html">Movelara</a>
       <button class="ml-menu-toggle" type="button" aria-expanded="false"
               aria-controls="ml-nav" hidden><span class="ml-menu-toggle__text">Menu</span></button>
       <nav class="ml-nav" id="ml-nav" aria-label="Main"><ul class="ml-nav__list">
         <li><a class="ml-nav__link" href="method.html">Method</a></li> ...
       </ul></nav>
     </div></header>

   Home hero (poster SVG viewBox 0 0 360 480, a 3:4 portrait)
     Poster fields inside the SVG: sky y 0-278, sand horizon 278-307,
     estuary 307-384, ground 384-408, caption band 408-480.
     <section class="ml-hero"><div class="ml-hero__stage">
       <div class="ml-hero__frame">
         <div class="ml-fields" aria-hidden="true"></div>
         <figure class="ml-poster ml-poster--hero">
           <svg class="ml-poster__art" viewBox="0 0 360 480">...</svg>
           <div class="ml-poster__head"><h1 class="ml-poster__title">Movelara</h1></div>
           <figcaption class="ml-poster__caption">Reformer Pilates · Bilbao · since 2018</figcaption>
         </figure>
       </div>
       <div class="ml-hero__notes">
         <aside class="ml-hero__note ml-hero__note--left">...</aside>
         <aside class="ml-hero__note ml-hero__note--right">
           <p class="ml-margin__label">Today</p>
           <p class="ml-today" data-ml-today>static fallback hours</p>
           <a class="ml-margin__link" href="classes.html">September Foundations: booking now</a>
         </aside>
       </div>
     </div></section>

   Inner page head (vignette SVG viewBox 0 0 480 300)
     Vignette fields: sky y 0-174, sand 174-198, band 198-300.
     <header class="ml-pagehead">
       <div class="ml-pagehead__frame">
         <div class="ml-fields" aria-hidden="true"></div>   (add ml-fields--floor for a wooden floor band)
         <figure class="ml-poster ml-poster--vignette"><svg class="ml-poster__art" viewBox="0 0 480 300">...</svg></figure>
       </div>
       <div class="ml-pagehead__text"><p class="ml-label">...</p>
         <h1 class="ml-pagehead__title">...</h1><p class="ml-pagehead__lede">...</p></div>
     </header>

   Column with margin notes
     <section class="ml-section">
       <div class="ml-row">
         <aside class="ml-margin ml-margin--left"><p class="ml-margin__label">..</p><p class="ml-margin__text">..</p></aside>
         <div class="ml-row__main ml-prose">...</div>
         <aside class="ml-margin ml-margin--right ml-margin--row2">...</aside>
       </div>
     </section>
     Method steps: <article class="ml-row ml-step" id="step-1">
       <p class="ml-step__num">1</p><div class="ml-row__main">
       <h2 class="ml-step__title">..</h2>..</div><aside class="ml-margin ml-margin--right">..</aside></article>

   Snap strip (months, springs, class cards, reformers)
     <div class="ml-strip ml-strip--months" data-ml-strip data-ml-current="month">
       <div class="ml-strip__head"><h2 class="ml-strip__title">..</h2><div class="ml-strip__controls"></div></div>
       <ol class="ml-strip__track" tabindex="0">
         <li class="ml-strip__card ml-month" data-month="2026-07">
           <div class="ml-strip__art ml-month__plate"><span class="ml-fields" aria-hidden="true"></span>
             <span class="ml-month__num">07</span><span class="ml-month__name">July</span>
             <span class="ml-month__year">2026</span></div>
           <div class="ml-strip__body"><h3 class="ml-strip__title">..</h3><p class="ml-strip__text">..</p>
             <p class="ml-strip__foot"><span class="ml-badge ml-badge--accent">Booking now</span></p></div>
         </li>
       </ol>
     </div>
     A strip placed inside a column row can break out to full width with ml-strip--bleed.
     Springs: card gets ml-spring ml-spring--heavy|medium|light|feather, coil path class ml-spring__coil.
     Reformers: <div class="ml-tally" data-ml-count="312" data-ml-max="400"><span class="ml-tally__fill"></span></div>

   Tabs: <div class="ml-tabs" data-ml-tabs>
     <section class="ml-tabs__panel" data-ml-day="1" data-ml-tab="Monday">
       <h3 class="ml-tabs__day">Monday</h3><ol class="ml-timetable"><li class="ml-slot">
       <span class="ml-slot__time">07:30</span><span class="ml-slot__class">Flow</span>
       <span class="ml-slot__teacher">Lara</span></li></ol></section> ...</div>

   Hours: <dl class="ml-hours" data-ml-hours><div class="ml-hours__row" data-days="1 2 3 4">
     <dt class="ml-hours__day">Mon-Thu</dt><dd class="ml-hours__time">07:15-14:00 · 16:30-21:15</dd></div></dl>
   ===================================================================== */

:root {
  --ml-ground: #E9C4B4;
  --ml-text: #3B2318;
  --ml-muted: #6E4434;
  --ml-line: #C99A87;
  --ml-accent: #17595A;
  --ml-accent-deep: #0E3F40;

  --ml-paper: #F5E6D8;
  --ml-surface: #EFD3C5;
  --ml-sky: #F1D4C3;
  --ml-sun: #F3D9A4;
  --ml-sand: #E7C496;
  --ml-hill-1: #D99A80;
  --ml-hill-2: #B97A66;
  --ml-hill-3: #C98A72;
  --ml-estuary: #8DB5AE;
  --ml-ripple: #B5D0C8;
  --ml-figure: #B97A66;
  --ml-ink: #4A2B1E;
  --ml-floor: #D9AE8E;

  --ml-band-sky: #EECFC1;
  --ml-band-sand: #E7CBAF;
  --ml-band-estuary: #BEC7BA;

  --ml-display: Optima, 'Candara Light', Candara, 'URW Classico', 'Segoe UI', sans-serif;
  --ml-body: Seravek, 'Gill Sans Nova', 'Gill Sans', 'Gill Sans MT', Calibri, 'Segoe UI', sans-serif;

  --ml-s1: .72rem;
  --ml-s2: .8rem;
  --ml-s3: .9rem;
  --ml-s4: 1rem;
  --ml-s5: 1.2rem;
  --ml-s6: 1.55rem;
  --ml-s7: 2.1rem;
  --ml-s8: 3rem;
  --ml-s9: 4.2rem;
  --ml-s10: 5.5rem;

  --ml-col: 36rem;
  --ml-margin-w: 14rem;
  --ml-gutter: clamp(1.5rem, 3.2vw, 3.25rem);
  --ml-pad: clamp(1rem, 4vw, 2.5rem);
  --ml-ease: cubic-bezier(.2, .7, .2, 1);

  --ml-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .14 0 0 0 0 .09 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --ml-tally-marks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' width='20' height='18' preserveAspectRatio='none'%3E%3Cpath d='M3.2 3.4l.3 11.6M6.6 2.9l-.2 12.2M10.1 3.3l.3 11.8M13.5 2.8l-.1 12.3M1.4 12.6L16.2 5.2' stroke='%235A3A2C' stroke-width='1.15' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* ---------- Reset and base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ml-ground);
  color: var(--ml-text);
  font-family: var(--ml-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--ml-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p, li, dd, dt { overflow-wrap: anywhere; }
p { text-wrap: pretty; }

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

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

a { color: inherit; }

button { font: inherit; color: inherit; }

::selection { background: var(--ml-accent); color: var(--ml-paper); }

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

.ml-vh,
.ml-tabs--ready .ml-tabs__day {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ml-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: .7rem 1rem;
  background: var(--ml-text);
  color: var(--ml-paper);
  font-size: var(--ml-s2);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .2s var(--ml-ease);
}
.ml-skip:focus { top: 1rem; }

/* ---------- Type utilities ---------- */

.ml-label,
.ml-margin__label,
.ml-footer__label,
.ml-strip__kicker {
  font-family: var(--ml-body);
  font-size: var(--ml-s1);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-muted);
}

.ml-h2 {
  font-size: var(--ml-s6);
  font-weight: 400;
  line-height: 1.2;
  margin-top: .45rem;
  color: var(--ml-text);
}

.ml-h3 {
  font-size: var(--ml-s5);
  font-weight: 400;
  line-height: 1.25;
}

.ml-display {
  font-family: var(--ml-display);
  font-size: clamp(2.2rem, 5.6vw, var(--ml-s8));
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .01em;
  text-wrap: balance;
}

.ml-lede {
  font-size: var(--ml-s5);
  line-height: 1.45;
  color: var(--ml-text);
}

.ml-help {
  font-size: var(--ml-s2);
  line-height: 1.45;
  color: var(--ml-muted);
}

.ml-prose > * + * { margin-top: .95em; }
.ml-prose > .ml-label + .ml-h2 { margin-top: .45rem; }
.ml-prose > .ml-h2 + * { margin-top: 1.1rem; }
.ml-prose > h3 { margin-top: 1.6rem; }
.ml-prose > h3 + * { margin-top: .5rem; }

.ml-prose a:not([class]),
.ml-text-link {
  color: var(--ml-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-thickness .2s, color .2s;
}
.ml-prose a:not([class]):hover,
.ml-text-link:hover {
  color: var(--ml-accent-deep);
  text-decoration-thickness: 2px;
}

.ml-prose ul:not([class]),
.ml-prose ol:not([class]) { padding-left: 1.1rem; }
.ml-prose ul:not([class]) li + li,
.ml-prose ol:not([class]) li + li { margin-top: .35rem; }

.ml-dropcap > p:first-of-type::first-letter,
p.ml-dropcap::first-letter {
  float: left;
  font-family: var(--ml-display);
  font-weight: 400;
  font-size: 4.1em;
  line-height: .82;
  margin: .08em .1em 0 -.02em;
  color: var(--ml-text);
}

.ml-sign {
  font-family: var(--ml-display);
  font-style: italic;
  font-size: var(--ml-s5);
  color: var(--ml-text);
}

/* ---------- Links and buttons ---------- */

.ml-link,
.ml-margin__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ml-accent);
  font-size: var(--ml-s2);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .2rem;
  transition: color .25s, gap .3s var(--ml-ease);
}
.ml-link::after,
.ml-margin__link::after,
.ml-button::after {
  content: "";
  flex: none;
  width: .42em;
  height: .42em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ml-ease);
}
.ml-link:hover,
.ml-margin__link:hover { color: var(--ml-accent-deep); gap: .8rem; }
.ml-link:hover::after,
.ml-margin__link:hover::after { transform: translateX(.15em) rotate(45deg); }

.ml-button {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  width: auto;
  max-width: 100%;
  padding: .85rem 1.35rem .8rem;
  background: var(--ml-accent);
  color: var(--ml-paper);
  border: 1px solid var(--ml-accent);
  font-family: var(--ml-body);
  font-size: var(--ml-s2);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, gap .3s var(--ml-ease);
}
.ml-button:hover { background: var(--ml-accent-deep); border-color: var(--ml-accent-deep); gap: 1.05rem; }
.ml-button:hover::after { transform: translateX(.12em) rotate(45deg); }

.ml-button--quiet {
  background: transparent;
  color: var(--ml-accent);
}
.ml-button--quiet:hover { background: transparent; color: var(--ml-accent-deep); border-color: var(--ml-accent-deep); }

.ml-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

/* ---------- Badges ---------- */

.ml-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .55rem .28rem;
  border: 1px solid currentColor;
  color: var(--ml-muted);
  font-family: var(--ml-body);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ml-badge--accent { color: var(--ml-accent); }
.ml-badge--quiet { border-color: var(--ml-line); }
.ml-badge--closed { color: var(--ml-text); border-style: dashed; }
.ml-badge--now,
.ml-badge--today {
  background: var(--ml-accent);
  border-color: var(--ml-accent);
  color: var(--ml-paper);
}

/* ---------- Header ---------- */

.ml-header {
  position: relative;
  z-index: 10;
  background-color: var(--ml-ground);
  border-bottom: 1px solid var(--ml-line);
}

.ml-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.15rem var(--ml-pad);
}

.ml-wordmark {
  font-family: var(--ml-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ml-text);
  text-decoration: none;
  padding: .3rem 0;
  min-width: 0;
}
.ml-wordmark:hover { color: var(--ml-accent); }

.ml-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2.1rem;
  list-style: none;
}

.ml-nav__link {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font-size: var(--ml-s2);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-muted);
  text-decoration: none;
  transition: color .25s, transform .3s var(--ml-ease);
}
.ml-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: .14em;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ml-ease);
}
.ml-nav__link:hover { color: var(--ml-text); }
.ml-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.ml-nav__link[aria-current="page"] { color: var(--ml-accent); }
.ml-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.ml-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem .5rem;
  background: transparent;
  border: 1px solid var(--ml-line);
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ml-text);
  cursor: pointer;
  transition: border-color .25s;
}
.ml-menu-toggle::after {
  content: "";
  width: .4rem;
  height: .4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.12rem) rotate(45deg);
  transition: transform .3s var(--ml-ease);
}
.ml-menu-toggle[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(225deg); }
.ml-menu-toggle:hover { border-color: var(--ml-text); }
.ml-menu-toggle[hidden] { display: none; }

@media (max-width: 47.99rem) {
  .ml-header__inner { row-gap: 0; padding-block: .85rem; }
  .ml-nav { flex-basis: 100%; }
  .ml-nav__list { gap: .2rem 1.4rem; padding-top: .5rem; }

  .ml-js .ml-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--ml-ground);
    border-bottom: 1px solid var(--ml-line);
    padding-inline: var(--ml-pad);
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .38s var(--ml-ease), visibility 0s linear .38s;
  }
  .ml-js .ml-nav.ml-nav--open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .38s var(--ml-ease), visibility 0s linear 0s;
  }
  .ml-js .ml-nav > .ml-nav__list {
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding-top: 0;
  }
  .ml-js .ml-nav__list > li:first-child { margin-top: .85rem; }
  .ml-js .ml-nav__list > li { border-top: 1px solid var(--ml-line); }
  .ml-js .ml-nav__link {
    display: flex;
    padding: 1rem 0 .95rem;
    font-size: var(--ml-s3);
  }
  .ml-js .ml-nav__link::after { display: none; }
  .ml-js .ml-nav__link:hover { transform: translateX(.4rem); }
}

@media (min-width: 48rem) {
  .ml-menu-toggle { display: none !important; }
}

/* ---------- Colour fields (sun-faded landscape bands) ---------- */
/* Values are unitless percentages of the frame height. */

.ml-hero__frame,
.ml-pagehead__frame {
  --ml-f-sky-end: 58;
  --ml-f-sand-end: 64;
  --ml-f-est-end: 80;
}

.ml-fields {
  --f-sky: var(--ml-band-sky);
  --f-sand: #E9CDAF;
  --f-estuary: #B9C3B5;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--ml-f-sand-end, 64) * 1%);
  background-color: var(--f-sand);
  background-image: var(--ml-grain);
  background-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.ml-fields::before,
.ml-fields::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background-image: var(--ml-grain);
  background-blend-mode: multiply;
}
.ml-fields::before {
  top: 0;
  height: calc(var(--ml-f-sky-end, 58) / var(--ml-f-sand-end, 64) * 100%);
  background-color: var(--f-sky);
  border-bottom: 1px solid rgba(201, 154, 135, .45);
}
.ml-fields::after {
  top: 100%;
  height: calc((var(--ml-f-est-end, 80) - var(--ml-f-sand-end, 64)) / var(--ml-f-sand-end, 64) * 100%);
  background-color: var(--f-estuary);
  border-top: 2px solid rgba(214, 228, 222, .5);
}

.ml-fields--floor { --f-estuary: #DCB79C; }
.ml-fields--dusk { --f-sky: #EAC7BA; --f-estuary: #ADBBB0; }

/* ---------- Poster (shared by hero, vignettes and strip art) ---------- */

.ml-poster,
.ml-strip__art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ml-paper);
  container-type: inline-size;
}

.ml-poster { margin: 0; border: 1px solid #B88A76; }

.ml-poster__art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

.ml-poster::after,
.ml-strip__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--ml-grain);
  mix-blend-mode: multiply;
  opacity: .9;
  pointer-events: none;
}

.ml-poster::before,
.ml-strip__art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 10px var(--ml-paper),
    inset 0 0 0 11px rgba(74, 43, 30, .28);
}
.ml-strip__art::before {
  box-shadow:
    inset 0 0 0 6px var(--ml-paper),
    inset 0 0 0 7px rgba(74, 43, 30, .22);
}

@supports (width: 1cqi) {
  .ml-poster::before {
    box-shadow:
      inset 0 0 0 clamp(7px, 2.2cqi, 12px) var(--ml-paper),
      inset 0 0 0 calc(clamp(7px, 2.2cqi, 12px) + 1px) rgba(74, 43, 30, .28);
  }
}

.ml-poster__head {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 8.5%;
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 0 6%;
  text-align: center;
}

.ml-poster__title {
  margin: 0;
  font-family: var(--ml-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 10.6vw, var(--ml-s10));
  line-height: 1;
  letter-spacing: .08em;
  text-indent: .08em;
  text-transform: uppercase;
  color: var(--ml-text);
  text-wrap: nowrap;
  white-space: nowrap;
}
@supports (width: 1cqi) {
  .ml-poster__title { font-size: clamp(2.3rem, 11.6cqi, var(--ml-s10)); }
}

.ml-poster__sub {
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--ml-muted);
}

.ml-poster__caption {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15%;
  display: grid;
  place-items: center;
  padding: 0 6% clamp(7px, 2.2cqi, 12px);
  font-family: var(--ml-body);
  font-size: clamp(.62rem, 2.9cqi, .92rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ml-sun);
}

/* SVG paint vocabulary, used by every poster, vignette and card drawing */
.ml-poster__sky { fill: var(--ml-sky); }
.ml-poster__sun { fill: var(--ml-sun); }
.ml-poster__halo { fill: none; stroke: var(--ml-sun); stroke-width: 1.4; opacity: .75; }
.ml-poster__hill--far { fill: var(--ml-hill-1); }
.ml-poster__hill--mid { fill: var(--ml-hill-3); }
.ml-poster__hill--near { fill: var(--ml-hill-2); }
.ml-poster__sand { fill: var(--ml-sand); }
.ml-poster__estuary { fill: var(--ml-estuary); }
.ml-poster__ripple { fill: var(--ml-ripple); }
.ml-poster__ground { fill: #E2B99E; }
.ml-poster__floor { fill: var(--ml-floor); }
.ml-poster__wall { fill: #EDC9B6; }
.ml-poster__window { fill: var(--ml-sun); }
.ml-poster__frame { fill: none; stroke: var(--ml-ink); stroke-width: 3; }
.ml-poster__shadow { fill: #B5806B; opacity: .5; }
.ml-poster__band { fill: var(--ml-ink); }
.ml-poster__ink { fill: var(--ml-ink); }
.ml-poster__line { fill: none; stroke: var(--ml-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ml-poster__hair { fill: none; stroke: var(--ml-ink); stroke-width: 1.2; stroke-linecap: round; opacity: .7; }
.ml-poster__hair--light { stroke: var(--ml-paper); opacity: .85; }
.ml-poster__label {
  fill: var(--ml-ink);
  font-family: var(--ml-body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
}
.ml-poster__label--light { fill: var(--ml-paper); }
.ml-poster__figure { fill: var(--ml-figure); }
.ml-poster__paper { fill: var(--ml-paper); }
.ml-poster__boat { fill: var(--ml-ink); }
.ml-poster__oar { fill: none; stroke: var(--ml-ink); stroke-width: 1.6; stroke-linecap: round; }
.ml-poster__coil { fill: none; stroke: var(--ml-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ml-poster__clock { fill: var(--ml-paper); stroke: var(--ml-ink); stroke-width: 1.5; }
.ml-poster__tick { stroke: var(--ml-ink); stroke-width: 1.5; stroke-linecap: round; }

.ml-poster__sun,
.ml-poster__halo,
.ml-poster__art { transform-box: fill-box; transform-origin: center; }

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

.ml-hero {
  position: relative;
  padding-top: clamp(.75rem, 2vw, 1.5rem);
  view-timeline-name: --ml-hero;
}

.ml-hero__stage {
  position: relative;
  --ml-poster-w: min(36rem, calc(100vw - 2rem), max(22rem, calc((100vh - 8.5rem) * .75)));
}
@supports (height: 100svh) {
  .ml-hero__stage {
    --ml-poster-w: min(36rem, calc(100vw - 2rem), max(22rem, calc((100svh - 8.5rem) * .75)));
  }
}

.ml-hero__frame,
.ml-pagehead__frame {
  position: relative;
  display: flex;
  justify-content: center;
}

.ml-poster--hero {
  position: relative;
  z-index: 1;
  width: var(--ml-poster-w);
  max-width: calc(100% - 2rem);
}

.ml-hero__note {
  position: relative;
  min-width: 0;
}

.ml-hero__note .ml-margin__text {
  font-family: var(--ml-display);
  font-size: var(--ml-s5);
  line-height: 1.35;
  color: var(--ml-text);
  margin-top: .45rem;
}

.ml-hero__note .ml-margin__link { margin-top: 1rem; }

.ml-today {
  display: grid;
  gap: .15rem;
  margin-top: .45rem;
  font-size: var(--ml-s3);
  line-height: 1.4;
  color: var(--ml-text);
}
.ml-today__day {
  display: block;
  font-family: var(--ml-display);
  font-size: var(--ml-s5);
  line-height: 1.2;
}
.ml-today__hours {
  display: block;
  font-variant-numeric: tabular-nums;
}
.ml-today__state {
  display: block;
  font-size: var(--ml-s2);
  color: var(--ml-muted);
}
.ml-today__state--open { color: var(--ml-accent); }

@media (min-width: 72rem) {
  .ml-hero__note {
    position: absolute;
    z-index: 2;
    width: min(var(--ml-margin-w), calc((100% - var(--ml-poster-w)) / 2 - var(--ml-gutter) - 1.25rem));
    padding-top: .8rem;
    border-top: 1px solid var(--ml-line);
  }
  .ml-hero__note--left {
    top: 12%;
    right: calc(50% + var(--ml-poster-w) / 2 + var(--ml-gutter));
  }
  .ml-hero__note--right {
    top: 49%;
    left: calc(50% + var(--ml-poster-w) / 2 + var(--ml-gutter));
  }
  .ml-hero__note::after {
    content: "";
    position: absolute;
    top: -1px;
    width: calc(var(--ml-gutter) - .5rem);
    height: 1px;
    background: var(--ml-line);
  }
  .ml-hero__note--left::after { left: 100%; }
  .ml-hero__note--right::after { right: 100%; }
}

@media (max-width: 71.99rem) {
  .ml-hero__notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    width: min(calc(var(--ml-poster-w) + 0rem), calc(100% - 2rem));
    margin: 1.1rem auto 0;
  }
  .ml-hero__note {
    padding-top: .7rem;
    border-top: 1px solid var(--ml-line);
  }
  .ml-hero__note .ml-margin__text { font-size: 1.02rem; }
  .ml-hero__note .ml-margin__link { margin-top: .75rem; letter-spacing: .1em; }
}

@media (max-width: 23rem) {
  .ml-hero__notes { gap: .85rem; }
  .ml-hero__note .ml-margin__text { font-size: .95rem; }
}

/* ---------- Inner page head ---------- */

.ml-pagehead {
  padding-top: clamp(1rem, 3vw, 2.25rem);
}

.ml-pagehead__frame {
  --ml-f-sky-end: 58;
  --ml-f-sand-end: 66;
  --ml-f-est-end: 100;
}

.ml-poster--vignette {
  position: relative;
  z-index: 1;
  width: min(30rem, calc(100% - 2rem));
}

.ml-pagehead__text {
  width: min(var(--ml-col), 100% - 2 * var(--ml-pad));
  margin: clamp(2.25rem, 5vw, 3.75rem) auto 0;
}

.ml-pagehead__title {
  margin-top: .6rem;
  font-family: var(--ml-display);
  font-size: clamp(2.45rem, 6.4vw, var(--ml-s9));
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--ml-text);
}

.ml-pagehead__lede {
  margin-top: 1.25rem;
  font-size: var(--ml-s5);
  line-height: 1.45;
  color: var(--ml-muted);
  max-width: 34rem;
}

/* ---------- Sections and rhythm ---------- */

.ml-main { display: block; }

.ml-section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.ml-section--tight { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.ml-section--loose { padding-block: clamp(4.5rem, 11vw, 9rem); }
.ml-section--flush-top { padding-top: 0; }
.ml-section--after-hero { padding-top: clamp(2rem, 4.5vw, 3.25rem); }
.ml-section--after-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

.ml-section--sky,
.ml-section--sand,
.ml-section--estuary {
  background-image: var(--ml-grain);
  background-blend-mode: multiply;
}
.ml-section--sky { background-color: var(--ml-band-sky); }
.ml-section--sand { background-color: var(--ml-band-sand); }
.ml-section--estuary { background-color: var(--ml-band-estuary); }

.ml-section > .ml-row + .ml-row,
.ml-section > .ml-row + .ml-strip,
.ml-section > .ml-strip + .ml-row { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ml-section > .ml-row--gap { margin-top: clamp(2.5rem, 5vw, 4rem) !important; }

/* The column with margins */
.ml-row,
.ml-step {
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--ml-col) + 2 * var(--ml-pad)));
  margin-inline: auto;
  padding-inline: var(--ml-pad);
}
.ml-row > *,
.ml-step > * { min-width: 0; }

.ml-row__main > * + * { margin-top: .95em; }

/* Margin notes */
.ml-margin {
  order: 10;
  margin-top: 1.4rem;
  padding: .15rem 0 .2rem 1rem;
  border-left: 2px solid var(--ml-line);
  font-size: var(--ml-s3);
  line-height: 1.45;
  color: var(--ml-muted);
}
.ml-margin__text { margin-top: .35rem; color: var(--ml-muted); }
.ml-margin__text + .ml-margin__text { margin-top: .6rem; }
.ml-margin__text--display {
  font-family: var(--ml-display);
  font-size: var(--ml-s5);
  line-height: 1.3;
  color: var(--ml-text);
}
.ml-margin__sign {
  display: block;
  margin-top: .6rem;
  font-family: var(--ml-display);
  font-style: italic;
  font-size: var(--ml-s4);
  color: var(--ml-text);
}
.ml-margin__figure {
  display: block;
  margin-top: .2rem;
  font-family: var(--ml-display);
  font-size: var(--ml-s7);
  line-height: 1.05;
  color: var(--ml-text);
}
.ml-margin .ml-margin__link { margin-top: .75rem; }

.ml-margin--long .ml-margin__text {
  font-family: var(--ml-display);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ml-text);
}

@media (min-width: 64rem) {
  .ml-row,
  .ml-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(var(--ml-col), 100%) minmax(0, 1fr);
    column-gap: var(--ml-gutter);
    width: 100%;
    max-width: 96rem;
    align-items: start;
  }
  .ml-row > *,
  .ml-step > * { grid-column: 2; }

  .ml-margin {
    order: 0;
    grid-row: 1;
    width: min(100%, var(--ml-margin-w));
    margin-top: .3rem;
    padding: .8rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--ml-line);
  }
  .ml-row > .ml-margin--left,
  .ml-step > .ml-margin--left { grid-column: 1; justify-self: end; }
  .ml-row > .ml-margin--right,
  .ml-step > .ml-margin--right { grid-column: 3; justify-self: start; }
  .ml-margin--row2 { grid-row: 2; }
  .ml-margin--row3 { grid-row: 3; }
  .ml-margin--row4 { grid-row: 4; }
  .ml-margin--long { width: min(100%, 16rem); }
}

/* ---------- Method steps ---------- */

.ml-steps { counter-reset: none; }

.ml-step {
  padding-top: clamp(3rem, 7vw, 5.25rem);
}
.ml-step + .ml-step { margin-top: 0; }
.ml-step--first { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.ml-step > .ml-row__main {
  padding-top: 1.35rem;
  border-top: 1px solid var(--ml-text);
}

.ml-step__num {
  order: -1;
  margin-bottom: .5rem;
  font-family: var(--ml-display);
  font-size: var(--ml-s8);
  font-weight: 400;
  line-height: .9;
  color: var(--ml-accent);
  font-variant-numeric: lining-nums;
}

.ml-step__kicker { display: block; }

.ml-step__title {
  font-size: var(--ml-s6);
  font-weight: 400;
  line-height: 1.2;
  margin-top: .35rem;
}
.ml-step__title + * { margin-top: 1rem; }

@media (min-width: 64rem) {
  .ml-step__num {
    order: 0;
    grid-column: 1 !important;
    grid-row: 1 / span 2;
    justify-self: end;
    margin: .55rem 0 0;
    font-size: var(--ml-s9);
  }
  .ml-step > .ml-margin { margin-top: 1.7rem; }
}

/* Table of contents for long pages */
.ml-toc {
  list-style: none;
  margin-top: 1.5rem;
  border-top: 1px solid var(--ml-text);
  counter-reset: ml-toc;
}
.ml-toc__item { border-bottom: 1px solid var(--ml-line); counter-increment: ml-toc; }
.ml-toc__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: .75rem;
  padding: .75rem 0 .7rem;
  color: var(--ml-muted);
  text-decoration: none;
  transition: transform .3s var(--ml-ease), color .25s;
}
.ml-toc__link::before {
  content: counter(ml-toc);
  font-family: var(--ml-display);
  font-size: var(--ml-s5);
  color: var(--ml-line);
  transition: color .25s;
}
.ml-toc__link:hover { transform: translateX(.4rem); color: var(--ml-text); }
.ml-toc__link:hover::before { color: var(--ml-accent); }

/* ---------- Snap strips ---------- */

.ml-strip {
  --ml-strip-pad: max(var(--ml-pad), calc((100% - var(--ml-col)) / 2));
  --ml-card-w: min(17rem, 80vw);
  position: relative;
}

.ml-strip--bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.ml-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  width: min(var(--ml-col), 100% - 2 * var(--ml-pad));
  margin: 0 auto 1.4rem;
}
.ml-strip__head > :first-child { min-width: 0; flex: 1 1 14rem; }
.ml-strip__head .ml-strip__title {
  font-size: var(--ml-s6);
  margin-top: .45rem;
}
.ml-strip__intro {
  margin-top: .6rem;
  font-size: var(--ml-s3);
  color: var(--ml-muted);
}

.ml-strip__controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
}
.ml-strip__controls:empty { display: none; }

.ml-strip__count {
  min-width: 4.2rem;
  text-align: center;
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ml-muted);
  font-variant-numeric: tabular-nums;
}

.ml-strip__btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ml-line);
  color: var(--ml-accent);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
.ml-strip__btn:hover:not(:disabled) { border-color: var(--ml-accent); }
.ml-strip__btn:disabled { color: var(--ml-line); cursor: default; }

.ml-strip__chev {
  width: .55rem;
  height: .55rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transition: transform .3s var(--ml-ease);
}
.ml-strip__btn--next .ml-strip__chev { transform: translateX(-.12rem) rotate(45deg); }
.ml-strip__btn--prev .ml-strip__chev { transform: translateX(.12rem) rotate(-135deg); }
.ml-strip__btn--next:hover:not(:disabled) .ml-strip__chev { transform: translateX(.08rem) rotate(45deg); }
.ml-strip__btn--prev:hover:not(:disabled) .ml-strip__chev { transform: translateX(-.08rem) rotate(-135deg); }

.ml-strip__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  margin: 0;
  padding: .3rem var(--ml-strip-pad) 1.35rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ml-strip-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--ml-line) transparent;
  -webkit-overflow-scrolling: touch;
}
.ml-strip__track::-webkit-scrollbar { height: 6px; }
.ml-strip__track::-webkit-scrollbar-track { background: transparent; }
.ml-strip__track::-webkit-scrollbar-thumb { background: var(--ml-line); }
.ml-strip__track:focus-visible { outline-offset: -2px; }

.ml-row .ml-strip:not(.ml-strip--bleed),
.ml-row__main .ml-strip:not(.ml-strip--bleed) { --ml-strip-pad: 0px; }
.ml-row .ml-strip:not(.ml-strip--bleed) .ml-strip__head,
.ml-row__main .ml-strip:not(.ml-strip--bleed) .ml-strip__head { width: 100%; }

.ml-strip__card {
  flex: 0 0 var(--ml-card-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
  background-color: var(--ml-surface);
  border: 1px solid var(--ml-line);
  transition: border-color .3s, transform .4s var(--ml-ease);
}
.ml-strip__card:hover { border-color: var(--ml-muted); }

.ml-strip__card--current {
  border-color: var(--ml-accent);
  box-shadow: inset 0 0 0 1px var(--ml-accent);
}
.ml-strip__card--current:hover { border-color: var(--ml-accent); }

.ml-strip__art {
  flex: none;
  border-bottom: 1px solid var(--ml-line);
}

.ml-strip__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1 1 auto;
  padding: 1.05rem 1.15rem 1.15rem;
}
.ml-strip__body .ml-strip__title {
  font-size: var(--ml-s5);
  font-weight: 400;
  line-height: 1.22;
}
.ml-strip__text {
  font-size: var(--ml-s3);
  line-height: 1.45;
  color: var(--ml-muted);
}

.ml-strip__meta {
  display: grid;
  gap: 0;
  margin-top: .25rem;
  border-top: 1px solid var(--ml-line);
}
.ml-strip__meta > div {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: .75rem;
  padding: .45rem 0 .4rem;
  border-bottom: 1px solid var(--ml-line);
  font-size: var(--ml-s2);
}
.ml-strip__meta dt {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-muted);
  padding-top: .1rem;
}
.ml-strip__meta dd { margin: 0; color: var(--ml-text); }

.ml-strip__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: .65rem;
}

/* Month tiles */
.ml-strip--months { --ml-card-w: min(16.5rem, 78vw); }

.ml-month__plate {
  aspect-ratio: 5 / 3;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: 1rem 1.05rem .95rem;
}
.ml-month__plate > .ml-fields {
  --ml-f-sky-end: 56;
  --ml-f-sand-end: 66;
  --ml-f-est-end: 100;
}
.ml-month__plate > .ml-fields,
.ml-month__plate > .ml-fields::before,
.ml-month__plate > .ml-fields::after { background-image: none; }

.ml-month__num {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-family: var(--ml-display);
  font-size: var(--ml-s8);
  font-weight: 400;
  line-height: .9;
  color: var(--ml-text);
  font-variant-numeric: lining-nums;
}
.ml-month__name,
.ml-month__year {
  position: relative;
  z-index: 4;
  grid-row: 2;
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ml-text);
}
.ml-month__name { grid-column: 1; }
.ml-month__year { grid-column: 2; color: var(--ml-ink); opacity: .75; }

.ml-month--summer .ml-fields { --f-sky: #F2D7BE; --f-estuary: #A9C2B8; }
.ml-month--closed .ml-fields { --f-sky: #E8CABD; --f-sand: #E2C8B0; --f-estuary: #C2C3B8; }
.ml-month--autumn .ml-fields { --f-sky: #EDC8B4; --f-sand: #E3BC97; --f-estuary: #AEBBAF; }
.ml-month--winter .ml-fields { --f-sky: #E9D3CB; --f-sand: #E5CDB7; --f-estuary: #A9BDB8; }

.ml-strip__card--current .ml-month__num { color: var(--ml-accent); }

/* Phone first screen: let the first month tile peek in under the hero */
@media (max-width: 47.99rem) {
  .ml-section--after-hero { padding-top: 1rem; }
  .ml-strip--months .ml-strip__intro { display: none; }
  .ml-strip--months .ml-strip__head { margin-bottom: .8rem; }
}

/* Spring cards */
.ml-strip--springs { --ml-card-w: min(15rem, 76vw); }

.ml-spring .ml-strip__art {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 1rem 1.5rem;
  background: var(--ml-paper);
}
.ml-spring .ml-strip__art svg { width: 100%; max-height: 100%; }

.ml-spring__coil {
  fill: none;
  stroke: var(--ml-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}
.ml-spring__hook {
  fill: none;
  stroke: var(--ml-ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.ml-spring__end { fill: var(--ml-ink); }
.ml-spring--heavy .ml-spring__coil { stroke-width: 7.5; }
.ml-spring--medium .ml-spring__coil { stroke-width: 5; }
.ml-spring--light .ml-spring__coil { stroke-width: 2.8; }
.ml-spring--feather .ml-spring__coil { stroke-width: 1.3; }

.ml-spring__weight {
  font-family: var(--ml-display);
  font-size: var(--ml-s7);
  font-weight: 400;
  line-height: 1;
  color: var(--ml-text);
}

/* Class poster cards */
.ml-strip--classes { --ml-card-w: min(19rem, 82vw); }
.ml-classcard .ml-strip__body .ml-strip__title {
  font-size: var(--ml-s6);
  font-weight: 400;
}

/* Reformer stock cards */
.ml-strip--reformers { --ml-card-w: min(16rem, 76vw); }
.ml-reformer .ml-strip__body .ml-strip__title {
  font-size: var(--ml-s6);
  font-weight: 400;
  letter-spacing: .01em;
}
.ml-reformer__count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: var(--ml-s2);
  color: var(--ml-muted);
}
.ml-reformer__count strong {
  font-family: var(--ml-display);
  font-weight: 400;
  font-size: var(--ml-s6);
  color: var(--ml-text);
  font-variant-numeric: tabular-nums;
}

.ml-tally {
  --ml-tally: 0;
  position: relative;
  height: .9rem;
  margin-top: .35rem;
  background: var(--ml-paper);
  border: 1px solid var(--ml-line);
  overflow: hidden;
}
.ml-tally__fill {
  position: absolute;
  inset: 1px 0;
  background-image: var(--ml-tally-marks);
  background-size: 2.5% 100%;
  background-repeat: repeat-x;
  clip-path: inset(0 calc((1 - var(--ml-tally)) * 100%) 0 0);
}
.ml-tally::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ml-ink);
  opacity: .55;
}

/* ---------- Pencil card ---------- */

.ml-tallycard {
  position: relative;
  max-width: 21rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.2rem 1rem;
  background-color: var(--ml-paper);
  background-image: var(--ml-grain);
  background-blend-mode: multiply;
  border: 1px solid var(--ml-line);
  transform: rotate(-1.2deg);
}
.ml-tallycard::before {
  content: "";
  position: absolute;
  top: -.65rem;
  left: 50%;
  width: 4.75rem;
  height: 1.25rem;
  background: rgba(243, 217, 164, .78);
  border: 1px solid rgba(201, 154, 135, .55);
  transform: translateX(-50%) rotate(2.5deg);
}
.ml-tallycard__title {
  font-family: var(--ml-display);
  font-size: var(--ml-s5);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ml-text);
}
.ml-tallycard__marks {
  display: grid;
  gap: .3rem;
  margin-top: .75rem;
}
.ml-tallycard__marks:not(.is-built) {
  height: 4.6rem;
  background-image: var(--ml-tally-marks);
  background-size: 5% 1.15rem;
  opacity: .9;
}
.ml-tallycard__row {
  position: relative;
  height: 1.15rem;
  border-bottom: 1px solid rgba(201, 154, 135, .6);
}
.ml-tallycard__row::before {
  content: "";
  position: absolute;
  inset: 0 0 2px 0;
  background-image: var(--ml-tally-marks);
  background-size: 5% 100%;
  background-repeat: repeat-x;
  clip-path: inset(0 calc((1 - var(--ml-row-fill, 1)) * 100%) 0 0);
}
.ml-tallycard__count {
  margin-top: .7rem;
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-muted);
}

/* ---------- Tabs and timetable ---------- */

.ml-tabs { margin-top: 1.5rem; }

.ml-tabs__list {
  display: flex;
  gap: 0;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--ml-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.ml-tabs__list::-webkit-scrollbar { display: none; }

.ml-tabs__tab {
  position: relative;
  flex: none;
  margin-bottom: -1px;
  padding: .85rem .95rem .75rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: var(--ml-s2);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-muted);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}
.ml-tabs__tab:first-child { padding-left: 0; }
.ml-tabs__tab:hover { color: var(--ml-text); }
.ml-tabs__tab[aria-selected="true"] {
  color: var(--ml-text);
  border-bottom-color: var(--ml-accent);
}
.ml-tabs__tab--today::after {
  content: "";
  position: absolute;
  top: .45rem;
  right: .4rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ml-accent);
}
.ml-tabs__short { display: none; }

@media (max-width: 40rem) {
  .ml-tabs__long {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .ml-tabs__short { display: inline; }
  .ml-tabs__tab { padding-inline: .7rem; }
}

.ml-tabs__panel + .ml-tabs__panel { margin-top: 2.25rem; }
.ml-tabs--ready .ml-tabs__panel + .ml-tabs__panel { margin-top: 0; }
.ml-tabs__panel[hidden] { display: none; }
.ml-tabs__panel:focus-visible { outline-offset: 6px; }

.ml-tabs__day {
  margin-bottom: .75rem;
  font-size: var(--ml-s5);
  font-weight: 400;
}

.ml-tabs__panel.is-leaving,
.ml-tabs__panel.is-entering {
  opacity: 0;
}

.ml-timetable {
  list-style: none;
  border-top: 1px solid var(--ml-text);
}

.ml-slot {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem 1rem;
  padding: .85rem 0 .8rem;
  border-bottom: 1px solid var(--ml-line);
}
.ml-slot > * {
  min-width: 0;
}
.ml-slot__time {
  font-family: var(--ml-body);
  font-size: var(--ml-s5);
  line-height: 1.1;
  color: var(--ml-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.ml-slot__class { font-size: 1.05rem; color: var(--ml-text); }
.ml-slot__teacher {
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-muted);
}
.ml-slot__note {
  grid-column: 2 / -1;
  font-size: var(--ml-s2);
  color: var(--ml-muted);
}
.ml-slot .ml-badge { margin-left: .5rem; vertical-align: .1em; }
.ml-slot:hover .ml-slot__teacher { color: var(--ml-text); }

@media (max-width: 23rem) {
  .ml-slot { grid-template-columns: 3.8rem minmax(0, 1fr) auto; gap: .2rem .7rem; }
}

/* ---------- Prices ---------- */

.ml-prices {
  list-style: none;
  margin-top: 1.25rem;
  border-top: 1px solid var(--ml-text);
}

.ml-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: .75rem;
  padding: 1rem 0 .95rem;
  border-bottom: 1px solid var(--ml-line);
  transition: transform .32s var(--ml-ease);
}
.ml-price__name {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  min-width: 0;
  font-size: 1.05rem;
  color: var(--ml-text);
}
.ml-price__name::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1.5px dotted var(--ml-muted);
  transform: translateY(-.28em);
  transition: border-color .25s;
}
.ml-price__amount {
  font-family: var(--ml-display);
  font-size: var(--ml-s6);
  font-weight: 400;
  line-height: 1;
  color: var(--ml-text);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.ml-price__note {
  grid-column: 1 / -1;
  margin-top: .3rem;
  font-size: var(--ml-s2);
  color: var(--ml-muted);
}
.ml-price:hover { transform: translateX(.4rem); }
.ml-price:hover .ml-price__name::after { border-color: var(--ml-accent); }

/* ---------- Lists ---------- */

.ml-list {
  list-style: none;
  margin-top: 1.25rem;
  border-top: 1px solid var(--ml-text);
  counter-reset: ml-list;
}
.ml-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .5rem;
  align-items: baseline;
  padding: .85rem 0 .8rem;
  border-bottom: 1px solid var(--ml-line);
  color: var(--ml-text);
  counter-increment: ml-list;
  transition: transform .32s var(--ml-ease);
}
.ml-list__item::before {
  content: "";
  width: .8rem;
  height: 1px;
  background: var(--ml-line);
  transform: translateY(-.3em);
  transition: background-color .25s, width .3s var(--ml-ease);
}
.ml-list__item > * { min-width: 0; }
.ml-list__item strong,
.ml-list__lead {
  font-weight: 500;
  color: var(--ml-text);
}
.ml-list__text { color: var(--ml-muted); transition: color .25s; }
.ml-list__item:hover { transform: translateX(.4rem); }
.ml-list__item:hover::before { background: var(--ml-accent); width: 1.1rem; }
.ml-list__item:hover .ml-list__text { color: var(--ml-text); }

.ml-list--numbered .ml-list__item::before {
  content: counter(ml-list);
  width: auto;
  height: auto;
  background: none;
  transform: none;
  font-family: var(--ml-display);
  font-size: var(--ml-s5);
  line-height: 1;
  color: var(--ml-line);
}
.ml-list--numbered .ml-list__item:hover::before { background: none; width: auto; color: var(--ml-accent); }

.ml-list--no .ml-list__item::before {
  width: .75rem;
  height: .75rem;
  background: none;
  border: 1px solid var(--ml-muted);
  border-radius: 50%;
  transform: translateY(.05em);
  box-shadow: inset 0 0 0 4.5px transparent;
  background-image: none;
}
.ml-list--no .ml-list__item::after {
  content: "";
  position: absolute;
  left: .37rem;
  top: 1.12rem;
  width: 1px;
  height: .75rem;
  background: var(--ml-muted);
  transform: rotate(45deg);
  transform-origin: center;
  transition: background-color .25s, transform .32s var(--ml-ease);
}
.ml-list--no .ml-list__item:hover::before { width: .75rem; border-color: var(--ml-accent); background: none; }
.ml-list--no .ml-list__item:hover::after { background: var(--ml-accent); }

/* ---------- Day timetable on home ---------- */

.ml-day {
  margin-top: 1.25rem;
}
.ml-day .ml-timetable { margin-top: 0; }
.ml-day__foot { margin-top: 1.5rem; }

/* ---------- Teachers ---------- */

.ml-teachers {
  display: grid;
  gap: 2.25rem;
  margin-top: 1.5rem;
}
.ml-teacher {
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ml-text);
}
.ml-teacher__name {
  font-family: var(--ml-display);
  font-size: var(--ml-s7);
  font-weight: 400;
  line-height: 1.05;
}
.ml-teacher__role {
  display: block;
  margin-top: .5rem;
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-muted);
}
.ml-teacher__text {
  margin-top: .85rem;
  font-size: var(--ml-s3);
  color: var(--ml-muted);
}
@media (min-width: 40rem) {
  .ml-teachers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
}

/* ---------- Hooks ---------- */

.ml-hooks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 1.1rem;
  list-style: none;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ml-line);
}
.ml-hook {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  min-width: 4.4rem;
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ml-muted);
}
.ml-hook::before {
  content: "";
  width: .8rem;
  height: 1.45rem;
  border: 2px solid var(--ml-ink);
  border-top: 0;
  border-left-color: transparent;
  border-radius: 0 0 .7rem .7rem;
  box-shadow: 0 -4px 0 -2px var(--ml-ink);
}

/* ---------- Hours ---------- */

.ml-hours {
  margin-top: 1.25rem;
  border-top: 1px solid var(--ml-text);
}
.ml-hours__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .75rem 0 .7rem;
  border-bottom: 1px solid var(--ml-line);
}
.ml-hours__day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: var(--ml-s2);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ml-muted);
}
.ml-hours__time {
  margin: 0;
  color: var(--ml-text);
  font-variant-numeric: tabular-nums;
}
.ml-hours__row.is-today .ml-hours__day { color: var(--ml-text); }
.ml-hours__day .ml-badge { padding: .2rem .4rem .16rem; font-size: .62rem; }

@media (max-width: 23rem) {
  .ml-hours__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contact ---------- */

.ml-email {
  display: inline-block;
  max-width: 100%;
  margin-top: .75rem;
  font-family: var(--ml-display);
  font-size: clamp(1.65rem, 7.4vw, var(--ml-s8));
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--ml-text);
  text-decoration: underline;
  text-decoration-color: var(--ml-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
  transition: color .25s, text-decoration-thickness .25s;
}
.ml-email:hover {
  color: var(--ml-accent);
  text-decoration-thickness: 2px;
}
.ml-email__line {
  margin-top: 1rem;
  font-size: var(--ml-s5);
  color: var(--ml-muted);
}

/* ---------- Footer ---------- */

.ml-footer {
  position: relative;
  margin-top: 0;
  background-color: var(--ml-text);
  color: #E6C4B4;
  font-size: var(--ml-s3);
}

.ml-footer__inner {
  display: grid;
  gap: 2.25rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--ml-pad) clamp(2rem, 4vw, 3rem);
}

.ml-footer__col { min-width: 0; }
.ml-footer__col > * + * { margin-top: .7rem; }

.ml-footer .ml-footer__label { color: #C99A87; }

.ml-footer__email {
  display: inline-block;
  max-width: 100%;
  font-family: var(--ml-display);
  font-size: clamp(1.45rem, 5vw, var(--ml-s7));
  font-weight: 400;
  line-height: 1.15;
  color: var(--ml-sun);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
  transition: color .25s, text-decoration-thickness .25s;
}
.ml-footer__email:hover { color: #FBEBCB; text-decoration-thickness: 2px; }

.ml-footer__help { color: #D2AE9E; }

.ml-footer .ml-hours { margin-top: .6rem; border-top-color: rgba(233, 196, 180, .45); }
.ml-footer .ml-hours__row { border-bottom-color: rgba(201, 154, 135, .3); padding: .55rem 0 .5rem; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
.ml-footer .ml-hours__day { color: #C99A87; font-size: var(--ml-s1); }
.ml-footer .ml-hours__time { color: #F0D6C8; }
.ml-footer .ml-hours__row.is-today .ml-hours__day { color: var(--ml-sun); }
.ml-footer .ml-badge--today { background: var(--ml-sun); border-color: var(--ml-sun); color: var(--ml-text); }
.ml-footer .ml-badge--closed { color: var(--ml-sun); }

.ml-footer__place {
  font-family: var(--ml-display);
  font-size: var(--ml-s5);
  color: #F0D6C8;
}

.ml-footer__nav { list-style: none; display: grid; gap: .1rem; }
.ml-footer__nav a {
  display: inline-block;
  padding: .3rem 0;
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D2AE9E;
  text-decoration: none;
  transition: color .25s, transform .3s var(--ml-ease);
}
.ml-footer__nav a:hover { color: var(--ml-sun); transform: translateX(.35rem); }
.ml-footer__nav a[aria-current="page"] { color: var(--ml-sun); }

.ml-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.35rem var(--ml-pad) 1.75rem;
  border-top: 1px solid rgba(201, 154, 135, .3);
  font-size: var(--ml-s1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #BF9583;
}
.ml-footer__mark {
  font-family: var(--ml-display);
  font-size: var(--ml-s4);
  font-weight: 400;
  letter-spacing: .34em;
  color: #E6C4B4;
}

@media (min-width: 56rem) {
  .ml-footer__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .75fr);
    gap: 3rem;
  }
}

/* ---------- Motion (tab cross-fade and strip scrolling only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .ml-tabs__panel {
    transition: opacity .18s ease, transform .22s var(--ml-ease);
  }

  .ml-strip__track { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .ml-header, .ml-strip__controls, .ml-menu-toggle { display: none !important; }
  .ml-tabs__panel[hidden] { display: block !important; }
  .ml-footer { background: none; color: #000; }
}