:root {
  /* Magenta from the Trainability and Studio logos, cerulean from Coach's.
     Dark by default, the way most fitness sites are: near-black, high contrast,
     with the two brand colours glowing against it. */
  --magenta: #c44e9b;
  --cerulean: #007ba7;
  /* Brighter versions for text and thin lines on the dark background
     (#4fa8dc is Coach's "Sky"). */
  --magenta-bright: #dc77b9;
  --cerulean-bright: #4fa8dc;
  --gradient: linear-gradient(135deg, var(--magenta), var(--cerulean));
  /* Behind white text: magenta deepened to #b8448f so white reads at 4.9:1
     (4.5:1 is the accessibility target; the logo's #c44e9b gives 4.3:1).
     Hover goes deeper still rather than lighter. */
  --gradient-button: linear-gradient(135deg, #b8448f, var(--cerulean));
  --gradient-button-hover: linear-gradient(135deg, #a63d82, #006a90);
  --gradient-bright: linear-gradient(135deg, var(--magenta-bright), var(--cerulean-bright));
  --on-gradient: #ffffff;
  --glow: 0 0 24px color-mix(in srgb, var(--magenta) 45%, transparent);
  --brand: var(--cerulean-bright);
  --accent: var(--magenta-bright);
  --bg: #0a0a0f;
  --bg-alt: #111119;
  --surface: #16161f;
  --text: #f3f2f8;
  --muted: #a6a5b8;
  --border: #262634;
  --radius: 12px;
  --shadow: 0 8px 32px rgb(0 0 0 / 0.45);
  --max: 1120px;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

/* height: auto, so an image keeps its shape (or the aspect-ratio a rule gives
   it) instead of the pixel height written on it in the HTML. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
/* Headlines: bold, condensed and uppercase. */
h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1; margin: 0 0 0.5em; }
h1 { font-size: clamp(3rem, 8vw, 5.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .container { padding: 0 24px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -999px; top: 8px; }
.skip-link:focus { left: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: 8px; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75em 1.4em;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--gradient-button) border-box;
  color: var(--on-gradient);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, box-shadow 0.2s;
}
.btn:hover { background: var(--gradient-button-hover) border-box; box-shadow: var(--glow); }
/* Outline in the gradient: the surface fills the padding box, the gradient shows in the border. */
.btn-ghost { background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; color: var(--text); }
.btn-ghost:hover { background: var(--gradient-button) border-box; color: var(--on-gradient); }
.btn-small { padding: 0.5em 1.1em; font-size: 0.85rem; white-space: nowrap; }

/* Text filled with the gradient; the plain colour is the fallback. */
.gradient-text {
  color: var(--magenta-bright);
  background: var(--gradient-bright);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The drifting hexagons (assets/hexes.js, from Studio): fixed behind every page.
   Content sits above them; the heroes have a solid ground, so they cover them. */
.hexes { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .site-footer { position: relative; z-index: 1; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gradient); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
/* The TRAINABILITY® wordmark from Studio's lettering (assets/logos): in the
   footer, and large on the home page's hero; the header has just the mark. */
.footer-brand .wordmark { height: 14px; }
/* In the header only beside the ☰ menu (phones), where the menu doesn't need the room. */
.brand .wordmark { display: none; height: 16px; width: auto; }
@media (max-width: 767px) { .brand .wordmark { display: block; } }
@media (max-width: 360px) { .brand .wordmark { height: 13px; } }
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 24px); margin-bottom: clamp(18px, 2.6vh, 28px); }
.hero-mark { height: clamp(80px, 13vh, 132px); width: auto; filter: drop-shadow(0 8px 24px rgb(0 0 0 / 0.45)); }
.hero-wordmark { display: block; height: clamp(28px, 6.5vw, 88px); width: auto; max-width: 100%; object-fit: contain; }

.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a:not(.btn), .nav-group-toggle { white-space: nowrap;
  color: var(--text); text-decoration: none; font: inherit; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.site-nav a:not(.btn):hover, .nav-group-toggle:hover, .site-nav a[aria-current="page"] { color: var(--magenta-bright); }
/* The Locations, Services and Apps menus (main.js opens them: on hover, with a
   moment's grace on the way down, or pinned open by a click). They lift into
   place under their item, joined to it by a pointer, the item lit while open. */
.nav-group { position: relative; }
.nav-group-toggle::after { content: "▾"; display: inline-block; margin-left: 6px; font-size: 0.75em; opacity: 0.7; transition: transform 0.2s; }
.nav-group.open .nav-group-toggle { color: var(--magenta-bright); }
.nav-group.open .nav-group-toggle::after { transform: rotate(180deg); opacity: 1; }
.nav-menu {
  position: absolute; top: calc(100% + 16px); left: -24px; min-width: 270px; z-index: 60;
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--magenta-bright) 30%, var(--border)); border-radius: var(--radius);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.03), 0 0 40px color-mix(in srgb, var(--magenta) 18%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transform-origin: 30px 0;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* The gradient line along its top, and the pointer up to the item. */
.nav-menu::after {
  content: ""; position: absolute; top: -7px; left: 32px; width: 12px; height: 12px; rotate: 45deg;
  background: var(--surface); border-left: 1px solid color-mix(in srgb, var(--magenta-bright) 30%, var(--border)); border-top: 1px solid color-mix(in srgb, var(--magenta-bright) 30%, var(--border));
  border-top-left-radius: 3px;
}
/* An invisible bridge over the gap, so moving down to the menu keeps it open. */
.nav-menu::before { content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px; }
.nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s; }
.site-nav .nav-menu a { display: block; padding: 13px 18px; border-radius: 10px; line-height: 1.3; }
.site-nav .nav-menu a:hover, .site-nav .nav-menu a:focus-visible { background: color-mix(in srgb, var(--magenta) 16%, var(--bg-alt)); color: var(--text); }
.site-nav .nav-menu a[aria-current="page"] { color: var(--magenta-bright); }
@media (prefers-reduced-motion: reduce) { .nav-menu, .nav-group.open .nav-menu { transition: none; transform: none; } }

/* Tablets and small laptops: the whole menu still fits on one line, smaller
   and closer together.
   Below 768px it folds into the ☰ menu. */
@media (min-width: 768px) and (max-width: 1240px) {
  .header-inner { gap: 20px; }
  .site-nav { gap: 16px; }
  .site-nav a:not(.btn), .nav-group-toggle { font-size: 0.8rem; letter-spacing: 0.04em; }
  .site-nav .btn-small { padding: 0.5em 0.95em; font-size: 0.78rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container.header-inner { padding: 0 16px; }
  .header-inner { gap: 14px; }
  .site-nav { gap: 13px; }
  .site-nav a:not(.btn), .nav-group-toggle { font-size: 0.74rem; letter-spacing: 0.02em; }
  .nav-group-toggle::after { margin-left: 3px; }
  .site-nav a.nav-login { gap: 4px; }
  .nav-login svg { width: 15px; height: 15px; }
  .site-nav .btn-small { padding: 0.5em 0.8em; font-size: 0.72rem; }
}

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle .bar { display: block; width: 22px; height: 2px; margin: 5px 0; background: var(--text); transition: transform 0.2s, opacity 0.2s; }

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 20px; max-height: calc(100vh - 64px); overflow-y: auto;
    background: var(--bg); border-bottom: 1px solid var(--border);
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav > a:not(.btn), .nav-group-toggle { display: block; width: 100%; text-align: left; padding: 14px 0; }
  .nav-group-toggle::after { display: none; }
  .nav-group-toggle { color: var(--muted); font-size: 0.8rem; padding-bottom: 4px; cursor: default; }
  .nav-menu, .nav-group .nav-menu { position: static; display: flex; min-width: 0; padding: 0 0 8px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-menu::before, .nav-menu::after { display: none; }
  .nav-group.open .nav-group-toggle { color: var(--muted); }
  .site-nav .nav-menu a { padding: 10px 0 10px 12px; }
  .site-nav .btn { margin-top: 12px; text-align: center; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }
}

/* Home hero: the video behind the slogan, darkened so the words stay readable. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* One screen tall under the header, the logo, name, slogan and buttons
     centred in it, so the picture is the size of what it holds. */
  min-height: calc(100vh - 64px); min-height: calc(100svh - 64px);
  display: grid; align-items: center;
  padding: clamp(56px, 9vh, 96px) 0;
}
/* Heroes fade into the page over their last stretch, so there's no hard line
   where the hexagons begin. Only the backgrounds fade: the words stay solid. */
:root { --hero-fade: linear-gradient(to bottom, #000 0%, #000 calc(100% - 200px), transparent 100%); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-media, .hero::before, .page-hero::before { -webkit-mask-image: var(--hero-fade); mask-image: var(--hero-fade); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 70%, transparent) 100%),
    radial-gradient(ellipse at top right, color-mix(in srgb, var(--cerulean) 35%, transparent), transparent 60%),
    radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--magenta) 35%, transparent), transparent 55%);
}
/* Its own layer above the video: Safari can paint a playing, masked video
   over the words that should sit on top of it. */
.hero-content { position: relative; z-index: 1; max-width: 64rem; margin-left: auto; margin-right: auto; text-align: center; }
.hero-content .lead { margin-left: auto; margin-right: auto; }
.hero-content .hero-actions { justify-content: center; }
/* The slogan, under the name: smaller than the wordmark, so the name leads. */
.hero h1 { font-size: clamp(2rem, 6vw, 4.5rem); margin: clamp(28px, 5vh, 56px) 0 0; }
/* The intro and buttons, just below the home hero, so the first screen is
   only the name and the slogan. */
.section.hero-intro { padding-top: clamp(4px, 1.5vh, 16px); padding-bottom: 0; }
.hero-intro .center { margin-top: 0; }
.hero-intro .lead { margin-left: auto; margin-right: auto; }
/* A bouncing chevron at the foot of the home hero: there's more below.
   main.js fades it out once the visitor starts scrolling. */
.scroll-cue {
  position: absolute; z-index: 1; left: 50%; bottom: clamp(16px, 4vh, 36px); translate: -50% 0;
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--text); opacity: 0.85; border-radius: 50%;
  animation: cue-bounce 1.8s ease-in-out infinite;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.scroll-cue:hover { opacity: 1; }
.scroll-cue.gone { opacity: 0; visibility: hidden; }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; font-weight: 700; }
.lead { font-size: 1.2rem; color: var(--muted); }
.hero .lead, .page-hero .lead { color: var(--text); opacity: 0.88; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Inner pages: a photo behind the title, darkened. */
.page-hero {
  position: relative; isolation: isolate;
  padding: clamp(88px, 12vw, 150px) 0 clamp(48px, 7vw, 80px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 55%, color-mix(in srgb, var(--bg) 75%, transparent) 100%),
    var(--hero-image, none) center / cover no-repeat,
    radial-gradient(ellipse at top right, color-mix(in srgb, var(--cerulean) 35%, transparent), transparent 60%),
    radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--magenta) 30%, transparent), transparent 55%),
    var(--bg);
}
.page-hero-short { padding-top: clamp(64px, 9vw, 110px); }
.page-hero h1 { font-size: clamp(3rem, 8vw, 5.75rem); }

/* Sections */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-alt { background: color-mix(in srgb, var(--bg-alt) 72%, transparent); }
.section-head { margin-bottom: 40px; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.center { text-align: center; margin-top: 40px; }
.center .lead { margin: 0 auto 20px; }
.center .hero-actions { justify-content: center; }
.footnote { color: var(--muted); font-size: 0.9rem; margin-top: 20px; }

/* Comfortable line length, left-aligned with the other sections (not a narrow centred column). */
.prose h2 { margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.2em; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.prose .btn { margin-top: 12px; }
.legal h2 { font-size: 1.6rem; }

.link-arrow { display: inline-block; margin-top: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--cerulean-bright); text-decoration: none; }
.link-arrow::after { content: " →"; transition: margin 0.2s; }
a:hover .link-arrow::after, .link-arrow:hover::after { margin-left: 4px; }

/* Cards */
.card, .service, .fact, .price, .reason, .steps li, .person {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: border-color 0.2s, transform 0.2s;
}
a.service, a.location-card { color: inherit; text-decoration: none; }
a.service:hover, a.location-card:hover { border-color: color-mix(in srgb, var(--magenta-bright) 50%, var(--border)); transform: translateY(-2px); }
.service, .fact, .price, .reason { padding: 28px; }
.service p, .fact p, .price p, .reason p { color: var(--muted); }
.service p { overflow-wrap: anywhere; }   /* a long email address wraps inside its card */
.services { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.contact-options { display: grid; gap: 20px; }
/* Send us a message: the words above, the form below at the full width. */
.message-stack > div:first-child { margin-bottom: 28px; }
.message-stack > div:first-child p { margin-bottom: 0; }
/* Four cards: one column on phones, two by two, then all four in a row. */
@media (min-width: 600px) { .contact-options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .contact-options { grid-template-columns: repeat(4, 1fr); } }

.locations { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.location-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color 0.2s, transform 0.2s; }
.location-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
/* Pick your gym: each card fades through a few photos of its gym (main.js
   moves .on along), every photo slowly zooming and drifting. With reduced
   motion it's the first photo, still. */
.location-shots { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.location-shots img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.location-shots img.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .location-shots img { animation: shot-drift 16s ease-in-out infinite alternate; }
  .location-shots img:nth-child(2) { transform-origin: 20% 30%; animation-delay: -4s; }
  .location-shots img:nth-child(3) { transform-origin: 80% 70%; animation-delay: -8s; }
  .location-shots img:nth-child(4) { transform-origin: 30% 80%; animation-delay: -12s; }
  .location-shots img:nth-child(1) { transform-origin: 70% 40%; }
}
@keyframes shot-drift { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.location-body { padding: 24px 28px 28px; }
.location-body p { color: var(--muted); }
.location-tag { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; }
.location-card .location-tag { color: var(--magenta-bright); }

.facts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fact h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0.3em; }
.fact p { margin-bottom: 0; }
/* The location pages' three boxes: a magenta-to-cerulean edge and glow. */
.facts .fact {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box;
  border-width: 2px;
  box-shadow: -12px 10px 40px color-mix(in srgb, var(--magenta) 45%, transparent), 12px 10px 40px color-mix(in srgb, var(--cerulean) 45%, transparent);
  transition: box-shadow 0.25s, transform 0.25s;
}
.facts .fact:hover {
  transform: translateY(-2px);
  box-shadow: -14px 12px 52px color-mix(in srgb, var(--magenta) 60%, transparent), 14px 12px 52px color-mix(in srgb, var(--cerulean) 60%, transparent);
}

.prices { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.price-name { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; font-weight: 700; color: var(--text) !important; }
.price-amount { font-family: var(--display); font-weight: 800; font-size: 3.25rem; line-height: 1; margin: 4px 0 12px; }
.price-amount span { font-size: 1.2rem; }
.price-featured, .card-featured { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; }
.price:target { border-color: var(--magenta-bright); box-shadow: var(--glow); }

.reasons { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.reason h3 { font-size: 1.4rem; }
.reason-why { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 0; font-size: 0.95rem; }
.reason-why strong { color: var(--magenta-bright); }

.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 24px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

.two-col { display: grid; gap: 40px; }
@media (min-width: 800px) { .two-col { grid-template-columns: 1fr 1fr; } }
address { font-style: normal; }

.belong-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .belong-inner { grid-template-columns: 1.1fr 1fr; } }
.belong-inner img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.belong p:not(.lead):not(.eyebrow) { color: var(--muted); }
/* Glenn's welcome, beside "Not a big-box gym": his photo, a short note, his
   signature and the way into Our story. */
.welcome {
  margin: 0; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius);
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box;
  box-shadow: var(--shadow), var(--glow);
}
.welcome-top { display: flex; align-items: center; gap: 18px; }
.belong-inner .welcome-top img {
  flex: none; width: 96px; height: 96px; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  border: 3px solid transparent; background: var(--gradient) border-box;
}
.welcome-top .eyebrow { margin: 0; }
.welcome blockquote { margin: 20px 0 0; }
.belong .welcome blockquote p { color: color-mix(in srgb, var(--text) 88%, var(--muted)); font-size: 1.08rem; line-height: 1.7; }
.welcome blockquote p:first-child { margin-top: 0; }
.welcome figcaption { margin-top: 12px; display: flex; flex-direction: column; }
.welcome-signature {
  display: block; width: 190px; aspect-ratio: 480 / 210; margin: 4px 0 6px -6px;
  background: var(--gradient-bright);
  -webkit-mask: url("assets/photos/glenn-signature.png") center / contain no-repeat;
  mask: url("assets/photos/glenn-signature.png") center / contain no-repeat;
}
.welcome-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; margin-top: 2px; }
.welcome .link-arrow { margin-top: 16px; }

.visit { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1fr; } }
.hours { margin: 0; display: grid; gap: 16px; }
.hours div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.hours dt { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; }
.hours dd { margin: 4px 0 0; color: var(--muted); }

.checks, .crosses { list-style: none; padding: 0; margin: 0 0 1em; }
.checks li, .crosses li { padding-left: 28px; position: relative; margin: 10px 0; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--magenta-bright); font-weight: 700; }
.crosses li::before { content: "✕"; position: absolute; left: 0; color: var(--muted); font-weight: 700; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { counter-increment: step; padding: 28px; }
.steps li::before {
  content: counter(step);
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 14px;
  font-family: var(--display); font-size: 1.4rem;
  border-radius: 50%; background: var(--gradient-button); color: var(--on-gradient); font-weight: 700;
}
.steps p { color: var(--muted); margin: 0; }

/* A partner beside their text (Fuad on the nutrition page). */
.partner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 800px) { .partner { grid-template-columns: minmax(240px, 340px) 1fr; } }
.partner-photo { margin: 0; }
.partner-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--radius); border: 2px solid transparent; background: var(--gradient) border-box; }
.partner-photo figcaption { margin-top: 12px; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; line-height: 1.2; }
.partner-photo figcaption span { color: var(--magenta-bright); font-size: 0.95rem; letter-spacing: 0.08em; }

/* Team: from Studio (scripts/fetch-team.mjs). */
.team-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.team-filter[hidden], .person[hidden], .section[hidden], .team-empty[hidden], .hero-actions a[hidden] { display: none; }
.team-filter button {
  font: inherit; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.6em 1.2em; border-radius: 999px; cursor: pointer; color: var(--text);
  border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box;
}
.team-filter button[aria-pressed="true"] { background: var(--gradient-button) border-box; color: var(--on-gradient); }
.team-empty { color: var(--muted); padding-bottom: 48px; }
.team { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.person { overflow: hidden; display: flex; flex-direction: column; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 25%; }
/* No photo in Studio: their initials in a circle, not a big empty square. */
.person-initials { display: grid; place-items: center; width: 112px; height: 112px; margin: 28px 28px 0; border-radius: 50%; background: var(--gradient-button); color: var(--on-gradient); font-family: var(--display); font-size: 2.6rem; font-weight: 800; letter-spacing: 0.02em; }
.person-body { padding: 20px 24px 24px; }
.person-body h3 { margin-bottom: 0.2em; }
.person-title { color: var(--magenta-bright); font-weight: 600; margin-bottom: 0.2em; }
.person-where { color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; }
.person-body p:last-child, .person-body p:nth-last-child(2) { color: var(--muted); font-size: 0.95rem; }
.person-body p:last-child { margin-bottom: 0; }

/* Studio's PT inquiry form, embedded (docs/FORMS-API.md in Studio). */
/* Personal training: the words above, the form below at the full width. */
.pt-start { display: grid; gap: 28px; }
.embed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.embed iframe { display: block; width: 100%; border: 0; min-height: 600px; background: #fff; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 48px 0 24px; color: var(--muted); font-size: 0.95rem; background: color-mix(in srgb, var(--bg-alt) 80%, transparent); }
/* Two rows of three: the slogan and the two places, then the three groups of
   links, with a thin line between. One column on phones. */
.footer-grid { display: grid; gap: 32px 28px; }
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-links { padding-top: 28px; border-top: 1px solid var(--border); }
  /* Mission and Potrero Hill start on the slogan's line, under the logo: the
     logo (28px) and the slogan's top margin (14px), plus the difference in
     size so the two lines share a baseline. */
  .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) { padding-top: 50px; }
}
.footer-grid p, .footer-grid address { margin: 0 0 8px; }
/* Not bold: the same condensed face at medium weight, so the titles sit
   quietly over their links. */
.footer-heading { font-size: 1.15rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text); margin-bottom: 10px; }
.footer-slogan { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1; text-transform: uppercase; margin: 14px 0 12px !important; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links .footer-heading { margin-bottom: 4px; }
.footer-legal a { margin: 0 10px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--magenta-bright); }
.footer-legal { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 20px; font-size: 0.85rem; }
.footer-legal p { margin: 0; }
.site-version { margin-left: 8px; white-space: nowrap; font-size: 0.8rem; opacity: 0.7; }

/* Dialogs (layout.html): the free day pass and member login. */
.panel {
  width: min(520px, calc(100vw - 32px)); padding: 32px 28px 28px; margin: auto;
  color: var(--text); background: var(--surface); border: 2px solid transparent; border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box;
  box-shadow: var(--shadow), var(--glow);
}
.panel::backdrop { background: rgb(5 5 10 / 0.72); backdrop-filter: blur(4px); }
.panel h2 { font-size: clamp(2rem, 6vw, 2.6rem); }
.panel p { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.panel-close { position: absolute; top: 10px; right: 12px; }
.panel-close button { background: none; border: 0; color: var(--muted); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.panel-close button:hover { color: var(--text); }

/* Forms inside a dialog: the cancel membership request. */
.panel-form { margin-top: 20px; }
.panel-form label { display: block; font-weight: 600; margin: 14px 0 6px; }
.panel-form input:not([type="checkbox"]) {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
}
.panel-form input:focus { outline: 2px solid var(--cerulean-bright); outline-offset: 1px; border-color: transparent; }
.panel-form input[aria-invalid="true"] { border-color: var(--magenta-bright); }
.panel-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.panel-form .panel-check { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 14px 0 0; cursor: pointer; }
.panel-check input { width: 20px; height: 20px; accent-color: var(--magenta); }
.panel-form textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text); resize: vertical;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
}
.panel-form textarea:focus { outline: 2px solid var(--cerulean-bright); outline-offset: 1px; border-color: transparent; }
.panel-choices { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 12px; }
.panel-choices legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.panel-form .panel-choices .panel-check { margin: 6px 0 0; font-weight: 400; }
.panel-optional { font-weight: 400; color: var(--muted); }
.panel .panel-count { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); text-align: right; }
/* Reasons to pick from, as pills: one at a time. */
.panel-choices.panel-pills { display: block; }
.panel-pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-form .panel-pill {
  display: inline-flex; align-items: center; margin: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-weight: 500; font-size: 0.92rem; background: var(--bg-alt); border: 1px solid var(--border);
}
.panel-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.panel-pill:has(input:checked) { border-color: transparent; background: var(--gradient-button) border-box; color: #fff; }
.panel-pill:has(input:focus-visible) { outline: 2px solid var(--cerulean-bright); outline-offset: 2px; }
.cancel-other { margin-top: 4px; }
.panel .panel-problem-field { margin-top: 4px; }
.book-stretch [data-done] .hero-actions, .book-stretch [data-done] a { justify-content: center; }
.book-stretch [data-done] a { color: var(--magenta-bright); }
.panel-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.panel .panel-problem { color: var(--magenta-bright); font-size: 0.9rem; margin: 12px 0 0; }
.panel-form .btn { width: 100%; margin-top: 18px; }
.cancel-policy { margin-top: 18px; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--border); border-left: 3px solid var(--magenta); border-radius: 8px; }
.panel .cancel-policy p { margin: 0; font-size: 0.95rem; }
.panel .cancel-policy p + p { margin-top: 8px; }
.cancel-done .hero-actions { justify-content: center; }
.cancel-done a { color: var(--magenta-bright); }

/* The free day pass dialog, opened by [data-day-pass] buttons. */
.day-pass-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0 12px; }
.day-pass-hours div { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.day-pass-hours dt { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; }
.day-pass-hours dd { margin: 2px 0 0; color: var(--muted); white-space: nowrap; }
.day-pass address a { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--muted); text-decoration: none; }
.day-pass address a span { text-decoration: underline; text-underline-offset: 3px; }
.day-pass address .pin { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: var(--magenta-bright); }
.day-pass address a:hover { color: var(--text); }
.day-pass-map { display: block; width: 100%; height: 200px; margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); }
.day-pass .hero-actions { margin-top: 20px; justify-content: center; }
.day-pass .hero-actions form { margin: 0; }

/* The member login dialog, opened by [data-member-login] links. */
.member-login-form { margin-top: 20px; }
.member-login-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.member-login-form input {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
}
.member-login-form input:focus { outline: 2px solid var(--cerulean-bright); outline-offset: 1px; border-color: transparent; }
.member-login-form input[aria-invalid="true"] { border-color: var(--magenta-bright); }
.panel .member-login-problem { color: var(--magenta-bright); font-size: 0.9rem; margin: 8px 0 0; }
.member-login-send { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.member-login-send .btn { flex: 1 1 180px; }
.panel .member-login-note { font-size: 0.9rem; color: var(--muted); margin: 14px 0 0; }
.panel .member-login-join { font-size: 0.9rem; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.member-login-join a { color: var(--magenta-bright); }
.powered-by { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px;
  color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; opacity: 0.75; transition: opacity 0.2s; }
.powered-by:hover, .powered-by:focus-visible { opacity: 1; }
.powered-by img { height: 22px; width: auto; }

/* Member login in the header, with a person icon. */
.site-nav a.nav-login { display: inline-flex; align-items: center; gap: 6px; }
.nav-login svg { width: 18px; height: 18px; fill: currentColor; }

/* The app pages (studio.html, coach.html): the app's own logo over the heading, all centred. */
.app-logo { display: block; height: clamp(72px, 12vw, 128px); width: auto; max-width: 100%; object-fit: contain; margin-bottom: 32px; }
.app-hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.75rem); }
.app-hero .container { text-align: center; }
.app-hero .app-logo { margin-left: auto; margin-right: auto; }
.app-hero .lead { margin-left: auto; margin-right: auto; }
.app-hero .hero-actions { justify-content: center; }
[data-page="studio"] .section-head, [data-page="coach"] .section-head { text-align: center; margin-left: auto; margin-right: auto; }
[data-page="studio"] .section-head p, [data-page="coach"] .section-head p { margin-left: auto; margin-right: auto; }
.app-note { color: var(--muted); font-size: 0.95rem; margin-top: 16px; }
.app-note a { color: var(--magenta-bright); }

/* The app pages' hero background: three of the app's screens, tilted and
   floating on a slow magenta and cerulean glow, behind a dark wash so the
   words stay easy to read. The screenshots come from the apps' own manuals
   (npm run app-shots). Still when the device asks for less motion. */
.app-hero { overflow: hidden; padding-bottom: clamp(72px, 10vw, 128px); }
.app-showcase { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: var(--hero-fade); mask-image: var(--hero-fade); }
.app-showcase::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 55%, color-mix(in srgb, var(--bg) 30%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 40%, transparent), transparent 30%);
}
.app-glow, .app-glow::before {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.8;
  animation: app-glow 16s ease-in-out infinite alternate;
}
.app-glow { width: 55vmax; height: 55vmax; left: -12vmax; top: -18vmax; background: radial-gradient(circle, var(--magenta), transparent 65%); }
.app-glow::before { content: ""; width: 50vmax; height: 50vmax; left: 55vmax; top: 22vmax; background: radial-gradient(circle, var(--cerulean), transparent 65%); animation-duration: 20s; animation-direction: alternate-reverse; }
.app-hero-coach .app-glow { background: radial-gradient(circle, var(--cerulean), transparent 65%); }
.app-hero-coach .app-glow::before { background: radial-gradient(circle, var(--magenta), transparent 65%); }
@keyframes app-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vmax, 6vmax) scale(1.15); } }

.app-phones {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: center; gap: clamp(48px, 13vw, 230px);
  transform: translate(-50%, -46%) perspective(1800px) rotateX(40deg) rotateZ(-26deg);
  transform-style: preserve-3d;
}
.app-phone {
  flex: none; width: clamp(170px, 20vw, 270px); aspect-ratio: 560 / 1100; overflow: hidden;
  border-radius: clamp(22px, 2.6vw, 34px); border: clamp(5px, 0.6vw, 8px) solid #1c1b26;
  background: #1c1b26;
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 60px color-mix(in srgb, var(--magenta) 30%, transparent);
  animation: app-float 9s ease-in-out infinite;
}
.app-hero-coach .app-phone { box-shadow: 0 30px 60px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 60px color-mix(in srgb, var(--cerulean) 35%, transparent); }
.app-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.app-phone-1 { animation-delay: -3s; }
.app-phone-2 { animation-delay: -6s; margin-top: -30%; opacity: 0.7; }
.app-phone-3 { animation-delay: -1.5s; margin-top: 24%; }
@keyframes app-float { 0%, 100% { transform: translateZ(0) translateY(0); } 50% { transform: translateZ(40px) translateY(-18px); } }
@media (prefers-reduced-motion: reduce) { .app-glow, .app-glow::before, .app-phone { animation: none; } }
@media (max-width: 640px) { .app-phones { gap: 28px; transform: translate(-50%, -44%) perspective(1200px) rotateX(40deg) rotateZ(-26deg); } }

/* Holiday hours from Studio (main.js): a bar under the header, and a note next
   to the opening hours, shown only when some are coming up. */
.holiday-bar {
  position: relative; z-index: 2; text-align: center; font-size: 0.9rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--magenta) 26%, var(--bg)), color-mix(in srgb, var(--cerulean) 26%, var(--bg)));
  border-bottom: 1px solid var(--border);
}
.holiday-bar .container { padding-top: 10px; padding-bottom: 10px; }
.holiday-bar p { margin: 0; }
.holiday-bar strong { color: var(--magenta-bright); }
.hours-special { margin: 6px 0 0; font-size: 0.9rem; color: var(--magenta-bright); }
.lead + .hours-special { font-size: 1rem; }
.panel .day-pass-today {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; font-weight: 600;
  color: var(--text); background: color-mix(in srgb, var(--magenta) 22%, transparent); border: 1px solid color-mix(in srgb, var(--magenta) 45%, transparent);
}

/* Google reviews on the location pages (main.js). */
.reviews-head { margin-bottom: 28px; }
.reviews-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.reviews-summary strong { color: var(--text); font-size: 1.3rem; }
.stars {
  --rating: 5; letter-spacing: 2px; font-size: 1.1rem; line-height: 1;
  background: linear-gradient(90deg, #f5b301 calc(var(--rating) / 5 * 100%), color-mix(in srgb, var(--muted) 40%, transparent) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reviews-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.review { margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.review blockquote {
  margin: 0; color: color-mix(in srgb, var(--text) 85%, var(--muted)); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.review-who { display: flex; flex-direction: column; font-weight: 600; }
.review-who a { color: var(--text); text-decoration: none; }
.review-who a:hover { color: var(--magenta-bright); }
.review-when { font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.reviews-actions { margin-top: 28px; }
.reviews-credit { margin-top: 16px; font-size: 0.8rem; color: var(--muted); }

/* Our story: the founder's sign-off. */
.story p { font-size: 1.08rem; line-height: 1.75; }
.story-sign { font-family: var(--display); font-size: 1.4rem !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--magenta-bright) !important; margin-top: 1.4em; }

/* Our story as a timeline: one line down the middle, magenta at the top
   turning cerulean at the bottom, each chapter branching off it, left and
   right in turn, with its icon on the other side. Under 900px the line runs
   down the left and every chapter sits to its right. */
.timeline { --line: 4px; --icon: 72px; position: relative; list-style: none; margin: 0 auto; padding: 24px 0 8px; max-width: 72rem; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--line); translate: -50% 0;
  border-radius: var(--line); background: linear-gradient(to bottom, var(--magenta-bright), var(--cerulean-bright));
}
.tl-item {
  --c: color-mix(in oklab, var(--magenta-bright), var(--cerulean-bright) var(--p));
  position: relative; display: grid; grid-template-columns: 1fr 56px 1fr;
  grid-template-areas: "head node icon" "body . .";
}
.tl-item + .tl-item { margin-top: clamp(48px, 7vw, 88px); }
.tl-item:nth-child(even) { grid-template-areas: "icon node head" ". . body"; }
.tl-head { grid-area: head; align-self: end; padding-bottom: 12px; border-bottom: 2px solid var(--c); }
.tl-when { margin: 0 0 4px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; color: var(--c); }
.tl-head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tl-body { grid-area: body; padding-top: 18px; }
.tl-body p { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.tl-body p:first-child { margin-top: 0; }
.tl-item:nth-child(odd) .tl-head, .tl-item:nth-child(odd) .tl-body { padding-right: clamp(8px, 2vw, 24px); }
.tl-item:nth-child(even) .tl-head, .tl-item:nth-child(even) .tl-body { padding-left: clamp(8px, 2vw, 24px); }
/* Where the chapter meets the line: a ring in its colour, the branch going
   through it to the icon. */
.tl-node { grid-area: node; align-self: end; position: relative; height: 2px; background: var(--c); }
.tl-node::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%;
  border-radius: 50%; background: var(--bg); border: 5px solid var(--c);
  box-shadow: 0 0 0 5px var(--bg), 0 0 18px color-mix(in srgb, var(--c) 60%, transparent);
}
.tl-icon { grid-area: icon; align-self: end; position: relative; display: flex; height: 2px; align-items: center; }
.tl-item:nth-child(odd) .tl-icon { padding-left: clamp(32px, 9vw, 120px); }
.tl-item:nth-child(even) .tl-icon { justify-content: flex-end; padding-right: clamp(32px, 9vw, 120px); }
.tl-icon::before {
  content: ""; position: absolute; top: 0; height: 2px; background: var(--c);
  width: calc(clamp(32px, 9vw, 120px) + var(--icon) / 2);
}
.tl-item:nth-child(odd) .tl-icon::before { left: 0; }
.tl-item:nth-child(even) .tl-icon::before { right: 0; }
.tl-icon svg {
  position: relative; flex: none; box-sizing: border-box; width: var(--icon); height: var(--icon); padding: 16px;
  border-radius: 50%; background: var(--surface); border: 4px solid var(--c); color: var(--c);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  box-shadow: 0 0 0 6px var(--bg), 0 0 28px color-mix(in srgb, var(--c) 45%, transparent);
}
.tl-sign { text-align: center; margin: clamp(40px, 6vw, 64px) 0 0; }
.story-section .center { margin-top: 24px; }

@media (max-width: 899px) {
  .timeline { --icon: 52px; padding-top: 8px; }
  .timeline::before { left: calc(var(--icon) / 2); }
  .tl-item, .tl-item:nth-child(even) {
    grid-template-columns: var(--icon) 1fr; column-gap: 16px;
    grid-template-areas: "icon head" ". body";
  }
  .tl-node { display: none; }
  .tl-item:nth-child(n) .tl-icon { padding: 0; justify-content: flex-start; }
  .tl-icon::before { display: none; }
  .tl-icon svg { padding: 11px; border-width: 3px; }
  .tl-item:nth-child(n) .tl-head, .tl-item:nth-child(n) .tl-body { padding-left: 0; padding-right: 0; }
}

/* Each chapter rises into place as it scrolls into view (main.js adds
   .tl-ready; without script, or with reduced motion, they simply show). */
@media (prefers-reduced-motion: no-preference) {
  .tl-ready .tl-item { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .tl-ready .tl-item.tl-in { opacity: 1; transform: none; }
}