/* Svartigaldur journey: one fixed painted stage, copy placed in each scene's empty space, chrome that inverts against whatever is behind it. */
:root {
  --mh-ink: #14211f;
  --mh-ink-soft: #2c3d3a;
  --mh-pale: #eaf1ee;
  --mh-pale-soft: #bccac6;
  --mh-paper: #dfe6e4;
  --mh-night: #080e11;
  --mh-gold: #c9a84c;
  --mh-gold-ink: #1b1608;
  --mh-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --mh-body: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

.mh-root { min-height: 100vh; }
.mh-stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #11181c; }
.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: var(--focus, center);
}
.mh-shot__poster { transform: scale(1.02); transition: opacity .2s; }
.mh-shot__video { z-index: 1; }
.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: radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--mh-gold) 22%, #18242a) 0 12%, #11181c 55%);
  color: #ffffff78;
}
.mh-shot:not(.is-missing) .mh-shot__fallback { opacity: 0; }
.mh-shot__fallback span { color: var(--mh-gold); font: 700 .7rem/1 var(--mh-body); letter-spacing: .14em; }
.mh-shot__fallback strong { font: 700 clamp(1.2rem, 2vw, 1.8rem)/1.1 var(--mh-display); }

.mh-stage::after {
  content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, #02060940 100%);
}

/* Copy: static per scene, no card; a soft halo keeps it readable over the painting */
.mh-copy-layer { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.mh-copy {
  --fg: var(--mh-ink); --fg2: var(--mh-ink-soft); --halo: 222, 230, 228;
  position: absolute; top: 50%; width: min(500px, calc(100vw - 44px));
  padding: clamp(24px, 3vw, 42px); opacity: 0; transform: translateY(-50%);
  isolation: isolate; color: var(--fg);
  transition: opacity .6s ease; will-change: opacity; pointer-events: none;
}
/* The lines arrive one after another, rising a little; they leave together and quickly. */
.mh-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
.mh-copy.is-on > * {
  opacity: 1; transform: none;
  transition: opacity .9s ease calc(var(--i, 0) * 130ms), transform 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 130ms);
}
.mh-copy > :nth-child(2) { --i: 1; }
.mh-copy > :nth-child(3) { --i: 2; }
.mh-copy > :nth-child(4) { --i: 3; }
.mh-copy > :nth-child(5) { --i: 4; }
.mh-copy[data-tone="light"] { --fg: var(--mh-pale); --fg2: var(--mh-pale-soft); --halo: 6, 11, 14; }
.mh-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -52px -76px;
  background: radial-gradient(ellipse at center, rgba(var(--halo), .74) 0 22%, rgba(var(--halo), .46) 44%, transparent 74%);
  filter: blur(10px); pointer-events: none;
}
.mh-copy[data-position="left"] { left: clamp(24px, 5vw, 78px); }
.mh-copy[data-position="right"] { right: clamp(64px, 7vw, 110px); }
.mh-copy[data-position="bottom-left"] {
  top: auto; bottom: clamp(36px, 8vh, 96px); left: clamp(24px, 5vw, 78px); width: min(760px, calc(100vw - 48px)); transform: none;
}
.mh-copy[data-position="bottom"] { top: auto; bottom: clamp(30px, 6vh, 72px); left: 50%; width: min(880px, calc(100vw - 48px)); transform: translateX(-50%); }
.mh-copy[data-position="center"] { left: 50%; width: min(680px, calc(100vw - 48px)); transform: translate(-50%, -50%); text-align: center; }

.mh-copy__place { display: flex; align-items: center; gap: .85rem; margin: 0; color: var(--fg2); font: 500 .95rem/1 var(--mh-body); letter-spacing: .05em; }
.mh-seal {
  display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 3px;
  background: var(--mh-gold); color: var(--mh-gold-ink); font: italic 900 1.2rem/1 var(--mh-display);
  transform: rotate(-4deg); box-shadow: inset 0 0 0 2px #ffffff33, inset 0 0 0 3px #50410a59;
}
.mh-copy h2 { margin: 1.4rem 0 1rem; font: 700 clamp(2.1rem, 4.4vw, 4rem)/1.05 var(--mh-display); letter-spacing: -.005em; text-wrap: balance; color: var(--fg); }
.mh-copy[data-position="bottom-left"] h2 { font-size: clamp(2.3rem, 5.2vw, 4.8rem); }
.mh-copy__body { max-width: 30rem; font: 400 clamp(1rem, 1.2vw, 1.15rem)/1.6 var(--mh-body); color: var(--fg2); }
.mh-copy__body p { margin: 0 0 .6em; }
.mh-copy__body p:last-child { margin-bottom: 0; }

.mh-copy__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: 1.7rem; }
.mh-copy__row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.mh-copy__cta a {
  display: inline-block; padding: .95rem 1.5rem; border: 1px solid var(--mh-gold); color: var(--fg);
  text-decoration: none; font: 500 1rem/1 var(--mh-body); transition: background .25s, color .25s;
}
.mh-copy__cta a:hover, .mh-copy__cta a:focus-visible { background: var(--mh-gold); color: var(--mh-gold-ink); }
.mh-copy__cta span { color: var(--fg2); font-size: .95rem; }
.mh-copy__cta a.mh-copy__more {
  padding: .35rem 0; border: 0; color: var(--fg2); font-size: .95rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  transition: color .25s;
}
.mh-copy__cta a.mh-copy__more:hover, .mh-copy__cta a.mh-copy__more:focus-visible { background: none; color: var(--fg); }
.mh-copy__cta a.mh-copy__more:focus-visible { outline: 1px solid var(--mh-gold); outline-offset: 4px; }
.mh-copy__proof { max-width: 34rem; margin: 1.5rem 0 0; color: var(--fg2); font: 400 .85rem/1.5 var(--mh-body); }

/* Chrome: each chapter says whether the corner controls sit on pale or dark paint, so they switch dark ink or pale ink with a soft glow */
.mh-header, .mh-route, .mh-hint { color: var(--mh-ink); text-shadow: 0 0 14px #dfe6e4cc; transition: color .5s; }
.mh-root[data-header-tone="light"] .mh-header, .mh-root[data-nav-tone="light"] .mh-route, .mh-root[data-hint-tone="light"] .mh-hint { color: var(--mh-pale); text-shadow: 0 1px 14px #060b0ecc; }
.mh-header {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.mh-header > * { pointer-events: auto; }
.mh-brand { color: inherit; text-decoration: none; font: italic 700 1.6rem/1 var(--mh-display); }
.mh-header__actions { display: flex; align-items: center; gap: .6rem; }
.mh-lang, .mh-site {
  color: inherit; text-shadow: inherit; min-width: 2.6rem; padding: .4rem .75rem; border: 1px solid currentColor; border-radius: 999px; background: transparent;
  font: 500 .85rem/1 var(--mh-body); letter-spacing: .04em; cursor: pointer;
}
.mh-site { display: inline-block; text-align: center; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.mh-site:hover, .mh-site:focus-visible { background: var(--mh-gold); border-color: var(--mh-gold); color: var(--mh-gold-ink); text-shadow: none; }

.mh-progress { position: fixed; z-index: 35; top: 0; left: 0; right: 0; height: 3px; background: #ffffff18; }
.mh-progress i { display: block; width: 100%; height: 100%; background: var(--mh-gold); transform: scaleX(0); transform-origin: left; }

.mh-route {
  position: fixed; z-index: 30; right: max(18px, env(safe-area-inset-right, 0px)); top: 50%;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; transform: translateY(-50%);
}
.mh-route__item { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: .6rem; padding: 0; border: 0; background: none; cursor: pointer; opacity: .55; transition: opacity .2s; }
.mh-route__item span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid currentColor; font: italic 800 .95rem/1 var(--mh-display); }
.mh-route__item i { max-width: 0; overflow: hidden; font: 500 .8rem/1 var(--mh-body); font-style: normal; white-space: nowrap; opacity: 0; transition: max-width .2s, opacity .2s; }
.mh-route__item:hover, .mh-route__item:focus-visible { opacity: 1; }
.mh-route__item:hover i, .mh-route__item:focus-visible i, .mh-route__item.is-active i { max-width: 16rem; opacity: 1; }
.mh-route__item.is-active { opacity: 1; }
.mh-route__item.is-active span { background: var(--mh-gold); border-color: var(--mh-gold); color: var(--mh-gold-ink); text-shadow: none; }

.mh-hint { position: fixed; z-index: 30; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 10px; transform: translateX(-50%); transition: opacity .25s; }
.mh-hint.is-hidden { opacity: 0; }
.mh-hint span { font: 400 .9rem/1 var(--mh-body); letter-spacing: .06em; }
.mh-hint i { width: 1px; height: 28px; background: currentColor; opacity: .7; }
.mh-track { position: relative; z-index: 0; pointer-events: none; }

@media (max-width: 760px) {
  .mh-header { padding-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px)); }
  .mh-brand { font-size: 1.4rem; }
  .mh-copy, .mh-copy[data-position] {
    top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 56svh;
    padding: 22px max(20px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    overflow: auto; transform: none; text-align: left;
  }
  .mh-copy[data-position] { padding-top: 84px; background: linear-gradient(0deg, rgba(var(--halo), .93) 0%, rgba(var(--halo), .78) 55%, rgba(var(--halo), 0) 100%); }
  .mh-copy::before { display: none; }
  .mh-copy h2, .mh-copy[data-position="bottom-left"] h2 { font-size: clamp(1.9rem, 8.6vw, 2.7rem); margin: 1rem 0 .7rem; }
  .mh-copy__body { max-width: none; }
  .mh-copy__cta { margin-top: 1.2rem; }
  .mh-route { display: none; }
  .mh-hint span { display: none; }
}

/* Short phones (SE size): keep the headline, button and links on screen without scrolling the copy */
@media (max-width: 760px) and (max-height: 700px) {
  .mh-copy, .mh-copy[data-position] { max-height: 68svh; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .mh-copy[data-position] { padding-top: 56px; }
  .mh-copy h2, .mh-copy[data-position="bottom-left"] h2 { font-size: clamp(1.55rem, 7.4vw, 2rem); margin: .7rem 0 .5rem; }
  .mh-copy__body { font-size: .95rem; line-height: 1.5; }
  .mh-copy__cta { margin-top: .9rem; gap: .4rem; }
  .mh-copy__cta a { padding: .8rem 1.2rem; }
  .mh-copy__proof { margin-top: .9rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-hint { display: none; }
  .mh-shot__poster { transform: none !important; }
  .mh-copy__cta a { transition: none; }
  .mh-copy, .mh-copy > *, .mh-copy.is-on > * { transition: none; transform: none; }
  .mh-copy.is-on > * { opacity: 1; }
}