/* Explosive — designsystem (plan §1). Mørk, kinetisk, dokumentarisk. Gull brukes kirurgisk. */
:root{
  --ink:#191919; --gold:#C4B080; --gold-l:#DDD0A8; --gold-d:#8A6F3A; --cream:#F2F0EB;
  --panel:#F2F2F2; --ink-soft:#2a2a2a; --line:rgba(196,176,128,.22); --green:#38db61;
  --goldfade:linear-gradient(130deg,var(--gold-l) 0%,var(--gold) 55%,var(--gold-d) 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  background:var(--ink);color:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(25,25,25,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
/* Merket er et BILDE, ikke satt tekst (2026-08-19). Ordmerket har en egen
   bokstavform som skriftsnittet vårt ikke gjenskaper — «ex<em>p</em>losive»
   var en tilnærming. img-en beholder .logo-klassen så eksisterende markup
   ikke må røres noe annet sted. */
.logo{display:inline-block;line-height:0}
/* logo-on-dark.png = HVIT skrift. Filnavnene i /logo beskriver BAKGRUNNEN de
   skal ligge på, ikke skriftfargen — «explosive-light» er den svarte, for lyse
   flater. Header og footer er begge mørke, så begge bruker on-dark. */
.logo img{height:26px;width:auto;display:block}
footer .logo img{height:22px}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:600}
.nav-links a{color:rgba(255,255,255,.85)}
.nav-links a:hover{color:var(--gold)}
.btn{display:inline-block;padding:12px 26px;border-radius:999px;font-weight:800;font-size:15px;
  background:var(--goldfade);color:#131310;transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 2px 14px rgba(196,176,128,.25)}
/* Hover: teksten går til SVART (Jens 2026-08-19). Gullfaden er lys, så #131310
   → #000 øker kontrasten i stedet for å senke den — knappen blir tydeligere
   trykkbar uten at fargen endrer seg. */
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 22px rgba(196,176,128,.45);color:#000}
.btn.ghost:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold-d)}
.lang{font-size:13px;font-weight:700;color:rgba(255,255,255,.6)}
@media(max-width:760px){.nav-links{display:none}}

/* Sections */
section{padding:88px 0}
section.light{background:var(--cream);color:var(--ink)}
.kicker{font-size:13px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-d)}
h1{font-size:clamp(38px,7vw,68px);font-weight:900;line-height:1.05;letter-spacing:-.5px;margin:14px 0 18px;
  background:var(--goldfade);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em}
h2{font-size:clamp(28px,4.5vw,42px);font-weight:900;line-height:1.1;margin:10px 0 14px;
  background:var(--goldfade);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em}
.light h1,.light h2{background:linear-gradient(130deg,#a8894a 0%,#8A6F3A 55%,#5f4a22 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:19px;color:rgba(255,255,255,.8);max-width:640px}
.light .sub{color:rgba(25,25,25,.75)}
.hero{min-height:78vh;display:flex;align-items:center;
  background:radial-gradient(1200px 600px at 75% 20%,rgba(196,176,128,.20),transparent 60%),var(--ink)}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* Cards */
.grid{display:grid;gap:16px}
.grid.c5{grid-template-columns:repeat(5,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid.c5{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:1fr}.grid.c2{grid-template-columns:1fr}}
.card{background:var(--ink-soft);border:1px solid var(--line);border-radius:18px;padding:22px}
.light .card{background:#fff;border-color:rgba(25,25,25,.08)}
.card h3{font-size:17px;font-weight:800;margin-bottom:6px}
.card p{font-size:14px;color:rgba(255,255,255,.7)}
.light .card p{color:rgba(25,25,25,.65)}
.card .num{font-size:13px;font-weight:800;color:var(--gold-d);letter-spacing:1px}
/* .mini = de to forklaringslinjene på testkortene (hva den måler / hvorfor).
   Egen, mindre grad så protokoll-linja fortsatt leser som kortets hovedtekst. */
.card p.mini{font-size:13px;line-height:1.5;color:rgba(255,255,255,.62);margin-top:9px}
.card p.mini b{display:block;color:var(--gold);font-size:11px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;margin-bottom:2px}
.light .card p.mini{color:rgba(25,25,25,.62)}
.light .card p.mini b{color:var(--gold-d)}
/* Kortet er nå en lenke — arv tekstfargen, og gi en tydelig hover. */
a.card{color:inherit;transition:border-color .15s ease,transform .15s ease}
a.card:hover{border-color:var(--gold);transform:translateY(-2px)}

/* Calculator */
.calc{background:var(--ink-soft);border:1px solid var(--line);border-radius:24px;padding:34px;
  display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:center}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.calc label{display:block;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold-d);margin:16px 0 6px}
.calc select,.calc input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--ink);color:#fff;font-size:16px;font-weight:600;appearance:none}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{flex:1;padding:12px;background:transparent;color:rgba(255,255,255,.7);border:0;
  font-size:15px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--goldfade);color:#131310}
.calc .go{margin-top:22px;width:100%;padding:15px;border:0;border-radius:14px;background:var(--goldfade);
  color:#131310;font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 2px 14px rgba(196,176,128,.25);
  transition:box-shadow .15s ease}
.calc .go:hover{box-shadow:0 4px 22px rgba(196,176,128,.45)}
.ring-wrap{text-align:center}
.ring-num{font-size:56px;font-weight:900;font-variant-numeric:tabular-nums;fill:#fff}
.ring-tier{font-size:20px;font-weight:900;color:var(--gold);margin-top:10px;min-height:26px}
.ring-line{font-size:14px;color:rgba(255,255,255,.7);margin-top:4px;min-height:40px}
.calc-note{font-size:12px;color:rgba(255,255,255,.45);margin-top:16px}

/* Panels / loop */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
@media(max-width:860px){.loop{grid-template-columns:1fr}}
.loop .card::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-size:34px;font-weight:900;background:var(--goldfade);-webkit-background-clip:text;
  background-clip:text;color:transparent;display:block;margin-bottom:8px}

/* Media placeholder (fase 2 bytter til ekte reels) */
.media-ph{aspect-ratio:16/9;border-radius:18px;border:1px dashed var(--gold-d);
  display:flex;align-items:center;justify-content:center;color:var(--gold-d);
  font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(135deg,rgba(196,176,128,.08),transparent)}

/* Footer */
footer{border-top:1px solid var(--line);padding:44px 0;font-size:14px;color:rgba(255,255,255,.55)}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:rgba(255,255,255,.75)}
.badge-verified{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  letter-spacing:1px;color:var(--gold);border:1px solid var(--gold-d);border-radius:999px;padding:5px 12px}

/* Hero-/seksjonsbilder (Artlist) */
.hero.has-img{position:relative;background:var(--ink)}
.hero.has-img::before{content:"";position:absolute;inset:0;background:var(--hero-img) center/cover no-repeat;
  opacity:.42}
.hero.has-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(25,25,25,.96) 30%,rgba(25,25,25,.55) 65%,rgba(25,25,25,.25)),
  linear-gradient(to top,var(--ink) 0%,transparent 30%)}
.hero.has-img .wrap{position:relative;z-index:1}
/* .art = bildet er KOMPONERT for tekst (venstre halvdel bevisst tom).
   Standardvarianten over demper til 42 % og legger en 96 % vask over venstre
   tredel — nødvendig når motivet fyller hele bredden, men her slukker den et
   bilde som allerede har plass til overskriften. Da vises motivet nesten ikke,
   og bildet kunne like gjerne vært utelatt. */
.hero.has-img.art::before{opacity:.9}
.hero.has-img.art::after{background:
  linear-gradient(100deg,rgba(25,25,25,.93) 0%,rgba(25,25,25,.78) 34%,rgba(25,25,25,.28) 62%,rgba(25,25,25,.06) 100%),
  linear-gradient(to top,var(--ink) 0%,transparent 24%)}
.media-img{aspect-ratio:16/9;border-radius:18px;border:1px solid var(--line);object-fit:cover;width:100%;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}

/* ── Split-seksjon: tekst mot ett fullblødende foto ──────────────────────────
   Erstatter mønsteret «overskrift, ingress, og så et avrundet 16:9-kort under»
   (Jens, 2026-08-19: «firkantede bokser inne i en seksjon»). Det avrundede
   kortet er det som daterer layouten — en ramme rundt et foto sier «innhold
   plassert i en spalte», ikke «se dette».

   Jeg valgte IKKE bakgrunnsbilde bak hele seksjonen, som var forslaget. Tre
   grunner: forsiden har allerede en mørk hero med bakgrunnsbilde, så et tredje
   tekst-over-foto ville gjenta den i stedet for å bygge på den; de lyse
   seksjonene bærer sidens lys/mørk-rytme og forsvinner hvis de blir mørke; og
   tekst over foto koster lesbarhet hver eneste gang man gjør det.

   Her får fotoet i stedet HELE sin halvdel, helt ut til vindusKANTEN — ingen
   ramme, ingen radius, ingenting å oppfatte som en boks. Teksten beholder full
   kontrast på egen flate. Sidene alternerer, så to slike seksjoner leses som
   rytme og ikke som samme mal to ganger. */
.split{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:520px}
/* Innsiden av tekstspalten holder seg på linje med .wrap (maks 1080 + 24 padding),
   så overskriften her står loddrett under overskriftene i seksjonene over. */
.split .copy{padding:72px 56px 72px max(24px, calc((100vw - 1080px) / 2));}
.split .shot{position:relative;align-self:stretch;min-height:460px;overflow:hidden}
.split .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;border-radius:0;box-shadow:none;
  /* Myk søm mot tekstflaten (Jens 2026-08-19: overgangen var hard).
     Maske, ikke overlegg: fotoet toner ut i INGENTING, så seksjonens egen
     cream skinner gjennom. Et gradient-overlegg i cream ville lagt en grå
     hinne over motivet i stedet — man ser forskjellen med én gang på et mørkt
     bilde. 13 % er bevisst kort: lengre fade begynner å se ut som «fjæret
     bildekant» fra 2012, som er akkurat det uttrykket vi kom oss vekk fra. */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 20%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 20%, #000 100%)}
/* Speilvendt: fotoet ligger til venstre, så sømmen er på HØYRE kant. */
.split.rev .shot img{
  -webkit-mask-image:linear-gradient(to left, transparent 0, #000 20%, #000 100%);
          mask-image:linear-gradient(to left, transparent 0, #000 20%, #000 100%)}
/* Speilvendt: foto til venstre. */
.split.rev .copy{grid-column:2;padding:72px max(24px, calc((100vw - 1080px) / 2)) 72px 56px}
.split.rev .shot{grid-column:1;grid-row:1}

@media (max-width:860px){
  /* Stables: foto FØRST. På mobil er bildet det som stopper scrollen; en
     overskrift alene gjør det ikke. */
  .split{grid-template-columns:1fr;min-height:0}
  .split .copy,.split.rev .copy{grid-column:1;padding:40px 24px 52px}
  .split .shot,.split.rev .shot{grid-column:1;grid-row:1;min-height:0;aspect-ratio:3/2}
  /* Stablet er sømmen VANNRETT, under fotoet — masken må snu med den. */
  .split .shot img,.split.rev .shot img{
    -webkit-mask-image:linear-gradient(to top, transparent 0, #000 22%, #000 100%);
            mask-image:linear-gradient(to top, transparent 0, #000 22%, #000 100%)}
}


/* Verdistigen i klubbseksjonen: tre trinn med pris, lesbare på to sekunder.
   Ikke kort — kort ville konkurrert med fotoet ved siden av. En stram liste
   med gull-hairline mellom trinnene leser som en stige, som er poenget. */
.ladder{margin-top:20px;border-top:1px solid var(--line)}
.ladder div{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.ladder b{font-size:15px;font-weight:800}
.ladder span{font-size:15px;font-weight:800;color:var(--gold);white-space:nowrap}
.ladder em{grid-column:1/-1;font-style:normal;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.62)}
.light .ladder em{color:rgba(25,25,25,.62)}

/* .calc-note er tegnet for mørk flate. På cream ble signaturen under Jens'
   historie nesten usynlig — samme klasse, feil kontrast. */
.light .calc-note{color:rgba(25,25,25,.55)}


/* ── Seksjon med bakgrunnsbilde (generisk, ikke bundet til .hero) ────────────
   Manifestet sto som ren tekst på flat flate og leste som en pause i stedet
   for et høydepunkt. Teksten er sentrert her, så overlegget må være sterkt i
   MIDTEN — ikke bare i én kant som i heroen. To lag: en flat demping av
   fotoet, og en loddrett fade til --ink i topp og bunn så seksjonen glir inn
   mellom naboene i stedet for å stå som en plakat limt oppå siden. */
section.bg-img{position:relative;overflow:hidden;background:var(--ink)}
section.bg-img::before{content:"";position:absolute;inset:0;
  background:var(--bg-img) center/cover no-repeat;opacity:.42}
section.bg-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--ink) 0%,rgba(25,25,25,.46) 24%,
             rgba(25,25,25,.46) 76%,var(--ink) 100%)}
section.bg-img > .wrap{position:relative;z-index:1}

/* ── Trosbekjennelsen som triptyk ───────────────────────────────────────────
   Sto som ett avsnitt med <br>: første setning brøt til to linjer, de to
   neste til én, og resultatet var visuelt skjevt (Jens 2026-08-19). Tre like
   kolonner gir hver påstand samme vekt uansett hvor lang begrunnelsen er —
   ubalansen forsvinner strukturelt i stedet for at vi må jukse med ordvalg. */
.creed{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;
  border-top:1px solid var(--line)}
.creed > div{padding:26px 22px;border-bottom:1px solid var(--line)}
.creed > div + div{border-left:1px solid var(--line)}
.creed b{display:block;font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1;
  background:var(--goldfade);-webkit-background-clip:text;background-clip:text;color:transparent}
.creed p{margin-top:10px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72)}
@media(max-width:820px){
  .creed{grid-template-columns:1fr}
  .creed > div + div{border-left:0}
}