/* Shared base styles for WHOSRILA song/release pages.
   Extracted from the per-page <style> blocks — every rule here was
   byte-identical across all of them. Page-specific rules stay inline
   on each page and still override these, since this file loads first. */

:root{
  --cyan:#35D6C4; --ink: #0A0A0A; --ink-2: #161616; --paper: #F4F4F2; --paper-dim: #8C8C8C; --red: #D7263D; --line: rgba(10,10,10,0.12); --f-display: 'Helvetica Neue', Helvetica, Arial, sans-serif; --f-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --f-mono: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:var(--ink); }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.wrap{ width:100%; max-width:560px; margin:0 auto; padding:0 24px; }
header.site{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line); }
.navrow{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; }
.logo-link img{ height:22px; width:auto; display:block; filter:invert(1); }
nav.links{ display:flex; gap:28px; font-family:var(--f-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; }
nav.links a{ opacity:1; color:var(--ink); transition:opacity .2s; border-bottom:1px solid transparent; padding-bottom:3px; }
nav.links a:hover{ opacity:1; border-color:var(--red); }
.burger{ display:none; background:none; border:0; color:var(--ink); font-size:22px; cursor:pointer; padding:0; line-height:1; }
@media (max-width:760px){ nav.links{ display:none; } .burger{ display:block; } }

.mobilenav a{ padding:16px 28px; font-family:var(--f-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--line); }
main{ flex:1; display:flex; align-items:flex-start; padding:24px 0 48px; }
.stamp{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; }
.stamp::before,.stamp::after{ content:"\25B8"; opacity:0.6; font-size:10px; }
.stamp::after{ content:"\25C2"; }
h1.title{ font-family:var(--f-display); font-weight:400; font-size:clamp(24px,4vw,36px); line-height:0.92; margin:0 0 18px; text-transform:uppercase; }
p.hook{ color:var(--paper-dim); font-size:18px; max-width:440px; margin:0 0 30px; }
.countdown{ display:flex; gap:18px; margin:0 0 32px; }
.countdown .cell{ text-align:center; }
.countdown .num{ font-family:var(--f-display); font-size:34px; line-height:1; }
.countdown .lab{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--paper-dim); }
footer.mini{ padding:24px 0; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:11px; color:var(--paper-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
footer.mini a{ border-bottom:1px solid var(--line); }
footer.mini a:hover{ color:var(--paper); border-color:var(--paper); }
.h2 { font-size: clamp(24px,3.5vw,38px); }
h1, h2, h3, .h1, .h2, .h3, .title { filter: brightness(0); }

/* Countdown after the release date has passed. */
.countdown.done{ align-items:center; }
.countdown .cd-live{
  font-family:var(--f-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--red);
}

/* ---------- Mobile menu, animated ---------- */
.mobilenav{
  display:flex !important; flex-direction:column; gap:0;
  max-height:0; overflow:hidden; opacity:0;
  border-top:0 solid var(--line);
  transition:max-height .42s cubic-bezier(.4,0,.2,1), opacity .3s ease, border-top-width .3s ease;
}
.mobilenav.open{ opacity:1; border-top-width:1px; }
.mobilenav a{ transform:translateY(-10px); opacity:0;
  transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .34s ease; }
.mobilenav.open a{ transform:none; opacity:1; }
/* closing runs in reverse: the links fade out first, then the panel folds,
   so it collapses rather than snapping shut */
.mobilenav:not(.open) a{ transition-duration:.18s; transition-delay:0s; }
.mobilenav.open a:nth-child(1){ transition-delay:.05s; }
.mobilenav.open a:nth-child(2){ transition-delay:.11s; }
.mobilenav.open a:nth-child(3){ transition-delay:.17s; }
.mobilenav.open a:nth-child(4){ transition-delay:.23s; }
.burger{ transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.burger[aria-expanded="true"]{ transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce){
  /* the panel still folds and the links still fade — only the small
     upward slide on each link is dropped */
  .mobilenav a{ transform:none; }
  .burger{ transition:none; }
}