/* ------------------------------------------------------------------
   infino.no — utkast E, «Uten eksempler»
   Mørkt rom, ett lys. Én skrift, få størrelser, mye stillhet.
   Ingen eksterne kall. Ingen rammeverk.
   ------------------------------------------------------------------ */

/* 1. Skrift — Schibsted Grotesk, SIL OFL 1.1, selvhostet -------------- */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonter/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/schibsted-grotesk-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonter/schibsted-grotesk-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Verdier ---------------------------------------------------------
   Kontrasten er regnet med WCAG-formelen, ikke gjettet. Tallene står i
   NOTAT.md §3. Ingen signalfarge: det eneste «lyset» på siden er lys. */

:root {
  --bunn: #0f100e;
  --flate: #161714;
  --strek: #2e2d27;
  --strek-2: #45433c;
  --merke: #706b5e; /* utente strek, lenkestrek, knappekant — 3,6:1 / 3,4:1 */
  --tekst: #efece4; /* 16,2:1 */
  --tekst-2: #b9b4a9; /* 9,2:1 */
  --tekst-3: #9a9589; /* 6,4:1 */
  --lys: #fffcf2; /* 18,6:1 */

  --kant: 1.375rem;
  --bredde: 72rem;
  --mal: 34rem;
}

/* 3. Grunnlag --------------------------------------------------------- */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bunn);
  color: var(--tekst-2);
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

a {
  color: var(--tekst);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--merke);
}

a:hover,
a:focus-visible {
  color: var(--lys);
  text-decoration-color: var(--lys);
}

:focus-visible {
  outline: 2px solid var(--lys);
  outline-offset: 3px;
  border-radius: 2px;
}

strong,
b {
  font-weight: 500;
  color: var(--tekst);
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--lys);
  color: var(--bunn);
}

/* 4. Rammer ----------------------------------------------------------- */

.beholder {
  width: 100%;
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: var(--kant);
}

.hopp {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
}

/* Bare for skjermleser — brukes på tabelloverskriften i personvernerklæringen. */
.skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hopp:focus {
  left: 0.75rem;
  top: 0.75rem;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--lys);
  color: var(--bunn);
  text-decoration: none;
  font-weight: 500;
}

/* 5. Topp ------------------------------------------------------------- */

.topp {
  border-bottom: 1px solid var(--strek);
}

.topp .beholder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 4.5rem;
  padding-block: 0.5rem;
}

.navn {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tekst);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 0.25rem;
}

.navn:hover,
.navn:focus-visible {
  color: var(--lys);
}

.topp nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.topp nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--tekst-3);
  text-decoration: none;
}

.topp nav a:hover,
.topp nav a:focus-visible,
.topp nav a[aria-current="page"] {
  color: var(--tekst);
}

.topp nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--merke);
}

/* 6. Seksjoner og rytme ----------------------------------------------- */

.bolk {
  border-top: 1px solid var(--strek);
}

.bolk:first-of-type {
  border-top: 0;
}

.bolk > .beholder {
  padding-block: clamp(3.25rem, 8vw, 6rem);
}

/* Todelt rad: liten etikett-overskrift til venstre, tekst til høyre. */
.rad {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 62rem) {
  .rad {
    grid-template-columns: 12rem minmax(0, var(--mal));
    column-gap: 4rem;
    row-gap: 0;
  }
}

.etikett {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-3);
  line-height: 1.5;
  padding-top: 0.35rem;
}

/* 7. Hero ------------------------------------------------------------- */

.hero > .beholder {
  padding-block: clamp(3.5rem, 12vw, 8.5rem) clamp(3rem, 9vw, 6.5rem);
}

.hero h1 {
  font-size: clamp(2.3rem, 10.2vw, 4.1rem);
  line-height: 1.07;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--tekst);
  max-width: 17ch;
  text-wrap: balance;
}

.ingress {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: var(--mal);
  font-size: clamp(1.0625rem, 2.4vw, 1.3rem);
  line-height: 1.58;
  color: var(--tekst);
}

.ingress-2 {
  margin-top: 1.1rem;
  max-width: var(--mal);
  color: var(--tekst-2);
}

.handling {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding: 0 1.4rem;
  border: 1px solid var(--merke);
  color: var(--tekst);
  font-weight: 500;
  text-decoration: none;
}

.handling .pil {
  color: var(--tekst-3);
}

.handling:hover,
.handling:focus-visible {
  border-color: var(--lys);
  color: var(--lys);
}

.handling:hover .pil,
.handling:focus-visible .pil {
  color: var(--lys);
}

/* 8. Feltet — den ene ideen -------------------------------------------
   Mange like streker. Fem av dem er tent. Uten JavaScript står de tent
   fra første bilde; med JavaScript tennes de når feltet kommer i syne. */

.felt-bolk {
  background: var(--flate);
  border-top: 1px solid var(--strek);
}

.felt-bolk > .beholder {
  padding-block: clamp(3.25rem, 8vw, 5.5rem);
}

.tese span {
  display: inline-block;
}

.tese {
  font-size: clamp(1.4rem, 5.4vw, 2rem);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tekst);
  max-width: 22ch;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
}

.felt {
  /* Samme tetthet på alle bredder: ~33 px mellom strekene enten det er
     10 kolonner på 390 px eller 24 på skrivebord. */
  max-width: 50rem;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(0.7rem, 2.4vw, 1.05rem) 0;
  align-items: end;
}

/* 10 og 24 er begge delelige i 120 strek — ingen halv rad på noen bredde. */
@media (min-width: 48rem) {
  .felt {
    grid-template-columns: repeat(24, 1fr);
  }
}

.felt span {
  display: block;
  width: 2px;
  height: clamp(15px, 4.4vw, 22px);
  margin-inline: auto;
  border-radius: 1px;
  background: var(--merke);
}

.felt .gnager {
  background: var(--lys);
  box-shadow:
    0 0 0 1px rgba(255, 252, 242, 0.14),
    0 0 12px 1px rgba(255, 252, 242, 0.26);
}

.felt-tekst {
  margin-top: clamp(1.75rem, 4.5vw, 2.5rem);
  max-width: var(--mal);
  color: var(--tekst-2);
}

/* Med JavaScript: alt er slukket til feltet er lest inn. */
.js .felt .gnager {
  background: var(--merke);
  box-shadow: none;
}

.js .felt.tent .gnager {
  background: var(--lys);
  box-shadow:
    0 0 0 1px rgba(255, 252, 242, 0.14),
    0 0 12px 1px rgba(255, 252, 242, 0.26);
}

@media (prefers-reduced-motion: no-preference) {
  .js .felt .gnager {
    transition:
      background-color 0.55s ease,
      box-shadow 0.55s ease;
  }

  .js .felt .g2 {
    transition-delay: 0.16s;
  }
  .js .felt .g3 {
    transition-delay: 0.32s;
  }
  .js .felt .g4 {
    transition-delay: 0.48s;
  }
  .js .felt .g5 {
    transition-delay: 0.64s;
  }
}

/* 9. Tekstbolker ------------------------------------------------------ */

.tanke {
  max-width: var(--mal);
}

.tanke p + p {
  margin-top: 1.6rem;
}

/* Innledningen i et avsnitt — brukes både i «Slik tenker vi» og i stegene. */
.leder {
  color: var(--tekst);
  font-weight: 500;
}

.videre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 1.9rem;
  font-size: 0.9375rem;
  color: var(--tekst-3);
  text-decoration-color: var(--merke);
}

.videre:hover,
.videre:focus-visible {
  color: var(--lys);
}

/* 10. Folk ------------------------------------------------------------ */

.folk {
  max-width: var(--mal);
  margin: 0;
}

.folk div {
  padding-block: 1.1rem;
  border-top: 1px solid var(--strek);
}

.folk div:first-child {
  border-top: 0;
  padding-top: 0;
}

.folk dt {
  font-weight: 500;
  color: var(--tekst);
}

.folk dd {
  margin: 0.15rem 0 0;
  color: var(--tekst-2);
}

.folk-slutt {
  max-width: var(--mal);
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--strek);
  color: var(--tekst-2);
}

/* 11. Kontakt --------------------------------------------------------- */

.adresse {
  display: inline-block;
  font-size: clamp(1.4rem, 6.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--tekst);
  word-break: break-word;
}

.kontakt-note {
  margin-top: 1rem;
  max-width: var(--mal);
  color: var(--tekst-2);
}

/* 12. Undersider ------------------------------------------------------ */

.side > .beholder {
  padding-block: clamp(3rem, 9vw, 5.5rem) clamp(3.25rem, 8vw, 6rem);
}

.side h1 {
  font-size: clamp(1.9rem, 7.6vw, 3rem);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--tekst);
  max-width: 20ch;
  text-wrap: balance;
}

.side .under {
  margin-top: 1.25rem;
  max-width: var(--mal);
  font-size: clamp(1.0625rem, 2.2vw, 1.18rem);
  color: var(--tekst-2);
}

.steg {
  counter-reset: steg;
  list-style: none;
  padding: 0;
  margin: clamp(2.25rem, 6vw, 3.25rem) 0 0;
  max-width: var(--mal);
}

.steg > li {
  counter-increment: steg;
  position: relative;
  padding-block: 1.6rem;
  border-top: 1px solid var(--strek);
}

.steg > li::before {
  content: counter(steg, decimal-leading-zero);
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--tekst-3);
}

@media (min-width: 62rem) {
  .steg > li {
    padding-left: 4.5rem;
  }

  .steg > li::before {
    position: absolute;
    left: 0;
    top: 1.6rem;
    margin: 0;
    line-height: 1.68;
  }
}

.slutt {
  max-width: var(--mal);
  margin-top: clamp(2.25rem, 6vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--strek-2);
  color: var(--tekst);
  font-size: clamp(1.0625rem, 2.2vw, 1.18rem);
}

.tilbake {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: clamp(2rem, 5vw, 2.75rem);
  font-size: 0.9375rem;
  color: var(--tekst-3);
}

.tilbake:hover,
.tilbake:focus-visible {
  color: var(--lys);
}

/* 13. Personvern — teksten er lov, ikke markedsføring ------------------ */

.jus {
  max-width: 36rem;
}

.jus h2 {
  margin-top: clamp(2.5rem, 6vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--strek);
  font-size: clamp(1.15rem, 3.4vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--tekst);
}

.jus p {
  margin-top: 1.1rem;
}

.jus ul {
  margin-top: 1.1rem;
  padding-left: 1.2rem;
}

.jus li {
  margin-top: 0.5rem;
}

.jus .oppdatert {
  color: var(--tekst-3);
  font-size: 0.9375rem;
}

.tabell {
  margin-top: 1.5rem;
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: 1rem;
}

.tabell th,
.tabell td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-top: 1px solid var(--strek);
  vertical-align: top;
}

.tabell thead th {
  border-top: 0;
  padding-top: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-3);
}

.tabell tbody th {
  font-weight: 500;
  color: var(--tekst);
  padding-right: 1.5rem;
  width: 42%;
}

/* Under 34rem blir to kolonner en klemme. Da blir raden en blokk. */
@media (max-width: 34rem) {
  .tabell,
  .tabell thead,
  .tabell tbody,
  .tabell tr,
  .tabell th,
  .tabell td {
    display: block;
    width: auto;
  }

  .tabell thead {
    display: none;
  }

  .tabell tbody th {
    width: auto;
    padding: 1rem 0 0.2rem;
    padding-right: 0;
    border-top: 1px solid var(--strek);
  }

  .tabell tbody td {
    border-top: 0;
    padding: 0 0 1rem;
  }
}

/* 14. 404 -------------------------------------------------------------- */

.borte > .beholder {
  padding-block: clamp(4rem, 14vw, 9rem) clamp(4rem, 10vw, 7rem);
}

.borte h1 {
  font-size: clamp(2rem, 8.4vw, 3.2rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--tekst);
}

.borte .kode {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-3);
  margin-bottom: 1.1rem;
}

.borte p {
  margin-top: 1.25rem;
  max-width: var(--mal);
}

.borte ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  max-width: var(--mal);
}

.borte li {
  border-top: 1px solid var(--strek);
}

.borte li a {
  display: flex;
  align-items: center;
  min-height: 52px;
  text-decoration: none;
  color: var(--tekst);
}

.borte li a:hover,
.borte li a:focus-visible {
  color: var(--lys);
}

/* 15. Bunn ------------------------------------------------------------- */

.bunn {
  border-top: 1px solid var(--strek);
}

.bunn > .beholder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  padding-block: 1.5rem 2.5rem;
}

.bunn ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bunn a,
.bunn span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--tekst-3);
  text-decoration-color: var(--merke);
}

.bunn a:hover,
.bunn a:focus-visible {
  color: var(--lys);
}

.bunn img {
  opacity: 0.85;
}