: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);
}
/* 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 {
  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 { color: var(--ink-soft); margin-top: calc(var(--u) * 0.55); }
.prose 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. */
body.charter .wrap { max-width: 720px; }
.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 { 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 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 { margin-top: calc(var(--u) * 0.35); }
/* streken er tegnet: en flate som er tykkest der pennen setter an og
   tynnes mot slutten, med en svak bue. de to er ulike. den strekkes til
   ordets bredde og tegnes fra venstre, som et strøk. */
.mast h1 .strek { position: absolute; left: -0.05em; top: 0.44em; width: calc(100% + 0.17em); height: 0.3em;
  overflow: visible; fill: var(--accent);
  clip-path: inset(0 100% 0 0); animation: strek .5s var(--ease) forwards; animation-delay: .5s; }
.mast h1 b + s .strek { animation-delay: .95s; }
@keyframes strek { to { clip-path: inset(0 -3% 0 0); } }
.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); }
}

/* ── 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); }
.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,
.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); }

/* 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; }
body.maskin .wrap { max-width: 1000px; }

.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 .wrap { max-width: 1000px; }
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. feltet er papir og blekk, slik almanakken
   selv er, og figuren er dens eget prikkefelt: alle 357, den største
   først, tegnet fra tallene på siden som er ute. */
body.almanakk { --field: var(--felt-sand); --field-ink: var(--blekk-sand);
  --field-soft: #5a4b3a; --field-dim: #7d6b57; --field-line: #cbb493;
  --field-accent: #2b4e87; }
body.almanakk .wrap { max-width: 1000px; }
body.almanakk .tegning { background: var(--felt-sand); 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: var(--field-soft); }
body.almanakk .tom-figur a { color: var(--blekk-sand); border-color: var(--field-line); }

/* 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;
  }
}