/* ==================================================================
   MESTERTEGN · the marketing site's shared chrome.
   Governed by docs/MESTERTEGN_BRAND.md; docs/brand/mestertegn-v2.html
   wins on pixel values. Okseblod is the ONLY strong colour.

   Extracted from index.html when /gennemgang/ arrived: two static
   pages that each declare their own palette are two palettes, and the
   second one drifts. Page-specific layout stays in each page's own
   <style>; everything a visitor recognises as "the same site" —
   tokens, type, nav, buttons, footer — lives here.
   ================================================================== */
:root{
  --blaek:#2A241E;
  --blaek-dyb:#241F1B;
  --okseblod:#7A2A20;
  --okseblod-dyb:#5E1F17;
  --papir:#FBFAF8;
  --sand:#F3EEE6;
  --streg:#ECE7DE;
  --bly:#8D857A;
  --kort:#FFFFFF;
  --broed:#5A5248;
}
*{margin:0;padding:0;box-sizing:border-box}
/* `hidden` skal vinde over enhver display-regel nedenfor — en sektion, der er skjult indtil
   der er indhold til den, må ikke dukke op, fordi et grid senere sætter display. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Inter',system-ui,sans-serif;background:var(--papir);color:var(--blaek);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--okseblod);outline-offset:2px;border-radius:3px}
::selection{background:rgba(122,42,32,.14)}

.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bly);font-weight:500}

/* ---------- knapper ---------- */
.btn{display:inline-block;padding:12px 22px;border-radius:9px;font-size:14px;font-weight:600;font-family:inherit;border:none;cursor:pointer}
.btn.primary{background:var(--okseblod);color:#FBF7F2}
.btn.primary:hover{background:var(--okseblod-dyb)}
.btn.ghost{color:var(--blaek);border:1px solid var(--streg);background:#fff}
.btn.ghost:hover{border-color:var(--bly)}
.btn[disabled]{opacity:.55;cursor:progress}

/* Et CTA-par: primær + sekundær, og mikroteksten der afvæbner den primære. */
.cta-row{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-note{margin-top:12px;font-size:12.5px;color:var(--bly)}
.cta-block{margin-top:34px;text-align:center}
.cta-block .cta-row{margin-top:0}
/* Venstrestillet variant til sektioner, hvor teksten ikke er centreret. */
.cta-block.left,.cta-block.left .cta-row{text-align:left;justify-content:flex-start}

/* ---------- nav ---------- */
nav{border-bottom:1px solid var(--streg);background:var(--papir)}
.nav-inner{max-width:1020px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:22px}
.lockup{display:flex;align-items:center;gap:10px}
.lockup .w{font-family:'Roboto Slab',serif;font-weight:500;font-size:17px;letter-spacing:.055em}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--broed)}
.nav-links a:hover{color:var(--blaek)}
.nav-act{display:flex;gap:10px;align-items:center}
/* The menu LINKS may collapse on a phone; the login action may not (owner rule, 2026-08-14):
   a returning customer in a fresh browser finds the way in from the top bar, always. */
@media(max-width:820px){.nav-links{display:none}}
@media(max-width:520px){.nav-act{gap:7px}.nav-act .btn{padding:9px 12px;font-size:13px;white-space:nowrap}.nav-act .nav-lang{display:none}}
/* Uden nav-links skubber intet handlingerne til højre — margin-left:auto sidder på .nav-links. */
.nav-inner > .nav-act:nth-child(2){margin-left:auto}

footer{border-top:1px solid var(--streg);padding:34px 0 46px;margin-top:0}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--bly)}
.foot .lockup .w{font-size:15px}