/* skanfill.no – midlertidig onepager.
   Tokens er kopiert uendret fra design_system/tokens/. Kopi framfor relativ sti fordi
   denne mappa skal kunne dras rett til Vercel uten resten av repoet. Endres tokens i
   designsystemet, kopieres de inn på nytt – de redigeres aldri her. */
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");
@import url("tokens/base.css");

/* ---------- Grunnlag ---------- */

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

/* Ankerhopp må stoppe under den 88 px høye sticky-navigasjonen. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

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

.container { max-width: var(--container); margin: 0 auto; }

.section { padding: var(--space-9) var(--gutter); }
.section--alt { background: var(--bg-alt); }

.stack { display: flex; flex-direction: column; }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-20 { gap: 20px; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }

.muted { color: var(--ink-2); }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

/* Kun for skjermlesere – brukes på seksjonsoverskrifter som ikke skal vises. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Ikon ---------- */
/* Lucide-strekene er kopiert inn som <svg> i markupen framfor å laste lucide fra CDN:
   siden er statisk, og ett skript mindre fjerner både en rundtur og et ikonhopp. */
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--18 { width: 18px; height: 18px; }
.icon--14 { width: 14px; height: 14px; }

/* ---------- Button ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; font-size: 15px;
  border: 1px solid transparent; border-radius: var(--radius-ring);
  font-family: var(--font-sans); font-variation-settings: var(--fvs-strong);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn--s { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--l { height: 56px; padding: 0 28px; font-size: 17px; }

.btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--bg-alt); border-color: var(--ink); color: var(--ink); }

.btn--inverse { background: var(--ink-inv); color: var(--barkbrun); border-color: var(--ink-inv); }
.btn--inverse:hover { background: var(--furu-lys); border-color: var(--furu-lys); color: var(--barkbrun); }

/* Pila er inline SVG, ikke tegnet →. Google Sans Flex mangler U+2192, så tegnet ble
   hentet fra systemfonten – ulik strek på hver plattform, og tom rute der ingen
   reservefont har glyffen. Samme grep som for de øvrige ikonene. */
.btn .arrow { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.btn--s .arrow { width: 16px; height: 16px; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Eyebrow ---------- */

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-variation-settings: var(--fvs-label);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; line-height: 1.2; color: var(--brand);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--ink2 { color: var(--ink-2); }
.eyebrow--line::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6; flex: none; }

/* ---------- Divider (horisonten) ---------- */
/* Aldri en naken <hr>: linjen bærer alltid punktet fra logoen. */
.divider { display: flex; align-items: center; gap: 10px; width: 100%; }
.divider::before { content: ""; width: 48px; height: 1px; background: var(--line-strong); flex: none; }
.divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.divider .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }

/* ---------- Ring (årringen) ---------- */
/* Diametrene er regnet ut med formelen i Ring.jsx: step = (size/2 - stroke)/(rings+1),
   ring i = size - i * step * 2. Skrevet ut som faste px siden det bare er to ringmotiv
   på siden – én i heroen (520/2 ringer) og én i produksjonsseksjonen (900/4). */
.ring { position: absolute; border-radius: 50%; box-sizing: border-box; }

/* Sentreres med transform, ikke inset:0 + margin:auto: mellom ca. 1024 og 1256 px er
   mediekolonnen smalere enn 520, og da er left/right/width overbestemt – nettleseren
   forkaster `right`, ringen blir venstrestilt og glir ut av senter for bildet. */
.hero__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 520px; height: 520px; pointer-events: none; }
.hero__ring span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid var(--line-strong); box-sizing: border-box; }
.hero__ring span:nth-child(1) { width: 520px; height: 520px; }
.hero__ring span:nth-child(2) { width: 348px; height: 348px; }

.prod__ring { position: absolute; right: -300px; top: -300px; width: 900px; height: 900px;
  opacity: 0.3; pointer-events: none; }
.prod__ring span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid var(--honning); box-sizing: border-box; }
.prod__ring span:nth-child(1) { width: 900px; height: 900px; }
.prod__ring span:nth-child(2) { width: 721px; height: 721px; }
.prod__ring span:nth-child(3) { width: 542px; height: 542px; }
.prod__ring span:nth-child(4) { width: 362px; height: 362px; }

/* ---------- Stat ---------- */

.stats { --stat-hoyde: 72px; }
.stat { display: flex; flex-direction: column; gap: 10px; }
/* CO₂ settes i 64 px fordi ordet er bredere enn tallene. Uten en felles høyde på
   verdilinja drar den lavere teksten etiketten sin opp, og etikettrekka blir ujevn –
   derfor fast boks med teksten satt mot bunnen. */
.stat__value {
  font-family: var(--font-sans); font-variation-settings: var(--fvs-tall);
  font-size: 72px; line-height: 1; letter-spacing: var(--track-tall);
  font-variant-numeric: tabular-nums; color: var(--ink);
  min-height: var(--stat-hoyde); display: flex; align-items: flex-end;
}
.stat__value--sm { font-size: 64px; }
.stat__value--brand { color: var(--brand); }
.stat__unit { font-size: 0.42em; margin-left: 0.12em; }
.stat__label {
  font-family: var(--font-sans); font-variation-settings: var(--fvs-label);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2);
}

/* ---------- Card ---------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: var(--space-5);
  display: flex; flex-direction: column; font-family: var(--font-sans);
}
.card__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-variation-settings: var(--fvs-label); font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--brand); margin-bottom: 12px;
}
.card__eyebrow .icon { color: var(--ink-2); }
.card__title {
  font-variation-settings: var(--fvs-heading); font-size: var(--text-h3);
  line-height: var(--lh-tight); margin-bottom: var(--space-4); text-wrap: balance;
}
.card__body {
  font-variation-settings: var(--fvs-body); font-size: var(--text-small);
  line-height: 1.5; color: var(--ink-2); text-wrap: pretty;
}

/* ---------- Tag ---------- */

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 10px; border-radius: var(--radius-ring);
  background: var(--brand-soft); color: var(--furu-dyp); border: 1px solid transparent;
  font-family: var(--font-sans); font-variation-settings: var(--fvs-kompakt);
  font-size: 13px; white-space: nowrap;
}
.tag--warm { background: var(--accent-soft); color: var(--barkbrun); }
.tag--outline { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); font-family: var(--font-sans); }
.tabs button {
  background: none; border: none; padding: 12px 0 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--ink-2);
  font-family: var(--font-sans); font-variation-settings: var(--fvs-body);
  font-size: 15px; cursor: pointer; transition: color var(--dur-fast) var(--ease-out);
}
.tabs button[aria-selected="true"] {
  border-bottom-color: var(--brand); color: var(--ink);
  font-variation-settings: var(--fvs-strong);
}

.spec { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15px; }
.spec tr { border-bottom: 1px solid var(--line); }
.spec td { padding: 14px 0; }
.spec td:first-child { color: var(--ink-2); }
.spec td:last-child { text-align: right; }

/* ---------- Bildeplassholdere ---------- */
/* Stripete flate med monospace-etikett, slik designsystemet foreskriver. Byttes ut med
   <img> når fotoene kommer; klassene .media / .media--round beholder beskjæringen. */
.media {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  display: flex; align-items: flex-end; padding: 12px; overflow: hidden;
}
.media--round { border-radius: 50%; align-items: center; justify-content: center; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media:has(img) { padding: 0; border-color: var(--line); }

.ph { background: repeating-linear-gradient(135deg, var(--lysved) 0 8px, var(--papir) 8px 16px); }
.ph--dark { background: repeating-linear-gradient(135deg,
  color-mix(in oklab, var(--honning), transparent 75%) 0 8px, transparent 8px 16px); }
.ph__label {
  font-family: var(--font-mono); font-size: 11px; color: var(--kjerneved);
  background: var(--papir); padding: 3px 8px; border-radius: 2px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 5; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg), transparent 8%);
  backdrop-filter: blur(8px);
}
.nav__inner {
  max-width: var(--container); margin: 0 auto; height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.nav__logo img { height: 30px; }
.nav__links { display: flex; gap: 36px; font-size: 15px; white-space: nowrap; }
.nav__links a { color: var(--ink); }
.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: none;
  color: var(--ink); cursor: pointer;
}

/* Fullskjermpanel i papir – vises kun under 1024 px. */
.menu {
  position: fixed; inset: 0; z-index: 10; background: var(--bg);
  display: flex; flex-direction: column; padding: 0 var(--gutter) var(--space-9);
}
.menu[hidden] { display: none; }
.menu__top { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.menu__links { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-7); }
.menu__links a { color: var(--ink); font-variation-settings: var(--fvs-heading); font-size: var(--text-h2); }
.menu__cta { margin-top: auto; align-self: flex-start; }

/* ---------- Hero ---------- */

/* Seksjonen bærer luft og beskjæring; .hero er selve rutenettet inne i containeren.
   overflow:hidden ligger på seksjonen slik at horisonten og årringen klippes mot
   vindusbredden, ikke mot 1280-containeren. */
.hero-section { position: relative; overflow: hidden; padding: var(--space-9) var(--gutter) var(--space-8); }
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8);
  align-items: center;
}
.hero__title { font-size: 96px; }
.hero__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.hero__media { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; }
/* Horisonten går bak det runde bildet og ut av flata i begge retninger. */
/* margin-top −1 legger selve streken på midtlinja; uten den ligger den 2 px høye
   streken like under senter i ringen. */
.hero__horizon { position: absolute; left: -200px; right: -200px; top: 50%; margin-top: -1px; height: 2px; background: var(--brand); }
.hero__photo { position: relative; z-index: 1; width: 380px; height: 380px; background: var(--bg-alt); }

/* Bildeserien i heroen. Kryssfade er den eneste bevegelsen – ingen forskyvning, ingen
   skalering, i tråd med systemet. 480 ms er den lengste tillatte varigheten. */
.hero__photo .slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.hero__photo .slide.is-on { opacity: 1; }

/* Pause/spill for bildeserien. Ligger i lufta under sirkelen, i label-stilen, slik at
   den leses som en systemetikett og ikke konkurrerer med handlingsknappene til venstre. */
.hero__pause {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: color-mix(in oklab, var(--bg), transparent 12%);
  border: 1px solid var(--line); border-radius: var(--radius-ring);
  color: var(--ink-2); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hero__pause[hidden] { display: none; }
.hero__pause:hover { color: var(--ink); border-color: var(--line-strong); }
.hero__pause .icon { width: 14px; height: 14px; }

/* ---------- Seksjoner ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.split--intro { grid-template-columns: 1fr 2fr; }
.split--top { align-items: start; }
.split--center { align-items: center; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-top: var(--space-7); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

.production { position: relative; overflow: hidden; padding: var(--space-10) var(--gutter); }
/* To stående bilder side om side. aspect-ratio framfor fast høyde, slik at paret
   krymper riktig når kolonnen blir smal – to faste 420 px ville blitt sylsmale. */
.bildepar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bildepar .media { aspect-ratio: 62 / 96; }

/* Ikonlinjer med korte fakta. Deles av produksjons- og tradisjonsseksjonen. */
.facts { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: 15px; color: var(--ink-2); }
.facts span { display: flex; align-items: center; gap: 8px; }
/* Markupen er kommentert ut i index.html – regelen står igjen så knappen kan settes
   inn igjen når produksjonsseksjonen får noe å peke på. Stakken har 20 px gap; de 4
   ekstra gir tekst→handling = 24. */
.production__action { margin-top: 4px; }

.tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* Kontaktkortet erstatter skjemaet i denne versjonen: e-post og telefon direkte. */
.contact__card { gap: var(--space-5); justify-content: center; }
.contact__lines { display: flex; flex-direction: column; gap: var(--space-4); }
.contact__line { display: flex; align-items: center; gap: 12px; }
.contact__line .icon { color: var(--ink-2); }
.contact__line a { font-variation-settings: var(--fvs-heading); font-size: var(--text-h3); }
/* Navnet settes som lenkene, men i --ink: det er ikke noe å trykke på. */
.contact__navn { font-variation-settings: var(--fvs-heading); font-size: var(--text-h3); color: var(--ink); }

.footer { padding: var(--space-7) var(--gutter); border-top: 1px solid var(--line); }
.footer__inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.footer img { height: 32px; }

/* ---------- Responsivt ---------- */

@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav .btn { display: none; }

  .hero { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__title { font-size: var(--text-display); }
  .hero__media { height: 340px; }
  .hero__photo { width: 280px; height: 280px; }
  .hero__ring { width: 340px; height: 340px; }
  .hero__ring span:nth-child(1) { width: 340px; height: 340px; }
  .hero__ring span:nth-child(2) { width: 228px; height: 228px; }
  /* Lufta under sirkelen krymper fra 70 til 30 px; knappen legges helt ned. */
  .hero__pause { bottom: 0; }

  .split, .split--intro { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-6); }
  .cards { grid-template-columns: 1fr; }
  .production { padding: var(--space-9) var(--gutter); }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

@media (max-width: 560px) {
  .stats { --stat-hoyde: 56px; }
  .stat__value { font-size: 56px; }
  .stat__value--sm { font-size: 48px; }
  .contact__line a { font-size: var(--text-lead); }
  .tabs { gap: 20px; }
}

/* Bevegelsen i systemet er liten fra før; her fjernes den helt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}