/* ==========================================================================
Bechster Synthwave · main.css
Ported 1:1 from mockups/10-synthwave (style.css) + mockups/assets/core.css,
followed by WordPress additions (blocks, plugin feeds, patterns, templates).
Unlayered on purpose: wins over the bechster-core plugin's @layer bechster-core.
========================================================================== */

/* ---------- Core (mockups/assets/core.css) ---------- */
/* Fælles basis. Farver defineres i hvert design med light-dark(), så systemvalg virker uden JS. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 0.15em solid currentColor; outline-offset: 0.2em; }
.sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Standard tema-skift: cirkulær reveal fra knappen. Designs kan overskrive keyframes/animation. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt-reveal 0.7s cubic-bezier(.7, 0, .2, 1); }
@keyframes vt-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to   { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); }
}

/* Scroll-reveal uden JS (progressive enhancement) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes reveal { from { opacity: 0; translate: 0 2rem; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
10 — Synthwave · Bechster
Midnat (dark) / Miami-daggry (light). Farver via light-dark().
========================================================================== */
:root {
--f-head:Inter, system-ui, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--f-mono:ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--f-body:var(--f-mono);

--bg0: light-dark(#ffd8c2, #0f0420);
--bg1: light-dark(#ffc2d9, #1b0636);
--bg2: light-dark(#e3cdfb, #2a0845);
--ink:light-dark(#2a0845, #f6ecff);
--muted:light-dark(#5a2370, #cdb8ee);
--mag:light-dark(#b0127a, #ff2bd6);
--cyan:light-dark(#005c5c, #00f0ff);
--teal:light-dark(#00a6a6, #00f0ff);
--orange:light-dark(#a13d00, #ff8a3d);
--yellow:light-dark(#7a5200, #ffe66d);
--on-accent:light-dark(#fff, #14021f);
--surface:light-dark(rgb(255 250 247 / .62), rgb(22 5 44 / .74));
--surface-2: light-dark(rgb(255 244 238 / .94), rgb(34 7 60 / .94));
--line:light-dark(rgb(176 18 122 / .32), rgb(255 43 214 / .38));
--line-c:light-dark(rgb(0 120 120 / .35), rgb(0 240 255 / .35));
--glow:light-dark(rgb(176 18 122 / .28), rgb(255 43 214 / .55));
--glow-c:light-dark(rgb(0 166 166 / .3), rgb(0 240 255 / .5));
--grid:light-dark(rgb(176 18 122 / .5), rgb(0 240 255 / .9));
--floor-a:light-dark(#ffc6e2, #1d0540);
--floor-b:light-dark(#ffe2cf, #0b0218);
--sun1: light-dark(#ffef9e, #ffe66d);
--sun2: light-dark(#ff9c5b, #ff8a3d);
--sun3: light-dark(#e43d93, #ff2bd6);
--mtn:light-dark( #9a55b0, #1c0538);
--mtn-2: light-dark( #c47ac0, #2d0a52);
--ridge:light-dark(#00a6a6, #ff2bd6);
--c1: light-dark( #3a0a5c, #00f0ff);
--c2: light-dark( #6d1688, #ffffff);
--c3: light-dark( #b0127a, #ff4fdc);
--c4: light-dark( #a3245e, #ff9a5a);
--c5: light-dark( #8a3a00, #ffe66d);
--x1: light-dark( #c47ac0, #b01cc4);
--x2: light-dark( #fa9ef5, #1c0332);
/* faste signalfarver (bruges uden light-dark) 3a0a5c   14021f  a9f6ff */
--k-yellow: #ffe66d;
--k-orange: #ff8a3d;
--k-mag: #ff2bd6;
--k-cyan: #00f0ff;
--k-deep: #14021f;
--k-deep2: #12021f;
--k-glitch-a: #ff00d4;
--k-glitch-b: #00e5ff;
--k-code: #f6ecff;
--k-code-tk: #ff7ae6;
--k-code-at: #7ff8ff;
--k-code-cm: #b39ad8;
--k-star-c: #a9f6ff;
--k-star-m: #ffb3ee;
--k-hz: #fff6c9;
--k-tile-l: #fff8f3;
--k-tile-d: #1d0738;
--k-backdrop: rgb(15 4 32 / .35);
--k-hud-d: rgb(10 2 22 / .82);
--k-hud-l: rgb(255 250 247 / .78);
--k-yellow-a: rgb(255 230 109 / .6);
--chrome:linear-gradient(180deg, var(--c5) 0%, var(--c1) 14%, var(--c2) 59%, var(--c3) 60%, var(--c4) 78%, var(--c5) 96%);
--ol: var(--x2);
--ol-w: 1px;
--outline:drop-shadow(var(--ol-w) 0 0 var(--ol)) drop-shadow(calc(-1 * var(--ol-w)) 0 0 var(--ol)) drop-shadow(0 var(--ol-w) 0 var(--ol)) drop-shadow(0 calc(-1 * var(--ol-w)) 0 var(--ol));
--extrude:drop-shadow(.02em .03em 0 var(--x1)) drop-shadow(.02em .03em 0 var(--x1)) drop-shadow(.02em .03em 0 var(--x2));
--sunset:linear-gradient(90deg, var(--yellow), var(--orange), var(--mag), var(--cyan));

--t--1: clamp(.78rem, .74rem + .15vw, .86rem);
--t-0: clamp(1rem, .94rem + .3vw, 1.18rem);
--t-1: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
--t-2: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
--t-3: clamp(2rem, 1.3rem + 3vw, 3.6rem);
--t-4: clamp(2.9rem, 1rem + 8vw, 8rem);
--sp-1: .5rem;
--sp-2: clamp(.75rem, .6rem + .6vw, 1.1rem);
--sp-3: clamp(1.25rem, 1rem + 1vw, 2rem);
--sp-4: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
--sp-5: clamp(3.5rem, 2rem + 6vw, 8rem);
--gutter:clamp(1rem, 4vw, 2.5rem);
--radius:.9rem;
--ease:cubic-bezier(.2, .8, .2, 1);
--dark:0;
}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--dark:1}}
:root[data-theme="dark"]{--dark:1}

/* ---------- Basis ---------- */
html{scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body {
font:400 var(--t-0)/1.65 var(--f-body);
color:var(--ink);
background:var(--bg0) linear-gradient(180deg, var(--bg0), var(--bg1) 50%, var(--bg2)) fixed;
min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;
}
body::before{/* stjerner i midnat */
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
opacity:calc(var(--dark) * .75);
background:
radial-gradient(.1rem .1rem at 12% 18%, #fff 50%, transparent 0),
radial-gradient(.08rem .08rem at 38% 8%, var(--k-yellow) 50%, transparent 0),
radial-gradient(.12rem .12rem at 64% 26%, #fff 50%, transparent 0),
radial-gradient(.08rem .08rem at 82% 12%, var(--k-star-c) 50%, transparent 0),
radial-gradient(.1rem .1rem at 24% 42%, var(--k-star-m) 50%, transparent 0),
radial-gradient(.08rem .08rem at 90% 46%, #fff 50%, transparent 0),
radial-gradient(.06rem .06rem at 52% 52%, #fff 50%, transparent 0);
background-size:31rem 23rem;
}
main{flex:1}
::selection{background:var(--mag);color:var(--on-accent)}
a{color:inherit;text-decoration-color:var(--mag);text-decoration-thickness:.08em;text-underline-offset:.22em;transition:color .25s, text-decoration-color .25s}
a:hover{color:var(--mag)}
:focus-visible{outline:.15em solid var(--cyan);outline-offset:.2em;border-radius:.25em}
h1, h2, h3, h4{font-family:var(--f-head);font-weight:900;line-height:1.04;letter-spacing:-.025em;text-wrap:balance;margin:0}
p, ul, ol, dl, figure, blockquote{margin:0}
p{text-wrap:pretty}
.wrap{width:min(100% - 2 * var(--gutter), 80rem);margin-inline:auto}
.mono, .kicker, .entry-meta, .chip{font-family:var(--f-mono)}
.kicker{font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase;color:var(--mag);font-weight:600}
.kicker::before{content:"// ";color:var(--cyan)}
.skip-link{position:absolute;left:1rem;top:-10rem;z-index:300;padding:.6em 1em;background:var(--mag);color:var(--on-accent);font:700 var(--t--1) var(--f-mono);border-radius:.4rem}
.skip-link:focus{top:1rem}

/* ---------- Chrome-overskrifter ---------- */
.chrome, .brand-word, .stat b, :is(.bechster-now, .bechster-timeline, .bechster-contact) > h2 {
color:var(--c3);
background:var(--chrome) 0 0 / 100% 100%;
background:var(--chrome) 0 0 / 100% 1lh repeat-y;/* én chrome-horisont pr. linje */
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
filter:var(--outline) var(--extrude) drop-shadow(0 0 .3em var(--glow));
padding-block-end:.22em;margin-block-end:-.16em;/* plads til nedstreger i sidste linje */
}

/* ---------- Header ---------- */
.site-header {
position:sticky;top:0;z-index:50;
background:color-mix(in srgb, var(--bg0) 72%, transparent);
backdrop-filter:blur(.8rem) saturate(1.4);
border-bottom:thin solid var(--line);
box-shadow:0 .1rem 1.4rem -.6rem var(--glow);
}
.bar{display:flex;align-items:center;gap:clamp(.25rem, 1vw, 1rem);min-height:4.25rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;margin-right:auto;text-decoration:none;font:900 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1 var(--f-head);letter-spacing:-.03em}
.brand-sun, .mini-sun {
inline-size:1.4em;block-size:auto;aspect-ratio:1;flex:none;overflow:visible;
filter:drop-shadow(0 0 .3em var(--sun3));
transition:rotate .6s var(--ease);
}
.brand:hover .brand-sun{rotate:-12deg}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;position:relative}
.site-nav a {
display:block;padding:.55em .9em;text-decoration:none;position:relative;
font:600 var(--t--1)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.site-nav a:hover, .site-nav a[aria-current]{color:var(--ink)}
.site-nav a[aria-current]{text-shadow:0 0 .8em var(--glow)}
.site-nav a::after, .site-nav ul.has-ink::after {
content:"";position:absolute;bottom:-.05rem;height:.16rem;border-radius:1rem;
background:linear-gradient(90deg, var(--cyan), var(--mag));
box-shadow:0 0 .6rem var(--mag), 0 0 1.4rem var(--glow-c);
}
.site-nav a::after{left:.9em;right:.9em;opacity:0}
.site-nav a[aria-current]::after{opacity:1}
.site-nav ul.has-ink a::after{display:none}
.site-nav ul.has-ink::after {
left:0;width:var(--ink-w, 0);translate:var(--ink-x, 0) 0;opacity:var(--ink-o, 0);scale:.7 1;
transition:translate .45s var(--ease), width .45s var(--ease), opacity .3s;
}
.tools{display:flex;gap:.3rem;align-items:center}
.tool, .menu-btn {
inline-size:2.5rem;block-size:2.5rem;display:grid;place-items:center;padding:0;cursor:pointer;position:relative;
color:var(--ink);background:transparent;border:thin solid var(--line);border-radius:.6rem;
transition:border-color .25s, box-shadow .25s, color .25s, background .25s;
}
.tool:hover, .menu-btn:hover, .tool:has(:focus-visible){border-color:var(--mag);color:var(--mag);box-shadow:0 0 1rem -.2rem var(--glow), inset 0 0 .6rem -.2rem var(--glow)}
.tool:has(:focus-visible){outline:.15em solid var(--cyan);outline-offset:.2em}
.tool svg, .menu-btn svg{inline-size:1.3rem;block-size:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tool svg g, .tool svg path{transform-box:fill-box;transform-origin:center;transition:opacity .4s, transform .5s var(--ease)}
.crt input{appearance:none;position:absolute;inset:0;margin:0;cursor:pointer;border-radius:inherit}
.crt input:focus-visible{outline:none}
.crt .i-lines{opacity:0}
.crt:has(:checked){color:var(--cyan);border-color:var(--line-c)}
.crt:has(:checked) .i-lines{opacity:1}
[data-theme-toggle] .i-sun{opacity:calc(1 - var(--dark));transform:rotate(calc(var(--dark) * 90deg)) scale(calc(1 - var(--dark) * .5))}
[data-theme-toggle] .i-moon{opacity:var(--dark);transform:rotate(calc((1 - var(--dark)) * -60deg)) scale(calc(.5 + var(--dark) * .5))}
[data-theme-toggle] .i-sun circle{fill:currentColor;fill-opacity:.25}
[data-sound-toggle] .i-on{opacity:0;transform:scale(.6)}
[data-sound-toggle][aria-pressed="true"]{color:var(--cyan);border-color:var(--line-c)}
[data-sound-toggle][aria-pressed="true"] .i-on{opacity:1;transform:none}
[data-sound-toggle][aria-pressed="true"] .i-off{opacity:0;transform:scale(.4) rotate(45deg)}
.menu-btn{display:none}

@media (max-width: 51.99rem) {
.tools{order:1}
.menu-btn{display:grid;order:2}
.site-nav{order:3}
.site-nav:popover-open {
position:fixed;inset:4.9rem var(--gutter) auto auto;margin:0;width:min(19rem, 100% - 2 * var(--gutter));
padding:.75rem;color:var(--ink);background:var(--surface-2);border:thin solid var(--mag);border-radius:var(--radius);
box-shadow:0 0 0 .3rem color-mix(in srgb, var(--mag) 15%, transparent), 0 1.5rem 3rem -1rem var(--glow);
transition:opacity .3s, translate .4s var(--ease), display .4s allow-discrete, overlay .4s allow-discrete;
}
@starting-style{.site-nav:popover-open{opacity:0;translate:0 -.75rem}}
.site-nav::backdrop{background:var(--k-backdrop);backdrop-filter:blur(.2rem)}
.site-nav ul{flex-direction:column}
.site-nav a{font:900 var(--t-2)/1.1 var(--f-head);letter-spacing:-.02em;text-transform:none;padding:.45em .5em;border-radius:.5rem}
.site-nav a:hover{background:color-mix(in srgb, var(--mag) 12%, transparent)}
.site-nav a[aria-current]::after{left:.5em;right:auto;width:2.5rem}
.bar:has(.site-nav:popover-open) .menu-btn{color:var(--mag);border-color:var(--mag)}
.menu-btn path{transition:transform .4s var(--ease), opacity .3s;transform-box:fill-box;transform-origin:center}
.bar:has(.site-nav:popover-open) .menu-btn .m1{transform:translateY(.36rem) rotate(45deg)}
.bar:has(.site-nav:popover-open) .menu-btn .m2{opacity:0}
.bar:has(.site-nav:popover-open) .menu-btn .m3{transform:translateY(-.36rem) rotate(-45deg)}
}
@media (min-width: 52rem) {
.site-nav, .site-nav:popover-open{display:block;position:static;inset:auto;margin:0 1rem 0 0;padding:0;border:0;background:none;color:inherit;overflow:visible;width:auto;height:auto}
}
@media (max-width: 23rem){.brand-sun{display:none} .tool, .menu-btn{inline-size:2.25rem;block-size:2.25rem} .tools{gap:.2rem}}

/* ---------- CRT-scanlinjer (toggle) ---------- */
body:has(#crt:checked)::after {
content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
background:
radial-gradient(ellipse at center, transparent 62%, rgb(10 0 25 / calc(.08 + var(--dark) * .22))),
repeating-linear-gradient(180deg, rgb(20 0 40 / calc(.05 + var(--dark) * .13)) 0 .0625rem, transparent .0625rem .1875rem);
}
@media (prefers-reduced-motion: no-preference){body:has(#crt:checked)::after{animation:flicker 6s steps(1) infinite}}
@keyframes flicker{0%, 100%{opacity:1} 47%{opacity:.82} 48%{opacity:1} 91%{opacity:.9}}

/* ---------- Knapper ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem}
.btn {
--b:var(--mag);
display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.5em;position:relative;overflow:hidden;
font:700 var(--t--1)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
border-radius:.45rem;transform:skewX(-10deg);transition:box-shadow .3s, translate .3s var(--ease), background-color .3s, color .3s;
}
.btn > *{transform:skewX(10deg)}
.btn-primary{color:var(--on-accent);background:linear-gradient(100deg, var(--mag), var(--orange));box-shadow:0 0 1.4rem -.3rem var(--glow)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;transition:background-position .7s var(--ease)}
.btn-primary:hover{color:var(--on-accent);translate:0 -.15rem;box-shadow:0 0 2.2rem 0 var(--glow), 0 .8rem 1.6rem -1rem var(--mag)}
.btn-primary:hover::after{background-position:250% 0}
.btn-ghost{color:var(--cyan);border:thin solid currentColor;box-shadow:inset 0 0 .9rem -.4rem var(--glow-c)}
.btn-ghost:hover{color:var(--cyan);background:color-mix(in srgb, var(--teal) 12%, transparent);box-shadow:0 0 1.6rem -.2rem var(--glow-c), inset 0 0 1rem -.3rem var(--glow-c);translate:0 -.15rem}
.link-arrow{font:600 var(--t--1) var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-flex;gap:.5em;align-items:center}
.link-arrow span{color:var(--mag);transition:translate .35s var(--ease)}
.link-arrow:hover span{translate:.35em 0}

/* ---------- Outrun-scene ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;--floor:clamp(8rem, 20vw, 15rem);padding-block:clamp(3rem, 9vh, 7rem) calc(var(--floor) + clamp(7rem, 16vw, 11rem))}
.hero-copy{display:grid;gap:var(--sp-3);justify-items:start}
.hero-copy > *{max-width:46rem}
.hero h1{font-size:var(--t-4);line-height:.92;letter-spacing:-.045em}
.hero .lede{font:800 var(--t-2)/1.15 var(--f-head);letter-spacing:-.02em;color:var(--cyan);text-shadow:0 0 1.2em var(--glow-c);max-width:22ch}
.hero .intro{max-width:52ch;color:var(--ink)}
.scene{position:absolute;inset:0;z-index:-1;pointer-events:none;--horizon:calc(100% - var(--floor))}
.sun-wrap{position:absolute;left:50%;top:var(--horizon);width:clamp(13rem, 36vw, 32rem);aspect-ratio:1;translate:-50% -50%;filter:drop-shadow(0 0 2.5rem var(--sun3)) drop-shadow(0 0 6rem color-mix(in srgb, var(--sun2) 50%, transparent))}
@media (min-width: 60rem){.sun-wrap{left:74%}}
.sun {
width:100%;height:100%;border-radius:50%;
background:linear-gradient(var(--sun1) 8%, var(--sun2) 48%, var(--sun3) 88%);
mask:linear-gradient(#000 0 30%, transparent 0 31.5%, #000 0 38%, transparent 0 40.5%, #000 0 46%, transparent 0 49.5%, #000 0 54%, transparent 0 58.5%, #000 0 62%, transparent 0 67.5%, #000 0 70%, transparent 0 77%, #000 0 79%, transparent 0);
}
@media (prefers-reduced-motion: no-preference){.sun{animation:sunset 22s ease-in-out infinite alternate}}
@keyframes sunset{from{translate:0 -14%} to{translate:0 8%}}
.mtn{position:absolute;left:-2%;right:-2%;bottom:calc(var(--floor) - .1rem);height:clamp(4.5rem, 13vw, 10rem)}
.mtn::before, .mtn::after{content:"";position:absolute;inset:0;clip-path:var(--peaks)}
.mtn::before{background:var(--ridge);filter:blur(.03rem)}
.mtn::after{background:linear-gradient(var(--mtn-2), var(--mtn));translate:0 .16rem}
.mtn-back{--peaks:polygon(0 100%, 0 55%, 7% 30%, 13% 48%, 21% 12%, 29% 46%, 35% 34%, 41% 62%, 49% 72%, 57% 50%, 63% 22%, 70% 48%, 77% 6%, 85% 40%, 92% 24%, 100% 50%, 100% 100%)}
.mtn-back::after{background:linear-gradient(var(--mtn-2), color-mix(in srgb, var(--mtn) 70%, var(--mtn-2)))}
.mtn-front{--peaks:polygon(0 100%, 0 78%, 9% 52%, 16% 70%, 25% 44%, 33% 74%, 41% 88%, 50% 96%, 58% 84%, 66% 58%, 73% 76%, 82% 46%, 90% 70%, 100% 56%, 100% 100%);height:clamp(3rem, 8vw, 6rem)}
.floor {
position:absolute;left:0;right:0;bottom:0;height:var(--floor);overflow:hidden;
background:linear-gradient(var(--floor-a), var(--floor-b));
border-top:.14rem solid var(--mag);box-shadow:0 -.4rem 2.2rem var(--glow), inset 0 1rem 2rem -1rem var(--glow);
perspective:9rem;perspective-origin:50% 0;
}
.floor::before {
content:"";position:absolute;left:-150%;right:-150%;bottom:0;height:600%;
transform-origin:50% 100%;transform:rotateX(87deg);
/* Bløde linjekanter (antialiasing), så tynde linjer i perspektivet ikke blinker */
background:
linear-gradient(var(--grid) 0 .09rem, transparent .2rem) 0 0 / 100% 3rem,
linear-gradient(90deg, var(--grid) 0 .09rem, transparent .2rem) 50% 0 / 3rem 100%;
/* Dis: linjer, der i perspektivet bliver tyndere end en pixel (ca. én gulvhøjde inde), fades ned */
--fh:var(--floor, 7.5rem);
mask:linear-gradient(to top, #000 calc(var(--fh) * .9), rgb(0 0 0 / .12) calc(var(--fh) * 2.4));
will-change:transform;
}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--floor-a) 8%, color-mix(in srgb, var(--floor-a) 70%, transparent) 35%, transparent 75%)}
/* Fladen flyttes med transform (GPU, subpixel-glat) i stedet for at gentegne baggrunden hvert frame */
@media (prefers-reduced-motion: no-preference){.floor::before{animation:drive 1.1s linear infinite}}
@keyframes drive{from{transform:rotateX(87deg) translateY(0)} to{transform:rotateX(87deg) translateY(3rem)}}

/* ---------- Sektioner ---------- */
.section{padding-block:var(--sp-5) 0}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.5rem 2rem;margin-bottom:var(--sp-4)}
.section-head > div{display:grid;gap:.6rem}
.section-title{font-size:var(--t-3)}
.page-head{padding-block:var(--sp-5) var(--sp-4);display:grid;gap:var(--sp-2)}
.page-head h1{font-size:clamp(2.6rem, 1rem + 6.5vw, 6.5rem);line-height:.95;letter-spacing:-.04em}
.page-head .intro{max-width:58ch;color:var(--muted);font-size:var(--t-1);line-height:1.5}

/* ---------- Kort ---------- */
.grid-cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr))}
.card, .bechster-now__item, .bechster-contact {
position:relative;display:flex;flex-direction:column;border-radius:var(--radius);
background:var(--surface);border:thin solid var(--line);
box-shadow:0 0 1.4rem -.8rem var(--glow);
transform:perspective(55rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition:transform .6s var(--ease), box-shadow .35s, border-color .35s, opacity .45s, translate .5s var(--ease);
backdrop-filter:blur(.4rem);
}
@starting-style{.card, .bechster-now__item, .bechster-contact{opacity:0;translate:0 1rem}}
.card.tilting{transition-duration:.12s, .35s, .35s, .45s, .5s}
.card:hover, .card:focus-within, .bechster-now__item:hover, .bechster-contact:hover, .bechster-contact:focus-within {
border-color:var(--mag);
box-shadow:0 0 0 .0625rem var(--mag), 0 0 2.6rem -.2rem var(--glow), inset 0 0 1.6rem -.9rem var(--glow);
}
.card::before{/* gloss der følger pointeren */
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
background:radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .16), transparent 45%);
}
.card.tilting::before{opacity:1}
.card .vhs{border-radius:calc(var(--radius) - .0625rem) calc(var(--radius) - .0625rem) 0 0}
.card-body{display:grid;gap:.65rem;padding:var(--sp-3);align-content:start;flex:1}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;font-size:var(--t--1);color:var(--muted);letter-spacing:.04em}
.entry-title{font-size:var(--t-1);line-height:1.12}
.entry-title a{text-decoration:none}
.entry-title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius)}
.card:hover .entry-title a{color:var(--mag)}
.entry-summary{color:var(--muted);font-size:.95em;line-height:1.55}
.chip {
--c:var(--mag);
display:inline-block;padding:.3em .7em;font-size:var(--t--1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;
color:var(--c);border:thin solid color-mix(in srgb, var(--c) 55%, transparent);border-radius:2rem;
background:color-mix(in srgb, var(--c) 10%, transparent);
}
.chip[data-cat="noter"], .chip[data-cat="kunst"]{--c:var(--cyan)}
.chip[data-cat="links"], .chip[data-cat="foto"]{--c:var(--orange)}
.chip[data-cat="grafisk"]{--c:var(--yellow)}

/* ---------- VHS-glitch på billeder ---------- */
.vhs{position:relative;overflow:hidden;background:var(--k-deep2);isolation:isolate}
.vhs img{width:100%;aspect-ratio:3 / 2;object-fit:cover;transition:scale .8s var(--ease), filter .6s}
/* Zoom og VHS-glitch kun på billeder, der kan klikkes (kort med titellink, links, Pixelfed, lightbox-knapper) */
:is(.card:has(.entry-title a[href]):hover .vhs, a[href]:hover .vhs, a.vhs:hover, .vhs:has([role="button"]):hover) img{scale:1.045;filter:saturate(1.25) contrast(1.05)}
@media (prefers-reduced-motion: no-preference) {
:is(.card:has(.entry-title a[href]):hover .vhs, a[href]:hover .vhs, a.vhs:hover, .vhs:has([role="button"]):hover)::before, :is(.card:has(.entry-title a[href]):hover .vhs, a[href]:hover .vhs, a.vhs:hover, .vhs:has([role="button"]):hover)::after {
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:var(--img) center / cover, var(--k-glitch-a);background-blend-mode:multiply;mix-blend-mode:screen;
animation:vhs-a .75s steps(1, end) both;
}
:is(.card:has(.entry-title a[href]):hover .vhs, a[href]:hover .vhs, a.vhs:hover, .vhs:has([role="button"]):hover)::after{background-color:var(--k-glitch-b);animation-name:vhs-b}
:is(.card:has(.entry-title a[href]):hover .vhs, a[href]:hover .vhs, a.vhs:hover, .vhs:has([role="button"]):hover) img{animation:vhs-jit .75s steps(1, end)}
}
@keyframes vhs-a {
0%{clip-path:inset(8% 0 72% 0);translate:-4% 0}
14%{clip-path:inset(52% 0 30% 0);translate:5% 0}
28%{clip-path:inset(28% 0 54% 0);translate:-2.5% 0}
42%{clip-path:inset(78% 0 6% 0);translate:3% 0}
56%{clip-path:inset(3% 0 86% 0);translate:-5% 0}
70%{clip-path:inset(40% 0 44% 0);translate:1.5% 0}
84%{clip-path:inset(64% 0 26% 0);translate:-1% 0}
100%{clip-path:inset(50% 0 50% 0);translate:0}
}
@keyframes vhs-b {
0%{clip-path:inset(60% 0 22% 0);translate:4% 0}
14%{clip-path:inset(12% 0 70% 0);translate:-3% 0}
28%{clip-path:inset(70% 0 12% 0);translate:2% 0}
42%{clip-path:inset(22% 0 64% 0);translate:-4% 0}
56%{clip-path:inset(46% 0 40% 0);translate:5% 0}
70%{clip-path:inset(88% 0 2% 0);translate:-2% 0}
84%{clip-path:inset(18% 0 74% 0);translate:1% 0}
100%{clip-path:inset(50% 0 50% 0);translate:0}
}
@keyframes vhs-jit{0%{translate:.6% 0} 20%{translate:-.8% 0;filter:hue-rotate(25deg) saturate(1.6)} 45%{translate:.4% 0} 70%{translate:0;filter:none}}

/* ---------- Mastodon ---------- */
.feeds{display:grid;gap:var(--sp-4) var(--sp-4)}
.feeds > *, .toot, .toot .who{min-width:0}
.toot p{overflow-wrap:anywhere}
@media (min-width: 62rem){.feeds{grid-template-columns:1.05fr 1fr;align-items:start}}
.feed-title{font-size:var(--t-2);margin-block:.5rem 1.25rem}
.feed-title a{text-decoration:none}
.toots{list-style:none;padding:0;display:grid;gap:var(--sp-2)}
.toot{padding:var(--sp-3);display:grid;gap:.8rem}
.toot header{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem}
.avatar{inline-size:2.6rem;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;flex:none;font:900 .95rem var(--f-head);color:var(--k-deep);background:conic-gradient(from 200deg, var(--k-yellow), var(--k-orange), var(--k-mag), var(--k-cyan), var(--k-yellow));box-shadow:0 0 1rem -.2rem var(--glow)}
.toot .who{display:grid;line-height:1.25}
.toot .who b{font:800 1rem var(--f-head)}
.toot .who span, .toot time, .toot footer{font:var(--t--1) var(--f-mono);color:var(--muted)}
.toot time{margin-left:auto}
.toot p{font-size:.98em}
.toot code{font:.9em var(--f-mono);color:var(--cyan)}
.toot .tag{color:var(--mag)}
.toot footer{display:flex;gap:1.25rem}
.toot footer span::before{color:var(--cyan);margin-right:.35em}
.toot .boosts::before{content:"↻"}
.toot .favs::before{content:"★";color:var(--yellow)}

/* ---------- Pixelfed: kassette-polaroids ---------- */
.tiles{list-style:none;padding:0;display:grid;gap:clamp(.6rem, 2vw, 1.25rem);grid-template-columns:repeat(3, minmax(0, 1fr))}
.tile {
--r:-1.5deg;
display:block;padding:.45rem .45rem 0;text-decoration:none;border-radius:.35rem;
background:light-dark(var(--k-tile-l), var(--k-tile-d));border:thin solid var(--line-c);
box-shadow:0 0 1.2rem -.5rem var(--glow-c), 0 .6rem 1.2rem -.8rem rgb(0 0 0 / .5);
rotate:var(--r);transition:rotate .5s var(--ease), scale .5s var(--ease), box-shadow .35s;
}
.tiles li:nth-child(3n+2) .tile{--r:1.2deg}
.tiles li:nth-child(4n+3) .tile{--r:-.6deg}
.tiles li:nth-child(5n) .tile{--r:2deg}
.tile:hover, .tile:focus-visible{rotate:0deg;scale:1.06;position:relative;z-index:2;box-shadow:0 0 0 .0625rem var(--cyan), 0 0 2.2rem 0 var(--glow-c)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.15rem}
.tile .vhs img{aspect-ratio:1}
.tile span{display:block;padding:.45rem .1rem .5rem;font:600 clamp(.62rem, .55rem + .3vw, .78rem)/1.2 var(--f-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile span::before{content:"";display:block;height:.2rem;margin-bottom:.4rem;border-radius:1rem;background:var(--sunset)}

/* ---------- Footer ---------- */
.site-footer{position:relative;margin-top:var(--sp-5);padding-top:clamp(6rem, 12vw, 9rem);overflow:hidden}
.site-footer .floor{top:0;bottom:auto;--floor:clamp(5rem, 10vw, 7.5rem);height:var(--floor);--floor-a:transparent;background:linear-gradient(transparent, color-mix(in srgb, var(--bg2) 60%, transparent))}
.site-footer .floor::after{display:none}

.footer-inner{position:relative;display:grid;gap:var(--sp-3);padding-block:var(--sp-3) var(--sp-4)}
@media (min-width: 52rem){.footer-inner{grid-template-columns:auto 1fr;align-items:center} .colophon{grid-column:1 / -1}}
.footer-brand{display:flex;align-items:center;gap:.6rem;font:900 var(--t-2)/1 var(--f-head)}
.footer-brand .mini-sun{inline-size:1.2em}
.social{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-start}
@media (min-width: 52rem){.social{justify-content:flex-end}}
.social a{display:inline-block;padding:.5em .9em;font:600 var(--t--1) var(--f-mono);letter-spacing:.08em;text-decoration:none;border:thin solid var(--line);border-radius:2rem;transition:border-color .25s, box-shadow .25s, color .25s}
.social a:hover{border-color:var(--mag);box-shadow:0 0 1rem -.2rem var(--glow)}
.colophon{font:var(--t--1)/1.6 var(--f-mono);color:var(--muted);border-top:thin dashed var(--line);padding-top:var(--sp-2);display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}

/* ---------- Filtre (CSS-only via :has) ---------- */
.filters{border:0;padding:0;margin:0 0 var(--sp-4);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filters legend{font:600 var(--t--1) var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem;padding:0}
.filters label {
position:relative;cursor:pointer;padding:.6em 1.1em;border-radius:2rem;
font:700 var(--t--1)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
border:thin solid var(--line);background:var(--surface);color:var(--muted);
transition:color .25s, border-color .25s, box-shadow .3s, background .3s;
}
.filters input{appearance:none;position:absolute;inset:0;margin:0;border-radius:inherit;cursor:pointer}
.filters input:focus-visible{outline:.15em solid var(--cyan);outline-offset:.2em}
.filters label:hover{color:var(--ink);border-color:var(--mag)}
.filters label:has(:checked){color:var(--on-accent);background:linear-gradient(100deg, var(--mag), var(--orange));border-color:transparent;box-shadow:0 0 1.4rem -.2rem var(--glow)}
.count{margin-top:var(--sp-3);font:var(--t--1) var(--f-mono);color:var(--muted);letter-spacing:.08em}

/* ---------- Blog: kassette-J-card ---------- */
.jcard {
display:grid;grid-template-columns:auto 1fr;border-radius:var(--radius);overflow:hidden;
background:var(--surface);border:thin solid var(--line);box-shadow:0 0 2.6rem -1.2rem var(--glow);backdrop-filter:blur(.4rem);
}
.spine {
writing-mode:vertical-rl;rotate:180deg;display:flex;justify-content:space-between;gap:2rem;padding:1.25rem .55rem;
font:800 var(--t--1)/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--k-deep);
background:linear-gradient(90deg, var(--k-yellow) 0 22%, var(--k-orange) 0 44%, var(--k-mag) 0 70%, var(--k-cyan) 0);
}
.jcard-main{padding:var(--sp-3) clamp(1rem, 3vw, 2.5rem) var(--sp-4);min-width:0}
.jcard-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.5rem 2rem;padding-bottom:var(--sp-2);margin-bottom:var(--sp-3);border-bottom:.2rem solid;border-image:var(--sunset) 1}
.jcard-head h2{font-size:var(--t-2)}
.jcard-head p{font:var(--t--1) var(--f-mono);color:var(--muted)}
.sides{display:grid;gap:var(--sp-4)}
@media (min-width: 64rem){.sides{grid-template-columns:1fr 1fr}}
.side h3{display:flex;align-items:center;gap:.75rem;font:800 var(--t--1) var(--f-mono);letter-spacing:.25em;text-transform:uppercase;color:var(--cyan);margin-bottom:.75rem}
.side h3::after{content:"";flex:1;border-top:thin dashed var(--line-c)}
.tracks{list-style:none;padding:0;display:grid}
.track {
position:relative;display:grid;grid-template-columns:2.4rem 4.5rem 1fr;gap:.4rem 1rem;align-items:start;
padding:.9rem .6rem;border-radius:.6rem;border-bottom:thin dashed var(--line);transition:background .3s;
opacity:1;transition:background .3s, opacity .4s, translate .4s var(--ease);
}
@starting-style{.track{opacity:0;translate:-.75rem 0}}
.track:hover, .track:focus-within{background:color-mix(in srgb, var(--mag) 9%, transparent)}
.track .no{font:800 var(--t--1)/1.6 var(--f-mono);color:var(--mag);position:relative}
.track .no::before{content:"▶";position:absolute;left:0;color:var(--cyan);opacity:0;transition:opacity .2s;text-shadow:0 0 .6em var(--glow-c)}
.track:hover .no, .track:focus-within .no{color:transparent}
.track:hover .no::before, .track:focus-within .no::before{opacity:1}
.track img{width:4.5rem;aspect-ratio:1;object-fit:cover;border-radius:.35rem;border:thin solid var(--line)}
.track .t{display:grid;gap:.35rem;min-width:0}
.track .entry-title{font-size:var(--t-1)}
.track .entry-title a::after{border-radius:.6rem}
.track:hover .entry-title a{color:var(--mag)}
.track .entry-summary{font-size:.92em}
.empty-tape{font:var(--t--1) var(--f-mono);color:var(--muted);padding:1rem .6rem}
@media (max-width: 30rem){.track{grid-template-columns:2rem 1fr} .track img{display:none} .jcard{grid-template-columns:1fr} .spine{writing-mode:horizontal-tb;rotate:none;padding:.6rem 1rem;white-space:nowrap;letter-spacing:.15em}}

/* ---------- Paginering ---------- */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:var(--sp-4);font:700 var(--t--1)/1 var(--f-mono);letter-spacing:.1em}
.pagination > a, .pagination > span{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-inline-size:2.8rem;min-block-size:2.8rem;padding:0 .9em;border-radius:.5rem;border:thin solid var(--line);text-decoration:none;background:var(--surface)}
.pagination > a:hover{border-color:var(--mag);box-shadow:0 0 1rem -.2rem var(--glow)}
.pagination > [aria-current]{background:var(--mag);color:var(--on-accent);border-color:transparent;box-shadow:0 0 1.2rem -.2rem var(--glow)}
.pagination .off{opacity:.45}

/* ---------- Enkelt indlæg / prosa ---------- */
.single-head{padding-block:var(--sp-5) var(--sp-3);display:grid;gap:var(--sp-2);justify-items:start}
.single-head h1{font-size:clamp(2.6rem, 1rem + 7vw, 7rem);line-height:.95;letter-spacing:-.045em}
.ingress{font:500 var(--t-1)/1.5 var(--f-body);max-width:50ch;color:var(--ink)}
.hero-figure{margin-block:var(--sp-3) var(--sp-4)}
.hero-figure .vhs{border-radius:var(--radius);border:thin solid var(--line);box-shadow:0 0 3rem -1rem var(--glow)}
.hero-figure img{aspect-ratio:21 / 9}
figcaption{font:var(--t--1)/1.5 var(--f-mono);color:var(--muted);margin-top:.7rem}
figcaption::before{content:"▸ ";color:var(--mag)}
.prose{max-width:68ch;font-size:clamp(1.05rem, .98rem + .3vw, 1.22rem);line-height:1.75}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:var(--t-2);margin-top:2.2em;color:var(--ink)}
.prose h2::before{content:"";display:block;inline-size:3rem;block-size:.2rem;margin-bottom:.7rem;border-radius:1rem;background:var(--sunset);box-shadow:0 0 .8rem var(--glow)}
.prose a{color:var(--cyan)}
.prose a:hover{color:var(--mag)}
.prose ul{padding-left:1.2em}
.prose li{padding-left:.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{content:"▸ ";color:var(--mag)}
.prose blockquote {
margin-block:1.8em;padding:var(--sp-3);border-radius:var(--radius);position:relative;
font:italic 800 var(--t-1)/1.35 var(--f-head);letter-spacing:-.015em;
background:linear-gradient(120deg, color-mix(in srgb, var(--mag) 12%, transparent), color-mix(in srgb, var(--teal) 10%, transparent));
border-left:.3rem solid var(--mag);box-shadow:-.4rem 0 1.4rem -.6rem var(--glow);
}
.prose blockquote p{text-wrap:balance}
.prose blockquote cite{display:block;margin-top:.8rem;font:normal 500 var(--t--1) var(--f-mono);color:var(--muted)}
.prose code{font:.86em var(--f-mono);color:var(--mag);background:color-mix(in srgb, var(--mag) 10%, transparent);padding:.1em .35em;border-radius:.3em}
.prose pre {
overflow-x:auto;padding:var(--sp-3);border-radius:var(--radius);font:.85em/1.6 var(--f-mono);
background:var(--k-deep2);color:var(--k-code);border:thin solid var(--line-c);box-shadow:inset 0 0 2rem -1rem var(--k-cyan), 0 0 1.6rem -1rem var(--glow-c);
}
.prose pre code{background:none;padding:0;color:inherit;font-size:1em;line-height:inherit}
.prose pre .tk{color:var(--k-code-tk)} .prose pre .at{color:var(--k-code-at)} .prose pre .st{color:var(--k-yellow)} .prose pre .cm{color:var(--k-code-cm);font-style:italic}
.prose figure img{border-radius:var(--radius)}
.prose sup a{text-decoration:none;font:700 .7em var(--f-mono);color:var(--mag);padding-inline:.15em}
.sidenote{font:.82rem/1.55 var(--f-mono);color:var(--muted);padding:1rem 1.1rem;border-radius:.6rem;border:thin dashed var(--line-c);background:var(--surface)}
.sidenote b{color:var(--cyan);display:block;margin-bottom:.3rem;letter-spacing:.1em;text-transform:uppercase}
@media (min-width: 82rem){.sidenote{float:right;clear:right;width:15rem;margin:.3em -19rem 1em 0}}
.footnotes{margin-top:2.5em;padding-top:1em;border-top:thin dashed var(--line);font:.82rem/1.6 var(--f-mono);color:var(--muted)}
.footnotes ol{padding-left:1.4em}
.article-foot{max-width:68ch;margin-top:var(--sp-4);display:grid;gap:var(--sp-3)}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tags a{text-decoration:none}
.tags a:hover .chip{box-shadow:0 0 1rem -.2rem var(--glow)}
.share{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
/* Del på Mastodon (bechster-core .bc-share): pil-link der folder en serverformular ud */
.bc-share{min-width:0}
.bc-share:has(details[open]), .bc-share:has(.bc-share__continue){flex-basis:100%}
.bc-share__toggle{list-style:none;display:inline-flex;gap:.5em;align-items:center;font:600 var(--t--1)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding-block:.5em}
.bc-share__toggle::-webkit-details-marker{display:none}
.bc-share__toggle::after{content:"↗";color:var(--mag);transition:translate .35s var(--ease), rotate .35s var(--ease)}
.bc-share__toggle:hover::after{translate:.15em -.15em}
.bc-share__details[open] .bc-share__toggle::after{rotate:45deg}
.bc-share__form{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;max-width:40rem;margin-top:.75rem}
.bc-share__label{flex-basis:100%;font:600 var(--t--1) var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mag)}
.bc-share__label::before{content:"// ";color:var(--cyan)}
.bc-share__input{flex:1 1 14rem;min-width:0;padding:.85em 1em;font:var(--t-0) var(--f-mono);color:var(--ink);background:var(--surface);border:thin solid var(--line);border-radius:.45rem;box-shadow:inset 0 0 .9rem -.5rem var(--glow)}
.bc-share__input::placeholder{color:var(--muted);opacity:1}
.bc-share__input:focus-visible{border-color:var(--cyan)}
.bc-share__input[aria-invalid="true"]{border-color:var(--mag)}
.bc-share__submit{display:inline-flex;align-items:center;padding:.95em 1.5em;border:0;border-radius:.45rem;cursor:pointer;font:700 var(--t--1)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-accent);background:linear-gradient(100deg, var(--mag), var(--orange));box-shadow:0 0 1.4rem -.3rem var(--glow);transform:skewX(-10deg);transition:translate .3s var(--ease), box-shadow .3s}
.bc-share__submit > span{display:inline-block;transform:skewX(10deg)}
.bc-share__submit:hover{translate:0 -.15rem;box-shadow:0 0 2.2rem 0 var(--glow)}
.bc-share__hint, .bc-share__error{flex-basis:100%;margin:0;font:var(--t--1)/1.5 var(--f-mono);color:var(--muted)}
.bc-share__error{color:var(--mag)}
.bc-share__continue{margin:0 0 .5rem}
.bc-share__link{font:600 var(--t--1) var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.bc-share__link::after{content:" →";color:var(--mag)}
.author{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:center;padding:var(--sp-3)}
.author img{inline-size:clamp(4.5rem, 10vw, 6rem);aspect-ratio:1;object-fit:cover;object-position:50% 20%;border-radius:50%;border:.15rem solid var(--mag);box-shadow:0 0 1.4rem -.2rem var(--glow)}
.author h2{font-size:var(--t-1);margin-bottom:.3rem}
.author p{color:var(--muted);font-size:.95em}
.postnav{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
@media (min-width: 44rem){.postnav{grid-template-columns:1fr 1fr}}
.postnav a{display:grid;gap:.4rem;padding:var(--sp-3);text-decoration:none}
.postnav .next{text-align:right}
.postnav small{font:700 var(--t--1) var(--f-mono);color:var(--cyan);letter-spacing:.12em;text-transform:uppercase}
.postnav b{font:900 var(--t-1)/1.15 var(--f-head);letter-spacing:-.02em}
.postnav a:hover b{color:var(--mag)}

/* ---------- Projekt ---------- */
.proj-layout{display:grid;gap:var(--sp-4)}
@media (min-width: 62rem){.proj-layout{grid-template-columns:17rem 1fr} .proj-meta{position:sticky;top:6rem;align-self:start}}
.proj-meta{padding:var(--sp-3);display:grid;gap:1rem}
.proj-meta div{display:grid;gap:.2rem}
.proj-meta dt{font:700 var(--t--1) var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.proj-meta dd{margin:0;font-weight:600}
.stats, .bechster-stats{list-style:none;padding:0;display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr));margin-block:1.5em}
.prose :is(.stats, .bechster-stats){padding:0}
.prose :is(.stats, .bechster-stats) li{margin:0;padding:var(--sp-3) var(--sp-2)}
.prose :is(.stats, .bechster-stats) li::marker{content:none}
.stat{padding:var(--sp-3) var(--sp-2);text-align:center;display:grid;gap:.4rem}
.stat b{font:900 clamp(1.9rem, 1.3rem + 2.4vw, 3rem)/1 var(--f-head);letter-spacing:-.03em;}
.stat span{font:600 var(--t--1) var(--f-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.gallery{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
@media (min-width: 40rem){.gallery{grid-template-columns:repeat(3, 1fr)}}
.gallery .vhs{border-radius:.7rem;border:thin solid var(--line)}
.gallery figure:first-child{grid-column:1 / -1}
.gallery figure:first-child img{aspect-ratio:21 / 9}

/* ---------- Om: HUD ---------- */
.about-hero{display:grid;gap:var(--sp-4);align-items:center;padding-block:var(--sp-5) var(--sp-4)}
@media (min-width: 56rem){.about-hero{grid-template-columns:minmax(16rem, 26rem) 1fr}}
.portrait{position:relative;justify-self:center;width:min(100%, 26rem)}
@media (max-width: 55.99rem){.portrait{width:min(100%, 18rem);justify-self:start}}
.portrait .vhs{border-radius:1.2rem;border:.15rem solid var(--mag);box-shadow:0 0 0 .4rem color-mix(in srgb, var(--mag) 18%, transparent), 0 0 3rem -.5rem var(--glow)}
.portrait img{aspect-ratio:4 / 5}
.portrait::after{content:"P1";position:absolute;top:-.8rem;right:-.6rem;z-index:3;padding:.4em .6em;font:900 var(--t--1) var(--f-mono);color:var(--k-deep);background:var(--k-yellow);border-radius:.35rem;rotate:8deg;box-shadow:0 0 1rem var(--k-yellow-a)}
.about-grid{display:grid;gap:var(--sp-4)}
@media (min-width: 64rem){.about-grid{grid-template-columns:1fr 24rem;align-items:start} .bechster-skills{position:sticky;top:6rem}}

/* ---------- Tema-skift: horisont ---------- */
.horizon{display:none}
@supports (view-transition-name: none) {
@media (prefers-reduced-motion: no-preference) {
:root[data-theme-to] .horizon {
display:block;position:fixed;left:0;right:0;bottom:-7rem;height:14rem;z-index:999;pointer-events:none;
view-transition-name:horizon;
background:
linear-gradient(transparent 38%, color-mix(in srgb, var(--h2) 45%, transparent) 46%, var(--h1) 49.4% 50.6%, color-mix(in srgb, var(--h3) 45%, transparent) 54%, transparent 62%),
radial-gradient(60% 40% at 50% 50%, color-mix(in srgb, var(--h2) 55%, transparent), transparent 70%);
}
:root[data-theme-to="light"] .horizon{--h1: var(--k-hz);--h2: var(--k-orange);--h3: var(--k-mag)}
:root[data-theme-to="dark"] .horizon{--h1: #ffffff;--h2: var(--k-mag);--h3: var(--k-cyan)}
::view-transition-group(horizon){animation:none}
::view-transition-old(horizon){display:none}
:root[data-theme-to]::view-transition-old(root){animation:none}
:root[data-theme-to="light"]::view-transition-new(root){animation:rise 1.15s cubic-bezier(.6, 0, .25, 1) both}
:root[data-theme-to="light"]::view-transition-new(horizon){animation:line-up 1.15s cubic-bezier(.6, 0, .25, 1) both}
:root[data-theme-to="dark"]::view-transition-new(root){animation:set 1.15s cubic-bezier(.6, 0, .25, 1) both}
:root[data-theme-to="dark"]::view-transition-new(horizon){animation:line-down 1.15s cubic-bezier(.6, 0, .25, 1) both}
}
}
@keyframes rise{from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0)}}
@keyframes set{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0)}}
@keyframes line-up{from{transform:translateY(0)} to{transform:translateY(-100vh)}}
@keyframes line-down{from{transform:translateY(-100vh)} to{transform:translateY(0)}}

/* ---------- Diverse ---------- */
.mb{margin-bottom:var(--sp-3)}
.more-wrap{margin-top:var(--sp-3)}
/* article.single: WordPress also puts .single on <body> */
article.single > :not(.hero-figure){max-width:72ch;margin-inline:auto}
article.single .single-head{max-width:72ch}

/* ==========================================================================
   WordPress additions
   ========================================================================== */

/* ---------- Accessibility helpers ---------- */
.screen-reader-text:focus{position:static;width:auto;height:auto;clip:auto;white-space:normal}
.skip-link:focus-visible{outline-color:var(--ink)}

/* ---------- Filters as links (category / project type archives) ---------- */
.filters .legend{flex-basis:100%;font:600 var(--t--1) var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.filters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.filters a {
display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.1em;border-radius:2rem;text-decoration:none;
font:700 var(--t--1)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
border:thin solid var(--line);background:var(--surface);color:var(--muted);
transition:color .25s, border-color .25s, box-shadow .3s, background .3s;
}
.filters a:hover{color:var(--ink);border-color:var(--mag)}
.filters a[aria-current]{color:var(--on-accent);background:linear-gradient(100deg, var(--mag), var(--orange));border-color:transparent;box-shadow:0 0 1.4rem -.2rem var(--glow)}
.filters .n{font-weight:600;opacity:.75;letter-spacing:.04em}
.filters .n::before{content:"("}
.filters .n::after{content:")"}

/* ---------- Placeholders when a post has no featured image ---------- */
.vhs--empty, .track-img--empty {
display:block;aspect-ratio:3 / 2;
background:
linear-gradient(transparent 62%, color-mix(in srgb, var(--k-mag) 55%, transparent) 62% 63%, transparent 63%),
repeating-linear-gradient(90deg, transparent 0 1.6rem, rgb(0 240 255 / .18) 1.6rem calc(1.6rem + 1px)),
radial-gradient(circle at 50% 62%, var(--k-yellow), var(--k-orange) 12%, var(--k-mag) 22%, transparent 23%),
linear-gradient(var(--k-deep), #2a0845 62%, var(--k-deep2));
}
.track-img--empty{inline-size:4.5rem;aspect-ratio:1;border-radius:.35rem;border:thin solid var(--line)}
@media (max-width: 30rem){.track-img--empty{display:none}}
.track img{block-size:auto}

/* ---------- Reading progress (single posts, scroll-driven, no JS) ---------- */
.progress{display:none}
@supports (animation-timeline: scroll()) {
.progress{display:block;position:fixed;inset:0 0 auto;z-index:60;block-size:.2rem;pointer-events:none;background:var(--sunset);box-shadow:0 0 .8rem var(--glow);transform-origin:0 50%;animation:progress linear both;animation-timeline:scroll(root)}
@keyframes progress{from{transform:scaleX(0)} to{transform:scaleX(1)}}
}

/* ---------- Front page hero content (page content + Buttons block) ---------- */
.hero-content{display:grid;gap:var(--sp-3);justify-items:start}
.hero-content > *{max-width:46rem;margin:0}
.hero-content > p:first-child:not(.intro), .hero-content > .is-style-lede, .hero .lede, .is-style-lede {
font:800 var(--t-2)/1.15 var(--f-head);letter-spacing:-.02em;color:var(--cyan);text-shadow:0 0 1.2em var(--glow-c);max-width:22ch;
}
.hero-content > p:not(:first-child){max-width:52ch;color:var(--ink)}
.hero--404 .search-form{max-width:32rem}

/* ---------- Core Buttons block = mockup buttons ---------- */
.wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem}
.wp-block-buttons > .wp-block-button{margin:0}
.wp-block-button .wp-block-button__link {
--b:var(--mag);
display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.5em;position:relative;overflow:hidden;
font:700 var(--t--1)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
border-radius:.45rem;transform:skewX(-10deg);transition:box-shadow .3s, translate .3s var(--ease), background-color .3s, color .3s;
color:var(--on-accent);background:linear-gradient(100deg, var(--mag), var(--orange));border:0;box-shadow:0 0 1.4rem -.3rem var(--glow);
}
.wp-block-button .wp-block-button__link > *{transform:skewX(10deg)}
.wp-block-button .wp-block-button__link::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;transition:background-position .7s var(--ease)}
.wp-block-button .wp-block-button__link:hover{color:var(--on-accent);translate:0 -.15rem;box-shadow:0 0 2.2rem 0 var(--glow), 0 .8rem 1.6rem -1rem var(--mag)}
.wp-block-button .wp-block-button__link:hover::after{background-position:250% 0}
.wp-block-button.is-style-outline .wp-block-button__link{color:var(--cyan);background:transparent;border:thin solid currentColor;box-shadow:inset 0 0 .9rem -.4rem var(--glow-c)}
.wp-block-button.is-style-outline .wp-block-button__link::after{display:none}
.wp-block-button.is-style-outline .wp-block-button__link:hover{color:var(--cyan);background:color-mix(in srgb, var(--teal) 12%, transparent);box-shadow:0 0 1.6rem -.2rem var(--glow-c), inset 0 0 1rem -.3rem var(--glow-c)}
.wp-block-button.is-style-arrow .wp-block-button__link{transform:none;padding:0;background:none;box-shadow:none;border:0;border-radius:0;color:var(--ink);font-weight:600;letter-spacing:.1em;overflow:visible}
.wp-block-button.is-style-arrow .wp-block-button__link > *{transform:none}
.wp-block-button.is-style-arrow .wp-block-button__link::after{content:"→";position:static;background:none;color:var(--mag);transition:translate .35s var(--ease)}
.wp-block-button.is-style-arrow .wp-block-button__link:hover{translate:none;box-shadow:none;color:var(--ink)}
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after{translate:.35em 0}
.prose .wp-block-buttons{margin-block:1.5em}
.prose .wp-block-button__link{color:var(--on-accent)}
.about-actions{margin-top:var(--sp-2)}

/* ---------- Paragraph / heading / group block styles ---------- */
.is-style-kicker{font:600 var(--t--1) var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mag)}
.is-style-kicker::before{content:"// ";color:var(--cyan)}
.is-style-chrome{color:var(--c3);background:var(--chrome) 0 0 / 100% 1lh repeat-y;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:var(--outline) var(--extrude) drop-shadow(0 0 .3em var(--glow));padding-block-end:.22em;margin-block-end:-.16em}
.prose .is-style-sidenote, .is-style-sidenote{font:.82rem/1.55 var(--f-mono);color:var(--muted);padding:1rem 1.1rem;border-radius:.6rem;border:thin dashed var(--line-c);background:var(--surface)}
.is-style-sidenote > * + *{margin-top:.5em}
.is-style-sidenote > :first-child:not(.wp-block-group__inner-container), .is-style-sidenote > .wp-block-group__inner-container > :first-child{color:var(--cyan);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
@media (min-width: 82rem){.prose .is-style-sidenote{float:right;clear:right;width:15rem;margin:.3em -19rem 1em 0}}

/* ---------- Editor content inside .prose ---------- */
.prose > :first-child{margin-top:0}
.prose h3{font-size:var(--t-1);margin-top:1.8em}
.prose h4{font-size:var(--t-0);margin-top:1.6em}
.prose ol{padding-left:1.4em}
.prose ol li::marker{color:var(--mag);font:700 .9em var(--f-mono)}
.prose ul li::marker{content:"▸ ";color:var(--mag)}
.prose ol li::marker{content:counter(list-item) ". "}
.prose img{height:auto}
.prose .alignleft{float:left;margin:.3em 1.5em 1em 0;max-width:50%}
.prose .alignright{float:right;margin:.3em 0 1em 1.5em;max-width:50%}
.prose .aligncenter{margin-inline:auto;text-align:center}
.prose .alignwide{max-width:none;width:min(100vw - 2 * var(--gutter), 80rem);margin-inline:calc((100% - min(100vw - 2 * var(--gutter), 80rem)) / 2)}
.prose .alignfull{max-width:none;width:100vw;margin-inline:calc(50% - 50vw)}
.prose::after{content:"";display:table;clear:both}
.wp-block-image{margin-block:1.6em}
.wp-block-image .vhs{display:block;width:fit-content;max-width:100%;border-radius:var(--radius);border:thin solid var(--line)}
.wp-block-image.aligncenter .vhs{margin-inline:auto}
.wp-block-image.alignwide .vhs, .wp-block-image.alignfull .vhs{width:100%}
.wp-block-image .vhs img{width:auto;max-width:100%;aspect-ratio:auto;border-radius:0}
.wp-block-image.alignwide .vhs img, .wp-block-image.alignfull .vhs img{width:100%}
.wp-block-image.alignfull .vhs{border-radius:0;border-inline:0}
.wp-block-image figcaption, .wp-block-gallery figcaption, .wp-block-embed figcaption, .wp-block-table figcaption{font:var(--t--1)/1.5 var(--f-mono);color:var(--muted);margin-top:.7rem;text-align:left}
/* Gallery = mockup .gallery: 3 columns, first image full width in 21:9 */
.prose .wp-block-gallery, .wp-block-gallery.has-nested-images{display:grid;gap:var(--sp-2);grid-template-columns:minmax(0, 1fr);margin-block:var(--sp-3)}
@media (min-width: 40rem){.prose .wp-block-gallery, .wp-block-gallery.has-nested-images{grid-template-columns:repeat(3, minmax(0, 1fr))}}
.wp-block-gallery.has-nested-images figure.wp-block-image{width:auto !important;margin:0;display:block;flex:none}
.wp-block-gallery .wp-block-image:first-child{grid-column:1 / -1}
.wp-block-gallery .wp-block-image .vhs{width:100%;border-radius:.7rem}
.wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.wp-block-gallery.has-nested-images figure.wp-block-image:first-child img{aspect-ratio:21 / 9}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{position:static;background:none;padding:0;max-height:none;overflow:visible;color:var(--muted);font-size:var(--t--1);text-shadow:none;margin-top:.7rem}
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before{display:none}
.wp-block-gallery figcaption::before, .wp-block-image figcaption::before{content:"▸ ";color:var(--mag)}
.wp-block-gallery > figcaption.blocks-gallery-caption{grid-column:1 / -1}
.wp-block-quote{margin-block:1.8em;padding:var(--sp-3);border-radius:var(--radius);font:italic 800 var(--t-1)/1.35 var(--f-head);letter-spacing:-.015em;background:linear-gradient(120deg, color-mix(in srgb, var(--mag) 12%, transparent), color-mix(in srgb, var(--teal) 10%, transparent));border-left:.3rem solid var(--mag);box-shadow:-.4rem 0 1.4rem -.6rem var(--glow)}
.wp-block-quote cite{display:block;margin-top:.8rem;font:normal 500 var(--t--1) var(--f-mono);color:var(--muted)}
.wp-block-pullquote{border-block:.2rem solid;border-image:var(--sunset) 1;padding:var(--sp-3) 0;text-align:center}
.wp-block-pullquote blockquote{background:none;border:0;box-shadow:none;margin:0;padding:0}
.wp-block-code, .wp-block-code code{white-space:pre;overflow-wrap:normal}
.wp-block-separator, .prose hr{border:0;block-size:.2rem;border-radius:1rem;background:var(--sunset);box-shadow:0 0 .8rem var(--glow);margin-block:2.4em;opacity:1}
.wp-block-separator.is-style-dots{background:none;box-shadow:none;block-size:auto;text-align:center;color:var(--mag)}
.wp-block-separator.is-style-dots::before{content:"· · ·";letter-spacing:1em;font:900 var(--t-1) var(--f-mono)}
.wp-block-columns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-block:1.6em}
.wp-block-column{flex:1 1 15rem;min-width:0}
.wp-block-column > * + *{margin-top:1em}
.wp-block-table{overflow-x:auto}
.wp-block-table table, .prose table{width:100%;border-collapse:collapse;font:var(--t--1)/1.5 var(--f-mono)}
.prose th, .prose td{padding:.7rem 1rem;text-align:left;vertical-align:top;border-bottom:thin solid var(--line)}
.prose thead th{color:var(--mag);letter-spacing:.1em;text-transform:uppercase;font-size:.8em}
.wp-block-embed iframe{max-width:100%;border-radius:var(--radius)}
.wp-block-footnotes{margin-top:2.5em;padding-top:1em;border-top:thin dashed var(--line);font:.82rem/1.6 var(--f-mono);color:var(--muted);padding-left:1.4em}
.prose sup.fn a{text-decoration:none;font:700 .7em var(--f-mono);color:var(--mag);padding-inline:.15em}
.wp-element-caption{font:var(--t--1)/1.5 var(--f-mono);color:var(--muted)}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}
.page-links{margin-top:var(--sp-3);display:flex;gap:.5rem;font:700 var(--t--1) var(--f-mono)}

/* ---------- Single / project details ---------- */
.single-head .entry-meta a.chip{text-decoration:none}
.single-head .entry-meta a.chip:hover{box-shadow:0 0 1rem -.2rem var(--glow)}
.avatar--author{inline-size:clamp(4.5rem, 10vw, 6rem);font-size:1.4rem}
.proj-meta-empty{display:none}
@media (min-width: 62rem){.proj-meta-empty{display:block}}
.count{font:var(--t--1) var(--f-mono)}

/* ---------- Search form ---------- */
.search-form{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;max-width:40rem}
.search-field{flex:1 1 14rem;min-width:0;padding:.85em 1em;font:var(--t-0) var(--f-mono);color:var(--ink);background:var(--surface);border:thin solid var(--line);border-radius:.45rem;box-shadow:inset 0 0 .9rem -.5rem var(--glow)}
.search-field::placeholder{color:var(--muted);opacity:1}
.search-field:focus-visible{border-color:var(--cyan)}
.search-form .btn{border:0;cursor:pointer}

/* ---------- Footer menu fallback ---------- */
.social-nav .social{margin:0}
@media (min-width: 52rem){.social-nav{justify-self:end}}

/* ---------- About template: content grid with docked HUD ---------- */
.about-head{padding:0}
.about-grid .about-main{min-width:0}
.about-grid .prose{max-width:none}
.about-main > p, .about-main > ul:not([class]), .about-main > ol:not([class]), .about-main > h2:not(.section-title), .about-main > h3, .about-main > blockquote{max-width:68ch}
@media (min-width: 64rem){.about-side{position:sticky;top:6rem;align-self:start} .about-side .bechster-skills{position:static}}
.about-main .wp-block-group.section{padding-top:var(--sp-4)}

/* ---------- bechster-core patterns (.bechster-*): neutral markup, gamer flavour here ---------- */
/* Kickers that used to be text in the theme's own patterns */
.bechster-now{--kicker:"Current quests"}
.bechster-timeline{--kicker:"High scores"}
.bechster-contact{--kicker:"Insert coin"}
:lang(da) .bechster-now{--kicker:"Aktuelle quests"}
.bechster-now::before, .bechster-timeline::before, .bechster-contact::before {
content:"// " var(--kicker);display:block;inline-size:fit-content;
font-family:var(--f-mono);font-size:var(--t--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--mag);background:linear-gradient(90deg, var(--cyan) calc(3ch + .42em), var(--mag) 0);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
:is(.bechster-now, .bechster-timeline, .bechster-contact) > h2{font-size:var(--t-3)}
.prose :is(.bechster-now, .bechster-timeline, .bechster-contact) > h2{font-size:var(--t-3);margin:0}
.prose :is(.bechster-now, .bechster-timeline, .bechster-contact) > h2::before{content:none}
.about-main > :is(.bechster-now, .bechster-timeline){padding-top:var(--sp-4)}

/* Lige nu: quest cards */
.bechster-now{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr))}
.bechster-now::before, .bechster-now > h2{grid-column:1 / -1}
.bechster-now::before{margin-bottom:calc(-1 * var(--sp-2))}
.prose .bechster-now > h2{margin-bottom:calc(var(--sp-3) - var(--sp-2))}
.bechster-now__item{padding:var(--sp-3);display:grid;gap:.5rem}
.prose .bechster-now > .bechster-now__item{margin:0;font-size:var(--t-0);line-height:1.65}
.bechster-now__item > *{margin:0}
.prose .bechster-now__item > *{margin:0}
.bechster-now__label{font:800 var(--t--1) var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.bechster-now__title{font:900 var(--t-1)/1.15 var(--f-head);letter-spacing:-.02em}
.prose .bechster-now__title{font:900 var(--t-1)/1.15 var(--f-head)}
.bechster-now__text{color:var(--muted);font-size:.95em}

/* Tidslinje: arcade high score list */
.prose .bechster-timeline > h2{margin-bottom:var(--sp-3)}
.bechster-timeline ol{list-style:none;padding:0;margin-top:0;font-family:var(--f-mono);counter-reset:s}
.prose .bechster-timeline ol{padding:0;margin-top:0;font-size:var(--t-0);line-height:1.65}
.bechster-timeline__item{counter-increment:s;display:grid;grid-template-columns:2.5rem 6.5rem 1fr;gap:.25rem 1rem;padding:.9rem .6rem;border-bottom:thin dashed var(--line);align-items:baseline;transition:background .3s}
.prose .bechster-timeline__item{margin:0;padding:.9rem .6rem}
.prose .bechster-timeline__item::marker{content:none}
.bechster-timeline__item:hover{background:color-mix(in srgb, var(--teal) 9%, transparent)}
.bechster-timeline__item::before{content:counter(s, decimal-leading-zero);color:var(--mag);font-weight:800}
.bechster-timeline__years{color:var(--cyan);font-weight:700;white-space:nowrap}
.bechster-timeline__role{font:800 var(--t-0) var(--f-head)}
.bechster-timeline__place{grid-column:3;color:var(--muted);font-size:var(--t--1)}
.bechster-timeline{--badge:"NEW HIGH SCORE"}
:lang(da) .bechster-timeline{--badge:"NY REKORD"}
.bechster-timeline__item:first-child .bechster-timeline__role::after{white-space:nowrap;content:var(--badge);font:800 .65rem var(--f-mono);color:var(--k-deep);background:var(--k-yellow);padding:.2em .45em;border-radius:.2rem;margin-left:.5em;vertical-align:.2em;font-style:normal}
@media (max-width: 34rem){.bechster-timeline__item{grid-template-columns:2rem 1fr} .bechster-timeline__role, .bechster-timeline__place{grid-column:2}}

/* Kontakt: "insert coin" card */
.bechster-contact{padding:var(--sp-4) var(--sp-3);display:grid;gap:var(--sp-3);justify-items:start}
.about-main > .bechster-contact{margin-top:var(--sp-5)}
.prose .bechster-contact{font-size:var(--t-0);line-height:1.65}
.prose .bechster-contact > *{margin:0}

/* Færdigheder: player stats HUD (docked in the About side column) */
.bechster-skills {
position:relative;padding:var(--sp-3);font-family:var(--f-mono);font-size:var(--t--1);
background:light-dark(var(--k-hud-l), var(--k-hud-d));border:thin solid var(--line-c);border-radius:.4rem;
box-shadow:0 0 2rem -.8rem var(--glow-c), inset 0 0 2.4rem -1.6rem var(--teal);
}
.bechster-skills::before, .bechster-skills::after{content:"";position:absolute;inline-size:1.4rem;block-size:1.4rem;border:.2rem solid var(--cyan)}
.bechster-skills::before{top:-.25rem;left:-.25rem;border-right:0;border-bottom:0}
.bechster-skills::after{bottom:-.25rem;right:-.25rem;border-left:0;border-top:0}
.prose .bechster-skills{font-size:var(--t--1);line-height:1.6}
.prose .bechster-skills > * + *{margin-top:0}
.bechster-skills > h2{margin:0;font:800 var(--t--1) var(--f-mono);letter-spacing:.25em;text-transform:uppercase;color:var(--cyan);display:flex;justify-content:space-between;gap:1rem}
.prose .bechster-skills > h2{margin-top:0;font-size:var(--t--1)}
.prose .bechster-skills > h2::before, .prose .bechster-skills h3::before{content:none}
.bechster-skills > h2::after{content:"● REC";color:var(--mag);font-weight:800;letter-spacing:.25em}
@media (prefers-reduced-motion: no-preference){.blink, .bechster-skills > h2::after{animation:blink 1.1s steps(1) infinite}}
@keyframes blink{50%{opacity:0}}
.bechster-skills__name{padding-top:1rem;border-top:thin dashed var(--line-c)}
.bechster-skills__name strong{display:block;font:900 var(--t-1) var(--f-head);letter-spacing:-.02em;color:var(--ink)}
.bechster-skills__summary{padding-bottom:1rem;border-bottom:thin dashed var(--line-c)}
.prose .bechster-skills > .bechster-skills__summary{margin:.3rem 0 1rem}
.bechster-skills__list{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:.75rem}
.prose .bechster-skills__list{padding:0}
.bechster-skills__skill{display:grid;grid-template-columns:1fr auto;gap:.3rem .5rem}
.prose .bechster-skills__skill{margin:0;padding:0}
.prose .bechster-skills__skill::marker{content:none}
.bechster-skills__label{text-transform:uppercase;letter-spacing:.1em}
.bechster-skills__value{color:var(--mag);font-weight:800}
.bar-v, .bechster-skills__bar{grid-column:1 / -1;block-size:.6rem;position:relative;background:repeating-linear-gradient(90deg, var(--line-c) 0 .45rem, transparent 0 .6rem)}
.bar-v::after, .bechster-skills__bar::after {
content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);
background:linear-gradient(90deg, var(--teal), var(--mag) 70%, var(--orange));
mask:repeating-linear-gradient(90deg, #000 0 .45rem, transparent 0 .6rem);
filter:drop-shadow(0 0 .3rem var(--glow));
}
.bechster-skills__skill:nth-child(2){--i:1} .bechster-skills__skill:nth-child(3){--i:2} .bechster-skills__skill:nth-child(4){--i:3}
.bechster-skills__skill:nth-child(5){--i:4} .bechster-skills__skill:nth-child(6){--i:5} .bechster-skills__skill:nth-child(n+7){--i:6}
@media (prefers-reduced-motion: no-preference){:is(.bar-v, .bechster-skills__bar)::after{animation:fill 1.6s var(--ease) both;animation-delay:calc(var(--i, 0) * .12s + .3s)}}
@keyframes fill{from{width:0}}
.bechster-skills h3{font:800 var(--t--1) var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-top:1.4rem}
.prose .bechster-skills h3{margin-top:1.4rem;font-size:var(--t--1)}
.bechster-skills__tools{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(6.5rem, 1fr));gap:.5rem;margin-top:1rem}
.prose .bechster-skills > .bechster-skills__tools{padding:0}
.bechster-skills__tools li{padding:.5rem .55rem;text-align:center;border:thin solid var(--line);border-radius:.3rem;background:color-mix(in srgb, var(--mag) 6%, transparent);transition:border-color .25s, box-shadow .25s}
.prose .bechster-skills__tools li{margin:0;padding:.5rem .55rem}
.prose .bechster-skills__tools li::marker{content:none}
.bechster-skills__tools li:hover{border-color:var(--mag);box-shadow:0 0 .9rem -.2rem var(--glow)}
.section-title.mb{margin-bottom:var(--sp-3)}
.prose .section-title{font-size:var(--t-3)}
.prose .section-title::before{content:none}
.prose :is(.stats, .bechster-stats) > li{margin:0}
:is(.stats, .bechster-stats) > li{position:relative;border-radius:var(--radius);background:var(--surface);border:thin solid var(--line);box-shadow:0 0 1.4rem -.8rem var(--glow);backdrop-filter:blur(.4rem);padding:var(--sp-3) var(--sp-2);text-align:center;display:grid;gap:.4rem}
:is(.stats, .bechster-stats) > li > strong, .stats > li > b{color:var(--c3);background:var(--chrome) 0 0 / 100% 1lh repeat-y;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:var(--outline) var(--extrude) drop-shadow(0 0 .3em var(--glow));padding-block-end:.22em;margin-block-end:-.16em;font:900 clamp(1.9rem, 1.3rem + 2.4vw, 3rem)/1 var(--f-head);letter-spacing:-.03em}
:is(.stats, .bechster-stats) > li > span, .stats > li > em{font:600 var(--t--1) var(--f-mono);font-style:normal;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ==========================================================================
   bechster-core feeds (.bc-*) styled like the mockup's toots and polaroid tiles
   ========================================================================== */
.feeds > .feed{min-width:0}
/* Kun ét feed slået til (Tilpas → Forsidens sektioner): fuld bredde, flere kolonner */
.feeds:has(> .feed:only-child){grid-template-columns:minmax(0, 1fr)}
.feeds > .feed:only-child .bc-photos{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (min-width: 40rem){
.feeds > .feed:only-child .bc-toots{grid-template-columns:repeat(2, minmax(0, 1fr));align-items:start}
.feeds > .feed:only-child .bc-photos{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (min-width: 62rem){
.feeds > .feed:only-child .bc-toots{grid-template-columns:repeat(3, minmax(0, 1fr))}
.feeds > .feed:only-child .bc-photos{grid-template-columns:repeat(6, minmax(0, 1fr))}
}
.bc-feed{min-width:0}
.bc-toots{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.bc-toots > li{min-width:0}
.bc-toot {
position:relative;min-width:0;padding:var(--sp-3);display:grid;gap:.8rem;border-radius:var(--radius);
background:var(--surface);border:thin solid var(--line);box-shadow:0 0 1.4rem -.8rem var(--glow);backdrop-filter:blur(.4rem);
transition:box-shadow .35s, border-color .35s;
}
.bc-toot:hover, .bc-toot:focus-within{border-color:var(--mag);box-shadow:0 0 0 .0625rem var(--mag), 0 0 2.6rem -.2rem var(--glow), inset 0 0 1.6rem -.9rem var(--glow)}
/* Header: avatar | name / handle | time — name and handle are siblings in the plugin markup */
.bc-toot__header{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;grid-template-areas:"av name time" "av handle time";align-items:center;gap:0 .75rem;margin:0;line-height:1.25}
.bc-toot__avatar{grid-area:av;inline-size:2.6rem;block-size:auto;aspect-ratio:1;border-radius:50%;border:0;display:grid;place-items:center;font:900 .95rem var(--f-head);color:var(--k-deep);background:conic-gradient(from 200deg, var(--k-yellow), var(--k-orange), var(--k-mag), var(--k-cyan), var(--k-yellow));box-shadow:0 0 1rem -.2rem var(--glow)}
.bc-toot__author{grid-area:name;min-width:0;font:800 1rem var(--f-head);color:var(--ink);align-self:end}
.bc-toot__handle{grid-area:handle;min-width:0;font:var(--t--1) var(--f-mono);color:var(--muted);overflow-wrap:anywhere;align-self:start}
.bc-toot__time{grid-area:time;margin:0;font:var(--t--1) var(--f-mono);color:var(--muted);white-space:nowrap}
.bc-toot__time a{color:inherit;text-decoration:none}
.bc-toot__time a:hover{color:var(--mag)}
.bc-toot__content{font-size:.98em;overflow-wrap:anywhere;min-width:0}
.bc-toot__content p{margin:0}
.bc-toot__content p + p{margin-top:.6em}
.bc-toot__content a{color:var(--mag)}
.bc-toot__content a.mention, .bc-toot__content a.hashtag{text-decoration:none}
.bc-toot__content code{font:.9em var(--f-mono);color:var(--cyan)}
.bc-toot__content .invisible{display:none}
.bc-toot__content .ellipsis::after{content:"…"}
.bc-toot__content summary{cursor:pointer;color:var(--cyan);font:700 var(--t--1) var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.bc-toot__content details[open] summary{margin-bottom:.6em}
.bc-toot__footer{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;font:var(--t--1) var(--f-mono);color:var(--muted)}
.bc-toot__stat::before{color:var(--cyan);margin-right:.35em}
.bc-toot__stat--replies::before{content:"↩"}
.bc-toot__stat--boosts::before{content:"↻"}
.bc-toot__stat--favs::before{content:"★";color:var(--yellow)}
@media (max-width: 25rem){
.bc-toot{padding:var(--sp-2)}
.bc-toot__header{grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"av name" "av handle" "time time"}
.bc-toot__time{margin-top:.35rem}
}

/* Pixelfed: cassette polaroids */
.bc-photos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.6rem, 2vw, 1.25rem);grid-template-columns:repeat(3, minmax(0, 1fr))}
.bc-photos > li{min-width:0}
.bc-photo {
--r:-1.5deg;
margin:0;min-width:0;display:block;padding:.45rem .45rem .5rem;border-radius:.35rem;
background:light-dark(var(--k-tile-l), var(--k-tile-d));border:thin solid var(--line-c);
box-shadow:0 0 1.2rem -.5rem var(--glow-c), 0 .6rem 1.2rem -.8rem rgb(0 0 0 / .5);
rotate:var(--r);transition:rotate .5s var(--ease), scale .5s var(--ease), box-shadow .35s;
}
.bc-photos li:nth-child(3n+2) .bc-photo{--r:1.2deg}
.bc-photos li:nth-child(4n+3) .bc-photo{--r:-.6deg}
.bc-photos li:nth-child(5n) .bc-photo{--r:2deg}
.bc-photo:hover, .bc-photo:focus-within{rotate:0deg;scale:1.06;position:relative;z-index:2;box-shadow:0 0 0 .0625rem var(--cyan), 0 0 2.2rem 0 var(--glow-c)}
.bc-photo__link{display:block;border-radius:.15rem;overflow:hidden;position:relative;isolation:isolate;background:var(--k-deep2)}
.bc-photo__img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:.15rem;transition:scale .8s var(--ease), filter .6s}
.bc-photo__link:hover .bc-photo__img{scale:1.045;filter:saturate(1.25) contrast(1.05)}
.bc-photo::after{content:"";display:block;height:.2rem;margin-top:.45rem;border-radius:1rem;background:var(--sunset)}
.bc-photo:has(.bc-photo__caption)::after{display:none}
.bc-photo__caption{display:block;padding:.45rem .1rem 0;margin:0;font:600 clamp(.62rem, .55rem + .3vw, .78rem)/1.2 var(--f-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset;line-clamp:unset}
.bc-photo__caption::before{content:"";display:block;height:.2rem;margin-bottom:.4rem;border-radius:1rem;background:var(--sunset)}
.bc-feed > p:has(.bc-feed__more){margin-top:var(--sp-3)}
.bc-feed__more{font:600 var(--t--1) var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-flex;gap:.5em;align-items:center}
.bc-feed__more::after{content:"→";color:var(--mag);transition:translate .35s var(--ease)}
.bc-feed__more:hover{color:var(--ink)}
.bc-feed__more:hover::after{translate:.35em 0}
.bc-feed__empty{font:var(--t--1) var(--f-mono);color:var(--muted);padding:var(--sp-2);border:thin dashed var(--line);border-radius:var(--radius)}
.bc-photo__link.vhs img{aspect-ratio:1;border-radius:.15rem}
.prose .section-title{margin-top:.6rem}
.prose .section .kicker{margin-top:0}
.prose .section > * + *{margin-top:0}
.pagination > a, .pagination > span{white-space:nowrap}
.about-main > .section{padding-top:var(--sp-4)}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{text-align:left}
/* Small print paragraph (e.g. a note after a separator), like the mockup's footnotes. */
.prose small{font-size:.85em;color:var(--muted)}
.prose p:has(> small:only-child){font:.82rem/1.6 var(--f-mono);color:var(--muted)}
.prose p:has(> small:only-child) > small{font-size:1em}

/* Kun på print (se print.css) */
.print-url{display:none}

/* ---------- Lightbox (bechster-core): galleri-blokke og Pixelfed; overskriver plugin'ets basis-CSS ---------- */
.wp-block-gallery img[role="button"], .wp-block-gallery a[href] > img, .bc-photo__link{cursor:zoom-in}
html:has(.bc-lightbox[open]){overflow:hidden}
.bc-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f6ecff;overflow:hidden}
.bc-lightbox[open]{display:grid;grid-template-rows:minmax(0, 1fr) auto;animation:lb-in .3s var(--ease)}
.bc-lightbox [hidden]{display:none !important}
.bc-lightbox::backdrop{background:rgb(10 3 22 / calc(.94 - var(--drag-p, 0) * .75));backdrop-filter:blur(.5rem)}
@keyframes lb-in{from{opacity:0}}
.bc-lightbox__stage{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:clamp(3.75rem, 7vw, 4.75rem) clamp(.75rem, 6vw, 5.5rem) .75rem;touch-action:pinch-zoom}
.bc-lightbox__img{
max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:.4rem;user-select:none;-webkit-user-drag:none;
box-shadow:0 0 0 .0625rem color-mix(in srgb, var(--k-mag) 40%, transparent), 0 0 3rem -.5rem color-mix(in srgb, var(--k-mag) 45%, transparent), 0 1.5rem 3rem -1rem #000;
opacity:0;transform:translate(var(--drag-x, 0), var(--drag-y, 0)) scale(calc(1 - var(--drag-p, 0) * .25));
transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.bc-lightbox__img.is-loaded{opacity:1}
.bc-lightbox.is-dragging .bc-lightbox__img{transition:none}
.bc-lightbox.is-dismissing .bc-lightbox__img{opacity:0;transform:translateY(100vh) scale(.8);transition:transform .22s ease-in, opacity .22s ease-in}
.bc-lightbox.is-dragging :is(.bc-lightbox__bar, .bc-lightbox__btn){opacity:calc(1 - var(--drag-p, 0) * 2)}
.bc-lightbox__bar{
display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;
padding:.85rem clamp(.75rem, 6vw, 5.5rem) max(1rem, env(safe-area-inset-bottom));
font:var(--t--1)/1.5 var(--f-mono);color:#cdb8ee;
border-top:.0625rem solid transparent;border-image:linear-gradient(90deg, transparent, var(--k-mag), var(--k-cyan), transparent) 1;
}
.bc-lightbox__caption{margin:0;color:#f6ecff;max-width:70ch}
.bc-lightbox__meta{display:flex;gap:1.25rem;margin:0 0 0 auto;letter-spacing:.1em;text-transform:uppercase}
.bc-lightbox__source{color:var(--k-cyan);text-decoration:none}
.bc-lightbox__source::after{content:" ↗";color:var(--k-mag)}
.bc-lightbox__btn{
position:absolute;display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;padding:0;cursor:pointer;
color:#f6ecff;background:rgb(15 4 32 / .6);border:.0625rem solid color-mix(in srgb, var(--k-mag) 50%, transparent);border-radius:50%;
backdrop-filter:blur(.4rem);transition:border-color .25s, box-shadow .25s, translate .25s var(--ease);
}
.bc-lightbox__btn svg{inline-size:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bc-lightbox__btn:hover, .bc-lightbox__btn:focus-visible{border-color:var(--k-cyan);box-shadow:0 0 1.2rem -.2rem color-mix(in srgb, var(--k-cyan) 70%, transparent)}
.bc-lightbox__close{top:max(.75rem, env(safe-area-inset-top));right:.75rem}
.bc-lightbox__prev, .bc-lightbox__next{top:50%;translate:0 -50%}
.bc-lightbox__prev{left:.75rem}
.bc-lightbox__next{right:.75rem}
.bc-lightbox__prev:hover{translate:-.15rem -50%}
.bc-lightbox__next:hover{translate:.15rem -50%}
/* Små touch-skærme: swipe i stedet for pile, så billedet får hele bredden */
@media (pointer: coarse) and (max-width: 40rem){.bc-lightbox__prev, .bc-lightbox__next{display:none}}

/* ==========================================================================
   HTMLy additions (Markdown content, core gallery, unknown categories)
   ========================================================================== */

/* Gallery in Markdown content (<div class="bc-gallery"><figure><img><figcaption>) = .wp-block-gallery */
.prose .bc-gallery{display:grid;gap:var(--sp-2);grid-template-columns:minmax(0, 1fr);margin-block:var(--sp-3)}
@media (min-width: 40rem){.prose .bc-gallery{grid-template-columns:repeat(3, minmax(0, 1fr))}}
.bc-gallery figure{margin:0;min-width:0}
.bc-gallery figure:first-child{grid-column:1 / -1}
.bc-gallery .vhs{display:block;width:100%;border-radius:.7rem;border:thin solid var(--line)}
.bc-gallery img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;border-radius:0}
.bc-gallery figure:first-child img{aspect-ratio:21 / 9}
.bc-gallery figcaption{font:var(--t--1)/1.5 var(--f-mono);color:var(--muted);margin-top:.7rem;text-align:left}
.bc-gallery figcaption::before{content:"▸ ";color:var(--mag)}
.bc-gallery img[role="button"]{cursor:zoom-in}

/* Loose images in Markdown prose get the VHS frame like core/image blocks */
.prose > p > .vhs, .prose > .vhs{display:block;width:fit-content;max-width:100%;border-radius:var(--radius);border:thin solid var(--line);margin-block:1.6em}
.prose > p > .vhs img, .prose > .vhs img{width:auto;max-width:100%;height:auto;aspect-ratio:auto;border-radius:0}
.prose img[role="button"]{cursor:zoom-in}

/* Categories without their own colour: stable tone from the slug (data-tone 1–4) */
.chip[data-tone="1"]{--c:var(--cyan)}
.chip[data-tone="2"]{--c:var(--orange)}
.chip[data-tone="3"]{--c:var(--yellow)}

/* Post types: quote, link, video, audio (linked, not embedded) */
.media-link{margin-block:var(--sp-2);font:var(--t--1) var(--f-mono);display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
.media-host{color:var(--muted)}

/* Subpages of a static page */
.subpages ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:var(--sp-3)}
.prose .subpages li::marker{content:none}

/* HTMLy's admin tab on posts/pages for logged-in users */
.tab .nav-tabs{list-style:none;display:flex;gap:1rem;padding:0;margin:var(--sp-3) 0 0;font:var(--t--1) var(--f-mono)}

/* HTMLy table of contents ([toc] / <!--toc-->) */
.prose .toc-wrapper, .prose details.toc{margin-block:1.5em;padding:var(--sp-2);border:thin solid var(--line);border-radius:var(--radius);background:var(--surface)}