/* ============================================================
   MUNCH BROTHERS — Version 0.1
   One stylesheet. Warm, still, alive.

   The platform is LIGHT. Scandinavian gallery, golden hour,
   warm wood and moss. LYSFALD is night — darkness appears
   ONLY on the Work page, as contrast, never as the default.

   Everything is plain CSS. No build step. Edit freely.
   ============================================================ */

/* ---- 1. DESIGN TOKENS ------------------------------------- */
:root {
  /* Light palette — paper, ink, moss, amber, sky */
  --paper:        #faf6ef;   /* warm off-white page background */
  --paper-2:      #f3ece0;   /* slightly deeper panel */
  --ink:          #2b2722;   /* warm near-black for text (never #000) */
  --ink-soft:     #6f655a;   /* muted secondary text */
  --ink-faint:    #a89a87;   /* hints, captions */
  --line:         #e3d9c9;   /* hairline borders */
  --moss:         #5a6b4d;   /* forest green — quiet structural accent */
  --amber:        #c08a3e;   /* golden hour — the one warm accent */
  --amber-soft:   #e8d4b0;   /* amber tint for fills */
  --sky:          #8fa6ad;   /* blue hour — cool secondary */

  /* LYSFALD night — used ONLY inside .work-lysfald */
  --night:        #161b1f;   /* deep blue-night, never pure black */
  --night-2:      #1f262b;
  --night-ink:    #ece4d7;   /* warm paper text on night */
  --night-soft:   #9fb0ad;
  --night-line:   #33404a;
  --night-amber:  #d8a85a;

  /* Type */
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --measure: 38rem;          /* comfortable reading width */
  --gap:     clamp(1rem, 3vw, 2rem);
  --section: clamp(3.5rem, 9vw, 7rem);
  --radius:  14px;

  /* Motion — gentle, honoured by reduced-motion below */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow:    900ms;
}

/* ---- 2. RESET --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 2/9 (Mathias): sidens hop skal være ØJEBLIKKELIGE — den lange glidetur
   ned over 80.000 px føltes som lag. Målrettede animationer beder selv om
   smooth i JS, hvor det giver mening. */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* ---- 3. SHARED TYPE --------------------------------------- */
.serif { font-family: var(--serif); }
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; color: var(--ink); }

/* ---- 4. LAYOUT HELPERS ------------------------------------ */
.wrap { width: min(72rem, 92vw); margin-inline: auto; }
.narrow { width: min(var(--measure), 92vw); margin-inline: auto; }
.section { padding-block: var(--section); }

/* ---- 5. TOP BAR ------------------------------------------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1.2rem, 4vw, 2.6rem);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 0.5px solid transparent;
  transition: border-color var(--slow) var(--ease), background var(--slow) var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar .brand { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.01em; }
.topbar nav { display: flex; gap: clamp(0.9rem, 2.5vw, 1.8rem); }
.topbar nav a { font-size: 0.85rem; color: var(--ink-soft); transition: color 200ms; }
.topbar nav a:hover { color: var(--amber); }
.topbar nav a.contact { color: var(--amber); }
/* PKG FIRSTLIGHT (2026-07-11): on phones the nav used to keep only
   Contact — Explore, Works, Library and About were unreachable. The row
   now scrolls sideways instead, quietly (no hamburger: the exhibition
   does not grow software furniture). */
@media (max-width: 540px) {
  .topbar { gap: 0.9rem; }
  .topbar nav {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  }
  .topbar nav::-webkit-scrollbar { display: none; }
}

/* ---- 6. HOMEPAGE HERO ------------------------------------- */
/* Threshold Principle: the first job is to slow the heartbeat.
   Light, spacious, one calm invitation. */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  background:
    radial-gradient(ellipse 90% 70% at 50% 28%, #fffdf8 0%, var(--paper) 55%, var(--paper-2) 100%);
}
.hero-inner { max-width: 42rem; }
.hero .eyebrow { margin-bottom: 1.8rem; }
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
}
.hero p.sub {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 30rem;
  margin: 0 auto 2.6rem;
}
.hero .scroll-hint {
  margin-top: 4.5rem; font-size: 0.78rem; color: var(--ink-faint);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero .scroll-hint .chev { animation: bob 2.6s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50%{transform: translateY(5px);} }

/* ---- 7. BUTTONS ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.7rem; border-radius: 40px;
  font-size: 0.95rem; font-weight: 500;
  background: var(--amber); color: #fffaf2;
  transition: transform 200ms var(--ease), background 200ms;
}
.btn:hover { transform: translateY(-2px); background: #b07d33; }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost:hover { background: var(--paper-2); transform: translateY(-2px); }
.btn .ico { width: 1em; height: 1em; display: inline-block; }

/* ---- 8. HOMEPAGE — WORLDS STRIP --------------------------- */
.worlds { text-align: center; }
.worlds .eyebrow { margin-bottom: 1rem; }
.worlds h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 0.6rem; }
.worlds p { color: var(--ink-soft); max-width: 30rem; margin: 0 auto 2.6rem; }
.world-names {
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center;
}
.world-names span {
  font-family: var(--serif); font-size: 1.05rem;
  padding: 0.6rem 1.3rem; border: 0.5px solid var(--line);
  border-radius: 40px; color: var(--ink-soft);
  background: #fffdf8;
}

/* ---- 9. REVEAL ON SCROLL ---------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   EXPLORER  (explorer.html)
   Light, calm. Enter by feeling. Then exactly three moments.
   ============================================================ */
.explorer { padding-top: 5rem; min-height: 100svh; }
.explorer-head { text-align: center; padding: 3.5rem 1.5rem 1rem; }
.explorer-head h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 0.8rem; }
.explorer-head p { color: var(--ink-soft); max-width: 28rem; margin: 0 auto; }

/* feeling chooser */
.feelings {
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center;
  padding: 2.5rem 1.5rem;
  max-width: 44rem; margin-inline: auto;
}
.feeling {
  font-family: var(--serif); font-size: 1.05rem;
  padding: 0.75rem 1.5rem; border-radius: 40px;
  border: 0.5px solid var(--line); background: #fffdf8;
  color: var(--ink-soft);
  transition: all 240ms var(--ease);
}
.feeling:hover { border-color: var(--amber); color: var(--ink); transform: translateY(-2px); }
.feeling.active { background: var(--amber); color: #fffaf2; border-color: var(--amber); }
.feeling.dim { opacity: 0.4; }

/* the three moments — like three paintings in a quiet room */
.moments {
  max-width: 40rem; margin: 1rem auto 0; padding: 0 1.5rem 4rem;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity var(--slow) var(--ease);
}
.moments.show { opacity: 1; max-height: none; }
.moment {
  display: flex; align-items: center; gap: 1.3rem;
  padding: 1.6rem 0; border-bottom: 0.5px solid var(--line);
}
.moment:last-child { border-bottom: none; }
.moment .meta { flex: 1; }
.moment .title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; }
.moment .line { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.2rem; }
.moment .from { font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }

/* the discovery card — appears after first play */
.discovery {
  max-width: 40rem; margin: 0 auto 5rem; padding: 0 1.5rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  pointer-events: none;
}
.discovery.show { opacity: 1; transform: none; pointer-events: auto; }
.discovery-card {
  text-align: center; padding: 2.4rem 1.8rem;
  border: 0.5px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #fffdf8, var(--paper-2));
}
.discovery-card .eyebrow { margin-bottom: 0.7rem; }
.discovery-card .name { font-family: var(--serif); font-size: 1.8rem; margin-bottom: 1.4rem; }

/* ---- 10. PLAY BUTTON (shared) ----------------------------- */
.play {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fffdf8; border: 1px solid var(--line);
  color: var(--ink); transition: all 220ms var(--ease);
}
.play:hover { border-color: var(--amber); color: var(--amber); transform: scale(1.05); }
.play.is-playing { background: var(--amber); color: #fffaf2; border-color: var(--amber); }
.play.disabled { opacity: 0.35; cursor: not-allowed; }
.play svg { width: 18px; height: 18px; }

/* ============================================================
   LYSFALD WORK PAGE  (lysfald.html)
   This is NIGHT. The only dark surface in the platform.
   ============================================================ */
.work-lysfald {
  background: var(--night);
  color: var(--night-ink);
}
.work-lysfald .topbar {
  background: color-mix(in srgb, var(--night) 80%, transparent);
}
.work-lysfald .topbar .brand,
.work-lysfald .topbar nav a { color: var(--night-soft); }
.work-lysfald .topbar nav a.contact { color: var(--night-amber); }
.work-lysfald .topbar.scrolled { border-bottom-color: var(--night-line); }

/* hero image — full bleed, real photo crops via object-fit */
.work-hero {
  background-color: #12161b;   /* pre-decode paint: the room's own dark */
  position: relative; min-height: 78svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0; overflow: hidden;
}
.work-hero .photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* CROP ADJUSTMENT:
     object-fit: cover always fills the box without distortion.
     object-position decides WHICH part stays visible.
     Edit the value below to reframe the photo:
       "50% 50%"  centre (default)
       "50% 30%"  show more of the top
       "50% 70%"  show more of the bottom
     No other code needs changing. */
  object-fit: cover;
  object-position: 50% 50%;
}
.work-hero .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,17,0.15) 0%, rgba(10,14,17,0.25) 45%, rgba(12,15,18,0.92) 100%);
}
.work-hero .titleblock { position: relative; z-index: 2; padding: clamp(2rem,6vw,4rem) clamp(1.4rem,5vw,3rem); }
.work-hero .eyebrow { color: var(--night-amber); margin-bottom: 0.9rem; }
.work-hero h1, .work-hero h2 { color: #fff; font-size: clamp(2.4rem, 8vw, 5rem); letter-spacing: 0.02em; line-height: 0.98; }
.work-hero .subtitle { color: var(--night-soft); font-size: clamp(1rem,2vw,1.2rem); margin-top: 0.8rem; max-width: 30rem; }

/* story */
.work-story { padding: var(--section) 0; }
.work-story .narrow > .eyebrow { margin-bottom: 1.2rem; }
.work-story h2 { color: #fff; font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.35; margin-bottom: 1.4rem; }
.work-story p { color: var(--night-soft); font-size: 1.08rem; margin-bottom: 1.1rem; }
.work-story .draft-flag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--night-amber); border: 0.5px solid var(--night-line);
  padding: 0.25rem 0.7rem; border-radius: 30px; margin-bottom: 1.4rem;
}

/* the five cues */
.cues { padding-bottom: var(--section); }
.cues .narrow > .eyebrow { margin-bottom: 0.4rem; }
.cues .cues-intro { color: var(--night-soft); font-style: italic; font-family: var(--serif); margin-bottom: 1.6rem; }
.cue {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.3rem 0; border-bottom: 0.5px solid var(--night-line);
}
.cue:last-child { border-bottom: none; }
.cue .num { font-family: var(--serif); font-size: 0.85rem; color: var(--night-soft); width: 1.4rem; }
.cue .meta { flex: 1; }
.cue .title { font-family: var(--serif); font-size: 1.3rem; color: var(--night-ink); }
.cue .line { font-size: 0.9rem; color: var(--night-soft); margin-top: 0.15rem; }
.cue .dur { font-size: 0.8rem; color: var(--night-line); }
.cue .badge {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--night-amber); border: 0.5px solid var(--night-line);
  padding: 0.22rem 0.6rem; border-radius: 20px; white-space: nowrap;
}
/* play button recolours on night */
.work-lysfald .play { background: var(--night-2); border-color: var(--night-line); color: var(--night-ink); }
.work-lysfald .play:hover { border-color: var(--night-amber); color: var(--night-amber); }
.work-lysfald .play.is-playing { background: var(--night-amber); color: var(--night); border-color: var(--night-amber); }

/* gallery — real photos via object-fit, plus video */
.gallery { padding-bottom: var(--section); }
.gallery .grid {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
}
.gallery .cell {
  position: relative; overflow: hidden; border-radius: 8px;
  aspect-ratio: 4 / 3; background: var(--night-2);
}
.gallery .cell.wide { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.gallery .cell img {
  width: 100%; height: 100%;
  /* Same crop rule as the hero — adjust object-position per photo. */
  object-fit: cover; object-position: 50% 50%;
}

/* video block */
.work-video { padding-bottom: var(--section); }
.work-video .frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--night-2);
  border: 0.5px solid var(--night-line);
}
.work-video video { width: 100%; height: 100%; object-fit: cover; }

/* closing invitation */
.work-invite {
  text-align: center; padding: var(--section) 1.5rem;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, var(--night-2), var(--night));
  border-top: 0.5px solid var(--night-line);
}
.work-invite .small { color: var(--night-soft); font-style: italic; font-family: var(--serif); margin-bottom: 1.4rem; }
.work-invite h2 { color: #fff; font-size: clamp(1.6rem,4vw,2.4rem); max-width: 32rem; margin: 0 auto 2rem; line-height: 1.3; }
.work-invite .btn { background: var(--night-amber); color: var(--night); }
.work-invite .btn:hover { background: #e6b96a; }

/* ============================================================
   ELEGANT PLACEHOLDERS
   Shown when a real photo/video is not yet in the folder.
   Quiet, branded, never broken. They vanish automatically
   the moment the real file is dropped in (see js/app.js).
   ============================================================ */
.placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center; padding: 1rem;
  background:
    repeating-linear-gradient(45deg, #1d242a, #1d242a 14px, #20282e 14px, #20282e 28px);
  color: var(--night-soft);
}
.placeholder .ph-icon { font-size: 1.5rem; opacity: 0.5; }
.placeholder .ph-name { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--night-amber); }
.placeholder .ph-note { font-size: 0.66rem; color: var(--night-line); max-width: 16rem; }
/* light placeholder variant (homepage/explorer, if ever needed) */
.placeholder.light {
  background: repeating-linear-gradient(45deg, #f3ece0, #f3ece0 14px, #efe7d8 14px, #efe7d8 28px);
  color: var(--ink-faint);
}
.placeholder.light .ph-name { color: var(--amber); }
.placeholder.light .ph-note { color: var(--ink-faint); }

/* ---- FOOTER ----------------------------------------------- */
.footer {
  text-align: center; padding: 2.5rem 1.5rem;
  border-top: 0.5px solid var(--line);
  font-size: 0.8rem; color: var(--ink-faint);
}
.work-lysfald .footer { border-top-color: var(--night-line); color: var(--night-soft); }
.footer .mark { letter-spacing: 0.2em; }

/* ---- AUDIO STATUS NOTE (graceful disable) ----------------- */
.audio-note {
  font-size: 0.72rem; color: var(--ink-faint); font-style: italic;
}

/* ---- ACCESSIBILITY: reduced motion ------------------------ */
@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;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---- FOCUS VISIBLE (keyboard users) ----------------------- */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.work-lysfald :focus-visible { outline-color: var(--night-amber); }

/* ---- RESPONSIVE TWEAKS ------------------------------------ */
@media (max-width: 600px) {
  .gallery .grid { grid-template-columns: 1fr; }
  .gallery .cell { aspect-ratio: 16 / 10; }
  .moment { gap: 1rem; }
  .play { width: 46px; height: 46px; }
}

/* ============================================================
   VERSION 0.2 ADDITIONS
   Single-page journey · waveform · spacing fix · Who section ·
   stronger final invitation.
   ============================================================ */

/* Single-page: sections are scroll anchors. Offset so the fixed
   topbar never covers a section heading when jumping via #links. */
section[id] { scroll-margin-top: 78px; }

/* ---- FIX (item 3): audio card spacing -------------------- */
/* The .moments room now has comfortable top padding so the first
   card is never clipped under the topbar when it scrolls in, and
   the reveal no longer animates max-height (which caused the clip). */
.explorer-sec { padding-bottom: 0; }
.moments {
  max-width: 40rem;
  margin: 0.5rem auto 0;
  padding: 1.5rem 1.5rem 3rem;   /* generous top padding = no clip */
  opacity: 0;
  display: none;                  /* simpler + robust vs max-height */
  transition: opacity var(--slow) var(--ease);
}
.moments.show { display: block; opacity: 1; }
.moment {
  display: flex; align-items: center; gap: 1.3rem;
  padding: 1.5rem 0; border-bottom: 0.5px solid var(--line);
}
.moment:first-child { padding-top: 0.5rem; }
.moment .meta { flex: 1; min-width: 0; }   /* min-width:0 lets waveform shrink */

/* ---- WAVEFORM -------------------------------------------- */
.wave {
  position: relative;
  display: flex; align-items: flex-end; gap: 2px;
  height: 26px; margin-top: 0.55rem;
  width: 100%; max-width: 22rem;
  overflow: hidden;
}
.wave span {
  flex: 1 1 auto;
  background: var(--line);
  border-radius: 1px;
  min-height: 3px;
  transition: background 200ms;
}
.wave-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amber) 22%, transparent));
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: width 120ms linear;
}
/* when a card is playing, its bars warm to amber up to the fill */
.is-playing ~ .meta .wave span,
.meta .wave span { }  /* base */
[data-cue] .play.is-playing ~ .meta .wave span { background: var(--amber-soft); }

/* night variant of the waveform inside LYSFALD */
.work-lysfald .wave span { background: var(--night-line); }
.work-lysfald [data-cue] .play.is-playing ~ .meta .wave span { background: #5a4a32; }
.work-lysfald .wave-fill { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--night-amber) 35%, transparent)); mix-blend-mode: screen; }

/* If audio is missing the wave just stays flat/quiet — never breaks. */
.play.disabled ~ .meta .wave { opacity: 0.5; }

/* ---- EXPLORER SECTION (light) heading spacing ------------ */
.explorer-sec .explorer-head { text-align: center; padding: 1rem 1.5rem 0; }
.explorer-sec .explorer-head h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 0.8rem; }
.explorer-sec .explorer-head p { color: var(--ink-soft); max-width: 28rem; margin: 0 auto; }

/* ---- FINAL INVITATION (item 7) --------------------------- */
.work-invite .invite-sub {
  color: var(--night-soft); max-width: 34rem; margin: 0 auto 1.8rem;
  font-size: 1rem;
}
.invite-actions {
  display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.btn.ghost-dark {
  background: transparent; color: var(--night-ink);
  border: 1px solid var(--night-line);
}
.btn.ghost-dark:hover { background: var(--night-2); transform: translateY(-2px); }
.work-invite .invite-email { font-size: 0.85rem; color: var(--night-soft); }
.work-invite .invite-email a { color: var(--night-amber); text-decoration: underline; text-underline-offset: 3px; }

/* ---- WHO ARE WE (item 6) — warm, light ------------------- */
.who { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.who h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin-bottom: 1.3rem; }
.who p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.who-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* ---- mobile polish for v0.2 ------------------------------ */
@media (max-width: 600px) {
  .wave { max-width: 100%; height: 22px; }
  .invite-actions, .who-actions { flex-direction: column; }
  .invite-actions .btn, .who-actions .btn { width: 100%; justify-content: center; }
  section[id] { scroll-margin-top: 66px; }
}

/* ============================================================
   INTEGRATED SITE ADDITIONS (data-driven Explorer + cues)
   ============================================================ */
.cue-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:0.6rem; }
.cue-link, .cue-enter {
  font-size:0.8rem; letter-spacing:0.02em; cursor:pointer;
  border-bottom:0.5px solid transparent; transition:border-color 200ms,color 200ms;
}
.cue-link { color:var(--amber); }
.cue-link:hover { border-bottom-color:var(--amber); }
.cue-enter { color:var(--ink-soft); }
.cue-enter:hover { color:var(--ink); border-bottom-color:var(--line); }
/* inside the Explorer room (light) the enter link is muted ink; fine as-is */
.empty-note { color:var(--ink-soft); font-style:italic; text-align:center; max-width:30rem; margin:1rem auto; }
/* a touch more room under each moment now that cue-actions exist */
.moments .moment { padding:1.7rem 0; }

/* ============================================================
   V0.4 PRODUCT POLISH
   Premium player, seekable waveform, cue library, language prep,
   gentle Work endings. Visual only — pipeline untouched.
   ============================================================ */

/* ---- language toggle (visual prep, no translation) -------- */
.lang { display:inline-flex; align-items:center; gap:0.4rem; margin-left:0.5rem; }
.lang-opt {
  font-size:0.72rem; letter-spacing:0.08em; color:var(--ink-faint);
  padding:0.15rem 0.1rem; transition:color 200ms; cursor:pointer;
}
.lang-opt.active { color:var(--ink); }
.lang-opt[aria-disabled="true"] { cursor:default; }
.lang-opt:not(.active):hover { color:var(--amber); }
.lang-sep { color:var(--ink-faint); font-size:0.7rem; }
.work-lysfald .lang-opt { color:var(--night-soft); }
.work-lysfald .lang-opt.active { color:var(--night-ink); }

/* ---- PREMIUM PLAY BUTTON ---------------------------------- */
.play {
  position:relative; transition:transform 240ms var(--ease),
    background 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.play:hover { transform:scale(1.06); box-shadow:0 4px 18px rgba(192,138,62,0.18); }
.play:active { transform:scale(0.97); }
.play.is-playing { box-shadow:0 4px 20px rgba(192,138,62,0.30); }
/* soft breathing ring while playing */
.play.is-playing::after {
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--amber); opacity:0; animation:playPulse 2.4s var(--ease) infinite;
}
@keyframes playPulse { 0%{opacity:0.5; transform:scale(0.92);} 70%{opacity:0; transform:scale(1.12);} 100%{opacity:0;} }
/* loading state */
.play.is-loading svg { opacity:0; }
.play.is-loading::before {
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--amber); animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.work-lysfald .play.is-loading::before { border-color:var(--night-line); border-top-color:var(--night-amber); }
@media (prefers-reduced-motion: reduce) {
  .play.is-playing::after { animation:none; }
  .play.is-loading::before { animation-duration:1.4s; }
}

/* ---- SEEKABLE WAVEFORM ------------------------------------ */
.wave { transition:opacity 200ms; }
.wave:hover span { background:var(--amber-soft); }
.work-lysfald .wave:hover span { background:#4a3c2a; }
.wave span { transition:background 180ms, height 180ms; }
/* playhead marker */
.wave-head {
  position:absolute; top:0; bottom:0; width:1.5px; left:0;
  background:var(--amber); opacity:0; transform:translateX(-0.75px);
  transition:opacity 200ms;
}
[data-cue] .play.is-playing ~ .meta .wave .wave-head,
.wave:hover .wave-head { opacity:0.9; }
.work-lysfald .wave-head { background:var(--night-amber); }

/* ---- GENTLE WORK ENDING (continue exploring) -------------- */
.continue {
  margin-top:3rem; padding-top:2.2rem;
  border-top:0.5px solid var(--night-line); text-align:center;
}
.continue-eyebrow {
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--night-amber); margin-bottom:0.6rem;
}
.continue-line { color:var(--night-soft); margin-bottom:1.1rem; font-size:0.98rem; }
.continue-actions { display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; }
.continue-actions a {
  font-size:0.9rem; color:var(--night-ink);
  border-bottom:0.5px solid var(--night-line); padding-bottom:2px; transition:border-color 200ms;
}
.continue-actions a:hover { border-bottom-color:var(--night-amber); }

/* ---- CUE LIBRARY ------------------------------------------ */
.library { background:linear-gradient(180deg, var(--paper-2), var(--paper)); }
.library h2 { font-size:clamp(1.5rem,3.5vw,2.2rem); margin-bottom:1rem; }
.library-intro { color:var(--ink-soft); max-width:34rem; margin-bottom:1.8rem; }
.library-surprise { margin-bottom:2.6rem; }
.library-groups { display:flex; flex-direction:column; gap:0.5rem; }
.lib-group { border-bottom:0.5px solid var(--line); }
.lib-head {
  width:100%; display:flex; align-items:center; gap:1rem;
  padding:1.2rem 0.2rem; text-align:left; transition:padding-left 220ms var(--ease);
}
.lib-head:hover { padding-left:0.6rem; }
.lib-label { flex:1; font-size:1.25rem; color:var(--ink); }
.lib-count {
  font-size:0.78rem; color:var(--ink-faint); min-width:1.5rem; text-align:right;
  font-variant-numeric:tabular-nums;
}
.lib-chev { font-size:1.2rem; color:var(--amber); width:1rem; text-align:center; }
.lib-body { display:none; padding:0.4rem 0 1.4rem; }
.lib-group.open .lib-body { display:block; animation:libReveal 500ms var(--ease); }
@keyframes libReveal { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
.lib-card {
  display:flex; align-items:center; gap:1.1rem; padding:1rem 0;
  border-top:0.5px solid var(--line);
}
.lib-card:first-child { border-top:none; }
.lib-card .meta { flex:1; min-width:0; }
.lib-card .title { font-size:1.1rem; }
.lib-card .line { font-size:0.9rem; color:var(--ink-soft); }
.lib-from {
  font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; transition:color 200ms;
}
.lib-from:hover { color:var(--amber); }

@media (max-width:600px){
  .continue-actions { flex-direction:column; gap:0.8rem; }
  .lib-card { gap:0.9rem; }
  .lib-card .line { display:none; }   /* keep mobile cards tight */
}

/* ============================================================
   DEMO EDITION POLISH
   Quiet placeholders, single onward step, the one-question
   contact. Subtraction over addition.
   ============================================================ */

/* ---- quiet, intentional placeholder (no filenames shown) --- */
.placeholder {
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 40%, #20282e 0%, #1a2025 70%, #161b1f 100%);
}
.placeholder .ph-mark {
  font-family:var(--serif); font-size:1.5rem; letter-spacing:0.15em;
  color:var(--night-line); opacity:0.6;
}
/* light sections, if a placeholder ever appears there */
.who .placeholder, .contact-sec .placeholder, .explorer-sec .placeholder {
  background:radial-gradient(ellipse at 50% 40%, #f0e7d8, var(--paper-2));
}
.who .placeholder .ph-mark { color:var(--line); }

/* ---- single onward step at the end of a Work -------------- */
.onward {
  display:inline-block; margin-top:1.6rem;
  font-size:0.9rem; color:var(--night-soft);
  border-bottom:0.5px solid transparent; padding-bottom:2px;
  transition:color 220ms, border-color 220ms;
}
.onward:hover { color:var(--night-amber); border-bottom-color:var(--night-amber); }

/* ---- the one-question contact ----------------------------- */
.contact-sec { background:linear-gradient(180deg, var(--paper), var(--paper-2)); }
.contact-sec h2 { font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:1rem; }
.contact-hint { color:var(--ink-soft); max-width:32rem; margin-bottom:2rem; font-style:italic; font-family:var(--serif); }
.contact-field { display:flex; flex-direction:column; gap:0.8rem; max-width:34rem; }
.contact-field textarea, .contact-field input {
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fffdf8; border:0.5px solid var(--line); border-radius:12px;
  padding:1rem 1.1rem; width:100%; resize:vertical;
  transition:border-color 220ms, box-shadow 220ms;
}
.contact-field textarea::placeholder, .contact-field input::placeholder { color:var(--ink-faint); }
.contact-field textarea:focus, .contact-field input:focus {
  outline:none; border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(192,138,62,0.12);
}
.contact-field .btn { align-self:flex-start; margin-top:0.3rem; }
.contact-foot { margin-top:1.4rem; font-size:0.85rem; color:var(--ink-faint); max-width:32rem; }

/* ---- retire prototype-era styles (kept harmless if unused) - */
.lib-count, .continue, .continue-eyebrow, .continue-line, .continue-actions, .invite-sub, .who-actions { /* no longer emitted */ }

/* ============================================================
   V0.5 — exploration before invitation; world-type chips
   ============================================================ */

/* ---- Work ending, reordered (listen -> explore -> invite) -- */
/* Work ending: two quiet links that close the dark Work cleanly.
   Modest padding — no section-sized void (the invitation now lives
   in its own warm chapter after the Works, not inside the Work). */
.work-end { padding: 2.5rem 1.5rem 4rem; }
.end-escape { text-align:center; }
.end-links { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.end-links a {
  font-size:1rem; color:var(--night-soft);
  border-bottom:0.5px solid var(--night-line); padding-bottom:3px;
  transition:color 200ms, border-color 200ms;
}
.end-links a:hover { color:var(--night-ink); border-bottom-color:var(--night-amber); }

/* ---- world-type chips (warm, not corporate) --------------- */
.world-type { margin-bottom:0.4rem; }
.world-type-label {
  display:block; font-size:0.85rem; color:var(--ink-soft);
  margin-bottom:0.8rem; font-style:italic; font-family:var(--serif);
}
.world-chips { display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip {
  font-size:0.85rem; color:var(--ink-soft);
  background:#fffdf8; border:0.5px solid var(--line); border-radius:30px;
  padding:0.5rem 1rem; transition:all 200ms var(--ease);
}
.chip:hover { border-color:var(--amber); color:var(--ink); transform:translateY(-1px); }
.chip.selected { background:var(--amber); color:#fffaf2; border-color:var(--amber); }

@media (max-width:600px){
  .end-links { flex-direction:column; gap:0.7rem; }
}

/* ============================================================
   FINAL POLISH — emotional bridge into contact
   ============================================================ */
.bridge {
  font-size:clamp(1.1rem, 2.4vw, 1.35rem);
  color:var(--ink-soft); font-style:italic;
  margin-bottom:1.4rem; letter-spacing:0.01em;
}
.contact-foot { margin-top:1.4rem; font-size:0.85rem; color:var(--ink-faint); }

/* ============================================================
   FINAL VISUAL PASS
   Breathing room, warm signature surprise, portrait,
   exploration/contact as two emotional chapters.
   ============================================================ */

/* 1 · Hero holds its own scene. It fills the viewport and the
   Explorer begins a clear margin below, so a single scroll still
   feels like being inside the Hero — the Explorer does not peek. */
.hero { min-height: 100svh; padding-bottom: 8rem; }
.explorer-sec { padding-top: calc(var(--section) + 6rem); }
.explorer-head { margin-bottom:1rem; }

/* 4 · exploration stays dark; conversation becomes warm sand.
   The Who + Contact chapters sit on a deeper sand than the page,
   so they read as a separate, warmer emotional chapter. */
.who { background:linear-gradient(180deg, var(--paper), #f0e6d6); }
.contact-sec { background:linear-gradient(180deg, #f0e6d6, #ece0cd); }

/* 5 · "Play something unexpected" — the signature action.
   Not bigger. Warmer. A soft amber wash and a gentle invitation
   to the eye, without shouting. */
#surprise {
  background:linear-gradient(135deg, #f7ecd6, #efdcbb);
  border:0.5px solid var(--amber-soft);
  color:#8a6526; font-weight:500;
  box-shadow:0 2px 16px rgba(192,138,62,0.12);
  transition:transform 240ms var(--ease), box-shadow 240ms var(--ease), background 240ms;
}
#surprise:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(192,138,62,0.22);
  background:linear-gradient(135deg, #f9f0de, #f0dcb8);
}

/* 6 · quiet portrait in Who — human, not promotional */
.who-portrait {
  position:relative; width:100%; max-width:30rem;
  aspect-ratio:3 / 2; margin:0 0 2.2rem;
  border-radius:var(--radius); overflow:hidden;
  background:var(--paper-2);
}
.who-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.who-portrait .placeholder { position:absolute; inset:0; }
.who .placeholder { background:radial-gradient(ellipse at 50% 40%, #efe7d8, var(--paper-2)); }
.who .placeholder .ph-mark { color:var(--line); }

/* ============================================================
   USABILITY FIXES (post-test) — website only
   ============================================================ */

/* 1 · Hero must hold and breathe before the Explorer.
   The hero fills the viewport and centres its content with real
   air below the line, and the Explorer starts well clear of the
   fold so the page never feels like it jumps. */
.hero {
  min-height: 100svh;
  padding-bottom: 9rem;          /* more pause after the opening line */
}
.hero .scroll-hint { margin-top: 5.5rem; }   /* line is felt before the cue to scroll */
.explorer-sec {
  padding-top: calc(var(--section) + 5rem);  /* clear gap; Explorer never peeks at the fold */
}

/* 5 · Conversation is a warm chapter, not part of the dark Work.
   The invitation lives on warm sand, clearly separated from the
   night Work above. Given more visual weight to anchor the chapter
   break after copy was removed elsewhere. */
.invite-chapter {
  background: linear-gradient(180deg, #f0e6d6, #ece0cd);
  text-align: center;
  padding: calc(var(--section) + 1.5rem) 1.5rem;
}
.invite-chapter .small { color: var(--ink-soft); font-style: italic; font-family: var(--serif); margin-bottom: 1.2rem; font-size: 1.05rem; }
.invite-chapter h2 { color: var(--ink); font-size: clamp(1.9rem,4.5vw,2.8rem); max-width: 34rem; margin: 0 auto 2.2rem; line-height: 1.25; }
.invite-chapter .btn { background: var(--amber); color: #fffaf2; padding: 1rem 2rem; font-size: 1rem; }
.invite-chapter .btn:hover { background: #b07d33; }

/* ============================================================
   RESTORE v1 — warm conversation chapter after EVERY Work
   with three equal choices. Replaces the bare two-link ending.
   ============================================================ */

/* the warm sand landing that follows each dark Work */
.work-conversation {
  background: linear-gradient(180deg, #f0e6d6, #ece0cd);
  text-align: center;
  padding: calc(var(--section) - 0.5rem) 1.5rem;
}
.work-conversation .conv-small {
  color: var(--ink-soft); font-style: italic; font-family: var(--serif);
  font-size: 1.05rem; margin-bottom: 1rem;
}
.work-conversation h2 {
  color: var(--ink); font-size: clamp(1.6rem, 4vw, 2.3rem);
  max-width: 32rem; margin: 0 auto 2.6rem; line-height: 1.3;
}

/* three equal choices — none dominates */
.conv-choices {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; max-width: 56rem; margin: 0 auto;
}
.conv-choice {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.6rem 1.3rem; border-radius: var(--radius);
  background: #fffdf8; border: 0.5px solid var(--line);
  text-align: center; min-height: 8rem; justify-content: center;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms;
}
.conv-choice:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(192,138,62,0.15);
  border-color: var(--amber);
}
.conv-title {
  font-family: var(--serif); font-size: 1.12rem; color: var(--ink); line-height: 1.3;
}
.conv-sub {
  font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-faint);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .conv-choices { grid-template-columns: 1fr; max-width: 26rem; }
  .conv-choice { min-height: 0; padding: 1.3rem; }
}

/* ============================================================
   0003_26_07_02_DiscoveryAndSharing — sharing UI only.
   Copy action, quiet copied confirmation, shared-cue arrival
   glow + context note. Nothing else. Rollback: delete block.
   ============================================================ */

/* the quiet copy action, same visual language as .cue-link */
.cue-copy {
  font-size: 0.8rem; letter-spacing: 0.02em; cursor: pointer;
  color: var(--ink-soft);
  border-bottom: 0.5px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.cue-copy:hover { color: var(--amber); border-bottom-color: var(--amber); }
.cue-copy.copied { color: var(--amber); }
.work-lysfald .cue-copy { color: var(--night-soft); }
.work-lysfald .cue-copy:hover,
.work-lysfald .cue-copy.copied { color: var(--night-amber); border-bottom-color: var(--night-amber); }
.work-lysfald .cue-link { color: var(--night-amber); }
.work-lysfald .cue-link:hover { border-bottom-color: var(--night-amber); }

/* shared-cue arrival: soft warm glow that breathes in and fades */
[data-cue] { scroll-margin-top: 90px; }
.cue-focus { --glow: rgba(192,138,62,0.13); animation: cueGlow 2.8s var(--ease); border-radius: 10px; }
.work-lysfald .cue-focus { --glow: rgba(216,168,90,0.12); }
@keyframes cueGlow {
  0%   { background: transparent; box-shadow: none; }
  16%  { background: var(--glow); box-shadow: 0 0 0 10px var(--glow); }
  74%  { background: var(--glow); box-shadow: 0 0 0 10px var(--glow); }
  100% { background: transparent; box-shadow: none; }
}

/* context note above the shared cue — appears with the glow, leaves with it */
.cue-shared-note {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.4rem;
  animation: sharedNote 3.4s var(--ease) forwards;
}
.work-lysfald .cue-shared-note { color: var(--night-amber); }
@keyframes sharedNote {
  0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cue-focus { animation: none; background: var(--glow); }
  .cue-shared-note { animation: none; opacity: 1; }
}

/* ============================================================
   0004_26_07_03_WaveformUpgrade — waveform rendering only.
   Real-peak waves are denser (96 bars): thinner gaps so they
   read as music, same element, same hit area, same behaviour.
   Rollback: delete this block.
   ============================================================ */
.wave.real { gap: 1px; height: 30px; }
.wave.real span { border-radius: 0.5px; min-height: 2px; }
@media (max-width: 600px) { .wave.real { height: 24px; } }

/* ============================================================
   0006_26_07_03_ProjectInfoAndCollaborators
   The project chapter inside each Work (info card, highlights,
   collaborators, quote) + the site-wide "Selected collaborations"
   strip. Editorial, warm, quiet — never corporate, never a logo
   wall. Everything vanishes when its data is absent.
   Rollback: delete this block.
   ============================================================ */

.project-chapter { padding-bottom: var(--section); }
.project-chapter .narrow > * + * { margin-top: 2.6rem; }

/* -- info card: quiet night-theme panel -- */
.proj-card {
  background: var(--night-2);
  border: 0.5px solid var(--night-line);
  border-radius: var(--radius);
  padding: 1.8rem clamp(1.3rem, 4vw, 2.2rem);
}
.proj-card .eyebrow { color: var(--night-amber); margin-bottom: 1.1rem; }
.proj-info { display: grid; grid-template-columns: 1fr; gap: 0.55rem; margin: 0; }
.proj-row { display: flex; gap: 1.2rem; align-items: baseline; }
.proj-row dt {
  flex: 0 0 7.5rem;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--night-soft);
}
.proj-row dd { margin: 0; color: var(--night-ink); font-size: 0.98rem; }

/* -- highlights: a subtle line-list beneath the facts -- */
.proj-highlights {
  list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 0 0;
  border-top: 0.5px solid var(--night-line);
}
.proj-highlights li {
  color: var(--night-soft); font-size: 0.92rem; padding: 0.25rem 0 0.25rem 1.1rem;
  position: relative;
}
.proj-highlights li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 0.35rem; height: 1px; background: var(--night-amber);
}

/* -- collaborators: square, spacious, softly muted; hover = colour -- */
.proj-collabs .eyebrow { color: var(--night-amber); margin-bottom: 1rem; }
.logo-row { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2rem); align-items: center; }
.logo-tile {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 12px;
  background: var(--night-2); border: 0.5px solid var(--night-line);
  padding: 14px;
}
.logo-tile img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  filter: grayscale(1) brightness(1.05); opacity: 0.55;
  transition: filter 300ms var(--ease), opacity 300ms var(--ease);
}
.logo-link { display: inline-flex; border-radius: 12px; }
.logo-tile:hover img, .logo-link:hover img { filter: none; opacity: 1; }

/* -- quote: a quiet serif closing note -- */
.proj-quote { margin: 0; text-align: center; }
.proj-quote blockquote {
  margin: 0; color: var(--night-ink);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-style: italic; line-height: 1.5;
  max-width: 34rem; margin-inline: auto;
}
.proj-quote figcaption { margin-top: 0.7rem; font-size: 0.82rem; color: var(--night-soft); }

/* -- site-wide strip: understated, light, near the bottom -- */
.trusted {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 0.5px solid var(--line);
  background: var(--paper-2);
  text-align: center;
}
.trusted .eyebrow { margin-bottom: 1.4rem; }
.trusted .logo-row { justify-content: center; }
.trusted .logo-tile { background: #fffdf8; border-color: var(--line); }
.trusted .logo-tile img { filter: grayscale(1); opacity: 0.5; }
.trusted .logo-tile:hover img, .trusted .logo-link:hover img { filter: none; opacity: 1; }

@media (max-width: 600px) {
  .proj-row { flex-direction: column; gap: 0.15rem; }
  .proj-row dt { flex: none; }
  .logo-tile { width: 70px; height: 70px; padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-tile img { transition: none; }
}

/* ============================================================
   0006 refinement — quieter project context (tester-ruled).
   White logo tiles, slimmer card, "Production details" popover
   (a floating museum card: no modal, nothing dims). Quote no
   longer rendered. Rollback: delete this block.
   ============================================================ */

/* logo tiles: white/paper, padded, hairline, premium */
.logo-tile {
  background: #fffdf8;
  border: 0.5px solid var(--night-line);
  padding: 16px;
  box-shadow: 0 2px 10px rgba(22,27,31,0.25);
}
.logo-tile img { filter: grayscale(1); opacity: 0.6; transition: filter 320ms var(--ease), opacity 320ms var(--ease); }
.trusted .logo-tile { border-color: var(--line); box-shadow: 0 1px 6px rgba(43,39,34,0.06); }

/* slimmer card: no eyebrow, key facts only */
.proj-card { padding: 1.5rem clamp(1.3rem, 4vw, 2rem); }
.proj-card .proj-info { gap: 0.5rem; }

/* the one quiet action */
.proj-more { position: relative; margin-top: 1.1rem; }
.proj-card .proj-info + .proj-more { padding-top: 1.1rem; border-top: 0.5px solid var(--night-line); }
.proj-more-trigger {
  font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--night-amber); cursor: pointer;          /* golden at rest — readable, intentional */
  border-bottom: 0.5px solid rgba(216, 168, 90, 0.45);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.proj-more-trigger:hover,
.proj-more-trigger[aria-expanded="true"] { color: #ecd3a4; border-bottom-color: #ecd3a4; }

/* the floating museum card */
.proj-popover {
  position: absolute; left: 0; bottom: calc(100% + 0.7rem);
  min-width: 16rem; max-width: min(24rem, 86vw);
  background: var(--night-2);
  border: 0.5px solid var(--night-line);
  border-radius: calc(var(--radius) - 4px);
  padding: 1.2rem 1.3rem;
  box-shadow: 0 14px 40px rgba(10,14,17,0.5);
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  z-index: 30;
}
.proj-popover.open { opacity: 1; transform: none; }
.proj-popover .proj-info { gap: 0.45rem; }
.proj-popover .proj-row dt { flex-basis: 6.5rem; }
.proj-popover .proj-highlights { margin-top: 1rem; padding-top: 0.9rem; }

@media (max-width: 600px) {
  .proj-popover { left: 0; right: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proj-popover { transition: none; transform: none; }
  .logo-tile img { transition: none; }
}

/* ============================================================
   0007_26_07_03_ProjectFlowAndImageLightbox
   Lightbox, header-row project card, logo pop, measured spacing
   trims. Cinematic and quiet — never flashy. Audio never pauses.
   Rollback: delete this block.
   ============================================================ */

/* -- lightbox: near-black scrim, image centre stage -- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 15, 0.92);
  opacity: 0; transition: opacity 280ms var(--ease);
}
.lightbox.open { opacity: 1; }
html.lb-lock, html.lb-lock body { overflow: hidden; }
.lb-img {
  max-width: min(92vw, 1600px); max-height: 88vh;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lb-close, .lb-prev, .lb-next {
  position: absolute; color: var(--night-soft);
  background: transparent; border: 0; cursor: pointer;
  font-size: 2rem; line-height: 1; padding: 0.6rem 0.9rem;
  transition: color 200ms;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: #fff; }
.lb-close { top: 1rem; right: 1.2rem; font-size: 2.2rem; }
.lb-prev { left: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lb-next { right: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.gallery .cell[data-lightbox] { cursor: pointer; }
.gallery .cell[data-lightbox]:focus-visible { outline: 2px solid var(--night-amber); outline-offset: 3px; }

/* -- project card: fields left, quiet action right, one line -- */
.proj-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.proj-head .proj-info { flex: 1 1 auto; }
.proj-head .proj-more { flex: 0 0 auto; margin-top: 0; align-self: baseline; }
.proj-card .proj-info + .proj-more { padding-top: 0; border-top: none; }
.proj-popover { left: auto; right: 0; }

/* -- logo hover: colour + a slight, elegant pop -- */
.logo-tile { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.logo-tile:hover, .logo-link:hover .logo-tile {
  transform: scale(1.045);
  box-shadow: 0 6px 18px rgba(22,27,31,0.35);
}
.trusted .logo-tile:hover, .trusted .logo-link:hover .logo-tile {
  box-shadow: 0 4px 14px rgba(43,39,34,0.12);
}

/* -- measured spacing trims (tighter, never cramped) -- */
.work-hero .subtitle { margin-top: 0.55rem; }
.work-hero .titleblock { padding-bottom: clamp(1.6rem, 4.5vw, 3rem); }
.work-story { padding: calc(var(--section) * 0.72) 0; }
.cues { padding-bottom: calc(var(--section) * 0.7); }
.gallery { padding-bottom: calc(var(--section) * 0.7); }
.project-chapter { padding-bottom: calc(var(--section) * 0.8); }
.project-chapter .narrow > * + * { margin-top: 2.1rem; }

@media (max-width: 600px) {
  .lb-prev { left: 0.1rem; } .lb-next { right: 0.1rem; }
  .proj-head { flex-direction: column; gap: 0.9rem; }
  .proj-popover { left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  .logo-tile { transition: none; }
  .logo-tile:hover, .logo-link:hover .logo-tile { transform: none; }
}

/* ============================================================
   0007 refinement (tester-ruled): lightbox close-bug fix,
   spacing rebalance, larger logo tiles, credit slot.
   Rollback: delete this block.
   ============================================================ */

/* THE BUG FIX: .lightbox's display:flex was overriding [hidden],
   leaving an invisible full-page overlay that swallowed clicks. */
.lightbox[hidden] { display: none !important; }
.lightbox:not(.open) { pointer-events: none; }
.lightbox.open { pointer-events: auto; }

/* desktop nicety: the photo advances on click when several exist */
.lightbox.lb-multi .lb-img { cursor: pointer; }

/* discreet photo credit — invisible until credit data exists */
.lb-credit {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--night-soft);
}

/* subtitle: quiet editorial voice (serif italic — one line to revert),
   with balanced air above and below */
.work-hero .subtitle {
  font-family: var(--serif); font-style: italic;
  margin-top: 0.7rem;
}
.work-hero .titleblock { padding-bottom: clamp(1.8rem, 5vw, 3.4rem); }
.work-story { padding: calc(var(--section) * 0.62) 0; }

/* film -> project info: the real gap was .work-video's untouched
   full-section padding. Closer now, still breathing. */
.work-video { padding-bottom: calc(var(--section) * 0.42); }

/* logos: modestly larger (~1.43x), everything else unchanged */
.logo-tile { width: 120px; height: 120px; padding: 18px; }
@media (max-width: 600px) {
  .logo-tile { width: 92px; height: 92px; padding: 14px; }
}

/* ============================================================
   0007 refinement 2 (tester-ruled): photo credits + hero balance.
   Credits render ONLY when workbook data exists. Rollback: delete.
   ============================================================ */

/* thumbnail credit: quiet corner line on a whisper of scrim */
.gallery .cell { position: relative; }
.cell-credit {
  position: absolute; right: 0.6rem; bottom: 0.5rem;
  font-size: 0.66rem; letter-spacing: 0.05em;
  color: rgba(236,228,215,0.85);
  text-shadow: 0 1px 6px rgba(10,13,15,0.7);
  background: rgba(10,13,15,0.28);
  padding: 0.15rem 0.45rem; border-radius: 4px;
  pointer-events: none;
}

/* lightbox credit: slightly more present against the scrim */
.lb-credit { background: rgba(10,13,15,0.5); padding: 0.25rem 0.7rem; border-radius: 5px; }

/* hero balance: graphic/title -> subtitle air approaches
   subtitle -> first cue (midpoint; section stays composed) */
.work-hero .subtitle { margin-top: 0.95rem; }

/* ============================================================
   0007 repair (tester-ruled): the italic belongs to the PUBLIC
   STORY paragraph, not the Work subtitle. Subtitle reverts fully
   to baseline; story becomes the editorial voice with symmetric
   air above and below. CSS only. Rollback: delete this block.
   ============================================================ */

/* subtitle: back to baseline — normal style, original family & spacing */
.work-hero .subtitle {
  font-family: var(--sans);
  font-style: normal;
  margin-top: 0.8rem;
}

/* the story paragraph: serif italic, editorial, comfortable measure */
.work-story p {
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.8;
}

/* symmetric frame: graphic -> paragraph air = paragraph -> cue block air */
.work-story { padding: calc(var(--section) * 0.55) 0; }

/* ============================================================
   0007 final visual repair (tester-approved: Option A refined).
   The story paragraph becomes an editorial LEAD: short amber
   hairline above, slightly larger serif italic, generous air
   after the image, tighter binding to the music it introduces —
   the asymmetry is the design. Plus readable, still-subtle
   photo credits. CSS only. Rollback: delete this block.
   ============================================================ */

/* editorial lead */
.work-story { padding: calc(var(--section) * 0.7) 0 calc(var(--section) * 0.4); }
.work-story .narrow { position: relative; }
.work-story .narrow::before {
  content: ""; display: block;
  width: 2rem; height: 1px; background: var(--night-amber);
  margin-bottom: 1.3rem;
}
.work-story p {
  font-size: 1.16rem;
  line-height: 1.75;
}

/* thumbnail credit: centered, readable, still subordinate */
.cell-credit {
  right: auto; left: 50%; transform: translateX(-50%);
  bottom: 0.55rem;
  font-size: 0.72rem;
  color: rgba(244,238,228,0.95);
  background: rgba(10,13,15,0.45);
  padding: 0.22rem 0.7rem;
  max-width: 86%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* lightbox credit: instantly readable against any photo */
.lb-credit {
  background: rgba(10,13,15,0.65);
  padding: 0.3rem 0.85rem;
  color: rgba(244,238,228,0.95);
}

/* ============================================================
   0008_26_07_03_GuidedDiscovery
   One engine, two entry points: the quiet "Explore a specific
   direction" panel below the Explorer, and "Cue details" in the
   Library (reusing the Production Details component). Editorial,
   curated, museum-like — never a search engine.
   Rollback: delete this block.
   ============================================================ */

/* the second, equally quiet entry point */
.discover { text-align: center; margin-top: 1.6rem; }
.discover-open {
  font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--ink-soft); cursor: pointer;
  border-bottom: 0.5px solid var(--line); padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.discover-open:hover,
.discover-open[aria-expanded="true"] { color: var(--amber); border-bottom-color: var(--amber); }

/* the panel unfolds gently — no modal, nothing moves above it */
.discover-panel {
  max-width: 46rem; margin: 1.4rem auto 0; text-align: left;
  padding: 1.6rem clamp(1.2rem, 4vw, 2rem);
  border: 0.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.discover-panel.show { opacity: 1; transform: none; }

.chip-group + .chip-group { margin-top: 1.1rem; }
.chip-title {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.5rem;
  font-weight: 700;   /* rev10 (founders' dom): overskrifterne står i FED */
}
.chip-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.45rem 0.5rem; align-items: stretch; }  /* §7: 4 pr. række */
.chip-row .chip { width: 100%; justify-content: center; text-align: center; }
.chip {
  font-size: 0.82rem; color: var(--ink-soft);
  padding: 0.32rem 0.85rem; border-radius: 999px;
  border: 0.5px solid var(--line); background: transparent;
  cursor: pointer; transition: color 200ms, border-color 200ms, background 200ms;
}
.chip:hover { border-color: var(--amber); color: var(--ink); }
.chip.on { background: var(--amber-soft); border-color: var(--amber); color: var(--ink); }

.bpm-row label { font-size: 0.8rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.4rem; }
.bpm-row input {
  width: 4.2rem; padding: 0.25rem 0.4rem; font: inherit; font-size: 0.82rem;
  border: 0.5px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink);
}

.discover-more {
  margin-top: 1.2rem; font-size: 0.8rem; color: var(--ink-soft);
  cursor: pointer; border-bottom: 0.5px solid var(--line); padding-bottom: 1px;
}
.discover-more:hover, .discover-more[aria-expanded="true"] { color: var(--amber); border-bottom-color: var(--amber); }
.discover-more-groups { margin-top: 1.1rem; }

.discover-foot { margin-top: 1.4rem; }
.discover-summary { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 0.98rem; }
.discover-actions { display: flex; gap: 1.2rem; align-items: baseline; margin-top: 0.8rem; }
.discover-reset {
  font-size: 0.8rem; color: var(--ink-soft); cursor: pointer;
  border-bottom: 0.5px solid transparent;
}
.discover-reset:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* feelings with nothing in the current direction rest quietly */
.feeling.pool-empty { opacity: 0.32; }

/* Cue details in the Library: the same museum card, light variant */
.lib-card .cue-actions { position: relative; }
.lib-card .proj-more { margin-top: 0; display: inline-block; }
.lib-card .proj-more-trigger {
  font-size: 0.8rem; letter-spacing: 0.02em;
  color: var(--ink-soft); border-bottom: 0.5px solid transparent;
}
.lib-card .proj-more-trigger:hover,
.lib-card .proj-more-trigger[aria-expanded="true"] { color: var(--amber); border-bottom-color: var(--amber); }
.lib-card .proj-popover {
  position: absolute; left: 0; right: auto; bottom: calc(100% + 0.6rem);
  background: var(--paper); border-color: var(--line);
  box-shadow: 0 14px 40px rgba(43,39,34,0.18);
}
.lib-card .proj-popover .proj-row dt { color: var(--ink-soft); }
.lib-card .proj-popover .proj-row dd { color: var(--ink); }

@media (max-width: 600px) {
  .discover-panel { padding: 1.2rem 1rem; }
  .lib-card .proj-popover { left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .discover-panel { transition: none; transform: none; }
}

/* 0008 refinement (ruled): the two entry points sit together —
   the panel unfolds beneath "Play something unexpected". */
.library-surprise .discover { margin-top: 0.9rem; }
.library-surprise .discover-panel { text-align: left; }

/* ============================================================
   0008 final refinement (tester-ruled): the two entry points as
   one row of equal quiet actions; Keywords/Genre/BPM only; the
   answer appears below the panel; About this cue reads as a
   real action link. Rollback: delete this block.
   ============================================================ */

/* equal pair: "Play something unexpected" · "Search for something specific" */
.library-surprise {
  display: flex; gap: 0.9rem; justify-content: center;
  flex-wrap: wrap; align-items: center;
}
.discover-open { border-bottom: none; }   /* it is a .btn.ghost now, like its sibling */

/* the panel and its answer room live beneath the pair */
.discover { margin-top: 1.3rem; text-align: left; }
.discover-panel { margin: 0 auto; }
.discover-moments { max-width: 46rem; margin: 0 auto; padding-top: 0.4rem; }
.discover-moments.show { padding-top: 1.4rem; }

/* About this cue: a clear, subtle action link beside Copy link,
   sitting naturally between the player area and the project reference */
.lib-card .cue-actions { align-items: baseline; gap: 1.1rem; }
.lib-card .proj-more-trigger {
  font-size: 0.8rem; letter-spacing: 0.02em;
  color: var(--ink-soft);
  border-bottom: 0.5px solid var(--line);
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.lib-card .proj-more-trigger:hover,
.lib-card .proj-more-trigger[aria-expanded="true"] {
  color: var(--amber); border-bottom-color: var(--amber);
}

/* ============================================================
   0008 final repair (tester-ruled): the deliberate button pair,
   Genre→Keywords→BPM order (JS), compact audition cards.
   Rollback: delete this block.
   ============================================================ */

/* the pair: identical .btn.ghost geometry; the search action carries a
   quiet amber accent so the two read as "explore / search" — equal weight */
.library-surprise .discover-open {
  font-size: 0.95rem;                 /* neutralise earlier text-link rules */
  letter-spacing: normal;
  padding: 0.85rem 1.7rem;
  color: var(--amber);
  border: 1px solid var(--amber-soft);
  border-bottom: 1px solid var(--amber-soft);
}
.library-surprise .discover-open:hover,
.library-surprise .discover-open[aria-expanded="true"] {
  background: var(--amber-soft); color: var(--ink);
  border-color: var(--amber);
}

/* compact audition cards: a quieter, smaller sibling of the moment card */
.discover-moments { max-width: 46rem; }
.compact-cue {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.8rem 0;
  border-bottom: 0.5px solid var(--line);
}
.compact-cue:last-of-type { border-bottom: none; }
.compact-cue .play { flex: 0 0 auto; transform: scale(0.82); transform-origin: top left; }
.compact-cue .meta { flex: 1 1 auto; min-width: 0; }
.compact-cue .c-line { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.compact-cue .title { font-size: 1rem; }
.compact-cue .c-from {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.compact-cue .wave { height: 18px; max-width: 18rem; margin-top: 0.35rem; }
.compact-cue .cue-actions { margin-top: 0.35rem; gap: 1rem; align-items: baseline; }
.compact-cue .proj-more { display: inline-block; margin-top: 0; }
.compact-cue .proj-more-trigger {
  font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink-soft);
  border-bottom: 0.5px solid var(--line); padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.compact-cue .proj-more-trigger:hover,
.compact-cue .proj-more-trigger[aria-expanded="true"] { color: var(--amber); border-bottom-color: var(--amber); }
.compact-cue .cue-actions { position: relative; }
.compact-cue .proj-popover {
  position: absolute; left: 0; right: auto; bottom: calc(100% + 0.6rem);
  background: var(--paper); border-color: var(--line);
  box-shadow: 0 14px 40px rgba(43,39,34,0.18);
}
.compact-note {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: 0.9rem; padding-top: 0.9rem;
}
@media (max-width: 600px) {
  .compact-cue .proj-popover { left: 0; right: 0; }
  .compact-cue .wave { max-width: none; }
}


/* ============================================================
   0008 final usability repair (tester-ruled): the popover-variant
   display:block had overridden [hidden] — the same bug family as
   the 0007 lightbox — leaving invisible click-swallowing boxes
   over Library/compact cue rows. Global guard, same proven fix.
   Rollback: delete this block (and see CHANGELOG).
   ============================================================ */
.proj-popover[hidden] { display: none !important; }
.proj-popover:not(.open) { pointer-events: none; }
.proj-popover.open { pointer-events: auto; }

/* ============================================================
   0008 final visual refinement (tester-approved): SEARCH MODE.
   One coherent charcoal zone — existing night tokens only — for
   the panel + matching cue cards. The practical room beside the
   emotional Explorer. Warm, editorial, never app-like.
   Fallback ruling on file: deeper-sand variant by swapping the
   surface variables in this block. Rollback: delete this block.
   ============================================================ */

.discover.search-mode {
  background: var(--night-2);
  border: 0.5px solid var(--night-line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  max-width: 48rem; margin-left: auto; margin-right: auto;
}

/* the panel dissolves into the zone: no double frame */
.search-mode .discover-panel {
  background: transparent; border: none; padding: 0; max-width: none;
}

/* internal seam between panel and the answer room */
.search-mode .discover-moments {
  border-top: 0.5px solid var(--night-line);
  margin-top: 1.3rem; max-width: none;
}
.search-mode .discover-moments.show { padding-top: 1.1rem; }

/* night variants of the search controls (colour swaps only) */
.search-mode .chip-title { color: var(--night-soft); }
.search-mode .chip { color: var(--night-soft); border-color: var(--night-line); }
.search-mode .chip:hover { color: var(--night-ink); border-color: var(--night-amber); }
.search-mode .chip.on {
  background: rgba(216,168,90,0.16);
  border-color: var(--night-amber); color: var(--night-ink);
}
.search-mode .bpm-row label { color: var(--night-soft); }
.search-mode .bpm-row input { border-color: var(--night-line); color: var(--night-ink); }
.search-mode .discover-summary { color: var(--night-soft); }
.search-mode .discover-reset { color: var(--night-soft); }
.search-mode .discover-reset:hover { color: var(--night-amber); border-bottom-color: var(--night-amber); }

/* compact cards, at home in the dark room */
.search-mode .compact-cue { border-bottom-color: var(--night-line); }
.search-mode .compact-cue .title { color: var(--night-ink); }
.search-mode .compact-cue .c-from { color: var(--night-soft); }
.search-mode .compact-cue .cue-copy { color: var(--night-soft); }
.search-mode .compact-cue .cue-copy:hover,
.search-mode .compact-cue .cue-copy.copied { color: var(--night-amber); border-bottom-color: var(--night-amber); }
.search-mode .compact-cue .proj-more-trigger { color: var(--night-soft); border-bottom-color: var(--night-line); }
.search-mode .compact-cue .proj-more-trigger:hover,
.search-mode .compact-cue .proj-more-trigger[aria-expanded="true"] { color: var(--night-amber); border-bottom-color: var(--night-amber); }
.search-mode .compact-cue .cue-enter { color: var(--night-amber); }
.search-mode .compact-note { color: var(--night-soft); }
/* the white/paper About-this-cue popover pops correctly against the dark —
   left as-is on purpose (echoes the logo tiles) */

@media (max-width: 600px) {
  .discover.search-mode { padding: 1rem 0.9rem; }
}

/* ============================================================
   0008 final polish (tester-ruled): the search door wears the
   room's colours from the start; card popovers size naturally.
   Rollback: delete this block.
   ============================================================ */

/* the charcoal door — same geometry as its sand companion, equal not louder */
.library-surprise .discover-open {
  background: var(--night-2);
  color: var(--night-amber);
  border: 1px solid var(--night-line);
}
.library-surprise .discover-open:hover,
.library-surprise .discover-open[aria-expanded="true"] {
  background: #262e34;                 /* one step warmer than night-2 */
  color: var(--night-amber);
  border-color: var(--night-amber);
  transform: translateY(-2px);
}

/* card popovers: natural content sizing — the containing block (the narrow
   action row) no longer caps their width; ceiling stays at 24rem/88vw */
.lib-card .proj-popover,
.compact-cue .proj-popover {
  width: max-content;
  max-width: min(24rem, 88vw);
}
@media (max-width: 600px) {
  .lib-card .proj-popover,
  .compact-cue .proj-popover { width: auto; }   /* full-width variant rules */
}

/* ============================================================
   0009 FirstSoundAndFarewells — additive layer
   The entrance made patient, the first sound made composed, every
   world given its own night, and every ending authored. Deleting
   this block (and the matching app.js hooks) returns the sheet to
   the frozen 0008 state.
   ============================================================ */

/* ---- Hero patience -----------------------------------------
   Nothing moves in the first two seconds; the headline is simply
   there. The button settles in as the page's first and only
   self-initiated motion (opacity only, so its hover lift stays
   alive); the scroll hint follows, smaller, a beat later. */
.hero .btn {
  opacity: 0;
  animation: settle-in 1.6s var(--ease) 2.2s forwards;
}
.hero .scroll-hint {
  opacity: 0;
  animation: settle-in 1.8s var(--ease) 3.4s forwards;
}
@keyframes settle-in { to { opacity: 1; } }

/* ---- The held breath, then one-two-three -------------------- */
#moments.breath { min-height: 4rem; }
#moments.show .moment {
  opacity: 0;
  animation: moment-in 0.7s var(--ease) forwards;
}
#moments.show .moment:nth-of-type(1) { animation-delay: 0.05s; }
#moments.show .moment:nth-of-type(2) { animation-delay: 0.28s; }
#moments.show .moment:nth-of-type(3) { animation-delay: 0.5s; }
@keyframes moment-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Every world its own night -------------------------------
   One workbook cell per Work (Night Tone). The night was always a
   set of variables; each tone simply retunes them. Blank = the
   shared night, unchanged. Tones: forest / moss / ember. */
.work-lysfald[data-night="forest"] {
  --night:       #0d141d;   /* blue-black Danish forest, August */
  --night-2:     #131d29;
  --night-soft:  #94a9b4;
  --night-line:  #263442;
  --night-amber: #cfa45e;
}
.work-lysfald[data-night="moss"] {
  --night:       #11170f;   /* deep moss, a green-dark meadow */
  --night-2:     #182013;
  --night-soft:  #a4b294;
  --night-line:  #2c3826;
  --night-amber: #d3b064;
}
.work-lysfald[data-night="ember"] {
  --night:       #1a110b;   /* warm and close, a fire burning low */
  --night-2:     #241811;
  --night-soft:  #bfa793;
  --night-line:  #403023;
  --night-amber: #e0a45c;
}

/* ---- Dusk and dawn --------------------------------------------
   The crossing into a world is a gradual sunset; leaving it, a
   dawn. Pure gradients first (every browser ever); where the 2026
   platform offers scroll-driven animation, the sky deepens under
   the visitor's own scroll. The instant change remains the ruled
   fallback everywhere else. */
/* WFREV2: the dusk/dawn bands are retired (visual noise between
   sections). The per-world night tones above remain untouched. */

/* ---- Endings, authored ----------------------------------------- */
.conv-farewell { max-width: 34ch; margin-left: auto; margin-right: auto; }
.contact-address {
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 1.6rem 0 0.4rem;
}
.contact-address a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-soft);
}
.closing-line { padding: 7rem 1.5rem 5rem; text-align: center; }
.closing-line p {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--ink);
  max-width: 26ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---- Collaborations: quiet evidence, one authored sentence ----- */
.collab-headline {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 0 0 0.9rem;
  color: var(--ink);
}
.collab-note {
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 auto 2.6rem;
  font-size: 0.98rem;
}

/* ---- "In our words" reads as a voice, not a datum --------------- */
.proj-info .proj-row.voice dd { font-style: italic; }

/* ---- Respect for stillness -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero .btn, .hero .scroll-hint { animation: none; opacity: 1; }
  #moments.show .moment { animation: none; opacity: 1; }
}

/* ============================================================
   0011 FullScene — prototype layer
   ============================================================ */

/* B/C credits: present, but clearly the quieter shelf — smaller,
   fainter, never competing with the flagship row above. Rendered
   only when HOME -> Credits Levels is ABC. */
.logo-row.logo-minor { margin-top: 1.1rem; }  /* 19/8: samme sprog som toprækken */
/* 19/8: udfoldede partnere har SAMME flisestørrelse (ét visuelt sprog) */

/* ============================================================
   WILDFIRE REV — the threshold + the last-room credits
   (delete this block + threshold.js + its script tag to return
   to the clean baseline)
   ============================================================ */
html.wf-lock, html.wf-lock body { overflow: hidden; }
#wf-precover { position: fixed; inset: 0; z-index: 59; background: #eef0f2; }
#wf-arrival {
  position: fixed; inset: 0; z-index: 60;
  background: #eef0f2;
  opacity: 1; transition: opacity 0.6s ease;
  touch-action: none;
  cursor: ns-resize;
}
#wf-arrival.wf-out { opacity: 0; pointer-events: none; }
/* one interactive surface; every layer above it is pointer-transparent */
#wf-sky, #wf-margin { position: absolute; inset: 0; pointer-events: none; }
#wf-sky { display: block; }
.wf-note {
  position: absolute; left: clamp(1.2rem, 6vw, 5rem); top: 0;
  margin: 0; max-width: 34ch;
  font-size: 0.85rem; color: #565049; letter-spacing: 0.02em;
  opacity: 0; will-change: transform, opacity;
}
.wf-note strong { font-weight: 500; color: #3d3831; }
#wf-hint {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  margin: 0; font-size: 0.8rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #6d675f;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
#wf-hint.wf-dim { opacity: 0; }
#wf-skip {
  position: absolute; right: 1.4rem; bottom: 1.2rem;
  background: none; border: none; cursor: pointer;
  font-size: 0.78rem; letter-spacing: 0.08em; color: #8a8378;
  padding: 0.6rem 0.8rem;                 /* honest hit target */
}
#wf-skip:hover { color: #55504a; }

/* the last room: credits rise one by one (needs the wireReveal fix) */
.trusted.in .logo-tile {
  opacity: 0;
  animation: wf-rise-in 0.9s var(--ease) forwards;
}
.trusted.in .logo-tile:nth-child(1) { animation-delay: 0.05s; }
.trusted.in .logo-tile:nth-child(2) { animation-delay: 0.18s; }
.trusted.in .logo-tile:nth-child(3) { animation-delay: 0.31s; }
.trusted.in .logo-tile:nth-child(4) { animation-delay: 0.44s; }
.trusted.in .logo-tile:nth-child(5) { animation-delay: 0.57s; }
.trusted.in .logo-tile:nth-child(6) { animation-delay: 0.7s; }
@keyframes wf-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trusted.in .logo-tile { animation: none; opacity: 1; }
}

/* ============================================================
   WFREV2 — repairs and the human welcome
   ============================================================ */

/* ---- Production Details: open BELOW the trigger, never over the
   media above it. Right-aligned under its own trigger; full-width on
   small screens (existing rule). ---- */
.proj-card .proj-popover {
  bottom: auto;
  top: calc(100% + 0.7rem);
}

/* ---- Search room "About this cue": give the compact rows the same
   positioning context the Library has, and a LIGHT card so it reads
   on charcoal — mirroring the Library treatment that works. Opens
   below to stay inside the panel. ---- */
.compact-cue .cue-actions { position: relative; }
.discover-moments .proj-popover {
  left: 0; right: auto;
  bottom: auto; top: calc(100% + 0.6rem);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.discover-moments .proj-popover .proj-row dt { color: var(--ink-soft); }
.discover-moments .proj-popover .proj-row dd { color: var(--ink); }
@media (max-width: 600px) {
  .discover-moments .proj-popover { left: 0; right: 0; }
}

/* ---- Spacing: the about room and the contact form sit closer ---- */
.who.section { padding-bottom: calc(var(--section) * 0.55); }
.contact-sec.section { padding-top: calc(var(--section) * 0.5); }

/* ---- Footer: the founders, plainly ---- */
.footer .founders { opacity: 0.75; letter-spacing: 0.03em; }

/* ---- The welcome cards (threshold) ---- */
.wf-card {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(34rem, 86vw);
  text-align: center;
  opacity: 0; will-change: transform, opacity;
  pointer-events: none;
}
.wf-card-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.74rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: #8a8378;
}
.wf-card-line {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  line-height: 1.45;
  color: #33302a;
}

/* ============================================================
   WFREV3 — the arrival scene + the coherence pass
   ============================================================ */

/* ---- The scene: warm studio light, dust, one sentence, one
   gesture. The atmosphere breathes over ~26 s; a photograph from
   the workbook (Arrival Image) replaces the light when present. */
#wf-arrival.wf-scene {
  background:
    radial-gradient(120% 90% at 68% 18%, #fbf6ea 0%, #f4ecdb 44%, #e9dfc9 100%);
  animation: wf-breathe 26s ease-in-out infinite alternate;
  transition: opacity 0.9s ease;
  cursor: default;
}
@keyframes wf-breathe {
  from { background-position: 0% 0%; background-size: 100% 100%; }
  to   { background-position: 6% 4%;  background-size: 108% 108%; }
}
#wf-still {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 38%;
  opacity: 0; transition: opacity 1.6s ease;
  pointer-events: none;
}
#wf-still.wf-has-photo { opacity: 1; animation: wf-drift 30s ease-in-out infinite alternate; }
.wf-photo #wf-room { text-shadow: 0 1px 22px rgba(43, 36, 24, 0.35); }
.wf-photo .wf-name, .wf-photo .wf-sentence { color: #fdf9f0; }
.wf-photo #wf-still::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,26,20,0.18), rgba(30,26,20,0.42));
}
@keyframes wf-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
#wf-dust { position: absolute; inset: 0; pointer-events: none; }

#wf-room {
  position: absolute; inset: 0;
  display: grid; place-items: center; place-content: center;
  gap: 1.3rem; text-align: center; padding: 1.5rem;
  pointer-events: none;
}
.wf-name {
  margin: 0;
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: #8a8378;
  opacity: 0; animation: wf-arrive 1.8s var(--ease) 0.7s forwards;
}
.wf-sentence {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.45; max-width: 24ch; color: #33302a;
  opacity: 0; animation: wf-arrive 2s var(--ease) 1.7s forwards;
}
#wf-invite {
  pointer-events: auto;
  margin-top: 1rem;
  background: none; border: none; cursor: pointer;
  font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #6d675f;
  padding: 0.9rem 1.6rem;
  border: 0.5px solid rgba(109, 103, 95, 0.4);
  border-radius: 40px;
  opacity: 0; animation: wf-arrive 1.8s var(--ease) 3.1s forwards;
  transition: color 300ms, border-color 300ms, background 300ms;
}
#wf-invite:hover { color: #33302a; border-color: #33302a; background: rgba(255,253,248,0.4); }
.wf-photo #wf-invite { color: #f3ead9; border-color: rgba(243,234,217,0.55); }
.wf-photo #wf-invite:hover { color: #fff; border-color: #fff; background: rgba(30,26,20,0.2); }
@keyframes wf-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Footer: one typographic system ---- */
.footer { padding: 3rem 1.5rem 2.6rem; line-height: 1; }
.footer p { margin: 0; }
.footer .f-brand {
  font-size: 1.02rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.9rem;
}
.footer .f-line {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.55rem;
}
.footer .f-place { margin-bottom: 0; }
.work-lysfald .footer .f-brand { color: var(--night-soft); }

/* ---- Who we are: its own quiet room ---- */
.who {
  background: #f2ebdb;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
/* the portrait balances the column */
.who-portrait { max-width: 100%; aspect-ratio: 16 / 10; }

/* ---- Spacing: Cue Library sits closer to Who we are ---- */
.library.section { padding-bottom: calc(var(--section) * 0.55); }
.who.section { padding-top: calc(var(--section) * 0.5); }

/* ---- Contact: the address alone, quiet ---- */
.contact-address { margin: 2rem 0 0; text-align: center; font-size: 0.92rem; }
.contact-address a {
  color: var(--ink-soft); text-decoration: none;
  letter-spacing: 0.05em;
  border-bottom: 0.5px solid var(--line);
  transition: color 200ms, border-color 200ms;
}
.contact-address a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ---- Respect for stillness ---- */
@media (prefers-reduced-motion: reduce) {
  #wf-arrival.wf-scene, #wf-still.wf-has-photo { animation: none; }
  .wf-name, .wf-sentence, #wf-invite { animation: none; opacity: 1; }
}

/* ============================================================
   WFREV4 — the hero retires; the question opens the page
   ============================================================ */

/* The Explorer is now the first room. It clears the fixed topbar and
   takes the breath a first room deserves — the question, simply there.
   rev10 (founders' dom): overskriften rykker TÆTTERE på menuen, så hele
   menuen står synlig på telefonen uden at spørgsmålet drukner. */
.explorer-sec.section {
  padding-top: clamp(4.5rem, 9vh, 6.5rem);
}
.explorer-head h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.25;
}

/* footer: two lines only */
.footer .f-line { margin-bottom: 0; }

/* ============================================================
   V1 CANDIDATE — the polished journey
   ============================================================ */

/* ---- The composers at the question (before a feeling is chosen) ----
   Small, human, centred beneath the question; collapses completely —
   opacity and height together, so nothing jumps — the moment the guest
   chooses. Touch-first sizing; the placeholder handles the missing
   photograph exactly as elsewhere. */
.explorer-portrait {
  max-height: 16rem;
  overflow: hidden;
  transition: opacity 0.6s var(--ease), max-height 0.7s var(--ease),
              margin 0.7s var(--ease);
  margin-top: 1.6rem;
}
.explorer-portrait.gone {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  pointer-events: none;
}
.ep-frame {
  position: relative;
  width: min(11rem, 42vw);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: var(--paper-2);
}
.ep-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ep-frame .placeholder {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #efe7d8, var(--paper-2));
  display: grid; place-items: center;
}
.ep-frame .ph-mark { color: var(--line); }
.ep-caption {
  margin: 0.7rem 0 0;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;   /* was inherited from .explorer-head before the
                           portraits moved beneath the orbit */
}

/* ---- The one additional moment: for visitors who ENTERED through the
   scene, the question arrives with the scene's staged grammar — once.
   Opacity-only (no layout motion), so it is safe on every engine. */
html.wf-entered .explorer-head .eyebrow,
html.wf-entered .explorer-head h2,
html.wf-entered .explorer-head p,
html.wf-entered .explorer-portrait {
  opacity: 0;
  animation: wf-arrive 1.6s var(--ease) forwards;
}
html.wf-entered .explorer-head .eyebrow   { animation-delay: 0.55s; }
html.wf-entered .explorer-head h2         { animation-delay: 0.95s; }
html.wf-entered .explorer-head p          { animation-delay: 1.45s; }
html.wf-entered .explorer-portrait        { animation-delay: 1.85s; }

/* ---- Footer: the name, then the names ---- */
.footer .f-line { margin-bottom: 0.45rem; }
.footer .f-line:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .explorer-portrait { transition: none; }
  html.wf-entered .explorer-head .eyebrow,
  html.wf-entered .explorer-head h2,
  html.wf-entered .explorer-head p,
  html.wf-entered .explorer-portrait { animation: none; opacity: 1; }
}

/* ============================================================
   V1 CANDIDATE R2 — the entry composition + the refinement pass
   ============================================================ */

/* ---- The two composers beneath the question ----
   Cinematic, not decorative: portrait-ratio frames, a whisper of
   grade so they sit in the page's light, small name labels. The
   Explorer stays the main object — the portraits are the doormen,
   and they leave the moment the guest chooses. */
.explorer-portrait.duo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(1rem, 3.5vw, 2.2rem);
  max-height: 26rem;
}
.ep-fig { margin: 0; }
.explorer-portrait.duo .ep-frame {
  display: block;
  width: clamp(8.5rem, 19vw, 13rem);
  max-width: 40vw;
  aspect-ratio: 3 / 4;
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 10px 30px rgba(43, 39, 34, 0.10);
}
.explorer-portrait.duo .ep-frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  filter: saturate(0.92) sepia(0.05);
}
.explorer-portrait.duo .ep-caption { margin-top: 0.65rem; }

/* the entry's staged grammar (scene-enterers only): left, then right */
html.wf-entered .explorer-portrait.duo .ep-l {
  opacity: 0; animation: wf-arrive 1.6s var(--ease) 1.8s forwards;
}
html.wf-entered .explorer-portrait.duo .ep-r {
  opacity: 0; animation: wf-arrive 1.6s var(--ease) 2.05s forwards;
}

/* ---- Come In: a slightly longer, gentler crossing ---- */
#wf-arrival.wf-scene { transition: opacity 1.05s cubic-bezier(0.4, 0, 0.2, 1); }

/* ---- The collaborations band: hierarchy by tone, air and hairlines ----
   A deeper warm paper (no green, no gradient), more breathing room,
   closed by hairlines on both sides — the near-white tiles lift by
   contrast alone. */
.trusted {
  background: #ece2cc;
  border-top: 0.5px solid #d8cbae;
  border-bottom: 0.5px solid #d8cbae;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}

@media (prefers-reduced-motion: reduce) {
  html.wf-entered .explorer-portrait.duo .ep-l,
  html.wf-entered .explorer-portrait.duo .ep-r { animation: none; opacity: 1; }
}

/* ============================================================
   V1 CANDIDATE R6 — R2 master + four selected improvements
   ============================================================ */

/* ---- 2 · Rapunzel's night: dark theatrical red (from #6F1D2A),
   selected by one workbook cell, colour predefined in STANDARDS ---- */
.work-lysfald[data-night="rapunzel"] {
  --night:       #19070b;
  --night-2:     #2c0e15;
  --night-soft:  #c9a7ad;
  --night-line:  #4a1f29;
  --night-amber: #d89f5c;
}

/* ---- 1 · THE WORKS shelf: vertical spines, horizontal browsing ----
   The R2 language — sand, hairlines, serif — never a monument.
   Scales from four spines to sixty in the same quiet band. */
.works-shelf {
  text-align: center;
  padding: calc(var(--section) * 0.55) 0 calc(var(--section) * 0.5);
  border-bottom: 0.5px solid var(--line);
}
.works-shelf .eyebrow { margin-bottom: 2.2rem; }
.shelf-scroll {
  display: flex;
  justify-content: safe center;
  align-items: flex-end;
  gap: clamp(1.6rem, 5vw, 3rem);
  overflow-x: auto;
  padding: 0.4rem max(8vw, 2rem) 1.4rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.shelf-scroll::-webkit-scrollbar { height: 4px; }
.shelf-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.shelf-item {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  scroll-snap-align: center;
  flex: 0 0 auto;
  text-decoration: none;
  font-size: clamp(1.1rem, 2.3vw, 1.45rem);
  letter-spacing: 0.08em;
  color: var(--ink);
  padding: 0.55rem 0.35rem;
  border-left: 0.5px solid var(--line);   /* the spine's edge (right, once rotated) */
  min-height: 9.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.shelf-item:hover { color: var(--amber); border-color: var(--amber-soft, var(--amber)); }
.shelf-year {
  font-family: var(--sans, inherit);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}

/* ---- 3 · The search room (ported): dark deepens, card rises ---- */
html.so-lock, html.so-lock body { overflow: hidden; }
.search-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(12, 15, 18, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto;
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.search-overlay.open { opacity: 1; }
.so-frame {
  max-width: 52rem; margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) 1.2rem 4rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.55s var(--ease) 0.08s,
              transform 0.6s cubic-bezier(0.33, 0, 0.2, 1) 0.08s;
}
.search-overlay.open .so-frame { opacity: 1; transform: none; }
.so-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.so-head .eyebrow { margin: 0; color: #9aa4ab; }
.so-close {
  background: none; border: 0.5px solid rgba(154, 164, 171, 0.4);
  border-radius: 50%; width: 2.4rem; height: 2.4rem;
  font-size: 1.3rem; line-height: 1; color: #cdd4d9; cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.so-close:hover { color: #fff; border-color: #fff; }
.search-overlay .discover { margin-top: 0; text-align: left; }
.search-overlay .discover-panel { margin-top: 0; }
.search-overlay .discover-moments { text-align: left; }
.compact-cue .cue-actions { position: relative; }
.discover-moments .proj-popover {
  left: 0; right: auto; bottom: auto; top: calc(100% + 0.6rem);
  background: var(--paper); border-color: var(--line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.discover-moments .proj-popover .proj-row dt { color: var(--ink-soft); }
.discover-moments .proj-popover .proj-row dd { color: var(--ink); }

/* ---- 4 · Who we are: the statement, refined ---- */
.who .who-title {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
.who .who-statement {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--ink);
  margin: 0 0 2.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .search-overlay, .so-frame { transition: none; }
  .search-overlay .so-frame { opacity: 1; transform: none; }
}

/* ============================================================
   R7 EXPERIENCE — the instrument, the coloured shelf, The Door
   ============================================================ */

/* ---- 1 · The Music Explorer as an INSTRUMENT ----
   The question and the hosts introduce; then a framed plate — a
   device you operate, not a label you read. */
.tool-plate {
  max-width: 46rem;
  margin: 2.6rem auto 0;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.55), rgba(255, 253, 248, 0.15));
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(60, 52, 40, 0.06);
  text-align: center;
}
.tool-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.tool-line {
  margin: 0 auto 1.9rem;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1rem;
}
html.wf-entered .tool-plate {
  opacity: 0;
  animation: wf-arrive 1.6s var(--ease) 2.05s forwards;
}

/* ---- 2 · The shelf, pushed: every spine wears its world's night ---- */
.works-shelf .shelf-head { margin-bottom: 2.4rem; padding: 0 1.5rem; }
.works-shelf .shelf-head h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  margin: 0 0 0.7rem;
}
.shelf-line { margin: 0 auto; color: var(--ink-soft); font-size: 0.98rem; max-width: 34rem; }
.shelf-scroll { align-items: center; padding-bottom: 1.8rem; }
.shelf-item {
  --spine: #14181c;
  background: var(--spine);
  color: #f2ead9;
  border: none;
  border-radius: 6px;
  padding: 1.3rem 0.62rem;
  min-height: 12rem;
  box-shadow: 0 10px 26px rgba(30, 26, 20, 0.22);
  margin-left: -0.5rem;                    /* they lean on each other */
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), color 320ms;
}
.shelf-item:first-child { margin-left: 0; }
.shelf-item:nth-child(odd)  { transform: rotate(180deg) rotate(1.4deg); }
.shelf-item:nth-child(even) { transform: rotate(180deg) rotate(-1.2deg) translateY(6px); }
.shelf-item:hover {
  transform: rotate(180deg) translateY(-10px);   /* straightens and lifts */
  box-shadow: 0 22px 44px rgba(30, 26, 20, 0.3);
  color: #fff;
  z-index: 2;
}
.shelf-item:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---- 3 · THE DOOR: a chapter cut in the world's own night ---- */
.work-door {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.33, 0, 0.2, 1);
  pointer-events: none;
}
.work-door.in { opacity: 1; }
.work-door.out { opacity: 0; transition-duration: 620ms; }
.door-title {
  margin: 0;
  color: #f4ede2;
  font-size: clamp(1.9rem, 6vw, 3.6rem);
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease) 140ms, transform 700ms cubic-bezier(0.33, 0, 0.2, 1) 140ms;
}
.work-door.in .door-title { opacity: 1; transform: none; }
.work-door.out .door-title { opacity: 0; transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  html.wf-entered .tool-plate { animation: none; opacity: 1; }
  .shelf-item, .shelf-item:nth-child(odd), .shelf-item:nth-child(even) {
    transform: rotate(180deg); transition: none;
  }
  .work-door { display: none; }
}

/* ============================================================
   R8 EXPERIENCE — the chapter, the affordance, the fold
   ============================================================ */

/* ---- 1 · Entering The Works: a chapter opening ----
   The same staged-type grammar the site already speaks (the scene,
   the entry) now opens the chapter: as the section enters view, a
   hairline draws itself, then the title stands — a book's part-title
   page. Space above gives the page-turn its breath. No new colour,
   no divider: typography, motion, air. */
.works-shelf {
  padding-top: calc(var(--section) * 1.05);
}
.works-shelf .shelf-head { margin-bottom: 3rem; }
.chapter-rule {
  display: block;
  width: 4.5rem; height: 1px;
  margin: 0 auto 2.2rem;
  background: var(--ink-faint);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 900ms cubic-bezier(0.33, 0, 0.2, 1) 150ms;
}
.works-shelf.in .chapter-rule { transform: scaleX(1); }
.chapter-title {
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  letter-spacing: 0.05em;
  margin: 0 0 0.9rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity 800ms var(--ease) 350ms, transform 900ms cubic-bezier(0.33, 0, 0.2, 1) 350ms;
}
.works-shelf.in .chapter-title { opacity: 1; transform: none; }
.works-shelf .shelf-line {
  opacity: 0;
  transition: opacity 800ms var(--ease) 750ms;
}
.works-shelf.in .shelf-line { opacity: 1; }

/* ---- 2 · The browsing affordance: ghost arrows that retire ---- */
.shelf-stage { position: relative; }
.shelf-page {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  border: 0.5px solid var(--line);
  background: rgba(255, 253, 248, 0.85);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: var(--ink-soft);
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: color 200ms, border-color 200ms, opacity 300ms;
  z-index: 3;
}
.shelf-page:hover { color: var(--amber); border-color: var(--amber); }
.shelf-prev { left: clamp(0.6rem, 2.5vw, 1.6rem); }
.shelf-next { right: clamp(0.6rem, 2.5vw, 1.6rem); }

/* ---- 4 · Mobile: the same premium, by thumb ----
   Arrows keep a 44px-class hit area; books swipe natively; the
   chapter opening scales with the viewport; nothing here requires
   hover to be understood. */
@media (max-width: 600px) {
  .shelf-page { width: 2.9rem; height: 2.9rem; }
  .works-shelf { padding-top: calc(var(--section) * 0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-rule { transform: scaleX(1); transition: none; }
  .chapter-title, .works-shelf .shelf-line { opacity: 1; transform: none; transition: none; }
  .shelf-page { transition: none; }
}

/* ============================================================
   R9 EXPERIENCE — the instrument, the library, the books
   ============================================================ */

/* ---- 1 · The introduction lives freely; the box is the tool ---- */
.explorer-intro {
  text-align: center;
  margin: 3rem auto 1.8rem;
  max-width: 40rem;
  padding: 0 1.5rem;
}
.explorer-intro .tool-title { margin: 0 0 0.7rem; }
.explorer-intro .tool-line { margin: 0 auto; }
.instrument {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(0.9rem, 3vw, 2.2rem);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.55), rgba(255, 253, 248, 0.12));
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(60, 52, 40, 0.06);
}
.instrument .moments { padding-top: 0.4rem; }
html.wf-entered .explorer-intro,
html.wf-entered .instrument {
  opacity: 0;
  animation: wf-arrive 1.6s var(--ease) forwards;
}
html.wf-entered .explorer-intro { animation-delay: 1.95s; }
html.wf-entered .instrument   { animation-delay: 2.25s; }
/* (the old .tool-plate markup no longer exists; its rules are inert) */

/* ---- 2 · THE LIBRARY: entering The Works is entering a room ----
   A full-height darkened room the visitor scrolls into — no scroll
   is hijacked; the room itself is the theatre. The sand dims into
   its ceiling; the chapter grammar (rule, title, line) speaks in
   warm white; and the books finally glow the way spines do in a
   dim archive. Leaving below returns to the first world. */
.works-library {
  position: relative;
  background: #101418;
  min-height: 92vh;
  display: grid;
  align-content: center;
  padding: calc(var(--section) * 0.9) 0 calc(var(--section) * 0.7);
  text-align: center;
}
.works-library::before {           /* the room's own shadowed ceiling */
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 11vh;
  background: linear-gradient(180deg, var(--paper), rgba(16, 20, 24, 0));
  opacity: 0.16;
  pointer-events: none;
}
.works-library .shelf-head { margin-bottom: 3.2rem; padding: 0 1.5rem; }
.works-library .chapter-rule { background: rgba(244, 237, 226, 0.35); }
.works-library .chapter-title { color: #f4ede2; }
.works-library .shelf-line { color: #9aa4ab; }
.works-library.in .chapter-rule { transform: scaleX(1); }
.works-library.in .chapter-title { opacity: 1; transform: none; }
.works-library.in .shelf-line { opacity: 1; }

/* the shelf itself: a faint ledge under the books */
.works-library .shelf-stage::after {
  content: '';
  display: block;
  width: min(46rem, 78vw);
  height: 1px;
  margin: 0.2rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(244, 237, 226, 0.18), transparent);
}
.works-library .shelf-scroll {
  scrollbar-color: rgba(244, 237, 226, 0.25) transparent;
}
.works-library .shelf-scroll::-webkit-scrollbar-thumb { background: rgba(244, 237, 226, 0.25); }

/* ---- 3 · The books, finished: individuals, not variations ----
   Each carries its world's night AND its headband tint; heights
   vary like a real shelf; on the dark they are edge-lit and lift
   into the light on touch. */
.shelf-item {
  background: linear-gradient(180deg, var(--spine2, #1e242a) 0%, var(--spine) 16%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45),
              inset 0 0 0 0.5px rgba(244, 237, 226, 0.10);
}
.shelf-item:nth-child(3n+1) { min-height: 12.5rem; }
.shelf-item:nth-child(3n+2) { min-height: 11.3rem; }
.shelf-item:nth-child(3n)   { min-height: 13.2rem; }
.shelf-item:hover {
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55),
              inset 0 0 0 0.5px rgba(244, 237, 226, 0.22);
}

/* browsing on the dark: the affordance becomes obvious ---- */
.works-library .shelf-page {
  background: rgba(24, 29, 34, 0.85);
  border-color: rgba(244, 237, 226, 0.3);
  color: #d9d2c4;
}
.works-library .shelf-page:hover { color: #fff; border-color: #fff; }
.works-library .shelf-scroll {
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

@media (max-width: 600px) {
  .works-library { min-height: 86vh; }
}
@media (prefers-reduced-motion: reduce) {
  html.wf-entered .explorer-intro, html.wf-entered .instrument { animation: none; opacity: 1; }
}

/* ============================================================
   R10 EXPERIENCE — the warm library
   ============================================================ */

/* ---- The room, rethought: Hufflepuff, not Slytherin ----
   A magical library at lamplight: warm umber walls, a soft pool of
   light above the shelf, cream type, honey accents. Still cinematic;
   now inviting. */
.works-library {
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(214, 164, 94, 0.14), transparent 70%),
    linear-gradient(180deg, #2e241a 0%, #372b1e 55%, #2b2117 100%);
}
.works-library::before {
  background: linear-gradient(180deg, var(--paper), rgba(46, 36, 26, 0));
  opacity: 0.2;
}
.works-library .chapter-rule { background: rgba(224, 190, 138, 0.5); }
.works-library .chapter-title { color: #f6eedd; }
.works-library .shelf-line { color: #c9b394; }
.works-library .shelf-stage::after {
  background: linear-gradient(90deg, transparent, rgba(224, 190, 138, 0.3), transparent);
}
.works-library .shelf-scroll {
  scrollbar-color: rgba(224, 190, 138, 0.3) transparent;
}
.works-library .shelf-scroll::-webkit-scrollbar-thumb { background: rgba(224, 190, 138, 0.3); }

/* ---- The books: inviting identities, warm to the touch ---- */
.shelf-item {
  color: #f9f3e6;
  box-shadow: 0 12px 28px rgba(28, 20, 12, 0.4),
              inset 0 0 0 0.5px rgba(249, 243, 230, 0.14);
}
.shelf-item:hover, .shelf-item.touched {
  transform: rotate(180deg) translateY(-10px);
  box-shadow: 0 26px 48px rgba(28, 20, 12, 0.5),
              inset 0 0 0 0.5px rgba(249, 243, 230, 0.3);
  color: #fff;
  z-index: 2;
}

/* ---- Walking the shelf: the hand, and the librarian's card ---- */
.works-library .shelf-page {
  background: rgba(58, 46, 32, 0.85);
  border-color: rgba(224, 190, 138, 0.4);
  color: #e8d9bd;
}
.works-library .shelf-page:hover { color: #fff; border-color: #fff; }
.shelf-page.rest { opacity: 0.28; pointer-events: none; }
.shelf-card {
  min-height: 1.3rem;
  margin: 1.1rem auto 0;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9b394;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.shelf-card.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .shelf-item.touched { transform: rotate(180deg); }
  .shelf-card { transition: none; }
}

/* ============================================================
   R11 CRAFT — materials, hierarchy, cohesion
   ============================================================ */

/* ---- 1 · The introduction joins the instrument ----
   The title and its line adopt the warm gold the tool already
   speaks when a feeling is chosen — the name belongs to the
   instrument. (Revert: delete this block.) */
.explorer-intro .tool-title { color: var(--amber); }
.explorer-intro .tool-line  { color: #8a7150; }
.instrument { border-color: rgba(176, 125, 51, 0.28); }

/* ---- 3 · The books as crafted objects ----
   Cloth grain, letterpress titles, a lit edge toward the lamp, a
   shadowed hinge away from it, contact + ambient shadow. Titles
   centred along the spine, as bookbinding sets them. */
.shelf-item {
  justify-content: center;               /* vertically centred titles */
  background-image:
    radial-gradient(rgba(255, 252, 244, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, var(--spine2, #6b7684) 0%, var(--spine) 16%);
  background-size: 3px 3px, 100% 100%;
  box-shadow:
    0 3px 8px rgba(28, 20, 12, 0.35),          /* contact */
    0 16px 34px rgba(28, 20, 12, 0.38),        /* ambient */
    inset 1.5px 0 0 rgba(255, 250, 240, 0.13), /* lit edge */
    inset -1.5px 0 0 rgba(15, 10, 6, 0.35),    /* the hinge in shadow */
    inset 0 0 0 0.5px rgba(249, 243, 230, 0.1);
  text-shadow:
    0 1px 1px rgba(15, 10, 6, 0.45),
    0 -0.5px 0 rgba(255, 250, 240, 0.12);      /* letterpress */
}
.shelf-item:hover, .shelf-item.touched {
  box-shadow:
    0 6px 12px rgba(28, 20, 12, 0.4),
    0 30px 56px rgba(28, 20, 12, 0.5),
    inset 1.5px 0 0 rgba(255, 250, 240, 0.2),
    inset -1.5px 0 0 rgba(15, 10, 6, 0.3),
    inset 0 0 0 0.5px rgba(249, 243, 230, 0.24);
}

/* ---- 4 · The shelf breathes equally above and below ---- */
.works-library {
  padding: calc(var(--section) * 0.95) 0 calc(var(--section) * 0.95);
}

/* ============================================================
   R12 CRAFT — the crown, The Bindery, the centred card
   ============================================================ */

/* ---- 1 · The instrument wears its name ----
   The header sits INSIDE the component as a warm golden crown —
   white typography on the interaction's own amber. One experience,
   one object. (Revert: restore the freed-intro markup + delete
   this block.) */
.instrument { padding: 0; overflow: hidden; }
.instrument-head {
  background: linear-gradient(180deg, #c99347, var(--amber) 70%, #b27c33);
  padding: clamp(1.5rem, 3.5vw, 2.2rem) clamp(1rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 1.9rem);
  text-align: center;
}
.instrument-head .tool-title { color: #fffaf0; margin: 0 0 0.55rem; }
.instrument-head .tool-line  { color: rgba(255, 250, 240, 0.85); margin: 0 auto; }
.instrument-body {
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(0.9rem, 3vw, 2.2rem);
}
.instrument { scroll-margin-top: 5.5rem; }   /* the nav lands here, kindly */
html.wf-entered .explorer-intro { animation: none; }

/* ---- 2 · THE BINDERY: the books, owned ----
   Coordinates are rotation-aware (the spine is turned 180°): the
   lamplight falls on the VISUAL top, the headband returns to the
   head, gilt rules ring head and tail, titles are foil-stamped,
   and every third binding carries a small blind ornament. */
.shelf-item {
  border-radius: 5px 5px 6px 6px;
  background-image:
    linear-gradient(0deg, rgba(255, 244, 220, 0.11), rgba(255, 244, 220, 0) 30%, rgba(10, 6, 3, 0.16) 100%),
    radial-gradient(rgba(255, 252, 244, 0.02) 1px, transparent 1px),
    linear-gradient(0deg, transparent calc(7% - 1px), rgba(233, 196, 124, 0.5) calc(7% - 1px), rgba(233, 196, 124, 0.5) 7%, transparent 7%),
    linear-gradient(0deg, transparent calc(93% - 1px), rgba(233, 196, 124, 0.42) calc(93% - 1px), rgba(233, 196, 124, 0.42) 93%, transparent 93%),
    linear-gradient(0deg, var(--spine2, #6b7684) 0%, var(--spine) 16%);
  background-size: 100% 100%, 3px 3px, 100% 100%, 100% 100%, 100% 100%;
  position: relative;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease),
              color 320ms, filter 320ms var(--ease);
}

.shelf-item:nth-child(3n+2)::after {   /* the blind ornament, near the tail */
  content: '';
  position: absolute;
  top: 9.5%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(233, 196, 124, 0.45);
  transform: translateX(-50%);
}
.shelf-item:hover, .shelf-item.touched { filter: brightness(1.07); }

/* ---- 4 · About this cue, in the search room: a centred card ----
   Inside the overlay the popover becomes a focused modal — fixed to
   the centre of the screen, one calm object, identical for every
   card (which also retires the anchored-position quirks the deeper
   rows suffered). Elsewhere on the site the wall-label behaviour is
   unchanged. */
.compact-cue .proj-more { position: relative; }
.proj-popover dd { overflow-wrap: break-word; min-width: 0; }
.search-overlay .proj-popover {
  position: fixed;
  left: 50%; top: 50%;
  bottom: auto; right: auto;
  transform: translate(-50%, -50%) translateY(8px);
  width: min(28rem, 90vw);
  max-width: none;
  z-index: 95;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.search-overlay .proj-popover.open { transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) {
  .search-overlay .proj-popover { transform: translate(-50%, -50%); transition: none; }
  .shelf-item { transition: none; }
}

/* the foil stamp: gold clipped to the glyphs alone; graceful cream
   fallback where background-clip:text is unsupported */
.spine-title { display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .spine-title {
    background: linear-gradient(105deg, #e3bd76, #f6e4b3 45%, #cfa457 62%, #e3bd76);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
  .shelf-item:hover .spine-title,
  .shelf-item.touched .spine-title { filter: brightness(1.12); }
}

/* ============================================================
   R13 CANDIDATE — one combined direction, built directly
   (orbit Explorer · full portrait collapse · works-only golden
   cursor · premium book covers). Everything else: R12_CRAFT.
   ============================================================ */

/* ---- 1 · THE ORBIT: the Explorer as a quiet constellation ----
   No gold block, no panel: the hub speaks quietly at the centre,
   the feelings are the luminous focus, threads barely there. */
.orbit { max-width: 52rem; margin: 0 auto; scroll-margin-top: 5.5rem; }
.orbit-field {
  position: relative;
  height: clamp(24rem, 54vh, 30rem);
  margin-top: 1rem;
}
.orbit-hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
  max-width: 13rem; z-index: 0;
}
.orbit-title { margin: 0 0 0.35rem; font-size: 1.2rem; color: var(--amber); letter-spacing: 0.02em; }
.orbit-line { margin: 0; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.orbit-field #feelings { position: static; }
.orbit-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbit-threads line { stroke: rgba(176, 125, 51, 0.15); stroke-width: 0.22; transition: opacity 400ms; }
.orbit-threads line.lit { stroke: rgba(192, 138, 62, 0.5); }
.orbit-threads line.off { opacity: 0.25; }
.orbit-field .feeling {
  position: absolute;
  left: var(--ox, 50%); top: var(--oy, 50%);
  transform: translate(-50%, -50%);
  animation: orbit-sway 10s ease-in-out infinite alternate;
  animation-delay: var(--ophase, 0s);
  box-shadow: 0 6px 22px rgba(176, 125, 51, 0.12);
  z-index: 1;
}
@keyframes orbit-sway {
  from { transform: translate(calc(-50% - 3px), calc(-50% + 2px)); }
  to   { transform: translate(calc(-50% + 3px), calc(-50% - 3px)); }
}
.orbit-field .feeling.dim { opacity: 0.3; filter: saturate(0.65); }
.orbit-field .feeling.active {
  animation-play-state: paused;
  box-shadow: 0 0 0 3px rgba(192, 138, 62, 0.3), 0 14px 36px rgba(176, 125, 51, 0.25);
  z-index: 2;
}
.orbit .moments { padding-top: 0.6rem; }
html.wf-entered .orbit {
  opacity: 0;
  animation: wf-arrive 1.6s var(--ease) 2.05s forwards;
}

/* ---- 2 · FULL PORTRAIT COLLAPSE (the root fix) ----
   The cascade bug: `.explorer-portrait.duo { max-height: 26rem }`
   is declared AFTER `.explorer-portrait.gone { max-height: 0 }` at
   equal specificity, so the duo never collapsed. Faces, names and
   the entire area now fold to nothing — no empty vertical space. */
.explorer-portrait.gone,
.explorer-portrait.duo.gone {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---- 3 · THE GOLDEN COMPANION (works only) ---- */
.works-dot {
  position: fixed; left: 0; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--works-accent, #c08a3e);
  mix-blend-mode: screen;
  pointer-events: none; z-index: 130;
  opacity: 0;
  transition: opacity 500ms var(--ease), background 600ms var(--ease);
}
html.in-works .works-dot { opacity: 1; }

/* ---- 4 · THE BOOKS: one register more premium ----
   Same graphics, same identity — deeper light. A soft sheen sweeps
   the cover on touch (exhibition glass catching the lamp); the lit
   edge and hinge deepen; the lift gains a whisper of scale; the
   shadow gains a third, tighter contact layer. */
.shelf-item { overflow: hidden; }
.shelf-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 248, 232, 0.14) 48%, rgba(255, 248, 232, 0.05) 52%, transparent 68%);
  transform: translateY(115%);
  transition: transform 700ms cubic-bezier(0.33, 0, 0.2, 1);
  pointer-events: none;
}
.shelf-item:hover::before, .shelf-item.touched::before { transform: translateY(-115%); }
.shelf-item:hover, .shelf-item.touched {
  transform: rotate(180deg) translateY(-11px) scale(1.015);
  box-shadow:
    0 2px 5px rgba(24, 16, 9, 0.45),
    0 10px 18px rgba(24, 16, 9, 0.35),
    0 34px 60px rgba(24, 16, 9, 0.42),
    inset 2px 0 0 rgba(255, 250, 240, 0.22),
    inset -2px 0 0 rgba(15, 10, 6, 0.32),
    inset 0 0 0 0.5px rgba(249, 243, 230, 0.26);
}

@media (prefers-reduced-motion: reduce) {
  .orbit-field .feeling { animation: none; }
  html.wf-entered .orbit { animation: none; opacity: 1; }
  .works-dot { display: none; }
  .shelf-item::before { display: none; }
  .shelf-item:hover, .shelf-item.touched { transform: rotate(180deg); }
}

/* ============================================================
   R14 POLISH — orbit balance, centre clarity, the new chapter,
   the companion's proper home
   ============================================================ */

/* ---- 1 · Orbit balance: six equal planets ----
   One consistent box; labels wrap centred on up to two lines.
   Same words, same meaning — harmonious sizes. */
.orbit-field .feeling {
  width: clamp(7.6rem, 16vw, 9.5rem);
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.55rem 0.7rem;
  line-height: 1.25;
}
@media (max-width: 480px) {
  .orbit-field .feeling { width: 7rem; min-height: 3.2rem; font-size: 0.88rem; }
}

/* ---- 2 · Centre readability: the clearing ----
   A soft breath of paper behind the hub — no card, no border, no
   gold block. The threads now also stop at its edge (JS), so the
   centre reads cleanly: The Music Explorer / Choose a feeling. */
.orbit-hub::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 15rem; height: 11rem;
  background: radial-gradient(closest-side, var(--paper) 52%, rgba(247, 241, 230, 0) 100%);
  z-index: -1;
}

/* ---- 4 · After the Explorer: a new chapter in the same paper ----
   The room stays in the sand family — warm parchment, no brown, no
   heavy colour — opened by a quiet chapter mark (hairlines meeting
   a small gilt point) in the air after the Explorer. */
.chapter-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto clamp(2.6rem, 6vw, 4rem);
}
.chapter-mark span {
  display: block;
  width: clamp(3rem, 9vw, 5.5rem);
  height: 1px;
  background: rgba(176, 125, 51, 0.4);
}
.chapter-mark i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3dfae, #c08a3e 78%);
}
.works-library {
  /* ROOT FIX (white flash): no asset exists here — this is pure CSS —
     but the old stops held paper-white for the top 14% and only
     reached full sand 58% down, which the eye reads as "the texture
     loads late" during the transition. The sand now arrives by 26%
     (seam fade to the paper above preserved), and the base
     background-color is sand, so no state can ever paint white. */
  background-color: #e9dcbd;
  background-image: linear-gradient(180deg, var(--paper) 0%, #efe6cf 6%, #e9dcbd 26%, #e9dcbd 62%, #efe5cd 100%);
}
.works-library::before { display: none; }   /* the dimmed ceiling retires with the dark */
.works-library .chapter-rule { background: rgba(176, 125, 51, 0.45); }
.works-library .chapter-title { color: var(--ink); }
.works-library .shelf-line { color: var(--ink-soft); }
.works-library .shelf-stage::after {
  background: linear-gradient(90deg, transparent, rgba(176, 125, 51, 0.35), transparent);
}
.works-library .shelf-scroll { scrollbar-color: rgba(176, 125, 51, 0.35) transparent; }
.works-library .shelf-scroll::-webkit-scrollbar-thumb { background: rgba(176, 125, 51, 0.35); }
.works-library .shelf-page {
  background: rgba(255, 253, 248, 0.85);
  border-color: rgba(176, 125, 51, 0.4);
  color: var(--ink-soft);
}
.works-library .shelf-page:hover { color: var(--amber); border-color: var(--amber); }
.works-library .shelf-card { color: var(--ink-faint); }
/* the books keep every material layer — deeper grounding for daylight */
.works-library .shelf-item {
  box-shadow:
    0 3px 8px rgba(90, 70, 40, 0.28),
    0 16px 34px rgba(90, 70, 40, 0.24),
    inset 1.5px 0 0 rgba(255, 250, 240, 0.15),
    inset -1.5px 0 0 rgba(15, 10, 6, 0.3),
    inset 0 0 0 0.5px rgba(249, 243, 230, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .orbit-hub::before { transform: translate(-50%, -50%); }
}

/* ============================================================
   R15 FINISH — the conservator's pass
   ============================================================ */

/* ---- 1 · The chapter mark inherits the drawing gesture the
   second rule used to perform: one divider, one language. ---- */
.chapter-mark span {
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.33, 0, 0.2, 1) 150ms;
}
.chapter-mark span:first-child { transform-origin: right; }
.chapter-mark span:last-child { transform-origin: left; }
.works-library.in .chapter-mark span { transform: scaleX(1); }
.chapter-mark i {
  opacity: 0;
  transition: opacity 700ms var(--ease) 550ms;
}
.works-library.in .chapter-mark i { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .chapter-mark span { transform: scaleX(1); transition: none; }
  .chapter-mark i { opacity: 1; transition: none; }
}

/* ============================================================
   R16 FINAL — the quiet sun, the museum credits
   ============================================================ */

/* ---- 7 · Museum credits ---- */
.f-insta {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.f-insta a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.f-insta a:hover { color: var(--amber); border-color: var(--amber); }
.f-insta-label { margin-right: 0.35rem; }
.f-insta-dot { color: var(--ink-faint); margin: 0 0.15rem; }

@media (prefers-reduced-motion: reduce) {
  .orbit-hub::after { animation: none; opacity: 1; }
}

/* ============================================================
   R17 — the perceivable sun · library gold · museum credits
   ============================================================ */

/* ---- 4 · The sun of the system (perceivable this time) ----
   The R16 halo sat BENEATH the opaque paper clearing — correct in
   code, invisible in the browser. Rebuilt on the field itself:
   a warm radial glow spreading past the clearing's edge, a thin
   golden ring around the hub, and a slow, soft pulse. The centre
   now reads as the gravitational heart the feelings orbit. */
.orbit-field::before {           /* the glow */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 26rem; height: 21rem;
  background: radial-gradient(closest-side,
    rgba(214, 164, 94, 0.28),
    rgba(214, 164, 94, 0.1) 48%,
    rgba(214, 164, 94, 0) 74%);
  pointer-events: none;
  animation: sun-breathe 6s ease-in-out infinite alternate;
}
.orbit-field::after {            /* the ring */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 13.5rem; height: 13.5rem;
  margin: -6.75rem 0 0 -6.75rem;
  border-radius: 50%;
  border: 1px solid rgba(192, 138, 62, 0.38);
  box-shadow: 0 0 24px rgba(214, 164, 94, 0.18) inset;
  pointer-events: none;
  animation: sun-pulse 6s ease-in-out infinite alternate;
}
@keyframes sun-breathe {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}
@keyframes sun-pulse {
  from { transform: scale(0.985); }
  to   { transform: scale(1.02); }
}
/* the satellites and threads ride above the sun */
.orbit-field .orbit-threads, .orbit-field .feeling, .orbit-hub { position: absolute; z-index: 1; }
.orbit-hub { z-index: 1; }

/* ---- 3 · Library queues: the same gold as Search ---- */
.lib-card .cue-actions .cue-enter { color: var(--night-amber); }
.lib-card .cue-actions .cue-enter:hover { color: var(--ink); border-bottom-color: var(--line); }

/* ---- 6 · Museum credits (rendered for evaluation) ---- */
.f-insta {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.f-insta-label { margin-right: 0.2rem; }
.f-credit-link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.f-credit-link .f-arrow { font-size: 0.68em; opacity: 0.7; }
.f-credit-link:hover { color: var(--amber); border-color: var(--amber); }
.f-credit-link.pending { opacity: 0.55; cursor: default; }
.f-credit-link.pending:hover { color: var(--ink-soft); border-color: transparent; }
.f-insta-dot { color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .orbit-field::before, .orbit-field::after { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .orbit-field::after { transform: none; }
}

/* ============================================================
   R18 RELEASE — the living sun · the final footer
   ============================================================ */

/* ---- 1 · The hub: compact, a subtle vertical oval ---- */
.orbit-hub { max-width: 10rem; }
.orbit-title { font-size: 1.06rem; line-height: 1.3; margin-bottom: 0.4rem; }
.orbit-line { font-size: 0.62rem; letter-spacing: 0.22em; }
.orbit-hub::before {
  width: 11.5rem; height: 11.5rem;
  background: radial-gradient(closest-side, var(--paper) 50%, rgba(247, 241, 230, 0) 100%);
}
.orbit-field::before {
  width: 22rem; height: 19rem;
  background: radial-gradient(closest-side,
    rgba(214, 164, 94, 0.26),
    rgba(214, 164, 94, 0.09) 48%,
    rgba(214, 164, 94, 0) 74%);
}
.orbit-field::after {            /* the ring becomes a quiet vertical oval */
  width: 11rem; height: 12.6rem;
  margin: -6.3rem 0 0 -5.5rem;
  border-radius: 50%;
}

/* ---- 2 · Gravity: the centre is alive ----
   The satellites lean a few pixels toward the sun and back (11s);
   the threads breathe; every ~10 seconds a small light travels a
   thread from the sun to its satellite. Museum, not sci-fi. */
@keyframes orbit-sway {
  from { transform: translate(-50%, -50%); }
  to   { transform: translate(calc(-50% + var(--gx, 0px)), calc(-50% + var(--gy, 0px))); }
}
.orbit-field .feeling { animation-duration: 11s; }
.orbit-threads line { animation: thread-breathe 9s ease-in-out infinite alternate; }
.orbit-threads line:nth-child(odd) { animation-delay: 2.2s; }
@keyframes thread-breathe {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}
.orbit-threads line.thread-pulse {
  stroke: rgba(214, 164, 94, 0.85);
  stroke-width: 0.45;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 5;
  opacity: 0;
  animation: thread-pulse 10s linear infinite;
}
@keyframes thread-pulse {
  0%   { stroke-dashoffset: 5;    opacity: 0; }
  4%   { opacity: 0.9; }
  22%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* ---- 7 · The final footer: museum credits, the signature ---- */
.site-end {
  background: linear-gradient(180deg, #1d1710, #15100a);
  padding: clamp(4.5rem, 11vw, 7.5rem) 1.5rem clamp(4rem, 9vw, 6rem);
  text-align: center;
}
.fe-brand {
  color: #f4ede2;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.fe-composers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.3rem;
}
.fe-composer {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #b3a58f;
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  transition: color 250ms var(--ease);
}
.fe-composer .ig { width: 15px; height: 15px; opacity: 0.75; transition: opacity 250ms; }
.fe-composer:hover { color: #e8d4b0; }
.fe-composer:hover .ig { opacity: 1; }
.fe-dot { color: #4a3f30; }
@media (max-width: 480px) {
  .fe-composers { flex-direction: column; gap: 1.1rem; }
  .fe-dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-threads line, .orbit-threads line.thread-pulse { animation: none; }
  .orbit-threads line.thread-pulse { opacity: 0; }
  .orbit-field .feeling { animation: none; }
}

/* ============================================================
   R19 — the tight sun · real gravity · the seamless room ·
   the closing circle
   ============================================================ */

/* ---- 1 · The sun, tight ---- */
.orbit-hub { max-width: 8.5rem; }
.orbit-title { font-size: 1.02rem; line-height: 1.28; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.orbit-line { font-size: 0.58rem; letter-spacing: 0.24em; }
.orbit-hub::before { width: 10rem; height: 10rem; }
.orbit-field::after {
  width: 10.4rem; height: 10.4rem;
  margin: -5.2rem 0 0 -5.2rem;
  border-radius: 50%;
}
.orbit-field::before { width: 20rem; height: 18rem; }

/* ---- 2 · Real gravity ----
   The satellites wander organically: a slow four-waypoint drift
   whose pull is always slightly toward the sun (--gx/--gy), with a
   breath of scale folded in. When one is touched, the others yield
   — a fraction smaller, a fraction quieter — the whole system
   feeling the hand. Barely noticeable; simply alive. */
@keyframes orbit-sway {
  0%   { transform: translate(-50%, -50%) scale(1); }
  30%  { transform: translate(calc(-50% + var(--gx, 0px)), calc(-50% + var(--gy, 0px))) scale(1.008); }
  55%  { transform: translate(calc(-50% + var(--gx, 0px) * 0.3), calc(-50% - var(--gy, 0px) * 0.4)) scale(0.997); }
  80%  { transform: translate(calc(-50% - var(--gx, 0px) * 0.4), calc(-50% + var(--gy, 0px) * 0.5)) scale(1.004); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.orbit-field .feeling {
  animation: orbit-sway 16s ease-in-out infinite;
  transition: scale 550ms var(--ease), opacity 550ms var(--ease),
              box-shadow 320ms var(--ease), filter 550ms var(--ease);
}
.orbit-field:has(.feeling:hover) .feeling:not(:hover):not(.active) {
  scale: 0.972;
  opacity: 0.82;
}
.orbit-field .feeling:hover { scale: 1.05; }

/* ---- 4 · The room is simply there ----
   The section carried the global reveal fade, so the parchment
   surfaced a beat after arrival — the "texture pop-in". The room no
   longer fades as a whole; its interior staging (the drawing mark,
   the standing title) still runs on .in. */
.works-library.reveal { opacity: 1; transform: none; }

/* ---- 8 · The closing circle ----
   The visitor met the composers at the beginning; they quietly meet
   them again before leaving. Two small, almost-monochrome portraits
   above the names — the closing page of the catalogue. */
.fe-composers { gap: clamp(2.2rem, 7vw, 4.5rem); align-items: flex-start; }
.fe-dot { display: none; }
.fe-composer { flex-direction: column; gap: 0.8rem; }
.fe-frame {
  display: block;
  width: 5rem; height: 6.4rem;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #241d14;
}
.fe-frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
  filter: grayscale(0.85) contrast(0.95) brightness(0.92);
  transition: filter 600ms var(--ease);
}
.fe-composer:hover .fe-frame img { filter: grayscale(0.4) contrast(0.97) brightness(0.98); }
.fe-frame .placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #4a3f30;
  font-family: var(--serif);
  font-size: 0.85rem; letter-spacing: 0.12em;
}
.fe-name { color: #cfc2ac; font-size: 0.86rem; letter-spacing: 0.08em; }
.fe-ig-row { display: inline-flex; align-items: center; gap: 0.4rem; color: #8d8069; }
.fe-ig-word { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; }
.fe-composer:hover .fe-ig-row { color: #e8d4b0; }

@media (prefers-reduced-motion: reduce) {
  .orbit-field .feeling { animation: none; transition: none; }
  .orbit-field:has(.feeling:hover) .feeling:not(:hover):not(.active) { scale: 1; opacity: 1; }
  .fe-frame img { transition: none; }
}

/* ============================================================
   R20 CORRECTION — calm, fast, geometrically true
   ============================================================ */

/* ---- 2+3 · Rest is stillness; response is the visitor's ----
   All idle motion retired: no sway, no breathing threads, no
   travelling pulses. A satellite responds only under the cursor —
   a gentle lift, a soft glow, its own thread warming — and the
   state change is FAST (the 550ms transitions were the perceived
   lag; the held breath before the music remains untouched). */
.orbit-field .feeling,
.orbit-field .feeling:hover,
.orbit-field .feeling.active {
  animation: none;
  transform: translate(-50%, -50%);
}
.orbit-field .feeling {
  transition: scale 180ms var(--ease), opacity 180ms var(--ease),
              box-shadow 180ms var(--ease), filter 180ms var(--ease);
}
.orbit-field:has(.feeling:hover) .feeling:not(:hover):not(.active) {
  scale: 1; opacity: 1;               /* the others rest; no yielding */
}
.orbit-field .feeling:hover {
  scale: 1.045;
  transform: translate(-50%, calc(-50% - 3px));
  box-shadow: 0 0 0 2px rgba(192, 138, 62, 0.22), 0 14px 34px rgba(176, 125, 51, 0.22);
}
.orbit-threads line { animation: none; transition: opacity 180ms, stroke 180ms; }
.orbit-threads line.thread-pulse { display: none; }
.orbit-threads line.hover-lit { stroke: rgba(192, 138, 62, 0.45); }
.orbit-field::before { animation: none; }         /* the sun holds steady */
.orbit-field::after { animation: none; transform: none; }

/* ---- 5 · The signature, short ----
   Portraits stay, but as closing credits: small, warm (no flattened
   monochrome), inline beside the names. The room loses half its
   height; the colour feeling returns. */
.site-end { padding: clamp(3rem, 7vw, 4.5rem) 1.5rem clamp(2.8rem, 6vw, 4rem); }
.fe-brand { margin-bottom: clamp(1.4rem, 3.5vw, 2rem); }
.fe-composers { gap: clamp(1.6rem, 5vw, 3rem); align-items: center; }
.fe-composer {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.fe-frame {
  width: 2.6rem; height: 3.3rem;
  border-radius: 3px;
  flex: 0 0 auto;
}
.fe-frame img {
  filter: saturate(0.8) brightness(0.94);
}
.fe-composer:hover .fe-frame img { filter: saturate(0.95) brightness(1); }
.fe-frame .placeholder { font-size: 0.6rem; }
.fe-composer > .fe-name { margin: 0; }
.fe-ig-row { margin-left: 0.1rem; }
.fe-ig-row .fe-ig-word { display: none; }          /* the glyph alone; quieter */
.fe-ig-row .ig { width: 13px; height: 13px; }
@media (max-width: 480px) {
  .fe-composers { flex-direction: column; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-field .feeling:hover { transform: translate(-50%, -50%); scale: 1; }
}

/* ============================================================
   R21 MOBILE — the same experience, by thumb
   ============================================================ */

/* ---- the orbit on phones: readable, tappable, never clipped ---- */
@media (max-width: 620px) {
  .orbit-field {
    height: clamp(26rem, 68vh, 30rem);   /* taller air for the narrower ellipse */
  }
  .orbit-field .feeling {
    width: 6.6rem;
    min-height: 3.1rem;                  /* ~50px — a true thumb target */
    font-size: 0.85rem;
    padding: 0.5rem 0.55rem;
  }
  .orbit-hub { max-width: 7.5rem; }
  .orbit-title { font-size: 0.95rem; }
  .orbit-hub::before { width: 8.6rem; height: 8.6rem; }
  .orbit-field::after {
    width: 9rem; height: 9rem;
    margin: -4.5rem 0 0 -4.5rem;
  }
  .orbit-field::before { width: 16rem; height: 15rem; }
}
.orbit { overflow: hidden; }             /* belt & braces: nothing escapes the page */

/* tap feedback where hover cannot exist: the press itself responds */
.orbit-field .feeling:active { scale: 0.97; }
.shelf-item:active { filter: brightness(1.07); }

/* the ring radius the threads aim for, on phones (JS reads 5.2rem;
   the visual ring shrinks, so the threads' start follows the media
   query via the same rem math) */
@media (max-width: 620px) {
  .orbit-threads { --ring-rem: 4.5; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-field .feeling:active { scale: 1; }
}

/* ============================================================
   R24 — the quiet orientation note (portrait phones, arrival only)
   ============================================================ */
#wf-rotate {
  position: absolute;
  left: 50%; bottom: max(4.5rem, env(safe-area-inset-bottom, 0px) + 4rem);
  transform: translateX(-50%);
  width: min(20rem, 86vw);
  text-align: center;
  z-index: 4;
  opacity: 0;
  animation: wf-rotate-in 1.4s var(--ease, ease) 3.8s forwards;
  transition: opacity 650ms var(--ease, ease), transform 650ms var(--ease, ease);
}
#wf-rotate.gone { opacity: 0 !important; transform: translateX(-50%) translateY(6px); pointer-events: none; }
.wf-rotate-line {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 237, 226, 0.62);
}
#wf-rotate-stay {
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(244, 237, 226, 0.3);
  padding: 0.15rem 0.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 237, 226, 0.45);
  cursor: pointer;
}
@keyframes wf-rotate-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #wf-rotate { animation: none; opacity: 1; transition: none; }
}

/* ============================================================
   IMPACT — the restored hierarchy · the curated panel
   ============================================================ */

/* The band: FORMAT and IMPACT as quiet museum labels, then the one
   action. Nothing louder than before; only clearer. */
/* IMPACT value inherits the FORMAT value's exact type: one
   information system, only the label changes. (The serif override
   that made Impact look like a different voice is retired.) */

/* The panel, curated: each fact reads value-first — a tiny faint
   eyebrow above a calm serif value — exhibition context, not
   exported metadata. The information is identical; only the
   hierarchy improved. */
.proj-popover .pd-curated { display: block; }
.proj-popover .pd-item {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 0.5px solid var(--line);
}
.proj-popover .pd-item:last-child { border-bottom: 0; }
.proj-popover .pd-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.18rem;
}
.proj-popover .pd-value {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--night-ink, #ece5d5);   /* readable light on the night card
                                         (var(--ink) was dark-on-dark) */
}
.proj-popover .proj-highlights {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 0.5px solid var(--line);
}

/* Hierarchy stability regardless of text length: values wrap calmly
   inside their row; the head already wraps; nothing can push the
   Production details action out of place. */
.proj-row dd { min-width: 0; overflow-wrap: break-word; }


/* The impact line: full width beneath the head line, quiet museum
   statement — serif value, same label grammar. */
.proj-card .proj-impact-line { margin-top: 0.75rem; }

/* The details panel's editorial voice: one calm paragraph, then the
   quiet credit line. Where was it — what is it — who with. */
.proj-popover .pd-desc {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--night-soft);
}
.proj-popover .pd-with {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid var(--night-line);
}
.proj-popover .pd-with .pd-label { margin-bottom: 0.25rem; }
.proj-popover .pd-with-names {
  margin: 0;
  font-size: 0.88rem;
  color: var(--night-ink, #e7e0d2);
}
.proj-popover .pd-with-dot { color: var(--night-line); }


/* The hosts beneath their instrument: breathing room below the orbit,
   nothing between the Explorer and the visitor. Collapse behaviour
   (.gone) untouched. */
.orbit + #explorer-portrait { margin-top: clamp(1.6rem, 4vw, 2.8rem); }

/* ==== FINALE v2 — GRAVITY (2026-07-06): the construction lines
   disappear; the hub and the six feelings relate through spacing,
   colour and motion. Gestures one step more expressive — still
   one-shot, still ending in true stillness, no filters, no loops. */

/* the connector lines are GONE in every state (founders, 2026-07-06:
   even the whisper read as clutter on phones). The SVG remains only
   as the invisible rail the one-shot thread-light travels. */
.orbit-field .orbit-threads line {
  stroke: transparent !important;
  animation: none;
}

.orbit-field .feeling:hover { border-color: var(--mood, var(--amber)); }
.orbit-field .feeling.active {
  background: var(--mood, var(--amber));
  border-color: var(--mood, var(--amber));
  box-shadow: 0 0 0 3px rgba(var(--mood-rgb, 192, 138, 62), 0.3),
              0 14px 36px rgba(var(--mood-rgb, 176, 125, 51), 0.25);
}

.orbit-hub .orbit-title { transition: color 0.3s var(--ease); }
.orbit-hub.answering .orbit-title { color: var(--mood, var(--amber)); }

.orbit-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

/* ---- the six gestures, one step further ----------------------------
   Each is ONE breath: base transform preserved, identity at 100%,
   class stripped on animationend. Depth comes from shadow alone —
   no filter of any kind. */

/* Bright Momentum — a confident forward lift with a warm pulse */
.orbit-hub.g-momentum { animation: g-momentum 1.35s var(--ease) 1; }
@keyframes g-momentum {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  30%  { transform: translate(-50%, calc(-50% - 14px)) scale(1.045);
         box-shadow: 0 18px 42px -14px rgba(var(--mood-rgb), 0.5); }
  58%  { transform: translate(-50%, calc(-50% - 5px)) scale(1.015);
         box-shadow: 0 10px 30px -14px rgba(var(--mood-rgb), 0.3); }
  78%  { transform: translate(-50%, calc(-50% - 9px)) scale(1.025);
         box-shadow: 0 14px 36px -14px rgba(var(--mood-rgb), 0.4); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* Playful Sparks — livelier wiggle; the dots do the talking */
.orbit-hub.g-sparks { animation: g-sparks 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }
@keyframes g-sparks {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  18%  { transform: translate(-50%, -50%) rotate(-3.2deg) scale(1.05, 0.96); }
  42%  { transform: translate(-50%, -50%) rotate(2.4deg) scale(0.97, 1.04); }
  64%  { transform: translate(-50%, -50%) rotate(-1.4deg) scale(1.02, 0.99); }
  84%  { transform: translate(-50%, -50%) rotate(0.7deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Moments of Wonder — weightless drift with a soft lavender presence */
.orbit-hub.g-wonder { animation: g-wonder 1.8s var(--ease) 1; }
@keyframes g-wonder {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  32%  { transform: translate(calc(-50% + 5px), calc(-50% - 14px)) rotate(1.2deg);
         box-shadow: 0 0 34px 4px rgba(var(--mood-rgb), 0.22); }
  62%  { transform: translate(calc(-50% - 6px), calc(-50% - 9px)) rotate(-0.9deg);
         box-shadow: 0 0 28px 3px rgba(var(--mood-rgb), 0.18); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* Everything Shifts — one slow visible morph, colour easing through */
.orbit-hub.g-shift { animation: g-shift 1.6s var(--ease) 1; }
@keyframes g-shift {
  0%   { transform: translate(-50%, -50%) scale(1, 1) rotate(0deg);
         border-radius: 50%; border-color: var(--line); }
  28%  { transform: translate(-50%, -50%) scale(1.06, 0.95) rotate(1.4deg);
         border-radius: 46% 54% 58% 42% / 55% 47% 53% 45%;
         border-color: var(--mood); }
  58%  { transform: translate(-50%, -50%) scale(0.95, 1.06) rotate(-1.2deg);
         border-radius: 56% 44% 44% 56% / 46% 56% 44% 54%;
         border-color: var(--mood); }
  100% { transform: translate(-50%, -50%) scale(1, 1) rotate(0deg);
         border-radius: 50%; border-color: var(--line); }
}

/* Reality Bends — quietly uncanny: asymmetric lean, smooth recover */
.orbit-hub.g-bend { animation: g-bend 1.5s var(--ease) 1; }
@keyframes g-bend {
  0%   { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
  24%  { transform: translate(calc(-50% + 2px), -50%) skew(3.6deg, 1.8deg) scale(1.03, 0.97); opacity: 1; }
  46%  { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) skew(-2.6deg, -1.6deg) scale(0.97, 1.04); opacity: 0.93; }
  70%  { transform: translate(calc(-50% + 1px), -50%) skew(1.4deg, 0.8deg) scale(1.01, 0.99); opacity: 1; }
  100% { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
}

/* Into the Unknown — deep inhale, a held beat, release with depth */
.orbit-hub.g-unknown { animation: g-unknown 1.8s var(--ease) 1; }
@keyframes g-unknown {
  0%   { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  38%  { transform: translate(-50%, -50%) scale(1.09);
         box-shadow: 0 0 0 10px rgba(var(--mood-rgb), 0.1), 0 22px 48px -18px rgba(var(--mood-rgb), 0.45); }
  58%  { transform: translate(-50%, -50%) scale(1.09);
         box-shadow: 0 0 0 10px rgba(var(--mood-rgb), 0.1), 0 22px 48px -18px rgba(var(--mood-rgb), 0.45); }
  82%  { transform: translate(-50%, -50%) scale(0.972);
         box-shadow: 0 0 0 2px rgba(var(--mood-rgb), 0.04), 0 8px 22px -14px rgba(var(--mood-rgb), 0.2); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* belt + braces: the media query mirrors the JS guard */
@media (prefers-reduced-motion: reduce) {
  .orbit-hub[class*='g-'] { animation: none !important; }
  .orbit-spark { display: none !important; }
}

/* ==== COMBO (2026-07-06): the EDGE centre on the GRAVITY keywords.
   The sun answers in colour, the hub's gestures keep their edge —
   the six feelings themselves are exactly as in Gravity. ==== */

/* 3 · the living centre: the sun itself takes the feeling's colour */
.orbit-field.answering::before {
  background: radial-gradient(closest-side,
    rgba(var(--mood-rgb, 214, 164, 94), 0.3),
    rgba(var(--mood-rgb, 214, 164, 94), 0.12) 48%,
    rgba(var(--mood-rgb, 214, 164, 94), 0) 74%);
}
.orbit-field::after { transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.orbit-field.answering::after {
  border-color: rgba(var(--mood-rgb, 192, 138, 62), 0.55);
  box-shadow: 0 0 24px rgba(var(--mood-rgb, 214, 164, 94), 0.26) inset,
              0 0 34px rgba(var(--mood-rgb, 214, 164, 94), 0.14);
}
/* the answering word, more legible and more present */
.orbit-hub .orbit-title { transition: color 0.3s var(--ease), font-size 0.3s var(--ease); }
.orbit-hub.answering .orbit-title { font-size: 1.5rem; }
@media (max-width: 620px) {
  .orbit-hub.answering .orbit-title { font-size: 1.22rem; }
}

/* 4 · gestures, one more step outward — same one-shot laws:
   identity at 100%, stripped on animationend, shadow never filter.
   (Redefining the keyframes overrides the Gravity set by order.) */
.orbit-hub.g-momentum { animation: g-momentum 1.4s var(--ease) 1; }
@keyframes g-momentum {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  30%  { transform: translate(-50%, calc(-50% - 18px)) scale(1.06);
         box-shadow: 0 24px 52px -16px rgba(var(--mood-rgb), 0.6); }
  56%  { transform: translate(-50%, calc(-50% - 6px)) scale(1.02);
         box-shadow: 0 12px 34px -16px rgba(var(--mood-rgb), 0.35); }
  78%  { transform: translate(-50%, calc(-50% - 11px)) scale(1.035);
         box-shadow: 0 18px 42px -16px rgba(var(--mood-rgb), 0.48); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
.orbit-hub.g-sparks { animation: g-sparks 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }
@keyframes g-sparks {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  16%  { transform: translate(-50%, -50%) rotate(-4.2deg) scale(1.06, 0.95); }
  40%  { transform: translate(-50%, -50%) rotate(3.2deg) scale(0.96, 1.05); }
  62%  { transform: translate(-50%, -50%) rotate(-1.8deg) scale(1.025, 0.99); }
  84%  { transform: translate(-50%, -50%) rotate(0.9deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.orbit-hub.g-wonder { animation: g-wonder 2s var(--ease) 1; }
@keyframes g-wonder {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  30%  { transform: translate(calc(-50% + 7px), calc(-50% - 20px)) rotate(1.6deg);
         box-shadow: 0 0 44px 6px rgba(var(--mood-rgb), 0.3); }
  62%  { transform: translate(calc(-50% - 8px), calc(-50% - 12px)) rotate(-1.2deg);
         box-shadow: 0 0 36px 5px rgba(var(--mood-rgb), 0.24); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
.orbit-hub.g-shift { animation: g-shift 1.7s var(--ease) 1; }
@keyframes g-shift {
  /* the brother's ruling: no blob morphing — transformation lives in
     COLOUR easing through, a slow rotation, a gentle breath of scale */
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg);
         border-color: var(--line); }
  30%  { transform: translate(-50%, -50%) scale(1.035) rotate(3deg);
         border-color: var(--mood); }
  62%  { transform: translate(-50%, -50%) scale(0.985) rotate(-2deg);
         border-color: var(--mood); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg);
         border-color: var(--line); }
}
.orbit-hub.g-bend { animation: g-bend 1.6s var(--ease) 1; }
@keyframes g-bend {
  0%   { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
  22%  { transform: translate(calc(-50% + 3px), -50%) skew(4.2deg, 2deg) scale(1.035, 0.965); opacity: 1; }
  44%  { transform: translate(calc(-50% - 5px), calc(-50% + 2px)) skew(-3.6deg, -2.2deg) scale(0.955, 1.05); opacity: 0.88; }
  68%  { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) skew(2deg, 1.1deg) scale(1.02, 0.985); opacity: 1; }
  100% { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
}
.orbit-hub.g-unknown { animation: g-unknown 2.1s var(--ease) 1; }
@keyframes g-unknown {
  0%   { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  34%  { transform: translate(-50%, -50%) scale(1.12); opacity: 0.94;
         box-shadow: 0 0 0 14px rgba(var(--mood-rgb), 0.14), 0 28px 60px -20px rgba(var(--mood-rgb), 0.55); }
  58%  { transform: translate(-50%, -50%) scale(1.12); opacity: 0.94;
         box-shadow: 0 0 0 14px rgba(var(--mood-rgb), 0.14), 0 28px 60px -20px rgba(var(--mood-rgb), 0.55); }
  84%  { transform: translate(-50%, -50%) scale(0.955);
         box-shadow: 0 0 0 3px rgba(var(--mood-rgb), 0.05), 0 10px 26px -16px rgba(var(--mood-rgb), 0.24); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* sparks a touch more visible */
.orbit-spark { width: 5px; height: 5px; }

/* ==== HUE (2026-07-06): the feeling's nuance rubs off on its cues.
   Scoped strictly to the Explorer room (#moments) — work pages and
   the library never change. Accents only: hairlines, the play
   button, the wave while playing, the enter link. Card surfaces stay
   parchment-calm. Fallbacks equal today's amber, so nothing shifts
   when no mood is set. ==== */
#moments .moment {
  border-bottom-color: rgba(var(--mood-rgb, 176, 125, 51), 0.22);
}
/* the waveform itself carries the feeling's colour — visible at
   rest, on phones too, no hover required */
#moments .moment .wave span {
  background: rgba(var(--mood-rgb, 176, 125, 51), 0.34);
}
#moments .wave-fill {
  background: linear-gradient(90deg, transparent,
    rgba(var(--mood-rgb, 192, 138, 62), 0.26));
}
/* the play button wears the mood at rest — an invitation */
#moments .play {
  border-color: rgba(var(--mood-rgb, 176, 125, 51), 0.5);
  color: var(--mood, var(--ink));
}
#moments .play:hover {
  border-color: var(--mood, var(--amber));
  color: var(--mood, var(--amber));
}
#moments .play.is-playing {
  background: var(--mood, var(--amber));
  border-color: var(--mood, var(--amber));
  color: #fffaf2;
}
#moments [data-cue] .play.is-playing ~ .meta .wave span {
  background: rgba(var(--mood-rgb, 214, 164, 94), 0.65);
}
/* the enter link speaks the mood at rest */
#moments .cue-enter {
  color: var(--mood, var(--ink-soft));
}
#moments .cue-enter:hover {
  color: var(--mood, var(--ink));
  border-bottom-color: rgba(var(--mood-rgb, 176, 125, 51), 0.4);
}

/* ==== CREDIT (2026-07-06): the name-tile — when a partner has no
   logo (workbook) or its file is missing (another computer), the
   tile quietly carries the NAME. Same footprint as image tiles, so
   rows mix cleanly; inherits night/trusted variants' borders. ==== */
.logo-tile.name-tile {
  font-family: var(--serif);
  font-size: 0.78rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--night-ink, #e7e0d2);
  padding: 10px;
  overflow: hidden;
}
.trusted .logo-tile.name-tile { color: var(--ink-soft); }

/* ============================================================
   LANTERN — the light in the visitor's hand (works shelf only)
   The shelf rests one register dimmer; a warm lamp follows the
   pointer or finger; the book nearest the light wakes with the
   SAME lift/sheen/foil the shelf already speaks on hover/touch.
   Sizes, bindings, arrows, the door: untouched.
   (Revert: delete this block + the LANTERN block in app.js.)
   ============================================================ */

/* 1 · Rest: quieter, never dark — every title stays readable.
      TUNE HERE: 0.72 = moodier, 0.85 = closer to today. */
.works-library .shelf-item {
  filter: brightness(0.78) saturate(0.92);
}

/* Waking (by lamp, hover, or the arrows) restores full light.
   Declared last so it wins over the rest-dim above. */
.works-library .shelf-item:hover,
.works-library .shelf-item.touched,
.works-library .shelf-item.lit {
  filter: brightness(1.07);
}

/* 2 · The lamp: a pool of warm light that follows the hand */
.shelf-lantern {
  position: absolute;
  top: -2.5rem; bottom: 0;
  width: min(240px, 60vw);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(closest-side,
    rgba(224, 190, 138, 0.16),
    rgba(224, 190, 138, 0.05) 55%,
    transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 450ms var(--ease);
}
.shelf-lantern.on { opacity: 1; }

/* 3 · The woken book: identical to the R13 hover/touched state.
      (Redeclared for the .lit class because this layer appends
      after R13 — if R13's hover block ever changes, mirror it
      here.) */
.shelf-item.lit {
  transform: rotate(180deg) translateY(-11px) scale(1.015);
  color: #fff;
  z-index: 2;
  box-shadow:
    0 2px 5px rgba(24, 16, 9, 0.45),
    0 10px 18px rgba(24, 16, 9, 0.35),
    0 34px 60px rgba(24, 16, 9, 0.42),
    inset 2px 0 0 rgba(255, 250, 240, 0.22),
    inset -2px 0 0 rgba(15, 10, 6, 0.32),
    inset 0 0 0 0.5px rgba(249, 243, 230, 0.26);
}
.shelf-item.lit::before { transform: translateY(-115%); }  /* the sheen sweeps */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .shelf-item.lit .spine-title { filter: brightness(1.12); }
}

/* 4 · Reduced motion: the light may still mean, but nothing moves */
@media (prefers-reduced-motion: reduce) {
  .shelf-lantern { transition: none; }
  .shelf-item.lit { transform: rotate(180deg); }
  .shelf-item.lit::before { display: none; }
}

/* ============================================================
   GROTTO + FOIL (trial, 2026-07-06) — two knobs on the Lantern:
   1) the shelf becomes a true grotto: near-black at the edges,
      warm umber where the lamp lives; the lamp itself burns a
      little stronger in the deeper dark.
   2) the foil-stamped titles rest in SILVER and turn GOLD only
      when a book wakes (lamp, hover, touch, or the arrows).
   (Revert: delete this block — Lantern v1 returns exactly.)
   ============================================================ */

/* 1 · the grotto */
.works-library {
  background:
    radial-gradient(120% 90% at 50% 42%,
      #191410 0%,
      #0e0f12 55%,
      #08090b 100%);
}
.works-library .shelf-item {
  filter: brightness(0.74) saturate(0.9);   /* moodier rest — the
                                               brief's darker knob */
}
.shelf-lantern {
  background: radial-gradient(closest-side,
    rgba(224, 190, 138, 0.22),
    rgba(224, 190, 138, 0.07) 55%,
    transparent 75%);
}

/* 2 · silver at rest, gold when woken */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .spine-title {
    background: linear-gradient(105deg,
      #b9b6ae, #e9e6de 45%, #97928a 62%, #b9b6ae);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .shelf-item:hover .spine-title,
  .shelf-item.touched .spine-title,
  .shelf-item.lit .spine-title {
    background: linear-gradient(105deg,
      #e3bd76, #f6e4b3 45%, #cfa457 62%, #e3bd76);
    -webkit-background-clip: text;
    background-clip: text;
    filter: brightness(1.12);
  }
}

/* ============================================================
   CAVE AIR (trial, 2026-07-06) — texture and depth for the
   grotto, and a luminous "Our Works".
   The air: three frozen smoke-plumes (soft radial clouds), a
   fine stone grain (static SVG turbulence, served as a plain
   image), and a breathing-space vignette. Everything is
   painted ONCE; nothing moves; nothing idles.
   (Revert: delete this block — the plain grotto returns.)
   ============================================================ */

/* 1 · the air itself: grain + plumes + vignette + the ground */
.works-library {
  background:
    /* stone grain — static turbulence, barely-there */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E"),
    /* frozen smoke: three warm plumes hanging in the dark */
    radial-gradient(52% 38% at 22% 30%, rgba(96, 74, 48, 0.16), transparent 70%),
    radial-gradient(64% 44% at 78% 62%, rgba(70, 58, 44, 0.14), transparent 72%),
    radial-gradient(46% 60% at 50% 88%, rgba(38, 33, 28, 0.35), transparent 75%),
    /* depth vignette: the walls recede */
    radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.5) 100%),
    /* the grotto ground (from the GROTTO layer, kept) */
    radial-gradient(120% 90% at 50% 42%,
      #191410 0%,
      #0e0f12 55%,
      #08090b 100%);
  background-blend-mode: soft-light, normal, normal, normal, normal, normal;
}

/* 2 · "Our Works" steps into the light: quiet foil, clearly seen */
.works-library .chapter-title {
  color: #ecdcb4;                       /* fallback: warm candle ink */
  text-shadow: 0 0 26px rgba(224, 190, 138, 0.22);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .works-library .chapter-title {
    background: linear-gradient(105deg, #e3bd76, #f6e4b3 45%, #cfa457 62%, #e3bd76);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.works-library .shelf-line { color: rgba(224, 208, 178, 0.72); }
.works-library .chapter-mark { color: rgba(224, 190, 138, 0.55); }

/* ============================================================
   UV REVEAL + THE DOT RETIRES (trial, 2026-07-06)
   1) "Our Works" arrives like writing under a UV lamp: the title
      waits unlit in the dark; when the room enters view, a warm
      band of light sweeps across it ONCE and leaves the foil lit.
      One-shot, scroll-triggered (the chapter-mark draw's own
      convention), never repeated, never idle.
   2) The little companion dot retires: its only home was this
      shelf, and the lantern in the visitor's hand now carries the
      light there.
   (Revert: delete this block — CAVE AIR + the dot return.)
   ============================================================ */

/* 1 · the unlit writing: foil present but masked to a whisper */
@supports ((-webkit-mask-image: linear-gradient(black, black)) or (mask-image: linear-gradient(black, black))) {
  .works-library .chapter-title {
    -webkit-mask-image: linear-gradient(105deg,
      rgba(0,0,0,1) 30%, rgba(0,0,0,0.1) 46%, rgba(0,0,0,0.1) 100%);
    mask-image: linear-gradient(105deg,
      rgba(0,0,0,1) 30%, rgba(0,0,0,0.1) 46%, rgba(0,0,0,0.1) 100%);
    -webkit-mask-size: 320% 100%;
    mask-size: 320% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  /* the lamp passes: the bright edge travels the title once and
     the light stays behind it */
  .works-library.in .chapter-title {
    animation: uv-sweep 1.7s cubic-bezier(0.33, 0, 0.2, 1) 0.45s forwards;
  }
  @keyframes uv-sweep {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  }
  /* reduced motion: the writing is simply there — no sweep */
  @media (prefers-reduced-motion: reduce) {
    .works-library .chapter-title,
    .works-library.in .chapter-title {
      -webkit-mask-image: none; mask-image: none; animation: none;
    }
  }
}

/* 2 · the companion dot retires from its only home */
.works-dot { display: none !important; }

/* ============================================================
   HUES (2026-07-06) — founders' tuning of the tuning:
   1) Trivial-Pursuit resting wedges: every keyword visibly wears
      its OWN colour at rest — tinted fill, coloured edge, coloured
      ink — six unmistakable directions before any interaction.
   2) The chosen wedge intensifies instead of turning into a solid
      slab (the 'white background at selection' cured).
   3) Gestures dialled DOWN and CONTAINED: nothing presses beyond
      the circle — lifts, drifts and expansions all live inside the
      ring; the hub's box stays an ellipse so auras stay organic.
   (Revert: delete this block.)
   ============================================================ */

/* organic auras (kept from the square cure) */
.orbit-hub {
  border-radius: 50%;
  padding: 1.6rem 1.9rem;
}

/* 1 · the wedges: six colours, present at rest */
.orbit-field .feeling {
  background: rgba(var(--mood-rgb, 192, 138, 62), 0.12);
  border-color: rgba(var(--mood-rgb, 192, 138, 62), 0.55);
  color: color-mix(in srgb, var(--mood, var(--amber)) 55%, #3d3833);
  box-shadow: 0 6px 20px rgba(var(--mood-rgb, 176, 125, 51), 0.12);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .orbit-field .feeling { color: var(--ink); }
}
.orbit-field .feeling:hover {
  background: rgba(var(--mood-rgb, 192, 138, 62), 0.2);
  border-color: var(--mood, var(--amber));
  color: var(--mood, var(--ink));
}

/* 2 · the choice: the wedge deepens — never a solid slab */
.orbit-field .feeling.active {
  background: rgba(var(--mood-rgb, 192, 138, 62), 0.22);
  border: 1.5px solid var(--mood, var(--amber));
  color: color-mix(in srgb, var(--mood, var(--amber)) 78%, #2a2622);
  box-shadow: 0 0 0 3px rgba(var(--mood-rgb, 192, 138, 62), 0.16),
              0 12px 30px rgba(var(--mood-rgb, 176, 125, 51), 0.22);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .orbit-field .feeling.active { color: var(--mood, var(--amber)); }
}

/* 3 · contained gestures — same laws, indoor voices */
.orbit-hub.g-momentum { animation: g-momentum 1.35s var(--ease) 1; }
@keyframes g-momentum {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  30%  { transform: translate(-50%, calc(-50% - 9px)) scale(1.03);
         box-shadow: 0 12px 30px -14px rgba(var(--mood-rgb), 0.5); }
  58%  { transform: translate(-50%, calc(-50% - 3px)) scale(1.01);
         box-shadow: 0 7px 20px -14px rgba(var(--mood-rgb), 0.3); }
  78%  { transform: translate(-50%, calc(-50% - 6px)) scale(1.02);
         box-shadow: 0 9px 24px -14px rgba(var(--mood-rgb), 0.4); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
.orbit-hub.g-sparks { animation: g-sparks 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }
@keyframes g-sparks {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  16%  { transform: translate(-50%, -50%) rotate(-3.2deg) scale(1.04, 0.965); }
  40%  { transform: translate(-50%, -50%) rotate(2.4deg) scale(0.97, 1.035); }
  62%  { transform: translate(-50%, -50%) rotate(-1.4deg) scale(1.02, 0.99); }
  84%  { transform: translate(-50%, -50%) rotate(0.7deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.orbit-hub.g-wonder { animation: g-wonder 2.2s var(--ease) 1; }
@keyframes g-wonder {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  30%  { transform: translate(calc(-50% + 4px), calc(-50% - 10px)) rotate(1.2deg);
         box-shadow: 0 0 30px 4px rgba(var(--mood-rgb), 0.3); }
  62%  { transform: translate(calc(-50% - 5px), calc(-50% - 6px)) rotate(-0.9deg);
         box-shadow: 0 0 24px 3px rgba(var(--mood-rgb), 0.24); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
.orbit-hub.g-shift { animation: g-shift 1.9s var(--ease) 1; }
@keyframes g-shift {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg);
         border-color: var(--line); background-color: transparent; }
  28%  { transform: translate(-50%, -50%) scale(1.025) rotate(3deg);
         border-color: var(--mood);
         background-color: rgba(var(--mood-rgb), 0.08); }
  60%  { transform: translate(-50%, -50%) scale(0.985) rotate(-2.2deg);
         border-color: var(--mood);
         background-color: rgba(var(--mood-rgb), 0.04); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg);
         border-color: var(--line); background-color: transparent; }
}
.orbit-hub.g-bend { animation: g-bend 1.6s var(--ease) 1; }
@keyframes g-bend {
  0%   { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
  20%  { transform: translate(calc(-50% + 3px), -50%) skew(3.8deg, 1.8deg) scale(1.03, 0.97); opacity: 1; }
  36%  { transform: translate(calc(-50% - 3px), calc(-50% + 2px)) skew(-2.8deg, -1.6deg) scale(0.97, 1.035); opacity: 0.9; }
  42%  { transform: translate(calc(-50% - 2px), calc(-50% + 1px)) skew(-2.2deg, -1.2deg) scale(0.98, 1.025); opacity: 0.98; }
  58%  { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) skew(1.8deg, 0.9deg) scale(1.015, 0.99); opacity: 0.93; }
  76%  { transform: translate(-50%, -50%) skew(-0.8deg, -0.4deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
}
.orbit-hub.g-unknown { animation: g-unknown 2.2s var(--ease) 1; }
@keyframes g-unknown {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  34%  { transform: translate(-50%, -50%) scale(1.06); opacity: 0.92;
         box-shadow: 0 0 0 8px rgba(var(--mood-rgb), 0.12), 0 16px 38px -18px rgba(var(--mood-rgb), 0.5); }
  60%  { transform: translate(-50%, -50%) scale(1.06); opacity: 0.92;
         box-shadow: 0 0 0 8px rgba(var(--mood-rgb), 0.12), 0 16px 38px -18px rgba(var(--mood-rgb), 0.5); }
  86%  { transform: translate(-50%, -50%) scale(0.965); opacity: 0.98;
         box-shadow: 0 0 0 2px rgba(var(--mood-rgb), 0.04), 0 7px 18px -12px rgba(var(--mood-rgb), 0.2); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* sparks dots: kept visible, contained travel handled in JS */
.orbit-spark { width: 5px; height: 5px; }

/* ============================================================
   THE CIRCLE YIELDS (2026-07-06) — founders' rule: the text may
   NEVER cross its circle. Worst case was MOMENTUM at answering
   size. Ruling applied: when the sun answers, the old ring
   dissolves — the word stands free in the mood glow; at rest the
   ring returns and the small rest text lives comfortably inside.
   The glow (::before) stays; only the drawn line yields.
   (Revert: delete this block.)
   ============================================================ */
.orbit-field::after {
  transition: opacity 420ms var(--ease), border-color 420ms var(--ease);
}
.orbit-field.answering::after {
  opacity: 0;                      /* the circle yields to the word */
}
@media (prefers-reduced-motion: reduce) {
  .orbit-field::after { transition: none; }
  .orbit-field.answering::after { opacity: 0; }   /* the rule holds without motion */
}

/* ============================================================
   PORTRAITS BREATHE (2026-07-07) — the hosts stay through the
   visit (collapse retired in app.js), and their names get air
   beneath them before the dark of OUR WORKS begins.
   (Revert: delete this block + restore the collapse lines.)
   ============================================================ */
#explorer-portrait {
  margin-bottom: clamp(2.8rem, 7vw, 5rem);
}
#explorer-portrait .ep-caption {
  margin-bottom: 0.4rem;
}

/* ============================================================
   SWEEP (2026-07-07): future counts welcome — the credits row's
   entrance delays now cover ANY number of tiles (7+ used to
   appear without their stagger). (Revert: delete this block.)
   ============================================================ */
.trusted.in .logo-tile:nth-child(n+7) { animation-delay: 0.4s; }   /* 1/9: kortere – båndet kører nu */

/* =====================================================================
   PHASE1 (2026-07-07) — launch infrastructure, structural only.
   No visual change to the designed experience.
   Revert: delete this whole block (+ the 2 PHASE1 lines in buildWorks
   and regenerate index.html from a pre-Phase-1 template).
   1) .sr-only — the page's single crawlable H1, visually silent.
   2) .js #works-prerender — the generator's crawlable Works copy,
      hidden the instant the app is known to run (html.js class);
      app.js removes the node at boot. Without JS it stays readable —
      the honest no-JS fallback.
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.js #works-prerender { display: none; }
#works-prerender { max-width: var(--measure); margin: 0 auto; padding: 2rem var(--gap); }

/* =====================================================================
   PHASE2 (2026-07-07) — mobile & robustness hardening. Structural only;
   nothing here changes the designed look on any current desktop view.
   Revert: delete this whole block (+ the PHASE2 lines in app.js).
   ===================================================================== */

/* Safe areas — notch and home-bar phones never clip the frame.
   (Template gained viewport-fit=cover in the same phase.) */
.topbar { padding-top: max(0.8rem, env(safe-area-inset-top)); }
.site-end .fe-inner { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
#wf-skip { bottom: max(1.4rem, env(safe-area-inset-bottom)); }

/* Anchors land below the fixed bar, never underneath it.
   scroll-margin only acts during anchor/scrollIntoView — zero layout. */
[id] { scroll-margin-top: 4.5rem; }

/* svh fallback for engines without small-viewport units (Chrome <108,
   older Android WebView): plain vh first, svh overrides where known. */
.hero, .explorer { min-height: 100vh; min-height: 100svh; }

/* Touch targets — invisible hit-area extension on coarse pointers.
   No visual change: the ::after halo is transparent and only exists
   where fingers are the pointer. */
@media (pointer: coarse) {
  /* PKG FIRSTLIGHT: the primary listening controls now get the same
     invisible touch halo as the chips (44px targets on phones). */
  .chip, .feeling, .so-close, .shelf-page,
  .lb-close, .lb-prev, .lb-next, .proj-more-trigger,
  .play, .mood-btn, .rr-btn {
    position: relative;
  }
  .chip::after, .feeling::after, .so-close::after, .shelf-page::after,
  .lb-close::after, .lb-prev::after, .lb-next::after, .proj-more-trigger::after,
  .play::after, .mood-btn::after, .rr-btn::after { /* PKG SCENESKIFT: halo moved from the .proj-more CONTAINER (whose ::after covered the button and ate every tap — Production details dead on phones) onto the trigger button itself */
    content: ""; position: absolute; inset: -8px;
  }
}

/* Overlays own their scroll on touch — no pull-to-refresh behind them */
.search-overlay, .lightbox { overscroll-behavior: contain; }

/* The golden companion prepares its only animated property */
.works-dot { will-change: transform; }

/* =====================================================================
   PHASE3 (2026-07-07) — THE FILM component (see app.js PHASE3 block).
   Shares the site's tokens; lives inside the existing .work-video
   wrapper, so light and night worlds both dress it correctly.
   Revert: delete this whole block + the app.js PHASE3 block.
   ===================================================================== */
.film-wrap { margin: 0 0 0.6rem; }
.film {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--night-2, #1f262b);
  aspect-ratio: var(--film-ar, 16 / 9);   /* CLS-proof before any media */
}
.film-poster {
  display: block; width: 100%; height: 100%;
  padding: 0; position: relative; cursor: pointer;
}
.film-poster img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.film-poster .placeholder { position: absolute; inset: 0; }
.film-glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.film-glyph > span {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 246, 239, 0.92); color: var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 220ms var(--ease);
}
.film-glyph svg { width: 22px; height: 22px; }
.film-poster:hover .film-glyph > span,
.film-poster:focus-visible .film-glyph > span { transform: scale(1.06); }
.film-stage { position: absolute; inset: 0; }
.film-stage video, .film-stage iframe {
  width: 100%; height: 100%; display: block; border: 0;
  object-fit: contain; background: var(--night, #161b1f);
}
/* loading is a breath, in the audio engine's own tempo — never a spinner */
@keyframes film-breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.film.is-loading .film-stage { animation: film-breath 1.6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) {
  .film.is-loading .film-stage { animation: none; }
}
.film-error {
  position: absolute; inset: 0; margin: 0; padding: 1.2rem;
  display: grid; place-items: center; text-align: center;
  color: var(--night-ink, #ece4d7); font-family: var(--serif);
}
.film-error a { color: var(--night-amber, #d8a85a); }
.film-caption {
  margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-soft);
}
.work-lysfald .film-caption,
[class*="work-"] .on-night .film-caption { color: var(--night-soft, #9fb0ad); }

/* =====================================================================
   HIDDENFIX (2026-07-07) — the error card obeys `hidden` again.
   An author display:grid always beats the UA's [hidden]{display:none},
   so the card was visible from birth. Explicit is honest:
   ===================================================================== */
.film-error[hidden], .film-stage[hidden] { display: none; }

/* ============================================================
   EXHIBITION (2026-07-07) — the final Explorer refinement.
   Chosen direction: the philosophy of Variant C, "the circle
   makes room" — the word never shrinks; the room breathes wider
   around it, with no visible new ornament. Ink on paper, not
   chips. Explorer only; logic, geometry and hit areas untouched.
   Transform/opacity/background only — no filters, no idle motion,
   nothing infinite. Revert: delete this whole block.
   ============================================================ */

/* ---- 1 · The circle makes room -------------------------------------
   At rest the ring recedes one step toward atmosphere. When a
   feeling answers, the circle GROWS in one slow exhale — transform
   only — wide enough that the full-size word sits inside with air,
   its line dissolving into the glow rather than asserting itself.
   The founders' law holds because the room adapts to the word,
   never the word to the room. */
.orbit-field::after {
  border-color: rgba(192, 138, 62, 0.26);
  transition: transform 650ms var(--ease),
              border-color 650ms var(--ease),
              box-shadow 650ms var(--ease);
}
.orbit-field.answering::after {
  transform: scale(1.16);
  border-color: rgba(var(--mood-rgb, 192, 138, 62), 0.3);
  box-shadow: 0 0 30px rgba(var(--mood-rgb, 214, 164, 94), 0.22) inset,
              0 0 44px rgba(var(--mood-rgb, 214, 164, 94), 0.15);
}
.orbit-hub::before { transition: transform 650ms var(--ease); }
.orbit-field.answering .orbit-hub::before {
  transform: translate(-50%, -50%) scale(1.12);
}
.orbit-field::before { transition: transform 650ms var(--ease); }
.orbit-field.answering::before { transform: translate(-50%, -50%) scale(1.06); }

/* ---- 2 · The word, set like print ----------------------------------
   The answering word is the hero: full size, one unbroken line, a
   slow arrival rather than a pop. The hub itself makes room — its
   width constraint yields while the word is spoken (8.5rem would
   have wrapped "momentum" at this size). */
.orbit-hub .orbit-title {
  letter-spacing: 0.015em;
  transition: color 0.3s var(--ease), font-size 0.5s var(--ease);
}
.orbit-hub.answering { max-width: 14rem; }
.orbit-hub.answering .orbit-title {
  font-size: clamp(1.55rem, 3vw, 1.8rem);
  white-space: nowrap;
}
@media (max-width: 620px) {
  .orbit-hub.answering { max-width: none; }
  .orbit-hub.answering .orbit-title { font-size: 1.3rem; }
}

/* ---- 3 · The feelings: ink on paper, not chips ----------------------
   The white card, the hairline border and the floating shadow
   retire — the six titles are SET on the paper, like a printed
   programme. Colour behaves as ink: it deepens under the hand; a
   printer's rule draws beneath the word; when chosen, the ink
   washes into the paper — never a filled button, never an LED. */
.orbit-field .feeling {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #3d362e;
  font-size: 1.08rem;
  letter-spacing: 0.012em;
  background-image: linear-gradient(var(--mood, var(--amber)), var(--mood, var(--amber)));
  background-repeat: no-repeat;
  background-position: bottom 0.5rem center;
  background-size: 0 1px;
  transition: color 200ms var(--ease), background-size 280ms var(--ease),
              background-color 280ms var(--ease), border-color 280ms var(--ease),
              transform 200ms var(--ease), opacity 200ms var(--ease),
              scale 180ms var(--ease);
}
.orbit-field .feeling:hover {
  color: var(--mood, var(--amber));
  border-color: transparent;
  box-shadow: none;
  background-size: 2.4rem 1px;
}
.orbit-field .feeling:focus-visible { background-size: 2.4rem 1px; }
.orbit-field .feeling.active {
  background-color: rgba(var(--mood-rgb, 192, 138, 62), 0.13);
  background-size: 0 1px;
  border-color: rgba(var(--mood-rgb, 192, 138, 62), 0.32);
  color: var(--mood, var(--amber));
  font-weight: 600;
  box-shadow: none;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  /* ink, not pigment: the chosen word reads as the mood mixed into
     the site's ink — legible for every one of the six colours */
  .orbit-field .feeling.active { color: color-mix(in srgb, var(--mood, var(--amber)) 68%, #2b2722); }
  .orbit-hub.answering .orbit-title { color: color-mix(in srgb, var(--mood, var(--amber)) 78%, #2b2722); }
}
.orbit-field .feeling.dim { opacity: 0.35; filter: none; }
@media (max-width: 620px) {
  .orbit-field .feeling { font-size: 0.9rem; }
}

/* ---- 4 · Gestures: same size, better phrasing -----------------------
   +10–15% expressiveness through musical timing alone — durations,
   amplitudes and the laws unchanged (one-shot, identity at 100%,
   transform/shadow only). Wonder gains a last small lift before it
   settles; Unknown holds its breath a touch longer and over-settles
   by a hair; Bend recovers through one final faint lean. */
@keyframes g-wonder {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  32%  { transform: translate(calc(-50% + 5px), calc(-50% - 14px)) rotate(1.2deg);
         box-shadow: 0 0 34px 4px rgba(var(--mood-rgb), 0.22); }
  62%  { transform: translate(calc(-50% - 6px), calc(-50% - 9px)) rotate(-0.9deg);
         box-shadow: 0 0 28px 3px rgba(var(--mood-rgb), 0.18); }
  84%  { transform: translate(calc(-50% + 2px), calc(-50% - 4px)) rotate(0.4deg);
         box-shadow: 0 0 20px 2px rgba(var(--mood-rgb), 0.12); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
@keyframes g-unknown {
  0%   { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  36%  { transform: translate(-50%, -50%) scale(1.09);
         box-shadow: 0 0 0 10px rgba(var(--mood-rgb), 0.1), 0 22px 48px -18px rgba(var(--mood-rgb), 0.45); }
  64%  { transform: translate(-50%, -50%) scale(1.09);
         box-shadow: 0 0 0 10px rgba(var(--mood-rgb), 0.1), 0 22px 48px -18px rgba(var(--mood-rgb), 0.45); }
  84%  { transform: translate(-50%, -50%) scale(0.972);
         box-shadow: 0 0 0 2px rgba(var(--mood-rgb), 0.04), 0 8px 22px -14px rgba(var(--mood-rgb), 0.2); }
  93%  { transform: translate(-50%, -50%) scale(1.008); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
@keyframes g-bend {
  0%   { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
  24%  { transform: translate(calc(-50% + 2px), -50%) skew(3.6deg, 1.8deg) scale(1.03, 0.97); opacity: 1; }
  46%  { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) skew(-2.6deg, -1.6deg) scale(0.97, 1.04); opacity: 0.93; }
  70%  { transform: translate(calc(-50% + 1px), -50%) skew(1.4deg, 0.8deg) scale(1.01, 0.99); opacity: 1; }
  88%  { transform: translate(-50%, -50%) skew(-0.5deg, -0.25deg); opacity: 0.99; }
  100% { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
}

/* ---- 5 · Reduced motion: every breath becomes a state ------------- */
@media (prefers-reduced-motion: reduce) {
  .orbit-field::after, .orbit-field::before,
  .orbit-hub::before, .orbit-field .feeling,
  .orbit-hub .orbit-title { transition: none; }
  .orbit-field.answering::after { transform: none; }
  .orbit-field.answering::before,
  .orbit-field.answering .orbit-hub::before { transform: translate(-50%, -50%); }
}

/* ============================================================
   TRIO (2026-07-07) — three founders' answers on the Explorer.
   Revert: delete this block (+ the TRIO line in app.js MOODS).
   ============================================================ */

/* 1 · The sun keeps the circle — the glow was the one oval left
   (20 x 18rem). Now circular at every size, like the ring. */
.orbit-field::before { width: 20rem; height: 20rem; }
@media (max-width: 620px) {
  .orbit-field::before { width: 16rem; height: 16rem; }
}

/* 1b · Varied and organic, as in the brother's variant — but as
   ink, not chips: each feeling rests with a whisper of its own
   mood mixed into the ink. Still print; never LED. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .orbit-field .feeling {
    color: color-mix(in srgb, var(--mood, var(--amber)) 26%, #3d362e);
  }
}

/* 3 · One word speaks. While a feeling answers, the small label
   line falls silent — the exhibition states the feeling, the
   interface stops explaining it. At rest the invitation returns. */
.orbit-hub .orbit-line { transition: opacity 300ms var(--ease); }
.orbit-hub.answering .orbit-line { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .orbit-hub .orbit-line { transition: none; }
}

/* ============================================================
   SPHERE (2026-07-07) — founders' correction of TRIO.
   The constellation is a true circle (JS); the phone field
   tightens around it so the circle fills the air instead of
   floating in it; the grown ring on phones eases to 1.12 so it
   never kisses the inner edge of the satellites; the answering
   words sit on two authored lines. Revert: delete this block
   + the two SPHERE blocks in app.js.
   ============================================================ */
.orbit-hub.answering .orbit-title { line-height: 1.14; }
@media (max-width: 620px) {
  .orbit-field { height: min(96vw, 26rem); }
  .orbit-field.answering::after { transform: scale(1.12); }
}

/* ============================================================
   MOONRISE (2026-07-07) — five founders' notes on the sphere.
   Revert: delete this block + the three MOONRISE edits in app.js.
   ============================================================ */

/* 1 · Air between the moon and its satellites: a taller stage on
   desktop lets the larger circle breathe (radius factor in JS). */
.orbit-field { height: clamp(28rem, 62vh, 34rem); }
@media (max-width: 620px) {
  .orbit-field { height: min(100vw, 27rem); }
}

/* 2 · The chosen words, set with the brother's weight — and with
   more air to the edge: the clearing and the sphere make more room. */
.orbit-hub.answering .orbit-title { font-weight: 600; }
.orbit-field.answering .orbit-hub::before {
  transform: translate(-50%, -50%) scale(1.18);
}
.orbit-field.answering::before { transform: translate(-50%, -50%) scale(1.1); }

/* 3 · The founders' oldest law returns: the ring dissolves the
   instant the sun speaks — straight to the sphere, no temporary
   circle riding the gestures. It returns gently at rest. */
.orbit-field::after {
  transition: opacity 500ms var(--ease), border-color 500ms var(--ease),
              box-shadow 500ms var(--ease), transform 500ms var(--ease);
}
.orbit-field.answering::after {
  opacity: 0;
  transform: none;
  transition: opacity 90ms var(--ease);
}

/* 4 · Into the Unknown — starwards: the moon and its words begin a
   breath away, rush toward you, hold, then settle. Finite, transform
   and shadow only, true stillness at 100%. */
.orbit-hub.g-unknown { animation: g-unknown 2s var(--ease) 1; }
@keyframes g-unknown {
  0%   { transform: translate(-50%, -50%) scale(0.88); opacity: 0.75;
         box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  55%  { transform: translate(-50%, -50%) scale(1.16); opacity: 1;
         box-shadow: 0 0 0 14px rgba(var(--mood-rgb), 0.1),
                     0 26px 60px -20px rgba(var(--mood-rgb), 0.5); }
  74%  { transform: translate(-50%, -50%) scale(1.16); }
  100% { transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* 5 · The opening: the moon rises first; the six satellites are born
   at the moon and fall into their places, one second of choreography
   after the room appears. Once placed, the live styles take over. */
html.wf-entered .orbit { animation: wf-arrive 0.4s var(--ease) 2s forwards; }
html.wf-entered .orbit-hub:not(.placed) {
  /* ENCORE fix: the intro rule outranked the gesture rules
     (.orbit-hub.g-shift etc.) and silenced every gesture after the
     choreography. It now applies only UNTIL the moon has risen —
     then it steps aside entirely and the gestures own the stage. */
  opacity: 0;
  animation: moonrise 0.55s var(--ease) 2.05s forwards;
}
@keyframes moonrise {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
html.wf-entered .orbit-field .feeling:not(.placed) {
  opacity: 0;
  animation: sat-place 0.62s var(--ease)
             calc(2.45s + var(--sat-i, 0) * 0.09s) forwards;
}
@keyframes sat-place {
  from { opacity: 0;
         transform: translate(calc(-50% + var(--cx, 0px)),
                              calc(-50% + var(--cy, 0px))) scale(0.55); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.wf-entered .orbit,
  html.wf-entered .orbit-hub,
  html.wf-entered .orbit-field .feeling { animation: none; opacity: 1; }
  .orbit-hub.g-unknown { animation: none !important; }
  .orbit-field.answering::after { transition: none; }
}

/* ============================================================
   AURA (2026-07-07) — two founders' notes.
   1 · No frames, anywhere: the chosen feeling loses its border and
   its flat pill wash. In their place: a spherical, feathered glow —
   a radial ink-light dying out before the box's own edge, plus a
   soft wide halo along the satellite. Light, not geometry.
   2 · (JS) balanced two-line split: "Moments / of Wonder".
   Revert: delete this block + the AURA block in app.js.
   ============================================================ */
.orbit-field .feeling.active {
  border-color: transparent;
  background-color: transparent;
  background-image: radial-gradient(ellipse 78% 115% at 50% 50%,
    rgba(var(--mood-rgb, 192, 138, 62), 0.2),
    rgba(var(--mood-rgb, 192, 138, 62), 0.09) 55%,
    rgba(var(--mood-rgb, 192, 138, 62), 0) 80%);
  background-position: center;
  background-size: 100% 100%;
  box-shadow: 0 0 34px 8px rgba(var(--mood-rgb, 192, 138, 62), 0.13);
}
/* the press echo, equally frameless */
.orbit-field .feeling:active { border-color: transparent; }

/* ============================================================
   FRAMELESS (2026-07-07) — the founders' final word on frames.
   An old R20 hover rule still painted a 2px ring in the very
   moment of hover; the button also still carried its original
   0.5px border box. Rather than another layer in the cascade
   race, this is a GUARANTEE: no rule, old or future, can put a
   frame on a satellite. Only two things survive: the keyboard
   focus ring (accessibility) and the chosen feeling's spherical
   aura. Revert: delete this block.
   ============================================================ */
.orbit-field .feeling,
.orbit-field .feeling:hover,
.orbit-field .feeling:active,
.orbit-field .feeling.active,
.orbit-field .feeling.dim {
  border: 0 !important;
}
.orbit-field .feeling,
.orbit-field .feeling:hover:not(.active),
.orbit-field .feeling:active:not(.active) {
  box-shadow: none !important;
}
/* a mouse click must never leave a focus frame either —
   keyboard focus (:focus-visible) keeps its ring untouched */
.orbit-field .feeling:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   GOODBYES (2026-07-07) — the founders adopt the sorting card:
   Soft Goodbyes (North-Sea teal) replaces Reality Bends; the
   surreal lives on inside Everything Shifts. Its gesture is the
   slow sink — downward, the one direction no other box owns —
   and the frame bug on chosen satellites is cured at the root:
   the AURA glow was painted INSIDE the pill box and clipped by
   its edge (the visible "ramme" on Into the Unknown / Everything
   Shifts). It is now painted BEHIND and BEYOND the box, feathering
   to nothing before its own edge — frameless by construction.
   Revert: delete this block + GOODBYES lines in app.js/generate.py
   + workbook v3_8 (v3_7 kept).
   ============================================================ */

/* ---- Soft Goodbyes: the slow sink (one-shot, transform+shadow) ---- */
.orbit-hub.g-farewell { animation: g-farewell 2.1s var(--ease) 1; }
@keyframes g-farewell {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  42%  { transform: translate(-50%, calc(-50% + 12px)) scale(0.985);
         box-shadow: 0 4px 22px -8px rgba(var(--mood-rgb), 0.32); }
  64%  { transform: translate(-50%, calc(-50% + 12px)) scale(0.985); }  /* the breath rests at the bottom */
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* ---- the chosen feeling, truly frameless ----
   No background inside the clipped pill, no pill-shaped shadow:
   a spherical glow painted on ::before, larger than the box,
   dying to zero well before its own edge. Ink-light in the air. */
.orbit-field .feeling.active {
  background-image: none;
  background-color: transparent;
  box-shadow: none !important;
}
.orbit-field .feeling.active::before {
  content: '';
  position: absolute;
  inset: -1.4rem -1.8rem;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(var(--mood-rgb, 192, 138, 62), 0.22),
    rgba(var(--mood-rgb, 192, 138, 62), 0.1) 52%,
    rgba(var(--mood-rgb, 192, 138, 62), 0) 74%);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .orbit-hub.g-farewell { animation: none !important; }
}

/* ============================================================
   SIXFOLD (2026-07-07) — the final guarantee, all states.
   The founders still see a frame at the instant of selection.
   This rule outranks EVERYTHING for every paint property on the
   satellites, in every state — then hand-reinstates the ONLY two
   inks allowed: the printer's rule under the resting hand, and
   the chosen feeling's floating spherical glow (::before, painted
   beyond the box, untouched by this reset).
   Revert: delete this block.
   ============================================================ */
.orbit .orbit-field .feeling,
.orbit .orbit-field .feeling:hover,
.orbit .orbit-field .feeling:active,
.orbit .orbit-field .feeling:focus,
.orbit .orbit-field .feeling.active,
.orbit .orbit-field .feeling.active:hover,
.orbit .orbit-field .feeling.dim {
  background: transparent none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* the one permitted ink: the hairline that draws under the hand */
.orbit .orbit-field .feeling:hover:not(.active),
.orbit .orbit-field .feeling:focus-visible:not(.active) {
  background-image: linear-gradient(var(--mood, var(--amber)), var(--mood, var(--amber))) !important;
  background-repeat: no-repeat !important;
  background-position: bottom 0.5rem center !important;
  background-size: 2.4rem 1px !important;
}
/* keyboard focus keeps its ring — accessibility is not a frame */
.orbit .orbit-field .feeling:focus-visible {
  outline: 2px solid rgba(var(--mood-rgb, 192, 138, 62), 0.6) !important;
  outline-offset: 3px;
}

/* ============================================================
   RINGFRI (2026-07-07) — the frames were on the MOON, not the
   satellites. (a) g-unknown carried a solid 14px SPREAD ring in
   its box-shadow — the thick grey ring on Into the Unknown.
   (b) The paper clearing behind the hub held opaque to 50% of its
   radius, cutting a visible disc edge against the coloured sun
   while answering — the rimmed oval on Everything Shifts.
   Law from now on: gestures may GLOW (blur), never RING (spread).
   Revert: delete this block.
   ============================================================ */

/* a · starwards keeps its zoom; the held ring becomes pure light */
.orbit-hub.g-unknown { animation: g-unknown 2s var(--ease) 1; }
@keyframes g-unknown {
  0%   { transform: translate(-50%, -50%) scale(0.88); opacity: 0.75;
         box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  55%  { transform: translate(-50%, -50%) scale(1.16); opacity: 1;
         box-shadow: 0 0 46px 8px rgba(var(--mood-rgb), 0.2); }
  74%  { transform: translate(-50%, -50%) scale(1.16);
         box-shadow: 0 0 40px 7px rgba(var(--mood-rgb), 0.16); }
  100% { transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}

/* b · the clearing feathers across most of its radius — no disc
   edge in any answering colour, only light meeting light */
.orbit-hub::before {
  background: radial-gradient(closest-side,
    var(--paper) 26%,
    rgba(247, 241, 230, 0.55) 55%,
    rgba(247, 241, 230, 0) 82%);
}

/* ============================================================
   CENTRUM (2026-07-07) — the answering words sit in the optical
   centre of the glow. The hidden "Choose a feeling" line was
   invisible but still OCCUPIED its layout space, pushing the
   visible words up while the light centred on the whole box.
   While answering, the line leaves the layout entirely and the
   title's bottom margin goes with it. Revert: delete this block.
   ============================================================ */
.orbit-hub.answering .orbit-line { display: none; }
.orbit-hub.answering .orbit-title { margin-bottom: 0; }

/* ============================================================
   SFÆRE (2026-07-07) — the moon's gestures, like Playful Sparks.
   The hub is a RECTANGULAR text box; any box-shadow on it paints
   a soft glowing rectangle behind the words — the residual frame.
   Sparks was the only shadow-free gesture, hence frameless.
   New law: hub gestures are TRANSFORM AND OPACITY ONLY — all
   colour and light comes from the sphere itself (the answering
   field glow and the clearing). The guarantee below outranks even
   values inside running animations. Revert: delete this block.
   ============================================================ */
.orbit-hub,
.orbit-hub[class*='g-'] { box-shadow: none !important; }

/* the four gestures that carried shadows, re-set clean —
   identical movement, identical timing, pure motion */
@keyframes g-momentum {
  0%   { transform: translate(-50%, -50%); }
  30%  { transform: translate(-50%, calc(-50% - 18px)) scale(1.06); }
  56%  { transform: translate(-50%, calc(-50% - 6px)) scale(1.02); }
  78%  { transform: translate(-50%, calc(-50% - 11px)) scale(1.035); }
  100% { transform: translate(-50%, -50%); }
}
@keyframes g-wonder {
  0%   { transform: translate(-50%, -50%); }
  32%  { transform: translate(calc(-50% + 5px), calc(-50% - 14px)) rotate(1.2deg); }
  62%  { transform: translate(calc(-50% - 6px), calc(-50% - 9px)) rotate(-0.9deg); }
  84%  { transform: translate(calc(-50% + 2px), calc(-50% - 4px)) rotate(0.4deg); }
  100% { transform: translate(-50%, -50%); }
}
@keyframes g-unknown {
  0%   { transform: translate(-50%, -50%) scale(0.88); opacity: 0.75; }
  55%  { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
  74%  { transform: translate(-50%, -50%) scale(1.16); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes g-farewell {
  0%   { transform: translate(-50%, -50%); }
  42%  { transform: translate(-50%, calc(-50% + 12px)) scale(0.985); }
  64%  { transform: translate(-50%, calc(-50% + 12px)) scale(0.985); }
  100% { transform: translate(-50%, -50%); }
}

/* ============================================================
   SKIFTE (2026-07-07) — Everything Shifts, without the oval.
   g-shift was the ONLY gesture with non-uniform scaling
   (scale(1.06, 0.95)): the circular clearing rides the hub's
   transform, so during that one gesture it squashed into an oval
   over the circular sun — the ugly rim, unique to Shifts.
   The morph now lives on the WORDS themselves; the sphere never
   changes shape. Same movement, same timing, same character.
   Revert: delete this block.
   ============================================================ */
.orbit-hub.g-shift { animation: none; }
.orbit-hub.g-shift .orbit-title {
  animation: g-shift-words 1.6s var(--ease) 1;
  transform-origin: center;
  display: inline-block;      /* transforms need a box; stays centred */
}
@keyframes g-shift-words {
  0%   { transform: scale(1, 1) rotate(0deg); }
  28%  { transform: scale(1.06, 0.95) rotate(1.4deg); }
  58%  { transform: scale(0.95, 1.06) rotate(-1.2deg); }
  100% { transform: scale(1, 1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-hub.g-shift .orbit-title { animation: none !important; }
}

/* ============================================================
   RADIAL 8B — THE EXPLORER AS ONE INSTRUMENT (2026-07-07)
   Founders' ruling: the Explorer IS the approved prototype
   "radialmoodexplorer 8B · Mood Ring", implemented whole.

   - Markup uses x-* classes only (studio/index.template.html);
     the old .orbit-field constellation markup is retired, so every
     earlier .orbit-field / .orbit-hub / .feeling layer above is
     inert history. .orbit (the wrapper) and .moments (the room)
     are untouched and still live.
   - ONE FIXED UNIT: everything inside .x-scale is designed at
     680x580 px — fixed radius, fixed type, fixed hub. app.js
     scales the whole group with a single transform, so phones see
     the identical geometry, only smaller. Never reintroduce vmin
     or clamp() inside this block; that was the mobile bug.
   - THE MOOD RING: .x-hub.active keeps its circle and tints it
     with the hovered feeling's colour. The prototype's original
     border-color: transparent (the vanishing ring) is retired.
   Revert: delete this block, restore the old markup + buildOrbit.
   ============================================================ */
.x-stage { display: flex; justify-content: center; padding: 1rem 0 0; }
.x-frame { position: relative; }
.x-scale {
  position: absolute; top: 0; left: 0;
  width: 680px; height: 660px;   /* v8: +80 -- Lurks in the Dark was touching the frame */
  transform-origin: top left;
}
.x-orbit {
  --radius: 240px;
  --mood: var(--amber);
  --mood-rgb: 192, 138, 62;
  position: relative;
  width: 680px; height: 660px;   /* v8: matches .x-scale */
}
.x-orbit #feelings { position: absolute; inset: 0; }

/* ---- the roads: no static line — only ambient flickering dots ---- */
.x-arm { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.x-dot {
  position: absolute;
  top: -1px;
  left: calc(var(--radius) * var(--frac));
  width: 1.8px; height: 1.8px;
  border-radius: 50%;
  background: var(--mood);
  box-shadow: 0 0 3px 0.8px rgba(var(--mood-rgb), 0.65);
  opacity: 0;
  pointer-events: none;
  animation: x-dotFlicker 4.2s linear infinite;   /* duration = AMBIENT_CYCLE in app.js */
  animation-delay: var(--dot-delay);
}
.x-arm.active .x-dot {
  animation: x-dotHeld 2.2s ease-in-out infinite !important;
  opacity: 1 !important;
}
/* the instant ANY mood answers, every other road goes quiet */
.x-orbit.someone-active .x-arm:not(.active) .x-dot {
  animation: none !important;
  opacity: 0 !important;
}
@keyframes x-dotFlicker {
  0%   { opacity: 0; }
  3%   { opacity: 0.85; }
  11%  { opacity: 0.85; }
  17%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes x-dotHeld {
  0%, 100% { box-shadow: 0 0 3px 0.8px rgba(var(--mood-rgb), 0.5); }
  50%      { box-shadow: 0 0 6px 1.6px rgba(var(--mood-rgb), 0.9); }
}

/* ---- the six pills, coloured at rest ---- */
.x-slot { position: absolute; top: 0; left: var(--radius); }
.mood-btn {
  font-family: var(--serif);
  font-size: 16px;                     /* design-locked: the unit scales, not the type */
  padding: 16px 26px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  outline: none;
  border-radius: 999px;
  border: 1px solid rgba(var(--mood-rgb), 0.55);
  background: rgba(var(--mood-rgb), 0.12);
  color: color-mix(in srgb, var(--mood) 55%, #3d3833);
  box-shadow: 0 6px 20px rgba(var(--mood-rgb), 0.12);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease), opacity .3s var(--ease);
  animation-name: x-idleFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .mood-btn { color: var(--ink); }
}
.mood-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--mood-rgb), 0.32), 0 6px 20px rgba(var(--mood-rgb), 0.12);
}
@keyframes x-idleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.007); }
}
/* held: while hovered (.x-arm.active) or chosen (.mood-btn.active) */
.x-arm.active .mood-btn,
.mood-btn.active {
  animation-play-state: paused;
  background: rgba(var(--mood-rgb), 0.22);
  border: 1.5px solid var(--mood);
  color: color-mix(in srgb, var(--mood) 78%, #2a2622);
  box-shadow: 0 0 0 3px rgba(var(--mood-rgb), 0.16), 0 12px 30px -14px rgba(var(--mood-rgb), 0.3);
  transform: scale(1.05);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .x-arm.active .mood-btn, .mood-btn.active { color: var(--mood); }
}
.mood-btn.dim { opacity: 0.45; }

/* ---- hub glow (the idle sun) ---- */
.x-hub-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 230px; height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(192, 138, 62, 0.28), rgba(192, 138, 62, 0.1) 48%, rgba(192, 138, 62, 0) 74%);
  pointer-events: none;
  z-index: 1;
  animation: x-sunBreathe 6s ease-in-out infinite alternate;
}
@keyframes x-sunBreathe { from { opacity: 0.7; } to { opacity: 1; } }

/* ---- the hub ---- */
.x-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 32% 28%, #fffdf8, var(--paper) 75%);
  z-index: 2;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  animation: x-idleHubBreathe 5.5s ease-in-out infinite;   /* itching to be chosen */
}
@keyframes x-idleHubBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(192, 138, 62, 0); }
  50%      { transform: translate(-50%, -50%) scale(1.016); box-shadow: 0 0 24px 4px rgba(192, 138, 62, 0.2); }
}
/* THE MOOD RING — the circle stays AND takes the feeling's colour */
.x-hub.active {
  border-color: rgba(var(--mood-rgb), 0.6);
  box-shadow: 0 0 30px 6px rgba(var(--mood-rgb), 0.26);
}

/* ---- finite gestures: transform/opacity/box-shadow, then true stillness ---- */
.x-hub.g-momentum { animation: x-g-momentum 1.35s var(--ease) 1; }
@keyframes x-g-momentum {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  30%  { transform: translate(-50%, calc(-50% - 9px)) scale(1.03); box-shadow: 0 12px 30px -14px rgba(var(--mood-rgb), 0.5); }
  58%  { transform: translate(-50%, calc(-50% - 3px)) scale(1.01); box-shadow: 0 7px 20px -14px rgba(var(--mood-rgb), 0.3); }
  78%  { transform: translate(-50%, calc(-50% - 6px)) scale(1.02); box-shadow: 0 9px 24px -14px rgba(var(--mood-rgb), 0.4); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
.x-hub.g-sparks { animation: x-g-sparks 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }
@keyframes x-g-sparks {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  16%  { transform: translate(-50%, -50%) rotate(-3.2deg) scale(1.04, 0.965); }
  40%  { transform: translate(-50%, -50%) rotate(2.4deg) scale(0.97, 1.035); }
  62%  { transform: translate(-50%, -50%) rotate(-1.4deg) scale(1.02, 0.99); }
  84%  { transform: translate(-50%, -50%) rotate(0.7deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.x-hub.g-wonder { animation: x-g-wonder 2.2s var(--ease) 1; }
@keyframes x-g-wonder {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  30%  { transform: translate(calc(-50% + 7px), calc(-50% - 16px)) rotate(1.8deg); box-shadow: 0 0 34px 5px rgba(var(--mood-rgb), 0.36); }
  62%  { transform: translate(calc(-50% - 8px), calc(-50% - 10px)) rotate(-1.4deg); box-shadow: 0 0 27px 4px rgba(var(--mood-rgb), 0.28); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
.x-hub.g-shift { animation: x-g-shift 1.9s var(--ease) 1; }
@keyframes x-g-shift {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  28%  { transform: translate(-50%, -50%) scale(1.025) rotate(3deg); }
  60%  { transform: translate(-50%, -50%) scale(0.985) rotate(-2.2deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
/* Soft Goodbyes — the farewell exhale: a slow sink, air between the
   notes, then home. (New for 8B: the prototype's fifth slot carried
   the skew that belongs to Reality Bends.) */
.x-hub.g-farewell { animation: x-g-farewell 2s var(--ease) 1; }
@keyframes x-g-farewell {
  0%   { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
  38%  { transform: translate(-50%, calc(-50% + 10px)) scale(0.985); box-shadow: 0 -8px 26px -12px rgba(var(--mood-rgb), 0.35); }
  70%  { transform: translate(-50%, calc(-50% + 4px)) scale(0.995); box-shadow: 0 -4px 16px -12px rgba(var(--mood-rgb), 0.2); }
  100% { transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(var(--mood-rgb), 0); }
}
/* Reality Bends — reality literally bends: the prototype's skew */
.x-hub.g-bend { animation: x-g-bend 1.6s var(--ease) 1; }
@keyframes x-g-bend {
  0%   { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
  20%  { transform: translate(calc(-50% + 3px), -50%) skew(3.8deg, 1.8deg) scale(1.03, 0.97); opacity: 1; }
  36%  { transform: translate(calc(-50% - 3px), calc(-50% + 2px)) skew(-2.8deg, -1.6deg) scale(0.97, 1.035); opacity: 0.9; }
  42%  { transform: translate(calc(-50% - 2px), calc(-50% + 1px)) skew(-2.2deg, -1.2deg) scale(0.98, 1.025); opacity: 0.98; }
  58%  { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) skew(1.8deg, 0.9deg) scale(1.015, 0.99); opacity: 0.93; }
  76%  { transform: translate(-50%, -50%) skew(-0.8deg, -0.4deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) skew(0deg, 0deg) scale(1, 1); opacity: 1; }
}

/* ---- sparks (Playful Sparks only) ---- */
.x-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mood);
  box-shadow: 0 0 6px 1px var(--mood);
  opacity: 0;
  pointer-events: none;
}
.x-hub.g-sparks .x-spark {
  animation: x-sparkFly 1.05s var(--ease) 1;
  animation-delay: var(--sdelay);
}
@keyframes x-sparkFly {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.5); opacity: 0; }
  18%  { opacity: 0.9; transform: translate(-50%, -50%) translate(calc(var(--sx) * 0.35), calc(var(--sy) * 0.35)) scale(1); }
  100% { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(0.35); opacity: 0; }
}

/* ---- hub text: the idle line + the (single) premium title ---- */
.x-hub-idle {
  position: absolute; top: 50%; left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: 17px;
  color: var(--ink-faint);
  line-height: 1.35;
  text-align: center;
  opacity: 1;
  transition: opacity .3s var(--ease);
  pointer-events: none;
  padding: 0 20px;
}
.x-hub.active .x-hub-idle { opacity: 0; }
.x-hub-title {
  position: absolute; top: 50%; left: 50%;
  margin: 0;
  text-align: center;
  z-index: 1;
  font-weight: 600;
  color: var(--mood);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(4px) scale(0.97);
  font-size: 24px;
  line-height: 1.18;
  padding: 0 16px;
  transition: opacity .34s var(--ease), transform .34s var(--ease), color .34s var(--ease);
}
.x-hub-title.show {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scale(1);
}
/* Bright Momentum — a white flash breathes over the title, then settles */
.x-hub-title.t-flash::after {
  content: "";
  position: absolute;
  inset: -10px -18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: x-textFlashOnce 1.35s var(--ease) 1;
  animation-fill-mode: forwards;
}
@keyframes x-textFlashOnce {
  0%   { opacity: 0; }
  14%  { opacity: 0.9; }
  30%  { opacity: 0.1; }
  46%  { opacity: 0.65; }
  64%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Everything Shifts — one flip through itself, then settles */
.x-hub-title.t-shift {
  animation: x-textShiftOnce 1.9s var(--ease) 1;
  animation-fill-mode: forwards;
  transform-origin: center;
}
@keyframes x-textShiftOnce {
  0%, 34%   { transform: translate(-50%, -50%) scaleY(1); opacity: 1; }
  50%       { transform: translate(-50%, -50%) scaleY(0.05); opacity: 0.35; }
  68%, 100% { transform: translate(-50%, -50%) scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .x-hub, .x-hub-glow, .mood-btn, .x-dot { animation: none !important; }
  .x-hub.g-momentum, .x-hub.g-sparks, .x-hub.g-wonder, .x-hub.g-shift,
  .x-hub.g-farewell, .x-hub.g-bend,
  .x-hub-title.t-shift, .x-hub-title.t-flash::after,
  .x-hub.g-sparks .x-spark { animation: none !important; }
}

/* ============================================================
   INTRO / ABOUT — preview (2026-07-08, founders' request)
   Heading over the portraits · the name as a foot-overlay on
   each frame · bio + credentials + a studio photo with one line.
   The [draft] copy lives in js/app.js buildExplorerPortraits
   until it is moved into SETTINGS (the workbook stays canonical).
   ============================================================ */
.ep-title {
  margin: 2.4rem 0 0.2rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint, #8a7f70);
}

/* name overlay: a soft black veil at the foot of each portrait */
.explorer-portrait.has-overlay .ep-caption { display: none; }
.explorer-portrait .ep-frame { position: relative; }
.ep-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 1.5rem 0.5rem 0.55rem;
  background: linear-gradient(to top, rgba(18,14,10,0.66), rgba(18,14,10,0.30) 45%, rgba(18,14,10,0));
  color: #fff;
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* the about composition beneath the portraits */
.ep-about {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.2rem;
  text-align: center;
}
.ep-bio {
  margin: 0 0 1.15rem;
  font-size: 1.02rem; line-height: 1.72;
  color: var(--ink, #2b2722);
}
.ep-cred {
  margin: 0 auto;
  max-width: 36rem;
  font-size: 0.85rem; line-height: 1.68;
  color: var(--ink-faint, #8a7f70);
}
.ep-studio {
  margin: 2.3rem auto 0;
  max-width: 40rem;
}
.ep-studio-frame {
  position: relative; display: block;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius, 12px) - 4px);
  overflow: hidden;
  background: var(--paper-2, #efe7d8);
  box-shadow: 0 12px 34px rgba(43, 39, 34, 0.10);
}
.ep-studio-frame img { width: 100%; height: 100%; object-fit: cover; }
.ep-studio-frame .placeholder {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, #efe7d8, var(--paper-2, #e7ddc9));
  display: grid; place-items: center;
}
.ep-studio-frame .ph-mark { color: var(--line, #d8cbae); }
.ep-studio-line {
  margin: 0.9rem 0 0;
  font-size: 0.9rem; line-height: 1.6;
  color: var(--ink-faint, #8a7f70);
  font-style: italic;
}
@media (max-width: 640px) {
  .ep-about { margin-top: 1.6rem; }
  .ep-bio { font-size: 0.97rem; }
  .ep-title { margin-top: 2rem; }
}

/* ============================================================
   WHO WE ARE — moved down (2026-07-08, founders' revision)
   Top keeps only the portraits + one line ("Two brothers, one
   studio"), and the portraits link to #who — the full bio +
   credentials + studio photo now live right before the contact
   section, where a moved visitor is ready to read them.
   ============================================================ */

/* the single line under the portraits at the top — a gentle link in */
.ep-tagline {
  display: block;
  width: 100%;
  margin: 1.05rem 0 0;
  text-align: center;
  font-size: 0.9rem; letter-spacing: 0.01em;
  color: var(--ink-faint, #8a7f70);
  text-decoration: none;
  transition: color 0.3s var(--ease, ease);
}
.ep-tagline .ep-tag-arrow {
  display: inline-block; margin-left: 0.15rem;
  opacity: 0; transform: translateX(-2px);
  transition: opacity 0.3s var(--ease, ease), transform 0.3s var(--ease, ease);
}
.ep-tagline:hover, .ep-tagline:focus-visible { color: var(--ink, #2b2722); }
.ep-tagline:hover .ep-tag-arrow,
.ep-tagline:focus-visible .ep-tag-arrow { opacity: 1; transform: translateX(3px); }

/* portraits are now links — a whisper of lift on hover/focus */
.ep-link {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  border-radius: calc(var(--radius, 12px) - 4px);
}
.ep-link .ep-frame {
  transition: transform 0.4s var(--ease, ease), box-shadow 0.4s var(--ease, ease);
}
.ep-link:hover .ep-frame,
.ep-link:focus-visible .ep-frame {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(43, 39, 34, 0.16);
}
.ep-link:focus-visible {
  outline: 2px solid var(--amber, #c0883e); outline-offset: 4px;
}

/* the "Who we are" section itself */
.who-sec { padding: clamp(3rem, 7vw, 5rem) 0; }
.ep-eyebrow {
  margin: 0 0 0.5rem; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint, #8a7f70);
}
.ep-about-head {
  margin: 0 0 1.4rem; text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2;
  color: var(--ink, #2b2722);
}
@media (prefers-reduced-motion: reduce) {
  .ep-link .ep-frame,
  .ep-tagline .ep-tag-arrow { transition: none; }
}

/* studio photo caption — the line sits ON the photo now (2026-07-08):
   a dark veil at the foot, centred text over it, like the portrait names */
.ep-studio-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 2.4rem 1.3rem 1.05rem;
  background: linear-gradient(to top, rgba(18,14,10,0.70), rgba(18,14,10,0.32) 55%, rgba(18,14,10,0));
  color: #fff;
  text-align: center;
  font-size: 0.95rem; line-height: 1.5; font-style: italic;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* the studio name inside the portraits heading — a quiet emphasis */
.ep-title strong {
  font-weight: 600;
  color: var(--ink, #2b2722);
}

/* ===== CANON8 · calm→Storm intensity signal + journey intro (added 2026-07-09) ===== */
.moment .title{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;}
.intensity{display:inline-flex;align-items:center;gap:.42rem;vertical-align:middle;}
.intensity .ibars{display:inline-flex;align-items:flex-end;gap:2px;height:15px;}
.intensity .ibars i{width:3px;height:100%;border-radius:1px;background:color-mix(in srgb, var(--dc) 20%, transparent);}
.intensity .ibars i:nth-child(1){height:36%}
.intensity .ibars i:nth-child(2){height:52%}
.intensity .ibars i:nth-child(3){height:68%}
.intensity .ibars i:nth-child(4){height:84%}
.intensity .ibars i:nth-child(5){height:100%}
.intensity .ibars i.on{background:var(--dc);}
.intensity .iname{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dc);font-weight:700;}
.room-intro{--dc:#414E56;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:0 0 1rem;margin:0 0 .3rem;border-bottom:1px solid var(--line);}
.room-intro .ri-line{font-family:var(--serif);font-size:1.02rem;color:var(--ink-soft);}
.room-intro .ri-arc{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dc);font-weight:700;white-space:nowrap;}
.room-intro .ri-to{opacity:.55;margin:0 .3rem;}

/* ===== CANON8 · Explorer — dark bold selection + moon shows the genre (2026-07-09) ===== */
/* the CHOSEN feeling wears its OWN full colour (not black), white bold text */
.mood-btn.active{
  background:var(--mood) !important;
  border:1.5px solid var(--mood) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.30) !important;
  box-shadow:0 14px 34px -14px rgba(var(--mood-rgb),.6) !important;
  transform:scale(1.06) !important;
}
/* the moon: genre in bold, the feeling quiet beneath, the cycle hint under it */
#explorer-tool:not(.r19) .x-hub-title{ font-weight:700; } /* PKG FINPUDS: v19 hub answers at 400 */
.x-hub-genre{ display:block; font-family:var(--serif); font-weight:700; font-size:27px; line-height:1; color:var(--mood); letter-spacing:.01em; }
.x-hub-feel{ display:block; font-family:var(--serif); font-weight:400; font-size:15px; line-height:1.15; margin-top:7px; color:var(--ink-soft); }
.x-hub-cycle{ display:block; font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-top:8px; color:var(--ink-faint); }

/* ===== CANON8 · Explorer v7 (2026-07-09) — revert hub size, wrap labels, keep others visible ===== */
/* the entry prompt keeps its ORIGINAL size (should not have been enlarged) — no override here */
/* the moon's answer: genre bold (ONE size per door, set in JS), feeling quiet
   beneath (never moves); the genre FLIPS to its twin in place, like a coin */
#explorer-tool:not(.r19) .x-hub-title{ font-weight:700; } /* PKG FINPUDS: v19 hub answers at 400 */
.x-hub-genre{ display:block; font-family:var(--serif); font-weight:700; line-height:1; color:var(--mood);
  transition:opacity .2s var(--ease), transform .2s var(--ease); backface-visibility:hidden; }
.x-hub-genre.flip-out{ opacity:0; transform:rotateX(-90deg); }
.x-hub-genre.flip-in{ opacity:0; transform:rotateX(90deg); transition:none; }
.x-hub-feel{ display:block; font-family:var(--serif); font-weight:400; font-size:15px; line-height:1.14; margin-top:8px; color:var(--ink-soft); }

/* the satellite labels are BOLD, and WRAP to two balanced lines like the mockup
   ("Moments of / Wonder") so the pills are compact and don't collide */
#explorer-tool:not(.r19) .mood-btn{ font-size:19px !important; font-weight:700 !important; white-space:normal !important; box-sizing:border-box; width:max-content !important; max-width:186px !important; padding:13px 20px !important; text-align:center; line-height:1.14; } /* PKG FINPUDS: 8B-era hotfix — was hitting the v19 satellites (bold 700, 186px block inside a 104px circle = the off-centre look) */
/* more room around the ring so the pills breathe */
#explorer-tool:not(.r19) .x-orbit{ --radius:252px !important; } /* PKG FINPUDS: 8B ring radius — v19 owns 270px */

/* FOCUS (mockup): choosing a feeling FADES the others back so the chosen one +
   moon lead — but they stay VISIBLE and clickable, so you can switch or exit. */
.mood-btn.dim{ opacity:.5 !important; transition:opacity .5s var(--ease); }
.x-arm.active .mood-btn{ opacity:1 !important; }

/* the satellites fade in one by one at the start, then hold still; roads quiet on settle */
.x-orbit.settled .x-arm:not(.active) .x-dot{ animation:none !important; opacity:0 !important; }

/* entering a satellite: FAT letters, and it pops with energy */
.x-arm.active .mood-btn:not(.active){
  font-weight:700 !important;
  transform:scale(1.12) !important;
  animation:x-satPop .5s var(--ease) 1 !important;
}
@keyframes x-satPop{ 0%{transform:scale(1);} 45%{transform:scale(1.17);} 72%{transform:scale(1.07);} 100%{transform:scale(1.12);} }

/* ============================================================
   FABLE (2026-07-09) · EIGHT DISTINCT HUB GESTURES
   Per the founders' motion brief. Principles applied:
   - emotion lives in EASING + TIMING, not in the property animated
     (Val Head; Material 3 emphasized curves; IBM Carbon expressive)
   - anticipation before the main move; follow-through settle after
     (Disney #2/#5 applied to UI)
   - compositor-only where it matters: heavy effects (glow, shadow,
     crack, ghosts) live on pre-rendered layers (.x-gl, built in JS,
     opacity 0 at rest) and animate ONLY transform/opacity
   - satellite positions, title presentation and the two-title
     (genre ⇄ twin) swap are untouched.
   ============================================================ */

/* ---- the pre-rendered gesture layers (built in buildOrbit) ---- */
.x-gl{ position:absolute; inset:-1px; border-radius:50%; opacity:0; pointer-events:none; z-index:0; }
/* the dark that shows through the crack while the halves are apart */
.x-fissure{ background:radial-gradient(circle at 50% 50%, rgba(26,21,28,.95), rgba(26,21,28,.7) 68%, rgba(26,21,28,.5)); }
/* the two halves of the moon — same surface as the hub, split by one
   jagged crack (the polygons share the crack's coordinates, so together
   they tile the full circle; apart, the fissure shows in the gap) */
.x-half{ background:radial-gradient(circle at 32% 28%, #fffdf8, var(--paper) 75%); box-shadow:inset 0 0 0 1px var(--line); }
.x-half-l{ clip-path:polygon(0 0, 53% 0, 46% 15%, 55% 32%, 46% 50%, 54% 67%, 47% 84%, 51% 100%, 0 100%); }
.x-half-r{ clip-path:polygon(53% 0, 100% 0, 100% 100%, 51% 100%, 47% 84%, 54% 67%, 46% 50%, 55% 32%, 46% 15%); }
/* the warm heart — white-hot centre falling into the mood's own colour */
.x-warm{ background:radial-gradient(circle at 50% 54%, rgba(255,242,224,.9), rgba(var(--mood-rgb),.4) 36%, rgba(var(--mood-rgb),.14) 60%, transparent 78%); }
/* the shadow that swallows — the whole moon dims, deepest at the rim */
.x-veil{ background:radial-gradient(circle at 50% 44%, rgba(18,16,22,.32), rgba(18,16,22,.58) 52%, rgba(11,9,15,.95) 100%); }
/* the ghost echoes — offset copies of the moon's rim, phasing */
.x-ghost{ border:1.5px solid rgba(var(--mood-rgb),.6); background:rgba(var(--mood-rgb),.05); }

/* ---- MOMENTS OF WONDER · g-drift — the old floating movement, returned.
   Weightless: up, sideways, down, home. Sine in-out throughout, no
   overshoot; wonder reads through SLOWNESS, not distance. ---- */
.x-hub.g-drift{ animation:x-g-drift 2.3s cubic-bezier(.37,0,.63,1) 1; }
@keyframes x-g-drift{
  0%   { transform:translate(-50%,-50%); box-shadow:0 0 0 0 rgba(var(--mood-rgb),0); }
  24%  { transform:translate(calc(-50% + 3px), calc(-50% - 13px)) rotate(1.2deg); box-shadow:0 0 32px 5px rgba(var(--mood-rgb),.32); }
  50%  { transform:translate(calc(-50% + 9px), calc(-50% - 5px)) rotate(-.8deg); box-shadow:0 0 26px 4px rgba(var(--mood-rgb),.26); }
  74%  { transform:translate(calc(-50% - 5px), calc(-50% + 5px)) rotate(.5deg); box-shadow:0 0 18px 3px rgba(var(--mood-rgb),.16); }
  100% { transform:translate(-50%,-50%) rotate(0deg); box-shadow:0 0 0 0 rgba(var(--mood-rgb),0); }
}

/* ---- WHAT BREAKS US · g-break — emotional rupture. Anticipation
   (a held-in compress), the SNAP apart (fast — the break is sudden),
   a held-apart beat, then a slow mend: the repair is gentler than
   the break. The crack passes beneath the title, which stays. ---- */
.x-hub.g-break{ animation:x-g-break 1.8s var(--ease) 1; }
@keyframes x-g-break{
  0%   { transform:translate(-50%,-50%) scale(1); }
  10%  { transform:translate(-50%,-50%) scale(.972); }
  16%  { transform:translate(calc(-50% + 1.5px),-50%) scale(.985); }
  22%  { transform:translate(calc(-50% - 1px),-50%) scale(.985); }
  60%  { transform:translate(-50%,-50%) scale(.99); }
  100% { transform:translate(-50%,-50%) scale(1); }
}
.x-hub.g-break .x-fissure{ animation:x-fissureShow 1.8s var(--ease) 1; }
@keyframes x-fissureShow{
  0%,9% { opacity:0; } 14%{ opacity:.85; } 58%{ opacity:.85; } 84%,100%{ opacity:0; }
}
.x-hub.g-break .x-half-l{ animation:x-halfL 1.8s var(--ease) 1; }
.x-hub.g-break .x-half-r{ animation:x-halfR 1.8s var(--ease) 1; }
@keyframes x-halfL{
  0%,9%  { opacity:0; transform:none; }
  12%    { opacity:1; transform:none; }
  15%    { opacity:1; transform:translate(1.5px,0); }                       /* pulled in — the breath before */
  26%    { opacity:1; transform:translate(-9px,-1px) rotate(-1.6deg); }     /* the SNAP */
  48%    { opacity:1; transform:translate(-9px,-1px) rotate(-1.6deg); }     /* held apart */
  76%    { opacity:1; transform:none; }                                     /* the slow mend */
  88%,100%{ opacity:0; transform:none; }
}
@keyframes x-halfR{
  0%,9%  { opacity:0; transform:none; }
  12%    { opacity:1; transform:none; }
  15%    { opacity:1; transform:translate(-1.5px,0); }
  26%    { opacity:1; transform:translate(9px,1px) rotate(1.6deg); }
  48%    { opacity:1; transform:translate(9px,1px) rotate(1.6deg); }
  76%    { opacity:1; transform:none; }
  88%,100%{ opacity:0; transform:none; }
}

/* ---- HELD CLOSE · g-ember — warmth, breathing, radiance. Two breath
   cycles (inhale short, exhale long — the ratio of rest); the glow
   trails the breath by a beat, so heat RADIATES instead of blinking.
   The glow never reaches full — warmth is suggested. ---- */
.x-hub.g-ember{ animation:x-g-ember 2s cubic-bezier(.37,0,.63,1) 1; }
@keyframes x-g-ember{
  0%   { transform:translate(-50%,-50%) scale(1); }
  20%  { transform:translate(-50%,-50%) scale(1.028); }
  50%  { transform:translate(-50%,-50%) scale(1); }
  70%  { transform:translate(-50%,-50%) scale(1.034); }
  100% { transform:translate(-50%,-50%) scale(1); }
}
.x-hub.g-ember .x-warm{ animation:x-warmGlow 2s cubic-bezier(.37,0,.63,1) 1; }
@keyframes x-warmGlow{
  0%{ opacity:0; } 26%{ opacity:.55; } 54%{ opacity:.2; } 78%{ opacity:.6; } 100%{ opacity:0; }
}

/* ---- PARALLEL WORLDS · g-phase — dimensional shift. The circle
   morphs toward a soft portal-square and back while two offset ghost
   rims phase in staggered opposition; the moon itself dips briefly
   between realities. Precise M3-standard easing — sci-fi is exact,
   never bouncy. ---- */
.x-hub.g-phase{ animation:x-g-phase 1.7s cubic-bezier(.2,0,0,1) 1; }
@keyframes x-g-phase{
  0%   { transform:translate(-50%,-50%) rotate(0deg); border-radius:50%; opacity:1; }
  18%  { transform:translate(-50%,-50%) scale(.985) rotate(-2deg); border-radius:44%; }
  38%  { transform:translate(-50%,-50%) scale(1.02) rotate(3deg); border-radius:26%; opacity:1; }
  54%  { transform:translate(-50%,-50%) scale(1.02) rotate(1.5deg); border-radius:30%; opacity:.9; }
  78%  { transform:translate(-50%,-50%) scale(.995) rotate(-1deg); border-radius:46%; opacity:1; }
  100% { transform:translate(-50%,-50%) rotate(0deg); border-radius:50%; opacity:1; }
}
.x-hub.g-phase .x-ghost-a{ animation:x-ghostA 1.7s cubic-bezier(.2,0,0,1) 1; }
.x-hub.g-phase .x-ghost-b{ animation:x-ghostB 1.7s cubic-bezier(.2,0,0,1) 1; }
@keyframes x-ghostA{
  0%,12% { opacity:0; transform:none; border-radius:50%; }
  30%    { opacity:.35; transform:translate(-10px,-4px); border-radius:30%; }
  44%    { opacity:.16; transform:translate(-14px,-6px); border-radius:26%; }
  62%    { opacity:.3;  transform:translate(-7px,-3px);  border-radius:34%; }
  86%,100%{ opacity:0; transform:none; border-radius:50%; }
}
@keyframes x-ghostB{
  0%,17% { opacity:0; transform:none; border-radius:50%; }
  35%    { opacity:.3;  transform:translate(10px,4px);  border-radius:30%; }
  49%    { opacity:.14; transform:translate(14px,6px);  border-radius:26%; }
  67%    { opacity:.26; transform:translate(7px,3px);   border-radius:34%; }
  90%,100%{ opacity:0; transform:none; border-radius:50%; }
}

/* ---- FAR HORIZONS · g-expand — a horizon opening. Starts SMALL
   (the intake of breath), grows wide with an emphasized-decelerate
   launch, HOLDS at the peak (the vista pause — that hold is the
   emotion), then settles home with a micro follow-through. No
   vertical travel, no pulse — wide and spacious, unlike Racing
   Pulse in every way. ---- */
.x-hub.g-expand{ animation:x-g-expand 2.1s cubic-bezier(.05,.7,.1,1) 1; }
@keyframes x-g-expand{
  0%   { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(var(--mood-rgb),0); }
  16%  { transform:translate(-50%,-50%) scale(.962); box-shadow:0 0 0 0 rgba(var(--mood-rgb),0); }
  52%  { transform:translate(-50%,-50%) scale(1.11); box-shadow:0 0 46px 14px rgba(var(--mood-rgb),.3); }
  70%  { transform:translate(-50%,-50%) scale(1.11); box-shadow:0 0 46px 14px rgba(var(--mood-rgb),.28); }
  92%  { transform:translate(-50%,-50%) scale(1.004); box-shadow:0 0 8px 2px rgba(var(--mood-rgb),.08); }
  100% { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(var(--mood-rgb),0); }
}

/* ---- PLAYFUL SPARKS · g-bounce — kept, as agreed: the sparks are
   the idea. Damped squash-and-stretch bounce (the one mood that has
   earned true overshoot), sparks staggered so they read as sparks,
   never as an explosion. ---- */
.x-hub.g-bounce{ animation:x-g-bounce 1.15s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes x-g-bounce{ 0%{transform:translate(-50%,-50%) scale(1);} 20%{transform:translate(-50%,calc(-50% - 11px)) scale(1.06,.94);} 40%{transform:translate(-50%,calc(-50% + 5px)) scale(.94,1.06);} 60%{transform:translate(-50%,calc(-50% - 6px)) scale(1.03,.97);} 80%{transform:translate(-50%,-50%) scale(.98,1.02);} 100%{transform:translate(-50%,-50%) scale(1);} }
.x-hub.g-bounce .x-spark{ animation:x-sparkFly .8s var(--ease) 1; animation-delay:var(--sdelay); }

/* ---- RACING PULSE · g-pulse — a racing heart. Real cardiac
   structure: LUB-dub pairs (second beat ~60% of the first) with the
   rest between them shrinking cycle by cycle — the chase closes in.
   Sharp rises, quick falls; glow flashes with each LUB. ---- */
.x-hub.g-pulse{ animation:x-g-pulse 1.25s cubic-bezier(.3,0,.6,1) 1; }
@keyframes x-g-pulse{
  0%   { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(var(--mood-rgb),0); }
  6%   { transform:translate(-50%,-50%) scale(1.06);  box-shadow:0 0 26px 6px rgba(var(--mood-rgb),.5); }
  13%  { transform:translate(-50%,-50%) scale(1); }
  19%  { transform:translate(-50%,-50%) scale(1.035); box-shadow:0 0 16px 3px rgba(var(--mood-rgb),.32); }
  27%  { transform:translate(-50%,-50%) scale(1); }
  37%  { transform:translate(-50%,-50%) scale(1.062); box-shadow:0 0 26px 6px rgba(var(--mood-rgb),.5); }
  44%  { transform:translate(-50%,-50%) scale(1); }
  50%  { transform:translate(-50%,-50%) scale(1.037); box-shadow:0 0 16px 3px rgba(var(--mood-rgb),.32); }
  57%  { transform:translate(-50%,-50%) scale(1); }
  65%  { transform:translate(-50%,-50%) scale(1.068); box-shadow:0 0 28px 7px rgba(var(--mood-rgb),.54); }
  71%  { transform:translate(-50%,-50%) scale(1); }
  76%  { transform:translate(-50%,-50%) scale(1.04);  box-shadow:0 0 16px 3px rgba(var(--mood-rgb),.32); }
  82%  { transform:translate(-50%,-50%) scale(1); }
  100% { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(var(--mood-rgb),0); }
}

/* ---- LURKS IN THE DARK · g-swallow — swallowed by shadow. The
   darkness CREEPS (the longest ease-in of the whole set — slow
   start IS the suspense), engulfs, holds a full beat of stillness,
   then releases fast — but a residual after-shadow lingers: it is
   still there. The title stays lit above the darkened moon. ---- */
.x-hub.g-swallow{ animation:x-g-swallow 1.9s linear 1; }
@keyframes x-g-swallow{
  0%   { transform:translate(-50%,-50%) scale(1);    animation-timing-function:cubic-bezier(.64,0,.78,0); }
  55%  { transform:translate(-50%,-50%) scale(.958); animation-timing-function:linear; }
  70%  { transform:translate(-50%,-50%) scale(.958); animation-timing-function:cubic-bezier(.05,.7,.1,1); }
  100% { transform:translate(-50%,-50%) scale(1); }
}
.x-hub.g-swallow .x-veil{ animation:x-veilSwallow 1.9s linear 1; }
@keyframes x-veilSwallow{
  0%   { opacity:0;   animation-timing-function:cubic-bezier(.64,0,.78,0); }
  55%  { opacity:.88; animation-timing-function:linear; }
  70%  { opacity:.88; animation-timing-function:cubic-bezier(.2,0,0,1); }
  84%  { opacity:.1;  animation-timing-function:linear; }
  96%  { opacity:.08; }
  100% { opacity:0; }
}

/* reduced motion: gestures fall silent; the layers never appear */
@media (prefers-reduced-motion: reduce){
  .x-hub.g-drift, .x-hub.g-break, .x-hub.g-ember, .x-hub.g-phase,
  .x-hub.g-expand, .x-hub.g-bounce, .x-hub.g-pulse, .x-hub.g-swallow,
  .x-hub.g-break .x-fissure, .x-hub.g-break .x-half-l, .x-hub.g-break .x-half-r,
  .x-hub.g-ember .x-warm, .x-hub.g-swallow .x-veil,
  .x-hub.g-phase .x-ghost-a, .x-hub.g-phase .x-ghost-b,
  .x-hub.g-bounce .x-spark { animation:none !important; }
  .x-gl{ opacity:0 !important; }
}

/* ============================================================
   FABLE (2026-07-09) · THE SEARCH ROOM: THE BRIEF + THE ARCHIVE WALL
   Approved directions II + III. The room greets first-timers as a
   conversation (the brief writes itself), and stands as the wall:
   every chip counted, the five closest fits above, the whole
   catalogue lit beneath — choosing dims, it never deletes.
   ============================================================ */

/* chips: the door's colour as a quiet dot, the live count as a whisper */
.chip{ display:inline-flex; align-items:center; gap:.45rem; }
.chip-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; margin-right:.45em; }
.chip-n{ font-size:.7rem; opacity:.5; font-variant-numeric:tabular-nums; }
.chip.zero{ opacity:.35; }
.search-mode .chip.on .chip-n{ opacity:.75; }

/* mode-brief: the conversation owns the stage */
.discover .brief-block{ display:none; }
.discover.mode-brief .brief-block{ display:block; }
.discover.mode-brief .facet-block,
.discover.mode-brief .discover-foot,
.discover.mode-brief .discover-moments,
.discover.mode-brief .discover-wall,
.discover.mode-brief .discover-concierge{ display:none; }

.brief-sentence{ font-size:clamp(1.25rem,2.8vw,1.7rem); line-height:1.45; margin:0 0 1.6rem; color:var(--ink-soft); min-height:2.9em; }
.search-mode .brief-sentence{ color:var(--night-soft); }
.brief-sentence b{ font-weight:400; color:var(--ink); border-bottom:1px solid var(--amber); }
.search-mode .brief-sentence b{ color:var(--night-ink); border-bottom-color:var(--night-amber); }
.brief-cursor{ display:inline-block; width:1px; height:1.05em; background:var(--amber); vertical-align:-.15em; margin-left:2px; animation:briefBlink 1.1s steps(1) infinite; }
.search-mode .brief-cursor{ background:var(--night-amber); }
@keyframes briefBlink{ 50%{opacity:0} }
.brief-qn{ margin:0 0 .45rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.search-mode .brief-qn{ color:var(--night-soft); }
.brief-q{ font-size:1.3rem; margin:0 0 1rem; color:var(--ink); }
.search-mode .brief-q{ color:var(--night-ink); }
.brief-skip{ display:block; background:none; border:0; padding:0; margin:1.1rem 0 0; color:var(--ink-faint); font-size:.85rem; cursor:pointer; border-bottom:1px solid var(--line); font-family:var(--sans); }
.brief-skip:hover{ color:var(--ink); }
.search-mode .brief-skip{ color:var(--night-soft); border-bottom-color:var(--night-line); }
.search-mode .brief-skip:hover{ color:var(--night-ink); }
.brief-side{ margin-top:1.8rem; background:none; border:0; padding:0; cursor:pointer; font-family:var(--serif); font-size:.98rem; color:var(--amber); border-bottom:1px solid rgba(192,138,62,.4); }
.search-mode .brief-side{ color:var(--night-amber); border-bottom-color:rgba(216,168,90,.4); }

/* the wall: the whole catalogue as one typeset index */
.discover-wall{ columns:3; column-gap:2.2rem; margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.search-mode .discover-wall{ border-top-color:var(--night-line); }
@media(max-width:860px){ .discover-wall{ columns:2 } }
@media(max-width:560px){ .discover-wall{ columns:1 } }
.wall-row{ break-inside:avoid; display:flex; align-items:baseline; gap:.55rem; padding:.3rem 0; text-decoration:none; color:var(--ink); transition:opacity .35s var(--ease); }
.search-mode .wall-row{ color:var(--night-ink); }
.wall-row:hover .wall-name{ color:var(--amber); }
.search-mode .wall-row:hover .wall-name{ color:var(--night-amber); }
.wall-dot{ width:7px; height:7px; border-radius:50%; flex:none; position:relative; top:-1px; }
.wall-name{ font-size:.96rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s; }
.wall-wind{ display:flex; gap:1.5px; align-items:flex-end; height:9px; flex:none; margin-left:auto; }
.wall-wind i{ width:2px; height:3px; background:var(--ink-faint); opacity:.4; }
.wall-wind i.on{ height:8px; background:var(--amber); opacity:.85; }
.search-mode .wall-wind i{ background:var(--night-soft); }
.search-mode .wall-wind i.on{ background:var(--night-amber); }
.wall-wind i:nth-child(1){height:4px}.wall-wind i:nth-child(2){height:5px}.wall-wind i:nth-child(3){height:6px}.wall-wind i:nth-child(4){height:7px}.wall-wind i:nth-child(5){height:8px}
.wall-wind i:not(.on){height:3px}
/* rev10 (founders' dom): når man indsnævrer, viser væggen KUN de
   tilbageværende matches — de øvrige rækker forlader rummet helt. */
.wall-row.lit-dim{ display:none; }

/* the concierge line + the loosening suggestion */
.discover-concierge{ margin:1.5rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); font-family:var(--serif); font-size:1rem; color:var(--ink-soft); }
.search-mode .discover-concierge{ border-top-color:var(--night-line); color:var(--night-soft); }
.discover-concierge a{ color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(192,138,62,.4); }
.search-mode .discover-concierge a{ color:var(--night-amber); border-bottom-color:rgba(216,168,90,.4); }
.chip-loosen{ background:none; border:1px solid var(--amber); border-radius:40px; padding:.15rem .7rem; color:var(--amber); cursor:pointer; font-size:.85em; font-family:var(--sans); }
.search-mode .chip-loosen{ border-color:var(--night-amber); color:var(--night-amber); }
.chip-loosen:hover{ background:var(--amber); color:#fffaf2; }
.discover-rebrief{ margin-left:1rem; }

@media (prefers-reduced-motion: reduce){ .brief-cursor{ animation:none; } }

/* ================================================================
   PKG RADIAL-LIVE (2026-07-11) — Rasmus' v19 STORM orbit as THE
   entrance. Transplanted 1:1 from explorer_sync_luxury_prototype_
   v19_storm.html; every selector scoped under #explorer-tool.r19,
   every keyframe namespaced r19-. ROLLBACK: remove the r19 class in
   studio/index.template.html (one word) and regenerate — the old
   Mood Ring below takes over again untouched.
   ================================================================ */
#explorer-tool.r19 { --radius:270px; --button-size:106px; }
#explorer-tool.r19 .x-frame { position:relative; }
#explorer-tool.r19 .x-scale { width:820px; height:740px; transform-origin:top left; }
#explorer-tool.r19 .x-orbit { position:absolute; inset:0; width:auto; height:auto; transform-origin:center; } /* PKG SCENESKIFT: width/height:auto — the 8B block's 680x660 made inset:0 over-constrained and shoved the whole ring 65px left / 40px up. THIS was the off-centre look. */
#explorer-tool.r19 .x-hub-glow{
  position:absolute;top:50%;left:50%;
  width:276px;height:276px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(192,138,62,.31),rgba(192,138,62,.13) 48%,transparent 76%);
  pointer-events:none;opacity:0;animation:r19-glowBreathe 6s ease-in-out infinite alternate;
}
#explorer-tool.r19 .x-orbit.r19-hub-revealed .x-hub-glow{animation:r19-glowBreathe 6s ease-in-out infinite alternate,r19-fadeIn .9s var(--ease) forwards}
@keyframes r19-fadeIn{to{opacity:1}}
@keyframes r19-glowBreathe{from{filter:blur(.2px);opacity:.8}to{filter:blur(1.4px);opacity:1}}
#explorer-tool.r19 .x-hub{
  position:absolute;top:50%;left:50%;
  width:184px;height:184px;transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 32% 28%,#fffdf8,var(--paper) 74%);
  z-index:5;
  opacity:0;
  animation:r19-idleHub 5.8s ease-in-out infinite;
  transition:border-color .38s var(--ease),box-shadow .38s var(--ease);
}
#explorer-tool.r19 .x-orbit.r19-hub-revealed .x-hub{animation:r19-idleHub 5.8s ease-in-out infinite,r19-hubIntro .9s var(--ease) forwards}
@keyframes r19-hubIntro{0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes r19-idleHub{
  0%,100%{box-shadow:0 0 0 0 rgba(192,138,62,0)}
  50%{box-shadow:0 0 34px 8px rgba(192,138,62,.22)}
}
#explorer-tool.r19 .x-hub.active{border-color:rgba(var(--mood-rgb),.55);box-shadow:0 0 34px 6px rgba(var(--mood-rgb),.24)}
#explorer-tool.r19 .x-hub-idle,#explorer-tool.r19 .x-hub-title{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  text-align:center;
  line-height:1.14;
  pointer-events:none;
  margin:0;
}
#explorer-tool.r19 .x-hub-idle{font-size:18px;color:var(--faint,#a99a86);font-weight:400;opacity:1;transition:opacity .32s var(--ease);animation:none}
#explorer-tool.r19 .x-hub.active .x-hub-idle{opacity:0}
#explorer-tool.r19 .x-hub-title{color:var(--mood);opacity:0;font-weight:400;font-size:24px;letter-spacing:.01em;transition:opacity .42s var(--ease),transform .42s var(--ease),color .42s var(--ease);width:auto;animation:none}
#explorer-tool.r19 .x-hub-title.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#explorer-tool.r19 .x-hub-title.flipping{opacity:0;transform:translate(-50%,-50%) scale(.96) rotateX(72deg)}
#explorer-tool.r19 .arm{
  position:absolute;top:50%;left:50%;
  width:0;height:0;
  --mood:#c08a3e;
  --mood-rgb:192,138,62;
}
#explorer-tool.r19 .slot{position:absolute;top:0;left:var(--radius);width:var(--button-size);height:var(--button-size);transform:translate(-50%,-50%)}
#explorer-tool.r19 .mood-btn{
  width:100%;
  height:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  font-family:var(--serif);
  font-weight:400;
  font-size:16.5px;   /* PKG SCENESKIFT v2 (Mathias' ruling): 13.8px was unreadable once the
                         unit scales down on laptops — the feeling-titles are THE decision,
                         the most important words on the page. Circles unchanged (spec). */
  line-height:1.12;
  letter-spacing:.005em;
  color:color-mix(in srgb,var(--mood) 58%,#342e29);
  border:1px solid rgba(var(--mood-rgb),.46);
  background:rgba(var(--mood-rgb),.10);
  border-radius:50%;
  padding:10px;
  box-shadow:0 8px 24px -18px rgba(var(--mood-rgb),.55);
  cursor:pointer;
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),background .34s var(--ease),border-color .34s var(--ease),opacity .34s var(--ease),color .34s var(--ease);
}
#explorer-tool.r19 .mood-btn .small{font-size:.94em}
#explorer-tool.r19 .x-orbit.r19-intro-start .mood-btn{animation:r19-titleArrive .85s var(--ease) forwards;animation-delay:var(--intro-delay)}
@keyframes r19-titleArrive{to{opacity:1;transform:translateY(0) scale(1)}}
#explorer-tool.r19 .mood-btn:hover,#explorer-tool.r19 .mood-btn:focus-visible,#explorer-tool.r19 .arm.active .mood-btn{
  transform:scale(1.04);
  background:rgba(var(--mood-rgb),.18);
  border-color:rgba(var(--mood-rgb),.82);
  box-shadow:0 0 0 3px rgba(var(--mood-rgb),.115),0 16px 34px -22px rgba(var(--mood-rgb),.62);
  outline:none;
}
/* the 8B room-state classes must not restyle the v19 satellites */
#explorer-tool.r19 .mood-btn.dim{opacity:1;filter:none}
#explorer-tool.r19 .x-orbit.r19-intro-done .mood-btn.dim,
#explorer-tool.r19 .x-orbit.r19-intro-done .mood-btn.active{opacity:1}
#explorer-tool.r19 .dot{
  position:absolute;
  top:-1px;
  left:calc((var(--radius) - (var(--button-size) * .52) - 1px) * var(--frac));
  width:2px;height:2px;
  border-radius:50%;
  background:var(--mood);
  box-shadow:0 0 5px 1px rgba(var(--mood-rgb),.55);
  pointer-events:none;
  opacity:0;
  transform:scale(.86);
  --base:.5;
}
#explorer-tool.r19 .x-orbit.r19-signal-burst .dot{
  animation:r19-walkIn 1.28s linear forwards;
  animation-delay:var(--walk-delay);
}
#explorer-tool.r19 .x-orbit.r19-intro-done .dot{
  animation:r19-idleWalk 4.8s linear infinite;
  animation-delay:var(--idle-delay);
}
#explorer-tool.r19 .arm.active .dot{
  animation:r19-activeReveal .10s var(--ease) forwards!important;
  animation-delay:var(--active-delay)!important;
}
#explorer-tool.r19 .x-orbit.r19-someone-active .arm:not(.active) .dot{animation:none!important;opacity:0!important}
@keyframes r19-walkIn{
  0%{opacity:0;transform:scale(.5)}
  9%{opacity:calc(var(--base) * .92);transform:scale(1)}
  18%{opacity:calc(var(--base) * .60);transform:scale(.88)}
  31%,100%{opacity:0;transform:scale(.65)}
}
@keyframes r19-idleWalk{
  0%,64%{opacity:0;transform:scale(.6)}
  68%{opacity:calc(var(--base) * .62);transform:scale(.95)}
  75%{opacity:calc(var(--base) * .33);transform:scale(.82)}
  86%,100%{opacity:0;transform:scale(.65)}
}
@keyframes r19-activeReveal{
  0%{opacity:0;transform:scale(.6)}
  100%{opacity:calc(var(--base) * .82);transform:scale(.94)}
}
#explorer-tool.r19 .gl,#explorer-tool.r19 .spark{position:absolute;pointer-events:none;opacity:0}
#explorer-tool.r19 .gl{inset:-1px;border-radius:50%;z-index:0}
#explorer-tool.r19 .spark{top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:var(--mood);box-shadow:0 0 7px 1px var(--mood)}
#explorer-tool.r19 .fairy{
  position:absolute;
  top:50%;
  left:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,248,218,.95);
  box-shadow:
    0 0 7px 1px rgba(255,240,170,.75),
    0 0 13px 2px rgba(var(--mood-rgb),.38);
  opacity:0;
  pointer-events:none;
}
#explorer-tool.r19 .fairy::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:1px;
  transform:translate(-50%,-50%) rotate(var(--star-rot));
  background:rgba(255,248,218,.72);
  border-radius:999px;
}
#explorer-tool.r19 .x-hub.r19-fairy-dust .fairy{
  animation:r19-fairyFloat 3.0s cubic-bezier(.22,.61,.36,1) 1;
  animation-delay:var(--fdelay);
}
@keyframes r19-fairyFloat{
  0%{transform:translate(-50%,-50%) translate(0,0) scale(.28) rotate(0deg);opacity:0}
  16%{opacity:.88;transform:translate(-50%,-50%) translate(calc(var(--fx) * .16), calc(var(--fy) * .10 - 6px)) scale(.82) rotate(12deg)}
  42%{opacity:.78;transform:translate(-50%,-50%) translate(calc(var(--fx) * .42), calc(var(--fy) * .38 - 16px)) scale(1) rotate(32deg)}
  72%{opacity:.52;transform:translate(-50%,-50%) translate(calc(var(--fx) * .66), calc(var(--fy) * .62 - 30px)) scale(.9) rotate(58deg)}
  100%{opacity:0;transform:translate(-50%,-50%) translate(calc(var(--fx) * .88), calc(var(--fy) * .82 - 48px)) scale(.24) rotate(88deg)}
}
#explorer-tool.r19 .warm{background:radial-gradient(circle at 50% 54%,rgba(255,244,227,.95),rgba(var(--mood-rgb),.42) 38%,rgba(var(--mood-rgb),.12) 62%,transparent 80%)}
#explorer-tool.r19 .veil{background:radial-gradient(circle at 50% 44%,rgba(14,12,18,.24),rgba(14,12,18,.62) 56%,rgba(8,6,12,.96) 100%)}
#explorer-tool.r19 .fissure{background:linear-gradient(90deg,transparent 46%,rgba(34,27,35,.74) 49%,rgba(34,27,35,.74) 51%,transparent 54%);filter:blur(.6px)}
#explorer-tool.r19 .half{background:radial-gradient(circle at 32% 28%,#fffdf8,var(--paper) 74%);box-shadow:inset 0 0 0 1px rgba(var(--mood-rgb),.11)}
#explorer-tool.r19 .half-l{clip-path:polygon(0 0,52% 0,48% 20%,53% 38%,47% 55%,52% 75%,49% 100%,0 100%)}
#explorer-tool.r19 .half-r{clip-path:polygon(52% 0,100% 0,100% 100%,49% 100%,52% 75%,47% 55%,53% 38%,48% 20%)}
#explorer-tool.r19 .ghost{border:1px solid rgba(var(--mood-rgb),.55);background:rgba(var(--mood-rgb),.035)}
#explorer-tool.r19 .x-hub.r19g-break{animation:r19-idleHub 5.8s ease-in-out infinite,r19-g-break 1.8s var(--ease) 1}
@keyframes r19-g-break{
  0%{transform:translate(-50%,-50%) scale(1)}
  10%{transform:translate(-50%,-50%) scale(.972)}
  16%{transform:translate(calc(-50% + 1.5px),-50%) scale(.985)}
  22%{transform:translate(calc(-50% - 1px),-50%) scale(.985)}
  60%{transform:translate(-50%,-50%) scale(.99)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
#explorer-tool.r19 .x-hub.r19g-break .fissure{animation:r19-fissure 1.8s var(--ease) 1}
@keyframes r19-fissure{0%,9%{opacity:0}14%,58%{opacity:.78}84%,100%{opacity:0}}
#explorer-tool.r19 .x-hub.r19g-break .half-l{animation:r19-halfL 1.8s var(--ease) 1}
#explorer-tool.r19 .x-hub.r19g-break .half-r{animation:r19-halfR 1.8s var(--ease) 1}
@keyframes r19-halfL{0%,9%{opacity:0;transform:none}12%{opacity:.94;transform:none}15%{opacity:.94;transform:translate(1.5px,0)}26%,48%{opacity:.94;transform:translate(-8px,-1px) rotate(-1.25deg)}76%{opacity:.94;transform:none}88%,100%{opacity:0;transform:none}}
@keyframes r19-halfR{0%,9%{opacity:0;transform:none}12%{opacity:.94;transform:none}15%{opacity:.94;transform:translate(-1.5px,0)}26%,48%{opacity:.94;transform:translate(8px,1px) rotate(1.25deg)}76%{opacity:.94;transform:none}88%,100%{opacity:0;transform:none}}
#explorer-tool.r19 .x-hub.r19g-ember{animation:r19-idleHub 5.8s ease-in-out infinite,r19-g-ember 2s cubic-bezier(.37,0,.63,1) 1}
@keyframes r19-g-ember{0%{transform:translate(-50%,-50%) scale(1)}20%{transform:translate(-50%,-50%) scale(1.028)}50%{transform:translate(-50%,-50%) scale(1)}70%{transform:translate(-50%,-50%) scale(1.034)}100%{transform:translate(-50%,-50%) scale(1)}}
#explorer-tool.r19 .x-hub.r19g-ember .warm{animation:r19-warmGlow 2s cubic-bezier(.37,0,.63,1) 1}
@keyframes r19-warmGlow{0%{opacity:0}26%{opacity:.55}54%{opacity:.2}78%{opacity:.6}100%{opacity:0}}
#explorer-tool.r19 .x-hub.r19g-phase{animation:r19-idleHub 5.8s ease-in-out infinite,r19-g-phase 1.7s cubic-bezier(.2,0,0,1) 1}
@keyframes r19-g-phase{0%{transform:translate(-50%,-50%) rotate(0);border-radius:50%;opacity:1}18%{transform:translate(-50%,-50%) scale(.985) rotate(-2deg);border-radius:44%}38%{transform:translate(-50%,-50%) scale(1.02) rotate(3deg);border-radius:26%;opacity:1}54%{transform:translate(-50%,-50%) scale(1.02) rotate(1.5deg);border-radius:30%;opacity:.9}78%{transform:translate(-50%,-50%) scale(.995) rotate(-1deg);border-radius:46%;opacity:1}100%{transform:translate(-50%,-50%) rotate(0);border-radius:50%;opacity:1}}
#explorer-tool.r19 .x-hub.r19g-phase .ghost-a{animation:r19-ghostA 1.7s cubic-bezier(.2,0,0,1) 1}
#explorer-tool.r19 .x-hub.r19g-phase .ghost-b{animation:r19-ghostB 1.7s cubic-bezier(.2,0,0,1) 1}
@keyframes r19-ghostA{0%,12%{opacity:0;transform:none;border-radius:50%}30%{opacity:.35;transform:translate(-10px,-4px);border-radius:30%}44%{opacity:.16;transform:translate(-14px,-6px);border-radius:26%}62%{opacity:.3;transform:translate(-7px,-3px);border-radius:34%}86%,100%{opacity:0;transform:none;border-radius:50%}}
@keyframes r19-ghostB{0%,17%{opacity:0;transform:none;border-radius:50%}35%{opacity:.3;transform:translate(10px,4px);border-radius:30%}49%{opacity:.14;transform:translate(14px,6px);border-radius:26%}67%{opacity:.26;transform:translate(7px,3px);border-radius:34%}90%,100%{opacity:0;transform:none;border-radius:50%}}
#explorer-tool.r19 .x-hub.r19g-swallow{animation:r19-idleHub 5.8s ease-in-out infinite,r19-g-swallow 1.9s linear 1}
@keyframes r19-g-swallow{0%{transform:translate(-50%,-50%) scale(1);animation-timing-function:cubic-bezier(.64,0,.78,0)}55%{transform:translate(-50%,-50%) scale(.958);animation-timing-function:linear}70%{transform:translate(-50%,-50%) scale(.958);animation-timing-function:cubic-bezier(.05,.7,.1,1)}100%{transform:translate(-50%,-50%) scale(1)}}
#explorer-tool.r19 .x-hub.r19g-swallow .veil{animation:r19-veil 1.9s linear 1}
@keyframes r19-veil{0%{opacity:0;animation-timing-function:cubic-bezier(.64,0,.78,0)}55%{opacity:.88;animation-timing-function:linear}70%{opacity:.88;animation-timing-function:cubic-bezier(.2,0,0,1)}84%{opacity:.1;animation-timing-function:linear}96%{opacity:.08}100%{opacity:0}}
/* reduced motion: the sequence yields, nothing hides (site discipline) */
@media (prefers-reduced-motion: reduce){
  #explorer-tool.r19 .mood-btn,#explorer-tool.r19 .x-hub,#explorer-tool.r19 .x-hub-glow{animation:none!important;opacity:1;transform:translateY(0) scale(1)}
  #explorer-tool.r19 .x-hub{transform:translate(-50%,-50%)}
  #explorer-tool.r19 .x-hub-glow{transform:translate(-50%,-50%)}
  #explorer-tool.r19 .dot{animation:none!important}
}
/* neutralise the Mood Ring's own .mood-btn/.x-orbit inheritance inside r19 */
#explorer-tool.r19 .x-orbit{--radius:270px;--button-size:106px;--mood:var(--amber);--mood-rgb:192,138,62}
#explorer-tool.r19 .mood-btn{white-space:normal;animation:none}
#explorer-tool.r19 .x-orbit.r19-intro-start .mood-btn{animation:r19-titleArrive .85s var(--ease) forwards;animation-delay:var(--intro-delay)}
#explorer-tool.r19 #feelings{pointer-events:none}
/* PKG FINPUDS (2026-07-11): the shelf's books wear their own size —
   spine height + type follow the work's scope (cue count, set inline by
   worksShelf as --book-h/--book-fs). TYRA is a slim volume; RAPUNZEL the
   thick one. Fallbacks keep yesterday's look if the vars are absent. */
.works-library .shelf-item{
  min-height:var(--book-h, 9.5rem);
  font-size:calc(clamp(1.1rem, 2.3vw, 1.45rem) * var(--book-fs, 1));
}
/* OPTIONAL (Mathias' "more neutral type" wish — judge the un-bolded serif
   first; enable by removing this comment):
#explorer-tool.r19 .mood-btn{ font-family:var(--sans); font-size:12.6px; letter-spacing:.05em; }
*/
/* PKG SCENESKIFT (2026-07-11) — Mathias' browser-dom, fem punkter.
   RESTORE NOTES: radioens sektionsmodul vender tilbage ved at slette de to
   #rr-radio-regler herunder; biblioteket via LIBRARY_SHELVED i app.js. */
/* the footer says whose music this is — quiet, above the two composers */
.fe-line{font-family:var(--serif);font-size:.95rem;color:var(--ink-soft);margin:.3rem 0 1.6rem;letter-spacing:.03em}
/* the radio's editorial module rests (the air-bar player + bottom sheet ARE
   the radio now, woken from the nav) */
#rr-radio > .rr-wrap{display:none}
#rr-radio{border-top:0;padding-block:0}
/* the shelved library seats the radio invisibly — no empty band before the footer */
#library.shelved{padding:0;border:0}
/* ============================ end PKG RADIAL-LIVE ============================ */

/* ============================================================
   PKG SUPER2_M4 (2026-07-11) — THE PHYSICAL SHELF, PROPERLY
   Oven på PKG FINPUDS' historiske bibliotek (bøger med størrelse
   efter værkets omfang): en RIGTIG planke bøgerne står på, alle
   fødder på hyldefladen, titlerne CENTRERET på ryggene, og
   tag-bogen-ud-gestikken. Removal: delete this block.
   ============================================================ */
/* 1 · fødderne på hyldefladen + planken med lysfald */
.works-library .shelf-scroll{
  align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,0) 100%),
    linear-gradient(180deg, #5a4227 0%, #46331e 38%, #2a1e12 100%);
  background-size:100% 6px, 100% 13px;
  background-position:0 calc(100% - 1.8rem + 19px), 0 calc(100% - 1.8rem + 13px);
  background-repeat:no-repeat;
}
.works-library .shelf-stage{position:relative}
.works-library .shelf-stage::before{
  content:"";position:absolute;left:6%;right:6%;bottom:.15rem;height:14px;
  background:radial-gradient(50% 100% at 50% 0,rgba(0,0,0,.45),transparent 80%);
  pointer-events:none;
}
/* 2 · den historiske lænen består — men uden svævende offsets */
.works-library .shelf-item{
  margin-left:-0.35rem;position:relative;
  background-image:
    linear-gradient(0deg, rgba(242,234,217,.5) 0, rgba(242,234,217,.5) 3px, rgba(242,234,217,0) 3px),
    linear-gradient(180deg, var(--spine2,#1e242a) 0%, var(--spine) 16%);
  transition:transform 340ms var(--ease), box-shadow 340ms var(--ease), color 320ms;
}
.works-library .shelf-item:nth-child(odd) { transform:rotate(180deg) rotate(1.1deg); }
.works-library .shelf-item:nth-child(even){ transform:rotate(180deg) rotate(-1deg); }
/* 3 · AT TAGE BOGEN UD (rev2 — founders' dom: ingen 3D-skævhed).
      Bogen løfter sig LIGE op af hylden og kommer en anelse nærmere —
      proportionerne holdes; kun lys og skygge fortæller dybden. */
.works-library .shelf-item:hover, .works-library .shelf-item.touched{
  transform:rotate(180deg) translateY(-16px) scale(1.035);
  box-shadow:0 34px 54px rgba(12,8,4,.62), inset 0 0 0 .5px rgba(249,243,230,.32);
  color:#fff; z-index:3;
}
.works-library .shelf-item:active{
  transform:rotate(180deg) translateY(-24px) scale(1.05);
  transition-duration:160ms;
}
/* 4 · titlerne midt på bogryggene (founders' ruling) */
.works-library .shelf-item{justify-content:center}
.works-library .spine-title{text-align:center}
@media (prefers-reduced-motion: reduce){
  .works-library .shelf-item:hover, .works-library .shelf-item.touched,
  .works-library .shelf-item:active{ transform:rotate(180deg); box-shadow:0 26px 48px rgba(28,20,12,.5); }
}

/* ============================================================
   PKG SUPER2_M6 — checkbokse i søgerummet (kryds flere af)
   ============================================================ */
.facet-block .chip{position:relative;padding-left:1.9em}
.facet-block .chip::before{
  content:"";position:absolute;left:.6em;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:3px;border:1px solid currentColor;opacity:.55;
  transition:background .18s,opacity .18s;
}
.facet-block .chip.on::before{background:currentColor;opacity:1}
.facet-block .chip.on::after{
  content:"";position:absolute;left:calc(.6em + 2.5px);top:50%;
  width:5px;height:2.5px;border-left:1.6px solid var(--paper,#faf6ef);
  border-bottom:1.6px solid var(--paper,#faf6ef);
  transform:translateY(-70%) rotate(-45deg);
}
.search-mode .facet-block .chip.on::after{border-color:#20242a}

/* ============================================================
   PKG SUPER2_M5 rev2 (2026-07-12) — SANDET, IKKE SYMBOLERNE
   Founders' dom: rosetter/bølgemærker føltes som "weird symbols" —
   alt symbolsk er RULLET TILBAGE. I stedet: en næsten usynlig
   SANDKORN-tekstur over papiret (fixed overlay, feTurbulence-støj,
   multiply ved lav opacitet) — det nordiske som MATERIALE, ikke ikon.
   Removal: delete this block.
   ============================================================ */
body::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.72  0 0 0 0 0.66  0 0 0 0 0.56  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
@media print{body::after{display:none}}

/* ============================================================
   PKG SUPER2_DRAMA (2026-07-12) — revnen må aldrig krydse ordet.
   Founders' dom: under What Breaks Us-gestikken (Drama) løb den
   mørke fissure lodret gennem hub-svaret. Rettelse: fissuren
   maskes væk i midterzonen (månen revner stadig — foroven og
   forneden), og svaret bærer en blød papir-glød, så alle otte
   gestikker holder ordene læselige. Removal: delete this block.
   ============================================================ */
#explorer-tool.r19 .fissure{
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 36%, #000 52%);
  mask:radial-gradient(circle at 50% 50%, transparent 0 36%, #000 52%);
}
#explorer-tool.r19 .x-hub-title,#explorer-tool.r19 .x-hub-idle{
  text-shadow:0 0 8px var(--paper,#faf6ef),0 0 14px var(--paper,#faf6ef),0 0 24px var(--paper,#faf6ef);
}

/* ============================================================
   PKG SUPER2_M4 rev4 — bibliotekets sidste finish (founders' dom)
   1) Linjen der løb GENNEM bylinen under hylden er fjernet — planken
      er stregen nu. 2) En valgt bog trækkes HELT LIGE ud: rest-lænet
      nulstilles udtrykkeligt i hover/valgt/tryk, så hverken tekst
      eller ryg står skævt. Rest-lænet i ro er blødere (±0.6°).
   ============================================================ */
.works-library .shelf-stage::after{display:none}
.works-library .shelf-stage::before{bottom:2.4rem}
.works-library .shelf-card{position:relative;z-index:2;margin-top:1.6rem}
.works-library .shelf-item:nth-child(odd) { transform:rotate(180deg) rotate(0.6deg); }
.works-library .shelf-item:nth-child(even){ transform:rotate(180deg) rotate(-0.5deg); }
.works-library .shelf-item:hover, .works-library .shelf-item.touched{
  transform:rotate(180deg) translateY(-16px) scale(1.035) !important;
}
.works-library .shelf-item:active{
  transform:rotate(180deg) translateY(-24px) scale(1.05) !important;
}
@media (prefers-reduced-motion: reduce){
  .works-library .shelf-item:hover, .works-library .shelf-item.touched,
  .works-library .shelf-item:active{ transform:rotate(180deg) !important; }
}

/* ============================================================
   PKG SUPER2_M3 FINAL (founders' dom 2026-07-12) — PLANETERNE PÅ SITET.
   Den perfekte mellemvej mellem den enkle original og kuglerne:
   mere dækkede, matte planetfarver (82 % dør-farve mod varmt sand),
   et stille toplys i stedet for glans, næsten ingen glød i ro —
   og INGEN ekstra animation: kun originalens indgangs-sekvens og
   de otte accepterede hub-gestikker består. Testsiderne er hermed
   pensioneret — dette ER Exploreren. Rollback: slet blokken.
   ============================================================ */
#explorer-tool.r19 .mood-btn{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 48%, rgba(0,0,0,.14) 100%),
    color-mix(in srgb, rgb(var(--mood-rgb)) 33%, #d8cbb6) !important;   /* rev8 (founders' dom): 50% mere ind i papiret. JUSTÉR HER: ét tal, 0–100 (højere = mere farve) */
  border:0 !important;
  color:#fffdf4 !important;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  box-shadow:0 6px 20px -10px rgba(var(--mood-rgb),.38) !important;
}
#explorer-tool.r19 .mood-btn:hover,
#explorer-tool.r19 .arm.active .mood-btn,
#explorer-tool.r19 .x-arm.active .mood-btn{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.36) 0%, rgba(255,255,255,.08) 48%, rgba(0,0,0,.14) 100%),
    color-mix(in srgb, rgb(var(--mood-rgb)) 46%, #d8cbb6) !important;
  box-shadow:0 0 24px 2px rgba(var(--mood-rgb),.26) !important;
  transform:scale(1.045) !important;
}

/* ============================================================
   PKG SUPER2 rev5 (2026-07-12) — founders' tre finish-domme
   1) ENTER <PROJEKT> er GYLDEN igen (som i alle tidligere bygninger
      — .cue-link har altid båret ravet; nu følger .cue-enter med).
   2) Waveform-rektanglet SKIFTER IKKE farve, når sporet vælges/spiller
      — samme farve i ro og i spil (fremdriften vises stadig af den
      varme fill-gradient ovenpå).
   3) (Genre-vælgeren bor i radioens bar — se template-blokken.)
   ============================================================ */
.cue-enter{color:var(--amber)}
.cue-enter:hover{color:color-mix(in srgb,var(--amber) 72%,var(--ink));border-bottom-color:var(--amber)}
/* rev6 (founders' dom): det SPILLENDE spor markeres GYLDENT igen — huset
   opfører sig som før (rav-varme bjælker + fill viser hvor vi er), og
   rummet ved starten bruger nu SAMME guld som resten (ikke dør-tint). */
#moments [data-cue] .play.is-playing ~ .meta .wave span{background:var(--amber-soft)}

/* ============================================================
   PKG SUPER2 rev8 (2026-07-12) — founders' domme, ved roden
   ============================================================ */
/* 1 · WAVEFORM-REKTANGLERNE BÆRER KATEGORIENS FARVE — i ro blødt,
      spillende fuldt (rgba på dørens egen farve virker på både papir
      og nat; --dc-rgb sættes pr. række af momentRow). */
[data-cue] .wave span{background:rgba(var(--dc-rgb,201,179,148),.38) !important}
[data-cue] .play.is-playing ~ .meta .wave span{background:rgba(var(--dc-rgb,214,164,94),.85) !important}
/* 2 · ENTER <PROJEKT> ER GYLDEN — ved roden denne gang: #moments-reglen
      ("the enter link speaks the mood") og alle andre lag overstyres. */
.cue-enter,#moments .cue-enter,[data-cue] .cue-enter{color:var(--amber) !important}
.cue-enter:hover,#moments .cue-enter:hover,[data-cue] .cue-enter:hover{
  color:color-mix(in srgb,var(--amber) 70%,var(--ink)) !important;
  border-bottom-color:var(--amber) !important}
/* 3 · Radio-symbolet i menuen (efter Contact) */
.topbar .nav-radio-icon{display:inline-flex;align-items:center;vertical-align:middle}
.topbar .nav-radio-icon svg{display:block}
.sr-only-nav{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   PKG SUPER2 rev9 — Search tilbage (efter Contact) + BPM-markøren
   ============================================================ */
.chip-group-bpm .bpm-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.chip-group-bpm input[type=range]{flex:1 1 200px;max-width:320px;accent-color:var(--amber);cursor:pointer}
.chip-group-bpm .bpm-read{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);min-width:8.5em}
.search-mode .chip-group-bpm .bpm-read{color:var(--night-soft,#c9c2b4)}
.search-mode .chip-group-bpm input[type=range]{accent-color:var(--night-amber,#d6a45e)}
.chip-group-bpm .bpm-any{background:none;border:1px solid var(--line);border-radius:16px;padding:4px 12px;cursor:pointer;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.chip-group-bpm .bpm-any:hover{color:var(--amber);border-color:var(--amber)}

/* ============================================================
   PKG SUPER2 rev10 · MOBIL-DOMMENE (founders' dom, 2026-07-12)
   Otte lodrette telefon-domme + to globale værn. ROLLBACK: slet
   hele denne blok — intet andet rører den.
   ============================================================ */

/* (m1) Opener-vinduet er MASSIVT hele vejen ned. På telefonen kunne
   portrætterne skimtes forneden når værktøjslinjen trak sig sammen —
   en fast bundfarve + largest-viewport-højde lukker enhver sprække. */
#wf-arrival.wf-scene{ background-color:#e9dfc9; height:100lvh; }

/* (m5) Vandret overscroll viste en hvid stribe med følelserne bagved.
   Papiret dækker nu selve roden, og siden kan aldrig glide sidelæns —
   orbit-scenens 820px layoutkasse (den skaleres kun visuelt) var synderen. */
html{ background:var(--paper); }
html, body{ overflow-x:clip; }

@media (max-width:560px){
  /* (m2) Planeterne og månen: skriften op — læselig på telefonen.
     Kredsene består (spec); kun ordene vokser inde i skaleringen. */
  #explorer-tool.r19 .mood-btn{ font-size:22px; }
  #explorer-tool.r19 .x-hub-idle{ font-size:23px; }
  #explorer-tool.r19 .x-hub-title{ font-size:31px; }

  /* (m4+m8) Cue-rækkerne lodret: nummer · play · FØLELSEN øverst på én
     linje — teksten (titel, beskrivelse, bølge, handlinger) får FULD
     bredde nedenunder. Titlen står på ÉN linje; Copy link + Email this
     cue deler ÉN linje; følelsen står roligt for enden af sin egen
     linje i stedet for at svæve skævt ved siden af beskrivelsen. */
  .cue{ flex-wrap:wrap; row-gap:.55rem; }
  .cue .badge{ order:2; margin-left:auto; }
  .cue .meta{ order:3; flex:1 1 100%; min-width:0; }
  .cue .title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.15rem; }
  .moment{ flex-wrap:wrap; row-gap:.55rem; }
  .moment .from{ order:2; margin-left:auto; }
  .moment .meta{ order:3; flex:1 1 100%; min-width:0; }
  .moment .title{ font-size:1.3rem; }
  .cue .cue-actions, .moment .cue-actions{ flex-wrap:nowrap; gap:1.1rem; }
  .cue .cue-actions a, .moment .cue-actions a{ white-space:nowrap; }

  /* (m6) Menulinjen: HELE menuen synlig på telefonen. Navnet står på sin
     egen linje; menuen får hele bredden nedenunder og begynder helt til
     venstre — ingen sidescroll, intet fade der æder E'et i Explore. */
  .topbar{ flex-wrap:wrap; row-gap:.15rem; padding-top:.6rem; padding-bottom:.55rem; }
  .topbar .brand{ font-size:.82rem; white-space:nowrap; }
  .topbar nav{
    flex:1 1 100%; justify-content:space-between; gap:.4rem;
    overflow-x:visible; white-space:nowrap;
    mask-image:none; -webkit-mask-image:none;
  }
  .topbar nav a{ font-size:.8rem; }
}

/* energi-bjælker i Energy-søgechips (Brise->Orkan) */
.chip-energy{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-right:.45em;vertical-align:middle}
.chip-energy i{width:3px;height:4px;background:currentColor;opacity:.28;border-radius:1px}
.chip-energy i:nth-child(2){height:6px}.chip-energy i:nth-child(3){height:8px}.chip-energy i:nth-child(4){height:10px}.chip-energy i:nth-child(5){height:12px}
.chip-energy i.on{opacity:.95}
.chip-wind{gap:.15em}

/* #A: Works-pilene skal ALTID stå ved stage-kanten, uanset hvor mange works.
   Stagen holdes på container-bredde; det er .shelf-scroll der ruller indeni. */
.shelf-stage{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
.shelf-scroll{max-width:100%}
.shelf-page{position:absolute}
.shelf-prev{left:clamp(0.4rem,2vw,1.4rem)}
.shelf-next{right:clamp(0.4rem,2vw,1.4rem)}
/* #C: søgemodulet må ikke fylde hele siden — væggen ruller i et afgrænset felt */
.discover-wall{max-height:56vh;overflow-y:auto;overscroll-behavior:contain;padding-right:.4rem}
.discover-panel{max-height:none}
@media(max-height:720px){ .discover-wall{max-height:48vh} }

/* === WORKS: læsbar ryg-titel (kontrast pr. ryg, gold når vækket) === */
.works-library .spine-title{background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important;color:var(--spine-ink,#241f1b) !important;text-shadow:0 1px 2px rgba(0,0,0,.22);font-weight:600;letter-spacing:.02em;}
.works-library .shelf-item:hover .spine-title,.works-library .shelf-item.touched .spine-title,.works-library .shelf-item.lit .spine-title{background:linear-gradient(105deg,#e3bd76,#f6e4b3 45%,#cfa457 62%,#e3bd76) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none;}
/* === SEARCH: kompakt — mindre chips + tættere === */
.discover-panel{padding:1rem 1.1rem !important}
.chip-group + .chip-group{margin-top:.7rem !important}
.chip-title{font-size:.66rem !important;letter-spacing:.16em !important;margin-bottom:.4rem !important}
.chip-row{gap:.3rem .35rem !important}
.chip{font-size:.72rem !important;padding:.24rem .5rem !important;min-height:0 !important;line-height:1.25}
.chip-dot{width:6px;height:6px}
.discover-wall{max-height:46vh !important;margin-top:1rem !important;padding-top:.9rem !important}
.chip-group-wind .chip-row{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
@media(max-width:560px){.chip-group-wind .chip-row{grid-template-columns:repeat(5,minmax(0,1fr)) !important}.chip{font-size:.68rem !important;padding:.22rem .35rem !important}}

/* === v10.1: ryg-titel elegant (lys, ikke fed) === */
.works-library .spine-title{
  background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important;
  color:rgba(248,243,234,.94) !important;font-weight:500 !important;letter-spacing:.06em;
  text-shadow:0 1px 3px rgba(0,0,0,.5),0 0 10px rgba(0,0,0,.25) !important;
}
.works-library .shelf-item:hover .spine-title,
.works-library .shelf-item.touched .spine-title,
.works-library .shelf-item.lit .spine-title{
  background:linear-gradient(105deg,#e3bd76,#f6e4b3 45%,#cfa457 62%,#e3bd76) !important;
  -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important;
}

/* === v10.1: SØGE-REDESIGN — grupper i 2 kolonner, chips indholds-tilpassede (jf. mockup) === */
.facet-block{display:grid !important;grid-template-columns:1fr 1fr;gap:1.1rem 2.4rem;align-items:start}
.chip-row{display:flex !important;flex-wrap:wrap !important;gap:.32rem .34rem !important}
.chip-row .chip{width:auto !important;justify-content:center;flex:0 0 auto}
.chip{font-size:.72rem !important;padding:.24rem .62rem !important;line-height:1.2}
.chip-group-wind .chip-row .chip{padding:.24rem .5rem !important}
.chip-group{min-width:0}
@media(max-width:760px){ .facet-block{grid-template-columns:1fr !important} }

/* === v10.2: BOGREOL — enden skal kunne ses (bøger scroller fri af pilene) === */
.works-library .shelf-scroll{padding-inline:3.4rem !important;scroll-padding-inline:3.6rem}
@media(max-width:560px){ .works-library .shelf-scroll{padding-inline:2.6rem !important} }

/* === v10.2: SØGE-CHIPS uden bokse (tekst er nok) + Style/Genre 2 pr. række === */
.chip{border-color:transparent !important;background:transparent !important;padding:.18rem .3rem !important;border-radius:0 !important}
.chip:hover{color:var(--amber) !important;background:transparent !important}
.chip.on{background:transparent !important;color:var(--amber) !important;font-weight:600}
.chip.on::after{content:"";display:none}
.search-mode .chip{color:var(--night-soft)}
.search-mode .chip:hover,.search-mode .chip.on{color:var(--night-amber) !important}
.chip-group-style .chip-row,.chip-group-cat .chip-row{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.28rem .6rem !important}
.chip-group-style .chip,.chip-group-cat .chip{justify-content:flex-start !important;text-align:left !important;width:auto !important}
/* Energy-fader ser ud som Tempo-fader */
.chip-group-energy .bpm-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.chip-group-energy input[type=range]{flex:1 1 180px;max-width:300px;accent-color:var(--amber);cursor:pointer}
.chip-group-energy .bpm-read{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);min-width:6em}
.search-mode .chip-group-energy .bpm-read{color:var(--night-soft,#c9c2b4)}
.search-mode .chip-group-energy input[type=range]{accent-color:var(--night-amber,#d6a45e)}

/* === v10.3: fjern chip-markørerne (boks + checkmark) — nok at titlen farves === */
.facet-block .chip::before{display:none !important}
.facet-block .chip::after{display:none !important}
.facet-block .chip{padding-left:.3rem !important}
/* cue-titler = samme som brødtekst */
.wall-name{font-size:.94rem !important;font-family:var(--sans) !important;letter-spacing:0}
.moment .title{font-size:1.0625rem !important}
/* Energy-skala: de 5 vind-indikatorer altid synlige under faderen */
.energy-scale{display:flex;justify-content:space-between;gap:.4rem;margin-top:.55rem;max-width:320px}
.energy-scale .es-step{display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.5;transition:opacity .18s}
.energy-scale .es-step.sel{opacity:1}
.energy-scale .es-bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.energy-scale .es-bars i{width:3px;height:4px;background:currentColor;opacity:.3;border-radius:1px}
.energy-scale .es-bars i:nth-child(2){height:6px}.energy-scale .es-bars i:nth-child(3){height:8px}.energy-scale .es-bars i:nth-child(4){height:10px}.energy-scale .es-bars i:nth-child(5){height:12px}
.energy-scale .es-bars i.on{opacity:.9}
.energy-scale em{font-style:normal;font-size:.58rem;letter-spacing:.03em;color:var(--ink-faint)}
.search-mode .energy-scale em{color:var(--night-soft,#9aa)}

/* ===== v10.6 · Tempo — metronome-inspired BPM scale (mirrors the Energy wind row) ===== */
.bpm-scale{display:flex;justify-content:space-between;gap:.3rem;margin-top:.55rem;max-width:360px}
.bpm-scale .bs-step{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.5;transition:opacity .18s}
.bpm-scale .bs-step.sel{opacity:1}
.bpm-scale .bs-tick{width:1.5px;background:currentColor;opacity:.45;border-radius:1px}
.bpm-scale .bs-step:nth-child(1) .bs-tick{height:5px}
.bpm-scale .bs-step:nth-child(2) .bs-tick{height:7px}
.bpm-scale .bs-step:nth-child(3) .bs-tick{height:9px}
.bpm-scale .bs-step:nth-child(4) .bs-tick{height:11px}
.bpm-scale .bs-step:nth-child(5) .bs-tick{height:13px}
.bpm-scale .bs-step:nth-child(6) .bs-tick{height:15px}
.bpm-scale .bs-step.sel .bs-tick{opacity:1;background:var(--amber,#c8912f)}
.bpm-scale em{font-style:normal;font-size:.56rem;letter-spacing:.02em;color:var(--ink-faint);text-transform:uppercase}
.bpm-scale b{font-weight:600;font-size:.5rem;color:var(--ink-faint);opacity:.7}
.search-mode .bpm-scale em,.search-mode .bpm-scale b{color:var(--night-soft,#9aa)}

/* ===== v10.6 · WORKS LIBRARY — bound-book craft + all-caps spines ===== */
/* every spine title reads in capitals, whatever case the workbook stores
   (fixes "Tivoli Gardens" showing title-case + small next to the rest) */
.spine-title{ text-transform:uppercase; }

/* the books read as bound objects again: a defined vertical cloth grain
   and a double joint line down each long edge (the raised binding of an
   old hardcover). transform-safe — no pseudo-elements on the rotated box. */
.works-shelf .shelf-item, .works-library .shelf-item{
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.055) 0 1px, transparent 1px 4px),   /* vertical cloth grain along the spine */
    radial-gradient(rgba(255,252,244,.03) 1px, transparent 1px),                      /* fibre fleck */
    linear-gradient(180deg, var(--spine2, #6b7684) 0%, var(--spine) 16%);
  background-size: 100% 100%, 3px 3px, 100% 100%;
  box-shadow:
    0 3px 8px rgba(28,20,12,.35),
    0 16px 34px rgba(28,20,12,.38),
    inset 2px 0 0 rgba(255,250,240,.17),   /* outer lit joint */
    inset 5px 0 0 rgba(255,250,240,.055),  /* inner joint line — the binding band */
    inset -2px 0 0 rgba(15,10,6,.42),       /* outer shadowed joint (the hinge) */
    inset -5px 0 0 rgba(15,10,6,.15),       /* inner joint line */
    inset 0 0 0 .5px rgba(249,243,230,.12);
}
.works-shelf .shelf-item:hover, .works-shelf .shelf-item.touched,
.works-library .shelf-item:hover, .works-library .shelf-item.touched{
  box-shadow:
    0 6px 12px rgba(28,20,12,.4),
    0 30px 56px rgba(28,20,12,.5),
    inset 2px 0 0 rgba(255,250,240,.24),
    inset 5px 0 0 rgba(255,250,240,.08),
    inset -2px 0 0 rgba(15,10,6,.34),
    inset -5px 0 0 rgba(15,10,6,.13),
    inset 0 0 0 .5px rgba(249,243,230,.26);
}

/* ===== v10.6 · Explorer entrance overlay (Come in / Skip) ===== */
#explorer-tool.r19{ position:relative; }
.r19-enter{ position:absolute; inset:0; z-index:40; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 44%, color-mix(in srgb,var(--paper) 88%,transparent) 0%, color-mix(in srgb,var(--paper) 66%,transparent) 70%, transparent 100%);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:opacity .5s var(--ease); }
.r19-enter.leaving{ opacity:0; pointer-events:none; }
.r19-enter-card{ text-align:center; max-width:23rem; padding:1.4rem; }
.r19-enter-kicker{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1rem; }
.r19-enter-line{ font-size:1.28rem; line-height:1.4; color:var(--ink); margin:0 0 1.7rem; }
.r19-enter-actions{ display:flex; gap:1rem; justify-content:center; }
.r19-enter-go,.r19-enter-skip{ font:inherit; font-size:.95rem; cursor:pointer; border-radius:999px; padding:.62rem 1.6rem; transition:transform .18s var(--ease), background .2s, color .2s, border-color .2s; }
.r19-enter-go{ border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); }
.r19-enter-go:hover{ transform:translateY(-1px); }
.r19-enter-skip{ border:1px solid var(--line); background:transparent; color:var(--ink-soft); }
.r19-enter-skip:hover{ color:var(--ink); border-color:var(--ink-soft); }
/* Skip: reveal every satellite at once, no stagger */
#explorer-tool.r19 .x-orbit.r19-intro-skip .mood-btn{ opacity:1 !important; transform:none !important; animation:none !important; }

/* ==================== v10.7 ==================== */

/* Search: Undo + Reset buttons removed from the UI (unnecessary) */
.discover-actions{ display:none !important; }

/* Tempo: metronome now has 3 marks (Largo · Moderato · Presto) */
.bpm-scale .bs-step:nth-child(1) .bs-tick{height:6px}
.bpm-scale .bs-step:nth-child(2) .bs-tick{height:10px}
.bpm-scale .bs-step:nth-child(3) .bs-tick{height:14px}

/* Works Library: leather spine with horizontal binding bands (a real book) */
.works-shelf .shelf-item, .works-library .shelf-item{
  background-image:
    /* raised binding bands running ACROSS the spine (shadow ridge + highlight) */
    repeating-linear-gradient(0deg,
      transparent 0, transparent 27px,
      rgba(12,8,4,.42) 27px, rgba(12,8,4,.42) 28px,
      rgba(255,248,236,.11) 29px, rgba(255,248,236,.11) 30px,
      transparent 31px, transparent 58px),
    /* leather grain: two offset mottled speckles */
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.5px),
    radial-gradient(rgba(255,248,236,.035) 1px, transparent 1.5px),
    linear-gradient(180deg, var(--spine2, #6b7684) 0%, var(--spine) 16%);
  background-size: 100% 58px, 5px 5px, 7px 7px, 100% 100%;
  box-shadow:
    0 3px 8px rgba(28,20,12,.42),
    0 16px 34px rgba(28,20,12,.44),
    inset 2px 0 0 rgba(255,248,236,.16),      /* lit fore-edge */
    inset -2px 0 0 rgba(12,8,4,.46),           /* shadowed hinge */
    inset 0 0 16px rgba(12,8,4,.34),           /* leather depth */
    inset 0 0 0 .5px rgba(249,243,230,.12);
}
.works-shelf .shelf-item:hover, .works-shelf .shelf-item.touched,
.works-library .shelf-item:hover, .works-library .shelf-item.touched{
  box-shadow:
    0 6px 14px rgba(28,20,12,.46),
    0 30px 56px rgba(28,20,12,.52),
    inset 2px 0 0 rgba(255,248,236,.24),
    inset -2px 0 0 rgba(12,8,4,.4),
    inset 0 0 16px rgba(12,8,4,.28),
    inset 0 0 0 .5px rgba(249,243,230,.26);
}

/* Footer: slimmer */
.site-end{ padding: clamp(2.4rem, 5vw, 3.4rem) 1.5rem clamp(2rem, 4vw, 2.8rem) !important; }
.fe-brand{ margin: 0 0 clamp(1.4rem, 3vw, 2rem) !important; }
@media (max-width: 540px){
  .site-end{ padding: 2.2rem 1.2rem 1.8rem !important; }
}

/* Mobile: underline the brand so it reads apart from the nav row */
@media (max-width: 540px){
  .topbar .brand{
    border-bottom: 1.5px solid color-mix(in srgb, var(--amber) 70%, transparent);
    padding-bottom: 3px;
  }
}

/* ==================== v10.8 ==================== */

/* --- Energy: 5 rectangles that fill by level, colour intensifying; 'Any' at start --- */
.energy-scale{display:flex;align-items:flex-end;gap:.7rem;margin-top:.6rem;max-width:340px}
.energy-scale .es-any{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);opacity:.5;transition:opacity .18s,color .18s;flex:none;align-self:center}
.energy-scale[data-lvl="0"] .es-any{opacity:1;color:var(--ink-soft)}
.energy-scale .es-bars{display:flex;gap:5px;align-items:flex-end;flex:1;height:20px}
.energy-scale .es-bars i{flex:1;border-radius:2px;background:var(--ink-faint);opacity:.2;transition:background .2s,opacity .2s}
.energy-scale .es-bars i:nth-child(1){height:38%}
.energy-scale .es-bars i:nth-child(2){height:53%}
.energy-scale .es-bars i:nth-child(3){height:68%}
.energy-scale .es-bars i:nth-child(4){height:84%}
.energy-scale .es-bars i:nth-child(5){height:100%}
.energy-scale[data-lvl="1"] .es-bars i.on{background:#7FB0A6;opacity:.92}
.energy-scale[data-lvl="2"] .es-bars i.on{background:#A8C05E;opacity:.92}
.energy-scale[data-lvl="3"] .es-bars i.on{background:#D9B44A;opacity:.94}
.energy-scale[data-lvl="4"] .es-bars i.on{background:#D9873D;opacity:.95}
.energy-scale[data-lvl="5"] .es-bars i.on{background:#C6502E;opacity:.97}

/* --- Tempo: Any (start) · Slow · Moderate (mid) · Fast (end), distinct colours --- */
.bpm-scale{position:relative;height:30px;margin-top:.6rem;max-width:360px}
.bpm-scale .bs-step{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translateX(-50%);opacity:.62;transition:opacity .18s}
.bpm-scale .bs-step.bs-any{transform:none;left:0 !important;align-items:flex-start}
.bpm-scale .bs-step.bs-fast{transform:translateX(-100%);align-items:flex-end}
.bpm-scale .bs-step.sel{opacity:1}
.bpm-scale .bs-tick{width:2px;height:9px;border-radius:1px;background:currentColor;opacity:.55;transition:height .18s,opacity .18s}
.bpm-scale .bs-step.sel .bs-tick{height:13px;opacity:1}
.bpm-scale em{font-style:normal;font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.bpm-scale .bs-step.sel em{color:inherit}
.bpm-scale .bs-any{color:#8b8577}
.bpm-scale .bs-slow{color:#6E93B0}
.bpm-scale .bs-mod{color:#C7A24A}
.bpm-scale .bs-fast{color:#C6502E}
.search-mode .bpm-scale em{color:var(--night-soft,#9aa)}

/* --- Style chips get a neutral circle (align with Genre on mobile) --- */
.chip-dot-neutral{background:var(--ink-faint) !important;opacity:.5}

/* --- a cool line splits Style and Genre (the two-column gutter) --- */
@media(min-width:761px){
  .facet-block{
    background-image:linear-gradient(180deg, transparent 0, color-mix(in srgb,var(--ink) 20%,transparent) 14%, color-mix(in srgb,var(--ink) 20%,transparent) 86%, transparent 100%);
    background-size:1px 100%;background-position:center top;background-repeat:no-repeat;
  }
  .search-mode .facet-block{
    background-image:linear-gradient(180deg, transparent 0, color-mix(in srgb,var(--night-soft,#9aa) 30%,transparent) 14%, color-mix(in srgb,var(--night-soft,#9aa) 30%,transparent) 86%, transparent 100%);
  }
}

/* --- per-cue intensity symbol, bigger (easier to read) --- */
.wall-wind{ height:15px; gap:2px; }
.wall-wind i{ width:3px; }
.wall-wind i:nth-child(1){height:6px}.wall-wind i:nth-child(2){height:8px}.wall-wind i:nth-child(3){height:10px}.wall-wind i:nth-child(4){height:12px}.wall-wind i:nth-child(5){height:14px}
.wall-wind i:not(.on){height:5px}
.wall-wind i.on{height:14px}

/* --- Works Library: a real book — top + bottom line only, page-block depth, no dots --- */
.works-shelf .shelf-item, .works-library .shelf-item{
  background-image:
    linear-gradient(180deg,
      transparent 0, transparent 12px,
      rgba(12,8,4,.34) 12px, rgba(12,8,4,.34) 13px,
      rgba(255,248,236,.10) 13px, rgba(255,248,236,.10) 14px,
      transparent 14px,
      transparent calc(100% - 14px),
      rgba(255,248,236,.10) calc(100% - 14px), rgba(255,248,236,.10) calc(100% - 13px),
      rgba(12,8,4,.34) calc(100% - 13px), rgba(12,8,4,.34) calc(100% - 12px),
      transparent calc(100% - 12px)),
    /* page-block depth on the fore-edge: pale striped sliver */
    linear-gradient(90deg, transparent calc(100% - 7px),
      rgba(247,242,232,.55) calc(100% - 7px), rgba(214,207,193,.4) calc(100% - 4px),
      rgba(176,168,154,.5) calc(100% - 3px), rgba(247,242,232,.6) calc(100% - 1px)),
    linear-gradient(180deg, var(--spine2, #6b7684) 0%, var(--spine) 16%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  box-shadow:
    0 3px 8px rgba(28,20,12,.4),
    0 16px 34px rgba(28,20,12,.42),
    inset 3px 0 0 rgba(255,248,236,.15),
    inset -2px 0 0 rgba(12,8,4,.4),
    inset 0 0 0 .5px rgba(249,243,230,.1);
}
.works-shelf .shelf-item:hover, .works-shelf .shelf-item.touched,
.works-library .shelf-item:hover, .works-library .shelf-item.touched{
  box-shadow:
    0 6px 14px rgba(28,20,12,.46),
    0 30px 56px rgba(28,20,12,.52),
    inset 3px 0 0 rgba(255,248,236,.24),
    inset -2px 0 0 rgba(12,8,4,.34),
    inset 0 0 0 .5px rgba(249,243,230,.26);
}

/* --- Explorer satellites 5% bigger (mobile labels fit inside) --- */
#explorer-tool.r19, #explorer-tool.r19 .x-orbit{ --button-size:111px; }

/* ==================== v10.9 ==================== */

/* Energy & Tempo: prolong the fader; readout no longer hogs the row */
.chip-group-energy .bpm-row, .chip-group-bpm .bpm-row{ gap:.6rem; flex-wrap:nowrap; }
.chip-group-energy .bpm-row input, .chip-group-bpm .bpm-row input{ flex:1 1 auto; min-width:0; }
.chip-group-bpm .bpm-read{ min-width:0 !important; flex:none; white-space:nowrap; font-size:.72rem; letter-spacing:.08em; }
.chip-group-bpm .bpm-read:empty{ display:none; }

/* Energy scale row: [Any] [5 rectangles spanning to the fader end] [NAME] */
.energy-scale{ align-items:center; }
.energy-scale .es-name{ flex:none; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-align:right; }
.energy-scale .es-name:empty{ display:none; }
.search-mode .energy-scale .es-name{ color:var(--night-soft,#c9c2b4); }

/* Tempo scale: Slow (start) · Moderate (middle) · Fast (end), even + distinct colours */
.bpm-scale .bs-slow{ transform:none; left:0 !important; align-items:flex-start; color:#6E93B0; }
.bpm-scale .bs-mod{ color:#C7A24A; }
.bpm-scale .bs-fast{ transform:translateX(-100%); align-items:flex-end; color:#C6502E; }

/* per-cue level: prosody staircase always (small→FULL); on/off = colour only */
.wall-wind i:nth-child(1){height:6px !important}
.wall-wind i:nth-child(2){height:8px !important}
.wall-wind i:nth-child(3){height:11px !important}
.wall-wind i:nth-child(4){height:13px !important}
.wall-wind i:nth-child(5){height:16px !important}

/* Footer: remove the empty colour bands above it + 20% slimmer */
#rr-radio{ padding-block: var(--section) 0 !important; }
.site-end{ padding: clamp(1.9rem,4vw,2.7rem) 1.5rem clamp(1.5rem,3.1vw,2.1rem) !important; }
.fe-brand{ margin: 0 0 clamp(1.1rem,2.4vw,1.55rem) !important; }
@media(max-width:540px){ .site-end{ padding:1.7rem 1.1rem 1.4rem !important; } }

/* Explorer satellites +3% more (mobile labels fit) */
#explorer-tool.r19, #explorer-tool.r19 .x-orbit{ --button-size:114px; }

/* ==================== v10.10 ==================== */

/* Energy: fader + rectangles share ONE column so the rects stop exactly where
   the fader stops; the name sits AFTER them and takes the level's colour. */
.chip-group-energy .energy-body{ display:flex; align-items:flex-end; gap:.75rem; }
.chip-group-energy .energy-col{ flex:1 1 auto; min-width:0; }
.chip-group-energy .energy-col .bpm-row{ gap:0; }
.chip-group-energy .energy-col .bpm-row input{ width:100%; flex:1 1 auto; }
.chip-group-energy .energy-scale{ display:flex; gap:5px; align-items:flex-end; height:20px; margin-top:.5rem; max-width:none; }
.chip-group-energy .energy-scale i{ flex:1; border-radius:2px; background:var(--ink-faint); opacity:.2; transition:background .2s, opacity .2s; }
.chip-group-energy .energy-scale i:nth-child(1){ height:38%; }
.chip-group-energy .energy-scale i:nth-child(2){ height:53%; }
.chip-group-energy .energy-scale i:nth-child(3){ height:68%; }
.chip-group-energy .energy-scale i:nth-child(4){ height:84%; }
.chip-group-energy .energy-scale i:nth-child(5){ height:100%; }
.chip-group-energy .energy-body[data-lvl="1"] .energy-scale i.on{ background:#7FB0A6; opacity:.95; }
.chip-group-energy .energy-body[data-lvl="2"] .energy-scale i.on{ background:#A8C05E; opacity:.95; }
.chip-group-energy .energy-body[data-lvl="3"] .energy-scale i.on{ background:#D9B44A; opacity:.96; }
.chip-group-energy .energy-body[data-lvl="4"] .energy-scale i.on{ background:#D9873D; opacity:.97; }
.chip-group-energy .energy-body[data-lvl="5"] .energy-scale i.on{ background:#C6502E; opacity:.98; }
/* the name after the rects, coloured by intensity (distinct from Tempo) */
.chip-group-energy .es-name{ flex:none; align-self:center; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; transition:color .2s; }
.chip-group-energy .es-name:empty{ display:none; }
.chip-group-energy .energy-body[data-lvl="1"] .es-name{ color:#7FB0A6; }
.chip-group-energy .energy-body[data-lvl="2"] .es-name{ color:#93AE4C; }
.chip-group-energy .energy-body[data-lvl="3"] .es-name{ color:#C79E36; }
.chip-group-energy .energy-body[data-lvl="4"] .es-name{ color:#C9772E; }
.chip-group-energy .energy-body[data-lvl="5"] .es-name{ color:#C6502E; }

/* ==================== v10.11 ==================== */

/* Faders fill the whole module (align with the title above); Energy gets its
   own colour so it never reads the same as Tempo */
.chip-group-energy input[type=range]{ flex:1 1 auto !important; max-width:none !important; width:100% !important; accent-color:#3E9C86 !important; }
.chip-group-bpm input[type=range]{ flex:1 1 auto !important; max-width:none !important; width:100% !important; accent-color:var(--amber) !important; }
.search-mode .chip-group-energy input[type=range]{ accent-color:#5FBFA6 !important; }
.chip-group-energy .energy-col .bpm-row, .chip-group-bpm .bpm-row{ width:100%; }

/* Works nav lands with the shelf heading clear of the fixed top bar */
#works{ scroll-margin-top: 88px; }
@media (max-width:540px){ #works{ scroll-margin-top: 72px; } }

/* Footer: collapse the empty listening-room band before the footer to 0px
   (the radio lives in the floating bar + the Radio nav), and slim the footer */
#library.shelved{ padding:0 !important; border:0 !important; background:none !important; min-height:0 !important; }
#library.shelved #rr-radio{ padding:0 !important; border:0 !important; margin:0 !important; }
#library.shelved #rr-radio .rr-wrap{ display:none !important; }
.site-end{ padding: clamp(1.5rem,3vw,2.1rem) 1.5rem clamp(1.3rem,2.6vw,1.8rem) !important; }
.fe-brand{ margin: 0 0 clamp(.9rem,2vw,1.3rem) !important; }
@media(max-width:540px){ .site-end{ padding:1.4rem 1.1rem 1.2rem !important; } }

/* Arrival: "Come in" sized like the studio name, tighter around the text */
#wf-invite{ font-size:0.76rem !important; letter-spacing:0.2em !important; padding:0.5rem 1.15rem !important; margin-top:0.6rem !important; }

/* ==================== v10.12 ==================== */
/* Energy & Tempo stay PERMANENT: the name / readout space is always reserved,
   so the fader and the scale never shift. Empty = just room, no text. */
.chip-group-energy .es-name{ min-width:4.4em; display:inline-block; }
.chip-group-energy .es-name:empty{ display:inline-block !important; }
.chip-group-bpm .bpm-read{ min-width:7.6em !important; display:inline-block; text-align:right; }
.chip-group-bpm .bpm-read:empty{ display:inline-block !important; }

/* ==================== v10.15 ==================== */
/* Tempo + Energy scales: labels/rectangles appear only AFTER the fader leaves
   the neutral start; at rest a small nudge marks "reset / neutral" = the start. */

/* --- Tempo: hide Slow/Moderate/Fast until moved; nudge at the start --- */
.bpm-scale::before{ content:""; position:absolute; left:0; top:0; width:2px; height:9px; border-radius:1px; background:var(--ink-faint); opacity:.55; transition:opacity .2s; }
.search-mode .bpm-scale::before{ background:var(--night-soft,#9aa); }
.bpm-scale.moved::before{ opacity:0; }
.bpm-scale:not(.moved) .bs-step{ opacity:0 !important; pointer-events:none; }

/* --- Energy: hide the 5 rectangles until moved; nudge at the start --- */
.chip-group-energy .energy-scale{ position:relative; }
.chip-group-energy .energy-scale::before{ content:""; position:absolute; left:0; bottom:0; width:2px; height:9px; border-radius:1px; background:var(--ink-faint); opacity:.55; transition:opacity .2s; }
.search-mode .chip-group-energy .energy-scale::before{ background:var(--night-soft,#9aa); }
.chip-group-energy .energy-body[data-lvl="0"] .energy-scale i{ opacity:0 !important; }
.chip-group-energy .energy-body:not([data-lvl="0"]) .energy-scale::before{ opacity:0; }

/* ==================== v10.17 ==================== */

/* --- Energy fader: neutral grey track (no coloured fill), thumb grey at rest,
       orange when a level is chosen. The dot marks the value as a point (a
       start), not the end of a filled bar. --- */
.chip-group-energy input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; height:16px; cursor:pointer; }
.chip-group-energy input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:#494e56; }
.chip-group-energy input[type=range]::-moz-range-track{ height:4px; border-radius:2px; background:#494e56; }
.chip-group-energy input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; margin-top:-5.5px; border-radius:50%; background:#8b9099; border:0; transition:background .2s; }
.chip-group-energy input[type=range]::-moz-range-thumb{ width:15px; height:15px; border:0; border-radius:50%; background:#8b9099; transition:background .2s; }
.chip-group-energy .energy-body:not([data-lvl="0"]) input[type=range]::-webkit-slider-thumb{ background:var(--amber); }
.chip-group-energy .energy-body:not([data-lvl="0"]) input[type=range]::-moz-range-thumb{ background:var(--amber); }
.search-mode .chip-group-energy .energy-body:not([data-lvl="0"]) input[type=range]::-webkit-slider-thumb{ background:var(--night-amber,#d6a45e); }
.search-mode .chip-group-energy .energy-body:not([data-lvl="0"]) input[type=range]::-moz-range-thumb{ background:var(--night-amber,#d6a45e); }
/* remove the reset "dash" nudge under Energy */
.chip-group-energy .energy-scale::before{ display:none !important; }

/* --- WORKS module: trim the very long top; nav lands on the Our Works title
       with the books in view --- */
.works-library{ min-height:0 !important; }
.works-library{ padding-top: clamp(2rem, 5vw, 3.4rem) !important; }
.works-library .shelf-head{ margin-bottom: 1.6rem !important; }
#works{ scroll-margin-top: 66px; }
@media (max-width:540px){ #works{ scroll-margin-top: 58px; } }

/* --- Gallery caption: readable bar with an opaque black hue over the photo --- */
.cell-credit{ background: rgba(8,10,12,0.62) !important; color: rgba(246,240,230,0.96) !important; }

/* ==================== v10.18 ==================== */
/* Footer: kill the white bar. When the radio bar reserves space at the bottom,
   the footer's OWN dark fills that clearance instead of the paper body padding. */
html.rr-bar-on body{ padding-bottom:0 !important; }
html.rr-bar-on .site-end{ padding-bottom: calc(clamp(1.3rem,2.6vw,1.8rem) + 96px) !important; }
/* any residual height in the collapsed listening room reads dark, not white */
#library.shelved{ background:#15100a !important; }

/* Production Details: the Year sits at the very bottom, quietly separated */
.proj-popover .pd-year{ margin-top:.55rem; padding-top:.5rem; border-top:1px solid color-mix(in srgb, currentColor 14%, transparent); }

/* ==================== v10.19 ==================== */
/* Footer: close the ~31px gap between the contact section and the footer where
   the light body (--paper) background was showing = the last white bar. Pull
   the footer up over the gap (into the contact's empty bottom padding) and add
   the same amount back as top padding so the footer content stays put. */
.site-end{ margin-top:-40px !important; padding-top: calc(clamp(1.4rem,3vw,2rem) + 40px) !important; }

/* ==================== v10.20 ==================== */
/* "Produced with" collaborator name-tiles: long names (e.g. "Danish Cultural
   Institute", "Eventyrteatret") were cramped/clipped inside the fixed 84px
   square. Let a name-tile grow to fit its text as a pill (auto width, min 84px),
   grow height only if it must wrap, and stop clipping. Logo tiles are untouched. */
.logo-tile.name-tile{
  width: auto;
  min-width: 84px;
  height: auto;
  min-height: 84px;
  padding: 12px 20px;
  white-space: normal;
  overflow: visible;
  font-size: 0.82rem;
  line-height: 1.3;
}

/* ==================== v10.21 ==================== */
/* MOBIL: ankomst-overlayet dækkede kun det SMÅ viewport (svh) mens iOS
   Safaris nederste værktøjslinje var fremme — så et bånd af siden nedenunder
   kiggede frem forneden. 100lvh blev ignoreret på ældre iOS. Dæk i stedet det
   STORE viewport (100vh == stort på iOS; 100lvh hvor understøttet), så cremen
   når den ægte bund. Pin skip/hint til det synlige viewport, så de bliver
   siddende over værktøjslinjen. Cream bag låsen = ingen sprække kan vise siden. */
#wf-arrival.wf-scene{ bottom:auto; height:100vh; height:100lvh; height:100dvh; }

/* ==================== v10.32 (Mathias, 2. august 2026) ====================
   ANKOMSTEN SKAL DÆKKE HELE SKÆRMEN — set på iPhone: portrætterne og
   explorer-båndet kiggede stadig frem under cremen.

   Vi har nu forsøgt at ramme iOS' viewport-højde tre gange (svh, så 100vh,
   så 100lvh + en JS-udmåling). Hver gang har en ny tilstand i Safari —
   værktøjslinje fremme, skjult, midt i en scroll — flyttet målet.

   Derfor holder vi op med at måle. Mens ankomsten er åben, er der simpelthen
   ingenting andet på siden at kigge frem: alt undtagen selve overlayet
   skjules. Så er det ligegyldigt om vi rammer højden på pixelen.

   visibility (ikke display) bevarer layoutet, så siden ikke hopper når
   ankomsten forsvinder. wf-lock fjernes 900 ms inde i den 1,05 s lange
   udtoning, så indholdet toner frem BAG overlayet — præcis som før.

   Fortryd: slet denne blok. */
html.wf-lock body > *:not(#wf-arrival):not(#wf-precover) { visibility: hidden; }
html.wf-lock body { background-color: #e9dfc9; }
#wf-skip{ position:fixed; }
#wf-hint{ position:fixed; }
html.wf-lock, html.wf-lock body{ background-color:#e9dfc9; }

/* ==================== v10.23 ==================== */
/* Private pitch page ("Listening Room") — now dressed in the site's own night
   theme + the real cue player (poststeps.render_pitches + js/pitch.js). Only the
   pitch scaffolding lives here; cue/play/wave visuals are inherited from
   .work-lysfald + .cue above, so a pitch cue matches its Work page 1:1. */
body.pitch main{ padding: 11vh 0 12vh; }
body.pitch .pitch-head{ padding-bottom: 1vh; }
body.pitch .pitch-head .eyebrow{ color: var(--night-amber); }
body.pitch .pitch-head h1{ color: var(--night-ink); font-size: clamp(1.9rem,6vw,2.9rem); margin: .5rem 0 .3rem; }
body.pitch .pitch-head .sub{ color: var(--night-soft); font-style: italic; margin-top:.3rem; }
body.pitch .greeting{ color: var(--night-ink); opacity: .92; margin-top: 2rem; }
body.pitch .greeting p{ margin: 0 0 1em; }
body.pitch .cues{ margin-top: 5vh; }
body.pitch .cues > .narrow > .eyebrow{ color: var(--night-amber); margin-bottom: .4rem;
  border-top: .5px solid var(--night-line); padding-top: 2.2rem; }
body.pitch .note{ color: var(--night-ink); opacity:.9; margin-top: 3vh; }
body.pitch .close{ color: var(--night-soft); font-style: italic; margin-top: 2.4vh; }
/* the brothers — so the visitor knows whose music this is */
body.pitch .pitch-who{ display: flex; align-items: center; gap: 1.1rem;
  margin-top: 8vh; padding-top: 3vh; border-top: .5px solid var(--night-line); }
body.pitch .pitch-portrait{ position: relative; flex: 0 0 auto; width: 74px; height: 74px;
  border-radius: 50%; overflow: hidden; background: var(--night-2); }
body.pitch .pitch-portrait .ph-mark{ position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.15rem; letter-spacing: .08em; color: var(--night-soft); }
body.pitch .pitch-portrait img{ position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
body.pitch .pitch-names{ color: var(--night-soft); font-size: .95rem; line-height: 1.55; }
body.pitch .pitch-names strong{ color: var(--night-ink); font-weight: 500; }
/* onward — the same three doors as leaving a Work */
body.pitch .pitch-onward{ margin-top: 6vh; padding-top: 3vh; border-top: .5px solid var(--night-line); }
body.pitch .pitch-onward .eyebrow{ color: var(--night-soft); margin-bottom: 1rem; }
body.pitch .pitch-onward a{ display: block; font-family: var(--serif); font-size: 1.15rem;
  color: var(--night-ink); text-decoration: none; padding: .75rem 0;
  border-bottom: .5px solid var(--night-line); transition: color .2s var(--ease), padding-left .2s var(--ease); }
body.pitch .pitch-onward a:hover{ color: var(--night-amber); padding-left: .4rem; }
body.pitch .foot{ margin-top: 7vh; font-size: .72rem; letter-spacing: .08em;
  color: var(--night-line); text-transform: uppercase; }
body.pitch .draftnote{ border: 1px dashed var(--night-amber); color: var(--night-ink);
  padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin: 1.4rem 0; opacity: .9; }

/* ==================== v10.25 ==================== */
/* LURKS IN THE DARK · gesture redo (founders' note: the triangle looked wrong).
   Now the moon turns black, then drops away and fades out — like something
   thrown down a deep well — the dark HOLDS for a beat while it is gone, then it
   pops back up, leaving a dark hue ringing the text. No triangle; the veil is a
   full dark disc, darkest at the rim (so the returning text sits in a clearing). */
#explorer-tool.r19 .x-hub.r19g-swallow{ animation:r19-idleHub 5.8s ease-in-out infinite, r19-g-swallow 3.1s cubic-bezier(.5,0,.4,1) 1; }
@keyframes r19-g-swallow{
  0%   { transform:translate(-50%,-50%) scale(1);   opacity:1; animation-timing-function:cubic-bezier(.5,0,.85,.2); }
  16%  { transform:translate(-50%,-50%) scale(.99);  opacity:1; }
  42%  { transform:translate(-50%,calc(-50% + 46px)) scale(.5); opacity:0; animation-timing-function:linear; }
  66%  { transform:translate(-50%,calc(-50% + 46px)) scale(.5); opacity:0; animation-timing-function:cubic-bezier(.34,1.28,.5,1); }
  84%  { transform:translate(-50%,calc(-50% - 5px)) scale(1.05); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1);   opacity:1; }
}
#explorer-tool.r19 .x-hub.r19g-swallow .veil{ clip-path:none; animation:r19-veil 3.1s cubic-bezier(.5,0,.4,1) 1; }
@keyframes r19-veil{
  0%   { opacity:0;   animation-timing-function:cubic-bezier(.5,0,.85,.2); }
  16%  { opacity:1; }
  42%  { opacity:1; }
  66%  { opacity:1; }
  84%  { opacity:.55; }
  92%  { opacity:.4; }
  100% { opacity:0; }
}

/* Listening Room refinements: cues carry only the explanatory text (no cue
   title, no category badge); the three onward doors sit on ONE row right after
   the closing line; a big portrait of the brothers closes the page. */
body.pitch .cue-desc{ font-family:var(--serif); font-size:1.06rem; line-height:1.5; color:var(--night-ink); margin:.1rem 0 0; }
body.pitch .pitch-onward{ margin-top:5vh; padding-top:3vh; border-top:.5px solid var(--night-line); }
body.pitch .pitch-onward .eyebrow{ color:var(--night-soft); margin-bottom:1.1rem; }
body.pitch .onward-row{ display:flex; flex-wrap:wrap; gap:1.1rem 2rem; align-items:baseline; }
body.pitch .onward-row a{ font-family:var(--serif); font-size:1.08rem; color:var(--night-ink); text-decoration:none; border-bottom:.5px solid var(--night-line); padding-bottom:2px; white-space:nowrap; transition:color .2s var(--ease), border-color .2s var(--ease); }
body.pitch .onward-row a:hover{ color:var(--night-amber); border-bottom-color:var(--night-amber); }
body.pitch .pitch-brothers{ width:min(46rem,94vw); margin:9vh auto 0; }
body.pitch .pitch-brothers .pb-img{ position:relative; width:100%; aspect-ratio:3/2; background:var(--night-2); border-radius:14px; overflow:hidden; }
body.pitch .pitch-brothers .pb-img img{ position:relative; width:100%; height:100%; object-fit:cover; display:block; }
body.pitch .pitch-brothers .ph-mark{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:2.6rem; letter-spacing:.12em; color:var(--night-soft); }
body.pitch .pitch-brothers figcaption{ font-family:var(--serif); font-size:.95rem; color:var(--night-soft); text-align:center; margin-top:1rem; }
body.pitch .pitch-brothers + .narrow{ margin-top:5vh; }

/* ==================== v10.26 ==================== */
/* Explorer hub intro — a smoother TELESCOPE (founders' note: the reveal wasn't
   smooth). The moon now begins as a tiny black dot far off and telescopes open
   in one continuous decelerate (no bounce), brightening from black to its lit
   surface as it grows to catch the centre text. */
#explorer-tool.r19 .x-orbit.r19-hub-revealed .x-hub{
  animation:r19-idleHub 5.8s ease-in-out infinite, r19-hubIntro 1.35s cubic-bezier(.14,.7,.16,1) forwards;
}
@keyframes r19-hubIntro{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.04); filter:brightness(0); }
  9%   { opacity:1; transform:translate(-50%,-50%) scale(.06); filter:brightness(0); }
  60%  { filter:brightness(.35); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1);  filter:brightness(1); }
}

/* Pitch: with no "Listening room" heading, a hairline separates the greeting
   from the audio files. */
body.pitch .cues{ border-top:.5px solid var(--night-line); padding-top:3vh; }

/* ==================== v10.27 ==================== */
/* LURKS IN THE DARK · creepier (founders' note): dark STRAIGHT AWAY (you never
   see the lit circle), stays dark a long time, then fades out and recedes into
   the distance over ~6s. Driven by the veil (a full, near-solid black disc) so
   it lands reliably; the moon behind it never flashes light. */
#explorer-tool.r19 .x-hub.r19g-swallow .veil{
  clip-path:none;
  background:radial-gradient(circle at 50% 46%, rgba(4,3,7,.99), rgba(1,0,3,1) 72%);
  animation:r19-veil 5.8s cubic-bezier(.3,0,.3,1) 1;
}
@keyframes r19-veil{
  0%   { opacity:0; transform:scale(1.03); }
  2%   { opacity:1; transform:scale(1); }     /* dark instantly — the circle is gone */
  68%  { opacity:1; transform:scale(1); }     /* holds black, long and creepy */
  100% { opacity:0; transform:scale(.38); }   /* fades out, receding into the distance */
}

/* Listening Room — tighter rhythm + a smaller, text-aligned portrait. */
body.pitch main{ padding: max(12vh, 6rem) 0 12vh; }   /* clear the fixed top menu */
body.pitch .greeting{ margin-top: 1.6rem; }
body.pitch .cues{ margin-top: 2.6vh; padding-top: 2.4vh; }
body.pitch .pitch-onward{ margin-top: 3.4vh; padding-top: 2.6vh; }
body.pitch .close{ margin-top: 2vh; }
/* the brothers: 30% smaller and left-aligned with the text column (no longer
   bleeding past it) */
body.pitch .pitch-brothers{ width: min(32rem, 100%); margin: 4.5vh 0 0; }
body.pitch .pitch-brothers .ph-mark{ font-size: 2.1rem; }
body.pitch .foot{ margin-top: 5vh; }

/* ==================== v10.28 ==================== */
/* Chosen satellite: the BOLD two-line label (e.g. "Moments of Wonder") sat
   off-centre because bold at full size + letter-spacing overflowed the circle.
   Tighten it so it centres cleanly inside the (now 2% larger) circle. */
#explorer-tool.r19 .mood-btn.active{
  font-size:15.5px !important;
  letter-spacing:0 !important;
  line-height:1.06 !important;
  padding:8px !important;
  place-items:center !important;
  place-content:center !important;
}
/* LURKS IN THE DARK: the change FROM black now happens more gradually and the
   whole thing is ~2s shorter (5.8s -> 3.8s). Plus a soft light backing behind
   the centre text (extended ~10%) so the genre reads easily against the dark. */
#explorer-tool.r19 .x-hub.r19g-swallow .veil{ animation:r19-veil 3.8s cubic-bezier(.4,0,.35,1) 1; }
@keyframes r19-veil{
  0%   { opacity:0; transform:scale(1.03); }
  3%   { opacity:1; transform:scale(1); }     /* dark straight away */
  42%  { opacity:1; transform:scale(1); }     /* a short hold */
  100% { opacity:0; transform:scale(.4); }    /* then a long, gradual fade + recede */
}
#explorer-tool.r19 .x-hub.r19g-swallow .x-hub-title{
  background:rgba(248,244,237,.92);
  padding:.16em .7em;
  border-radius:11px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ==================== v10.30 ==================== */
/* Footer was unnecessarily tall (huge top/bottom padding). Tighten it. */
.site-end{ padding: clamp(2.4rem,5vw,3.6rem) 1.5rem clamp(2rem,4vw,3rem) !important; }
.fe-brand{ margin: 0 0 clamp(1.1rem,3vw,1.7rem) !important; }
/* Mobile arrival: while the opener is locked, the footer can never peek in the
   toolbar band (belt-and-suspenders with the JS large-viewport cover). */
html.wf-lock .site-end{ visibility: hidden !important; }

/* ==================== v10.32 · TO RETTELSER (2. august 2026) ====================

   1) OVERSKRIFTER BLEV KLIPPET AF UNDER DEN FASTE HEADER
   .topbar er position:fixed med en næsten uigennemsigtig creme-baggrund.
   Indholdet ruller ind under den, og kompensationen var ét fast tal:
   scroll-margin-top 78px (66px under 560px).

   Men headeren har ikke fast højde. "Nordic Music Brothers" ombrydes til to
   linjer mellem ca. 561 og 760 px bredde — dér får .brand først nowrap ved
   560px. Headeren vokser, tallet gør ikke, og toppen af overskriften havner
   bag den blurrede creme-bjælke. Fordi baggrunden har næsten samme farve som
   siden, ligner det at teksten er klippet af frem for dækket.

   Rettelsen har to lag:
   · app.js måler headerens FAKTISKE højde og skriver den i --topbar-h.
     scroll-margin regnes nu derfra, så den følger med uanset ombrydning.
   · .brand ombrydes ikke længere i det interval hvor der er plads.
     Under 560px er nowrap allerede sat, og der er skriften mindre.

   2) TITLER SKAL BRYDE HARMONISK
   Når en overskrift bliver til to linjer, fordelte browseren ordene efter
   "fyld linjen først" — så linje 1 blev lang og linje 2 et enkelt ord.
   text-wrap:balance beder browseren gøre linjerne lige lange, som I selv
   gør i JS for satellitternes labels (funktionen balanced() i app.js).
   Nu er reglen den samme overalt. Browsere uden understøttelse ignorerer
   den og bryder som hidtil — ingen risiko.

   Fortryd: slet denne blok og linjerne omkring maalTopbar() i app.js. */

:root { --topbar-h: 78px; }

/* scroll-margin følger headerens virkelige højde */
section[id]  { scroll-margin-top: calc(var(--topbar-h) + 1.1rem); }
[data-cue]   { scroll-margin-top: calc(var(--topbar-h) + 1.6rem); }
.orbit       { scroll-margin-top: calc(var(--topbar-h) + 1.1rem); }

/* logoet holder én linje så længe der er plads til det */
@media (min-width: 561px) { .topbar .brand { white-space: nowrap; } }

/* harmonisk brydning — lige lange linjer i alt der læses som en titel */
h1, h2, h3,
.wf-name, .wf-sentence,
.orbit-title, .x-hub-title, .x-hub-idle,
.work-title, .cue-title, .invite-sub,
.eyebrow, .who-title, .who-statement {
  text-wrap: balance;
}
/* brødtekst skal IKKE balanceres — der er "pretty" det rigtige:
   den undgår enlige ord på sidste linje uden at omfordele hele afsnittet */
p, li, blockquote, .story, .desc { text-wrap: pretty; }

/* ==================== v10.32 · TRE RETTELSER (2. august 2026, runde 2) ====

   1) HEADEREN KOLLIDEREDE
   Min forrige rettelse gav .brand nowrap over 560px, så headeren ikke
   længere voksede. Men .topbar er flex med space-between og INGEN gap —
   så "Nordic Music Brothers" løb direkte ind i "Explore". Én fejl byttet
   for en anden. Nu er der en gap, og logoet skalerer ned i stedet for at
   støde sammen.

   2) LURKS IN THE DARK · SWALLOW
   Kun denne ene door. De syv andre beholder møntflippet uændret.
   app.js sætter .gest-swallow på hub'en når doren er lurks-in-the-dark;
   alt andet er den samme kode som før.

   3) RYG-TITLER VAR ULÆSELIGE PÅ LYSE FARVER
   app.js beregnede --spine-ink pr. bog, men en v10.1-regel (linje ~6154)
   satte color:rgba(248,243,234,.94) !important på ALLE rygge. Beregningen
   var død kode. På Playful Sparks' gule #E2BE44 gav lys tekst en kontrast
   på 1,8:1 — grænsen for læsbarhed er 4,5:1. Med mørk blæk bliver den 11,7:1.
   Nu bruges --spine-ink igen, og halo-skyggen vender efter blækket:
   lys tekst får mørk skygge, mørk tekst får lys.
   Den lette vægt og sporingen fra v10.1 er bevaret — kun farven ændres.

   Fortryd: slet denne blok. */

/* 1 · header */
.topbar { gap: clamp(1rem, 3vw, 2.4rem); }
@media (min-width: 561px) {
  .topbar .brand { font-size: clamp(0.86rem, 1.9vw, 1.1rem); }
}

/* 2 · Lurks in the Dark — swallow */
@keyframes nmb-swallow-out{
  0%   {transform:translateY(0) scale(1);opacity:1;filter:blur(0)}
  40%  {transform:translateY(0);opacity:1}
  45%  {transform:translate(-2px,.5px)}
  51%  {transform:translate(2.2px,-.5px)}
  57%  {transform:translate(-1.8px,.5px)}
  63%  {transform:translate(1.4px,0)}
  69%  {transform:translate(-.8px,0);opacity:.94}
  100% {transform:translateY(11px) scale(.92);opacity:0;filter:blur(3.5px)}
}
@keyframes nmb-swallow-in{
  0%   {transform:translateY(-7px) scale(1.05);opacity:0;filter:blur(4px)}
  100% {transform:translateY(0) scale(1);opacity:1;filter:blur(0)}
}
.gest-swallow .x-hub-genre.flip-out{
  opacity:1; transform:none; transition:none;
  animation:nmb-swallow-out 760ms cubic-bezier(.4,0,.2,1) forwards;
}
.gest-swallow .x-hub-genre.flip-in{
  opacity:0; transform:none; transition:none; animation:none;
}
.gest-swallow .x-hub-genre:not(.flip-out):not(.flip-in){
  animation:nmb-swallow-in 460ms cubic-bezier(.4,0,.2,1) backwards;
}
@media (prefers-reduced-motion: reduce){
  .gest-swallow .x-hub-genre.flip-out,
  .gest-swallow .x-hub-genre:not(.flip-out):not(.flip-in){
    animation-duration:.01ms !important;
  }
}

/* 3 · ryg-titler — RULLET TILBAGE OG RETTET DET RIGTIGE STED (Mathias, 2. aug.)
   Min første rettelse gjorde alle rygge mørke. Det var forkert: i hvile SÅ
   den hvide tekst bedre ud, og den var læsbar nok mod bøgernes dybe farver.
   Problemet var kun HOVER: dér skifter titlen til en guldgradient
   (#e3bd76→#f6e4b3→#cfa457) clippet til teksten. På en lys, varm ryg som
   TIVOLI GARDENS' gule er guld på gul praktisk talt usynligt.
   Så: hvid tekst i hvile som før — og på lyse rygge bliver hover MØRK
   guld i stedet for lys, så kontrasten holder begge veje.
   --spine-ink beregnes stadig i app.js og bruges nu kun til at afgøre
   HVILKEN hover-gradient ryggen får. */
.works-library .spine-title{
  color: rgba(248,243,234,.94) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 10px rgba(0,0,0,.25) !important;
}
/* lyse rygge (dem hvor app.js valgte mørkt blæk) får en mørk hover-gradient */
.works-library .shelf-item[style*="--spine-ink:#141110"]:hover .spine-title,
.works-library .shelf-item[style*="--spine-ink:#141110"].touched .spine-title,
.works-library .shelf-item[style*="--spine-ink:#141110"].lit .spine-title{
  background:linear-gradient(105deg,#4a3a1c,#7a6230 45%,#3b2d15 62%,#4a3a1c) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
  text-shadow:0 1px 2px rgba(255,255,255,.45) !important;
}

/* ==================== v10.32 · NYE FELTER PÅ VÆRKSSIDEN (16. august 2026) ==
   Placeringerne er Mathias' beslutning af 13. august.

   1) CREDIT LINE — den formelle kreditering, diskret i hero under subtitlen.
      Aldrig større end den; den skal kunne læses, ikke ses først.

   2) CITATET — nederst, lige før Farewell Line. Stort og luftigt, afsender i
      lille skrift. Blokken findes slet ikke når citatet mangler (JS bygger den
      ikke), så der opstår intet hul, og Farewell bliver sidste element som den
      skal. Gælder PUSTEN, COMIC BRAIN og FØNIX.

   3) PRODUCTION NOTES — inde i den EKSISTERENDE detalje-popup. Der må aldrig
      være to popup-knapper på samme værksside, så intet nyt er tilføjet
      udenpå; teksten lægges ind i .proj-popover ved siden af highlights.

   Fortryd: slet denne blok og de tilsvarende linjer i app.js. */

/* 1 · credit line */
.work-hero .titleblock .work-credit{
  margin:.55rem 0 0; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.05em; line-height:1.5; color:var(--night-soft);
  opacity:.86; text-wrap:balance;
}

/* 1b · impact-linjen (v10.32, Mathias' placering: én linje i hero under
   subtitlen — museumsetikettens tal, aldrig større end subtitlen) */
.work-hero .titleblock .work-impact{
  margin:.6rem 0 0; font-family:var(--sans); font-size:.78rem;
  letter-spacing:.09em; line-height:1.5; color:var(--night-amber, var(--amber));
  opacity:.92; text-wrap:balance;
}

/* 1c · underside-link (10/9: kun Mogens — egen koncert-side) */
.work-hero .titleblock .work-pagelink{ margin:.8rem 0 0; }
.work-hero .titleblock .work-pagelink a{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--night-ink, #e8e4da);
  text-decoration:none; border-bottom:1px solid var(--night-amber, var(--amber));
  padding-bottom:2px;
}
.work-hero .titleblock .work-pagelink a:hover{ color:var(--night-amber, var(--amber)); }

/* 2 · citatet */
.work-quote{
  padding: clamp(3rem,7vw,4.6rem) 1.5rem clamp(1.6rem,4vw,2.4rem);
  background: var(--paper); text-align:center;
}
.work-quote .wq-inner{ margin:0 auto; max-width:34rem; }
.work-quote blockquote{
  margin:0; font-weight:400; font-size:clamp(1.2rem,3.4vw,1.72rem);
  line-height:1.48; color:var(--ink); text-wrap:balance;
}
.work-quote blockquote::before{
  content:"\201C"; display:block; font-family:var(--serif);
  font-size:3rem; line-height:.34; color:var(--amber);
  opacity:.32; margin-bottom:1rem;
}
.work-quote .wq-by{
  margin-top:1.15rem; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
@media (max-width:560px){
  .work-quote{ padding-left:1.2rem; padding-right:1.2rem; }
}

/* 3 · production notes i popup'en */
.proj-popover .pd-prod{ margin-top:1.1rem; padding-top:1rem;
  border-top:.5px solid rgba(43,39,33,.1); }
.proj-popover .pd-prod-list{ margin:.45rem 0 0; padding-left:1.05rem; }
.proj-popover .pd-prod-list li{ font-size:.84rem; line-height:1.6;
  color:var(--ink-soft); margin-bottom:.5rem; text-wrap:pretty; }
.proj-popover .pd-prod-text{ margin:.45rem 0 0; font-size:.84rem;
  line-height:1.6; color:var(--ink-soft); text-wrap:pretty; }

/* ================================================================
   v10.32 · THE WORLD AT THE CENTRE (Rasmus' forslag, 18. august)
   Evolution af v19 STORM-orbitten: midten ER besøgendes verden.
   Hvile: YOUR WORLD · hover: dørens sætning (aldrig en genre) ·
   første klik: puls indad + dørens lead-cue i SAMME gestus, og
   midten bliver en kompakt cirkulær spiller (ægte waveform-ring,
   klik på ringen søger). "Hear more from this world" åbner først
   den eksisterende rolig→Storm-liste. Mobil (<760px) får sin egen
   komposition — aldrig den nedskalerede desktop-enhed.
   Fortryd: slet denne blok + v10.32-linjerne i app.js/templaten.
   ================================================================ */

.explorer-head .ex-sup{
  margin:.7rem 0 0; color:var(--ink-soft); font-size:1rem;
}

/* hub: sentence sizing + the holding (player) state */
#explorer-tool.r19 .x-hub{
  transition:border-color .38s var(--ease),box-shadow .38s var(--ease),
    background .5s var(--ease),width .45s var(--ease),height .45s var(--ease);
}
#explorer-tool.r19 .x-hub-title{
  font-size:19px; font-weight:400; width:82%; padding:0; line-height:1.3;
}
#explorer-tool.r19 .x-hub.active{
  background:radial-gradient(circle at 32% 28%,#fffdf8,var(--paper) 74%);
}
@supports (background: color-mix(in srgb, red 10%, white)){
  #explorer-tool.r19 .x-hub.active{
    background:radial-gradient(circle at 32% 28%,#fffdf8,color-mix(in srgb,rgb(var(--mood-rgb)) 6%,var(--paper)) 74%);
  }
  #explorer-tool.r19 .x-hub.holding, .m-centre.holding{
    background:radial-gradient(circle at 32% 28%,#fffdf8 8%,color-mix(in srgb,rgb(var(--mood-rgb)) 14%,var(--paper)) 78%)!important;
  }
}
#explorer-tool.r19 .x-hub.holding{ width:212px; height:212px; }
#explorer-tool.r19 .x-hub.holding .x-hub-idle{ opacity:0; }

/* the compact circular player inside the held centre */
.x-hub-player{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.x-hub.holding:not(.previewing) .x-hub-player,
.m-centre.holding .x-hub-player{opacity:1;pointer-events:auto}
.x-hub.holding:not(.previewing) .x-hub-title{opacity:0}
.x-ring{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;border-radius:50%}
.x-pcore{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:66%;text-align:center;pointer-events:none}
.x-pbtn{pointer-events:auto;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(var(--mood-rgb),.7);color:rgb(var(--mood-rgb));
  display:inline-grid;place-items:center;background:rgba(255,253,248,.78);
  transition:background .3s,color .3s;margin-bottom:4px;cursor:pointer}
.x-pbtn:hover{background:rgb(var(--mood-rgb));color:#fff}
.x-pcue{font-size:13.5px;line-height:1.25;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.x-pwork{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.x-ptime{font-size:10px;color:var(--ink-faint);font-variant-numeric:tabular-nums;margin-top:1px}

/* the secondary action beneath the active centre (desktop) */
.x-more{position:absolute;top:calc(50% + 128px);left:50%;transform:translate(-50%,0);
  z-index:6;opacity:0;pointer-events:none;transition:opacity .5s var(--ease) .2s;
  font:inherit;font-size:.82rem;color:var(--ink-soft);background:none;border:none;cursor:pointer;
  border-bottom:1px solid var(--line);padding:0 0 1px;white-space:nowrap}
#explorer-tool.playing .x-more{opacity:1;pointer-events:auto}
.x-more:hover{color:var(--mood-cur,var(--amber));border-color:var(--mood-cur,var(--amber))}

/* the chosen planet holds its lit state while its music plays */
#explorer-tool.r19 .arm.chosen .mood-btn{background:rgba(var(--mood-rgb),.20);
  border-color:rgba(var(--mood-rgb),.9);
  box-shadow:0 0 0 3px rgba(var(--mood-rgb),.14),0 16px 34px -22px rgba(var(--mood-rgb),.66)}

/* THE FIRST-CLICK PULSE: one visible signal travelling inward */
.pulse-comet{position:absolute;top:-2px;left:calc(var(--radius) * .92);width:5px;height:5px;
  border-radius:50%;background:var(--mood);box-shadow:0 0 10px 3px rgba(var(--mood-rgb),.6);
  pointer-events:none;animation:wac-comet .55s cubic-bezier(.3,0,.4,1) forwards}
@keyframes wac-comet{
  0%{left:calc(var(--radius) * .92);opacity:0;transform:scale(.6)}
  12%{opacity:1;transform:scale(1.1)}
  100%{left:calc(var(--radius) * .18);opacity:0;transform:scale(.5)}}

/* ---- MOBILE: native composition, never a scaled desktop unit ---- */
.m-wrap{display:none}
/* Noter 19/8: mobil-kompositionen er UDFASET foreløbigt (cool nok, men
   ikke lige så flot) — den skalerede desktop-enhed serverer alle bredder.
   Markup + JS står i dvale; genindsæt medialinjerne for at vække den. */
.m-wrap{display:none!important}
@media (max-width:760px) and (min-width:99999px){
  #explorer-tool.r19 .x-stage{display:none}
  .m-wrap{display:block;width:min(30rem,94vw);margin:1.4rem auto 0}
  .m-centre{position:relative;width:min(232px,64vw);height:min(232px,64vw);margin:0 auto;
    border-radius:50%;border:1px solid var(--line);
    background:radial-gradient(circle at 32% 28%,#fffdf8,var(--paper) 74%);
    transition:border-color .38s var(--ease),box-shadow .38s var(--ease),background .5s var(--ease)}
  .m-centre.holding{border-color:rgba(var(--mood-rgb),.55);
    box-shadow:0 0 34px 6px rgba(var(--mood-rgb),.24)}
  .m-centre .x-hub-idle{font-size:13px}
  .m-centre .x-hub-title{font-size:16.5px;font-weight:400;width:82%;padding:0;line-height:1.3}
  .m-centre.holding .x-hub-idle,.m-centre.holding .m-sent{opacity:0}
  .m-path{display:flex;justify-content:center;gap:7px;margin:.8rem 0}
  .m-path i{width:3px;height:3px;border-radius:50%;background:var(--line);transition:background .3s,box-shadow .3s}
  .m-path.lit i{background:rgb(var(--mood-rgb));box-shadow:0 0 5px 1px rgba(var(--mood-rgb),.55);
    animation:m-sig 1.2s linear infinite}
  .m-path.lit i:nth-child(1){animation-delay:.30s}.m-path.lit i:nth-child(2){animation-delay:.24s}
  .m-path.lit i:nth-child(3){animation-delay:.18s}.m-path.lit i:nth-child(4){animation-delay:.12s}
  .m-path.lit i:nth-child(5){animation-delay:.06s}.m-path.lit i:nth-child(6){animation-delay:0s}
  @keyframes m-sig{0%,55%{opacity:.35}70%{opacity:1}100%{opacity:.35}}
  .m-field{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;justify-items:center;margin-top:.2rem}
  .m-btn{width:100%;max-width:88px;aspect-ratio:1;border-radius:50%;
    display:grid;place-items:center;text-align:center;
    font-family:var(--serif);font-weight:400;font-size:12.5px;line-height:1.1;letter-spacing:.005em;
    color:var(--mood);
    border:1px solid rgba(var(--mood-rgb),.46);
    background:rgba(var(--mood-rgb),.10);padding:6px;cursor:pointer;
    box-shadow:0 8px 24px -18px rgba(var(--mood-rgb),.55);
    transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
  @supports (color: color-mix(in srgb, red 10%, black)){
    .m-btn{color:color-mix(in srgb,var(--mood) 58%,#342e29)}
  }
  .m-btn.chosen{transform:scale(1.06);background:rgba(var(--mood-rgb),.20);
    border-color:rgba(var(--mood-rgb),.9);
    box-shadow:0 0 0 3px rgba(var(--mood-rgb),.14)}
  .m-more{display:block;margin:1.1rem auto 0;font:inherit;font-size:.84rem;color:var(--ink-soft);
    background:none;border:none;cursor:pointer;
    border-bottom:1px solid var(--line);padding:0 0 1px;opacity:0;pointer-events:none;transition:opacity .4s}
  #explorer-tool.playing .m-more{opacity:1;pointer-events:auto}
}
@media (max-width:400px){ .m-field{gap:7px} .m-btn{font-size:11.5px} }

/* reduced motion: gestures yield, nothing hides */
@media (prefers-reduced-motion: reduce){
  .pulse-comet,.m-path.lit i{animation:none!important}
}

/* v10.32-rettelse (18/8 aften): r19-blokkens ID-navnerum slog skjule-reglen
   for sætningen, så bagteksten stod OVEN I spilleren. Samme vægtklasse nu. */
#explorer-tool.r19 .x-hub.holding:not(.previewing) .x-hub-title{opacity:0}
#explorer-tool.r19 .x-hub.holding:not(.previewing) .x-hub-title.show{opacity:0}
#explorer-tool.r19 .m-centre.holding .m-sent,
#explorer-tool.r19 .m-centre.holding .m-sent.show{opacity:0}
#explorer-tool.r19 .m-centre.holding .x-hub-idle{opacity:0}

/* v10.32 · Version A (valgt 18/8): Enter-linket inde i cirklen */
.x-penter{pointer-events:auto;display:inline-block;margin-top:5px;
  font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.x-penter:hover{color:rgb(var(--mood-rgb));border-color:rgb(var(--mood-rgb))}

/* ---- Noter 18/8 · "What they say" — citat-slider under præsentationen ---- */
.voices{margin-top:clamp(2.4rem,5vw,3.6rem);text-align:center}
.voices .vo-stage{margin:0 auto;max-width:36rem;min-height:7.5rem;
  transition:opacity .26s var(--ease)}
.voices.vo-fading .vo-stage{opacity:0}
.voices blockquote{margin:0;font-size:clamp(1.1rem,2.6vw,1.4rem);line-height:1.5;
  color:var(--ink);text-wrap:balance}
.voices figcaption{margin-top:.9rem;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.vo-dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.2rem}
.vo-dot{width:7px;height:7px;border-radius:50%;padding:0;border:none;cursor:pointer;
  background:var(--line);transition:background .3s,transform .3s}
.vo-dot.on{background:var(--amber);transform:scale(1.25)}

/* ================================================================
   Noter 18/8 II · WAC-justeringer:
   1) planeten viser lead-cuets TITEL ved hover (ordet fader ud)
   2) klare pile på hver side af playeren — blad i kategorien
   3) gestures dæmpes når midten er player (styres i app.js) — og
      de mørke gesture-lag (veil m.fl.) må ALDRIG dække playeren
      (Lurks in the Dark-fixet: den sorte cirkel)
   4) "Learn more about this world →" leder til værket; cue-listen
      under orbitten er droppet (cues bor i playerens pile)
   ================================================================ */

/* 1 · cue-titlen i boblen */
#explorer-tool.r19 .mood-btn.showing-cue{font-size:13.5px;line-height:1.2;font-style:italic}

/* 2 · pilene */
.x-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,253,248,.85);
  color:var(--ink-soft);font-family:var(--serif);font-size:26px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease),
    border-color .3s,color .3s,background .3s}
#explorer-tool.playing .x-arrow{opacity:1;pointer-events:auto}
.x-arrow:hover{border-color:rgba(var(--mood-cur-rgb,192,138,62),.8);
  color:var(--mood-cur,var(--amber))}
.x-prev{left:calc(50% - 178px)}
.x-next{right:calc(50% - 178px)}

/* 3 · playeren må aldrig sluges af et gesture-lag */
#explorer-tool.r19 .x-hub.holding .gl,
#explorer-tool.r19 .x-hub.holding .fairy,
#explorer-tool.r19 .x-hub.holding .spark{opacity:0!important;animation:none!important}

/* 4 · Learn more-linket (genbruger .x-more-pladsen, lidt mere luft) */
.x-more{top:calc(50% + 136px)}

/* mobil: pile flankerer midten */
@media (max-width:760px){
  .m-stage{display:flex;align-items:center;justify-content:center;gap:.6rem}
  .m-stage .x-arrow{position:static;transform:none;width:40px;height:40px;flex:none}
  #explorer-tool.playing .m-stage .x-arrow{opacity:1;pointer-events:auto}
}

/* Noter 18/8 II · partnere: fold-ud til de mindre — aldrig én stor væg */
.trusted .collab-more{display:block;margin:1.1rem auto 0;font:inherit;font-size:.8rem;
  color:var(--ink-soft);background:none;border:none;cursor:pointer;
  border-bottom:1px solid var(--line);padding:0 0 1px}
.trusted .collab-more:hover{color:var(--amber);border-color:var(--amber)}
.trusted .logo-minor{margin-top:1.1rem}

/* Noter 18/8 III · symmetriske logo-linjer */
.logo-row .logo-line{display:flex;justify-content:center;flex-wrap:nowrap}
.logo-row .logo-line + .logo-line{margin-top:16px}

/* Noter 18/8 IV · logo-rækker centreres — også på værkssiderne */
.logo-row{justify-content:center}
/* sætningen i boblen: lidt mindre, naturlig ombrydning */
#explorer-tool.r19 .mood-btn.showing-cue{font-size:12px;line-height:1.22;padding:8px}

/* ================================================================
   Noter 18/8 V · sidste finpudsning af orbit + hylde + værksside
   ================================================================ */
/* pilene bærer den valgte verdens farve */
#explorer-tool.playing .x-arrow{
  color:var(--mood-cur,var(--amber));
  border-color:rgba(var(--mood-cur-rgb,192,138,62),.55);
}
.x-arrow:hover{background:rgba(var(--mood-cur-rgb,192,138,62),.12)}

/* Noter 19/8 (rev 2) · Explore this music: GUI'ens stille aktionssprog —
   lille, afdæmpet, ingen pille, ingen pil. Linjen bærer verdenens farve. */
.x-more, .m-more{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;
  background:none;border:none;padding:0 0 2px;border-radius:0;
  color:var(--ink-soft);
  text-decoration:none;box-shadow:none;
  border-bottom:1px solid rgba(var(--mood-cur-rgb,192,138,62),.65);
  transition:color .3s,border-color .3s}
.x-more{top:calc(50% + 132px)}
.x-more:hover, .m-more:hover{
  color:var(--mood-cur,var(--amber));
  border-color:var(--mood-cur,var(--amber))}

/* cue-titlen i midten: en anelse større og halvfed */
.x-pcue{font-size:15px;font-weight:600}

/* (19/8: brede bogrygge rullet tilbage — korte visningsnavne i stedet) */

/* Noter 19/8 · hover-buddet i månen: cue stort, værket lille under */
#explorer-tool.r19 .x-hub-title .xh-cue{display:block;font-size:19px;line-height:1.25}
#explorer-tool.r19 .x-hub-title .xh-work{display:block;margin-top:.45rem;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}

/* Noter 19/8 (rev) · Mathias: mobil-løsningen er SUPER SWEET — månen ser
   sådan ud på ALLE bredder: kun titel + PROJEKTNAVN i hover-modellens
   grafik (klik på månen pauser; ringen søger stadig). Titlen pushet. */
#explorer-tool.r19 .x-pbtn, #explorer-tool.r19 .x-ptime{display:none}
#explorer-tool.r19 .x-pcue{font-size:21px;font-weight:400;line-height:1.28;-webkit-line-clamp:3}
#explorer-tool.r19 .x-pwork{margin-top:.5rem;font-size:10px}
#explorer-tool.r19 .x-hub-title .xh-cue{font-size:21px}


/* Noter 19/8 · arrival slukket -> ekstra headroom mellem menu og overskrift */
.explorer-sec{padding-top:clamp(4.5rem,10vh,7.5rem)}

/* Noter 19/8 · cue-ankomst: land nederst med lidt luft under */
.cue[data-cue]{scroll-margin-bottom:9vh;scroll-margin-top:40vh}

/* 19/8 II · partner-væggen i to lag: PARTNERS først, SUPPORTED BY under */
.trusted .supported-head{margin-top:2.6rem}
.trusted .logo-funders{margin-top:0}

/* 19/8 II · pkt. 1a: overskriften træder tilbage, planeterne træder frem */
.explorer-head h2{font-size:clamp(1.25rem,2.6vw,1.7rem);opacity:.92}
.explorer-sec{padding-top:clamp(3.2rem,7vh,5.2rem)}
#explorer-tool.r19, #explorer-tool.r19 .x-orbit{--button-size:120px}
#explorer-tool.r19 .mood-btn{font-size:17.5px}

/* 19/8 II · pkt. 3: hylden komprimeres — ~15-16 bøger synlige ad gangen */
.works-library .shelf-item{padding:1.05rem .48rem;margin-left:-0.42rem}

/* ================================================================
   19/8 III · v10.33-runden
   ================================================================ */
/* overskriften klart mindre, planeterne klart større (hard-refresh:
   styles.css er uhashet og kan sidde i browser-cachen) */
.explorer-head h2{font-size:clamp(1.1rem,2.1vw,1.45rem);letter-spacing:.01em;opacity:.9}
#explorer-tool.r19, #explorer-tool.r19 .x-orbit{--button-size:132px}
#explorer-tool.r19 .mood-btn{font-size:18px}

/* hylden: tættere ryg */
.works-library .shelf-item{padding:.92rem .42rem;margin-left:-0.36rem}

/* værkssidens Supported by-lag */
.proj-collabs .proj-sup-head{margin-top:1.6rem}

/* partner-KASKADEN: tre lag i faldende størrelse — alle synlige */
.trusted .logo-t1 .logo-tile{width:112px;height:112px}
.trusted .logo-t2 .logo-tile{width:76px;height:76px;padding:11px}
.trusted .logo-t2{margin-top:1.2rem}
.trusted .logo-t3 .logo-tile{width:52px;height:52px;padding:8px;border-radius:9px}
.trusted .logo-t3{margin-top:1rem}
.trusted .logo-t3 .logo-tile:hover{transform:scale(1.35);z-index:3}
.trusted .logo-tile{transition:transform .25s var(--ease)}
.trusted .logo-funders .logo-tile{width:84px;height:84px}

/* 19/8 III · overskriften — nu med den vindende specificitet */
.explorer-sec .explorer-head h2{font-size:clamp(1.1rem,2.1vw,1.45rem);letter-spacing:.01em;opacity:.9;margin-bottom:.4rem}

/* ================================================================
   19/8 IV · v10.33 anden runde
   ================================================================ */
/* farvel-boksene: ens typografi og balance */
.conv-choices{align-items:stretch}
.conv-choice{display:flex;flex-direction:column;justify-content:center;text-align:center}
.conv-choice .conv-title{text-wrap:balance;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.conv-choice .conv-sub{text-wrap:balance}

/* biblioteksfiltre */
.shelf-filters{display:flex;justify-content:center;gap:.55rem;margin-top:1.1rem;flex-wrap:wrap}
.shelf-filter{font:inherit;font-size:.74rem;letter-spacing:.08em;cursor:pointer;
  padding:.28rem .85rem;border-radius:999px;border:1px solid var(--line);
  background:none;color:var(--ink-soft);transition:all .25s var(--ease)}
.shelf-filter:hover{border-color:var(--amber);color:var(--amber)}
.shelf-filter.off{opacity:.38;text-decoration:line-through}

/* partner-SCROLLERE: alle fliser lige store, vigtigst først, pil/scroll */
.trusted .logo-stage{display:flex;align-items:center;gap:.6rem}
.trusted .logo-scroll{display:flex;gap:clamp(1rem,2.4vw,1.6rem);overflow-x:auto;
  padding:.4rem .2rem;scrollbar-width:none;flex:1}   /* 1/9: scroll-snap fjernet – den kæmpede mod marquee-motoren (båndet stod stille) */
.trusted .logo-scroll::-webkit-scrollbar{display:none}
.trusted .logo-scroll .logo-tile{flex:0 0 auto;width:96px;height:96px}
.trusted .logo-page{width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--ink-soft);font-size:18px;
  display:grid;place-items:center;transition:all .25s}
.trusted .logo-page:hover{border-color:var(--amber);color:var(--amber)}
.trusted .supported-head{margin-top:2.2rem}
/* voices under Supported by: lidt luft */
.trusted #voices{margin-top:3rem}
/* kaskade-reglerne fra runde III er pensioneret (t1/t2/t3 bruges ikke) */

/* ================================================================
   20/8 · A+i+ii — fløj-overskrift, Selected works, omsortering
   ================================================================ */
/* 20/8 III (Mathias, retter GIGANT-fejlen): rækkefølgen er eksplicit for
   ALLE børn — orbit først, sætningen under, og komponist-portrætterne
   ("All music composed by …") pænt NEDENUNDER sætningen, aldrig over. */
.ex-wing{display:none!important}
.explorer-sec{display:flex;flex-direction:column;padding-top:clamp(1.6rem,4vh,3rem)}
.explorer-sec > *{order:3}
.explorer-sec #explorer-tool{order:1}
.explorer-sec .explorer-head{order:2;margin-top:.2rem;padding-top:0}
/* i+ii · chips: aktiv fyldt, aldrig gennemstreget; udfold-knap */
.shelf-filter.off{opacity:1;text-decoration:none}
.shelf-filter.is-on{background:var(--amber);border-color:var(--amber);color:#fff}
.shelf-all{display:block;margin:1.2rem auto 0;font:inherit;font-size:.82rem;
  letter-spacing:.06em;color:var(--ink-soft);background:none;border:none;cursor:pointer;
  border-bottom:1px solid var(--line);padding:0 0 2px}
.shelf-all:hover{color:var(--amber);border-color:var(--amber)}
.works-library .shelf-item.shelf-dim{opacity:.45;filter:saturate(.6)}

/* 20/8 II · diskret sorteringslinje under værkerne */
.shelf-sort-line{display:flex;justify-content:center;align-items:baseline;gap:.6rem;
  margin-top:.9rem;font-size:.78rem;color:var(--ink-faint)}
.shelf-sort-line .shelf-filter{background:none;border:none;border-radius:0;padding:0 0 1px;
  font-size:.78rem;letter-spacing:.09em;color:var(--ink-faint);cursor:pointer;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.shelf-sort-line .shelf-filter:hover{color:var(--amber)}
.shelf-sort-line .shelf-filter.is-on{background:none;color:var(--amber);border-bottom-color:var(--amber)}
.ssl-sep{color:var(--line)}
.shelf-filters{display:none}  /* de gamle piller er pensioneret */

/* 20/8 II · marquee-båndet + afsender-caption */
.trusted .logo-stage{display:block}
.trusted .logo-band{display:flex;align-items:center;gap:.6rem}
.trusted .logo-scroll{overflow-x:auto}   /* auto-rul OG manuel scroll/swipe */
/* etiketterne over båndene: samme fede vægt */
.trusted .partners-head,.trusted .supported-head{font-weight:700;letter-spacing:.18em;margin-top:2.2rem}
/* 20/8 IV: captionen lignede en sektions-etiket (PARTNERS/SUPPORTED BY) —
   nu en hvisken: kursiv serif, normal sats, blød farve. */
.trusted .logo-caption{text-align:center;margin:.7rem 0 0;font-size:.86rem;
  font-family:var(--serif,Georgia,serif);font-style:italic;letter-spacing:.01em;
  text-transform:none;color:var(--ink-faint,#a99a86);min-height:1.2em}
/* overskriften er fjernet visuelt, men bevaret for SEO og skærmlæsere */
.sr-only-head{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* månen inviterer nu — en anelse mere nærværende end "Your World" var */
#explorer-tool.r19 .x-hub{cursor:pointer}
#explorer-tool.r19 .x-hub.holding{cursor:default}

/* 20/8 V (Mathias, mobil): luften OVER orbitten og NED til portrætterne
   skal være ens — før var bunden tungest. */
@media (max-width:760px){
  .explorer-sec{padding-top:clamp(1.4rem,3.2vh,2.2rem)}
  .x-stage{padding-top:.4rem}
  .ep-title{margin-top:clamp(1.4rem,3.2vh,2.2rem)}
}

/* 21/8 (Mathias): tre justeringer.
   1 · Afstanden Lurks -> ALL MUSIC COMPOSED var for stor: det tomme
       #moments-rum (den gamle cue-liste) fyldte stadig — kollapses helt,
       og ep-title matcher nu PRAECIS toppens luft (sektions-padding +
       scene-padding; enhedens indre kant er symmetrisk top/bund). */
#explorer-tool .moments:empty{display:none;min-height:0;padding:0;margin:0}
.explorer-sec .ep-title{margin-top:calc(clamp(1.6rem,4vh,3rem) + 1rem)}
@media (max-width:760px){
  .explorer-sec .ep-title{margin-top:calc(clamp(1.4rem,3.2vh,2.2rem) + .4rem)}
}
/* 2 · Under hvert vaerk: Produced with / Supported by venstre-rettes,
       så de flugter med tekstdesignet (den globale vaeg forbliver
       centreret — den er sit eget rum). */
.project-chapter .logo-row{justify-content:flex-start}
.project-chapter .logo-row .logo-line{justify-content:flex-start}

/* 21/8 II (Mathias): månen animeres IKKE ind — den ER der bare, permanent,
   og planeterne kommer til omkring den. Teleskop-introen (v10.26) og
   fade-introen pensioneres; kun det rolige åndedræt består. */
#explorer-tool.r19 .x-hub{opacity:1;animation:r19-idleHub 5.8s ease-in-out infinite}
#explorer-tool.r19 .x-hub-glow{opacity:1}
#explorer-tool.r19 .x-orbit.r19-hub-revealed .x-hub{animation:r19-idleHub 5.8s ease-in-out infinite}
#explorer-tool.r19 .x-orbit.r19-hub-revealed .x-hub-glow{animation:r19-glowBreathe 6s ease-in-out infinite alternate}

/* 28/8 (Mathias): synlig PAUSE lige i midten af maanen. Det rene look
   gemte knappen helt (display:none) — nu kommer den frem ved hover,
   oven paa cue-titlen, og klik rammer den direkte. Paa mobil er hele
   midten fortsat tryk-til-pause. */
#explorer-tool.r19 .x-hub.holding .x-pbtn{
  display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(255,253,248,.94);color:var(--ink,#2b2722);border:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);z-index:9;
  box-shadow:0 2px 14px rgba(0,0,0,.08);
}
#explorer-tool.r19 .x-hub.holding:hover .x-pbtn{opacity:1;pointer-events:auto}
#explorer-tool.r19 .x-hub.holding .x-pbtn svg{width:22px;height:22px}


/* ================================================================
   1/9 2026 (Rasmus, launch) · FEM GREB FØR LANCERING
   1 · døren er pensioneret (kun JS)  2 · sorteringslinjen i hyldens hoved
   3 · én spiller pr. værk (.work-player)  4 · logo-bånd uden snap (ovenfor)
   5 · genre-linjen under hver cue-titel (.cue-genre)
   Rollback: slet denne blok + flagene DOOR_INSTANT / WORK_PLAYER i app.js.
   ================================================================ */
/* 2 · sorteringslinjen læses som undertitel */
.works-library .shelf-head .shelf-sort-line{margin:.5rem auto 0;font-size:.92rem}
.works-library .shelf-head .shelf-sort-line .shelf-filter{font-size:.92rem;letter-spacing:.08em;color:#9aa4ab}
.works-library .shelf-head .shelf-sort-line .shelf-filter.is-on{color:var(--amber)}
.works-library .shelf-head{margin-bottom:2.4rem}
@media(max-width:560px){.works-library .shelf-head .shelf-sort-line{flex-wrap:wrap;row-gap:.3rem}}

/* 5 · genren under titlen – dørens farve, løftet til læsbar på natten */
.cue-genre{display:inline-flex;align-items:center;gap:.45em;margin-top:.2rem;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--door-ink,var(--door,var(--night-amber)));white-space:nowrap}
.cue-genre i{width:7px;height:7px;border-radius:50%;background:var(--door,var(--night-amber));display:inline-block;flex:none}
.cue .line:empty{display:none}

/* 3 · værk-spilleren (1/9 III, valgt model 1) · BANNERET:
   hver lydfil er stadig den etablerede række (play · titel · genre ·
   waveform · Copy link/Email), men rækkerne ligger som KORT i ét
   træk-bart banner. Det valgte kort lyser i midten; naboerne står
   næsten hele i kanterne. Træk/swipe med snap; nøgne ‹ › nedenunder.
   Bladring stopper aldrig musikken. */
.work-cues{padding-top:clamp(1.6rem,4vw,2.6rem);padding-bottom:var(--section)}
.wp{position:relative;max-width:72rem;margin-inline:auto}
.wp-track{position:relative;overflow:clip;cursor:grab;touch-action:pan-y}
.wp-track:active{cursor:grabbing}
.wp-rail{display:flex;gap:.9rem;will-change:transform;transition:transform .45s var(--ease)}
.wp-rail.dragging{transition:none}
/* 2/9: under træk styrer JS lyset kontinuerligt — ingen kæmpende transition */
.wp-rail.dragging .wp-card{transition:none}
/* 2/9: slippet glider lidt længere og blødere — samlebåndet ruller ud */
.wp-rail{transition:transform .6s cubic-bezier(.22,.9,.24,1)}
.wp-card{flex:0 0 var(--wp-cardw,56%);min-width:0;display:block;padding:1rem 1.1rem;border-radius:12px;
  background:color-mix(in srgb,var(--night-ink) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--night-ink) 8%,transparent);
  opacity:.38;transition:opacity .4s var(--ease);cursor:pointer;user-select:none;-webkit-user-select:none;
  border-bottom:1px solid color-mix(in srgb,var(--night-ink) 8%,transparent)}   /* kortet afløser rækkens bundlinje */
.wp-card.cur{opacity:1;cursor:default}
.wp-card .wp-row{display:flex;align-items:center;gap:1rem;min-width:0}
.wp-card .meta{min-width:0;flex:1}
.wp-card .wp-meta{margin-top:.1rem}
.wp-card .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.3rem}
.wp-card .wave{max-width:none;height:34px;margin-top:.6rem}
.wp-card .wave.real{height:34px}
.wp-card:not(.cur) .cue-actions{visibility:hidden}
/* 1/9 IV (QA): play og waveform er AKTIVE på alle kort — originalens regel.
   Et klik på nabokortets play/waveform centrerer kortet og spiller/spoler i samme gestus. */
.wp-nav{display:flex;justify-content:center;align-items:center;gap:1.6rem;margin-top:.7rem}
.wp-count{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--night-soft);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:4.5em;text-align:center}
.wp-count b{color:var(--night-ink);font-weight:600}
/* 1/9 IV: ét nummer = ingen karrusel-UI, kun 1 / 1 */
.wp-single .wp-prev,.wp-single .wp-next{display:none}
.wp-single .wp-track{cursor:default}
.wp-single .wp-card{--wp-cardw:min(100%,44rem)}
.cue-step{flex:none;width:34px;height:40px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--serif);font-size:32px;line-height:1;color:var(--night-soft);transition:color .2s,transform .2s var(--ease)}
.cue-step:hover{color:var(--night-amber);transform:scale(1.12)}
.cue-step:focus-visible{outline:2px solid var(--night-amber);outline-offset:2px;border-radius:6px}
.wp-nowline{display:none;align-items:center;gap:.5em;margin:.6rem auto 0;border:0;background:none;padding:0;cursor:pointer;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--night-amber)}
.wp .wp-nowline:not([hidden]){display:inline-flex}
.wp-nowline i{width:7px;height:7px;border-radius:50%;background:var(--night-amber);animation:wp-breathe 2.2s ease-in-out infinite;flex:none}
.wp-nowline:hover{color:var(--night-ink)}
@keyframes wp-breathe{0%,100%{opacity:1}50%{opacity:.3}}
/* det spillende nabokort: play-cirklen står allerede i pause-tilstand (amber) – det er prikken */
@media(max-width:560px){
  .wp-card{--wp-cardw:74%;padding:.8rem .85rem}
  .wp-rail{gap:.6rem}
  .wp-card .title{font-size:1.15rem}
  .cue-step{width:30px;font-size:28px}
  .wp-card .cue-genre .cyc{display:none}
  /* mobil-reglen der stabler .cue lodret gælder ikke kortene */
  .wp-card{flex-wrap:nowrap;row-gap:0}
}
@media(prefers-reduced-motion:reduce){.wp-rail{transition:none}.wp-nowline i{animation:none}.cue-step{transition:none}.cue-step:hover{transform:none}}
/* (den ældre enkelt-rækkes udgave herunder er stadig grundlaget) */
.work-cues{padding-top:clamp(1.6rem,4vw,2.6rem)}
.work-player{align-items:flex-start}
.work-player .num{display:none}
.work-player .play{margin-top:.15rem}
.work-player .title{font-size:1.35rem;line-height:1.25}
.work-player .wave-row{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;max-width:26rem}
.work-player .wave-row .wave{flex:1;min-width:0;max-width:none;margin-top:0;height:40px}
.work-player .wave-row .wave.real{height:40px}
.cue-step{flex:none;width:28px;height:40px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--serif);font-size:30px;line-height:1;color:var(--night-soft);transition:color .2s,transform .2s var(--ease)}
.cue-step:hover{color:var(--night-amber);transform:scale(1.15)}
.cue-step:focus-visible{outline:2px solid var(--night-amber);outline-offset:2px;border-radius:6px}
.work-player .cue-actions{align-items:center;padding-left:36px;max-width:26rem}
.work-player .cue-time{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--night-soft)}
.work-player .cue-dots{display:flex;gap:6px;margin:.6rem 0 0 36px}
.work-player .cue-dots i{width:6px;height:6px;border-radius:50%;background:var(--night-line)}
.work-player .cue-dots i.on{background:var(--night-amber)}
@media(max-width:560px){
  .cue-step{width:24px;font-size:26px}
  .work-player .cue-actions{padding-left:0}
  .work-player .cue-dots{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.cue-step{transition:none}.cue-step:hover{transform:none}}

/* 2/9: Now playing-linjen centreret under pilene */
.wp .wp-nowline:not([hidden]){display:flex;width:max-content;max-width:92%;margin-left:auto;margin-right:auto}
.wp-nowline span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2/9 II: foden under pilene — Copy · Now playing · Email; kortene ånder i skala */
.wp-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;margin-top:.55rem}
.wp-foot .wp-copy{justify-self:end}
.wp-foot .wp-email{justify-self:start}
.wp-foot .wp-nowline{margin:0}
.wp .wp-foot .wp-nowline:not([hidden]){display:inline-flex;width:max-content;max-width:46vw;margin:0}
.wp-card{transform:scale(.958);transition:opacity .4s var(--ease),transform .55s cubic-bezier(.22,.9,.24,1)}
.wp-card.cur{transform:scale(1)}
.wp-rail.dragging .wp-card{transition:none}
@media(prefers-reduced-motion:reduce){.wp-card{transform:none!important}}

/* 2/9: medvirkende på cue-kortet — stille kredit-linje */
.cue-partic{font-size:.78rem;color:var(--night-faint,var(--ink-faint));font-style:italic}

/* DIRECTORS CUT (20.9.2026) film rail — lead film full width, supporting films
   two-up on desktop and swipeable on phones (scroll-snap, no JS, no autoplay). */
.film-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(50% - 0.3rem); gap: 0.6rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  margin-top: 0.6rem; padding-bottom: 0.3rem;
}
.film-rail > .film-wrap { scroll-snap-align: start; margin: 0; min-width: 0; }
.film-rail .film-caption { font-size: 0.85em; }
.film-rail .film-glyph > span { width: 44px; height: 44px; }
.film-rail:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (max-width: 640px) {
  .film-rail { grid-auto-columns: 84%; }
}

/* ===== OWNER REVIEW 21.9.2026 — NMB overlay (OR-N01..N05). Revert: delete this block. ===== */
/* OR-N01 gallery: lead image at natural aspect + one horizontal rail */
.gal-v2 .gal-lead { position: relative; border-radius: 8px; overflow: hidden; background: var(--night-2); cursor: zoom-in; }
.gal-v2 .gal-lead img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; margin: 0 auto; }
.gal-v2 .gal-lead .placeholder, .gal-v2 .gal-item .placeholder { display: none; }
.gal-v2.gal-v2-rail { padding-top: 0; }
.gal-v2 + .gal-v2-rail, .gallery.gal-v2 { padding-bottom: calc(var(--section) * 0.45); }
.gal-railwrap { position: relative; }
.gal-rail { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; }
.gal-rail:focus-visible { outline: 2px solid var(--night-amber); outline-offset: 3px; }
.gal-item { flex: 0 0 auto; height: 240px; scroll-snap-align: start; border-radius: 6px; overflow: hidden; background: var(--night-2); cursor: zoom-in; position: relative; }
.gal-item img { display: block; height: 100%; width: auto; max-width: 80vw; object-fit: cover; }
.gal-item:focus-visible { outline: 2px solid var(--night-amber); outline-offset: 2px; }
.gal-nav { position: absolute; top: 120px; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(8,10,12,0.62); color: #f6f0e6; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.gal-prev { left: -8px; } .gal-next { right: -8px; }
.gal-count { font-size: 0.78rem; opacity: 0.65; margin: 0.4rem 0 0; }
@media (max-width: 640px) { .gal-item { height: 180px; } .gal-nav { display: none; } .gal-v2 .gal-lead img { max-height: 62vh; } }
/* OR-N03 vertical films shown vertically, never cropped */
.film-wrap.film-portrait { max-width: min(420px, 100%); margin-left: auto; margin-right: auto; }
.film-wrap.film-portrait .frame video, .film-wrap.film-portrait .film img { object-fit: contain; }
.work-video .frame video { object-fit: contain; background: #000; }
.film-rail > .film-wrap.film-portrait { max-width: none; }
/* OR-N04 long film captions fold to two lines — tap to read */
.film-caption.is-long { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.film-caption.is-long::after { content: ''; }
.film-caption.is-long.open { display: block; -webkit-line-clamp: unset; }
/* OR-N05 Produced with / Supported by logos: one flippable row */
.proj-collabs .logo-row { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; gap: 1.2rem; padding-bottom: 0.4rem; scrollbar-width: thin; }
.proj-collabs .logo-row > * { flex: 0 0 auto; scroll-snap-align: start; }
.pd-images .pd-with-names { font-size: 0.9em; }
.or-seealso { margin-top: 1rem; font-size: 0.92rem; }
.or-seealso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ===== OWNER REVIEW 2 (21.9.2026) ===== */
.gal-v3 { padding-bottom: calc(var(--section) * 0.45); }
.gal3-cell, .gal3-slide { position: relative; border-radius: 8px; overflow: hidden; background: var(--night-2, #111); cursor: zoom-in; }
.gal3 .placeholder { display: none; }
.gal3 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal3-one img { height: auto; max-height: 78vh; object-fit: contain; }
.gal3-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
.gal3-grid .gal3-cell { aspect-ratio: 3 / 2; }
.gal3-grid.gal3-n3 { grid-template-columns: repeat(3, 1fr); }
.gal3-grid.gal3-n4 { grid-template-columns: repeat(4, 1fr); }
.gal3-grid.gal3-port .gal3-cell { aspect-ratio: 9 / 16; }
.gal3-car { position: relative; }
.gal3-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 8px; -webkit-overflow-scrolling: touch; }
.gal3-track::-webkit-scrollbar { display: none; }
.gal3-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3 / 2; border-radius: 0; background: #0b0d10; }
.gal3-slide img { object-fit: contain; }
.gal3-nav { position: absolute; top: calc(50% - 1.2rem); transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(8,10,12,0.62); color: #f6f0e6; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.gal3-prev { left: 10px; } .gal3-next { right: 10px; }
.gal3-nav:focus-visible, .gal3-track:focus-visible { outline: 2px solid var(--night-amber, #c08a3e); outline-offset: 2px; }
.gal3-count { font-size: 0.8rem; opacity: 0.7; margin: 0.5rem 0 0; text-align: center; letter-spacing: 0.06em; }
@media (max-width: 640px) { .gal3-grid.gal3-n4 { grid-template-columns: repeat(2, 1fr); } .gal3-grid.gal3-n3 { grid-template-columns: repeat(3, 1fr); gap: .4rem; } .gal3-nav { width: 36px; height: 36px; font-size: 1.3rem; } }
/* produced with: one line, in colour, slowly moving */
.logo-mq { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.logo-mq-static { -webkit-mask-image: none; mask-image: none; }
.logo-mq-track { display: flex; width: max-content; animation: nmb-mq var(--mq-dur, 40s) linear infinite; }
.logo-mq-static .logo-mq-track { animation: none; width: auto; }
.logo-mq-group { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.6rem); padding-right: clamp(1rem, 2.4vw, 1.6rem); flex-wrap: nowrap; }
.logo-mq .logo-tile { flex: 0 0 auto; display: flex !important; align-items: center; justify-content: center; vertical-align: middle; margin: 0 !important; }
.logo-mq .logo-tile img { filter: none !important; opacity: 1 !important; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-mq:hover .logo-mq-track, .logo-mq:focus-within .logo-mq-track, .logo-mq.is-paused .logo-mq-track { animation-play-state: paused; }
.logo-mq-pause { position: absolute; right: 4px; bottom: 4px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(8,10,12,.6); color: #f6f0e6; font-size: .7rem; cursor: pointer; }
@keyframes nmb-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-mq-track { animation: none; flex-wrap: wrap; width: auto; } .logo-mq-group[aria-hidden] { display: none; } .logo-mq-group { flex-wrap: wrap; } .logo-mq-pause { display: none; } }
/* background reel behind the music chooser */
#explorer.has-bgreel { position: relative; isolation: isolate; }
.nmb-bgreel { position: absolute; left: 0; right: 0; top: 0; height: min(100%, 880px); z-index: -1; overflow: hidden; pointer-events: none; background: #15171a; }
.nmb-bgreel video, .nmb-bgreel img { width: 100%; height: 100%; object-fit: cover; opacity: .46; }
.cues.work-cues:has(+ .work-video) { padding-bottom: 2.4rem; }
.nmb-bgreel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,19,22,.30) 0%, rgba(18,19,22,.25) 62%, rgba(250,246,239,.85) 92%, #faf6ef 100%); }
@media (max-width: 760px) { .nmb-bgreel { height: 470px; } }

/* OWNER REVIEW 4 */
.work-hero { position: relative; }
.work-hero .hero-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.work-hero .scrim, .work-hero .titleblock { z-index: 1; }
.rr-feat, .cue-partic { overflow: hidden; white-space: nowrap; }
.rr-feat .mqi, .cue-partic .mqi { display: inline-block; }
.rr-barname.mq-on, .rr-barsub.mq-on { text-overflow: clip !important; }
.rr-barname .mqi, .rr-barsub .mqi { display: inline-block; }
.mq-on .mqi { animation: nmb-feat var(--mq-t, 8s) ease-in-out infinite alternate; }
@keyframes nmb-feat { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--mq-shift, 0)); } }
@media (prefers-reduced-motion: reduce) { .mq-on .mqi { animation: none; } .rr-feat, .cue-partic { white-space: normal; } }