@charset "utf-8";

/* ============================================================
   Studentmållagsbibelen — bibel.smio.no

   Same palett og skrift som smio.no: dette er same laget, og
   Bibel-sida der lenkjer hit. Fargane er henta ut av lysinga frå
   1897 (jarngalleblekk mot grågrønt papir).

   Det som er nytt her er versemarginen. 1921-utgåva set versetalet
   i margen, ikkje i teksten, og det er det oppsettet som gjer at ein
   kan lesa eit kapittel som prosa i staden for som ei nummerert liste.
   ============================================================ */

/* ---------- skrift ---------- */

@font-face {
  font-family: "Alegreya";
  src: url("../skrift/alegreya.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../skrift/alegreya-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../skrift/alegreya-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../skrift/alegreya-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../skrift/alegreya-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- token ---------- */

:root {
  --blekk: #221c29;
  --blekk-mjuk: #3d3447;
  --blekk-dus: #5c5468;
  --papir: #f4f3ed;
  --papir-djup: #e9e8dd;
  --lin: #c7cab6;
  --gull: #b8862f;
  --gull-lys: #d9ae58;

  --skrift: "Alegreya", "Charter", "Bitstream Charter", Georgia, serif;
  --nyttig: "Alegreya Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --mal: 68rem;
  --mal-smal: 40rem;
  --luft: clamp(3rem, 7vw, 5.5rem);
}

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

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

body {
  margin: 0;
  background: var(--papir);
  color: var(--blekk);
  font-family: var(--skrift);
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  line-height: 1.62;
  font-variant-numeric: oldstyle-num;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: rgb(184 134 47 / 0.65);
}
a:hover {
  text-decoration-color: var(--gull);
}

.mal {
  width: min(100% - 2.5rem, var(--mal));
  margin-inline: auto;
}
.mal-smal {
  width: min(100% - 2.5rem, var(--mal-smal));
  margin-inline: auto;
}

/* ---------- topp ---------- */

.topp {
  background: var(--blekk);
  color: var(--papir);
}
.topp__inni {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 2rem;
  padding: 1.1rem 0;
}
.topp__namn {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gull-lys);
  margin-right: auto;
  white-space: nowrap;
}
.topp__namn:hover {
  color: var(--papir);
}
.meny {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--nyttig);
  font-size: 0.86rem;
}
.meny a {
  text-decoration: none;
  color: rgb(244 243 237 / 0.78);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.meny a:hover {
  color: var(--papir);
  border-bottom-color: var(--gull);
}

/* ---------- framside ---------- */

.sidetopp {
  background: var(--blekk);
  color: var(--papir);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid rgb(184 134 47 / 0.35);
}
.sidetopp h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 20ch;
}
.sidetopp__ingress {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.45;
  max-width: 42ch;
  margin: 1.3rem 0 0;
  color: rgb(244 243 237 / 0.8);
}

.brodtekst {
  padding: var(--luft) 0 calc(var(--luft) / 1.6);
}
.brodtekst p {
  margin: 0 0 1.35em;
}
.brodtekst > .mal-smal > p:first-child {
  font-size: 1.18em;
  line-height: 1.55;
  color: var(--blekk-mjuk);
}
.brodtekst h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 2.6rem 0 0.8rem;
}
.brodtekst hr {
  border: 0;
  border-top: 1px solid var(--lin);
  margin: 2.6rem 0;
}

/* ---------- boklista ---------- */

.boklista {
  padding: 0 0 var(--luft);
}
.boklista h2 {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blekk-dus);
  margin: 2.8rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--lin);
}
.boklista ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 13rem;
  column-gap: 2.5rem;
}
.boklista li {
  break-inside: avoid;
  margin-bottom: 0.28rem;
  font-family: var(--nyttig);
  font-size: 0.95rem;
}
.boklista a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.boklista a:hover {
  border-bottom-color: var(--gull);
}
.boklista [aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--gull);
}

/* ---------- sjølve teksten ---------- */

.sti {
  font-family: var(--nyttig);
  font-size: 0.82rem;
  color: var(--blekk-dus);
  margin: 2.5rem 0 0;
}
.sti a {
  text-decoration: none;
  border-bottom: 1px solid rgb(184 134 47 / 0.5);
}

main > .mal-smal > h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0.4rem 0 0;
}

.bibelen {
  padding: 1.5rem 0 0;
}

/* Kapitteloverskrifta er ikkje ei overskrift i teksten — ho er eit
   skiljemerke. Difor liten kapitél i margen, ikkje ein tittel. */
.bibelen h2 {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gull);
  margin: 2.8rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lin);
}
.bibelen h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 1rem;
}

.bibelen h3 {
  font-family: var(--nyttig);
  font-weight: 500;
  font-size: 1rem;
  color: var(--blekk-mjuk);
  margin: 1.8rem 0 0.6rem;
}

/* Versa: talet i margen når det er plass til han, elles hevaskrift i
   teksten. Den gamle sida la det på med `position: absolute` og `clip`,
   som fall saman i det sekundet nokon opna henne på ein telefon. */
.bibelen p {
  margin: 0 0 0.7em;
  position: relative;
}
.bibelen em {
  font-style: normal;
  font-family: var(--nyttig);
  font-size: 0.72rem;
  font-variant-numeric: lining-nums;
  color: var(--blekk-dus);
  vertical-align: 0.4em;
  margin-right: 0.35em;
  user-select: none;
}
@media (min-width: 46rem) {
  .bibelen em {
    position: absolute;
    left: -3.2rem;
    width: 2.6rem;
    text-align: right;
    vertical-align: baseline;
    margin-right: 0;
    line-height: inherit;
  }
}

.bibelen .forklaring {
  border-bottom: 1px dotted var(--blekk-dus);
  cursor: help;
  text-decoration: none;
  font-variant: inherit;
}

/* ---------- bla ---------- */

.blad {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 3.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lin);
  font-family: var(--nyttig);
  font-size: 0.95rem;
}
.blad a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  max-width: 45%;
}
.blad a:hover {
  border-bottom-color: var(--gull);
}
.blad__neste {
  margin-left: auto;
  text-align: right;
}
.blad span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blekk-dus);
  margin-bottom: 0.2rem;
}

/* ---------- botn ---------- */

.botn {
  background: var(--blekk);
  color: rgb(244 243 237 / 0.7);
  border-top: 1px solid rgb(184 134 47 / 0.3);
  padding: 3rem 0 2.5rem;
  margin-top: var(--luft);
  font-family: var(--nyttig);
  font-size: 0.88rem;
}
.botn p {
  margin: 0 0 0.9rem;
  max-width: 60ch;
}
.botn__fin {
  color: rgb(244 243 237 / 0.5);
  font-size: 0.8rem;
}
.botn a {
  text-decoration: none;
  border-bottom: 1px solid rgb(184 134 47 / 0.5);
}
.botn a:hover {
  color: var(--papir);
  border-bottom-color: var(--gull);
}