/* ============================================================
   MÖRDA — shared styles
   Palette: Paper #F4F2EC · Ink #18181A · Tangerine #E8521F
   Type: Bricolage Grotesque (display) · Archivo (sans)
   ============================================================ */

:root{
  /* ---- layout ---- */
  --nav-h:   70px;
  --top-h:   62px;
  --ease:    cubic-bezier(.22,1,.36,1);
  --pad:     clamp(1.25rem, 4vw, 3.25rem);
  --accent:  #E8521F;   /* tangerine pop (both modes) */
  --accent-d:#C6420F;

  /* ---- typography: families + weights ---- */
  --font-display: 'Bricolage Grotesque', serif;   /* headlines, wordmarks, big numerals */
  --font-sans:    'Archivo', system-ui, sans-serif; /* body copy, UI, buttons */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---- typography: letter-spacing scale ---- */
  --ls-tight:  -.05em;  /* hero-scale display type */
  --ls-snug:   -.03em;  /* display headings / wordmarks */
  --ls-label:   .14em;  /* nav links, pills, small uppercase UI */
  --ls-wide:    .2em;   /* marquee, secondary uppercase labels */
  --ls-widest:  .26em;  /* eyebrows, page numbers */

  /* ---- typography: fluid font-size scale ---- */
  --fs-caption: .7rem;                          /* eyebrows, page numbers */
  --fs-small:   .82rem;                         /* fine print, meta */
  --fs-body:    1rem;                           /* base copy */
  --fs-lead:    clamp(.95rem, 1.45vw, 1.25rem);  /* intro / lead paragraphs */
  --fs-h4:      clamp(1.3rem, 3vw, 1.8rem);      /* card / sub-section titles */
  --fs-h3:      clamp(1.6rem, 3.5vw, 2.4rem);    /* section titles */
  --fs-h2:      clamp(2rem, 6vw, 3.4rem);        /* page-level sub-heads, veil mark */
  --fs-h1:      clamp(3rem, 9vw, 7.5rem);        /* page hero heading (pagehead h1) */
  --fs-display: clamp(5rem, 26vw, 23rem);        /* the giant home wordmark scale */

  /* ---- spacing scale (fixed) ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  /* ---- spacing scale (fluid, for rhythm between page blocks) ---- */
  --sp-block:   clamp(1.5rem, 4vw, 2.5rem);  /* space between related elements in a block */
  --sp-section: clamp(2.5rem, 6vw, 5rem);    /* space between major sections (pagehead, etc.) */

  /* ---- radius scale ---- */
  --radius-sm:   3px;   /* product cards, small media */
  --radius-md:   4px;   /* panels, callout blocks */
  --radius-lg:   6px;   /* hero media, large images */
  --radius-pill: 999px; /* buttons, pills, badges, avatars */

  /* ---- elevation / z-index scale ---- */
  --z-stage:   1;    /* in-flow layered elements (media overlays, halos) */
  --z-raised:  5;    /* content that must sit above stage layers */
  --z-nav:     50;   /* fixed topbar / botnav */
  --z-overlay: 60;   /* mobile menu overlay */
  --z-toast:   70;   /* toast notifications */
  --z-veil:    100;  /* page-transition veil */
  --z-loader:  200;  /* full-page loading screen */
}

/* ---- DARK (default) ---- */
:root, [data-theme="dark"]{
  --paper:   #000000;   /* base background */
  --paper-2: #121211;   /* elevated surface */
  --ink:     #F2EFE9;   /* primary text */
  --ink-2:   #C6C2B9;   /* secondary text */
  --muted:   #8B877E;   /* tertiary / captions */
  --line:    rgba(242,239,233,0.15);
  --line-2:  rgba(242,239,233,0.30);
  --bar:     rgba(0,0,0,0.68);
  --halo:    radial-gradient(circle at 50% 43%, rgba(255,248,242,.16), rgba(232,82,31,.12) 42%, rgba(255,248,242,0) 70%);
  /* fish-scale tile: continuous nested scallop lines (no seams/cut-offs) */
  --scale-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='none' stroke='%23F2EFE9' stroke-width='3.6'%3E%3Cpath d='M-54,9 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3Cpath d='M-36,27 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3Cpath d='M-54,45 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3Cpath d='M-36,-9 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3C/g%3E%3C/svg%3E");
  --scale-glow: 255,249,243;   /* cursor light tint (warm white) */
  color-scheme: dark;
}

/* ---- LIGHT ---- */
[data-theme="light"]{
  --paper:   #F4F2EC;
  --paper-2: #ECE9DF;
  --ink:     #18181A;
  --ink-2:   #262624;
  --muted:   #5C5A52;
  --line:    rgba(24,24,26,0.14);
  --line-2:  rgba(24,24,26,0.28);
  --bar:     rgba(244,242,236,0.82);
  --halo:    radial-gradient(circle at 50% 46%, rgba(232,82,31,.18), rgba(232,82,31,0) 67%);
  /* fish-scale tile: continuous nested scallop lines (no seams/cut-offs) */
  --scale-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='none' stroke='%2318181A' stroke-width='3.6'%3E%3Cpath d='M-54,9 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3Cpath d='M-36,27 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3Cpath d='M-54,45 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3Cpath d='M-36,-9 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0 a18,18 0 0 0 36,0'/%3E%3C/g%3E%3C/svg%3E");
  --scale-glow: 232,82,31;   /* cursor light tint (tangerine for light mode) */
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .55s var(--ease), color .55s var(--ease);
}
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---- scroll cue: an interactive short line standing in for the OS scrollbar on
   pages that actually scroll (Vault, Press, Tour). Draggable — see app.js. The
   native scrollbar is hidden only on pages that contain the cue. ---- */
html:has(.scrollcue){ scrollbar-width:none; }
html:has(.scrollcue)::-webkit-scrollbar{ display:none; }
.scrollcue{ position:fixed; right:14px; top:46%; width:18px; height:60px; z-index:50;
            display:flex; align-items:stretch; justify-content:center;
            cursor:grab; touch-action:none; }
.scrollcue::after{ content:''; width:2px; border-radius:999px; background:var(--line-2);
                    transition:background-color .3s var(--ease), width .2s var(--ease); }
.scrollcue:hover::after{ background:var(--muted); }
.scrollcue.dragging{ cursor:grabbing; }
.scrollcue.dragging::after{ background:var(--accent); width:3px; }
@media(max-width:680px){ .scrollcue{ display:none; } }

.font-display{ font-family:var(--font-display); }

/* page fade-in */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.page{ animation:fadeUp .7s var(--ease) both; }

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:var(--fs-caption); letter-spacing:var(--ls-widest); text-transform:uppercase;
  color:var(--muted); font-weight:var(--fw-semibold);
}
.eyebrow .dot{ color:var(--accent); }
.rule{ height:1px; background:var(--line); border:0; width:100%; }
.accent{ color:var(--accent); }

.beat{ display:inline-flex; gap:.32em; align-items:center; }
.beat i{ width:.4em; height:.4em; border-radius:var(--radius-pill); background:var(--accent); display:block; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.55 } 50%{ transform:scale(1.4); opacity:1 } }
.beat.live i:nth-child(1){ animation:pulse 1.8s var(--ease) infinite; }
.beat.live i:nth-child(2){ animation:pulse 1.8s var(--ease) infinite .25s; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; border-radius:var(--radius-pill);
  padding:.85rem 1.5rem; border:1px solid transparent; background:none; color:inherit;
  transition:transform .4s var(--ease), background-color .4s var(--ease),
             color .4s var(--ease), border-color .4s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-d); transform:translateY(-2px); }
.btn-accent:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:#000; transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-ghost:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* underline link */
.ulink{ position:relative; }
.ulink::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.ulink:focus-visible::after{ transform:scaleX(1); }
/* hover colour only for real pointers — on touch, a tap makes :hover stick
   and links stay orange after navigating (looked like a broken active state) */
@media (hover:hover) and (pointer:fine){
  .ulink:hover::after{ transform:scaleX(1); }
  .ulink:hover{ color:var(--accent); }
}

/* ---------- fixed top bar (inner pages) ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); height:var(--top-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); background:var(--bar);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar .wm{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:1.25rem; letter-spacing:-.02em; }
.topbar .pageno{ font-size:var(--fs-caption); letter-spacing:var(--ls-widest); text-transform:uppercase; color:var(--muted); }
.topbar .pageno b{ color:var(--accent); font-weight:var(--fw-bold); }

/* ---------- fixed bottom nav (all pages) ---------- */
.botnav{
  position:fixed; bottom:0; left:0; right:0; z-index:var(--z-nav); height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); background:var(--bar);
  backdrop-filter:blur(12px); border-top:1px solid var(--line);
}
/* theme toggle */
.theme-toggle{
  width:40px; height:40px; border-radius:var(--radius-pill); border:1px solid var(--line-2);
  display:grid; place-items:center; cursor:pointer; background:transparent; color:var(--ink); flex:0 0 auto;
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .i-sun{ display:none; }
.theme-toggle .i-moon{ display:block; }
[data-theme="dark"] .theme-toggle .i-sun{ display:block; }
[data-theme="dark"] .theme-toggle .i-moon{ display:none; }
.botnav .wm{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:1.4rem; letter-spacing:var(--ls-snug); }
.botnav .links{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:clamp(1rem,2.4vw,2.4rem); margin:0 clamp(1.75rem,4vw,4rem); }
.botnav .links a{
  font-size:.85rem; letter-spacing:var(--ls-label); text-transform:uppercase; font-weight:var(--fw-semibold);
  color:var(--ink); position:relative; padding:.4rem 0;
  transition:color .35s var(--ease);
}
.botnav .links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-.45rem; height:2px;
  background:var(--accent); transform:scaleX(0); transition:transform .4s var(--ease);
}
.botnav .links a:hover{ color:var(--ink); }
.botnav .links a:hover::after{ transform:scaleX(.55); }
.botnav .links a[aria-current="page"]{ color:var(--accent); }
.botnav .links a[aria-current="page"]::after{ transform:scaleX(1); }
.botnav .right{ display:flex; align-items:center; gap:1.25rem; }
.menu-btn{ display:none; width:44px; height:44px; padding:0; justify-content:center; flex:0 0 auto; }
.menu-btn svg{ width:20px; height:20px; }

/* ---------- mobile menu overlay ---------- */
.overlay{
  position:fixed; inset:0; z-index:var(--z-overlay); background:var(--paper);
  display:flex; flex-direction:column; padding:var(--pad);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.overlay.open{ opacity:1; visibility:visible; }
.overlay .o-top{ display:flex; align-items:center; justify-content:space-between; }
.overlay .o-links{ margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; gap:.4rem; }
.overlay .o-links a{
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:clamp(2.4rem,11vw,3.4rem);
  letter-spacing:-.02em; line-height:1.05; transform:translateY(14px); opacity:0;
  transition:transform .55s var(--ease), opacity .55s var(--ease), color .3s var(--ease);
}
.overlay.open .o-links a{ transform:none; opacity:1; }
.overlay.open .o-links a:nth-child(2){ transition-delay:.05s }
.overlay.open .o-links a:nth-child(3){ transition-delay:.1s }
.overlay.open .o-links a:nth-child(4){ transition-delay:.15s }
.overlay.open .o-links a:nth-child(5){ transition-delay:.2s }
.overlay.open .o-links a:nth-child(6){ transition-delay:.25s }
.overlay.open .o-links a:nth-child(7){ transition-delay:.3s }
.overlay.open .o-links a:nth-child(8){ transition-delay:.35s }
.overlay.open .o-links a:nth-child(9){ transition-delay:.4s }
@media (hover:hover) and (pointer:fine){
  .overlay .o-links a:hover{ color:var(--accent); }
  .overlay .o-links a.o-book:hover{ color:var(--accent-d); }
}
/* current page: the brand's accent full stop ("Music.") — same punctuation
   as the site's headings, and distinct from Book MÖRDA's solid accent text.
   It breathes slowly like the live beat dots (killed by the global
   reduced-motion rule). */
@keyframes dotbreathe{ 0%, 100%{ opacity:1; } 50%{ opacity:.4; } }
.overlay .o-links a[aria-current="page"]::after{
  content:'.';
  color:var(--accent);
  animation:dotbreathe 3.2s ease-in-out infinite;
}
/* Book MÖRDA stands apart from the other menu items */
.overlay .o-links a.o-book{ color:var(--accent); }
/* nine items need headroom on short screens */
.overlay{ overflow-y:auto; }
@media (max-height:640px){
  .overlay .o-links a{ font-size:clamp(1.85rem, 8.5vw, 2.6rem); }
}
/* sideways phones: centre the menu horizontally (social icons stay left),
   with a breath of space before the social icons */
@media (max-height:480px){
  .overlay .o-links{ align-items:center; text-align:center; }
  .overlay .o-foot{ margin-top:1.25rem; }
}
.overlay .o-foot{ display:flex; gap:1.5rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- layout shells ---------- */
.wrap{ width:100%; max-width:1480px; margin:0 auto; padding:0 var(--pad); }
.inner{ padding-top:calc(var(--top-h) + clamp(2.5rem,7vh,6rem)); padding-bottom:calc(var(--nav-h) + 4rem); }

/* page header block */
.pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,6vw,5rem); }
.pagehead h1{
  font-family:var(--font-display); font-weight:var(--fw-black); letter-spacing:-.035em; line-height:.9;
  font-size:var(--fs-h1); margin:.5rem 0 0;
}
.pagehead .lead{ color:var(--ink-2); max-width:36ch; line-height:1.7; font-size:.98rem; }

/* ---------- reveal ---------- */
.r{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.r.in{ opacity:1; transform:none; }

/* ---------- media ---------- */
.media{ position:relative; overflow:hidden; background:var(--paper-2); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.media:hover img{ transform:scale(1.04); }

/* ---------- rows (tracks / tour) ---------- */
.row{
  display:grid; align-items:center; gap:1.25rem; padding:1.5rem 1rem;
  border-bottom:1px solid var(--line); transition:background-color .4s var(--ease), padding-left .4s var(--ease);
}
.row:hover{ background:rgba(232,82,31,.06); padding-left:1.6rem; }
.row .idx{ font-family:var(--font-display); color:var(--muted); font-size:1rem; }
.row:hover .idx{ color:var(--accent); }
.row .title{ font-family:var(--font-display); font-weight:var(--fw-bold); letter-spacing:-.02em; font-size:clamp(1.4rem,3vw,2rem); }
.row .go{ transition:transform .4s var(--ease), color .4s var(--ease); color:var(--muted); }
.row:hover .go{ transform:translateX(6px); color:var(--accent); }

/* ---------- play badge ---------- */
.play{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.play span{
  width:72px; height:72px; border-radius:var(--radius-pill); display:grid; place-items:center;
  background:rgba(244,242,236,.5); border:1px solid rgba(255,255,255,.6); backdrop-filter:blur(3px);
  transition:transform .5s var(--ease), background-color .5s var(--ease);
}
.media:hover .play span{ transform:scale(1.08); background:var(--accent); }
.play svg{ margin-left:3px; fill:var(--ink); transition:fill .5s var(--ease); }
.media:hover .play svg{ fill:#fff; }
.vthumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(24,24,26,.55), transparent 55%); pointer-events:none; }

/* ---------- forms ---------- */
.field{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-2);
  padding:.8rem 0; color:var(--ink); font-size:1rem; font-family:var(--font-sans);
  transition:border-color .4s var(--ease);
}
.field::placeholder{ color:#a8a59b; }
.field:focus{ outline:none; border-color:var(--accent); }
select.field option{ background:var(--paper); }
label.flbl{ display:block; margin-bottom:.6rem; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 1.25rem); transform:translate(-50%,140%);
  background:var(--ink); color:var(--paper); padding:.85rem 1.4rem; border-radius:var(--radius-pill);
  font-size:.8rem; letter-spacing:.04em; z-index:var(--z-toast); white-space:nowrap;
  /* holds its position while visible, then fades out in place — the old
     slide-down exit never fully left the screen and read as the note
     dropping to a second position */
  opacity:0; pointer-events:none;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.toast.show{ transform:translate(-50%,0); opacity:1; }
.toast.raised{ bottom:calc(var(--nav-h) + 4rem); }   /* above the home accolades ticker */
.toast.quiet{ background:none; color:var(--ink-2); font-size:.74rem;
              /* no pill at all: bare text over the page, a whisper of shadow for legibility */
              text-shadow:0 1px 10px rgba(0,0,0,.35); }

/* ---------- page transition veil ---------- */
#veil{
  position:fixed; inset:0; z-index:var(--z-veil); background:var(--paper); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .42s var(--ease);
}
#veil.show{ opacity:1; pointer-events:auto; }
#veil .veil-mark{
  font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-h2);
  letter-spacing:var(--ls-snug); color:var(--ink); opacity:0; transform:translateY(10px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
#veil .veil-mark::after{ content:'.'; color:var(--accent); }
#veil.show .veil-mark{ opacity:1; transform:none; transition-delay:.05s; }

/* ---------- floating music player: vinyl toggle + skip ---------- */
.mplayer{ position:fixed; right:clamp(.9rem, 2.2vw, 1.8rem); bottom:calc(var(--nav-h) + 1rem);
          z-index:55; display:flex; align-items:center; gap:.5rem; }
.mplayer.raised{ bottom:calc(var(--nav-h) + 4rem); }   /* clear the home accolades ticker */
.mp-vinyl{ width:48px; height:48px; border-radius:var(--radius-pill); padding:0; cursor:pointer;
           position:relative; border:1px solid var(--line-2); background:var(--bar);
           backdrop-filter:blur(10px); display:grid; place-items:center;
           box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
           transition:border-color .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease); }
.mp-vinyl .mp-disc{ width:38px; height:38px; border-radius:50%; display:block;
                 background:
                   radial-gradient(circle at 50% 50%, var(--paper) 0 2px, var(--accent) 2px 8.5px, rgba(0,0,0,.4) 8.5px 9.5px, transparent 9.5px),
                   conic-gradient(from 40deg, transparent 0 30deg, rgba(255,255,255,.18) 55deg, transparent 80deg,
                                  transparent 190deg, rgba(255,255,255,.1) 215deg, transparent 240deg),
                   repeating-radial-gradient(circle at 50% 50%, #101011 0 1.5px, #1D1D1F 1.5px 3px);
                 box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
                 animation:mpspin 4s linear infinite; animation-play-state:paused; }
@keyframes mpspin{ to{ transform:rotate(360deg); } }
.mplayer.on .mp-vinyl .mp-disc{ animation-play-state:running; }
.mplayer:not(.on) .mp-vinyl{ opacity:.82; }
.mp-vinyl:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.mp-vinyl:active{ transform:scale(.95); }
/* off state: muted speaker icon in the same round button */
.mp-vinyl .mp-mute{ width:21px; height:21px; color:var(--ink-2); display:block; }
.mplayer.on .mp-mute{ display:none; }
.mplayer:not(.on) .mp-disc{ display:none; }
.mp-skip{ width:36px; height:36px; border-radius:var(--radius-pill); padding:0; cursor:pointer;
          border:1px solid var(--line-2); background:var(--bar); backdrop-filter:blur(10px);
          color:var(--ink); display:none; place-items:center;
          box-shadow:0 12px 26px -14px rgba(0,0,0,.5);
          transition:border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.mplayer.on .mp-skip{ display:grid; }
.mp-skip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.mp-skip:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){
  .mp-vinyl:hover{ border-color:var(--accent); transform:translateY(-2px); }
  .mp-skip:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
}

/* ---------- marquee ---------- */
.marquee-wrap{ overflow:hidden; }
/* align-items:center keeps the small caps text and the larger ✦ separators
   on the same vertical centre (stretch let the text ride high) */
.marquee{ display:flex; align-items:center; width:max-content; animation:scroll 40s linear infinite; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
/* pause-on-hover is for pointers only: on touch screens a tap makes :hover
   stick until the next tap, which froze the ticker */
@media (hover:hover) and (pointer:fine){
  .marquee-wrap:hover .marquee{ animation-play-state:paused; }
}
/* touch: hold to pause, release to resume (class set from JS pointer events) */
.marquee-wrap.hold .marquee{ animation-play-state:paused; }
.marquee-wrap{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* ---------- social brand icons (swapped in for text links by app.js) ---------- */
a.icon-link{ display:inline-flex; padding:.15rem; color:inherit;
             transition:color .35s var(--ease), transform .35s var(--ease); }
@media (hover:hover) and (pointer:fine){
  a.icon-link:hover{ color:var(--accent); transform:translateY(-2px); }
}
a.icon-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
a.icon-link svg{ width:21px; height:21px; display:block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .botnav .links{ display:none; }
  .botnav .right .book-pill{ display:none; }
  /* hamburger sits dead-centre of the bar; theme toggle takes the right edge */
  .menu-btn{ display:inline-flex; position:absolute; left:50%; transform:translateX(-50%); }
  .menu-btn:hover{ transform:translateX(-50%); }
  /* match the hamburger's 44px so the round controls read as one family */
  .theme-toggle{ width:44px; height:44px; }
  .theme-toggle svg{ width:19px; height:19px; }
  /* the audio controls move INTO the bar, left of the theme toggle —
     floating them above the page cluttered the music/videos carousels */
  .mplayer, .mplayer.raised{ bottom:13px; right:calc(var(--pad) + 44px + .6rem); gap:.35rem; }
  .mp-vinyl{ width:44px; height:44px; }
  .mp-vinyl .mp-disc{ width:34px; height:34px; }
  .mp-skip{ width:34px; height:34px; }
}
/* smallest phones: the bar can't fit skip + vinyl + theme around a centred
   hamburger — drop skip there, the vinyl still toggles the music */
@media (max-width: 374px){
  .mplayer.on .mp-skip{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .r{ opacity:1; transform:none; }
  .page{ animation:none; }
}