/* posh.dk - aftenselskab: blæksort, elfenben og champagne */
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-vf.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --blaek: #17141a;
  --blaek-2: #241f28;
  --elfenben: #f7f3ec;
  --elfenben-2: #eee7da;
  --hvid: #fdfbf7;
  --champagne: #9a7a43;
  --champagne-lys: #d6bb85;
  --aubergine: #4a2140;
  --daempet: #5f5a62;
  --linje: #dcd3c3;
  --display: "Bodoni Moda", Didot, Georgia, serif;
  --tekst: "Hanken Grotesk", system-ui, sans-serif;
  --maal: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--elfenben); color: var(--blaek); font-family: var(--tekst); font-size: 1.06rem; line-height: 1.66; }
::selection { background: var(--aubergine); color: #fff; }
a { color: var(--aubergine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blaek); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); letter-spacing: -0.02em; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
p { margin: 0 0 1em; }

.ramme { width: min(100% - 32px, 1100px); margin-inline: auto; }
.spring { position: absolute; left: -999px; top: 0; background: var(--blaek); color: #fff; padding: .6em 1em; z-index: 10; }
.spring:focus { left: 16px; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { background: var(--blaek); color: var(--elfenben); }
.top-ind { display: flex; align-items: center; justify-content: space-between; gap: .8rem 2rem; padding-block: 1rem; flex-wrap: wrap; }
.ordmaerke { color: var(--elfenben); text-decoration: none; display: inline-flex; align-items: baseline; }
.ordmaerke:hover { color: #fff; }
.posh { font-family: var(--display); font-style: italic; font-size: 1.9rem; line-height: 1; }
.ordmaerke .dk { font-size: .9rem; color: var(--champagne-lys); letter-spacing: .05em; margin-left: .1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.6rem; font-size: .9rem; letter-spacing: .04em; }
.menu a { color: #d9d3dc; text-decoration: none; padding-block: .2rem; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; border-bottom-color: var(--champagne-lys); }

.overlinje { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne-lys); margin-bottom: 1.3rem; }
.helt { background: var(--blaek); color: var(--elfenben); padding-block: clamp(3rem, 9vw, 7rem) clamp(3rem, 8vw, 6rem); text-align: center; }
.helt-ind { max-width: 860px; }
.helt h1 em { color: var(--champagne-lys); }
.helt .indledning { margin-inline: auto; color: #d6d0d8; }
.indledning { font-size: 1.2rem; line-height: 1.6; max-width: 58ch; }
.helt .knapper { justify-content: center; }

.knapper { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.knap { display: inline-block; background: var(--champagne-lys); color: var(--blaek); text-decoration: none; padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; letter-spacing: .02em; }
.knap:hover { background: #e6cf9f; color: var(--blaek); }
.knap-lys { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.knap-lys:hover { background: transparent; color: var(--champagne-lys); }
.tekstside .knap { background: var(--blaek); color: var(--elfenben); }
.tekstside .knap:hover { background: var(--aubergine); color: #fff; }
.tekstside .knap-lys { background: transparent; color: var(--blaek); }

.sektion { padding-block: clamp(3rem, 7vw, 5rem); }
.koder h2 { text-align: center; margin-bottom: 2rem; }
.skala { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; border-top: 1px solid var(--blaek); }
.skala li { border-bottom: 1px solid var(--linje); }
.skala a { display: grid; grid-template-columns: 13rem 1fr; gap: .3rem 2rem; padding: 1.1rem .2rem; text-decoration: none; color: var(--daempet); transition: background .15s ease; }
.skala a:hover { background: var(--hvid); color: var(--daempet); }
.skala-navn { font-family: var(--display); font-size: 1.45rem; color: var(--blaek); line-height: 1.2; }
.skala a:hover .skala-navn { font-style: italic; }
.sektion-moerk { background: var(--aubergine); color: var(--elfenben); }
.sektion-moerk a { color: var(--elfenben); }
.to-spalter { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: start; }
.punkter { padding-left: 1.4rem; }
.punkter li { margin-bottom: .8rem; }
.punkter li::marker { font-family: var(--display); font-style: italic; color: var(--champagne-lys); }
.genveje { display: grid; gap: 1rem; }
.genvej { display: flex; flex-direction: column; gap: .25rem; padding: 1.4rem 1.5rem; border-radius: 4px; background: rgba(255,255,255,.07); text-decoration: none; color: #e7dfe6 !important; transition: background .15s ease; }
.genvej:hover { background: rgba(255,255,255,.13); }
.genvej-titel { font-family: var(--display); font-size: 1.5rem; color: #fff; }

.tekstside { padding-block: clamp(2.2rem, 5vw, 3.8rem) 4.5rem; }
.side-top { margin-bottom: 2.4rem; max-width: 780px; }
.artikel { max-width: var(--maal); margin-top: 2.5rem; }
.artikel h2 { margin-top: 2.3rem; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.liste { padding-left: 1.2rem; }
.liste li { margin-bottom: .6rem; }
.liste li::marker { color: var(--champagne); }

.vaelger { margin-bottom: 1.8rem; }
.v-titel { font-size: .82rem; font-family: var(--tekst); letter-spacing: .16em; text-transform: uppercase; color: var(--daempet); margin-bottom: .8rem; font-weight: 600; }
.v-knapper { display: flex; flex-wrap: wrap; gap: .5rem; }
.v-knap { font: inherit; font-size: .97rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--blaek); background: transparent; color: var(--blaek); cursor: pointer; transition: background .15s ease, color .15s ease; }
.v-knap:hover { background: var(--hvid); }
.v-knap[aria-pressed="true"] { background: var(--blaek); color: var(--elfenben); }
.koder-liste { display: grid; gap: 1.2rem; max-width: 860px; }
.kode { background: var(--hvid); padding: clamp(1.3rem, 3.5vw, 2.2rem); border-radius: 4px; scroll-margin-top: 1rem; }
.js .kode:not(.valgt) { display: none; }
.kode-kort { color: var(--daempet); font-size: 1.08rem; }
.kode-toej { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.4rem 0; padding-block: 1.2rem; border-block: 1px solid var(--linje); }
.kode-toej dt { font-family: var(--display); font-style: italic; font-size: 1.25rem; margin-bottom: .3rem; color: var(--aubergine); }
.kode-toej dd { margin: 0; }
.kode-note { margin: 0; font-size: .97rem; color: var(--daempet); }

.kuvert-fig { margin: 0 0 1rem; background: var(--hvid); border-radius: 4px; padding: clamp(.8rem, 3vw, 2rem); max-width: 900px; }
.kuvert { width: 100%; height: auto; display: block; }
.kuvert-fig figcaption, .bestik-par figcaption { font-size: .95rem; color: var(--daempet); text-align: center; margin-top: .5rem; }
.tal { fill: #fff; stroke: var(--blaek); stroke-width: 2; }
.tal-ind { fill: none; stroke: var(--champagne-lys); stroke-width: 1.5; }
.serviet { fill: var(--elfenben-2); stroke: var(--champagne); stroke-width: 1.5; }
.bestik path, .bestik rect, .bestik ellipse, .bestik-enkel { fill: var(--blaek); }
.glas { fill: none; stroke: var(--aubergine); stroke-width: 2.5; }
.maerk text { font-family: var(--tekst); font-size: 17px; fill: var(--daempet); letter-spacing: .04em; }

.regelraekke { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.regelraekke h2 { font-size: 1.7rem; }
.bestik-sektion { margin-top: 2.5rem; padding: clamp(1.3rem, 3.5vw, 2.2rem); background: var(--hvid); border-radius: 4px; max-width: 860px; }
.bestik-sektion h2 { font-size: 1.7rem; }
.bestik-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0 1.4rem; }
.bestik-par figure { margin: 0; }
.lille-tal { display: block; width: min(180px, 100%); margin-inline: auto; }
.bestik-par strong { display: block; font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--blaek); font-weight: 400; }

.opbygning { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.opbygning li { border-top: 1px solid var(--blaek); padding-top: 1rem; }
.opbygning h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.opbygning p { color: var(--daempet); margin: 0; }
.tal-nr { font-family: var(--display); font-style: italic; font-size: 2.4rem; color: var(--champagne); line-height: 1; }
.taletid { background: var(--blaek); color: var(--elfenben); padding: clamp(1.3rem, 3.5vw, 2.2rem); border-radius: 4px; max-width: 860px; }
.taletid h2 { font-size: 1.7rem; }
.taletid > p { color: #d6d0d8; }
.taletid textarea { width: 100%; font: inherit; font-size: 1rem; line-height: 1.55; padding: .8rem 1rem; border-radius: 4px; border: 1px solid #5d5463; background: var(--blaek-2); color: var(--elfenben); resize: vertical; }
.taletid-svar { font-size: 1.15rem; margin: 1rem 0 .3rem; }
.taletid-svar strong { font-family: var(--display); font-weight: 500; font-size: 1.7rem; color: var(--champagne-lys); }
.adskil { color: #8e8592; margin-inline: .4rem; }
.taletid .note { font-size: .9rem; color: #b9b1bc; margin: 0; }

.bund { background: var(--blaek); color: #cfc8d1; padding-block: 2.5rem; }
.bund-ind { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem 2rem; align-items: center; }
.bund-navn { margin: 0; color: var(--elfenben); display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.bund-under { font-size: .92rem; color: #b9b1bc; }
.bund nav { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; font-size: .9rem; }
.bund a { color: #e7e0e8; text-decoration: none; }
.bund a:hover { color: var(--champagne-lys); }

@media (max-width: 860px) {
  .to-spalter, .regelraekke { grid-template-columns: 1fr; gap: 2rem; }
  .opbygning { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .skala a { grid-template-columns: 1fr; }
  .kode-toej { grid-template-columns: 1fr; gap: 1rem; }
  .menu { gap: .2rem 1rem; }
  .helt { text-align: left; }
  .helt .knapper { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }