/* Vinter – frost, isblå og natblå. Let snefald og bløde snedriver i topbilledet, frostet menulinje. */
:root {
  --c-bg: #f4f8fb; --c-surface: #e6eff6; --c-ink: #1b2a3a; --c-muted: #5a6d80; --c-line: #d3e1ec;
  --c-accent: #2b6cb0; --c-accent-ink: #fff;
  --c-header-bg: rgba(27,42,58,.82); --c-header-ink: #f4f8fb; --c-menu-bg: #1b2a3a; --c-menu-ink: #f4f8fb;
  --hero-overlay: linear-gradient(180deg, rgba(27,42,58,.35) 0%, rgba(188,216,238,.12) 55%, rgba(27,42,58,.5) 100%);
  --hero-fallback: #3d5a78;
  --map-land: #d3e1ec; --map-visited: #2b6cb0; --map-stroke: #f4f8fb; --map-point: #7cc4ff; --map-home: #1b2a3a; --map-hover: #b6cbdc;
  --ice: #bcd8ee;
  --f-head: "Raleway", "Segoe UI", sans-serif;
  --f-body: "Lato", system-ui, sans-serif;
  --radius: 4px;
}
.site-header.scrolled, body.hero-none .site-header { backdrop-filter: blur(10px) saturate(1.2); }
.brand-name { font-weight: 800; letter-spacing: .04em; }
.brand-name::before { content: "❄"; margin-right: .4em; color: var(--ice); }
.menu-d0 > li > a { font-weight: 500; letter-spacing: .03em; }
.menu-d0 > li > a:hover { color: var(--ice); text-decoration: none; }

/* Let snefald + snedriver */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 30px 40px, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 140px 120px, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(2px 2px at 220px 60px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 90px 190px, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60px 100px, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 170px 20px, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size: 260px 220px, 260px 220px, 260px 220px, 260px 220px, 180px 160px, 180px 160px;
  animation: vi-sne 22s linear infinite;
}
@keyframes vi-sne {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 30px 220px, 30px 220px, 30px 220px, 30px 220px, -20px 320px, -20px 320px; }
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; pointer-events: none; z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C40 20 80 22 120 34 S200 54 240 30 S290 24 300 30 V60 H0z' fill='%23dfeaf3'/%3E%3C/svg%3E") 0 0/900px 70px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 48 C50 30 100 34 150 46 S250 56 300 42 V60 H0z' fill='%23f4f8fb'/%3E%3C/svg%3E") 0 0/700px 70px repeat-x;
}
.hero-inner { position: relative; z-index: 1; padding-bottom: calc(clamp(2rem, 6vh, 4.5rem) + 34px); }
.hero-title { font-weight: 800; letter-spacing: .02em; text-shadow: 0 2px 20px rgba(27,42,58,.4); }
.hero-large .hero-title { font-size: clamp(2.8rem, 7.5vw, 5.4rem); }

/* Indhold */
h2, .section-title, .chart figcaption, .prs h2 { font-weight: 700; color: #22405f; }
.section-title::after { content: ""; display: block; width: 56px; height: 3px; margin-top: .5rem; background: linear-gradient(90deg, var(--c-accent), var(--ice)); }
.stat { background: #fff; }
.stat-num { color: var(--c-accent); font-weight: 700; }
.tile { border-radius: 6px; }
.tile::after { background: linear-gradient(transparent 35%, rgba(27,42,58,.78)); }
.tile:hover { box-shadow: 0 0 0 2px var(--ice); }
.tile-type { color: var(--ice); }
.btn { letter-spacing: .03em; }
.ingredients { background: #fff; border: 1px solid var(--c-line); box-shadow: inset 0 4px 0 var(--ice); }
.steps li::before { background: #fff; color: var(--c-accent); border: 2px solid var(--ice); }
.recipe-tips { background: #fff; border-left-color: var(--ice); }
.continents li.on, .chip[aria-pressed="true"] { background: #22405f; border-color: #22405f; color: #fff; }
.site-footer { background: #1b2a3a; color: #b9cad9; border: 0; }
.site-footer a { color: #e6eff6; }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
@media print { .hero::before, .hero::after { display: none; } }