/* =========================================================
   TMF — chrome portfolio
   ========================================================= */

@font-face { font-family: "Jura"; src: url("../fonts/jura-vf-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Pixelify"; src: url("../fonts/pixelify-500.woff") format("woff"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --mercury: #f6f8fb;
  --silver: #d6dbe2;
  --silver-2: #c4cbd5;
  --alloy: #8a94a3;
  --gunmetal: #1f252e;
  --ink-2: #4a5462;
  --lcd: #04121b;
  --ice: #8fe3ff;
  --ice-2: #2fb8f5;
  --font: "Jura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-lcd: "Pixelify", ui-monospace, "SF Mono", monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--silver); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gunmetal);
  background: linear-gradient(180deg, #dfe3e9 0, var(--silver) 900px, #cdd3dc 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; }
button { font: inherit; color: inherit; }
::selection { background: var(--ice); color: var(--gunmetal); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--gunmetal); color: var(--mercury); text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--ice-2); outline-offset: 3px; }

/* =========================================================
   Hero — a studio sweep with chrome objects floating in it
   ========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(76px, clamp(56px, 10vh, 112px)) 16px clamp(72px, 11vh, 120px);   /* 76px+: room for the menu on short screens */
  background:
    radial-gradient(90% 60% at 50% 34%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(140% 90% at 50% 20%, #f4f6f9 0%, #e1e5eb 46%, #cbd2db 100%);
  --px: 0; --py: 0; --lvl: 0;
}
.hero::after {               /* horizon where the sweep meets the page */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 20%, rgba(255,255,255,.9) 80%, transparent);
  box-shadow: 0 1px 0 rgba(80, 92, 108, .18);
}

.scene { position: absolute; inset: 0; pointer-events: none; }
.orbits { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }

.obj {
  position: absolute;
  display: block;
  will-change: transform;
  translate: calc(var(--px) * var(--d, .5) * 16px) calc(var(--py) * var(--d, .5) * 12px);
  scale: calc(1 + var(--lvl) * var(--d, .5) * .045);
  transform-origin: 50% 60%;
  animation: obj-in 1.6s var(--ease-out) both;
  animation-delay: calc(.25s + var(--d, .5) * .2s);
}
.obj img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(40, 52, 70, .22)); }
.scene .obj { pointer-events: none; }
.obj-cluster { z-index: 1; width: clamp(230px, 27vw, 440px); left: -3.5vw; top: 4%; }
.obj-ring    { z-index: 4; width: clamp(120px, 13vw, 210px); right: 5vw; top: 5%; }
.obj-blob    { z-index: 1; width: clamp(150px, 15vw, 250px); right: -3vw; bottom: 6%; }
.bead-2 { width: 30px; left: 20%; top: 46%; z-index: 1; }

/* objects anchored to the player */
.deck-wrap .obj { pointer-events: none; }
.obj-swoosh { z-index: -2; width: 172%; left: -36%; top: 6%; }
.obj-swoosh img { filter: drop-shadow(0 22px 16px rgba(40, 52, 70, .16)); }
.bead-1 { z-index: 1; width: 50px; right: -70px; bottom: -8px; }
.bead-3 { z-index: 1; width: 18px; left: 24%; bottom: -46px; }

@keyframes obj-in {
  from { opacity: 0; transform: translateY(18px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* sparkle glints */
.glint {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  fill: #fff; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(143,227,255,.8));
  transform: scale(.2);
}
.glint.flash { animation: glint 1s ease-out; }
@keyframes glint {
  0%   { opacity: 0; transform: scale(.2) rotate(0deg); }
  30%  { opacity: 1; transform: scale(1) rotate(35deg); }
  100% { opacity: 0; transform: scale(.4) rotate(90deg); }
}

/* wordmark */
.wordmark {
  position: relative;
  z-index: 3;
  margin: 0;
  line-height: 0;
  width: min(980px, 88vw);
  animation: word-in 1.2s var(--ease-out) both;
}
.wordmark img {
  width: 100%; height: auto;
  filter: drop-shadow(0 20px 18px rgba(36, 46, 62, .26)) drop-shadow(0 3px 3px rgba(36, 46, 62, .25));
}
.wordmark::after {             /* the chrome glint that sweeps across the letters */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(220,245,255,.9) 52%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 160% 0;
  -webkit-mask: url("../img/silver/logo-v2.webp") center / 100% 100% no-repeat;
          mask: url("../img/silver/logo-v2.webp") center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
  opacity: 0;
}
.wordmark.shine::after { animation: shine 1.5s ease-in-out; }
.tagline {                     /* line under the wordmark, same type as the contact page heading */
  position: relative; z-index: 3;
  margin: clamp(14px, 2.4vh, 26px) 0 0; max-width: 760px; text-align: center; text-wrap: balance;
  font-family: var(--font); font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; line-height: 1.2; letter-spacing: .02em;
  color: #2a313b; text-shadow: 0 1px 0 rgba(255,255,255,.85);
  animation: word-in 1.2s .1s var(--ease-out) both;
}
html[data-theme="dark"] .tagline { color: #eef1f5; text-shadow: none; }
@keyframes shine {
  0%   { background-position: 160% 0; opacity: 1; }
  100% { background-position: -60% 0; opacity: 1; }
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   The deck — brushed aluminium player
   ========================================================= */

.deck-wrap {
  position: relative;
  z-index: 5;
  width: min(700px, 100%);
  margin-top: clamp(40px, 5vw, 68px);
  animation: word-in 1.2s .3s var(--ease-out) both;
}
.deck-wrap::after {          /* contact shadow on the studio floor */
  content: "";
  position: absolute; left: 10%; right: 10%; bottom: -26px; height: 30px; z-index: -1;
  background: radial-gradient(closest-side, rgba(30, 40, 56, .34), rgba(30, 40, 56, 0));
  filter: blur(4px);
}

.deck {
  --h: 280px;
  position: relative;
  display: grid;
  grid-template-columns: var(--h) 1fr;
  height: var(--h);
  border-radius: calc(var(--h) / 2) 46px 46px calc(var(--h) / 2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #f3f5f8 0%, #dfe3e9 40%, #cbd1d9 64%, #e4e8ed 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(64, 76, 92, .22),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 0 0 1px rgba(102, 113, 128, .55),
    0 1px 0 1px rgba(255,255,255,.6),
    0 36px 60px -30px rgba(30, 40, 56, .6),
    0 14px 24px -14px rgba(30, 40, 56, .4);
}
.deck::before {              /* brushed grain */
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: url("../img/brushed.webp") 0 0 / 512px 512px;
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
}

.deck-disc {
  position: relative;
  display: grid; place-items: center;
  width: var(--h); height: var(--h);
}
.disc-window {
  position: relative;
  width: calc(var(--h) - 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 25deg, #ffffff, #98a1ad 9%, #eff2f5 21%, #7c8592 34%, #fbfcfd 47%, #a6aeb9 59%, #e9ecf0 71%, #848d99 85%, #ffffff);
  box-shadow:
    0 0 0 1px rgba(56, 66, 80, .65),
    0 2px 0 1px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 12px 24px -12px rgba(22, 32, 46, .65);
}
.disc-well {
  position: absolute; inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, #2a3139 0%, #0d1217 72%);
  box-shadow: inset 0 4px 12px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.6);
}
.disc {
  position: absolute; inset: 5%;
  border-radius: 50%;
  overflow: hidden;
  background: #11161c;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 4px 14px rgba(0,0,0,.6);
  will-change: transform;
}
.disc img { width: 100%; height: 100%; object-fit: cover; }
.disc::after {               /* clear hub + spindle hole (spins with the disc) */
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle,
    #0b0f13 0 6.5%,
    rgba(232, 238, 244, .95) 7% 8.2%,
    rgba(196, 206, 218, .42) 8.6% 15.2%,
    rgba(255,255,255,.65) 15.6% 16.4%,
    rgba(0,0,0,.12) 16.8% 17.6%,
    transparent 18%);
}
.disc-well::after {          /* CD rainbow — stays put while the disc turns */
  content: "";
  position: absolute; inset: 5%; border-radius: 50%;
  background: conic-gradient(from 200deg,
    rgba(255,110,190,0), rgba(255,140,210,.26) 6%, rgba(120,220,255,.32) 12%, rgba(150,255,190,.24) 18%, rgba(255,240,140,.26) 24%, rgba(255,110,190,0) 32%,
    rgba(255,110,190,0) 50%, rgba(255,140,210,.22) 56%, rgba(120,220,255,.28) 62%, rgba(150,255,190,.2) 68%, rgba(255,240,140,.22) 74%, rgba(255,110,190,0) 82%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.lid {                        /* smoked acrylic lid */
  position: absolute; inset: 10px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(130% 85% at 28% 12%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.1) 34%, rgba(255,255,255,0) 35%),
    linear-gradient(205deg, rgba(255,255,255,.1), rgba(5, 12, 20, .2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.deck-panel {
  position: relative;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 22px 28px 20px 2px;
  min-width: 0;
}

/* LCD */
.lcd {
  position: relative;
  min-width: 0;
  padding: 10px 14px 8px;
  border-radius: 12px 28px 12px 12px;
  color: var(--ice);
  font-family: var(--font-lcd);
  font-weight: 500;
  line-height: 1.15;
  text-shadow: 0 0 6px rgba(143, 227, 255, .55);
  background: radial-gradient(130% 140% at 25% 0%, #0d2a3b 0%, #071a26 46%, var(--lcd) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.65),
    inset 0 8px 16px rgba(0,0,0,.5),
    0 0 0 3px #a9b1bc,
    0 0 0 4px rgba(255,255,255,.85),
    0 0 0 5px rgba(70, 80, 95, .35);
  overflow: hidden;
}
.lcd::before {               /* pixel grid */
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 8, 14, .32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 8, 14, .32) 1px, transparent 1px);
  background-size: 2px 2px;
}
.lcd::after {                /* glass glare */
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(165deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,0) 39%);
}
.lcd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lcd-top { font-size: 12px; letter-spacing: .06em; opacity: .9; }
.lcd-flags { display: flex; gap: 8px; margin-left: auto; }
.flag { opacity: .14; text-shadow: none; transition: opacity .2s; }
.flag.on { opacity: 1; text-shadow: 0 0 6px rgba(143, 227, 255, .6); }
.lcd-state { min-width: 4ch; text-align: right; }
.lcd-state.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.lcd-title {
  margin-top: 7px;
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
}
.lcd-title span { display: inline-block; padding-right: 2px; }
.lcd-title.marquee span { animation: marquee var(--marquee-t, 8s) ease-in-out infinite alternate; }
@keyframes marquee {
  0%, 15%   { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--marquee-x, 0)); }
}
.lcd-artist {
  margin-top: 2px;
  font-size: 14px;
  opacity: .78;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lcd-bottom { margin-top: 8px; align-items: flex-end; }
.lcd-viz { width: 150px; height: 26px; flex: 0 1 150px; min-width: 0; }
.lcd-time {
  flex: none;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-lcd); font-size: 17px; line-height: 1;
  color: var(--ice); text-shadow: inherit;
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
}
.lcd-dim { opacity: .55; font-size: 13px; }

/* seek groove */
.seek { padding: 0 2px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; margin: 0; padding: 0;
  height: 24px; background: transparent; cursor: pointer;
  --p: 0%; --b: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px;
  background:
    linear-gradient(90deg, #1fa6e6, var(--ice)) 0 0 / var(--p) 100% no-repeat,
    linear-gradient(rgba(255,255,255,.17), rgba(255,255,255,.17)) 0 0 / var(--b) 100% no-repeat,
    linear-gradient(180deg, #161b22, #39424e);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.95);
}
input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 99px;
  background:
    linear-gradient(90deg, #1fa6e6, var(--ice)) 0 0 / var(--p) 100% no-repeat,
    linear-gradient(rgba(255,255,255,.17), rgba(255,255,255,.17)) 0 0 / var(--b) 100% no-repeat,
    linear-gradient(180deg, #161b22, #39424e);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.95);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -6px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 18%, #d3d9e0 48%, #7f8895 100%);
  box-shadow: 0 0 0 1px rgba(52, 62, 76, .7), 0 2px 5px rgba(16, 24, 36, .5);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 18%, #d3d9e0 48%, #7f8895 100%);
  box-shadow: 0 0 0 1px rgba(52, 62, 76, .7), 0 2px 5px rgba(16, 24, 36, .5);
}
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ice-2), 0 0 0 6px rgba(47, 184, 245, .3); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ice-2), 0 0 0 6px rgba(47, 184, 245, .3); }

/* chrome keys */
.controls { display: flex; align-items: center; gap: 10px; }
.key {
  --s: 46px;
  position: relative;
  flex: none;
  width: var(--s); height: var(--s);
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  cursor: pointer;
  color: #262d37;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.95), rgba(255,255,255,0) 52%),
    conic-gradient(from 200deg, #f8fafc, #a7afba 12%, #eef1f4 25%, #8b94a0 39%, #fbfcfd 52%, #9aa3ae 67%, #f1f3f6 81%, #a2aab5 92%, #f8fafc);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(56, 66, 80, .35),
    0 0 0 1px rgba(76, 86, 100, .6),
    0 4px 7px -3px rgba(24, 34, 48, .55),
    0 1px 0 1px rgba(255,255,255,.7);
  transition: transform .08s, box-shadow .08s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.key svg { width: 20px; height: 20px; fill: currentColor; }
.key:active {
  transform: translateY(1px) scale(.97);
  box-shadow:
    inset 0 2px 5px rgba(36, 46, 60, .5),
    0 0 0 1px rgba(76, 86, 100, .6),
    0 1px 0 1px rgba(255,255,255,.7);
}
.key-sm { --s: 38px; }
.key-sm svg { width: 17px; height: 17px; }
.key-xs { --s: 34px; }
.key-xs svg { width: 16px; height: 16px; }
.key-play { --s: 66px; margin: 0 2px; }
.key-play svg { width: 28px; height: 28px; }
.key-play::after {           /* LED ring, lit while playing */
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(143, 227, 255, 0);
  transition: box-shadow .35s;
  pointer-events: none;
}
.is-playing .key-play::after { box-shadow: 0 0 0 2px var(--ice), 0 0 16px 3px rgba(143, 227, 255, .6); }
.is-playing .key-play { color: #0d7fb3; }
.i-pause { display: none; }
.is-playing .key-play .i-play, .is-playing .key-mplay .i-play { display: none; }
.is-playing .key-play .i-pause, .is-playing .key-mplay .i-pause { display: block; }
.led {
  position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #6a7480;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.45);
  transition: background .2s, box-shadow .2s;
}
.key[aria-pressed="true"] .led { background: var(--ice); box-shadow: 0 0 6px 1px rgba(143, 227, 255, .95); }
.key[aria-pressed="true"] { color: #0d7fb3; }

.vol { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.vol input { width: 84px; height: 20px; }
.vol input::-webkit-slider-runnable-track { height: 6px; }
.vol input::-moz-range-track { height: 6px; }
.vol input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; }
.vol input::-moz-range-thumb { width: 16px; height: 16px; }
.i-mute { display: none; }
.is-muted .i-vol { display: none; }
.is-muted .i-mute { display: block; }
.no-volume .vol { display: none; }

/* =========================================================
   Tracks — jewel cases with the disc peeking out
   ========================================================= */

.tracks {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) 20px clamp(96px, 12vw, 150px);
}
.tracks-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.4vw, 40px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(86, 98, 114, .28);
  box-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.tracks-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .03em;
  color: #2a313b;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
  gap: 46px 30px;
}
.trk-btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.trk-btn:focus-visible { outline-offset: 8px; }

.case {
  position: relative;
  display: block;
  aspect-ratio: 1 / .86;
}
.case-disc {
  position: absolute;
  top: 50%; left: 11%;
  width: 78%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  overflow: hidden;
  background: #151a20;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 3px 8px rgba(18, 26, 38, .45);
  transition: left .55s var(--ease-out);
}
.case-disc img { width: 100%; height: 100%; object-fit: cover; }
.case-disc::before {         /* rainbow */
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: conic-gradient(from 230deg, rgba(255,120,200,0), rgba(255,140,210,.3) 8%, rgba(120,220,255,.36) 15%, rgba(150,255,190,.26) 22%, rgba(255,240,140,.28) 29%, rgba(255,120,200,0) 38%, rgba(255,120,200,0) 100%);
  mix-blend-mode: screen;
}
.case-disc::after {          /* hub */
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, #d6dbe2 0 6.5%, rgba(232,238,244,.95) 7% 8.4%, rgba(196,206,218,.45) 8.8% 15.4%, rgba(255,255,255,.7) 15.8% 16.6%, transparent 17.2%);
}
.case-art {
  position: absolute; inset: 0 auto 0 0;
  width: 86%;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
  background: #9aa3ae;
  box-shadow:
    0 0 0 1px rgba(28, 34, 44, .4),
    0 14px 20px -12px rgba(22, 30, 44, .6),
    0 3px 5px rgba(22, 30, 44, .2);
}
.case-art img { width: 100%; height: 100%; object-fit: cover; }
.case-art::after {           /* jewel-case plastic: hinge + gloss */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.34) 0 2.6%, rgba(0,0,0,.28) 2.6% 3.2%, rgba(255,255,255,.12) 3.2% 4%, transparent 4%),
    linear-gradient(128deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 30.5%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  pointer-events: none;
}
@media (hover: hover) {
  .trk-btn:hover .case-disc { left: 22%; }
}
.trk-btn:focus-visible .case-disc,
.has-started .trk.is-current .case-disc { left: 22%; }

.meta {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  margin-top: 14px;
  padding-right: 14%;
}
.meta-title { font-size: 17px; line-height: 1.3; color: var(--gunmetal); min-width: 0; overflow-wrap: anywhere; }
.meta-dur { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.meta-artist { grid-column: 1 / -1; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.has-started .trk.is-current .meta-title { color: #0b6f9e; }

.eq { display: none; gap: 2px; align-items: flex-end; height: 14px; margin-top: 4px; }
.eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--ice-2); transform-origin: bottom; transform: scaleY(.35); }
.has-started .trk.is-current .eq { display: inline-flex; }
.has-started .trk.is-current .meta-dur { display: none; }
.is-playing .trk.is-current .eq i { animation: eq .9s ease-in-out infinite alternate; }
.is-playing .trk.is-current .eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.2s; }
.is-playing .trk.is-current .eq i:nth-child(3) { animation-duration: .75s; animation-delay: -.4s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

.trk.is-error .meta-dur::after { content: " · unavailable"; }
.noscript { color: var(--ink-2); }

/* =========================================================
   Footer
   ========================================================= */

.foot {
  padding: 28px 20px calc(110px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #2a3039;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.foot p { margin: 0; }

/* =========================================================
   Mini player — appears when the deck scrolls away
   ========================================================= */

.mini {
  position: fixed;
  left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 50;
  width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(250, 251, 253, .9), rgba(212, 218, 226, .92));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -2px 4px rgba(60, 72, 88, .18),
    0 0 0 1px rgba(92, 104, 120, .5),
    0 18px 36px -14px rgba(24, 34, 50, .55);
  translate: -50% 160%;
  opacity: 0;
  transition: translate .45s var(--ease-out), opacity .3s;
}
.mini.is-visible { translate: -50% 0; opacity: 1; }
.mini-disc {
  flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  overflow: hidden; position: relative;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(80, 90, 105, .5);
}
.mini-disc img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.mini-disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #dfe3e9 0 9%, rgba(255,255,255,.8) 10% 13%, transparent 14%);
}
.mini-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mini-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-artist { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-keys { flex: none; display: flex; align-items: center; gap: 8px; }
.key-mplay { --s: 46px; }
.key-mplay svg { width: 20px; height: 20px; }
.is-playing .key-mplay { color: #0d7fb3; }
.mini-progress {
  position: absolute; left: 30px; right: 30px; bottom: 2px; height: 2px;
  border-radius: 2px; overflow: hidden;
  background: rgba(60, 72, 88, .16);
}
.mini-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #1fa6e6, var(--ice)); transform-origin: left; transform: scaleX(0); }

/* =========================================================
   Dark-mode moon — click to turn the dark version on and off
   ========================================================= */

/* Top right, never touching the silver ring. On most screens the ring holds the corner
   (and drifts toward the mouse), so the moon sits just left of it; on wide screens the
   corner itself is clear and the moon goes there. */
.moon {
  position: absolute;
  z-index: 40;
  top: max(6px, env(safe-area-inset-top));
  right: calc(5vw + clamp(120px, 13vw, 210px) + 4px);   /* just left of the ring */
  width: 52px; height: 52px;         /* comfortable tap target around a small moon */
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: word-in 1.2s .45s var(--ease-out) both;
}
@media (max-width: 760px) { .moon { right: calc(15vw + 4px); } }     /* phones: the ring sits further right */
@media (max-width: 699px) { .moon { width: 44px; height: 44px; } }
@media (min-width: 1440px) { .moon { right: max(6px, env(safe-area-inset-right)); } }   /* wide screens: the corner */
.moon:focus-visible { outline-offset: -4px; }
.moon svg {
  width: clamp(22px, 1.9vw, 30px); height: auto; aspect-ratio: 1;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(24, 34, 48, .35)) drop-shadow(0 0 0 rgba(143, 227, 255, 0));
  transition: transform .45s cubic-bezier(.34, 1.45, .5, 1), filter .4s;
}
.moon-off { stroke: rgba(40, 50, 64, .55); stroke-width: .8; transition: opacity .35s; }
.moon-on { opacity: 0; transition: opacity .35s; }
.moon-star {
  fill: #fff; opacity: 0;
  transform-origin: 18.6px 5.45px; transform: scale(.3);
  transition: opacity .35s .1s, transform .5s .1s cubic-bezier(.34, 1.45, .5, 1);
}
@media (hover: hover) {
  .moon:hover svg { transform: rotate(-14deg) scale(1.08); }
}
.moon:active svg { transform: scale(.88); }

/* switching: the new look spreads out from the moon (js/site.js) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* =========================================================
   Menu — an LCD readout, the same glass as the player's display
   ========================================================= */

.site-nav, .nav-btn, .nav-drop {
  position: absolute; z-index: 45; left: 0; right: 0; margin-inline: auto; width: max-content;   /* centred */
  overflow: hidden;
  font: 500 15px/1 var(--font-lcd);
  color: var(--ice); text-shadow: 0 0 6px rgba(143, 227, 255, .55);
  background: radial-gradient(130% 140% at 25% 0%, #0d2a3b 0%, #071a26 46%, var(--lcd) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.65), inset 0 8px 16px rgba(0,0,0,.5),
    0 0 0 3px #a9b1bc, 0 0 0 4px rgba(255,255,255,.85), 0 0 0 5px rgba(70, 80, 95, .35),
    0 16px 26px -12px rgba(22, 32, 46, .6);
  animation: word-in 1.2s .4s var(--ease-out) both;
}
.site-nav::before, .nav-btn::before, .nav-drop::before {     /* pixel grid */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(rgba(0, 8, 14, .32) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 8, 14, .32) 1px, transparent 1px);
  background-size: 2px 2px;
}
.site-nav::after, .nav-btn::after, .nav-drop::after {       /* glass glare */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(165deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,0) 39%);
}
.site-nav { top: 16px; display: flex; align-items: center; gap: 22px; padding: 10px 18px 9px 16px; border-radius: 10px 20px 10px 10px; }
.site-nav a, .nav-drop a {
  position: relative; padding-left: 14px;
  color: inherit; text-decoration: none; text-transform: uppercase; letter-spacing: .06em;
  opacity: .62; transition: opacity .2s, text-shadow .2s;
}
.site-nav a::before, .nav-drop a::before {                  /* ▶ cursor on the page you're on */
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 10px; margin-top: -5.5px;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0;
}
.site-nav a[aria-current], .nav-drop a[aria-current] { opacity: 1; text-shadow: 0 0 8px rgba(143, 227, 255, .8); }
.site-nav a[aria-current]::before, .nav-drop a[aria-current]::before { opacity: 1; }
@media (hover: hover) {
  .site-nav a:hover, .nav-drop a:hover { opacity: 1; text-shadow: 0 0 8px rgba(143, 227, 255, .8); }
}
.site-nav a:focus-visible, .nav-drop a:focus-visible { outline: none; opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.nav-btn, .nav-drop { display: none; }

@media (max-width: 699px) {          /* phones: an LCD "MENU" chip opens the list */
  .site-nav { display: none; }
  .nav-btn {
    display: flex; align-items: center;
    top: max(12px, env(safe-area-inset-top)); height: 30px; padding: 0 14px 0 26px;
    border: 0; border-radius: 8px 14px 8px 8px; cursor: pointer;
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ice); -webkit-tap-highlight-color: transparent;
  }
  .nav-btn i {
    position: absolute; left: 12px; top: 50%; width: 6px; height: 8px; margin-top: -4px;
    background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: transform .2s var(--ease-out);
  }
  .nav-btn[aria-expanded="true"] i { transform: rotate(90deg); }
  .nav-drop.is-open {                /* a compact list under the chip; ends well above the player */
    display: grid;
    top: calc(max(12px, env(safe-area-inset-top)) + 38px); padding: 6px 14px 6px 10px;
    border-radius: 8px 14px 8px 8px;
    animation: none;
    transition: opacity .18s, transform .18s var(--ease-out);
    @starting-style { opacity: 0; transform: translateY(-4px); }
  }
  .nav-drop a { display: flex; align-items: center; height: 30px; padding-left: 16px; font-size: 13px; }
  .nav-drop a::before { left: 2px; width: 6px; height: 9px; margin-top: -4.5px; }
}

/* =========================================================
   Gear + Contact pages
   ========================================================= */

body.pg-page .moon { right: max(6px, env(safe-area-inset-right)); }   /* no ring up here: the corner is free */
body.pg-page .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
body.pg-page main.pg { min-height: calc(100vh - 96px); min-height: calc(100svh - 96px); }   /* the white fills the screen on short pages too */

.pg {
  position: relative; isolation: isolate; overflow: clip;
  padding: 0 20px;
  background:
    radial-gradient(70% 420px at 50% 120px, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(140% 900px at 50% 0, #f4f6f9 0%, #e1e5eb 46%, rgba(203, 210, 219, 0) 100%);
}
.pg-logo { position: absolute; z-index: 46; top: 18px; left: max(22px, env(safe-area-inset-left)); display: block; width: 118px; line-height: 0; animation: word-in 1.2s var(--ease-out) both; }
.pg-logo img { width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(36, 46, 62, .25)); }

.pg .obj { z-index: -1; pointer-events: none; }
.pg .deco-blob    { right: -70px; top: 92px; width: clamp(150px, 18vw, 270px); }
.pg .deco-bead-a  { left: 17%; top: 168px; width: 34px; }
.pg .deco-bead-b  { left: 9%; top: 300px; width: 18px; }
.pg .deco-cluster { left: -4vw; top: 330px; width: clamp(200px, 24vw, 380px); }
.pg .deco-ring    { right: 7vw; top: 300px; width: clamp(110px, 12vw, 190px); }
.pg .deco-bead-c  { right: 18%; top: 640px; width: 28px; }
.pg .deco-bead-d  { left: 15%; top: 250px; width: 22px; }

.pg-head { position: relative; padding: 132px 0 56px; text-align: center; }
.chrome-title {                       /* liquid-chrome lettering */
  margin: 0; padding-left: .06em;
  font: 500 clamp(64px, 10.5vw, 156px)/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #fdfdfe 0%, #d3d9e0 34%, #59636f 49%, #eef1f4 57%, #98a2ae 84%, #d0d6dd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(40, 50, 64, .5);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)) drop-shadow(0 16px 20px rgba(24, 34, 48, .3));
  animation: word-in 1.2s .1s var(--ease-out) both;
}
.pg-intro { margin: 18px 0 0; font-size: 18px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }

.lcd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 5px; border-radius: 6px 10px 6px 6px;
  font: 500 12px/1 var(--font-lcd); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ice); text-shadow: 0 0 6px rgba(143, 227, 255, .55);
  background: radial-gradient(130% 140% at 25% 0%, #0d2a3b 0%, #071a26 46%, var(--lcd) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), inset 0 4px 8px rgba(0,0,0,.5), 0 0 0 2px #a9b1bc, 0 0 0 3px rgba(255,255,255,.85), 0 0 0 4px rgba(70, 80, 95, .3);
}
.lcd-chip b { font-weight: 500; opacity: .62; }

/* Gear: a rack of brushed-aluminium units */
.rack {
  list-style: none; margin: 0 auto; padding: 0 0 120px;
  max-width: 1180px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
}
/* Gear + plugins cards: a photo of a brushed-aluminium plate (its screws and LED included), drawn
   as a 9-slice so the corners keep their size whatever the card's height or width. */
.unit {
  position: relative;
  border: 0 solid transparent;
  border-image: url("../img/silver/plate.webp") 154 138 108 108 fill / 42px 38px 30px 30px stretch;
  filter: drop-shadow(0 22px 20px rgba(30, 40, 56, .26)) drop-shadow(0 6px 7px rgba(30, 40, 56, .2));
}
.unit .screw, .unit .unit-top .led { display: none; }   /* the photo has its own */
.unit { display: flex; flex-direction: column; padding: 30px 30px 28px; color: var(--gunmetal); }
.screw {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #c9d0d8 50%, #7d8693 100%);
  box-shadow: 0 0 0 1px rgba(60, 70, 84, .45), 0 1px 0 1px rgba(255,255,255,.7);
}
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.4px; margin-top: -.7px; background: rgba(40, 48, 60, .55); transform: rotate(-30deg); }
.screw.tl { top: 13px; left: 13px; } .screw.tr { top: 13px; right: 13px; }
.screw.bl { bottom: 13px; left: 13px; } .screw.br { bottom: 13px; right: 13px; }
.unit-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 4px 0 24px; }
.unit .led { width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px 2px rgba(143, 227, 255, .85), inset 0 1px 1px rgba(255,255,255,.6); }
.unit h2 { position: relative; margin: 0; font-size: 27px; font-weight: 500; line-height: 1.15; letter-spacing: .01em; color: var(--gunmetal); text-shadow: 0 1px 0 rgba(255,255,255,.85); }
.unit-type { position: relative; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #2a3039; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.unit-desc { position: relative; margin: 18px 0 22px; font-size: 15.5px; font-weight: 600; line-height: 1.6; color: #171b22; text-shadow: 0 1px 0 rgba(255,255,255,.55); text-wrap: pretty; }
.chips { position: relative; list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 7px 11px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #2a3039;
  background: linear-gradient(180deg, rgba(40, 50, 64, .07), rgba(255,255,255,.35));
  box-shadow: inset 0 1px 2px rgba(36, 46, 60, .28), 0 1px 0 rgba(255,255,255,.85);
}

/* Contact: a chrome pager */
.contact-stage { position: relative; display: grid; justify-items: center; padding: 0 0 140px; }
.pager-wrap { position: relative; isolation: isolate; width: min(560px, 100%); }
.pg .pager-swoosh { z-index: -1; width: 172%; left: -36%; top: 10%; }
.pg .pager-swoosh img { filter: drop-shadow(0 22px 16px rgba(40, 52, 70, .16)); }
/* The pager is a photo of the real thing; the screen text and the button are live on top of it.
   Positions are percentages of the photo, type scales with the pager's width (cqw). */
.pager {
  position: relative; width: min(100%, calc(297px * 1661 / 955)); margin-inline: auto; aspect-ratio: 1661 / 955;   /* same 297px height as the old pager */
  container-type: inline-size;
  background: url("../img/silver/pager-v2.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 26px 24px rgba(30, 40, 56, .3)) drop-shadow(0 8px 10px rgba(30, 40, 56, .2));
}
.pager-lcd {
  position: absolute; left: 5.659%; top: 10.576%; width: 88.682%; height: 50.576%;
  font-family: var(--font-lcd); color: var(--ice); text-shadow: 0 0 6px rgba(143, 227, 255, .55);
}
.pager-row { position: absolute; left: 5.2%; right: 5.2%; top: 13%; display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: max(10px, 2.3cqw); letter-spacing: .08em; opacity: .9; }
.pager-bars { display: flex; align-items: flex-end; gap: .25em; height: 1em; }
.pager-bars i { width: .32em; background: currentColor; }
.pager-bars i:nth-child(1) { height: 30%; } .pager-bars i:nth-child(2) { height: 55%; } .pager-bars i:nth-child(3) { height: 80%; } .pager-bars i:nth-child(4) { height: 100%; }
.pager-handle { position: absolute; left: 5.2%; top: 50%; margin: 0; transform: translateY(-52%); font-size: 9.4cqw; line-height: 1; white-space: nowrap; text-shadow: 0 0 10px rgba(143, 227, 255, .7); }
.pager-handle.is-email { font-size: 6.4cqw; }   /* the email address is longer than the old @handle */
.pager-handle .cursor { display: inline-block; width: .5em; height: .1em; margin-left: .08em; background: currentColor; vertical-align: baseline; animation: blink 1s steps(2, start) infinite; }
.pager-sub { position: absolute; left: 5.2%; bottom: 13%; margin: 0; font-size: max(10px, 2.3cqw); letter-spacing: .08em; opacity: .62; }
.pager-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 24px; height: 58px; border-radius: 999px;
  font-size: 14px; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--gunmetal);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f6f8fa 0%, #dde2e8 45%, #c3cad3 62%, #e9ecf0 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -3px 4px rgba(56, 66, 80, .3), 0 0 0 1px rgba(76, 86, 100, .6), 0 8px 14px -6px rgba(24, 34, 48, .5), 0 1px 0 1px rgba(255,255,255,.7);
  transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
}
.pager-btn:active { transform: translateY(1px) scale(.99); box-shadow: inset 0 2px 5px rgba(36, 46, 60, .5), 0 0 0 1px rgba(76, 86, 100, .6), 0 1px 0 1px rgba(255,255,255,.7); }
.pager-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pager .pager-btn {                   /* sits on the photo's own pill button */
  position: absolute; left: 6.141%; top: 68.482%; width: 87.176%; height: 19.686%; margin: 0;
  font-size: max(11px, 2.45cqw); color: #2a313b; text-shadow: 0 1px 0 rgba(255,255,255,.75);
  background: none; box-shadow: none;
}
.pager .pager-btn:hover { background: radial-gradient(60% 90% at 50% 30%, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.pager .pager-btn:active { transform: translateY(1px); background: rgba(36, 46, 60, .07); box-shadow: inset 0 2px 7px rgba(36, 46, 60, .32); }
.pager .pager-btn:focus-visible { outline-offset: 2px; }
.pager .pager-btn svg { width: 1.15em; height: 1.15em; }
.contact-note { margin: 34px 0 0; font-size: 17px; font-weight: 600; color: var(--ink-2); text-align: center; }
.contact-note a { color: inherit; }
.studio-head { max-width: 760px; margin: 0 auto; }
.studio-head h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; line-height: 1.2; letter-spacing: .02em;
  color: #2a313b; text-shadow: 0 1px 0 rgba(255,255,255,.85);
  animation: word-in 1.2s .1s var(--ease-out) both;
}
.studio-head p { max-width: 580px; margin: 18px auto 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
html[data-theme="dark"] .studio-head h1 { color: #eef1f5; text-shadow: none; }
html[data-theme="dark"] .studio-head p { color: #9aa4b1; }

@media (max-width: 760px) {
  .rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
  .pg { padding: 0 16px; }
  .pg-logo { top: 14px; left: max(16px, env(safe-area-inset-left)); width: 74px; }
  .pg-head { padding: 112px 0 38px; }
  .pg-intro { font-size: 16px; }
  .rack { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 80px; }
  .unit { padding: 26px 22px 24px; }
  .unit h2 { font-size: 24px; }
  .unit-desc { font-size: 15px; }
  .pager-btn { height: 54px; font-size: 13px; letter-spacing: .22em; }
  .pager .pager-btn { letter-spacing: .18em; }
  .contact-stage { padding-bottom: 100px; }
  .pg .deco-blob { width: 104px; right: -46px; top: 58px; }
  .pg .deco-bead-a { left: 7%; top: 74px; width: 22px; }
  .pg .deco-bead-b, .pg .deco-cluster, .pg .deco-ring, .pg .deco-bead-d { display: none; }
  .pg .deco-bead-c { right: 8%; top: 560px; width: 22px; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {
  .obj-cluster { width: 44vw; left: -21vw; top: -3%; }
  .obj-ring { width: 21vw; right: -6vw; top: 1%; }
  .obj-blob { width: 30vw; right: -13vw; bottom: 2%; }
  .bead-1 { width: 30px; right: -4px; bottom: -26px; }
  .bead-2, .bead-3 { display: none; }
}

@media (max-width: 640px) {
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .wordmark { width: min(520px, 92vw); }

  .deck {
    --h: auto;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "disc lcd"
      "seek seek"
      "ctrl ctrl";
    gap: 14px 14px;
    height: auto;
    padding: 14px 14px 16px;
    border-radius: 64px 30px 34px 34px;
  }
  .deck-panel { display: contents; }
  .deck-disc { grid-area: disc; width: 104px; height: 104px; align-self: center; }
  .disc-window { width: 104px; }
  .disc-well, .lid { inset: 6px; }
  .lcd { grid-area: lcd; align-self: center; padding: 8px 10px 7px; border-radius: 10px 18px 10px 10px; }
  .lcd-top { font-size: 10px; }
  .lcd-flags { gap: 5px; }
  .lcd-title { font-size: 18px; margin-top: 5px; }
  .lcd-artist { font-size: 12px; }
  .lcd-bottom { margin-top: 6px; }
  .lcd-viz { width: 80px; flex-basis: 80px; height: 20px; }
  .lcd-time { font-size: 14px; }
  .lcd-dim { font-size: 11px; }
  .seek { grid-area: seek; padding: 0 4px; }
  .controls { grid-area: ctrl; justify-content: center; gap: 14px; }
  .vol { display: none; }

  .tracks { padding-left: 16px; padding-right: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
  .meta { padding-right: 10%; margin-top: 10px; }
  .meta-title { font-size: 15px; }
  .meta-artist { font-size: 13px; }
  .meta-dur { font-size: 12px; line-height: 1.7; }
}

@media (max-width: 360px) {
  .controls { gap: 8px; }
  .key-play { --s: 58px; }
}

/* =========================================================
   Dark version — same chrome, black backdrop
   (turned on with <html data-theme="dark">)
   ========================================================= */

html[data-theme="dark"] { background: #000; color-scheme: dark; }
html[data-theme="dark"] body { color: #eef1f5; background: #000; }
html[data-theme="dark"] .hero {
  background:
    radial-gradient(80% 55% at 50% 34%, rgba(150, 170, 200, .10) 0%, rgba(150, 170, 200, 0) 70%),
    #000;
}
html[data-theme="dark"] .hero::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 20%, rgba(255,255,255,.14) 80%, transparent);
  box-shadow: none;
}
html[data-theme="dark"] .orbits { opacity: .45; }
html[data-theme="dark"] .tracks-head { border-bottom-color: rgba(255,255,255,.14); box-shadow: none; }
html[data-theme="dark"] .tracks-head h2 { color: #e9edf2; text-shadow: none; }
html[data-theme="dark"] .meta-title { color: #eef1f5; }
html[data-theme="dark"] .meta-artist,
html[data-theme="dark"] .meta-dur { color: #9aa4b1; }
html[data-theme="dark"] .has-started .trk.is-current .meta-title { color: var(--ice); }
html[data-theme="dark"] .case-art {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 14px 20px -12px rgba(0,0,0,.8),
    0 3px 5px rgba(0,0,0,.4);
}
html[data-theme="dark"] .foot { color: #8a94a3; text-shadow: none; }
html[data-theme="dark"] .mini { color: var(--gunmetal); }
html[data-theme="dark"] .skip { background: #eef1f5; color: #0b0d10; }
html[data-theme="dark"] .noscript { color: #9aa4b1; }
html[data-theme="dark"] .pg { background: radial-gradient(70% 420px at 50% 120px, rgba(150, 170, 200, .10) 0%, rgba(150, 170, 200, 0) 100%), #000; }
html[data-theme="dark"] .chrome-title { -webkit-text-stroke: 1px rgba(255,255,255,.18); filter: drop-shadow(0 0 24px rgba(143, 227, 255, .12)); }
html[data-theme="dark"] .pg-intro,
html[data-theme="dark"] .contact-note { color: #9aa4b1; }

html[data-theme="dark"] .moon svg { filter: drop-shadow(0 0 3px rgba(143, 227, 255, .95)) drop-shadow(0 0 10px rgba(143, 227, 255, .55)); }
html[data-theme="dark"] .moon-off { opacity: 0; }
html[data-theme="dark"] .moon-on { opacity: 1; }
html[data-theme="dark"] .moon-star { opacity: 1; transform: none; }

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .obj { translate: none; scale: none; }
  .glint { display: none; }
}

/* gear photos, in the site's ice-blue chrome, next to each name */
.unit-name { position: relative; display: flex; align-items: center; gap: 12px; }
.unit-name > div { flex: 1; min-width: 0; }
.unit-pic { flex: none; position: relative; width: 112px; height: 112px; margin: -10px -8px -10px 0; }
.unit-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(24, 34, 48, .35)) drop-shadow(0 2px 2px rgba(24, 34, 48, .25)); }
@media (max-width: 640px) { .unit-pic { width: 104px; height: 104px; } }
.studio-head.wide { max-width: 1040px; }

/* =========================================================
   Plugins — product panel with an LCD price readout
   ========================================================= */
.product {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: start;
  max-width: 1180px; margin: 0 auto 30px; padding: 44px 44px 40px; border-radius: 36px;
}
.product-shot { position: relative; align-self: stretch; display: grid; place-items: center; min-height: 340px; }
.product-shot img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(60, 70, 84, .45), 0 24px 40px -20px rgba(24, 34, 48, .6); }
.shot-screen, .price-lcd {
  position: relative; overflow: hidden;
  font-family: var(--font-lcd); color: var(--ice); text-shadow: 0 0 6px rgba(143, 227, 255, .55);
  background: radial-gradient(130% 140% at 25% 0%, #0d2a3b 0%, #071a26 46%, var(--lcd) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), inset 0 8px 16px rgba(0,0,0,.5), 0 0 0 3px #a9b1bc, 0 0 0 4px rgba(255,255,255,.85), 0 0 0 5px rgba(70, 80, 95, .35);
}
.shot-screen::before, .price-lcd::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(rgba(0, 8, 14, .32) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 8, 14, .32) 1px, transparent 1px); background-size: 2px 2px; }
.shot-screen::after, .price-lcd::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(165deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,0) 39%); }
.shot-screen {
  width: 100%; height: 100%; min-height: 340px; border-radius: 22px 40px 22px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.shot-name { font-size: clamp(56px, 7vw, 96px); line-height: 1; letter-spacing: .04em; text-shadow: 0 0 14px rgba(143, 227, 255, .75); }
.shot-sub { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.shot-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: 18px; }
.shot-bars i { width: 8px; background: currentColor; opacity: .85; animation: bar 1.6s ease-in-out infinite alternate; }
.shot-bars i:nth-child(odd) { animation-duration: 1.15s; }
.shot-bars i:nth-child(3n) { animation-duration: 1.9s; }
.shot-bars i:nth-child(1) { height: 30%; } .shot-bars i:nth-child(2) { height: 55%; } .shot-bars i:nth-child(3) { height: 80%; }
.shot-bars i:nth-child(4) { height: 65%; } .shot-bars i:nth-child(5) { height: 95%; } .shot-bars i:nth-child(6) { height: 70%; }
.shot-bars i:nth-child(7) { height: 45%; } .shot-bars i:nth-child(8) { height: 85%; } .shot-bars i:nth-child(9) { height: 60%; }
.shot-bars i:nth-child(10) { height: 40%; } .shot-bars i:nth-child(11) { height: 25%; } .shot-bars i:nth-child(12) { height: 15%; }
@keyframes bar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.shot-bars i { transform-origin: bottom; }

.product-info { position: relative; display: flex; flex-direction: column; }
.product h2 { font-size: clamp(36px, 4vw, 52px); }
.product .unit-desc { margin: 16px 0 0; }
.product .unit-type { margin-top: 10px; }
.product .chips { margin: 22px 0 0; }

.buy { position: relative; margin-top: 30px; }
.price-lcd { padding: 16px 20px 18px; border-radius: 14px 26px 14px 14px; }
.price-row { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.price-was { opacity: .6; }
.price-was s { text-decoration-thickness: 2px; }
.price-now { margin: 12px 0 6px; font-size: clamp(40px, 5vw, 56px); line-height: 1; text-shadow: 0 0 12px rgba(143, 227, 255, .75); }
.price-now span { font-size: .32em; letter-spacing: .1em; opacity: .7; }
.price-sub { margin: 0; font-size: 13px; letter-spacing: .06em; opacity: .62; }
.buy-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.buy-btn { width: 100%; border: 0; cursor: pointer; font-family: var(--font); }
.buy-btn svg { width: 18px; height: 18px; stroke-width: 1.9; }
.buy-paypal b { margin-left: -.5em; font-weight: 700; letter-spacing: .02em; text-transform: none; font-style: italic; color: #003087; text-shadow: none; }
.buy-paypal b::after { content: ""; }
.buy-note { margin: 18px 0 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: #2a3039; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.buy-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; color: #2a313b; background: rgba(143, 227, 255, .28); box-shadow: inset 0 0 0 1px rgba(60, 120, 150, .3); }
.buy-msg a { color: inherit; }

.feats { margin-top: 0; }
.feats .unit h2 { font-size: 24px; }
.feats .unit-desc { margin-bottom: 4px; }

.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 8px !important; font-size: 13px; }
.foot-legal a { color: inherit; opacity: .75; text-decoration: none; }
.foot-legal a:hover { opacity: 1; text-decoration: underline; }

/* legal pages */
.legal { position: relative; max-width: 760px; margin: 0 auto; padding: 0 0 120px; color: var(--ink-2); font-size: 16px; font-weight: 600; line-height: 1.7; }
.legal h2 { margin: 36px 0 8px; font-size: 21px; font-weight: 500; color: #2a313b; }
.legal a { color: inherit; }
html[data-theme="dark"] .legal h2 { color: #eef1f5; }
html[data-theme="dark"] .legal { color: #b4bcc7; }

@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 36px 30px 32px; }
  .product-shot, .shot-screen { min-height: 240px; }
}
@media (max-width: 640px) {
  .product { padding: 26px 18px 24px; margin-bottom: 18px; }
  .product-shot, .shot-screen { min-height: 200px; }
  .buy-btns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .legal { font-size: 15.5px; padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .shot-bars i { animation: none; } }
.product-shot { align-self: center; min-height: 0; }
.shot-screen { aspect-ratio: 5 / 4; height: auto; min-height: 0; }
.buy-btns .pager-btn { margin-top: 14px; }
@media (max-width: 900px) { .product-shot, .shot-screen { min-height: 0; } .shot-screen { aspect-ratio: 16 / 9; } }

/* Plugins: the product shot sits across the top of the card, details and buying side by side underneath */
.product {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "top top" "shot shot" "info buy";
  gap: 6px 52px; align-items: start; padding: 34px 44px 42px;
}
.product-top { grid-area: top; margin: 4px 0 0; }
.product-shot { grid-area: shot; display: block; min-height: 0; align-self: auto; margin: 0 0 22px; }
.product-shot img { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; border-radius: 0; box-shadow: none; }
.product-info { grid-area: info; }
.product .buy { grid-area: buy; margin-top: 6px; }
@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "shot" "info" "buy"; padding: 30px 28px 32px; }
  .product .buy { margin-top: 28px; }
}
@media (max-width: 640px) {
  .product { padding: 24px 18px 24px; }
  .product-shot { margin: 4px -6px 14px; }
}

/* Gear: line drawings traced from photos of the real units, in the gunmetal of the type */
.unit-pic.ol { color: #4a5361; }
.unit-pic.ol.wide { width: 158px; }
.unit-pic.ol svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.unit-pic.ol svg * { fill: none; stroke: currentColor; stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.unit-pic.ol svg .thin { stroke-width: .8px; opacity: .85; }
.unit-pic.ol svg .dot { fill: currentColor; stroke: none; }
@media (max-width: 640px) { .unit-pic.ol.wide { width: 140px; } }
/* the Suave shot is a photo on a black backdrop: frame it like a print set into the panel */
.product-shot img {
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(40, 48, 60, .55), 0 1px 0 1px rgba(255, 255, 255, .7), 0 26px 44px -26px rgba(20, 28, 40, .7);
}
@media (max-width: 640px) { .product-shot { margin: 4px 0 14px; } .product-shot img { border-radius: 12px; } }

/* =========================================================
   The deck, photo edition
   Wider screens: the player is a photo of the real unit; the disc, screen text,
   keys, seek and volume are live on top of it (positions are % of the photo,
   type scales with the deck's width via cqw).
   Phones keep the tappable stacked layout, dressed in parts of the same photo.
   ========================================================= */
@media (min-width: 641px) {
  .deck {
    display: block; height: auto; aspect-ratio: 1836 / 779;
    width: min(100%, calc(280px * 1836 / 779)); margin-inline: auto;   /* same 280px height as the old deck */
    border-radius: 0;
    background: url("../img/silver/deck-v2.webp") center / 100% 100% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 30px 26px rgba(30, 40, 56, .3)) drop-shadow(0 10px 10px rgba(30, 40, 56, .22));
    container-type: inline-size;
  }
  .deck::before { display: none; }
  .deck-disc { position: absolute; left: 5.79%; top: 16.611%; width: 28.758%; height: auto; aspect-ratio: 1; }
  .disc-window { width: 100%; background: none; box-shadow: none; }
  .disc-well { inset: 0; background: none; box-shadow: none; overflow: visible; }
  .disc { inset: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 5px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); }
  .disc-well::after { inset: 0; opacity: .8; }
  .lid { inset: 0; background: radial-gradient(120% 80% at 30% 12%, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 35%); box-shadow: none; }

  .deck-panel { position: absolute; inset: 0; display: block; padding: 0; }
  .lcd {
    position: absolute; left: 40.087%; top: 9.756%; width: 58.007%; height: 40.95%;
    padding: 1.75cqw 2.3cqw 1.3cqw; border-radius: 0;
    background: none; box-shadow: none; overflow: hidden;
  }
  .lcd::before, .lcd::after { display: none; }
  .lcd-top { font-size: 1.72cqw; }
  .lcd-flags { gap: 1.1cqw; }
  .lcd-title { margin-top: .95cqw; font-size: 3.15cqw; }
  .lcd-artist { margin-top: .25cqw; font-size: 2cqw; }
  .lcd-bottom { margin-top: .9cqw; }
  .lcd-viz { width: 21cqw; flex-basis: 21cqw; height: 3.3cqw; }
  .lcd-time { font-size: 2.45cqw; }
  .lcd-dim { font-size: 1.85cqw; }

  .seek { position: absolute; left: 39.869%; width: 57.843%; top: 58.28%; padding: 0; transform: translateY(-50%); }
  .seek input { height: 24px; }
  .seek input::-webkit-slider-runnable-track { height: 6px; }
  .seek input::-moz-range-track { height: 6px; }
  .seek input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; }
  .seek input::-moz-range-thumb { width: 18px; height: 18px; }

  .controls, .vol { display: contents; }
  .deck .key { position: absolute; width: var(--kw); height: auto; aspect-ratio: 1; margin: 0; background: none; box-shadow: none; }
  .deck .key svg { width: 40%; height: 40%; filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)); }
  .deck .key-play svg { width: 40%; height: 40%; }
  .deck .key:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 7px rgba(20, 28, 40, .45); }
  .deck .key .led { top: 3%; right: 3%; width: 6px; height: 6px; }
  #btn-shuffle { --kw: 5.044%; left: 40.261%; top: 71.784%; }
  #btn-prev    { --kw: 6.58%; left: 46.737%; top: 69.589%; }
  #btn-play    { --kw: 9.02%; left: 55.212%; top: 67.741%; }
  #btn-next    { --kw: 6.743%; left: 65.609%; top: 69.782%; }
  #btn-repeat  { --kw: 4.902%; left: 73.666%; top: 72.208%; }
  #btn-mute    { --kw: 4.749%; left: 80.496%; top: 72.645%; }
  .vol input { position: absolute; left: 86.383%; width: 12.092%; top: 78.306%; transform: translateY(-50%); }
}

/* phones: same stacked layout as before, wearing the photo's disc tray and keys */
@media (max-width: 640px) {
  .deck .disc-window { background: url("../img/silver/deck-disc.webp") center / 100% 100% no-repeat; box-shadow: 0 6px 12px -6px rgba(22, 32, 46, .55); }
  .deck .disc-well { inset: 0; background: none; box-shadow: none; }
  .deck .disc { inset: 6%; }
  .deck .disc-well::after, .deck .lid { inset: 6%; }
  .deck .key { background: center / 100% 100% no-repeat; box-shadow: 0 2px 5px -1px rgba(24, 34, 48, .45); }
  .deck .key svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)); }
  #btn-shuffle { background-image: url("../img/silver/key-shuffle.webp"); }
  #btn-prev    { background-image: url("../img/silver/key-prev.webp"); }
  #btn-play    { background-image: url("../img/silver/key-play.webp"); }
  #btn-next    { background-image: url("../img/silver/key-next.webp"); }
  #btn-repeat  { background-image: url("../img/silver/key-repeat.webp"); }
}

/* phones: the stacked player wears the photo's materials too —
   a brushed body made from the photo's metal and bevel, and the photo's own screen glass */
@media (max-width: 640px) {
  .deck {
    background: none;
    border: 0 solid transparent; border-radius: 64px 30px 34px 34px;
    border-image: url("../img/silver/deck-phone.webp") 200 110 110 200 fill / 66.67px 36.67px 36.67px 66.67px stretch;
    box-shadow: 0 30px 46px -26px rgba(30, 40, 56, .55), 0 12px 20px -12px rgba(30, 40, 56, .35);
  }
  .deck::before { display: none; }
  .lcd {
    background: none; box-shadow: none;
    border: 0 solid transparent; border-radius: 9px;
    border-image: url("../img/silver/lcd-phone.webp") 40 fill / 13.33px stretch;
  }
  .lcd::before, .lcd::after { display: none; }
}

/* =========================================================
   Plugin home: the Portfolio hero with Suave on the stage
   ========================================================= */
.home .pg-logo { width: clamp(96px, 9vw, 138px); }
.home .obj-cluster { top: 13%; }                       /* leaves the corner to the TMF logo */
.hero-product { width: min(860px, 100%); }
.product-photo { position: relative; z-index: 2; margin: 0; }
.product-photo img {                  /* the unit itself, cut out of the photo, standing in the scene */
  width: 100%; height: auto;
  filter: drop-shadow(0 30px 26px rgba(24, 34, 48, .34)) drop-shadow(0 6px 8px rgba(24, 34, 48, .22));
}
.home-rest { padding-top: 64px;
  background:                                   /* the hero's white studio light, carried down the page */
    radial-gradient(70% 520px at 50% 380px, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(60% 520px at 50% calc(100% - 380px), rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #e9ecf0 0%, #e3e7ec 60%, #dde1e7 100%); }
body.home { background: #dde1e7; }               /* the footer continues the page instead of a grey band */
html[data-theme="dark"] .home-rest { background: radial-gradient(70% 420px at 50% 120px, rgba(150, 170, 200, .10) 0%, rgba(150, 170, 200, 0) 100%), #000; }
.home-rest .deco-bead-c { right: 7vw; top: 250px; }
.home-rest .deco-ring-2 { left: 6vw; top: 140px; width: clamp(90px, 9vw, 150px); transform: rotate(-24deg); }
.product-copy { position: relative; max-width: 1060px; margin: 0 auto; text-align: center; }
.product-name { display: grid; justify-items: center; }
.product-name h2 { margin: 0; line-height: 0; color: #2a313b; }
.name-mark svg { display: block; width: clamp(140px, 12.5vw, 180px); height: auto; shape-rendering: geometricPrecision; filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)); }   /* the wordmark traced from the plugin's logo */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.product-name .unit-type { margin-top: 18px; }
.product-name .chips { justify-content: center; margin: 22px 0 0; }
.product-lead {                           /* the opening line, larger */
  max-width: 780px; margin: 52px auto 0; text-wrap: balance;
  font-size: clamp(21px, 2.1vw, 27px); font-weight: 500; line-height: 1.45; letter-spacing: .01em; color: #2a313b;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
.product-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 52px); margin: 60px 0 0; padding: 0; list-style: none; text-align: left; }
.product-points p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.75; color: var(--ink-2); }
.product-statement {                      /* the closing line, plain and larger */
  max-width: 820px; margin: 72px auto 0; text-wrap: balance;
  font: 500 clamp(26px, 3vw, 40px)/1.25 var(--font); letter-spacing: .02em; color: #2a313b;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
.buy-stage { position: relative; display: grid; justify-items: center; padding: 72px 0 110px; }
.pager-row .price-was { opacity: .6; }
.pager-handle small { font-size: .34em; letter-spacing: .1em; opacity: .7; }
.buy-stage > .buy-paypal { width: min(470px, 84%); margin-top: 20px; }
.buy-note { max-width: 540px; margin: 26px auto 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--ink-2); }
html[data-theme="dark"] .product-name h2 { color: #eef1f5; }
html[data-theme="dark"] .name-mark svg { filter: none; }
html[data-theme="dark"] .buy-note, html[data-theme="dark"] .product-points p { color: #9aa4b1; }
html[data-theme="dark"] .product-lead, html[data-theme="dark"] .product-statement { color: #e3e8ee; text-shadow: none; }
html[data-theme="dark"] .product-name .unit-type { color: #9aa4b1; text-shadow: none; }      /* on black here, not on the silver panel */
html[data-theme="dark"] .product-copy .chips li { color: #d3d9e1; text-shadow: none; background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); }
@media (max-width: 699px) {
  .home .obj-cluster { top: 38%; left: -96px; width: 190px; }
  .home-rest .deco-ring-2, .home-rest .deco-bead-c, .home-rest .deco-bead-d { display: none; }
  .home-rest { padding-top: 40px; }
  .buy-stage { padding: 56px 0 80px; }
  .product-points { grid-template-columns: 1fr; gap: 34px; margin-top: 44px; text-align: center; }
    .product-lead { margin-top: 40px; }
  .product-statement { margin-top: 56px; }
}

/* pricing page: the home page's price pager, then a short "what you get" */
.pricing-buy { padding: 8px 0 64px; }
.pricing-info ul { margin: 0; padding-left: 20px; }
.pricing-info li { margin: 4px 0; }
@media (max-width: 699px) { .pricing-page .deco-bead-c, .pricing-page .deco-bead-d { display: none; } }   /* keep beads off the text on phones */

/* free trial downloads, under the buy buttons */
.trial { width: min(470px, 84%); margin: 46px auto 0; text-align: center; }
.trial-title { margin: 0; text-wrap: balance; font-size: 18px; font-weight: 500; letter-spacing: .02em; color: #2a313b; }
.trial-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.trial-btn { margin-top: 0; height: 50px; font-size: 13px; letter-spacing: .2em; }
html[data-theme="dark"] .trial-title { color: #e3e8ee; }
.legal ol { margin: 0; padding-left: 22px; }
.legal ol li { margin: 4px 0; }

/* the pager's BUY button: same font, a little bigger and bolder */
.pager .buy-btn { font-size: max(15px, 3.7cqw); font-weight: 700; letter-spacing: .3em; padding-left: .3em; color: #1c2128;
  -webkit-text-stroke: .7px currentColor; }   /* Jura stops at 700, the stroke makes it heavier still */

/* ---------- Support centre (/support/) ---------- */
.support { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 0 120px; }
.support-search { position: relative; max-width: 560px; margin: 0 auto 72px; }
.support-search svg { position: absolute; left: 20px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: #59636f; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.support-search input {
  width: 100%; box-sizing: border-box; height: 56px; padding: 0 22px 0 52px; border: 0; border-radius: 999px;
  font: 500 17px/1 var(--font); letter-spacing: .02em; color: #1f252e; -webkit-appearance: none; appearance: none;
  background: linear-gradient(180deg, #e2e6eb 0%, #f7f8fa 100%);
  box-shadow: inset 0 2px 4px rgba(24, 34, 48, .16), inset 0 0 0 1px rgba(76, 86, 100, .32), 0 1px 0 rgba(255,255,255,.9);
}
.support-search input::placeholder { color: #7a8491; }
.support-search input:focus { outline: none; box-shadow: inset 0 2px 4px rgba(24, 34, 48, .16), inset 0 0 0 1px rgba(76, 86, 100, .5), 0 0 0 3px rgba(47, 184, 245, .35); }
.support-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 6vw, 88px); }
.support-sec h2 { margin: 0 0 14px; font-size: 22px; font-weight: 600; letter-spacing: .02em; color: #2a313b; }
.support-sec ul { margin: 0; padding: 0; list-style: none; }
.support-sec li { border-top: 1px solid rgba(76, 86, 100, .2); }
.support-sec li:last-child { border-bottom: 1px solid rgba(76, 86, 100, .2); }
.support-sec a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 2px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink-2); text-decoration: none; }
.support-sec a::after { content: "\2192"; color: #8a929d; transition: transform .15s, color .15s; }
.support-sec a:hover, .support-sec a:focus-visible { color: #1f252e; }
.support-sec a:hover::after, .support-sec a:focus-visible::after { transform: translateX(3px); color: #1f252e; }
.support-empty { margin: 0; text-align: center; font-size: 17px; font-weight: 600; color: var(--ink-2); }
.support-empty a { color: inherit; }
.support-stuck {
  max-width: 640px; margin: 96px auto 0; padding: 36px 36px 38px; border-radius: 22px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), linear-gradient(180deg, #eef1f4, #dfe3e8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(76, 86, 100, .18), 0 18px 34px -18px rgba(24, 34, 48, .45);
}
.support-stuck h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: .02em; color: #2a313b; }
.support-stuck p { margin: 12px 0 0; font-size: 16px; font-weight: 600; line-height: 1.65; color: var(--ink-2); }
.support-stuck p a { color: inherit; }
.support-stuck .pager-btn { display: inline-flex; width: min(300px, 100%); margin: 24px auto 0; padding: 0 28px; box-sizing: border-box; }
.support-head { padding-bottom: 40px; }
.studio-head .support-crumb { margin: 0 auto 14px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.support-crumb a { color: var(--ink-2); text-decoration: none; }
.support-crumb a:hover { text-decoration: underline; }
.legal.support-article { padding-bottom: 0; }
.support-article h2 { margin: 34px 0 10px; }
.support-article ol, .support-article ul { margin: 12px 0; padding-left: 24px; }
.support-article li { margin: 6px 0; }
.support-article li > ul, .support-article li > ol { margin: 6px 0; }
.support-article li > p { margin: 6px 0; }
.support-article strong { font-weight: 700; color: #2a313b; }
.support-article code { font: 600 .88em/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: .12em .4em; border-radius: 6px; background: rgba(76, 86, 100, .1); overflow-wrap: anywhere; }
.support-article pre.cmd { margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: #1f252e; color: #e3e8ee; overflow-x: auto; }
.support-article pre.cmd code { padding: 0; background: none; color: inherit; white-space: pre-wrap; word-break: break-all; }
.table-wrap { margin: 18px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.support-article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.support-article th, .support-article td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(76, 86, 100, .2); }
.support-article th { font-weight: 700; color: #2a313b; border-bottom: 2px solid rgba(76, 86, 100, .35); }
.support-article td:first-child { width: 40%; }
.support-article .support-back { margin-top: 44px; }
.support-back a { font-weight: 600; text-decoration: none; }
.support-back a:hover { text-decoration: underline; }
html[data-theme="dark"] .support-search input { color: #eef1f5; background: #0e1013; box-shadow: inset 0 0 0 1px #3a424d; }
html[data-theme="dark"] .support-search input::placeholder { color: #6f7883; }
html[data-theme="dark"] .support-search input:focus { box-shadow: inset 0 0 0 1px #59636f, 0 0 0 3px rgba(143, 227, 255, .3); }
html[data-theme="dark"] .support-search svg { stroke: #9aa4b1; }
html[data-theme="dark"] .support-sec h2, html[data-theme="dark"] .support-stuck h2,
html[data-theme="dark"] .support-article strong, html[data-theme="dark"] .support-article th { color: #eef1f5; }
html[data-theme="dark"] .support-sec a, html[data-theme="dark"] .support-empty,
html[data-theme="dark"] .support-stuck p, html[data-theme="dark"] .support-crumb a { color: #9aa4b1; }
html[data-theme="dark"] .support-sec a:hover, html[data-theme="dark"] .support-sec a:hover::after { color: #eef1f5; }
html[data-theme="dark"] .support-sec li { border-color: rgba(200, 210, 225, .14); }
html[data-theme="dark"] .support-stuck { background: #0e1013; box-shadow: 0 0 0 1px #2a3038; }
html[data-theme="dark"] .support-article code { background: rgba(200, 210, 225, .12); }
html[data-theme="dark"] .support-article th, html[data-theme="dark"] .support-article td { border-color: rgba(200, 210, 225, .16); }
@media (max-width: 699px) {
  .support-search { margin-bottom: 48px; }
  .support-sections { grid-template-columns: 1fr; gap: 40px; }
  .support-stuck { margin-top: 64px; padding: 28px 22px 30px; }
  .support-article td:first-child { width: auto; }
}
/* the PDF manual on the support page */
.support-manual {
  display: flex; align-items: center; gap: 22px; max-width: 640px; margin: -24px auto 72px; padding: 18px 22px 18px 18px; box-sizing: border-box;
  border-radius: 20px; text-decoration: none; color: inherit;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), linear-gradient(180deg, #eef1f4, #dfe3e8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(76, 86, 100, .18), 0 14px 28px -18px rgba(24, 34, 48, .45);
}
.support-manual img { width: 64px; height: auto; border-radius: 4px; box-shadow: 0 6px 14px -4px rgba(24, 34, 48, .5); }
.support-manual-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.support-manual-title { font-size: 19px; font-weight: 600; letter-spacing: .02em; color: #2a313b; }
.support-manual-meta { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.support-manual .pager-btn { flex: none; margin: 0; height: 48px; padding: 0 22px; font-size: 13px; letter-spacing: .2em; }
.support-manual:hover .pager-btn { filter: brightness(1.03); }
.support-sec a.is-pdf::after { content: "PDF \2193"; font-size: 12px; letter-spacing: .12em; }
.support-pdf { margin-top: 28px; }
html[data-theme="dark"] .support-manual { background: #0e1013; box-shadow: 0 0 0 1px #2a3038; }
html[data-theme="dark"] .support-manual-title { color: #eef1f5; }
html[data-theme="dark"] .support-manual-meta { color: #9aa4b1; }
@media (max-width: 699px) {
  .support-manual { flex-wrap: wrap; gap: 14px 16px; margin: -12px auto 48px; padding: 16px; }
  .support-manual img { width: 52px; }
  .support-manual .pager-btn { width: 100%; }
}

/* product photo on the plugin page, right above "Precision de-essing…": runs edge to edge (white photo in light mode, dark photo in dark mode) */
.photo-band { position: relative; left: 50%; width: 100vw; height: min(44vw, 800px); margin: 72px 0 0 -50vw; padding: 0; overflow: hidden; background: #fdfdfd; }
.photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.photo-band .photo-band-dark { display: none; }
html[data-theme="dark"] .photo-band { background: #0b070c; }
html[data-theme="dark"] .photo-band .photo-band-light { display: none; }
html[data-theme="dark"] .photo-band .photo-band-dark { display: block; }
@media (max-width: 699px) {
  .photo-band { height: 66vw; margin-top: 56px; }
}

/* "Send an email" in the Still stuck box: same size as before, a little bolder so it stands out */
.support-stuck .pager-btn { font-weight: 700; -webkit-text-stroke: .35px currentColor; }

/* the Contact page pager: "Send an email" same size as before, a little bolder (like the Still stuck button) */
.contact-stage .pager .pager-btn { font-weight: 700; -webkit-text-stroke: .35px currentColor; }