/* Polaris — scroll-styrd filmhero: norrsken → Hallands kust → upplyst fönster.
   Filmen följer scrollen (se hero.js). Texten står i mitten och filmen dämpas medan den läses. */

/* sidhuvudet ligger över filmen och blir fast natt när filmen är slut */
.mast.fix { position: fixed; inset: 0 0 auto; z-index: 20; border-bottom-color: transparent;
  background: linear-gradient(rgba(7,9,12,.7), rgba(7,9,12,0)); transition: background .3s, border-color .3s; }
.mast.fix.solid { background: rgba(7,9,12,.94); border-bottom-color: var(--rule-d); }
.mast .brand { transition: opacity .35s; }
.mast.intro .brand { opacity: 0; pointer-events: none; }

/* .fh rymmer filmen (sticky), kapitlen bakom den (sticky under sidhuvudet) och en löpsträcka.
   Filmen spelas över löpsträckan; sista skärmhöjden glider filmbilden ut åt vänster som en skjutdörr
   och kapitlen står kvar bakom. Mått räknas i hero.js. */
.fh { position: relative; background: var(--night); color: var(--bone); }
.fh-run { height: 860vh; }   /* 800vh film + glidning, 60vh vila där kapitlen står still innan sidan scrollar vidare */
.fh-stage { position: sticky; top: 0; z-index: 3; height: 100vh; overflow: hidden; background: var(--night);
  will-change: transform; }
.fh-stage.glid { box-shadow: 40px 0 80px rgba(0,0,0,.55); }
.fh-stage.ute { visibility: hidden; }
.fh-stage video, .fh-stage .fh-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fh-stage video { opacity: 0; transition: opacity .4s; }
.fh-stage video.redo { opacity: 1; }
.fh-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(7,9,12,.45), rgba(7,9,12,0) 18%, rgba(7,9,12,0) 75%, rgba(7,9,12,.5)); }
.fh-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(7,9,12,.62), rgba(7,9,12,.28) 70%, rgba(7,9,12,.2)); }

.fh-st { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center;
  text-align: center; padding: 0 var(--gutter); opacity: 0; transform: translateY(16px); pointer-events: none; }
.fh-st h1, .fh-st h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.8rem, 1.6rem + 4vw, 6.2rem);
  line-height: 1.02; margin: 0 0 .4em; color: #fff; max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(7,9,12,.55); }
.fh-st p { font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem); color: var(--bone); margin: 0 auto; max-width: 34rem; text-shadow: 0 1px 16px rgba(7,9,12,.7); }
.fh-st h1.fh-slogan { font-size: clamp(1.8rem, 1.2rem + 2vw, 3.2rem); font-weight: 500; max-width: 22ch; margin-bottom: .6em; }
.fh-mark { display: grid; justify-items: center; gap: 18px; margin-bottom: 4vh; }
.fh-mark img { width: clamp(84px, 9vw, 140px); height: auto; filter: drop-shadow(0 6px 24px rgba(201,168,76,.25)); }
.fh-mark .wordmark { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5.2rem); letter-spacing: .28em; margin-right: -.28em; }
.fh-st.sist { place-content: end start; justify-items: start; text-align: left; padding: 0 0 12vh calc(var(--gutter) + 2vw); }
.fh-st.sist h2 { max-width: 12ch; }
.fh-st.sist p { margin: 0; max-width: 26rem; }
.fh-go { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 1.6rem; }
.fh-go a { text-decoration: none; font-weight: 600; }
.fh-go .main { background: var(--gold); color: var(--night); padding: 15px 24px; }
.fh-go .main:hover { background: var(--gold-2); }
.fh-go .alt { border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.fh-skip { position: absolute; right: var(--gutter); bottom: 5vh; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 2px; font-size: .95rem; letter-spacing: .06em; color: var(--bone); text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,.7); transition: opacity .3s; }
.fh-skip::after { content: "↓"; color: var(--gold); }
.fh-skip:hover { color: #fff; border-bottom-color: var(--gold); }
.fh-skip.borta { opacity: 0; pointer-events: none; }

/* Kapitlen: rummet innanför fönstret. Mörk varm grund (fönsterljusets hue ~33°), ett uppslag med kapitel 1 och 2. */
.kap { --kap-bg: #110c08; --kap-2: #c4baa8; --kap-3: #beb4a2; --kap-rule: rgba(222,153,68,.22);
  position: sticky; top: var(--mast-h, 76px); z-index: 1; min-height: calc(100vh - var(--mast-h, 76px));
  display: flex; align-items: center; overflow-x: clip; padding: clamp(36px, 6vh, 84px) 0 clamp(48px, 8vh, 104px); color: var(--bone);
  background:
    radial-gradient(ellipse 60% 55% at 50% -8%, rgba(222,153,68,.17), rgba(222,153,68,0) 70%),
    radial-gradient(ellipse 45% 40% at 92% 105%, rgba(222,153,68,.07), rgba(222,153,68,0) 70%),
    var(--kap-bg); }
.kap:focus { outline: none; }
.kap > .wrap { width: 100%; }
.kap-in { will-change: transform, opacity; }
.kap-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(20px, 3.5vh, 44px); }
.kap-head img { width: 44px; height: 44px; filter: drop-shadow(0 0 18px rgba(222,153,68,.35)); }
.kap-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; color: #fff; line-height: 1;
  font-size: clamp(2.6rem, 1.6rem + 2.6vw, 4.4rem); }

.kap-bok { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: clamp(28px, 4.5vw, 84px);
  border-top: 1px solid var(--kap-rule); border-bottom: 1px solid var(--kap-rule); padding: clamp(22px, 3.5vh, 44px) 0; }
.kap-bok::before { content: ""; grid-column: 2; grid-row: 1; background: linear-gradient(transparent, var(--kap-rule) 15%, var(--kap-rule) 85%, transparent); }
.kap-sida:first-child { grid-column: 1; grid-row: 1; } .kap-sida:last-child { grid-column: 3; grid-row: 1; }
.kap-sida { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 2vw, 32px); align-content: start; }
.kap-n { grid-row: 1 / span 4; font-family: var(--serif); font-weight: 500; color: var(--gold); line-height: .78;
  font-size: clamp(5rem, 3rem + 6vw, 9.5rem); font-variant-numeric: lining-nums; text-shadow: 0 0 40px rgba(222,153,68,.25); }
.kap-sida h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.05; font-size: clamp(2rem, 1.4rem + 1.4vw, 2.9rem); }
.kap-sida h3 a { color: #fff; text-decoration: none; }
.kap-sida h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.kap-sida > p { margin: 8px 0 0; color: var(--kap-2); min-height: 3.2em; }   /* två rader, så att delarna står i linje över uppslaget */
.kap-delar { list-style: none; margin: 18px 0 0; padding: 0; }
.kap-delar li { border-top: 1px solid rgba(232,224,208,.12); }
.kap-delar li:last-child { border-bottom: 1px solid rgba(232,224,208,.12); }
.kap-delar a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; color: var(--bone); text-decoration: none; }
.kap-delar a span { font-variant-numeric: lining-nums tabular-nums; color: var(--gold-2); font-size: .9rem; min-width: 2.2em; }
.kap-delar a:hover { color: #fff; } .kap-delar a:hover span { color: #f0dc9e; }
.kap-las { justify-self: start; margin-top: 18px; color: var(--gold-2); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,.6); padding: 8px 0 3px; }
.kap-las::after { content: " →"; }
.kap-las:hover { color: #f0dc9e; border-bottom-color: var(--gold-2); }
.kap-sida > h3, .kap-sida > p, .kap-delar, .kap-las { grid-column: 2; }

.kap-snart { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.kap-snart li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.kap-snart .n { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--kap-3); font-variant-numeric: lining-nums; }
.kap-snart h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: var(--kap-2); }
.kap-snart p { margin: 4px 0 0; font-size: .95rem; line-height: 1.45; color: var(--kap-3); }
.kap-snart .soon { display: inline-block; margin-top: 8px; font-size: .85rem; letter-spacing: .08em; color: var(--kap-3);
  border-top: 1px solid rgba(232,224,208,.2); padding-top: 4px; }

@media (max-width: 1100px) { .kap-snart { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .kap-bok { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .kap-bok::before { display: none; }
  .kap-sida:first-child, .kap-sida:last-child { grid-column: 1; grid-row: auto; }
  .kap-sida:last-child { border-top: 1px solid var(--kap-rule); padding-top: 32px; }
  .kap-sida > p { min-height: 0; }
}
@media (max-width: 520px) {
  .kap-snart { grid-template-columns: minmax(0, 1fr); }
  .kap-sida { grid-template-columns: minmax(0, 1fr); }
  .kap-n { grid-row: auto; font-size: 4.2rem; margin-bottom: 6px; }
  .kap-sida > h3, .kap-sida > p, .kap-delar, .kap-las { grid-column: 1; }
}

@media (max-width: 760px) {
  .fh-st.sist { place-content: end center; justify-items: center; text-align: center; padding: 0 var(--gutter) 8vh; }
  .fh-go { justify-content: center; }
}
/* utan rörelse: stillbild och bara sista steget med knapparna */
@media (prefers-reduced-motion: reduce) {
  .fh-run { display: none; } .kap { position: relative; top: auto; }
  .fh-stage { position: relative; height: 100svh; transform: none !important; } .fh-stage video { display: none; }
  .fh-skip { display: none; }
  .fh-st { display: none; } .fh-st.sist { display: grid; opacity: 1; transform: none; pointer-events: auto; }
}

/* bock vid lästa kapiteldelar (framsteg.js, sparat bara i webbläsaren) */
.kap-delar a.last::after { content: "✓"; margin-left: auto; padding-left: 12px; color: var(--gold-2); font-size: .95rem; }