/* accina.studio — glitchy, loud. No external resources. */

:root {
  --bg: #05040f;
  --surface: #0e0c1f;
  --line: #2c2747;
  --text: #f2ecff;
  --muted: #a89dbd;
  --red: #ff2a3c;
  --orange: #ff8a1f;
  --yellow: #ffe14a;
  --green: #3dff7a;
  --cyan: #2de2ff;
  --blue: #2b3bff;
  --magenta: #ff35d8;
  /* Hard-edged stripes, like a test card. */
  --stripes: linear-gradient(90deg, var(--red) 0 14.3%, var(--orange) 0 28.6%, var(--yellow) 0 42.9%, var(--green) 0 57.2%, var(--cyan) 0 71.5%, var(--blue) 0 85.8%, var(--magenta) 0);
  /* Misregistered print: red and cyan pulled apart. */
  --split: -0.06em 0 rgb(255 42 60 / 0.85), 0.06em 0 rgb(45 226 255 / 0.85);
  --mono: "Cascadia Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", Menlo, "Courier New", monospace;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 42rem;
  --player-h: 4.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* --bar-space is the measured height of the visible player bar (site.js);
   the fixed values are the fallback if the script has not run. */
body.has-player { padding-bottom: var(--bar-space, var(--player-h)); }
body.has-dock { padding-bottom: var(--bar-space, 6.5rem); }

/* Halftone dots and scanlines over everything, like a photocopied flyer. */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
body::before {
  background-image: radial-gradient(rgb(255 255 255 / 0.09) 0.6px, transparent 1.1px);
  background-size: 4px 4px;
}
body::after {
  background-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--green); }

:focus-visible { outline: 2px dashed var(--yellow); outline-offset: 3px; }
main:focus { outline: none; }

::selection { background: var(--green); color: var(--bg); }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 60;
  padding: 0.5rem 0.9rem;
  background: var(--yellow);
  color: var(--bg);
  text-decoration: none;
}
.skip:focus { top: 0.5rem; }

/* Room glow behind everything: warm lamp top right, cold screen bottom left. */
.aura {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vmax 45vmax at 88% -8%, rgb(255 138 31 / 0.30), transparent 70%),
    radial-gradient(55vmax 50vmax at 4% 105%, rgb(43 59 255 / 0.34), transparent 70%),
    radial-gradient(40vmax 35vmax at 60% 110%, rgb(255 53 216 / 0.20), transparent 70%);
  animation: flicker 9s steps(1) infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 0.86; }
  49% { opacity: 1; }
  82% { opacity: 0.92; }
  84% { opacity: 1; }
}
.is-loading .aura { opacity: 0.6; }

/* Far-off rain of glyphs, drawn by site.js. Kept faint on purpose. */
.rain { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0.5; }

/* ---------- banner ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding: 0.6rem var(--gutter);
  background: rgb(5 4 15 / 0.94);
  border-bottom: 4px solid;
  border-image: var(--stripes) 1;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-shadow: var(--split);
}
.wordmark img {
  width: auto;
  height: 3rem;
  transform: rotate(-2deg);
  box-shadow: -3px 0 0 rgb(255 42 60 / 0.8), 3px 0 0 rgb(45 226 255 / 0.8);
}
.wordmark:hover img { animation: jitter 0.35s steps(2) infinite; }
@keyframes jitter {
  0% { transform: rotate(-2deg) translate(0, 0); }
  25% { transform: rotate(-2deg) translate(-2px, 1px); }
  50% { transform: rotate(-1deg) translate(2px, -1px); }
  75% { transform: rotate(-3deg) translate(-1px, -1px); }
}

#nav { margin-left: auto; }
#nav ul { display: flex; flex-wrap: wrap; gap: 0.2rem 0.35rem; margin: 0; padding: 0; list-style: none; }
#nav a {
  display: block;
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px dashed transparent;
}
/* Each tab takes its colour from the stripe under the banner, in order. */
#nav li { --tab: var(--magenta); --tab-ink: var(--bg); }
#nav li:nth-child(7n+1) { --tab: var(--red); }
#nav li:nth-child(7n+2) { --tab: var(--orange); }
#nav li:nth-child(7n+3) { --tab: var(--yellow); }
#nav li:nth-child(7n+4) { --tab: var(--green); }
#nav li:nth-child(7n+5) { --tab: var(--cyan); }
#nav li:nth-child(7n+6) { --tab: var(--blue); --tab-ink: #fff; }
#nav li:nth-child(7n) { --tab: var(--magenta); }
#nav a:hover { border-color: var(--tab); color: var(--tab); text-shadow: var(--split); }
#nav li:nth-child(7n+6) a:hover { color: #8f9aff; }
#nav a:active, #nav a[aria-current] { background: var(--tab); color: var(--tab-ink); text-shadow: none; transform: rotate(-2deg); font-weight: 700; }

/* Round platform buttons. */
.socials { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.socials a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.socials svg { width: 1rem; height: 1rem; }
.socials a:hover, .socials a:focus-visible { background: var(--green); border-color: var(--green); color: var(--bg); }
.socials li:nth-child(3n+1) a:hover { background: var(--orange); border-color: var(--orange); }
.socials li:nth-child(3n+2) a:hover { background: var(--cyan); border-color: var(--cyan); }
.socials li a[aria-label="Resident Advisor"]:hover, .socials li a[aria-label="Resident Advisor"]:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- layout ---------- */

main {
  flex: 1;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) 4rem;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding: 1.25rem var(--gutter);
  border-top: 1px dashed var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.site-footer a { margin-left: auto; }

h1, h2, h3 { line-height: 1.15; text-transform: uppercase; letter-spacing: 0.12em; text-wrap: balance; }

.page-head { max-width: var(--measure); margin-bottom: clamp(1.75rem, 5vw, 3rem); }
.page-head h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 6.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: var(--split), 0 0 1.2em rgb(255 138 31 / 0.55);
}
.page-head p { margin: 0 0 0.75rem; color: var(--muted); }
.page-head p a { color: var(--text); }

.eyebrow, .hint { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--muted); }
.page-head .eyebrow { text-transform: uppercase; }

/* Rubber-stamp label. */
.stamp, .page-head .stamp {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.15rem 0.6rem;
  background: var(--green);
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.button {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  background: var(--text);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: -4px 4px 0 var(--red), 4px -4px 0 var(--cyan);
  transition: transform 0.1s, box-shadow 0.1s;
}
.button:hover, .button:focus-visible { transform: translate(-2px, 2px); box-shadow: -2px 2px 0 var(--red), 2px -2px 0 var(--cyan); background: var(--yellow); }

/* ---------- taped-up prints ---------- */

.print {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  box-shadow: -6px 0 0 rgb(255 42 60 / 0.75), 6px 0 0 rgb(45 226 255 / 0.75), 0 1.5rem 4rem rgb(0 0 0 / 0.6);
  transition: transform 0.2s ease;
}
.print img { width: 100%; background: var(--surface); }
/* A strip of tape. */
.print::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 50%;
  z-index: 1;
  width: 7rem;
  height: 1.7rem;
  margin-left: -3.5rem;
  background: rgb(255 225 74 / 0.72);
  transform: rotate(-3deg);
}
.print:hover, .print:focus-visible { transform: rotate(0deg) scale(1.01); }
.print-caption {
  position: absolute;
  left: -0.6rem;
  bottom: 1rem;
  padding: 0.2rem 0.7rem;
  background: var(--bg);
  border: 1px dashed var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: 1rem 0.5rem 2rem;
}
.wall .print { max-width: min(100%, 82vh); justify-self: center; transform: rotate(1.2deg); }
.wall .print:nth-child(2n) { transform: rotate(-1.6deg); margin-top: 2.5rem; }
.wall .print:nth-child(3n) { transform: rotate(0.6deg); }
.wall .print:nth-child(2n)::before { left: 22%; transform: rotate(5deg); background: rgb(61 255 122 / 0.6); }
.wall .print:hover, .wall .print:focus-visible { transform: rotate(0deg) scale(1.01); }

.piece img { max-height: 80vh; width: auto; margin-bottom: 2rem; }

/* ---------- front page ---------- */

main:has(.front) { max-width: 100rem; }

.front {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 8vw, 6rem);
  padding: 0.5rem 0.5rem 0;
}
.front .print-lead { max-width: min(100%, calc(100dvh - 9rem)); justify-self: end; transform: rotate(-1deg); }
.front .print-lead:hover { transform: rotate(0deg) scale(1.01); }
.front-side { position: relative; max-width: 30rem; }
.front-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0 0 1.25rem;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.6em;
  text-shadow: var(--split);
}
.front-logo img {
  width: min(100%, 26rem);
  transform: rotate(2deg);
  box-shadow: -5px 0 0 rgb(255 42 60 / 0.8), 5px 0 0 rgb(45 226 255 / 0.8);
}
/* accina <-> anicca */
.mirror {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.mirror > span:first-child { color: var(--green); text-shadow: var(--split); }
.mirror > span:nth-child(3) { color: var(--orange); text-shadow: var(--split); }
.mirror-arrow { color: var(--muted); letter-spacing: 0; animation: flip 6s steps(1) infinite; }
@keyframes flip { 50% { transform: scaleX(-1); } }
.mirror-gloss { flex-basis: 100%; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--muted); text-transform: none; }
.mirror-gloss [lang="pi"] { font-size: 1rem; letter-spacing: 0.05em; color: var(--yellow); }
.pali { font-style: italic; letter-spacing: 0.12em; }

/* The footer phrase is a quiet door to the hidden prayer page. */
a.pali { margin-left: 0; color: inherit; text-decoration: none; cursor: default; }
a.pali:hover, a.pali:focus-visible { color: var(--yellow); text-shadow: var(--split); }

/* ---------- hidden prayer page ---------- */

.prayer { max-width: 34rem; margin: 0 auto; padding-top: clamp(1rem, 6vw, 4rem); text-align: center; }
.prayer h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.3rem, 5vw, 2.2rem);
  letter-spacing: 0.2em;
  color: var(--yellow);
  text-shadow: var(--split), 0 0 1.2em rgb(255 138 31 / 0.6);
}
.prayer-gloss { margin: 0 0 3.5rem; font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.prayer p { margin: 0 0 1.25rem; line-height: 2; letter-spacing: 0.08em; }
.prayer p:has(em) { color: var(--muted); font-size: 0.9rem; }
.prayer hr { width: 5rem; height: 4px; margin: 3rem auto; border: 0; background: var(--stripes); }
.front-text { color: var(--muted); }
.front-text p { margin: 0 0 1.75rem; }

.release-card {
  position: relative;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 2px dashed var(--muted);
  background: rgb(5 4 15 / 0.7);
}
.release-card ol { margin: 0 0 1.25rem; padding-left: 2.2rem; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; }
.release-card li { padding: 0.2rem 0; text-shadow: 0 0 0.8em rgb(255 138 31 / 0.8); }
.release-card li::marker { color: var(--orange); }

/* The mascot, as a round sticker. */
.mascot {
  border-radius: 50%;
  border: 4px solid var(--text);
  box-shadow: -5px 0 0 var(--magenta), 5px 0 0 var(--green);
}
.mascot-front {
  position: absolute;
  right: -1rem;
  bottom: -3.5rem;
  width: clamp(6rem, 11vw, 9rem);
  transform: rotate(9deg);
  animation: bob 5s ease-in-out infinite;
}
@keyframes bob { 50% { transform: rotate(4deg) translateY(-6px); } }
.mascot-about { float: right; width: clamp(7rem, 30%, 12rem); margin: 0 0 1rem 1.5rem; transform: rotate(6deg); }

@media (max-width: 52rem) {
  .front { grid-template-columns: 1fr; }
  .front .print-lead { justify-self: center; }
  .front-side { max-width: none; padding-bottom: 3rem; }
  .mascot-front { right: 0.5rem; bottom: -1rem; }
}

/* ---------- music ---------- */

.music-section { margin-bottom: clamp(3rem, 8vw, 5rem); }
.section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  font-size: clamp(1.3rem, 4vw, 2rem);
  color: var(--orange);
  text-shadow: var(--split);
}
/* Stripe running off to the right of the heading. */
.section-title::before { content: "//"; color: var(--muted); text-shadow: none; }
.section-title::after { content: ""; flex: 1; height: 4px; background: var(--stripes); }
.release + .release { margin-top: clamp(3rem, 8vw, 5rem); }
.release-title { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 4.5vw, 2.6rem); text-shadow: var(--split), 0 0 1.2em rgb(255 138 31 / 0.55); }
.release .tracks { margin-bottom: 2rem; }
.release .track { counter-increment: track; }
.release .tracks { counter-reset: track; }
/* Tracks without a local file get a number where the play button would be. */
.release .track:not(:has(.track-play))::before {
  content: counter(track, decimal-leading-zero);
  grid-column: 1;
  color: var(--orange);
  font-size: 0.8rem;
}
/* Back cover, tucked behind the corner of the front. */
.print .release-back {
  position: absolute;
  right: -1.5rem;
  bottom: -2rem;
  width: 34%;
  transform: rotate(7deg);
  box-shadow: -3px 0 0 rgb(255 42 60 / 0.75), 3px 0 0 rgb(45 226 255 / 0.75), 0 0.5rem 1.5rem rgb(0 0 0 / 0.7);
}
.release {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: 0.5rem 0.5rem 0;
}
.release-cover { transform: rotate(-1.5deg); position: sticky; top: 6.5rem; }
@media (max-width: 52rem) {
  .release { grid-template-columns: 1fr; }
  .release-cover { position: relative; top: 0; max-width: 24rem; }
}

.tracks { margin: 0; padding: 0; list-style: none; border-top: 1px dashed var(--line); }
.track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--line);
}
.track-title { grid-column: 2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.track-note { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 0.8rem; }
.track-length { grid-column: 3; grid-row: 1; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.track-play { grid-column: 1; grid-row: 1 / span 2; }
.track-link {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--muted);
}
.track-link svg { width: 1.15rem; height: 1.15rem; }
.track-link:hover, .track-link:focus-visible { color: var(--orange); }
.button[target="_blank"]::after { content: " \2197"; }
.button-ghost { background: transparent; color: var(--text); border: 2px solid var(--text); box-shadow: none; }
.button-ghost:hover, .button-ghost:focus-visible { background: var(--text); color: var(--bg); box-shadow: none; transform: none; }
button.button { border: 0; font-family: inherit; cursor: pointer; }
.release-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin: 0; }

.track.is-current .track-title { color: var(--green); text-shadow: var(--split); }

.track-play, .player button, .lightbox button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--text);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.track-play:hover, .player button:hover, .lightbox button:hover { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }
.track-play svg, .player button svg, .lightbox button svg { width: 1.1rem; height: 1.1rem; }

.icon-pause { display: none; }
.is-playing > .icon-play { display: none; }
.is-playing > .icon-pause { display: block; }

/* ---------- persistent player ---------- */

.player {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--player-h);
  padding: 0 var(--gutter);
  background: rgb(5 4 15 / 0.96);
  border-top: 4px solid;
  border-image: var(--stripes) 1;
}
.player[hidden] { display: none; }
.player-buttons { display: flex; align-items: center; gap: 0.4rem; }
.player button { width: 2.25rem; height: 2.25rem; border-color: transparent; }
.player .player-toggle { width: 2.75rem; height: 2.75rem; border-color: var(--text); }
.player-main { flex: 1; min-width: 0; }
.player-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; }
.player-seek { display: flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

input[type="range"] {
  --fill: 0%;
  flex: 1;
  min-width: 0;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--green) var(--fill), var(--line) var(--fill));
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--green); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 16px; margin-top: -6px; border: 0; border-radius: 0; background: var(--text); }
input[type="range"]::-moz-range-thumb { width: 8px; height: 16px; border: 0; border-radius: 0; background: var(--text); }

@media (max-width: 30rem) {
  .player [data-player="prev"] { display: none; }
  .player { gap: 0.6rem; }
}

/* ---------- lightbox ---------- */

.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(5 4 15 / 0.97);
  color: var(--text);
}
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; padding: 1rem; }
.lightbox::backdrop { background: var(--bg); }
.lightbox figure { margin: 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 5rem); object-fit: contain; }
.lightbox figcaption { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lightbox [data-lightbox-action="close"] { position: absolute; top: 1rem; right: 1rem; z-index: 1; }

/* ---------- presets ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 2.5rem 2rem;
  margin: 0;
  padding: 0 0.5rem;
  list-style: none;
}
.card { display: block; text-decoration: none; }
.card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface);
  box-shadow: -4px 0 0 rgb(255 42 60 / 0.75), 4px 0 0 rgb(45 226 255 / 0.75);
  transition: transform 0.15s;
}
.cards li:nth-child(2n) .card img { transform: rotate(1.2deg); }
.cards li:nth-child(2n+1) .card img { transform: rotate(-1deg); }
.card:hover img, .card:focus-visible img { transform: rotate(0deg) scale(1.02); }
/* Stand-in cover for a preset bank without a picture: the plugin name. */
.card-tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 1rem;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.05) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #2a0d4a, #071a3a 60%, #3a1505);
  box-shadow: -4px 0 0 rgb(255 42 60 / 0.75), 4px 0 0 rgb(45 226 255 / 0.75);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--split);
  transition: transform 0.15s;
}
.cards li:nth-child(2n) .card-tile { transform: rotate(1.2deg); }
.cards li:nth-child(2n+1) .card-tile { transform: rotate(-1deg); }
.card:hover .card-tile, .card:focus-visible .card-tile { transform: rotate(0deg) scale(1.02); }
.preset-demo { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; }
.card-title { display: block; margin-top: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.card-text { display: block; color: var(--muted); font-size: 0.85rem; }

.preset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding: 0 0.5rem; }
.preset-preview img { width: 100%; box-shadow: -6px 0 0 rgb(255 42 60 / 0.75), 6px 0 0 rgb(45 226 255 / 0.75); }
.preset .page-head h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
@media (max-width: 48rem) { .preset { grid-template-columns: 1fr; } }

.recipe { margin: 0 0 2rem; border-top: 1px dashed var(--line); }
.recipe dt { padding-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); }
.recipe dd { margin: 0; padding: 0.2rem 0 0.8rem; border-bottom: 1px dashed var(--line); font-size: 0.9rem; overflow-wrap: anywhere; user-select: all; }
.recipe-long { white-space: pre-wrap; }

/* ---------- lab ---------- */

.posts { margin: 0; padding: 0; list-style: none; border-top: 1px dashed var(--line); max-width: 54rem; }
.posts li { border-bottom: 1px dashed var(--line); }
.posts a { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.1rem 1rem; padding: 1.1rem 0; text-decoration: none; }
.posts time { font-size: 0.78rem; color: var(--orange); padding-top: 0.2rem; }
.post-title { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.post-text { grid-column: 2; color: var(--muted); font-size: 0.9rem; }
.posts a:hover .post-title { color: var(--green); text-shadow: var(--split); }
@media (max-width: 30rem) { .posts a { grid-template-columns: 1fr; } .post-text { grid-column: 1; } }

/* ---------- long-form text ---------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.25rem; color: var(--orange); }
.prose h3 { margin-top: 2rem; font-size: 1rem; }
.prose p, .prose li { color: #dcd5ec; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li::marker { color: var(--green); }
.prose img:not(.mascot) { margin-block: 2rem; }
.prose blockquote { margin-inline: 0; padding-left: 1rem; border-left: 4px solid var(--magenta); color: var(--muted); }
.prose hr { border: 0; height: 4px; background: var(--stripes); margin-block: 2.5rem; }
.prose code { font-family: var(--mono); padding: 0.1em 0.35em; background: var(--surface); border: 1px dashed var(--line); }
.prose pre { padding: 1rem; overflow-x: auto; background: var(--surface); border: 1px dashed var(--muted); font-size: 0.875rem; line-height: 1.5; }
.prose pre code { padding: 0; border: 0; background: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.prayer a { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- about ---------- */

.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.about-photos { display: grid; gap: 3rem; padding: 1.5rem 0.75rem 0; }
.about-photos .print { transform: rotate(1.5deg); }
.about-photos .print:nth-child(2n) { transform: rotate(-2deg); width: 88%; justify-self: end; }
.about-photos .print:nth-child(2n)::before { left: 25%; background: rgb(61 255 122 / 0.6); }
.about-photos .print:hover, .about-photos .print:focus-visible { transform: rotate(0deg) scale(1.01); }
@media (max-width: 52rem) {
  .about { grid-template-columns: 1fr; }
  .about-photos { max-width: 30rem; }
}

/* ---------- phones ---------- */

@media (max-width: 40rem) {
  /* Phones: one slim sticky row (logo + Menu button). The tabs and the
     platform buttons open as a panel underneath. Without the script the
     panel is simply always open. */
  .site-header { gap: 0.5rem 1rem; padding-block: 0.45rem; max-height: 100dvh; overflow-y: auto; }
  .wordmark img { height: 2.5rem; }
  .js .nav-toggle { display: block; }
  #nav { margin-left: 0; width: 100%; }
  .js #nav, .js .socials { display: none; }
  .js .is-open #nav { display: block; }
  .js .is-open .socials { display: flex; }
  #nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; padding-top: 0.35rem; }
  #nav a { padding: 0.8rem 0.75rem; border: 1px solid var(--line); border-left: 6px solid var(--tab); font-size: 0.85rem; }
  #nav a[aria-current] { transform: none; border-color: var(--tab); }
  .socials { width: 100%; justify-content: space-between; gap: 0.25rem; padding: 0.35rem 0 0.4rem; }
  .socials a { width: 2.4rem; height: 2.4rem; }
  .socials svg { width: 1.15rem; height: 1.15rem; }
  .track { gap: 0.15rem 0.7rem; }
  .track-title { letter-spacing: 0.06em; overflow-wrap: anywhere; }
  .release-back { right: -0.5rem; }
}

/* ---------- front page: intro + news feed ---------- */

.intro {
  display: grid;
  grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 7vw, 5rem);
  padding: 0.5rem 0.5rem 0;
}
.intro .front-logo { margin: 0; }
.intro .mirror { margin-bottom: 0.9rem; }
.intro .front-text { max-width: 34rem; }
.intro .front-text p { margin: 0; }
.mascot-intro { width: clamp(6rem, 11vw, 9rem); transform: rotate(8deg); animation: bob 5s ease-in-out infinite; }
@media (max-width: 52rem) {
  .intro { grid-template-columns: 1fr auto; }
  .intro .front-logo { grid-column: 1 / -1; }
  .intro .front-logo img { width: min(100%, 20rem); }
  .mascot-intro { width: 5.5rem; }
}

.news { margin-bottom: clamp(3rem, 8vw, 6rem); }
.news-item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
  padding: 0.5rem 0.5rem 0;
}
.news-item + .news-item { margin-top: clamp(3rem, 8vw, 5rem); padding-top: clamp(3rem, 8vw, 5rem); border-top: 1px dashed var(--line); }
.news-item:not(:has(.news-image)) { grid-template-columns: minmax(0, var(--measure)); }
.news-image { transform: rotate(-1.2deg); }
.news-item:nth-of-type(2n) .news-image { transform: rotate(1.4deg); }
.news-title { margin: 0 0 1rem; font-size: clamp(1.35rem, 3.6vw, 2.1rem); text-shadow: var(--split), 0 0 1.2em rgb(255 138 31 / 0.5); }
.news-title a { text-decoration: none; }
.news-title a:hover { color: var(--green); }
.news-body .prose { margin-bottom: 1.75rem; }
@media (max-width: 52rem) {
  .news-item { grid-template-columns: 1fr; }
  .news-image { max-width: 26rem; }
}

/* ---------- streaming dock + cookie notice ---------- */

.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem var(--gutter) 0.7rem;
  background: rgb(5 4 15 / 0.97);
  border-top: 4px solid;
  border-image: var(--stripes) 1;
}
.dock[hidden] { display: none; }
.dock-main { flex: 1; min-width: 0; max-width: 60rem; margin: 0 auto; }
.dock-title { margin-bottom: 0.4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dock iframe { display: block; width: 100%; border: 0; }
.dock[data-kind="soundcloud"] iframe { height: 20px; }
.dock[data-kind="bandcamp"] iframe { height: 42px; }
.dock button {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 2px solid var(--text);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.dock button:hover { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }
.dock button svg { width: 1rem; height: 1rem; }

.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1rem;
  z-index: 35;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--bg);
  border: 2px dashed var(--muted);
  box-shadow: -5px 0 0 rgb(255 42 60 / 0.75), 5px 0 0 rgb(45 226 255 / 0.75), 0 1rem 3rem rgb(0 0 0 / 0.7);
  font-size: 0.85rem;
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 1rem; color: #dcd5ec; }
.consent strong { color: var(--yellow); text-transform: uppercase; letter-spacing: 0.12em; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; }
.consent .button { padding: 0.6rem 1rem; font-size: 0.78rem; letter-spacing: 0.14em; }
body.has-player .consent { bottom: calc(var(--player-h) + 1rem); }
body.has-dock .consent { bottom: 7.5rem; }

.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.25em; cursor: pointer; }
.link-button:hover { color: var(--text); }

button.button-ghost { border: 2px solid var(--text); }
@media (max-width: 40rem) {
  .intro .front-logo img { width: min(70%, 14rem); }
  .consent { bottom: 0.5rem; padding: 0.9rem 1rem 1rem; font-size: 0.78rem; }
  .consent p { margin-bottom: 0.8rem; }
}

/* Dock extras: volume (SoundCloud only; Bandcamp's player has no remote control). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dock-volume { display: none; flex: none; width: 7rem; }
.dock[data-kind="soundcloud"] .dock-volume { display: flex; }
.dock-volume input { width: 100%; }
.dock button[hidden] { display: none; }
@media (max-width: 40rem) {
  /* Phones have their own volume keys. */
  .dock[data-kind="soundcloud"] .dock-volume { display: none; }
  .dock { gap: 0.4rem; }
  .dock button { width: 2.25rem; height: 2.25rem; }
}

.credit { margin: 0 0 1.25rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.credit a { color: var(--text); text-transform: none; letter-spacing: 0.04em; }
.news-body .credit { margin-top: -0.75rem; }

.dock-hint { color: var(--yellow); font-weight: 400; animation: nudge 1.2s steps(2) 4; }
.dock-hint[hidden] { display: none; }
@keyframes nudge { 50% { opacity: 0.35; } }

/* Volume on the site's own player. */
.player-volume { display: flex; flex: none; width: 7rem; }
.player-volume input { width: 100%; }
.news-tracks { margin-bottom: 1.5rem; }
@media (max-width: 40rem) {
  .player-volume { display: none; }   /* phones have volume keys */
}

/* The cookie notice should not blend into the page: lighter panel, bright
   frame, test-card stripe along the top. */
.consent {
  background: #1b1640;
  border: 3px solid var(--yellow);
  border-top-width: 0;
  box-shadow: -6px 6px 0 var(--red), 6px -6px 0 var(--cyan), 0 1.5rem 4rem rgb(0 0 0 / 0.85);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.consent::before {
  content: "";
  display: block;
  height: 8px;
  margin: -1.1rem -1.25rem 1rem;
  background: var(--stripes);
}
.consent p { color: var(--text); }
.consent-more { margin: 0 0 1.1rem; }
.consent-more summary {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px dashed var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.consent-more summary::-webkit-details-marker { display: none; }
.consent-more summary::after { content: " +"; color: var(--yellow); }
.consent-more[open] summary::after { content: " \2212"; }
.consent-more summary:hover { border-color: var(--yellow); color: var(--yellow); }
.consent-more dl { margin: 0.9rem 0 0; padding: 0.9rem 0 0; border-top: 1px dashed var(--muted); }
.consent-more dt { margin-top: 0.7rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
.consent-more dt:first-child { margin-top: 0; }
.consent-more dd { margin: 0.15rem 0 0; color: #dcd5ec; }
@media (max-width: 40rem) {
  .consent::before { margin: -0.9rem -1rem 0.8rem; }
}

/* ---------- phone menu button ---------- */

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 0.5rem 0.95rem;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.is-open .nav-toggle { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }

/* ---------- footer contact button ---------- */

.site-footer { align-items: center; }
.site-footer .footer-contact { margin-left: 0; padding: 0.55rem 1rem; font-size: 0.75rem; color: var(--bg); }

/* ---------- contact form (About page) ---------- */

.contact { max-width: 46rem; margin-top: clamp(3rem, 8vw, 5rem); scroll-margin-top: 6rem; }
.contact-lead { margin: -1rem 0 1.5rem; color: var(--muted); }
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  padding: 1.25rem;
  border: 2px dashed var(--muted);
  background: rgb(5 4 15 / 0.7);
  box-shadow: -5px 0 0 rgb(255 42 60 / 0.75), 5px 0 0 rgb(45 226 255 / 0.75);
}
.contact-form label { display: grid; gap: 0.35rem; }
.contact-form label > span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
.contact-wide, .contact-actions, .contact-status { grid-column: 1 / -1; }
.contact-status { margin: 0; padding: 0.7rem 0.9rem; border: 2px solid var(--green); color: var(--green); font-weight: 700; }
.contact-status.is-error { border-color: var(--red); color: #ff8a94; }
.contact-status[hidden] { display: none; }
.contact-form button[disabled] { opacity: 0.5; cursor: progress; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;   /* 16px keeps phones from zooming in on focus */
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px dashed var(--yellow); outline-offset: 2px; border-color: var(--yellow); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.contact-actions .hint { flex: 1; min-width: 14rem; margin: 0; }
@media (max-width: 40rem) { .contact-form { grid-template-columns: 1fr; } }

/* ---------- events ---------- */

.events { margin: 0; padding: 0; list-style: none; border-top: 1px dashed var(--line); }
.events:empty { display: none; }
.events:not(:empty) + .events-empty { display: none; }
.event {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--line);
}
.event-date { display: grid; justify-items: center; padding: 0.4rem 0.3rem; border: 2px solid var(--text); transform: rotate(-2deg); }
.event-day { font-size: 1.7rem; font-weight: 700; line-height: 1; text-shadow: var(--split); }
.event-month { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.event-body { display: grid; gap: 0.15rem; min-width: 0; }
.event-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.event-place { color: var(--muted); font-size: 0.85rem; }
.event-link { padding: 0.5rem 0.9rem; font-size: 0.72rem; }
@media (max-width: 40rem) {
  .event { grid-template-columns: 4.5rem 1fr; }
  .event-link { grid-column: 2; justify-self: start; }
}

/* ---------- partners ---------- */

.card-logo { padding: 1.5rem; }
.card-logo img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; box-shadow: none; background: none; }

/* ---------- art wall: tiles sized by the original's resolution ---------- */
/* Large originals get large tiles; small ones stay small (never below the
   size-s width, so tiny clips are scaled up to that and no further). */

.wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3.5rem);
}
.wall .print { flex: 0 1 auto; width: min(100%, 30rem); max-width: none; margin-top: 0; }
.wall .print.size-m { width: min(100%, 20rem); }
.wall .print.size-s { width: min(100%, 13rem); }
.wall .print:nth-child(2n) { margin-top: 0; }
.wall .print-caption { max-width: calc(100% + 0.6rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Corner badge: play + length on videos, destination on outbound links. */
.print-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  background: var(--bg);
  border: 1px solid var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.print-badge svg { width: 0.8rem; height: 0.8rem; }
.print-video:hover .print-badge, .print-video:focus-visible .print-badge,
.print-out:hover .print-badge, .print-out:focus-visible .print-badge { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }
.print-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 1.25rem;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.05) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #2a0d4a, #071a3a 60%, #3a1505);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--split);
}

.lightbox video { max-width: 100%; max-height: calc(100dvh - 5rem); background: #000; }
.lightbox video[hidden], .lightbox img[hidden] { display: none; }
.piece video { display: block; max-width: 100%; height: auto; max-height: 80vh; margin-bottom: 2rem; background: #000; }
.tutorial-video { display: block; width: 100%; height: auto; margin-bottom: 1.5rem; background: #000; box-shadow: -6px 0 0 rgb(255 42 60 / 0.75), 6px 0 0 rgb(45 226 255 / 0.75); }

.wall-more { margin: 2.5rem 0 0; text-align: center; }

/* ---------- footer: donate + visitor counter ---------- */

.site-footer .footer-donate { margin-left: 0; padding: 0.45rem 0.9rem; font-size: 0.75rem; }
.visitors { display: inline-flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.14em; }
.visitors[hidden] { display: none; }
/* Old-web hit counter: one boxed digit per cell. */
.visitor-digits { display: inline-flex; gap: 2px; }
.visitor-digits span {
  display: inline-block;
  min-width: 1.1em;
  padding: 0.15rem 0.2rem;
  background: #000;
  border: 1px solid var(--line);
  color: var(--green);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 0 0.5em rgb(61 255 122 / 0.8);
}

.support { max-width: var(--measure); margin-top: clamp(2rem, 6vw, 4rem); }
.support p { color: var(--muted); }

.event-links { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }
.event-links:empty { display: none; }
@media (max-width: 40rem) { .event-links { grid-column: 2; justify-content: flex-start; } }

/* Booking call on the Events page. */
.book {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  border: 2px dashed var(--muted);
  background: rgb(5 4 15 / 0.7);
}
.book p { flex: 1; min-width: 14rem; margin: 0; }

/* ---------- event flyers ---------- */

.event { grid-template-columns: 5.5rem 4.5rem 1fr auto; }
.event-poster { display: block; width: 4.5rem; height: 4.5rem; }
a.event-poster { box-shadow: -3px 0 0 rgb(255 42 60 / 0.75), 3px 0 0 rgb(45 226 255 / 0.75); transition: transform 0.15s; }
a.event-poster:hover, a.event-poster:focus-visible { transform: scale(1.08) rotate(-2deg); }
.event-poster img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) {
  .event { grid-template-columns: 4.5rem 1fr 3.5rem; }
  .event-poster { grid-column: 3; grid-row: 1; width: 3.5rem; height: 3.5rem; }
  .event-body { grid-column: 2; grid-row: 1; }
  .event-links { grid-column: 2 / -1; }
}

/* ---------- press kit ---------- */

.press-actions { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.press-set { font-size: 1.05rem; }
.press-set ul { padding-left: 1.4rem; }
.press-set li + li { margin-top: 0.5rem; }
.press-photos { justify-content: flex-start; align-items: flex-start; }
.press-photo { width: min(100%, 20rem); margin: 0; }
.press-photo .print { width: 100%; }
.press-photo figcaption { margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.press-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.press-links a { display: block; padding: 0.45rem 0.9rem; border: 1px dashed var(--muted); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.press-links a:hover, .press-links a:focus-visible { border-color: var(--green); color: var(--green); }

/* Nine tabs and nine platform buttons: a little tighter so the banner stays
   on one row on ordinary laptop screens. */
@media (min-width: 40.01rem) {
  #nav a { padding-inline: 0.5rem; }
  .socials { gap: 0.3rem; }
}

/* ---------- platform buttons: each service's own colour on hover ---------- */

.socials li a[data-brand]:hover, .socials li a[data-brand]:focus-visible { color: #fff; }
.socials li a[data-brand="soundcloud"]:hover, .socials li a[data-brand="soundcloud"]:focus-visible { background: #ff5500; border-color: #ff5500; }
.socials li a[data-brand="bandcamp"]:hover, .socials li a[data-brand="bandcamp"]:focus-visible { background: #1da0c3; border-color: #1da0c3; }
.socials li a[data-brand="spotify"]:hover, .socials li a[data-brand="spotify"]:focus-visible { background: #1db954; border-color: #1db954; color: #000; }
.socials li a[data-brand="tidal"]:hover, .socials li a[data-brand="tidal"]:focus-visible { background: #fff; border-color: #fff; color: #000; }
.socials li a[data-brand="applemusic"]:hover, .socials li a[data-brand="applemusic"]:focus-visible { background: #fa243c; border-color: #fa243c; }
.socials li a[data-brand="deezer"]:hover, .socials li a[data-brand="deezer"]:focus-visible { background: #a238ff; border-color: #a238ff; }
.socials li a[data-brand="youtube"]:hover, .socials li a[data-brand="youtube"]:focus-visible { background: #ff0000; border-color: #ff0000; }
.socials li a[data-brand="instagram"]:hover, .socials li a[data-brand="instagram"]:focus-visible { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); border-color: #dc2743; }
.socials li a[data-brand="RA"]:hover, .socials li a[data-brand="RA"]:focus-visible { background: var(--red); border-color: var(--red); }

/* ---------- thumbnails in post lists and on tutorial pages ---------- */

.posts a.has-thumb { grid-template-columns: 9rem 7.5rem 1fr; align-items: start; }
.post-thumb { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; box-shadow: -3px 0 0 rgb(255 42 60 / 0.75), 3px 0 0 rgb(45 226 255 / 0.75); }
.posts a.has-thumb time { grid-column: 2; }
.posts a.has-thumb .post-title { grid-column: 3; }
.posts a.has-thumb .post-text { grid-column: 3; }
@media (max-width: 40rem) {
  .posts a.has-thumb { grid-template-columns: 1fr; }
  .posts a.has-thumb > *, .posts a.has-thumb time, .posts a.has-thumb .post-title, .posts a.has-thumb .post-text { grid-column: 1; grid-row: auto; }
  .post-thumb { max-width: 16rem; margin-bottom: 0.5rem; }
}
.tutorial-poster { max-width: 40rem; margin: 0.5rem 0 2rem; }
.tutorial-poster img { margin: 0; }

.card-site { display: block; margin-top: 0.35rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--orange); overflow-wrap: anywhere; }
.card:hover .card-site, .card:focus-visible .card-site { color: var(--green); }

/* QR artworks in Lab posts: shown at their own pixel size (never blown up
   or squeezed below what a phone can read off a screen). */
.prose .qr-figure { margin: 2rem 0; }
.prose .qr-figure img { display: block; width: min(100%, 32rem); height: auto; margin: 0; box-shadow: -5px 0 0 rgb(255 42 60 / 0.75), 5px 0 0 rgb(45 226 255 / 0.75); }
/* Lift the QR artworks above the scanline and halftone overlay (z 40), so
   the screen shows them clean for the camera. The banner sits higher still
   (z 45), so the images slide under it when scrolling. */
.prose .qr-figure img { position: relative; z-index: 41; }
.site-header { z-index: 45; }

/* Ten tabs: on laptop-width screens drop the "Studio" word beside the logo
   and close up the lettering, so the banner stays on one row. */
@media (min-width: 40.01rem) and (max-width: 1520px) {
  .wordmark span { display: none; }
  #nav a { letter-spacing: 0.06em; padding-inline: 0.36rem; }
  .site-header { gap: 0.4rem 1rem; }
}

/* Spec tables in long-form text. */
.prose table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.prose table thead { display: none; }   /* the spec tables have no headings */
.prose td { padding: 0.45rem 0.6rem; border-bottom: 1px dashed var(--line); vertical-align: top; }
.prose td:first-child { width: 40%; color: var(--orange); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
.prose h3 { color: var(--green); }

/* Cut-out product photos on the Services page. */
.prose .speaker-figure { margin: 1.5rem 0; }
.prose .speaker-figure img { display: block; width: min(100%, 15rem); height: auto; margin: 0; }
@media (min-width: 48rem) {
  .prose .speaker-figure { float: right; margin: 0 0 1rem 1.5rem; }
  .prose table { clear: both; }
}

/* A small extra picture in a news post (e.g. the CD). */
.news-photo { margin: 0 0 1.75rem; max-width: 11rem; }
.news-photo .print { display: block; transform: rotate(2.5deg); }
.news-photo .print:hover { transform: rotate(0deg) scale(1.02); }
.news-photo figcaption { margin-top: 0.9rem; }

/* Pictures inside posts use the full text width. */
.prose figure { margin: 2rem 0; }
.prose figure > img { display: block; width: 100%; height: auto; margin: 0; }

/* ---------- partner popup (HTML popover; no script) ---------- */

.card-button { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card-button:hover .card-tile, .card-button:focus-visible .card-tile { transform: rotate(0deg) scale(1.02); }
.partner-pop {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 2px dashed var(--muted);
  background: var(--surface);
  color: var(--text);
  box-shadow: -6px 0 0 rgb(255 42 60 / 0.75), 6px 0 0 rgb(45 226 255 / 0.75);
}
.partner-pop::backdrop { background: rgb(5 4 15 / 0.8); }
.partner-pop-head { display: grid; gap: 1rem; margin-bottom: 1rem; }
.partner-pop-head img { width: min(100%, 18rem); height: auto; padding: 0.75rem; background: #fff; }
.partner-pop h2 { margin: 0; font-size: 1.4rem; color: var(--orange); text-shadow: var(--split); }
.partner-pop p { margin: 0 0 1.5rem; line-height: 1.7; color: var(--muted); }
.partner-links { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.partner-links .button { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; }
.partner-links svg { width: 1.1rem; height: 1.1rem; flex: none; }
/* Without popover support the popup simply sits under its card. */
.partner-pop:not(:popover-open) { margin-top: 1rem; }
@supports selector(:popover-open) { .partner-pop:not(:popover-open) { display: none; } }
.card-tile.card-logo { background: #fff; }   /* logos usually come on white */

/* ---------- visitor map (popover from the footer counter) ---------- */

button.visitors { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
button.visitors:hover .visitor-digits span, button.visitors:focus-visible .visitor-digits span { border-color: var(--green); }
.visitor-map {
  width: min(56rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 2px dashed var(--muted);
  background: var(--surface);
  color: var(--text);
  box-shadow: -6px 0 0 rgb(255 42 60 / 0.75), 6px 0 0 rgb(45 226 255 / 0.75);
}
.visitor-map::backdrop { background: rgb(5 4 15 / 0.8); }
.visitor-map h2 { margin: 0 0 1rem; font-size: 1.3rem; color: var(--orange); text-shadow: var(--split); }
.visitor-map .hint { margin: 0 0 0.9rem; }
.visitor-map > .button { margin-top: 0.5rem; }
.map-box { margin: 0 0 1.25rem; }
.map-box svg { display: block; width: 100%; height: auto; }
.map-box path { stroke: var(--bg); stroke-width: 0.4; transition: opacity 0.15s; }
.map-box path:hover { opacity: 0.75; }
.map-l0 { fill: #2a2645; }
.map-l1 { fill: #1d6b4f; }
.map-l2 { fill: #2a9d63; }
.map-l3 { fill: #3dff7a; }
.map-l4 { fill: #c6ff3d; }
.map-l5 { fill: #ffe14a; }
.map-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 2rem; }
.map-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line); font-size: 0.85rem; }
.map-list li span:last-child { color: var(--green); font-variant-numeric: tabular-nums; }
@supports selector(:popover-open) { .visitor-map:not(:popover-open) { display: none; } }
.contact-check small { color: var(--muted); line-height: 1.5; }
.defanged { color: var(--text); white-space: nowrap; }