/* ==========================================================
   aleccherrin.com — styles
   Palette: forest at night, with flowers.
   ========================================================== */

@property --sky-top   { syntax: '<color>'; inherits: true; initial-value: #0b2a1b; }
@property --sky-bot   { syntax: '<color>'; inherits: true; initial-value: #04110a; }
@property --leaf-a    { syntax: '<color>'; inherits: true; initial-value: #1f5a37; }
@property --leaf-b    { syntax: '<color>'; inherits: true; initial-value: #2f7a48; }
@property --leaf-c    { syntax: '<color>'; inherits: true; initial-value: #14402a; }
@property --vein      { syntax: '<color>'; inherits: true; initial-value: #6fbf7f; }
@property --glow      { syntax: '<color>'; inherits: true; initial-value: #c6f06b; }
@property --geo       { syntax: '<color>'; inherits: true; initial-value: #8fd6a0; }

:root {
  --bg: #07160e;
  --ink: #f3ecd8;
  --ink-dim: #b9c7b4;
  --lime: #c6f06b;
  --pink: #ff7aa8;
  --amber: #ffbf5e;
  --manila: #e9cf8f;
  --paper: #fbf7ec;
  --metal-1: #5d6b66;
  --metal-2: #8e9c95;
  --card: rgba(9, 28, 18, .62);
  --card-line: rgba(198, 240, 107, .18);
  --radius: 22px;
  --display: 'Fraunces', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  transition: --sky-top 3s, --sky-bot 3s, --leaf-a 3s, --leaf-b 3s, --leaf-c 3s, --vein 3s, --glow 3s, --geo 3s;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: var(--lime); }
.mono { font-family: var(--mono); font-size: .78em; letter-spacing: .04em; }
::selection { background: var(--pink); color: #1a0710; }

/* ---------------- background world ---------------- */
#world { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#world > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky { background: radial-gradient(120% 90% at 50% 0%, var(--sky-top), var(--sky-bot) 70%); }
.sunglow {
  background: radial-gradient(40% 35% at var(--sun-x, 80%) var(--sun-y, 12%), color-mix(in srgb, var(--glow) 35%, transparent), transparent 70%);
  mix-blend-mode: screen; opacity: var(--sun-o, .5); transition: opacity 3s;
}
#geo { opacity: .5; }
#geo * { vector-effect: non-scaling-stroke; }
#garden .leaf-a { fill: var(--leaf-a); }
#garden .leaf-b { fill: var(--leaf-b); }
#garden .leaf-c { fill: var(--leaf-c); }
#garden .vein { stroke: var(--vein); stroke-opacity: .45; fill: none; stroke-width: 1.4; stroke-linecap: round; }
#garden .stem { stroke: var(--leaf-c); fill: none; stroke-linecap: round; }
#garden .frost { opacity: var(--frost, 0); transition: opacity 3s; }
.fog {
  background:
    radial-gradient(60% 30% at 20% 80%, rgba(220, 235, 225, .18), transparent 70%),
    radial-gradient(70% 30% at 80% 70%, rgba(220, 235, 225, .14), transparent 70%);
  opacity: var(--fog, 0); transition: opacity 3s;
  animation: fogdrift 40s ease-in-out infinite alternate;
}
@keyframes fogdrift { to { transform: translateX(-6%); } }
.flash { background: #eef6ff; opacity: 0; mix-blend-mode: overlay; }
.flash.on { animation: flash 900ms ease-out; }
@keyframes flash { 0%,30% { opacity: .0; } 8% { opacity: .9; } 18% { opacity: .2; } 22% { opacity: .7; } 100% { opacity: 0; } }
.vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0, 0, 0, .55)); }

/* ---------------- chips ---------------- */
.chip {
  position: fixed; z-index: 40;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem .45rem .45rem;
  background: rgba(5, 18, 11, .7);
  border: 1px solid var(--card-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
}
#detroit { left: 16px; bottom: 16px; max-width: calc(100vw - 130px); }
#detroit span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#timeTravel {
  border: 0; background: rgba(198, 240, 107, .12); border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; font-size: 15px; line-height: 1;
  transition: transform .5s var(--ease-spring);
}
#timeTravel:hover { transform: rotate(40deg) scale(1.15); }
.eggs { right: 16px; bottom: 16px; padding: .45rem .8rem; cursor: pointer; }
.eggs.bump { animation: bump .6s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.35) rotate(-8deg); } }
.egg-list {
  position: fixed; right: 16px; bottom: 60px; z-index: 41;
  width: min(300px, calc(100vw - 32px));
  background: rgba(5, 18, 11, .92); border: 1px solid var(--card-line);
  border-radius: 16px; padding: 14px 16px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
}
.egg-list ul { margin: 6px 0 0; padding: 0; list-style: none; }
.egg-list li { padding: 3px 0; }
.egg-list li.found { color: var(--lime); }

/* ---------------- layout ---------------- */
main { position: relative; z-index: 2; }
.panel {
  min-height: 100vh;
  padding: 14vh max(16px, 6vw) 10vh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1200px; margin: 0 auto;
}
.section-title {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-weight: 300; line-height: 1; letter-spacing: -.02em;
  margin: 0 0 .6em;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.section-title .mono { display: block; font-size: 13px; color: var(--lime); margin-bottom: .8em; letter-spacing: .2em; }
.section-sub { color: var(--ink-dim); margin: -1em 0 2em; max-width: 46ch; }
.big { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.15; font-weight: 400; margin: 0; }
.center { text-align: center; }
.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}

/* ---------------- reveal animations ---------------- */
[data-reveal] {
  --d: 0ms;
  transition:
    opacity .9s var(--ease-out) var(--d),
    transform 1.1s var(--ease-out) var(--d),
    clip-path 1.1s var(--ease-out) var(--d),
    filter .9s var(--ease-out) var(--d);
  will-change: transform, opacity;
}
[data-reveal]:not(.in) { opacity: 0; }
[data-reveal="fade"]:not(.in)        { filter: blur(6px); }
[data-reveal="rise"]:not(.in)        { transform: translateY(70px); }
[data-reveal="slide-left"]:not(.in)  { transform: translateX(-120px) rotate(-2deg); }
[data-reveal="slide-right"]:not(.in) { transform: translateX(120px) rotate(2deg); }
[data-reveal="zoom"]:not(.in)        { transform: scale(.8) rotate(-3deg); }
[data-reveal="swipe"]:not(.in)       { clip-path: inset(0 100% 0 0 round 14px); opacity: 1; transform: translateX(-20px); }
[data-reveal="swipe"].in             { clip-path: inset(0 0 0 0 round 14px); }
[data-reveal="wipe"]                 { position: relative; }
[data-reveal="wipe"]:not(.in)        { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); opacity: 1; }
[data-reveal="wipe"].in              { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); }
/* leaving through the top: a different exit than the entrance */
[data-reveal].gone { opacity: 0 !important; transform: translateY(-50px) scale(.97) !important; filter: blur(8px) !important; clip-path: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity .4s !important; transform: none !important; clip-path: none !important; filter: none !important; }
}

/* ---------------- hero ---------------- */
#hero { align-items: center; text-align: center; }
.kicker { font-family: var(--mono); font-size: 13px; color: var(--lime); letter-spacing: .12em; text-transform: lowercase; margin: 0 0 1.2rem; }
.name-wrap { position: relative; display: grid; place-items: center; }
.name {
  position: relative; display: block;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: clamp(3.2rem, 13vw, 11rem); font-weight: 600; line-height: 1;
  letter-spacing: -.035em;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  color: var(--ink);
  z-index: 3;
}
.name .half { display: block; white-space: nowrap; transition: transform .9s var(--ease-spring), opacity .4s; }
.name .half.top { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 60%); }
.name .half.bot { position: absolute; inset: 0; clip-path: polygon(0 60%, 100% 44%, 100% 100%, 0 100%); color: var(--lime); }
.name:hover .half.bot { color: var(--pink); }
.name .blade {
  position: absolute; left: -6%; right: -6%; top: 52%; height: 3px;
  background: linear-gradient(90deg, transparent, #fff, var(--lime), transparent);
  transform: rotate(-4deg) scaleX(0); transform-origin: left; opacity: 0;
  box-shadow: 0 0 18px var(--lime);
}
.name.sliced .blade { animation: blade .45s ease-out forwards; }
@keyframes blade { 0% { transform: rotate(-4deg) scaleX(0); opacity: 1; } 70% { transform: rotate(-4deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-4deg) scaleX(1); opacity: 0; } }
.name.sliced .half.top { transform: translate(-4%, -46%) rotate(-5deg); transition-delay: .25s; }
.name.sliced .half.bot { transform: translate(4%, 52%) rotate(4deg); transition-delay: .25s; }

.headshot {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: clamp(130px, 20vw, 210px); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0) rotate(-20deg);
  transition: transform .8s var(--ease-spring) .35s;
  pointer-events: none;
}
.headshot img, .headshot .avatar-fallback {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 5px solid var(--lime); box-shadow: 0 0 0 10px rgba(198, 240, 107, .15), 0 20px 50px rgba(0, 0, 0, .5);
  display: block;
}
.headshot .bubble {
  position: absolute; left: 88%; top: -6%; white-space: nowrap;
  background: var(--paper); color: #13261a; font-family: var(--hand); font-size: 26px; font-weight: 700;
  padding: .2em .7em; border-radius: 18px 18px 18px 4px;
  transform: scale(0); transform-origin: bottom left; transition: transform .5s var(--ease-spring) .9s;
}
.name-wrap.open .headshot { transform: translate(-50%, -50%) scale(1) rotate(0); pointer-events: auto; z-index: 4; }
.name-wrap.open .bubble { transform: scale(1); }
.name-wrap.open { margin: 9vh 0; transition: margin .8s var(--ease-out); }
.name-wrap { transition: margin .8s var(--ease-out); }

.tagline { font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-style: italic; color: var(--ink-dim); margin: 1.4rem 0 .4rem; }
.hint { font-family: var(--hand); font-size: 22px; color: var(--pink); margin: 0; transform: rotate(-3deg); }
.scroll-cue { position: absolute; bottom: 5vh; left: 50%; width: 26px; height: 42px; border: 2px solid var(--ink-dim); border-radius: 14px; transform: translateX(-50%); opacity: .6; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--lime); animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
#hero { position: relative; }

/* ---------------- about ---------------- */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.about-copy p { margin: 0 0 1em; color: var(--ink-dim); }
.about-copy .aside { font-family: var(--hand); font-size: 24px; color: var(--pink); line-height: 1.2; }
.facts { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.facts li { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px; font-size: 1.05rem; }
.facts .mono { display: block; color: var(--lime); font-size: 11px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .14em; }

/* ---------------- listening ---------------- */
.listen-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: stretch; }
.now-playing { display: flex; gap: 24px; align-items: center; padding: 28px; }
.vinyl {
  position: relative; flex: none; width: 150px; height: 150px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #111 0 2px, #1c1c1c 2px 4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6), inset 0 0 0 1px #333;
  display: grid; place-items: center;
  animation: spin 3.2s linear infinite; animation-play-state: paused;
}
.vinyl.playing { animation-play-state: running; }
.vinyl img { width: 56%; height: 56%; border-radius: 50%; object-fit: cover; background: var(--pink); }
.vinyl img:not([src]), .vinyl img[src=""] { visibility: hidden; }
.vinyl::before { content: ''; position: absolute; width: 56%; height: 56%; border-radius: 50%; background: conic-gradient(var(--pink), var(--amber), var(--lime), var(--pink)); z-index: -0; }
.vinyl img { position: relative; z-index: 1; }
.vinyl .hole { position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: #0b0b0b; }
@keyframes spin { to { transform: rotate(360deg); } }
.np-meta { min-width: 0; }
.np-status { color: var(--lime); margin: 0 0 .6rem; display: flex; align-items: center; gap: 8px; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.eq i { width: 3px; background: var(--lime); height: 4px; }
.playing-now .eq i { animation: eq .9s ease-in-out infinite; }
.playing-now .eq i:nth-child(2) { animation-delay: -.3s; }
.playing-now .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 50% { height: 12px; } }
.np-title { display: block; font-size: 1.5rem; line-height: 1.15; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.np-title:hover { color: var(--lime); }
.np-artist { margin: .2rem 0 1rem; color: var(--ink-dim); }
.np-bar { height: 4px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.np-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime), var(--pink)); transition: width 1s linear; }

.tops { padding: 22px 24px; }
.tops-sub { color: var(--ink-dim); margin: 14px 0 6px; }
.flag { background: var(--amber); color: #2a1a00; padding: 1px 7px; border-radius: 6px; margin-left: 6px; font-size: 10px; }
.tops-list { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.tops-list li {
  counter-increment: n; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 4px; border-bottom: 1px dashed rgba(198, 240, 107, .14);
  animation: popin .6s var(--ease-spring) both; animation-delay: calc(var(--i) * 70ms);
}
.tops-list li::before { content: counter(n, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--pink); }
.tops-list .t { font-size: 1.05rem; line-height: 1.2; }
.tops-list .s { display: block; color: var(--ink-dim); font-size: .85rem; }
.tops-list .h { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
@keyframes popin { from { opacity: 0; transform: translateX(30px) rotate(2deg); } }

/* ---------------- filing cabinet ---------------- */
.cabinet-stage { display: flex; justify-content: center; perspective: 1400px; padding-bottom: 20px; }
.cabinet {
  position: relative; width: min(420px, 92vw);
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 12%, transparent 88%, rgba(0,0,0,.25)),
    linear-gradient(180deg, #7d8b84, #5c6a63);
  border-radius: 10px 10px 4px 4px;
  padding: 14px 14px 18px;
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(0, 0, 0, .25);
  transform: rotateX(4deg);
}
.cab-top { position: absolute; left: -6px; right: -6px; top: -10px; height: 14px; border-radius: 6px; background: linear-gradient(#a3b1aa, #6f7d76); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cab-feet { display: flex; justify-content: space-between; position: absolute; left: 18px; right: 18px; bottom: -12px; }
.cab-feet span { width: 40px; height: 12px; background: #2f3834; border-radius: 0 0 4px 4px; }
.graffiti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.label-slot, .handle { position: relative; z-index: 2; }
.graffiti .etch { fill: none; stroke: rgba(235, 244, 239, .6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); }
.graffiti .scrawl { font-family: var(--hand); font-size: 24px; fill: rgba(235, 244, 239, .58); stroke: none; }
.graffiti .scrawl.small { font-size: 19px; }
.graffiti .etch g:not(.cool-s) path, .graffiti .etch circle { fill: none; }
.cool-s { pointer-events: all; cursor: pointer; transform-box: fill-box; transform-origin: center; }
.cool-s.spin { animation: sSpin 1.2s var(--ease-spring); }
@keyframes sSpin { to { rotate: 720deg; } }

.drawer { position: relative; margin-bottom: 12px; }
.drawer:last-child { margin-bottom: 0; }
.drawer-front {
  position: relative; width: 100%; height: 120px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #96a49d, #7a8881 60%, #6d7b74);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.25), 0 3px 0 rgba(0,0,0,.35);
  transition: transform .6s var(--ease-spring), box-shadow .4s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.drawer-front:hover { transform: translateY(-2px); }
.drawer.open .drawer-front { transform: translateY(8px) scale(1.04); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 22px 30px -10px rgba(0,0,0,.6); z-index: 6; }
.label-slot {
  width: 150px; height: 34px; border-radius: 3px; padding: 4px;
  background: linear-gradient(#c9d2cd, #a8b3ad); box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.label-slot span { display: grid; place-items: center; height: 100%; background: #fffdf3; font-family: var(--hand); font-size: 19px; font-weight: 700; color: #233; line-height: 1; }
.handle { width: 110px; height: 16px; border-radius: 8px; background: linear-gradient(#e8ecea, #9ba69f); box-shadow: 0 3px 4px rgba(0,0,0,.4), inset 0 -2px 0 rgba(0,0,0,.2); }

.tray {
  height: 0; overflow: hidden;
  transition: height .7s var(--ease-out);
  background: linear-gradient(#1c2420, #2a332e);
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 12px 20px rgba(0,0,0,.6);
  margin: 0 6px;
}
.drawer.open .tray { height: var(--tray-h, 300px); }
.tray-inner { padding: 22px 14px 10px; perspective: 600px; }
.folder {
  position: relative; display: block; width: 100%; border: 0; text-align: left; cursor: pointer;
  background: var(--manila); color: #3a2c10;
  height: 56px; margin-top: -18px; padding: 0;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom; transform: rotateX(-18deg);
  transition: transform .5s var(--ease-spring), margin .5s var(--ease-out), filter .3s;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, .35);
  filter: brightness(calc(.86 + var(--i) * .05));
}
.folder:first-child { margin-top: 0; }
.folder .tab-label {
  position: absolute; top: -22px; left: calc(10px + var(--i) * 22%);
  max-width: 60%;
  background: var(--manila); padding: 3px 12px 4px; border-radius: 6px 6px 0 0;
  font-family: var(--hand); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder .sub { position: absolute; left: 12px; bottom: 6px; font-family: var(--mono); font-size: 10px; opacity: .7; }
.folder:hover { transform: rotateX(-8deg) translateY(-14px); }
.folder.picked { transform: rotateX(0) translateY(-10px); filter: none; }

.files {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px;
  margin: 18px auto 0; width: min(760px, 100%);
}
.file-card {
  position: relative; border: 0; cursor: pointer; text-align: left;
  background: var(--paper); color: #1c2a20; padding: 14px 14px 18px; min-height: 150px;
  border-radius: 3px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.7);
  transform: rotate(var(--r, 0deg)); transition: transform .4s var(--ease-spring);
  animation: dealt .6s var(--ease-spring) both; animation-delay: calc(var(--i) * 80ms);
  background-image: linear-gradient(rgba(70, 120, 200, .14) 1px, transparent 1px);
  background-size: 100% 20px; background-position: 0 34px;
}
.file-card:hover { transform: rotate(0) translateY(-8px) scale(1.04); }
.file-card .ft { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.2; display: block; }
.file-card .fk { font-family: var(--mono); font-size: 10px; color: #6b5a2c; text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 6px; }
.file-card .emoji { position: absolute; right: 10px; bottom: 6px; font-size: 26px; }
@keyframes dealt { from { opacity: 0; transform: translateY(-40px) rotate(-14deg); } }
.files-head { width: min(760px, 100%); margin: 26px auto 0; font-family: var(--hand); font-size: 26px; color: var(--manila); }

/* paper viewer */
.paper-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2, 10, 6, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
}
.paper-overlay[hidden] { display: none; }
.paper {
  position: relative; width: min(680px, 100%); max-height: 86vh;
  background: var(--paper); color: #1d2a21;
  border-radius: 2px; box-shadow: 0 40px 100px rgba(0,0,0,.6);
  animation: paperIn .7s var(--ease-spring);
  transform: rotate(-.6deg);
}
@keyframes paperIn { from { transform: translateY(60vh) rotate(8deg); opacity: 0; } }
.paper.out { animation: paperOut .45s ease-in forwards; }
@keyframes paperOut { to { transform: translateY(-40vh) rotate(-10deg) scale(.9); opacity: 0; } }
.paper-body {
  max-height: 86vh; overflow-y: auto; padding: 56px clamp(22px, 6vw, 60px) 50px 76px;
  background-image:
    linear-gradient(90deg, transparent 54px, rgba(232, 60, 90, .35) 54px, rgba(232, 60, 90, .35) 56px, transparent 56px),
    linear-gradient(rgba(70, 120, 200, .16) 1px, transparent 1px);
  background-size: 100% 100%, 100% 28px;
  line-height: 28px; font-size: 17px;
  overscroll-behavior: contain;
}
.paper-body h3 { font-size: 2rem; line-height: 1.1; margin: 0 0 4px; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.paper-body .meta { font-family: var(--mono); font-size: 12px; color: #6b5a2c; margin: 0 0 28px; }
.paper-body p { margin: 0 0 28px; }
.paper-body ul { margin: 0 0 28px; padding-left: 1.1em; }
.paper-body figure { margin: 0 0 28px; }
.paper-body figure .ph {
  aspect-ratio: 16/9; border-radius: 6px; display: grid; place-items: center; text-align: center; padding: 10px;
  background: repeating-linear-gradient(45deg, #e7efe2 0 12px, #dfe9d9 12px 24px); border: 2px dashed #9bb59a;
  font-family: var(--mono); font-size: 12px; color: #4d6b4f; line-height: 1.4;
}
.paper-body figure img, .paper-body figure video, .paper-body figure iframe { width: 100%; border-radius: 6px; display: block; border: 0; aspect-ratio: 16/9; }
.paper-body figcaption { font-family: var(--hand); font-size: 20px; color: #5b4a20; }
.paper-body .stamp {
  display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .2em;
  color: #c2304f; border: 3px solid #c2304f; padding: 2px 10px; border-radius: 4px;
  transform: rotate(-8deg); opacity: .8; margin: 0 0 20px; cursor: pointer; user-select: none;
}
.paper-body .stamp:active { transform: rotate(-8deg) scale(.9); }
.paper-body .todo { background: #fff2b3; padding: 0 4px; font-family: var(--mono); font-size: 12px; }
.paper-close {
  position: absolute; z-index: 2; top: 10px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: #1d2a21; color: var(--paper); font-size: 22px; cursor: pointer; line-height: 1;
}
.paper-clip {
  position: absolute; z-index: 2; top: -18px; left: 40px; width: 26px; height: 64px;
  border: 4px solid #a9b2ae; border-radius: 14px; border-bottom-color: transparent;
}

/* ---------------- do not press ---------------- */
#danger { align-items: center; text-align: center; }
.dnp-wrap { position: relative; display: grid; place-items: center; width: 300px; height: 300px; }
.caution {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(#ffcc33 0 10deg, #161616 10deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%);
  animation: spin 30s linear infinite;
}
.dnp {
  position: relative; width: 170px; height: 170px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #d1102a 55%, #8a0618);
  box-shadow: 0 14px 0 #5c0410, 0 24px 40px rgba(0,0,0,.6), inset 0 -8px 20px rgba(0,0,0,.35), inset 0 6px 14px rgba(255,255,255,.35);
  color: #fff; font-family: var(--mono); font-weight: 500; font-size: 18px; letter-spacing: .14em; line-height: 1.3;
  transition: transform .12s, box-shadow .12s;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.dnp:hover { animation: tempt 1.2s ease-in-out infinite; }
@keyframes tempt { 50% { transform: scale(1.04); } }
.dnp:active { transform: translateY(12px); box-shadow: 0 2px 0 #5c0410, 0 6px 14px rgba(0,0,0,.6), inset 0 -6px 16px rgba(0,0,0,.35); animation: none; }
.dnp-note { color: var(--ink-dim); position: absolute; bottom: -54px; width: 340px; }

/* ---------------- room + door ---------------- */
.room {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(1, 6, 3, .85); padding: 16px;
  animation: fadein .4s ease;
}
.room[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.doorframe {
  position: relative; width: min(760px, 100%); height: min(560px, 82vh);
  border: 16px solid #5a3b22; border-bottom: 0; border-radius: 8px 8px 0 0;
  box-shadow: 0 0 0 4px #2d1c0f, 0 40px 120px rgba(0,0,0,.8);
  perspective: 1600px; background: #f6e7c4;
}
.room-inside {
  position: absolute; inset: 0; overflow: hidden;
  background:
    linear-gradient(#f6e7c4 0 68%, #c9925c 68% 100%);
  display: flex; flex-direction: column;
}
.room-inside::before { /* wallpaper: tiny geometric flowers */
  content: ''; position: absolute; inset: 0 0 32% 0; opacity: .25;
  background-image: radial-gradient(circle at 10px 10px, #e88b9f 3px, transparent 4px), radial-gradient(circle at 30px 30px, #4f8f5a 3px, transparent 4px);
  background-size: 40px 40px;
}
.rant-stage { position: relative; flex: 1; }
.toon { position: absolute; bottom: 14%; width: 30%; max-width: 210px; }
.toon.me { left: 6%; }
.toon.bot { right: 6%; width: 24%; max-width: 160px; }
.toon svg { width: 100%; height: auto; display: block; overflow: visible; }
.toon.talking .mouth-talk { animation: talk .18s steps(2) infinite; }
@keyframes talk { 50% { transform: scaleY(.25); } }
.toon .mouth-talk { transform-box: fill-box; transform-origin: center; }
.toon.bot .antenna-light { animation: blink 1.4s infinite; }
@keyframes blink { 50% { fill: #ffd34d; } }
.toon.bot.beep .antenna-light { fill: #ff3355; animation: none; }
.toon.bot.beep { animation: hop .35s ease 2; }
.toon.me.flail { animation: flail .5s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-14px); } }
@keyframes flail { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.speech {
  position: absolute; left: 8%; right: 8%; top: 6%;
  background: #fff; color: #1a1a1a; border: 3px solid #1a1a1a; border-radius: 22px;
  padding: 16px 20px 26px; font-family: var(--display); font-size: clamp(15px, 2.1vw, 19px); line-height: 1.4;
  box-shadow: 6px 6px 0 #1a1a1a; min-height: 90px;
}
.speech p { margin: 0; }
.speech .who { position: absolute; right: 16px; bottom: 6px; color: #888; font-size: 11px; }
.speech.bot-says { background: #e7f7ff; border-color: #134; }
.rant-controls { position: relative; display: flex; justify-content: center; gap: 10px; padding: 12px; background: #b07a46; }
.btn { border: 2px solid #1a1a1a; background: #ffcc33; color: #1a1a1a; font-family: var(--mono); font-size: 14px; padding: 8px 16px; border-radius: 10px; cursor: pointer; box-shadow: 3px 3px 0 #1a1a1a; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a1a1a; }
.btn.ghost { background: #f6e7c4; }
.door {
  position: absolute; inset: 0; z-index: 5;
  background:
    linear-gradient(90deg, rgba(0,0,0,.15), transparent 6%, transparent 94%, rgba(0,0,0,.2)),
    repeating-linear-gradient(90deg, #7a4f2c 0 60px, #6e4627 60px 62px);
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(.5, 0, .2, 1);
  box-shadow: inset 0 0 0 10px rgba(0,0,0,.12);
  display: grid; place-items: center;
}
.door .knob { position: absolute; right: 7%; top: 52%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a8, #b8862e); box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.door .sign { background: #f3ecd8; color: #a3122a; font-family: var(--mono); font-weight: 500; padding: 10px 18px; border: 3px solid #a3122a; transform: rotate(-4deg); text-align: center; line-height: 1.3; }
.door .sign small { color: #2f5d3a; font-size: 11px; }
.room.open .door { transform: rotateY(-108deg); }

/* ---------------- contact ---------------- */
#contact { align-items: center; text-align: center; }
.links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 2.4rem 0 5rem; }
.link-pill {
  text-decoration: none; color: var(--ink); padding: .8rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--card-line); background: var(--card);
  font-family: var(--mono); font-size: 14px;
  transition: background .3s, color .3s, transform .4s var(--ease-spring) !important;
}
.link-pill:hover { background: var(--lime); color: #0d220f; transform: translateY(-4px) rotate(-2deg); }
footer { color: var(--ink-dim); font-size: 15px; }
footer .tiny { font-size: 11px; opacity: .7; }

/* ---------------- red panda ---------------- */
.panda {
  position: fixed; left: 0; top: 0; z-index: 50;
  width: 72px; height: 60px;
  transform: translate3d(-200px, -200px, 0);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.panda svg { width: 100%; height: 100%; overflow: visible; display: block; transition: transform .25s; }
.panda.left svg { transform: scaleX(-1); }
.panda .legs-a, .panda .legs-b { transform-box: fill-box; transform-origin: top center; }
.panda.walking .legs-a { animation: stepA .32s ease-in-out infinite; }
.panda.walking .legs-b { animation: stepA .32s ease-in-out infinite reverse; }
@keyframes stepA { 0%,100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
.panda.walking .body-bob { animation: bob .32s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }
.panda .tail { transform-box: fill-box; transform-origin: right center; animation: swish 2.4s ease-in-out infinite; }
@keyframes swish { 50% { transform: rotate(-14deg); } }
.panda .happy, .panda .zz { opacity: 0; }
.panda.petted .happy { opacity: 1; }
.panda.petted .eyes-open { opacity: 0; }
.panda.petted .head { animation: nuzzle .5s ease-in-out 2; transform-box: fill-box; transform-origin: bottom center; }
@keyframes nuzzle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.panda.sleepy .eyes-open { opacity: 0; }
.panda.sleepy .eyes-closed { opacity: 1; }
.panda .eyes-closed { opacity: 0; }
.panda.sleepy .zz { opacity: 1; animation: zz 2s ease-in-out infinite; }
@keyframes zz { 50% { transform: translate(4px, -6px); } }
.heart {
  position: fixed; z-index: 51; pointer-events: none; font-size: 18px;
  animation: heart 1.1s ease-out forwards;
}
@keyframes heart { to { transform: translate(var(--dx), -70px) scale(1.4) rotate(var(--rot)); opacity: 0; } }

/* ---------------- toast ---------------- */
.toast {
  position: fixed; left: 50%; top: 20px; z-index: 90;
  transform: translate(-50%, -150%);
  background: var(--paper); color: #13261a; padding: .7rem 1.1rem; border-radius: 14px;
  font-family: var(--mono); font-size: 13px; box-shadow: 0 20px 40px rgba(0,0,0,.4);
  transition: transform .5s var(--ease-spring); max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

/* whimsy mode (type "whimsy") */
body.wobble main .panel > * { animation: wobble 2.4s ease-in-out infinite; }
body.wobble main .panel > *:nth-child(2n) { animation-delay: -1.2s; }
@keyframes wobble { 25% { transform: rotate(-1.2deg) translateY(-3px); } 75% { transform: rotate(1.2deg) translateY(3px); } }

/* ---------------- responsive ---------------- */
@media (max-width: 820px) {
  .about-grid, .listen-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .now-playing { flex-direction: column; text-align: center; }
  .np-status { justify-content: center; }
  .headshot .bubble { left: 50%; top: -34%; transform-origin: bottom center; translate: -50% 0; font-size: 21px; }
  .dnp-wrap { width: 250px; height: 250px; }
  .dnp { width: 140px; height: 140px; font-size: 15px; }
  .panda { width: 58px; height: 48px; }
}

/* ---------------- mini Alec (walks out when you pet Pickles) ---------------- */
.mini-me { position: fixed; left: 0; bottom: 0; z-index: 55; pointer-events: none; }
.mini-me svg { width: 100%; height: auto; display: block; overflow: visible; }
.mini-me.face-left svg { transform: scaleX(-1); }
.mini-me .leg-l, .mini-me .leg-r, .toon .leg-l, .toon .leg-r { transform-box: fill-box; transform-origin: top center; }
.mini-me.walking .leg-l { animation: stepA .36s ease-in-out infinite; }
.mini-me.walking .leg-r { animation: stepA .36s ease-in-out infinite reverse; }
.mini-me.walking svg { animation: bob .36s ease-in-out infinite; }
.mini-me .arm-wave, .toon .arm-wave { transform-box: fill-box; transform-origin: bottom right; }
.mini-me.talking .arm-wave { animation: wave .5s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.mini-me.talking .mouth-talk { animation: talk .18s steps(2) 10; transform-box: fill-box; transform-origin: center; }
.mini-bubble {
  position: absolute; bottom: calc(100% + 10px); pointer-events: auto; cursor: pointer;
  background: var(--paper); color: #13261a; border: 3px solid #1a1a1a; border-radius: 18px;
  box-shadow: 5px 5px 0 #1a1a1a; padding: 12px 14px; font-size: 15px; line-height: 1.35;
  opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .3s, transform .4s var(--ease-spring);
}
.mini-me.talking .mini-bubble { opacity: 1; transform: none; }
.mini-bubble strong { display: block; font-family: var(--hand); font-size: 22px; color: #c2304f; line-height: 1.1; margin-bottom: 4px; }
.np-follow { display: inline-block; margin-top: 12px; color: var(--lime); text-decoration: none; }
.np-follow:hover { text-decoration: underline; }

/* blurred album art behind the vinyl */
.now-playing { position: relative; overflow: hidden; isolation: isolate; }
.np-bg {
  position: absolute; inset: -20%; z-index: -1;
  background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.4); transform: scale(1.1);
  opacity: 0; transition: opacity 1.2s, background-image 1s;
}
.np-bg.on { opacity: .85; }
.np-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(5, 18, 11, .45), rgba(5, 18, 11, .1)); }
.now-playing .vinyl { width: 180px; height: 180px; }
.now-playing .vinyl img { width: 62%; height: 62%; }
.now-playing .vinyl::before { width: 62%; height: 62%; }
.tops-title { margin: 0; font-weight: 400; font-size: 1.5rem; }
.tops .tops-sub { margin-top: 4px; }
.quip { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--pink); background: rgba(0, 0, 0, .28); border-radius: 0 12px 12px 0; }
.quip blockquote { margin: 0; font-style: italic; font-size: 1.05rem; line-height: 1.35; }
.quip figcaption { color: var(--pink); margin-top: 6px; }
.quip.pop { animation: popin .6s var(--ease-spring); }
.tops-list.compact li { padding: 6px 4px; }
.tops-list.compact .t { font-size: .95rem; }
.tops-rule { border: 0; border-top: 1px solid var(--card-line); margin: 22px 0 18px; }
/* the player stays in view while you read the lists beside it */
.listen-grid { align-items: start; }
@media (min-width: 821px) { .now-playing { position: sticky; top: 14vh; min-height: 340px; } }

/* ---------------- current ventures (hero) ---------------- */
.ventures { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 1.1rem; }
.venture {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  width: min(340px, 100%); padding: 14px 18px 15px; border-radius: 18px;
  text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--card-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .45s var(--ease-spring), background .3s, border-color .3s, box-shadow .3s !important;
}
.venture:hover { transform: translateY(-5px) rotate(-1.2deg); border-color: var(--lime); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
.venture .v-role { color: var(--lime); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; }
.venture .v-name { font-size: 1.45rem; font-weight: 600; line-height: 1.15; margin: 3px 0 2px; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.venture .v-desc { color: var(--ink-dim); font-size: .9rem; line-height: 1.3; }
.venture.primary { background: linear-gradient(135deg, var(--pink), #ff9a6b); border-color: transparent; color: #2a0b14; }
.venture.primary .v-role { color: #5a1024; }
.venture.primary .v-desc { color: #4a1424; }
.venture.primary:hover { transform: translateY(-5px) rotate(1.2deg); box-shadow: 0 18px 44px -14px rgba(255, 122, 168, .55); }
#hero .tagline { margin-bottom: 0; }
@media (max-width: 640px) { .venture { width: 100%; } .ventures { margin-top: 1.2rem; } }