/* «Forskjellen» – felles stil for sidene i ny stil (forsiden og /about).
   Referanse: design/forskjellen/forskjellen.html. Hvit grunn, Geist, aldri serif, aldri kursiv,
   liten tekst. Festede scener (.scene > .stage) skrubbes av scroll; motor i /ny/ny.js. */
@font-face{font-family:"Geist";src:url(/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#FFFFFF; --ink:#0A1119; --ink-2:#5B636D; --ink-3:#9AA0A7; --line:#E7E8EA; --wash:#F5F5F4;
  --gold:#C9A961; --gold-ink:#8A6D33;
  --bronse:#6E5230; --bronse-lys:#C9A26A; --bronse-glimt:#EBD3A0;
  --f-sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);
  --rail-space:110px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{max-width:100%;display:block}
em{font-style:normal;color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--f-sans);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.035em;line-height:1.05}
p{margin:0}
.mono{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.note{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- logo: M dreid 45°, B opp ned ---------- */
.mb{display:inline-flex;align-items:center;font-weight:600;letter-spacing:-.06em;line-height:1;text-decoration:none}
.mb .m{display:inline-block;transform:rotate(45deg)}
.mb .b{display:inline-block;transform:rotate(180deg);margin-left:.02em}

/* ---------- toppen ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut) 16px;mix-blend-mode:difference;color:#fff;pointer-events:none}
.top .mb{font-size:20px;pointer-events:auto}
.top-r{display:flex;gap:8px;pointer-events:auto}
.pill{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border:1px solid currentColor;padding:8px 13px;border-radius:999px;background:none;color:inherit;cursor:pointer;line-height:1.2}
.pill-meny{display:inline-flex;align-items:center;gap:8px}
.pill-journal{display:inline-flex;align-items:center}

.pill-meny i{display:inline-block;width:14px;height:5px;border-block:1px solid currentColor}

/* ---------- meny ---------- */
.meny{position:fixed;inset:0;z-index:80;background:var(--bg);color:var(--ink);overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut) calc(32px + env(safe-area-inset-bottom,0px))}
.meny-top{display:flex;justify-content:space-between;align-items:center}
.meny-top .mb{font-size:20px}
.meny-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6vw;margin-top:12vh;align-items:start}
.meny-nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.meny-nav a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.meny-nav a span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--ink-3)}
.meny-nav a:hover,.meny-nav a[aria-current="page"]{color:var(--gold-ink)}
.meny-side{display:flex;flex-direction:column;gap:22px;color:var(--ink-2)}
.meny-side .mono{color:var(--ink-3);display:block;margin-bottom:6px}
.meny-side a{text-decoration:none;color:var(--ink)}
.meny-side a.btn{color:var(--bg)}
.meny[hidden]{display:none!important}

/* ---------- kapittelskinne ---------- */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:50;mix-blend-mode:difference;color:#fff;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.rail ol{margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rail li{list-style:none}
.rail a{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;padding:5px 0;text-decoration:none;opacity:.42;transition:opacity .3s}
.rail a:hover,.rail a:focus-visible{opacity:1}
.rail a i{display:inline-block;width:14px;height:1px;background:currentColor;transition:width .35s}
.rail a b{font-weight:400;white-space:nowrap}
.rail a.on{opacity:1}
.rail a.on i{width:34px}
@media (max-width:1180px){.rail a b{max-width:0;overflow:hidden;transition:max-width .35s}.rail:hover a b,.rail a.on b{max-width:12em}}

/* ---------- scenemotor ---------- */
.scene{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.new .w{opacity:.14;transition:opacity .2s}
.new .w.on{opacity:1}

/* ---------- knapper og avslutning ---------- */
.btn{background:var(--ink);color:var(--bg);text-decoration:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 22px;border-radius:999px;display:inline-flex;gap:10px;align-items:center}
.btn::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.lenke{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.tel{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-decoration:none}
.end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);min-height:100vh;border-top:1px solid var(--line)}
.end .portrait{background:url(/assets/meglere/martin-brusletto.webp) center 20%/cover;min-height:60vh}
.end .copy{padding:14vh var(--gut);display:flex;flex-direction:column;justify-content:center;gap:24px}
.end .mb{font-size:44px}
.end h2{font-size:clamp(32px,4.4vw,64px);letter-spacing:-.045em}
.end p{color:var(--ink-2);max-width:44ch}
.cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.creds{display:flex;gap:24px;flex-wrap:wrap;color:var(--ink-3);border-top:1px solid var(--line);padding-top:16px}

/* ---------- kolofon ---------- */
.kolofon{border-top:1px solid var(--line);padding:40px var(--gut) calc(32px + env(safe-area-inset-bottom,0px));display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:start;color:var(--ink-3)}
.kolofon .mb{font-size:22px;color:var(--ink)}
.kolofon nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.kolofon nav a,.kolofon a{text-decoration:none;color:var(--ink-2)}
.kolofon nav a:hover{color:var(--ink)}

/* ---------- mørk bronse med skinn (logo og navn) ----------
   [data-glans] på en beholder: hvert barn-spenn får samme gradient, forskjøvet med sin posisjon,
   så skinnet glir sammenhengende over hele ordet. Motor i ny.js (glans). */
[data-glans]{color:var(--bronse)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  [data-glans] > span{color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;
    background-image:linear-gradient(100deg,var(--bronse) 0%,var(--bronse) 40%,var(--bronse-lys) 47%,var(--bronse-glimt) 50%,var(--bronse-lys) 53%,var(--bronse) 60%,var(--bronse) 100%);
    background-size:calc(var(--gw,300px) * 3) 100%;background-position:calc(var(--gx,-900px) - var(--ox,0px)) 0}
}

/* ---------- automatisk avspilling ---------- */
.autospill{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:55;
  mix-blend-mode:difference;color:#fff;display:flex;align-items:center;gap:10px}
.autospill button{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:inherit;background:none;
  border:1px solid currentColor;border-radius:999px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.autospill .fremdrift{display:block;width:44px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.autospill .fremdrift i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--f,0));background:#fff}
.autospill[hidden]{display:none}

@media (max-width:820px){
  .rail{display:none}
  .end{grid-template-columns:1fr}
  .meny-grid{grid-template-columns:1fr;margin-top:6vh;gap:40px}
  .kolofon{grid-template-columns:1fr;gap:20px}
  .pill-book{display:none}
}
@media (prefers-reduced-motion:reduce){.new .w{transition:none}}