/* Guest-only photo/motion details; all shared Eventbriefen styling is preserved. */
.mark-cover {
  height: clamp(420px, 48vw, 640px);
  min-height: 0;
}
.mark-cover.article-cover-image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.mark-cover::before { z-index: 1; pointer-events: none; }

.mark-beat {
  position: absolute; z-index: 2; left: 30px; bottom: 62px;
  display: flex; align-items: end; gap: 4px; height: 50px;
  color: var(--gold-light); pointer-events: none;
}
.mark-beat i { display: block; width: 4px; height: 32px; background: currentColor; transform-origin: bottom; transform: scaleY(.4); }
.mark-beat i:nth-child(2n) { height: 44px; transform: scaleY(.55); }
.mark-beat i:nth-child(3n) { height: 25px; }
.mark-beat i:nth-child(5n) { height: 50px; transform: scaleY(.7); }
.mark-inline-photo { width: min(360px, 100%); margin: 48px auto; }
.mark-inline-photo img { width: 100%; height: auto; }
.mark-inline-photo figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.contributor-card .mark-contributor-photo { width: 104px; height: auto; }
@keyframes mark-rhythm {
  0%, 100% { transform: scaleY(.4); }
  20% { transform: scaleY(.9); }
  40% { transform: scaleY(.3); }
  60% { transform: scaleY(1); }
  80% { transform: scaleY(.55); }
}

@media (max-width: 720px) {
  .mark-cover { height: 530px; min-height: 0; }
  .mark-cover.article-cover-image > img { object-position: center 58%; }
  .mark-beat { left: 20px; bottom: 68px; gap: 3px; }
  .mark-beat i { width: 3px; }
  .mark-cover .cover-caption { left: 20px; right: 20px; bottom: 24px; line-height: 1.7; }
  .mark-inline-photo { margin-block: 36px; }
  .contributor-card .mark-contributor-photo { width: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .mark-cover .mark-beat i, .mark-cover .mark-cover-light { animation: none !important; }
  .mark-cover-light { display: none; }
}
@media print {
  .mark-cover-light, .mark-beat { display: none; }
  .mark-inline-photo { break-inside: avoid; }
}

/* The three approved DJ details, scoped to this guest brief. */
@media (max-width:780px) {
  /* Exclude the browser scrollbar from the existing mobile page margins. */
  :root { --shell:calc(100% - 32px); }
}
.mark-motion-control { display:flex; justify-content:flex-end; padding-block:0 18px; }
.mark-motion-control button { min-height:44px; padding:9px 0; border:0; border-bottom:1px solid var(--rule); background:transparent; color:var(--ink); font-size:12px; cursor:pointer; }
.mark-motion-control button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.mark-wavebox { position:absolute; z-index:2; bottom:70px; left:max(24px, calc((100% - 1400px)/2)); width:min(520px, calc(100% - 48px)); padding:22px; color:var(--cream); background:var(--forest); border:1px solid var(--gold); }
.mark-wave-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; font-size:11px; line-height:1.6; letter-spacing:.1em; text-transform:uppercase; }
.mark-wavebox .mark-beat { position:static; height:50px; margin:20px 0 12px; }
.mark-beat i { animation:mark-rhythm 1.2s ease-in-out infinite; }
.mark-beat i:nth-child(2n) { animation-duration:.8s; animation-direction:reverse; }
.mark-beat i:nth-child(3n) { animation-duration:1.6s; }
.mark-beat i:nth-child(5n) { animation-delay:-.4s; }
.mark-wave-caption { margin:0; font-family:var(--serif); font-size:clamp(25px,3vw,32px); line-height:1.1; }
.mark-wave-explainer { margin:8px 0 0; max-width:430px; font-size:14px; line-height:1.5; opacity:.82; }
.mark-room { margin-block:clamp(56px,7vw,90px); display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,40px); }
.article-body .mark-room h2 { margin:16px 0 28px; }
.mark-room-copy,.mark-room-visual { min-width:0; }
.mark-room-visual { align-self:start; padding:clamp(16px,2vw,28px); background:var(--forest); color:var(--cream); }
.mark-floorplan { display:block; width:100%; height:auto; }
.mark-plan-wall { fill:none; stroke:var(--gold); stroke-width:2; opacity:.38; }
.mark-plan-tables { fill:var(--forest); stroke:var(--gold); stroke-width:1.4; stroke-opacity:.6; }
.mark-plan-furniture { fill:none; stroke:var(--gold); stroke-width:1.4; stroke-opacity:.6; }
.mark-plan-dance { fill:var(--gold); fill-opacity:.025; }
.mark-plan-grid { opacity:.15; }
.mark-plan-trace { fill:none; stroke:var(--gold); stroke-width:1; opacity:.12; }
.mark-flow-path { fill:none; stroke:var(--gold-light); stroke-width:2; stroke-linecap:round; stroke-dasharray:8 92; opacity:.7; animation:mark-room-flow 10s linear infinite; }
@keyframes mark-room-flow { to { stroke-dashoffset:-100; } }
.mark-plan-label { fill:var(--cream); font:19px var(--sans); letter-spacing:1px; text-anchor:middle; }
.article-body .mark-plan-caption { margin:12px 0 0; padding-top:16px; border-top:1px solid var(--rule); color:var(--cream); font-size:12px; line-height:1.7; text-align:center; }
@media (max-width:599px) { .mark-plan-label { font-size:22px; letter-spacing:0; } }
.mark-tracks { margin-block:70px; }
.article-body .mark-tracks h2 { margin:16px 0 32px; }
.mark-track-list { display:grid; gap:26px; }
.mark-track { border-top:1px solid var(--rule); padding-top:22px; }
.mark-track small { display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.article-body .mark-track p { margin:5px 0 0; color:var(--ink); font-family:var(--serif); font-size:30px; line-height:1.12; }
.mark-vinyl { width:98px; height:98px; border-radius:50%; position:relative; margin:0 0 24px; background:linear-gradient(18deg,transparent 48.8%,rgba(242,238,227,.3) 49.2% 50.2%,transparent 50.6%),radial-gradient(circle,var(--gold) 0 11%,var(--ink) 12% 15%,transparent 16%),repeating-radial-gradient(var(--ink) 0 5px,var(--muted) 6px 7px,var(--ink) 8px); animation:mark-vinyl-spin 4.6s linear infinite; }
.mark-vinyl::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; top:11px; left:46px; background:var(--gold-light); }
.mark-track:nth-child(2) .mark-vinyl { animation-duration:5.4s; }
.mark-track:nth-child(3) .mark-vinyl { animation-duration:4.1s; }
@keyframes mark-vinyl-spin { to { transform:rotate(360deg); } }
.mark-vinyl { animation-play-state:paused; }
.mark-tracks.is-live .mark-vinyl { animation-play-state:running; }
@media (hover:hover) { .mark-track:hover .mark-vinyl { animation-play-state:running; } }
@media (min-width:600px) { .mark-track-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:599px) {
  .mark-cover { height:auto; }
  .mark-cover.article-cover-image > img { height:440px; }
  .mark-wavebox { position:static; width:auto; margin:0; padding:20px 16px 22px; border-width:1px 0 0; }
  .mark-cover .cover-caption { position:static; display:block; padding:14px 16px 18px; background:var(--forest); }
  .mark-wave-top { font-size:11px; }
  .mark-wave-top span:last-child { display:none; }
  .mark-track { display:grid; grid-template-columns:78px 1fr; column-gap:20px; align-items:center; }
  .mark-vinyl { grid-row:1 / 3; width:74px; height:74px; margin:0; }
  .mark-vinyl::after { top:8px; left:35px; }
  .mark-track small { align-self:end; }
  .article-body .mark-track p { align-self:start; font-size:28px; }
}
html.motion-paused .mark-beat i,html.motion-paused .mark-flow-path,html.motion-paused .mark-vinyl,
body.motion-paused .mark-beat i,body.motion-paused .mark-flow-path,body.motion-paused .mark-vinyl,
body.paused .mark-beat i,body.paused .mark-flow-path,body.paused .mark-vinyl,
html.motion-tab-hidden .mark-beat i,html.motion-tab-hidden .mark-flow-path,html.motion-tab-hidden .mark-vinyl { animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce) {
  .mark-beat i,.mark-flow-path,.mark-vinyl { animation:none !important; }
}
@media print { .mark-motion-control { display:none; } .mark-flow-path,.mark-vinyl { animation:none; } }

/* Guest brief: readable byline and cover caption (shared styles use 9px). */
.article-hero .author-mini span, .article-hero .article-data { font-size:12px; }
.article-hero .editorial-author-copy .author-kicker { color:#7a5a1c; font-size:12px; }
.mark-cover .cover-caption { font-size:11px; color:rgba(242,238,227,.72); }
.article-hero .author-mini img { filter:none; }

/* ---------------------------------------------------------------- DJ-tema (kun Gæstebrief 01) */
/* 1) Scenen: mørk top med et svagt guldskær, som når lyset går ned */
.dj-theme .article-hero { color: var(--cream); background: radial-gradient(ellipse 70% 90% at 78% 0%, rgba(213,180,111,.17), rgba(213,180,111,0) 60%), #07110c; border-bottom: 0; }
.dj-theme .article-hero .breadcrumbs, .dj-theme .article-hero .breadcrumbs a { color: rgba(242,238,227,.62); }
.dj-theme .article-hero .article-label { color: var(--gold-light); }
.dj-theme .article-hero .article-title { color: var(--cream); }
.dj-theme .article-hero .article-lead { color: rgba(242,238,227,.8); }
.dj-theme .article-hero .article-byline { border-color: rgba(242,238,227,.18); }
.dj-theme .article-hero .author-mini .editorial-author-copy strong { color: var(--cream); }
.dj-theme .article-hero .editorial-author-copy .author-kicker { color: var(--gold-light); }
.dj-theme .article-hero .author-mini span, .dj-theme .article-hero .article-data { color: rgba(242,238,227,.66); }
.dj-theme .article-hero .mobile-toc { border-color: rgba(242,238,227,.2); color: var(--cream); }
.dj-theme .article-hero .mobile-toc a { color: var(--cream); }
.dj-theme .mark-motion-control { width: 100%; max-width: none; margin: 0; padding: 0 max(24px, calc((100% - 1400px) / 2)) 18px; background: #07110c; box-sizing: border-box; }
.dj-theme .mark-motion-control button { color: rgba(242,238,227,.78); border-bottom-color: rgba(242,238,227,.25); }

/* 2) Tracklist i stedet for "I denne brief" */
.dj-theme .toc-list a span { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--brass); }
.dj-theme .toc-list a { position: relative; }
.dj-theme .toc-list a.active { color: var(--ink); font-weight: 600; }
.dj-theme .toc-list a.active::after { content: ''; position: absolute; left: 30px; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--gold) 0 42%, rgba(213,180,111,.22) 42% 100%); }
.dj-theme .toc-list a.active::before { content: ''; position: absolute; right: 0; top: 50%; width: 0; height: 0; border-left: 7px solid var(--gold); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transform: translateY(-50%); }

/* 3) Stille lydbølge som skillelinje over afsnittene */
.dj-theme .article-body > h2::before,
.dj-theme .article-body .mark-room-copy h2::before,
.dj-theme .article-body .mark-tracks h2::before { content: ''; display: block; width: min(320px, 70%); height: 20px; margin: 0 0 34px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 480 24%22 fill=%22%23d5b46f%22%3E%3Crect x=%220%22 y=%229.8%22 width=%222%22 height=%224.3%22 rx=%221%22/%3E%3Crect x=%224%22 y=%2210.0%22 width=%222%22 height=%224.0%22 rx=%221%22/%3E%3Crect x=%228%22 y=%228.3%22 width=%222%22 height=%227.4%22 rx=%221%22/%3E%3Crect x=%2212%22 y=%2210.0%22 width=%222%22 height=%224.0%22 rx=%221%22/%3E%3Crect x=%2216%22 y=%228.3%22 width=%222%22 height=%227.4%22 rx=%221%22/%3E%3Crect x=%2220%22 y=%228.8%22 width=%222%22 height=%226.4%22 rx=%221%22/%3E%3Crect x=%2224%22 y=%229.8%22 width=%222%22 height=%224.4%22 rx=%221%22/%3E%3Crect x=%2228%22 y=%228.1%22 width=%222%22 height=%227.9%22 rx=%221%22/%3E%3Crect x=%2232%22 y=%229.8%22 width=%222%22 height=%224.5%22 rx=%221%22/%3E%3Crect x=%2236%22 y=%228.1%22 width=%222%22 height=%227.8%22 rx=%221%22/%3E%3Crect x=%2240%22 y=%229.5%22 width=%222%22 height=%225.0%22 rx=%221%22/%3E%3Crect x=%2244%22 y=%229.3%22 width=%222%22 height=%225.3%22 rx=%221%22/%3E%3Crect x=%2248%22 y=%227.9%22 width=%222%22 height=%228.2%22 rx=%221%22/%3E%3Crect x=%2252%22 y=%226.0%22 width=%222%22 height=%2211.9%22 rx=%221%22/%3E%3Crect x=%2256%22 y=%229.1%22 width=%222%22 height=%225.9%22 rx=%221%22/%3E%3Crect x=%2260%22 y=%228.6%22 width=%222%22 height=%226.9%22 rx=%221%22/%3E%3Crect x=%2264%22 y=%226.6%22 width=%222%22 height=%2210.8%22 rx=%221%22/%3E%3Crect x=%2268%22 y=%225.0%22 width=%222%22 height=%2214.0%22 rx=%221%22/%3E%3Crect x=%2272%22 y=%226.7%22 width=%222%22 height=%2210.6%22 rx=%221%22/%3E%3Crect x=%2276%22 y=%227.5%22 width=%222%22 height=%229.1%22 rx=%221%22/%3E%3Crect x=%2280%22 y=%224.5%22 width=%222%22 height=%2214.9%22 rx=%221%22/%3E%3Crect x=%2284%22 y=%229.1%22 width=%222%22 height=%225.8%22 rx=%221%22/%3E%3Crect x=%2288%22 y=%225.0%22 width=%222%22 height=%2214.1%22 rx=%221%22/%3E%3Crect x=%2292%22 y=%227.8%22 width=%222%22 height=%228.5%22 rx=%221%22/%3E%3Crect x=%2296%22 y=%228.4%22 width=%222%22 height=%227.1%22 rx=%221%22/%3E%3Crect x=%22100%22 y=%228.6%22 width=%222%22 height=%226.9%22 rx=%221%22/%3E%3Crect x=%22104%22 y=%227.5%22 width=%222%22 height=%229.0%22 rx=%221%22/%3E%3Crect x=%22108%22 y=%224.7%22 width=%222%22 height=%2214.6%22 rx=%221%22/%3E%3Crect x=%22112%22 y=%228.1%22 width=%222%22 height=%227.9%22 rx=%221%22/%3E%3Crect x=%22116%22 y=%225.8%22 width=%222%22 height=%2212.4%22 rx=%221%22/%3E%3Crect x=%22120%22 y=%225.5%22 width=%222%22 height=%2213.1%22 rx=%221%22/%3E%3Crect x=%22124%22 y=%226.8%22 width=%222%22 height=%2210.3%22 rx=%221%22/%3E%3Crect x=%22128%22 y=%225.8%22 width=%222%22 height=%2212.4%22 rx=%221%22/%3E%3Crect x=%22132%22 y=%228.6%22 width=%222%22 height=%226.9%22 rx=%221%22/%3E%3Crect x=%22136%22 y=%228.5%22 width=%222%22 height=%227.0%22 rx=%221%22/%3E%3Crect x=%22140%22 y=%227.6%22 width=%222%22 height=%228.8%22 rx=%221%22/%3E%3Crect x=%22144%22 y=%224.8%22 width=%222%22 height=%2214.5%22 rx=%221%22/%3E%3Crect x=%22148%22 y=%226.2%22 width=%222%22 height=%2211.6%22 rx=%221%22/%3E%3Crect x=%22152%22 y=%226.8%22 width=%222%22 height=%2210.3%22 rx=%221%22/%3E%3Crect x=%22156%22 y=%225.2%22 width=%222%22 height=%2213.7%22 rx=%221%22/%3E%3Crect x=%22160%22 y=%225.9%22 width=%222%22 height=%2212.2%22 rx=%221%22/%3E%3Crect x=%22164%22 y=%226.8%22 width=%222%22 height=%2210.4%22 rx=%221%22/%3E%3Crect x=%22168%22 y=%223.7%22 width=%222%22 height=%2216.7%22 rx=%221%22/%3E%3Crect x=%22172%22 y=%224.2%22 width=%222%22 height=%2215.7%22 rx=%221%22/%3E%3Crect x=%22176%22 y=%227.0%22 width=%222%22 height=%2210.0%22 rx=%221%22/%3E%3Crect x=%22180%22 y=%224.8%22 width=%222%22 height=%2214.3%22 rx=%221%22/%3E%3Crect x=%22184%22 y=%225.1%22 width=%222%22 height=%2213.8%22 rx=%221%22/%3E%3Crect x=%22188%22 y=%222.8%22 width=%222%22 height=%2218.5%22 rx=%221%22/%3E%3Crect x=%22192%22 y=%223.7%22 width=%222%22 height=%2216.7%22 rx=%221%22/%3E%3Crect x=%22196%22 y=%226.5%22 width=%222%22 height=%2211.0%22 rx=%221%22/%3E%3Crect x=%22200%22 y=%221.8%22 width=%222%22 height=%2220.3%22 rx=%221%22/%3E%3Crect x=%22204%22 y=%227.6%22 width=%222%22 height=%228.8%22 rx=%221%22/%3E%3Crect x=%22208%22 y=%225.5%22 width=%222%22 height=%2213.0%22 rx=%221%22/%3E%3Crect x=%22212%22 y=%223.2%22 width=%222%22 height=%2217.7%22 rx=%221%22/%3E%3Crect x=%22216%22 y=%227.2%22 width=%222%22 height=%229.5%22 rx=%221%22/%3E%3Crect x=%22220%22 y=%224.8%22 width=%222%22 height=%2214.3%22 rx=%221%22/%3E%3Crect x=%22224%22 y=%228.0%22 width=%222%22 height=%228.1%22 rx=%221%22/%3E%3Crect x=%22228%22 y=%223.5%22 width=%222%22 height=%2217.0%22 rx=%221%22/%3E%3Crect x=%22232%22 y=%222.8%22 width=%222%22 height=%2218.4%22 rx=%221%22/%3E%3Crect x=%22236%22 y=%224.1%22 width=%222%22 height=%2215.8%22 rx=%221%22/%3E%3Crect x=%22240%22 y=%221.9%22 width=%222%22 height=%2220.2%22 rx=%221%22/%3E%3Crect x=%22244%22 y=%226.0%22 width=%222%22 height=%2212.1%22 rx=%221%22/%3E%3Crect x=%22248%22 y=%223.3%22 width=%222%22 height=%2217.4%22 rx=%221%22/%3E%3Crect x=%22252%22 y=%224.1%22 width=%222%22 height=%2215.8%22 rx=%221%22/%3E%3Crect x=%22256%22 y=%224.2%22 width=%222%22 height=%2215.5%22 rx=%221%22/%3E%3Crect x=%22260%22 y=%225.2%22 width=%222%22 height=%2213.7%22 rx=%221%22/%3E%3Crect x=%22264%22 y=%222.6%22 width=%222%22 height=%2218.9%22 rx=%221%22/%3E%3Crect x=%22268%22 y=%221.9%22 width=%222%22 height=%2220.1%22 rx=%221%22/%3E%3Crect x=%22272%22 y=%225.2%22 width=%222%22 height=%2213.6%22 rx=%221%22/%3E%3Crect x=%22276%22 y=%223.9%22 width=%222%22 height=%2216.1%22 rx=%221%22/%3E%3Crect x=%22280%22 y=%228.0%22 width=%222%22 height=%228.0%22 rx=%221%22/%3E%3Crect x=%22284%22 y=%223.8%22 width=%222%22 height=%2216.3%22 rx=%221%22/%3E%3Crect x=%22288%22 y=%224.2%22 width=%222%22 height=%2215.5%22 rx=%221%22/%3E%3Crect x=%22292%22 y=%222.1%22 width=%222%22 height=%2219.9%22 rx=%221%22/%3E%3Crect x=%22296%22 y=%223.2%22 width=%222%22 height=%2217.5%22 rx=%221%22/%3E%3Crect x=%22300%22 y=%226.8%22 width=%222%22 height=%2210.5%22 rx=%221%22/%3E%3Crect x=%22304%22 y=%226.2%22 width=%222%22 height=%2211.7%22 rx=%221%22/%3E%3Crect x=%22308%22 y=%224.5%22 width=%222%22 height=%2215.1%22 rx=%221%22/%3E%3Crect x=%22312%22 y=%228.5%22 width=%222%22 height=%227.0%22 rx=%221%22/%3E%3Crect x=%22316%22 y=%225.8%22 width=%222%22 height=%2212.3%22 rx=%221%22/%3E%3Crect x=%22320%22 y=%227.7%22 width=%222%22 height=%228.6%22 rx=%221%22/%3E%3Crect x=%22324%22 y=%228.1%22 width=%222%22 height=%227.9%22 rx=%221%22/%3E%3Crect x=%22328%22 y=%228.4%22 width=%222%22 height=%227.2%22 rx=%221%22/%3E%3Crect x=%22332%22 y=%224.2%22 width=%222%22 height=%2215.5%22 rx=%221%22/%3E%3Crect x=%22336%22 y=%228.1%22 width=%222%22 height=%227.9%22 rx=%221%22/%3E%3Crect x=%22340%22 y=%227.4%22 width=%222%22 height=%229.2%22 rx=%221%22/%3E%3Crect x=%22344%22 y=%226.7%22 width=%222%22 height=%2210.7%22 rx=%221%22/%3E%3Crect x=%22348%22 y=%223.9%22 width=%222%22 height=%2216.1%22 rx=%221%22/%3E%3Crect x=%22352%22 y=%228.5%22 width=%222%22 height=%227.0%22 rx=%221%22/%3E%3Crect x=%22356%22 y=%226.5%22 width=%222%22 height=%2211.0%22 rx=%221%22/%3E%3Crect x=%22360%22 y=%226.0%22 width=%222%22 height=%2212.0%22 rx=%221%22/%3E%3Crect x=%22364%22 y=%224.2%22 width=%222%22 height=%2215.5%22 rx=%221%22/%3E%3Crect x=%22368%22 y=%224.7%22 width=%222%22 height=%2214.7%22 rx=%221%22/%3E%3Crect x=%22372%22 y=%224.5%22 width=%222%22 height=%2215.0%22 rx=%221%22/%3E%3Crect x=%22376%22 y=%227.7%22 width=%222%22 height=%228.6%22 rx=%221%22/%3E%3Crect x=%22380%22 y=%227.0%22 width=%222%22 height=%229.9%22 rx=%221%22/%3E%3Crect x=%22384%22 y=%227.4%22 width=%222%22 height=%229.2%22 rx=%221%22/%3E%3Crect x=%22388%22 y=%224.8%22 width=%222%22 height=%2214.4%22 rx=%221%22/%3E%3Crect x=%22392%22 y=%224.5%22 width=%222%22 height=%2214.9%22 rx=%221%22/%3E%3Crect x=%22396%22 y=%228.6%22 width=%222%22 height=%226.8%22 rx=%221%22/%3E%3Crect x=%22400%22 y=%228.6%22 width=%222%22 height=%226.9%22 rx=%221%22/%3E%3Crect x=%22404%22 y=%228.3%22 width=%222%22 height=%227.4%22 rx=%221%22/%3E%3Crect x=%22408%22 y=%228.4%22 width=%222%22 height=%227.2%22 rx=%221%22/%3E%3Crect x=%22412%22 y=%227.3%22 width=%222%22 height=%229.4%22 rx=%221%22/%3E%3Crect x=%22416%22 y=%226.9%22 width=%222%22 height=%2210.2%22 rx=%221%22/%3E%3Crect x=%22420%22 y=%228.4%22 width=%222%22 height=%227.1%22 rx=%221%22/%3E%3Crect x=%22424%22 y=%229.7%22 width=%222%22 height=%224.7%22 rx=%221%22/%3E%3Crect x=%22428%22 y=%227.9%22 width=%222%22 height=%228.2%22 rx=%221%22/%3E%3Crect x=%22432%22 y=%228.2%22 width=%222%22 height=%227.6%22 rx=%221%22/%3E%3Crect x=%22436%22 y=%227.5%22 width=%222%22 height=%229.1%22 rx=%221%22/%3E%3Crect x=%22440%22 y=%226.0%22 width=%222%22 height=%2211.9%22 rx=%221%22/%3E%3Crect x=%22444%22 y=%227.2%22 width=%222%22 height=%229.6%22 rx=%221%22/%3E%3Crect x=%22448%22 y=%228.0%22 width=%222%22 height=%228.0%22 rx=%221%22/%3E%3Crect x=%22452%22 y=%227.8%22 width=%222%22 height=%228.5%22 rx=%221%22/%3E%3Crect x=%22456%22 y=%227.7%22 width=%222%22 height=%228.6%22 rx=%221%22/%3E%3Crect x=%22460%22 y=%229.9%22 width=%222%22 height=%224.1%22 rx=%221%22/%3E%3Crect x=%22464%22 y=%227.3%22 width=%222%22 height=%229.4%22 rx=%221%22/%3E%3Crect x=%22468%22 y=%227.9%22 width=%222%22 height=%228.2%22 rx=%221%22/%3E%3Crect x=%22472%22 y=%227.9%22 width=%222%22 height=%228.2%22 rx=%221%22/%3E%3Crect x=%22476%22 y=%228.7%22 width=%222%22 height=%226.7%22 rx=%221%22/%3E%3C/svg%3E") left center / 100% 100% no-repeat; opacity: .6; }
@media (max-width: 780px) {
  .dj-theme .article-body > h2::before, .dj-theme .article-body .mark-room-copy h2::before, .dj-theme .article-body .mark-tracks h2::before { height: 16px; margin-bottom: 26px; }
}

/* ---------------------------------------------------------------- Plantegning (lys, tydelig version) */
.mark-room-visual { margin: 0; padding: clamp(18px, 2.4vw, 30px); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); }
.mark-plan-wall { fill: none; stroke: var(--ink); stroke-width: 2; opacity: .35; }
.mark-plan-tables { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; stroke-opacity: .55; }
.mark-plan-bar { fill: rgba(213,180,111,.32); stroke: var(--brass); stroke-width: 1.2; }
.mark-plan-dance { fill: rgba(213,180,111,.14); fill-opacity: 1; stroke: var(--brass); stroke-width: 1.4; }
.mark-plan-grid { fill: none; stroke: var(--brass); stroke-width: 1; opacity: .25; }
.mark-plan-booth { fill: var(--forest); }
.mark-plan-sight { fill: none; stroke: var(--green); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .4; }
.mark-plan-route { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; }
.mark-plan-arrow { fill: var(--green); }
.mark-flow-path { stroke: var(--gold); stroke-width: 3.2; stroke-dasharray: 6 94; opacity: .95; }
.mark-plan-step circle { fill: var(--green); }
.mark-plan-step text { fill: var(--cream); font: 700 12px var(--sans); text-anchor: middle; }
.mark-plan-label { fill: var(--ink); font: 700 13px var(--sans); letter-spacing: 2px; text-anchor: middle; }
.mark-plan-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--body, #2c302b); font-size: 13px; line-height: 1.5; }
.mark-plan-legend li { display: flex; align-items: center; gap: 10px; margin: 0; }
.mark-legend-route, .mark-legend-sight { width: 30px; height: 0; border-top: 2px dashed var(--green); flex: none; }
.mark-legend-sight { border-top-width: 1.5px; border-top-style: dotted; opacity: .55; }
.article-body .mark-plan-caption { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; text-align: left; }
@media (max-width: 599px) {
  .mark-plan-label { font-size: 17px; letter-spacing: 1px; }
  .mark-plan-step text { font-size: 14px; }
  .mark-plan-legend { font-size: 12.5px; }
}

/* Plantegning v2: DJ ved gulvet, bar få skridt væk, tre borde tæt på */
.mark-plan-gap { fill: none; stroke: var(--brass); stroke-width: 1.2; stroke-dasharray: 2 3; }
.mark-plan-note { fill: var(--brass); font: 600 11px var(--sans); letter-spacing: .5px; }
@media (max-width: 599px) { .mark-plan-note { font-size: 14px; } }

/* "Rummet i tre regler" (erstatter plantegningen) */
.mark-room-rules { padding: clamp(24px, 3vw, 36px); border-top: 4px solid var(--gold); }
.mark-rules-kicker { margin: 0 0 6px; color: var(--brass); font: 700 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.article-body .mark-rules { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.article-body .mark-rules li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.article-body .mark-rules li::before { content: none; display: none; }
.article-body .mark-rules li:last-child { border-bottom: 0; padding-bottom: 4px; }
.mark-rules-nr { color: var(--gold); font: 400 34px/1 var(--serif); }
.article-body .mark-rules strong { display: block; color: var(--ink); font: 400 24px/1.15 var(--serif); }
.article-body .mark-rules p { margin: 6px 0 0; color: var(--body, #2c302b); font-size: 15px; line-height: 1.6; }
@media (max-width: 599px) {
  .article-body .mark-rules li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .mark-rules-nr { font-size: 28px; }
  .article-body .mark-rules strong { font-size: 21px; }
}

/* ---------------------------------------------------------------- Animeret festscene */
.mark-room-rules { padding: 0 0 clamp(20px, 2.6vw, 30px); overflow: hidden; }
.mark-room-rules > :not(.mark-scene-wrap) { margin-left: clamp(22px, 3vw, 36px); margin-right: clamp(22px, 3vw, 36px); }
.mark-scene-wrap { margin: 0 0 26px; line-height: 0; }
.mark-scene { display: block; width: 100%; height: auto; }
.mark-scene .scn-person, .mark-scene .scn-far { fill: #030805; }
.mark-scene .scn-guest, .mark-scene .scn-dancer, .mark-scene .scn-dj, .mark-scene .scn-bartender { stroke: rgba(240,217,158,.28); stroke-width: 1; }
.mark-scene .scn-far { opacity: .75; }
.mark-scene .scn-candle { fill: #f0d99e; }
.mark-scene .scn-cord { stroke: rgba(213,180,111,.25); stroke-width: 1; }
.mark-scene .scn-lamp { fill: #f0d99e; filter: drop-shadow(0 0 8px rgba(240,217,158,.8)); animation: scn-glow 3.6s ease-in-out infinite; }
.mark-scene .scn-floor { fill: #06100b; }
.mark-scene .scn-tile { fill: #d5b46f; opacity: .12; animation: scn-tile 2.4s ease-in-out infinite; }
.mark-scene .scn-beam { transform-box: fill-box; transform-origin: 50% 0; mix-blend-mode: screen; }
.mark-scene .scn-beam-a { animation: scn-sweep 7s ease-in-out infinite; }
.mark-scene .scn-beam-b { animation: scn-sweep 7s ease-in-out -3.5s infinite reverse; }
.mark-scene .scn-shelf { fill: rgba(213,180,111,.35); }
.mark-scene .scn-bottle { fill: rgba(240,217,158,.55); }
.mark-scene .scn-counter { fill: #0c1a14; stroke: rgba(213,180,111,.35); }
.mark-scene .scn-counter-top { fill: #d5b46f; opacity: .7; }
.mark-scene .scn-glass { fill: #f0d99e; }
.mark-scene .scn-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: scn-cheers 4s ease-in-out infinite; }
.mark-scene .scn-dancer { transform-box: fill-box; }
.mark-scene .scn-dancer { animation: scn-bob .9s ease-in-out infinite alternate; }
.mark-scene .scn-phones { fill: none; stroke: #d5b46f; stroke-width: 2.5; }
.mark-scene .scn-phones-dot { fill: #d5b46f; }
.mark-scene .scn-hand { fill: #030805; stroke: rgba(240,217,158,.28); transform-box: fill-box; transform-origin: 100% 0%; animation: scn-scratch 1.2s ease-in-out infinite alternate; }
.mark-scene .scn-deck-top { fill: #1a2a22; stroke: rgba(213,180,111,.45); }
.mark-scene .scn-platter { fill: none; stroke: #d5b46f; stroke-width: 1.2; }
.mark-scene .scn-booth { fill: #0c1a14; stroke: rgba(213,180,111,.4); }
.mark-scene .scn-eq { fill: #d5b46f; transform-box: fill-box; transform-origin: 50% 100%; animation: scn-eq 1.1s ease-in-out infinite; }
.mark-scene .scn-labels text { fill: rgba(240,217,158,.85); font: 700 12px var(--sans); letter-spacing: 2.5px; text-anchor: middle; }
@keyframes scn-glow { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes scn-tile { 0%,100% { opacity: .08; } 50% { opacity: .3; } }
@keyframes scn-sweep { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes scn-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes scn-cheers { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(4deg); } }
@keyframes scn-scratch { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes scn-eq { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
html.motion-paused .mark-scene *, html.motion-tab-hidden .mark-scene * { animation-play-state: paused !important; }
@media (prefers-reduced-motion:reduce) { .mark-scene * { animation: none !important; } }
@media (max-width: 599px) { .mark-scene .scn-labels text { font-size: 17px; letter-spacing: 1.5px; } }

/* Festscene v2 – skarpere detaljer */
.mark-scene .scn-person { fill: url(#scn-body); stroke: rgba(240,217,158,.24); stroke-width: .8; stroke-linejoin: round; }
.mark-scene .scn-backrow { opacity: .6; }
.mark-scene .scn-reflect { opacity: .22; }
.mark-scene .scn-reflect .scn-person { stroke: none; }
.mark-scene .scn-far { opacity: .8; }
.mark-scene .scn-far .scn-person { stroke: rgba(240,217,158,.16); }
.mark-scene .scn-cloth { fill: #e8e1d2; opacity: .16; }
.mark-scene .scn-candle-glow { fill: #f0d99e; opacity: .14; }
.mark-scene .scn-wall rect { fill: rgba(213,180,111,.06); }
.mark-scene .scn-lamp { animation: scn-glow 3.6s ease-in-out infinite; }
.mark-scene .scn-lamp-light { fill: #f0d99e; opacity: .18; }
.mark-scene .scn-shade { fill: #d5b46f; opacity: .85; }
.mark-scene .scn-bulb { fill: #fff6dc; filter: drop-shadow(0 0 6px rgba(240,217,158,.9)); }
.mark-scene .scn-backbar { fill: #0b1712; stroke: rgba(213,180,111,.2); }
.mark-scene .scn-bottle { fill: rgba(240,217,158,.6); }
.mark-scene .scn-bottle-low { fill: rgba(213,180,111,.4); }
.mark-scene .scn-counter { fill: url(#scn-wood); stroke: rgba(213,180,111,.35); }
.mark-scene .scn-counter-top { fill: #d5b46f; opacity: .75; }
.mark-scene .scn-glass-counter { fill: none; stroke: rgba(240,217,158,.7); stroke-width: .9; }
.mark-scene .scn-stool { fill: #06100b; stroke: rgba(213,180,111,.3); stroke-width: .8; }
.mark-scene .scn-shaker { fill: #cfd6d2; transform-box: fill-box; transform-origin: 50% 100%; animation: scn-shake .35s ease-in-out infinite alternate; }
.mark-scene .scn-phones { fill: none; stroke: #d5b46f; stroke-width: 2.2; }
.mark-scene .scn-phones-cup { fill: #d5b46f; }
.mark-scene .scn-laptop { fill: #1a2a22; stroke: rgba(213,180,111,.45); stroke-width: .8; }
.mark-scene .scn-laptop-screen { fill: #cfe3ff; opacity: .55; }
.mark-scene .scn-knob { fill: #f0d99e; }
@keyframes scn-shake { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(8deg) translateY(-3px); } }
@media (max-width: 599px) {
  .mark-scene-wrap { overflow: hidden; }
  .mark-scene { width: 150%; margin-left: -46%; }
  .mark-scene .scn-labels text { font-size: 15px; }
}