/* groovytime.xyz: LOUD and fun (item 28). Hot pink, tangerine, sunflower and teal on cream, plum ink.
   Shrikhand (SIL OFL, self-hosted, Latin subset) for the name and headings. Big shapes, a sunburst crown, 70s stripes,
   tilted photo stickers and a spinning record; all motion stops under prefers-reduced-motion. */
@font-face{font-family:"Shrikhand GV";src:url("/jukebox/gv-shrikhand.woff2") format("woff2");font-display:swap}
:root{--plum:#2a0b3d;--cream:#fff4dc;--pink:#d1006f;--pink-hot:#ff2d95;--tang:#ff6b00;--sun:#ffc82e;--teal:#00b3a7;--grape:#7a1fa2}
*,*::before,*::after{box-sizing:border-box}
html{font-size:18px}
body.gv-paper{margin:0;background:var(--cream);color:var(--plum);font-family:"Avenir Next","Trebuchet MS","Segoe UI",system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,h3{font-family:"Shrikhand GV","Cooper Black",Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);margin:0 0 18px;color:var(--pink);text-shadow:4px 4px 0 var(--sun),8px 8px 0 var(--plum)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 14px;color:var(--plum)}
h3{font-size:1.35rem}
a{color:var(--pink);font-weight:700;text-decoration-thickness:3px;text-underline-offset:4px}
a:hover{color:var(--grape)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid var(--grape);outline-offset:3px}
.gv-jump{position:absolute;left:-999em}.gv-jump:focus{left:18px;top:18px;background:var(--cream);padding:9px;z-index:5}

/* the crown: a pink-and-tangerine sunburst with the logo dead centre */
.gv-crown{position:relative;text-align:center;padding:40px 18px 30px;color:var(--plum);
  background:repeating-conic-gradient(from 0deg at 50% 115%,var(--pink-hot) 0deg 9deg,var(--tang) 9deg 18deg,var(--sun) 18deg 27deg)}
.gv-wordmark{margin:0 auto;max-width:600px}.gv-wordmark a{display:inline-block;text-decoration:none;background:var(--cream);border:5px solid var(--plum);border-radius:999px;padding:8px 26px 6px 12px;box-shadow:8px 8px 0 var(--plum)}
.gv-logo{display:block;width:100%;max-width:520px;height:auto}
.gv-logo-word{font-family:"Shrikhand GV","Cooper Black",Georgia,serif;font-size:62px}
.gv-logo-back{fill:var(--plum)}.gv-logo-mid{fill:var(--tang)}.gv-logo-top{fill:var(--pink)}
.gv-logo-disc{transform-origin:60px 60px;animation:gv-spin 5s linear infinite}
@keyframes gv-spin{to{transform:rotate(360deg)}}
.gv-motto{display:inline-block;margin:22px auto 0;background:var(--plum);color:var(--cream);font-weight:700;padding:6px 18px;border-radius:999px;transform:rotate(-1.5deg)}
.gv-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 0}
.gv-pills a{display:inline-block;padding:8px 20px;border-radius:999px;border:4px solid var(--plum);background:var(--cream);color:var(--plum);text-decoration:none;box-shadow:4px 4px 0 var(--plum);transition:transform .15s}
.gv-pills a:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:6px 6px 0 var(--plum);color:var(--plum)}
.gv-pills a[aria-current="page"]{background:var(--teal);color:var(--plum)}
.gv-stripes{height:42px;background:linear-gradient(var(--sun) 0 25%,var(--tang) 25% 50%,var(--pink) 50% 75%,var(--grape) 75%)}
.gv-galley{margin:0;text-align:center;background:var(--plum);color:var(--sun);padding:6px;font-weight:700;letter-spacing:.04em}

.gv-spine{max-width:68rem;margin:0 auto;padding:44px 22px 60px}
.gv-spine p,.gv-spine li{max-width:64ch}
.gv-standfirst{font-size:1.25rem}
.gv-sash{display:inline-block;background:var(--sun);border:4px solid var(--plum);padding:10px 22px;border-radius:18px;font-weight:800;font-size:1.1rem;transform:rotate(-2deg);box-shadow:6px 6px 0 var(--pink)}

/* the hero: words left, a giant record right */
.gv-lead-in{display:grid;gap:30px;align-items:center}
@media (min-width:56rem){.gv-lead-in{grid-template-columns:1.15fr .85fr}}
.gv-lead-disc .gv-sticker{transform:none;background:none;border:0;box-shadow:none;padding:0}
.gv-tilt-round img{aspect-ratio:1;object-fit:cover;border-radius:50%;border:12px solid var(--plum);box-shadow:0 0 0 10px var(--sun),0 0 0 20px var(--pink),14px 18px 0 20px var(--tang)}
.gv-tilt-round .gv-sticker-tag{text-align:center;margin-top:34px}

/* photo stickers */
.gv-sticker{margin:0;background:#fff;border:4px solid var(--plum);padding:12px 12px 8px;box-shadow:8px 8px 0 var(--plum);transition:transform .2s}
.gv-sticker img{display:block;width:100%;height:auto}
.gv-sticker-tag{margin:10px 0 0;font-weight:800;font-size:.95rem;line-height:1.35}
.gv-sticker-tag small{display:block;font-weight:500;font-size:.75rem;margin-top:3px}
.gv-sticker-row{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:60px 0 30px;align-items:start}
.gv-sticker-row .gv-sticker img{aspect-ratio:4/3;object-fit:cover}
.gv-tilt-left{transform:rotate(-3deg)}.gv-tilt-right{transform:rotate(2.5deg) translateY(16px)}.gv-tilt-left2{transform:rotate(-1.5deg)}
.gv-sticker-row .gv-sticker:hover{transform:rotate(0) scale(1.03)}
.gv-sticker-row .gv-sticker:nth-child(1){background:var(--sun)}.gv-sticker-row .gv-sticker:nth-child(2){background:var(--teal)}.gv-sticker-row .gv-sticker:nth-child(3){background:#ffb3d6}

/* big colour blocks */
.gv-gadget,.gv-list-box,.gv-sleeve,.gv-later{position:relative;margin:46px 0;padding:34px 30px;border:5px solid var(--plum);border-radius:34px;box-shadow:10px 10px 0 var(--plum)}
.gv-gadget{background:var(--teal)}
.gv-gadget a,.gv-list-box a{color:var(--plum)}
.gv-list-box{background:var(--sun);border-radius:34px 120px 34px 34px}
.gv-sleeve{background:#fff}
.gv-later{background:#ffd9ea}
.gv-perks{list-style:none;padding:0;counter-reset:gv}
.gv-perks li{counter-increment:gv;position:relative;padding:10px 0 10px 64px;font-weight:700;font-size:1.08rem}
.gv-perks li::before{content:counter(gv);position:absolute;left:0;top:4px;width:46px;height:46px;border-radius:50%;background:var(--pink);color:#fff;font:1.4rem/46px "Shrikhand GV",Georgia,serif;text-align:center;border:3px solid var(--plum)}
.gv-dl-notes{margin:0 0 18px}
.gv-dl-notes dt{font-weight:800;margin:18px 0 0}.gv-dl-notes dd{margin:0 0 9px;font-size:.88rem}
.gv-sleeve .gv-dl-notes dt{background:var(--cream);border:3px solid var(--plum);border-bottom:0;border-radius:18px 18px 0 0;padding:14px 16px 6px}
.gv-sleeve .gv-dl-notes dd{background:var(--cream);border:3px solid var(--plum);border-top:0;border-radius:0 0 18px 18px;padding:0 16px 12px;margin:0}
.gv-sleeve .gv-dl-notes dt:nth-of-type(3n+2),.gv-sleeve .gv-dl-notes dt:nth-of-type(3n+2)+dd{background:#d8fbf7}.gv-sleeve .gv-dl-notes dt:nth-of-type(3n),.gv-sleeve .gv-dl-notes dt:nth-of-type(3n)+dd{background:#ffe9c2}
.gv-quizlist>li{margin-bottom:27px}.gv-ask{font-weight:800}
.gv-hush{font-style:italic}
.gv-pending-note{border:3px dashed var(--pink);padding:9px}
.gv-dial{background:var(--cream);border:4px solid var(--plum);border-radius:24px;padding:24px;box-shadow:8px 8px 0 var(--tang);max-width:36rem}
.gv-dial label{display:block;font-weight:800}.gv-dial input{font:inherit;font-size:1.2rem;padding:8px 10px;width:9ch;border:3px solid var(--plum);border-radius:12px}
button{font:inherit;font-weight:800;padding:10px 24px;border-radius:999px;border:4px solid var(--plum);background:var(--pink);color:#fff;cursor:pointer;box-shadow:4px 4px 0 var(--plum)}
button:hover{background:var(--grape)}
.gv-readout{font-size:1.4rem;font-weight:800;min-height:1.5em}
.gv-turnover summary{cursor:pointer;color:var(--pink);font-weight:800}
.gv-credits{margin-top:40px;background:#fff;border:4px solid var(--plum);border-radius:24px;padding:24px}
.gv-credits li{margin-bottom:12px}.gv-url{overflow-wrap:anywhere;font-size:.85rem}
.gv-policy{max-width:70ch}

.gv-colophon{position:relative;background:var(--plum);color:var(--cream);text-align:center;padding:60px 18px 36px;font-size:.92rem}
.gv-colophon::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:linear-gradient(var(--sun) 0 33%,var(--tang) 33% 66%,var(--pink) 66%)}
.gv-colophon a{color:var(--sun)}
.gv-smallprint{max-width:62ch;margin:18px auto 0}
@media (prefers-reduced-motion:reduce){.gv-logo-disc{animation:none}.gv-pills a,.gv-sticker{transition:none}}
.gv-page-snap{max-width:17rem;margin:0 0 30px}
@media (min-width:56rem){.gv-page-snap{float:right;margin:0 0 30px 40px}}
@media (max-width:40rem){.gv-tilt-round img{border-width:8px;box-shadow:0 0 0 6px var(--sun),0 0 0 12px var(--pink),8px 10px 0 12px var(--tang)}.gv-lead-disc{padding:0 18px}}
/* item 29: small screens get a lighter Shrikhand: one thin offset instead of the double drop, a touch smaller, a little more air. */
@media (max-width:40rem){h1{font-size:2.15rem;line-height:1.14;letter-spacing:.025em;word-spacing:.08em;text-shadow:2px 2px 0 var(--sun)}h2{font-size:1.6rem;letter-spacing:.02em;word-spacing:.06em}}
.gv-credits li{overflow-wrap:anywhere}.gv-sticker-tag small a{color:var(--plum);font-weight:700} /* item 29: wrap long addresses; credit links in plum for contrast on every sticker colour */
.gv-sleeve .gv-dl-notes dd a{color:#a3004f} /* item 29: AA on every fact-card tint */