/* ConsulAI · ink-forest theme
   Deep forest green ground, cream type, one rust-red accent (the guide's pack). */
:root {
  --mh-paper: #1d3427;          /* deep forest green: page ground and copy glow */
  --mh-ground: #2c4535;         /* matches the painted green at the paintings' edges */
  --mh-ink: #efe6cf;            /* cream text */
  --mh-muted: #c7c0a8;
  --mh-accent: #b4532a;         /* rust red: markers, seals, buttons */
  --mh-accent-text: #e59a72;    /* rust tuned for text on green */
  --mh-line: color-mix(in srgb, var(--mh-ink) 22%, transparent);
  --mh-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mh-body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--mh-paper); color: var(--mh-ink); }
body { font-family: var(--mh-body); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; font: inherit; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--mh-accent-text); outline-offset: 3px; }

.boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--mh-paper); transition: opacity .45s;
}
.boot span { color: var(--mh-muted); font: 500 italic 1.3rem/1 var(--mh-display); letter-spacing: .04em; }
.boot.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- Stage ---------- */
.mh-root { min-height: 100vh; }
.mh-stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--mh-ground); }
.mh-shot { position: absolute; inset: 0; overflow: hidden; opacity: 0; will-change: opacity; }
.mh-shot__poster, .mh-shot__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.mh-shot__poster { transition: opacity .2s; }
.mh-shot__poster--next { transition: none; }
.mh-shot__video { z-index: 1; }
.mh-shot__mist {
  position: absolute; inset: -10%; z-index: 2; opacity: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 35% 55%, color-mix(in srgb, var(--mh-ink) 70%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 50% at 70% 40%, color-mix(in srgb, var(--mh-ink) 60%, transparent), transparent 72%),
    radial-gradient(ellipse at center, color-mix(in srgb, #c9cdb6 85%, transparent) 0 40%, color-mix(in srgb, var(--mh-ground) 70%, transparent) 100%);
  filter: blur(18px);
}
.mh-shot.has-video .mh-shot__poster { opacity: 0; }
.mh-shot__fallback {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center;
  background: var(--mh-ground); color: var(--mh-muted);
}
.mh-shot:not(.is-missing) .mh-shot__fallback { opacity: 0; }
.mh-shot__fallback span { color: var(--mh-accent-text); font: 600 .7rem/1 var(--mh-body); letter-spacing: .14em; }
.mh-shot__fallback strong { font: 600 clamp(1.4rem, 2.4vw, 2.2rem)/1.1 var(--mh-display); }

/* Soft ink vignette that melts the painting into the ground. */
.mh-stage::after {
  content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--mh-paper) 55%, transparent) 100%);
}

/* ---------- Chapter copy ---------- */
.mh-copy-layer { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.mh-copy {
  position: absolute; top: 50%; width: min(440px, calc(100vw - 44px));
  padding: clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 36px);
  opacity: 0; transform: translateY(-50%); isolation: isolate;
  color: var(--mh-ink); transition: opacity .08s linear; will-change: opacity; pointer-events: none;
}
/* Edge-free glow of deep green behind the words: no card. */
.mh-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -60px -80px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--mh-paper) 88%, transparent) 0 34%,
    color-mix(in srgb, var(--mh-paper) 64%, transparent) 56%,
    transparent 74%);
  filter: blur(10px); pointer-events: none;
}
.mh-copy[data-position="left"] { left: clamp(24px, 5vw, 84px); }
.mh-copy[data-position="right"] { right: clamp(48px, 6vw, 110px); }
.mh-copy[data-position="bottom"] {
  top: auto; bottom: clamp(24px, 5vh, 64px); left: 50%;
  width: min(940px, calc(100vw - 64px)); transform: translateX(-50%);
  display: grid; grid-template-columns: minmax(340px, 1fr) 1.1fr; column-gap: clamp(28px, 4vw, 60px);
}
.mh-copy[data-position="bottom"] > :not(.mh-copy__body):not(.mh-copy__tags) { grid-column: 1; }
.mh-copy[data-position="bottom"] .mh-copy__body { grid-column: 2; grid-row: 1 / span 5; align-self: end; margin-top: 0; max-width: 62ch; }
.mh-copy[data-position="bottom"] .mh-copy__tags { grid-column: 1; }
.mh-copy[data-position="center"] { left: 50%; width: min(680px, calc(100vw - 48px)); transform: translate(-50%, -50%); text-align: center; }

.mh-copy__index { margin: 0 0 16px; display: flex; align-items: center; gap: 10px; color: var(--mh-muted); font: 600 .66rem/1 var(--mh-body); letter-spacing: .16em; }
.mh-copy__index::before { content: ""; width: 9px; height: 9px; background: var(--mh-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-accent) 25%, transparent); }
.mh-copy__index span { color: var(--mh-accent-text); }
.mh-copy__eyebrow { margin: 0; color: var(--mh-accent-text); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.mh-copy h2 {
  margin: 10px 0 0; font: 600 clamp(1.9rem, 3.4vw, 3.1rem)/1.02 var(--mh-display); letter-spacing: .045em; text-transform: uppercase;
  text-shadow: 0 2px 22px color-mix(in srgb, var(--mh-paper) 90%, transparent); text-wrap: balance;
}
.mh-copy__subtitle { margin: 10px 0 0; color: var(--mh-accent-text); font: 500 italic 1.02rem/1.2 var(--mh-display); }
.mh-copy__body { max-width: 46ch; margin-top: 18px; font-size: clamp(.86rem, .95vw, .97rem); line-height: 1.62; text-shadow: 0 1px 10px color-mix(in srgb, var(--mh-paper) 85%, transparent); }
.mh-copy__body p { margin: 0 0 .7em; }
.mh-copy__body p:last-child { margin-bottom: 0; }
.mh-copy__list { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.mh-copy__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--mh-line); }
.mh-copy__list li:first-child { border-top: 1px solid var(--mh-line); }
.mh-copy__list span { font: 600 1.08rem/1.25 var(--mh-display); }
.mh-copy__list b { flex: none; color: var(--mh-accent-text); font-size: .74rem; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.mh-copy__tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.mh-copy__tags li { padding-top: 7px; border-top: 1px solid var(--mh-accent); color: var(--mh-muted); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mh-copy__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.mh-copy[data-position="center"] .mh-copy__body { margin-left: auto; margin-right: auto; }
.mh-copy[data-position="center"] .mh-copy__tags { justify-content: center; }

/* Buttons: cream outline, rust when solid. */
.mh-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--mh-ink) 55%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--mh-paper) 45%, transparent);
  color: var(--mh-ink); font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.mh-action:hover { background: color-mix(in srgb, var(--mh-ink) 14%, transparent); border-color: var(--mh-ink); }
.mh-action--solid, .mh-copy__actions .mh-action:last-child { background: var(--mh-accent); border-color: var(--mh-accent); color: #fbf5e6; }
.mh-action--solid:hover, .mh-copy__actions .mh-action:last-child:hover { background: #c6612f; border-color: #c6612f; }

/* ---------- Header, progress, chapter index ---------- */
.mh-header {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: grid;
  grid-template-columns: 1fr; grid-auto-flow: column; grid-auto-columns: auto; align-items: center; gap: 28px;
  padding: 20px clamp(22px, 4vw, 60px); pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mh-paper) 55%, transparent), transparent);
}
.mh-header a { pointer-events: auto; }
.mh-brand { display: grid; justify-self: start; color: var(--mh-ink); text-decoration: none; text-shadow: 0 2px 16px #0009; }
.mh-brand span { color: var(--mh-accent-text); font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.mh-brand strong { margin-top: 3px; font: 700 1.5rem/1 var(--mh-display); letter-spacing: .01em; }
.mh-brand__logo { height: 56px; width: auto; margin-top: 4px; filter: drop-shadow(0 2px 10px #0008); }
@media (max-width: 760px) { .mh-brand__logo { height: 42px; } }
.mh-brand i { max-width: 34ch; margin-top: 4px; color: var(--mh-muted); font: italic 500 .9rem/1.1 var(--mh-display); }
.mh-header__status { margin: 0; color: var(--mh-muted); font: 600 .64rem/1 var(--mh-body); letter-spacing: .12em; text-transform: uppercase; }
.mh-header__source {
  padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--mh-ink) 50%, transparent); border-radius: 999px;
  color: var(--mh-ink); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-decoration: none;
  background: color-mix(in srgb, var(--mh-paper) 40%, transparent);
}
.mh-header__source:hover { background: var(--mh-accent); border-color: var(--mh-accent); }

.mh-progress { position: fixed; z-index: 35; top: 0; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--mh-ink) 12%, transparent); }
.mh-progress i { display: block; width: 100%; height: 100%; background: var(--mh-accent); transform: scaleX(0); transform-origin: left; }

.mh-route {
  position: fixed; z-index: 30; right: clamp(12px, 1.6vw, 26px); top: 50%;
  display: flex; flex-direction: column; gap: 16px; transform: translateY(-50%); transition: opacity .3s;
}
.mh-route__item { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--mh-ink); cursor: pointer; text-shadow: 0 1px 8px #000a; }
.mh-route__item span { font: 600 .6rem/1 var(--mh-body); letter-spacing: .08em; opacity: .55; }
.mh-route__item i { width: 0; overflow: hidden; font: italic 500 .9rem/1 var(--mh-display); white-space: nowrap; opacity: 0; transition: width .25s, opacity .25s; text-align: right; }
/* Seal-style marker: a hollow square that fills rust when active. */
.mh-route__item::after { content: ""; width: 8px; height: 8px; border: 1px solid color-mix(in srgb, var(--mh-ink) 65%, transparent); transition: background .2s, border-color .2s, transform .2s; }
.mh-route__item:hover i, .mh-route__item:focus-visible i { width: 150px; opacity: 1; }
.mh-route__item.is-active span { color: var(--mh-accent-text); opacity: 1; }
.mh-route__item.is-active::after { background: var(--mh-accent); border-color: var(--mh-accent); transform: scale(1.25); }

.mh-hint { position: fixed; z-index: 30; left: 50%; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); color: var(--mh-muted); transition: opacity .3s; }
.mh-hint.is-hidden { opacity: 0; }
.mh-hint span { font: italic 500 1rem/1 var(--mh-display); letter-spacing: .03em; }
.mh-hint i { width: 1px; height: 28px; background: linear-gradient(var(--mh-ink), transparent); animation: mh-drip 2.2s ease-in-out infinite; }
@keyframes mh-drip { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
.mh-track { position: relative; z-index: 0; pointer-events: none; }

.mh-past-route .mh-route, .mh-past-route .mh-hint { opacity: 0; pointer-events: none; }
.mh-header { transition: background-color .3s; }
.mh-past-route .mh-header { background: var(--mh-paper); box-shadow: 0 1px 0 var(--mh-line); }
.mh-past-route .mh-header__status { visibility: hidden; }

/* ---------- Contact (scrolls up over the final scene) ---------- */
.contact {
  position: relative; z-index: 20; padding: clamp(72px, 12vh, 140px) clamp(20px, 5vw, 72px) 40px;
  background:
    linear-gradient(180deg, transparent 0, var(--mh-paper) 140px),
    var(--mh-paper);
  margin-top: -140px;
  scroll-margin-top: 0;
}
.contact__inner { padding-top: 40px; }
.contact__inner { max-width: 1120px; margin: 0 auto; }
.contact__eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--mh-accent-text); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.contact__eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--mh-accent); }
.contact h2 { margin: 12px 0 0; font: 600 clamp(2.2rem, 4.6vw, 3.8rem)/1 var(--mh-display); letter-spacing: .045em; text-transform: uppercase; }
.contact__steps { display: grid; gap: 8px; max-width: 60ch; margin: 20px 0 0; padding-left: 1.3em; color: var(--mh-ink); line-height: 1.5; }
.contact__steps li::marker { color: var(--mh-accent-text); font-weight: 600; }
.contact__lede { max-width: 56ch; margin: 16px 0 0; color: var(--mh-muted); line-height: 1.6; }
.contact__ways { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.contact__ways a {
  display: grid; gap: 3px; min-width: 170px; padding: 14px 18px; border: 1px solid var(--mh-line); border-radius: 14px;
  text-decoration: none; transition: border-color .2s, background .2s;
}
.contact__ways a:hover { border-color: var(--mh-accent); background: color-mix(in srgb, var(--mh-accent) 12%, transparent); }
.contact__ways strong { font: 600 1.25rem/1 var(--mh-display); }
.contact__ways span { color: var(--mh-muted); font-size: .8rem; }

.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vh, 64px); }
.contact h3 { margin: 0 0 18px; font: 600 1.6rem/1.1 var(--mh-display); }
.contact__form { display: grid; gap: 14px; align-content: start; }
.contact__form label { display: grid; gap: 6px; color: var(--mh-muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.contact__form .optional { font-weight: 400; }
.contact__form input, .contact__form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--mh-line); border-radius: 10px;
  background: color-mix(in srgb, #000 18%, var(--mh-paper)); color: var(--mh-ink); font: 400 1rem/1.4 var(--mh-body);
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--mh-accent-text); }
.contact__form button { justify-self: start; min-width: 140px; }
.contact__trap { position: absolute; left: -9999px; }
.contact__error { color: var(--mh-accent-text); font-size: .8rem; font-weight: 500; letter-spacing: 0; }
.contact__form [aria-invalid="true"] { border-color: var(--mh-accent-text); }
.contact__status { min-height: 1.4em; margin: 0; color: var(--mh-muted); font-size: .85rem; }
.contact__booking-frame { min-height: 420px; border: 1px solid var(--mh-line); border-radius: 14px; overflow: hidden; }
.contact__booking-frame iframe { display: block; width: 100%; height: 720px; border: 0; background: var(--mh-paper); }
#booking { scroll-margin-top: 96px; }
.contact__booking-link { margin-top: 12px; width: 100%; }
.contact__booking-frame.is-empty { display: grid; place-items: center; padding: 32px; text-align: center; color: var(--mh-muted); font: italic 500 1.2rem/1.4 var(--mh-display); }
.contact__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--mh-line); color: var(--mh-muted); font-size: .76rem; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .mh-header { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .mh-brand i, .mh-header__status { display: none; }
  .mh-header__source { grid-column: 2; }
  /* Phones: the painting fills the top of the screen and melts into green above the copy. */
  .mh-shot__poster, .mh-shot__video {
    bottom: auto; height: 62svh; object-position: var(--mh-focus, center 50%);
    -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
  }
  .mh-copy, .mh-copy[data-position] {
    top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 52svh;
    display: block; padding: 64px 20px calc(26px + env(safe-area-inset-bottom)); overflow: auto;
    transform: none; text-align: left;
  }
  .mh-copy::before, .mh-copy[data-position]::before {
    inset: 0; filter: none;
    background: linear-gradient(0deg, color-mix(in srgb, var(--mh-paper) 96%, transparent) 0 55%, color-mix(in srgb, var(--mh-paper) 70%, transparent) 78%, transparent 100%);
  }
  .mh-copy h2 { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .mh-copy__list li { padding: 5px 0; }
  .mh-copy__list span { font-size: 1rem; }
  .mh-copy__body { max-width: none; margin-top: 12px; font-size: .9rem; line-height: 1.52; }
  .mh-copy__index { margin-bottom: 10px; }
  .mh-copy__tags { margin-top: 14px; }
  .mh-copy[data-position="center"] .mh-copy__body { margin-left: 0; margin-right: 0; }
  .mh-copy[data-position="center"] .mh-copy__tags { justify-content: flex-start; }
  .mh-copy__actions .mh-action { flex: 1 1 calc(50% - 10px); }
  .mh-route { display: none; }
  .mh-hint { bottom: auto; top: 46%; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__ways a { min-width: 0; flex: 1 1 140px; }
  .contact__form button { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-hint i { animation: none; }
  .mh-shot__poster { transform: none !important; }
}

/* ---------- Story mode: phones and tablets (src/story-mode.js) ----------
   Same look as desktop: the painting fills the screen and the text sits over it on
   a soft green glow. The text scrolls; each chapter opens with bare painting. */
.sm .boot { background: var(--mh-paper); }
.sm-root { position: relative; }
.sm-stage {
  position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  background: var(--mh-paper); transition: opacity .4s, visibility .4s;
}
.sm-frame { position: absolute; inset: 0; overflow: hidden; }
.sm-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--mh-paper) 55%, transparent) 100%);
}
.sm-layer { position: absolute; inset: 0; visibility: hidden; }
.sm-layer.is-on { visibility: visible; }
.sm-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--mh-focus, center); transform-origin: var(--mh-focus, center); }
.sm-media--next { opacity: 0; }
.sm-mist {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, #f3eedf 92%, transparent), color-mix(in srgb, #dfe3d6 70%, transparent) 60%, transparent 100%);
}
.sm-video { opacity: 0; }
.sm-layer.has-video .sm-video { opacity: 1; }
.sm-past .sm-stage { opacity: 0; visibility: hidden; }

/* A deeper wash under the header, so text scrolling up fades out beneath it. */
.sm .mh-header {
  padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 30px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mh-paper) 86%, transparent) 0,
    color-mix(in srgb, var(--mh-paper) 64%, transparent) 55%,
    transparent 100%);
}
.sm-past .mh-header { background: var(--mh-paper); box-shadow: 0 1px 0 var(--mh-line); }
.sm .mh-route { display: flex; }
.sm-past .mh-route, .sm-past .mh-hint { opacity: 0; pointer-events: none; }

.sm-flow { position: relative; z-index: 1; }
/* Bare painting first (the flight plays here), then the words. */
.sm-chapter { padding-top: 112svh; }
.sm-chapter:first-child { padding-top: 56svh; }
.sm-chapter:last-child { padding-bottom: 36svh; }
.sm-copy {
  position: relative; isolation: isolate; color: var(--mh-ink);
  padding: 30px max(36px, calc(env(safe-area-inset-right) + 26px)) 40px max(22px, env(safe-area-inset-left));
}
/* Edge-free glow of deep green behind the words, like desktop: no card. */
.sm-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -90px 0; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0,
    color-mix(in srgb, var(--mh-paper) 62%, transparent) 60px,
    color-mix(in srgb, var(--mh-paper) 78%, transparent) 130px,
    color-mix(in srgb, var(--mh-paper) 78%, transparent) calc(100% - 130px),
    color-mix(in srgb, var(--mh-paper) 62%, transparent) calc(100% - 60px),
    transparent 100%);
}
.sm-copy h2 {
  margin: 10px 0 0; font: 600 clamp(1.75rem, 7.8vw, 2.6rem)/1.04 var(--mh-display);
  letter-spacing: .045em; text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 2px 22px color-mix(in srgb, var(--mh-paper) 90%, transparent);
}
.sm-copy .mh-copy__index { margin-bottom: 12px; }
.sm-copy .mh-copy__body { max-width: 60ch; margin-top: 14px; font-size: 1rem; line-height: 1.6; }
.sm-copy .mh-copy__list span { font-size: 1.05rem; }
.sm-copy .mh-copy__tags { margin-top: 18px; }
.sm-copy .mh-copy__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sm-copy .mh-copy__actions .mh-action:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Lines fade out as they slide up under the header (browsers with scroll-driven animations). */
@supports (animation-timeline: view()) {
  .sm-copy > :not(.mh-copy__body), .sm-copy .mh-copy__body > p, .sm-copy .mh-copy__list > li {
    animation: sm-exit linear both;
    animation-timeline: view(block 104px 0px);
    animation-range: exit 0% exit 100%;
  }
  @keyframes sm-exit { to { opacity: 0; } }
}

/* Route: the desktop chapter squares down the right edge; numbers only on wider screens. */
.sm-route { right: max(10px, env(safe-area-inset-right)); gap: 14px; }
.sm-route .mh-route__item { min-height: 22px; }
.sm-route .mh-route__item i { display: none; }

.sm .mh-hint { display: none; }

.sm .contact { position: relative; z-index: 2; }

/* Phones: drop the route numbers, keep the squares. */
@media (max-width: 600px) {
  .sm-route .mh-route__item span { display: none; }
}

/* Wider screens (tablets, phones held sideways): the text keeps to its side of the painting. */
@media (min-width: 601px) {
  .sm-copy { width: min(500px, 52vw); padding: 36px 34px 44px; }
  /* The desktop glow exactly: a blurred ellipse of deep green, no edges. */
  .sm-copy::before {
    inset: -70px -90px;
    background: radial-gradient(ellipse at center,
      color-mix(in srgb, var(--mh-paper) 88%, transparent) 0 40%,
      color-mix(in srgb, var(--mh-paper) 66%, transparent) 60%,
      transparent 76%);
    filter: blur(10px);
  }
  .sm-chapter[data-position="left"] .sm-copy, .sm-chapter[data-position="bottom"] .sm-copy { margin-left: clamp(18px, 5vw, 64px); }
  .sm-chapter[data-position="right"] .sm-copy { margin-left: auto; margin-right: clamp(48px, 7vw, 96px); }
}
@media (min-width: 601px) and (orientation: landscape) {
  .sm-chapter { padding-top: 115svh; }
  .sm-chapter:first-child { padding-top: 22svh; }
  .sm-copy h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
}