:root {
  color-scheme: light;
  --canvas: #f4efe2;
  --canvas-glow: #fdfaF2;
  --surface: #fbf7ea;
  --ink: #2c2740;
  --ink-muted: #6f6887;
  --ink-faint: #a29cb8;
  --outline: #ddd6c3;
  --rule: #e4ddcb;
  --accent: #825c12;
  --accent-plot: #d99a26;
  --accent-wash: rgba(217, 154, 38, 0.16);
  --accent-outline: rgba(176, 127, 30, 0.4);
  --coral: #a13d2b;
  --coral-plot: #cf5540;
  --slate: #3e6388;
  --slate-plot: #5b81a8;
  --sage: #3f7659;
  --sage-plot: #4f8f6b;
  --berry: #815276;
  --berry-plot: #9b668e;
  --violet: #5d4d9c;
  --violet-plot: #7463b8;
  --header-bg: rgba(244, 239, 226, 0.86);
  --photo-overlay: rgba(13, 15, 30, 0.42);
  --shadow: 0 18px 60px rgba(44, 39, 64, 0.1);
  --gutter: clamp(1.125rem, 4vw, 4.5rem);
  --section-space: clamp(5rem, 10vw, 9rem);
  --reading: 44rem;
  --header-h: 4.7rem;
  --radius-card: 14px;
  --radius-control: 8px;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0d0f1e;
  --canvas-glow: #1b2038;
  --surface: #171a2c;
  --ink: #f0ecda;
  --ink-muted: #8f86ae;
  --ink-faint: #5f5980;
  --outline: #262b45;
  --rule: #232741;
  --accent: #e8b34b;
  --accent-plot: #e8b34b;
  --accent-wash: rgba(232, 179, 75, 0.12);
  --accent-outline: rgba(232, 179, 75, 0.35);
  --coral: #e0705a;
  --coral-plot: #e0705a;
  --slate: #7d9fc4;
  --slate-plot: #7d9fc4;
  --sage: #78b694;
  --sage-plot: #78b694;
  --berry: #b88bb7;
  --berry-plot: #b88bb7;
  --violet: #9e93d7;
  --violet-plot: #9e93d7;
  --header-bg: rgba(13, 15, 30, 0.86);
  --shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 18%, var(--canvas-glow) 0, var(--canvas) 38rem),
    var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  /* Every image carries width/height attributes so the browser can reserve
     space and anchor links land correctly. Those attributes are definite
     lengths, which silently defeats any CSS `aspect-ratio` further down —
     `height: auto` hands sizing back to the stylesheet. Rules that genuinely
     want to fill a box set `height: 100%` themselves and still win. */
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button,
input {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

h2 {
  margin-bottom: 1.75rem;
  font-size: clamp(2.9rem, 7vw, 6.7rem);
}

h3 {
  font-size: clamp(2rem, 4vw, 3.8rem);
}

h4 {
  line-height: 1.25;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--canvas);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.section {
  width: min(100%, 96rem);
  margin-inline: auto;
  padding: var(--section-space) var(--gutter);
}

.eyebrow {
  margin-bottom: 0.85rem;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.28em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lead {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  line-height: 1.35;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.1rem;
  border: 1px solid var(--outline);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.button:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.button-primary {
  border-color: var(--accent-plot);
  background: var(--accent-plot);
  color: #17120a;
}

.button-ghost {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(13, 15, 30, 0.18);
  color: #fff;
  backdrop-filter: blur(8px);
}

.button-small {
  min-height: 2.3rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.66rem;
}

.text-link,
.text-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link:hover,
.text-button:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Header and navigation
   Meridian: uppercase tracked labels, gold active state, one
   hairline between navigation and content, 44px targets.
   --------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: grid;
  height: var(--header-h);
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding-inline: var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease;
}

/* Guarantees nav contrast over the hero photograph, whatever the
   photograph happens to contain behind the labels. */
.header-scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 15, 30, 0.62), rgba(13, 15, 30, 0));
  transition: opacity 180ms ease;
}

.site-header.is-scrolled,
:root.index-open .site-header {
  border-color: var(--rule);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled .header-scrim,
:root.index-open .header-scrim {
  opacity: 0;
}

.brand {
  display: block;
  width: 4.2rem;
}

/* The logo artwork is white on transparency, so the ivory palette has to
   knock it back to ink or it disappears against the header. */
.brand img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.is-scrolled .brand img,
:root.index-open .brand img {
  filter: brightness(0);
}

:root[data-theme="dark"] .is-scrolled .brand img,
:root[data-theme="dark"].index-open .brand img {
  filter: brightness(0) invert(1);
}

.primary-nav {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(0.4rem, 1.4vw, 1.5rem);
  align-items: center;
}

.primary-nav a,
.nav-more {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding-inline: 0.4rem;
  border: 0;
  background: none;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 150ms ease;
}

.is-scrolled .primary-nav a,
.is-scrolled .nav-more {
  color: var(--ink);
}

.primary-nav a:hover,
.nav-more:hover {
  color: var(--accent-plot);
}

/* Active destination: gold label plus a gold mark, so the state is
   never carried by colour alone. */
.primary-nav a[aria-current="true"],
.nav-more[data-nav-active="true"] {
  color: var(--accent-plot);
  font-weight: 750;
}

.primary-nav a[aria-current="true"]::after,
.nav-more[data-nav-active="true"]::after {
  position: absolute;
  bottom: 0.42rem;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-plot);
  content: "";
  transform: translateX(-50%);
}

/* The panel hangs off the button, not off the nav column — the column is a
   full-width grid track and would drop the panel far to the right. */
.nav-more-wrap {
  position: relative;
  display: inline-flex;
}

.nav-more {
  cursor: pointer;
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1;
}

.nav-more-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 15rem;
  padding: 0.9rem 0.25rem 0.35rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(14, 16, 30, 0.14);
}

.nav-more-panel[hidden] {
  display: none;
}

.nav-more-panel .eyebrow {
  margin-bottom: 0.45rem;
  padding-inline: 0.9rem;
}

.nav-more-panel a {
  min-height: 2.75rem;
  padding-inline: 0.9rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.nav-more-panel a:first-of-type {
  border-top: 0;
}

.nav-more-panel a[aria-current="true"] {
  color: var(--accent);
}

.nav-more-panel a[aria-current="true"]::after {
  position: static;
  margin-left: 0.5rem;
  transform: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.icon-button {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(13, 15, 30, 0.16);
}

.is-scrolled .icon-button,
.index-open .icon-button {
  border-color: var(--outline);
  background: var(--surface);
}

.icon-button svg {
  width: 1.15rem;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.is-scrolled .icon-button svg,
.index-open .icon-button svg {
  stroke: var(--ink);
}

.menu-toggle {
  display: none;
  color: #fff;
}

.is-scrolled .menu-toggle,
.index-open .menu-toggle {
  color: var(--ink);
}

.menu-toggle {
  position: relative;
}

.menu-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease;
}

.menu-toggle span:first-child {
  transform: translate(-50%, -50%) translateY(-3px);
}

.menu-toggle span:last-child {
  transform: translate(-50%, -50%) translateY(3px);
}

.index-open .menu-toggle span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.index-open .menu-toggle span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* The header CTA stays reachable over the hero as well as after
   scrolling; gold is reserved for the hero's own primary action. */
.header-inquiry {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(13, 15, 30, 0.2);
  color: #fff;
  backdrop-filter: blur(8px);
}

.is-scrolled .header-inquiry,
:root.index-open .header-inquiry {
  border-color: var(--outline);
  background: var(--surface);
  color: var(--ink);
}

:where(.site-header, .site-index) :focus-visible {
  outline: 2px solid var(--accent-plot);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
   Full-screen site index (the navigation on narrow screens)
   --------------------------------------------------------------- */

.site-index {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  overflow-y: auto;
  align-content: start;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 3rem;
  background: var(--canvas);
  gap: 2.25rem;
}

.site-index[hidden] {
  display: none;
}

.index-nav {
  display: grid;
}

.index-nav a {
  display: grid;
  min-height: 3.5rem;
  align-items: center;
  padding-block: 0.85rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.index-nav > a:first-of-type {
  border-top: 0;
}

.index-nav:not(.index-nav-secondary) a {
  grid-template-columns: 2.6rem 1fr;
  gap: 0.5rem;
}

.index-nav b {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.index-nav strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 7vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.index-nav small {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.index-nav a[aria-current="true"] strong,
.index-nav a[aria-current="true"] {
  color: var(--accent);
}

.index-nav a[aria-current="true"] b::after {
  margin-left: 0.35rem;
  content: "●";
  font-size: 0.5rem;
  vertical-align: middle;
}

.index-nav-secondary a {
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 2.9rem;
  padding-block: 0.55rem;
}

.index-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.index-contact a:not(.button) {
  color: var(--ink-muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.index-contact a:not(.button):hover {
  color: var(--accent);
}

body.index-open {
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: max(45rem, 100svh);
  color: #fff;
  overflow: hidden;
}

.hero-media,
.hero-scrim {
  position: absolute;
  inset: 0;
}

.hero-media {
  background-image: url("/public/media/hero-nadya.webp");
  background-position: 50% 37%;
  background-size: cover;
  transform: scale(1.015);
}

.hero-scrim {
  background:
    linear-gradient(90deg, rgba(13, 15, 30, 0.68) 0%, rgba(13, 15, 30, 0.26) 48%, rgba(13, 15, 30, 0.04) 76%),
    linear-gradient(0deg, rgba(13, 15, 30, 0.55) 0%, transparent 40%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 96rem);
  min-height: max(45rem, 100svh);
  margin-inline: auto;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 9rem var(--gutter) clamp(6rem, 12vh, 9rem);
}

.hero .eyebrow {
  color: #e8b34b;
}

.hero h1 {
  max-width: 10ch;
  margin-bottom: 1.3rem;
  font-size: clamp(4.5rem, 12vw, 10.5rem);
  line-height: 0.76;
}

.hero-credentials {
  max-width: 47rem;
  margin-bottom: 1.8rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.85rem, 1.3vw, 1.08rem);
  line-height: 1.55;
}

.hero-scroll {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-scroll svg {
  width: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.section-heading {
  max-width: 62rem;
  margin-bottom: clamp(2.7rem, 6vw, 5.5rem);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.editorial-image {
  margin: 0;
}

/* Native 1800x1013. A 4/5 portrait crop threw away the whole scene and cost
   ~720px of height on a stacked layout; at 16/9 nothing is cropped at all. */
.editorial-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 45%;
}

.editorial-image figcaption {
  margin-top: 0.65rem;
  color: var(--ink-muted);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-copy {
  max-width: var(--reading);
}

.about-copy > p:not(.lead) {
  color: var(--ink-muted);
}

.principle-list {
  margin-top: 2.6rem;
  border-top: 1px solid var(--rule);
}

.principle-list > div {
  display: grid;
  min-height: 5rem;
  grid-template-columns: 2.5rem 1fr;
  align-content: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}

.principle-list .number {
  grid-row: span 2;
  color: var(--accent);
  font-size: 0.68rem;
}

.principle-list strong {
  font-family: var(--serif);
  font-size: 1.15rem;
}

.principle-list small {
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   Feature band — the one workshop currently open for registration,
   promoted directly after the class schedule.
   --------------------------------------------------------------- */

.feature-band-section {
  padding-block: 0;
}

.feature-band {
  display: grid;
  overflow: hidden;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--accent-outline);
  border-radius: var(--radius-card);
  background: var(--accent-wash);
  color: inherit;
  text-decoration: none;
}

.feature-band-image {
  overflow: hidden;
}

.feature-band-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: contain;
  transition: transform 500ms ease;
}

.feature-band:hover .feature-band-image img {
  transform: scale(1.03);
}

.feature-band-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
}

.feature-band-copy h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}

.feature-band-copy > p:not(.eyebrow) {
  max-width: 34rem;
  margin-bottom: 1.5rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.feature-band-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--accent-outline);
}

.feature-band-facts span {
  display: block;
  color: var(--ink-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.feature-band-facts strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.feature-band-go {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feature-band:hover .feature-band-go {
  text-decoration: underline;
}

/* The team is supporting information, not a headline act: it reads as a
   quiet annotation under the biography. */
.team-band {
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.team-copy {
  max-width: 46rem;
}

.team-copy h4 {
  margin-bottom: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.team-copy > p:last-child {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

/* Seven certified instructors, all visible at once. The source is a Wix
   carousel, but a carousel here would recreate the original complaint —
   only ever showing one of them. Portraits are transparent circular
   cut-outs, so they need no framing. */
.team-grid {
  display: grid;
  padding: 0;
  margin: 2.75rem 0 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.25rem 1.5rem;
  list-style: none;
}

.team-grid li {
  display: grid;
  align-content: start;
}

.team-grid img {
  width: 100%;
  max-width: 7.5rem;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 0.9rem;
  border-radius: 50%;
}

.team-grid strong {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.team-place {
  display: block;
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.team-spec {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------
   The one essential reading. No ring: a class timetable is a list of
   appointments, not a cycle, so Meridian's hierarchy is carried by a
   single focus item and a time rail instead.
   --------------------------------------------------------------- */

.next-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.next-class {
  min-width: min(100%, 22rem);
  max-width: 34rem;
  padding: 1.5rem 1.75rem 1.75rem;
  border: 1px solid var(--accent-outline);
  border-radius: var(--radius-card);
  background: var(--accent-wash);
}

.next-class .eyebrow {
  margin-bottom: 0.7rem;
  color: var(--accent);
}

.next-when {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.next-when strong {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-variant-numeric: tabular-nums;
  font-weight: 250;
  letter-spacing: -0.045em;
  line-height: 1;
}

.next-when span {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.next-class h3 {
  margin-bottom: 0.35rem;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.next-where {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.35rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.next-where i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--series-color, var(--accent-plot));
}

.next-meta {
  padding-bottom: 0.35rem;
}

.schedule-summary {
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.filter-block {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------
   Day header — prev / next / today for the selected day
   --------------------------------------------------------------- */

.day-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.day-step {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0;
  place-items: center;
  border: 1px solid var(--outline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  transition: border-color 150ms ease, color 150ms ease;
}

.day-step:hover:not(:disabled) {
  border-color: var(--accent-outline);
  color: var(--accent);
}

.day-step:disabled {
  color: var(--ink-faint);
  cursor: default;
  opacity: 0.55;
}

.day-heading {
  order: -1;
  flex: 1;
  margin: 0;
}

.day-heading strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.day-heading small {
  display: block;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.day-today {
  flex: none;
  margin-left: 0.5rem;
}

.day-today[hidden] {
  display: none;
}

.series-legend {
  display: flex;
  max-width: 31rem;
  margin: 1.5rem auto 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.series-legend button {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.68rem;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.series-legend button:hover {
  border-color: var(--accent-outline);
  color: var(--ink);
}

.series-legend button[aria-pressed="true"] {
  border-color: var(--accent-outline);
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 650;
}

.series-legend .legend-all {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.series-legend i,
.agenda-source {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 50%;
  background: var(--series-color, var(--accent-plot));
}

.data-state {
  margin-top: 1rem;
  color: var(--ink-faint);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.agenda-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}

.agenda-toolbar h3 {
  margin-bottom: 0;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
}

.agenda-day {
  padding: 1.4rem 0 0.4rem;
}

.agenda-day > h4 {
  margin: 0 0 0.25rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
}

/* ---------------------------------------------------------------
   Day rail — the fortnight at a glance in two rows, one per week.
   Each mark is a class, coloured by studio, so the shape of the two
   weeks is readable before any day is opened.
   --------------------------------------------------------------- */

.day-rail {
  display: grid;
  margin-bottom: 2rem;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.day-rail button {
  display: grid;
  min-height: 4.4rem;
  align-content: center;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--outline);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  transition: border-color 150ms ease, background 150ms ease;
}

.day-rail button:hover {
  border-color: var(--accent-outline);
}

.day-rail button[aria-current="true"] {
  border-color: var(--accent-outline);
  background: var(--accent-wash);
}

.day-rail button.is-quiet {
  color: var(--ink-faint);
}

.rail-day {
  color: var(--ink-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.day-rail button[aria-current="true"] .rail-day {
  color: var(--accent);
}

.rail-date {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  line-height: 1.1;
}

.rail-marks {
  display: flex;
  min-height: 0.7rem;
  align-items: center;
  gap: 2px;
}

.rail-marks i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--series-color, var(--accent-plot));
}

/* The class count, not an overflow badge — it has to be readable on a phone,
   so it is no longer 8.8px of muted grey. */
.rail-marks b {
  margin-left: 3px;
  color: var(--ink);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.rail-marks em {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-style: normal;
  line-height: 0.5;
}

.agenda-expand {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  width: 100%;
  text-align: left;
}

/* The day the ring is currently showing, marked in the record below it. */
.agenda-day.is-selected {
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent-plot);
  margin-left: -0.9rem;
}

.agenda-day.is-selected > h4 {
  color: var(--accent);
}

.agenda-date {
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.agenda-row {
  display: grid;
  grid-template-columns: 4.1rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 4.6rem;
  border-bottom: 1px solid var(--rule);
}

.agenda-time {
  color: var(--accent);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 350;
}

.agenda-time small {
  display: block;
  color: var(--ink-faint);
  font-size: 0.62rem;
}

.agenda-detail strong {
  display: block;
  font-size: 0.88rem;
}

.agenda-detail small {
  color: var(--ink-muted);
}

.loading-copy,
.empty-copy {
  padding: 3rem 0;
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 1.3rem;
}

.upcoming-section {
  padding-bottom: calc(var(--section-space) * 1.1);
}

.event-feature-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

.event-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border: 1px solid var(--outline);
  background: var(--surface);
}

/* The workshop artwork has its title set into the image, so cropping it clips
   "THE HOT METHOD" at both edges. Every container that shows this poster sizes
   itself to the poster's own 1200x630 instead of filling a fixed box. */
.event-feature-image {
  display: grid;
  overflow: hidden;
  place-items: center;
  background: var(--canvas);
}

.event-feature-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: contain;
}

.event-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.7rem, 4vw, 3.5rem);
}

.event-feature-copy h3 {
  margin-bottom: 0.3rem;
}

.event-feature-copy > p:not(.eyebrow, .event-subtitle) {
  color: var(--ink-muted);
}

.event-subtitle {
  margin-bottom: 1.4rem;
  color: var(--accent);
}

.event-compact {
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.7rem, 4vw, 3.2rem);
  border: 1px solid var(--outline);
  background: var(--accent-wash);
}

.event-compact h3 {
  margin-bottom: 2rem;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
}

.event-date {
  display: flex;
  flex-direction: column;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event-date b {
  font-size: 3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 250;
  line-height: 1;
}

/* A permanently dark band, whichever palette the page is in. Rather than
   patching descendants one by one — which is how `.lead` ended up rendering
   Daylight's dark purple ink on near-black — the section redefines the ink
   tokens locally. `var(--ink)` and friends now resolve to light values
   throughout, including in anything added here later. */
.hot-method-section {
  --ink: #f0ecda;
  --ink-muted: #aaa696;
  --ink-faint: #8b8779;
  --surface: #1d211e;
  --outline: #313630;
  --rule: #2a2e2b;
  --accent: #e8b34b;
  --accent-plot: #e8b34b;
  --accent-wash: rgb(232 179 75 / 12%);
  --accent-outline: rgb(232 179 75 / 35%);

  display: grid;
  grid-template-columns: minmax(20rem, 0.95fr) minmax(24rem, 1.05fr);
  background: #151816;
  color: var(--ink);
}

.hot-method-visual {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  align-self: start;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.hot-method-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  border-radius: var(--radius-card);
  object-fit: contain;
}

.hot-method-content {
  max-width: 52rem;
  padding: var(--section-space) clamp(2rem, 6vw, 6rem);
}

.hot-method-content .eyebrow {
  color: #e8b34b;
}

.hot-method-content h2 {
  margin-bottom: 3rem;
}

.hot-method-content > p:not(.lead, .eyebrow) {
  color: var(--ink-muted);
}

.workshop-facts {
  display: grid;
  margin-bottom: 2.5rem;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #30352f;
}

.workshop-facts > div {
  padding: 1rem 0;
  border-bottom: 1px solid #30352f;
}

.workshop-facts span,
.price-pair span {
  display: block;
  color: var(--ink-faint);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.workshop-facts strong {
  font-size: 0.9rem;
}

.workshop-curriculum {
  display: grid;
  margin: 2rem 0 3rem;
  padding: 0;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  border-top: 1px solid #30352f;
}

.workshop-curriculum li {
  padding: 0.85rem 0;
  border-bottom: 1px solid #30352f;
  font-size: 0.82rem;
}

.price-pair {
  display: grid;
  margin-bottom: 2.5rem;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.price-pair > div {
  padding: 1.2rem;
  border: 1px solid #3a3e38;
  border-radius: 0.75rem;
}

.price-pair strong {
  display: block;
  margin-top: 0.4rem;
  color: #e8b34b;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.hot-method-content .button {
  border-color: #3a3e38;
  background: #1f231f;
  color: #f0ecda;
}

.hot-method-content .button-primary {
  border-color: #e8b34b;
  background: #e8b34b;
  color: #17120a;
}

.faq {
  margin-top: 4rem;
  border-top: 1px solid #30352f;
}

.faq details {
  border-bottom: 1px solid #30352f;
}

.faq summary {
  padding: 1.2rem 2rem 1.2rem 0;
  color: #f0ecda;
  font-family: var(--serif);
  font-size: 1.2rem;
  list-style: none;
}

.faq summary::after {
  float: right;
  color: #e8b34b;
  content: "+";
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > *:not(summary) {
  max-width: 40rem;
  color: #aaa696;
}

.faq details > *:last-child {
  margin-bottom: 1.5rem;
}

.service-index {
  display: flex;
  margin-bottom: 3rem;
  gap: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.service-index button {
  padding: 0.9rem 1.1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.service-index button[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.service-lead {
  max-width: var(--reading);
  margin-bottom: 3rem;
}

.service-lead > p {
  color: var(--ink-muted);
}

.check-list {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.check-list li {
  padding: 0.7rem 0 0.7rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.check-list li::before {
  margin-left: -1.5rem;
  margin-right: 0.65rem;
  color: var(--accent);
  content: "◉";
  font-size: 0.62rem;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.offer-card {
  display: flex;
  min-height: 23rem;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--outline);
  background: var(--surface);
}

.offer-card.offer-featured {
  border-color: var(--accent-outline);
  background: var(--accent-wash);
}

.offer-card h4 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
}

.offer-card > p:not(.eyebrow) {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.offer-card .price {
  margin-top: auto;
}

.price {
  display: block;
  color: var(--accent);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-variant-numeric: tabular-nums;
}

.price small {
  color: var(--ink-muted);
  font-size: 0.68rem;
}

.offer-card > span {
  margin-top: 0.4rem;
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.mentoring-callout {
  display: grid;
  margin-top: 5rem;
  padding: clamp(2rem, 6vw, 5rem);
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem 4rem;
  align-items: end;
  border-left: 3px solid var(--accent-plot);
  background: var(--surface);
}

.mentoring-callout h3 {
  grid-row: span 2;
  margin: 0;
}

.mentoring-callout .button {
  justify-self: start;
}

.corporate-intro {
  display: grid;
  margin-bottom: 4rem;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.corporate-intro h3 {
  margin-bottom: 0;
}

.corporate-intro > div:last-child p:not(.lead) {
  color: var(--ink-muted);
}

.benefit-grid,
.package-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.benefit-grid article {
  padding: 1.5rem;
  border-right: 1px solid var(--rule);
}

.benefit-grid article:last-child {
  border-right: 0;
}

.benefit-grid span {
  color: var(--accent);
  font-size: 0.68rem;
}

.benefit-grid h4,
.package-grid h4 {
  margin: 1.5rem 0 0.7rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.benefit-grid p,
.package-grid p {
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.class-offerings {
  margin: 5rem 0;
}

.offering-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.offering-list span {
  padding: 0.65rem 1rem;
  border: 1px solid var(--outline);
  border-radius: 10rem;
  background: var(--surface);
  font-family: var(--serif);
}

.package-grid {
  margin-bottom: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.package-grid article {
  padding: 2rem;
  border-right: 1px solid var(--rule);
}

.retreat-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  min-height: 42rem;
}

.retreat-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.retreat-hero > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--surface);
}

.retreat-hero p:not(.eyebrow) {
  color: var(--ink-muted);
}

.retreat-hero .button {
  margin-top: 1.5rem;
}

.tourism-section {
  background: #1a211d;
  color: #f0ecda;
}

.tourism-hero {
  position: relative;
  min-height: min(80rem, 92svh);
}

.tourism-hero::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #1a211d 0, transparent 45%),
    linear-gradient(90deg, rgba(13, 15, 30, 0.58), transparent 70%);
  content: "";
}

.tourism-hero > img {
  width: 100%;
  height: min(80rem, 92svh);
  object-fit: cover;
}

.tourism-title {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: clamp(3rem, 9vw, 8rem);
  left: var(--gutter);
}

.tourism-title .eyebrow {
  color: #e8b34b;
}

.tourism-title h2 {
  margin-bottom: 0;
  font-size: clamp(3.7rem, 9vw, 9rem);
}

.tourism-content {
  padding-top: 2rem;
}

.tourism-content .eyebrow {
  color: #e8b34b;
}

.tourism-intro {
  max-width: 52rem;
  margin: 0 0 var(--section-space) auto;
}

.tourism-intro p:not(.lead) {
  color: #aaa696;
}

.destination-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 7vw, 7rem);
}

.destination-heading {
  position: sticky;
  top: 8rem;
  align-self: start;
}

.destination-heading h3 {
  margin-bottom: 1.5rem;
}

.destination-heading p:last-child {
  color: #aaa696;
}

.destination-list article {
  display: grid;
  min-height: 5rem;
  grid-template-columns: 2.6rem 1fr;
  align-content: center;
  border-bottom: 1px solid #303832;
}

.destination-list span {
  grid-row: span 2;
  color: #e8b34b;
  font-size: 0.66rem;
}

.destination-list h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.destination-list p {
  margin: 0;
  color: #aaa696;
  font-size: 0.8rem;
}

.retreat-types {
  display: grid;
  margin-top: var(--section-space);
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #303832;
}

.retreat-types article {
  min-height: 17rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  border-right: 1px solid #303832;
  border-bottom: 1px solid #303832;
}

.retreat-types article:nth-child(even) {
  border-right: 0;
}

.retreat-types h4 {
  max-width: 20rem;
  margin: 1.5rem 0 0.8rem;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
}

.retreat-types p:last-child {
  max-width: 26rem;
  color: #aaa696;
}

.tourism-cta {
  display: flex;
  margin-top: var(--section-space);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid #3a443c;
  background: rgba(240, 236, 218, 0.04);
}

.tourism-cta h3 {
  max-width: 52rem;
  margin-bottom: 0;
}

.journey-heading {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.journey-image {
  margin: 0;
}

/* Native 1800x1198. The sunrise, the deck and the volcanoes are the point of
   this photograph, and a portrait crop removed all three. 3/2 is its own ratio. */
.journey-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.timeline-wrap {
  display: grid;
  margin-top: var(--section-space);
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(3rem, 8vw, 8rem);
}

.timeline {
  border-top: 1px solid var(--rule);
}

.timeline article {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.timeline time {
  color: var(--accent);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.timeline h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 400;
}

.timeline p {
  margin: 0.2rem 0 0;
  color: var(--ink-muted);
  font-size: 0.77rem;
}

.teaching-record {
  position: sticky;
  top: 7rem;
  align-self: start;
  padding: 2rem;
  border: 1px solid var(--outline);
  background: var(--surface);
}

.record-group {
  margin-top: 2rem;
}

.record-group h4 {
  margin-bottom: 0.7rem;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.record-group p {
  display: flex;
  margin: 0;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.72rem;
}

.record-group time {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.archive-section {
  padding-block: var(--section-space);
  border-block: 1px solid var(--rule);
  overflow: hidden;
}

.archive-heading {
  display: flex;
  padding-block: 0 3rem;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.archive-heading h2 {
  margin-bottom: 0;
}

.archive-heading > p {
  max-width: 24rem;
  color: var(--ink-muted);
}

.archive-scroller {
  display: flex;
  gap: 0.85rem;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.archive-card {
  width: clamp(16rem, 26vw, 24rem);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  scroll-snap-align: start;
  transition: transform 180ms ease;
}

.archive-card:hover {
  transform: translateY(-4px);
}

.archive-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.archive-note {
  padding-block: 2rem 0;
}

.archive-note p {
  display: flex;
  max-width: 35rem;
  gap: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
}

.archive-note span {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------
   Players — cover art is a facade; the third-party frame is only
   fetched once someone presses play.
   --------------------------------------------------------------- */

.player-stack {
  display: grid;
  gap: 1rem;
}

.player {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--outline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.player-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.player-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease, filter 180ms ease;
}

.player-facade:hover img {
  transform: scale(1.02);
  filter: brightness(0.92);
}

.player-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-plot);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

.player-glyph::before {
  width: 0;
  height: 0;
  border-top: 0.52rem solid transparent;
  border-bottom: 0.52rem solid transparent;
  border-left: 0.85rem solid #17120a;
  content: "";
  margin-left: 0.22rem;
}

.player-facade:hover .player-glyph {
  transform: translate(-50%, -50%) scale(1.06);
}

.player-meta {
  padding: 1.35rem 1.5rem 1.6rem;
}

.player-meta h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  line-height: 1.12;
}

.player-meta > p:not(.eyebrow) {
  max-width: 40rem;
  margin-bottom: 0.85rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.player-video .player-facade img {
  aspect-ratio: 16 / 9;
}

.player-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.player-audio {
  grid-template-columns: 10.5rem 1fr;
  align-items: stretch;
}

.player-audio .player-facade img {
  aspect-ratio: 1 / 1;
}

.player-audio .player-glyph {
  width: 3rem;
  height: 3rem;
}

.player-audio .player-glyph::before {
  border-top-width: 0.38rem;
  border-bottom-width: 0.38rem;
  border-left-width: 0.62rem;
}

.player-audio .player-meta {
  align-self: center;
  padding: 1.1rem 1.25rem;
}

.player-audio .player-meta h3 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
}

.player.is-playing {
  grid-template-columns: 1fr;
}

.player iframe {
  display: block;
  width: 100%;
  border: 0;
}

.player-note {
  margin: 0.35rem 0 0;
  color: var(--ink-faint);
  font-size: 0.74rem;
}

/* ---------------------------------------------------------------
   Press — one shape for every published article
   --------------------------------------------------------------- */

.press-block {
  margin-top: 3.5rem;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.press-card {
  display: grid;
  overflow: hidden;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--outline);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 180ms ease;
}

.press-card:hover {
  border-color: var(--accent-outline);
}

.press-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 500ms ease;
}

.press-card:hover img {
  transform: scale(1.03);
}

.press-card > div {
  padding: 1.1rem 1.25rem 1.35rem;
}

.press-card h3 {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  line-height: 1.18;
}

.press-go {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.follow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms ease;
}

.follow-strip:hover {
  border-color: var(--accent-outline);
}

.follow-strip strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.follow-strip small {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.about-role {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.about-role a {
  color: var(--accent);
  text-decoration: none;
}

.about-role a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Studios, and the quiet cross-links between destinations
   --------------------------------------------------------------- */

.venue-block {
  display: grid;
  margin-top: 4.5rem;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.venue-heading h3 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.venue-heading > p:last-child {
  max-width: 24rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.venue-list {
  display: grid;
  align-content: start;
}

.venue-row {
  display: grid;
  min-height: 3.5rem;
  grid-template-columns: 0.55rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding-block: 0.9rem;
  border-top: 1px solid var(--rule);
}

.venue-row:first-child {
  border-top: 0;
}

.venue-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--series-color, var(--accent-plot));
}

.venue-row strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 650;
}

.venue-row small {
  display: block;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.venue-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.venue-row a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.venue-row a:hover {
  text-decoration: underline;
}

.schedule-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.schedule-alt p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.about-more,
.section-next {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.about-more > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}

.about-more a,
.section-next a {
  display: block;
  padding-block: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}

.about-more strong,
.section-next strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.about-more strong::after,
.section-next strong::after {
  color: var(--accent);
  content: " ↓";
  font-size: 0.8em;
}

.about-more small,
.section-next small {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.about-more a:hover strong,
.section-next a:hover strong {
  color: var(--accent);
}

.partner-index {
  margin-top: 4rem;
  border-block: 1px solid var(--rule);
}

.partner-index summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  list-style: none;
}

.partner-index summary strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
}

.partner-index summary > span:last-child {
  color: var(--accent);
  font-size: 1.8rem;
}

.partner-index[open] summary > span:last-child {
  transform: rotate(45deg);
}

.name-cloud {
  display: flex;
  padding: 1.5rem 0 2.5rem;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.name-cloud span {
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--outline);
  border-radius: 10rem;
  color: var(--ink-muted);
  font-size: 0.67rem;
}

.travel-band {
  position: relative;
  min-height: 75svh;
  overflow: hidden;
}

.travel-band::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 15, 30, 0.76), rgba(13, 15, 30, 0.12));
  content: "";
}

.travel-band > img {
  width: 100%;
  height: 75svh;
  object-fit: cover;
  object-position: 50% 38%;
}

.travel-band > div {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--gutter);
  color: #fff;
  transform: translateY(-50%);
}

.travel-band .eyebrow {
  color: #e8b34b;
}

.travel-band h2 {
  margin-bottom: 2rem;
}

/* A closing statement, not an instrument. This section used to carry a
   decorative ring with a pulsing dot — concentric circles and a hand angled at
   -42 degrees, encoding nothing. MERIDIAN-LANGUAGE.md is explicit that a ring
   is never ornament and that motion marks live state only, so it is gone. */
.contact-section {
  display: grid;
  padding: var(--section-space) var(--gutter);
  border-top: 1px solid var(--rule);
}

.contact-copy {
  max-width: 47rem;
}

.contact-copy h2 {
  margin-bottom: 2rem;
}

.contact-copy > p:not(.eyebrow) {
  max-width: 36rem;
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
}

.site-footer {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1.2fr;
  gap: 2rem;
  align-items: end;
  padding: 3rem var(--gutter);
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.footer-brand img {
  width: 5rem;
  height: auto;
  filter: brightness(0);
}

:root[data-theme="dark"] .footer-brand img {
  filter: none;
}

.footer-brand p,
.footer-note {
  margin: 0.8rem 0 0;
  color: var(--ink-muted);
  font-size: 0.68rem;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
}

.footer-links a {
  color: var(--ink-muted);
  font-size: 0.68rem;
}

.lightbox {
  max-width: min(92vw, 58rem);
  padding: 0;
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(13, 15, 30, 0.88);
  backdrop-filter: blur(10px);
}

.lightbox img {
  max-height: 88vh;
}

.lightbox button {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(13, 15, 30, 0.5);
  color: #fff;
  font-size: 1.5rem;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .primary-nav a,
  .nav-more {
    letter-spacing: 0.16em;
  }

  .primary-nav a {
    font-size: 0.58rem;
  }

  .event-feature {
    grid-template-columns: 1fr;
  }

  .event-feature-image {
    max-height: none;
  }

  .offer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .benefit-grid {
    grid-template-columns: 1fr 1fr;
  }

  .benefit-grid article:nth-child(2) {
    border-right: 0;
  }

  .benefit-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rule);
  }
}

@media (max-width: 940px) {
  .site-header {
    grid-template-columns: auto 1fr;
  }

  .header-actions {
    justify-self: end;
  }

  .primary-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
  }
}

@media (max-width: 1100px) {
  .press-grid {
    grid-template-columns: 1fr 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .venue-block {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 860px) {
  .player-pair,
  .press-grid,
  .about-more > div,
  .feature-band {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-band-image img {
    max-height: none;
  }

  .player-audio {
    grid-template-columns: 8rem 1fr;
  }

  .about-grid,
  .team-band,
  .schedule-intro,
  .event-feature-grid,
  .hot-method-section,
  .corporate-intro,
  .retreat-hero,
  .destination-panel,
  .journey-heading,
  .timeline-wrap {
    grid-template-columns: 1fr;
  }

  .about-grid {
    gap: 3rem;
  }

  .editorial-image {
    max-width: 36rem;
  }

  .schedule-intro {
    gap: 1rem;
  }

  .event-feature-grid {
    gap: 1rem;
  }

  .event-compact {
    min-height: 19rem;
  }

  .hot-method-visual {
    position: relative;
    height: auto;
  }

  .corporate-intro,
  .mentoring-callout {
    gap: 1rem;
  }

  .mentoring-callout {
    grid-template-columns: 1fr;
  }

  .mentoring-callout h3 {
    grid-row: auto;
  }

  .destination-heading,
  .teaching-record {
    position: static;
  }

  .journey-image {
    max-width: 40rem;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .footer-note {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  :root {
    --header-h: 4.2rem;
  }

  /* Seven columns still have to fit a 360px screen. */
  .day-rail {
    gap: 0.25rem;
  }

  .day-rail button {
    min-height: 3.6rem;
    padding: 0.4rem 0.1rem;
    border-radius: 8px;
  }

  .rail-day {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }

  .rail-date {
    font-size: 0.92rem;
  }

  .rail-marks i {
    width: 4px;
    height: 4px;
  }

  .hero-content {
    padding-bottom: 7rem;
  }

  .hero h1 {
    font-size: clamp(4rem, 22vw, 6.5rem);
  }

  .hero-credentials {
    font-size: 0.76rem;
  }

  .hero-scroll {
    display: none;
  }

  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .editorial-image {
    min-width: 0;
  }

  .service-index {
    padding-bottom: 0.5rem;
    overflow-x: auto;
  }

  .service-index button {
    flex: 0 0 auto;
  }

  .offer-grid,
  .benefit-grid,
  .package-grid,
  .retreat-types,
  .price-pair,
  .workshop-facts,
  .workshop-curriculum {
    grid-template-columns: 1fr;
  }

  .benefit-grid article,
  .benefit-grid article:nth-child(2),
  .benefit-grid article:last-child,
  .package-grid article,
  .retreat-types article,
  .retreat-types article:nth-child(even) {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .retreat-types article {
    border-color: #303832;
  }

  .tourism-cta,
  .archive-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .player-audio {
    grid-template-columns: 1fr;
  }

  .player-audio .player-facade img {
    max-height: 16rem;
  }

  .agenda-row {
    grid-template-columns: 3.6rem 1fr auto;
  }

  .timeline article {
    grid-template-columns: 4.7rem 1fr;
  }

  .contact-section {
    padding-inline: var(--gutter);
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-note {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}