/* ============================================================
   MERCHBART & CO. - club / editorial universe (shared stylesheet)
   ============================================================ */
:root{
  /* Samme palet og skrift som forsiden. Klubben beholder sin egen luft
     og sine stoerre grader - det er der, det redaktionelle praeg
     ligger - men ikke sin egen farve og skrift. */
  --bg:#FFFFFF; --paper:#FFFFFF; --bg-alt:#F4F4F3; --ash:#F4F4F3; --ash-2:#EBEBE9;
  --ink:#0B0B0C; --ink-soft:#2B2B2E; --ink-2:#4F4F52; --mid:#6A6A6E; --mute:#A8A8AC;
  --line:#E4E4E1; --line-soft:#EFEFED;
  --dark:#101011; --dark-soft:#1A1A1C;
  --accent:#E64124; --accent-deep:#C4331A;
  --f:'Switzer',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-display:var(--f);
  --f-sans:var(--f);
  --f-mono:'Geist Mono',ui-monospace,monospace;
  --f-hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-sans);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  font-feature-settings:'ss01','cv11';
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--accent);color:var(--paper);}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.rev.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none;}}

/* ============================================================
   GLOBAL NAV - mirrors merchbart.html frontpage nav exactly
   ============================================================ */
.nav-edges{
  position:fixed;top:36px;left:0;right:0;z-index:59;
  display:flex;justify-content:flex-end;align-items:center;
  padding:0 clamp(20px,5vw,72px);
  pointer-events:none;
}
.nav-edges > *{pointer-events:auto;}
/* .brand - mirrors frontpage merchbart.html brand spec exactly */
.brand{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:4px;
  line-height:1;color:var(--ink);
}
/* Det fulde logo - flag og navnetraek i én figur, som paa forsiden. */
.brand .lockup{display:block;width:165px;height:auto;overflow:visible;}
/* MerchClub har moerke sektioner, og bjaelken ligger frit paa siden uden en
   pille bag sig. Uden det her forsvandt logoet i de moerke - det er
   ikke nyt, men det er tydeligere nu, hvor maerket ER logoet. */
body.nav-moerk .brand{color:var(--paper);}
body.nav-moerk .brand sup{color:rgba(255,255,255,.55);}
/* Boelgen ligger i assets/flag.js. */
.lu-cloth{transform-box:fill-box;transform-origin:0% 50%;}
}
.brand sup{
  font-family:var(--f-mono);
  font-size:9px;color:var(--mid);
  margin-left:2px;vertical-align:super;
  letter-spacing:.06em;
}

.nav-wrap{
  position:fixed;top:36px;left:0;right:0;
  display:flex;justify-content:center;
  z-index:60;pointer-events:none;
}
.nav{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  color:var(--ink);
  border-radius:14px;padding:5px;pointer-events:auto;
  box-shadow:0 6px 26px rgba(14,14,12,.12), inset 0 0 0 1px rgba(14,14,12,.06);
  font-size:13.5px;font-weight:500;letter-spacing:-.005em;
}
.nav-btn{
  padding:9px 14px;border-radius:10px;
  display:inline-flex;align-items:center;gap:8px;color:var(--mid);
  transition:color .2s var(--ease);white-space:nowrap;
}
.nav-btn:hover{color:var(--ink);}
.nav-btn.here{color:var(--ink);font-weight:600;}

/* ---------- MerchClub contextual sub-nav - same pill as top .nav, anchored bottom ---------- */
.co-subnav-wrap{
  position:fixed;bottom:24px;left:0;right:0;
  display:flex;justify-content:center;
  z-index:60;pointer-events:none;
}
.co-subnav{
  display:flex;align-items:center;gap:4px;
  background:rgba(14,14,12,.36);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);
  color:var(--bg);
  border-radius:999px;padding:5px;pointer-events:auto;
  box-shadow:0 12px 40px -12px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.08);
  font-size:13px;font-weight:500;letter-spacing:-.005em;
}
.co-subnav a{
  padding:8px 14px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;color:var(--bg);
  transition:background .25s var(--ease),color .25s var(--ease);white-space:nowrap;
}
.co-subnav a:hover{background:rgba(255,255,255,.08);}
.co-subnav a.here{background:rgba(255,255,255,.14);}

@media(max-width:720px){
  /* mirror frontpage mobile - hide pill, only brand + cta remain */
  .nav-wrap{display:none;}
  .nav-edges{top:22px;padding:0 18px;}
  .nav-edges .brand .lockup{width:143px;}
  .co-subnav-wrap{bottom:18px;}
  .co-subnav{font-size:12px;}
  .co-subnav a{padding:7px 12px;}
}
@media(max-width:540px){
  .co-subnav-wrap{bottom:14px;}
}

/* Undermenuen er en raekke, der ikke maa brydes, og paa en telefon blev den
   bredere end skaermen og stak ud i begge sider. Den maa hellere kunne
   skubbes vandret end at haenge uden for kanten. */
@media(max-width:720px){
  .co-subnav-wrap{padding:0 12px;}
  .co-subnav{
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    justify-content:flex-start;
  }
  .co-subnav::-webkit-scrollbar{display:none;}
  .co-subnav a{flex:none;}
}

/* push page content below the fixed nav stack */
.co-pad-top{padding-top:clamp(96px,11vw,150px);}

/* ============================================================
   STICKERS - bigger, parallaxable (--p-shift driven by JS)
   ============================================================ */
.stk{
  position:absolute;z-index:30;pointer-events:none;
  transform:translate(var(--nx,0px),calc(var(--p-shift,0px) + var(--ny,0px))) rotate(var(--r,-5deg));
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
  user-select:none;will-change:transform;
  transition:transform .15s linear;
}
/* embroidered patch */
.stk-patch{
  background:var(--accent);color:var(--paper);
  font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;padding:13px 18px;border-radius:11px;
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.55),inset 0 0 0 4px var(--accent);
  text-align:center;line-height:1.22;max-width:180px;
}
.stk-patch.dark{background:var(--dark);box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.3),inset 0 0 0 4px var(--dark);}
.stk-patch.cream{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2.5px rgba(14,14,12,.18),inset 0 0 0 4px var(--paper);}
/* shipping label */
.stk-label{
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  padding:11px 14px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.4;max-width:200px;
}
.stk-label .bc{display:block;height:11px;margin-top:7px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px);}
/* round club seal */
.stk-seal{
  width:118px;height:118px;border-radius:50%;
  background:var(--dark);color:var(--paper);
  display:grid;place-items:center;text-align:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1.5px var(--dark),inset 0 0 0 5px var(--paper),inset 0 0 0 6.5px var(--dark);
  padding:14px;line-height:1.25;
}
.stk-seal.accent{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent),inset 0 0 0 5px var(--paper),inset 0 0 0 6.5px var(--accent);}
.stk-seal.cream{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 0 0 5px var(--paper),inset 0 0 0 6.5px var(--ink);}
/* size / care tag */
/* Eksplicit farve - ellers arves cremefarven paa moerke sektioner. */
.stk-tag{ color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:3px;
  padding:9px 15px 9px 28px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;position:absolute;
}
.stk-tag::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;border:1px solid var(--ink);background:var(--bg);}
/* quality-control stamp */
.stk-stamp{
  border:2.5px solid var(--accent);color:var(--accent);
  font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;padding:10px 16px;border-radius:6px;opacity:.92;
  filter:drop-shadow(0 4px 8px rgba(230,65,36,.18));
  background:rgba(230,65,36,.04);
}
.stk-stamp.ink{border-color:var(--ink);color:var(--ink);background:rgba(14,14,12,.04);filter:drop-shadow(0 4px 8px rgba(0,0,0,.12));}
/* handwritten note */
.stk-note{
  font-family:var(--f-hand);font-size:30px;color:var(--ink);
  background:none;filter:none;line-height:1;font-weight:600;
}
.stk-note.accent{color:var(--accent);}

/* Maerkerne tegnes af assets/badges.js - se merchbart.html for typerne. */
.stk-badge{background:none;box-shadow:none;padding:0;border:0;}
.bdg{display:block;overflow:visible;}
.bdg-seal{width:118px;}.bdg-ribbon{height:62px;width:auto;}.bdg-stamp{width:112px;}
.b-fill{fill:var(--ink);}
.b-tail{fill:var(--ink);filter:brightness(.5);}
.b-ring{fill:none;stroke:var(--paper);stroke-width:1.5;}
.b-ring.thin{stroke-width:.6;opacity:.7;}
.b-rule{stroke:var(--paper);stroke-width:.8;fill:none;opacity:.75;}
.b-mark,.b-star{fill:var(--paper);}
.b-arc{fill:var(--paper);font-family:var(--f-mono);font-size:5.4px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;}
.b-txt{fill:var(--paper);font-family:var(--f-mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;}
.bdg-stamp .b-txt{font-size:11.5px;letter-spacing:.09em;}
.b-sub{fill:var(--paper);opacity:.72;font-family:var(--f-mono);font-size:6.8px;letter-spacing:.15em;text-transform:uppercase;}
.stk-badge.accent .b-fill,.stk-badge.accent .b-tail{fill:var(--accent);}
.stk-badge.accent .b-tail{filter:brightness(.72);}
.stk-badge.cream .b-fill{fill:var(--paper);}
.stk-badge.cream .b-tail{fill:var(--paper);filter:brightness(.88);}
.stk-badge.cream .b-ring,.stk-badge.cream .b-rule{stroke:var(--ink);}
.stk-badge.cream .b-arc,.stk-badge.cream .b-txt,.stk-badge.cream .b-mark,
.stk-badge.cream .b-star,.stk-badge.cream .b-sub{fill:var(--ink);}

.stk-note.cream{color:var(--paper);}
@media(max-width:680px){ .stk{ display:none; } .stk.keep-sm{ display:block;transform:translateY(var(--p-shift,0)) rotate(var(--r,-5deg)) scale(.78); } }

/* ============================================================
   HERO
   ============================================================ */
.co-hero{padding-top:clamp(96px,11vw,140px);
  position:relative;text-align:center;
  padding:clamp(112px,13vw,170px) var(--pad) clamp(60px,7vw,100px);
  overflow:hidden;
}
.co-eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);
}
.co-hero h1{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(31.3px,6vw,88.2px);line-height:.94;letter-spacing:-.035em;
  margin:clamp(14px,2vw,26px) 0 0;
  max-width:100%;
}
.co-hero h1 .amp{display:block;font-style:normal;color:var(--accent);}
.co-hero-sub{
  font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.6vw,22px);
  color:var(--ink-soft);max-width:30ch;margin:22px auto 0;line-height:1.3;
}
.co-signup{
  display:flex;align-items:flex-end;justify-content:center;gap:14px;
  flex-wrap:wrap;margin:30px auto 0;max-width:520px;
}
.co-field{display:flex;align-items:baseline;gap:10px;flex:1;min-width:240px;}
.co-field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.co-field input{
  flex:1;border:0;border-bottom:1px solid var(--ink);background:transparent;
  font:inherit;font-size:15px;padding:4px 2px;outline:none;color:var(--ink);
}
.co-hero-note{
  font-family:var(--f-display);font-weight:600;font-style:normal;font-size:15px;color:var(--mid);
  margin:16px auto 0;max-width:40ch;
}
.co-hero-img{
  position:relative;margin:clamp(40px,5.5vw,80px) auto 0;max-width:1180px;
  border-radius:18px;overflow:hidden;aspect-ratio:16/7;background:var(--bg-alt);
}
.co-hero-img img{width:100%;height:100%;object-fit:cover;}



/* ============================================================
   NEW HERE - dark section
   ============================================================ */
.co-new{
  position:relative;background:var(--dark);color:var(--paper);
  padding:clamp(80px,10vw,150px) var(--pad);overflow:hidden;
  text-align:center;
}
.co-new h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(29px,4.7vw,75.3px);line-height:.95;letter-spacing:-.02em;
  max-width:16ch;margin:0 auto;
}
.co-new h2 .it{font-style:italic;color:var(--accent);}
.co-handout{
  position:relative;z-index:4;
  max-width:440px;margin:clamp(36px,4.5vw,60px) auto 0;
  background:var(--paper);color:var(--ink);
  border-radius:4px;padding:30px 32px;text-align:left;
  transform:rotate(-3deg);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.6);
}
.co-handout-top{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--ink);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.co-handout h3{
  font-family:var(--f-display);font-size:30px;font-weight:600;line-height:1;margin:12px 0 14px;
}
.co-handout a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
  font-size:14.5px;transition:color .2s var(--ease),padding-left .25s var(--ease);
}
.co-handout a:last-child{border-bottom:0;}
.co-handout a:hover{color:var(--accent);padding-left:5px;}
.co-handout a .n{font-family:var(--f-mono);font-size:10px;color:var(--mid);}

/* ============================================================
   FEATURED ARTICLES - sticky scroll-stack
   ------------------------------------------------------------
   Cinematic stack of 3-5 large editorial cards that slide up
   over a giant wordmark as the user scrolls. To edit cards,
   change the <article class="co-feat-card"> blocks in
   merchclub/index.html. To tune the cadence, change --slots on
   .co-featured (defaults from data-cards) or STACK_OFFSET in
   merchclub.js. Reduced-motion users see all cards pre-stacked.
   ============================================================ */
.co-featured{
  position:relative;background:var(--bg);
  /* section is tall - one viewport per card slot - to give scroll budget */
  height:calc(var(--slots,5) * 80vh);
}
.co-featured-inner{
  position:sticky;top:0;
  height:100vh;overflow:hidden;
  display:grid;place-items:center;
  isolation:isolate;
  /* padding clears both the fixed top nav (top) and the
     fixed bottom subnav (bottom). Subnav lives at ~bottom:24px
     plus its ~48px pill height, so ~80px of bottom clearance. */
  padding:clamp(110px,13vh,150px) 0 clamp(100px,12vh,140px);
}
.co-featured-megatype{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,calc(-50% + var(--mega-shift,0px)));
  font-family:var(--f-display);font-weight:600;font-style:normal;
  font-size:clamp(73.1px,10.4vw,176.6px);line-height:.86;letter-spacing:-.03em;
  color:var(--ink);opacity:.07;
  text-align:center;white-space:nowrap;
  pointer-events:none;user-select:none;
  z-index:0;text-transform:none;
}
.co-featured-megatype span{display:block;}

.co-featured-track{
  position:relative;z-index:2;
  width:min(86vw,1320px);
  /* Lidt hoejere end foer: en overskrift paa tre linjer plus manchet og
     knap fik ikke plads paa en laptop, og bunden af teksten roeg ud. */
  height:min(70vh,620px);
  min-height:480px;
}
.co-feat-card{
  position:absolute;inset:0;
  border-radius:24px;overflow:hidden;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.45),0 8px 24px -8px rgba(0,0,0,.18);
  display:grid;grid-template-columns:1.05fr 1fr;
  will-change:transform;
  transform-origin:50% 0%;              /* shrink downward - keeps the top sliver anchored */
  transform:translateY(110vh);          /* hidden until JS positions */
}
@media(prefers-reduced-motion:reduce){
  .co-feat-card{transform:none;}
}

.co-feat-card.bg-orange{background:var(--accent);color:var(--paper);}
.co-feat-card.bg-ink{background:var(--dark);color:var(--paper);}
.co-feat-card.bg-cream{background:var(--paper);color:var(--ink);border:1px solid var(--line);}
.co-feat-card.bg-moss{background:#2F3D2E;color:var(--paper);}  /* deep moss - editorial, premium */

.co-feat-content{
  padding:clamp(28px,3.2vw,52px) clamp(28px,3.4vw,52px);
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  position:relative;z-index:2;
  min-height:0;overflow:hidden;
}
.co-feat-no{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.75;
}
.co-feat-cat{
  display:block;width:fit-content;       /* block so margin-bottom takes effect */
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1.4px solid currentColor;border-radius:999px;padding:7px 13px;
  margin-bottom:clamp(16px,2vw,32px);
}
.co-feat-title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(27px,2.9vw,50px);line-height:.98;letter-spacing:-.022em;
  margin:0 0 clamp(14px,1.4vw,20px);
  text-wrap:balance;overflow-wrap:anywhere;
}
/* per-word reveal triggered when the card settles into the stack */
.co-feat-title .hl-w{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1;padding:.04em 0;}
.co-feat-title .hl-w-i{
  display:inline-block;line-height:1;
  opacity:0;transform:translateY(.55em);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 55ms);
}
.co-feat-card.is-active .co-feat-title .hl-w-i{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .co-feat-title .hl-w-i{opacity:1;transform:none;transition:none;}
}
.co-feat-desc{
  font-size:clamp(15px,1.15vw,18px);line-height:1.5;
  opacity:.86;max-width:42ch;
}
/* Kortenes knap er sitets .btn; her staar kun placeringen og farven,
   der skal vendes efter kortets bund. Hover paa hele kortet ruller
   bogstaverne og pilen, som om man holdt paa knappen. */
.co-feat-cta{align-self:flex-start;margin-top:14px;}
.co-feat-card.bg-orange .co-feat-cta, .co-feat-card.bg-ink .co-feat-cta, .co-feat-card.bg-moss .co-feat-cta{background:var(--paper);color:var(--ink);}
.co-feat-card.bg-orange .co-feat-cta:hover, .co-feat-card.bg-ink .co-feat-cta:hover, .co-feat-card.bg-moss .co-feat-cta:hover{background:#fff;}
.co-feat-card.bg-cream .co-feat-cta{background:var(--ink);color:var(--paper);}
.co-feat-card.bg-cream .co-feat-cta:hover{background:#000;}
.co-feat-card:hover .co-feat-cta .ar::before{animation:arrowLoop .58s cubic-bezier(.5,0,.2,1);}
.co-feat-card:hover .co-feat-cta .bl-c .bl-top{transform:translateY(-100%);opacity:0;transition-delay:var(--d,0ms);}
.co-feat-card:hover .co-feat-cta .bl-c .bl-bot{transform:translateY(-100%);opacity:1;transition-delay:var(--d,0ms);}
@media(prefers-reduced-motion:reduce){
  .co-feat-card:hover .co-feat-cta .ar::before{animation:none;}
}

.co-feat-media{
  position:relative;overflow:hidden;background:rgba(0,0,0,.08);
}
.co-feat-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.co-feat-card:hover .co-feat-media img{transform:scale(1.04);}
.co-feat-card .stk{position:absolute;z-index:6;}

@media(max-width:860px){
  /* drop sticky stack on phones - read cards as a normal vertical list */
  .co-featured{height:auto;}
  .co-featured-inner{position:relative;height:auto;padding:60px 0;overflow:visible;}
  .co-featured-megatype{position:relative;top:auto;left:auto;
    transform:none;font-size:clamp(56.1px,12.6vw,98.2px);
    margin-bottom:40px;opacity:.1;}
  .co-featured-track{width:92vw;height:auto;}
  /* Teksten stod i den foerste raekke, og den var laast til 240 px. Med
     en overskrift paa tre linjer loeb manchetten og knappen ned over
     billedet. Nu er tekstens raekke saa hoej som teksten, og billedet
     faar sin egen faste hoejde nedenunder. */
  .co-feat-card{
    position:relative;inset:auto;transform:none !important;
    grid-template-columns:1fr;grid-template-rows:auto 220px;
    margin-bottom:24px;border-radius:18px;
  }
  .co-feat-content{padding:22px 22px 24px;gap:14px;overflow:visible;}
  /* "Nr. 01 / Udvalgt" op i hoejre hjoerne ved siden af kategorien, saa
     den ikke bruger en hel linje paa en lille skaerm. */
  .co-feat-no{position:absolute;top:24px;right:22px;font-size:11px;}
  .co-feat-cat{margin-bottom:16px;}
  .co-feat-title{font-size:clamp(23px,6.4vw,34px);}
  .co-feat-desc{font-size:15px;}
  .co-feat-cta{margin-top:8px;}
  .co-feat-media{min-height:0;}
}

/* ============================================================
   WORD ON THE STREET
   ============================================================ */
.co-sec{padding:clamp(80px,10vw,140px) var(--pad);position:relative;}
.co-sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,52px);align-items:end;
}
.co-sec-head .co-eyebrow{color:var(--accent);grid-column:1/-1;}
.co-sec-head h1,
.co-sec-head h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(33.1px,5vw,77.9px);line-height:.92;letter-spacing:-.022em;margin:14px 0 0;
  white-space:nowrap;
}
.co-sec-head p{
  font-size:clamp(15px,1.3vw,18px);color:var(--ink-soft);max-width:46ch;
  padding-bottom:8px;
}
@media(max-width:760px){
  .co-sec-head{grid-template-columns:1fr;}
  .co-sec-head h1,
  .co-sec-head h2{white-space:normal;font-size:clamp(33.9px,8.1vw,59.1px);}
  .co-sec-head p{padding-bottom:0;}
}
.co-filters{
  display:flex;flex-wrap:wrap;gap:8px;margin:clamp(28px,3.5vw,48px) 0 6px;
}
.co-chip{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;color:var(--ink-soft);
  background:var(--paper);cursor:pointer;transition:all .2s var(--ease);
}
.co-chip:hover{border-color:var(--ink);color:var(--ink);}
.co-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* editorial card grid */
.co-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(44px,5vw,72px) clamp(24px,2.8vw,44px);
  margin-top:clamp(40px,5vw,72px);
  grid-auto-flow:dense;
  align-items:start;
}
.co-card{
  position:relative;display:flex;flex-direction:column;
  transition:transform .35s var(--ease-out);
  isolation:isolate;
}
/* Standard for ethvert kort, ogsaa et uden spanN-regel. Uden den kan
   et ukendt span falde sammen til et par pixel, naar sporene har
   lov at krympe. Fundet 24. september 2026: span3 var 7x702 px. */
.co-card{grid-column:span 6;}
.co-card.span3{grid-column:span 3;}
.co-card.span4{grid-column:span 4;}
.co-card.span6{grid-column:span 6;}
.co-card.span5{grid-column:span 5;}
.co-card.span7{grid-column:span 7;}
.co-card.tilt-l{transform:rotate(-1.4deg);}
.co-card.tilt-r{transform:rotate(1.2deg);}
.co-card.lift{margin-top:-40px;}
a.co-card:hover{transform:translateY(-4px);}
a.co-card.tilt-l:hover{transform:rotate(-1.4deg) translateY(-4px);}
a.co-card.tilt-r:hover{transform:rotate(1.2deg) translateY(-4px);}
.co-card-media{
  position:relative;border-radius:16px;overflow:hidden;background:var(--bg-alt);
  aspect-ratio:4/3;margin-bottom:18px;
}
.co-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.co-card:hover .co-card-media img{transform:scale(1.045);}

/* ---------- text-only / paper cards (the fix for "too tall and empty") ---------- */
.co-card.text-only{
  background:var(--dark);color:var(--paper);border-radius:16px;
  padding:34px 30px 28px;
  display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
}
.co-card.text-only::before{
  content:"\201C";position:absolute;top:-20px;right:14px;
  font-family:var(--f-display);font-weight:600;font-size:170px;line-height:1;
  color:var(--accent);opacity:.22;pointer-events:none;
}
.co-card.paper{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px 26px;
  display:flex;flex-direction:column;gap:18px;
  position:relative;
}
.co-card.paper::before{
  content:"";position:absolute;left:28px;right:28px;top:0;height:3px;background:var(--ink);
}
.co-card.paper .paper-no{
  position:absolute;top:14px;right:18px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--mid);
  text-transform:uppercase;
}

.co-pill{
  align-self:flex-start;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:6px 12px;
  color:var(--accent);
  margin-bottom:18px;
}
.co-card.text-only .co-pill{color:var(--accent);}
.co-card h3{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.018em;line-height:1.02;
  font-size:clamp(22.8px,2.2vw,35.1px);
  margin:0 0 14px;
}
.co-card.big h3{font-size:clamp(27px,2.9vw,46.5px);line-height:.98;margin-bottom:18px;}
.co-card p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0;}
.co-card.big p{font-size:clamp(15px,1.15vw,17px);font-family:var(--f-display);font-weight:600;font-style:normal;color:var(--ink-soft);line-height:1.4;max-width:46ch;}
.co-card.text-only p{color:rgba(251,250,246,.74);}
/* .co-readmore - secondary ghost-style action: text + inline arrow,
   matches frontpage .btn-ghost (no pill, no circle). The trailing
   span keeps the `.o` class for HTML stability but is styled flat. */
.co-readmore{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:22px;
  transition:color .25s var(--ease);
}
.co-readmore .o{
  display:inline-block;
  width:auto;height:auto;
  border:0;background:none;border-radius:0;
  font-size:13px;line-height:1;
  transition:transform .3s var(--ease-out);
}
.co-card:hover .co-readmore{color:var(--ink);}
.co-card:hover .co-readmore .o{transform:translateX(5px);}
/* dark text-only card needs an inverse colour pair */
.co-card.text-only .co-readmore{color:rgba(251,250,246,.65);}
.co-card.text-only:hover .co-readmore{color:var(--paper);}
.co-card-meta{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mid);margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
}
.co-card.text-only .co-card-meta{border-top-color:rgba(251,250,246,.12);color:rgba(251,250,246,.55);}
.co-card.paper .co-card-meta{border-top-color:var(--line);}

/* ============================================================
   JOIN THE CLUB
   ============================================================ */
.co-join{position:relative;text-align:center;padding:clamp(96px,11vw,170px) var(--pad);overflow:hidden;}
.co-join h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(33.4px,5.9vw,104.3px);line-height:.9;letter-spacing:-.025em;
}
.co-join p{
  font-size:clamp(15px,1.3vw,17px);color:var(--ink-soft);
  max-width:40ch;margin:20px auto 30px;
}
.co-join .co-signup{margin-top:0;}
.co-join-note{font-family:var(--f-display);font-weight:600;font-style:normal;font-size:15px;color:var(--mid);margin-top:18px;}

/* ============================================================
   FOOTER
   ============================================================ */
.co-foot{
  border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  /* Ekstra luft forneden: undermenuen svaever fast i bunden af skaermen og
     laa lige oven i fodens links, naar man naaede enden af siden. Tre af
     fem kunne slet ikke rammes - heriblandt Privatliv og Cookies, som er
     dem, der skal kunne naas. Maalt: bjaelken fylder de nederste 71 px. */
  padding:22px var(--pad) 92px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mid);
}
.co-foot a:hover{color:var(--ink);}
/* Uden wrap laa de fire links paa én linje og skubbede hele siden
   sidelaens paa en smal telefon. */
.co-foot-links{display:flex;flex-wrap:wrap;gap:20px;}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.co-article{max-width:1180px;margin:0 auto;padding:clamp(112px,12vw,160px) var(--pad) 0;position:relative;}
.co-article-head{max-width:780px;}
.co-article-head h1{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(29.4px,4.1vw,63.2px);line-height:.96;letter-spacing:-.02em;margin:16px 0 18px;
}
.co-article-lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);line-height:1.45;max-width:60ch;}
.co-article-meta{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mid);
}
.co-article-meta .author{color:var(--ink);}
.co-article-hero{
  margin:clamp(28px,3.5vw,48px) 0 0;border-radius:18px;overflow:hidden;
  aspect-ratio:16/9;background:var(--bg-alt);
}
.co-article-hero img{width:100%;height:100%;object-fit:cover;}
.co-body{max-width:720px;margin:clamp(36px,4.5vw,60px) auto 0;font-size:17px;line-height:1.62;color:var(--ink-soft);}
.co-body h2{
  font-family:var(--f-display);font-weight:600;font-size:clamp(24.6px,2.6vw,35.1px);
  line-height:1.05;color:var(--ink);margin:clamp(34px,4vw,52px) 0 12px;letter-spacing:-.015em;
}
.co-body p{margin-bottom:18px;}
/* :not() holder knapperne udenfor. Uden den fik "Se pakkerne" sort
   tekst og understregning, fordi ".co-body a" er mere specifik end
   knappens egen regel. En knap er ikke et link i en saetning. */
.co-body a:not([class*="btn"]):not([class*="cta"]){color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);}
.co-body ul{margin:0 0 20px;}
.co-body li{position:relative;padding-left:24px;margin-bottom:9px;}
.co-body li::before{content:"";position:absolute;left:3px;top:10px;width:6px;height:6px;background:var(--accent);border-radius:1px;}
/* Udtalelse med navn og logo. Adskilt fra .co-pullquote, som er redaktionens
   egen stemme - her er det en anden, der taler, og saa skal der staa hvem. */
.co-tm{
  margin:clamp(32px,4vw,52px) 0;padding:clamp(22px,3vw,30px);
  border-radius:16px;background:var(--bg-alt);
}
.co-tm blockquote{
  margin:0 0 18px;font-family:var(--f-display);font-weight:600;font-style:normal;
  font-size:clamp(20px,2.2vw,28px);line-height:1.25;color:var(--ink);
}
.co-tm figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.co-tm-txt{display:flex;flex-direction:column;line-height:1.3}
.co-tm-who{font-weight:600;font-size:14px;color:var(--ink)}
.co-tm-role{font-size:13px;color:var(--mid)}
.co-tm-av{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;
  background:var(--bg);display:block;
}
/* Pladsholder indtil der ligger et rigtigt portraet i assets/. Initialer
   frem for en grå silhuet - den ligner et manglende billede. */
.co-tm-av-ph{
  display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;
}
.co-tm-logo{
  height:22px;width:auto;display:block;margin-left:auto;
  opacity:.55;filter:grayscale(1);
}
@media(max-width:520px){ .co-tm-logo{margin-left:0} }

/* Med foto faar udtalelsen mere vaegt - den er sitets staerkeste bevis. */
.co-tm.has-pic{padding:0;overflow:hidden;background:var(--dark);color:var(--paper)}
.co-tm-pic img{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;display:block}
.co-tm.has-pic blockquote{margin:clamp(22px,3vw,30px) clamp(22px,3vw,30px) 18px;color:var(--paper)}
.co-tm.has-pic figcaption{padding:0 clamp(22px,3vw,30px) clamp(22px,3vw,30px)}
.co-tm.has-pic .co-tm-who{color:var(--paper)}
.co-tm.has-pic .co-tm-role{color:rgba(242,241,237,.62)}
.co-tm.has-pic .co-tm-av-ph{background:var(--paper);color:var(--ink)}
.co-tm.has-pic .co-tm-logo{filter:grayscale(1) invert(1) brightness(1.6);opacity:.7}

/* Et udklip af et rigtigt Reddit-opslag, sat paa siden som var det klippet
   ud og lagt der: let drejet, med skygge under, saa det loefter sig fra
   papiret.

   Bygget i HTML og ikke som et billede - med vilje. Et screenshot er doed
   tekst: Google kan ikke laese det, AI-modeller kan ikke citere det, og en
   skaermlaeser ser ingenting. Netop det her citat er artiklens bevis for,
   at kritikken findes, saa det er det sidste, der skal gemmes i en PNG.
   Det ligner et udklip; det ER tekst. */
.co-rd{
  --tilt:-1.4deg;
  position:relative;
  margin:clamp(38px,4.5vw,58px) auto;padding:16px 18px 13px;
  max-width:560px;border-radius:16px;
  background:#fff;border:1px solid #E6E4DE;
  font-family:var(--f-sans);
  transform:rotate(var(--tilt));
  box-shadow:
    0 1px 1px rgba(20,20,18,.05),
    0 6px 14px -6px rgba(20,20,18,.16),
    0 22px 44px -18px rgba(20,20,18,.30);
}
/* En anelse papir under kortet, saa det ikke svaever frit. */
.co-rd::after{
  content:"";position:absolute;inset:auto 12px -7px 12px;height:14px;z-index:-1;
  border-radius:0 0 16px 16px;background:rgba(20,20,18,.055);
  filter:blur(7px);
}
@media(prefers-reduced-motion:reduce){ .co-rd{transform:none} }
@media(max-width:560px){ .co-rd{--tilt:-0.7deg} }
.co-rd-top{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:12.5px}
.co-rd-av{width:20px;height:20px;border-radius:50%;background:#FF4500;flex:0 0 20px}
.co-rd-sub{font-weight:600;color:var(--ink)}
.co-rd-sep,.co-rd-meta{color:var(--mid)}
.co-rd-badge{
  margin-left:auto;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mid);
}
.co-rd-title{margin:0 0 8px;font-size:17.5px;line-height:1.32;font-weight:700;color:#14140F;letter-spacing:-.005em}
.co-rd-body{margin:0 0 14px;font-size:14px;line-height:1.55;color:#45433D}
.co-rd-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px}
.co-rd-votes,.co-rd-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;background:#F1EFEA;color:#3A3833;font-size:12.5px;
}
.co-rd-votes b{font-weight:600;min-width:1.2em;text-align:center}
.co-rd-votes svg,.co-rd-chip svg{width:14px;height:14px;fill:currentColor;opacity:.65}
.co-rd-user{color:var(--mid);font-size:12px}
.co-rd-link{
  margin-left:auto;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mid);text-decoration:none;
}
.co-rd-link:hover{color:var(--ink)}
@media(max-width:520px){ .co-rd-link{margin-left:0} }

.co-pullquote{
  margin:clamp(32px,4vw,52px) 0;
  font-family:var(--f-display);font-weight:600;font-style:normal;font-size:clamp(21.1px,2.5vw,31.7px);
  line-height:1.18;color:var(--ink);
}
.co-infobox{
  background:var(--dark);color:#E9E6DD;border-radius:16px;
  padding:clamp(24px,3vw,34px);margin:clamp(30px,4vw,46px) 0;
}
.co-infobox .ib-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.co-infobox h4{font-family:var(--f-display);font-size:22px;font-weight:600;color:var(--paper);margin-bottom:12px;}
.co-infobox li::before{background:var(--accent);}
.co-infobox li{color:#E9E6DD;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .co-card.span3,.co-card.span4,.co-card.span5,.co-card.span6,.co-card.span7{grid-column:span 6;}
  .co-card.lift{margin-top:0;}
  .co-card.tilt-l,.co-card.tilt-r{transform:none;}
  a.co-card.tilt-l:hover,a.co-card.tilt-r:hover{transform:translateY(-4px);}
}
@media(max-width:560px){
  .co-card.span3,.co-card.span4,.co-card.span5,.co-card.span6,.co-card.span7{grid-column:span 12;}
  .co-handout{transform:rotate(-2deg);}
}

/* FAQ block on articles - visible counterpart to FAQPage schema */
.co-faq{margin:8px 0 0;display:flex;flex-direction:column;gap:2px;}
.co-faq-item{padding:20px 0;border-top:1px solid var(--line,#E4E4E1);}
.co-faq-item:last-child{border-bottom:1px solid var(--line,#E4E4E1);}
.co-faq-item h3{font-size:17px;font-weight:600;letter-spacing:-.012em;margin:0 0 7px;}
.co-faq-item p{margin:0;}

/* "Kommer snart" state - cards for articles not yet published.
   Honest to the reader, and data-nosnippet keeps crawlers from treating a
   teaser as an article. Remove is-soon + restore the <a href> when it ships. */
.co-card.is-soon{position:relative;cursor:default;opacity:.62;}
.co-card.is-soon:hover{transform:none;}
.co-card.is-soon .co-readmore,
.co-card.is-soon .co-card-meta{display:none;}
.co-soon{
  position:absolute;top:14px;right:14px;z-index:3;
  font-family:var(--f-mono,monospace);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink,#0B0B0C);color:var(--bg,#FFFFFF);
  padding:5px 9px;border-radius:3px;
}
.co-feat-cta.is-soon-cta{opacity:.55;cursor:default;pointer-events:none;}

/* ============================================================
   Sticker containment - stickers must never sit over body text.

   Her stod foer et tredje vaern: stickerne blev malet BAG indholdet, saa
   de aldrig kunne daekke et ord. Det virkede - men det gjorde dem ogsaa
   halvt usynlige, fordi herobilledet gaar helt ud i tagrenden og laa
   ovenpaa dem. Et klistermaerke, der ligger bag billedet, ligner en fejl.

   Maalt paa en artikelside: tekstspalten slutter ved 1060 px, container
   ved 1290, og den smalleste sticker starter ved 1084. De ligger altsaa
   allerede uden for spalten. Positionsvaernet er nok i sig selv, saa
   z-index-vaernet er fjernet, og de maler nu ovenpaa - ogsaa hen over
   billedet, hvilket er meningen med et klistermaerke.
   ============================================================ */
.co-article-head,
.co-article-hero,
.co-article-meta,
.co-body{ position:relative; z-index:2; }
.co-article > .stk{ z-index:5; }

/* Only render article stickers once there is genuine gutter to put them in.
   1180px container + 2x padding, plus headroom before they'd crowd the column. */
@media (max-width:1279px){
  .co-article > .stk{ display:none; }
}
/* Never let a sticker start left of the text column's right edge. */
@media (min-width:1280px){
  .co-article > .stk{ max-width:230px; }
}

/* Section-level stickers: same containment principle applied site-wide in MerchClub
   Card-internal stickers (inside .co-card-media / .co-feat-media) are deliberate
   overlays on imagery and are left alone - only the free-floating section ones
   are pushed behind the copy. */
.co-hero > .stk,
.co-sec > .stk,
.co-join > .stk,
.co-new > .stk{ z-index:1; }

.co-hero > *:not(.stk),
.co-sec > *:not(.stk),
.co-join > *:not(.stk),
.co-new > *:not(.stk){ position:relative; z-index:2; }

/* Below tablet there is no free margin left - drop the free-floating ones
   rather than letting them crowd the copy. Card overlays survive. */
@media (max-width:1023px){
  .co-hero > .stk,
  .co-sec > .stk,
  .co-join > .stk,
  .co-new > .stk, .co-feat-media > .stk{ display:none; }
}

/* ============================================================
   Article components - byline, tables, named rules, inline CTA
   ============================================================ */
.co-byline{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
}
.by-who{display:flex;align-items:center;gap:11px;}
.by-avatar{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;overflow:hidden;
  background:var(--bg-alt,#E4E1D8);display:flex;align-items:center;justify-content:center;
}
.by-avatar img{width:100%;height:100%;object-fit:cover;}
.by-initials{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--ink);}
.by-text{display:flex;flex-direction:column;line-height:1.25;}
.by-name{font-size:14.5px;font-weight:500;color:var(--ink);}
.by-who:hover .by-name{text-decoration:underline;text-underline-offset:3px;}
.by-role{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);}
.by-dates{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mid);}
.by-sep{margin:0 7px;opacity:.5;}

/* Data tables - the extractable block AI search rewards. Must scroll on narrow
   screens rather than forcing the page to scroll sideways. */
.co-table-wrap{margin:26px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px;background:var(--paper,#FBFAF6);}
.co-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;}
.co-table caption{
  caption-side:top;text-align:left;padding:15px 18px 0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);
}
.co-table th{
  text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mid);font-weight:500;white-space:nowrap;
}
.co-table td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft);}
.co-table tbody tr:last-child td{border-bottom:none;}
.co-table td:first-child{color:var(--ink);font-weight:500;}

/* Named rule - a quotable, attributable formulation. */
.co-rule{
  margin:30px 0;padding:22px 24px;
  background:var(--paper,#FBFAF6);border-radius:0 14px 14px 0;
}
.co-rule-label{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.co-rule p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink);}

.co-numbered{margin:0 0 18px 22px;}
.co-numbered li{margin-bottom:10px;}

.co-cta-inline{
  margin:clamp(38px,4.5vw,60px) 0 0;padding:26px 28px;
  border:1px solid var(--line);border-radius:16px;background:var(--paper,#FBFAF6);
}
.co-cta-inline p{margin:0 0 16px;font-size:16.5px;color:var(--ink);}

@media(max-width:640px){
  .co-byline{gap:12px 16px;}
  .co-rule{padding:18px 20px;}
  .co-cta-inline{padding:22px 20px;}
}

/* MerchClub signup feedback */
.co-signup-note{
  margin:12px 0 0; font-size:13.5px; line-height:1.45;
  color:var(--mid);
}
.co-signup-note.ok{ color:#3F7D4E; }
.co-signup-note.err{ color:var(--accent); }
.co-join .co-signup-note.ok{ color:#9BD4A6; }
.co-join .co-signup-note.err{ color:#F0A08C; }

/* ------------------------------------------------------------------
   Meget smalle telefoner (iPhone SE og lignende, 320 px).

   Den flydende bundnavigation og navigationen i toppen staar begge som
   raekker, der ikke maa brydes. Under ca. 360 px blev de tilsammen
   bredere end skaermen, og hele magasinet kunne scrolles sidelaens.

   Bundnavigationen faar lov at scrolle for sig selv, og de to ting i
   toppen skrumper, saa de kan vaere der.
   ------------------------------------------------------------------ */
@media(max-width:379px){
  .co-subnav-wrap{
    justify-content:flex-start;
    overflow-x:auto;
    padding:0 12px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .co-subnav-wrap::-webkit-scrollbar{display:none;}
  .co-subnav{flex:0 0 auto;font-size:11.5px;}
  .co-subnav a{padding:7px 10px;}

  /* Den store kursive baggrundstekst er pynt (aria-hidden, 10% opacitet).
     Den maa ikke bryde, saa i stedet klippes den af sektionen - praecis
     som den ogsaa bloeder ud over kanten paa en stor skaerm. */
  .co-featured{overflow-x:clip;}
  .co-featured-megatype{font-size:clamp(46.9px,14.6vw,65.9px);}

  .nav-edges{padding:0 12px;gap:8px;}
  .nav-edges .brand .lockup{width:122px;}
}
/* Paa en telefon laa "Join MerchClub" bag kurven i topmenuen og kunne ikke
   rammes (QA: 0 % af fladen fri). Samme regel som forsidens CTA-pille:
   under 480 px tages den ud - vejen ind i klubben staar i undermenuen
   ("Bliv medlem") og nederst paa siden. */
@media(max-width:480px){
  .nav-edges .btn{display:none;}
}

/* ------------------------------------------------------------------
   .co-fig - tegninger og billeder inde i artiklen.

   SVG'er skrives ind i dokumentet frem for at blive hentet som <img>.
   Det er den eneste maade, tegningen kan arve --ink, --accent og sidens
   skrifttype: et <img> med en SVG i kan hverken se sitets CSS-variable
   eller dets fonte. Prisen er, at tegningen skal have en viewBox, saa
   den kan skalere frit.
   ------------------------------------------------------------------ */
.co-fig{
  margin:34px 0;padding:0;
}
.co-fig-in{
  background:var(--paper,#FBFAF6);border:1px solid var(--line);
  border-radius:14px;padding:clamp(18px,3.2vw,30px);
  overflow-x:auto;
}
.co-fig-svg{
  display:block;width:100%;height:auto;min-width:640px;
  font-family:var(--f-sans);
}
.co-fig-in img{display:block;width:100%;height:auto;border-radius:8px;}
.co-fig figcaption{
  margin:12px 2px 0;font-size:13.5px;line-height:1.5;color:var(--mid);
  max-width:62ch;
}
.co-fig figcaption b,.co-fig figcaption strong{color:var(--ink-soft);font-weight:600;}
@media (max-width:640px){
  .co-fig-in{padding:14px;border-radius:10px;}
  .co-fig-svg{min-width:600px;}
}

/* Tilbage til shoppen paa telefon.
   Menuen (Forside / Om os / MerchClub) er skjult under 720 px, og saa var
   logoet den eneste vej tilbage til butikken - et logo laeser ingen som
   en tilbage-knap. Her er en rigtig een, med samme pil som konfiguratoren
   bruger, saa den betyder det samme to steder. */
.co-tilbage{display:none;}
@media(max-width:720px){
  .nav-edges{gap:10px;}
  .co-tilbage{
    display:inline-flex;align-items:center;gap:6px;
    min-height:44px;padding:0 14px 0 11px;border-radius:999px;
    font-size:12.5px;font-weight:500;letter-spacing:-.005em;
    text-decoration:none;color:var(--ink);
    background:rgba(20,20,18,.06);
    transition:background .18s ease;
  }
  .co-tilbage:hover{background:rgba(20,20,18,.12);}
  .co-tilbage .pil{
    width:7px;height:7px;flex:0 0 7px;
    border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);
  }
  body.nav-moerk .co-tilbage{background:rgba(255,255,255,.14);color:var(--paper);}
  body.nav-moerk .co-tilbage:hover{background:rgba(255,255,255,.22);}
}

/* ============================================================
   REGNESTYKKET - hvad koster det for jeres hold?

   Et regnestykke frem for et reklamebanner. Den, der laeser en artikel om
   merch-kultur, har allerede spoergsmaalet "hvad ville det koste os?" -
   og det er bedre at svare paa det end at raabe "koeb nu". Gebyrerne staar
   der ogsaa, for det er praecis det, der adskiller os fra en tilbudsproces.

   Baandet bag kortet gaar helt ud til kanten. Uden det stod sektionen som
   en smal kasse midt paa en side, der ellers bruger hele bredden - og saa
   ligner den en indskudt annonce frem for en del af siden.
   ============================================================ */
/* Fladen er et afrundet felt med luft omkring, ikke et baand fra kant til
   kant. Foer tonede toppen og bunden ud i sidens farve for at skjule de to
   haarde streger tvaers over siden - med afrundede hjoerner og luft i
   siderne er der ingen streger at skjule. Mickey, 24. september 2026. */
.co-regn-sec{
  padding:clamp(48px,6vw,88px) clamp(20px,4vw,56px);
  margin:clamp(40px,5vw,72px) auto;
  width:calc(100% - clamp(16px,2vw,32px));
  position:relative;isolation:isolate;
}
.co-regn-bag{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:var(--dark);border-radius:24px;
}
.co-regn-bag img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08);
}
.co-regn{
  max-width:680px;margin:0 auto;padding:clamp(26px,4vw,44px);
  background:var(--paper);border-radius:20px;
  box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0,0,0,.6);
}
.co-regn-top{text-align:center;}
.co-regn-h{
  font-family:var(--f-display);font-weight:600;line-height:1.06;
  font-size:clamp(21.3px,3.4vw,32px);letter-spacing:-.01em;
  margin:8px 0 10px;text-wrap:balance;
}
.co-regn-sub{
  font-size:14.5px;line-height:1.55;color:var(--mid);
  max-width:44ch;margin:0 auto;text-wrap:balance;
}

/* holdets stoerrelse */
.co-regn-hold{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:clamp(20px,3vw,30px) 0;font-size:15px;flex-wrap:wrap;
}
.co-regn-lab{color:var(--ink-soft);}
.co-regn-qty{
  display:inline-flex;align-items:center;
  border-radius:999px;background:var(--bg-alt);
  box-shadow:inset 0 0 0 1px var(--line);
}
.co-regn-qty button{
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:18px;line-height:1;color:var(--ink-soft);
  border-radius:999px;transition:background .15s var(--ease),color .15s var(--ease);
}
.co-regn-qty button:hover{background:var(--ink);color:var(--paper);}
.co-regn-qty input{
  width:56px;height:44px;border:0;background:transparent;text-align:center;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.co-regn-qty input::-webkit-outer-spin-button,
.co-regn-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.co-regn-qty input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}

/* de tre pakker - man vaelger een, foer man bygger den */
.co-regn-liste{list-style:none;display:flex;flex-direction:column;gap:1px;
  background:var(--line-soft);border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-soft);}
.co-regn-r{
  width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:15px 16px;background:var(--paper);border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  transition:background .15s var(--ease);
}
.co-regn-r:hover{background:var(--bg-alt);}
.co-regn-r.valgt{background:var(--ink);color:var(--paper);}
.co-regn-r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.co-regn-tik{
  width:19px;height:19px;flex:0 0 19px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--mute);position:relative;
  transition:box-shadow .15s var(--ease);
}
.co-regn-r.valgt .co-regn-tik{box-shadow:inset 0 0 0 1.5px var(--paper);}
.co-regn-r.valgt .co-regn-tik::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--paper);
}
.co-regn-navn{font-family:var(--f-display);font-weight:600;font-size:21px;line-height:1;flex:0 0 auto;}
.co-regn-hvad{font-size:12.5px;color:var(--mid);flex:1 1 150px;min-width:0;line-height:1.4;}
.co-regn-r.valgt .co-regn-hvad{color:rgba(251,250,246,.72);}
.co-regn-pris{margin-left:auto;text-align:right;flex:0 0 auto;}
.co-regn-tot{display:block;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}
.co-regn-stk{display:block;font-size:11.5px;color:var(--mid);font-variant-numeric:tabular-nums;margin-top:2px;}
.co-regn-r.valgt .co-regn-stk{color:rgba(251,250,246,.66);}
.co-regn-maerke{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--ink);color:var(--paper);
  flex:0 0 auto;
}
.co-regn-r.valgt .co-regn-maerke{background:rgba(251,250,246,.2);}

.co-regn-fod{
  margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--mid);text-align:center;
}
.co-regn-cta{display:flex;margin-top:clamp(18px,2.6vw,24px);}
.co-regn-min{
  margin-top:10px;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);
}

@media(max-width:560px){
  .co-regn{padding:22px 15px;border-radius:16px;}
  .co-regn-sec{padding-left:16px;padding-right:16px;}
  .co-regn-bag,.co-regn-bag::after{border-radius:18px;}
  .co-regn-r{padding:14px;gap:10px;row-gap:6px;}
  .co-regn-navn{font-size:19px;}
  .co-regn-hvad{flex:1 1 100%;order:4;}
  .co-regn-maerke{order:3;}
  .co-regn-pris{order:2;}
  .co-regn-tik{order:1;}
  .co-regn-hold{font-size:14px;gap:8px;}
}


/* Under-menuen har fire punkter. Paa en telefon er der ikke plads paa
   én linje, saa den kan svirpes i stedet for at stikke ud over kanten. */
@media (max-width: 560px) {
  .co-subnav-wrap{ padding: 0 12px; }
  .co-subnav{
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .co-subnav::-webkit-scrollbar{ display: none; }
  .co-subnav a{ flex: 0 0 auto; }
}

/* ---------- trykflader paa touch ----------
   Med en mus er en linje paa 36 px nem at ramme. Med en finger er den
   ikke. Kun paa touch - paa skaerm skal raekkerne blive, som de er. */
@media (hover: none) {
  .co-signup input { min-height: 44px; }
  .co-subnav a,
  .co-chip,
  .co-foot-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .co-foot-links a { margin: -8px 0; }
}

/* Undermenuen er en pille med fire punkter, der ikke maa brydes. Paa en
   smal telefon blev den bredere end skaermen og trak hele siden med.
   Den holdes nu inden for kanten og kan rulles indeni i stedet. */
@media (max-width: 420px) {
  .co-subnav-wrap { padding: 0 12px; }
  .co-subnav {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .co-subnav::-webkit-scrollbar { display: none; }
  .co-subnav a { padding: 8px 11px; }
}


/* ============================================================
   CITAT- OG FIGURDESIGN (gaelder alle artikler)
   Mickey 23. september 2026: "I alle artikler bruger du saadan en left
   side border stroke til alle quotes osv. den stinker af AI, lav noget
   andet end den streg."

   Stregen er vaek. I stedet bruger vi den plads, spalten allerede har:
   .co-article er 1180px bred, .co-body er 720px. Der staar altsaa 230px
   ubrugt paa hver side. Citatet, figuren og tabellen bryder ud i den, saa
   de skiller sig ud ved STOERRELSE frem for ved en dekoration.

   Proevet paa én artikel og godkendt af Mickey 23. september 2026,
   derefter rullet ud paa alle. Hver artikel har sin slug paa wrapperen,
   saa den naeste proeve kan koeres paa én side igen.
   ============================================================ */

/* Citatet: ingen streg, stoerre skrift, og det braekker ud af tekstspalten
   i begge sider. Anfoerselstegnet er sat i margenen, saa selve linjen
   stadig flugter med broedteksten - ellers ser det skudt ud. */
.co-pullquote{
  border-left:0;
  padding:0;
  margin:clamp(40px,5.5vw,72px) calc(-1 * var(--ud, 0px));
  width:auto;
  font-size:clamp(25px,3.4vw,42px);
  line-height:1.1;
  letter-spacing:-.028em;
  text-wrap:balance;
  position:relative;
}
/* Hængende anførselstegn: står i margenen, ikke i tekstens flugt. */
.co-pullquote::before{
  content:"\201C";
  position:absolute; left:-.52em; top:-.12em;
  font-size:1.5em; line-height:1; color:var(--accent); opacity:.5;
}
/* Hårfin streg over og under i stedet for langs siden: den rammer
   spaltens fulde bredde og laeses som et ophold, ikke som en etiket. */
.co-pullquote::after{
  content:""; display:block;
  margin-top:clamp(22px,2.6vw,34px);
  border-bottom:1px solid var(--line);
}

/* Den navngivne regel: stregen er skiftet ud med en fyldt flade og en
   etiket, der staar OVER teksten. Hele blokken braekker ogsaa ud. */
.co-rule{
  border-left:0;
  border-radius:16px;
  background:var(--ash,#F2EFE7);
  padding:clamp(24px,3vw,34px);
  margin:clamp(34px,4.5vw,52px) calc(-1 * var(--ud, 0px));
}
.co-rule-label{
  display:inline-block; margin-bottom:12px;
  padding:5px 11px; border-radius:999px;
  background:var(--accent); color:#fff;
  font-size:10px; letter-spacing:.09em;
}
.co-rule p{
  font-size:clamp(17px,1.9vw,21px); line-height:1.45; color:var(--ink);
}

/* Figurer og tabeller faar den samme ekstra plads. En sammenligningstabel
   med tre spalter er det, folk tager et screenshot af - den skal have luft. */
.co-fig,
.co-table-wrap{
  margin-left:calc(-1 * var(--ud, 0px));
  margin-right:calc(-1 * var(--ud, 0px));
}

/* Udbruddet vokser med skaermen og er NUL paa telefon, hvor der ikke er
   nogen margen at bryde ud i. 1180 - 720 = 460, altsaa 230 pr. side; vi
   tager 130 og lader resten staa som luft. */
@media(min-width:900px){
  .co-article{ --ud:70px; }
}
@media(min-width:1100px){
  .co-article{ --ud:130px; }
}