@import url("https://fonts.googleapis.com/css2?family=Sacramento&family=Figtree:ital,wght@0,300..900;1,300..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

/* ---- Design tokens, transcribed from the Ashtanga Yoga Tarifa design system ---- */
:root {
  --ink-900:#111111; --ink-700:#3a3a3a; --ink-500:#58595e; --ink-300:#9a9ca1; --ink-100:#d8dade;
  --paper-000:#ffffff; --paper-050:#f7f7f7; --paper-100:#efefee;

  --red-600:#a4161a; --red-500:#c81e25; --red-400:#ef4a53; --red-200:#f6b3b7;
  --lime-600:#84c23c; --lime-500:#afe76a;
  --amber-500:#e6aa50;
  --ochre-500:#c8811a;

  --grad-scrim-full:linear-gradient(180deg,rgba(17,17,17,.62) 0%,rgba(17,17,17,.28) 45%,rgba(17,17,17,.68) 100%);
  /* For a hero shot on a white seamless backdrop, where the standard scrim
     leaves the white title sitting on near-white photo. */
  --grad-scrim-strong:linear-gradient(180deg,rgba(17,17,17,.74) 0%,rgba(17,17,17,.50) 45%,rgba(17,17,17,.82) 100%);
  --shadow-lift:0 8px 26px rgba(17,17,17,.14);
  --shadow-text:0 2px 12px rgba(17,17,17,.55);
  --ring-focus:0 0 0 3px var(--red-200);

  --font-script:"Sacramento",cursive;
  --font-sans:"Figtree",system-ui,sans-serif;
  --font-slab:"PT Serif",Georgia,serif;
  --font-display:"Playfair Display",Georgia,serif;
  --fw-regular:400; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --text-xs:12px; --text-sm:14px; --text-md:18px; --text-lg:21px; --text-xl:26px;
  --text-2xl:32px; --text-4xl:56px;
  --lh-tight:1.02; --lh-snug:1.14; --lh-normal:1.45; --lh-loose:1.62;
  --ls-wordmark:0.30em; --ls-eyebrow:0.22em; --ls-caps:0.06em; --ls-tight:-0.02em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-24:96px;
  --container:1180px; --measure:64ch;
  /* Header height in its two states: translucent over a hero (68px logo) and
     solid after scroll or on an inner page (44px logo). .hero pulls itself up
     under the first, .tabs-strip sticks below the second — both read these
     rather than repeating the number. */
  --header-h:104px; --header-h-solid:81px;
  /* Clearance from the top of the hero box to its first line of text. Measured
     from the solid header so the title sits exactly where it always has while
     the photo now starts behind the taller translucent one. */
  --hero-pad-top:calc(var(--space-16) + var(--header-h) - var(--header-h-solid));

  --radius-pill:999px; --radius-lg:20px;

  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --surface-sunken:var(--paper-050);
  --border-subtle:var(--ink-100);
  --accent-mysore:var(--red-500); --accent-vinyasa:var(--lime-500); --accent-sound:var(--amber-500);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper-000); color: var(--text-body);
  font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-normal);
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---- Language toggle: default Spanish, English shown when html[data-lang="en"] ---- */
html[data-lang="en"] .lang-es { display: none; }
html:not([data-lang="en"]) .lang-en { display: none; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(17,17,17,.34);
  backdrop-filter: saturate(120%) blur(14px); -webkit-backdrop-filter: saturate(120%) blur(14px);
  transition: background .26s cubic-bezier(.33,0,.2,1), backdrop-filter .26s;
}
.site-header.is-solid {
  background: var(--paper-000); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border-subtle);
}
.header-inner {
  max-width: var(--container); margin: 0 auto; padding: 18px var(--space-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
}
/* flex-shrink and max-width are both off on purpose: the global img rule caps
   width at 100% while the height here is pinned, so a shrinking flex item
   squashed the wordmark instead of scaling it. */
.logo-link { display: flex; flex: 0 0 auto; }
.logo-link img { flex: 0 0 auto; height: 68px; width: auto; max-width: none; transition: height .26s cubic-bezier(.33,0,.2,1); }
.site-header.is-solid .logo-link img { height: 44px; }
.site-header.is-solid .logo-white { display: none; }
.site-header:not(.is-solid) .logo-black { display: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.nav-link {
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.86);
  border-bottom: 2px solid transparent; padding-bottom: 4px; transition: color .26s;
}
.site-header.is-solid .nav-link { color: var(--text-muted); }
.lang-btn {
  background: transparent; cursor: pointer; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,.5); color: var(--paper-000);
  padding: 7px 14px; font-family: var(--font-sans); font-size: 11px;
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.site-header.is-solid .lang-btn { border-color: var(--ink-100); color: var(--ink-900); }

.nav-toggle { display: none; }
.nav-toggle__bar {
  display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .26s cubic-bezier(.33,0,.2,1), opacity .18s;
}

/* Phones and tablets: the links, the language toggle and the CTA all move into
   a dropdown panel behind the hamburger, so the bar carries nothing but the
   logo and a 44px button. That is what keeps the logo at its full 68px at
   every width — it used to be cut to 52px (and the CTA still wrapped to two
   lines under ~340px) to make room for a nav that was in the bar. Below 900px
   the links were previously just hidden, with no way to reach them at all.
   Vertical padding stays put so the two --header-h values hold everywhere. */
@media (max-width: 900px) {
  .header-inner { padding: 18px var(--space-4); }
  .nav-toggle {
    display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-right: -10px;
    background: transparent; border: 0; cursor: pointer; color: var(--paper-000);
  }
  .site-header.is-solid .nav-toggle { color: var(--ink-900); }
  .site-header[data-nav-open] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header[data-nav-open] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .site-header[data-nav-open] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The panel is always the light surface, even while the bar above it is
     still translucent over a hero — a menu that inherits the hero's white
     link colour is unreadable the moment it opens over the photo. */
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: var(--paper-000); border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lift);
  }
  .site-header[data-nav-open] .site-nav { display: flex; }
  .site-header .site-nav .nav-link {
    color: var(--ink-900); font-size: var(--text-sm);
    padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle);
  }
  .site-header .site-nav .lang-btn {
    align-self: flex-start; margin: var(--space-4) 0 var(--space-2);
    border-color: var(--ink-100); color: var(--ink-900); padding: 9px 16px;
  }
  .site-nav .btn { width: 100%; }
}

/* Tablets: a full-bleed panel reads as a broken page rather than as a menu, so
   above phone widths it drops from the right, under the button that opened it. */
@media (min-width: 561px) and (max-width: 900px) {
  .site-nav {
    left: auto; right: var(--space-4); width: min(340px, calc(100vw - var(--space-8)));
    border: 1px solid var(--border-subtle); border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-sans); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps);
  text-transform: uppercase; border: 1.5px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 1; transition: all .26s cubic-bezier(.33,0,.2,1);
  font-size: var(--text-md); padding: 17px 36px; min-height: 56px;
}
.btn-accent { background: var(--red-500); color: var(--paper-000); }
.btn-accent:hover { background: var(--red-600); }
.btn-inverse { background: var(--paper-000); color: var(--ink-900); }
.btn-inverse:hover { background: var(--paper-100); }
.btn-primary { background: var(--ink-900); color: var(--paper-000); font-size: var(--text-sm); padding: 13px 26px; min-height: 44px; }
.btn-primary:hover { background: var(--ink-700); }
.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); font-size: var(--text-sm); padding: 13px 26px; min-height: 44px; }
.btn-secondary:hover { background: var(--ink-900); color: var(--paper-000); }

/* ---- Pills ---- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
  font-family: var(--font-slab); font-weight: var(--fw-bold); line-height: var(--lh-snug);
  font-size: var(--text-xs); padding: 6px 14px;
}
.pill-ink { background: var(--ink-900); color: var(--paper-000); }
.pill-outline { background: transparent; color: var(--ink-900); box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.pill-accent { background: var(--red-500); color: var(--paper-000); }

/* ---- Hero ---- */
.hero {
  --hero-h: 620px; --hero-crop: 50% 50%;
  position: relative; min-height: var(--hero-h); overflow: hidden; background: var(--ink-900);
  margin-top: calc(var(--header-h) * -1);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hero-crop);
}
.hero__scrim { position: absolute; inset: 0; background: var(--grad-scrim-full); }
.hero__scrim--strong { background: var(--grad-scrim-strong); }
.hero__inner {
  position: relative; display: flex; flex-direction: column; min-height: var(--hero-h);
  justify-content: space-between; padding: var(--hero-pad-top) var(--space-8) var(--space-10);
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.hero__kicker {
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: rgba(255,255,255,.8);
}
.hero__title {
  color: var(--paper-000); font-weight: var(--fw-black);
  font-size: clamp(44px, 7vw, 104px); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); text-shadow: var(--shadow-text); max-width: 14ch;
}
.hero__credit {
  color: var(--red-400); font-style: italic; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--text-lg);
  line-height: var(--lh-snug); max-width: 20ch;
}
/* The buttons and the phone centre under the left-aligned title block. The row
   needs its own width:100% to have anything to centre in -- .hero__content is
   align-items:flex-start, so it would otherwise shrink-wrap the buttons. */
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); width: 100%; justify-content: center; }
/* Sits in the darkest band of the scrim at the very foot of the hero, a clear
   line below the buttons, so it reads over the photo instead of across it. */
.hero__contact {
  color: var(--paper-000); font-weight: var(--fw-bold); font-size: var(--text-2xl);
  letter-spacing: var(--ls-caps); text-shadow: var(--shadow-text);
  text-align: center; margin-top: var(--space-6);
}

/* Phones: the hero box is far taller than it is wide, so object-fit: cover
   throws away most of the photo's width. Two things have to give for the box
   to actually shrink with the viewport:

   1. --hero-h becomes fluid rather than a couple of fixed steps, so the box
      tracks the width smoothly instead of jumping (and jumping *up* again --
      the old 430px step was shorter than the 480px one).
   2. The contents scale down with it. min-height only sets a floor: below
      ~430px the text was the tallest thing in the box, so shrinking --hero-h
      alone changed nothing. The two hero buttons stacking cost 124px on their
      own; at --text-sm they sit on one row again.

   Top padding stays at --hero-pad-top: .hero is pulled up the full height of
   the translucent header, so anything less tucks the title behind it -- and
   that band isn't wasted, it's photo showing through the header. */
@media (max-width: 700px) {
  .hero { --hero-h: clamp(340px, 86vw, 540px); }
  .hero__inner { padding: var(--hero-pad-top) var(--space-4) var(--space-8); gap: var(--space-4); }
  .hero__content { gap: var(--space-4); }
  .hero__title { font-size: clamp(30px, 8vw, 44px); max-width: none; }
  .hero__credit { font-size: var(--text-md); max-width: 32ch; }
  .hero__actions .btn { font-size: var(--text-sm); padding: 13px 22px; min-height: 46px; }
  .hero__contact { font-size: var(--text-xl); }
}
/* Below ~400px the two hero CTAs stack again, which put 58px back into the
   box and made a 360px phone taller than a 390px one. Smaller type keeps them
   on one row; min-height holds the 44px tap target. */
@media (max-width: 400px) {
  .hero__actions .btn { font-size: var(--text-xs); padding: 12px 16px; }
}

/* ---- Notes strip ---- */
.notes-strip { background: var(--surface-sunken); padding: var(--space-6) var(--space-8); }
.notes-strip__row {
  max-width: var(--container); margin: 0 auto; display: flex; gap: var(--space-3);
  flex-wrap: wrap; align-items: center; justify-content: center;
}

/* ---- Section heading ---- */
.section-eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3);
}
.section-heading {
  font-weight: var(--fw-black); letter-spacing: var(--ls-tight); color: var(--text-strong);
  font-size: clamp(32px, 4vw, 56px); line-height: var(--lh-tight);
}

/* ---- Prose ---- */
.prose { max-width: var(--measure); }
.prose--lead { font-size: var(--text-lg); line-height: var(--lh-normal); font-weight: 500; }
.prose--body { font-size: var(--text-md); line-height: var(--lh-loose); }

/* ---- Mysore section ---- */
.mysore-section { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.mysore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.mysore-grid .prose-col { display: grid; gap: var(--space-5); }

/* ---- Practices ---- */
.practices-section { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-8) var(--space-24); }
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.class-card {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-000);
  border: 1px solid var(--border-subtle); display: flex; flex-direction: column;
  transition: box-shadow .26s cubic-bezier(.33,0,.2,1);
}
.class-card:hover { box-shadow: var(--shadow-lift); }
.class-card__media { position: relative; overflow: hidden; }
.class-card__media img { width: 100%; height: 220px; object-fit: cover; transition: transform .52s cubic-bezier(.33,0,.2,1); }
.class-card:hover .class-card__media img { transform: scale(1.03); }
.class-card__dot { position: absolute; top: var(--space-4); left: var(--space-4); height: 8px; width: 44px; border-radius: var(--radius-pill); }
.class-card--mysore .class-card__dot { background: var(--accent-mysore); }
.class-card--vinyasa .class-card__dot { background: var(--accent-vinyasa); }
.class-card--sound .class-card__dot { background: var(--accent-sound); }
.class-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.class-card__meta {
  display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted);
}
.class-card__meta .dot { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.class-card--mysore .class-card__meta .dot { background: var(--accent-mysore); }
.class-card--vinyasa .class-card__meta .dot { background: var(--accent-vinyasa); }
.class-card--sound .class-card__meta .dot { background: var(--accent-sound); }
.class-card__title { font-size: var(--text-2xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.class-card__desc { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }
/* Grid, not flex: a duration long enough to wrap (Mysore carries two time bands)
   would otherwise push the price out of the row and onto a line of its own. */
.class-card__footer { margin-top: auto; padding-top: var(--space-4); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-2) var(--space-4); }
.class-card__note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-muted); }
.class-card__duration { font-size: var(--text-sm); color: var(--text-muted); }
.class-card__price { justify-self: end; font-family: var(--font-display); font-style: italic; font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--text-strong); }

/* ---- Blog teaser ---- */
.blog-teaser { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.blog-teaser__empty {
  border: 1px dashed var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-8); text-align: center; color: var(--text-muted);
}

/* ---- Footer ---- */
.site-footer { background: var(--ink-900); color: var(--paper-000); }
.footer-grid { max-width: var(--container); margin: 0 auto; padding: var(--space-16) var(--space-8); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-16); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.footer-col img { height: 62px; width: auto; }
.footer-about { margin: 0; font-size: var(--text-sm); line-height: var(--lh-loose); color: rgba(255,255,255,.62); max-width: 32ch; }
.footer-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.72); }
.footer-col a, .footer-col span.line { font-size: var(--text-sm); color: rgba(255,255,255,.78); text-decoration: none; }
.footer-phone { font-size: var(--text-lg); font-weight: var(--fw-bold); }
/* The whole address is the link to the map: spans, not <br>, so the lines stay
   addressable and the "Cómo llegar" cue can be styled apart from them. */
.footer-address { display: grid; gap: 2px; }
.footer-address .line { display: block; }
.footer-address:hover .line { color: rgba(255,255,255,.95); }
/* Deliberately not a .line: `.footer-col span.line` sets text-decoration:none,
   which outranks anything this rule can say about the underline. */
.footer-directions { display: block; margin-top: var(--space-2); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.footer-hours dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); font-size: var(--text-sm); color: rgba(255,255,255,.78); }
.footer-hours dt { font-weight: var(--fw-semibold); color: rgba(255,255,255,.92); }
.footer-hours dd { margin: 0; }
.footer-hours .footer-about { margin-top: var(--space-2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding: var(--space-5) var(--space-8); text-align: center; font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.4); }

@media (max-width: 900px) {
  .mysore-grid, .footer-grid { grid-template-columns: 1fr; }
  .class-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .class-grid { grid-template-columns: 1fr; }
}

/* ---- Secondary-page hero (Classes) ---- */
/* Pulled up under the translucent header exactly like .hero, and grown by the
   same amount so the visible box is unchanged. Without the pull-up the header
   on these pages sat over the white page background instead of over the photo
   -- a pale band with the white wordmark and white nav links on it. The box is
   bottom-anchored, so nothing inside it moves. */
.page-hero {
  --page-hero-h: 420px; --page-hero-crop: 50% 50%;
  position: relative; overflow: hidden; background: var(--ink-900);
  margin-top: calc(var(--header-h) * -1);
  min-height: calc(var(--page-hero-h) + var(--header-h));
}
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--page-hero-crop); }
.page-hero__scrim { position: absolute; inset: 0; background: var(--grad-scrim-full); }
.page-hero__inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(var(--page-hero-h) + var(--header-h)); padding: calc(var(--space-16) + var(--header-h)) var(--space-8) var(--space-16); gap: var(--space-3); }
.page-hero__kicker { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.8); }
.page-hero__title { color: var(--paper-000); font-weight: var(--fw-black); font-size: clamp(36px, 6vw, 76px); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-shadow: var(--shadow-text); }
.page-hero__contact { color: var(--paper-000); font-weight: var(--fw-bold); font-size: var(--text-xl); letter-spacing: var(--ls-caps); text-shadow: var(--shadow-text); }
/* Same fluid squeeze as the home hero, milder because the box is shorter and
   carries only a kicker and a title (~175px), so the height never bottoms out
   on its own content. */
@media (max-width: 700px) {
  .page-hero { --page-hero-h: clamp(260px, 68vw, 420px); }
  .page-hero__inner { padding: calc(var(--space-10) + var(--header-h)) var(--space-4) var(--space-10); }
}

/* ---- Class tabs ---- */
.tabs-strip { position: sticky; top: var(--header-h-solid); z-index: 10; background: var(--paper-000); border-bottom: 1px solid var(--border-subtle); padding: var(--space-5) var(--space-8); }
.tabs-strip__row { max-width: var(--container); margin: 0 auto; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tab-pill { font: inherit; cursor: pointer; }
a.pill { text-decoration: none; }

/* ---- Class detail ---- */
.class-detail { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); display: grid; grid-template-columns: 1fr 340px; gap: var(--space-16); align-items: start; }
.class-detail__main { display: grid; gap: var(--space-6); }
.class-detail__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.class-detail__side { display: grid; gap: var(--space-6); }
/* The 340px info rail can't sit beside the text on a phone: with the gap and
   the page padding it pushed the page ~215px past the viewport, so every class
   page scrolled sideways. It stacks under the text instead. */
@media (max-width: 900px) {
  .class-detail { grid-template-columns: 1fr; gap: var(--space-10); padding: var(--space-16) var(--space-8); }
}
@media (max-width: 700px) {
  .class-detail { padding: var(--space-16) var(--space-4); }
}
.info-card { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); padding: var(--space-6); display: grid; gap: var(--space-4); }
.info-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.info-card__value { font-family: var(--font-slab); font-weight: var(--fw-bold); font-size: var(--text-md); }
.info-card__value--price { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-bold); font-size: var(--text-2xl); }
.info-card__value--sm { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
/* Price + its optional note (bonos, offers): the note sits under the amount,
   right-aligned with it, rather than being squeezed into the price slot. */
.info-card__stack { display: grid; justify-items: end; gap: var(--space-1); text-align: right; }
.info-card__note { font-family: var(--font-slab); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-muted); max-width: 200px; }

.price-table { border-radius: var(--radius-lg); background: var(--surface-sunken); padding: var(--space-6); }
.price-table__head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.price-table__title { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.price-table__subtitle { font-size: var(--text-sm); font-style: italic; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); max-width: 220px; }
.price-table__rows { display: grid; gap: var(--space-4); }
.price-table__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-3); }
.price-table__row--last { border-bottom: none; }
.price-table__label { font-size: var(--text-md); color: var(--text-body); }
.price-table__price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); font-style: italic; color: var(--text-strong); white-space: nowrap; }
.price-table__row--emphasis .price-table__label { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.price-table__row--emphasis .price-table__price { font-size: var(--text-2xl); }
.price-table__footnote { margin: var(--space-6) 0 0; font-size: var(--text-md); font-weight: var(--fw-bold); line-height: var(--lh-normal); color: var(--text-strong); text-align: center; }

/* ---- Schedule ---- */
.schedule-section { max-width: 1280px; margin: 0 auto; padding: var(--space-16) var(--space-8) var(--space-24); }
.schedule-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-10); }
.schedule-head__phone-label { text-align: right; }
.schedule-head__phone { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-2xl); letter-spacing: var(--ls-caps); }
/* --days is set inline by generate.py: the timetable can carry weekends or a
   one-off event column, so the track count follows the data. */
.schedule-grid { display: grid; grid-template-columns: minmax(110px,.9fr) repeat(var(--days, 5), minmax(110px,1fr)); gap: var(--space-3); font-family: var(--font-slab); align-items: start; }
.schedule-grid__day { width: 100%; text-align: center; text-transform: uppercase; letter-spacing: var(--ls-caps); }
.schedule-grid__time { width: 100%; text-align: center; letter-spacing: var(--ls-caps); }
.schedule-grid__cell { display: flex; flex-direction: column; gap: var(--space-2); }
.schedule-list { display: none; font-family: var(--font-slab); }
.schedule-list__day { display: grid; gap: var(--space-2); }
.schedule-list__dayname { width: 100%; text-align: center; text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: var(--space-1); }
.schedule-list__row { display: flex; align-items: stretch; gap: var(--space-2); }
.schedule-list__time { flex: 0 0 auto; white-space: nowrap; font-size: var(--text-xs); letter-spacing: var(--ls-caps); }
.schedule-list__classes { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2); }
.class-chip { width: 100%; flex-direction: column; text-align: center; }
.class-chip span { display: block; }
.class-chip .note { font-size: var(--text-xs); font-weight: var(--fw-regular); }
.schedule-banner { margin-top: var(--space-12); background: var(--ink-900); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-8); text-align: center; display: grid; gap: var(--space-3); font-family: var(--font-slab); font-weight: var(--fw-bold); color: var(--paper-000); font-size: var(--text-md); }
@media (max-width: 900px) {
  .schedule-grid { grid-template-columns: minmax(90px,.9fr) repeat(var(--days, 5), minmax(90px,1fr)); font-size: var(--text-sm); }
}
/* Phones: a five-column grid cannot shrink to 360px. It used to keep its width
   and scroll sideways inside its own box, which meant Friday was only reachable
   by discovering a scrollbar. Below 700px the grid is swapped for the same
   timetable transposed -- one block per day, the day rail as its heading and
   each row its time beside the class -- so the whole week reads top to bottom
   with no horizontal scrolling anywhere. Same pills, same tones. */
@media (max-width: 700px) {
  .schedule-section { padding: var(--space-10) var(--space-4) var(--space-16); }
  .schedule-grid { display: none; }
  /* 368px is the content width at a 400px viewport (400 less the section's
     16px gutters), which is about as wide as a class pill should ever get.
     Past that the list stops growing and centres instead of stretching a
     four-word pill across a 700px tablet; below it, it shrinks as before. */
  .schedule-list { display: grid; gap: var(--space-8); max-width: 368px; margin-inline: auto; }
  .schedule-head { margin-bottom: var(--space-8); }
  .schedule-head__phone-label { text-align: left; }
}

/* ---- Contact page ---- */
.contact-section { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); display: grid; grid-template-columns: 1fr 420px; gap: var(--space-16); align-items: start; }
.contact-info { display: grid; gap: var(--space-6); }
.contact-block { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.contact-block .phone-big { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-2xl); letter-spacing: var(--ls-caps); text-decoration: none; }
.contact-address { font-family: var(--font-slab); font-style: normal; font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-strong); }
.contact-block__map { justify-self: start; margin-top: var(--space-2); }
.contact-block .also-row { display: grid; gap: 2px; margin-top: var(--space-2); font-size: var(--text-sm); }
.contact-card { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); padding: var(--space-10); display: grid; gap: var(--space-6); align-content: start; }
.contact-card__cta { display: grid; gap: var(--space-4); }
@media (max-width: 900px) {
  .contact-section { grid-template-columns: 1fr; }
}

/* ---- Analytics acknowledgement banner ---- */
.consent-banner {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 50;
  max-width: 560px; margin: 0 auto; background: var(--ink-900); color: var(--paper-000);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  box-shadow: var(--shadow-lift); font-family: var(--font-sans);
}
.consent-banner p { margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: rgba(255,255,255,.86); flex: 1 1 240px; }
.consent-banner .btn { flex: 0 0 auto; padding: 10px 22px; min-height: 40px; font-size: var(--text-xs); }