/* Headline font: Strider (Circle Font), picked by Kosta. Free for personal use only:
   buy the commercial licence at circlefont.com/product/strider before promoting the site. */
@font-face {
  font-family: 'Strider';
  src: url('assets/fonts/Strider.otf') format('opentype');
  font-display: swap;
}

/* Palette pulled from the artwork: Time Flys orange + mint, Summer Vibes
   yellow + navy stripes. Night mode borrows the blue/green Fall cover. */
:root {
  --bg: #f7ecd4;
  --bg-alt: #f2611d;
  --ink: #1d1509;
  --ink-soft: #5b4a35;
  --accent: #f2611d;
  --accent-2: #56d3a0;
  --pop: #ffd23f;
  --navy: #1b2a6b;
  --card: #fffaf0;
  --on-alt: #1d1509;
  --shadow: #1d1509;
  --pop-ink: #1d1509; /* outline + text on anything with a --pop background */
  --display: 'Strider', Georgia, 'Times New Roman', serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --body: 'DM Sans', system-ui, sans-serif;
}
:root[data-theme='night'] {
  --bg: #0a1b3d;
  --bg-alt: #0f5c4d;
  --ink: #f3e6c4;
  --ink-soft: #a9bfc7;
  --accent: #56d3a0;
  --accent-2: #4a6cf0;
  --pop: #ffd23f;
  --navy: #4a6cf0;
  --card: #10285a;
  --on-alt: #f3e6c4;
  --shadow: #030a1c;
  --pop-ink: #1d1509;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
[hidden] { display: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
  transition: background .4s, color .4s;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .95; margin: 0; }
h2 { font-size: clamp(2.6rem, 8vw, 5.5rem); }
.hand { font-family: var(--hand); font-size: 1.6rem; line-height: 1.1; margin: 0; }
.lead { font-size: 1.3rem; line-height: 1.45; }

/* stroke-width is in the drawing's own units (it is ~315 wide), so it is set per size */
.mark {
  width: 46px; height: 32px;
  fill: none; stroke: currentColor; stroke-width: 14;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-size: 1.5rem; line-height: 1; text-decoration: none;
}
.brand .mark { color: var(--accent); transition: transform .6s; }
.brand:hover .mark { transform: rotate(-360deg); }
.nav nav { display: flex; gap: 1.4rem; margin-left: auto; }
.nav nav a { text-decoration: none; font-weight: 500; }
.nav nav a:hover { text-decoration: underline wavy var(--accent) 2px; text-underline-offset: 5px; }
.nav-single {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .8rem .3rem .35rem;
  border: 2px solid var(--pop-ink); border-radius: 999px;
  background: var(--pop); color: var(--pop-ink);
  text-decoration: none; font-weight: 700; font-size: .9rem; white-space: nowrap;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.nav-single:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow); }
.nav-single img { width: 30px; height: 30px; border: 2px solid var(--pop-ink); border-radius: 4px; rotate: -5deg; }
.nav-single-tag { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.nav-single-title { font-family: var(--display); font-size: 1.05rem; line-height: 1; }
.nav-single-cta { font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.theme-toggle {
  width: 44px; height: 44px; flex: none;
  border: 2px solid var(--pop-ink); border-radius: 50%;
  background: var(--pop); color: var(--pop-ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.theme-toggle:hover { transform: translate(-1px, -1px) rotate(20deg); box-shadow: 4px 4px 0 var(--shadow); }
.theme-toggle .moon, [data-theme='night'] .theme-toggle .sun { display: none; }
[data-theme='night'] .theme-toggle .moon { display: inline; }

/* Buttons */
.btn {
  display: inline-block;
  padding: .8rem 1.5rem;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-weight: 700; text-decoration: none;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.btn.primary { background: var(--pop); color: var(--pop-ink); border-color: var(--pop-ink); }

/* Hero */
.hero {
  position: relative;
  overflow-x: clip;
  min-height: min(100svh - 64px, 900px);
  overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center;
  gap: 1.25rem;
  --head-h: clamp(98px, 16.8vw, 182px); /* used by the parked Zobie hug */
  padding: 3rem 1rem 4rem;
  text-align: center;
}
.hero > * { position: relative; max-width: 100%; }
.hero-kicker { color: var(--accent); font-size: clamp(1.5rem, 3.5vw, 2.2rem); rotate: -2deg; }
.hero-title {
  width: min(92vw, 1150px);
  filter: drop-shadow(.35vw .35vw 0 var(--accent)) drop-shadow(.3vw .3vw 0 var(--shadow));
}
.hero-title img { width: 100%; height: auto; }
.night-only, [data-theme='night'] .day-only { display: none; }
[data-theme='night'] .night-only { display: block; }
/* The deck */
/* the side covers fan out to about 60% of the deck's width each side, so the arrows sit beyond that */
.deck-wrap { position: relative; display: flex; align-items: center; gap: calc(min(400px, 62vw, 42svh) * .62); margin-top: .5rem; }
.deck { position: relative; width: min(400px, 62vw, 42svh); aspect-ratio: 1; }
.deck .card {
  position: absolute; inset: 0; padding: 0; overflow: visible;
  border: 3px solid var(--ink); border-radius: 6px; background: var(--card);
  box-shadow: 8px 8px 0 var(--shadow);
  cursor: pointer;
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .3s, filter .3s;
}
.deck .card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.deck .card[data-off='0'] { z-index: 5; transform: rotate(-2deg); }
.deck .card[data-off='-1'] { z-index: 4; transform: translate(-38%, 4%) rotate(-11deg) scale(.92); filter: brightness(.9); }
.deck .card[data-off='1'] { z-index: 4; transform: translate(38%, 6%) rotate(10deg) scale(.92); filter: brightness(.9); }
.deck .card[data-off='-2'] { z-index: 3; transform: translate(-62%, 10%) rotate(-20deg) scale(.8); filter: brightness(.8); }
.deck .card[data-off='2'] { z-index: 3; transform: translate(62%, 12%) rotate(19deg) scale(.8); filter: brightness(.8); }
.deck .card[data-off='-3'], .deck .card[data-off='3'] { z-index: 1; opacity: 0; transform: scale(.6); pointer-events: none; }
.deck .card[data-off='0']:hover { transform: rotate(-2deg) scale(1.03); }
.deck .card .sticker-new { top: -14px; right: -16px; }
.deck-arrow {
  position: relative; z-index: 6;
  flex: none; display: grid; place-items: center; width: 64px; height: 64px;
  border: 3px solid var(--pop-ink); border-radius: 50%;
  background: var(--pop); color: var(--pop-ink);
  font: 700 2.2rem/1 var(--body); cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.deck-arrow span { line-height: .8; margin-top: -6px; }
.deck-arrow small { font: 700 .6rem var(--body); letter-spacing: .08em; text-transform: uppercase; margin-top: -4px; }
.play-badge {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 72px; height: 72px;
  border: 3px solid var(--pop-ink); border-radius: 50%;
  background: var(--pop); color: var(--pop-ink);
  box-shadow: 4px 4px 0 var(--shadow);
  opacity: 0; scale: .8; transition: opacity .25s, scale .25s;
}
@media (hover: hover) { .deck .card[data-off='0']:hover .play-badge { opacity: .92; scale: 1; } }
/* touch screens have no hover, so the front cover always shows a small play badge in its corner */
@media (hover: none) {
  .deck .card[data-off='0'] .play-badge { opacity: 1; scale: 1; left: auto; top: auto; right: 10px; bottom: 10px; translate: 0 0; width: 52px; height: 52px; }
  .deck .card[data-off='0'] .play-badge svg { width: 24px; height: 24px; }
}
.play-badge svg { width: 32px; height: 32px; fill: currentColor; }
.deck-wrap .peek {
  position: absolute; left: 50%; top: 0; z-index: 0;
  width: clamp(110px, 16vw, 190px); height: clamp(77px, 11.2vw, 133px);
  translate: -50% -58%;
  fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
  animation: peek 4s ease-in-out infinite;
}
@keyframes peek { 50% { translate: -50% -70%; rotate: -5deg; } }
.deck-wrap .peek .zobie-hair { animation-duration: 2.2s; }

/* Zobie's bits. Each one overrides the idle peek animation for its duration. */
.deck-wrap .peek { --side: 0px; }
.bit-duck .peek { animation: duck 3.2s ease-in-out forwards; }
@keyframes duck {
  0% { translate: -50% -58%; }
  18% { translate: -50% 40%; }                      /* drops behind the covers */
  50% { translate: calc(-50% - 34vw) 40%; }         /* sneaks across while hidden */
  65% { translate: calc(-50% - 34vw) -62%; }        /* pops up on the left */
  85% { translate: calc(-50% - 34vw) -58%; }
  92% { translate: calc(-50% - 34vw) 40%; }
  100% { translate: -50% -58%; }
}
.bit-dash .peek { animation: dash 2.6s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes dash {
  0% { translate: -50% -58%; }
  15% { translate: calc(-50% + 36vw) -62%; rotate: 8deg; }   /* off to the right */
  25% { translate: calc(-50% + 36vw) -62%; rotate: -4deg; }
  60% { translate: calc(-50% - 36vw) -66%; rotate: -8deg; }  /* zips across to the left */
  70% { translate: calc(-50% - 36vw) -62%; rotate: 4deg; }
  100% { translate: -50% -58%; rotate: 0deg; }
}
.bit-spin .peek { animation: spin-peek 1.4s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes spin-peek { 50% { translate: -50% -110%; } 100% { rotate: -360deg; translate: -50% -58%; } }
.bit-boo .peek { animation: boo 2.2s ease-in-out forwards; }
@keyframes boo { 30% { scale: 1.8; translate: -50% -85%; } 70% { scale: 1.8; translate: -50% -85%; } 100% { scale: 1; translate: -50% -58%; } }

/* The hug: two small hands grab the front cover's edges, squeeze, and let go */
.hug-hand {
  position: absolute; top: 46%; z-index: 7; pointer-events: none;
  width: clamp(56px, 8vw, 92px); height: clamp(56px, 8vw, 92px);
  fill: var(--card); stroke: var(--accent); stroke-width: 4; stroke-linejoin: round;
  filter: drop-shadow(3px 4px 0 rgb(0 0 0 / .28));
  opacity: 0; scale: .6;
}
.hug-l { left: calc(50% - min(400px, 62vw, 42svh) / 2 - 10px); rotate: 10deg; }
.hug-r { right: calc(50% - min(400px, 62vw, 42svh) / 2 - 10px); rotate: -8deg; }
.bit-hug .hug-l { animation: hug-in-l 3s ease-in-out forwards; }
.bit-hug .hug-r { animation: hug-in-r 3s ease-in-out forwards; }
.bit-hug .peek { animation: hug-peek-up 3s ease-in-out forwards; }
@keyframes hug-in-l { 15% { opacity: 1; scale: 1; translate: 0 0; } 40% { translate: 14px 0; } 60% { translate: 10px 0; } 80% { opacity: 1; scale: 1; translate: 0 0; } 100% { opacity: 0; scale: .6; } }
@keyframes hug-in-r { 15% { opacity: 1; scale: 1; translate: 0 0; } 40% { translate: -14px 0; } 60% { translate: -10px 0; } 80% { opacity: 1; scale: 1; translate: 0 0; } 100% { opacity: 0; scale: .6; } }
@keyframes hug-peek-up { 20% { translate: -50% -78%; rotate: -6deg; } 70% { translate: -50% -78%; rotate: 6deg; } 100% { translate: -50% -58%; } }

/* Player under the covers */
.player { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; width: min(460px, 86vw); margin-top: 1.25rem; text-align: left; }
.deck-play {
  grid-row: 1 / 3;
  display: grid; place-items: center; width: 58px; height: 58px;
  border: 3px solid var(--pop-ink); border-radius: 50%;
  background: var(--pop); color: var(--pop-ink); cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.deck-play:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.deck-play .icon { width: 26px; height: 26px; fill: currentColor; }
.deck-play:not(.playing) .icon { translate: 2px 0; }
.deck-caption { margin: 0; line-height: 1; }
.scrub { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.time { font-size: .75rem; font-weight: 700; color: var(--ink-soft); min-width: 2.2em; }
.time-end { text-align: right; }
.scrubber {
  --p: 0%;
  flex: 1; height: 22px; margin: 0; appearance: none; background: none; cursor: pointer;
}
.scrubber::-webkit-slider-runnable-track { height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--p), var(--card) var(--p)); }
.scrubber::-moz-range-track { height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); }
.scrubber::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
.scrubber::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid var(--pop-ink); border-radius: 50%; background: var(--pop); box-shadow: 2px 2px 0 var(--shadow); }
.scrubber::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--pop-ink); border-radius: 50%; background: var(--pop); box-shadow: 2px 2px 0 var(--shadow); }
.preview-note { margin: .75rem 0 0; font-size: .78rem; color: var(--ink-soft); opacity: .8; }
.preview-note a { color: var(--accent); }
.deck-arrow:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow); }
.deck-caption { color: var(--accent); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.25rem; }

/* Zobie hugging the front page is parked for now (markup removed from index.html). The
   styles stay here so it can come back: add class "hug" to .hero and restore the markup. */
/* Zobie hugging the front page: head over the top edge, arms down the sides, hands gripping the page */
.hero.hug .arms {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  pointer-events: none;
}
.hero.hug .grip {
  position: absolute; top: 60%; z-index: 4; pointer-events: none;
  width: clamp(100px, 15vw, 200px); height: clamp(100px, 15vw, 200px);
  fill: var(--card); stroke: var(--accent); stroke-width: 4; stroke-linejoin: round;
  filter: drop-shadow(4px 6px 0 rgb(0 0 0 / .28));
  animation: squeeze 5s ease-in-out infinite;
}
.grip-l { left: calc(-1 * clamp(14px, 2vw, 30px)); rotate: 8deg; }
.grip-r { right: calc(-1 * clamp(12px, 1.8vw, 26px)); rotate: -6deg; animation-delay: -2.5s; }
@keyframes squeeze { 50% { translate: 0 -6px; } }
.hero.hug .peek {
  position: absolute; z-index: 1; left: 50%; translate: -50% 0; top: 0;
  width: clamp(140px, 24vw, 260px); height: var(--head-h);
  fill: var(--bg); stroke: var(--accent); stroke-width: 8; /* filled, so the arms start behind him */ stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
  animation: hug-peek 4s ease-in-out infinite;
}
@keyframes hug-peek { 50% { translate: -50% -10px; rotate: -4deg; } }

/* Marquee */
.marquee {
  overflow: hidden;
  background: var(--navy); color: #fffaf0;
  border-block: 2px solid var(--ink);
  rotate: -1deg; scale: 1.02;
}
.marquee-track {
  display: flex; width: max-content;
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.2rem);
  padding: .5rem 0;
  animation: slide 28s linear infinite;
}
.marquee-track > * { padding: 0 1rem; white-space: nowrap; }
.marquee-track button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.marquee-track button:hover { color: var(--pop); text-decoration: underline wavy 2px; text-underline-offset: 6px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .wave { width: 2.2em; height: 1.5em; fill: none; stroke: var(--pop); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; align-self: center; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Sections */
.section { position: relative; max-width: 1200px; margin: 0 auto; padding: clamp(4rem, 10vw, 7.5rem) clamp(1rem, 4vw, 3rem); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: 2.5rem; }
.section-head .hand { color: var(--accent); rotate: -1.5deg; }


/* "new single" sticker on the cover */
.sticker-new {
  position: absolute; top: -12px; right: -14px; z-index: 2;
  padding: .3rem .8rem;
  background: var(--pop); color: var(--pop-ink);
  border: 2px solid var(--pop-ink); border-radius: 999px;
  font: 700 .8rem var(--body); letter-spacing: .06em; text-transform: uppercase;
  rotate: 8deg; box-shadow: 3px 3px 0 var(--shadow);
}
.release { position: relative; }

/* Cassette necklace: a dotted chain hangs from one edge of the page to the other
   below the singles, with the tape hooked on at the lowest point */
.music { padding-bottom: 15rem; }
.music .necklace { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.necklace {
  position: absolute; left: 0; right: 0; bottom: 1rem;
  height: 11rem; margin: 0; pointer-events: none;
}
.drape-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; }
.tape-svg {
  /* the chain's low point is 150/260 of the way down; the hook's top sits right on it */
  position: absolute; left: 50%; top: calc(150 / 260 * 100% - 2px); margin-left: -75px;
  width: 150px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transform-origin: 50% 0; animation: swing 4s ease-in-out infinite;
}
.cassette { stroke: var(--pop-ink); }
.cassette rect:first-child { fill: var(--pop); }
.cassette .label { fill: #fffaf0; }
.cassette .window { fill: #1d1509; }
.cassette circle { fill: #fffaf0; }
@keyframes swing { 50% { transform: rotate(2.5deg); } }

/* Featured release */
.featured { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.featured-cover { position: relative; rotate: 2.5deg; }
.featured-cover a { display: block; }
.featured-cover img { border: 3px solid var(--ink); border-radius: 6px; box-shadow: 10px 10px 0 var(--accent); }
.featured-kicker { color: var(--accent); rotate: -2deg; margin-bottom: .5rem; }
.featured-text h2 { font-size: clamp(4rem, 13vw, 9rem); }
.featured-text .lead { margin: 1rem 0 1.75rem; }
.featured-links { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Releases */
.releases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 2.5rem 2rem; }
.release {
  display: grid; gap: .35rem;
  padding: .8rem .8rem 1rem;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 6px 6px 0 var(--shadow);
  font: inherit; text-align: left; cursor: pointer;
  rotate: var(--tilt);
  transition: rotate .25s, transform .25s, box-shadow .25s;
}
.release:hover, .release:focus-visible { rotate: 0deg; transform: translateY(-6px); box-shadow: 10px 12px 0 var(--accent); }
.release img { aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); border-radius: 4px; margin-bottom: .4rem; }
.release-title { font-family: var(--display); font-size: 1.6rem; line-height: 1.05; }
.release-note { color: var(--ink-soft); font-size: 1.35rem; }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.about-photo { position: sticky; top: 6rem; rotate: -3deg; }
.about-photo img { border: 3px solid var(--ink); border-radius: 6px; box-shadow: 10px 10px 0 var(--accent-2); }
.tape {
  position: absolute; top: -16px; left: 50%;
  width: 130px; height: 34px; translate: -50% 0; rotate: 4deg;
  background: color-mix(in srgb, var(--pop) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.about-text h2 { margin-bottom: 1.5rem; }
.about-text p { margin: 0 0 1rem; max-width: 34em; }
.stickers { display: flex; flex-wrap: wrap; gap: .7rem; padding: 0; margin: 1.75rem 0 0; list-style: none; }
.stickers li {
  padding: .35rem .9rem;
  border: 2px solid var(--pop-ink); border-radius: 999px;
  font-weight: 700; font-size: .95rem; color: var(--pop-ink);
  background: var(--pop);
}
.stickers li:nth-child(2) { background: #56d3a0; rotate: 2deg; }
.stickers li:nth-child(3) { background: #7da2ff; rotate: -2deg; }
.stickers li:nth-child(4) { background: #ff9a5c; rotate: 1deg; }

/* Contact */
.contact { text-align: center; }
.contact .lead { max-width: 30em; margin: 1.25rem auto 2rem; }
.big-btn { font-size: clamp(1.1rem, 3vw, 1.6rem); padding: 1rem 2rem; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; padding: 0; margin: 2.5rem 0 0; list-style: none; }
.socials a { font-family: var(--display); font-size: 1.5rem; text-decoration: none; }
.socials a:hover { color: var(--accent); text-decoration: underline wavy 2px; text-underline-offset: 6px; }

.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem .8rem;
  padding: 2rem 1rem; border-top: 2px solid var(--ink);
  font-size: .9rem; color: var(--ink-soft);
}
.footer-note { flex-basis: 100%; margin: 0; text-align: center; font-size: 1.3rem; color: var(--accent); }
.footer .mark { width: 32px; height: 22px; color: var(--accent); }

/* Zobie, the mascot: draws himself in, then floats in the corner */
.mascot {
  position: fixed; right: clamp(.75rem, 3vw, 2rem); bottom: clamp(.75rem, 3vw, 2rem); z-index: 9;
  display: grid; justify-items: end; gap: .5rem;
  padding: 0; border: 0; background: none; color: var(--accent);
  cursor: pointer;
  transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1);
}
.mascot-body {
  display: grid; place-items: center;
  width: 92px; height: 92px;
  background: var(--card);
  border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: 4px 4px 0 var(--shadow);
  animation: bob 3.2s ease-in-out infinite;
}
.mascot .mark {
  width: 64px; height: 45px; stroke-width: 11;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.8s .4s ease-in-out forwards, boil .45s steps(1) infinite;
}
.mascot.hop .mascot-body { animation: hop .7s cubic-bezier(.3, 1.4, .6, 1); }
.mascot-say {
  max-width: 13rem;
  padding: .3rem .9rem .4rem;
  background: var(--pop); color: var(--pop-ink);
  border: 2px solid var(--pop-ink); border-radius: 18px 18px 4px 18px;
  font-size: 1.4rem; text-align: left;
  opacity: 0; translate: 0 8px; rotate: -3deg;
  transition: opacity .25s, translate .25s;
  pointer-events: none;
}
.mascot-say.show { opacity: 1; translate: 0 0; }
@keyframes boil {
  0% { filter: url(#boil-1); }
  33% { filter: url(#boil-2); }
  66% { filter: url(#boil-3); }
}
/* Zobie's hair sways from the roots */
.zobie-hair { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 2.6s ease-in-out infinite; }
.zobie-hair:nth-of-type(3) { animation-delay: -.5s; }
.zobie-hair:nth-of-type(4) { transform-origin: 0% 100%; animation-delay: -1s; }
@keyframes sway { 50% { rotate: 7deg; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bob { 50% { translate: 0 -8px; rotate: -5deg; } }
@keyframes hop {
  30% { translate: 0 -46px; rotate: -200deg; }
  60% { translate: 0 0; rotate: -360deg; scale: 1.12 .88; }
  100% { translate: 0 0; rotate: -360deg; }
}

/* Release sheet */
.sheet {
  width: min(880px, calc(100vw - 2rem)); padding: 0;
  background: var(--card); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 12px 12px 0 var(--accent);
}
.sheet[open] { display: grid; grid-template-columns: 1fr 1fr; }
.sheet::backdrop { background: rgb(10 10 20 / .65); backdrop-filter: blur(4px); }
.sheet-cover-link { display: block; }
.sheet-cover { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sheet-body { display: grid; align-content: center; gap: 1rem; padding: 2rem; }
.sheet-body h3 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.sheet-note { color: var(--accent); }
.sheet-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.sheet-close {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  width: 40px; height: 40px;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--card); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}

:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

@media (max-width: 760px) {
  .nav nav { display: none; }
  .nav-single { margin-left: auto; padding-right: .6rem; }
  .nav-single-tag, .nav-single-cta { display: none; }
  .mascot-body { width: 68px; height: 68px; }
  .mascot .mark { width: 48px; height: 34px; }
  .mascot-say { font-size: 1.2rem; }
  /* phones: the deck fills the width, side covers fan less, arrows sit over the fan's edges */
  .deck { width: min(230px, 58vw); }
  .deck-wrap { width: 100%; justify-content: center; gap: 0; margin-top: 1.25rem; }
  .deck-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; font-size: 1.5rem; }
  .deck-arrow.prev { left: 0; }
  .deck-arrow.next { right: 0; }
  .deck .card[data-off='-1'] { transform: translate(-30%, 4%) rotate(-10deg) scale(.9); }
  .deck .card[data-off='1'] { transform: translate(30%, 6%) rotate(9deg) scale(.9); }
  .deck .card[data-off='-2'] { transform: translate(-46%, 10%) rotate(-18deg) scale(.78); }
  .deck .card[data-off='2'] { transform: translate(46%, 12%) rotate(17deg) scale(.78); }
  .deck-wrap .peek { width: 100px; height: 70px; }
  .player { width: 100%; }
  .about-photo { position: relative; top: auto; }
  .hero .grip { top: 52%; }
  .hero .arms { stroke-width: 10; }
  .theme-toggle { margin-left: 0; }
  .about { grid-template-columns: 1fr; }
  .featured { grid-template-columns: 1fr; }
  .featured-cover { max-width: 420px; margin: 0 auto; }
  .about-photo { max-width: 420px; margin: 0 auto; }
  .sheet[open] { grid-template-columns: 1fr; }
  .sheet-body { padding: 1.25rem 1.25rem 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mascot .mark { stroke-dashoffset: 0; }
}