/* Nærmeste turbin · stil
   Et måleark. Svaret i Schibsted Grotesk (tegnet for Schibsted i Oslo), etiketter og kilder
   i IBM Plex Mono. Én farge i to moduser; 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;
  --grot: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0A0F11; --ink: #DCE4E2; --muted: #8D9BA1; --line: rgba(220, 228, 226, .16); --tick: #5A686E; }
}

* { 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: 0; 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(48px, 12vh, 120px) 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: 800; }
.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; }

/* 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; }
.field input {
  flex: 1 1 14rem; min-width: 0; font: 400 1.25rem/1.2 var(--grot); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 12px 0;
}
.field input::-webkit-search-cancel-button { display: none; }
.hint { margin: 8px 0 0; font: 400 .8125rem/1.5 var(--mono); color: var(--muted); }
.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 { display: block; font: 400 .75rem/1.5 var(--mono); color: var(--muted); }

/* 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; }
.takeaways .take { margin: 8px 0 0; font: 400 1.1875rem/1.4 var(--grot); max-width: 30rem; }
.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: 700 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: 700 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-label { color: var(--ink); }

/* 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; }
/* 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(--ink); stroke: var(--bg); stroke-width: 2.5; }
.chart .you-label { font: 700 13px var(--grot); fill: var(--ink); }
.norway .tick-label { font-size: 11px; }

/* 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 {
  position: relative; 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 { 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 { 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(--ink); }
.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; }

/* Instrumentet: kompass med avstand, og avlesninger ved siden av */
.instrument { display: grid; gap: 8px 44px; justify-items: center; }
@media (min-width: 560px) { .instrument { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; align-items: center; } }
.dial { margin: 0; }
.dial svg { display: block; width: min(232px, 62vw); height: auto; overflow: visible; margin: 14px; }
.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); }
.readout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0; width: 100%; }
.readout > div { border-top: 1px solid var(--line); padding: 10px 0 14px; min-width: 0; }
.readout dt { font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.readout dd { margin: 4px 0 0; font: 700 clamp(1.3rem, 1.05rem + 1vw, 1.875rem)/1.1 var(--grot); letter-spacing: -0.02em; }
.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; }
.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 .north { font: 500 9px var(--mono); fill: var(--muted); }
.dial .ray { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.dial .tip { fill: var(--ink); }
.dial .you { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }


.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-width: .7; stroke-linejoin: 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 .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 .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: 0; 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); } }
@media (prefers-reduced-motion: reduce) { .spin { 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 */
footer { border-top: 1px solid var(--line); padding-block: 20px 48px; font: 400 .75rem/1.65 var(--mono); color: var(--muted); display: grid; gap: 16px; margin-top: clamp(40px, 8vh, 96px); }
@media (min-width: 800px) { footer { grid-template-columns: 1fr 1fr; gap: 16px 48px; } }
footer p, footer ul { margin: 0; }
footer p + p { margin-top: .7em; }
footer ul { padding: 0; list-style: none; }

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

/* Kilder og forbehold: lukket til man ber om det */
.sources summary { cursor: pointer; font: 500 .6875rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: "+ "; }
.sources[open] summary::before { content: "− "; }
.sources[open] summary { margin-bottom: 12px; }
.sources p { max-width: 48rem; margin: 0 0 .7em; }
.sources ul { margin-top: 12px; }
footer .sources { grid-column: 1 / -1; }