/* Nærmeste turbin · stil
   Et måleark. Svaret i Schibsted Grotesk (tegnet for Schibsted i Oslo), etiketter og kilder
   i IBM Plex Mono. Blekk på grått i to moduser, og én aksent: flylysrødt (Paroles vermillion) for deg,
   turbinen din og det siden handler om. Ingen ikoner, bare det dataene tegner. */

@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; 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"; src: url(fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; 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: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; 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: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;
  --bg: #E7ECEA;
  --ink: #0B1316;
  --muted: #4B5A60;
  --line: rgba(11, 19, 22, .16);
  --tick: #7A878C;
  --accent: #D4302E;   /* Paroles vermillion, samme tone som flylyset på turbinene: du, din turbin og det siden handler om */
  --grot: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 10px;      /* knapper med kant, skrivefelt og verktøyknapper */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0A0F11; --ink: #DCE4E2; --muted: #8D9BA1; --line: rgba(220, 228, 226, .16); --tick: #5A686E; --accent: #F45249; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.5 var(--grot); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

main, footer { max-width: 80rem; margin: 0 auto; padding-inline: 20px; }
main { padding-block: 20px 36px; }
@media (min-width: 800px) { main, footer { padding-inline: 48px; } main { padding-block: 32px 56px; } }

.label { margin: 0; font: 500 .6875rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.note { margin: 12px 0 0; font: 400 .8125rem/1.5 var(--mono); color: var(--muted); max-width: 40rem; }
.note:empty, .status:empty { display: none; }

/* Knapper */
button { font: inherit; color: inherit; }
.primary, .secondary { font: 600 1rem/1 var(--grot); border: 1px solid var(--ink); border-radius: var(--radius); padding: 15px 20px; cursor: pointer; }
.primary { background: var(--ink); color: var(--bg); }
.secondary { background: transparent; color: var(--ink); }
.primary:disabled, .secondary:disabled { opacity: .5; cursor: progress; }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; font: inherit; }

/* Svaret og spørsmålet: det største på skjermen */
.answer {
  margin: clamp(36px, 9vh, 100px) 0 0;
  font: 400 clamp(2.3rem, .9rem + 6.6vw, 6.4rem)/1.0 var(--grot);
  letter-spacing: -0.03em;
  max-width: 17ch;
}
.answer:focus { outline: none; }
.answer .s1, .start .answer { font-weight: 650; }   /* lettere enn før: mindre massivt, særlig i mørk modus */
.answer .s2, .answer .s3 { display: block; margin-top: .35em; font: 400 clamp(1.35rem, .95rem + 2.4vw, 3.25rem)/1.14 var(--grot); letter-spacing: -0.02em; max-width: 24ch; }
.answer .s3 { color: var(--muted); }
.answer .s3:empty { display: none; }

/* Svaret med kompasset ved siden av. Kompasset står under på mobil. */
.head { display: grid; gap: 28px 48px; align-items: end; }
@media (min-width: 800px) { .head { grid-template-columns: minmax(0, 1fr) auto; } }
.head-text { min-width: 0; }
.head-dial { display: grid; justify-items: center; gap: 4px; }
@media (min-width: 800px) { .head-dial { padding-bottom: 6px; } }
.dial { margin: 0; }
.dial svg { display: block; width: min(232px, 62vw); height: auto; overflow: visible; margin: 14px; }
.dial .rot { transform-origin: 100px 100px; transform-box: view-box; transition: transform .12s linear; }
@media (prefers-reduced-motion: reduce) { .dial .rot { transition: none; } }
.dial .dist { font: 700 15px var(--grot); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.dial .card { font: 500 9px var(--mono); fill: var(--muted); }
.dial .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.dial .tick { stroke: var(--tick); stroke-width: 1; }
.dial .tick.n { stroke: var(--ink); }
.dial .ray { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.dial .tip { fill: var(--accent); animation: flylys 2.4s ease-in-out infinite; }
.dial .you { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.dial.live .ring { stroke: var(--ink); }
.dial.live .hit .ray { stroke-width: 3; }
.dial-read { margin: 0; font: 500 .8125rem/1.5 var(--mono); color: var(--muted); text-align: center; }
.dial-read:empty { display: none; }
.compass { display: grid; gap: 8px; justify-items: center; margin-top: 8px; }
.compass .note { margin-top: 0; text-align: center; max-width: 16rem; }

/* Start */
.locate { margin: clamp(40px, 8vh, 80px) 0 0; }
.status { margin: 12px 0 0; font: 400 .8125rem/1.5 var(--mono); color: var(--muted); max-width: 40rem; }
.search { margin: 40px 0 0; max-width: 40rem; padding-top: 20px; border-top: 1px solid var(--line); }
.field { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
/* Søkefeltet er en tydelig boks med eksempelteksten inni, like høy som knappen ved siden av */
.field input {
  flex: 1 1 14rem; min-width: 0; font: 400 1.125rem/1.2 var(--grot); color: var(--ink);
  background: transparent; border: 1px solid var(--ink); border-radius: var(--radius); padding: 12px 14px;
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input::-webkit-search-cancel-button { display: none; }
.hint { margin: 8px 0 0; font: 400 .8125rem/1.5 var(--mono); color: var(--muted); }
.hint:empty { display: none; }
.matches { margin-top: 20px; }
.matches ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.matches li { border-bottom: 1px solid var(--line); }
.matches button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 0; cursor: pointer; }
.matches button span, .matches .page-hit span { display: block; font: 400 .75rem/1.5 var(--mono); color: var(--muted); }
/* Parker og kommuner som heter det du skrev: lenker til sidene deres, øverst i lista */
.matches .page-hit { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.matches .page-hit span { font-weight: 400; }
.matches .page-hit:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* Forsiden: parken med mest vind akkurat nå, i terrenget. Tegningen er en lenke til parken; ingen dra eller trykk. */
.start-view { margin: 12px 0 0; }
.start-view .sv-stage { display: block; }
.start-view svg { cursor: pointer; touch-action: auto; }
.start-view svg:empty { aspect-ratio: 8 / 5; }   /* plassen holdes av til vinden og terrenget er hentet */
.start-view figcaption .lede { margin: 0 0 8px; font: 400 1.125rem/1.45 var(--grot); color: var(--ink); max-width: 40rem; }
.start-view figcaption .lede .v-park, .start-view figcaption .lede .v-husstander { font-weight: 700; }
.start-more { margin: 48px 0 0; max-width: 40rem; padding-top: 20px; border-top: 1px solid var(--line); }
.start-more .lede { margin: 0 0 4px; }
.start-more .norway { max-width: 40rem; }
.examples { margin-top: 24px; max-width: 40rem; }
.examples ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.examples button { font: 500 .8125rem/1 var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 9px 12px; cursor: pointer; }
.examples button:hover, .examples button:focus-visible { border-color: var(--ink); }
.examples button .v-avstand { font-weight: 700; }

/* Resultat */
.from { margin: 0; font: 400 .8125rem/1.5 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }
.sheet { margin: clamp(56px, 10vh, 112px) 0 0; }

/* Kort fortalt: de beste linjene rett under svaret, side om side på desktop */
.takeaways { list-style: none; margin: clamp(36px, 6vh, 64px) 0 0; padding: 0; display: grid; gap: 0 32px; max-width: 72rem; }
@media (min-width: 800px) { .takeaways { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.takeaways li { border-top: 1px solid var(--ink); padding: 12px 0 20px; display: flex; flex-direction: column; }
.takeaways .take { margin: 8px 0 0; font: 400 1.1875rem/1.4 var(--grot); max-width: 30rem; }
.takeaways .take-link { margin: auto 0 0; padding-top: 14px; font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.takeaways .take-link a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.takeaways .take-link a::after { content: " ›"; }
.takeaways .take-link a:hover { border-color: var(--ink); }
/* Håndregelen som tegning: turbinen slik den ser ut herfra, ved siden av fingeren i samme synsvinkel */
.hand-svg { display: block; width: 100%; max-width: 19rem; height: auto; margin-top: 14px; overflow: visible; }
.hand-svg .horizon { stroke: var(--line); stroke-width: 1; }
.hand-svg .finger { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.hand-svg .tower { stroke: var(--ink); stroke-width: 1.6; }
.hand-svg .blades line { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.hand-svg .lbl { font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); }
.hand-svg .deg { font: 500 9px var(--mono); fill: var(--ink); }
.takeaways .take .v { font-weight: 700; }
.takeaways .take .v-aar { font-weight: inherit; }
.takeaways + .sheet { margin-top: clamp(40px, 8vh, 88px); }

/* Hver del av svaret: etikett og overskrift til venstre (står fast mens du scroller), innhold til høyre */
.row { display: grid; gap: 14px 40px; padding: 24px 0 36px; border-top: 1px solid var(--ink); scroll-margin-top: 48px; }
@media (min-width: 800px) {
  .row { grid-template-columns: 15rem minmax(0, 52rem); padding: 28px 0 56px; }
  .row-head { position: sticky; top: 60px; align-self: start; }
}
.row-title { margin: 6px 0 0; font: 650 clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem)/1.08 var(--grot); letter-spacing: -0.02em; }
.row .row-body > * + * { margin-top: 28px; }
.row .row-body > .figures + .lede { margin-top: 0; }     /* setningen om vinden hører til tallet over */
.row .row-body > .lede + .figures { margin-top: 20px; }  /* forklaringen av avgiften, rett over tallene */
.row p { margin: 0; }

/* To ting side om side: tegning og tall */
.pair { display: grid; gap: 24px 40px; align-items: start; }
@media (min-width: 560px) { .pair { grid-template-columns: auto minmax(0, 1fr); } }

/* Nøkkeltall: stort tall, kort forklaring under */
.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0 24px; }
@media (min-width: 800px) { .figures { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 32px; } }
.figures:empty { display: none; }
.figure { border-top: 1px solid var(--line); padding: 12px 0 20px; min-width: 0; }
.figure .fig-value { margin: 0; font: 650 clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem)/1.05 var(--grot); letter-spacing: -0.02em; font-variant-numeric: lining-nums proportional-nums; }
.figure .fig-text { margin: 8px 0 0; font: 400 .8125rem/1.45 var(--mono); color: var(--muted); max-width: 28ch; }
/* Hovedtallet i en rad får hele bredden */
.figure.lead { grid-column: 1 / -1; border-top-color: var(--ink); }
.figure.lead .fig-value { font-size: clamp(2.5rem, 1.7rem + 3vw, 4rem); }
.figure.lead .fig-text { max-width: 40ch; }
/* Tall med lengre forklaring: hele bredden, så teksten ikke blir fem linjer i en smal kolonne */
.figure.wide { grid-column: 1 / -1; }
.figure.wide .fig-text { max-width: 40ch; }
.pair .figure.lead .fig-value { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); }

/* Deler inni en rad: turbinen nærmest deg, hele parken */
.part > * + *, .row .part > * + * { margin-top: 18px; }
.part-title { margin: 0; font: 650 1.25rem/1.2 var(--grot); letter-spacing: -0.01em; }

/* Nær deg: en innledende setning, kurven over hele Norge og parkene nærmest */
.lede { font-size: 1.125rem; line-height: 1.45; max-width: 36rem; }
.lede:empty { display: none; }
.norway { max-width: 40rem; }   /* forsiden; i svaret full bredde (.row .norway) */
/* Linja: 0 km til venstre, tre merker for hvor langt folk bor, og deg */
.chart .strip-line { stroke: var(--tick); stroke-width: 2; stroke-linecap: round; }
.chart .strip-tick { stroke: var(--ink); stroke-width: 1.5; }
.chart .tick-label.strong { fill: var(--ink); font-weight: 500; }
.chart .you-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
.chart .you-label { font: 700 12px var(--grot); fill: var(--ink); }
/* Rangering: samme stripe som Norge-linja, én strek per kommune eller park, deg markert */
.rank { max-width: none; }
.row .norway { max-width: none; }
.rank .rank-line { margin: 8px 0 0; }
.rank svg { margin-top: 4px; }
.chart .rank-tick { stroke: var(--tick); stroke-width: 1; stroke-opacity: .55; }
.chart .rank-end { font: 400 10px var(--mono); fill: var(--muted); }
.chart .rank-end.strong { fill: var(--ink); font-weight: 500; }
.rank-line .v-topp, .rank-line .v-neste { font-weight: 700; }
/* Ytterpunktene: én linje per rekord, parken er en knapp */
.ytter { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ytter li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.ytter .v-park { font-weight: 700; }
/* Faste tallbredder bare på tallene: i Schibsted Grotesk gjør tabular-nums også komma og punktum brede */
.counter .v { font-variant-numeric: tabular-nums; }
.counter:empty { display: none; }

/* Parkene nærmest deg: én strek per turbin; den valgte er markert til venstre */
.nearby { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nearby li { border-bottom: 1px solid var(--line); }
.nearby button, .nearby .nb-row {
  position: relative; color: inherit; text-decoration: none; display: grid; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 12px 0 12px 18px; gap: 6px 16px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name km" "ticks ticks";
}
@media (min-width: 640px) {
  .nearby button, .nearby .nb-row { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) auto; grid-template-areas: "name ticks km"; align-items: center; }
}
.nb-name { grid-area: name; font-weight: 400; }
.nb-km { grid-area: km; font: 500 .875rem/1.4 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.nb-ticks { grid-area: ticks; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.nb-ticks svg { flex: none; stroke: var(--tick); stroke-width: 1.2; }
.nb-count { font: 400 .75rem/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.nearby button:hover .nb-name, .nearby .nb-row:hover .nb-name { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.nearby button[aria-pressed="true"] { cursor: default; }
.nearby button[aria-pressed="true"] .nb-name { font-weight: 700; text-decoration: none; }
.nearby button[aria-pressed="true"] .nb-ticks svg { stroke: var(--ink); }
.nearby button[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--accent); }
.nearby + .note { margin-top: 10px; }
/* Når resten av siden handler om en annen park enn den nærmeste turbinen, skal det synes */
.nearby-note.switched { color: var(--ink); font: 400 1rem/1.45 var(--grot); max-width: 36rem; padding-left: 14px; border-left: 2px solid var(--ink); }
.nearby + .nearby-note.switched { margin-top: 14px; }

/* Faktaliste om parken */
.specs { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; align-content: start; }
.specs dt, .specs dd { border-top: 1px solid var(--line); padding: 9px 0; }
.specs dt { font: 500 .6875rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-right: 20px; }
.specs dd { margin: 0; font-weight: 600; }
.specs .spec-note { display: block; margin-top: 4px; font: 400 .8125rem/1.45 var(--mono); color: var(--muted); max-width: 40ch; }   /* forklaring under verdien, i samme rad */

.hand { font-size: 1.125rem; line-height: 1.45; max-width: 34rem; padding-left: 16px; border-left: 2px solid var(--ink); }
.hand:empty { display: none; }
/* Iskast om vinteren: rolig, men lett å se */
.ice { font-size: .9375rem; line-height: 1.5; max-width: 34rem; padding-left: 14px; border-left: 2px solid var(--tick); }
.ice:empty { display: none; }
.explain { font: 500 .8125rem/1.4 var(--mono); }
.explain a { color: var(--ink); }
.explain a::after { content: " →"; }
.park-more { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }


.note { font-size: .75rem; }
.total { font-size: 1.0625rem; max-width: 40rem; }
.total .v-belop { font-weight: 700; }

/* Avgift per år: små stolper, siste år fremhevet */
.bars { margin: 0; max-width: 28rem; }
.bars svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.bars .bar { fill: var(--tick); }
.bars .bar.last { fill: var(--ink); }
.bars .base { stroke: var(--tick); stroke-width: 1; }
.bars .val { font: 500 11px var(--mono); fill: var(--ink); }
.bars .yr { font: 400 10px var(--mono); fill: var(--muted); }
.bars .note { margin-top: 10px; }

.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; }

/* Navigasjon som dukker opp når svaret er scrollet bort */
.jump { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateY(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
.jump.show { transform: none; visibility: visible; transition: transform .2s ease; }
.jump-inner { max-width: 80rem; margin: 0 auto; padding: 10px 20px; display: flex; gap: 8px 24px; align-items: baseline; justify-content: space-between; font: 500 .75rem/1.4 var(--mono); }
@media (min-width: 800px) { .jump-inner { padding-inline: 48px; } }
.jump-summary { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) { .jump-summary { display: none; } }
.jump ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a { color: var(--muted); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 4px 0; }
.jump a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: .35em; }
@media (prefers-reduced-motion: reduce) { .jump, .jump.show { transition: none; } }

/* Grafer: historikk og prognose. Én serie hver, dempede akser, pekeren viser verdien */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; touch-action: pan-y; }
.chart .axis { stroke: var(--tick); stroke-width: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .day { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .tick-label { font: 400 10px var(--mono); fill: var(--muted); }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--ink); fill-opacity: .08; }
.chart .band { fill: var(--ink); fill-opacity: .06; }
.chart .band-label { font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); }
.chart .cross { stroke: var(--ink); stroke-width: 1; }
.chart .dot { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.chart .tip { font: 500 11px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.chart .knob rect { fill: var(--ink); }
.chart .knob path { fill: none; stroke: var(--bg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.forecast svg { cursor: ew-resize; }
.forecast svg:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.when { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.when:empty { display: none; }

/* En setning over grafen (sommer og vinter) */
.chart .lede { margin-top: 8px; }
/* Parken sett fra deg: terreng som stablede profillinjer, turbinene i riktig høyde */
.view { margin: 0; }
.view svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 799px) { .view { margin-inline: -20px; } .view figcaption { padding-inline: 20px; } }
.view .fill { fill: var(--bg); stroke: none; }
.view .ridge { fill: none; stroke: var(--ink); stroke-linejoin: round; }   /* tykkelse og styrke etter dybden: app.js */
.view .sea { fill: none; stroke: var(--tick); stroke-width: .7; stroke-dasharray: 1 5; stroke-linecap: round; }
.view .t line { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.1; stroke-linecap: round; }
.view .t.near line, .view .t.picked line { stroke-opacity: 1; stroke-width: 2; }
.view .t.near line { stroke: var(--accent); }
.view .hits rect { fill: transparent; cursor: pointer; }
.view .tag { font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.view .tag-line { stroke: var(--ink); stroke-width: .7; }
.view .to-you { stroke: var(--ink); stroke-width: .8; stroke-dasharray: 3 3; }
.view figcaption { margin-top: 10px; font: 400 .75rem/1.5 var(--mono); color: var(--muted); }
.view .sv-stage { display: block; }
.view .sv-art { position: relative; display: block; flex: none; width: 100%; }
.view figcaption .sv-info { margin-top: 8px; }

/* Parksiden: tegningen øverst fra kant til kant, som på forsiden */
.park-hero { margin: 0 0 clamp(28px, 5vh, 56px); }
.park-hero .sv-stage { display: flex; align-items: center; justify-content: center; height: clamp(320px, 52vw, 66vh);
  margin-inline: calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 82%, transparent); }
.park-hero figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.park-hero .p3 { margin-inline: calc(50% - 50vw); }
.park-hero figcaption .p3-open { margin: 0 0 0 auto; }
.park-hero:not([hidden]) ~ .head .kicker { margin-top: 0; }
.view .view-text { display: block; max-width: 48rem; }
.view .view-text + .view-text { margin-top: 4px; }
.view .view-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 10px; color: var(--ink); }
.tool { font: 500 .8125rem/1 var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: var(--radius); padding: 9px 12px; cursor: pointer; }
.tool:hover { background: var(--ink); color: var(--bg); }
.view svg { cursor: grab; touch-action: pan-y; }
.view svg:active { cursor: grabbing; }
.view .streak { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 3.5; }

/* Turbinen i målestokk */
.elev { margin: 0; }
.elev:empty { display: none; }
.drawing { display: block; height: 11rem; width: auto; max-width: 100%; overflow: visible; }
.drawing .ground { stroke: var(--line); stroke-width: 1; }
.drawing .sweep { fill: none; stroke: var(--tick); stroke-width: .6; stroke-dasharray: 2 3; }
.drawing .tower { stroke: var(--ink); stroke-width: 2.4; }
.drawing .hub { fill: var(--ink); }
.drawing .blades line { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.drawing .dim line { stroke: var(--muted); stroke-width: .7; }
.drawing .dim text { font-family: var(--mono); font-weight: 500; fill: var(--ink); }

.spin { animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Flylyset: blinker rolig, som hindringslysene på turbinene om natta */
@keyframes flylys { 0%, 38% { opacity: 1; } 52%, 100% { opacity: .18; } }
@media (prefers-reduced-motion: reduce) { .spin, .hero-light, .dial .tip, .map .blink { animation: none !important; } }

/* Deling */
.share { margin: 40px 0 0; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.share .note { max-width: 36rem; }

/* Bunntekst: datolinje og kontakt, lenkene, og avsenderen nederst til venstre */
.foot { position: relative; padding-block: 28px 48px; font: 400 .75rem/1.65 var(--mono); color: var(--muted); display: grid; gap: 24px; margin-top: clamp(40px, 8vh, 96px); }
@media (min-width: 800px) { .foot { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 48px; } }
.foot::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; border-top: 1px solid var(--line); }   /* i flukt med innholdet */
@media (min-width: 800px) { .foot::before { left: 48px; right: 48px; } }
.foot p { margin: 0; max-width: 34rem; }
.foot p + p { margin-top: .7em; }
.foot-text p:first-child { color: var(--ink); }
.foot a { color: var(--ink); }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.foot-links span { display: block; color: var(--muted); }
.foot-fra { grid-column: 1 / -1; }

/* Avsenderen «laget av parole*» (designmanualen, 8.1): ordmerket som kurver, 30 px høyt med grunnlinja på linje med
   «laget av» (21 % av høyden er under grunnlinja). Bokstavene følger tekstfargen; asterisken er vermiglio, 75 i mørk
   modus, som på parole.no. Ved pek blir asterisken tekstfarget. */
.parole-av { display: inline-flex; align-items: baseline; gap: .45em; font: 400 1.0625rem/1 var(--grot); color: var(--ink); text-decoration: none; }
.parole-av svg { display: block; height: 30px; width: auto; margin-bottom: -6.3px; overflow: visible; }
.parole-av .stjerne { fill: #E34234; }
@media (prefers-color-scheme: dark) { .parole-av .stjerne { fill: #EC7564; } }
.parole-av:hover .stjerne, .parole-av:focus-visible .stjerne { fill: currentColor; }

.noscript { max-width: 40rem; margin: 40px auto; padding: 0 20px; font: 400 1rem/1.5 var(--mono); }


/* ------------------------------------------------------------ toppstripe */
.mast { border-bottom: 1px solid var(--line); }
.mast-inner { max-width: 80rem; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
@media (min-width: 800px) { .mast-inner { padding: 16px 48px; } }
.mast-name { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1 var(--grot); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }

/* Hvem, når og hvor ferske tallene er */
.dateline { margin: 22px 0 0; font: 400 .75rem/1.5 var(--mono); color: var(--muted); max-width: 40rem; }

/* ------------------------------------------------------------ forsiden: spørsmålet og søket øverst, parken med mest vind under.
   På brede skjermer står de side om side: spørsmålet til venstre, parken til høyre. */
.hero { margin: 4px 0 0; max-width: 52rem; }
.hero-label { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.hero-light { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: flylys 2.4s ease-in-out infinite; }
.hero-title { margin: 8px 0 0; min-height: 2.24em; font: 700 clamp(1.375rem, 1.1rem + 1.1vw, 2rem)/1.12 var(--grot); letter-spacing: -0.02em; max-width: 26ch; }
.hero-wait { font-weight: 400; color: var(--muted); }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 16px 0 14px; }
.sv-actions .secondary { display: inline-block; text-decoration: none; }
.sv-more { font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.sv-more::after { content: " ›"; }
.sv-more:hover { border-color: var(--ink); }
@media (max-width: 999px) {
  .start .answer { margin-top: clamp(20px, 4vh, 40px); }
  .start .locate { margin-top: 28px; }
  .start > .hero { margin-top: clamp(48px, 8vh, 88px); padding-top: 20px; border-top: 1px solid var(--ink); }
}
@media (min-width: 1000px) {
  .start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(40px, 4.5vw, 80px); align-items: start; }
  .start > * { grid-column: 1 / -1; }
  .start > .start-main { grid-column: 1; grid-row: 1; }
  .start > .hero { grid-column: 2; grid-row: 1; margin-top: clamp(36px, 9vh, 100px); max-width: none; }
  .start .answer { font-size: clamp(2.3rem, .5rem + 4.2vw, 4.75rem); }
}

/* ------------------------------------------------------------ kartet */
.map { margin: 0; }
.map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map .land { fill: var(--ink); fill-opacity: .045; stroke: var(--tick); stroke-width: .6; stroke-linejoin: round; }
.map .park { fill: var(--ink); fill-opacity: .7; }
.map .park.dim { fill: var(--tick); fill-opacity: .5; }
.map .park.hl { fill-opacity: 1; }
.map .park.acc { fill: var(--accent); fill-opacity: 1; }
.map .halo { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.map a { cursor: pointer; }
.map a:hover .park, .map a:focus-visible .park { fill: var(--accent); fill-opacity: 1; }
.map .you { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.map .to-turbine { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.map .map-label { font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.map .map-label.strong { fill: var(--ink); }
.map .blink { animation: flylys 2.4s ease-in-out infinite; }

/* Nær deg: kartet ved siden av parkene nærmest */
.near-pair { display: grid; gap: 20px 36px; align-items: start; }
@media (min-width: 640px) { .near-pair { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); } }
@media (max-width: 639px) { .near-map { max-width: 15rem; } }
.near-map svg { max-height: 62vh; }

/* ------------------------------------------------------------ deling rett ved svaret */

/* ------------------------------------------------------------ sidene for en park og en kommune */
.kicker { margin: clamp(36px, 9vh, 100px) 0 0; color: var(--ink); }
.kicker + .answer { margin-top: 14px; }
.head-map { margin: 0; width: min(15rem, 56vw); justify-self: end; }
@media (max-width: 799px) { .head-map { justify-self: start; } }
.head-map svg { max-height: 50vh; }
.head-map-all { margin-top: 10px; font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.head-map-all a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.head-map-all a::after { content: " ›"; }
.head-map-all a:hover { border-color: var(--ink); }
.page-cta { margin: clamp(32px, 6vh, 56px) 0 0; padding-top: 18px; border-top: 1px solid var(--ink); display: grid; gap: 14px; }
@media (min-width: 800px) { .page-cta { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 32px; } }
.cta-title { margin: 0; font: 650 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.1 var(--grot); letter-spacing: -0.02em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-actions .secondary { display: inline-block; text-decoration: none; }
.page-cta .status { grid-column: 1 / -1; margin: 0; }
body[data-mode="kommune"] .sheet { display: flex; flex-direction: column; }
body[data-mode="kommune"] #row-kommune { order: -1; }

/* ------------------------------------------------------------ forsiden, nederst: et utvalg av parkene og kommunene */
.picks { margin: clamp(56px, 10vh, 112px) 0 0; padding-top: 20px; border-top: 1px solid var(--ink); }
.picks-cols { display: grid; gap: 32px 40px; margin-top: 20px; }
@media (min-width: 800px) { .picks-cols { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.pick-title { margin: 0 0 10px; font: 700 1.1875rem/1.2 var(--grot); letter-spacing: -0.01em; }
.pick-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pick-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 9px 0 10px; border-bottom: 1px solid var(--line); }
.pick-list a { font-weight: 600; text-decoration: none; }
.pick-list a:hover { text-decoration: underline; }
.pk-what { flex-basis: 100%; font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pk-val { font: 500 .875rem/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-note { font: 400 .75rem/1 var(--mono); color: var(--muted); }
.pick .note { margin-top: 8px; }
.picks-all { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.picks-all .secondary { display: inline-block; text-decoration: none; }

/* ------------------------------------------------------------ alle vindkraftverkene og kommunene (/vindkraftverk) */
.alle-head { margin: clamp(36px, 9vh, 100px) 0 0; }
.alle-intro .about-title { margin-top: 14px; }
.alle-intro .about-lede { max-width: 36rem; }
/* Kartet står i egen kolonne ved siden av tittelen. På mobil er lista viktigst, så der står det ikke. */
.alle-map { display: none; }
@media (min-width: 640px) {
  .alle-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 18rem); gap: clamp(24px, 4vw, 48px); align-items: start; }
  .alle-map { display: block; grid-column: 2; grid-row: 1; }
  .alle-intro { grid-column: 1; grid-row: 1; }
}
.alle-map .park.acc { fill: var(--accent); }
.al-tools { margin: 36px 0 0; max-width: 40rem; padding-top: 20px; border-top: 1px solid var(--line); }
.al-tools .status { margin-top: 10px; color: var(--ink); }
.al-jump { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 18px 0 0; font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.al-jump a { color: var(--ink); }
.al-cols { display: grid; gap: 48px 56px; margin-top: clamp(36px, 6vh, 56px); align-items: start; }
@media (min-width: 1000px) { .al-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.al-sec { border-top: 1px solid var(--ink); padding-top: 18px; scroll-margin-top: 16px; }
.al-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; }
.al-sort .label { margin-right: 6px; }
.al-chip { font: 500 .75rem/1 var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; cursor: pointer; }
.al-chip:hover { border-color: var(--ink); }
.al-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.al-chip:disabled { opacity: .45; cursor: progress; }
.al-colhead { margin: 22px 0 6px; text-align: right; font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.al-group + .al-group { margin-top: 24px; }
.al-group-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font: 700 1rem/1.3 var(--grot); }
.al-count { font: 400 .75rem/1.4 var(--mono); color: var(--muted); }
.al-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.al-row { border-bottom: 1px solid var(--line); }
.al-row a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "meta meta" "ticks ticks";
  gap: 2px 16px; padding: 9px 0 10px; color: inherit; text-decoration: none; }
.al-row a:hover .al-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.al-name { grid-area: name; font-weight: 600; }
.al-val { grid-area: val; font: 500 .875rem/1.5 var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.al-meta { grid-area: meta; font: 400 .75rem/1.45 var(--mono); color: var(--muted); }
/* Én strek per turbin, som i lista over parkene nærmest deg */
.al-ticks { grid-area: ticks; display: block; height: 9px; margin-top: 5px; width: calc(var(--n) * 3px); max-width: 100%;
  background: repeating-linear-gradient(to right, var(--tick) 0 1.2px, transparent 1.2px 3px); }
@media (min-width: 640px) {
  .al-row a { grid-template-columns: minmax(0, 1fr) auto minmax(4.5rem, auto); grid-template-areas: "name ticks val" "meta meta val"; align-items: center; }
  .al-ticks { margin-top: 0; justify-self: end; max-width: 15rem; }
}

/* ------------------------------------------------------------ «Slik er det laget» */
.about-head { max-width: 52rem; margin: clamp(36px, 9vh, 100px) 0 clamp(8px, 2vh, 24px); }
.about-title { margin: 14px 0 0; font: 650 clamp(2.3rem, 1rem + 5vw, 5rem)/1 var(--grot); letter-spacing: -0.03em; }
.about-lede { margin: 22px 0 0; font: 400 clamp(1.2rem, 1rem + .8vw, 1.5rem)/1.4 var(--grot); max-width: 38rem; }
.about-by { margin: 6px 0 0; font: 400 .75rem/1.5 var(--mono); color: var(--muted); }
.about-case { margin: 14px 0 0; }
.about-toc { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); }
.about-toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 .8125rem/1.4 var(--mono); }
.about-toc a { color: var(--ink); }
.row .prose > * + * { margin-top: 14px; }
.prose p { font-size: 1.0625rem; line-height: 1.6; max-width: 38rem; }
.links, .files, .fixes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 44rem; }
.links li, .files li, .fixes li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.files li { padding: 14px 0; }
.files a { font-weight: 700; }
.file-meta { display: block; margin-top: 2px; font: 400 .75rem/1.5 var(--mono); color: var(--muted); }
.file-text { display: block; margin-top: 6px; max-width: 38rem; }
.about-back { margin: 8px 0 0; font: 500 .8125rem/1.4 var(--mono); }

/* ------------------------------------------------------------ 404 */
.missing { padding-bottom: clamp(24px, 8vh, 96px); }
.missing > .label { margin-top: clamp(36px, 9vh, 100px); }
.missing .answer { margin-top: 14px; font-weight: 650; }
.missing .lede { margin-top: 22px; }
.missing-link { margin: 32px 0 0; }
.missing-link .primary { display: inline-block; text-decoration: none; }

/* En delt lenke, en park eller en kommune: forsiden skal ikke blinke fram før svaret er tegnet (api/side.js setter data-mode) */
body[data-mode] .start { display: none; }
body[data-mode] main { min-height: 70vh; }
/* Sidene for en park eller kommune: navnet stort, fakta under litt mindre enn setningen i svaret */
body[data-mode="park"] .answer .s2, body[data-mode="park"] .answer .s3,
body[data-mode="kommune"] .answer .s2, body[data-mode="kommune"] .answer .s3 { font-size: clamp(1.25rem, .9rem + 1.5vw, 2.25rem); max-width: 30ch; }

/* ------------------------------------------------------------ parken i 3D (park3d.js), valgfritt på parksidene */
.p3-open { margin-top: 14px; }
.p3 { margin: 0; }
.p3-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.p3 .views { display: flex; flex-wrap: wrap; gap: 6px; }
.p3 .view-btn { font: 500 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-height: 36px; cursor: pointer; }
.p3 .view-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.p3-stage { position: relative; }
.p3-stage canvas { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: pan-y; cursor: grab; }
.p3-stage canvas:active { cursor: grabbing; }
.p3 .north { position: absolute; left: 0; top: 0; pointer-events: none; font: 500 .6875rem/1 var(--mono); letter-spacing: .08em; color: var(--muted); transform: translate(-50%, -50%); }
.p3 .wdir { position: absolute; left: 0; top: 4px; display: flex; align-items: center; gap: 6px; pointer-events: none; font: 500 .625rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.p3 .wdir svg { display: block; overflow: visible; }
.p3 .wdir path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p3 .tag { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -100%); padding-bottom: 12px; white-space: nowrap; font: 500 .625rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.p3 .tag::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 9px; background: var(--muted); }
.p3 .step { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -50%); font: 500 .5625rem/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.p3 .hint { position: absolute; left: 0; bottom: 8px; margin: 0; pointer-events: none; font: 500 .625rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: opacity .6s; }
.p3 .zoom { position: absolute; right: 0; bottom: 0; display: flex; gap: 4px; }
.p3 .zoom button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: 400 1.125rem/1 var(--mono); cursor: pointer; }
@media (pointer: coarse) { .p3 .zoom button { width: 44px; height: 44px; } }
.p3-text { margin: 12px 0 0; font: 400 .9375rem/1.5 var(--grot); max-width: 36rem; min-height: 3em; }
.p3-note { margin: 8px 0 0; font: 400 .75rem/1.5 var(--mono); color: var(--muted); max-width: 40rem; }
.p3-open .link { font: 500 .8125rem/1.4 var(--mono); color: var(--ink); min-height: 44px; }
#p3-status:empty { display: none; }

/* Toppstripa: «Slik virker en vindturbin» til høyre, i etikettskrift */
.mast-link { font: 500 .6875rem/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; padding: 12px 0; }
.mast-link[aria-current="page"] { text-decoration: none; color: var(--muted); }
@media (max-width: 420px) { .mast-link { letter-spacing: .05em; } }

/* Forsiden: «Slik virker en vindturbin» med bilde og knapp */
.teaser { margin: clamp(48px, 8vh, 88px) 0 0; padding-top: 20px; border-top: 1px solid var(--ink); display: grid; gap: 20px 40px; max-width: 64rem; align-items: center; }
@media (min-width: 700px) { .teaser { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.teaser-image img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.teaser-title { margin: 8px 0 0; font: 700 clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem)/1.08 var(--grot); letter-spacing: -0.02em; }
.teaser-lede { margin: 12px 0 18px; font: 400 1.0625rem/1.5 var(--grot); max-width: 32rem; }
.teaser .secondary { display: inline-block; text-decoration: none; }
@media (max-width: 420px) { .mast-inner { gap: 10px 14px; } .mast-link { font-size: .625rem; letter-spacing: .03em; } }

/* ------------------------------------------------------------ skisse 27.10.: forsiden som «Norges vindparker».
   Parken der det blåser mest akkurat nå, fra kant til kant øverst; så overskriften og setningen om den; så
   «Hvor er din nærmeste vindpark?». Én spalte, lettere vekt, færre rammer. Overstyrer forsiden over. */
body { overflow-x: clip; }
.start { display: block; }
.start > .hero { margin: 0; padding: 0; border: 0; max-width: none; }
.start .start-view { margin: 0 calc(50% - 50vw); }
.start .sv-stage { height: clamp(340px, 58vw, 72vh); overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent); }
.start .sv-stage { justify-content: center; }
.start .sv-art { position: relative; display: block; flex: none; width: 100%; }
.start .start-view svg { width: 100%; }
.sv-wind { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.start .start-view svg:empty { aspect-ratio: auto; height: 100%; }
.hero-text .sv-actions { gap: 10px 12px; }
.sv-actions .primary, .sv-actions .secondary { display: inline-block; text-decoration: none; }
.sv-info { margin: 18px 0 0; max-width: 36rem; }
.sv-info summary { display: inline-flex; align-items: center; gap: 7px; font: 400 .8125rem/1.4 var(--grot); color: var(--muted); cursor: pointer; list-style: none; }
.sv-info summary::-webkit-details-marker { display: none; }
.sv-info summary::before { content: "i"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font: italic 700 .6875rem/1 Georgia, "Times New Roman", serif; }
.sv-info summary:hover, .sv-info[open] summary { color: var(--ink); }
.sv-note { margin: 8px 0 0; font: 400 .8125rem/1.5 var(--grot); color: var(--muted); }
.hero-text { margin-top: clamp(28px, 5vh, 56px); }
.hero-title { margin: 12px 0 0; min-height: 0; font: 650 clamp(2.1rem, 1.1rem + 3.8vw, 4.5rem)/1.02 var(--grot); letter-spacing: -0.03em; max-width: 16ch; }
.hero-text .lede { margin: 20px 0 0; font: 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.45 var(--grot); max-width: 36rem; }
.hero-text .lede .v-husstander { font-weight: 600; }
.hero-text .sv-actions { margin: 24px 0 0; }

.start-main { margin-top: clamp(80px, 16vh, 180px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 48%); column-gap: 16px; align-items: start; }
.start-main > * { grid-column: 1 / -1; min-width: 0; }
.start-main > .start-more { grid-column: 1; }
.start-main > .dots { grid-column: 2; margin: 24px 0 0; }
@media (min-width: 900px) {
  .start-main { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); column-gap: clamp(48px, 7vw, 120px); }
  .start-main > * { grid-column: 1; }
  .start-main > .dots { grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: center; width: 100%; max-width: 30rem; margin: 0; }
}
.dots svg { display: block; width: 100%; height: auto; }
.dot-land { fill: var(--tick); fill-opacity: .35; }
.dot-far { fill: var(--tick); }
.dot-near { fill: var(--ink); }
.dot-you { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.dot-you-label { font: 600 12px var(--grot); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.dots-key .dot-you { stroke: none; }
.near-dots { margin: 0; max-width: min(22rem, 100%); }
.near-dots .dots-note { margin-top: 12px; }
.dots-note { margin: 12px 0 0; font: 400 .875rem/1.6 var(--grot); color: var(--muted); max-width: 30rem; }
.dots-key { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: var(--ink); white-space: nowrap; }
.dots-expl { display: block; margin-top: 4px; }
.dots-key svg { width: 9px; height: 9px; }
.start .answer { margin-top: 0; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); font-weight: 650; line-height: 1.05; }
.start .start-more { margin: 20px 0 0; padding-top: 0; border-top: 0; }
.start .start-more .lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
.start .locate { margin-top: 36px; }
.start .search { margin-top: 28px; padding-top: 0; border-top: 0; }
.start #place-label, .start #examples-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.start .examples { margin-top: 18px; }
.start .examples ul { gap: 4px 20px; }
.start .examples button { border: 0; padding: 4px 0; font: 400 1rem/1.4 var(--grot); color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
.start .examples button:hover, .start .examples button:focus-visible { color: var(--ink); text-decoration-color: var(--ink); }
.start .examples button .v-avstand { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------ skisse 28.10.: resten av parksiden i samme stil som forsiden.
   Én spalte uten streker mellom delene, overskrifter i stedet for etiketter, tallene i setninger. Gjelder også svaret
   for et sted og kommunesiden, som bruker de samme delene. Overstyrer reglene over. */
.sheet { display: flex; flex-direction: column; gap: clamp(80px, 12vh, 136px); margin-top: clamp(64px, 10vh, 120px); }
.takeaways + .sheet { margin-top: clamp(64px, 10vh, 120px); }
.row { display: block; padding: 0; border-top: 0; }
.row-head { position: static; }
.row-title { margin: 0; font: 650 clamp(1.75rem, 1.1rem + 2.2vw, 3rem)/1.05 var(--grot); letter-spacing: -0.025em; max-width: 22ch; }
.row-head .label + .row-title { margin-top: 12px; }
.row-body { max-width: 60rem; margin-top: 22px; }
.row .row-body > * + * { margin-top: 32px; }
.row .row-body > .lede + .lede { margin-top: 16px; }
/* Etiketten over overskriften: bare i svaret for et sted (Parken, Kommunen, Nær deg) og over vinden (Akkurat nå) */
body:not([data-mode="place"]) .row-head .label:not(.wind-label) { display: none; }
body:not([data-mode="place"]) .row-head .label:not(.wind-label) + .row-title { margin-top: 0; }
.wind-label { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.row .lede { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.45; max-width: 38rem; }
.row .lede .v-fart, .row .lede .v-kast, .row .lede .v-husstander, .row .lede .v-per_turbin { font-weight: 600; }
.row .note { font: 400 .875rem/1.55 var(--grot); max-width: 38rem; }
.lines > * + * { margin-top: 16px; }
.lines > .lede + .note { margin-top: 10px; }
.lines:empty, .specs:empty, .lines:not(:has(> :not(:empty))) { display: none; }

/* Delene i en rad: overskrift i grotesk, ikke etikett. På parksiden er turbinene og hele parken egne deler, med
   overskrifter like store som radene (raden «Parken» har ingen overskrift der, for navnet står øverst). */
.row .part > * + * { margin-top: 20px; }
.row .part > .part-title + * { margin-top: 18px; }
.row .part > * + .chart { margin-top: 40px; }
.row-body > .part + .part { margin-top: 64px; }
body[data-mode="park"] #row-park > .row-head { display: none; }
body[data-mode="park"] #row-park > .row-body { margin-top: 0; }
body[data-mode="park"] #row-park .part-title { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; }
body[data-mode="park"] #row-park .part > .part-title + * { margin-top: 28px; }
body[data-mode="park"] #row-park .row-body > #part-park { margin-top: clamp(80px, 12vh, 136px); }

/* Faktalista: etiketten over verdien, to spalter, ingen streker */
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; max-width: 34rem; }
.specs > div { min-width: 0; }
.specs dt, .specs dd { border-top: 0; padding: 0; }
.specs dt { font: 400 .875rem/1.4 var(--grot); letter-spacing: 0; text-transform: none; color: var(--muted); }
.specs dd { margin: 3px 0 0; font: 500 1.0625rem/1.35 var(--grot); }
.pair { align-items: center; gap: 28px 48px; }

/* Tallene: uten streker over, lettere og mindre */
.figures { gap: 0 20px; }
@media (min-width: 800px) { .figures { gap: 0 32px; } }
.figure, .figure.lead { border-top: 0; padding: 0 0 26px; }
.figure .fig-value { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); }
.figure.lead .fig-value { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }
.figure .fig-text { margin-top: 6px; font: 400 .9375rem/1.45 var(--grot); color: var(--muted); max-width: 30ch; }
.figure.lead .fig-text, .figure.wide .fig-text { max-width: 38ch; }

/* Grafene: tittelen i grotesk over setningen og grafen */
.row figure > figcaption.label { font: 600 1rem/1.35 var(--grot); letter-spacing: 0; text-transform: none; color: var(--ink); }
.rank .rank-line { margin-top: 6px; }
.chart .lede, .chart .rank-line { font-size: 1.0625rem; max-width: 38rem; }

.ice { padding-left: 0; border-left: 0; font-size: .9375rem; color: var(--muted); max-width: 38rem; }
.explain { font: 500 1rem/1.4 var(--grot); }

/* «Hvor langt er det fra deg?» uten strek over */
.page-cta { border-top: 0; padding-top: 0; }
.cta-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.share { margin-top: clamp(80px, 12vh, 136px); }
.share .secondary { font-size: .9375rem; padding: 11px 16px; }

/* ------------------------------------------------------------ skisse 28.10.: landskapet øverst på forsiden henger sammen
   med overskriften. Brede skjermer: landskapet fyller første skjermbilde, og overskriften, setningen og knappene står i
   det, nede til venstre, med landskapet tonet ut bak teksten. Smale skjermer: teksten begynner i den utonede kanten
   nederst i landskapet. Turbinene er større og tydeligere enn terrenget. */
.start .start-view { position: relative; }
.start-view .t line { stroke-opacity: .9; stroke-width: 1.5; }
.start .hero-text { position: relative; z-index: 1; margin-top: -40px; }
.start .sv-stage { height: clamp(360px, 56svh, 540px); }
@media (min-width: 900px) {
  .start > .hero { position: relative; }
  .start .sv-stage { height: clamp(600px, calc(100svh - 71px), 1080px); align-items: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); }
  .start .sv-art { transform: translateX(11%); }   /* parken mot høyre (tegningen er 30 % bredere enn skjermen), teksten til venstre */
  .start .start-view::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 95% at 0% 100%, var(--bg) 52%, transparent 100%); }
  .start .hero-text { position: absolute; left: 0; bottom: clamp(40px, 7vh, 88px); margin: 0; max-width: 40rem; }
}