/* ===== It Snows In Australia — shared styles ===== */
:root { --ink:#0a0a0a; --paper:#f2f2f0; --grey:#8a8a88; --accent:#e8381a; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:#fff; overflow-x:hidden; }
body { background:var(--paper); color:var(--ink); border-radius:2.5rem 2.5rem 0 0; font-family:"Arial Black","Helvetica Neue",Impact,sans-serif; margin:1.5rem; overflow-x:clip; min-height:calc(100vh - 3rem); position:relative; display:flex; flex-direction:column; }

/* raw grain over everything */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main { position:relative; flex:1; padding:4vw; }

a { color:inherit; text-decoration:none; border-bottom:2px solid var(--ink); }
a:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }

.mono { font:700 .75rem/1 "Courier New",monospace; letter-spacing:.2em; text-transform:uppercase; }

/* ---------- decoration ---------- */
.sun {
  position:absolute; right:-12vw; top:6vh; width:62vw; height:62vw; max-width:900px; max-height:900px;
  pointer-events:none;
}
.sun .roo { position:absolute; left:50%; top:50%; height:65%; width:auto; transform:translate(-50%,-50%) scaleX(-1); fill:var(--accent); stroke:none; z-index:1; }
.sun .snow-canvas {
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.sun.small { width:34vw; height:34vw; max-width:480px; max-height:480px; top:2vh; right:3vw; }
.sun.small .roo { z-index:3; }
.dot { position:absolute; left:8vw; top:58vh; width:9vw; height:9vw; border-radius:50%; background:var(--accent); mix-blend-mode:multiply; }

/* ---------- header / nav ---------- */
.site-header {
  position:relative; z-index:3; display:flex; justify-content:flex-start; align-items:flex-end; gap:1rem 3rem; flex-wrap:wrap;
  background:var(--ink); color:var(--paper); padding:1.5rem 4vw 1.5rem;
  min-height:6.2rem; /* matches the two-row footer: 3.1rem padding + 2 × .75rem lines + 1.6rem gap */
  border-radius:2.5rem 2.5rem 0 0;
}
.site-header a { border-bottom:2px solid transparent; }
.site-header .brand { padding-bottom:.2rem; }
.site-header a.brand:hover { background:none; color:var(--accent); border-color:var(--accent); }
.site-header nav { display:flex; gap:1.6rem; flex-wrap:wrap; }
.site-header nav a { position:relative; margin-left:1.1em; padding-bottom:.2rem; border-color:var(--paper); }
.site-header nav a::before { content:"•"; position:absolute; left:-1.1em; }
.site-header nav a:hover { background:none; color:var(--accent); border-color:var(--accent); }
.site-header nav a[aria-current="page"] { border-color:var(--accent); }

/* ---------- hero (home) ---------- */
h1.hero { position:relative; z-index:2; font-weight:900; text-transform:uppercase; line-height:.78; letter-spacing:-.05em; margin:6vh 0 0 -.5vw; }
h1.hero span { display:block; font-size:clamp(5rem,27vw,30rem); }
h1.hero .l1 { margin-left:0; }
h1.hero .l2 { margin-left:14vw; color:transparent; -webkit-text-stroke:2px var(--ink); }
h1.hero .l3 { margin-left:3vw; color:var(--ink); position:relative; }
h1.hero .l3::after { content:"AUSTRALIA"; position:absolute; left:.04em; top:.05em; color:var(--accent); mix-blend-mode:multiply; z-index:-1; }

.blurb { position:relative; z-index:3; width:min(26rem,80vw); margin:24vh 0 0 52vw; font:400 1rem/1.5 "Courier New",monospace; }
.blurb b { background:var(--ink); color:var(--paper); padding:0 .3em; }

/* ---------- page title (inner pages) ---------- */
.page-head { position:relative; z-index:2; margin:8vh 0 6vh; }
.page-head .kicker { display:block; margin-bottom:1.2rem; color:var(--accent); }
h1.page-title, .section h2.page-title { font-weight:900; text-transform:uppercase; line-height:.82; letter-spacing:-.05em; font-size:clamp(3.5rem,15vw,15rem); }
.page-title .outline { color:var(--paper); -webkit-text-stroke:2px var(--ink); }
.page-head .lede { margin-top:2rem; width:min(34rem,90vw); font:400 1rem/1.5 "Courier New",monospace; }
.page-head .lede b { background:var(--ink); color:var(--paper); padding:0 .3em; }

/* ---------- sections ---------- */
.section { position:relative; z-index:3; border-top:6px solid var(--ink); padding-top:1.2rem; margin-top:6vh; }
.section > .section-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1.6rem; }
.section h2 { font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.9; font-size:clamp(1.8rem,5vw,3.6rem); }
.section p, .section li, .body-copy { font:400 1rem/1.55 "Courier New",monospace; }
.body-copy { max-width:40rem; }
.body-copy p + p { margin-top:1em; }

/* ---------- rows (tracks, downloads, lessons) ---------- */
.rows { list-style:none; border-top:2px solid var(--ink); }
.row { display:grid; grid-template-columns:3rem 1fr auto; gap:1rem 1.5rem; align-items:center; padding:1.1rem 0; border-bottom:2px solid var(--ink); }
.row .num { font:700 .75rem/1 "Courier New",monospace; letter-spacing:.2em; color:var(--grey); }
.row .title { font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.1rem,2.6vw,1.8rem); line-height:1; }
.row .meta { font:400 .8rem/1.4 "Courier New",monospace; color:var(--grey); margin-top:.4rem; text-transform:none; letter-spacing:0; }
.row { position:relative; }
.row .action { justify-self:end; }
/* stretched link: the action button's hit area covers the whole row */
.row .action::after { content:""; position:absolute; inset:0; }
.row:has(.action) { padding-inline:1rem; margin-inline:-1rem; }
.row:has(.action):hover { background:var(--accent); }
.row:has(.action):hover .num,
.row:has(.action):hover .title,
.row:has(.action):hover .meta { color:#fff; }
.row:has(.action):hover .action { background:#fff; border-color:#fff; color:var(--accent); }
.row audio { grid-column:2 / -1; width:100%; height:2.2rem; }
.row:hover .num { color:var(--accent); }

/* ---------- buttons / tags ---------- */
.btn { display:inline-block; font:700 .75rem/1 "Courier New",monospace; letter-spacing:.2em; text-transform:uppercase; padding:.8rem 1.1rem; background:var(--ink); color:var(--paper); border:2px solid var(--ink); }
.btn:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.btn.ghost { background:none; color:var(--ink); }
.btn.ghost:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.tag { display:inline-block; font:700 .65rem/1 "Courier New",monospace; letter-spacing:.2em; text-transform:uppercase; padding:.35rem .5rem; border:2px solid var(--ink); }
.tag.hot { background:var(--accent); border-color:var(--accent); color:var(--paper); }

/* ---------- card grid (releases, courses, products) ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:1.6rem; }
.card { --x:0; --y:0; cursor:pointer; display:flex; flex-direction:column; border:2px solid var(--ink); background:var(--paper); position:relative; z-index:1; transform:translate(var(--x),var(--y)); transition:transform .25s ease, box-shadow .25s ease; }
.card .art { aspect-ratio:1/1; background:radial-gradient(circle, var(--ink) 38%, transparent 40%) 0 0/10px 10px; border-bottom:2px solid var(--ink); position:relative; overflow:hidden; }
.card .art::after { content:""; position:absolute; width:38%; aspect-ratio:1; border-radius:50%; background:var(--accent); mix-blend-mode:multiply; left:50%; top:50%; transform:translate(-50%,-50%); }
.card .art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.card .body { padding:1rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card h3 { font-weight:900; text-transform:uppercase; letter-spacing:-.02em; line-height:.95; font-size:1.4rem; }
.card p { font:400 .85rem/1.45 "Courier New",monospace; }
.card .foot .actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.card .foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding-top:.6rem; }

/* band: full-width vertical section. Reusable on any page. */
.bands { display:flex; flex-direction:column; border-top:2px solid var(--ink); }
.band { position:relative; z-index:1; display:grid; grid-template-columns:minmax(6rem,1fr) 3fr; gap:1.6rem 3rem; padding:2.4rem 0; border-bottom:2px solid var(--ink); background:var(--paper); }
.band .tag { display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; }
.band .num { font-weight:900; font-size:clamp(2.4rem,7vw,5rem); line-height:.85; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:2px var(--ink); }
.band .art { width:100%; aspect-ratio:1/1; border:2px solid var(--ink); background:radial-gradient(circle, var(--ink) 38%, transparent 40%) 0 0/10px 10px; position:relative; overflow:hidden; }
.band .art::after { content:""; position:absolute; width:38%; aspect-ratio:1; border-radius:50%; background:var(--accent); mix-blend-mode:multiply; left:50%; top:50%; transform:translate(-50%,-50%); }
.band .status { border:2px solid var(--ink); padding:.35rem .6rem; }
.band .status.live { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.band .content { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.band h3 { font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.9; font-size:clamp(1.8rem,5vw,3.6rem); }
.band .lead { font:400 1.05rem/1.55 "Courier New",monospace; max-width:46rem; }
.band .points { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem 1.6rem; }
.band .points li { font:400 .85rem/1.45 "Courier New",monospace; border-top:2px solid var(--ink); padding-top:.6rem; }
.band .points li b { display:block; margin-bottom:.3rem; }
.band .foot { display:flex; gap:.4rem; flex-wrap:wrap; }
@media (max-width:700px) { .band { grid-template-columns:1fr; padding:1.6rem 0; } .band .tag { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%; } .band .art { max-width:14rem; } }

/* ---------- footer ---------- */
.site-footer {
  display:grid; grid-template-columns:1fr auto 1fr; row-gap:1.6rem; align-items:center;
  background:var(--ink); color:var(--paper); padding:1.5rem 4vw 1.6rem;
  border-radius:0 0 2.5rem 2.5rem; font:400 .75rem/1 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase;
  position:relative; z-index:3;
}
.site-footer .loc { justify-self:start; }
.site-footer .links { justify-self:center; }
.site-footer .credit { justify-self:end; }
.site-footer .copy { grid-column:1 / -1; }
.site-footer a { border-bottom:1px solid var(--paper); }
.site-footer a:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.site-footer .links i { font-style:normal; margin:0 .6em; }

/* ---------- responsive ---------- */
@media (max-width:640px) {
  .blurb { margin-left:0; }
  h1.hero .l2 { margin-left:6vw; }
  .row { grid-template-columns:2rem 1fr; }
  .row .action { grid-column:2; justify-self:start; }
  .site-footer { grid-template-columns:1fr; justify-items:start; row-gap:1rem; }
  .site-footer .links, .site-footer .credit { justify-self:start; }
}

/* ---------- release player (waveform scrubber) ---------- */
.btn.listen { transition:opacity .35s ease; }
.btn.listen.faded { opacity:0; pointer-events:none; }
.card .stack { display:grid; }
.card .stack > * { grid-area:1/1; }
.card .stack > p { transition:opacity .35s ease; }
.card .stack > p.dim { opacity:0; pointer-events:none; }
.card .player { display:flex; position:relative; z-index:1; flex-direction:column; gap:.5rem; align-self:start; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s; }
.card .player.in { opacity:1; visibility:visible; }
.card .player .row1 { display:flex; align-items:center; gap:.6rem; }
.card .player .ctrls { display:flex; gap:.4rem; }
.card .player .ctrls .btn { padding:.55rem .8rem; cursor:pointer; }
.card .player .ctrls .btn.on { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.card .player .wave { position:relative; flex:1; min-width:0; height:48px; cursor:pointer; border:2px solid var(--ink); touch-action:none; }
.card .player canvas { display:block; width:100%; height:100%; }
.card .player .time { flex:none; font:400 .7rem/1 "Courier New",monospace; }

/* audio cards: art stays square, so shrink the card by making it narrower and tightening the body */
.grid:has(.card[data-audio]) { grid-template-columns:repeat(auto-fill,minmax(13rem,15rem)); justify-content:center; }
.card[data-audio] .body { padding:.8rem; gap:.5rem; }
.card[data-audio] h3 { font-size:1.2rem; }
.card .foot .actions .btn.buy { flex-basis:100%; text-align:center; cursor:pointer; }
.buy-dialog { border:2px solid var(--ink); background:var(--paper); color:var(--ink); padding:1.5rem; max-width:24rem; }
.buy-dialog::backdrop { background:rgba(0,0,0,.5); }
.buy-dialog h3 { margin:0 0 .8rem; text-transform:uppercase; letter-spacing:.2em; }
.buy-dialog .btn { cursor:pointer; }

/* two-column staggered card grid (homepage) */
.grid.two { grid-template-columns:repeat(2,minmax(16rem,18rem)); justify-content:center; gap:0; padding-bottom:15rem; }
.grid.two .card:nth-child(1) { --x:calc(-15rem + 50%); }
.grid.two .card:nth-child(2) { --x:calc(-5rem - 50%); --y:calc(50% + 1rem); }
.grid.two .card:nth-child(3) { --x:calc(5rem + 50%); margin-top:2rem; }
.grid.two .card:nth-child(4) { --x:calc(15rem - 50%); --y:calc(50% + 1rem); margin-top:2rem; }
@media (max-width:640px) { .grid.two { grid-template-columns:1fr; padding-bottom:0; gap:1.6rem; } .grid.two .card { --x:0 !important; --y:0 !important; margin-top:0 !important; } }

/* rollover + idle cascade (all cards): cards pop to the front one after another (~300ms), then rest (~5s).
   js/cards.js adds .in-view to each .grid and sets --i on each card */
.card:hover, .card:focus-within { z-index:10; transform:translate(var(--x),var(--y)) scale(1.05); box-shadow:.6rem .6rem 0 var(--ink); }
@keyframes card-pop {
  0%, 2.703%, 100% { z-index:var(--rest-z,1); transform:var(--rest-t,translate(var(--x),var(--y))); box-shadow:var(--rest-s,0 0 0 var(--ink)); }
  .747%, 2.067% { z-index:var(--pop-z,10); transform:var(--pop-t,translate(var(--x),var(--y)) scale(1.05)); box-shadow:var(--pop-s,.6rem .6rem 0 var(--ink)); }
}
.grid.in-view .card { animation:card-pop 9.25s ease-in-out infinite; animation-delay:calc(var(--i,0) * .07s); }
/* hovering keeps the animation running (so its schedule never shifts); the rest frames just match the popped state */
.grid:has(.card:hover, .card:focus-within) .card { --pop-z:1; --pop-t:translate(var(--x),var(--y)); --pop-s:0 0 0 var(--ink); }
.grid .card.card.card:hover, .grid .card.card.card:focus-within { --rest-z:10; --rest-t:translate(var(--x),var(--y)) scale(1.05); --rest-s:.6rem .6rem 0 var(--ink); --pop-z:10; --pop-t:translate(var(--x),var(--y)) scale(1.05); --pop-s:.6rem .6rem 0 var(--ink); }
@media (prefers-reduced-motion:reduce) { .grid.in-view .card { animation:none !important; } }
.home-links { position:relative; z-index:3; margin-top:15vh; }
.home-links .card h3 a::after { content:""; position:absolute; inset:0; z-index:2; }

/* ---------- contact form ---------- */
.contact-form { display:grid; gap:1.4rem; max-width:40rem; }
.contact-form label { display:grid; gap:.5rem; }
.contact-form input, .contact-form textarea {
  font:400 1rem/1.4 "Courier New",monospace; color:var(--ink); background:var(--paper);
  border:2px solid var(--ink); border-radius:0; padding:.8rem; width:100%;
}
.contact-form textarea { min-height:10rem; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline:3px solid var(--accent); outline-offset:0; }
.contact-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form button.btn { cursor:pointer; justify-self:start; }
.contact-form button.btn:disabled { opacity:.35; cursor:not-allowed; }
.contact-form button.btn:disabled:hover { background:var(--ink); border-color:var(--ink); }
.form-status { font:700 .75rem/1.4 "Courier New",monospace; letter-spacing:.2em; text-transform:uppercase; min-height:1em; }
.form-status.ok { color:var(--ink); background:none; }
.form-status.err { color:var(--accent); }

/* ---------- abstract tactics ---------- */
.tactic { font:900 clamp(1.6rem,5vw,3.6rem)/1.05 "Arial Black","Helvetica Neue",Impact,sans-serif !important; text-transform:uppercase; letter-spacing:-.03em; max-width:48rem; margin-bottom:2rem; min-height:6em; }
.reshuffle { background:none; border:0; padding:0; color:inherit; cursor:pointer; }
.reshuffle:hover { color:var(--accent); }
.tactic-row { display:flex; align-items:flex-start; gap:2.5rem; flex-wrap:wrap; }
.tactic-row .tactic { margin-bottom:0; }
.next-arrow { background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.4rem; color:#000; }
.next-arrow { flex:none; position:relative; top:.375rem; left:calc(clamp(45px,7vw,85px) + .75rem); }
.next-arrow svg { width:clamp(90px,14vw,170px); height:auto; display:block; }
.next-arrow:hover { color:var(--accent); }
.section-head.end { justify-content:flex-end; }

/* ---------- theory tabs ---------- */
.tabs h3.sub { font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:1.2rem; margin:2rem 0 .8rem; }
.tabs pre.tab { font:700 .95rem/1.4 "Courier New",monospace; border:2px solid var(--ink); padding:1rem; overflow-x:auto; background:var(--paper); }

/* ---------- rhythmic transcription ---------- */
.section p.notes { font:400 clamp(2rem,6vw,4rem)/1.2 "Noto Music","Bravura Text","Segoe UI Symbol",serif; margin:1.5rem 0; min-height:1.2em; word-break:break-all; }
.controls { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.controls .btn { font-size:4.2rem; letter-spacing:0; min-width:7rem; }
button.btn { cursor:pointer; font-family:"Courier New",monospace; }
.result-line { color:var(--grey); margin-top:1rem; }
.score { margin-top:2rem; }

[hidden] { display:none !important; }

/* win: fireworks */
.fireworks { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:4; }
.fireworks .firework { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--accent); animation:fly-up 2s forwards, explode 1s forwards 1s; }
.fireworks .firework::before { content:''; position:absolute; top:0; left:50%; width:2px; height:100px; background:var(--ink); animation:rocket-trail 1s linear forwards; }
.firework-1 { top:100%; left:10%; animation-delay:0s; }
.firework-2 { top:100%; left:25%; animation-delay:.2s; }
.firework-3 { top:100%; left:40%; animation-delay:.4s; }
.firework-4 { top:100%; left:55%; animation-delay:.6s; }
.firework-5 { top:100%; left:70%; animation-delay:.8s; }
.firework-6 { top:100%; left:85%; animation-delay:1s; }
.firework-7 { top:90%; left:15%; animation-delay:1.2s; }
.firework-8 { top:90%; left:35%; animation-delay:1.3s; }
.firework-9 { top:90%; left:55%; animation-delay:1.4s; }
.firework-10 { top:90%; left:75%; animation-delay:1.6s; }
.firework-11 { top:100%; left:5%; animation-delay:1.1s; }
.firework-12 { top:100%; left:15%; animation-delay:1.75s; }
.firework-13 { top:100%; left:60%; animation-delay:1.9s; }
.firework-14 { top:100%; left:55%; animation-delay:1.65s; }
.firework-15 { top:100%; left:75%; animation-delay:1.8s; }
.firework-16 { top:100%; left:88%; animation-delay:2.2s; }
.firework-17 { top:90%; left:15%; animation-delay:2.3s; }
.firework-18 { top:90%; left:35%; animation-delay:2.35s; }
.firework-19 { top:85%; left:55%; animation-delay:2.45s; }
.firework-20 { top:70%; left:75%; animation-delay:2.7s; }

@keyframes fly-up { 0% { transform:translate(-50%,100%); } 100% { transform:translate(-50%,50%); } }
@keyframes explode {
  0% { opacity:1; transform:scale(1); }
  50% { opacity:.7; transform:scale(3); }
  100% { opacity:0; transform:scale(6) translateY(-200px); }
}
@keyframes rocket-trail { 0% { opacity:.5; transform:translateY(0); } 100% { opacity:0; transform:translateY(-1000px); } }

.section p#guess { font-size:clamp(3rem,9vw,6rem); }

/* standard music notation glyphs */
.controls .btn[data-symbol] { font-family:"Noto Music","Bravura Text","Segoe UI Symbol",serif; }

.controls #backspace-btn { font-family:"Segoe UI Symbol","Arial Unicode MS","DejaVu Sans",sans-serif; }

/* ===== cassette landing overlay ===== */
#landing { --b:#000; --w:#fff; position:fixed; inset:0; z-index:100; background:var(--b); color:var(--w); font:16px/1.4 "Courier New",monospace; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:16px; text-align:center; overflow:hidden; transition:opacity .5s ease; }
#landing.leaving { opacity:0; pointer-events:none; }
#landing[hidden] { display:none; }
#landing * { box-sizing:border-box; margin:0; }
#landing #snowCanvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#landing > *:not(canvas) { position:relative; z-index:1; }
#landing h1, #landing small { background:var(--b); padding:4px 10px; }
#landing h1 { font-size:14px; font-weight:normal; letter-spacing:.3em; text-transform:uppercase; }
#landing a { color:var(--w); border-bottom:0; }
#landing a:hover { background:none; color:var(--w); }
#landing small a { border-bottom:1px solid var(--w); cursor:pointer; }
#landing #tape { display:block; width:min(88vw,560px); height:auto; shape-rendering:crispEdges; }
#landing #tapeLink { display:block; border:0; }
#landing #tapeLink:focus-visible { outline:2px dashed var(--w); outline-offset:6px; }
#landing .spin { transform-box:fill-box; transform-origin:center; animation:spin 1.2s steps(12) infinite; }
#landing .spin.rev { animation-duration:1.6s; }
@keyframes spin { to { transform:rotate(360deg); } }
#landing #tapeLink:hover .spin { animation-duration:.5s; }
#landing .dl { display:inline-block; background:var(--b); border:3px solid var(--w); padding:10px 22px; text-decoration:none; text-transform:uppercase; letter-spacing:.2em; }
#landing .dl:hover, #landing .dl:focus-visible { background:var(--w); color:var(--b); outline:none; }
#landing small { font-size:12px; }
body.landing-open { overflow:hidden; height:100vh; }
html.skip-landing #landing { display:none; }
html.skip-landing body.landing-open { overflow-x:clip; overflow-y:visible; height:auto; }
@media (prefers-reduced-motion:reduce){ #landing .spin{animation:none} }

/* page change: quick blur in/out (js/transition.js) */
@keyframes page-blur-in { from { filter:blur(10px); opacity:0; } to { filter:blur(0); opacity:1; } }
html { animation:page-blur-in .125s ease-out; }
html.page-leaving { filter:blur(10px); opacity:0; transition:filter .125s ease-in, opacity .125s ease-in; }
@media (prefers-reduced-motion: reduce) { html { animation:none; } }