/*
 * matdufour.com, Design System v1.0
 * Built: June 2026, co-founder session W3E
 * Identity: Vertigo v2.0 by Mat Dufour
 *
 * DO NOT use raw hex values in component CSS when a semantic token exists.
 * DO NOT declare :root variables inline per file, import this file instead.
 * Minimum text size: 11px. No exceptions.
 *
 * Rule: amber never as body text on light surfaces.
 * Rule: body text on Parchment always uses Ocean.
 * Rule: body text on Ocean uses Parchment at min 82% opacity.
 * Rule: Stone only for captions, dates, attributions at 12px or smaller.
 */

/* ============================================================
   FONTS
   Self-hosted since versions/v1-launch-mechanics (Sept 17 2026): the
   files live in assets/fonts/ and the @font-face rules in css/fonts.css.
   No request leaves the site for typography any more. To fall back to
   Google Fonts, swap the two lines below.
   ============================================================ */

@import url('fonts.css');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;1,600&family=Source+Serif+4:ital,wght@0,300;0,400;1,300;1,400&display=swap'); */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

  /* Raw palette */
  --palette-ocean:     #1A2E3F;
  --palette-parchment: #F2EDE4;
  --palette-amber:     #C4933A;
  --palette-stone:     #8C7355;

  /* Semantic color tokens */
  --bg-dark:           var(--palette-ocean);
  --bg-light:          var(--palette-parchment);
  --bg-light-subtle:   rgba(26, 46, 63, 0.03);

  --text-primary:       var(--palette-ocean);
  --text-primary-light: rgba(242, 237, 228, 0.92);
  --text-secondary:     var(--palette-stone);
  --text-inverted:      var(--palette-parchment);
  --accent:             var(--palette-amber);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-quote:   'Source Serif 4', Georgia, serif;

  /* Type scale, mobile first */
  --text-micro: 11px;
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   52px;
  --text-hero:  60px;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* Layout */
  --max-width:     1200px;
  --content-width: 720px;
  --nav-height:    64px;
  --band-height:   36px;                                     /* scroll progress band, above the nav */
  --band-fill:     3px;                                      /* its amber fill */
  --chrome-height: calc(var(--band-height) + var(--nav-height));
  --hairline-dark:  rgba(26, 46, 63, 0.10);
  --hairline-light: rgba(242, 237, 228, 0.12);

  /* Amber rule */
  --amber-rule-weight:        1.5px;
  --amber-rule-weight-quote:  2.5px;
  --amber-rule-short:         30px;

  /* Misc */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 2px 16px rgba(26, 46, 63, 0.08);
}

@media (min-width: 768px) {
  :root {
    --text-2xl:  40px;
    --text-3xl:  52px;
    --text-4xl:  64px;
    --text-hero: 80px;
  }
}


/* ============================================================
   RESET
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--chrome-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
input, textarea, select { font-family: var(--font-body); font-size: var(--text-base); }


/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container--narrow { max-width: var(--content-width); }

.section      { padding: var(--space-2xl) var(--space-md); }
.section--sm  { padding: var(--space-xl)  var(--space-md); }
.section--lg  { padding: var(--space-3xl) var(--space-md); }

.surface-dark        { background-color: var(--bg-dark);         color: var(--text-primary-light); }
.surface-light       { background-color: var(--bg-light);        color: var(--text-primary); }
.surface-light-subtle{ background-color: var(--bg-light-subtle); color: var(--text-primary); }

.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.text-center { text-align: center; }


/* ============================================================
   TYPOGRAPHY: LIGHT
   ============================================================ */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600; font-style: italic;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600; font-style: italic;
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600; font-style: italic;
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg); font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* Section label, Ocean on light, Amber on dark */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
}
.surface-dark .label { color: var(--accent); }

p { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); }
p + p { margin-top: var(--space-md); }
.lead { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--text-primary); }

/* Caption: Stone, 12px, light only */
.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}
.meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* ============================================================
   TYPOGRAPHY: DARK OVERRIDES
   ============================================================ */

.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4,
.surface-dark .h1, .surface-dark .h2, .surface-dark .h3 { color: var(--text-inverted); }
.surface-dark p, .surface-dark .lead { color: var(--text-primary-light); }
.surface-dark .caption, .surface-dark .meta { color: rgba(242, 237, 228, 0.55); }


/* ============================================================
   PULL QUOTE
   ============================================================ */

blockquote, .pull-quote {
  font-family: var(--font-quote);
  font-style: italic; font-size: var(--text-xl); font-weight: 300;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  border-left: var(--amber-rule-weight-quote) solid var(--accent);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
}
.surface-dark blockquote, .surface-dark .pull-quote { color: var(--text-primary-light); }

blockquote cite, .pull-quote cite {
  display: block; margin-top: var(--space-sm);
  font-style: normal; font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.surface-dark blockquote cite { color: rgba(242, 237, 228, 0.55); }


/* ============================================================
   AMBER RULE
   ============================================================ */

.amber-rule {
  display: block;
  width: var(--amber-rule-short);
  height: var(--amber-rule-weight);
  background-color: var(--accent);
  border: none;
  margin: var(--space-xs) 0;
}
.amber-rule--full   { width: 100%; margin: var(--space-lg) 0; }
.amber-rule--center { margin-left: auto; margin-right: auto; }

hr.amber-divider {
  border: none;
  height: var(--amber-rule-weight);
  background-color: var(--accent);
  width: 60px;
  margin: var(--space-xl) auto;
}


/* ============================================================
   V MOTIF (ghost, CSS)
   ============================================================ */

/*
 * Add .v-motif to any section that should carry the brand graphic.
 * The section must have position: relative; overflow: hidden (handled here).
 * Dark surface: 14% opacity. Light surface: 7% opacity.
 * The amber dot (::after) sits at the approximate V vertex.
 * All child content auto-stacks above via z-index: 2.
 */

.v-motif {
  position: relative;
  overflow: hidden;
}
.v-motif::before {
  content: 'V';
  position: absolute;
  top: -10%; right: -8%;
  font-family: var(--font-display);
  font-size: clamp(300px, 55vw, 700px);
  font-weight: 600; font-style: italic;
  line-height: 1;
  color: var(--palette-parchment);
  opacity: 0.14;
  pointer-events: none; user-select: none; z-index: 0;
}
.v-motif::after {
  content: '';
  position: absolute;
  top: calc(55% - 5px);
  right: calc(12%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--accent);
  pointer-events: none; z-index: 1;
}
.surface-light.v-motif::before {
  color: var(--palette-ocean);
  opacity: 0.07;
}
.v-motif > * { position: relative; z-index: 2; }


/* ============================================================
   WORDMARK
   ============================================================ */

.wordmark { display: inline-flex; flex-direction: column; gap: 0; }

.wordmark__name {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; font-style: italic;
  line-height: 1; color: var(--palette-parchment);
}
.wordmark__rule {
  display: block;
  width: var(--amber-rule-short);
  height: var(--amber-rule-weight);
  background-color: var(--accent);
  margin: 6px 0 5px;
}
.wordmark__tagline {
  font-family: var(--font-body);
  font-size: var(--text-micro); font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.60);
  line-height: 1;
  white-space: nowrap;
}
.wordmark--light .wordmark__name { color: var(--palette-ocean); }
.wordmark--light .wordmark__tagline { color: rgba(26, 46, 63, 0.55); }


/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
  position: fixed; top: var(--band-height); left: 0; right: 0;
  height: var(--nav-height);
  background-color: var(--bg-dark);
  z-index: 100;
  border-bottom: 1px solid rgba(242, 237, 228, 0.08);
}
.nav__inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md);
}
.nav__links { display: none; gap: var(--space-lg); align-items: center; }
@media (min-width: 768px) { .nav__links { display: flex; } }

.nav__link {
  font-size: var(--text-sm); font-weight: 500;
  color: rgba(242, 237, 228, 0.70);
  letter-spacing: 0.01em;
  transition: color var(--transition-fast);
}
.nav__link:hover, .nav__link--active { color: var(--text-inverted); }

.nav__right { display: flex; align-items: center; gap: var(--space-md); }

.lang-switcher { display: flex; gap: var(--space-xs); align-items: center; }
.lang-switcher__btn {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(242, 237, 228, 0.40);
  transition: color var(--transition-fast);
}
.lang-switcher__btn:hover, .lang-switcher__btn--active { color: var(--text-inverted); }

@media (max-width: 767px) {
  .nav .lang-switcher { display: none; }
  .nav__right { gap: var(--space-sm); }
}
@media (max-width: 480px) {
  .nav .btn-book { padding: 9px 12px; font-size: 13px; }
  .nav__inner { gap: var(--space-xs); padding: 0 16px; }
}
.nav__hamburger { display: flex; flex-direction: column; gap: 5px; padding: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
@media (min-width: 768px) { .nav__hamburger { display: none; } }
.nav__hamburger span { display: block; width: 22px; height: 1.5px; background-color: var(--text-inverted); }

.nav__mobile-menu {
  display: none; position: fixed;
  top: var(--chrome-height); left: 0; right: 0; bottom: 0;
  background-color: var(--bg-dark);
  flex-direction: column;
  padding: var(--space-xl) var(--space-md);
  gap: var(--space-lg); z-index: 99;
}
.nav__mobile-menu.is-open { display: flex; }
.nav__mobile-link { font-family: var(--font-display); font-size: var(--text-2xl); font-style: italic; color: var(--text-inverted); }
.nav__mobile-lang { margin-top: auto; display: flex; gap: var(--space-md); }

.nav-offset { padding-top: var(--chrome-height); }


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.02em; padding: 12px 28px; border-radius: 2px;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}

/* Parchment on Ocean, dark surfaces primary */
.btn-primary {
  background-color: var(--palette-parchment); color: var(--palette-ocean);
  border: 1px solid var(--palette-parchment);
}
.btn-primary:hover {
  background-color: transparent; color: var(--palette-parchment);
}

/* Amber outline, dark surfaces secondary */
.btn-secondary {
  background-color: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-secondary:hover { background-color: var(--accent); color: var(--palette-ocean); }

/* Ghost text, dark surfaces */
.btn-ghost {
  background: transparent; color: rgba(242, 237, 228, 0.65);
  border: none; padding-left: 0; padding-right: 0; gap: var(--space-xs);
}
.btn-ghost::after { content: '→'; }
.btn-ghost:hover { color: var(--text-inverted); }

/* Amber, persistent nav CTA */
.btn-book {
  background-color: var(--accent); color: var(--palette-ocean);
  border: 1px solid var(--accent); font-weight: 600; padding: 10px 20px;
}
.btn-book:hover {
  background-color: transparent; color: var(--accent);
}

/* Amber fill, light-surface CTA (ocean text, 5.0:1). Inverts to ocean on hover. */
.btn-amber {
  background-color: var(--accent); color: var(--palette-ocean);
  border: 1px solid var(--accent);
}
.btn-amber:hover {
  background-color: var(--palette-ocean); color: var(--palette-parchment);
  border-color: var(--palette-ocean);
}

/* Text link, light surface */
.btn-link {
  background: none; border: none; color: var(--text-primary);
  font-size: var(--text-sm); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: 100svh; display: flex; align-items: center;
  background-color: var(--bg-dark);
  padding: var(--space-3xl) var(--space-md) var(--space-2xl);
}
.hero__inner { max-width: var(--content-width); margin: 0 auto; }

.hero__kicker {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-md);
}
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-hero));
  font-weight: 600; font-style: italic;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverted);
  margin-bottom: var(--space-md);
}
.hero__subline {
  font-size: var(--text-md); line-height: var(--leading-loose);
  color: var(--text-primary-light); max-width: 540px;
  margin-bottom: var(--space-lg);
}
.hero__actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
@media (min-width: 480px) {
  .hero__actions { flex-direction: row; align-items: center; gap: var(--space-md); }
}


/* ============================================================
   SOCIAL PROOF STRIP
   ============================================================ */

.proof-strip {
  display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center;
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(242, 237, 228, 0.08);
  border-bottom: 1px solid rgba(242, 237, 228, 0.08);
}
.proof-strip__number {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-style: italic; font-weight: 600;
  color: var(--text-inverted); line-height: 1;
}
.proof-strip__label {
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: rgba(242, 237, 228, 0.50);
}
.logo-strip { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; }
.logo-strip__item {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: rgba(242, 237, 228, 0.35);
}


/* ============================================================
   EXCERPT
   ============================================================ */

.excerpt {
  background-color: var(--bg-light-subtle);
  border-left: var(--amber-rule-weight-quote) solid var(--accent);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}
.excerpt__label {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: var(--space-xs);
}
.excerpt__text {
  font-family: var(--font-quote); font-style: italic;
  font-size: var(--text-md); line-height: var(--leading-loose);
  color: var(--text-primary);
}


/* ============================================================
   NEWSLETTER SUBSCRIBE
   ============================================================ */

.subscribe-section { text-align: center; padding: var(--space-2xl) var(--space-md); }
.subscribe-section h2 { margin-bottom: var(--space-sm); }
.subscribe-section p { color: rgba(242, 237, 228, 0.70); margin-bottom: var(--space-lg); }
.subscribe-embed { max-width: 480px; margin: 0 auto; }

.subscribe-form { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 400px; margin: 0 auto; }
@media (min-width: 480px) { .subscribe-form { flex-direction: row; } }
.subscribe-form input[type="email"] {
  flex: 1; padding: 12px 16px;
  background-color: rgba(242, 237, 228, 0.08);
  border: 1px solid rgba(242, 237, 228, 0.20);
  border-radius: 2px; color: var(--text-inverted);
  font-size: var(--text-sm);
}
.subscribe-form input[type="email"]::placeholder { color: rgba(242, 237, 228, 0.35); }
.subscribe-form input[type="email"]:focus { outline: none; border-color: var(--accent); }


/* ============================================================
   THREE ACCELERATIONS
   ============================================================ */

.accelerations { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 768px) { .accelerations { grid-template-columns: repeat(3, 1fr); } }

.acceleration__number {
  font-family: var(--font-display); font-size: var(--text-4xl);
  font-style: italic; font-weight: 600;
  color: var(--text-primary); line-height: 1; opacity: 0.25; /* ocean on light, a11y */
}
.surface-dark .acceleration__number { color: var(--accent); }
.acceleration__title {
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-primary); margin: var(--space-xs) 0;
}
.surface-dark .acceleration__title { color: var(--text-inverted); }


/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonial {
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(26, 46, 63, 0.08);
}
.surface-dark .testimonial { border-top-color: rgba(242, 237, 228, 0.08); }
.testimonial__text {
  font-family: var(--font-quote); font-style: italic;
  font-size: var(--text-md); line-height: var(--leading-loose);
  margin-bottom: var(--space-md);
}
.testimonial__author { display: flex; align-items: center; gap: var(--space-sm); }
.testimonial__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial__name {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-primary); line-height: 1.2;
}
.surface-dark .testimonial__name { color: var(--text-inverted); }
.testimonial__role { font-size: var(--text-xs); color: var(--text-secondary); }
.surface-dark .testimonial__role { color: rgba(242, 237, 228, 0.50); }


/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq { max-width: var(--content-width); margin: 0 auto; }
.faq__item {
  border-top: 1px solid rgba(26, 46, 63, 0.08);
  padding: var(--space-md) 0;
}
.surface-dark .faq__item { border-top-color: rgba(242, 237, 228, 0.08); }
.faq__question {
  font-size: var(--text-base); font-weight: 600;
  color: var(--text-primary);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-md); width: 100%; text-align: left; padding: 0;
  background: none; border: none; cursor: pointer;
}
.surface-dark .faq__question { color: var(--text-inverted); }
.faq__question::after {
  content: '+'; font-size: var(--text-lg); font-weight: 400;
  color: var(--text-primary); flex-shrink: 0; line-height: 1; /* ocean on light, a11y */
}
.surface-dark .faq__question::after { color: var(--accent); }
.faq__item.is-open .faq__question::after { content: '−'; }
.faq__answer {
  display: none; margin-top: var(--space-sm);
  font-size: var(--text-base); line-height: var(--leading-loose);
  color: var(--text-primary);
}
.surface-dark .faq__answer { color: var(--text-primary-light); }
.faq__item.is-open .faq__answer { display: block; }


/* ============================================================
   FOOTER
   ============================================================ */

.footer { background-color: var(--bg-dark); padding: var(--space-xl) var(--space-md) var(--space-lg); }
.footer__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--space-lg);
}
@media (min-width: 768px) {
  .footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer__link {
  font-size: var(--text-sm); color: rgba(242, 237, 228, 0.55);
  transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--text-inverted); }
.footer__bottom {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(242, 237, 228, 0.08);
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer__copy { font-size: var(--text-xs); color: rgba(242, 237, 228, 0.35); }


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.skip-link {
  position: absolute; top: -40px; left: var(--space-md);
  background-color: var(--accent); color: var(--palette-ocean);
  padding: 8px 16px; font-size: var(--text-sm); font-weight: 600;
  z-index: 200; transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-xs); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }

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

.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;
}


/*
 * JS HOOKS (copy into a <script> tag or main.js):
 *
 * FAQ accordion:
 *   document.querySelectorAll('.faq__question').forEach(btn => {
 *     btn.addEventListener('click', () => btn.closest('.faq__item').classList.toggle('is-open'));
 *   });
 *
 * Mobile nav:
 *   document.querySelector('.nav__hamburger')?.addEventListener('click', () => {
 *     document.querySelector('.nav__mobile-menu')?.classList.toggle('is-open');
 *   });
 */


/* ============================================================
   MEDIA COMPONENTS
   Added session 36 (30 Jul 2026): images, YouTube facade, subscribe bar.
   Behaviour for the last two lives in js/site.js.
   ============================================================ */

/* ── Images ──────────────────────────────────────────────────
   Usage:
     <figure class="figure">
       <img src="assets/photo.jpg" alt="What it shows" width="1600" height="1000" loading="lazy">
       <figcaption>Optional caption.</figcaption>
     </figure>
   Always give width and height. They are the intrinsic pixel size of the
   file and they stop the page from jumping as images load.
   Always write a real alt, or alt="" if the image is purely decorative.
*/

.figure { margin: var(--space-lg) 0; max-width: var(--content-width); }
.figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm);
}
.figure figcaption {
  font-size: var(--text-xs); line-height: var(--leading-snug);
  color: var(--text-secondary); margin-top: var(--space-sm);
}
.surface-dark .figure figcaption { color: rgba(242, 237, 228, 0.50); }

.figure--wide { max-width: 100%; }
.figure--inline { max-width: 380px; }

/* ── YouTube facade ──────────────────────────────────────────
   Usage:
     <div class="video" data-youtube="VIDEO_ID" data-title="What this is">
       <img src="assets/video-thumb.jpg" alt="">
     </div>
   Nothing loads from YouTube until someone clicks. See js/site.js.
*/

.video {
  position: relative; aspect-ratio: 16 / 9;
  max-width: var(--content-width);
  margin: var(--space-lg) 0;
  background-color: var(--bg-dark);
  border-radius: var(--radius-sm); overflow: hidden;
  cursor: pointer;
}
.video img, .video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: none; display: block;
}
.video__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background-color: var(--accent); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition-normal), background-color var(--transition-fast);
}
.video__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.video__triangle {
  width: 0; height: 0;
  border-left: 20px solid var(--palette-ocean);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}
.video__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-md);
  font-size: var(--text-sm); color: var(--text-inverted);
  background: linear-gradient(to top, rgba(26,46,63,0.85), rgba(26,46,63,0));
  pointer-events: none;
}
.video.is-playing { cursor: default; }

/* ── Subscribe bar ───────────────────────────────────────────
   A quiet strip that appears once someone has read most of a page.
   Hidden until js/site.js adds .is-visible, so it never appears
   for someone with JS off, and it never covers content on load.
*/

.subscribe-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background-color: var(--bg-dark);
  border-top: var(--amber-rule-weight) solid var(--accent);
  padding: var(--space-sm) var(--space-md);
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -8px 30px rgba(26, 46, 63, 0.18);
}
.subscribe-bar.is-visible { transform: translateY(0); }

.subscribe-bar__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
}
.subscribe-bar__text {
  font-size: var(--text-sm); line-height: var(--leading-snug);
  color: var(--text-primary-light); flex: 1 1 240px;
}
.subscribe-bar__text strong { font-weight: 600; color: var(--text-inverted); }
.subscribe-bar__actions { display: flex; align-items: center; gap: var(--space-sm); }
.subscribe-bar__close {
  background: none; border: none; cursor: pointer;
  font-size: var(--text-lg); line-height: 1;
  color: rgba(242, 237, 228, 0.45);
  padding: var(--space-xs); min-width: 44px; min-height: 44px;
}
.subscribe-bar__close:hover { color: var(--text-inverted); }

@media (max-width: 600px) {
  .subscribe-bar__text { font-size: var(--text-xs); }
  .subscribe-bar__inner { gap: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .subscribe-bar { transition: none; }
}

/* ── Substack embed ──────────────────────────────────────────
   Substack styles the inside of the iframe. All we control is the frame.
*/

.substack-embed {
  width: 100%; max-width: 520px; margin: 0 auto;
  border: 1px solid rgba(242, 237, 228, 0.15);
  border-radius: var(--radius-sm); overflow: hidden;
  background-color: var(--bg-light);
}
.substack-embed iframe { width: 100%; border: none; display: block; }


/* ============================================================
   SITE CHROME v2, added in versions/v2-homepage-build (Sept 17 2026)
   The scroll progress band, the ghost V with its vertex dot, the two
   page architectures (the spread and the quiet page), the chapter
   pattern, and the reusable offer block. Behaviour lives in js/site.js.
   ============================================================ */

/* ── Progress band ───────────────────────────────────────────
   Fixed to the very top, above the nav, on every page. A small amber
   V at the left, the Vertigo tagline at rest, the current chapter name
   while reading (pages that have [data-chapter] sections), a percentage
   at the right, and an amber fill that grows along the bottom edge.
   Sized in versions/v2: 36px band, 3px fill (Codex original 30/2).
*/
.progress-band {
  position: fixed; top: 0; left: 0; right: 0; height: var(--band-height);
  background-color: var(--bg-dark); z-index: 200;
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0 var(--space-md);
}
.progress-band__v {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 17px; line-height: 1; color: var(--accent); user-select: none;
  position: relative;
}
.progress-band__v::after {              /* the vertex dot, tiny, on the band's V too */
  content: ''; position: absolute; left: 37.5%; top: 91.8%;
  width: 3px; height: 3px; border-radius: 50%;
  background-color: var(--accent); transform: translate(-50%, -50%);
}
.progress-band__now {
  font-size: var(--text-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: rgba(242, 237, 228, 0.65); transition: opacity 0.25s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.progress-band__now.is-swapping { opacity: 0; }
.progress-band__pct {
  margin-left: auto; font-size: var(--text-micro); letter-spacing: var(--tracking-wide);
  color: rgba(242, 237, 228, 0.45); font-variant-numeric: tabular-nums;
}
.progress-band__fill {
  position: absolute; left: 0; bottom: 0; height: var(--band-fill); width: 0%;
  background-color: var(--accent); transition: width 120ms ease-out;
}
.nav { border-bottom: 1px solid var(--hairline-light); }

/* ── Ghost V with its vertex dot ─────────────────────────────
   Usage, inside any position: relative; overflow: hidden container:
     <span class="ghost-v" aria-hidden="true">V<span class="ghost-v__dot"></span></span>
   Playfair Display Italic 600 "V": the vertex is a small flat foot, by
   design, at 37.5% of the glyph box width and 91.8% of its height at
   line-height 1. The dot is a child of the same box, so it sits on the
   vertex at every size. Alpha is on the colour, not on opacity, so the
   dot stays full amber. Size and position are set per container below.
*/
.ghost-v {
  position: absolute; pointer-events: none; user-select: none; z-index: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  line-height: 1; display: block;
  color: rgba(242, 237, 228, 0.10);
  transform: translateY(var(--v-shift, 0px));
}
.surface-light .ghost-v, .ghost-v--light { color: rgba(26, 46, 63, 0.07); }
.ghost-v__dot {
  position: absolute; left: 37.5%; top: 91.8%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--accent);
}
.ghost-v__dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background-color: var(--accent); animation: vertexPing 3.4s ease-out infinite;
}
@keyframes vertexPing { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(4.5); } }

/* ── The spread (home, about, vertigo) ───────────────────────
   Two facing panels on desktop: the dark panel pinned left, the parchment
   reading column scrolling right. Below 960px they stack.
*/
.spread { padding-top: var(--chrome-height); }
@media (min-width: 960px) { .spread { display: grid; grid-template-columns: 44% minmax(0, 1fr); } }

.panel {
  position: relative; overflow: hidden;
  background-color: var(--bg-dark); color: var(--text-primary-light);
  padding: var(--space-3xl) var(--space-md) var(--space-2xl);
  min-height: calc(100svh - var(--chrome-height));
  display: flex; flex-direction: column; justify-content: center;
  --panel-h: calc(100svh - var(--chrome-height));
}
@media (min-width: 960px) {
  .panel {
    position: sticky; top: var(--chrome-height);
    height: calc(100vh - var(--chrome-height));
    --panel-h: calc(100vh - var(--chrome-height));
    padding: var(--space-xl);
    border-right: 1px solid var(--hairline-light);
  }
}
@media (min-width: 1200px) { .panel { padding: var(--space-xl) var(--space-2xl); } }
.panel > * { position: relative; z-index: 2; }
.panel > .ghost-v {
  position: absolute; z-index: 0;
  font-size: calc(var(--panel-h) * 1.1);
  top: calc(var(--panel-h) * -0.268);
  right: -10%;
}
@media (max-width: 959px) { .panel > .ghost-v { right: -22%; } }

.panel__kicker {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-md);
}
.panel__headline {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(40px, 8vw, 84px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--text-inverted); margin-bottom: var(--space-md);
}
@media (min-width: 960px) { .panel__headline { font-size: clamp(38px, 4.2vw, 68px); } }
.panel__sub {
  font-family: var(--font-quote); font-size: var(--text-lg); line-height: var(--leading-loose);
  color: var(--text-primary-light); max-width: 34ch; margin-bottom: var(--space-lg);
}
.panel__actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
@media (min-width: 480px) { .panel__actions { flex-direction: row; align-items: center; gap: var(--space-md); flex-wrap: wrap; } }
.panel__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(242, 237, 228, 0.65); margin-bottom: var(--space-lg);
}


/* Compact panel for short desktop viewports (laptops at 1366x768, 1280x720):
   the panel is pinned and cannot scroll, so everything in it has to fit. */
@media (min-width: 960px) and (max-height: 900px) {
  .panel { padding-top: var(--space-lg); padding-bottom: var(--space-lg); justify-content: flex-start; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  .panel__headline { font-size: clamp(34px, 3.6vw, 56px); margin-bottom: var(--space-sm); }
  .panel__sub, .panel__sub--about { font-size: var(--text-base); line-height: var(--leading-normal); margin-bottom: var(--space-md); }
  .panel__kicker { margin-bottom: var(--space-sm); }
  .index { margin-top: var(--space-md); padding-top: var(--space-sm); gap: 0; }
  .index__item { padding: 1px 0; font-size: var(--text-micro); }
  .panel__meta { margin-bottom: var(--space-sm); }
  .panel__extra .subscribe-form .btn { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 960px) and (max-height: 800px) {
  .panel { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .panel__headline { font-size: clamp(32px, 3.2vw, 48px); }
  .panel__sub, .panel__sub--about { line-height: 1.5; }
  .index { margin-top: var(--space-sm); }
}
@media (min-width: 960px) and (max-height: 740px) {
  .panel__sub { display: none; }
  .panel__form-meta { display: none; }
  .panel__meta { display: none; }
}

/* Index inside the panel: tracks the reading column's chapters */
.index { display: none; margin-top: var(--space-xl); border-top: 1px solid var(--hairline-light); padding-top: var(--space-md); }
@media (min-width: 960px) { .index { display: flex; flex-direction: column; gap: 4px; } }
.index__item {
  display: flex; align-items: baseline; gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(242, 237, 228, 0.40); background: none; border: none; padding: 4px 0; cursor: pointer; text-align: left;
  transition: color 0.3s ease;
}
.index__num {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: var(--text-sm); text-transform: none; letter-spacing: 0; width: 28px; flex-shrink: 0;
}
.index__item:hover, .index__item.is-active { color: var(--text-inverted); }
.index__item.is-active .index__num { color: var(--accent); }

/* The reading column */
.reading { background-color: var(--bg-light); color: var(--text-primary); min-width: 0; }
.subscribe-form { flex-wrap: wrap; }
.subscribe-form .btn { flex-shrink: 0; }
.chapter { padding: var(--space-2xl) var(--space-md); border-bottom: 1px solid var(--hairline-dark); position: relative; }
@media (min-width: 960px) { .chapter { padding: var(--space-2xl) var(--space-xl); } }
@media (min-width: 1200px) { .chapter { padding: var(--space-3xl) var(--space-2xl); } }
.chapter--last { border-bottom: none; }
.chapter__inner { max-width: 620px; }
.chapter__inner--wide { max-width: 760px; }
.chapter__label {
  display: flex; align-items: baseline; gap: var(--space-sm);
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-primary); margin-bottom: var(--space-lg);
}
.chapter__label .num { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--text-md); text-transform: none; letter-spacing: 0; }
.chapter__label::after { content: ''; flex: 0 0 var(--amber-rule-short); height: var(--amber-rule-weight); background-color: var(--accent); align-self: center; }
.chapter--dark { background-color: var(--bg-dark); color: var(--text-primary-light); border-bottom-color: var(--hairline-light); }
.chapter--dark .chapter__label { color: var(--accent); }
.chapter--dark p { color: var(--text-primary-light); }

/* Reading prose: Source Serif at reading size */
.prose-read p { font-family: var(--font-quote); font-size: var(--text-lg); line-height: 1.7; color: var(--text-primary); }
.prose-read p + p { margin-top: var(--space-md); }
.chapter--dark .prose-read p { color: var(--text-primary-light); }

/* ── The quiet page (coaching, organisations) ────────────────
   Parchment first, one 760px column, slow fades, a dark block or two
   for rhythm, and the amber thread in the left margin on wide screens.
*/
.quiet { padding-top: var(--chrome-height); background-color: var(--bg-light); }
.col { max-width: 760px; margin: 0 auto; padding: 0 var(--space-md); position: relative; z-index: 2; }
.quiet-section { padding: var(--space-2xl) 0; position: relative; }
@media (min-width: 768px) { .quiet-section { padding: var(--space-3xl) 0; } }
.quiet-section--tight { padding-top: 0; }
.quiet-section--dark { background-color: var(--bg-dark); color: var(--text-primary-light); }
.quiet-section--dark .quiet-label { color: var(--accent); }
.quiet-section--dark p { color: var(--text-primary-light); }
.quiet-label {
  display: block; font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-primary); margin-bottom: var(--space-lg);
}
.quiet-rule { display: block; width: var(--amber-rule-short); height: var(--amber-rule-weight); background-color: var(--accent); margin: var(--space-xl) 0; }

.hero-quiet {
  position: relative; overflow: hidden;
  min-height: calc(100svh - var(--chrome-height));
  display: flex; align-items: center;
  padding: var(--space-3xl) 0 var(--space-2xl);
  --hero-h: calc(100svh - var(--chrome-height));
}
.hero-quiet > .ghost-v {
  color: rgba(26, 46, 63, 0.07);
  font-size: calc(var(--hero-h) * 1.1);
  top: calc(var(--hero-h) * -0.268);
  right: -6%;
}
@media (max-width: 767px) { .hero-quiet > .ghost-v { right: -22%; } }
.hero-quiet__kicker {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--space-lg);
}
.hero-quiet__headline {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(40px, 7.5vw, 84px); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--text-primary); margin-bottom: var(--space-lg); max-width: 14ch;
}
.hero-quiet__sub {
  font-family: var(--font-quote); font-size: var(--text-lg); line-height: var(--leading-loose);
  color: var(--text-primary); max-width: 40ch; margin-bottom: var(--space-xl);
}
@media (min-width: 768px) { .hero-quiet__sub { font-size: 21px; } }
.hero-quiet__actions { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
@media (min-width: 480px) { .hero-quiet__actions { flex-direction: row; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } }

/* Long call-to-action labels (Spanish and Italian run 30% longer than English)
   may wrap on phones instead of overflowing the column. */
@media (max-width: 480px) {
  .hero-quiet__actions .btn, .panel__actions .btn, .offer-block__cta.btn, .book__actions .btn, .talk__actions .btn {
    white-space: normal; text-align: center; max-width: 100%; line-height: 1.3;
  }
}

.link-quiet {
  font-size: var(--text-sm); font-weight: 500; color: var(--text-primary);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--accent); text-decoration-thickness: 1.5px;
  transition: text-underline-offset 0.25s ease;
}
.link-quiet:hover { text-underline-offset: 8px; }
.link-quiet--light { color: var(--text-inverted); }
.link-quiet--muted { color: var(--text-secondary); text-decoration-color: rgba(26, 46, 63, 0.25); }

/* The thread: amber line in the left margin, draws with scroll, desktop only */
.thread {
  position: fixed; left: 40px; top: var(--chrome-height); bottom: 0;
  width: 1.5px; background-color: var(--hairline-dark);
  z-index: 5; pointer-events: none; display: none;
}
.thread__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-color: var(--accent); transform-origin: top; transform: scaleY(0);
  transition: transform 120ms ease-out;
}
.marker {
  position: absolute; left: calc(40px - 4.25px); top: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background-color: var(--bg-light); border: 1.5px solid var(--accent);
  transform: translateY(6px); display: none; z-index: 6;
}
.quiet-section--dark .marker { background-color: var(--bg-dark); }
.marker.is-passed { background-color: var(--accent); }
@media (min-width: 1100px) { .thread, .marker { display: block; } }

/* Numbered rows (the accelerations on the home concept, the phases on coaching) */
.rows { border-top: 1px solid var(--hairline-dark); }
.row {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--space-md);
  padding: var(--space-lg) 0; border-bottom: 1px solid var(--hairline-dark); align-items: baseline;
}
@media (min-width: 640px) { .row { grid-template-columns: 96px 1fr; } }
.row__num {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: var(--text-2xl); color: var(--text-primary); line-height: 1; opacity: 0.30;
}
.row__step { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2xs); }
.row__title { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--text-xl); color: var(--text-primary); margin-bottom: var(--space-xs); }
.row__text { font-size: var(--text-base); line-height: var(--leading-loose); color: var(--text-primary); }
.row--compact { grid-template-columns: 44px 1fr; padding: var(--space-md) 0; }
.row--compact .row__num { font-size: var(--text-lg); }
.row--compact .row__title { font-size: var(--text-lg); margin-bottom: 4px; }
.row--compact .row__text { font-size: var(--text-sm); }

/* ── Reusable offer block ────────────────────────────────────
   One component for every product, offer or door on the site.
   See ADDING-A-PRODUCT.md for the copy-and-edit recipe.

     <article class="offer-block">
       <p class="offer-block__num">I</p>                      optional
       <h3 class="offer-block__title">Title</h3>
       <p class="offer-block__text">One or two sentences.</p>
       <p class="offer-block__detail">Optional practical line.</p>
       <a class="btn btn-amber offer-block__cta" href="...">Call to action</a>   optional
     </article>

   Variants: .offer-block--seam (left amber rule, the spread pages),
   default is the top amber rule (the quiet pages). Put several in an
   .offer-grid to lay them out two-up on desktop.
*/
.offer-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 768px) { .offer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-2xl); } }
.offer-grid--stack { grid-template-columns: 1fr; }
.offer-block {
  border-top: var(--amber-rule-weight) solid var(--accent); padding-top: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.offer-block--seam {
  border-top: none; border-left: var(--amber-rule-weight-quote) solid var(--accent);
  padding-top: 0; padding-left: var(--space-md);
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.offer-block--seam:hover { padding-left: var(--space-lg); }
.offer-block__num { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--text-lg); color: var(--text-primary); line-height: 1; opacity: 0.45; }
.offer-block__title { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--text-xl); color: var(--text-primary); }
.offer-block__text { font-size: var(--text-base); line-height: var(--leading-loose); color: var(--text-primary); }
.offer-block__detail { font-size: var(--text-xs); line-height: var(--leading-loose); color: var(--text-secondary); }
.offer-block__cta { align-self: flex-start; margin-top: var(--space-sm); }
.surface-dark .offer-block__num, .chapter--dark .offer-block__num, .quiet-section--dark .offer-block__num { color: var(--accent); opacity: 1; }
.surface-dark .offer-block__title, .chapter--dark .offer-block__title, .quiet-section--dark .offer-block__title { color: var(--text-inverted); }
.surface-dark .offer-block__text, .chapter--dark .offer-block__text, .quiet-section--dark .offer-block__text { color: var(--text-primary-light); }
.surface-dark .offer-block__detail, .chapter--dark .offer-block__detail, .quiet-section--dark .offer-block__detail { color: rgba(242, 237, 228, 0.60); }

/* Light-surface form (subscribe on parchment) */
.form-light { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 480px; }
@media (min-width: 480px) { .form-light { flex-direction: row; } }
.form-light input[type="email"] {
  flex: 1; padding: 14px 16px; min-height: 48px;
  background: transparent; border: 1px solid rgba(26, 46, 63, 0.30);
  border-radius: 2px; color: var(--text-primary); font-size: var(--text-base);
}
.form-light input[type="email"]::placeholder { color: rgba(26, 46, 63, 0.40); }
.form-light input[type="email"]:focus { outline: none; border-color: var(--accent); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ghost-v__dot::after { animation: none; opacity: 0; }
  .progress-band__fill, .thread__fill, .progress-band__now { transition: none; }
}