[hidden]{display:none!important}
/* Radio Nordfyn – Havnekontoret, editorial level 1 "Notits"
   Tokens from visual-system.md. Orange (--accent) is reserved for listening. */
:root{
  --paper:#F7F4EE;--paper-2:#EEF2F0;--line:#D9D3C7;--ink:#17363C;--ink-2:#44595D;--accent:#B84A17;
  --f-head:"Literata",Georgia,"Times New Roman",serif;
  --f-body:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:4px;--gap:clamp(24px,4vw,64px);--pad:clamp(20px,3vw,40px);--max:1240px;
  --sec:clamp(80px,10vw,168px);--head-gap:clamp(40px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* type */
.label{font:600 .875rem/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
h1,h2,h3{font-family:var(--f-head);text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.375rem,1.7rem + 2.8vw,3.75rem);font-weight:300;line-height:1.06;letter-spacing:-.02em;max-width:16ch}
h2{font-size:clamp(1.75rem,1.45rem + 1.2vw,2.375rem);font-weight:300;line-height:1.12;letter-spacing:-.015em;max-width:22ch}
h3{font-size:1.3125rem;font-weight:400;line-height:1.22}
h4{font:600 1.0625rem/1.3 var(--f-body)}
p{max-width:62ch}
p+p{margin-top:1em}
.meta{font-size:.9375rem;color:var(--ink-2)}
.standfirst{font:300 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.45 var(--f-head);max-width:58ch}
.prose p,.prose ul{max-width:62ch}
.prose ul{padding-left:1.2em}
.prose li+li{margin-top:.4em}
.prose h3{margin:2em 0 .6em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 1.25em;border-radius:var(--r);font:600 1rem/1.2 var(--f-body);text-decoration:none;border:1.5px solid var(--ink);background:transparent;cursor:pointer;transition:background-color .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.listen{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.listen:hover{background:#9C3D11;border-color:#9C3D11;color:#fff}
.btn .tri{font-size:.8em}

/* live bar */
.live{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:.9375rem;position:relative;z-index:20}
.live .wrap{display:flex;align-items:center;gap:10px;min-height:44px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:pulse 2.8s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
.live b{font-weight:600}
.live .freq{color:var(--ink)}
.live .when{color:var(--ink-2)}
.live a{margin-left:auto;font-weight:600;color:var(--accent);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.45em}
.live a:hover{text-decoration:underline}

/* header */
header.nav{background:var(--paper);position:relative;z-index:15}
header.nav .wrap{display:flex;align-items:center;gap:28px;min-height:80px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:400 1.25rem/1 var(--f-head);letter-spacing:-.005em}
.logo img{width:44px;height:44px;border-radius:50%;flex:none}
.menu{display:flex;align-items:center;gap:28px;margin-left:auto}
.menu ul{display:flex;gap:28px;list-style:none;padding:0;font-weight:500}
.menu ul a{text-decoration:none;padding:10px 0;position:relative}
.menu ul a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu ul a:hover::after,.menu ul a[aria-current="page"]::after{transform:scaleX(1)}
.menu-toggle{display:none;margin-left:auto;min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:none;font-weight:600;cursor:pointer}

/* hero */
.hero{padding:clamp(56px,9vw,144px) 0 var(--sec)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--gap);align-items:center}
.hero .wrap>*{min-width:0}
.hero .label{margin-bottom:24px}
.hero .standfirst{margin:32px 0 44px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.photo{overflow:hidden;border-radius:var(--r);background:var(--paper-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.hero .photo{aspect-ratio:4/5}
figcaption{margin-top:12px;font:400 .9375rem/1.45 var(--f-body);color:var(--ink-2);max-width:48ch}

/* facts */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.fact{padding:40px 24px 40px 0;min-width:0}
.fact+.fact{padding-left:24px;border-left:1px solid var(--line)}
.fact .v{font:400 1.5rem/1.2 var(--f-head);margin-top:8px;hyphens:auto;overflow-wrap:break-word}
.fact .v a{text-decoration:none}
.fact .v a:hover{text-decoration:underline}

/* sections */
section.block{padding:var(--sec) 0}
.runhead{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:var(--head-gap)}
.runhead .no{font:300 1.25rem/1 var(--f-head)}
.runhead .rt{margin-left:auto;font-size:.875rem;color:var(--ink-2)}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:var(--head-gap)}
.head p{margin-top:18px}
.inset>*{min-width:0}

/* news index */
.news{list-style:none;padding:0;border-top:1px solid var(--line)}
.news>li{border-bottom:1px solid var(--line)}
.news article{display:grid;grid-template-columns:200px 1fr 1.2fr;gap:var(--gap);padding:36px 0;align-items:baseline}
.news article>*{min-width:0}
.news h3 a{text-decoration:none}
.news h3 a:hover{text-decoration:underline}
.news .excerpt{color:var(--ink)}
.news .more{display:inline-block;margin-top:10px;font-weight:600}
.news-empty{padding:36px 0;color:var(--ink-2)}
.tag{display:inline-block;white-space:nowrap;margin-left:10px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font:600 .75rem/1.4 var(--f-body);letter-spacing:.04em;color:var(--ink-2);vertical-align:middle}

/* hosts */
.hosts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);list-style:none;padding:0}
.hosts .ph{aspect-ratio:1;background:var(--paper-2);border-radius:var(--r);margin-bottom:18px;display:grid;place-items:center;font:300 clamp(3rem,2rem + 3vw,4.5rem)/1 var(--f-head);color:var(--ink-2)}
.hosts h3{margin-bottom:4px}

/* board list */
.board{list-style:none;padding:0;border-top:1px solid var(--line)}
.board li{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.board b{font:400 1.25rem/1.2 var(--f-head)}
.board span{color:var(--ink-2)}

/* membership */
.member{background:var(--paper-2)}
.member .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.member .wrap>*{min-width:0}
.member .runhead{margin-bottom:clamp(32px,4vw,56px)}
.member h2{margin-bottom:22px}
.tiers{list-style:none;padding:0;border-top:1px solid var(--line)}
.tiers li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.tiers b{font:400 1.25rem/1.2 var(--f-head);font-variant-numeric:tabular-nums}
.bank{margin-top:36px;display:grid;gap:14px}
.bank .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.bank .num{font:400 1.375rem/1.2 var(--f-head);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.copy{min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:transparent;font:600 .9375rem var(--f-body);cursor:pointer}
.copy:hover{background:var(--ink);color:var(--paper)}
.copy[data-done]{background:var(--ink);color:var(--paper)}
.member .btn{margin-top:36px}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:22px;margin-top:28px}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:baseline}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:300 1.25rem/1 var(--f-head)}

/* page header (subpages) */
.page-head{padding:clamp(56px,8vw,128px) 0 clamp(48px,6vw,96px)}
.page-head .label{margin-bottom:22px}
.page-head .standfirst{margin-top:28px}
.toc{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:40px;list-style:none;padding:0;font-weight:500}

/* article */
.article{padding:clamp(56px,8vw,128px) 0 var(--sec)}
.article .back{display:inline-block;margin-bottom:40px;font-weight:600}
.article h1{max-width:20ch}
.article .meta{margin:22px 0 40px}
.article .photo{aspect-ratio:3/2;max-width:880px}
.article figure{margin-bottom:48px}
.article .body{font-size:1.125rem}
.draft-note{margin-top:40px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);font-size:.9375rem;color:var(--ink-2);max-width:62ch}

/* footer */
footer{border-top:1px solid var(--line);padding:clamp(64px,7vw,104px) 0 48px;font-size:.9375rem;color:var(--ink-2)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--gap)}
footer .cols>*{min-width:0}
footer .brand{font:400 1.375rem/1.2 var(--f-head);color:var(--ink)}
footer .slogan{margin-top:14px;max-width:34ch}
footer ul{list-style:none;padding:0;display:grid;gap:8px}
footer .label{margin-bottom:14px}
footer a{color:var(--ink)}
footer .small{margin-top:clamp(48px,6vw,80px);padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.875rem}

/* desktop asymmetric offset */
@media(min-width:861px){
  .inset{margin-left:calc(100% / 12);margin-right:calc(100% / 12)}
  .runhead .no{width:calc((100% / 12) - 16px)}
  .member .wrap{grid-template-columns:5fr 1fr 5fr}
  .member .wrap>.col-b{grid-column:3}
  .split{display:grid;grid-template-columns:5fr 1fr 5fr}
  .split>.col-b{grid-column:3}
}

/* tablet and phone */
@media(max-width:1100px){
  .facts .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fact:nth-child(4){border-left:0;padding-left:0}
  .fact:nth-child(n+4){border-top:1px solid var(--line)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .photo{aspect-ratio:4/3}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact:nth-child(n){border-left:0;padding-left:0;border-top:0}
  .fact:nth-child(even){border-left:1px solid var(--line);padding-left:16px}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .fact:last-child:nth-child(odd){grid-column:1/-1}
  .news article{grid-template-columns:1fr;gap:8px}
  .hosts{grid-template-columns:1fr 1fr}
  .member .wrap{grid-template-columns:1fr}
  .split>.col-b{margin-top:48px}
  .menu-toggle{display:inline-flex;align-items:center}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--pad) 24px;flex-direction:column;align-items:stretch;gap:16px}
  .menu.open{display:flex}
  .menu ul{flex-direction:column;gap:0}
  .menu ul a{display:flex;min-height:48px;align-items:center;border-bottom:1px solid var(--line)}
  .menu ul a::after{display:none}
  header.nav .wrap{position:static}
  header.nav{position:relative}
}
@media(max-width:600px){
  section.block{padding:clamp(64px,18vw,80px) 0}
  .head{flex-direction:column;align-items:flex-start}
  .runhead .rt{display:none}
  .live{position:sticky;top:0}
  .live .when{display:none}
  header.nav .wrap{gap:12px;min-height:68px}
  .logo{font-size:1.125rem;gap:10px}
  .logo img{width:38px;height:38px}
  .fact{padding:24px 12px 24px 0}
  .fact .v{font-size:1.1875rem}
  .hosts{gap:20px}
  footer .cols{grid-template-columns:1fr}
  .board li{flex-direction:column;gap:2px}
  .actions .btn{flex:1 1 100%}
}

/* motion (only when JS adds .motion and reduced motion is off) */
.motion [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.motion [data-reveal].is-in{opacity:1;transform:none}
.motion .hero h1{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1.2s var(--ease) .15s,transform 1.4s var(--ease) .15s}
.motion .hero .label{opacity:0;transition:opacity 1s var(--ease)}
.motion .hero .standfirst{opacity:0;transform:translate3d(0,16px,0);transition:opacity 1.2s var(--ease) .45s,transform 1.3s var(--ease) .45s}
.motion .hero .actions{opacity:0;transition:opacity 1s var(--ease) .75s}
.motion .hero .photo{clip-path:inset(10% 10% 10% 10% round 4px);transition:clip-path 1.6s var(--ease) .2s}
.motion .hero .photo img{transform:scale(1.08);transition:transform 2.2s var(--ease) .2s}
.motion .hero figcaption{opacity:0;transition:opacity 1s var(--ease) 1.1s}
.motion.hero-in .hero h1,.motion.hero-in .hero .label,.motion.hero-in .hero .standfirst,.motion.hero-in .hero .actions,.motion.hero-in .hero figcaption{opacity:1;transform:none}
.motion.hero-in .hero .photo{clip-path:inset(0 0 0 0 round 4px)}
.motion.hero-in .hero .photo img{transform:scale(1)}
@media(max-width:600px){
  .motion [data-reveal]{transform:translate3d(0,16px,0);transition-duration:.8s,.9s}
}
@media(prefers-reduced-motion:reduce){
  .dot::after{animation:none}
  *{transition:none!important}
}

.fact .v{text-wrap:balance}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.toc a{display:inline-flex;align-items:center;min-height:44px}
.member .wrap>.runhead{grid-column:1/-1}
.fact .v{hyphens:manual}

/* === Revision 2026-10-01: Familjen Grotesk headings + logo blue (Birk) === */
:root{--blue:#094E9B;--f-head:"Familjen Grotesk","Atkinson Hyperlegible Next",system-ui,sans-serif;--hw:500}
h1,h2,h3{font-weight:var(--hw)}
h1{letter-spacing:-.025em;line-height:1.04}
h2{letter-spacing:-.02em}
h3{letter-spacing:-.01em}
.logo,footer .brand{font-weight:500;letter-spacing:-.01em}
.standfirst{font:400 clamp(1.1875rem,1.1rem + .35vw,1.375rem)/1.5 var(--f-body)}
.fact .v,.board b,.tiers b,.bank .num{font-weight:var(--hw)}
.runhead .no,.steps li::before{font-weight:500}
.hosts .ph{font-weight:400}
/* blue = brand accent. Orange stays reserved for listening. */
.runhead{border-top-color:var(--blue)}
.runhead .no,.steps li::before{color:var(--blue)}
.hero .label,.page-hero .label{color:var(--blue)}
main a:not(.btn){text-decoration-color:var(--blue);text-underline-offset:.18em}
main a:not(.btn):hover{color:var(--blue)}
.btn:not(.listen){border-color:var(--blue);color:var(--blue)}
.btn:not(.listen):hover{background:var(--blue);color:#fff}
.menu a[aria-current]{text-decoration-color:var(--blue)}
.hosts .ph{color:var(--blue)}
:focus-visible{outline-color:var(--blue)}
.fact .v{font-size:clamp(1.125rem,.85rem + .7vw,1.5rem)}
@media(min-width:1101px){.facts .wrap{grid-template-columns:repeat(5,auto)}.fact .v{white-space:nowrap}}