/* ============================================================
   XPLISITT — Reisen · horizontal scroll-timeline
   Brand-skinned (Plus Jakarta Black / DM Sans / lime-on-black)
   ============================================================ */

@import url('ds-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root{
  /* aliases onto XPLISITT design-system tokens (ds-tokens.css) */
  --black:var(--color-black); --night:var(--color-night-sky); --moss:var(--color-moss); --olive:var(--color-olive);
  --lime:var(--color-lime); --lime-dark:var(--color-lime-dark); --lemon:var(--color-lemon);
  --gray:var(--color-gray-dark); --cloudy:var(--color-gray-cloudy);
  --bg:var(--color-black);
  --accent:var(--color-lime);
  --font-d:var(--font-display);
  --font-b:var(--font-body);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;background:var(--bg);overflow-x:hidden}
body{font-family:var(--font-b);color:var(--cloudy);-webkit-font-smoothing:antialiased}

/* ── top chrome ── */
#bar{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:900;width:0}
#nav{position:fixed;top:0;left:0;right:0;z-index:850;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;pointer-events:none}
#nav .logo{height:32px;width:auto;display:block}
#nch{font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;transition:opacity .3s}

/* ════════════════════════════════════════════
   STAGE — pinned horizontal track
   ════════════════════════════════════════════ */
#stage{height:100vh;overflow:hidden;position:relative}
.htrack{display:flex;height:100vh;will-change:transform}
.panel{position:relative;width:100vw;height:100vh;flex:0 0 100vw;overflow:hidden;
  display:flex;align-items:center;justify-content:center}

/* technical grid + node texture (brand motif) */
.grid{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(181,228,74,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(181,228,74,.035) 1px,transparent 1px);
  background-size:64px 64px}
body[data-grid="off"] .grid{display:none}
.bgwash{position:absolute;inset:-20% -10%;z-index:0;will-change:transform}

/* ── HERO panel ── */
#hero .hx{position:absolute;width:min(70vh,640px);height:auto;z-index:1;opacity:.05;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.hero-in{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 40px;max-width:1000px}
.heyebrow{font-family:var(--font-b);font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.htitle{font-family:var(--font-d);font-weight:800;font-size:clamp(46px,8.2vw,112px);
  line-height:.92;letter-spacing:-.02em;text-transform:uppercase;color:var(--cloudy);margin-bottom:32px}
.htitle .a{color:var(--accent)}
.hsub{font-family:var(--font-b);font-size:16px;font-weight:300;color:var(--gray);
  line-height:1.7;max-width:430px;margin-bottom:38px}
.hstats{display:flex;gap:0}
.hstats > div{padding:0 36px;border-left:1px solid rgba(255,255,255,.1)}
.hstats > div:first-child{border-left:0}
.hsn{display:block;font-family:var(--font-d);font-weight:800;font-size:42px;color:var(--accent);line-height:1}
.hsl{display:block;font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray);margin-top:8px}
.hscroll{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;z-index:5}

/* hero entrance — CSS driven (robust, no rAF dependency) */
#hero .heyebrow,#hero .htitle,#hero .hsub,#hero .hstats{opacity:0;
  animation:heroUp .95s cubic-bezier(.2,.7,.2,1) forwards}
#hero .heyebrow{animation-delay:.15s}
#hero .htitle{animation-delay:.34s}
#hero .hsub{animation-delay:.6s}
#hero .hstats{animation-delay:.82s}
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  #hero .heyebrow,#hero .htitle,#hero .hsub,#hero .hstats{opacity:1;animation:none;transform:none}
}
@media (max-height:660px){.hscroll{display:none}}
.hscrl{font-family:var(--font-b);font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gray)}
.hsweep{width:46px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);position:relative;overflow:hidden}
.hsweep::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:var(--accent);animation:sweep 1.9s cubic-bezier(.6,0,.2,1) infinite}
@keyframes sweep{0%{left:-40%}60%,100%{left:120%}}

/* ── CHAPTER panel layout (flex row, robust for GSAP transforms) ── */
.panel.chapter{padding:0 7vw;gap:clamp(36px,5.5vw,96px)}
.panel.chapter[data-side="L"]{flex-direction:row-reverse}
.panel.chapter[data-side="L"] .l-txt{text-align:right;align-items:flex-end}
body[data-chapter="consistent"] .panel.chapter{flex-direction:row}
body[data-chapter="consistent"] .panel.chapter .l-txt{text-align:left;align-items:flex-start}

/* ── CHAPTER panel layers ── */
.l-bg{position:absolute;inset:0;z-index:0}
.l-veil{position:absolute;inset:0;z-index:2;pointer-events:none}
.ghost{font-family:var(--font-d);font-weight:800;font-size:clamp(120px,22vw,300px);
  line-height:.8;color:rgba(181,228,74,.04);position:absolute;pointer-events:none;
  user-select:none;will-change:transform;z-index:1;text-transform:uppercase;letter-spacing:-.04em}

/* IMAGE container — clip reveal + ken burns inner */
.l-img{position:relative;flex:0 0 clamp(320px,40vw,540px);height:min(64vh,640px);z-index:3;
  overflow:hidden;border-radius:2px;will-change:clip-path,transform;border:1px solid rgba(181,228,74,.18)}
.kb{width:100%;height:100%;position:relative;will-change:transform;transform:scale(1.1);transform-origin:center 42%}
.kb img,.kb video{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center center;display:block;max-width:none !important}
/* corner ticks on the image frame */
.l-img .ct{position:absolute;width:14px;height:14px;border:1.5px solid var(--accent);z-index:5;opacity:.85}
.l-img .ct.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.l-img .ct.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.l-img .ct.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.l-img .ct.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* PLACEHOLDER */
.placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:30px;background:
    radial-gradient(ellipse at 50% 40%,rgba(59,82,32,.28),rgba(0,0,0,.55));
  position:relative}
.placeholder .net{position:absolute;width:46%;max-width:160px;opacity:.10;top:26%}
.ph-id{font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);opacity:.65;text-align:center;text-transform:uppercase;z-index:1}
.ph-label{font-family:var(--font-b);font-size:12px;color:var(--gray);opacity:.55;text-align:center;line-height:1.5;z-index:1}
.ph-hint{font-family:var(--font-b);font-size:10px;color:var(--accent);opacity:.4;text-align:center;
  line-height:1.5;margin-top:2px;border:1px dashed rgba(181,228,74,.3);padding:5px 12px;z-index:1}

/* TEXT block */
.l-txt{position:relative;z-index:6;will-change:transform;max-width:460px;perspective:1100px;
  display:flex;flex-direction:column;align-items:flex-start}
.cidx{font-family:var(--font-d);font-weight:800;font-size:13px;letter-spacing:.04em;
  color:var(--accent);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.cidx::after{content:"";width:40px;height:1px;background:rgba(181,228,74,.4)}
.eyebrow{font-family:var(--font-b);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:block}
.gtitle{font-family:var(--font-d);font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--cloudy);margin-bottom:26px}
.gtitle em{color:var(--accent);font-style:normal}
.gbody{font-family:var(--font-b);font-size:15.5px;font-weight:300;line-height:1.85;color:var(--gray);max-width:440px}
.gquote{font-family:var(--font-d);font-weight:700;font-size:clamp(20px,2.4vw,31px);line-height:1.26;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--lemon);border-left:3px solid var(--accent);
  padding-left:20px;margin:0 0 26px}
.gtag{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--font-b);font-size:10px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);
  background:rgba(59,82,32,.32);border:1px solid rgba(181,228,74,.3);padding:7px 15px;border-radius:2px}
.gtag::before{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%}
.flip{will-change:transform,opacity;display:block}
.mobile-break{display:none}

.panel.chapter .ghost{bottom:3vh;right:5vw}
.panel.chapter[data-side="L"] .ghost{right:auto;left:5vw}
.l-fore{position:absolute;z-index:8;pointer-events:none;will-change:transform;opacity:0}
.panel.chapter .l-fore{right:6vw;bottom:9vh;left:auto}
.panel.chapter[data-side="L"] .l-fore{left:6vw;right:auto}
.badge{background:rgba(0,0,0,.7);border:1px solid rgba(181,228,74,.28);padding:9px 16px;
  backdrop-filter:blur(12px);font-family:var(--font-b);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lime);white-space:nowrap}

/* ── OUTRO panel ── */
#outro .ox{position:absolute;width:min(64vh,560px);z-index:1;opacity:.05;left:50%;top:50%;transform:translate(-50%,-50%)}
.outro-in{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 40px;max-width:760px}
.otitle{font-family:var(--font-d);font-weight:800;font-size:clamp(40px,6.2vw,92px);line-height:.92;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--cloudy)}
.otitle em{color:var(--accent);font-style:normal}
.octa{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#000;
  font-family:var(--font-d);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 36px;border-radius:2px;text-decoration:none;margin-top:36px;
  transition:background .18s,transform .15s}
.octa:hover{background:var(--lemon);transform:translateY(-2px)}
.ofoot{margin-top:28px;font-family:var(--font-b);font-size:11px;font-weight:500;letter-spacing:.06em;
  color:rgba(155,155,143,.4);text-transform:uppercase}

/* ════════════════════════════════════════════
   TIMELINE RAIL (bottom)
   ════════════════════════════════════════════ */
#rail{position:fixed;left:0;right:0;bottom:0;z-index:800;padding:0 44px 26px;pointer-events:none}
#rail .inner{position:relative;height:46px;pointer-events:auto}
#rail .line{position:absolute;left:0;right:0;top:30px;height:1px;background:rgba(255,255,255,.12)}
#rail .fill{position:absolute;left:0;top:30px;height:1px;background:var(--accent);width:0;
  box-shadow:0 0 8px rgba(181,228,74,.7)}
.tick{position:absolute;top:30px;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;cursor:pointer}
.tick .dot{width:7px;height:7px;border:1px solid rgba(255,255,255,.3);background:var(--bg);
  border-radius:50%;transition:all .35s cubic-bezier(.16,1,.3,1)}
.tick .lab{position:absolute;top:-22px;font-family:var(--font-b);font-size:9px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray);opacity:0;white-space:nowrap;transition:opacity .3s}
.tick.year .lab{opacity:.55}
.tick:hover .lab{opacity:1;color:var(--cloudy)}
.tick.on .dot{background:var(--accent);border-color:var(--accent);transform:scale(1.5);
  box-shadow:0 0 10px rgba(181,228,74,.8)}
.tick.on .lab{opacity:1;color:var(--accent)}
.tick.year .dot{width:9px;height:9px}
/* nav style variants */
body[data-nav="minimal"] .tick .dot{width:5px;height:5px}
body[data-nav="minimal"] #rail .line,body[data-nav="minimal"] .tick.year .dot{opacity:.6}
body[data-nav="ticks"] .tick .dot{width:1.5px;height:14px;border-radius:0;background:rgba(255,255,255,.22);border:0;margin-top:0}
body[data-nav="ticks"] .tick.on .dot{background:var(--accent);transform:scaleY(1.6)}
body[data-nav="ticks"] #rail .line{display:none}

/* ── SPOTLIGHT chapter layout variant ── */
body[data-chapter="spotlight"] .panel.chapter{display:block;padding:0}
body[data-chapter="spotlight"] .l-img{position:absolute;inset:8vh 8vw;width:auto;height:auto;flex:none;max-width:none}
body[data-chapter="spotlight"] .l-veil{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.55) 100%) !important;z-index:4}
body[data-chapter="spotlight"] .l-txt{position:absolute;left:8vw;bottom:14vh;max-width:540px;text-align:left;align-items:flex-start;z-index:6}
body[data-chapter="spotlight"] .ghost{z-index:5}

/* tweaks mount */
#tw-root{position:fixed;inset:0;z-index:1000;pointer-events:none}
#tw-root > *{pointer-events:auto}

/* ── HERO layout variants ── */
body[data-hero="left"] .hero-in{align-items:flex-start;text-align:left;max-width:900px;margin-left:2vw}
body[data-hero="left"] .hstats > div:first-child{padding-left:0}
body[data-hero="left"] .hsub{margin-left:0}

body[data-hero="editorial"] .hero-in{align-items:flex-start;text-align:left;max-width:none;width:86vw}
body[data-hero="editorial"] .htitle{font-size:clamp(60px,13vw,180px)}
body[data-hero="editorial"] .heyebrow{margin-bottom:18px}
body[data-hero="editorial"] .hsub{position:absolute;right:0;bottom:0;max-width:300px;margin:0}
body[data-hero="editorial"] .hstats{margin-top:18px}
body[data-hero="editorial"] .hstats > div:first-child{padding-left:0}
body[data-hero="editorial"] #hero .hx{left:auto;right:-6vw;width:min(70vh,640px)}

/* ════════════════════════════════════════════
   RESPONSIVE — tablet & mobile breakpoints
   Beholder horisontal scroll-mekanikken, men stabler
   innholdet i hvert panel og skalerer typografi/luft.
   ════════════════════════════════════════════ */

/* responsive media (alltid) */
.kb img, .kb video, .placeholder img { max-width:100%; height:auto }

/* ── TABLET (≤1023px) ── */
@media (max-width: 1023px), (hover: none), (pointer: coarse){
  #nav{ padding:18px 24px }
  #nav .logo{ height:28px }
  #nch{ font-size:9px; letter-spacing:.14em }

  .hero-in{ padding:0 28px; max-width:780px }
  .htitle{ font-size:clamp(40px,7.2vw,84px) }
  .hsub{ font-size:15px; max-width:380px }
  .hsn{ font-size:34px }
  .hstats > div{ padding:0 24px }

  .panel.chapter{ padding:0 5vw; gap:clamp(24px,4vw,56px) }
  .l-img{ flex:0 0 clamp(280px,42vw,460px); height:min(56vh,520px) }
  .l-txt{ max-width:380px }
  .gtitle{ font-size:clamp(28px,4vw,46px) }
  .gbody{ font-size:14.5px; line-height:1.75 }

  .outro-in{ padding:0 28px }
  .otitle{ font-size:clamp(36px,5.6vw,72px) }
  .octa{ padding:16px 32px; min-height:48px }

  #rail{ padding:0 24px 22px }
}

/* ── MOBIL (≤767px) — stable kapittel-paneler ── */
@media (max-width: 767px){
  #nav{ padding:14px 18px }
  #nav .logo{ height:24px }
  #nch{ display:none }

  /* Hero */
  #hero .hx{ width:min(72vw,420px) }
  .hero-in{ padding:0 22px; max-width:100% }
  .heyebrow{ font-size:10px; letter-spacing:.2em; margin-bottom:16px }
  .htitle{ font-size:clamp(34px,9.5vw,56px); margin-bottom:24px }
  .hsub{ font-size:14px; line-height:1.65; max-width:92vw; margin-bottom:28px }
  .hstats{ gap:0; flex-wrap:wrap; justify-content:center }
  .hstats > div{ padding:0 22px }
  .hsn{ font-size:30px }
  .hscroll{ bottom:32px }

  /* Kapittel — stable bilde over tekst */
  .panel.chapter{
    flex-direction:column !important;
    padding:80px 22px 96px;
    gap:24px;
    justify-content:flex-start;
    overflow-y:auto;
  }
  .panel.chapter[data-side="L"]{ flex-direction:column !important }
  .panel.chapter .l-txt,
  .panel.chapter[data-side="L"] .l-txt{
    text-align:left; align-items:flex-start;
    max-width:100%; width:100%;
  }
  .l-img{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    height:38vh; min-height:240px; max-height:320px;
  }
  .cidx{ font-size:12px; margin-bottom:14px }
  .cidx::after{ width:28px }
  .eyebrow{ font-size:10px; margin-bottom:12px }
  .gtitle{ font-size:clamp(26px,7.2vw,38px); margin-bottom:18px; line-height:1.04 }
  .mobile-break{ display:block }
  .gquote{ font-size:clamp(17px,4.6vw,22px); padding-left:14px; margin-bottom:18px }
  .gbody{ font-size:14px; line-height:1.7; max-width:100% }
  .gtag{ font-size:9px; padding:8px 12px; margin-top:18px }
  .ghost{ font-size:clamp(90px,28vw,180px); bottom:auto; top:6vh; right:4vw; opacity:.5 }
  .panel.chapter[data-side="L"] .ghost{ left:4vw; right:auto }
  .l-fore{ display:none }

  /* Outro */
  #outro .ox{ width:min(70vw,400px) }
  .outro-in{ padding:0 22px }
  .otitle{ font-size:clamp(32px,8.5vw,52px) }
  .hsub{ font-size:14px }
  .octa{
    padding:14px 28px; font-size:13px;
    min-height:48px; min-width:48px;
  }
  .ofoot{ font-size:10px; margin-top:20px }

  /* Rail — kompakt, ingen labels på mobil */
  #rail{ padding:0 14px 14px }
  #rail .inner{ height:34px }
  #rail .line, #rail .fill{ top:22px }
  .tick{ top:22px }
  .tick .dot{ width:6px; height:6px }
  .tick.year .dot{ width:8px; height:8px }
  .tick .lab{ display:none }

  /* Touch-mål: outro CTA og rail-ticks */
  .tick{ padding:14px 6px; margin:-14px -6px }
}

/* ── EKSTRA SMÅ (≤360px) ── */
@media (max-width: 360px){
  .htitle{ font-size:34px }
  .hstats > div{ padding:0 14px }
  .hsn{ font-size:26px }
  .gtitle{ font-size:26px }
}

/* ════════════════════════════════════════════
   VERTIKAL MODUS — mobil + nettbrett (<1024px)
   Stable panelene, drep horisontal scroll fullstendig.
   Unconditional (ikke avhengig av data-page) for å fungere fra første render.
   ════════════════════════════════════════════ */
@media (max-width: 1023px), (hover: none), (pointer: coarse){
  html, body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    max-width:100vw;
    height:auto !important;
    min-height:100vh;
    overscroll-behavior-x:none;
    touch-action:pan-y;
  }
  #bar, #rail{ display:none !important }

  /* Stage: ikke pinnet, vokser med innhold */
  #stage{
    height:auto !important;
    min-height:auto !important;
    width:100% !important;
    max-width:100vw !important;
    overflow:visible !important;
    position:static !important;
  }

  /* Track: vertikal stack, ikke flex/grid med fast høyde */
  #htrack,
  #htrack.htrack,
  .htrack{
    display:block !important;
    height:auto !important;
    width:100% !important;
    max-width:100vw !important;
    transform:none !important;
    will-change:auto !important;
    overflow:visible !important;
  }
  #htrack > *{ min-width:0 !important }

  /* Panel: full bredde, naturlig høyde, ikke flex 100vw */
  #htrack .panel,
  .panel{
    position:relative !important;
    width:100% !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:auto !important;
    flex:none !important;
    overflow:visible !important;
    display:block !important;
  }

  /* Drep GSAP-state slik at innhold er synlig uten animasjon */
  .flip{ opacity:1 !important; transform:none !important }
  .l-img{ clip-path:none !important; transform:none !important }
  .l-fore{ opacity:1 !important; position:static !important; transform:none !important }
  .kb{ transform:none !important }
  .bgwash{ inset:0 !important; transform:none !important }
  .ghost{ transform:none !important }
  .l-txt{ transform:none !important }

  /* Hero / outro — fullskjerm med padding */
  #hero, #outro{
    min-height:100vh;
    padding:96px 0 64px;
    display:flex !important;
    align-items:center;
    justify-content:center;
  }
  #hero .hx, #outro .ox{ width:min(70vw,420px) }

  /* Hero typografi */
  .hero-in{ padding:0 44px 0 22px; max-width:100%; width:100% }
  .heyebrow{ font-size:10px; letter-spacing:.2em; margin-bottom:16px }
  .htitle{ font-size:clamp(34px, 9vw, 56px); margin-bottom:24px; line-height:.95 }
  .hsub{ font-size:14px; line-height:1.65; max-width:92vw; margin:0 auto 28px }
  .hstats{ gap:0; flex-wrap:wrap; justify-content:center }
  .hstats > div{ padding:0 22px }
  .hsn{ font-size:30px }
  .hscroll{ display:none }

  /* Kapittel — bilde over tekst, ren vertikal stack, ingen alternering */
  #htrack .panel.chapter,
  .panel.chapter,
  .panel.chapter[data-side="L"],
  .panel.chapter[data-side="R"]{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch;
    justify-content:flex-start;
    gap:24px;
    padding:64px 44px 72px 22px;
    min-height:auto;
  }

  /* Tekst-blokk: full bredde, venstrejustert */
  .panel.chapter .l-txt,
  .panel.chapter[data-side="L"] .l-txt,
  .panel.chapter[data-side="R"] .l-txt{
    text-align:left !important;
    align-items:flex-start !important;
    max-width:100% !important;
    width:100% !important;
    margin:0 !important;
    order:2;
  }

  /* Bilde over tekst */
  .panel.chapter .l-img{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    flex:none !important;
    margin:0 !important;
    order:1;
    background:#000;
  }
  .panel.chapter .l-img img,
  .panel.chapter .l-img video{
    width:100% !important;
    height:auto !important;
    max-height:70vh !important;
    object-fit:contain !important;
    display:block;
  }

  /* Typografi — skalert ned med clamp */
  .cidx{ font-size:12px; margin-bottom:14px }
  .cidx::after{ width:28px }
  .eyebrow{ font-size:10px; margin-bottom:12px; line-height:1.4 }
  .gtitle{ font-size:clamp(28px, 8vw, 44px) !important; margin-bottom:18px; line-height:1.02; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto }
  .gquote{ font-size:clamp(17px, 4.6vw, 22px); padding-left:14px; margin-bottom:18px }
  .gbody{ font-size:14px; line-height:1.7; max-width:100% }

  /* Tag-pille: tillat wrap */
  .gtag{
    font-size:9px;
    padding:8px 12px;
    margin-top:18px;
    white-space:normal;
    line-height:1.4;
    max-width:100%;
    word-break:break-word;
  }

  /* Ghost-tall: mindre og posisjonert pent uten å lekke */
  .ghost{
    font-size:clamp(80px, 24vw, 160px) !important;
    bottom:auto !important;
    top:8px !important;
    right:8px !important;
    left:auto !important;
    opacity:.35;
    z-index:1;
  }
  .panel.chapter[data-side="L"] .ghost{ left:8px !important; right:auto !important }

  /* Skjul desktop-only forgrunns-badge */
  .l-fore{ display:none !important }

  /* Outro */
  .outro-in{ padding:0 44px 0 22px; max-width:100% }
  .otitle{ font-size:clamp(32px, 8.5vw, 52px); line-height:.95 }
  .octa{ padding:14px 28px; font-size:13px; min-height:48px }
  .ofoot{ font-size:10px; margin-top:20px }

  /* Nav */
  #nav{ padding:14px 18px }
  #nav .logo{ height:24px }
  #nch{ display:none }
}

/* ── EKSTRA SMÅ (≤360px) ── */
@media (max-width: 360px){
  .htitle{ font-size:32px !important }
  .hstats > div{ padding:0 14px }
  .hsn{ font-size:26px }
  .gtitle{ font-size:26px !important }
  .panel.chapter{ padding-left:16px !important; padding-right:38px !important }
  .hero-in, .outro-in{ padding-left:16px !important; padding-right:38px !important }
}

/* ════════════════════════════════════════════
   VERTIKAL TIMELINE RAIL (mobil/tablet, høyre kant)
   ════════════════════════════════════════════ */
#vrail{ display:none }
@media (max-width: 1023px), (hover: none), (pointer: coarse){
  #vrail{
    display:block; position:fixed; top:0; bottom:0; right:0;
    width:30px; z-index:850; pointer-events:none;
  }
  #vrail .vinner{
    position:absolute; top:14vh; bottom:14vh; right:14px; width:1px;
    pointer-events:auto;
  }
  #vrail .vline{
    position:absolute; inset:0; width:1px; background:rgba(255,255,255,.14);
  }
  #vrail .vfill{
    position:absolute; top:0; left:0; width:1px; height:0;
    background:var(--accent);
    box-shadow:0 0 8px rgba(181,228,74,.7);
    transition:height .15s linear;
  }
  .vtick{
    position:absolute; left:50%; transform:translate(-50%,-50%);
    background:transparent; border:0; padding:10px; margin:-10px;
    cursor:pointer; pointer-events:auto;
    display:flex; align-items:center; justify-content:center;
  }
  .vdot{
    display:block; width:7px; height:7px; border-radius:50%;
    border:1px solid rgba(255,255,255,.32); background:var(--bg);
    transition:all .35s cubic-bezier(.16,1,.3,1);
  }
  .vtick.year .vdot{ width:9px; height:9px }
  .vtick.on, .vtick.tap{ z-index:3 }
  .vlab{
    position:absolute; right:28px; top:50%;
    transform:translateY(-50%) rotate(-90deg);
    transform-origin:right center;
    font-family:var(--font-b); font-size:9px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
    white-space:nowrap; opacity:0; pointer-events:none;
    padding:2px 4px;
    z-index:4;
    transition:opacity .25s ease;
  }
  .vtick.on .vdot{
    background:var(--accent); border-color:var(--accent);
    transform:scale(1.55);
    box-shadow:0 0 10px rgba(181,228,74,.8);
  }
  .vtick.on .vlab, .vtick.tap .vlab{ opacity:1 }
}

@media (max-width: 767px){
  #vrail{ width:26px }
  #vrail .vinner{ right:11px }
}



#vrail.hide{ opacity:0; pointer-events:none; transition:opacity .3s ease }