/* 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; }
/* 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; }
/* «Kommer til iPhone» står nederst, over åsene. Løftet over Safaris verktøylinje på iPhone. */
.helt .snart {
  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;
}
.snart {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--tekst); color: var(--flate); border-radius: 999px;
  padding: 0.85rem 1.4rem; font-weight: 600; font-size: 1rem;
}
.snart svg { width: 18px; height: 18px; }

.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: 0.95rem; 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. */
.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(1.25rem, 3vw, 2rem); }
.to article { background: var(--flate); border-radius: 1.75rem; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 1px 2px rgb(30 39 35 / 0.06), 0 12px 32px rgb(30 39 35 / 0.06); }
.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; }
.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: 0.98rem; 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. */
.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: clamp(1.25rem, 3vw, 2rem); margin: 0; }
.sitater figure { margin: 0; background: rgb(255 253 248 / 0.06); border-radius: 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); 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: 0.9rem; color: #c9cfc7; line-height: 1.45; }
.sitater a { color: #dfe8d8; }
.stemmer .merknad a { color: #dfe8d8; }
.stemmer .merknad { color: #aeb6ad; font-size: 0.9rem; 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; }

/* 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: 0.95rem; }
footer nav { display: flex; gap: 1.5rem; }

/* 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; }
}