/* ===== Fonts (self-hosted, Latin set incl. å ä ö) ===== */
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/cinzel.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/eb-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("fonts/eb-garamond-italic.woff2") format("woff2");
}

/* ===== Colours and fonts: change these to restyle the whole site ===== */
:root {
  --bg: #0f0d0b;
  --bg-raised: #17130f;
  --gold: #c9a45c;
  --gold-bright: #e2c17e;
  --text: #ece3d0;
  --text-muted: #b5aa95;
  --line: rgba(201, 164, 92, 0.35);
  --heading: "Cinzel", Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
  --wrap: 1120px;

  /* Motion tokens (see docs/MOTION.md). Every animation uses these. */
  --dur-instant: 90ms;
  --dur-quick: 160ms;
  --dur-ui: 240ms;
  --dur-reveal: 420ms;
  --dur-scene: 650ms;
  --ease-rise: cubic-bezier(.16, .84, .24, 1);
  --ease-ui: cubic-bezier(.3, .7, .2, 1);
  --ease-out: cubic-bezier(.4, 0, 1, 1);
  --rise: 18px;
  --stagger: 0ms;
}

/* ===== Language switching: only the chosen language is shown ===== */
html[data-lang="sv"] [lang="en"],
html[data-lang="en"] [lang="sv"] { display: none !important; }

/* ===== Signing dates: show only what fits before, on, or after the day ===== */
/* Without the script, the "before" version shows. */
html:not([data-event-state]) [data-show]:not([data-show~="upcoming"]),
html[data-event-state="upcoming"] [data-show]:not([data-show~="upcoming"]),
html[data-event-state="today"] [data-show]:not([data-show~="today"]),
html[data-event-state="past"] [data-show]:not([data-show~="past"]) { display: none !important; }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.2rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--gold-bright); }
a:hover { color: var(--text); }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* A faint film grain over the whole page, so the night is never flat digital black.
   One fixed layer, opacity only: costs nothing while scrolling. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
em { font-style: italic; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.hero-inner > *, .book > *, .event > *, .about > * { min-width: 0; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--gold); color: var(--bg); padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
section[tabindex="-1"]:focus { outline: none; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: transform var(--dur-ui) var(--ease-ui);
  background: rgba(15, 13, 11, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 901px) {
  /* Fixed (not sticky) so shrinking it never nudges the page underneath */
  .site-header {
    position: fixed; left: 0; right: 0; top: 0;
    transition: background-color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui);
  }
  body { padding-top: 89px; }
  .header-inner { transition: min-height var(--dur-ui) var(--ease-ui); }
  .brand { transform-origin: left center; transition: transform var(--dur-ui) var(--ease-ui); }
  .header-condensed .site-header { background: rgba(15, 13, 11, .97); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
  .header-condensed .header-inner { min-height: 64px; }
  .header-condensed .brand { transform: scale(.82); }
}
.header-inner { display: flex; align-items: center; gap: 32px; min-height: 88px; flex-wrap: wrap; }
.brand {
  font-family: var(--heading); font-size: 1.75rem; letter-spacing: 0.1em;
  font-weight: 600; color: #f0c766; text-decoration: none; text-transform: uppercase;   /* bright gold */
  display: inline-flex; align-items: center; min-height: 44px;
  filter: drop-shadow(0 0 10px rgba(255, 200, 100, .28));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand {                                       /* metallic gold, lit from above */
    background: linear-gradient(175deg, #fff3cf 0%, #f6d27a 38%, #e3b24c 62%, #f4d58a 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.brand:hover { filter: drop-shadow(0 0 14px rgba(255, 210, 120, .5)); }
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a {
  color: var(--text-muted); text-decoration: none; font-size: 1.22rem;
  display: inline-flex; align-items: center; min-height: 48px;
}
.nav a { position: relative; transition: color var(--dur-quick) var(--ease-ui); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-ui);
}
.nav a:hover, .nav a:focus-visible { color: var(--gold-bright); }
@media (hover: hover) { .nav a:hover::after { transform: scaleX(1); } }
.nav a:focus-visible::after { transform: scaleX(1); }
.lang-switch { position: relative; display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lang-switch::before {                          /* the gold pill that slides between SV and EN */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--gold);
  transition: transform var(--dur-ui) var(--ease-rise);
}
html[data-lang="en"] .lang-switch::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; font: 600 0.85rem/1 var(--heading); letter-spacing: 0.08em;
  background: none; color: var(--text-muted); border: 0; padding: 0; cursor: pointer;
  width: 54px; min-height: 48px; font-size: .95rem; transition: color var(--dur-ui) var(--ease-ui);
}
.lang-switch button[aria-pressed="true"] { color: var(--bg); }

/* --- Menu button (phones and small tablets only) --- */
.menu-toggle {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; margin-left: auto; padding: 0; cursor: pointer;
  background: none; color: var(--gold-bright); border: 1px solid var(--line); border-radius: 4px;
  transition: border-color var(--dur-quick) var(--ease-ui);
}
.menu-toggle:hover { border-color: var(--gold); }
.menu-icon { position: relative; display: block; width: 22px; height: 14px; }
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform var(--dur-ui) var(--ease-rise);
}
.menu-icon::before { top: 0; }
.menu-icon::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Full-screen chapter menu --- */
.menu-panel { display: none; }

@media (max-width: 900px) {
  .header-inner { min-height: 72px; gap: 16px; flex-wrap: nowrap; }
  .brand { font-size: 1.45rem; }
  .site-header .nav, .site-header .lang-switch { display: none; }
  .menu-toggle { display: inline-flex; }

  .menu-panel {
    display: block; position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain;
    padding-top: 72px; background: var(--bg);
    visibility: hidden; opacity: 0;
    transition: opacity var(--dur-ui) var(--ease-ui), visibility 0s linear var(--dur-ui);
  }
  .menu-open .menu-panel { visibility: visible; opacity: 1; transition: opacity var(--dur-ui) var(--ease-ui), visibility 0s; }
  .menu-open .site-header { transform: none !important; }   /* the bar (and its close button) always stays */
  .menu-open .action-bar { visibility: hidden !important; }
  .menu-glow {                                   /* the dawn horizon again, at the foot of the menu */
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
    background: radial-gradient(70% 60% at 50% 100%, rgba(215, 140, 70, .22), transparent 70%);
  }
  .menu-inner {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    min-height: calc(100svh - 72px); padding-top: 28px; padding-bottom: calc(36px + env(safe-area-inset-bottom));
  }
  .menu-list { list-style: none; margin: 0; padding: 0; }
  .menu-list a {
    display: flex; align-items: baseline; gap: 18px; padding: 18px 0;
    border-bottom: 1px solid rgba(201, 164, 92, .18);
    font-family: var(--heading); font-weight: 500; font-size: clamp(1.8rem, 8vw, 2.4rem); letter-spacing: .02em;
    color: var(--text); text-decoration: none;
    transition: color var(--dur-quick) var(--ease-ui);
  }
  .menu-list a:hover, .menu-list a:active { color: var(--gold-bright); }
  .menu-num { flex: none; min-width: 2.6em; font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--gold); }
  .menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }

  /* the chapters rise in, one after another */
  .menu-list li, .menu-foot {
    opacity: 0; transform: translateY(14px);
    transition: opacity 420ms var(--ease-rise), transform 420ms var(--ease-rise);
    transition-delay: calc(var(--i, 0) * 50ms);
  }
  .menu-open .menu-list li, .menu-open .menu-foot { opacity: 1; transform: none; }

  html { scroll-padding-top: 92px; }
}
html.menu-open { overflow: hidden; }

/* ===== Buttons ===== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  font-family: var(--heading); font-size: 0.95rem; letter-spacing: 0.06em; line-height: 1.2;
  text-decoration: none; padding: 12px 22px; border-radius: 3px; border: 1px solid var(--gold);
  background: none; cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-ui), color var(--dur-quick) var(--ease-ui),
              transform var(--dur-instant) var(--ease-ui);
}
.btn:active { transform: scale(.98); }
.btn-gold::after {                              /* a band of light that sweeps across on hover */
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 225, .55), transparent);
  transform: translateX(0) skewX(-18deg); opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  .btn-gold:hover::after { opacity: 1; transform: translateX(560%) skewX(-18deg); transition: transform 600ms var(--ease-rise), opacity 0s; }
}
.btn-small { min-height: 44px; padding: 8px 16px; font-size: 0.9rem; white-space: nowrap; }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: var(--gold-bright); color: var(--bg); }
.btn-ghost { color: var(--gold-bright); }
.btn-ghost:hover { background: rgba(201, 164, 92, 0.12); color: var(--gold-bright); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== Hero: "Dawn over the fleet" (see docs/HERO.md) ===== */
.hero {
  --horizon: 62%;                               /* where sea meets sky */
  --sun-x: calc(50% + min(27vw, 300px));        /* sun sits behind the book */
  --ease-slow: cubic-bezier(.16, .84, .24, 1);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(calc(88svh - 80px), 810px);
  display: flex; align-items: center;
  background: var(--bg);
}

/* --- The scene (decoration only) --- */
.hero-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-sky {
  position: absolute; left: 0; right: 0; top: -60px; height: calc(var(--horizon) + 180px);
  mask-image: linear-gradient(#000 72%, transparent);
  background:
    radial-gradient(30% 34% at var(--sun-x) 100%, rgba(255, 214, 150, .75), rgba(240, 170, 95, .35) 45%, transparent 80%),
    radial-gradient(75% 70% at var(--sun-x) 100%, rgba(215, 140, 70, .45), rgba(150, 90, 60, .18) 45%, transparent 75%),
    linear-gradient(to bottom, #07080c 0%, #0a101b 38%, #142740 74%, #24405e 100%);
}
.hero-sun {
  position: absolute; left: var(--sun-x); top: var(--horizon);
  width: 320px; height: 320px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff6dc 0%, #ffe3a6 28%, rgba(255, 200, 120, .55) 48%, transparent 70%);
  filter: blur(2px);
}
.hero-fleet {
  position: absolute; left: 0; top: calc(var(--horizon) - 39px);
  width: 100%; height: 40px; fill: #131d28; color: #131d28; opacity: .48; filter: blur(.45px);
}
.hero-sea {
  position: absolute; left: 0; right: 0; top: calc(var(--horizon) - 12px); bottom: 0; overflow: hidden;
  mask-image: linear-gradient(transparent, #000 28px);
  background: linear-gradient(to bottom, #1b2c3e 0%, #111c29 22%, #0c1016 62%, var(--bg) 100%);
}
.hero-sea::before {                             /* bright horizon line, strongest at the sun */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; filter: blur(8px);
  background: radial-gradient(40% 100% at var(--sun-x) 50%, rgba(255, 228, 170, .9), rgba(255, 228, 170, .15) 70%, transparent);
}
.hero-sunpath {
  position: absolute; top: 0; bottom: 0; left: var(--sun-x); width: 300px;
  transform: translateX(-50%); overflow: hidden;
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0, #000 20%, transparent 75%);
          mask-image: radial-gradient(50% 100% at 50% 0, #000 20%, transparent 75%);
}
.hero-sunpath::before {                         /* fine moving glints on the water */
  content: ""; position: absolute; left: 0; right: 0; top: -16px; bottom: 0;
  background:
    radial-gradient(ellipse 32% 2px at 46% 12%, #f4d7a866, transparent),
    radial-gradient(ellipse 21% 2px at 57% 24%, #f4d7a844, transparent),
    radial-gradient(ellipse 38% 3px at 42% 39%, #f4d7a838, transparent),
    radial-gradient(ellipse 27% 2px at 60% 57%, #f4d7a825, transparent),
    radial-gradient(ellipse 42% 3px at 46% 76%, #f4d7a818, transparent);

}
.hero-grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero-scene::after {                            /* vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 60% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* --- Layout --- */
.hero-inner {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
  padding-top: 40px; padding-bottom: 56px;
}

/* --- Text --- */
.eyebrow {
  font-family: var(--heading); font-weight: 500; color: var(--gold); letter-spacing: .28em;
  text-transform: uppercase; font-size: .9rem; margin-bottom: .9em;
}
/* Jan's portrait beside his name: a small circle in a gold ring, lit like the dawn behind the book */
.hero-byline { display: flex; align-items: center; gap: 16px; }
.hero-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; }
.hero-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--bg), 0 0 0 5px rgba(201, 164, 92, .35), 0 0 26px rgba(255, 200, 120, .28);
}
@media (max-width: 820px) {
  .hero-byline { gap: 12px; font-size: .8rem; letter-spacing: .2em; white-space: nowrap; }   /* one line beside the portrait */
  .hero-avatar { width: 46px; height: 46px; }
}
@media (max-width: 360px) { .hero-byline { font-size: .72rem; letter-spacing: .16em; } }
@media (max-width: 820px) and (max-height: 700px) { .hero-avatar { width: 38px; height: 38px; } }

.hero-title {
  font-size: clamp(2.4rem, 8.5vw, 4.9rem); letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: .3em; color: var(--gold-bright);
  width: max-content; max-width: none;
}
.hero-title { text-shadow: 0 2px 18px rgba(255, 190, 110, .12); }
.lead { font-size: 1.45rem; line-height: 1.5; color: var(--text); max-width: 30ch; margin-bottom: 1.4em; }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px;
  font-family: var(--heading); font-size: .95rem; letter-spacing: .06em; text-decoration: none;
  color: var(--gold-bright);
}
.text-link:hover { color: var(--text); }
.text-link-arrow { display: inline-block; transition: transform var(--dur-quick) var(--ease-ui); }
@media (hover: hover) { .text-link:hover .text-link-arrow { transform: translateX(4px); } }
.hero .actions { align-items: center; gap: 12px 24px; }
.hero-inscription {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 28px 0 0; color: var(--text-muted); font-size: 1.05rem;
}
.hero-inscription::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.hero-inscription > span:not(.hero-inscription-place) { color: var(--text); }

/* --- The 3D book --- */
.hero-book { position: relative; justify-self: center; }
.hero-halo {
  position: absolute; left: 50%; top: 45%; width: 190%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 222, 165, .5) 0%, rgba(255, 180, 100, .18) 35%, transparent 65%);
}
.book3d { width: 340px; perspective: 1400px; }
.book3d-body {
  position: relative; transform-style: preserve-3d;
  transform: rotateY(calc(24deg + var(--tilt-y, 0deg) + var(--turn, 0deg))) rotateX(var(--tilt-x, 0deg));
  transition: transform .6s var(--ease-slow);
}
.book3d-front {
  width: 100%; border-radius: 1px 3px 3px 1px;
  box-shadow:
    0 0 0 1px rgba(255, 225, 170, .18),
    -24px 34px 60px rgba(0, 0, 0, .55),
    0 0 90px rgba(255, 190, 110, .28);
  -webkit-box-reflect: below 6px linear-gradient(transparent 64%, rgba(255, 255, 255, .16));
}
.book3d-spine {
  position: absolute; left: 0; top: 0; width: 30px; height: 100%;
  transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(to right, #08121f, #1d3a5e 45%, #0b1a2c);
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .25);
}
.book3d-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  transform: translateZ(1px); mix-blend-mode: screen; opacity: .9;
  background: radial-gradient(circle at var(--gx, 70%) var(--gy, 18%), rgba(255, 240, 210, .28), transparent 46%);
}

/* Desktop: the hero fades into the page, so the book's reflection and the sea never end in a hard line */
@media (min-width: 821px) {
  .hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 1;
    background: linear-gradient(to bottom, rgba(15, 13, 11, 0), var(--bg));
    pointer-events: none;
  }
  .scroll-cue { z-index: 2; }
}

/* --- Scroll cue (desktop) --- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--heading); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 36px; transform-origin: top;
  background: linear-gradient(var(--gold), transparent);
}

/* --- Phone --- */
@media (max-width: 820px) {
  /* Spacing is tuned so the gold button stays on the first screen of a 812px-tall phone.
     The horizon moves with the book, so the book always rises out of the sea. */
  .hero { --horizon: 296px; --sun-x: 50%; min-height: 0; display: block; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; padding-bottom: 56px; }
  .hero-book { order: -1; }
  .book3d { width: 200px; }
  .hero .hero-sea::after { height: 170px; opacity: .22; }
  .book3d-front { -webkit-box-reflect: below 6px linear-gradient(transparent 91%, rgba(255,255,255,.10)); }

  #top { scroll-margin-top: 0; }
  .hero-sun { width: 220px; height: 220px; }
  .hero-sunpath { width: 220px; bottom: auto; height: 110px; }   /* stays clear of the text */
  .lead { font-size: 1.3rem; }
  .scroll-cue { display: none; }
}

/* Shorter phones: a smaller book keeps the gold button on the first screen */
@media (max-width: 820px) and (max-height: 800px) {
  .hero { --horizon: 245px; }
  .hero-inner { gap: 28px; padding-top: 24px; }
  .book3d { width: 170px; }
}
@media (max-width: 820px) and (max-height: 700px) {
  .hero { --horizon: 215px; }
  .hero-inner { gap: 28px; padding-top: 20px; }
  .book3d { width: 150px; }
  .hero-sun { width: 170px; height: 170px; }
}

/* --- Motion (only when the visitor hasn't asked for less) --- */
@media (prefers-reduced-motion: no-preference) {
  .hero-sun::after {
    content: ""; position: absolute; inset: -30%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 160, .35), transparent 60%);
    animation: sunBreathe 8s ease-in-out infinite;
  }
  .hero-halo { animation: sunBreathe 8s ease-in-out infinite; }
  .hero-fleet-drift { animation: fleetDrift 60s ease-in-out infinite alternate; }
  .hero-sunpath::before { animation: glint 6s ease-in-out infinite alternate; }
  .scroll-cue::after { animation: cue 2.4s var(--ease-slow) infinite; }
  .book3d { animation: bookDrift 8s ease-in-out infinite; }

  /* Entrance: plays on each page load (the "hero-intro" class is set in <head>) */
  .hero-intro .hero-sky   { animation: sunrise 1.4s var(--ease-slow) both; }
  .hero-intro .hero-sun   { animation: sunUp 1.4s var(--ease-slow) both; }
  .hero-intro .hero-sea::before,
  .hero-intro .hero-sunpath { animation: fadeIn 1.2s ease-out .3s both; }
  .hero-intro .hero-fleet { animation: fadeIn 1.4s ease-out .5s both; }
  .hero-intro .hero-book  { animation: bookRise 1.1s var(--ease-slow) .5s both; }
  .hero-intro .hero-in    { animation: textIn .5s var(--ease-slow) .25s backwards; }
  .hero-intro .eyebrow.hero-in { animation-delay: .15s; }
  .hero-intro .hero-title.hero-in {
    animation: none;
  }
}

/* Pause the looping effects while the hero is scrolled out of view */
.hero.is-offscreen *, .hero.is-offscreen *::before, .hero.is-offscreen *::after { animation-play-state: paused !important; }

@keyframes sunrise  { from { opacity: .15; } to { opacity: 1; } }
@keyframes sunUp    { from { opacity: 0; transform: translate(-50%, -18%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes fadeIn   { from { opacity: 0; } }
@keyframes bookRise { from { opacity: 0; transform: translateY(60px) rotateY(-14deg); } }
@keyframes textIn   { from { opacity: 0; transform: translateY(14px); } }
@keyframes titleIn  { from { opacity: 0; letter-spacing: .35em; } }
@keyframes sheen    { from { background-position: 100% 0; } }
@keyframes sunBreathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes fleetDrift { to { transform: translateX(-36px); } }
@keyframes glint    { from { opacity: .45; transform: translateY(-2px); } to { opacity: .85; transform: translateY(3px); } }
@keyframes float    { 50% { transform: translateY(-6px); } }
@keyframes cue      { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ===== Sections: chapters of one continuous night (see docs/AUDIT.md) ===== */
.section { padding: 120px 0; }
@media (min-width: 821px) {
  .section { padding: 80px 0; }
  .saga { padding-top: 48px; }
}
/* Raised bands fade in and out of the night instead of hard borders */
.section-dark {
  background: linear-gradient(to bottom, var(--bg), var(--bg-raised) 160px, var(--bg-raised) calc(100% - 160px), var(--bg));
}
.section-intro { color: var(--text-muted); font-size: 1.3rem; max-width: 50ch; margin: 0 0 56px; }
@media (max-width: 700px) { .section { padding: 76px 0; } }

/* --- Chapter headings: numeral, inscription rule, headline --- */
.chapter { margin-bottom: 28px; }
.chapter-mark {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-family: var(--heading); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.chapter-rule {
  position: relative; flex: none; width: 56px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}
.chapter-rule::after {                          /* the diamond at the end of the rule */
  content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px;
  background: var(--gold); transform: rotate(45deg);
}
.chapter-num { font-weight: 700; color: var(--gold-bright); letter-spacing: .12em; }
.chapter-num::after { content: "·"; margin-left: 14px; color: var(--text-muted); }
.chapter-title {
  margin: 0; max-width: 20ch;
  font-family: var(--heading); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.12; letter-spacing: .02em; color: var(--text);
}
.chapter-center { text-align: center; }
.chapter-center .chapter-mark { justify-content: center; }
.chapter-center .chapter-mark::after {          /* mirrored rule on the right */
  content: ""; width: 56px; height: 1px; background: linear-gradient(to left, transparent, var(--gold));
}
.chapter-center .chapter-title { margin-inline: auto; }

/* ===== Books ===== */
.book {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start;
  padding: 44px 0;
}
.book + .book { border-top: 1px solid rgba(201, 164, 92, .16); }
.book-cover { width: 100%; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55); }
.book h3 { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: .03em; color: var(--text); margin-bottom: .4em; }
.book-body { max-width: 56ch; }
.book-body > p:not(.book-meta) { font-size: 1.3rem; }
.book-meta {
  font-family: var(--heading); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9em;
}
.book-note { color: var(--text-muted); font-style: italic; }
.buy { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.buy a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 3px;
  text-decoration: none; font-size: 1.05rem;
}
.buy a { transition: border-color var(--dur-quick) var(--ease-ui), background-color var(--dur-quick) var(--ease-ui), transform var(--dur-instant) var(--ease-ui); }
.buy a:hover { border-color: var(--gold); background: rgba(201, 164, 92, 0.1); }
.buy a:active { transform: scale(.98); }
@media (max-width: 640px) {
  .book { grid-template-columns: 1fr; gap: 22px; }
  .book-cover { max-width: 200px; }
}

/* --- The trilogy shelf: three books side by side; the chosen one rises into its own light --- */
/* The coloured glows reach past the books; clip them at the screen edge, never let them widen the page */
.shelf { overflow-x: hidden; overflow-x: clip; margin-inline: -16px; padding-inline: 16px; }
@media (min-width: 700px) { .shelf { margin-inline: -32px; padding-inline: 32px; } }
.shelf-books {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(16px, 5vw, 72px); padding: 48px 0 0;
}
.shelf-books::after {                           /* the shelf: a line of dawn light under the books */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 38px; height: 1px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 50%, rgba(255, 228, 170, .7), rgba(201, 164, 92, .18) 70%, transparent);
}
.shelf-book {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 22px;
  width: clamp(92px, 26vw, 196px); padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelf-book[data-book="stridslarm"] { --tint: rgba(205, 80, 35, .42); }
.shelf-book[data-book="jagad"]      { --tint: rgba(125, 145, 80, .40); }
.shelf-book[data-book="kungablod"]  { --tint: rgba(90, 150, 215, .42); }
.shelf-glow {                                   /* each book's own colour of light, behind it */
  position: absolute; left: 50%; top: 40%; z-index: -1; width: 210%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, var(--tint) 0%, transparent 62%);
  opacity: .2; transition: opacity 900ms var(--ease-rise);
}
.shelf-3d { display: block; width: 100%; perspective: 1000px; }
.shelf-body {
  position: relative; display: block; transform-style: preserve-3d;
  transform: rotateY(22deg) scale(.9); transform-origin: 50% 100%;
  transition: transform 750ms var(--ease-rise);
}
.shelf-body picture { display: block; }
.shelf-front {
  display: block; width: 100%; height: auto; border-radius: 1px 3px 3px 1px;
  box-shadow: 0 0 0 1px rgba(255, 225, 170, .14), -14px 22px 40px rgba(0, 0, 0, .55);
  -webkit-box-reflect: below 5px linear-gradient(transparent 80%, rgba(255, 255, 255, .13));
}
.shelf-spine {
  position: absolute; left: 0; top: 0; width: 10%; height: 100%; transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(to right, #0d0b09, #2c231a 45%, #0d0b09); box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .25);
}
.shelf-body::after {                            /* books not chosen stand in shadow */
  content: ""; position: absolute; inset: 0; border-radius: 1px 3px 3px 1px; pointer-events: none;
  background: rgba(8, 7, 6, .5); transform: translateZ(1px); transition: opacity 600ms var(--ease-rise);
}
.shelf-num {
  position: relative; font-family: var(--heading); font-weight: 700; font-size: .95rem; letter-spacing: .18em;
  color: var(--text-muted); transition: color var(--dur-ui) var(--ease-ui);
}
.shelf-num::after {                             /* a gold diamond marks the chosen book */
  content: ""; position: absolute; left: 50%; top: calc(100% + 8px); width: 7px; height: 7px;
  background: var(--gold); transform: translateX(-50%) rotate(45deg) scale(0); transition: transform var(--dur-ui) var(--ease-rise);
}
.shelf-book[aria-selected="true"] .shelf-glow { opacity: 1; }
.shelf-book[aria-selected="true"] .shelf-body { transform: translateY(-20px) rotateY(8deg) scale(1.04); }
.shelf-book[aria-selected="true"] .shelf-body::after { opacity: 0; }
.shelf-book[aria-selected="true"] .shelf-num { color: var(--gold-bright); }
.shelf-book[aria-selected="true"] .shelf-num::after { transform: translateX(-50%) rotate(45deg) scale(1); }
@media (hover: hover) {
  .shelf-book:not([aria-selected="true"]):hover .shelf-body { transform: translateY(-8px) rotateY(16deg) scale(.93); }
  .shelf-book:not([aria-selected="true"]):hover .shelf-body::after { opacity: .45; }
  .shelf-book:not([aria-selected="true"]):hover .shelf-glow { opacity: .45; }
}
.shelf-book:focus-visible { outline: none; }
.shelf-book:focus-visible .shelf-front { outline: 2px solid var(--gold-bright); outline-offset: 5px; }

/* The chosen book's details: all panels share one place, so the page never jumps when switching */
.shelf-panels { display: grid; max-width: 680px; margin: 56px auto 0; text-align: center; }
.shelf-panel.book {
  grid-area: 1 / 1; display: block; padding: 0; border: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 420ms var(--ease-rise), transform 420ms var(--ease-rise), visibility 0s linear 420ms;
}
.shelf-panel.book.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 420ms var(--ease-rise) 120ms, transform 420ms var(--ease-rise) 120ms, visibility 0s;
}
.shelf-panel + .shelf-panel { border-top: 0; }
.shelf-panel .book-body { max-width: none; }
.shelf-panel .buy { justify-content: center; }
@media (max-width: 640px) {
  .shelf-books { padding-top: 36px; }
  .shelf-book { gap: 18px; }
  .shelf-panels { margin-top: 44px; }
  .shelf-panel .book-body > p:not(.book-meta) { font-size: 1.15rem; }
}
/* Without the script every book's details are simply listed */
html:not(.motion-ready) .shelf-panels { display: block; }
html:not(.motion-ready) .shelf-panel.book { opacity: 1; visibility: visible; transform: none; margin-bottom: 48px; }


/* ===== Events: an engraved invitation instead of a flyer ===== */
.event {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; margin-top: 56px;
}
.invite { position: relative; width: 100%; max-width: 440px; justify-self: center; }
.invite-card {
  position: relative; padding: 52px 40px 46px; text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 200, 130, .11), transparent 62%),
    linear-gradient(#1c1713, #110e0b);
  border: 1px solid rgba(201, 164, 92, .55);
  outline: 1px solid rgba(201, 164, 92, .2); outline-offset: -10px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
}
.invite-card::before {                          /* diamond set into the top edge */
  content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px;
  background: var(--gold); transform: translateX(-50%) rotate(45deg);
}
.invite-label {
  margin: 0; font-family: var(--heading); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-bright);
}
.invite-label em { font-family: var(--body); font-size: 1.25em; letter-spacing: .02em; text-transform: none; }
.invite-day {
  margin: 14px 0 0; font-family: var(--heading); font-weight: 700; line-height: .92;
  font-size: clamp(6rem, 13vw, 8.6rem); color: var(--gold-bright);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .invite-day {
    background: linear-gradient(170deg, #fff1c9 0%, #e9cf8f 35%, #c9a45c 60%, #8f6a30 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  }
}
.invite-month { margin: 6px 0 0; font-family: var(--heading); font-size: 1.5rem; letter-spacing: .32em; text-transform: uppercase; }
.invite-rule { display: block; width: 120px; height: 1px; margin: 24px auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.invite-time { margin: 0 0 8px; font-size: 1.3rem; }
.invite-place { margin: 0; font-family: var(--heading); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
.invite-place span {
  display: block; margin-top: 4px; font-family: var(--body); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
.invite-cover { position: absolute; right: -40px; bottom: -44px; width: 108px; transform: rotate(6deg); }
.invite-cover img { box-shadow: 0 22px 44px rgba(0, 0, 0, .65), 0 0 0 1px var(--line); }

.event h3 { font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 500; color: var(--text); margin-top: .5em; }
.event-body > div > p:not(.event-soon) { font-size: 1.3rem; max-width: 40ch; }
.event .actions { align-items: center; gap: 12px 22px; margin-top: 12px; }
.event-soon {
  display: inline-block; margin: 0; font-family: var(--heading); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bg); background: var(--gold); padding: 5px 10px; border-radius: 2px;
}
.event-soon[hidden] { display: none; }
.share-status { color: var(--text-muted); font-size: 1rem; margin: 12px 0 0; min-height: 1.6em; overflow-wrap: anywhere; }
button.text-link { background: none; border: 0; cursor: pointer; }
/* --- The poster: framed like the invitation card, opens full size --- */
.poster { max-width: 880px; margin: 88px auto 0; }
.poster-frame {
  position: relative; padding: 14px;
  background: linear-gradient(#1c1713, #110e0b);
  border: 1px solid rgba(201, 164, 92, .55);
  outline: 1px solid rgba(201, 164, 92, .2); outline-offset: -8px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
}
.poster-frame::before {                         /* diamond set into the top edge, as on the card */
  content: ""; position: absolute; left: 50%; top: -5px; z-index: 1; width: 9px; height: 9px;
  background: var(--gold); transform: translateX(-50%) rotate(45deg);
}
.poster-open {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden;
}
.poster-open img { width: 100%; transition: transform 600ms var(--ease-rise); }
.poster-zoom {
  position: absolute; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 3px;
  font-family: var(--heading); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bg); background: rgba(226, 193, 126, .92);
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
}
@media (hover: hover) {
  .poster-open:hover img { transform: scale(1.015); }
  .poster-open:hover .poster-zoom { opacity: 1; transform: none; }
}
.poster-open:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.poster-open:focus-visible .poster-zoom { opacity: 1; transform: none; }
@media (hover: none) { .poster-zoom { opacity: 1; transform: none; } }   /* touch screens: always show the hint */
.poster-caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: 18px; color: var(--text-muted); font-size: 1.1rem;
}
@media (max-width: 820px) { .poster { margin-top: 64px; } .poster-frame { padding: 8px; outline-offset: -5px; } }

/* --- Full-size viewer --- */
.poster-dialog {
  width: min(96vw, 1500px); max-width: none; max-height: 96vh; padding: 0; border: 0;
  background: transparent; overflow: visible;
}
.poster-dialog::backdrop { background: rgba(8, 7, 6, .92); }
.poster-dialog img {
  display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px var(--line);
}
.poster-close {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 48px; height: 48px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1; color: var(--gold-bright); background: rgba(15, 13, 11, .8);
  border: 1px solid var(--line); border-radius: 4px;
}
.poster-close:hover { border-color: var(--gold); }
html.poster-viewing { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .poster-dialog[open] { animation: posterIn 380ms var(--ease-rise); }
  .poster-dialog[open]::backdrop { animation: fadeIn 300ms ease-out; }
}
@keyframes posterIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 820px) {
  .event { grid-template-columns: 1fr; gap: 64px; margin-top: 40px; }
  .invite { max-width: 340px; justify-self: start; }
  .invite-card { padding: 44px 24px 40px; }
  .invite-cover { position: relative; right: auto; bottom: auto; width: 76px; margin: 24px 14px 0 auto; transform: rotate(6deg); }
}

/* ===== About: the portrait dissolves into the night ===== */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.portrait-wrap {
  width: 100%; max-width: 388px; justify-self: end;
  /* fades out before the photo's own edges, so its black never shows as a box */
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 100%);
}
.portrait { width: 100%; }
.about-body p { font-size: 1.3rem; max-width: 54ch; }
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; gap: 12px; }
  .portrait-wrap { max-width: 300px; justify-self: start; }
}

/* ===== Finale: the dawn horizon returns ===== */
.finale {
  position: relative; overflow: hidden; text-align: center; padding: 150px 0 130px;
  background: radial-gradient(60% 55% at 50% 0%, rgba(215, 140, 70, .16), transparent 70%), var(--bg);
}
.finale-horizon {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: radial-gradient(45% 100% at 50% 50%, rgba(255, 228, 170, .9), rgba(255, 228, 170, .12) 70%, transparent);
}
.finale-horizon::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 560px; height: 140px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 205, 140, .28), transparent);
}
.finale-inner > p { color: var(--text-muted); font-size: 1.3rem; max-width: 40ch; margin: 0 auto 30px; text-wrap: balance; }
.finale-email {
  display: inline-block; padding-bottom: 6px; overflow-wrap: anywhere;
  font-family: var(--body); font-style: italic; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.3;
  color: var(--gold-bright); text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 92, .35);
  transition: color var(--dur-quick) var(--ease-ui), border-color var(--dur-quick) var(--ease-ui);
}
.finale-email:hover { color: var(--text); border-color: var(--gold); }
.finale-inner > .finale-follow { margin: 36px auto 0; font-size: 1.05rem; }
@media (max-width: 700px) { .finale { padding: 110px 0 96px; } }

/* ===== Footer ===== */
.site-footer { padding: 28px 0; color: var(--text-muted); font-size: 1rem; }
.site-footer p { margin: 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-mark { order: 2; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.footer-inner p { order: 1; }
.footer-top { order: 3; font-size: .82rem; }

/* ===== Blog, articles and FAQ (pages under /blogg/ and /fragor/) ===== */
.nav a[aria-current="page"] { color: var(--gold-bright); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1279px) and (min-width: 901px) { .nav { gap: 22px; } .nav a { font-size: 1.1rem; } }
.menu-more { margin-top: 18px; }
.menu-more a { font-size: clamp(1.35rem, 6vw, 1.7rem); }
.menu-list a[aria-current="page"] { color: var(--gold-bright); }
.footer-links { order: 3; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: .95rem; display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a:hover { color: var(--gold-bright); }
.footer-top { order: 4; }
.footer-inner { flex-wrap: wrap; }
.about-more { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 8px; }

/* Article */
.post { padding: 56px 0 24px; }
.post-wrap { max-width: 760px; margin-inline: auto; }
.post-back { margin-bottom: 28px; }
.post-back .text-link-arrow { transition: transform var(--dur-quick) var(--ease-ui); }
@media (hover: hover) { .post-back:hover .text-link-arrow { transform: translateX(-4px); } }
.post-head .chapter-mark { margin-bottom: 14px; }
.post-title {
  margin: 0 0 .35em; font-family: var(--heading); font-weight: 500; font-size: clamp(2.1rem, 5vw, 3.5rem);
  line-height: 1.1; letter-spacing: .01em; color: var(--text);
}
.post-meta { font-family: var(--heading); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 28px; }
.post-lead { font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.5; color: var(--text); margin: 0; }
.post-visual-wrap { max-width: 920px; margin: 48px auto; }
.post-body > h2 {
  margin: 1.9em 0 .55em; font-family: var(--heading); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.2; color: var(--text);
}
.post-body > p { font-size: 1.25rem; line-height: 1.75; }
.post-body > p:first-of-type::first-letter {        /* a drop cap opens every article */
  float: left; margin: .06em .12em 0 0; font-family: var(--heading); font-weight: 700; font-size: 3.4em; line-height: .82;
  color: var(--gold-bright);
}
q.quote { font-style: italic; color: var(--gold-bright); }
.post-foot {
  display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 64px; padding-top: 40px;
  border-top: 1px solid rgba(201, 164, 92, .2); text-align: center;
}
.post-foot .actions { justify-content: center; }

/* Article and card pictures */
.post-visual { position: relative; }
.post-covers { display: flex; justify-content: center; align-items: flex-end; gap: 5%; padding: 12px 0; }
.post-covers picture { width: 24%; }
.post-covers picture:nth-child(1) { transform: rotate(-3deg); }
.post-covers picture:nth-child(3) { transform: rotate(3deg); }
.post-covers img { width: 100%; box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); }
.post-portrait picture { display: block; max-width: 340px; margin: 0 auto;
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 100%); }
.post-portrait img { width: 100%; }
.post-scene {
  height: clamp(220px, 34vw, 340px); overflow: hidden; border: 1px solid rgba(201, 164, 92, .3); border-radius: 2px;
  background: #0b0d12;
}
.ps-sky { position: absolute; inset: 0 0 38% 0;
  background: radial-gradient(40% 70% at 50% 100%, rgba(255, 214, 150, .7), rgba(240, 170, 95, .25) 45%, transparent 80%), linear-gradient(#0a101b, #183150 70%, #2a4766); }
.ps-sun { position: absolute; left: 50%; top: 62%; width: 140px; height: 140px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff6dc, #ffe3a6 30%, rgba(255, 200, 120, .4) 52%, transparent 70%); }
.ps-sea { position: absolute; inset: 62% 0 0 0; background: linear-gradient(#1b2c3e, #0c1016); }
.ps-path { position: absolute; left: 50%; top: 62%; bottom: 0; width: 160px; transform: translateX(-50%);
  background: repeating-linear-gradient(transparent 0 7px, rgba(255, 218, 160, .45) 7px 9px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0, #000 20%, transparent 80%); mask-image: radial-gradient(50% 100% at 50% 0, #000 20%, transparent 80%); }
.post-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(70% 90% at 50% 40%, #241c14, #0e0c0a 75%);
}
.plate-mark { width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); }
.plate-name { font-family: var(--heading); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-bright); }
.plate-sub { font-family: var(--heading); font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--text-muted); }

/* From the book itself: its back-cover hook and chapter titles */
.book-hook {
  margin: -.2em 0 .9em; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.4; color: var(--gold-bright);
}
.book-chapters { margin-top: 1.1em; font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); }
.book-chapters-label {
  display: block; margin-bottom: 4px; font-family: var(--heading); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}

/* Featured quote and captioned pictures inside articles */
.post-quote { margin: 2.2em 0; padding: 0; text-align: center; }
.post-quote blockquote { margin: 0; }
.post-quote blockquote p {
  margin: 0 auto; max-width: 30ch; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.35; color: var(--gold-bright);
}
.post-quote blockquote p::before, .post-quote blockquote p::after { color: var(--gold); }
.post-quote blockquote p span::before { content: "\201D"; }
.post-quote blockquote p span::after { content: "\201D"; }
.post-quote figcaption {
  margin-top: 16px; font-family: var(--heading); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.post-quote figcaption em { font-family: var(--body); font-size: 1.15em; letter-spacing: .02em; text-transform: none; }
.post-figure { margin: 2.4em 0; }
.post-figure figcaption { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--text-muted); font-style: italic; }
.post-knife { overflow: hidden; border: 1px solid rgba(201, 164, 92, .3); border-radius: 2px; }
.post-knife img { width: 100%; }
.post-knife::after {                             /* a soft vignette hides the old artwork's rough edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(8, 7, 6, .55);
}
.plate-emblem { display: block; width: 110px; }
.plate-emblem img { width: 100%; border-radius: 2px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 164, 92, .25); }
.story-visual .plate-emblem { width: 70px; }
.story-visual .post-plate { gap: 10px; }
.post-seal { display: block; width: 56px; }
.post-seal img { width: 100%; border-radius: 2px; opacity: .9; box-shadow: 0 0 0 1px rgba(201, 164, 92, .3); }

/* The excerpt page and its link on Stridslarm */
.book-excerpt { margin-top: 1em; }
.excerpt-more { margin-top: 2em; text-align: center; font-style: italic; color: var(--text-muted); }

/* Story cards (blog index and "more stories") */
.blog-index { padding-top: 64px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.story-card {
  border: 1px solid rgba(201, 164, 92, .24); border-radius: 2px; background: linear-gradient(#18140f, #110e0b);
  transition: border-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
}
@media (hover: hover) { .story-card:hover { border-color: var(--gold); transform: translateY(-4px); } }
.story-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.story-link:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.story-visual { height: 190px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0c0a08; }
.story-visual .post-visual { width: 100%; }
.story-visual .post-covers { padding: 16px 0; }
.story-visual .post-covers picture { width: 20%; }
.story-visual .post-portrait picture { max-width: 150px; }
.story-visual .post-scene { height: 190px; border: 0; }
.story-visual .plate-name { font-size: 1.6rem; }
.story-text { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; flex: 1; }
.story-tag { margin: 0; font-family: var(--heading); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.story-title { margin: 0; font-family: var(--heading); font-weight: 500; font-size: 1.45rem; line-height: 1.2; color: var(--text); }
.story-text p { margin: 0; color: var(--text-muted); font-size: 1.08rem; line-height: 1.55; }
.story-text .text-link { margin-top: auto; min-height: 44px; }
.more-stories { padding-top: 88px; }

/* FAQ */
.faq-wrap { max-width: 840px; }
.faq { padding-top: 64px; }
.faq-list { border-top: 1px solid rgba(201, 164, 92, .24); }
.faq-item { border-bottom: 1px solid rgba(201, 164, 92, .24); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none;
  font-family: var(--heading); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.3; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-bright); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.faq-icon { position: relative; flex: none; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--gold);
  transition: transform var(--dur-ui) var(--ease-rise);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }       /* plus turns to minus */
.faq-a { padding: 0 4px 24px; }
.faq-a p { margin: 0; font-size: 1.2rem; line-height: 1.7; max-width: 66ch; }

/* ===== Phone action bar ===== */
.action-bar { display: none; }
@media (max-width: 820px) {
  .action-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(23, 19, 15, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    transform: translateY(110%); visibility: hidden;
    transition: transform 280ms cubic-bezier(.2, .7, .1, 1), visibility 0s linear 280ms;
  }
  .action-bar.is-visible {
    transform: none; visibility: visible;
    transition: transform 280ms cubic-bezier(.2, .7, .1, 1), visibility 0s;
  }
  .action-bar-inner { display: flex; align-items: center; gap: 12px; }
  .action-bar-text { margin: 0; flex: 1; font-size: 1rem; line-height: 1.3; color: var(--text); }
  /* Leave room so the bar never covers the footer */
  .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .action-bar, .action-bar.is-visible { transition: none; }
}

/* =====================================================================
   Motion: reveals, header, saga (see docs/MOTION.md)
   Content is only hidden once script.js marks the page "motion-ready".
   ===================================================================== */

/* --- Header hides on the way down, returns on the way up --- */
@media (max-width: 900px) {
  .header-hidden .site-header:not(:focus-within) { transform: translateY(-100%); }
}

/* --- Reveals --- */
.motion-ready [data-reveal] {
  opacity: 0; transform: translateY(var(--rise));
  transition: opacity var(--dur-reveal) var(--ease-rise), transform var(--dur-reveal) var(--ease-rise);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Chapter headings: rise, then the inscription rule draws toward the numeral */
.motion-ready [data-reveal="title"] .chapter-rule,
.motion-ready [data-reveal="title"] .chapter-mark::after {
  transform: scaleX(0); transform-origin: right;
  transition: transform 700ms var(--ease-rise) 250ms;
}
.motion-ready [data-reveal="title"] .chapter-mark::after { transform-origin: left; }
.motion-ready [data-reveal="title"].is-in .chapter-rule,
.motion-ready [data-reveal="title"].is-in .chapter-mark::after { transform: scaleX(1); }

/* Images: uncovered from the bottom up, like light rising */
.motion-ready [data-reveal="wipe"] { opacity: 1; transform: none; overflow: hidden; }
.motion-ready [data-reveal="wipe"] img {
  clip-path: inset(100% 0 0 0); transform: scale(1.06);
  transition: clip-path var(--dur-scene) var(--ease-rise), transform var(--dur-scene) var(--ease-rise);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion-ready [data-reveal="wipe"].is-in img { clip-path: inset(0); transform: none; }

/* The portrait brightens, as if turning toward firelight */
.motion-ready [data-reveal="light"] img {
  filter: brightness(.55);
  transition: filter 1400ms var(--ease-rise);
}
.motion-ready [data-reveal="light"].is-in img { filter: none; }

/* Covers lift a little under the pointer */
@media (hover: hover) {
  .book-cover { transition: transform var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui); }
  .book:hover .book-cover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(0, 0, 0, .6); }
}

/* --- Badge (e.g. "Börja här") --- */
.badge {
  display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 2px; vertical-align: 2px;
  font-family: var(--heading); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold); color: var(--bg);
}
/* --- Reduced motion: everything is present and still --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
  .motion-ready [data-reveal="wipe"] img { clip-path: none; transform: none; }
  .motion-ready [data-reveal="light"] img { filter: none; }
  .btn-gold::after { display: none; }
  .btn:active, .buy a:active { transform: none; }
}

/* Atmospheric depth: broad mist layers soften the horizon; irregular ripples catch dawn light. */
/* A single field of broken wavelets; no repeated noise tiles or horizontal bands. */
.hero-sea::after {
  content: ""; position: absolute; inset: 0; opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20340%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23aec3ce%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M246.8%2014.8q7.4%200.8%2016.5%200%22%20opacity%3D%220.21%22%20stroke-width%3D%220.47%22%2F%3E%3Cpath%20d%3D%22M73.4%20181.5q31.0%201.7%2068.9%200%22%20opacity%3D%220.15%22%20stroke-width%3D%221.04%22%2F%3E%3Cpath%20d%3D%22M1269.2%20274.8q35.8%20-3.3%2079.5%200%22%20opacity%3D%220.13%22%20stroke-width%3D%221.36%22%2F%3E%3Cpath%20d%3D%22M-65.6%2020.6q13.4%200.7%2029.7%200%22%20opacity%3D%220.28%22%20stroke-width%3D%220.49%22%2F%3E%3Cpath%20d%3D%22M228.6%20278.7q21.2%20-2.5%2047.0%200%22%20opacity%3D%220.15%22%20stroke-width%3D%221.38%22%2F%3E%3Cpath%20d%3D%22M164.1%2018.7q4.3%20-1.0%209.5%200%22%20opacity%3D%220.11%22%20stroke-width%3D%220.48%22%2F%3E%3Cpath%20d%3D%22M169.8%2064.8q12.3%201.3%2027.4%200%22%20opacity%3D%220.12%22%20stroke-width%3D%220.64%22%2F%3E%3Cpath%20d%3D%22M1049.7%20218.8q38.3%200.4%2085.1%200%22%20opacity%3D%220.16%22%20stroke-width%3D%221.17%22%2F%3E%3Cpath%20d%3D%22M270.8%20133.7q19.6%20-1.1%2043.5%200%22%20opacity%3D%220.14%22%20stroke-width%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M572.9%20294.1q21.5%20-0.2%2047.7%200%22%20opacity%3D%220.13%22%20stroke-width%3D%221.43%22%2F%3E%3Cpath%20d%3D%22M994.5%2089.5q9.7%20-1.5%2021.4%200%22%20opacity%3D%220.21%22%20stroke-width%3D%220.72%22%2F%3E%3Cpath%20d%3D%22M382.1%2012.3q8.1%20-0.6%2018.0%200%22%20opacity%3D%220.11%22%20stroke-width%3D%220.46%22%2F%3E%3Cpath%20d%3D%22M1376.0%2010.1q11.2%200.9%2024.9%200%22%20opacity%3D%220.21%22%20stroke-width%3D%220.45%22%2F%3E%3Cpath%20d%3D%22M1239.7%20279.1q49.1%200.2%20109.1%200%22%20opacity%3D%220.10%22%20stroke-width%3D%221.38%22%2F%3E%3Cpath%20d%3D%22M495.6%2036.7q15.8%20-0.8%2035.2%200%22%20opacity%3D%220.27%22%20stroke-width%3D%220.54%22%2F%3E%3Cpath%20d%3D%22M844.4%20108.7q29.9%200.5%2066.4%200%22%20opacity%3D%220.11%22%20stroke-width%3D%220.79%22%2F%3E%3Cpath%20d%3D%22M-78.4%2041.1q5.6%201.1%2012.4%200%22%20opacity%3D%220.22%22%20stroke-width%3D%220.56%22%2F%3E%3Cpath%20d%3D%22M1114.3%20285.7q34.0%203.2%2075.6%200%22%20opacity%3D%220.14%22%20stroke-width%3D%221.40%22%2F%3E%3Cpath%20d%3D%22M47.4%2092.6q15.2%20-1.1%2033.8%200%22%20opacity%3D%220.15%22%20stroke-width%3D%220.73%22%2F%3E%3Cpath%20d%3D%22M1011.3%2015.4q15.5%20-0.6%2034.4%200%22%20opacity%3D%220.27%22%20stroke-width%3D%220.47%22%2F%3E%3Cpath%20d%3D%22M658.4%20132.8q36.6%20-0.5%2081.4%200%22%20opacity%3D%220.22%22%20stroke-width%3D%220.87%22%2F%3E%3Cpath%20d%3D%22M1397.0%2011.3q5.7%20-1.0%2012.7%200%22%20opacity%3D%220.29%22%20stroke-width%3D%220.45%22%2F%3E%3Cpath%20d%3D%22M952.5%20182.0q40.6%20-0.6%2090.3%200%22%20opacity%3D%220.08%22%20stroke-width%3D%221.04%22%2F%3E%3Cpath%20d%3D%22M1379.1%2056.4q23.7%20-0.8%2052.6%200%22%20opacity%3D%220.18%22%20stroke-width%3D%220.61%22%2F%3E%3Cpath%20d%3D%22M1303.5%2091.0q7.8%201.1%2017.2%200%22%20opacity%3D%220.13%22%20stroke-width%3D%220.73%22%2F%3E%3Cpath%20d%3D%22M117.5%20121.1q11.5%201.5%2025.5%200%22%20opacity%3D%220.17%22%20stroke-width%3D%220.83%22%2F%3E%3Cpath%20d%3D%22M1243.2%20287.0q57.4%20-2.9%20127.4%200%22%20opacity%3D%220.11%22%20stroke-width%3D%221.41%22%2F%3E%3Cpath%20d%3D%22M689.6%20296.4q21.4%20-2.2%2047.6%200%22%20opacity%3D%220.14%22%20stroke-width%3D%221.44%22%2F%3E%3Cpath%20d%3D%22M298.0%20289.3q34.5%201.5%2076.7%200%22%20opacity%3D%220.10%22%20stroke-width%3D%221.41%22%2F%3E%3Cpath%20d%3D%22M1426.2%2029.6q13.3%20-0.3%2029.5%200%22%20opacity%3D%220.10%22%20stroke-width%3D%220.52%22%2F%3E%3Cpath%20d%3D%22M1070.5%20108.9q13.1%20-1.5%2029.2%200%22%20opacity%3D%220.21%22%20stroke-width%3D%220.79%22%2F%3E%3Cpath%20d%3D%22M496.7%20264.0q39.7%200.9%2088.2%200%22%20opacity%3D%220.11%22%20stroke-width%3D%221.33%22%2F%3E%3Cpath%20d%3D%22M340.6%2020.9q6.8%20-0.7%2015.0%200%22%20opacity%3D%220.12%22%20stroke-width%3D%220.49%22%2F%3E%3Cpath%20d%3D%22M255.4%2074.6q24.5%20-0.6%2054.4%200%22%20opacity%3D%220.27%22%20stroke-width%3D%220.67%22%2F%3E%3Cpath%20d%3D%22M331.9%20217.4q20.5%200.4%2045.5%200%22%20opacity%3D%220.12%22%20stroke-width%3D%221.17%22%2F%3E%3Cpath%20d%3D%22M108.5%20116.6q23.4%201.0%2051.9%200%22%20opacity%3D%220.16%22%20stroke-width%3D%220.82%22%2F%3E%3Cpath%20d%3D%22M1331.1%2042.6q10.0%201.3%2022.1%200%22%20opacity%3D%220.24%22%20stroke-width%3D%220.56%22%2F%3E%3Cpath%20d%3D%22M604.6%2010.0q5.2%200.6%2011.7%200%22%20opacity%3D%220.19%22%20stroke-width%3D%220.45%22%2F%3E%3Cpath%20d%3D%22M1376.7%2015.7q13.4%200.2%2029.7%200%22%20opacity%3D%220.22%22%20stroke-width%3D%220.47%22%2F%3E%3Cpath%20d%3D%22M1423.2%2014.5q7.4%200.0%2016.4%200%22%20opacity%3D%220.21%22%20stroke-width%3D%220.47%22%2F%3E%3Cpath%20d%3D%22M-52.2%2097.3q29.6%20-0.0%2065.9%200%22%20opacity%3D%220.16%22%20stroke-width%3D%220.75%22%2F%3E%3Cpath%20d%3D%22M1236.0%20238.1q47.8%202.4%20106.2%200%22%20opacity%3D%220.10%22%20stroke-width%3D%221.24%22%2F%3E%3Cpath%20d%3D%22M452.1%2017.8q11.3%200.6%2025.2%200%22%20opacity%3D%220.26%22%20stroke-width%3D%220.48%22%2F%3E%3Cpath%20d%3D%22M839.3%20148.4q31.8%200.3%2070.7%200%22%20opacity%3D%220.08%22%20stroke-width%3D%220.93%22%2F%3E%3Cpath%20d%3D%22M341.5%20120.3q11.1%200.4%2024.6%200%22%20opacity%3D%220.23%22%20stroke-width%3D%220.83%22%2F%3E%3Cpath%20d%3D%22M945.2%2048.4q16.1%200.5%2035.7%200%22%20opacity%3D%220.27%22%20stroke-width%3D%220.58%22%2F%3E%3Cpath%20d%3D%22M41.7%20172.3q33.7%20-0.7%2074.9%200%22%20opacity%3D%220.13%22%20stroke-width%3D%221.01%22%2F%3E%3Cpath%20d%3D%22M185.7%20164.6q32.9%202.0%2073.2%200%22%20opacity%3D%220.08%22%20stroke-width%3D%220.98%22%2F%3E%3Cpath%20d%3D%22M1003.2%20234.2q33.0%201.6%2073.3%200%22%20opacity%3D%220.07%22%20stroke-width%3D%221.22%22%2F%3E%3Cpath%20d%3D%22M1446.3%2025.6q12.7%20-0.8%2028.2%200%22%20opacity%3D%220.12%22%20stroke-width%3D%220.50%22%2F%3E%3Cpath%20d%3D%22M755.9%2089.9q30.5%20-1.1%2067.8%200%22%20opacity%3D%220.20%22%20stroke-width%3D%220.73%22%2F%3E%3Cpath%20d%3D%22M772.5%2088.1q29.0%20-1.3%2064.5%200%22%20opacity%3D%220.24%22%20stroke-width%3D%220.72%22%2F%3E%3Cpath%20d%3D%22M329.5%20185.9q16.9%201.2%2037.5%200%22%20opacity%3D%220.19%22%20stroke-width%3D%221.06%22%2F%3E%3Cpath%20d%3D%22M131.3%2063.0q16.8%200.5%2037.4%200%22%20opacity%3D%220.16%22%20stroke-width%3D%220.63%22%2F%3E%3Cpath%20d%3D%22M76.6%2079.9q10.1%20-0.9%2022.5%200%22%20opacity%3D%220.23%22%20stroke-width%3D%220.69%22%2F%3E%3Cpath%20d%3D%22M222.9%2020.0q9.9%20-0.6%2022.0%200%22%20opacity%3D%220.15%22%20stroke-width%3D%220.48%22%2F%3E%3Cpath%20d%3D%22M277.8%20187.9q33.8%20-2.1%2075.1%200%22%20opacity%3D%220.14%22%20stroke-width%3D%221.06%22%2F%3E%3Cpath%20d%3D%22M604.7%20173.2q18.5%20-2.3%2041.1%200%22%20opacity%3D%220.11%22%20stroke-width%3D%221.01%22%2F%3E%3Cpath%20d%3D%22M74.3%2079.3q16.2%200.0%2036.1%200%22%20opacity%3D%220.10%22%20stroke-width%3D%220.69%22%2F%3E%3Cpath%20d%3D%22M1382.3%20160.7q34.9%20-0.2%2077.6%200%22%20opacity%3D%220.20%22%20stroke-width%3D%220.97%22%2F%3E%3Cpath%20d%3D%22M1373.1%20274.9q65.6%201.7%20145.7%200%22%20opacity%3D%220.15%22%20stroke-width%3D%221.36%22%2F%3E%3Cpath%20d%3D%22M417.2%20197.6q18.2%20-0.1%2040.5%200%22%20opacity%3D%220.16%22%20stroke-width%3D%221.10%22%2F%3E%3Cpath%20d%3D%22M470.8%2045.5q6.7%20-1.2%2014.9%200%22%20opacity%3D%220.15%22%20stroke-width%3D%220.57%22%2F%3E%3Cpath%20d%3D%22M12.3%20233.0q21.4%20-0.6%2047.6%200%22%20opacity%3D%220.18%22%20stroke-width%3D%221.22%22%2F%3E%3Cpath%20d%3D%22M-13.2%2035.3q5.6%20-0.4%2012.4%200%22%20opacity%3D%220.10%22%20stroke-width%3D%220.54%22%2F%3E%3Cpath%20d%3D%22M15.1%20163.0q17.7%20-2.0%2039.4%200%22%20opacity%3D%220.11%22%20stroke-width%3D%220.98%22%2F%3E%3Cpath%20d%3D%22M171.4%2016.0q6.2%20-0.6%2013.8%200%22%20opacity%3D%220.24%22%20stroke-width%3D%220.47%22%2F%3E%3Cpath%20d%3D%22M237.1%2069.0q6.8%201.1%2015.1%200%22%20opacity%3D%220.26%22%20stroke-width%3D%220.65%22%2F%3E%3Cpath%20d%3D%22M1005.6%20276.3q39.1%20-1.1%2086.9%200%22%20opacity%3D%220.07%22%20stroke-width%3D%221.37%22%2F%3E%3Cpath%20d%3D%22M559.9%2088.0q28.9%20-1.0%2064.3%200%22%20opacity%3D%220.22%22%20stroke-width%3D%220.72%22%2F%3E%3Cpath%20d%3D%22M927.3%20185.6q35.5%20-2.3%2078.8%200%22%20opacity%3D%220.09%22%20stroke-width%3D%221.06%22%2F%3E%3Cpath%20d%3D%22M843.3%20111.3q34.1%201.1%2075.7%200%22%20opacity%3D%220.12%22%20stroke-width%3D%220.80%22%2F%3E%3Cpath%20d%3D%22M1103.6%2023.7q4.4%200.9%209.8%200%22%20opacity%3D%220.12%22%20stroke-width%3D%220.50%22%2F%3E%3Cpath%20d%3D%22M1213.9%20137.7q12.5%20-1.7%2027.8%200%22%20opacity%3D%220.18%22%20stroke-width%3D%220.89%22%2F%3E%3Cpath%20d%3D%22M-64.2%20181.4q29.5%201.5%2065.5%200%22%20opacity%3D%220.18%22%20stroke-width%3D%221.04%22%2F%3E%3Cpath%20d%3D%22M-67.6%2075.1q19.8%200.1%2043.9%200%22%20opacity%3D%220.17%22%20stroke-width%3D%220.67%22%2F%3E%3Cpath%20d%3D%22M813.9%20136.8q24.5%200.2%2054.4%200%22%20opacity%3D%220.17%22%20stroke-width%3D%220.89%22%2F%3E%3Cpath%20d%3D%22M1130.5%20201.6q14.0%201.5%2031.1%200%22%20opacity%3D%220.10%22%20stroke-width%3D%221.11%22%2F%3E%3Cpath%20d%3D%22M252.7%2082.9q14.0%20-0.3%2031.2%200%22%20opacity%3D%220.17%22%20stroke-width%3D%220.70%22%2F%3E%3Cpath%20d%3D%22M370.0%2018.0q9.6%20-0.2%2021.3%200%22%20opacity%3D%220.21%22%20stroke-width%3D%220.48%22%2F%3E%3Cpath%20d%3D%22M774.7%2014.0q14.3%200.5%2031.9%200%22%20opacity%3D%220.22%22%20stroke-width%3D%220.46%22%2F%3E%3Cpath%20d%3D%22M501.2%20215.2q21.3%200.6%2047.2%200%22%20opacity%3D%220.09%22%20stroke-width%3D%221.16%22%2F%3E%3Cpath%20d%3D%22M1096.3%2046.4q13.8%20-0.9%2030.8%200%22%20opacity%3D%220.14%22%20stroke-width%3D%220.58%22%2F%3E%3Cpath%20d%3D%22M914.8%20186.8q46.4%201.2%20103.2%200%22%20opacity%3D%220.11%22%20stroke-width%3D%221.06%22%2F%3E%3Cpath%20d%3D%22M1269.0%20174.8q43.6%202.0%2096.9%200%22%20opacity%3D%220.09%22%20stroke-width%3D%221.02%22%2F%3E%3Cpath%20d%3D%22M184.8%2041.5q18.1%200.5%2040.2%200%22%20opacity%3D%220.21%22%20stroke-width%3D%220.56%22%2F%3E%3Cpath%20d%3D%22M549.6%2031.4q14.5%20-1.1%2032.3%200%22%20opacity%3D%220.28%22%20stroke-width%3D%220.52%22%2F%3E%3Cpath%20d%3D%22M1288.2%20175.4q46.1%200.1%20102.5%200%22%20opacity%3D%220.11%22%20stroke-width%3D%221.02%22%2F%3E%3Cpath%20d%3D%22M666.2%2071.6q19.0%20-0.7%2042.2%200%22%20opacity%3D%220.14%22%20stroke-width%3D%220.66%22%2F%3E%3Cpath%20d%3D%22M1051.4%20109.5q8.9%201.5%2019.8%200%22%20opacity%3D%220.20%22%20stroke-width%3D%220.79%22%2F%3E%3Cpath%20d%3D%22M768.7%20106.1q29.5%20-0.3%2065.5%200%22%20opacity%3D%220.14%22%20stroke-width%3D%220.78%22%2F%3E%3Cpath%20d%3D%22M431.4%2016.2q4.6%20-0.5%2010.3%200%22%20opacity%3D%220.24%22%20stroke-width%3D%220.47%22%2F%3E%3Cpath%20d%3D%22M1313.4%2066.0q15.5%201.0%2034.6%200%22%20opacity%3D%220.13%22%20stroke-width%3D%220.64%22%2F%3E%3Cpath%20d%3D%22M1224.1%20289.8q66.0%202.1%20146.6%200%22%20opacity%3D%220.10%22%20stroke-width%3D%221.41%22%2F%3E%3Cpath%20d%3D%22M1210.3%2024.6q17.0%20-0.1%2037.8%200%22%20opacity%3D%220.26%22%20stroke-width%3D%220.50%22%2F%3E%3Cpath%20d%3D%22M1098.4%20146.8q39.3%200.7%2087.3%200%22%20opacity%3D%220.10%22%20stroke-width%3D%220.92%22%2F%3E%3Cpath%20d%3D%22M749.6%2087.5q12.6%200.7%2028.0%200%22%20opacity%3D%220.15%22%20stroke-width%3D%220.72%22%2F%3E%3Cpath%20d%3D%22M468.7%2015.9q12.7%200.3%2028.1%200%22%20opacity%3D%220.17%22%20stroke-width%3D%220.47%22%2F%3E%3Cpath%20d%3D%22M974.7%2082.2q25.9%20-1.3%2057.5%200%22%20opacity%3D%220.12%22%20stroke-width%3D%220.70%22%2F%3E%3Cpath%20d%3D%22M253.7%2080.6q11.0%20-0.6%2024.5%200%22%20opacity%3D%220.11%22%20stroke-width%3D%220.69%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
  mask-image: linear-gradient(transparent, #000 12%, transparent 85%);
}

.hero-mist {
  position: absolute; left: -15%; width: 130%; height: 150px;
  top: calc(var(--horizon) - 80px); filter: blur(20px); opacity: .5;
  background: radial-gradient(ellipse at 25% 55%, #7992a04d, transparent 48%), radial-gradient(ellipse at 78% 45%, #e7caa64a, transparent 45%);
}
.hero-mist-near { top: calc(var(--horizon) - 15px); opacity: .28; transform: scaleX(-1); }
.hero-fleet use:nth-child(2n) { opacity: .45; }
.book3d-sheen {
  position: absolute; inset: 0; pointer-events: none; transform: translateZ(2px);
  background: linear-gradient(112deg, transparent 37%, #ffe8aa55 48%, #fff7dd88 50%, transparent 62%);
  background-size: 320% 100%; background-position: 100% 0; opacity: 0; mix-blend-mode: screen;
}
.hero-title { white-space: nowrap; }
.hero-letter { display: inline-block; -webkit-text-fill-color: currentColor; color: var(--gold-bright); }
.motion-line { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.motion-line-inner { display: block; }
.motion-ready [data-reveal="title"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-mist-far { animation: mistDrift 14s ease-in-out infinite alternate; }
  .hero-mist-near { animation: mistDrift 19s ease-in-out -8s infinite alternate-reverse; }
  .hero-intro .hero-letter {
    animation: letterRise 650ms var(--ease-rise) calc(180ms + var(--letter) * 45ms) backwards,
               titleGlint 11s ease-in-out calc(1200ms + var(--letter) * 75ms) infinite;
  }
  .hero-intro .book3d-sheen { animation: coverLight 10s ease-in-out 900ms infinite; }
  .motion-ready [data-reveal="title"] .motion-line-inner {
    transform: translateY(112%);
    transition: transform 650ms var(--ease-rise);
    transition-delay: calc(var(--line-index, 0) * 85ms);
  }
  .motion-ready [data-reveal="title"].is-in .motion-line-inner { transform: none; }
}
@keyframes mistDrift { from { translate: -5% 0; opacity: .35; } to { translate: 6% -14px; opacity: .65; } }
@keyframes letterRise { from { opacity: 0; transform: translateY(.65em) rotateX(-35deg); } }
@keyframes titleGlint { 0%, 18%, 100% { color: var(--gold-bright); } 8% { color: #fff3d1; } }
@keyframes bookDrift { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-10px) rotate(.6deg); } }
@keyframes coverLight { 0% { opacity: 0; background-position: 100% 0; } 4% { opacity: .8; } 16% { opacity: .6; } 21%,100% { opacity: 0; background-position: 0 0; } }
@media (max-width: 360px) {
  .brand { font-size: 1.2rem; }
  .hero-title { font-size: 2.15rem; }
  .invite-month { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .motion-line-inner { transform: none !important; }
}