/* fragrance.dk - blomme, rav og creme; Bodoni til overskrifter, Hanken Grotesk til tekst */
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-400-700-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --blomme: #2a1b2c;
  --blomme-2: #3b2840;
  --creme: #f5efe6;
  --creme-2: #ebe2d4;
  --rav: #d79a46;
  --rav-dyb: #9a6420;
  --rose: #b65a6e;
  --blaek: #251a26;
  --daempet: #66576a;
  --linje: #d8ccbb;
  --top: #ecc98a;
  --hjerte: #c4708a;
  --base: #6b3a4f;
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --tekst: "Hanken Grotesk", system-ui, sans-serif;
  --maal: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--creme); color: var(--blaek); font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.65; font-weight: 400; }
::selection { background: var(--top); color: var(--blomme); }
svg { max-width: 100%; }
a { color: var(--rav-dyb); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--rose); }
:focus-visible { outline: 2px solid var(--rav); outline-offset: 3px; }

.ramme { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.spring { position: absolute; left: -999px; top: 0; background: var(--blomme); color: var(--creme); padding: .5rem 1rem; z-index: 5; }
.spring:focus { left: 1rem; top: 1rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); margin: .2em 0 .4em; }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); margin: 1.7em 0 .5em; }
p, li, dd { max-width: var(--maal); }
.overlinje { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin: 0; }
.indledning { font-size: 1.22rem; line-height: 1.55; color: var(--daempet); font-weight: 300; }

/* Top */
.top { background: var(--blomme); color: var(--creme); }
.top-ind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; padding: 1rem 0; }
.ordmaerke { font-family: var(--display); font-style: italic; font-size: 1.7rem; color: var(--creme); text-decoration: none; letter-spacing: .01em; }
.ordmaerke span { color: var(--rav); font-style: normal; font-size: .8em; }
.menu { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; }
.menu a { color: var(--creme-2); text-decoration: none; font-size: .95rem; padding: .25rem 0; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--rav); border-bottom-color: var(--rav); }

/* Knapper */
.knapper { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.knap { display: inline-block; padding: .85rem 1.5rem; border-radius: 999px; background: var(--rav); color: var(--blomme); text-decoration: none; font-weight: 600; border: 1px solid var(--rav); }
.knap:hover { background: var(--top); color: var(--blomme); }
.knap-lys { background: transparent; color: inherit; border-color: currentColor; }
.knap-lys:hover { background: rgba(236, 201, 138, .15); color: inherit; }
.pil { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.pil::after { content: " \2192"; }

/* Forside */
.helt { background: var(--blomme); color: var(--creme); padding: clamp(2.5rem, 7vw, 6rem) 0 clamp(3rem, 7vw, 6rem); }
.helt .indledning { color: #d9cbd6; }
.helt .overlinje { color: var(--rav); }
.helt-ind { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.helt h1 { font-style: italic; font-weight: 400; }
.helt-figur .pyramide-fig { margin: 0; }
.helt .pyramide .lag { stroke: var(--blomme); }

.sektion { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.tre-spalter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.tre-spalter article { border-top: 1px solid var(--blaek); padding-top: 1rem; }
.tre-spalter h2 { margin-top: .2rem; }
.tal { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--rose); margin: 0; }
.sektion-moerk { background: var(--creme-2); }
.to-spalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.to-spalter h2 { margin-top: 0; }
.trin { padding-left: 1.3rem; }
.trin li { margin-bottom: .6rem; padding-left: .3rem; }
.trin li::marker { font-family: var(--display); font-style: italic; color: var(--rose); }

/* Tekstsider */
.tekstside { padding: clamp(2rem, 5vw, 4rem) 0 4rem; }
.side-top { max-width: 52rem; margin-bottom: 2.5rem; }
.artikel { max-width: 46rem; }
.liste { padding-left: 1.2rem; }
.liste li { margin-bottom: .7rem; }
.liste li::marker { color: var(--rav); }

/* Pyramide */
.pyramide-fig { margin: 0; }
.pyramide { display: block; width: 100%; height: auto; }
.pyramide .lag { stroke: var(--creme); stroke-width: 2; }
.pyramide .lag-top { fill: var(--top); }
.pyramide .lag-hjerte { fill: var(--hjerte); }
.pyramide .lag-base { fill: var(--base); }
.pyramide .lag-navn { font-family: var(--display); font-style: italic; font-size: 26px; fill: var(--blomme); }
.pyramide .lag-navn:last-of-type { fill: var(--creme); }
.pyramide-fig figcaption { font-size: .9rem; color: var(--daempet); margin-top: .8rem; max-width: 30rem; }
.pyramide-side { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: 3rem; }
.lag-boks { padding: 0 0 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--linje); }
.lag-boks h2 { margin: 0 0 .2rem; display: flex; align-items: center; gap: .6rem; }
.prik { width: .9rem; height: .9rem; border-radius: 50%; flex: none; }
.prik-top { background: var(--top); } .prik-hjerte { background: var(--hjerte); } .prik-base { background: var(--base); }
.tid { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); margin: 0 0 .5rem; font-weight: 600; }
.eks { font-style: italic; color: var(--daempet); }

/* Familier */
.familier { list-style: none; padding: 0; margin: 0 0 4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1.6rem; }
.familie { scroll-margin-top: 1rem; }
.familie .farve { display: block; width: 2.6rem; height: 2.6rem; border-radius: 50%; margin-bottom: .8rem; }
.familie h2 { margin: 0 0 .4rem; font-size: 1.5rem; }
.familie p { margin: 0 0 .5rem; font-size: .98rem; }
.noter { font-style: italic; color: var(--daempet); font-size: .95rem; }
.familie-citrus .farve { background: #e8c548; }
.familie-blomstret .farve { background: #d98ba0; }
.familie-traeagtig .farve { background: #7b5a3c; }
.familie-ambra .farve { background: #b5642a; }
.familie-gourmand .farve { background: #8a4f2f; box-shadow: inset 0 0 0 .55rem #e4bf8c; }
.familie-chypre .farve { background: #5e6b3b; }
.familie-fougere .farve { background: #8b86b8; }
.familie-aromatisk .farve { background: #6f9a6a; }

.find { background: var(--blomme); color: var(--creme); padding: clamp(1.5rem, 4vw, 3rem); border-radius: 4px; scroll-margin-top: 1rem; }
.find .overlinje { color: var(--rav); }
.find-hoved h2 { margin: .2rem 0 .5rem; }
.find-hoved p { color: #d9cbd6; }
.find-ind { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; align-items: start; }
.guide fieldset { border: 0; margin: 0 0 1.4rem; padding: 0; }
.guide legend { font-family: var(--display); font-size: 1.25rem; margin-bottom: .6rem; padding: 0; }
.guide label { display: flex; gap: .6rem; align-items: center; padding: .45rem .8rem; margin-bottom: .35rem; border: 1px solid rgba(245, 239, 230, .2); border-radius: 999px; cursor: pointer; }
.guide label:hover { border-color: var(--rav); }
.guide label:has(input:checked) { background: rgba(215, 154, 70, .18); border-color: var(--rav); }
.guide input { accent-color: var(--rav); width: 1rem; height: 1rem; margin: 0; flex: none; }
.resultat { background: var(--creme); color: var(--blaek); padding: 1.6rem; border-radius: 4px; position: sticky; top: 1rem; }
.resultat .overlinje { color: var(--rose); }
.res-navn { font-family: var(--display); font-style: italic; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; margin: .2rem 0 .6rem; }
.res-styrke { font-weight: 600; }
.res-ogsaa { color: var(--daempet); margin-bottom: 0; }

/* Koncentration */
.soejler { margin: 0 0 2.5rem; max-width: 48rem; }
.soejler svg { display: block; width: 100%; height: auto; }
.soejler .akse line { stroke: var(--linje); stroke-width: 1; }
.soejler .akse text { font-family: var(--tekst); font-size: 15px; fill: var(--daempet); }
.soejler .navn { font-family: var(--display); font-size: 21px; fill: var(--blaek); }
.soejler .vaerdi { font-family: var(--tekst); font-size: 17px; font-weight: 600; fill: var(--blaek); }
.soejler .spaend-0 { fill: var(--base); } .soejler .spaend-1 { fill: var(--hjerte); } .soejler .spaend-2 { fill: var(--rav); } .soejler .spaend-3 { fill: var(--top); }
.soejler figcaption { font-size: .9rem; color: var(--daempet); }
.typer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin: 0 0 2rem; max-width: 56rem; }
.typer dt { font-family: var(--display); font-size: 1.35rem; }
.typer dt span { font-family: var(--tekst); font-size: .85rem; color: var(--rose); font-weight: 600; margin-left: .4rem; white-space: nowrap; }
.typer dd { margin: .2rem 0 0; color: var(--daempet); }

.to-kolonner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-bottom: 1rem; }
.to-kolonner h2 { margin-top: 0; }

/* Fod */
.bund { background: var(--blomme); color: var(--creme-2); padding: 2.5rem 0; margin-top: 3rem; }
.bund-ind { display: grid; grid-template-columns: auto 1fr; gap: .5rem 2rem; align-items: baseline; }
.bund-navn { font-family: var(--display); font-style: italic; font-size: 1.5rem; margin: 0; color: var(--creme); }
.bund-navn span { color: var(--rav); font-style: normal; font-size: .8em; }
.bund-tekst { margin: 0; color: #c9b9c6; font-size: .95rem; }
.bund nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: .8rem; }
.bund nav a { color: var(--creme-2); }
.bund nav a:hover { color: var(--rav); }

@media (max-width: 900px) {
  .familier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .find-ind, .pyramide-side { grid-template-columns: minmax(0, 1fr); }
  .pyramide-side .pyramide-fig { max-width: 26rem; }
  .resultat { position: static; }
}
@media (max-width: 760px) {
  .helt-ind, .tre-spalter, .to-spalter, .to-kolonner, .typer { grid-template-columns: minmax(0, 1fr); }
  .helt-figur { max-width: 20rem; }
  .bund-ind { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .soejler { margin-inline: -.5rem; }
  .familier { grid-template-columns: minmax(0, 1fr); }
  .menu { gap: .2rem 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .knap, .guide label { transition: background-color .15s ease, border-color .15s ease; }
}
.forside .bund { margin-top: 0; }