/* ==========================================================================
   Beach Pilates Dubai homepage styles
   ========================================================================== */

/* Self-hosted fonts (only faces used: Jost 400/500, DM Serif Display 400, Sacramento 400). */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-serif-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-serif-display-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sacramento-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sacramento-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks.
   With font-display: swap, text first paints in a fallback and then reflows
   when the real face arrives. Where that changes a heading's line count it
   moves everything below it: measured at 0.176 CLS on a Journal post at 768px,
   well past the 0.1 threshold. Scaling the fallback so it occupies the same
   width keeps the line count identical across the swap, so nothing moves.
   Percentages are measured, not guessed: DM Serif Display is 109.53% the width
   of Times, and Jost 96.47% of Arial, for the same string at the same size.
   Where the local font is absent the rule simply does not apply and behaviour
   is no worse than before.
   Only size-adjust is overridden. Every heading and body rule here sets its
   own line-height, so ascent/descent overrides change nothing about layout,
   but they do shrink the text's painted area during the fallback phase, which
   shrank the homepage h1 enough for the hero image to take over as the LCP
   element and cost 3.2s on a throttled connection. Width is the only metric
   that needs matching. */
@font-face {
  font-family: 'DM Serif Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif'), local('DejaVu Serif');
  size-adjust: 109.53%;
}
@font-face {
  font-family: 'Jost Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 96.47%;
}

:root {
  /* Brand tokens (mirror of CLAUDE.md) */
  --bg: #F7F3EA;            /* page background (cream) */
  --card: #FFFDF8;          /* card background */
  --band: #F1EADC;          /* About section band */
  --red: #9C1F1F;           /* accent / buttons / links */
  --red-hover: #701414;     /* link / button hover */
  --text: #2A2320;          /* body text / footer bg */
  --footer-script: #E8B7B7; /* footer script tagline */

  /* Derived tints */
  --text-86: rgba(42, 35, 32, .86);
  --text-80: rgba(42, 35, 32, .8);
  --text-65: rgba(42, 35, 32, .65);
  --text-60: rgba(42, 35, 32, .6);
  --text-45: rgba(42, 35, 32, .45);
  --text-78: rgba(42, 35, 32, .78);
  --text-70: rgba(42, 35, 32, .7);
  --text-75: rgba(42, 35, 32, .75);
  --text-55: rgba(42, 35, 32, .55);
  --hair: rgba(42, 35, 32, .08);
  --hair-strong: rgba(42, 35, 32, .12);

  /* Fonts */
  --font-body: "Jost", "Jost Fallback", system-ui, sans-serif;
  --font-serif: "DM Serif Display", "DM Serif Fallback", serif;
  --font-script: "Sacramento", cursive;

  /* Layout */
  --pad-x: 64px;
  --max-w: 1200px;         /* max content width on wide screens */

  /* Stacking order (semantic, never arbitrary values) */
  --z-sticky: 100;

  /* Motion: natural deceleration only, no bounce or elastic */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  /* Measured height of the sticky header. Constant by design (see .is-stuck),
     so anchor offsets can rely on it. */
  --header-h: 99px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Lenis drives scrolling itself when active, so native smooth scroll must stand down. */
html.lenis { scroll-behavior: auto; }
/* Set by the inline script in the page head when the URL arrives with a
   fragment, so that first jump is instant and cannot be interrupted by the
   motion layer starting up. Removed again once the position has settled. */
html.hash-landing { scroll-behavior: auto; }

/* Copied verbatim from lenis 1.3.25 dist/lenis.css (see assets/js/vendor/) and
   inlined here rather than linked, to keep the page on a single stylesheet
   request. Re-sync this block when the vendored Lenis is upgraded. */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Keep anchor targets clear of the sticky header. */
:target,
#classes, #about, #events, #faq { scroll-margin-top: calc(var(--header-h) + 20px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

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

a { color: var(--red); }
a:hover { color: var(--red-hover); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus-visible {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--red);
  color: var(--bg);
  padding: 12px 20px;
}

.script {
  font-family: var(--font-script);
  color: var(--red);
  font-size: 30px;
  line-height: 1;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  margin: 8px 0 48px;
}

/* Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
}

.btn--pill {
  background: var(--red);
  color: var(--bg);
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  border: 0;
  transition: background-color .18s var(--ease-out-quart),
              transform .18s var(--ease-out-quart),
              box-shadow .24s var(--ease-out-quart);
}
.btn--pill:hover {
  background: var(--red-hover);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -12px rgba(156, 31, 31, .65);
}
/* Press reads as a physical commit: settle back down, faster than the lift. */
.btn--pill:active {
  transform: translateY(0) scale(.985);
  transition-duration: .08s;
}

/* Outline counterpart to the pill, for secondary actions that sit beside real
   content rather than closing a section (the per-row Book now on /events). */
.btn--ghost {
  background: none;
  color: var(--text);
  padding: 11px 24px;
  border: 1px solid var(--text-45);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .18s var(--ease-out-quart),
              color .18s var(--ease-out-quart),
              background-color .18s var(--ease-out-quart);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--red);
  color: var(--red);
  background: rgba(156, 31, 31, .04);
}

/* Text for screen readers only. Used to give repeated "Book now" links a
   distinct accessible name, so they are not four identical links in a row. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Trailing arrow on text CTAs. Decorative, so it is hidden from screen readers
   in the markup and only nudges on hover. */
.arrow {
  display: inline-block;
  transition: transform .2s var(--ease-out-quart);
}
.card-link:hover .arrow,
.gallery-follow:hover .arrow,
.card-link:focus-visible .arrow,
.gallery-follow:focus-visible .arrow { transform: translateX(4px); }
/* The hero pill points down the page, so its arrow nudges down, not across. */
.btn--pill:hover .arrow--down,
.btn--pill:focus-visible .arrow--down { transform: translateY(3px); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow .3s var(--ease-out-quart), border-color .3s var(--ease-out-quart);
}
/* Set once the page has scrolled past the hero opening.
   The bar's height stays fixed on purpose. Shrinking its padding looks tidy but
   the header is in flow, so every toggle moved the rest of the page up by 18px:
   a layout shift on scroll, which costs CLS and made anchor targets land under
   the bar. The state change is therefore carried by properties that do not
   affect layout: a lift, the hairline dissolving, and a transform on the logo. */
.site-header.is-stuck {
  box-shadow: 0 2px 24px -14px rgba(42, 35, 32, .5);
  border-bottom-color: transparent;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 56px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.logo {
  transition: transform .3s var(--ease-out-quart);
  transform-origin: left center;
}
.site-header.is-stuck .logo { transform: scale(.93); }

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: var(--red);
}
.logo-script { font-family: var(--font-script); color: var(--red); }
.logo-script--top { font-size: 20px; margin-bottom: -4px; }
.logo-script--bottom { font-size: 18px; margin-top: -2px; }
.logo-serif {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--red);
}

.nav-links {
  display: flex;
  gap: 36px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--text);
  text-decoration: none;
  transition: color .18s var(--ease-out-quart);
}
.nav-links a:hover { color: var(--red); }

/* Wipe-in underline, desktop only: on mobile the links are full-width rows
   with their own dividers, where an underline would just read as noise. */
@media (min-width: 769px) {
  .nav-links a {
    position: relative;
    padding-bottom: 3px;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .24s var(--ease-out-quart);
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after { transform: scaleX(1); }
}

.nav-book {
  padding: 12px 26px;
  font-size: 13px;
  letter-spacing: .14em;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--red);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Full-bleed film. The section fills the first fold below the sticky header;
   the poster is the LCP element and the video fades in over it once JS has
   decided it may play. The background colour stands in behind the cream type
   for the frames before the poster arrives, so the headline is never
   cream-on-cream. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  background: #6E5C4C;
  color: var(--bg);
}

.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The clip is taller than the hero's wide crop. Centred, the visible band
     kept legs and mats and cut the faces and raised arms off the top, so the
     window rides high: keep people, sacrifice foreground sand. Only matters
     at wide viewports; portrait phones crop the sides instead. */
  object-position: 50% 24%;
}
/* Hidden until it is actually rendering frames. The first frame matches the
   poster, so the handover is invisible; the fade only covers decode jitter. */
.hero-video { opacity: 0; transition: opacity .5s ease; }
.hero-video.is-playing { opacity: 1; }

/* Legibility scrim. The footage is bright sand and sky, so the cream type
   needs a warm darkening: a vertical wash that stays lightest at the top
   (sky) and firmest at the foot, plus a soft radial pool behind the text
   block itself, where the frame is busiest. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 46% at 50% 54%,
      rgba(30, 22, 16, .40), rgba(30, 22, 16, 0) 72%),
    linear-gradient(to bottom,
      rgba(30, 22, 16, .22),
      rgba(30, 22, 16, .36) 52%,
      rgba(30, 22, 16, .52));
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 880px;
  text-shadow: 0 1px 28px rgba(20, 14, 10, .45);
}

/* The thin script needs its own tighter shadow on top of the shared soft one:
   at this weight the 28px blur alone cannot hold it against white fabric. */
.script--hero {
  font-size: 42px;
  color: var(--footer-script);
  text-shadow: 0 1px 10px rgba(20, 14, 10, .55);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 68px;
  line-height: 1.08;
  margin: 10px 0 0;
  font-weight: 400;
  max-width: min(16em, 100%);
  color: var(--bg);
}
.hero-sub {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  margin: 16px 0 0;
  max-width: min(36em, 100%);
  color: rgba(247, 243, 234, .92);
}
.hero-cta { display: flex; margin: 34px 0 0; }

/* Press sticker: a slapped-on circular badge linking to the What's On
   feature. Absolute against .hero rather than inside .hero-inner so the
   centred text block never moves. The rotation lives on the inner disc:
   the anchor carries the hero-rise entrance, whose fill-mode would
   otherwise pin the anchor's transform at none and undo a static tilt. */
.hero-badge {
  position: absolute;
  top: 30px;
  right: 38px;
  border-radius: 50%;
  color: var(--bg);
  text-decoration: none;
}
/* The global a:hover colour would paint the stamp text dark red on the
   red disc; the stamp keeps its cream type in every state. */
.hero-badge:hover { color: var(--bg); }
.hero-badge:focus-visible {
  outline-color: var(--bg);
  border-radius: 50%;
}
.hero-badge-disc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--red);
  transform: rotate(-8deg);
  box-shadow: 0 10px 28px rgba(20, 14, 10, .28);
  transition: background .2s ease, transform .25s ease;
  text-align: center;
}
.hero-badge-disc::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(247, 243, 234, .55);
  border-radius: 50%;
}
.hero-badge:hover .hero-badge-disc,
.hero-badge:focus-visible .hero-badge-disc {
  background: var(--red-hover);
  transform: rotate(-2deg) scale(1.04);
}
.hero-badge-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.hero-badge-logo {
  display: block;
  width: 84px;
  height: auto;
  margin-top: 1px;
}
.hero-badge-place {
  font-size: 9px;
  letter-spacing: .3em;
  text-indent: .3em; /* re-centres: letter-spacing trails the last glyph */
  text-transform: uppercase;
  opacity: .85;
}

/* The lead copy that used to sit inside the hero, now on cream below the
   film so the type over the footage stays minimal. Deliberately still. */
.intro {
  padding: 64px 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-70);
  margin: 0;
  max-width: min(52ch, 100%);
}
.intro-lead + .intro-lead { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Offerings
   -------------------------------------------------------------------------- */
.offerings {
  padding: 88px 64px;
  text-align: center;
}
.offerings-intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-70);
  max-width: 54ch;
  margin: -24px auto 44px;
}
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
  max-width: var(--max-w);
  margin-inline: auto;
}
.card {
  background: var(--card);
  border: 1px solid var(--hair);
  padding: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 50% 40%;
}
.card-body {
  padding: 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}
.card-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-70);
  margin: 0;
}
.card-link {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  align-self: flex-start;
}
.card-link:hover { color: var(--red-hover); }
/* Status label in the card-link slot for a class that cannot be booked yet.
   Same size and case as the links beside it, but muted and inert: it states,
   it does not invite. */
.card-note {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-70);
  margin: 0;
  align-self: flex-start;
}

/* Quiet section-level cross-links from the homepage to the detail pages.
   Same register as .card-link, standing alone under a section's content. */
.section-more {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.section-more:hover,
.section-more:focus-visible { color: var(--red-hover); }
.section-more:hover .arrow,
.section-more:focus-visible .arrow { transform: translateX(4px); }
.offerings-more { margin: 44px 0 0; }
.events-more { text-align: center; margin: 44px 0 0; }
.about-body .section-more { align-self: flex-start; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about {
  padding: 72px 64px;
  background: var(--band);
}
.about-inner {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--max-w);
  margin-inline: auto;
}
.about-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 240px 240px 0 0;
}
.about-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: min(52ch, 100%);
}
.script { font-size: 30px; }
.about .script { font-size: 32px; }
.about-title {
  margin: 0;
  line-height: 1.15;
}
.about-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-75);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Events
   -------------------------------------------------------------------------- */
.events { padding: 88px 64px; }
.events-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--max-w);
  margin: 0 auto 44px;
}
.events-head .section-title { margin: 0; }
.events-head .script { font-size: 28px; }

.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: var(--max-w);
  margin-inline: auto;
}
.event {
  position: relative;
  height: 340px;
  overflow: hidden;
}
.event-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-overlay {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(42, 35, 32, .75));
  padding: 80px 28px 24px;
  color: var(--bg);
}
.event-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0;
}
.event-text {
  font-size: 14px;
  margin: 6px 0 0;
  opacity: .9;
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */
.testimonial {
  padding: 88px 64px;
  text-align: center;
  background: var(--red);
  color: var(--bg);
}
.script--light { color: var(--bg); opacity: .85; }
.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.4;
  max-width: min(26em, 100%);
  margin: 18px auto;
  font-weight: 400;
}
.testimonial-cite {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .8;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery {
  padding: 88px 64px;
  text-align: center;
}
.gallery-handle {
  display: inline-block;
  text-decoration: none;
}
.gallery-title {
  font-size: 36px;
  margin: 8px 0 40px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: var(--max-w);
  margin-inline: auto;
}
.gallery-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.gallery-follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  color: var(--red);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
}
.gallery-follow:hover { color: var(--red-hover); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
  padding: 0 64px 88px;
  max-width: 820px;
  margin: 0 auto;
}
.faq-title {
  font-size: 36px;
  margin: 0 0 28px;
  text-align: center;
}
.faq-item {
  border-top: 1px solid var(--hair-strong);
  padding: 18px 4px;
}
.faq-item--last { border-bottom: 1px solid var(--hair-strong); }
.faq-q {
  font-size: 17px;
  cursor: pointer;
  font-weight: 500;
}
/* The questions are h3s for document outline / SEO, but must render as plain
   summary text inside the disclosure row. */
.faq-q .faq-h {
  display: inline;
  font: inherit;
  margin: 0;
}
.faq-a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-70);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: 72px 64px;
  background: var(--text);
  color: var(--bg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.footer-script {
  font-size: 34px;
  color: var(--footer-script);
}
.footer-title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 400;
  margin: 0;
}
.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bg);
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;
  opacity: .75;
}
.footer-ig:hover { color: var(--bg); opacity: 1; }
.footer-loc {
  font-size: 13px;
  opacity: .6;
}

/* ==========================================================================
   Classes page (/classes)
   ========================================================================== */

/* Current page in the nav, reusing the underline the hover state already draws. */
.nav-links a.is-current { color: var(--red); }

.classes-intro {
  padding: 60px 64px 0;
  text-align: center;
}
.script--classes { font-size: 36px; }
.classes-title {
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: 1.05;
  font-weight: 400;
  margin: 6px 0 40px;
  text-wrap: balance;
}

/* Shared class-block typography ------------------------------------------ */
.class-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.class-num {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--red);
}
.class-tag {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-55);
}
.class-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
.class-script {
  font-size: 34px;
  margin-top: -10px;
}
.class-script--inline { font-size: 30px; }
.class-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-78);
  margin: 0;
}
.class-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-55);
  margin: 0;
}

/* Where / When / Level / Bring ------------------------------------------- */
.class-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
}
/* The feature block has a narrow column, so its specs run in one stack and
   only need the closing rule. */
.class-specs--stacked {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 0 22px;
  border-top: 0;
}
.spec-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-55);
  margin-bottom: 4px;
}
.spec-value {
  font-size: 15.5px;
  margin: 0;
}

/* 01 Beach Pilates: the feature ------------------------------------------ */
.feature {
  display: grid;
  grid-template-columns: 1fr 420px 1fr;
  gap: 44px;
  align-items: end;
  padding: 0 64px 64px;
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 28px;
  text-align: right;
}
/* Reversed so the number sits outermost against the arch while the DOM keeps
   the same number-then-label order as the pair blocks below. */
.feature-copy .class-eyebrow {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.feature-copy .class-script { align-self: flex-end; }

.feature-figure { display: block; }
.feature-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: 210px 210px 0 0;
}

.feature-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 28px;
}

/* 02 and 03 sharing a row ------------------------------------------------ */
/* The band runs edge to edge and only the content inside it is constrained,
   the same split the homepage's About section uses. */
.pair {
  padding: 72px 64px;
  background: var(--band);
}
.pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  max-width: var(--max-w);
  margin-inline: auto;
}
.pair-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* Blockified so the reveal can transform it: transforms do not apply to
   non-replaced inline elements, and <picture> is inline by default. */
.pair-item > picture { display: block; width: 100%; }
.pair-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.pair-item .class-eyebrow { margin-top: 4px; }
.class-title--pair { font-size: 34px; }
.pair-item .class-text { font-size: 15.5px; }
.pair-item .spec-value { font-size: 15px; }
.pair-item .class-specs { width: 100%; }

/* What to expect --------------------------------------------------------- */
.expect {
  padding: 72px 64px;
  text-align: center;
  background: var(--card);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.expect-title {
  font-size: 36px;
  margin: 8px 0 44px;
}
.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
  counter-reset: none;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.step-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--red);
  margin: 0;
}
.step-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-70);
  margin: 0;
}

/* The class FAQ stands between two bands, so unlike the homepage's it needs
   its own top padding. */
.faq--standalone { padding-top: 72px; }

/* ==========================================================================
   About page (/about)
   --------------------------------------------------------------------------
   Prefixed `bio-` rather than `about-` on purpose: `.about`, `.about-inner`,
   `.about-img` and `.about-body` already belong to the homepage's About
   section, and `.about-img` in particular is driven by the motion layer's
   clip-path reveal. Reusing those names here would hide this page's portrait.
   ========================================================================== */
.bio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 72px;
  align-items: end;
  padding: 72px 64px 0;
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.bio-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 64px;
}
.script--bio { font-size: 44px; }
.bio-h1 {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.06;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.bio-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-78);
  margin: 0;
  max-width: 50ch;
}

/* A grid, not a flex row: the labels are long enough that a flex row breaks
   the third credential onto its own line. Fixed thirds let each label wrap
   inside its own column instead, which is how the design reads. */
.creds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  margin: 8px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--hair-strong);
}
.cred-title {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--red);
}
.cred-note {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-55);
  margin: 4px 0 0;
}

.bio-portrait { display: block; }
.bio-portrait-img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 240px 240px 0 0;
}

/* My story ---------------------------------------------------------------- */
.story {
  padding: 80px 64px;
  background: var(--band);
}
.story-inner {
  max-width: 1060px;
  margin: 0 auto;
}
.story-title { font-size: 40px; margin: 8px 0 36px; }
.story-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.story-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.story-text {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-80);
  margin: 0;
}

/* Full-bleed photo band -------------------------------------------------- */
.photo-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}
.photo-band > picture { display: block; }
.band-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* How I teach ------------------------------------------------------------ */
.teach {
  padding: 80px 64px;
  text-align: center;
}
.teach-title { font-size: 38px; margin: 8px 0 48px; }
.teach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}
.value {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.value-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}
.value-text {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-75);
  margin: 0;
}

/* Pull quote ------------------------------------------------------------- */
.pull-quote {
  padding: 76px 64px;
  text-align: center;
  background: var(--card);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.pull-block { margin: 0; }
.pull-mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 74px;
  line-height: 0;
  color: var(--red);
  margin-bottom: 26px;
}
.pull-text {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.45;
  font-weight: 400;
  max-width: 26em;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ==========================================================================
   Journal page (/journal)
   --------------------------------------------------------------------------
   Prefixed `jr-` for the same reason `bio-` exists: `.card`, `.feature` and
   `.featured` are already spoken for by the homepage and classes page.
   ========================================================================== */
.jr-intro {
  padding: 64px 64px 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.script--journal { font-size: 40px; }
.jr-title {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 400;
  margin: 8px 0 0;
  text-wrap: balance;
}
.jr-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-70);
  margin: 18px 0 0;
  max-width: min(54ch, 100%);
}

/* Featured post ---------------------------------------------------------- */
.jr-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 56px;
  align-items: center;
  padding: 20px 64px 76px;
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.jr-featured-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.jr-eyebrow {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 0;
}
.jr-featured-title {
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.jr-featured-script { font-size: 38px; }
.jr-featured-text {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-78);
  margin: 0;
  max-width: 52ch;
}
.jr-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-55);
}
.jr-readlink {
  margin: 4px 0 0;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
}

.jr-featured-figure { display: block; }
.jr-featured-img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}

/* Latest posts ----------------------------------------------------------- */
.jr-posts {
  padding: 72px 64px;
  background: var(--band);
}
.jr-posts-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}
.jr-posts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 36px;
}
.jr-posts-title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  margin: 0;
}

.jr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.jr-filters[hidden] { display: none; }
.jr-filter {
  background: none;
  border: 0;
  padding: 0 0 3px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-55);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease-out-quart), border-color .18s var(--ease-out-quart);
}
.jr-filter:hover { color: var(--red); }
.jr-filter.is-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.jr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.jr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hair);
  top: 0;
  transition: box-shadow .3s var(--ease-out-quart), top .3s var(--ease-out-quart);
}
.jr-card[hidden] { display: none; }
.jr-card > picture { display: block; }
.jr-card-img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.jr-card-img--portrait { object-position: 50% 25%; }
.jr-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 28px;
  flex: 1;
}
.jr-cat {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 0;
}
.jr-card-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
/* Headline links read as headlines, not as body links. */
.jr-card-title a,
.jr-featured-link {
  color: inherit;
  text-decoration: none;
}
.jr-card-title a:hover,
.jr-featured-link:hover { color: var(--red); }
.jr-readlink a {
  color: inherit;
  text-decoration: none;
}
.jr-readlink a:hover { color: var(--red-hover); }
/* The whole card is one click target: the title link stretches over the card,
   so the "Read the post" line is plain text, not a second link. Rows can be
   uneven heights, so the line pins to the card's bottom edge. */
.jr-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.jr-card-read { margin-top: auto; }
.jr-card:hover,
.jr-card:focus-within { box-shadow: 0 14px 28px -18px rgba(42, 35, 32, .45); }
.jr-card:focus-within .jr-card-title a { color: var(--red); }
.jr-card:hover .arrow,
.jr-card:focus-within .arrow { transform: translateX(4px); }
/* The hover lift rides `top` (the card is already position:relative for the
   stretched link): GSAP's reveal leaves inline `transform` AND `translate:
   none` on the card, so neither property can lift from the stylesheet.
   Reduced-motion users get the shadow and colour change only. */
@media (prefers-reduced-motion: no-preference) {
  .jr-card:hover,
  .jr-card:focus-within { top: -3px; }
}
.jr-excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-70);
  margin: 0;
}
.jr-time {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-55);
  margin: 4px 0 0;
}

.jr-empty {
  margin: 32px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-70);
}
.jr-empty[hidden] { display: none; }

.jr-more-wrap {
  text-align: center;
  margin-top: 44px;
}
.jr-more {
  font-family: var(--font-body);
  background: none;
  border: 1px solid var(--hair-strong);
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s var(--ease-out-quart), color .18s var(--ease-out-quart);
}
.jr-more:hover:not([disabled]) { border-color: var(--red); color: var(--red); }
/* Honestly inert while there is nothing more to load. */
.jr-more[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* ==========================================================================
   Journal post page (/journal/<slug>)
   Prefixed `po-` alongside the listing's `jr-`.
   ========================================================================== */
.po-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 56px;
  align-items: center;
  padding: 56px 64px 60px;
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.po-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.po-back {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-55);
  text-decoration: none;
  margin: 0;
}
.po-back:hover { color: var(--red); }
.po-title {
  font-family: var(--font-serif);
  font-size: 54px;
  line-height: 1.06;
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}
.po-title-script { font-size: 42px; }
.po-standfirst {
  font-size: 18.5px;
  line-height: 1.65;
  color: var(--text-70);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}
.po-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 4px 0 0;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-55);
}
.po-hero-figure { display: block; }
.po-hero-img {
  width: 100%;
  height: 470px;
  object-fit: cover;
}

/* Rail + body ------------------------------------------------------------ */
.po-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  padding: 0 64px 72px;
  border-top: 1px solid var(--hair-strong);
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.po-rail {
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}
.po-author {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  object-position: 50% 20%;
}
.po-author-name {
  font-family: var(--font-serif);
  font-size: 20px;
}
.po-author-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-65);
  margin: 0;
}

.po-rail-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-45);
}
/* Added by JS; absent rather than stuck at zero when JS is unavailable. */
.po-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.po-progress[hidden] { display: none; }
.po-progress-track {
  height: 3px;
  background: var(--hair-strong);
}
.po-progress-bar {
  height: 3px;
  width: 0;
  background: var(--red);
  transform-origin: left center;
}

.po-share {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-share-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.po-share-btn {
  font-family: var(--font-body);
  background: none;
  border: 1px solid var(--hair-strong);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s var(--ease-out-quart), color .18s var(--ease-out-quart);
}
.po-share-btn:hover { border-color: var(--red); color: var(--red); }
.po-share-btn[hidden] { display: none; }

/* Prose ------------------------------------------------------------------ */
.po-article {
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 66ch;
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-86);
}
.po-article > p { margin: 0; }
/* The opening paragraph carries the standfirst's weight into the body. */
.po-article > p.po-opening {
  font-size: 20px;
  line-height: 1.75;
}
.po-article h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  margin: 14px 0 -8px;
}
.po-article h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  margin: 8px 0 -12px;
}
/* A step under an h3, e.g. the props guide's "How to use ..." blocks. Set in
   the body face as an eyebrow rather than a smaller serif, so it reads as a
   label belonging to the h3 above it and never competes with it. */
.po-article h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--red);
  margin: 4px 0 -14px;
}
.po-article ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.po-figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}
.po-figure img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.po-figure figcaption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-60);
  font-style: italic;
}
.po-quote {
  margin: 8px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--red);
  font-family: var(--font-serif);
  font-size: 27px;
  line-height: 1.4;
  color: var(--text);
}
.po-quote p { margin: 0; }

.po-cta {
  background: var(--band);
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.po-cta-script {
  font-size: 28px;
  line-height: 1;
}
.po-cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-80);
  margin: 0;
}
.po-cta .btn--pill {
  margin-top: 6px;
  padding: 13px 28px;
  font-size: 12.5px;
  letter-spacing: .14em;
}

/* Prev / next ------------------------------------------------------------ */
.po-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.po-nav-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 64px;
  text-decoration: none;
  color: var(--text);
  transition: background-color .2s var(--ease-out-quart);
}
.po-nav-link:hover { background: var(--card); color: var(--text); }
.po-nav-link + .po-nav-link {
  border-left: 1px solid var(--hair-strong);
  text-align: right;
  align-items: flex-end;
}
.po-nav-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-55);
}
.po-nav-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}
/* Keeps a lone Next flush right when a post has no previous. */
.po-nav-link--only-next { grid-column: 2; }

/* More from the Journal -------------------------------------------------- */
.po-more {
  padding: 64px;
  background: var(--band);
}
.po-more-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}
.po-more-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 32px;
}
.po-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.po-more-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.po-more-card > picture { display: block; }
.po-more-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.po-more-cat {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 6px 0 0;
}
.po-more-heading {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}
.po-more-card:hover .po-more-heading { color: var(--red); }

/* ==========================================================================
   Events page (/events)
   --------------------------------------------------------------------------
   Prefixed `ev-` for the same reason `bio-`, `jr-` and `po-` exist: the
   homepage's own Events section already owns `.events`, `.event`, `.event-img`
   and `.event-overlay`, and reusing any of them here would restyle the
   homepage. Ported from design variant 5a.
   ========================================================================== */
.ev-intro {
  padding: 64px 64px 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.script--events { font-size: 40px; }
.ev-title {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 400;
  margin: 8px 0 0;
  text-wrap: balance;
}
.ev-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-70);
  margin: 18px 0 0;
  max-width: min(56ch, 100%);
}

/* Featured upcoming event ------------------------------------------------- */
.ev-featured {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 20px 64px 80px;
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.ev-poster { display: block; }
.ev-poster-img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--hair-strong);
}
.ev-featured-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ev-eyebrow {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 0;
}
.ev-featured-title {
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.ev-featured-script { font-size: 38px; }
.ev-featured-text {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-78);
  margin: 0;
  max-width: 52ch;
}
.ev-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  padding: 24px 0;
  margin: 0;
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
}
.ev-spec-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-55);
  margin-bottom: 5px;
}
.ev-spec-value {
  font-size: 15.5px;
  margin: 0;
}
.ev-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.ev-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-55);
  max-width: 26ch;
  margin: 0;
}

/* Also coming up: hairline list on the band ------------------------------- */
.ev-upcoming {
  background: var(--band);
  padding: 72px 64px;
}
.ev-upcoming-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  max-width: var(--max-w);
  margin: 0 auto 30px;
}
.ev-upcoming-title { margin: 0; }
.ev-upcoming-script { font-size: 28px; }
.ev-rows {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max-w);
}
.ev-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 200px auto;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--hair-strong);
}
.ev-row:last-child { border-bottom: 1px solid var(--hair-strong); }
.ev-row-date,
.ev-row-place {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-55);
}
.ev-row-place {
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-70);
}
.ev-row-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0;
}
.ev-row-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-70);
  margin: 4px 0 0;
}

/* Past events ------------------------------------------------------------- */
.ev-past {
  padding: 80px 64px 0;
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.ev-past-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 26px;
}
.ev-past-title {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.05;
  margin: 6px 0 12px;
}
.ev-past-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-70);
  margin: 0;
  max-width: 46ch;
}
.ev-pull {
  border-left: 2px solid var(--red);
  padding: 0 0 8px 22px;
  margin: 0;
  max-width: 34ch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ev-pull-quote {
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
}
.ev-pull-cite {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-55);
  font-style: normal;
}

/* One past event: photograph with a poster overlapping its corner. */
.ev-case {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding-top: 26px;
}
.ev-case + .ev-case { padding-top: 70px; }
.ev-case--reversed { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.ev-case--reversed .ev-case-media { order: 2; }
.ev-case--reversed .ev-case-copy { order: 1; padding: 0 22px 0 0; }
.ev-case-media { position: relative; }
.ev-case-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}
.ev-case--reversed .ev-case-img { height: 480px; }
.ev-case-inset {
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 210px;
}
.ev-case--reversed .ev-case-inset {
  right: auto;
  bottom: auto;
  left: -34px;
  top: -30px;
  width: 190px;
}
.ev-case-inset-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border: 8px solid var(--card);
  box-shadow: 0 18px 40px rgba(42, 35, 32, .18);
  transform: rotate(-4deg);
}
.ev-case--reversed .ev-case-inset-img { transform: rotate(3.5deg); }
.ev-case-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 22px;
}
.ev-badge {
  align-self: flex-start;
  background: var(--red);
  color: var(--bg);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.ev-badge--quiet {
  background: var(--band);
  color: var(--red);
}
.ev-case-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.ev-case-script {
  font-size: 32px;
  line-height: 1;
  margin-top: -6px;
}
.ev-case-text {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-78);
  margin: 6px 0 0;
  max-width: 40ch;
}
.ev-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
}
.ev-tag {
  border: 1px solid rgba(42, 35, 32, .28);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ev-case-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  margin-top: 10px;
}
.ev-case-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 26px;
}
.ev-case-link:hover { color: var(--red-hover); }
.ev-case-link:hover .arrow,
.ev-case-link:focus-visible .arrow { transform: translateX(4px); }

/* Earlier events strip ---------------------------------------------------- */
.ev-earlier {
  padding: 74px 64px 80px;
  max-width: calc(var(--max-w) + 128px);
  margin-inline: auto;
}
.ev-earlier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair-strong);
}
.ev-earlier-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
}
.ev-earlier-years {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-45);
  white-space: nowrap;
}
.ev-earlier-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
}
.ev-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ev-mini-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}
.ev-mini-date {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}
.ev-mini-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.ev-mini--note {
  background: var(--band);
  padding: 26px;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
}
.ev-mini-script {
  font-size: 30px;
  line-height: 1;
}
.ev-mini-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-75);
  margin: 0;
}

/* ==========================================================================
   Not found (404.html)
   ==========================================================================
   One centred column of text. The page reuses the shared header, footer,
   .script and both button styles, so it only needs its own spacing here.
   Prefixed nf- to stay clear of the real pages' blocks. */

.nf-page {
  padding: 104px var(--pad-x) 120px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.script--notfound { font-size: 38px; }
.nf-title {
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: 1.05;
  font-weight: 400;
  margin: 6px 0 18px;
  text-wrap: balance;
}
.nf-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-78);
  margin: 0 0 36px;
}
.nf-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Responsive: tablet (~1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .offerings-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-img { height: 420px; max-width: 480px; }
  .about-body { max-width: none; }

  /* Classes page: the three-column feature stacks into copy, arch, details. */
  .feature {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 56px 56px;
  }
  .feature-copy {
    text-align: left;
    padding-bottom: 0;
    max-width: 60ch;
  }
  .feature-copy .class-eyebrow {
    flex-direction: row;
    justify-content: flex-start;
  }
  .feature-copy .class-script { align-self: flex-start; }
  .feature-figure { max-width: 480px; margin-inline: auto; }
  .feature-img { height: 440px; border-radius: 200px 200px 0 0; }
  .feature-meta { padding-bottom: 0; max-width: 480px; }
  .class-specs--stacked { grid-template-columns: 1fr 1fr; gap: 18px 28px; }

  .pair { padding: 56px; }
  .pair-grid { grid-template-columns: 1fr; gap: 56px; }
  .expect-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* About page: portrait drops below the copy and stops stretching. */
  .bio-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 56px 0;
  }
  .bio-copy { padding-bottom: 0; }
  .bio-h1 { font-size: 44px; }
  .bio-portrait { max-width: 480px; margin-inline: auto; }
  .bio-portrait-img { height: 520px; border-radius: 220px 220px 0 0; }

  .story { padding: 64px 56px; }
  .story-cols { grid-template-columns: 1fr; gap: 18px; }
  .teach { padding: 64px 56px; }
  .teach-grid { gap: 32px; }
  .pull-quote { padding: 64px 56px; }

  /* Journal: featured stacks, grid drops to two across. */
  .jr-intro { padding: 56px 56px 36px; }
  .jr-title { font-size: 46px; }
  .jr-featured {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 12px 56px 56px;
  }
  .jr-featured-title { font-size: 38px; }
  .jr-featured-script { font-size: 32px; }
  .jr-featured-img { height: 380px; }
  .jr-posts { padding: 56px; }
  .jr-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Post: hero stacks and the rail moves above the prose, losing its sticky
     behaviour since there is no column left to stick beside. */
  .po-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 44px 56px 48px;
  }
  .po-title { font-size: 42px; }
  .po-title-script { font-size: 34px; }
  .po-hero-img { height: 380px; }

  .po-body {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 56px 56px;
  }
  .po-rail {
    position: static;
    padding-top: 32px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 28px 44px;
    align-items: flex-start;
  }
  .po-share-list { flex-direction: row; flex-wrap: wrap; }
  .po-article { padding-top: 0; max-width: none; }

  .po-nav-link { padding: 24px 56px; }
  .po-more { padding: 56px; }
  .po-more-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .po-more-img { height: 160px; }

  /* Events page. The poster stacks above its details, and both past-event
     blocks become single column. The overlapping inset poster comes inboard:
     at this width its negative offsets would push past the page padding and
     open a horizontal scrollbar. */
  .ev-featured {
    grid-template-columns: 1fr;
    gap: 36px;
    justify-items: center;
    padding: 12px 56px 64px;
  }
  .ev-poster { width: 100%; max-width: 520px; }
  .ev-poster-img { height: 520px; }
  .ev-featured-copy { max-width: 640px; }

  .ev-upcoming { padding: 64px 56px; }
  .ev-row { grid-template-columns: 130px minmax(0, 1fr) auto; gap: 20px 24px; }
  .ev-row-place { display: none; }

  .ev-past { padding: 64px 56px 0; }
  .ev-past-head { flex-direction: column; align-items: flex-start; gap: 24px; }

  .ev-case,
  .ev-case--reversed { grid-template-columns: 1fr; gap: 28px; }
  .ev-case--reversed .ev-case-media { order: 0; }
  .ev-case--reversed .ev-case-copy { order: 0; padding: 0; }
  .ev-case-copy { padding-left: 0; }
  .ev-case-img,
  .ev-case--reversed .ev-case-img { height: 420px; }
  .ev-case-inset,
  .ev-case--reversed .ev-case-inset {
    right: 16px;
    bottom: -28px;
    left: auto;
    top: auto;
    width: 170px;
  }
  .ev-case + .ev-case { padding-top: 56px; }

  .ev-earlier { padding: 64px 56px 72px; }
  .ev-earlier-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* --------------------------------------------------------------------------
   Mobile nav (~768px)
   -------------------------------------------------------------------------- */
/* 900px, not 768px: the nav item "The Pilates Post" is 145px wide, and below
   about 900px the four links plus the Book now button stop fitting on one row.
   Left at 768px the label wrapped onto two and then three lines, which grew the
   header from 99px to 108px while --header-h still said 99px, so anchor targets
   landed under the sticky bar. Re-measure both numbers if the nav labels, the
   logo or this padding ever change. */
@media (max-width: 900px) {
  /* The bar wraps to two rows below this width, so it is shorter than desktop. */
  :root { --header-h: 91px; }

  .nav {
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 20px;
  }
  .nav-toggle { display: flex; order: 3; margin-left: auto; }
  .nav-book { order: 2; margin-left: auto; }

  .nav-links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    display: block;
    padding: 12px 4px;
    border-top: 1px solid var(--hair);
  }
}

/* --------------------------------------------------------------------------
   Responsive: mobile (~640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --pad-x: 22px; }

  .section-title { font-size: 28px; margin: 8px 0 32px; }

  .hero { padding: 48px 22px; }
  .script--hero { font-size: 32px; }
  .hero-title { font-size: 40px; }
  .hero-sub { font-size: 17px; }
  .hero-badge { top: 16px; right: 16px; }
  .hero-badge-disc { width: 94px; height: 94px; gap: 2px; }
  .hero-badge-disc::before { inset: 5px; }
  .hero-badge-eyebrow { font-size: 8px; }
  .hero-badge-logo { width: 60px; }
  .hero-badge-place { font-size: 7.5px; }
  .intro { padding: 48px 22px 0; }
  .intro-lead { font-size: 16px; }

  .offerings { padding: 56px 22px; }
  .offerings-intro { margin: -12px auto 36px; }

  .about { padding: 48px 22px; }
  .about .script { font-size: 28px; }
  .about-title { font-size: 26px; }
  .about-img { height: 340px; }

  .events { padding: 56px 22px; }
  .events-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 28px;
  }
  .events-head .script { font-size: 24px; }
  .events-grid { grid-template-columns: 1fr; }

  .testimonial { padding: 56px 22px; }
  .testimonial-quote { font-size: 24px; }

  .gallery { padding: 56px 22px; }
  .gallery-title { font-size: 26px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-img { height: 180px; }

  .faq { padding: 0 22px 56px; }
  .faq-title { font-size: 26px; }

  .footer { padding: 56px 22px; }
  .footer-script { font-size: 28px; }
  .footer-title { font-size: 28px; }

  /* Classes page */
  .classes-intro { padding: 44px 22px 0; }
  .script--classes { font-size: 30px; }
  .classes-title { font-size: 34px; margin: 6px 0 32px; }

  .feature { padding: 0 22px 48px; gap: 28px; }
  .feature-img { height: 340px; border-radius: 170px 170px 0 0; }
  .class-title { font-size: 30px; }
  .class-script { font-size: 28px; }

  .pair { padding: 48px 22px; }
  .pair-grid { gap: 44px; }
  .pair-img { height: 240px; }
  .class-title--pair { font-size: 26px; }
  .class-script--inline { font-size: 24px; }

  .expect { padding: 48px 22px; }
  .expect-title { font-size: 26px; margin: 8px 0 32px; }
  .expect-grid { grid-template-columns: 1fr; gap: 28px; }

  .faq--standalone { padding-top: 48px; }

  /* About page */
  .bio-hero { padding: 44px 22px 0; gap: 28px; }
  .script--bio { font-size: 32px; }
  .bio-h1 { font-size: 34px; }
  .bio-lead { font-size: 16px; }
  /* Three columns of tracked uppercase is unreadable at this width. */
  .creds { grid-template-columns: 1fr; gap: 18px; }
  .cred-title { font-size: 22px; }
  .bio-portrait-img { height: 420px; border-radius: 180px 180px 0 0; }

  .story { padding: 48px 22px; }
  .story-title { font-size: 26px; margin: 8px 0 24px; }
  .story-text { font-size: 16px; line-height: 1.75; }

  /* Three narrow slivers are unreadable at this width, so the band stacks. */
  .photo-band { grid-template-columns: 1fr; }
  .band-img { height: 240px; }

  .teach { padding: 48px 22px; }
  .teach-title { font-size: 26px; margin: 8px 0 28px; }
  .teach-grid { grid-template-columns: 1fr; gap: 28px; }

  .pull-quote { padding: 48px 22px; }
  .pull-mark { font-size: 56px; margin-bottom: 20px; }
  .pull-text { font-size: 22px; }

  /* Journal */
  .jr-intro { padding: 44px 22px 28px; }
  .script--journal { font-size: 30px; }
  .jr-title { font-size: 34px; }
  .jr-lead { font-size: 16px; }

  .jr-featured { padding: 8px 22px 48px; gap: 24px; }
  .jr-featured-title { font-size: 28px; }
  .jr-featured-script { font-size: 26px; }
  .jr-featured-text { font-size: 16px; }
  .jr-featured-img { height: 280px; }

  .jr-posts { padding: 48px 22px; }
  .jr-posts-head { margin-bottom: 28px; }
  .jr-posts-title { font-size: 26px; }
  .jr-grid { grid-template-columns: 1fr; gap: 22px; }
  .jr-card-img { height: 200px; }
  .jr-card-title { font-size: 22px; }
  .jr-more-wrap { margin-top: 32px; }

  /* Post */
  .po-hero { padding: 36px 22px 40px; gap: 24px; }
  .po-title { font-size: 30px; }
  .po-title-script { font-size: 26px; }
  .po-standfirst { font-size: 16.5px; }
  .po-hero-img { height: 260px; }

  .po-body { padding: 0 22px 48px; gap: 28px; }
  .po-rail { gap: 24px 32px; }
  .po-article { font-size: 17px; gap: 22px; }
  .po-article > p.po-opening { font-size: 18px; }
  .po-article h2 { font-size: 26px; }
  .po-figure img { height: 240px; }
  .po-quote { font-size: 21px; padding-left: 20px; }
  .po-cta { padding: 24px 22px; }

  /* Two full-width rows read better than two cramped columns here. */
  .po-nav { grid-template-columns: 1fr; }
  .po-nav-link { padding: 22px; }
  .po-nav-link + .po-nav-link {
    border-left: 0;
    border-top: 1px solid var(--hair-strong);
    text-align: left;
    align-items: flex-start;
  }
  .po-nav-link--only-next { grid-column: auto; }
  .po-nav-title { font-size: 19px; }

  .po-more { padding: 48px 22px; }
  .po-more-title { font-size: 26px; margin-bottom: 24px; }
  .po-more-grid { grid-template-columns: 1fr; gap: 24px; }
  .po-more-img { height: 200px; }

  /* Events page. The upcoming rows stop being a table and become stacked
     blocks: four columns of 24px text is unreadable on a phone. The inset
     poster is dropped entirely rather than shrunk, because at this width it
     covers the photograph it is supposed to sit beside. */
  .ev-intro { padding: 48px 22px 32px; }
  .script--events { font-size: 30px; }
  .ev-title { font-size: 40px; }
  .ev-lead { font-size: 16px; }

  .ev-featured { padding: 8px 22px 48px; gap: 28px; }
  .ev-poster-img { height: 400px; }
  .ev-featured-title { font-size: 32px; }
  .ev-featured-script { font-size: 28px; }
  .ev-featured-text { font-size: 16px; }
  .ev-specs { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
  .ev-cta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ev-note { max-width: none; }

  .ev-upcoming { padding: 48px 22px; }
  .ev-upcoming-script { font-size: 24px; }
  .ev-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
    justify-items: start;
  }
  .ev-row-title { font-size: 22px; }

  .ev-past { padding: 48px 22px 0; }
  .ev-past-title { font-size: 30px; }
  .ev-pull-quote { font-size: 25px; }
  .ev-case-img,
  .ev-case--reversed .ev-case-img { height: 300px; }
  .ev-case-inset { display: none; }
  .ev-case-title { font-size: 28px; }
  .ev-case-script { font-size: 26px; }
  .ev-case-text { font-size: 16px; max-width: none; }
  .ev-case + .ev-case { padding-top: 44px; }

  .ev-earlier { padding: 48px 22px 56px; }
  .ev-earlier-grid { gap: 10px; }
  .ev-mini-img { height: 180px; }
  .ev-mini-title { font-size: 18px; }
  .ev-mini--note { padding: 20px; }
  .ev-mini-script { font-size: 26px; }

  /* Not found */
  .nf-page { padding: 56px var(--pad-x) 72px; }
  .script--notfound { font-size: 30px; }
  .nf-title { font-size: 34px; }
  .nf-text { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Responsive: narrow mobile (~480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Two columns of label plus value gets too cramped to read below this. */
  .class-specs,
  .class-specs--stacked { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Hero entrance
   --------------------------------------------------------------------------
   CSS-driven, not GSAP-driven, and that split is deliberate. The hero is above
   the fold, so it must not wait on the deferred animation bundle. Measured on a
   throttled desktop connection, hiding the h1 behind GSAP pushed LCP from
   1100ms to 4524ms in the old text-first hero. Keyframes start at first
   paint, so nothing waits.

   Since the full-bleed film hero, the LCP element is the hero poster image,
   not the h1 (a full-viewport image always out-measures the headline). The
   poster therefore never animates at all, on any property, and the h1 still
   carries no entrance: over moving footage the type should simply be there.
   -------------------------------------------------------------------------- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Transform only for opening photographs (used by the inner pages). Each is
   its page's LCP candidate, so its pixels have to be on screen in the first
   frame; only its position moves. */
@keyframes hero-settle {
  from { transform: translateY(26px); }
  to   { transform: none; }
}

.script--hero { animation: hero-rise .8s var(--ease-out-expo) both; }
.hero-sub     { animation: hero-rise .8s var(--ease-out-expo) .08s both; }
.hero-cta     { animation: hero-rise .8s var(--ease-out-expo) .26s both; }
.hero-badge   { animation: hero-rise .8s var(--ease-out-expo) .4s both; }
/* The poster is the LCP element, so like every LCP image it never animates on
   opacity. No transform either: a full-bleed cover image sliding against its
   own crop reads as a glitch, not an entrance. It is simply there. */

/* Classes page opening. Same split for the same reason: the feature block sits
   in the first viewport, so it cannot wait on the deferred bundle. The arch is
   this page's LCP element, so like the homepage's photographs it moves on
   transform alone, and the h1 again carries no entrance. */
.script--classes { animation: hero-rise .8s var(--ease-out-expo) both; }
.feature-copy    { animation: hero-rise .9s var(--ease-out-expo) .14s both; }
.feature-img     { animation: hero-settle 1.1s var(--ease-out-expo) .06s both; }
.feature-meta    { animation: hero-rise .9s var(--ease-out-expo) .28s both; }

/* About page opening, same split and the same reason. The portrait is this
   page's LCP element, so it moves on transform alone; the h1 again carries no
   entrance of its own. */
.script--bio      { animation: hero-rise .8s var(--ease-out-expo) both; }
.bio-lead         { animation: hero-rise .85s var(--ease-out-expo) .14s both; }
.creds            { animation: hero-rise .85s var(--ease-out-expo) .24s both; }
.bio-portrait-img { animation: hero-settle 1.1s var(--ease-out-expo) .06s both; }

/* Journal opening. The featured photograph is this page's LCP element, so
   again it moves on transform only and the h1 carries no entrance. */
.script--journal   { animation: hero-rise .8s var(--ease-out-expo) both; }
.jr-lead           { animation: hero-rise .85s var(--ease-out-expo) .14s both; }
.jr-featured-copy  { animation: hero-rise .9s var(--ease-out-expo) .22s both; }
.jr-featured-img   { animation: hero-settle 1.1s var(--ease-out-expo) .08s both; }

/* Post page. Restrained on purpose: this is a reading surface, so only the
   title block arrives and the prose is simply there. The hero photograph is
   the LCP element, so transform only. */
.po-back, .po-standfirst, .po-meta { animation: hero-rise .8s var(--ease-out-expo) .1s both; }
.po-hero-img { animation: hero-settle 1.1s var(--ease-out-expo) .06s both; }

/* --------------------------------------------------------------------------
   Motion: pre-reveal states for the scroll-triggered sections
   --------------------------------------------------------------------------
   Everything below is scoped to `.js-motion`, which the inline script in
   index.html adds to <html> only when JS is running AND the visitor has not
   asked for reduced motion. Without that class every element sits in its
   final, visible state, so the page is complete with JS off, with GSAP
   blocked, or for a crawler. index.html also carries a timeout that strips
   the class if the motion layer never reports in, so content can never be
   left stranded behind an animation that failed to start.

   Only below-the-fold sections appear here. Nothing in the hero is hidden by
   JS, for the LCP reason above.
   -------------------------------------------------------------------------- */
.js-motion .offerings > .script,
.js-motion .offerings > .section-title,
.js-motion .offerings > .offerings-intro,
.js-motion .card,
.js-motion .about-body > *,
.js-motion .events-head > *,
.js-motion .event-overlay,
.js-motion .script--light,
.js-motion .testimonial-quote,
.js-motion .gallery-handle,
.js-motion .gallery-title,
.js-motion .gallery-img,
.js-motion .gallery-follow,
.js-motion .pair-item > *,
.js-motion .expect > .script,
.js-motion .expect-title,
.js-motion .step,
.js-motion .story > .story-inner > .script,
.js-motion .story-title,
.js-motion .story-text,
.js-motion .band-img,
.js-motion .teach > .script,
.js-motion .teach-title,
.js-motion .value,
.js-motion .pull-block,
.js-motion .jr-posts-head,
.js-motion .jr-card,
.js-motion .ev-upcoming-head > *,
.js-motion .ev-row,
.js-motion .ev-past-head > *,
.js-motion .ev-case-copy > *,
.js-motion .ev-earlier-head > *,
.js-motion .ev-mini { opacity: 0; }

/* The past-event photograph settles back to its natural scale rather than
   fading, matching the homepage's Events section. The inset poster is the one
   piece of choreography unique to this page: it lands after its photograph,
   because it reads as something placed on top of it. */
.js-motion .ev-case-img { transform: scale(1.06); }
.js-motion .ev-case-inset { opacity: 0; }

/* The arch rises out of the sand rather than fading in. */
.js-motion .about-img { clip-path: inset(100% 0 0 0); }

/* Word-level choreography, reserved for the testimonial: it is the one place
   where the copy IS the section, and it sits below the fold where a JS-driven
   reveal costs nothing. */
.word { display: inline-block; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}