/* ===========================================================================
   MJ-bladet på nett — samme uttrykk som portal.mjf.no

   Variabler, fonter og komponenter er hentet fra `C:\mjf-portal\stil.css`, så
   de to tjenestene ser ut som samme forening. Endres noe der, skal det endres
   her også — det er to filer, ikke ett delt stilark, fordi tjenestene ligger
   på hvert sitt domene og ikke kan dele filer.

   ⚠️ Fontene er SELVHOSTET i fonter/. CSP-en er `style-src 'self'` og
   `font-src 'self'`, så Google Fonts ville blitt blokkert — stille.
   =========================================================================== */

@font-face {
  font-family: "Barlow";
  src: url("../fonter/barlow-v13-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonter/barlow-v13-latin-600.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonter/barlow-condensed-v13-latin-600.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --mjf:        #21759b;
  --mjf-mork:   #1b5f7d;
  --mjf-hover:  #164f68;
  --mjf-100:    #e8f2f7;
  --mjf-200:    #cfe4ee;

  --tekst:      #1d1f20;
  --dempet:     #6b6e70;
  --ramme:      rgba(29, 31, 32, .16);
  --ramme-svak: rgba(29, 31, 32, .08);
  --bakgrunn:   #f2f2f3;
  --flate:      #fff;

  --ok-bg:      #e7f2ec;
  --ok-kant:    #2e7d4f;
  --feil-bg:    #fbeceb;
  --feil-kant:  #b3372a;

  --overskrift: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --brodtekst:  "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tallfont:   ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --brei:       1100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--brodtekst);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--bakgrunn);
}

a { color: var(--mjf-mork); text-underline-offset: 3px; }
a:hover { color: var(--mjf-hover); }

h1, h2, h3 {
  font-family: var(--overskrift);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
}
h1 { font-size: 2.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.85rem; margin: 2.25rem 0 .85rem; color: var(--mjf-mork); }
.kort > h2:first-child { margin-top: 0; font-size: 1.35rem; }

/* --- Topplinje ----------------------------------------------------------- */

.topp { background: var(--mjf); }

.topp-inn {
  max-width: var(--brei);
  margin: 0 auto;
  padding: .8rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

/* ⚠️ Samme klasser og samme mål som portalen (stil.css:145). Strektegningen
   farges hvit med filter framfor å ha en egen hvit SVG — én fil å vedlikeholde
   i stedet for to som kan komme i utakt. */
.logo {
  text-decoration: none;
  font-family: var(--overskrift);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.logo-merke { line-height: 0; }
.logo-merke img {
  display: block;
  width: 30px; height: 30px;
  filter: brightness(0) invert(1);
}
.logo-rest { color: #fff; font-weight: 400; margin-left: .1rem; }

.topp-hoyre { display: flex; align-items: center; gap: 1rem; font-size: .92rem; }
.topp-hoyre a, .topp-hoyre span { color: #fff; }
.topp-hoyre a { text-decoration: none; opacity: .85; }
.topp-hoyre a:hover { opacity: 1; text-decoration: underline; }
.topp-hoyre form { margin: 0; }
.topp-hoyre button {
  font: inherit; background: none; border: 0; padding: 0;
  color: #fff; opacity: .85; cursor: pointer; text-decoration: none;
}
.topp-hoyre button:hover { opacity: 1; text-decoration: underline; }

/* --- Innhold ------------------------------------------------------------- */

.side { max-width: var(--brei); margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
.side--smal { max-width: 30rem; }

.kort {
  background: var(--flate);
  border: 1px solid var(--ramme);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.ingress { color: var(--dempet); margin: 0 0 1.5rem; }
.hjelp   { color: var(--dempet); font-size: .9rem; line-height: 1.55; }

/* --- Knapper ------------------------------------------------------------- */

.knapp {
  display: inline-block;
  font: inherit;
  font-size: .95rem;
  padding: .45rem 1rem;
  border: 1px solid var(--mjf);
  background: var(--flate);
  color: var(--mjf-mork);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
.knapp:hover { background: var(--mjf-100); }

.knapp.primar { background: var(--mjf); border-color: var(--mjf); color: #fff; }
.knapp.primar:hover { background: var(--mjf-mork); border-color: var(--mjf-mork); }

.knapp.liten { font-size: .85rem; padding: .3rem .7rem; }
.knapp.bred  { display: block; width: 100%; text-align: center; }
.knapp.fare  { border-color: var(--feil-kant); color: var(--feil-kant); }
.knapp.fare:hover { background: var(--feil-bg); }

/* Vipps-knappen skal se ut som en Vipps-knapp og ikke som resten av siden —
   det er gjenkjennelsen som gjør at folk tør å trykke. Samme oransje som
   portalen og auksjonen bruker. */
.knapp.vipps {
  background: #ff5b24; border-color: #ff5b24; color: #fff; font-weight: 600;
}
.knapp.vipps:hover { background: #e84d19; border-color: #e84d19; }

/* --- Skjema -------------------------------------------------------------- */

.felt { margin-bottom: 1rem; }
.felt label {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem;
}
.felt input {
  width: 100%;
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
}
.felt input:focus,
.felt select:focus { outline: 2px solid var(--mjf); outline-offset: -1px; }

/* Nedtrekkslister i et vanlig skjema. `.filterrutenett select` dekket bare
   registerets filtre, og et skjemafelt som ikke ser ut som naboene sine ser
   ut som en feil. */
.felt select {
  width: 100%;
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
}
.felt input[readonly] { background: var(--bakgrunn, #f4f4f4); color: var(--dempet); }
.felt .hjelp { display: block; margin-top: .25rem; }

/* Én linje: etikett, nedtrekk, knapp. Til små GET-skjemaer som bare velger
   hva sida skal handle om. */
.linjeskjema {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.25rem;
}
.linjeskjema label { font-weight: 600; font-size: .92rem; }
.linjeskjema select {
  font: inherit;
  padding: .4rem .55rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
  border-radius: 0;
  max-width: 100%;
}

.eller {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0; color: var(--dempet); font-size: .9rem;
}
.eller::before, .eller::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--ramme);
}

/* --- Meldinger ----------------------------------------------------------- */

.melding {
  padding: .7rem .9rem;
  border-left: 4px solid var(--ramme);
  background: var(--flate);
  margin: 0 0 1.25rem;
}
.melding.ok   { border-color: var(--ok-kant);   background: var(--ok-bg); }
.melding.feil { border-color: var(--feil-kant); background: var(--feil-bg); }

/* --- Tabell -------------------------------------------------------------- */

.tabell { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabell td, .tabell th {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--ramme-svak);
  text-align: left;
  vertical-align: top;
}
.tabell th { font-weight: 600; font-size: .85rem; color: var(--dempet); }
.tabell .tall { font-family: var(--tallfont); font-size: .88rem; }
.tabell .dempet { color: var(--dempet); }
.tabell .ja  { color: var(--ok-kant); }
.tabell .nei { color: var(--feil-kant); font-weight: 600; }

/* --- Forsidegalleri ------------------------------------------------------ */

.galleri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.5rem;
}
/* ⚠️ Kortet er en beholder, ikke en lenke. Det bærer to: forsida fører til
   lesinga, «Om utgaven» til detaljsida. */
.blad { display: block; }
.blad__les { display: block; text-decoration: none; color: inherit; }
.blad img {
  width: 100%; display: block; background: var(--flate);
  border: 1px solid var(--ramme);
  transition: box-shadow .14s, transform .14s;

  /* ⚠️ Plassen settes av før bildet er lastet. Uten dette er forsida 0 px
     høy til den kommer, og hele galleriet hopper nedover etter hvert som
     129 bilder faller på plass — verst på en treg linje, som er nettopp der
     det merkes mest. A4-forholdet stemmer for de aller fleste, og gjelder
     uansett bare til bildet selv overtar. */
  aspect-ratio: 210 / 297;
  object-fit: cover;
}
/* Bare forsidelenka løfter bildet. Gjorde hele kortet det, pekte animasjonen
   på lesinga også når musa sto over «Om utgaven». */
.blad__les:hover img { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transform: translateY(-2px); }
.blad b { display: block; font-size: .95rem; }
.blad span { display: block; font-size: .85rem; color: var(--dempet); }

.blad__om {
  display: inline-block;
  margin-top: .4rem;
  font-size: .85rem;
}

@media (max-width: 640px) {
  h1 { font-size: 2.1rem; }
  .side { padding: 1.25rem 1rem 3rem; }
}

/* --- Nøkkeltall og søyler ------------------------------------------------ */

.noekkeltall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px;
  background: var(--ramme-svak);
  border: 1px solid var(--ramme-svak);
  margin: 0 0 1.5rem;
}
.noekkeltall__ett { background: var(--flate); padding: .9rem 1rem; }
.noekkeltall__ett b {
  display: block;
  font-family: var(--overskrift);
  font-size: 2rem; line-height: 1.1; font-weight: 600;
  color: var(--mjf);
}
.noekkeltall__ett span { font-size: .82rem; color: var(--dempet); }

/* ⚠️ <meter> og ikke en div med style="width:…". CSP-en har style-src 'self',
   så inline stilattributter blokkeres — stille. Søylene ville vært usynlige
   uten en eneste feilmelding. `value` er et vanlig attributt. */
.soylefelt { width: 40%; }
.soyle {
  display: block; width: 100%; height: .7rem;
  -webkit-appearance: none; appearance: none;
  background: var(--ramme-svak); border: 0;
}
.soyle::-webkit-meter-bar { background: var(--ramme-svak); border: 0; height: .7rem; }
.soyle::-webkit-meter-optimum-value { background: var(--mjf); }
.soyle::-moz-meter-bar { background: var(--mjf); }

pre {
  background: var(--bakgrunn);
  border: 1px solid var(--ramme-svak);
  padding: .7rem .8rem;
  overflow-x: auto;
  font-family: var(--tallfont);
  font-size: .82rem;
  line-height: 1.5;
}
code {
  font-family: var(--tallfont);
  font-size: .88em;
  background: var(--bakgrunn);
  padding: .1em .3em;
}

/* --- Bunntekst ----------------------------------------------------------- */

.bunn { background: var(--mjf); color: #dbeaf2; margin-top: 3rem; font-size: .9rem; }

.bunn-inn {
  max-width: var(--brei);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* Én spalte for gjesten, to for den innloggede. Uten maksbredde strekker den
   ene spalta seg over hele 1100 px, og adressen blir én lang linje. */
.bunn-inn > div { max-width: 46ch; }

.bunn a { color: #dbeaf2; }
.bunn a:hover { color: #fff; }
.bunn strong { color: #fff; }

.bunn-copyright { background: var(--mjf-mork); color: #a8cfe0; font-size: .78rem; }
.bunn-copyright div { max-width: var(--brei); margin: 0 auto; padding: .75rem 1.25rem; }

/* --- Artikkelregister ---------------------------------------------------- */

.sok { margin-bottom: 1.5rem; }
.sok .felt:last-of-type { margin-bottom: 0; }

.filtre { margin: .25rem 0 1rem; }
.filtre summary {
  cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--mjf); padding: .35rem 0;
}
.filtre summary:hover { color: var(--mjf-hover); }

.filterrutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .75rem 1rem;
  padding: .75rem 0 .25rem;
}
.filterrutenett .felt { margin-bottom: 0; }
.filterrutenett select {
  width: 100%;
  padding: .4rem .5rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  font: inherit;
  font-size: .9rem;
  border-radius: 0;
}
.filterrutenett select:focus { outline: 2px solid var(--mjf); outline-offset: -1px; }

.merkelapper { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.merkelapp {
  font: inherit; font-size: .85rem;
  background: var(--mjf-100);
  border: 1px solid var(--mjf-200);
  color: var(--mjf-mork);
  padding: .2rem .55rem;
  cursor: pointer;
}
/* Krysset står som tegn og ikke som bilde — ett tegn mindre å laste. */
.merkelapp::after { content: " ×"; font-weight: 600; }
.merkelapp:hover { background: var(--mjf-200); }
.merkelapp--tom { background: none; border-color: var(--ramme); color: var(--dempet); }

/* Tittelen er en knapp, ikke en lenke: den åpner en modal og går ikke noe
   sted. En <a href="#"> ville lagt en tom oppføring i historikken. */
.tittel {
  font: inherit; font-weight: 600; text-align: left;
  background: none; border: 0; padding: 0;
  color: var(--mjf); cursor: pointer;
}
.tittel:hover { text-decoration: underline; }
.tittel .del { font-weight: 400; color: var(--dempet); }

/* ⚠️ Faste kolonnebredder. Uten dem hopper tabellen når «Vis flere» legger
   til rader med lengre sammendrag, og man mister stedet man leste. */
.register { table-layout: fixed; }
.register .kol-utgave { width: 6rem; }
.register .kol-tittel { width: 14rem; }
.register .kol-av { width: 10rem; }

/* ⚠️ HELE SAMMENDRAGET, ikke avkortet. Første versjon klippet det til to
   linjer for å holde radhøyden nede — men da må man åpne hver rad for å se om
   den er den man leter etter, og det er nettopp det sammendraget skal spare
   en for. Dagens register viser alt, og det er bedre. */
.register .kol-sammendrag { font-size: .88rem; line-height: 1.5; }

/* Rada under pekeren markeres. Med fire kolonner og lange sammendrag er det
   lett å lese på tvers av feil rad. */
.register tbody tr:hover { background: var(--mjf-100); }

.midtstilt { text-align: center; margin: 1.5rem 0; }

/* --- Modal --------------------------------------------------------------- */

body.modal-apen { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 50; }
.modal[hidden] { display: none; }

.modal__dekke { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }

.modal__boks {
  position: relative;
  max-width: 60rem;
  margin: 2rem auto;
  max-height: calc(100vh - 4rem);
  background: var(--flate);
  border: 1px solid var(--ramme);
  display: flex;
  flex-direction: column;
}

.modal__hode {
  background: var(--mjf); color: #fff;
  padding: .9rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  flex: none;
}
.modal__hode h2 {
  margin: 0; font-size: 1.35rem; color: #fff;
  flex: 1 1 auto;
}
.modal__lukk {
  font: inherit; font-size: 1.6rem; line-height: 1;
  background: none; border: 0; color: #fff; cursor: pointer;
  padding: 0 .25rem;
}
.modal__lukk:hover { color: var(--mjf-200); }

.modal__kropp {
  display: flex; gap: 1.5rem; padding: 1.25rem;
  overflow-y: auto;
  align-items: flex-start;
}
.modal__felter { flex: 1 1 auto; min-width: 0; }
.modal__felter td:first-child {
  width: 9rem; font-weight: 600; color: var(--mjf); font-size: .9rem;
}

.modal__bilde { flex: 0 0 17rem; text-align: center; }
.modal__bilde img {
  width: 100%; display: block;
  border: 1px solid var(--ramme);
  background: var(--flate);
}
.modal__bla {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: .6rem; font-size: .85rem; color: var(--dempet);
}
.modal__bla .knapp[disabled] { opacity: .35; cursor: default; }

.modal__sammendrag {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--ramme-svak);
  font-size: .95rem; line-height: 1.6;
  overflow-y: auto;
  flex: none;
}
.modal__sammendrag:empty { display: none; }

@media (max-width: 720px) {
  .modal__boks { margin: 0; max-height: 100vh; height: 100vh; }
  .modal__kropp { flex-direction: column-reverse; }
  .modal__bilde { flex: none; width: 100%; max-width: 17rem; margin: 0 auto; }
  .register .kol-av, .register .kol-sammendrag { display: none; }
  .register .kol-utgave { width: 5rem; }
}

/* --- Meny i topplinja ---------------------------------------------------- */

.topp-meny { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }
.topp-meny a {
  color: #fff; text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  font-size: .95rem;
}
.topp-meny a:hover { border-bottom-color: #fff; }

/* --- Forsidegalleri ------------------------------------------------------ */

.aarsrad {
  display: flex; flex-wrap: wrap; gap: .3rem .5rem;
  margin: 0 0 2rem;
  font-family: var(--tallfont); font-size: .85rem;
}
.aarsrad a {
  padding: .2rem .5rem;
  border: 1px solid var(--ramme-svak);
  background: var(--flate);
  text-decoration: none;
}
.aarsrad a:hover { background: var(--mjf-100); border-color: var(--mjf-200); }

/* --- Filterrad over galleriet --------------------------------------------
   To lenker, ikke en nedtrekksliste: begge utvalgene og størrelsen på dem er
   synlige uten et klikk først. Det aktive valget bærer `aria-current="page"`,
   så en skjermleser får det samme som øyet. */
.valgrad {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.5rem;
}
.valgrad a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .4rem .85rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: inherit; text-decoration: none;
  font-size: .9rem;
}
.valgrad a b {
  font-family: var(--tallfont); font-weight: 400; font-size: .8rem;
  color: var(--dempet);
}
.valgrad a:hover { background: var(--mjf-100); border-color: var(--mjf-200); }

.valgrad a[aria-current] {
  background: var(--mjf); border-color: var(--mjf); color: #fff;
}
.valgrad a[aria-current] b { color: rgba(255, 255, 255, .8); }

/* Gratisvalget bærer den samme grønne som båndet under forsidene, så filteret
   og merkinga er tydelig samme sak. */
.valgrad a.valgrad__gratis[aria-current] { background: #2e7d32; border-color: #2e7d32; }
.valgrad a.valgrad__gratis[aria-current] b { color: #cde9cf; }

/* Årstallet er et hoppmål. Uten avstand fra toppen havner overskrifta
   akkurat i kanten når man klikker seg hit. */
.side h2[id] { scroll-margin-top: 1rem; }

.aargang {
  font-family: var(--brodtekst);
  font-size: .85rem; font-weight: 400;
  color: var(--dempet);
  margin-left: .75rem;
}

/* Etiketten under forsida. ⚠️ Samme grønne som dagens galleri (#2e7d32), så
   merkinga er den medlemmene allerede kjenner igjen — og den ligger UNDER
   bildet, ikke oppå, så den ikke dekker mastheaden. */
.blad__merke { padding: .5rem 0 0; }
.blad__merke em {
  display: block;
  font-style: normal; font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #2e7d32;
}
.blad__merke--gratis {
  background: #2e7d32;
  padding: .4rem .6rem .5rem;
}
.blad__merke--gratis em   { color: #a5d6a7; }
.blad__merke--gratis b    { color: #fff; }
.blad__merke--gratis span { color: #cde9cf; }

/* --- Forsida: siste nummer ----------------------------------------------- */

.siste {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin: 0 0 2rem;
}
.siste__forside img {
  width: 100%; display: block;
  border: 1px solid var(--ramme);
  background: var(--flate);
  aspect-ratio: 210 / 297;
  object-fit: cover;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}
.siste__stikk {
  margin: 0 0 .25rem;
  font-family: var(--overskrift);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .85rem; font-weight: 600;
  color: var(--mjf);
}
.siste__tekst h1 { margin-top: 0; }
.gratis { color: #2e7d32; }

/* ⚠️ Punktene er kuttet etter et tegnbudsjett (blad_punkter i index.php), ikke
   etter antall, nettopp for at lista skal bli omtrent like høy som forsida ved
   siden av. Tallet der er det som styrer balansen — ikke noe her. */
.siste__punkter {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
}
.siste__punkter li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .7rem;
  line-height: 1.55;
  max-width: 62ch;
}
.siste__punkter li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .62em;
  width: .45rem; height: .45rem;
  background: var(--mjf);
}
.siste__punkter strong { color: var(--tekst); }

/* --- Innholdsfortegnelse ------------------------------------------------- */

.innhold { padding-bottom: .5rem; }

.innholdsliste { list-style: none; margin: 0; padding: 0; }
.innholdsliste li { border-bottom: 1px solid var(--ramme-svak); }
.innholdsliste li:last-child { border-bottom: 0; }

.innholdsliste a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 14rem);
  gap: 1rem;
  align-items: baseline;
  padding: .6rem .25rem;
  text-decoration: none;
  color: inherit;
}
.innholdsliste a:hover { background: var(--mjf-100); }

.innholdsliste__side {
  font-family: var(--tallfont); font-size: .85rem;
  color: var(--dempet); text-align: right;
}
.innholdsliste__tittel { font-weight: 600; color: var(--mjf); }
.innholdsliste__tittel em { font-weight: 400; font-style: normal; color: var(--dempet); }
.innholdsliste__av { font-size: .88rem; color: var(--dempet); }

/* --- Veier videre -------------------------------------------------------- */

.veier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}
.vei {
  display: block;
  padding: 1.1rem 1.25rem;
  background: var(--flate);
  border: 1px solid var(--ramme-svak);
  text-decoration: none; color: inherit;
}
.vei:hover { border-color: var(--mjf-200); background: var(--mjf-100); }
.vei b { display: block; font-size: 1.05rem; color: var(--mjf); margin-bottom: .25rem; }
.vei span { font-size: .9rem; color: var(--dempet); }

@media (max-width: 720px) {
  .siste { grid-template-columns: 1fr; gap: 1.25rem; }
  .siste__forside { max-width: 14rem; }
  .innholdsliste a { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; }
  .innholdsliste__av { grid-column: 2; font-size: .85rem; }
}

/* --- Utgaveoversikt ------------------------------------------------------ */

.utgaver { table-layout: fixed; }
.utgaver .kol-utgave { width: 7rem; }
.utgaver .kol-av { width: 11rem; }

.utgaver td.tall em,
.utgaver td.tall .dempet {
  display: block;
  font-style: normal; font-weight: 700;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
}
.utgaver td.tall .dempet { font-weight: 400; text-transform: none; letter-spacing: 0; }
.utgaver tbody tr:hover { background: var(--mjf-100); }

/* Innholdslista i tabellen. Bare titlene — detaljene bor på utgave.php. */
.om__titler { list-style: none; margin: 0; padding: 0; }
.om__titler li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .2rem;
  font-size: .88rem; line-height: 1.45;
}
.om__titler li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .3rem; height: .3rem;
  background: var(--mjf);
}
.om__flere::before { display: none; }
.om__flere { font-style: italic; color: var(--dempet); }

@media (max-width: 720px) {
  .utgaver .kol-av { display: none; }
  .utgaver .kol-utgave { width: 5.5rem; }
}

/* --- Lesetekst (hjelp, personvern) --------------------------------------- */

/* Målt tommelfingerregel: en linje blir tung å lese over ~75 tegn. Tabellene
   får bruke hele bredden — der er det kolonner, ikke løpende tekst. */
.lesetekst > p,
.lesetekst > ul,
.lesetekst > ol { max-width: 72ch; }

.lesetekst ul, .lesetekst ol { padding-left: 1.25rem; }
.lesetekst li { margin-bottom: .5rem; line-height: 1.6; }
.lesetekst h3 { font-size: 1.1rem; margin: 1.75rem 0 .4rem; }
.lesetekst .tabell { margin-bottom: 1.5rem; }
.lesetekst .tabell td:first-child { width: 14rem; font-weight: 600; }

kbd {
  font-family: var(--tallfont); font-size: .85em;
  background: var(--bakgrunn);
  border: 1px solid var(--ramme);
  border-bottom-width: 2px;
  padding: .05em .4em;
}

/* --- Forside i utgaveoversikten ------------------------------------------ */

.utgaver .kol-forside { width: 11.5rem; }
.utgaver .kol-forside img {
  width: 100%; display: block;
  border: 1px solid var(--ramme);
  background: var(--flate);
  /* Plassen settes av før bildet kommer, ellers hopper tabellen mens
     129 forsider faller på plass. */
  aspect-ratio: 210 / 297;
  object-fit: cover;
}

/* Skjult for øyet, men lest av skjermlesere. Kolonnen har ingen synlig
   overskrift — bildene sier hva de er — men en tom <th> er en tabell uten
   kolonneoverskrift, og det er noe annet. */
.skjul {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .utgaver .kol-forside { width: 5rem; }
}

/* --- Brødsmule ----------------------------------------------------------- */

.brodsmule { font-size: .9rem; margin: 0 0 1rem; }

/* Innholdslinja uten lenke: samme rutenett, men ikke klikkbar. Brukes når
   sidebildene ennå ikke er rendret. */
.innholdsliste__ulenket {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 14rem);
  gap: 1rem;
  align-items: baseline;
  padding: .6rem .25rem;
  color: var(--dempet);
}