/* Studio 48 — its own page. The body leaves the obsidian plugin system for
   the app's materials: graphite panels with the desk's fixed wear marks, a
   wood armrest, cream meter paper, brass lit keys, and the panel lettering.
   Captures are shown as they are; motion only moves the page around them.
   Colours and recipes follow the app's src/vintage.css. */

.s48 {
  --s48-g0: #0d0c0a;
  --s48-g1: #121110;
  --s48-g2: #1b1916;
  --s48-g3: #23211d;
  --s48-g4: #2a2723;
  --s48-ivory: #efe3c2;
  --s48-ivory-lo: #c7aa6c;
  --s48-engrave: #e9e1cc;
  --s48-dim: #aa9f86;
  --s48-brass: #e2c27e;
  --s48-ink: #2a2319;
  --s48-lamp-off: #3a3024;
  --s48-amber: #f2b33d;
  --s48-paper: #e8dab5;
  --s48-panel: "DIN Condensed", "DIN Alternate", "Bahnschrift", "Arial Narrow",
    "Roboto Condensed", sans-serif;
  --s48-mono: ui-monospace, Menlo, "SF Mono", Consolas, monospace;
  --s48-gutter: clamp(16px, 4vw, 56px);
  --s48-top: var(--header-height, 88px);
  --s48-wear: url("../img/studio48-wear/panel.svg");
  color: var(--s48-engrave);
  overflow-x: clip;
}

/* ---- The room ------------------------------------------------------- */
html:has(body[data-accent="studio48"]),
body[data-accent="studio48"] {
  background: #0e0c0a;
}
body[data-accent="studio48"] .atmosphere {
  background:
    radial-gradient(70vw 60vh at 50% -10%, #e2c27e14, transparent 70%),
    radial-gradient(60vw 50vh at 100% 100%, #5732190f, transparent 70%);
}
body[data-accent="studio48"] .site-header {
  background: color-mix(in srgb, #100e0b 94%, transparent);
  border-bottom-color: #ffffff0d;
}

.s48-wrap {
  width: min(1400px, 100% - 2 * var(--s48-gutter));
  margin-inline: auto;
}
.s48-h {
  font-family: var(--s48-panel);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--s48-ivory);
  text-shadow:
    0 2px 0 #000,
    0 -1px 0 #ffffff12;
  font-size: clamp(30px, 3vw, 42px);
  margin: 0 0 0.5em;
}
.s48-h-xl {
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.9;
}
.s48-eyebrow,
.s48-kicker {
  font: 700 13px/1.4 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s48-brass);
  margin: 0 0 18px;
}
.s48-muted {
  color: var(--s48-dim);
}
.s48 p {
  max-width: 62ch;
}
.s48 p a {
  text-decoration-color: var(--s48-brass);
}

/* ---- Lamps and keys ------------------------------------------------- */
.s48-lamp {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--s48-amber);
  box-shadow:
    0 0 6px #f2b33de6,
    0 0 16px #f2b33d55;
}
.s48-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font: 700 14px/1.3 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s48-engrave);
}
.s48-status.is-free .s48-lamp {
  background: var(--s48-brass);
  box-shadow:
    0 0 6px #e2c27ee6,
    0 0 16px #e2c27e55;
}

.s48-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
/* Latching keys with a lamp strip, as on the app's meter bridge. */
.s48-key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 22px 10px;
  border-radius: 4px;
  font: 700 16px/1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e2d9c0;
  background:
    radial-gradient(55% 45% at 50% 50%, #fff0d714, #0000 75%),
    linear-gradient(180deg, #3a3732, #22201c);
  box-shadow:
    inset 0 1px 0 #ffffff21,
    0 4px 0 #0a0908,
    0 5px 6px #00000080;
  transition:
    transform 140ms var(--ease),
    background 140ms var(--ease),
    color 140ms var(--ease),
    box-shadow 140ms var(--ease);
}
.s48-key::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 22px;
  height: 3px;
  margin-left: -11px;
  border-radius: 2px;
  background: var(--s48-lamp-off);
  box-shadow: inset 0 1px 1px #000b;
  transition:
    background 140ms var(--ease),
    box-shadow 140ms var(--ease);
}
.s48-key:hover {
  color: var(--s48-ivory);
}
.s48-key:hover::before {
  background: #6b5838;
}
.s48-key:active {
  transform: translateY(2px);
}
.s48-key-lit,
.s48-key[aria-current="true"] {
  color: var(--s48-ink);
  background: linear-gradient(180deg, var(--s48-ivory), var(--s48-ivory-lo));
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 #fff6dc,
    0 1px 0 #5f5238,
    0 0 16px #e6be6e40;
}
.s48-key-lit:hover,
.s48-key[aria-current="true"]:hover {
  color: var(--s48-ink);
}
.s48-key-lit::before,
.s48-key[aria-current="true"]::before {
  background: #e2c16f;
  box-shadow: 0 0 8px #e2c16ff2;
}
.s48-key svg {
  flex: none;
  margin-top: -3px;
}
.s48 :focus-visible {
  outline: 2px solid var(--s48-brass);
  outline-offset: 4px;
}

/* ---- Hero: the plate, then the desk --------------------------------- */
.s48-hero {
  position: relative;
  padding-top: clamp(36px, 5vw, 72px);
}
.s48-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 2.4vw, 36px);
  color: var(--s48-dim);
}
.s48-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--s48-brass);
}
.s48-plate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.18em;
  margin: 0;
  font-family: var(--s48-panel);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(76px, 13.4vw, 232px);
  line-height: 0.8;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #f1e7cc;
  text-shadow:
    0 3px 0 #000,
    0 -1px 0 #ffffff1c,
    0 30px 80px #e2c27e1f;
}
.s48-plate-slash {
  color: var(--s48-brass);
  opacity: 0.8;
  font-weight: 400;
}
.s48-maker {
  margin: clamp(14px, 1.6vw, 24px) 0 0;
  font: 700 clamp(13px, 1.3vw, 19px) / 1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: #c9bb98;
}
.s48-hero-copy {
  display: grid;
  gap: 8px 64px;
  margin-top: clamp(28px, 4vw, 56px);
}
.s48-tagline {
  margin: 0;
  font:
    500 clamp(26px, 3vw, 44px) / 1.1 "Space Grotesk",
    Inter,
    sans-serif;
  letter-spacing: -0.03em;
  color: var(--s48-ivory);
  max-width: 16ch;
  text-wrap: balance;
}
.s48-lede {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: #cfc5ab;
}
@media (min-width: 960px) {
  .s48-hero-copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto;
  }
  .s48-tagline {
    grid-row: 1 / 4;
  }
  .s48-hero-copy .s48-actions {
    margin-top: 20px;
  }
  .s48-hero-copy .s48-status {
    margin-top: 12px;
  }
}

.s48-desk-room {
  position: relative;
  margin-top: clamp(36px, 4.4vw, 64px);
  padding-inline: var(--s48-gutter);
  perspective: 2000px;
}
.s48-desk-room::before {
  /* The work light over the desk. */
  content: "";
  position: absolute;
  inset: -12% 0 30%;
  background: radial-gradient(
    50% 55% at 50% 60%,
    #e2c27e1c,
    transparent 72%
  );
  pointer-events: none;
}
.s48-desk {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  transform-origin: 50% 0;
}
.s48-screen {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--s48-g0);
  box-shadow:
    0 0 0 1px #000,
    0 1px 0 1px #ffffff0f,
    0 60px 120px -40px #000,
    0 30px 90px -50px #e2c27e40;
}
.s48-screen img {
  display: block;
  width: 100%;
  height: auto;
}
.s48-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  font: 12px/1.5 var(--s48-mono);
  color: var(--s48-dim);
}

/* The console's front edge: a wood armrest with brass screws. */
.s48-rail {
  position: relative;
  height: clamp(20px, 2.3vw, 32px);
  margin-top: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(
        circle at 50% 50%,
        #d8bf85 0 1.5px,
        #7a6337 2.5px,
        #2a2112 3.5px,
        transparent 4.5px
      )
      calc(50% + 120px) 50% / 240px 100% repeat-x,
    repeating-linear-gradient(
      1deg,
      #0000 0 3px,
      #00000030 3px 5px,
      #0000 5px 9px
    ),
    repeating-linear-gradient(179deg, #ffd2a00d 0 1px, #0000 1px 11px),
    linear-gradient(180deg, #7a4827, #683d20 30%, #4a2a15 80%, #2c180c);
  box-shadow:
    inset 0 1px 0 #e1b98755,
    inset 0 -2px 3px #0008,
    0 18px 40px #000c;
  z-index: 2;
}

/* ---- The film ------------------------------------------------------ */
.s48-film {
  padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(70% 60% at 50% 55%, #e2c27e10, transparent 70%),
    #0e0c0a;
}
.s48-film-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 48px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.s48-film-head .s48-h {
  margin: 0;
}
.s48-film-head > p {
  margin: 0;
}
.s48-film-fig {
  margin: 0;
}
.s48-film-screen video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.s48-film-text {
  margin-top: 18px;
  color: var(--s48-dim);
  font-size: 15px;
}
.s48-film-text summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font: 700 13px/1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s48-engrave);
}
.s48-film-text ol {
  margin: 8px 0 0;
  padding-left: 1.4em;
  columns: 2 320px;
  column-gap: 48px;
}
.s48-film-text li {
  padding: 3px 0;
  break-inside: avoid;
}

/* ---- Counted: meter-bridge band ------------------------------------- */
.s48-counted {
  position: relative;
  padding: clamp(48px, 6vw, 80px) 0;
  background:
    url("../img/studio48-wear/bridge.svg") 0 0 / 100% 100%,
    repeating-linear-gradient(0deg, #fff5e105 0 1px, #0000 1px 3px),
    linear-gradient(180deg, #2a2723, #1b1916 60%, #121110);
  box-shadow: inset 0 -1px 0 #ffffff0d;
}
.s48-counted-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.s48-counted-head .s48-h {
  margin: 0;
}
.s48-lamps {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px 16px;
  padding: 10px 14px 12px;
  border-radius: 5px;
  background: var(--s48-g0);
  box-shadow:
    inset 0 2px 4px #000e,
    0 1px 0 #fff0d214;
}
@media (min-width: 1100px) {
  .s48-lamps {
    grid-template-columns: repeat(6, auto);
  }
}
.s48-bank {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.s48-bank-label {
  font: 11px/1 var(--s48-mono);
  color: #9d9378;
}
.s48-bank-lamps {
  display: flex;
  gap: 4px;
}
.s48-bank-lamps i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7b56a;
  box-shadow:
    0 0 5px #e2c16fb0,
    inset 0 -1px 1px #7a5d2a;
}
.s48-counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1000px) {
  .s48-counters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.s48-counters li {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.s48-readout {
  align-self: flex-start;
  display: inline-flex;
  padding: 10px 14px 8px;
  border-radius: 4px;
  background: #0a0908;
  box-shadow:
    inset 0 2px 7px #000,
    inset 0 0 0 1px #00000080,
    0 1px 0 #fff0d218;
  font: 500 clamp(40px, 4.6vw, 64px) / 1 var(--s48-mono);
  color: var(--s48-ivory);
  text-shadow: 0 0 14px #e2c27e59;
}
.s48-digit {
  display: inline-block;
  width: 1ch;
  text-align: center;
}
.s48-count-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s48-count-label strong {
  font: 700 22px/1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s48-ivory);
}
.s48-count-label > span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--s48-dim);
}

/* ---- Tour: four views, pinned one after another --------------------- */
.s48-tour {
  position: relative;
  padding-top: clamp(80px, 10vw, 140px);
  background:
    radial-gradient(90vw 40vh at 50% 0, #2a272399, transparent 70%),
    var(--s48-g1);
}
.s48-tour-head {
  text-align: center;
}
.s48-tour-head > * {
  margin-inline: auto;
}
.s48-tour-lede {
  color: var(--s48-dim);
  max-width: 46ch;
  margin-bottom: 0;
}
.s48-keys {
  display: flex;
  justify-content: center;
  padding: 28px var(--s48-gutter) 20px;
  z-index: 5;
}
.s48-keys-bed {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  width: min(100%, 560px);
  padding: 6px 6px 9px;
  border-radius: 6px;
  background: var(--s48-g0);
  box-shadow:
    inset 0 2px 4px #000e,
    0 1px 0 #fff0d214;
}
.s48-viewkey {
  padding-inline: 6px;
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.1em;
}
.s48-step {
  padding: clamp(48px, 7vw, 72px) 0;
  border-top: 1px solid #ffffff0b;
}
.s48-step:first-child {
  border-top: 0;
}
.s48-step-copy .s48-h {
  font-size: clamp(34px, 3.6vw, 54px);
}
.s48-step-copy > p:not([class]) {
  color: #d3c9ae;
  font-size: 17px;
}
.s48-step-num {
  margin: 0 0 8px;
  font: 700 clamp(72px, 9vw, 132px) / 0.8 var(--s48-panel);
  font-stretch: condensed;
  color: transparent;
  -webkit-text-stroke: 1px #e2c27e70;
}
.s48-readings {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font: 13px/1.5 var(--s48-mono);
  color: #d9cfb6;
}
.s48-readings li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed #ffffff1a;
}
.s48-readings li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--s48-brass);
  box-shadow: 0 0 5px #e2c27ea0;
}
.s48-step-fig {
  margin: 36px 0 0;
}
.s48-enlarge {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #ffffff1f;
  border-radius: 4px;
  background: #1a1815;
  color: var(--s48-engrave);
  font: 700 13px/1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.s48-enlarge:hover {
  border-color: var(--s48-brass);
}

@media (min-width: 1100px) {
  .s48-keys {
    position: sticky;
    top: var(--s48-top);
    background: linear-gradient(180deg, #121110f2 70%, #12111000);
    padding-bottom: 28px;
  }
  .s48-step {
    display: grid;
    grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
    gap: 56px;
    align-items: start;
    border-top: 0;
    padding: 0;
    min-height: 118vh;
  }
  .s48-step:last-child {
    min-height: 0;
    padding-bottom: 120px;
  }
  .s48-step-copy {
    padding-top: 12px;
  }
  .s48-step-fig {
    margin: 0;
  }
}
/* Pin each view beside its words only where the whole view fits. */
@media (min-width: 1100px) and (min-height: 700px) {
  .s48-step-copy,
  .s48-step-fig {
    position: sticky;
    top: calc(var(--s48-top) + 112px);
  }
}

/* ---- Chain: the processors ------------------------------------------ */
.s48-chain {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 110px);
  background:
    var(--s48-wear) 0 0 / 100% 100%,
    linear-gradient(180deg, #201e1a, #181613);
}
.s48-chain-grid {
  display: grid;
  gap: 16px 64px;
}
@media (min-width: 1000px) {
  .s48-chain-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}
.s48-chain-grid .s48-h {
  margin-bottom: 0;
}
.s48-chain-copy > p {
  color: #d3c9ae;
  font-size: 17px;
}
.s48-nameplates {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.s48-nameplates a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 56px;
  padding: 16px 40px 12px;
  border: 1px solid #86795640;
  border-radius: 3px;
  background:
    radial-gradient(circle at 16px 50%, #b39c68 0 2px, #4d402a 3px, #0000 4px),
    radial-gradient(
      circle at calc(100% - 16px) 50%,
      #b39c68 0 2px,
      #4d402a 3px,
      #0000 4px
    ),
    url("../img/studio48-wear/plate-1.svg") 0 0 / 100% 100%,
    linear-gradient(110deg, #35362d, #22241e);
  box-shadow:
    inset 0 1px #fff1,
    0 3px 3px #0006;
  transition:
    border-color 140ms var(--ease),
    transform 140ms var(--ease);
}
.s48-nameplates li:nth-child(2) a {
  background:
    radial-gradient(circle at 16px 50%, #b39c68 0 2px, #4d402a 3px, #0000 4px),
    radial-gradient(
      circle at calc(100% - 16px) 50%,
      #b39c68 0 2px,
      #4d402a 3px,
      #0000 4px
    ),
    url("../img/studio48-wear/plate-1.svg") 0 0 / 100% 100%,
    linear-gradient(110deg, #2f3338, #1e2124);
}
.s48-nameplates li:nth-child(3) a {
  background:
    radial-gradient(circle at 16px 50%, #b39c68 0 2px, #4d402a 3px, #0000 4px),
    radial-gradient(
      circle at calc(100% - 16px) 50%,
      #b39c68 0 2px,
      #4d402a 3px,
      #0000 4px
    ),
    url("../img/studio48-wear/plate-1.svg") 0 0 / 100% 100%,
    linear-gradient(110deg, #313630, #1f231f);
}
.s48-nameplates a:hover {
  border-color: #c9ae6f99;
  transform: translateX(3px);
}
.s48-nameplates strong {
  font: 700 24px/1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f1e7cc;
}
.s48-nameplates span:not([aria-hidden]) {
  font: 700 12px/1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s48-dim);
}
.s48-nameplates span[aria-hidden] {
  margin-left: auto;
  color: var(--s48-brass);
}
.s48-rack {
  width: min(1520px, 100% - 2 * var(--s48-gutter));
  margin: clamp(48px, 6vw, 80px) auto 0;
}

/* ---- Voice: cream meter paper --------------------------------------- */
.s48-voice {
  position: relative;
  padding: clamp(72px, 9vw, 128px) 0;
  color: var(--s48-ink);
  background:
    url("../img/studio48-wear/card-1.svg") 0 0 / 100% 100%,
    repeating-linear-gradient(180deg, #0000 0 35px, #8a6a3a1f 35px 36px),
    radial-gradient(120% 110% at 50% 40%, #0000 60%, #5a3a1226),
    linear-gradient(180deg, #efe3c2, var(--s48-paper));
  box-shadow:
    inset 0 12px 24px -12px #0009,
    inset 0 -12px 24px -12px #0009;
}
.s48-voice .s48-h {
  color: var(--s48-ink);
  text-shadow: 0 1px 0 #fff8;
}
.s48-voice .s48-eyebrow {
  color: #6a4a1c;
}
.s48-voice-copy > p:not([class]) {
  font-size: 18px;
  color: #3a3022;
}
.s48-voice-grid {
  display: grid;
  gap: 48px 72px;
  align-items: center;
}
@media (min-width: 1000px) {
  .s48-voice-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }
}
.s48-card {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 6px;
  background:
    radial-gradient(4px 4px at 9% 6%, #8a623029, #0000),
    radial-gradient(5px 5px at 88% 92%, #8a623024, #0000),
    linear-gradient(180deg, #f6ecd0, #eadcb6);
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 1px #5a3a1226,
    0 24px 50px -20px #3a260f80;
}
.s48-vu {
  margin: 0 0 20px;
}
.s48-vu img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #0008;
}
.s48-vu figcaption {
  margin-top: 8px;
  font: 12px/1.4 var(--s48-mono);
  color: #5b4a30;
}
.s48-cal {
  width: 100%;
  border-collapse: collapse;
  font: 14px/1.4 var(--s48-mono);
}
.s48-cal caption {
  text-align: left;
  padding-bottom: 10px;
  font: 700 13px/1.3 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a4a1c;
}
.s48-cal th,
.s48-cal td {
  padding: 10px 0;
  border-top: 1px solid #5a3a1233;
  text-align: left;
  vertical-align: top;
}
.s48-cal th {
  font-weight: 400;
  color: #4d3f2a;
  padding-right: 16px;
}
.s48-cal td {
  color: var(--s48-ink);
  font-weight: 600;
  text-align: right;
}
.s48-card-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #4d3f2a;
}

/* ---- Local ---------------------------------------------------------- */
.s48-local {
  padding: clamp(80px, 10vw, 128px) 0;
  background: linear-gradient(180deg, #151311, var(--s48-g1));
}
.s48-local-grid {
  display: grid;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .s48-local-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.s48-local-grid li {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 5px;
  background:
    url("../img/studio48-wear/card-1.svg") 0 0 / 100% 100%,
    linear-gradient(180deg, #2a2823, #1d1b17);
  box-shadow:
    inset 0 1px 0 #ffffff12,
    0 10px 30px #0008;
}
.s48-local-grid li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 28px;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: #e2c16f;
  box-shadow: 0 0 8px #e2c16fcc;
}
.s48-local-grid h3 {
  margin: 8px 0 12px;
  font: 700 26px/1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s48-ivory);
}
.s48-local-grid p {
  margin: 0;
  color: #cfc5ab;
  font-size: 15px;
}

/* ---- Specifications: the plate -------------------------------------- */
.s48-specs {
  padding: clamp(64px, 8vw, 112px) 0;
  background: var(--s48-g1);
}
.s48-specs-grid {
  display: grid;
  gap: 32px 72px;
}
@media (min-width: 1000px) {
  .s48-specs-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}
.s48-specplate {
  position: relative;
  margin: 0;
  padding: 18px clamp(20px, 3vw, 40px);
  border-radius: 5px;
  background:
    radial-gradient(circle at 14px 14px, #b39c68 0 2px, #4d402a 3px, #0000 4px),
    radial-gradient(
      circle at calc(100% - 14px) 14px,
      #b39c68 0 2px,
      #4d402a 3px,
      #0000 4px
    ),
    radial-gradient(
      circle at 14px calc(100% - 14px),
      #b39c68 0 2px,
      #4d402a 3px,
      #0000 4px
    ),
    radial-gradient(
      circle at calc(100% - 14px) calc(100% - 14px),
      #b39c68 0 2px,
      #4d402a 3px,
      #0000 4px
    ),
    url("../img/studio48-wear/transport.svg") 0 0 / 100% 100%,
    repeating-linear-gradient(0deg, #fff5e105 0 1px, #0000 1px 3px),
    linear-gradient(180deg, #24211d, #181613);
  box-shadow:
    inset 0 1px 0 #ffffff14,
    0 20px 50px #000a;
}
.s48-spec-row {
  display: grid;
  gap: 4px 24px;
  padding: 14px 0;
  border-top: 1px solid #ffffff10;
}
.s48-spec-row:first-child {
  border-top: 0;
}
@media (min-width: 640px) {
  .s48-spec-row {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}
.s48-spec-row dt {
  font: 700 14px/1.5 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s48-brass);
}
.s48-spec-row dd {
  margin: 0;
  font-size: 15px;
  color: var(--s48-engrave);
}
.s48-spec-row.is-muted dd {
  color: var(--s48-dim);
}

/* ---- Status / download ---------------------------------------------- */
.s48-get {
  padding: 0 0 clamp(80px, 10vw, 128px);
  background: var(--s48-g1);
}
.s48-get-plate {
  padding: clamp(36px, 6vw, 80px);
  border-radius: 6px;
  text-align: center;
  background:
    url("../img/studio48-wear/bridge.svg") 0 0 / 100% 100%,
    radial-gradient(60% 80% at 50% 0, #e2c27e14, #0000 70%),
    linear-gradient(180deg, #2a2723, #1b1916 60%, #121110);
  box-shadow:
    inset 0 1px 0 #ffffff14,
    0 30px 80px #000c;
}
.s48-get-plate .s48-status {
  margin: 0 0 18px;
}
.s48-get-plate > p {
  margin-inline: auto;
}
.s48-get-plate .s48-actions {
  justify-content: center;
}
.s48-get-lede,
.s48-get-meta {
  color: #cfc5ab;
}
.s48-get-meta {
  margin-top: 18px;
  font: 13px/1.5 var(--s48-mono);
}
.s48-install {
  display: grid;
  gap: 12px;
  margin: 36px auto 0;
  padding: 0;
  max-width: 980px;
  list-style: none;
  text-align: left;
}
@media (min-width: 900px) {
  .s48-install {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.s48-install li {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 4px;
  background: #0d0c0acc;
  box-shadow: inset 0 2px 4px #000e;
}
.s48-install-n {
  font: 700 34px/1 var(--s48-panel);
  color: var(--s48-brass);
}
.s48-install strong {
  font: 700 20px/1.1 var(--s48-panel);
  font-stretch: condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s48-ivory);
}
.s48-install li > span:last-child {
  font-size: 14px;
  color: #cfc5ab;
}
.s48-trust {
  margin-top: 24px;
  color: #cfc5ab;
}
.s48-trust strong {
  color: var(--s48-ivory);
}
.s48-sha {
  margin-top: 12px;
  font: 12px/1.6 var(--s48-mono);
  color: var(--s48-dim);
}
.s48 .s48-sha {
  max-width: none;
}
.s48-sha code {
  overflow-wrap: anywhere;
}

/* ---- Phones --------------------------------------------------------- */
@media (max-width: 640px) {
  .s48-actions .s48-key {
    flex: 1 1 100%;
  }
  .s48-get-plate {
    text-align: left;
  }
  .s48-get-plate .s48-actions {
    justify-content: stretch;
  }
  .s48-counters li:last-child {
    grid-column: 1 / -1;
  }
}

/* ---- Motion: only where it is welcome ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* The plate is engraved in, word by word. */
  .s48-plate > span,
  .s48-maker,
  .s48-hero-copy > * {
    animation: s48-rise 900ms var(--ease) both;
  }
  .s48-plate-slash {
    animation-delay: 90ms !important;
  }
  .s48-plate-num {
    animation-delay: 170ms !important;
  }
  .s48-maker {
    animation-delay: 260ms;
  }
  .s48-hero-copy > * {
    animation-duration: 700ms;
    animation-delay: 340ms;
  }
  .s48-status .s48-lamp,
  .s48-key-lit::before {
    animation: s48-power 1400ms steps(1, end) 500ms both;
  }
  @keyframes s48-rise {
    from {
      opacity: 0.001;
      transform: translateY(28px);
    }
  }
  @keyframes s48-power {
    0%,
    24%,
    40% {
      background: var(--s48-lamp-off);
      box-shadow: none;
    }
    16%,
    32% {
      opacity: 0.7;
    }
  }

  /* Walking up: the desk lies back and comes up to meet you. */
  .s48-desk {
    animation: s48-desk-in 1300ms var(--ease) 200ms both;
  }
  @keyframes s48-desk-in {
    from {
      opacity: 0.001;
      transform: translateY(40px) rotateX(24deg) scale(0.94);
    }
  }
  @supports (animation-timeline: view()) {
    .s48-desk {
      animation: s48-desk-walk linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    @keyframes s48-desk-walk {
      from {
        transform: rotateX(34deg) scale(0.9);
      }
      to {
        transform: none;
      }
    }
    .s48-step {
      view-timeline-name: --s48-step;
    }
    .s48-step-fig .s48-screen {
      animation: s48-view-in linear both;
      animation-timeline: --s48-step;
      animation-range: entry 10% entry 90%;
    }
    @keyframes s48-view-in {
      from {
        transform: perspective(1600px) rotateY(-9deg) scale(0.93);
        opacity: 0.35;
      }
    }
    .s48-rack .s48-screen {
      animation: s48-rack-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    @keyframes s48-rack-in {
      from {
        transform: translateX(-6%) scale(0.96);
        opacity: 0.4;
      }
    }
    .s48-card {
      animation: s48-card-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    @keyframes s48-card-in {
      from {
        transform: rotate(-3.5deg) translateY(40px);
      }
    }
  }

  /* Lamps chase across the 48 channels when the band comes into view. */
  .s48-armed .s48-bank-lamps i {
    background: #1e1912;
    box-shadow: inset 0 1px 1px #000b;
  }
  .s48-armed .s48-lamps.is-lit .s48-bank-lamps i {
    animation: s48-lamp 900ms var(--ease) calc(var(--i) * 24ms) both;
  }
  @keyframes s48-lamp {
    0% {
      background: #1e1912;
      box-shadow: inset 0 1px 1px #000b;
    }
    35% {
      background: #fff0c4;
      box-shadow:
        0 0 12px #f6d58cf2,
        0 0 3px #fff;
    }
    100% {
      background: #d7b56a;
      box-shadow:
        0 0 5px #e2c16fb0,
        inset 0 -1px 1px #7a5d2a;
    }
  }
  .s48-key,
  .s48-key::before {
    transition-duration: 180ms;
  }
}