/* ============================================================================
   RAMTT · ramtt.com landing. Sandfladen, Inter, ingen accent i UI.
   Tokens i tre layer som Cosmos: rå skala → semantisk rolle → komponent.
   Alt der er lys/mørk er ét light-dark()-par. Hårstreg er 0,5 px.
   ============================================================================ */
:root{
  color-scheme: light dark;
  /* 1 · rå skala */
  --sand-0:#FAF9F5; --sand-1:#F0EEE7; --sand-2:#E9E6DD; --sand-3:#E5E2D9; --sand-4:#DFDCD3; --sand-5:#D3D0C6;
  --ink-1:#1B1B1A; --ink-2:#5A5954; --ink-3:#A09D93; --ink-4:#C0BEB3;
  --night-0:#141311; --night-1:#1B1A17; --night-2:#23221E; --night-3:#2A2925; --night-4:#302F2A; --night-5:#3A3833;
  --chalk-1:#ECE8DF; --chalk-2:#B5AFA3; --chalk-3:#7F7A70; --chalk-4:#5A5650;
  /* 2 · semantiske roller */
  --bg-base: light-dark(var(--sand-0), var(--night-0));
  --bg-plane: light-dark(var(--sand-1), var(--night-1));
  --bg-elevation: light-dark(var(--sand-2), var(--night-2));
  --bg-inverted: light-dark(var(--ink-1), var(--chalk-1));
  --fg-1: light-dark(var(--ink-1), var(--chalk-1));
  --fg-2: light-dark(var(--ink-2), var(--chalk-2));
  --fg-3: light-dark(var(--ink-3), var(--chalk-3));
  --fg-4: light-dark(var(--ink-4), var(--chalk-4));
  --fg-inverted: light-dark(var(--sand-0), var(--night-0));
  --line: light-dark(var(--sand-3), var(--night-3));
  --field-border: light-dark(var(--sand-4), var(--night-4));
  --hover-border: light-dark(var(--sand-5), var(--night-5));
  --hover-plane: light-dark(#F1EFE9, #1F1E1A);
  --scrim: color-mix(in oklch, var(--bg-inverted) 40%, transparent);
  --glass: color-mix(in oklch, var(--bg-base) 82%, transparent);
  --shadow-small: 0 1px 8px 0 rgb(0 0 0 / .05);
  --shadow-medium: 0 2px 12px 0 rgb(0 0 0 / .02), 0 4px 16px 0 rgb(0 0 0 / .10);
  --shadow-large: 0 6px 44px 0 rgb(0 0 0 / .15), 0 4px 8px 0 rgb(0 0 0 / .03);
  --inset-glass: inset 0 1px 1.5px light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .05)), inset 0 -1px 1.5px light-dark(rgb(0 0 0 / .03), rgb(0 0 0 / .2));
  /* 3 · komponent-aliasser */
  --btn-primary-bg: var(--bg-inverted); --btn-primary-fg: var(--fg-inverted);
  --tile-radius: 3px; --popup-radius: 20px; --dialog-radius: 24px;
  --hair: .5px;
  /* rum og rytme */
  --sticky-top: 56px; --pad-x: 32px; --content: 1300px; --v: 22.4px;
  --ease-out: cubic-bezier(0,0,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --ease-quint: cubic-bezier(.22,1,.36,1); --eq: cubic-bezier(.25,.46,.45,.94);
  --ctrl: border-color .15s var(--ease-in-out), background-color .15s var(--ease-in-out), color .15s var(--ease-in-out), opacity .15s var(--ease-in-out);
  /* typografi: seks tokens, ikke flere */
  --f: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --t-display-size: clamp(44px, 5.6vw, 76px);
  --t-h2-size: clamp(30px, 3.4vw, 44px);
}
:root[data-theme="light"]{ color-scheme: light }
:root[data-theme="dark"]{ color-scheme: dark }
.force-dark{ color-scheme: dark }

*,::before,::after{ box-sizing:border-box; border:0 solid var(--line) }
html{ scrollbar-gutter: stable; scrollbar-width: thin; scroll-behavior: smooth; }
html[data-ev-open]{ overflow: hidden; }
html[data-ev-open] .hdr{ background:var(--bg-base) }
body{ margin:0; min-height:100dvh; background:var(--bg-base); color:var(--fg-1); font-family:var(--f); font-size:15px; line-height:23px; font-weight:450; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; font-optical-sizing:auto; font-variant-numeric: tabular-nums; overscroll-behavior-y:none; }
::selection{ background:var(--bg-inverted); color:var(--fg-inverted) }
button{ font:inherit; letter-spacing:inherit; color:inherit; background:none; padding:0; cursor:pointer; border:0 }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:1.5px solid var(--fg-1); outline-offset:3px; border-radius:4px }
canvas, svg, img{ display:block }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* ── typetokens ─────────────────────────────────────────────────────────── */
.t-display{ font-size:var(--t-display-size); line-height:1.0; letter-spacing:-.03em; font-weight:450; text-wrap:balance; margin:0 }
.t-h2{ font-size:var(--t-h2-size); line-height:1.08; letter-spacing:-.025em; font-weight:450; text-wrap:balance; margin:0 }
.t-lead{ font-size:17px; line-height:1.5; letter-spacing:-.01em; font-weight:450; text-wrap:pretty; margin:0 }
.t-body{ font-size:15px; line-height:23px; letter-spacing:-.01em; font-weight:450; text-wrap:pretty; margin:0 }
.feed-note.t-body, .invite .t-body, .ev-sheet .t-body{ font-size:15px }
.t-small{ font-size:13px; line-height:1.4; letter-spacing:-.01em; font-weight:500; margin:0 }
.t-cap{ font-size:12px; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; font-weight:500; margin:0 }
.c2{ color:var(--fg-2) } .c3{ color:var(--fg-3) }

/* ── knapper (Kataloget: h44 r9999 pad 0 18 13/500, én kontrolovergang) ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:9999px; border:var(--hair) solid transparent; font-size:13px; line-height:1.4; font-weight:500; white-space:nowrap; transition:var(--ctrl); color:var(--fg-2); user-select:none }
.btn:is(:hover, [data-hover]){ background:var(--hover-plane) }
.btn-primary{ background:var(--btn-primary-bg); color:var(--btn-primary-fg); box-shadow:0 .5px 1px 1px rgb(0 0 0 / .08) }
.btn-primary:is(:hover, [data-hover]){ background:color-mix(in oklch, var(--btn-primary-bg) 88%, var(--bg-base)) }
.btn-outline{ border-color:var(--field-border); color:var(--fg-1) }
.btn-outline:is(:hover, [data-hover]){ border-color:var(--hover-border); background:var(--hover-plane) }
.btn-sm{ height:36px; padding:0 14px }
.btn-xs{ height:34px; padding:0 14px; min-width:74px }
.btn-icon{ width:40px; height:40px; padding:0; border-radius:9999px }

/* ── header (Cosmos: 56 indre, glas, hårstreg) ──────────────────────────── */
.hdr{ position:sticky; top:0; z-index:200; height:var(--sticky-top); display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad-x); background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:var(--hair) solid var(--line) }
.hdr-l{ display:flex; align-items:center; gap:28px }
.wordmark{ font-size:13px; line-height:1.4; font-weight:500; letter-spacing:.14em; color:var(--fg-1) }
.hdr nav{ display:flex; gap:4px }
.hdr nav a{ font-size:13px; line-height:1.4; font-weight:500; color:var(--fg-2); padding:6px 10px; border-radius:9999px; transition:var(--ctrl) }
.hdr nav a:is(:hover, [data-hover]){ color:var(--fg-1); background:var(--hover-plane) }
.hdr nav a[aria-current]{ color:var(--fg-1) }
.hdr-r{ display:flex; align-items:center; gap:8px }
.theme{ width:36px; height:36px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-3); transition:var(--ctrl) }
.theme:is(:hover, [data-hover]){ color:var(--fg-1); background:var(--hover-plane) }
.theme svg{ width:16px; height:16px }

/* ── hero: sticky under arket, fader og løfter mens arket kommer op ─────── */
.hero{ position:sticky; top:0; z-index:0; height:100dvh; margin-top:calc(-1 * var(--sticky-top)); overflow:hidden; display:flex; align-items:center; justify-content:center; --p:0; opacity:calc(1 - var(--p) * .92) }
.hero-stage{ position:absolute; inset:0; touch-action:pan-y }
.hero-stage canvas{ position:absolute; inset:0; transform:translateZ(0) }
.hero-in{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; max-width:760px; padding:0 24px; translate:0 calc(var(--p) * -48px); pointer-events:none }
.hero-in > *{ pointer-events:auto }
.hero-in .t-lead{ max-width:52ch; color:var(--fg-2) }
.hero-cta{ display:flex; gap:10px; margin-top:6px }
.hero-cap{ position:absolute; left:24px; bottom:22px; z-index:1; max-width:calc(100% - 48px); color:var(--fg-2); display:flex; align-items:center; gap:10px; padding:8px 12px; white-space:nowrap; border-radius:9999px; background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.hero-cap b{ font-weight:500; color:var(--fg-1) }
.hero-cap > span:nth-child(2){ overflow:hidden; text-overflow:ellipsis }
.hero-scroll{ position:absolute; right:24px; bottom:22px; z-index:1; color:var(--fg-2); font-size:13px; line-height:1.4; font-weight:500; letter-spacing:-.01em; padding:8px 12px; border-radius:9999px; background:var(--glass) }
.live-dot{ width:6px; height:6px; border-radius:9999px; background:var(--fg-1); display:inline-block; animation:live-pulse 2.4s ease-in-out infinite }
@keyframes live-pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* ── arket ──────────────────────────────────────────────────────────────── */
.sheet{ position:relative; z-index:1; background:var(--bg-base); --r:20px; border-radius:var(--r) var(--r) 0 0; box-shadow:0 -1px 0 0 var(--line); padding-bottom:1px }
.sheet-lip{ height:1px }

/* scroll-drevet: samme kurve som JS-fallback, men uden for hovedtråden */
@keyframes hero-p{ to{ --p:1 } }
@keyframes sheet-r{ to{ --r:0px } }
@property --p{ syntax:"<number>"; inherits:true; initial-value:0 }
@property --r{ syntax:"<length>"; inherits:true; initial-value:20px }
@supports (animation-timeline: scroll()){
  .hero{ animation:hero-p linear both; animation-timeline:scroll(root); animation-range:0 100vh }
  .sheet{ animation:sheet-r linear both; animation-timeline:scroll(root); animation-range:0 60vh }
}

/* ── sektioner ──────────────────────────────────────────────────────────── */
.sec{ position:relative; margin:0 auto; padding:0 var(--pad-x); width:100%; max-width:var(--content); scroll-margin-top:calc(var(--sticky-top) + 24px) }
.sec-head{ display:flex; flex-direction:column; gap:14px; padding:0 0 32px; max-width:640px }
.sec-head .t-lead{ color:var(--fg-2) }
.sec + .sec{ margin-top:200px }
@media (max-width:1024px){ .sec + .sec{ margin-top:120px } }

/* ── feed-layout: rail + masonry (xl: 18-kolonne-tanken, rail i 1–6) ──────── */
.feed-wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 48px; align-items:start }
@media (min-width:1280px){ .feed-wrap{ grid-template-columns:200px minmax(0,1fr) } }
.feed{ position:relative; min-height:200px }
.tile{ position:absolute; top:0; left:0; contain:layout style; opacity:0; animation:tile-in .5s var(--ease-out) forwards; animation-delay:calc(min(sibling-index(), 12) * 40ms) }
@keyframes tile-in{ to{ opacity:1 } }
.tile-media{ position:relative; overflow:hidden; border-radius:var(--tile-radius); border:var(--hair) solid var(--field-border); background:var(--bg-plane); cursor:pointer; isolation:isolate; view-transition-class:tile }
.tile-media canvas{ position:absolute; inset:0 }
.tile-media.dark{ border-color:rgb(255 255 255 / .08) }
/* lokal gradient-scrim øverst i stedet for 40 % over hele motivet (§13.3) */
.tile-media::after{ content:""; position:absolute; inset:0; height:96px; background:linear-gradient(to bottom, rgb(0 0 0 / .32), transparent); opacity:0; transition:opacity .15s var(--ease-in-out); pointer-events:none; z-index:1 }
.tile-media:is(:hover, [data-hover])::after, .tile-media:focus-within::after{ opacity:1; animation:hover-sentinel 1ms }
@keyframes hover-sentinel{ from{ --hover-sentinel:0 } to{ --hover-sentinel:1 } }
.tile-open{ position:absolute; inset:0; width:100%; height:100%; cursor:pointer; z-index:2 }
.tile-open:focus-visible{ outline-offset:-3px }
.tile-actions{ position:absolute; top:12px; right:12px; z-index:3; opacity:0; transition:opacity .3s var(--ease-in-out); pointer-events:none }
.tile-media:is(:hover, [data-hover]) .tile-actions, .tile-media:focus-within .tile-actions{ opacity:1; pointer-events:auto }
.tile-actions .btn{ background:var(--sand-0); color:var(--ink-1); box-shadow:none }
.tile-actions .btn:is(:hover, [data-hover]){ background:var(--sand-1) }
.source-chip{ position:absolute; right:10px; bottom:10px; z-index:3; max-width:74%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:8px; background:rgb(0 0 0 / .22); padding:6px 10px; font-size:13px; line-height:1.4; font-weight:500; letter-spacing:-.01em; color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .3s var(--ease-in-out); pointer-events:none }
.tile-media:is(:hover, [data-hover]) .source-chip, .tile-media:focus-within .source-chip{ opacity:1 }
.tile-cap{ padding:10px 2px 0; display:flex; flex-direction:column; gap:2px }
.tile-cap .t-small{ color:var(--fg-1) }
.tile-cap .rule{ font-size:13px; line-height:1.4; font-weight:450; color:var(--fg-2); letter-spacing:-.01em }
.band{ position:absolute; left:0; right:0; display:flex; flex-direction:column; gap:10px; padding:0 0 22px; border-bottom:var(--hair) solid var(--line); margin-bottom:22px; scroll-margin-top:calc(var(--sticky-top) + 24px) }
.band .t-h2{ font-size:26px; line-height:1.15; letter-spacing:-.02em }
.band .t-body{ color:var(--fg-2); max-width:56ch }
.feed-note{ margin:40px 0 0; color:var(--fg-3); display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* ── railen (Sporet: skinne, mærker, prik ankret til tekstens ende) ─────── */
.rail{ display:none }
@media (min-width:1280px){ .rail{ display:block; position:sticky; top:calc(var(--sticky-top) + 32px); height:fit-content } }
.rail-t{ margin:0 0 3.73px; color:var(--fg-1); letter-spacing:-.01em }
.rail-b{ position:relative; margin-left:10px; --pad-sm:calc(var(--v) / 12); --pad-md:calc(var(--v) * 2 / 12) }
.rail-spine{ position:absolute; left:0; width:1px; top:calc((var(--pad-sm) - var(--pad-md)) / 2); bottom:calc(var(--pad-sm) + .5lh); background:color-mix(in srgb, var(--fg-1) 16%, var(--bg-base)); pointer-events:none }
.rail ol{ list-style:none; margin:0; padding:0 }
.rail li{ position:relative; display:grid; align-items:center }
.rail li > span{ grid-column:1; grid-row:1; height:1px; width:10px; background:color-mix(in srgb, var(--fg-1) 16%, var(--bg-base)); pointer-events:none; transition:background-color .15s }
.rail a{ grid-column:1; grid-row:1; display:flex; align-items:center; gap:10px; padding:calc(var(--pad-sm) + 1.4px) 0 calc(var(--pad-sm) + 1.4px) 15px; font-size:13px; line-height:1.4; font-weight:450; color:var(--fg-3); --near:0; color:color-mix(in oklab, var(--fg-3), var(--fg-1) calc(var(--near) * 100%)) }
.rail a:is(:hover, [data-hover]){ color:var(--fg-2) }
.rail a[aria-current]{ color:color-mix(in oklab, var(--fg-1) 75%, transparent) }
/* CSS-tilstand: prikken er flex-barn efter teksten, præcis som Cursor.
   Når JS'en kører den forfinede bevægelse, skjules denne og en løs prik bruges. */
.rail a::after{ content:""; width:6px; height:6px; border-radius:9999px; background:var(--fg-1); flex:none; opacity:0 }
.rail a[aria-current]::after{ opacity:1 }
.rail[data-mode="refined"] a::after{ opacity:0 }
.rail-dot{ position:absolute; left:0; top:0; width:6px; height:6px; border-radius:9999px; background:var(--fg-1); pointer-events:none; display:none; will-change:transform }
.rail[data-mode="refined"] .rail-dot{ display:block }
/* under xl: samme liste som vandrette chips, ikke fjernet (Sporet §8.10) */
.rail-row{ position:sticky; top:var(--sticky-top); z-index:150; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:10px 0; margin:0 0 24px; background:var(--glass); backdrop-filter:blur(12px); mask-image:linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent) }
.rail-row::-webkit-scrollbar{ display:none }
.rail-row a{ flex:none; padding:8px 14px; border-radius:9999px; font-size:13px; line-height:1.4; font-weight:500; color:var(--fg-3); transition:var(--ctrl) }
.rail-row a:is(:hover, [data-hover]), .rail-row a[aria-current]{ color:var(--fg-1); background:var(--bg-elevation) }
@media (min-width:1280px){ .rail-row{ display:none } }

/* ── motor-figuren: båndet (plan / frame / clock) ───────────────────────── */
.fig{ border-radius:12px; border:var(--hair) solid var(--field-border); background:var(--bg-plane); overflow:hidden }
.fig-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 18px; border-bottom:var(--hair) solid var(--line) }
.fig-bar .l{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.fig-bar .status{ color:var(--fg-3); font-size:13px; line-height:1.4; font-weight:450 }
.fig-bar .status b{ font-weight:500; color:var(--fg-1) }
.fig-body{ position:relative; padding:18px 18px 12px; background:var(--bg-base) }
.fig svg{ width:100%; height:auto; overflow:visible }
.fig-ctl{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 18px 16px; border-top:var(--hair) solid var(--line) }
.seg{ position:relative; display:flex; padding:4px; border-radius:9999px; border:var(--hair) solid var(--field-border) }
.seg button{ position:relative; z-index:1; height:32px; padding:0 14px; border-radius:9999px; font-size:13px; line-height:1.4; font-weight:500; letter-spacing:-.01em; color:var(--fg-3); transition:color .15s }
.seg button[aria-checked="true"]{ color:var(--fg-1) }
.seg i{ position:absolute; top:4px; left:0; height:32px; width:var(--w,0px); translate:var(--x,0) 0; border-radius:9999px; background:var(--bg-elevation); transition:translate .2s var(--ease-out), width .2s var(--ease-out); z-index:0 }
.fig-ctl input[type=range]{ flex:1 1 160px; min-width:120px; accent-color:var(--fg-1); height:24px }
.fig-ctl .t-small{ color:var(--fg-3); min-width:9ch; text-align:right }
.ribbon{ fill:color-mix(in oklab, var(--fg-1) 11%, transparent) }
.midline{ fill:none; stroke:var(--fg-1); stroke-width:1.5; stroke-linejoin:round }
.gridline{ stroke:var(--line); stroke-width:1 }
.axis text{ font-size:13px; font-weight:500; fill:var(--fg-3) }
.anchor-mark{ stroke:var(--fg-1); stroke-width:1.25 }
.anchor-lbl{ font-size:13px; font-weight:500; fill:var(--fg-2) }
.session{ fill:color-mix(in oklab, var(--fg-1) 12%, transparent) }
.playhead{ stroke:var(--fg-1); stroke-width:1; stroke-dasharray:2 3 }
.wide-lbl{ font-size:13px; font-weight:500; fill:var(--fg-1) }
.now-chip{ font-size:13px; font-weight:500; fill:var(--fg-1) }

/* ── ærligheds-kortene (Cosmos ld-three) ────────────────────────────────── */
.three{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px }
.card{ display:flex; flex-direction:column; gap:18px; padding:22px; border-radius:12px; border:var(--hair) solid var(--field-border); background:var(--bg-plane); min-height:280px }
.card .art{ flex:1; min-height:140px; display:flex; align-items:center; justify-content:center }
.card .art svg{ width:100%; height:auto; max-width:300px }
.card .t-small{ color:var(--fg-1) }
.card .t-body{ color:var(--fg-2) }
.grade{ display:flex; gap:6px; align-items:flex-end }
.grade i{ display:block; width:100%; height:44px; border-radius:6px; border:var(--hair) solid var(--field-border); background:color-mix(in oklab, var(--fg-1) var(--g), transparent) }
.grade-l{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; font-size:13px; font-weight:500; color:var(--fg-3); line-height:1.4; letter-spacing:-.01em }
.fresh{ display:flex; gap:12px; align-items:center }
.chip-state{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 10px; border-radius:9999px; border:var(--hair) solid var(--field-border); font-size:13px; line-height:1.4; font-weight:500; letter-spacing:-.01em; color:var(--fg-1) }
.chip-state i{ width:14px; height:14px; border-radius:9999px; display:block }
.chip-state.notyet i{ border:1px dotted var(--fg-2); background:transparent }
.chip-state.outdated i{ border:1px solid var(--fg-2); background:repeating-linear-gradient(45deg, var(--fg-2) 0 1px, transparent 1px 3.5px) }

/* ── invitationen ───────────────────────────────────────────────────────── */
.invite{ position:relative; margin-top:200px; min-height:640px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg-plane); padding:80px 24px }
.invite-in{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center }
.invite .t-h2{ text-align:center }
.bigpill{ display:inline-flex; align-items:center; justify-content:center; height:clamp(80px, 9vw, 128px); padding:0 clamp(40px, 5vw, 72px); border-radius:9999px; background:linear-gradient(180deg, color-mix(in oklch, var(--bg-inverted) 88%, var(--bg-base)), var(--bg-inverted)); color:var(--fg-inverted); font-size:clamp(28px, 3.8vw, 52px); letter-spacing:-.03em; font-weight:450; box-shadow:var(--shadow-large); transition:transform .2s var(--ease-out) }
.bigpill:is(:hover, [data-hover]){ transform:scale(1.02) }
.fly-wrap{ position:absolute; inset:0; pointer-events:none }
.fly{ position:absolute; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-medium); border:var(--hair) solid var(--field-border); animation:fly var(--d) ease-in-out infinite alternate; animation-delay:var(--delay); transform:rotate(var(--rot)); will-change:transform }
.fly canvas{ width:100%; height:100% }
@keyframes fly{ from{ transform:rotate(var(--rot)) translateY(0) } to{ transform:rotate(calc(var(--rot) + 4deg)) translateY(-28px) } }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{ position:relative; background:var(--bg-plane); padding:0 40px; overflow:hidden }
.foot-row{ display:flex; align-items:center; justify-content:space-between; padding:24px 0; font-size:13px; line-height:1.4; font-weight:500; letter-spacing:-.01em; color:var(--fg-2); gap:16px; flex-wrap:wrap }
.foot-row div{ display:flex; gap:22px }
.foot-row a:is(:hover, [data-hover]){ color:var(--fg-1) }
.giant{ font-size:clamp(120px, 22vw, 320px); line-height:.72; font-weight:600; letter-spacing:-.02em; text-align:center; white-space:nowrap; margin:24px -40px -10px; overflow:hidden; color:var(--fg-1); user-select:none }

/* ── element-visningen (Cosmos §8: sticky hero, arket kommer op) ────────── */
.ev{ position:fixed; inset:0; top:var(--sticky-top); z-index:100; background:var(--bg-base); display:none }
.ev[open]{ display:block }
.ev-scroll{ position:relative; height:100%; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:none; display:flex; flex-direction:column; gap:48px; --p:1 }
.ev-scroll::-webkit-scrollbar{ display:none }
.ev-hero{ position:sticky; top:0; z-index:1; height:70vh; min-height:420px; flex:none }
.ev-hero-in{ display:flex; height:100%; border-block:var(--hair) solid var(--line); will-change:transform, filter, opacity; translate:0 calc((1 - var(--p)) * -100px * 2); filter:blur(calc((1 - var(--p)) * 8px)); scale:calc(1 - (1 - var(--p)) * .04); opacity:calc(var(--p) * 2 - 1) }
.ev-back{ width:100px; padding:32px 16px; flex:none }
.ev-media{ flex:1; min-width:0; padding:32px; display:flex; align-items:center; justify-content:center; animation:element-view .2s var(--ease-out) both }
.ev-media .ev-stage{ position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden; border:var(--hair) solid var(--field-border); view-transition-name:scene-hero }
.ev-media canvas{ position:absolute; inset:0 }
@keyframes element-view{ from{ opacity:0; scale:1.01 } to{ opacity:1; scale:1 } }
.ev-side{ width:360px; flex:none; border-left:var(--hair) solid var(--line); padding:24px 28px; display:flex; flex-direction:column; gap:18px; overflow:auto }
.ev-side .t-h2{ font-size:26px; line-height:1.15; letter-spacing:-.02em }
.ev-side .rule{ color:var(--fg-2) }
.ev-meta{ display:flex; flex-direction:column; gap:0; border-top:var(--hair) solid var(--line) }
.ev-meta div{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:var(--hair) solid var(--line); font-size:13px; line-height:1.4; font-weight:450; color:var(--fg-2) }
.ev-meta div b{ font-weight:500; color:var(--fg-1); text-align:right }
.ev-foot{ margin-top:auto; display:flex; gap:8px }
.ev-sheet{ position:relative; z-index:2; flex:none; background:var(--bg-base); border-radius:var(--r,20px) var(--r,20px) 0 0; padding:32px var(--pad-x) 80px; box-shadow:0 -1px 0 0 var(--line); --r:calc((1 - var(--p)) * 0px + var(--p) * 20px) }
.ev-sheet .t-body{ color:var(--fg-2); margin-bottom:20px }
.ev-similar{ position:relative; min-height:100px }
.ev-top{ position:fixed; right:24px; bottom:24px; z-index:5; opacity:0; transition:opacity .2s; pointer-events:none }
.ev-top[data-on]{ opacity:1; pointer-events:auto }
@keyframes ev-p{ to{ --p:0 } }
@supports (animation-timeline: scroll()){
  .ev-scroll{ animation:ev-p linear both; animation-timeline:scroll(self); animation-range:0 50vh }
}
/* view transition: flisen morpher ind i hero'en */
::view-transition-group(scene-hero){ animation-duration:.42s; animation-timing-function:var(--ease-quint) }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.25s }

/* ── dialog (Cosmos: 24 px radius, scale .95 + opacity, scrim) ─────────── */
dialog.dlg{ width:min(440px, calc(100vw - 32px)); padding:0; border:var(--hair) solid transparent; border-radius:var(--dialog-radius); background:var(--bg-base); color:var(--fg-1); box-shadow:0 0 0 var(--hair) var(--field-border), var(--shadow-small); margin:auto; opacity:0; scale:.95; transition:opacity .2s var(--ease-out), scale .2s var(--ease-out), overlay .2s allow-discrete, display .2s allow-discrete }
dialog.dlg[open]{ opacity:1; scale:1 }
@starting-style{ dialog.dlg[open]{ opacity:0; scale:.95 } }
dialog.dlg::backdrop{ background:var(--scrim); transition:opacity .2s var(--ease-out), overlay .2s allow-discrete, display .2s allow-discrete; opacity:0 }
dialog.dlg[open]::backdrop{ opacity:1 }
@starting-style{ dialog.dlg[open]::backdrop{ opacity:0 } }
.dlg-in{ display:flex; flex-direction:column; gap:14px; padding:28px }
.dlg-in .t-h2{ font-size:26px; line-height:1.15; letter-spacing:-.02em }
.dlg-in .t-body{ color:var(--fg-2) }
.field{ display:flex; flex-direction:column; gap:8px; margin-top:6px }
.field label{ font-size:13px; line-height:1.4; font-weight:500; color:var(--fg-3) }
.field input{ width:100%; height:44px; border-radius:12px; background:light-dark(#fff, var(--night-1)); border:var(--hair) solid var(--field-border); padding:12px; color:var(--fg-1); font:inherit; font-size:13px; font-weight:450; line-height:1.4; transition:border-color .15s; outline:none }
.field input::placeholder{ color:var(--fg-4) }
.field input:focus{ outline:1px solid var(--fg-1); outline-offset:0 }
.dlg-act{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px }

/* ── toast (Cosmos: pill, glas, hårstreg-ring) ──────────────────────────── */
.toasts{ position:fixed; right:24px; bottom:24px; z-index:600; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none }
.toast{ display:flex; align-items:center; gap:8px; height:48px; padding:0 16px 0 14px; border-radius:9999px; background:color-mix(in oklch, var(--bg-base) 75%, transparent); backdrop-filter:blur(16px); box-shadow:0 0 0 var(--hair) var(--field-border), var(--shadow-medium); font-size:13px; line-height:1.4; font-weight:500; letter-spacing:-.01em; color:var(--fg-1); translate:0 0; opacity:1; transition:translate .25s var(--ease-quint), opacity .25s }
@starting-style{ .toast{ translate:0 16px; opacity:0 } }
.toast[data-out]{ translate:0 16px; opacity:0 }

/* ── harness-oplysninger (kun med ?diag) ────────────────────────────────── */
.diag{ position:fixed; left:12px; bottom:12px; z-index:700; font-size:11px; line-height:1.5; padding:8px 10px; border-radius:8px; background:var(--glass); border:var(--hair) solid var(--field-border); color:var(--fg-2); font-variant-numeric:tabular-nums; white-space:pre; display:none }
:root[data-diag] .diag{ display:block }

/* ── responsivt ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){ .three{ grid-template-columns:1fr } .ev-side{ width:300px } .ev-back{ width:64px; padding:24px 12px } }
@media (max-width:760px){
  :root{ --pad-x:16px }
  .hdr nav{ display:none }
  .hero-in{ gap:16px }
  .hero-cap{ left:16px; bottom:16px; max-width:calc(100% - 32px) }
  .hero-cap b{ display:none }
  .hero-scroll{ display:none }
  .ev-hero-in{ flex-direction:column }
  .ev-back{ width:auto; padding:12px 16px 0 }
  .ev-side{ width:auto; border-left:0; border-top:var(--hair) solid var(--line); padding:16px }
  .ev-hero{ height:auto; min-height:0 }
  .ev-media{ padding:12px 16px; min-height:44vh }
  .giant{ margin:24px -16px -6px }
  .foot{ padding:0 16px }
}

/* ── reduceret bevægelse: én frame, ingen fjeder, ingen indgang ─────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .tile{ animation:none; opacity:1 }
  .hero, .sheet, .ev-scroll{ animation:none }
  .hero-in{ translate:none }
  .live-dot, .fly{ animation:none }
  .ev-media{ animation:none }
  .bigpill:is(:hover, [data-hover]){ transform:none }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none }
}