/* Dagen i dag – et kalenderblad på skjerm.
   Kjølig papir, ett tallmotiv som bærer siden, rødt kun når dagen faktisk er rød. */

:root {
  --ark: #e9ebe6;
  --ark-lys: #f6f7f3;
  --blekk: #16211f;
  --blekk-svak: #5d6b65;
  --strek: #c9cec6;
  --rod: #a8281f;
  --aksent: var(--blekk);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;
}

body.roddag { --aksent: var(--rod); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ark);
  color: var(--blekk);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

a { color: inherit; text-decoration-color: var(--strek); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--aksent); }
a:focus-visible, .hopp:focus {
  outline: 2px solid var(--aksent);
  outline-offset: 3px;
}

.hopp {
  position: absolute;
  left: -9999px;
}
.hopp:focus {
  left: 1rem; top: 1rem;
  background: var(--ark-lys);
  padding: .5rem .75rem;
  z-index: 10;
}

/* ---------- Topp ---------- */

.topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 1rem;
  border-bottom: 1px solid var(--strek);
}

.topp h1 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 20;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.bla { display: flex; gap: 1.25rem; font-size: .92rem; }
.bla a { text-decoration: none; color: var(--blekk-svak); }
.bla a:hover { color: var(--blekk); }
.bla .na { color: var(--blekk); font-weight: 500; }

/* ---------- Oppsett ---------- */

main {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

/* ---------- Kalenderbladet ---------- */

.blad {
  position: sticky;
  top: 1.5rem;
  padding: 2rem 0 0;
}

.dagtall { line-height: 1; margin-bottom: 1.75rem; }

.dagtall .tall {
  display: block;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144;
  font-weight: 900;
  font-size: clamp(6rem, 16vw, 9.5rem);
  letter-spacing: -0.05em;
  color: var(--aksent);
  margin-left: -0.06em;
}

.dagtall .ukedag {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 30;
  font-size: 1.65rem;
  font-weight: 400;
  margin: .35rem 0 0;
}

.dagtall .maned { margin: .1rem 0 0; color: var(--blekk-svak); }

.fakta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem 1rem;
  margin: 0 0 1.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--strek);
  border-bottom: 1px solid var(--strek);
  font-size: .92rem;
}
.fakta dt { color: var(--blekk-svak); }
.fakta dd { margin: 0; }

.blad h2 {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 .25rem;
  color: var(--blekk-svak);
}

.blad > div { margin-bottom: 1.5rem; }
.blad p { margin: 0 0 .3rem; }

.rodmerke .hoytid {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 30;
  font-size: 1.2rem;
  color: var(--rod);
}
.rodmerke .hverdag { color: var(--blekk-svak); }
.rodmerke .neste { font-size: .9rem; color: var(--blekk-svak); }

.merkedager ul { margin: 0; padding-left: 1.1rem; }

.vaer .temp strong {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 30;
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: .25rem;
}
.vaer .spenn, .vaer .sol { font-size: .92rem; color: var(--blekk-svak); }

.blad .ingress {
  font-size: .88rem;
  color: var(--blekk-svak);
  border-top: 1px solid var(--strek);
  padding-top: 1rem;
}

/* ---------- Innholdsstrømmen ---------- */

.strom { padding-top: 2rem; min-width: 0; }

.seksjon { padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--strek); }
.seksjon:last-child { border-bottom: 0; }

.seksjon > h2 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
}

/* Nyheter */

.nyhetsliste { list-style: none; margin: 0; padding: 0; }
.nyhetsliste li { padding: .6rem 0; border-bottom: 1px dotted var(--strek); }
.nyhetsliste li:last-child { border-bottom: 0; }
.nyhetsliste a { font-weight: 500; text-decoration: none; }
.nyhetsliste a:hover { text-decoration: underline; }
.nyhetsliste .meta { margin: .15rem 0 0; font-size: .85rem; color: var(--blekk-svak); display: flex; gap: .6rem; }
.avis { font-weight: 500; color: var(--blekk); }

/* Tidslinje: årstall er ekte struktur, ikke pynt */

.tidslinje { list-style: none; margin: 0; padding: 0; }
.tidslinje li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dotted var(--strek);
}
.tidslinje li:last-child { border-bottom: 0; }
.tidslinje .ar {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 20;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--aksent);
  font-variant-numeric: tabular-nums;
}
.tidslinje .mer { font-size: .78rem; color: var(--blekk-svak); white-space: nowrap; }

/* Personer */

.todelt { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.todelt > div > h2 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 30;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 .75rem;
}
.personliste { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.personliste li { padding: .3rem 0; }
.personliste .ar { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .35rem; }

/* Leksikon */

.oppslag { display: flex; gap: 1.5rem; align-items: flex-start; }
.oppslag img { width: 9rem; height: 9rem; object-fit: cover; flex: none; }
.oppslag h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 30;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 .4rem;
}
.oppslag p { margin: 0 0 .5rem; max-width: 60ch; }

/* Valuta */

.kurser { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kurser caption { text-align: left; color: var(--blekk-svak); font-size: .9rem; padding-bottom: .5rem; }
.kurser th { text-align: left; font-weight: 500; padding: .3rem 2.5rem .3rem 0; }
.kurser td { padding: .3rem 0; }

/* Hjelpetekst og feil */

.kildelinje { font-size: .82rem; color: var(--blekk-svak); margin: .9rem 0 0; }
.tomt { color: var(--blekk-svak); }
.kildefeil {
  background: var(--ark-lys);
  border-left: 3px solid var(--rod);
  padding: .75rem 1rem;
  margin: 0;
  font-size: .92rem;
}

.bunn {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  border-top: 1px solid var(--strek);
  color: var(--blekk-svak);
  font-size: .88rem;
}
.bunn p { margin: 0 0 .4rem; max-width: 65ch; }

/* ---------- Smale skjermer ---------- */

@media (max-width: 62rem) {
  main { grid-template-columns: 1fr; gap: 1.5rem; }
  .blad { position: static; padding-top: 1.5rem; }
  .blad .ingress { display: none; }
  .strom { padding-top: 0; border-top: 1px solid var(--strek); }
  .todelt { grid-template-columns: 1fr; gap: 1.75rem; }
  .oppslag { flex-direction: column; }
  .tidslinje li { grid-template-columns: 3.75rem 1fr; gap: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}