:root {
  --bg: oklch(0.980 0.010 88);        /* papir, ikke skjerm. varm, flat, uten tekstur. */
  --ink: oklch(0.215 0.013 62);
  --ink-soft: oklch(0.385 0.014 66);
  --muted: oklch(0.525 0.013 70);
  --faint: oklch(0.520 0.008 88);
  /* feltfarge. første post i et fargekart som ennå ikke finnes.
     dempet mint: kjølig, så de varme skjermbildene løfter seg ut av den,
     og langt nok unna vermillionen (hue 27) til at aksenten beholder kraften.
     gammelrosa-alternativet: oklch(0.955 0.013 15) / oklch(0.219 0.012 15) */
  --tint: oklch(0.957 0.012 88);
  --flate: #ffffff;                    /* en flate som ligger oppå papiret: menyboksen */

  /* ── grunnpalett ──
     fem felter. ett per side eller ett per modulslide, aldri to i samme.
     flat farge, uten korn: renheten ligger i fargen, ikke i teksturen. */
  --felt-marine: #1e283c;  --blekk-marine: #f0f0e6;
  --felt-svart:  #26201a;  --blekk-svart:  #efe7da;
  --felt-petrol: #0a5048;  --blekk-petrol: #eef0e6;
  --felt-rod:    #a8422c;  --blekk-rod:    #f7ece2;
  --felt-sand:   #f0dcbe;  --blekk-sand:   #2a2118;
  --line: oklch(0.906 0.008 88);
  --line-strong: oklch(0.832 0.010 88);
  --accent: oklch(0.570 0.200 27);
  --dyp: oklch(0.372 0.062 191);
  --on-accent: oklch(0.995 0 0);
  --display: 'Satoshi', system-ui, sans-serif;
  --sign: 'Satoshi', system-ui, sans-serif;   /* signaturen: satoshi black, tett sperret, minuskler som alt annet. */
  --body: 'Satoshi', system-ui, sans-serif;
  --mono: 'Azeret Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* én grunnenhet. all luft på siden er et multiplum av denne. */
  --u: clamp(20px, 2.2vw, 28px);
  --pad: calc(var(--u) * 2);
  --rail: clamp(190px, 22vw, 268px);  /* høyre skinne: telefon, fakta og nøkkeltall deler bredde */
  --measure: 980px;   /* holder radene samlet på store skjermer */

  /* ── typeskala ──
     seks størrelser, pluss én for tall som skal bære en flate. alt som
     står på siden bruker en av disse. mellomstørrelsene (13,5, 14,5, 15,5,
     16, 19) var ikke valg, de var slitasje. */
  --t-mono: 11.5px;                       /* etiketter, kolofon, fotnoter. alltid azeret. */
  --t-small: 15px;                        /* beskrivelser, bildetekster */
  --t-body: 17px;                         /* brødtekst */
  --t-lead: clamp(18px, 2vw, 21px);       /* ingress, modulens setning */
  --t-h2: clamp(22px, 2.4vw, 27px);       /* prosjektnavn, mellomtitler */
  --t-display: clamp(30px, 4vw, 52px);    /* signaturen: påstanden, sidetitler */
  --t-tall: clamp(46px, 7vw, 82px);       /* ett tall som bærer en flate */
  /* signaturen har én sperring og én linjehøyde, uansett hvor den står. */
  --sign-track: -0.03em;
  --sign-lh: 1.02;
  /* luft mellom seksjonene. én verdi, brukt overalt. */
  --sek: calc(var(--u) * 4);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.176 0.008 70);
    --ink: oklch(0.967 0.003 260);
    --ink-soft: oklch(0.800 0.010 260);
    --muted: oklch(0.700 0.012 260);
    --faint: oklch(0.618 0.012 260);
    --tint: oklch(0.213 0.010 70);
    --flate: oklch(0.225 0.010 70);
    --line: oklch(0.298 0.010 260);
    --line-strong: oklch(0.408 0.014 260);
    --accent: oklch(0.730 0.175 36);
    --dyp: oklch(0.782 0.082 178);
    --on-accent: oklch(0.165 0.012 36);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: var(--pad);
  /* azeret har fi-ligatur som spiser prikken over i-en, og «fotografi»
     staar i menyen paa hver side. en monospace skal uansett ikke bytte
     to tegn mot ett. */
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'clig' 0, 'dlig' 0;
  font-family: var(--body); font-size: 17px; line-height: 1.62;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0; }

header, main, footer { width: 100%; max-width: var(--measure); margin-inline: auto; }

.mark { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.mark i { color: var(--accent); font-style: normal; }

main { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4) 0 calc(var(--u) * 3); }

h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.08; letter-spacing: -0.032em;
  max-width: 15ch; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--muted); }

.who {
  margin-top: calc(var(--u) * 1);
  font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-soft);
  max-width: 38ch;
}

.group-head { display: flex; align-items: baseline; gap: calc(var(--u) * 0.5); padding-bottom: calc(var(--u) * 0.65); border-bottom: 1.5px solid var(--line); }
.group-head h2 { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; color: var(--accent); }
.group-head .note { font-size: 14px; color: var(--faint); }

.row {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; column-gap: calc(var(--u) * 1); row-gap: calc(var(--u) * 0.3);
  padding: calc(var(--u) * 1) 0; border-bottom: 1.5px solid var(--line);
  transition: border-color .4s var(--ease);
}
.row::before {
  content: ""; position: absolute; left: calc(var(--u) * -0.85); top: 0; bottom: -1px;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
a.row:hover::before { transform: scaleY(1); }
a.row:hover { border-color: var(--line-strong); }
.row .name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.78rem); letter-spacing: -0.025em;
  transition: color .3s var(--ease);
}
a.row:hover .name { color: var(--accent); }
.row .meta { justify-self: end; align-self: center; font-family: var(--mono); font-size: 12px; color: var(--faint); white-space: nowrap; transition: color .3s var(--ease); }
a.row:hover .meta { color: var(--accent); }
.row.soon .name { color: var(--muted); }
.row.soon .meta { color: var(--faint); }
.row .desc { grid-column: 1 / -1; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 62ch; }

footer {
  padding-top: calc(var(--u) * 1.25);
  border-top: 1.5px solid var(--line);
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.4) calc(var(--u) * 1); align-items: baseline;
  font-size: 15px;
}
.mail {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 2px; transition: color .3s var(--ease);
}
.mail:hover { color: var(--accent); }
.later { color: var(--muted); margin-left: auto; }

@media (max-width: 560px) {
  .row { grid-template-columns: 1fr; }
  .row .meta { justify-self: start; align-self: baseline; grid-row: 2; }
  .row .desc { grid-row: 3; }
  .later { margin-left: 0; width: 100%; }
}

/* ════ prosjektsider ════ */
/* siden bygges av fullbredde-bånd. body har ingen padding; hvert
   bånd holder sin egen, og .wrap sentrerer innholdet inni. */
body.doc { padding: 0; }
/* ── kanten ──
   alt på siden henger på én container: menylinja, modulen, indeksen,
   arkivet og footeren har samme ytterkant, og teksten inni står én
   enhet innenfor. på smal skjerm er kanten en halv pad fra vinduet. */
.ramme, body.doc .wrap, body.index .wrap {
  max-width: 1120px; width: calc(100% - var(--pad)); margin-inline: auto; }
body.doc .wrap, body.index .wrap { padding-inline: calc(var(--pad) / 2); }
/* en boks er et område med egen flate. innholdet i den bruker .wrap
   uten egen kant, så teksten flukter med resten av siden. */
.boks { position: relative; }
body.index .ramme .wrap, body.doc .ramme .wrap { width: 100%; }

.band { padding-block: calc(var(--u) * 3); }
.band.tint { background: var(--tint); }

/* ── feltet ──
   parole har ingen egen farge. hver prosjektside setter --field og
   --field-ink til produktets egne, målte farger, og bruker det på
   nøyaktig ett bånd. */
.band.field { position: relative; background: var(--field); color: var(--field-ink); }
.band.field > * { position: relative; z-index: 1; }
.band.field a { color: inherit; }
/* alt inni feltet leser mot feltets blekk, ikke sidens */
.band.field .k, .band.field .note, .band.field figcaption,
.band.field .back, .band.field .sub, .band.field .facts .k { color: var(--field-dim); }
.band.field h1, .band.field h2, .band.field .facts .v, .band.field strong { color: var(--field-ink); }
.band.field .standfirst { color: var(--field-soft); }
.band.field .facts { border-color: var(--field-line); }
.band.field .facts > div { border-color: var(--field-line); }
.band.field .back:hover { color: var(--field-accent); }

/* klarning: appens eget blekk og papir, målt fra skjermbildene */
body.klarning {
  --field: var(--felt-marine); --field-ink: var(--blekk-marine); --field-soft: #d6d8d2;
  --field-dim: #9aa2ae; --field-line: #3a4456; --field-accent: #d27864;
}
/* summers: kortets varme nær-svart og gullet */
body.charter {
  --field: var(--felt-svart); --field-ink: var(--blekk-svart); --field-soft: #ddd2c1;
  --field-dim: #a99c87; --field-line: #453b31; --field-accent: #d4a24a;
}
/* tinten er mørkere enn sidebakgrunnen, så --faint stemt mot --bg
   faller under AA her. egen verdi innenfor feltet. */
.band.tint { --faint: oklch(0.500 0.008 88); }
@media (prefers-color-scheme: dark) { .band.tint { --faint: oklch(0.640 0.012 260); } }

/* ── toppen: navn og påstand til venstre, apparatet til høyre ── */
.doc-top { padding-block: calc(var(--u) * 2) calc(var(--u) * 2); }
.doc-top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: calc(var(--u) * 2); align-items: start; }
/* tekstkolonnen har egen bunnklaring, så ingressen aldri hviler på båndkanten */
.doc-top .wrap > div:first-child { padding-bottom: calc(var(--u) * 2); }
.doc-top h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.04em;
}
.doc-top .standfirst {
  margin-top: calc(var(--u) * 0.9); max-width: 34ch;
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.5; color: var(--ink-soft);
}
/* inngangen: veien til produktet står i toppen, der du bestemmer deg,
   ikke bare nederst. samme par som utgangen: adressen og én linje
   status. adressen er like stor som ingressen, så den ikke leses som
   en fotnote. */
.inngang { margin-top: calc(var(--u) * 1.1); display: flex; flex-wrap: wrap;
  gap: calc(var(--u) * 0.3) calc(var(--u) * 0.8); align-items: baseline; }
.inngang .mail { font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; }
.inngang .status { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.band.field .inngang .status { color: var(--field-dim); }
/* telefonen stikker ned under båndet. det er komposisjonen, ikke pynt. */
.hero-shot { width: 100%; margin-bottom: calc(var(--u) * -4); }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: 0 22px 50px -26px rgb(0 0 0 / .45); }

/* ── faktalinje under toppen ── */
.facts { border-top: 1.5px solid var(--line); margin-top: calc(var(--u) * 1.4); padding-top: calc(var(--u) * 1);
         display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.4) calc(var(--u) * 1.6); }
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts dt, .facts .k { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.facts dd, .facts .v { font-size: 15px; color: var(--ink-soft); }

/* ── brødtekst: smal spalte, marg til høyre for nøkkeltall ── */
.prose .wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: calc(var(--u) * 2); align-items: start; }
.prose h2, .akse h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -0.025em; line-height: 1.15;
  margin-bottom: calc(var(--u) * 0.6);
}
.prose p, .akse p { color: var(--ink-soft); margin-top: calc(var(--u) * 0.55); }
.prose p:first-of-type, .akse p:first-of-type { margin-top: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.aside { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--muted); padding-top: 6px; }
.aside b { display: block; font-family: var(--display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }

/* ── setningen som bærer hele argumentet ── */
.pull { padding-block: calc(var(--u) * 2.5); }
/* setningen er stor og lett. sikkerheten ligger i størrelsen og luften,
   ikke i vekten. frasen i petrol er markeringen. ingenting stikker ut
   forbi kanten lenger. */
.pull p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.2; letter-spacing: -0.02em;
  max-width: 24ch; text-wrap: balance;
}
.pull em { font-style: normal; color: var(--dyp); }

/* ── skjermbildene får plass, større enn tekstspalta ── */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: calc(var(--u) * 1.5); justify-content: center; }
.shots img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: 0 22px 50px -26px rgb(0 0 0 / .45); }
.band figcaption { margin-top: calc(var(--u) * 1); text-align: center; font-size: 14px; color: var(--muted); }

/* ── regnskapet som tall, ikke som setning ── */
.score { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1); }
.score div { border-top: 1.5px solid var(--line-strong); padding-top: calc(var(--u) * 0.6); }
.score b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 7vw, 78px); line-height: 1; letter-spacing: -0.04em; }
.score span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.score .miss b { color: var(--accent); }
.score b i { font-style: normal; font-size: 0.44em; letter-spacing: 0; margin-left: 2px; vertical-align: 0.42em; color: var(--muted); }
.score-live { margin-top: calc(var(--u) * 1.2); max-width: 60ch; font-size: 15px; color: var(--ink-soft); }
.score-live .k { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-bottom: 6px; }
.score-live b { font-weight: 500; color: var(--ink); }
.score-note { margin-top: calc(var(--u) * 0.9); max-width: 52ch; color: var(--muted); font-size: 15px; }

/* ── utgangen ── */
.out { margin-top: calc(var(--u) * 1.8); border-top: 1.5px solid var(--line); padding-top: calc(var(--u) * 1.1);
       display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.4) calc(var(--u) * 1); align-items: baseline; }
.out .status { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.back { display: inline-block; font-family: var(--mono); font-size: 12px; color: var(--muted); transition: color .3s var(--ease); }
.back:hover { color: var(--accent); }
body.doc footer { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad); padding-bottom: var(--pad); }

@media (max-width: 760px) {
  .doc-top .wrap { grid-template-columns: 1fr; align-items: start; }
  .hero-shot { width: clamp(170px, 46vw, 220px); margin-bottom: 0; }
  .prose .wrap { grid-template-columns: 1fr; gap: calc(var(--u) * 1.2); }
  .shots { grid-template-columns: minmax(0, 300px); justify-content: start; }
  .score { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); }
  .out .status { margin-left: 0; width: 100%; }
}



/* ── utfallsrom-demoen ── */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: calc(var(--u) * 2); align-items: start; }
.demo-figure { margin: 0; }
.demo-head { display: flex; align-items: baseline; gap: calc(var(--u) * 0.6); }
.demo-head .k { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.demo-num { font-family: var(--display); font-weight: 700; font-size: clamp(52px, 8vw, 88px); line-height: 1; letter-spacing: -0.04em; }
.demo-chart { margin-top: calc(var(--u) * 0.75); }
.demo-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.band-fill { fill: var(--accent); opacity: .14; }
.band-edge { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .34; }
.band-mid { fill: none; stroke: var(--accent); stroke-width: 2; }
.axis { font-family: var(--mono); font-size: 9px; fill: var(--faint); }

.demo-control { margin-top: calc(var(--u) * 1); }
.demo-control label { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-bottom: 10px; }
input[type=range].spread {
  -webkit-appearance: none; appearance: none; width: 100%; max-width: 340px;
  background: transparent; cursor: ew-resize;
}
input[type=range].spread::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); border-radius: 0; }
input[type=range].spread::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 0; }
input[type=range].spread::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -9px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 2px 8px -2px rgb(0 0 0 / .4);
}
input[type=range].spread::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--bg); box-shadow: 0 2px 8px -2px rgb(0 0 0 / .4);
}
input[type=range].spread:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 0; }

.readout { border-top: 1.5px solid var(--line); padding-top: calc(var(--u) * 1); }
.readout div + div { margin-top: calc(var(--u) * 0.9); }
.readout .k { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.readout .v { display: block; margin-top: 3px; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.02em; }
.readout .verdict { color: var(--accent); }
.demo-note { margin-top: calc(var(--u) * 1.1); font-size: 14px; color: var(--muted); max-width: 46ch; }

@media (max-width: 760px) { .demo { grid-template-columns: 1fr; gap: calc(var(--u) * 1.2); } }


/* ════ charter: prosjektside satt som vedtekter ════
   bevisst ulik klarning. ingen bånd, ingen høyre skinne.
   én smal spalte, nummererte klausuler med hengende tall. */
.charter-top { padding-block: calc(var(--u) * 2) calc(var(--u) * 2.5); }
.charter-top h1 { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 7vw, 76px); line-height: 1; letter-spacing: -0.04em; margin-top: calc(var(--u) * 0.8); }
.charter-top .sub { margin-top: calc(var(--u) * 0.5); font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* selve regelen, satt som en påstand og ikke som brødtekst */
.thesis { padding-block: calc(var(--u) * 1.5) calc(var(--u) * 2.5); border-top: 1.5px solid var(--line-strong); }
.thesis p { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.thesis p em { font-style: normal; color: var(--dyp); }
.thesis .after { margin-top: calc(var(--u) * 0.9); font-family: var(--body); text-transform: none; font-size: 17px; font-weight: 400; letter-spacing: 0; line-height: 1.62; color: var(--ink-soft); }

/* klausulene. tallet henger i margen, ikke som etikett men som nummer. */
.clause { display: grid; grid-template-columns: 3.5ch 1fr; gap: calc(var(--u) * 0.9); padding-block: calc(var(--u) * 1.3); border-top: 1.5px solid var(--line); }
.clause .no { font-family: var(--mono); font-size: 13px; color: var(--faint); padding-top: 5px; }
.clause h2 { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -0.02em; line-height: 1.25; }
.clause p { margin-top: calc(var(--u) * 0.45); color: var(--ink-soft); }
.clause q { color: var(--ink); font-style: italic; }

/* summers' egen flate, sitert. mørk uansett modus, som et bilde ville vært. */
.quoted { position: relative; margin-block: calc(var(--u) * 2); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.4);
          background: var(--field); color: var(--field-ink); }
.quoted > * { position: relative; z-index: 1; }
.quoted .lead { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -0.02em; line-height: 1.3; }
.dotrow { display: flex; flex-wrap: wrap; gap: 9px; margin-top: calc(var(--u) * 0.9); }
.dot { width: 13px; height: 13px; border-radius: 50%; }
.dot.lived { background: var(--field-accent); }
.dot.now { background: #e8bd6a; box-shadow: 0 0 0 3px rgb(232 189 106 / .24); }
.dot.ahead { border: 1.5px solid rgb(212 162 74 / .6); }
.dot.fading { border: 1.5px solid rgb(212 162 74 / .26); }
.legend { margin-top: calc(var(--u) * 1); display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: calc(var(--u) * 0.6) calc(var(--u) * 0.9); font-family: var(--mono); font-size: 11.5px; color: var(--field-dim); }
.legend div { display: flex; align-items: center; gap: 8px; }
.quoted .note { margin-top: calc(var(--u) * 1.2); font-size: 14.5px; line-height: 1.55; color: var(--field-soft); }

/* lenkeadressen som bevis */
.evidence { margin-block: calc(var(--u) * 1.6); }
.evidence code { display: block; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; word-break: break-all;
                 padding: calc(var(--u) * 0.8); border: 1.5px solid var(--line); border-radius: 0; color: var(--ink-soft); background: var(--tint); }
.evidence figcaption { margin-top: calc(var(--u) * 0.5); font-size: 14px; color: var(--muted); }

/* adressen er sidens eneste oppfordring. den sto i en gra ramme som
   lignet et skrivefelt, og konkurrerte med to andre lenker. na er den
   det den er: en adresse, satt stort nok til a leses hoyt. */
.adresse { margin-top: calc(var(--u) * 2.2); padding-top: calc(var(--u) * 1.2);
           border-top: 1.5px solid var(--line-strong); }
.adresse a { font-family: var(--display); font-weight: 700;
             font-size: clamp(26px, 4.4vw, 44px); letter-spacing: -0.035em;
             line-height: 1; color: var(--ink);
             border-bottom: 2px solid var(--line-strong); padding-bottom: 4px;
             transition: color .3s var(--ease), border-color .3s var(--ease); }
.adresse a:hover { color: var(--accent); border-color: var(--accent); }
.adresse p { margin-top: calc(var(--u) * 0.9); font-size: 16px; line-height: 1.55;
             color: var(--ink-soft); max-width: 42ch; }

/* hele karriererekka staar her, ikke pa forsiden. forsiden navner de
   fire han har et eierforhold til; her er den fulle rekkefolgen. */
.rekka { margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 1);
  border-top: 1.5px solid var(--line); max-width: 62ch;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85; color: var(--muted); }

.card-shot { margin-block: calc(var(--u) * 2); }
.card-shot img { display: block; width: 100%; height: auto; border-radius: 0; border: 1.5px solid var(--line); }
.card-shot figcaption { margin-top: calc(var(--u) * 0.5); font-size: 14px; color: var(--muted); }

@media (max-width: 560px) {
  .clause { grid-template-columns: 1fr; gap: calc(var(--u) * 0.3); }
  .clause .no { padding-top: 0; }
}


/* ════ forsiden: indeks satt tett, på et ekte rutenett ════
   tolv spalter. elementer spenner ulikt og flukter over hele
   sidebredden. all fin detalj bærer informasjon, ingen tekstur. */
body.index { padding: 0; }
/* main hadde flex-gap 3u fra den forrige forsiden. den la 84px mellom
   hver rad i indeksen. her styrer radene sin egen avstand. */
body.index main { display: block; gap: 0; padding: 0; }
body.index header, body.index main { max-width: none; }
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(var(--u) * 0.9); }

/* masthead.
   påstanden til venstre, tingene til høyre. ingenting annet.
   luft over og under, så masten står alene før modulen tar over. */
.mast { padding-block: var(--sek) var(--sek); }
/* påstanden er en redigering. det som strykes står lite og dempet, med
   rød penn over: en flate, litt skrå, som kommer et øyeblikk etter siden.
   det som står igjen er de to største ordene på siden. */
.mast .claim { grid-column: 1 / 8; align-self: center; }
.mast h1 { font-family: var(--sign); max-width: none; line-height: 1; letter-spacing: var(--sign-track); }
.mast h1 s, .mast h1 .linje { display: block; text-decoration: none; position: relative; width: max-content; max-width: 100%;
  font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.9vw, 23px); letter-spacing: -0.015em;
  line-height: 1.2; color: var(--muted); margin-bottom: 0.05em; }
.mast h1 .linje s { display: inline-block; margin-bottom: 0; }
/* «og» slipper unna streken, og står derfor i blekk som de store ordene.
   det som overlever, leser «enkelt og tilgjengelig.» */
.mast h1 .og { color: var(--ink); }
.mast h1 b { display: block; font-weight: 900; font-size: clamp(46px, 7vw, 92px); line-height: 0.95;
  letter-spacing: -0.035em; color: var(--ink); }
.mast h1 b + s, .mast h1 b + .linje { margin-top: calc(var(--u) * 0.35); }
/* streken er skriblet: én sammenhengende blyantstrek som går opp og ned
   over ordene, med ustø hånd og runde vendinger. tett nok til å ta ordene
   bort, glissen nok til at de kan leses. de to er ulike. viewboxen er
   målt i hundredels em, så streken har samme form i alle størrelser.
   den tegnes langs sin egen vei, fort på strekene og sakte i vendingene,
   som hånda gjorde det. formen og farten ligger ved siden av hver sti
   i index.html, fordi de er laget sammen. */
.mast h1 .strek { position: absolute; left: -0.12em; top: 0.3em; width: calc(100% + 0.24em); height: 0.84em;
  overflow: visible; fill: none; stroke: var(--accent); stroke-width: 6.5;
  stroke-linecap: round; stroke-linejoin: round; }
.mast h1 .strek path { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.mast .who { margin-top: calc(var(--u) * 1.2); max-width: 50ch; color: var(--ink-soft);
             font-size: var(--t-body); line-height: 1.55; }
/* stjerna er en typografisk merkelapp, ikke en lenke. merkevarene
   staar rett under, alltid synlige. de er det sterkeste vi har, og
   skal ikke gjemmes bak en interaksjon. */
.stjerne { color: var(--accent); font-family: var(--mono); font-size: 0.78em;
           vertical-align: 0.32em; padding-left: 1px; }
.mast .fotnote { margin-top: calc(var(--u) * 1); max-width: 58ch;
  font-family: var(--mono); font-size: var(--t-mono); line-height: 1.8; color: var(--muted); }
.mast .fotnote .stjerne { vertical-align: 0.16em; margin-right: 3px; }
/* én handling, som ett fast objekt. rette hjørner, som alt annet. */
.mast .handling { margin-top: calc(var(--u) * 1.6); }
.knapp { display: inline-block; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em; line-height: 1;
  padding: 13px 18px 12px; transition: background-color .25s var(--ease), color .25s var(--ease); }
.knapp:hover { background: var(--accent); color: var(--on-accent); }

/* bildet erstatter de fire boksene. de sa det samme som /contact,
   og fire tynne rammer var det svakeste elementet på nettstedet. */
/* to bilder lagt oppå hverandre, som på et bord. den hvite rammen
   er bakt inn i filene, så de leser som papir. skyggen er svak og
   varm, ikke ren svart mot papiret. */
.mast-foto { grid-column: 8 / -1; align-self: center; margin: 0; position: relative;
             padding-block: calc(var(--u) * 1.2); }
.mast-foto img { display: block; width: 72%; height: auto;
                 box-shadow: 0 10px 26px -12px rgb(60 44 24 / .38), 0 2px 6px -3px rgb(60 44 24 / .22); }
.mast-foto .bak { transform: rotate(-4.5deg); }
.mast-foto .foran { position: absolute; right: 0; bottom: calc(var(--u) * 1.2);
                    transform: rotate(2.5deg); }

/* definisjonsblokk: etikett over verdi, tabellsatt */
.defs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.defs > div { border: 1.5px solid var(--line); border-radius: 0; padding: 11px 13px 13px; }
.defs .k { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .04em; }
.defs .v { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.defs .v a { border-bottom: 1.5px solid var(--line-strong); }
.defs .v a:hover { color: var(--accent); border-color: var(--accent); }

/* det levende innslaget. ekte tall fra klarning, ikke pynt.
   satt som et innfelt objekt, ikke som en seksjon, så siden
   beholder én modus hele veien. */
.live-panel { position: relative; overflow: hidden; grid-column: 1 / -1; margin-block: 0;
  background: var(--field, #1e283c); color: var(--field-ink, #f0f0e6);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4);
  display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 1.4); align-items: center;
  transition: background-color .55s var(--ease), color .55s var(--ease); }
.live-panel > * { position: relative; z-index: 1; }

/* ett felt, uansett hvem som har ordet. fargen per prosjekt er tatt bort:
   den skalerer ikke til ti prosjekter, og den så datert ut. */
.live-panel[data-felt] { --field: var(--felt-marine); --field-ink: var(--blekk-marine);
  --field-dim: #97a0ad; --field-line: #3a4456; }
.live-panel .lk { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--field-dim); }
.live-panel .ls { margin-top: 7px; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.45; max-width: 52ch; }
.live-panel .ls b { font-weight: 500; color: #fff; }
.live-panel .fig { text-align: right; }
.live-panel { text-decoration: none; }
.live-nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: calc(var(--u) * 0.9);
            padding-top: calc(var(--u) * 0.8); border-top: 1.5px solid var(--field-line);
            position: relative; }
/* streken over pilene er også måleren: den viser hvor lenge det er
   til modulen bytter. ligger oppe i selve borderen, ikke under den. */
.live-nav .bar { position: absolute; left: 0; top: -1.5px; height: 1.5px; width: 0;
                 background: var(--field-ink); opacity: .5; }
.live-nav button { font-family: var(--mono); font-size: 15px; line-height: 1; color: var(--field-ink);
  background: transparent; border: 1.5px solid var(--field-line); border-radius: 0;
  width: 30px; height: 30px; cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease); }
.live-nav button:hover { color: var(--field-ink); border-color: var(--field-ink); }
#live-pause { font-size: 9px; letter-spacing: 1px; }
#live-pause[aria-pressed="true"] { border-color: var(--field-ink); }
.live-nav button:focus-visible { outline: 2px solid var(--field-ink); outline-offset: 3px; }
.live-nav .of { font-family: var(--mono); font-size: 11.5px; color: var(--field-dim); margin-left: 4px; }
.live-body { display: contents; }

/* ── klarning-skiva: de fem modellene, per sted ──
   en rad per modell pa en felles gradskala. spennet ligger som en
   flate bak radene, for det er selve uenigheten som er poenget. */
.graf-hode { display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * 0.9); }
.graf-hode label { font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--field-dim); }
.live-graf select {
  font-family: var(--mono); font-size: 14px; color: var(--field-ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--field-line);
  border-radius: 0; padding: 9px 22px 9px 4px; min-height: 44px; cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color .25s var(--ease); }
.live-graf select:hover { border-color: var(--field-ink); }
.live-graf select:focus-visible { outline: 2px solid var(--field-ink); outline-offset: 3px; }
.live-graf select option { color: #1a1a1a; background: #fff; }
.graf-naar { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--field-dim); }
.graf-plate { margin-top: calc(var(--u) * 0.9); }
.graf-plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-spenn { fill: var(--field-ink); opacity: .085; }
.g-spor  { stroke: var(--field-line); stroke-width: 1.5; }
.g-punkt { fill: var(--field-ink); }
.g-navn  { font-family: var(--mono); font-size: 15px; fill: var(--field-dim); }
.g-verdi { font-family: var(--mono); font-size: 16px; fill: var(--field-ink); }
@media (max-width: 700px) {
  .g-navn { font-size: 26px; } .g-verdi { font-size: 27px; }
  .graf-naar { margin-left: 0; width: 100%; }
}

/* ── summers-skiva: ett felt inn, to tall ut ──
   summers har ingen server, sa den bidrar med et regnestykke i stedet
   for en paastand. datoen forlater aldri nettleseren. */
.live-skjema .felt, .live-kommune .felt { display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * 0.9); }
.live-skjema label, .live-kommune label { font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--field-dim); }
.live-skjema input[type="date"] {
  font-family: var(--mono); font-size: 15px; color: var(--field-ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--field-line);
  border-radius: 0; padding: 9px 4px; min-height: 44px; min-width: 15ch;
  transition: border-color .25s var(--ease); }
.live-skjema input[type="date"]:hover { border-color: var(--field-ink); }
.live-skjema input[type="date"]:focus-visible {
  outline: 2px solid var(--field-ink); outline-offset: 3px; border-color: transparent; }
.live-skjema input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .55; cursor: pointer; }
.live-skjema .vern, .live-kommune .vern { margin-top: calc(var(--u) * 0.6);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--field-dim);
  max-width: 64ch; }
@media (prefers-color-scheme: light) {
  .live-skjema input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
}
/* norge i tall-skiva: ett navn inn, én setning ut. samme felt som
   summers' dato, men fri tekst med lista som forslag. */
.live-kommune input[type="text"] {
  font-family: var(--mono); font-size: 15px; color: var(--field-ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--field-line);
  border-radius: 0; padding: 9px 4px; min-height: 44px; min-width: 18ch;
  transition: border-color .25s var(--ease); }
.live-kommune input[type="text"]::placeholder { color: var(--field-dim); opacity: 1; }
.live-kommune input[type="text"]::-webkit-calendar-picker-indicator { display: none !important; }
.live-kommune input[type="text"]:hover { border-color: var(--field-ink); }
.live-kommune input[type="text"]:focus-visible {
  outline: 2px solid var(--field-ink); outline-offset: 3px; border-color: transparent; }
.live-kommune .ls b { text-transform: none; }
.live-panel .fig > b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.4vw, 60px); line-height: 1; letter-spacing: -0.04em; }
.live-panel .fig > b i { font-style: normal; font-size: 0.42em; vertical-align: 0.44em; margin-left: 2px; color: var(--field-dim); }
.live-panel .fig > b i:not(:empty):not([data-kort]) { margin-left: 0.14em; letter-spacing: 0; }
.live-panel .fig em { font-style: normal; color: var(--field-ink); }
.live-panel .fig span { display: block; margin-top: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--field-dim); }
.live-panel a { color: inherit; border-bottom: 1.5px solid var(--field-line); }
.live-panel a:hover { border-color: var(--field-ink); color: var(--field-ink); }

/* modulen slipper spalten og gar fra kant til kant, slik bandene gjor
   pa klarning, aneo og contact. forsiden var den stilleste siden pa
   nettstedet og den som skal selge; dette er dens ene store oyeblikk. */
.live-full { margin-top: 0; }
.live-full .live-panel {
  padding: calc(var(--u) * 1.6) calc(var(--pad) / 2);
  grid-template-columns: minmax(0, 1fr) auto;
}
.live-full .live-panel .ls { font-size: clamp(18px, 2.3vw, 24px); max-width: 46ch; }
.live-full .live-panel .fig > b { font-size: clamp(46px, 7vw, 82px); }
@media (max-width: 860px) {
  .live-full .live-panel { grid-template-columns: 1fr; padding-block: calc(var(--u) * 1.3); }
}

/* ── dagens utgave ──
   prøves bak ?utgave. forsiden åpner med ett avsnitt om norge i dag,
   regnet av prosjektene: i går, akkurat nå, i morgen, og én ting som står
   fast. teksten tar to tredeler av bredden, kartet resten. hver setning
   har sitt lag på kartet; pek på setningen, så står den fram, fotnoten
   lyser og kartet bytter. tallene står i 900, som de store ordene i
   påstanden. påstanden flytter ned og er uendret. */
.utgave-hode { display: none; }
.utgave .utgave-hode { display: block; }
/* vitrinen: filmen med prosjektene øverst, i en ramme. 16:9, men aldri
   høyere enn skjermen under toppbaren. ?utgave har sin egen topp. */
.topp-film { background: #10151f; }
.topp-film-i { aspect-ratio: 16 / 9; width: min(100%, calc((100svh - 64px) * 16 / 9)); margin: 0 auto; }
.topp-film iframe { display: block; width: 100%; height: 100%; border: 0; }
html.utgave .topp-film { display: none; }
/* på smale skjermer står filmen på høykant (4:5), og bygger seg i mobilformatet */
@media (max-width: 700px) {
  .topp-film-i { aspect-ratio: 4 / 5; width: min(100%, calc((100svh - 64px) * 4 / 5)); }
}
.utgave .live-full { display: none; }
/* strekene i påstanden venter til den er i bildet. animasjonen står i
   style-attributtet på hver sti, så pausen må ha !important for å vinne. */
.utgave .mast:not(.syn) .strek path { animation-play-state: paused !important; }

.utgave-hode { padding-block: calc(var(--u) * 2.2) calc(var(--u) * 1.2); }
/* plassen holdes mens tallene hentes, så påstanden ikke hopper opp og ned */
.utgave-hode .wrap { min-height: min(calc(100svh - var(--u) * 5.5), 860px); }
.utgave-hode .sek .u-regnet { margin-left: auto; font-family: var(--mono); font-size: var(--t-mono); color: var(--faint); }

.u-flate { display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); column-gap: calc(var(--u) * 2.2);
  align-items: start; padding-top: calc(var(--u) * 2); }
.u-tekst, .u-kart { opacity: 0; transition: opacity .6s var(--ease); }
.utgave-hode.klar .u-tekst, .utgave-hode.klar .u-kart { opacity: 1; }
.utgave-hode.klar .u-kart { transition-delay: .2s; }

.u-avsnitt { font-family: var(--display); font-weight: 500; font-size: clamp(21px, 2.15vw, 31px);
  line-height: 1.32; letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty; }
.u-avsnitt b { font-weight: 900; letter-spacing: -0.025em; }
.fakta { transition: color .3s var(--ease); cursor: default; }
.fakta:focus-visible { outline: none; text-decoration: underline 1.5px var(--accent); text-underline-offset: 0.18em; }
/* mens du peker, står den ene setningen i blekk og resten trer tilbake */
.u-avsnitt.peker .fakta:not(.på) { color: color-mix(in oklch, var(--ink) 30%, var(--bg)); }
.fn { font-family: var(--mono); font-weight: 400; font-size: 0.36em; letter-spacing: 0;
  vertical-align: 1.35em; line-height: 0; margin-left: 0.2em; color: var(--faint); transition: color .3s var(--ease); }
.fakta.på .fn { color: var(--accent); }

.u-noter { list-style: none; display: flex; flex-wrap: wrap; gap: 6px calc(var(--u) * 0.9);
  margin-top: calc(var(--u) * 1.4); padding-top: calc(var(--u) * 0.7); border-top: 1.5px solid var(--line);
  font-family: var(--mono); font-size: var(--t-mono); line-height: 1.5; }
.u-noter a { color: var(--faint); transition: color .25s var(--ease); }
.u-noter .nr { margin-right: 6px; }
.u-noter li.på a { color: var(--ink); }
.u-noter li.på .nr { color: var(--accent); }
.u-noter a:hover { color: var(--accent); }

/* kartet: fastlandet som en flate, ett lag per setning oppå. det setningen
   handler om står i aksentfargen, alt rundt i blekk eller hårstrek. */
.u-kart { margin: 0; }
.u-kart svg { display: block; width: 100%; height: auto; max-height: 72svh; overflow: visible; }
.u-land { fill: var(--tint); stroke: var(--line-strong); stroke-width: 0.6; stroke-linejoin: round; }
.lag { opacity: 0; transition: opacity .35s var(--ease); }
.lag.på { opacity: 1; }
.u-fyll.u-sak { fill: var(--accent); fill-opacity: .72; }
.u-fyll.u-sammen { fill: var(--ink-soft); fill-opacity: .35; }
.u-strek { fill: none; stroke-linecap: round; }
.u-strek.u-sak { stroke: var(--accent); stroke-width: 1.3; }
.u-strek.u-sammen { stroke: var(--ink-soft); stroke-opacity: .6; stroke-width: 0.9; }
.u-pilhode { fill: var(--accent); }
.u-ring { fill: none; stroke-width: 0.9; }
.u-ring.u-sak { stroke: var(--accent); fill: var(--accent); fill-opacity: .1; stroke-width: 1.3; }
.u-ring.u-sammen { stroke: var(--ink-soft); stroke-opacity: .45; }
.u-merke { font-family: var(--mono); font-size: 8.5px; fill: var(--ink); }
.u-kart figcaption { margin-top: calc(var(--u) * 0.5); min-height: 3.2em; font-family: var(--mono); font-size: var(--t-mono);
  line-height: 1.6; color: var(--muted); text-align: left; }

@media (max-width: 900px) {
  .u-flate { grid-template-columns: 1fr; row-gap: calc(var(--u) * 1.6); }
  .u-kart { max-width: 380px; }
  .utgave-hode .wrap { min-height: 0; }
  .utgave-hode .sek .u-regnet { margin-left: 0; width: 100%; }
}

/* ── seksjonshode ──
   samme hode på hver seksjon: hva den er, én setning, og veien videre.
   det er progresjonen nedover siden: modulen, prosjektene, arkivet. */
.sek { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(var(--u) * 0.4) calc(var(--u) * 1);
       padding-bottom: calc(var(--u) * 0.8); border-bottom: 1.5px solid var(--line-strong); }
.sek .k { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em; color: var(--ink); }
/* prikken fra ordmerket. sidens ene aksent, foran hver etikett. */
.sek .k::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
                  background: var(--accent); margin-right: 9px; vertical-align: 1px; }
.sek .s { font-size: var(--t-small); color: var(--muted); }
.sek .alle { margin-left: auto; font-family: var(--mono); font-size: var(--t-mono); color: var(--muted);
             border-bottom: 1.5px solid var(--line-strong); padding-bottom: 2px;
             transition: color .25s var(--ease), border-color .25s var(--ease); }
.sek .alle:hover { color: var(--accent); border-color: var(--accent); }

/* ── flisene ──
   prosjektene er det viktigste på siden. hvert får en flis: fotografiet
   som det er, navnet og status på én linje, én setning under. like
   fliser, tre i bredden, så det tåler ti prosjekter like godt som fem.
   ingen boks og ingen farge per prosjekt: fargen kommer fra bildet. */
.indeks { margin-top: var(--sek); }
.fliser { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4) calc(var(--u) * 0.9);
          margin-top: calc(var(--u) * 1.2); padding-inline: calc(var(--pad) / 2); }
.flis { display: block; }
.flis .foto { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); }
.flis .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.flis .linje { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 0.6);
               margin-top: calc(var(--u) * 0.6); }
.flis .linje b { font-family: var(--display); font-weight: 700; font-size: var(--t-h2); letter-spacing: -0.025em;
                 line-height: 1.1; transition: color .3s var(--ease); }
a.flis:hover .linje b { color: var(--accent); }
/* den niende flisa er veien til alle prosjektene: en tom flate med hårstrek, ikke et bilde */
.flis.alle .foto { background: none; border: 1.5px solid var(--line-strong); }
a.flis.alle:hover .foto { border-color: var(--accent); }
.flis .linje i { font-style: normal; font-family: var(--mono); font-size: var(--t-mono); color: var(--faint);
                 white-space: nowrap; }
.flis p { margin-top: 5px; font-size: var(--t-small); line-height: 1.5; color: var(--muted); max-width: 34ch; }
/* den sjette flisen er veien videre: tom flate med hårstrek, ikke et bilde */
.alle-flis .foto { background: none; border: 1.5px solid var(--line-strong); transition: border-color .3s var(--ease); }
.alle-flis:hover .foto { border-color: var(--ink); }
.alle-flis .tom { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
                  padding: calc(var(--u) * 0.9); }
.alle-flis .tom b { font-family: var(--display); font-weight: 700; font-size: var(--t-h2); letter-spacing: -0.025em; line-height: 1.1; }
.alle-flis .tom span { margin-top: 5px; font-family: var(--mono); font-size: var(--t-mono); color: var(--muted); }
@media (max-width: 860px) { .fliser { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .fliser { grid-template-columns: 1fr; gap: calc(var(--u) * 1.4); }
  /* på telefon er den sjette flisen en lenke, ikke en tom flate */
  .alle-flis .foto { aspect-ratio: auto; }
  .alle-flis .tom { position: static; padding: calc(var(--u) * 0.8) calc(var(--u) * 0.9); }
}

/* arkivet: én linje med navn. fotografiene er omslag nå, ikke plater. */
.arkiv-linje { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.5) calc(var(--u) * 1.3); margin-top: calc(var(--u) * 1); }
.arkiv-linje a { font-size: var(--t-body); font-weight: 500; color: var(--ink); transition: color .25s var(--ease); }
.arkiv-linje a:hover { color: var(--accent); }
.arkiv-linje a i { font-style: normal; font-family: var(--mono); font-size: var(--t-mono); color: var(--faint); margin-left: 6px; }
/* hodet ligger på seksjonens kant, teksten én enhet innenfor, som radene */
.indeks .sek { padding-inline: calc(var(--pad) / 2); }
.index-head .wrap { padding-top: calc(var(--u) * 0.7); padding-bottom: 8px; }
.index-head span { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .04em; }
.index-head .c1 { grid-column: 1 / 4; }
.index-head .c2 { grid-column: 4 / 9; }
.index-head .c3 { grid-column: 9 / 11; }
.index-head .c4 { grid-column: 11 / -1; text-align: right; }

.prow { display: block; border-bottom: 1.5px solid var(--line); transition: border-color .35s var(--ease); }
.prow-in { position: relative; padding-block: calc(var(--u) * 0.75); align-items: baseline; }
.prow::before { content: ""; position: absolute; left: calc(var(--u) * -0.7); top: 0; bottom: -1px; width: 2px;
                background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
a.prow:hover .prow-in::before { transform: scaleY(1); }
a.prow:hover { border-color: var(--line-strong); }
.prow .nm { grid-column: 1 / 4; font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -0.025em; transition: color .3s var(--ease); }
a.prow:hover .nm { color: var(--accent); }
.prow .ds { grid-column: 4 / 9; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
.prow .md { grid-column: 9 / 11; font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.prow .st { grid-column: 11 / -1; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--faint); line-height: 1.45; }
.prow .st b { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.prow.soon .nm { color: var(--muted); }

/* kolofon: ekte opplysninger, ikke tekstur */
.colophon { padding-block: calc(var(--u) * 1.3) calc(var(--u) * 0.9); }
.colophon .cell { grid-column: span 4; padding-top: 0; }
.colophon .k { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.colophon .v { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.colophon .v a:hover { color: var(--accent); }

/* ── footeren ──
   siden slutter, den fader ikke ut. et mørkt felt på kanten, ordmerket
   stort, spaltene under, kolofonen nederst. boksen slipper bunnen med
   samme luft som menyboksen slipper toppen. */
footer.bunn { display: block; margin-top: var(--sek); margin-bottom: calc(var(--u) * 0.6);
              padding: calc(var(--u) * 2) calc(var(--pad) / 2) calc(var(--u) * 1.3);
              background: var(--felt-svart); color: var(--blekk-svart); border: 0; }
.bunn > .mark { display: inline-block; font-size: var(--t-display); line-height: 1;
                color: var(--blekk-svart); margin-bottom: calc(var(--u) * 1.8); }
.bunn > .mark:hover i { color: var(--blekk-svart); }
/* to spalter: hvem det er til venstre, veien videre til hoyre. seksjonene
   over baerer allerede prosjektene og arkivet, og menyboksen foelger med
   nedover, saa en gjentakelse her ble bare stoy. */
.bunn-rad { display: grid; grid-template-columns: 1.5fr auto; gap: calc(var(--u) * 1.2); align-items: start; }
.bunn-kol .k { display: block; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em;
               color: #a99c87; margin-bottom: calc(var(--u) * 0.55); }
.bunn-kol a { display: block; font-size: var(--t-small); line-height: 1.4; color: var(--blekk-svart);
              padding-block: 4px; transition: color .25s var(--ease); }
.bunn-kol a:hover { color: var(--accent); }
.bunn-kol.merke p { font-size: var(--t-small); line-height: 1.5; color: #ddd2c1; max-width: 24ch; }
.bunn-linje { margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 0.8); border-top: 1.5px solid #453b31;
              display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--u) * 0.4) calc(var(--u) * 1);
              font-family: var(--mono); font-size: var(--t-mono); line-height: 1.7; color: #a99c87; }
@media (max-width: 760px) {
  .bunn-rad { grid-template-columns: 1fr; gap: calc(var(--u) * 1.4); }
}

@media (max-width: 860px) {
  .mast .claim, .mast-foto { grid-column: 1 / -1; }
  .mast-foto { margin-top: calc(var(--u) * 1.6); max-width: 400px; }
  .live-panel { grid-template-columns: 1fr; gap: calc(var(--u) * 1); }
  .live-panel .fig { text-align: left; }
  .index-head { display: none; }
  .prow .nm, .prow .ds, .prow .md, .prow .st { grid-column: 1 / -1; text-align: left; }
  .prow .ds { margin-top: 5px; }
  .prow .md, .prow .st { margin-top: 7px; }
  .prow .st b { display: inline; font-size: 15px; margin-right: 6px; }
  .colophon .cell { grid-column: span 6; }
}


/* ════ signaturen ════
   satoshi black. brukes på påstanden, sidetitler, store tall og store
   sitater. aldri på brødtekst. ett skriftsystem: 900 for det som skal
   bære en flate, 700 for navn og mellomtitler, 400 og 500 for resten. */
.mark,
.doc-top h1,
.topp h1,
.charter-top h1,
.live-panel .fig > b,
.score b,
.aside b,
.demo-num,
.mast h1,
.prosjekt-topp h1,
.serie-topp h1,
.tekst-topp h1,
.oppslag .info h2,
.plate-kort.ord > span {
  font-family: var(--sign);
  font-weight: 900;
  letter-spacing: var(--sign-track);
  line-height: var(--sign-lh);
}
/* et prosjekts navn er satt som prosjektet selv skriver det. samme vekt
   som sidens egne titler, så navnet ikke leser som en annen stemme. */
h1.navn { letter-spacing: -0.04em; line-height: 0.98; }
.live-panel .fig > b, .score b, .aside b, .demo-num { letter-spacing: -0.02em; line-height: 1; }
.mark { font-weight: 700; letter-spacing: -0.02em; line-height: inherit; }


/* ════ topplinja ════
   samme på hver side. ordmerket er hjem, lenkene er der prosjektene bor. */
/* body.index og body.doc har padding: 0, sa baren er allerede full bredde.
   Ingen negative marger: de overlappet headeren og ga siden sidescroll. */
/* linja er en boks som henger litt under toppen, ikke en stripe presset
   opp i kanten. den følger med, og siden glir bak den og rundt den:
   ingenting bak boksen, så luften rundt er ekte. luften tar heller ikke
   klikk, bare boksen gjør det. */
.topbar { position: sticky; top: 0; z-index: 60; padding-block: calc(var(--u) * 0.6);
          background: transparent; pointer-events: none; }
.topbar .wrap { pointer-events: auto; }
.topbar .wrap { padding-block: calc(var(--u) * 0.55);
                background: var(--flate);
                box-shadow: 0 1px 2px rgb(42 33 24 / .06), 0 4px 14px -8px rgb(42 33 24 / .12);
                display: flex; align-items: baseline; gap: calc(var(--u) * 1); }
.topbar .mark { font-size: 19px; }
.topbar .mark:hover i { color: var(--ink); }
.topbar .links { margin-left: auto; display: flex; gap: calc(var(--u) * 0.85); align-items: baseline;
                 font-family: var(--mono); font-size: 12px; }
.topbar .links a { color: var(--ink-soft); transition: color .25s var(--ease); }
.topbar .links a:hover { color: var(--accent); }
.topbar .links .mail { background: none; padding: 0; }

/* menyteksten flukter med resten av siden: boksens kant trekkes fra innrykket */
body.index .topbar .wrap, body.doc .topbar .wrap { padding-inline: calc(var(--pad) / 2); }

/* sakslinja: på en caseside henger feltet igjen under menyboksen når
   toppen har rullet bort. samme bredde som boksen, i prosjektets egen
   farge, med navnet til venstre og veien inn til høyre. den ruller ned
   fra boksens underkant og dekker boksens skygge, så de to leses som
   én enhet. ligger absolutt, så den ikke skyver siden ned. */
.sakslinje { position: absolute; left: 0; right: 0; top: calc(100% - var(--u) * 0.6);
  width: calc(100% - var(--pad)); max-width: 1120px; margin-inline: auto;
  padding: calc(var(--u) * 0.4) calc(var(--pad) / 2);
  display: flex; align-items: baseline; gap: calc(var(--u) * 0.4) calc(var(--u) * 1);
  background: var(--field); color: var(--field-ink);
  box-shadow: 0 1px 2px rgb(42 33 24 / .06), 0 4px 14px -8px rgb(42 33 24 / .12);
  clip-path: inset(0 -24px 100% -24px); visibility: hidden; pointer-events: none;
  transition: clip-path .4s var(--ease), visibility 0s linear .4s; }
.sakslinje.vis { clip-path: inset(0 -24px -32px -24px); visibility: visible; pointer-events: auto;
  transition: clip-path .4s var(--ease), visibility 0s; }
.sakslinje .sak { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.sakslinje .inn { margin-left: auto; display: flex; align-items: baseline; gap: calc(var(--u) * 0.8); }
.sakslinje .mail { font-size: 15px; font-weight: 500; color: var(--field-ink);
  background-image: linear-gradient(var(--field-dim), var(--field-dim)); }
.sakslinje .mail:hover { color: var(--field-ink); background-image: linear-gradient(var(--field-ink), var(--field-ink)); }
.sakslinje .status { font-family: var(--mono); font-size: 11.5px; color: var(--field-dim); }
@media (max-width: 700px) { .sakslinje .status { display: none; } }

/* dokumentsidene begynner rett under linja, ikke med egen toppmarg */
body.doc .doc-top { padding-block: calc(var(--u) * 2) calc(var(--u) * 2); }

@media (max-width: 560px) {
  .topbar .wrap { flex-wrap: wrap; gap: calc(var(--u) * 0.4); }
  .topbar .links { margin-left: 0; width: 100%; gap: 14px; font-size: 10.5px; white-space: nowrap; }
}


/* ════ skriving ════
   eget felt, ikke enda en tekstsone med hårstreker. sand er det
   lyse feltet i paletten, laget for lesning. det skiller skrivingen
   fra prosjektlista uten å legge til en eneste ny linje. */
.writing { margin-top: var(--sek); padding-inline: calc(var(--pad) / 2); }
.writing .wrap { padding-inline: 0; }
.writing > * { position: relative; z-index: 1; }

/* hodet i arkivet er det samme seksjonshodet, i sandens blekk */

/* seks plater i én rad. de er et register, ikke et galleri. */
.writing .rad { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 0.8); }
.tekst { display: block; }
 /* ── plata ──
   alle kort har samme format, uansett om innholdet er et bilde eller
   en tekst. bildene har allerede hvit ramme bakt inn, 13px på 969,
   altså 1.34%. tekstplatene tegner den samme rammen i samme forhold,
   så raden blir et rutenett av like plater og ikke ulike høyder. */
.plate-kort { display: block; width: 100%; aspect-ratio: 969 / 1200;
              margin-bottom: calc(var(--u) * 0.45); }
.plate-kort.foto { object-fit: cover; height: auto; background: #e2cfae; }
.plate-kort.ord { background: #fff; padding: 1.34%; }
.plate-kort.ord > span { display: flex; width: 100%; height: 100%;
  align-items: flex-end; padding: 8%; background: var(--plate, var(--felt-petrol));
  color: var(--plate-ink, var(--blekk-petrol));
  font-family: var(--sign);
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.04; letter-spacing: -0.005em; }
.tekst .dato { font-family: var(--mono); font-size: 11.5px; color: #63543c; }
.tekst h3 { margin-top: 6px; font-family: var(--display); font-weight: 700;
            font-size: var(--t-small); letter-spacing: -0.01em; line-height: 1.3;
            color: var(--blekk-sand); transition: color .3s var(--ease); }
.tekst:hover h3 { color: #8c3a22; }
.tekst p { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: #4a4034; }
.tekst .lengde { display: block; margin-top: 4px; font-family: var(--mono); font-size: var(--t-mono); color: #63543c; }

/* selve teksten */
body.tekstside .wrap { max-width: 680px; }
.tekst-topp { padding-block: calc(var(--u) * 2.2) calc(var(--u) * 1.4); }
.tekst-topp .dato { font-family: var(--mono); font-size: 11.5px; color: var(--field-dim, var(--faint)); }
.tekst-topp h1 { margin-top: calc(var(--u) * 0.6); font-family: var(--sign);
                 font-size: clamp(34px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.005em; }
.tekst-topp .ingress { margin-top: calc(var(--u) * 0.8); font-size: clamp(17px, 2vw, 20px); line-height: 1.5;
                       color: var(--field-soft, var(--ink-soft)); max-width: 40ch; }
.brod { padding-block: calc(var(--u) * 1.8) calc(var(--u) * 2.4); }
.brod p { margin-top: calc(var(--u) * 0.75); color: var(--ink-soft); max-width: 62ch; }
.brod p:first-child { margin-top: 0; }
.brod p:first-child::first-letter { font-family: var(--sign); font-size: 3.1em; float: left;
  line-height: 0.82; margin: 2px 10px 0 0; color: var(--ink); }

/* arkivet */
.arkiv-rad { display: block; border-bottom: 1.5px solid var(--line); transition: border-color .35s var(--ease); }
.arkiv-rad:hover { border-color: var(--line-strong); }
.arkiv-rad .wrap { display: grid; grid-template-columns: 8ch 1fr auto; gap: calc(var(--u) * 0.9);
                   padding-block: calc(var(--u) * 0.8); align-items: baseline; }
.arkiv-rad .dato { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.arkiv-rad .tit { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.02em;
                  transition: color .3s var(--ease); }
.arkiv-rad:hover .tit { color: var(--accent); }
.arkiv-rad .len { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

@media (max-width: 860px) { .writing .rad { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .writing .rad { grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 0.8); }
  .arkiv-rad .wrap { grid-template-columns: 1fr; gap: 4px; }
}


/* ════ aneo: maskinen, tegnet ════
   tredje form. ikke klarnings bånd, ikke summers' vedtekter.
   denne siden er et teknisk oppslag: kildene som en tett tabell,
   fysikken som en annotert rekke. */
body.maskin { --field: var(--felt-petrol); --field-ink: var(--blekk-petrol);
  --field-soft: #cfdcd6; --field-dim: #a8bfb6; --field-line: #1e6459;
  --field-accent: #e8b98a; }

.kilder { border-top: 1.5px solid var(--line-strong); }
.kilde { display: grid; grid-template-columns: 12ch 1fr auto; gap: calc(var(--u) * 0.8);
         padding-block: calc(var(--u) * 0.55); border-bottom: 1.5px solid var(--line); align-items: baseline; }
.kilde .n { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.kilde .h { font-size: 15px; color: var(--ink-soft); }
.kilde .t { font-family: var(--mono); font-size: 11.5px; color: var(--faint); text-align: right; white-space: nowrap; }

.steg { display: grid; grid-template-columns: 3.5ch 1fr; gap: calc(var(--u) * 0.8);
        padding-block: calc(var(--u) * 0.9); border-bottom: 1.5px solid var(--line); }
.steg .no { font-family: var(--mono); font-size: 12px; color: var(--faint); padding-top: 4px; }
.steg h3 { font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.9vw, 20px); letter-spacing: -0.02em; }
.steg p { margin-top: 6px; color: var(--ink-soft); max-width: 60ch; }
.steg code { font-family: var(--mono); font-size: 13px; background: var(--tint); padding: 2px 6px; color: var(--ink); }

.skjerm { margin-block: calc(var(--u) * 1.6); }
.skjerm img { display: block; width: 100%; height: auto; border: 1.5px solid var(--line); }
.skjerm .tom { display: grid; place-items: center; min-height: 320px; border: 1.5px dashed var(--line-strong);
               background: var(--tint); font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center;
               padding: calc(var(--u) * 1.2); line-height: 1.8; }
.skjerm figcaption { margin-top: calc(var(--u) * 0.5); font-size: 14px; color: var(--muted); }

/* ════ kraftbildet: beslutningsloggen ════
   fjerde form. ikke klarnings band, ikke summers' vedtekter, ikke
   aneos plansje. fem valg, hvert med alternativet som ble forkastet
   og ett bevis fra siden selv. */
body.logg { --field: var(--felt-rod); --field-ink: var(--blekk-rod);
  --field-soft: #f0d6c8; --field-dim: #e9c0ad; --field-line: #bf6a52;
  --field-accent: #f7ece2; }
body.logg .tegning { background: var(--felt-rod); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
body.logg .tegning svg { overflow: visible; }
.tom-figur { position: relative; z-index: 1; font-family: var(--mono); font-size: 12px; color: var(--field-dim); }
.tom-figur a { color: var(--field-ink); border-bottom: 1.5px solid var(--field-line); }

.valg { display: grid; grid-template-columns: 3.5ch 1fr; gap: calc(var(--u) * 0.8);
        padding-block: calc(var(--u) * 1.1); border-bottom: 1.5px solid var(--line); }
.valg .no { font-family: var(--mono); font-size: 12px; color: var(--faint); padding-top: 5px; }
.valg h3 { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2vw, 21px);
           letter-spacing: -0.02em; }
.valg p { max-width: 62ch; }
.valg .gjort { margin-top: 7px; color: var(--ink-soft); }
/* alternativet og beviset er etiketterte rader, sa formen leses som
   en logg og ikke som tre avsnitt. */
.valg .alt, .valg .bevis { margin-top: calc(var(--u) * 0.55); display: grid;
  grid-template-columns: 11ch 1fr; gap: calc(var(--u) * 0.5); font-size: 15px; line-height: 1.55; }
.valg .alt span, .valg .bevis span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--faint); padding-top: 3px; }
.valg .alt { color: var(--ink-soft); }
.valg .bevis { color: var(--ink); }
@media (max-width: 560px) {
  .valg { grid-template-columns: 1fr; gap: calc(var(--u) * 0.3); }
  .valg .alt, .valg .bevis { grid-template-columns: 1fr; gap: 3px; }
}

/* ════ norge i tall: almanakken ════
   femte form, men samme logg som kraftbildet: fem valg, hvert med
   alternativet og et bevis. siden har ikke noe farget toppfelt; toppen
   er navnet på papiret og tre bilder. feltfargen er almanakkens egen
   blå, den samme som prikkene, og brukes bare i sakslinja. figuren er
   almanakkens prikkefelt: alle 357, den største først, tegnet fra
   tallene på siden som er ute, på en lys flate i begge moduser. */
body.almanakk { --field: #2b4e87; --field-ink: #f3f1ea;
  --field-soft: #d5dbe8; --field-dim: #aebbd4; --field-line: #4b6aa3;
  --field-accent: #f3f1ea; }
body.almanakk .tegning { background: oklch(0.957 0.012 88); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
body.almanakk .tegning svg { overflow: visible; }
body.almanakk .tegning circle { cursor: pointer; }
.p-eldre { fill: #2b4e87; }
.p-unge  { fill: none; stroke: #2b4e87; stroke-width: 1.5; }
body.almanakk .tegning circle:hover { fill: var(--blekk-sand); stroke: var(--blekk-sand); }
body.almanakk .tom-figur { color: #5a4b3a; }
body.almanakk .tom-figur a { color: var(--blekk-sand); border-color: #c9c3b5; }

/* ════ dagens nye: streklista ════
   produktets eget blekk og papir: marineblått på hvitt, rødt bare på
   linja for det vanlige. figuren er gårsdagens strekliste, hentet fra
   siden som er ute, på hvitt papir i begge moduser. */
body.dagens { --field: #00205B; --field-ink: #ffffff; --field-soft: #d6ddeb;
  --field-dim: #a9b6d3; --field-line: #2a4583; --field-accent: #ff7a8a; }
body.dagens .tegning { background: #ffffff; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
body.dagens .tom-figur { color: #4a5775; }
body.dagens .tom-figur a { color: #00205B; border-color: #c8cfdd; }

/* ════ nærmeste turbin: én linje for norge ════
   produktet har én farge i to moduser. sakslinja tar den mørke,
   figuren står på den lyse, som et bilde ville gjort. */
body.turbin { --field: #0b1316; --field-ink: #dce4e2; --field-soft: #c3ccca;
  --field-dim: #8d9ba1; --field-line: #2c383c; --field-accent: #dce4e2; }
body.turbin .tegning { background: #e7ecea; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
body.turbin .tom-figur { color: #4b5a60; }
body.turbin .tom-figur a { color: #0b1316; border-color: #b9c3c0; }

/* ════ om tre år: banene oppå renta ════
   produktets blå er feltet. figuren er alle svarene tre år frem,
   hentet fra siden som er ute, på hvitt papir i begge moduser. */
body.rentebaner { --field: #2230d0; --field-ink: #ffffff; --field-soft: #d3d7fb;
  --field-dim: #aeb4f2; --field-line: #4752db; --field-accent: #ffffff; }
body.rentebaner .tegning { background: #ffffff; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
body.rentebaner .tom-figur { color: #4a4d57; }
body.rentebaner .tom-figur a { color: #2230d0; border-color: #cfd2ea; }

/* ════ statsspråket: staten mot språkrådets råd ════
   produktets lilla er feltet. */
body.statsspraket { --field: #6a2b7b; --field-ink: #ffffff; --field-soft: #ead8f0;
  --field-dim: #c9a6d6; --field-line: #7f4290; --field-accent: #ffffff; }

/* ════ turns out: ordene og det som skjedde først ════
   produktets blekksvarte flate og beinhvite tekst er feltet. */
body.turnsout { --field: #14130f; --field-ink: #ece6d9; --field-soft: #d6cfc1;
  --field-dim: #8f887b; --field-line: #2b2822; --field-accent: #ece6d9; }

/* ── aksen: casen som oppslag ──
   prøves på norge i tall. teksten står i én fast spalte midt på
   kanten, og spalten flytter seg aldri. rundt den står satellitter:
   kolofonen, et lite stående bilde med bildetekst. de bytter side fra
   bånd til bånd og henger ved avsnittet de hører til. bilderadene er
   flater, så de går ut til kanten som menyboksen.
   satellittene flyter med negativ marg (som sidenoter), så teksten
   ikke brytes rundt dem og båndet likevel blir høyt nok. */
.akse .wrap { container-type: inline-size; --W: 100cqw; }
.skjerm.ramme { container-type: inline-size; --W: calc(100cqw - var(--pad)); }
.akse .wrap, .skjerm.ramme {
  --gap: calc(var(--u) * 1.6);
  --akse: clamp(440px, var(--W) - 2 * (var(--gap) + 180px), 560px);
  --side: calc((var(--W) - var(--akse)) / 2 - var(--gap));
}
.band.akse { padding-block: calc(var(--u) * 2); }
.doc-top + .akse { padding-top: calc(var(--u) * 3); }
.akse .spalte { width: var(--akse); margin-inline: auto; display: flow-root; }
.akse.pull .spalte p { color: var(--ink); margin-top: 0; }

/* toppen: navnet og ingressen på papiret, i spalten. ingen flate; det
   første bildet er de tre stedene rett under. navnet er sidens største
   tekst, men ikke større enn at bildene bærer toppen. */
.band.akse.topp { padding-top: calc(var(--u) * 3); padding-bottom: 0; }
.topp h1 { font-size: clamp(38px, 4.2vw, 60px); max-width: none; }
.akse.topp .standfirst { margin-top: calc(var(--u) * 0.7); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.5; color: var(--ink-soft); }
.akse.topp .inngang { margin-top: calc(var(--u) * 1); }
.topp .inngang .mail { color: var(--ink); }

.sat { margin: 0; width: var(--side); }
.sat.hoyre { float: right; clear: right; margin-right: calc(-1 * (var(--side) + var(--gap))); }
.sat.venstre { float: left; clear: left; margin-left: calc(-1 * (var(--side) + var(--gap))); }
/* ved et valg starter bildet på linje med tittelen, ikke med streken */
.sat:has(+ .valg) { margin-top: calc(var(--u) * 1.1 + 5px); }
.sat:has(+ .clause) { margin-top: calc(var(--u) * 1.3 + 5px); }
.sat:has(+ .steg) { margin-top: calc(var(--u) * 0.9 + 4px); }
.sat figcaption { margin-top: calc(var(--u) * 0.6); padding-bottom: calc(var(--u) * 0.6);
  border-bottom: 1.5px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); text-align: left; }

.akse .kolofon > div { display: flex; flex-direction: column; gap: 2px; }
.akse .kolofon > div + div { margin-top: calc(var(--u) * 0.8); }
.akse .kolofon .k { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.akse .kolofon .v { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
/* kolofonen peker ned til arbeidsnotatene nederst på casen */
.akse .kolofon .ned { align-self: flex-start; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink);
  border-bottom: 1.5px solid var(--line-strong); padding-bottom: 2px; transition: color .25s var(--ease), border-color .25s var(--ease); }
.akse .kolofon .ned:hover { color: var(--accent); border-color: var(--accent); }

.bilderad { padding-block: calc(var(--u) * 2); }
.bilderad.tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.7); }
.skjerm.bilderad { margin-block: 0; }
.skjerm.ramme figcaption { width: var(--akse); margin-inline: auto; margin-top: calc(var(--u) * 0.6); }

/* bildeplassen: fast format, bildet fyller og beskjæres. stående 3:4
   i satellittene og triptyken, liggende 3:2 i den brede raden. */
.plass { position: relative; aspect-ratio: 3 / 4; background: var(--tint); }
.plass.bred { aspect-ratio: 3 / 2; }
.plass img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* utsnittet: stupet og brygga i stedet for kranene, speilkanten og
   folkene i stedet for taket */
.plass img.lavere { object-position: 50% 70%; }
.plass img.venstre { object-position: 14% 50%; }
/* plassholder til bildet er valgt: flate og nummer, så vi kan snakke om dem */
.plass.tom { background: var(--line); }
.plass.tom span { position: absolute; left: 10px; bottom: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ════ prosjektene: registeret ════
   ikke et rutenett som forsiden, men en liste i samme akse som casene:
   bildet i venstre marg, navnet og én setning i spalten, status i høyre
   marg. bildene skiller radene, så de trenger ingen strek. det som er på
   vei står stille under, uten bilde, med hårstrek. */
main.band.register { padding-block: calc(var(--u) * 2) calc(var(--u) * 3); }
.register .wrap { container-type: inline-size; --W: 100cqw; --gap: calc(var(--u) * 1.6);
  --akse: clamp(440px, var(--W) - 2 * (var(--gap) + 180px), 560px);
  --side: calc((var(--W) - var(--akse)) / 2 - var(--gap)); }
.register .sek { margin-bottom: calc(var(--u) * 1.2); }
.register .vei-hode { margin-top: calc(var(--u) * 3); margin-bottom: 0; }
.reg { display: grid; grid-template-columns: var(--side) var(--akse) var(--side); column-gap: var(--gap);
  align-items: start; padding-block: calc(var(--u) * 0.7); }
.reg .foto { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); }
.reg .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reg .hva b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t-h2);
  letter-spacing: -0.025em; line-height: 1.15; transition: color .25s var(--ease); }
.reg .hva span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.reg .st { justify-self: end; padding-top: 8px; font-family: var(--mono); font-size: var(--t-mono); color: var(--faint); text-align: right; }
a.reg:hover .hva b { color: var(--accent); }
/* på vei: navnet og linja i spalten, ingen bilde og ingen status */
.reg.vei { padding-block: calc(var(--u) * 0.6); border-bottom: 1.5px solid var(--line); }
.reg.vei .hva { grid-column: 2; }
.reg.vei .hva b { display: inline; font-size: 17px; margin-right: 10px; }
.reg.vei .hva span { display: inline; font-size: 15px; }
@media (max-width: 900px) {
  .reg { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); column-gap: calc(var(--u) * 0.8); }
  .reg .hva { grid-column: 2; grid-row: 1; }
  .reg .st { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; padding-top: 6px; }
  .reg.vei { grid-template-columns: 1fr; }
  .reg.vei .hva { grid-column: 1; }
  .reg.vei .hva b { display: block; margin-right: 0; }
  .reg.vei .hva span { display: block; margin-top: 3px; }
}

/* ── slik er det laget: arbeidet på bordet ──
   nederst på casen, samme sted og samme form hver gang: metode, feller,
   nedlasting, kildekode. modulen viser bare det som finnes for
   prosjektet. en flate på kanten, som menyboksen; innholdet flukter
   med teksten. hodet er det samme som seksjonene på forsiden. */
.laget { margin-block: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--pad) / 2) calc(var(--u) * 1.6);
  background: var(--tint); }
.laget .kort { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 1.2) calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1.1); }
.laget .kort > div { display: flex; flex-direction: column; }
.laget h3 { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.8vw, 20px); letter-spacing: -0.02em; }
.laget p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
/* lenken står nederst i kortet, så de fire linjene ligger på samme høyde */
.laget .hent { margin-top: auto; padding-top: calc(var(--u) * 0.7); font-family: var(--mono); font-size: 12px; color: var(--ink); }
.laget .hent i { font-style: normal; margin-left: 8px; color: var(--faint); }
.laget .hent a { border-bottom: 1.5px solid var(--line-strong); padding-bottom: 2px; transition: color .25s var(--ease), border-color .25s var(--ease); }
.laget .hent a:hover { color: var(--accent); border-color: var(--accent); }
/* skjermbildene tre i bredden, på en flate */
.shots.tre { grid-template-columns: repeat(3, minmax(0, 260px)); }
@media (max-width: 560px) { .shots.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.4); } }

/* smal skjerm: én spalte. satellitten blir et par, bildet til venstre
   og teksten til høyre, så den fortsatt er noe annet enn brødteksten.
   kolofonen går til slutten av båndet. */
@media (max-width: 900px) {
  .akse .spalte { width: auto; display: flex; flex-direction: column; }
  .sat, .sat.hoyre, .sat.venstre { float: none; width: auto; margin: calc(var(--u) * 1.1) 0; }
  .sat:has(+ .valg), .sat:has(+ .clause), .sat:has(+ .steg) { margin-top: calc(var(--u) * 1.1); }
  /* bildet blir aldri større enn i margen på bred skjerm */
  figure.sat { display: grid; grid-template-columns: clamp(120px, 40%, 207px) minmax(0, 1fr); gap: calc(var(--u) * 0.7);
    align-items: start; padding-bottom: calc(var(--u) * 0.8); border-bottom: 1.5px solid var(--line); }
  .sat figcaption { margin-top: 0; padding-bottom: 0; border-bottom: 0; }
  .akse .kolofon { order: 99; margin-bottom: 0; }
  .skjerm.ramme figcaption { width: auto; padding-inline: calc(var(--pad) / 2); }
  .laget .kort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* de tre stedene står side om side også på telefon: tre høye bilder
   etter hverandre er for langt å gå før innholdet */
@media (max-width: 560px) {
  .bilderad.tre { gap: calc(var(--u) * 0.4); }
  .laget .kort { grid-template-columns: 1fr; }
}

/* tegningene pa aneo. saken er intern, sa skjermbildet finnes ikke.
   tegningen siterer maskinens flate slik summers-figuren siterer
   produktets, og viser mekanikken i stedet for tallene. */
.tegning { position: relative; overflow: hidden; background: var(--felt-petrol); }
.tegning svg { display: block; width: 100%; height: auto; }
.skjerm .fig-no { font-family: var(--mono); font-size: 11.5px; color: var(--faint);
                  margin-right: calc(var(--u) * 0.5); }

@media (max-width: 640px) {
  .kilde { grid-template-columns: 1fr; gap: 3px; }
  .kilde .t { text-align: left; }
  .steg { grid-template-columns: 1fr; gap: 2px; }
}


/* ════ fotoserier ════ */
body.serie .wrap { max-width: 900px; }
.serie-topp { padding-block: calc(var(--u) * 2.2) calc(var(--u) * 1.2); }
.serie-topp .kind { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.serie-topp h1 { margin-top: calc(var(--u) * 0.5); font-family: var(--sign);
                 font-size: clamp(34px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.005em; }
.serie-topp .antall { margin-top: calc(var(--u) * 0.4); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.plater { padding-bottom: calc(var(--u) * 2); }
.plate { margin-block: calc(var(--u) * 1.2); }
.plate img { display: block; width: 100%; height: auto; }


/* arkivet bruker samme plater som forsiden, på papir i stedet for sand */
.arkiv { padding-block: calc(var(--u) * 0.5) calc(var(--u) * 2.4); }
.arkiv .rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); }
.arkiv .tekst .dato, .arkiv .tekst .lengde { color: var(--faint); }
.arkiv .tekst h3 { color: var(--ink); }
.arkiv .tekst:hover h3 { color: var(--accent); }
.arkiv .tekst p { color: var(--muted); }
@media (max-width: 760px) { .arkiv .rad { grid-template-columns: 1fr; } }

/* bunnlinja bærer kolofonen, høyrestilt */
footer .kolofon { margin-left: auto; display: flex; gap: calc(var(--u) * 1.1); flex-wrap: wrap; }
footer .kolofon span { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
footer .kolofon b { font-weight: 400; color: var(--muted); font-family: var(--body); font-size: 13px; }
footer .kolofon a:hover { color: var(--accent); }
@media (max-width: 640px) { footer .kolofon { margin-left: 0; width: 100%; gap: calc(var(--u) * 0.6); } }


/* egen prosjektside: samme indeks som forsiden, med alt som finnes */
.prosjekt-topp { padding-block: calc(var(--u) * 2.2) calc(var(--u) * 1.2); }
.prosjekt-topp .wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad); }
.prosjekt-topp .sub { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.prosjekt-topp h1 { margin-top: calc(var(--u) * 0.5); font-family: var(--sign);
                    font-size: clamp(34px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.005em; }

.alle-prosjekter { grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
                   transition: color .25s var(--ease); }
.alle-prosjekter:hover { color: var(--accent); }


/* arkivsiden er bredere enn en tekstside: oppslagene trenger plass */
body.arkivside .wrap { max-width: 1120px; }
body.arkivside .tekst-topp .ingress { max-width: 46ch; }

/* ════ arkivet som oppslag ════
   ikke et rutenett av omslag. hver serie får en rad: tittel og
   opplysninger i venstre skinne, flere bilder fra serien til høyre.
   da viser arkivet serien, ikke bare at den finnes. */
.oppslag { border-top: 1.5px solid var(--line); }
.oppslag:last-of-type { border-bottom: 1.5px solid var(--line); }
.oppslag .wrap { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
                 gap: calc(var(--u) * 1.6); padding-block: calc(var(--u) * 1.5); align-items: start; }
.oppslag .info .kind { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.oppslag .info h2 { margin-top: 9px; font-family: var(--sign);
                    font-size: clamp(24px, 3vw, 34px); line-height: 1.04; letter-spacing: -0.005em;
                    transition: color .3s var(--ease); }
.oppslag:hover .info h2 { color: var(--accent); }
.oppslag .info p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }
.oppslag .info .meta { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* én ting alene får hele bredden. flere deler den. det er den
   ujevne takten som gjør arkivet levende. */
.oppslag .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(var(--u) * 0.7); }
.oppslag .strip.en { grid-auto-flow: row; }
.oppslag .strip img { display: block; width: 100%; height: auto; }
.oppslag .ordplate { display: flex; align-items: flex-end; aspect-ratio: 969 / 1200;
  background: #fff; padding: 1.34%; }
.oppslag .ordplate > span { display: flex; width: 100%; height: 100%; align-items: flex-end; padding: 8%;
  background: var(--felt-petrol); color: var(--blekk-petrol);
  font-family: var(--sign); font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.02; letter-spacing: -0.01em; }
/* alene på full bredde må skriften bære flaten, ellers er det bare farge */
.oppslag .strip.en .ordplate > span { font-size: clamp(38px, 6.4vw, 82px); }

@media (max-width: 860px) {
  .oppslag .wrap { grid-template-columns: 1fr; gap: calc(var(--u) * 0.9); }
  .oppslag .strip { grid-auto-flow: row; grid-auto-columns: auto; }
  .oppslag .ordplate { max-width: none; }
}


/* ════ kurset som plater ════
   et foredrag lest på skjerm: hver slide er sin egen flate, stablet
   nedover med luft mellom, ikke én lang brødtekst. flaten er hvit på
   papiret som menyboksen. stoppene (sitatene) får feltfarge, én farge,
   så takten fra foredraget står: lange plater, så et pust. */
body.kurs .wrap { max-width: 860px; }
.plater { padding-block: calc(var(--u) * 0.6) calc(var(--u) * 2.4); }
.plater .wrap { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); }
.bolk { margin-top: calc(var(--u) * 1.4); padding-bottom: calc(var(--u) * 0.3);
        font-family: var(--mono); font-size: var(--t-mono); color: var(--faint); }
.bolk:first-child { margin-top: 0; }
.plate { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
         gap: calc(var(--u) * 1.2) calc(var(--u) * 1.6);
         padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5) calc(var(--u) * 1.6);
         min-height: min(44vw, 380px);
         background: var(--flate);
         box-shadow: 0 1px 2px rgb(42 33 24 / .06), 0 4px 14px -8px rgb(42 33 24 / .12); }
.plate .nr { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--t-mono); color: var(--accent); }
.plate h2 { align-self: end; font-family: var(--sign); font-weight: 900;
            font-size: clamp(24px, 3.2vw, 36px); line-height: 1.04; letter-spacing: -0.01em; }
.plate .tekst { align-self: end; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.55; }
.plate .tekst p + p, .plate .tekst dl + p, .plate .tekst p + dl { margin-top: calc(var(--u) * 0.55); }
.plate .tekst .k { display: block; font-family: var(--mono); font-size: var(--t-mono); color: var(--faint); margin-bottom: 8px; }
/* fra/til: etiketten i mono, eksempelet som brødtekst. samme rytme som faktalista. */
.fratil { display: grid; grid-template-columns: max-content 1fr; gap: 6px calc(var(--u) * 0.6); }
.fratil dt { font-family: var(--mono); font-size: var(--t-mono); color: var(--faint); padding-top: 5px; }
.fratil dd { color: var(--ink); }

/* stoppene: sitatet alene på feltet. samme petrol som ordplaten i arkivet. */
.plate.stopp { grid-template-columns: 1fr; background: var(--felt-petrol); color: var(--blekk-petrol);
               box-shadow: none; }
.plate.stopp .nr { color: var(--blekk-petrol); opacity: .62; max-width: 46ch; }
.plate.stopp .sitat { align-self: end; font-family: var(--sign); font-weight: 900;
                      font-size: clamp(28px, 4.6vw, 54px); line-height: 1.04; letter-spacing: var(--sign-track);
                      max-width: 20ch; }
.plate.stopp .sitat:only-child { grid-row: 1 / span 2; }

/* kuttet: tallet er antall ord og bærer flaten. vermiljon, som alle tall.
   med javascript er de fem trinnene én plate som bytter; uten ligger de
   under hverandre, hvert med sitt ordtall i etiketten. */
.plate.kutt { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); min-height: 0; align-items: end; }
.plate.kutt .ord { font-family: var(--sign); font-weight: 900; font-size: var(--t-tall); line-height: 0.9;
                   letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.plate.kutt .tekst { max-width: 52ch; }
.plate.kutt .trinn + .trinn { margin-top: calc(var(--u) * 0.9); }
.plate.kutt:not(.js) .trinn .k::after { content: ' · ' attr(data-ord) ' ord'; }
.plate.kutt.js { min-height: min(44vw, 380px); cursor: pointer; user-select: none; }
.plate.kutt.js .trinn { display: none; }
.plate.kutt.js .trinn.aktiv { display: block; margin-top: 0; }
.plate.kutt .trinn { transition: opacity .22s var(--ease); }
.plate.kutt.bytter .trinn { opacity: 0; }
/* streken kommer i vermiljon og ordene blekner, så går alt. */
.plate.kutt .stryk { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 2px;
                     transition: text-decoration-color .35s var(--ease), color .35s var(--ease); }
.plate.kutt .trinn.stryker .stryk { text-decoration-color: var(--accent); color: var(--faint); }
.plate.kutt .steg { display: flex; align-items: baseline; gap: 2px; margin-top: calc(var(--u) * 0.9);
                    padding-top: calc(var(--u) * 0.6); border-top: 1.5px solid var(--line);
                    font-family: var(--mono); font-size: var(--t-mono); }
.plate.kutt .steg button { all: unset; cursor: pointer; padding: 6px 8px; margin-left: -8px; color: var(--faint);
                           border-bottom: 1.5px solid transparent; transition: color .25s var(--ease), border-color .25s var(--ease); }
.plate.kutt .steg button + button { margin-left: 2px; }
.plate.kutt .steg button:hover { color: var(--ink); }
.plate.kutt .steg button[aria-current="step"] { color: var(--accent); border-color: var(--accent); }
.plate.kutt .steg button:focus-visible { outline-offset: 0; }
.plate.kutt .steg .hint { margin-left: auto; color: var(--faint); }

/* annonsene: teksten deres i stedet for et skjermbilde av den. platen er
   delt på midten: annonsen på feltet, stor og modig, kommentaren på hvit. */
.plate.annonse { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.plate.annonse .felt { display: flex; flex-direction: column; justify-content: space-between;
                       gap: calc(var(--u) * 1.2);
                       padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5) calc(var(--u) * 1.6);
                       background: var(--felt-petrol); color: var(--blekk-petrol); }
.plate.annonse .felt .nr { color: var(--blekk-petrol); opacity: .62; }
.plate.annonse .kopi { font-family: var(--sign); font-weight: 900; color: var(--blekk-petrol);
                       font-size: clamp(24px, 3vw, 36px); line-height: 1.06; letter-spacing: -0.015em; }
/* de lange annonsene (economist er lang med vilje) går ett hakk ned, så platen ikke blir dobbelt så høy */
.plate.annonse .kopi.lang { font-size: clamp(20px, 2.4vw, 28px); }
.plate.annonse .kopi i { display: block; margin-top: 12px; font-style: normal; font-family: var(--mono);
                         font-size: var(--t-mono); opacity: .62; letter-spacing: 0; }
/* brødteksten under overskriften, der ideen først blir forståelig */
.plate.annonse .brodtekst { margin-top: calc(var(--u) * 0.7); font-size: var(--t-small); line-height: 1.5;
                            color: var(--blekk-petrol); opacity: .82; max-width: 40ch; }
.plate.annonse .tekst { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5) calc(var(--u) * 1.6);
                        font-size: var(--t-small); max-width: none; }

@media (max-width: 640px) {
  .plate, .plate.kutt, .plate.annonse { grid-template-columns: 1fr; gap: calc(var(--u) * 0.8); min-height: 0;
                                        padding: calc(var(--u) * 1.1) calc(var(--u) * 1) calc(var(--u) * 1.3); }
  .plate h2, .plate .tekst, .plate .sitat, .plate .kopi { align-self: start; }
  .plate.annonse { padding: 0; gap: 0; }
  .plate.annonse .felt, .plate.annonse .tekst { padding: calc(var(--u) * 1.1) calc(var(--u) * 1) calc(var(--u) * 1.3); }
  .plate.stopp { min-height: min(60vw, 300px); }
  .plate.stopp .sitat { align-self: end; }
  .plate.kutt .ord { line-height: 1; }
}

/* ════ berorings-mal ════
   apple: 44x44 som standard, 28x28 som absolutt gulv (accessibility.md).
   tolv lenker la under, fem under gulvet i hoyde. padding utvider
   trykkflaten uten a endre typografien. pointer: coarse treffer
   berorings-skjermer uansett bredde, ikke bare smale vinduer. */
@media (pointer: coarse) {
  .topbar .links a { padding-block: 11px; }
  .topbar .wrap { padding-block: 2px; }
  .knapp { padding-block: 15px 14px; }
  .alle-prosjekter { padding-block: 6px; }
  footer .mail { padding-block: 9px; display: inline-block; }
  footer .kolofon a { padding-block: 12px; display: inline-block; }
  .live-nav button { width: 44px; height: 44px; }
  .live-nav .of { padding-block: 12px; }
  .live-panel a { padding-block: 12px; display: inline-block; }
  .oppslag .info h2 { padding-block: 4px; }
  .writing .topp .alle { padding-inline: 11px; margin-right: -11px; }
}

/* ════ mindre bevegelse ════
   modulens rotasjon var allerede koblet til dette i javascript, men
   de tjue css-overgangene var det ikke. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}