/* Burgher, Burgher — site styles.
   Colours live in the :root variables below; change them there and the whole site follows. */

:root {
  --bg: #FBF8F3;
  --white: #FFFFFF;
  --red: #B3261E;
  --red-dark: #8F1E18;
  --purple: #5B2A5E;
  --gold: #E3B65A;
  --gold-dark: #8A6414;
  --ink: #1E1A1D;
  --ink-soft: #4A4048;
  --muted: #5E5358;
  --line: #EDE5DA;
  --placeholder: #F1ECE4;
  --field-border: #7A6F76;

  /* Four Roots (Burgher table page only) */
  --pt: #2F6B3A;
  --nl: #E0701F;
  --nl-label: #A84A0C;
  --gb: #1F4E8C;

  --maxw: 1240px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.6 var(--sans);
  overflow-x: hidden;
}

img { max-width: 100%; }
a { color: var(--red); }
a:hover { color: var(--red-dark); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }
p { margin: 0 0 16px; }

.container { width: min(var(--maxw), calc(100% - 48px)); margin: 0 auto; }
.narrow { width: min(760px, calc(100% - 48px)); margin: 0 auto; }
.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: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px;
}
.skip-link:focus { top: 12px; color: #fff; }

.label {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 14px;
}
.dia { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; padding: 15px 28px;
  font: 600 16px/1.2 var(--sans);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #3A3338; color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #F0C875; color: var(--ink); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn[disabled] { opacity: .7; cursor: default; }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.wordmark { font-family: var(--serif); font-size: 27px; line-height: 1; text-decoration: none; white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.wm-1 { font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.wm-2 { font-style: italic; font-weight: 600; color: var(--red); }
.nav-toggle-input { display: none; }
.nav-toggle-label { display: none; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { white-space: nowrap; }
.site-nav a:not(.btn) {
  font: 500 17px/1 var(--sans); color: var(--ink); text-decoration: none;
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { border-color: var(--red); color: var(--ink); }
.site-nav a[aria-current="page"]:not(.btn) { border-color: var(--red); }
.site-nav .btn { padding: 11px 22px; font-size: 16px; }

/* ---------- Home hero ---------- */
.hero {
  display: grid;
  grid-template-columns: max(24px, calc((100% - 1240px) / 2)) minmax(0, 1fr) 44%;
  min-height: 600px;
  background: var(--white);
  overflow: hidden;
  position: relative;
}
.hero-text { grid-column: 2; padding: 56px 40px 56px 0; align-self: center; }
.hero-text .label { margin-bottom: 22px; }
.hero h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.04; margin-bottom: 26px; }
.hero h1 em { color: var(--red); display: block; }
.hero-intro { font-size: 20px; line-height: 1.55; max-width: 560px; margin: 0 0 32px; color: var(--ink-soft); }
.hero-intro strong { display: block; color: var(--ink); margin-bottom: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-photo { grid-column: 3; position: relative; container-type: size; }
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(20cqh 0, 100% 0, 100% 100%, 0 100%);
}
/* Lace: a ~46px band centred on the slanted edge, rotated to match it.
   The slant is 20% of the photo height, so the angle is atan(0.2) = 11.3deg at any height. */
.lace {
  position: absolute; top: -80px; bottom: -80px; left: 60px; left: 10cqh;
  width: 46px; margin-left: -23px;
  transform: rotate(11.31deg);
  pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='44' viewBox='0 0 46 44'%3E%3Cpath d='M0 0H22A22 22 0 0 1 22 44H0Z' fill='%23fff'/%3E%3Cpath d='M22 0A22 22 0 0 1 22 44' fill='none' stroke='%23B3261E' stroke-width='1.6'/%3E%3Cline x1='9' y1='0' x2='9' y2='44' stroke='%23B3261E' stroke-width='1'/%3E%3Ccircle cx='28' cy='22' r='4.2' fill='none' stroke='%23B3261E' stroke-width='1.3'/%3E%3Ccircle cx='28' cy='22' r='1.4' fill='%23B3261E'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 46px 44px;
}
.hero-photo.ph { border-radius: 0; overflow: visible; background: transparent; }
.hero-photo.ph.is-missing::before {
  content: ""; position: absolute; inset: 0; background: var(--placeholder);
  clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(20cqh 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Surname strip ---------- */
.strip { background: var(--purple); color: var(--bg); overflow: hidden; padding: 20px 0; }
.strip-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: strip-scroll 90s linear infinite; }
.strip-group { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.strip-item { font: italic 400 24px/1.3 var(--serif); white-space: nowrap; padding: 0 16px; display: flex; align-items: center; gap: 32px; }
.strip-item .dia { font-style: normal; font-size: 18px; }
@keyframes strip-scroll { to { transform: translateX(-50%); } }
.strip:hover .strip-track, .strip.is-paused .strip-track { animation-play-state: paused; }
.strip-note { text-align: center; margin: 20px 0 0; padding: 0 24px; }
.strip-note p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.strip-note .credit { font-size: 13px; margin-top: 4px; }
.strip-spacer { height: 32px; }

/* ---------- Song band ---------- */
.song-band {
  background: var(--purple); color: var(--bg);
  border-radius: 28px; padding: 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.song-band h2 { color: var(--bg); font-size: clamp(40px, 5vw, 64px); margin-bottom: 18px; }
.song-band .label { color: var(--gold); }
.song-band p { color: var(--bg); font-size: 19px; }
.song-band a.more { color: #fff; font-weight: 600; }
.song-band a.more:hover { color: var(--gold); }

.player { min-width: 0; }
.wave { position: relative; height: 96px; display: flex; align-items: center; gap: 3px; margin-bottom: 22px; }
.wave .bar { flex: 1; min-width: 0; border-radius: 2px; background: #7E5381; }
.wave .bar.is-played { background: var(--gold); }
.wave .seek {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.wave:focus-within { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 6px; }
.player-row { display: flex; align-items: center; gap: 20px; }
.play {
  flex: none; width: 76px; height: 76px; border-radius: 50%; border: 0;
  background: var(--gold); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; transition: transform .15s, background .15s;
}
.play:hover { background: #F0C875; transform: scale(1.04); }
.play svg { width: 28px; height: 28px; }
.play .i-pause { display: none; }
.player.is-playing .play .i-play { display: none; }
.player.is-playing .play .i-pause { display: block; }
.play:focus-visible { outline-color: #fff; }
.player-title { font: 800 22px/1.2 var(--serif); letter-spacing: -0.02em; }
.player-title em { font-style: italic; font-weight: 400; }
.player-artist { color: var(--bg); font-size: 16px; }
.player-time { font-size: 15px; color: var(--bg); font-variant-numeric: tabular-nums; }
.song-band .player-status, .player-status { margin: 14px 0 0; font-size: 16px; min-height: 1.4em; color: var(--gold); font-weight: 600; }

/* ---------- Sign-up block ---------- */
.signup {
  background: var(--red); color: #fff; border-radius: 28px; padding: 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.signup .label { color: #FFE3A8; }
.signup h2 { color: #fff; font-size: clamp(38px, 4.6vw, 60px); margin-bottom: 18px; }
.signup-copy p { color: #fff; font-size: 19px; margin: 0; }
.signup-card { background: #fff; color: var(--ink); border-radius: 24px; padding: 32px; }
.signup-card h3 { font-size: 26px; margin-bottom: 18px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label, .field legend { display: block; font: 600 16px/1.3 var(--sans); margin-bottom: 6px; color: var(--ink); }
fieldset.field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.field legend { padding: 0; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--field-border); border-radius: 14px;
  font: 400 17px/1.4 var(--sans); color: var(--ink); background: #fff;
}
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%231E1A1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.field select:invalid { color: var(--muted); }
.field select option { color: var(--ink); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--purple); outline-offset: 1px; border-color: var(--purple); }
.field-note { font-size: 15px; color: var(--muted); margin: -6px 0 18px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 12px; }
.radio-row label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500;
  border: 1.5px solid var(--field-border); border-radius: 999px; padding: 10px 18px; cursor: pointer;
}
.radio-row input { accent-color: var(--red); width: 18px; height: 18px; }
.field-error { color: var(--red); font-size: 15px; font-weight: 500; margin: 6px 0 0; }
.field-invalid { border-color: var(--red) !important; }
.form-status { margin: 14px 0 0; font-size: 16px; line-height: 1.5; font-weight: 500; }
.form-status.is-error { color: var(--red); }
.form-status.is-ok { color: var(--pt); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---------- Classes band ---------- */
.classes { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0 56px; }
.classes h2 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 32px; }
.classes h2 em { color: var(--red); }
.class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.class-card { display: flex; flex-direction: column; }
.class-card .ph { height: 300px; margin-bottom: 20px; }
.class-card .label { margin-bottom: 8px; }
.class-card h3 { font-size: 28px; margin-bottom: 10px; letter-spacing: -0.01em; }
.class-card p { color: var(--ink-soft); font-size: 17px; margin-bottom: 20px; }
.class-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Photos / placeholders ---------- */
.ph { position: relative; background: var(--placeholder); border-radius: 24px; overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.is-missing img { display: none; }
.ph.is-missing::after {
  content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center;
  padding: 16px; text-align: center; font: 500 15px/1.4 var(--sans); color: var(--ink-soft);
}
.photo-wide { height: clamp(220px, 34vw, 420px); }
.photo-wide.short { height: clamp(200px, 26vw, 320px); }

/* ---------- Quote ---------- */
.quote-block {
  background: #fff; border: 1px solid var(--line); border-radius: 28px;
  padding: 56px 40px; text-align: center;
}
.quote-block .dia { font-size: 22px; letter-spacing: 6px; margin-bottom: 16px; display: block; }
.quote-block blockquote {
  margin: 0 auto 18px; max-width: 880px;
  font: italic 400 clamp(26px, 3.4vw, 40px)/1.25 var(--serif);
}
.quote-block cite { display: block; font: 600 16px/1.4 var(--sans); font-style: normal; color: var(--muted); margin-bottom: 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--bg); margin-top: 56px; padding: 48px 0 28px; }
.site-footer a { color: var(--bg); }
.site-footer a:hover { color: var(--gold); }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.site-footer .wordmark { font-size: 30px; display: inline-block; margin-bottom: 12px; }
.site-footer .wm-1 { color: var(--bg); }
.site-footer .wm-2 { color: var(--gold); }
.footer-tag { margin: 0 0 16px; font-size: 17px; }
.footer-news h3 { color: var(--bg); font-size: 22px; margin-bottom: 12px; }
.footer-news .row { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-news .field-error { flex-basis: 100%; order: 3; margin: 0; }
.footer-news input[type="email"] {
  flex: 1; min-width: 0; padding: 13px 18px; border-radius: 999px; border: 1.5px solid #fff;
  font: 400 17px var(--sans); background: #fff; color: var(--ink);
}
.footer-news .form-status.is-ok { color: var(--gold); }
.footer-news .form-status.is-error { color: #FFB3AD; }
.footer-news .field-error { color: #FFB3AD; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.page-head .updated { margin: 14px 0 0; color: var(--muted); font-size: 16px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid #4A4048; margin-top: 36px; padding-top: 20px; font-size: 15px;
}

/* ---------- Inner pages ---------- */
.page-head { padding: 48px 0 28px; }
.page-head h1 { font-size: clamp(40px, 5.2vw, 64px); margin-bottom: 16px; }
.page-head .lead { font-size: 21px; line-height: 1.5; color: var(--ink-soft); max-width: 640px; margin: 0; }
.top-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.card h2, .card h3 { margin-bottom: 14px; }
.card > h2 { font-size: 28px; }
.facts { margin: 0 0 8px; padding: 0; list-style: none; }
.facts li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts .k { flex: none; width: 110px; font: 600 13px/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.facts .v { flex: 1; color: var(--ink); }
.option-card { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; }
.option-card h3 { font-size: 20px; margin-bottom: 6px; }
.option-card p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.todo { background: #FFF1CC; padding: 0 4px; border-radius: 4px; color: var(--ink); }

.prose { padding-top: 48px; }
.prose h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose .quote-line {
  font: italic 400 clamp(22px, 2.6vw, 28px)/1.4 var(--serif);
  border-left: 4px solid var(--red); padding-left: 24px; margin: 0 0 40px;
}
.steps { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: step; }
.steps li { display: flex; gap: 18px; padding: 10px 0; counter-increment: step; }
.steps li::before {
  content: counter(step); flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--purple); color: #fff; display: grid; place-items: center;
  font: 800 16px/1 var(--serif);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.two-col h3 { font-size: 22px; margin-bottom: 8px; }
.tick-list { margin: 0; padding: 0; list-style: none; }
.tick-list li { padding: 6px 0 6px 28px; position: relative; }
.tick-list li::before { content: "\25C6"; color: var(--gold-dark); position: absolute; left: 0; font-size: 14px; top: 10px; }

details { border-bottom: 1px solid var(--line); padding: 4px 0; }
details summary {
  list-style: none; cursor: pointer; font-weight: 600; padding: 14px 40px 14px 0; position: relative;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 26px; font-weight: 400; color: var(--red); }
details[open] summary::after { content: "\2212"; }
details p { color: var(--ink-soft); margin: 0 0 16px; }
details .tick-list { margin: 0 0 12px; color: var(--ink-soft); }

.more-exp { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 40px; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.more-card {
  display: block; text-decoration: none; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px;
}
.more-card:hover { border-color: var(--red); color: var(--ink); }
.more-card .label { margin-bottom: 8px; font-size: 12px; }
.more-card .t { font: 800 20px/1.25 var(--serif); letter-spacing: -0.01em; }

.cta-center { text-align: center; margin: 40px 0 0; }

/* Four Roots (Burgher table page) */
.roots { margin-top: 56px; }
.roots h2 { font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 28px; }
.roots-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.root-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.root-card::before { content: ""; display: block; height: 6px; background: var(--c); }
.root-card .in { padding: 22px 22px 26px; }
.root-label { font: 700 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cl); margin-bottom: 10px; }
.root-card h3 { font-size: 26px; margin-bottom: 8px; }
.root-card p { margin: 0; font-size: 17px; color: var(--ink-soft); }
.root-pt { --c: var(--pt); --cl: var(--pt); }
.root-nl { --c: var(--nl); --cl: var(--nl-label); }
.root-gb { --c: var(--gb); --cl: var(--gb); }
.root-lk { --c: var(--gold); --cl: var(--gold-dark); }

/* Link lists (History) */
.section-title { font-size: clamp(30px, 3.6vw, 42px); margin: 56px 0 8px; }
.sub-title { font: italic 600 22px/1.3 var(--serif); color: var(--purple); margin: 32px 0 4px; }
.link-list { display: flex; flex-direction: column; }
.link-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.link-row:hover .link-title { color: var(--red); text-decoration: underline; }
.link-title { display: block; font: 700 21px/1.25 var(--serif); letter-spacing: -0.01em; margin-bottom: 4px; }
.link-desc { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.link-src { flex: none; font-size: 15px; font-weight: 600; color: var(--red); white-space: nowrap; }
.note-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 28px; margin-top: 40px; }
.note-card .label { margin-bottom: 8px; }
.note-card p { margin: 0; }

/* Directory */
.dir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 8px; }
.dir-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.dir-card h3 { font-size: 24px; margin-bottom: 4px; }
.dir-card .where { font: 600 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--purple); margin: 0 0 12px; }
.dir-card p { margin: 0 0 12px; color: var(--ink-soft); font-size: 17px; }
.dir-card a { font-weight: 600; word-break: break-word; }

/* About */
.about-intro { display: flex; gap: 40px; align-items: flex-start; }
.about-intro .text { flex: 1; min-width: 0; }
.about-intro .ph { flex: none; width: 260px; height: 340px; }
.about-sign { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); padding-top: 32px; margin-top: 48px; }
.about-sign .ph { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.about-sign .ph.is-missing::after { font-size: 11px; padding: 4px; }
.about-sign p { margin: 0; font: italic 400 20px/1.4 var(--serif); }
.pull { font: italic 400 24px/1.45 var(--serif); margin: 8px 0 0; }

/* Kit (love cake page) */
.kit-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.kit-card .ph { border-radius: 0; min-height: 300px; }
.kit-card .body { padding: 36px; }
.kit-card h2 { font-size: 30px; margin-bottom: 8px; }
.price { font: 800 28px/1 var(--serif); color: var(--red); margin: 0 0 14px; }

/* Video page */
.video-frame {
  aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--ink);
  color: var(--bg); display: grid; place-items: center; text-align: center; padding: 24px;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-frame .soon { font: italic 400 26px/1.3 var(--serif); }
.video-frame .soon small { display: block; font: 400 16px/1.5 var(--sans); margin-top: 10px; }

.tight { margin-top: 48px; }
.tight-s { margin-top: 32px; }
[id] { scroll-margin-top: 24px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .roots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .song-band, .signup { padding: 44px 36px; gap: 36px; }
}

/* ---------- Nav collapse ---------- */
@media (max-width: 1080px) {
  .site-header .bar { min-height: 68px; }
  .nav-toggle-input { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .nav-toggle-label {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 40px; height: 40px; padding: 0 6px; cursor: pointer;
  }
  .nav-toggle-label span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
  .nav-toggle-input:focus-visible ~ .nav-toggle-label { outline: 3px solid var(--purple); outline-offset: 2px; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 24px rgba(30, 26, 29, .12);
    padding: 8px 24px 20px;
  }
  .nav-toggle-input:checked ~ .site-nav { display: flex; }
  .site-nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .site-nav a[aria-current="page"]:not(.btn) { color: var(--red); }
  .site-nav .btn { margin-top: 16px; padding: 14px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hero { display: block; min-height: 0; }
  .hero-text { padding: 36px 24px 36px; }
  .hero-intro { font-size: 18px; }
  .hero-photo, .hero-photo.ph { height: 340px; overflow: hidden; }
  .hero-actions .btn { flex: 1 1 auto; }
  .song-band, .signup { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; border-radius: 24px; gap: 32px; }
  .class-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .class-card .ph { height: 260px; }
  .top-grid, .two-col, .kit-card, .footer-top, .dir-grid { grid-template-columns: minmax(0, 1fr); }
  .more-grid { grid-template-columns: minmax(0, 1fr); }
  .roots-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-block { padding: 40px 22px; border-radius: 24px; }
  .about-intro { flex-direction: column; }
  .about-intro .ph { width: 100%; height: 280px; }
  .kit-card .body { padding: 28px 24px; }
  .card { padding: 24px; }
  .site-footer { margin-top: 48px; }
  .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .link-row { flex-direction: column; gap: 6px; }
  .link-src { white-space: normal; }
  .facts li { flex-direction: column; gap: 2px; }
  .facts .k { width: auto; }
  .footer-news .row { flex-direction: column; }
  .strip-item { font-size: 21px; }
  .wordmark { font-size: 24px; }
  .player-row { gap: 14px; }
  .wave { gap: 2px; }
  .play { width: 64px; height: 64px; }
}

/* ---------- The Song page ---------- */
/* One column holds the heading, video, story and credits so their edges line up.
   It is at most 1040px wide, and also narrow enough that the heading + the whole 16:9 frame fit on screen
   (--song-chrome is roughly the height of the header and heading above the video). */
.song-wrap {
  --song-chrome: 285px;
  width: min(100%, 1040px, max(560px, calc((100vh - var(--song-chrome)) * 16 / 9)));
  width: min(100%, 1040px, max(560px, calc((100svh - var(--song-chrome)) * 16 / 9)));
  margin: 0 auto;
}
.song-head { padding: 22px 0 18px; }
.song-head .label { margin-bottom: 8px; }
.song-head h1 { font-size: clamp(34px, 4.2vw, 52px); margin-bottom: 8px; }
.song-head .lead { font-size: 18px; line-height: 1.45; color: var(--ink-soft); margin: 0; }
.label-gold { color: var(--gold-dark); } /* --gold itself is too light for text on the page background */
.yt-frame {
  aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden;
  background: var(--purple); color: var(--bg);
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-frame:has(> iframe) { padding: 0; }   /* once the video is in, it fills the whole frame */
.yt-soon { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 560px; font: italic 400 clamp(20px, 2.6vw, 30px)/1.25 var(--serif); }
.yt-play { width: clamp(64px, 9vw, 104px); height: clamp(64px, 9vw, 104px); border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; }
.yt-play svg { width: 40%; height: 40%; margin-left: 6%; }
.song-credit { margin: 14px 0 0; font-size: 16px; font-weight: 500; color: var(--muted); }
.song-listen { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.song-listen .btn { text-align: center; }
.song-band .player-listen { margin: 10px 0 0; font-size: 16px; }
.song-band .player-listen a { color: #fff; font-weight: 600; }
.song-band .player-listen a:hover { color: var(--gold); }
.song-story { margin-top: 40px; }
.story-col { max-width: 70ch; }
.story-col h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
@media (max-width: 860px) {
  .yt-frame { border-radius: 20px; }
  .song-head { padding-top: 28px; }
}

/* ---------- About page ---------- */
.about-hero { background: #fff; }
/* single column, lined up with the story text below (same 720px column and 24px gutters) */
.about-hero .inner { max-width: 720px; margin: 0 auto; padding: 56px 24px; }
.about-hero .copy { display: flex; flex-direction: column; gap: 20px; }
.about-hero .copy .label { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .16em; }
.about-hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.025em; }
.about-hero h1 em { color: var(--red); }
.about-hero .lead { margin: 0; font-size: 21px; line-height: 1.6; color: var(--ink-soft); }
.about-story { max-width: 720px; margin: 0 auto; padding: 72px 24px 24px; display: flex; flex-direction: column; gap: 24px; line-height: 1.7; }
.about-story p { margin: 0; }
.pullquote { max-width: 1000px; margin: 0 auto; padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pullquote .dia { margin: 0; font-size: 26px; letter-spacing: .4em; }
.pullquote blockquote { margin: 0; font: italic 400 clamp(30px, 4.4vw, 46px)/1.2 var(--serif); letter-spacing: -0.01em; }
.pullquote blockquote span { color: var(--red); }
.pullquote .sig-photo { margin-top: 8px; }
.pullquote .sig { margin: 0; line-height: 1.4; }
.pullquote .sig strong { display: block; }
.pullquote .sig span { display: block; color: var(--muted); font-size: 16px; }
.what-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.what-band .inner { max-width: 720px; margin: 0 auto; padding: 64px 24px; display: flex; flex-direction: column; gap: 16px; }
.what-band h2, .come h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; }
.what-band h2 em, .come h2 em, .further h2 em, .eras h2 em { color: var(--red); }
.what-band p { margin: 0; }
.come { padding: 64px 0 72px; }
.come-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.come-head p { margin: 10px 0 0; color: var(--ink-soft); }
.come-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.come-card { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.come-card:hover { color: var(--ink); }
.come-card:hover .t { text-decoration: underline; }
.come-card .ph { height: 220px; border-radius: 22px; }
.come-card .thumb { height: 220px; border-radius: 22px; background: var(--red); display: grid; place-items: center; }
.come-card .yt-play { width: 76px; height: 76px; }
.come-card .label { margin: 0; font-size: 13px; }
.come-card .t { font: 700 26px/1.15 var(--serif); }
.come-card .t em { font-weight: 400; }
.come-card .d { font-size: 16px; color: var(--ink-soft); }

/* ---------- History page ---------- */
.hist-hero { background: #fff; }
.hist-top { padding: 64px 0 40px; display: flex; flex-direction: column; gap: 20px; }
.hist-top .label { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; }
.hist-top h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.025em; }
.hist-top h1 em { color: var(--red); }
.hist-top .lead { margin: 0; font-size: 20px; color: var(--ink-soft); max-width: 760px; }
.timeline { list-style: none; margin: 0; padding: 8px 0 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.timeline li { display: flex; flex-direction: column; gap: 10px; }
.tl-bar { height: 8px; border-radius: 999px; background: var(--c); }
.tl-year { font: 800 40px/1 var(--serif); color: var(--cl); }
.tl-label { font: 700 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cl); }
.tl-desc { font-size: 16px; color: var(--ink-soft); }
.root-today { --c: var(--purple); --cl: var(--purple); }
.eras { padding: 72px 0 24px; }
.eras h2, .further h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1; margin-bottom: 36px; }
.era-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 28px; }
.era-card { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--c); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.era-card h3 { font-size: 30px; }
.entry { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.era-card .entry:first-of-type { }
.entry p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.entry a.t { font-weight: 700; color: var(--ink); }
.entry a.t:hover { color: var(--red); }
.entry .src { color: var(--red); font-weight: 600; font-size: 15px; white-space: nowrap; }
.signup-bar { background: var(--red); color: #fff; border-radius: 28px; padding: 44px 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.signup-bar .copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.signup-bar .label { color: #FFE3A8; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; }
.signup-bar h2 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; }
.signup-bar .sender-slot { flex: 1 1 420px; min-width: 0; }
.signup-bar .row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-bar input[type="text"], .signup-bar input[type="email"] { flex: 1 1 150px; min-width: 0; font: inherit; font-size: 16px; padding: 13px 15px; border: none; border-radius: 12px; color: var(--ink); background: #fff; }
.signup-bar .field-error { flex-basis: 100%; order: 3; margin: 0; color: #fff; }
.signup-bar .field-invalid { outline: 3px solid #fff; }
.signup-bar .field-note { color: #fff; font-size: 15px; margin: 12px 0 0; }
.signup-bar .form-status, .signup-bar .form-status.is-error, .signup-bar .form-status.is-ok { color: #fff; }
.further { background: #fff; border-top: 1px solid var(--line); margin-top: 24px; }
.further .inner { padding: 64px 0 72px; }
.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; }
.further-col { display: flex; flex-direction: column; gap: 18px; }
.further-col h3 { font: 700 14px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); }
.fl { display: flex; flex-direction: column; gap: 4px; }
.fl a { font-weight: 700; color: var(--ink); }
.fl a:hover { color: var(--red); }
.fl p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.grow-note { margin-top: 56px; background: var(--bg); border-radius: 22px; padding: 28px 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.grow-note p { margin: 0; color: var(--ink-soft); flex: 1 1 420px; }
main:has(> .further:last-child) + .site-footer { margin-top: 0; }
.grow-note strong { color: var(--ink); }
@media (max-width: 600px) {
  .signup-bar { padding: 32px 24px; border-radius: 24px; }
  .about-hero .inner { padding: 36px 24px; }
  .entry .src { white-space: normal; }
}

/* ---------- Class page template ---------- */
.cls-hero { background: #fff; }
.cls-hero .inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 56px 0; }
.cls-hero .copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cls-hero .copy .label { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .16em; }
.cls-hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.025em; }
.cls-hero h1.h1-long { font-size: clamp(38px, 5vw, 62px); line-height: 1.05; }
.cls-hero h1 em { color: var(--red); }
.cls-hero .promise { margin: 0; font-size: 21px; color: var(--ink-soft); }
.cls-hero .pq { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.cls-hero .pq .dia { font-size: 22px; line-height: 1.4; }
.cls-hero .pq p { margin: 0; font: italic 400 26px/1.35 var(--serif); color: var(--ink); }
.cls-hero .pq .by { margin-top: 10px; font: 500 16px/1.4 var(--sans); color: var(--ink-soft); }
.cls-hero .pq .by em { font-style: italic; }
.cls-hero .subtitle { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink-soft); }
.cls-hero .cta { align-self: flex-start; margin-top: 8px; padding: 16px 28px; font-size: 17px; }
.cls-hero .ph { flex: 1 1 480px; min-width: 0; height: 440px; border-radius: 28px; }
.cls-strip { background: var(--purple); color: var(--bg); }
.cls-strip dl { margin: 0 auto; padding: 28px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px 32px; }
.cls-strip dl > div { display: flex; flex-direction: column; gap: 4px; }
.cls-strip dt { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cls-strip dd { margin: 0; font-weight: 600; }
.cls-body { display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch; padding-top: 64px; }
@media (min-width: 1064px) {
  /* Two columns: text on the left, the form card on the right. The card is only as tall as its content and
     stays in view (sticky) while the text scrolls; it stops at the bottom of this section. */
  .cls-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 42%, 520px); align-items: stretch; }
}
.cls-left { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.cls-sec { display: flex; flex-direction: column; gap: 14px; }
.cls-sec p { margin: 0; color: var(--ink-soft); }
.cls-sec p strong { color: var(--ink); }
.h-big { font-size: clamp(34px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.h-mid { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 8px; }
.h-big em, .h-mid em, .explore h2 em { color: var(--red); }
.about-h { font: 800 22px/1.2 var(--serif); letter-spacing: -0.01em; margin-top: 10px; }
.cls-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.cls-steps li { display: flex; gap: 20px; align-items: flex-start; }
.cls-steps .n { flex: 0 0 44px; height: 44px; border-radius: 999px; background: var(--purple); color: #fff; display: grid; place-items: center; font: 700 20px/1 var(--serif); }
.cls-steps .st { font-weight: 700; color: var(--ink); }
.cls-steps p { margin: 0; color: var(--ink-soft); }
.cls-sec .leave { margin-top: 6px; }
.host-card { margin-top: auto; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 32px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.host-photo { flex: 0 0 148px; width: 148px; height: 148px; border-radius: 999px; overflow: hidden; border: 4px solid var(--gold); background: var(--placeholder); position: relative; }
.host-photo .ph { position: absolute; inset: 0; border-radius: 0; }
.host-photo.tba { background: var(--purple); display: grid; place-items: center; }
.host-photo.tba span { color: var(--gold); font-size: 44px; line-height: 1; }
.host-photo .ph.is-missing::after { font-size: 11px; padding: 4px; }
.host-copy { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.host-copy .label { margin: 0; font-size: 13px; letter-spacing: .16em; }
.host-copy h3 { font-size: 32px; line-height: 1.1; }
.host-copy p:last-child { margin: 0; color: var(--ink-soft); }
.cls-aside { flex: 0 1 400px; min-width: 0; }
.book-form { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px rgba(30, 26, 29, .06); }
@media (min-width: 1064px) { .book-form { position: sticky; top: 24px; } }
.book-form .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.book-form .form-grid-3 { display: grid; grid-template-columns: minmax(0, 1fr) 180px 64px; gap: 14px 10px; align-items: end; }
.book-form .field input, .book-form .field select, .book-form .field textarea { font-size: 15px; padding: 12px; }
.book-form .field select { padding-right: 34px; background-position: right 12px center; }
.book-form .field textarea { min-height: 0; }
.book-form h2 { font-size: 28px; }
.book-form .field { margin: 0; }
.book-form .btn { width: 100%; }
.form-notes p { margin: 0 0 6px; font-size: 14px; color: var(--muted); text-align: center; }
.form-notes p:last-child { font-size: 13px; margin: 0; }
.radio-stack { display: flex; flex-direction: column; gap: 8px; }
.radio-stack label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; font-size: 16px; border: 1.5px solid var(--field-border); border-radius: 12px; padding: 11px 14px; cursor: pointer; }
.radio-stack label:has(input:checked) { border-color: var(--ink); }
.radio-stack input { accent-color: var(--red); width: 18px; height: 18px; }
.form-thanks { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 260px; outline: none; }
.form-thanks h2 { font-size: 36px; }
.form-thanks p { margin: 0; font-size: 20px; color: var(--ink-soft); }
.cls-faq { padding: 64px 0; }
.faq-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 0; }
.faq-wrap h2 { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
.explore { background: #fff; border-top: 1px solid var(--line); padding: 56px 0 64px; }
.explore h2 { font-size: clamp(32px, 3.6vw, 40px); letter-spacing: -0.02em; margin-bottom: 28px; }
@media (max-width: 1063px) { .cls-aside { flex: 1 1 100%; } }
@media (max-width: 600px) {
  .cls-hero .inner { padding: 36px 0; gap: 28px; }
  .cls-hero .ph { height: 320px; }
  .cls-hero .pq p { font-size: 22px; }
  .cls-body { gap: 40px; padding-top: 48px; }
  .cls-left { gap: 44px; }
  .host-card, .book-form { padding: 24px; }
  .book-form .form-grid-2, .book-form .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .book-form .field input, .book-form .field select, .book-form .field textarea { font-size: 16px; padding: 12px 14px; }
  .book-form .field select { padding-right: 38px; background-position: right 14px center; }
  .cls-hero .cta { align-self: stretch; text-align: center; }
}

/* ---------- Free video: coming-soon block, live video, chapters ---------- */
[hidden] { display: none !important; }
.fv-soon { background: var(--purple); color: var(--bg); border-radius: 28px; padding: 48px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.fv-soon-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fv-soon-copy .yt-play { width: 84px; height: 84px; }
.fv-soon-copy h2 { color: var(--bg); font-size: clamp(30px, 3.6vw, 44px); }
.fv-soon-copy p { margin: 0; color: var(--bg); font-size: 19px; }
.video-frame[data-fv-frame] { padding: 0; }
.chapters-wrap { margin-top: 32px; }
.chapters-wrap h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 14px; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 10px; }
.chapters button { width: 100%; text-align: left; font: 500 17px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 16px; cursor: pointer; display: flex; gap: 14px; align-items: baseline; }
.chapters button:hover { border-color: var(--red); }
.chapters button[aria-current="true"] { border-color: var(--ink); }
.chapters .t { flex: none; font-weight: 700; color: var(--purple); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.signup-bar .form-thanks { min-height: 0; align-items: flex-start; text-align: left; }
.signup-bar .form-thanks h2, .signup-bar .form-thanks p { color: #fff; }
.signup-bar .form-thanks h2 { font-size: 30px; }
.signup-bar .form-thanks p { font-size: 18px; }
@media (max-width: 860px) {
  .fv-soon { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; border-radius: 24px; gap: 28px; }
}

/* ---------- 404 page ---------- */
.nf { padding: 72px 0 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.nf h1 { font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -0.025em; }
.nf h1 em { color: var(--red); }
.nf .lead { margin: 0; font-size: 21px; color: var(--ink-soft); max-width: 620px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.nf-note { margin: 12px 0 0; color: var(--ink-soft); }
.nf-note .dia { margin-right: 6px; }

/* ---------- Sender.net sign-up spots ---------- */
/* Each spot holds an empty Sender container plus the site's own form (the fallback). While Sender loads, the fallback is
   hidden (.is-loading). When Sender's form is ready and dressed, .has-sender hides the fallback. If Sender fails or is
   too slow, .sender-failed shows the fallback. Without JavaScript, neither class is set, so the fallback just shows. */
.sender-slot { position: relative; min-width: 0; }
.sender-slot.is-loading .own-form, .sender-slot.has-sender .own-form { display: none; }
.sender-slot.is-loading { min-height: 56px; }
.sender-slot.is-loading[data-sender-slot="freeVideo"] { min-height: 150px; }
.sender-slot .sender-form-field { display: block; margin: 0; padding: 0; }
.sender-slot:not(.has-sender) .sender-form-field { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.sender-slot .sender-form-field > div { display: block !important; width: 100% !important; }
.sender-slot .sender-form-field iframe { display: block; width: 100% !important; max-width: 100% !important; border: 0; background: transparent; color-scheme: normal; }

/* ---------- Reduced motion: names sit still and wrap ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; width: auto; justify-content: center; }
  .strip-group { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; justify-content: center; }
  .strip-group:nth-child(n+2) { display: none; }
  .strip-group .strip-item:last-child .dia { display: none; }
  .btn, .play { transition: none; }
}