/* Reiret, nettsiden. Farger fra appens tokens (src/theme/tokens.ts). Bare lys utgave, som appen. */
@font-face {
  font-family: 'Albert Sans';
  src: url('/skrift/albert-sans-normal.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/skrift/albert-sans-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --papir: #faf4e3;
  --bakgrunn: #f6f2ea;
  --flate: #fffdf8;
  --strek: #e6decf;
  --tekst: #1e2723;
  --dempet: #5b635d;
  --mose: #4a6a47;
  --mose-lys: #e1eada;
  --nype: #fbe3df;
  --lyng: #ece5f0;
  --fjord: #dee8ee;
  --krem: #f8edcc;
  --smal: 38rem;
  --bred: 72rem;
  --kant: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--tekst);
  font: 400 1.125rem/1.6 'Albert Sans', -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01';
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--mose); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mose); outline-offset: 3px; border-radius: 4px; }

.hopp { position: absolute; left: -999px; }
.hopp:focus { left: var(--kant); top: 1rem; background: var(--flate); padding: 0.5rem 1rem; }

/* Topp */
.topplinje {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--bred); margin: 0 auto; padding: 1.25rem var(--kant);
}
.merke { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--tekst); }
.merke img { width: 44px; height: 44px; border-radius: 50%; }
.merke span { font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; }
.topplinje nav { display: flex; gap: 1.5rem; font-size: 1rem; }
.topplinje nav a { color: var(--dempet); text-decoration: none; }
.topplinje nav a:hover { color: var(--tekst); }

/* Hovedbildet: maleriet over hele skjermen, tittelen i himmelen. helt.js gjør fjorden levende
   og dykker inn i redet når du ruller. Uten skriptet, eller med redusert bevegelse, står det stille. */
.forside .topplinje { position: absolute; z-index: 3; top: 0; left: 0; right: 0; }
.helt { position: relative; height: 100vh; height: 100svh; min-height: 34rem; }
.levende .helt { height: 230vh; }
/* Med mus og styreflate (PC) går dykket over 3,5 skjermhøyder, ikke 1,3. Et musehjul tar omtrent
   100 px per hakk, og et sveip på styreflaten mye mer. På 230vh (02.10) og 300vh (04.10) syntes
   Jonathan fortsatt at det gikk for fort på laptopen. helt.js gjør også etterfølgingen roligere her. */
@media (hover: hover) and (pointer: fine) { .levende .helt { height: 450vh; } }
/* Ukene glir opp over maleriet mens det løses opp i papir, så det aldri står en tom skjerm. */
.levende .uker { margin-top: -35vh; }
.scene { position: relative; height: 100%; overflow: hidden; background: var(--papir); }
.levende .scene { position: sticky; top: 0; height: 100vh; min-height: 34rem; }
.scene picture, .maleri, .scene canvas, .dis { position: absolute; inset: 0; width: 100%; height: 100%; }
.maleri { max-width: none; object-fit: cover; object-position: 80% 50%; transform-origin: 0 0; }
.scene canvas { opacity: 0; transition: opacity 300ms ease-out; }
.scene canvas.klar { opacity: 1; }
.dis { background: var(--papir); opacity: 0; pointer-events: none; }
.helt .tekst {
  position: absolute; z-index: 2; top: clamp(6.5rem, 19vh, 12rem); left: 0; right: 0;
  max-width: var(--bred); margin: 0 auto; padding: 0 var(--kant); pointer-events: none;
}
.helt .tekst > * { pointer-events: auto; }
.helt h1 {
  font-size: clamp(3.6rem, 10.5vw, 9.5rem); line-height: 0.9; letter-spacing: -0.045em;
  font-weight: 800; margin: 0 0 clamp(1.25rem, 3vh, 2rem);
}
.helt h1 .linje { display: block; }
.helt h1 .ord { display: inline-block; white-space: nowrap; }
.helt h1 .ord > span { display: inline-block; }
.helt .ingress { color: var(--tekst); max-width: 27rem; text-wrap: pretty; margin: 0; }
/* App Store-merket står nederst, over åsene. Løftet over Safaris verktøylinje på iPhone. */
.helt .hent {
  position: absolute; z-index: 2; left: max(var(--kant), calc((100% - var(--bred)) / 2 + var(--kant)));
  bottom: 2rem; bottom: calc(2rem + 100lvh - 100svh); margin: 0;
}
/* Apples merke: minst 40 punkter høyt og med luft rundt, uendret ellers (Apples retningslinjer). */
.app-store { display: inline-block; line-height: 0; border-radius: 0.75rem; }
.app-store img { display: block; width: auto; height: 3.25rem; }
.app-store:focus-visible { outline: 3px solid var(--mose); outline-offset: 4px; }
.hent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* Googles merke i samme høyde som Apples, uendret. «Kommer snart» står under, ikke oppå. */
.hent { align-items: flex-start; }
.merke-play { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem; line-height: 0; border-radius: 0.75rem; }
.merke-play img { display: block; width: auto; height: 3.25rem; }
.merke-play small {
  padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--flate); color: var(--tekst);
  font-size: 0.8rem; font-weight: 600; line-height: 1.2;
}
.merke-play:focus-visible { outline: 3px solid var(--mose); outline-offset: 4px; }

.ingress { font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--dempet); max-width: 30rem; margin: 0 0 2rem; }

/* Ukestripa: fruktene i gouache, fra uke 6 til 38. */
.uker { position: relative; z-index: 1; padding: clamp(3rem, 7vw, 6rem) 0; }
.uker .hode { max-width: var(--bred); margin: 0 auto 2.5rem; padding: 0 var(--kant); }
.uker h2, .del h2, .loefte h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em;
  font-weight: 800; margin: 0 0 1rem;
}
.uker .hode p { color: var(--dempet); max-width: var(--smal); margin: 0; }
.stripe {
  display: flex; gap: clamp(1rem, 2.5vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory;
  /* Starter på linje med innholdet over, og kan rulles helt ut til kanten. */
  padding: 0.5rem max(var(--kant), calc((100vw - var(--bred)) / 2 + var(--kant))) 1.5rem;
  scroll-padding-inline: max(var(--kant), calc((100vw - var(--bred)) / 2 + var(--kant)));
  scrollbar-width: none;
}
.stripe::-webkit-scrollbar { display: none; }
.stripe figure { margin: 0; flex: 0 0 auto; width: clamp(9rem, 17vw, 12rem); scroll-snap-align: start; text-align: center; }
.stripe img { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--papir); }
.stripe figcaption { margin-top: 0.75rem; font-size: 1rem; color: var(--dempet); line-height: 1.35; }
.stripe figcaption b { display: block; color: var(--tekst); font-size: 1.05rem; }

/* Laget for to: hvem appen er for, med en illustrasjon hver. Uten kortramme og skygge:
   bildet og lista står rett på papiret, og luften skiller de to. */
.for { padding: clamp(4rem, 8vw, 7rem) var(--kant); }
.for .innhold, .prov .innhold, .telefoner .innhold, .stemmer .innhold, .sporsmal .innhold { max-width: var(--bred); margin: 0 auto; }
.for .hode { max-width: var(--smal); margin-bottom: 2.5rem; }
.for h2, .prov h2, .telefoner h2, .stemmer h2, .sporsmal h2, .slutt h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; margin: 0 0 1rem;
}
.for .hode p, .prov p, .telefoner .hode p { color: var(--dempet); margin: 0; }
.to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem); }
.to img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.1rem; margin-bottom: 1.5rem; }
.to h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 0.75rem; }
.to ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.to li { color: var(--dempet); padding-left: 1.5rem; position: relative; text-wrap: pretty; }
.to li::before { content: ''; position: absolute; left: 0.2rem; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--mose); }

/* Hvor langt har dere kommet: termin inn, uka ut, regnet i nettleseren. */
.prov { background: var(--krem); padding: clamp(4rem, 8vw, 7rem) var(--kant); }
.prov .innhold { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.termin { display: grid; gap: 0.5rem; margin-top: 2rem; font-weight: 700; font-size: 1rem; max-width: 18rem; }
.termin input {
  font: inherit; font-weight: 500; font-size: 1.15rem; color: var(--tekst); background: var(--flate);
  border: 2px solid var(--strek); border-radius: 1rem; padding: 0.8rem 1rem; min-height: 3.25rem;
}
.termin input:focus-visible { border-color: var(--mose); outline: none; box-shadow: 0 0 0 3px rgb(74 106 71 / 0.25); }
.prov .feil { color: #9a3b26; font-size: 1rem; margin-top: 0.75rem; }
.ukekort { background: var(--flate); border-radius: 1.75rem; padding: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); box-shadow: 0 1px 2px rgb(30 39 35 / 0.06), 0 12px 32px rgb(30 39 35 / 0.06); }
.ukekort img { width: 9rem; height: 9rem; border-radius: 50%; background: var(--papir); }
.uketall { font-weight: 700; color: var(--mose); margin: 0 0 0.25rem; font-size: 1rem; }
.ukekort h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.6rem; }
.ukekort .kort { color: var(--tekst); margin: 0 0 1.25rem; }
.velger { display: inline-flex; background: var(--papir); border-radius: 999px; padding: 0.25rem; gap: 0.25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.velger button { font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--dempet); background: none; border: 0; border-radius: 999px; padding: 0.55rem 1rem; min-height: 2.75rem; cursor: pointer; }
.velger button[aria-pressed='true'] { background: var(--tekst); color: var(--flate); }
.rolletekst { color: var(--dempet); margin: 0 0 1rem; }
.oppgave { margin: 0; padding-top: 1rem; border-top: 1px solid var(--strek); font-size: 1rem; }

/* Slik ser appen ut: telefonene side om side, rullbare på mobil. */
.telefoner { padding: clamp(4rem, 8vw, 7rem) 0; }
.telefoner .hode { max-width: var(--bred); margin: 0 auto 2.5rem; padding: 0 var(--kant); }
.telefoner .rad {
  display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0.5rem max(var(--kant), calc((100vw - var(--bred)) / 2 + var(--kant))) 1.5rem;
  scroll-padding-inline: max(var(--kant), calc((100vw - var(--bred)) / 2 + var(--kant)));
}
.telefoner .rad::-webkit-scrollbar { display: none; }
.telefoner figure { margin: 0; flex: 0 0 auto; width: clamp(14rem, 22vw, 17.5rem); scroll-snap-align: start; }
.telefoner img { width: 100%; border-radius: 2.2rem; border: 6px solid var(--tekst); background: var(--tekst); box-shadow: 0 20px 40px rgb(30 39 35 / 0.14); }
.telefoner figcaption { margin-top: 1rem; color: var(--dempet); font-size: 1rem; line-height: 1.4; }
.telefoner figcaption b { display: block; color: var(--tekst); font-size: 1.05rem; }

/* Stemmene: hva vordende fedre og par sier i forskningen, med kilde. Sitatene står flatt
   med en tynn strek over, ikke som like kort i et rutenett. */
.stemmer { background: var(--tekst); color: var(--bakgrunn); padding: clamp(4rem, 8vw, 7rem) var(--kant); }
.stemmer .hode { max-width: var(--smal); margin-bottom: 2.5rem; }
.stemmer .hode p { color: #c9cfc7; margin: 0; }
.sitater { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 4vw, 3rem); margin: 0; }
.sitater figure { margin: 0; padding-top: 1.25rem; border-top: 1px solid rgb(255 253 248 / 0.2); display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.sitater blockquote { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.45; font-weight: 500; }
.sitater figcaption { font-size: 1rem; color: #c9cfc7; line-height: 1.45; }
.sitater a { color: #dfe8d8; }
.stemmer .merknad a { color: #dfe8d8; }
.stemmer .merknad { color: #aeb6ad; font-size: 1rem; margin: 2rem 0 0; max-width: var(--smal); }

/* Spørsmål */
.sporsmal { padding: clamp(4rem, 8vw, 7rem) var(--kant); }
.sporsmal .innhold { max-width: 46rem; }
.sporsmal details { border-top: 1px solid var(--strek); padding: 1.1rem 0; }
.sporsmal details:last-of-type { border-bottom: 1px solid var(--strek); }
.sporsmal summary { font-weight: 700; cursor: pointer; font-size: 1.15rem; min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.sporsmal summary::-webkit-details-marker { display: none; }
.sporsmal summary::after { content: '+'; font-weight: 500; font-size: 1.6rem; line-height: 1; color: var(--mose); flex: none; }
.sporsmal details[open] summary::after { content: '−'; }
.sporsmal details p { margin: 0.5rem 0 0; color: var(--dempet); }

/* Avslutningen */
.slutt { background: var(--mose-lys); padding: clamp(4rem, 8vw, 6.5rem) var(--kant); text-align: center; }
.slutt img { width: 7rem; height: 7rem; border-radius: 50%; margin: 0 auto 1.5rem; }
.slutt p { color: var(--dempet); margin: 0; }
.slutt .hent { margin-top: 1.75rem; justify-content: center; }
.slutt .app-store img, .slutt .merke-play img { width: auto; height: 3.25rem; border-radius: 0; margin: 0; }

/* Fortellingen: bilde og tekst vekselvis, hver del i sin egen tone. */
.del { padding: clamp(3.5rem, 8vw, 7rem) var(--kant); }
.del .innhold {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem);
  align-items: center; max-width: var(--bred); margin: 0 auto;
}
.del:nth-of-type(even) .innhold figure { order: 2; }
/* Illustrasjonene har malte papirkanter. Beskjær dem litt, så rammen blir ren. */
.del figure { margin: 0; overflow: hidden; border-radius: 1.5rem; }
.del figure img { transform: scale(1.06); }
.del p { color: var(--dempet); max-width: var(--smal); margin: 0 0 1rem; }
.tone-nype { background: var(--nype); }
.tone-fjord { background: var(--fjord); }
.tone-mose { background: var(--mose-lys); }
.tone-lyng { background: var(--lyng); }
.kilder { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.kilder li { background: var(--flate); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.95rem; font-weight: 600; }

/* Personvernløftet */
.loefte { background: var(--bakgrunn); padding: clamp(4rem, 9vw, 8rem) var(--kant); }
.loefte .innhold { max-width: var(--bred); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.loefte img { width: clamp(7rem, 14vw, 11rem); border-radius: 50%; }
.loefte dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; margin: 2rem 0; max-width: 46rem; }
.loefte dt { font-weight: 700; margin-bottom: 0.25rem; }
.loefte dd { margin: 0; color: var(--dempet); }

/* Bunn */
footer { background: var(--tekst); color: var(--bakgrunn); padding: 3rem var(--kant); }
footer .innhold { max-width: var(--bred); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: center; }
footer a { color: var(--bakgrunn); }
footer p { margin: 0; font-size: 1rem; }
footer nav { display: flex; gap: 1.5rem; }
/* TikTok og deling. Delingsknappene vises først av del.js, så [hidden] må vinne over display. */
[data-del][hidden] { display: none; }
footer .sosialt { display: flex; flex-wrap: wrap; gap: 0.75rem; }
footer .sosialt a, footer .sosialt button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 1rem;
  border: 1px solid rgb(250 244 227 / 0.3); border-radius: 999px; background: none;
  color: var(--bakgrunn); font: inherit; font-size: 0.95rem; text-decoration: none; cursor: pointer;
}
footer .sosialt a:hover, footer .sosialt button:hover { border-color: var(--bakgrunn); }
.slutt .del {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.75rem; min-height: 48px;
  padding: 0.75rem 1.4rem; border: 0; border-radius: 999px; background: var(--mose); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.slutt .del:hover { filter: brightness(1.08); }

/* Tekstsider: personvern og hjelp */
.side { max-width: 44rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) var(--kant) 5rem; }
.side h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 1rem; }
.side h2 { font-size: 1.4rem; letter-spacing: -0.01em; margin: 2.5rem 0 0.5rem; }
.side p, .side li { color: var(--tekst); }
.side .ingress { margin-bottom: 1rem; }
.side .dato { color: var(--dempet); font-size: 0.95rem; }
.side details { border-top: 1px solid var(--strek); padding: 1.1rem 0; }
.side details:last-of-type { border-bottom: 1px solid var(--strek); }
.side summary { font-weight: 700; cursor: pointer; font-size: 1.15rem; }
.side details p { margin: 0.75rem 0 0; }
.nod { background: var(--krem); border-radius: 1.25rem; padding: 1.25rem 1.5rem; margin: 2rem 0; }
.nod p { margin: 0; }

@media (max-width: 760px) {
  .del .innhold, .loefte .innhold, .loefte dl { grid-template-columns: 1fr; }
  .to, .prov .innhold, .sitater { grid-template-columns: 1fr; }
  .ukekort { grid-template-columns: 1fr; }
  .ukekort img { width: 7rem; height: 7rem; }
  .del:nth-of-type(even) .innhold figure { order: 0; }
  .topplinje nav { gap: 1rem; }
}

/* Stående skjermer får det høye maleriet, med redet litt til høyre. Svært brede får 21:9. */
@media (max-aspect-ratio: 4/5) {
  .maleri { object-position: 75% 50%; }
  .helt .tekst { top: clamp(5rem, 11vh, 8rem); }
  .helt .ingress { font-size: 1.1rem; max-width: 19.5rem; }
}
@media (min-aspect-ratio: 2/1) {
  .maleri { object-position: 100% 60%; }
}

/* Åpningen: tittelen stiger linje for linje, så kommer resten. Én gang, ved lasting. */
@media (prefers-reduced-motion: no-preference) {
  /* Hver bokstav stiger, vokser litt og blir skarp, 34 ms etter den forrige. */
  .helt h1 .ord > span {
    animation: stig 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(120ms + var(--i) * 34ms);
  }
  .vis { animation: vis 900ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 620ms; }
  .vis-2 { animation-delay: 760ms; }
  @keyframes stig { from { opacity: 0; transform: translateY(0.32em) scale(0.94); filter: blur(10px); } }
  @keyframes vis { from { opacity: 0; transform: translateY(14px); } }

  /* Resten av siden toner rolig inn én gang når den kommer til syne (helt.js setter .synlig).
     Heroen er det ene store øyeblikket. Dette skal bare kjennes, ikke ses. */
  .levende .ton { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--n, 0) * 90ms); }
  .levende .ton.synlig { opacity: 1; transform: none; }
  .levende .stripe .ton { transform: translateY(16px) scale(0.94); transition-delay: calc(var(--n, 0) * 45ms); }
  .levende .stripe .ton.synlig { transform: none; }
}