:root { --bg:#c9c1b0; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); }
#rain { position:fixed; inset:0; width:100%; height:100%; display:block; }
.logo { position:fixed; inset:0; margin:0; display:grid; place-items:center; pointer-events:none; }
#logo { display:block; }
#photos { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
#icons { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
#icons a { position:absolute; left:0; top:0; display:block; pointer-events:auto; will-change:transform; }
#icons svg { display:block; width:100%; height:100%; filter:url(#wob); overflow:visible; }
.logo { z-index:2; }
#stop { position:fixed; right:16px; bottom:16px; z-index:3; background:#1E1B1B; color:#fef8f0; border:0; border-radius:99px; padding:13px 20px; font:600 15px/1.2 "Helvetica Neue",system-ui,sans-serif; letter-spacing:.01em; cursor:pointer; box-shadow:0 4px 18px rgba(29,26,43,.35); transition:transform .15s,background .15s,color .15s; }
#stop:hover, #stop:focus-visible { background:#FF6B1A; color:#1E1B1B; transform:translateY(-2px); outline:none; }

/* all-links button + panel */
#links-backdrop { position:fixed; inset:0; z-index:4; background:rgba(29,26,43,.55); backdrop-filter:blur(3px); }
#links-panel { position:fixed; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-.6deg); width:min(92vw,470px); border-radius:26px; background:#fef8f0; color:#1E1B1B; border:3.5px solid #1E1B1B; box-shadow:7px 7px 0 #ff48b0, 14px 14px 0 #2D5BFF; font-family:"Helvetica Neue",system-ui,sans-serif; overflow:hidden; animation:crt-on .42s cubic-bezier(.2,.9,.3,1.2); }
#links-panel .links-scroll { max-height:86vh; overflow:auto; padding:22px 20px 20px; }
@keyframes crt-on { 0% { transform:translate(-50%,-50%) rotate(-.6deg) scale(1.04,.006); opacity:.9; } 45% { transform:translate(-50%,-50%) rotate(-.6deg) scale(1.02,.05); opacity:1; } 100% { transform:translate(-50%,-50%) rotate(-.6deg) scale(1,1); } }
#links-panel[hidden], #links-backdrop[hidden] { display:none; }
/* CRT look: scanlines + vignette over the card, and a slow light band rolling down (the barrel warp itself is an SVG filter set up in script.js) */
#links-panel::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; background:repeating-linear-gradient(0deg, rgba(30,27,27,0) 0, rgba(30,27,27,0) 2px, rgba(30,27,27,.07) 3px), radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(30,27,27,.17) 100%); mix-blend-mode:multiply; }
#links-panel::before { content:""; position:absolute; left:0; right:0; top:-30%; height:26%; z-index:4; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); animation:crt-roll 5.5s linear infinite; }
@keyframes crt-roll { from { transform:translateY(0); } to { transform:translateY(560%); } }
#links-panel h2 { margin:2px 28px 6px; line-height:0; }
#links-panel h2 svg { width:100%; height:auto; overflow:visible; }
#links-panel .grp { margin:0 0 4px; }
#links-panel h3 { display:inline-block; margin:16px 0 9px; padding:5px 12px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fef8f0; background:#1E1B1B; border-radius:99px; transform:rotate(-1.2deg); }
#links-panel .grp:nth-of-type(even) h3 { transform:rotate(1deg); }
#links-panel h4 { margin:14px 0 8px 2px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#1E1B1B; opacity:.7; }
#links-panel a { display:block; margin:0 0 9px; padding:13px 16px; border-radius:14px; border:2.5px solid #1E1B1B; color:inherit; text-decoration:none; font-weight:700; background:var(--c); box-shadow:3px 3px 0 #1E1B1B; transition:transform .12s, box-shadow .12s; }
#links-panel a small { display:block; margin-top:3px; font-size:.78rem; font-weight:500; opacity:.85; }
#links-panel a:nth-of-type(odd) { transform:rotate(-.5deg); }
#links-panel a:nth-of-type(even) { transform:rotate(.4deg); }
#links-panel .grp:nth-of-type(1) a { --c:#b9c8ff; }
#links-panel .grp:nth-of-type(2) a { --c:#dbf48c; }
#links-panel .grp:nth-of-type(3) a { --c:#ffc4e6; }
#links-panel a:hover, #links-panel a:focus-visible { transform:translate(-2px,-2px) rotate(0); box-shadow:5px 5px 0 #1E1B1B; outline:none; }
#links-close { position:absolute; right:12px; top:10px; z-index:6; width:38px; height:38px; border:2.5px solid #1E1B1B; background:#fef8f0; font-size:24px; line-height:1; color:#1E1B1B; cursor:pointer; border-radius:50%; }
#links-close:hover, #links-close:focus-visible { background:#ff48b0; outline:none; }
@media (prefers-reduced-motion: reduce) { #links-panel, #links-panel::before { animation:none; } }

/* falling "all links" buttons: hand-drawn rings that morph */
#icons .lk { position:absolute; left:0; top:0; padding:0; border:0; background:none; cursor:pointer; pointer-events:auto; will-change:transform; font-family:"Helvetica Neue",system-ui,sans-serif; color:#1E1B1B; }
#icons .lk svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:none; opacity:0; transition:opacity .28s ease-in-out; }
#icons .lk svg.on { opacity:1; }
#icons .lk span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 17%; text-align:center; font-weight:800; font-size:clamp(11px,2.9vw,15px); line-height:1.12; letter-spacing:.01em; pointer-events:none; }
#icons .lk:hover svg.on, #icons .lk:focus-visible svg.on { filter:drop-shadow(0 0 6px #ff48b0) drop-shadow(0 0 12px #2D5BFF); }
#icons .lk:focus-visible { outline:none; }

@media (max-width:480px) { #stop { max-width:60vw; font-size:13px; padding:12px 14px; } }

/* big FALSE START promo sticker: top right, behind the logo, links to the pre-save */
#promo { --s:min(52vw,27vh,280px); position:fixed; z-index:1; right:max(12px,2.5vw); top:max(12px,2vh); width:var(--s); height:var(--s); display:block; color:#1E1B1B; text-decoration:none; transform:rotate(-8deg); animation:promo-wobble 2.8s ease-in-out infinite; transition:filter .15s; }
#promo:hover, #promo:focus-visible { filter:drop-shadow(0 0 8px #ff48b0) drop-shadow(0 0 16px #2D5BFF); outline:none; animation-duration:1.4s; }
@keyframes promo-wobble { 0%,100% { transform:rotate(-9deg) scale(1); } 50% { transform:rotate(-5deg) scale(1.05); } }
.frozen #promo { animation-play-state:paused; }
#promo .promo-art { position:absolute; inset:0; }
#promo .promo-art svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:0; transition:opacity .25s ease-in-out; }
#promo .promo-art svg.on { opacity:1; }
#promo .promo-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
#promo b { font-family:"Helvetica Neue",system-ui,sans-serif; font-weight:900; font-size:calc(var(--s) * .2); line-height:.95; letter-spacing:.02em; text-transform:uppercase; color:#1E1B1B; }
#promo i { margin-top:calc(var(--s) * .05); padding:calc(var(--s) * .02) calc(var(--s) * .06); font-family:"Helvetica Neue",system-ui,sans-serif; font-style:normal; font-weight:800; font-size:calc(var(--s) * .08); letter-spacing:.04em; text-transform:uppercase; color:#fef8f0; background:#1E1B1B; border-radius:99px; transform:rotate(3deg); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { #promo { animation:none; } }

/* photos of Lorne: small, slightly faded, taped polaroids that drift down behind the logo (or, with #photobg, one faint background photo) */
.ph { position:absolute; left:0; top:0; pointer-events:auto; width:var(--pw); padding:6px 6px 24px; background:linear-gradient(160deg,#f1e5c8,#e6d6b4); border:2.5px solid #4a413b; border-radius:6px 9px 5px 8px / 8px 5px 9px 6px; box-shadow:5px 5px 0 rgba(255,72,176,.5), inset 0 0 14px rgba(110,80,40,.32); cursor:pointer; will-change:transform; opacity:.94; transition:opacity .6s linear; }
.ph:focus-visible { outline:3px solid #2D5BFF; outline-offset:3px; }
.ph .pic { position:relative; display:block; }
.ph img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border:1.5px solid rgba(74,65,59,.8); background:#cfc4aa; opacity:0; filter:blur(5px) sepia(.85) saturate(.15) contrast(.5) brightness(1.7); transition:filter .6s linear, opacity .4s ease-in; }
.ph img.ready { opacity:1; }
.ph .pic::after { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.5;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(90,60,25,.38) 100%),
             linear-gradient(115deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 46%),
             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .18  0 0 0 .7 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>"); }
.ph::before { content:""; position:absolute; top:-10px; left:50%; width:40%; height:15px; transform:translateX(-50%) rotate(-3deg); background:rgba(255,196,230,.78); border:2px solid rgba(74,65,59,.85); }
#bgphoto { display:none; }
.photobg #bgphoto { display:block; position:fixed; inset:0; z-index:0; background-size:cover; background-position:62% 40%; opacity:.22; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.15); }

/* photo viewer */
#pv { position:fixed; inset:0; z-index:6; display:grid; place-items:center; background:rgba(29,26,43,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
#pv[hidden] { display:none; }
#pv .pv-card { width:min(78vw,52vh); padding:12px 12px 56px; background:linear-gradient(160deg,#f1e5c8,#e6d6b4); border:3.5px solid #4a413b; border-radius:8px 12px 7px 11px / 11px 7px 12px 8px; box-shadow:8px 8px 0 rgba(255,72,176,.85), 16px 16px 0 rgba(45,91,255,.85); transform:rotate(-2.5deg); position:relative; }
#pv .pv-card.pop { animation:pv-pop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes pv-pop { from { transform:rotate(-9deg) scale(.55); opacity:.4; } }
#pv .pv-pic { display:block; position:relative; }
#pv img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border:2px solid rgba(74,65,59,.85); background:#cfc4aa; filter:blur(7px) sepia(.9) saturate(.2) contrast(.5) brightness(1.7); transition:filter 1.4s ease-out; }
#pv img.dev { filter:sepia(.14) saturate(.95) contrast(.98) brightness(1.02); }
#pv .pv-nav, #pv .pv-x { position:absolute; width:46px; height:46px; border:2.5px solid #1E1B1B; border-radius:50%; background:#fef8f0; color:#1E1B1B; font-size:30px; line-height:1; cursor:pointer; }
#pv .pv-nav { top:50%; margin-top:-23px; }
#pv .pv-prev { left:max(8px,calc(50% - min(78vw,52vh)/2 - 62px)); }
#pv .pv-next { right:max(8px,calc(50% - min(78vw,52vh)/2 - 62px)); }
#pv .pv-x { top:14px; right:14px; font-size:26px; }
#pv .pv-nav:hover, #pv .pv-x:hover, #pv .pv-nav:focus-visible, #pv .pv-x:focus-visible { background:#ff48b0; outline:none; }
@media (prefers-reduced-motion: reduce) { #pv .pv-card.pop { animation:none; } #pv img { transition:none; } }
#pv .pv-cap { position:absolute; left:18px; right:18px; bottom:12px; margin:0; display:flex; justify-content:space-between; align-items:baseline; font-family:"Marker Felt","Bradley Hand","Segoe Print","Comic Sans MS",cursive; color:#4a413b; }
#pv .pv-cap b { font-size:clamp(14px,3.9vw,20px); font-weight:700; letter-spacing:.01em; }
#pv .pv-cap i { font-size:clamp(12px,3.2vw,16px); font-style:normal; opacity:.8; }
#pv .pv-card.credit { padding-bottom:74px; }
#pv .pv-cap { flex-wrap:wrap; }
#pv .pv-cap small { flex-basis:100%; margin-top:2px; font-size:clamp(10px,2.6vw,13px); opacity:.75; }

/* two columns on wider screens: Social + More live together in a narrow side column, Music (the main thing) gets the big column */
@media (min-width:700px) {
  #links-panel { width:min(92vw,800px); }
  #links-panel .links-scroll { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); column-gap:26px; grid-template-rows:auto auto auto 1fr; align-content:start; align-items:start; padding:20px 24px 16px; }
  #links-panel h2 { grid-column:1 / -1; grid-row:1; margin:2px auto 2px; max-width:340px; width:100%; }
  #links-panel .grp:nth-of-type(1) { grid-column:1; grid-row:2; }
  #links-panel .grp:nth-of-type(3) { grid-column:1; grid-row:3; }
  #links-panel .grp:nth-of-type(2) { grid-column:2; grid-row:2 / span 3; }
  #links-panel .grp:nth-of-type(2) a { padding:9px 15px; font-size:1rem; margin-bottom:6px; }
  #links-panel .grp:nth-of-type(2) h4 { margin:8px 0 5px 2px; }
  #links-panel .grp:nth-of-type(2) h3 { margin:8px 0 7px; }
  #links-panel .links-scroll { max-height:94vh; }
  #links-panel .grp:nth-of-type(1) a, #links-panel .grp:nth-of-type(3) a { font-size:.92rem; }
}

/* the release promo at the top of the Music group in the modal */
#links-panel .grp a.promo-link.promo-link { --c:#FF6B1A; position:relative; padding:10px 15px 9px; margin-bottom:11px; box-shadow:3px 3px 0 #1E1B1B, 6px 6px 0 #ff48b0; transform:rotate(-.7deg); animation:promo-nudge 2.6s ease-in-out infinite; }
#links-panel a.promo-link span { display:block; font-weight:900; font-size:1.12rem; letter-spacing:.04em; text-transform:uppercase; }
#links-panel a.promo-link small { font-size:.8rem; font-weight:600; opacity:1; margin-top:1px; }
#links-panel a.promo-link em { position:absolute; top:-11px; right:12px; padding:3px 10px; font-style:normal; font-weight:800; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#fef8f0; background:#1E1B1B; border-radius:99px; transform:rotate(4deg); }
@keyframes promo-nudge { 0%,100% { transform:rotate(-.7deg) translateY(0); } 50% { transform:rotate(.5deg) translateY(-2px); } }
#links-panel a.promo-link:hover, #links-panel a.promo-link:focus-visible { animation:none; transform:translate(-2px,-2px) rotate(0); box-shadow:5px 5px 0 #1E1B1B, 8px 8px 0 #ff48b0; }
@media (prefers-reduced-motion: reduce) { #links-panel a.promo-link { animation:none; } }