/* Runde 49 (Anders 04.11): analysesiderne og oversigten i V42's udtryk. Skrift som forsiden (LAAST: Newsreader 600 i titler,
   Hanken Grotesk i menu, etiketter og knapper; etiketterne i vægt 500). Bordet, pappet og papiret er Skuffens (sek/analyser/stil.css,
   teksturerne fra materiale.js via analyser.js). Uden JS står farverne alene. */
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: normal; font-display: swap; src: url(../assets/fonte/newsreader-latin-opsz-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: italic; font-display: swap; src: url(../assets/fonte/newsreader-latin-opsz-italic.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url(../assets/fonte/hanken-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url(../assets/fonte/hanken-grotesk-latin-500-normal.woff2) format("woff2"); }

:root { --sort: #0b0b0b; --creme: #F7F3EC; --blekk: #111111; --graa-papir: #5f5a52;
  --serif: "Newsreader", Georgia, serif; --sans: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --kant: clamp(20px, 3.4vw, 56px); --topH: 72px; }
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--creme); font: 400 clamp(19px, 1.32vw, 21px)/1.55 var(--serif); overflow-x: clip; min-height: 100vh; }
img { max-width: 100%; }
a { color: inherit; }

/* Bordet og lampen (Skuffen) */
.bord { background-color: #121110; background-image: var(--bord); background-size: 1024px; }
.lampe { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(255, 249, 238, .085), rgba(255, 249, 238, 0) 70%); }
.papp { background-color: #9b968c; background-image: var(--papp); background-size: 1024px; }
.papir { background-color: #f6f2e9; background-image: var(--papir); background-size: 1200px; color: var(--blekk); }

/* Topbjælken som forsidens (mørk) */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topH); display: flex; align-items: center; gap: 32px; padding: 0 var(--kant);
  background: var(--sort); color: var(--creme); }
.top::after { content: ""; position: absolute; left: var(--kant); right: var(--kant); bottom: 0; height: 1px; background: currentColor; opacity: .5; }
.top-logo { display: block; flex: none; padding: 6px 0; }
.top-logo img { display: block; width: 170px; height: auto; }
.top nav { display: flex; gap: 28px; margin-left: auto; font: 500 16px/1.3 var(--sans); }
.top nav a { text-decoration: none; padding: 8px 0; }
.top nav a:hover, .top nav a:focus-visible, .top nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.side { position: relative; z-index: 1; padding: calc(var(--topH) + clamp(40px, 6vw, 96px)) var(--kant) clamp(48px, 6vw, 96px); }

/* Mappen: fane, pap og dokumentet (som hængemappen i Skuffen) */
.mappe { position: relative; max-width: 900px; margin: 0 auto; padding-top: 45px; }
.fane { position: absolute; left: 3%; top: 0; width: 30%; min-width: 200px; height: 46px; border-radius: 9px 9px 0 0; display: flex; align-items: center; justify-content: center; padding: 6px 8px 4px;
  box-shadow: inset 0 2px 0 rgba(255, 250, 240, .24), inset 1px 0 0 rgba(255, 250, 240, .1); }
.fane .etiket { display: block; width: 100%; padding: 6px 8px 5px; text-align: center; font: normal 500 16.5px/1.2 var(--sans); letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 1px 1px rgba(0, 0, 0, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mappe-bak { position: relative; border-radius: 2px; padding: 22px 22px 14px; box-shadow: inset 0 2px 0 rgba(255, 250, 240, .2), 0 30px 60px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .4); }
.ark { display: block; padding: clamp(28px, 4.6vw, 72px) clamp(24px, 5vw, 76px) clamp(32px, 4vw, 60px); box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); }

.sti { font: normal 500 14px/1.4 var(--sans); letter-spacing: .02em; color: var(--graa-papir); margin-bottom: clamp(24px, 3vw, 40px); }
.sti a { text-decoration: none; } .sti a:hover { text-decoration: underline; }
.hode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 32%); column-gap: clamp(28px, 4vw, 56px); align-items: end;
  padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid rgba(17, 17, 17, .25); }
.kat { display: block; margin: 0; font: normal 500 12.5px/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--graa-papir); }
.tit { display: block; margin: 12px 0 0; font: 600 clamp(36px, 4.2vw, 60px)/1.06 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.meta { display: block; margin: 18px 0 0; font: 400 15px/1.4 var(--sans); color: var(--graa-papir); }
.foto { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }

.tekst { max-width: 36em; padding-top: clamp(24px, 3vw, 40px); }
.tekst p, .tekst ul, .tekst ol { margin: 0 0 1em; }
.tekst .ingress { font-size: 1.18em; line-height: 1.45; margin-bottom: 1.2em; }
.tekst h2 { font: 600 clamp(24px, 2vw, 30px)/1.15 var(--serif); letter-spacing: -.006em; margin: 1.5em 0 .5em; }
.tekst ul, .tekst ol { padding-left: 1.3em; }
.tekst li { margin: 0 0 .45em; padding-left: .2em; }
.tekst a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.tekst em { font-style: italic; }
.tilbake { display: inline-block; margin-top: clamp(20px, 3vw, 36px); font: normal 500 15px/1.4 var(--sans); text-decoration: none; }
.tilbake:hover { text-decoration: underline; }

.knapp { display: inline-block; font: normal 500 16px/1 var(--sans); color: var(--blekk); text-decoration: none; padding: 15px 22px; border: 1px solid var(--blekk); }
.knapp-lys { color: var(--creme); border-color: var(--creme); }
.knapp:hover { background: var(--creme); color: var(--blekk); }
.cta { max-width: 900px; margin: clamp(40px, 5vw, 72px) auto 0; text-align: center; }

/* Oversigten: overskriften på bordet og tre mapper */
.oversigt-h1 { margin: 0 0 clamp(40px, 5vw, 72px); font: 600 clamp(54px, 8vw, 138px)/.98 var(--serif); letter-spacing: -.02em; max-width: 8ch; color: var(--creme); }
.mapper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.mappe-lille { max-width: none; margin: 0; }
.mappe-lille .fane { width: 62%; min-width: 0; }
.mappe-lille .mappe-bak { padding: 14px 14px 10px; height: 100%; }
.mappe-lille { display: flex; flex-direction: column; } .mappe-lille .mappe-bak { flex: 1; display: flex; }
.dok { flex: 1; display: flex; flex-direction: column; text-decoration: none; padding: 26px 24px 22px; }
.dok .tit { font-size: clamp(26px, 2.1vw, 34px); line-height: 1.1; }
.dok .meta { margin-top: 12px; }
.dok .foto { margin-top: 20px; aspect-ratio: 4 / 3; }
.dok .les { display: block; margin-top: 18px; font: normal 500 16px/1.2 var(--sans); }
.dok:hover .les, .dok:focus-visible .les { text-decoration: underline; text-underline-offset: 4px; }
.dok:focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; }

/* Bunden som forsidens */
.bund { position: relative; z-index: 1; margin: clamp(56px, 8vw, 120px) var(--kant) 0; padding: 28px 0 40px; border-top: 1px solid rgba(247, 243, 236, .5);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 1.7vw, 28px); row-gap: 22px; font: 400 16px/1.5 var(--sans); color: var(--creme); }
.bund-logo { grid-column: 1 / span 4; width: 200px; height: auto; }
.bund-meny { grid-column: 6 / -1; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.bund a { text-decoration: none; padding: 4px 0; } .bund a:hover { text-decoration: underline; }
.bund-linje { grid-column: 1 / -1; margin: 18px 0 0; }

@media (max-width: 959px) {
  :root { --topH: 96px; }
  .top { flex-wrap: wrap; align-content: center; row-gap: 6px; column-gap: 12px; }
  .top-logo img { width: 140px; }
  .top nav { order: 3; width: 100%; margin: 0; gap: 4px; justify-content: space-between; font-size: 14px; overflow-x: auto; scrollbar-width: none; } /* V50: som forsiden */
  .top nav a { flex: none; white-space: nowrap; padding: 4px 0; }
  .mappe { padding-top: 40px; }
  .fane { height: 41px; min-width: 0; width: 56%; padding: 5px 5px 3px; border-radius: 7px 7px 0 0; }
  .fane .etiket { font-size: 13.5px; padding: 5px 4px 4px; letter-spacing: 0; }
  .mappe-bak { padding: 10px 10px 8px; }
  .ark { padding: 24px 20px 28px; }
  .hode { grid-template-columns: 1fr; row-gap: 22px; }
  .foto { aspect-ratio: 4 / 3; }
  .tit { font-size: clamp(30px, 8.4vw, 44px); }
  .tekst { font-size: 18px; }
  .mapper { grid-template-columns: 1fr; }
  .oversigt-h1 { font-size: clamp(44px, 12vw, 72px); }
  .bund { grid-template-columns: 1fr; }
  .bund > * { grid-column: 1 / -1 !important; }
  .bund-meny { flex-direction: column; }
}
/* V50: som forsiden under 380 px */
@media (max-width: 379px) { .top nav { font-size: 13px; } }
@media (min-width: 700px) and (max-width: 959px) {
  .mapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tekst { font-size: 20px; }
}

/* V51 (Anders 04.11): Anders' billeder. Fotoet ligger i <picture> (4:3 under 960 px, 3:4 ellers); billedet er stadig gitterets element.
   Oversigtens åbningsbillede er et foto lagt på papir på bordet (papirkant og mappens skygge), 3:1 på bred skærm, 3:2 på smal. */
picture { display: contents; } picture > source { display: none; }   /* <source> er ellers en tom blok i gitteret */
.aapning { margin: 0 0 clamp(40px, 5vw, 72px); padding: clamp(8px, .9vw, 14px); box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 30px 60px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .4); }
.aapning img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
@media (max-width: 959px) { .aapning { padding: 6px; } .aapning img { aspect-ratio: 3 / 2; } }

/* V52 (Anders 04.11): åbningsbilledet halvt så højt (6:1 bred, 5:2 smal) og lidt mindre luft under, så analysekortenes top ses over folden ved 2000 × 1060 og 1440 × 900. */
.aapning { margin-bottom: clamp(32px, 3vw, 48px); }
.aapning img { aspect-ratio: 6 / 1; }
@media (max-width: 959px) { .aapning img { aspect-ratio: 5 / 2; } }
/* V53 (runde 53, kun under 700 px): menuen og bundens lenker får 44 px trykflade; rækkerne fylder det samme (negativ margen). */
@media (max-width: 699px) {
  .top nav a { padding: 13px 0; margin: -9px 0; }
  .bund a { padding: 11px 0; }
  .bund-meny { row-gap: 0; }
}
/* V53 runde 5 (kun under 700 px): menuen i 16 px, vandret rulbar række, der toner ud mod højre kant (som forsiden) */
@media (max-width: 699px) {
  .top nav { font-size: 16px; justify-content: flex-start; gap: 22px; flex-wrap: nowrap; width: calc(100% + var(--kant)); margin-right: calc(-1 * var(--kant)); padding-right: 40px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}