/* Layout for the instrument-panel site. Loaded after design.css (the design boards' CSS, generated)
   and design-mobile.css. This file supplies the structure around those parts, replacing the boards'
   inline layout styles: the scale-to-fit desktop stage and, below 900px wide, the mobile layout. */

:root {
  /* The logo's lettering is a light, widely spaced typewriter slab. Courier Prime is the closest web face. */
  --type-signal: 'Courier Prime', 'Courier New', Courier, monospace;
  --logo-cream: #D5CEB0;
}

[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #2B1A0E;
  color: #EFE6D0;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}
a { color: #D9B866; }
a:hover { color: #EFE6D0; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #E8A33C; outline-offset: 3px; }
.booting *, .booting *::before, .booting *::after { transition: none !important; }

/* The brass tags and the band label above each page title are set in the logo's typewriter face. */
.tag { font-family: var(--type-signal); font-weight: 700; }

/* ===== Stage: scale-to-fit on desktop (shell.js sets width, height and scale) ================== */
#stage { position: absolute; left: 0; top: 0; width: 1829px; height: 1029px; transform-origin: 0 0; }
.desk {
  width: 100%; height: 100%; box-sizing: border-box; padding: 28px;
  background:
    linear-gradient(180deg, rgba(255,210,160,0.10) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.35) 100%),
    repeating-linear-gradient(91deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 23px, rgba(20,6,2,0.35) 24px, rgba(0,0,0,0) 27px, rgba(0,0,0,0) 61px, rgba(255,190,140,0.06) 62px, rgba(0,0,0,0) 66px),
    repeating-linear-gradient(92.5deg, #4A1E12 0px, #4A1E12 5px, #3E1A0E 5px, #3E1A0E 9px, #55251A 9px, #55251A 16px, #461C11 16px, #461C11 21px);
}
.chassis {
  position: relative; height: 100%; box-sizing: border-box; background-color: #1E2F40;
  border: 2px solid #0E1822; border-radius: 14px;
  box-shadow: inset 0 0 0 6px #243A4F, inset 0 0 0 8px #15222F, 0 0 0 3px #2A1208, 0 12px 30px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; overflow: hidden;
}

/* ===== Header ====================================================================================== */
.masthead {
  flex: none; display: flex; align-items: center; gap: 28px; padding: 18px 36px 14px;
  border-bottom: 2px solid #0E1822; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
}
/* The Signal Tower logo. Desktop shows the tall logo (lighthouse with its name plates), a little taller than the
   header's content box so the plates sit close to the edges. On the phone board the round lighthouse crop is
   used with the name set as live text beside it (see the media query below). */
.brand { display: block; flex-shrink: 0; height: 160px; margin: -6px 0; line-height: 0; text-decoration: none; }
.brand img { transition: filter 180ms ease; }
.brand:hover img { filter: brightness(1.1); }
.brand-tall { display: block; height: 160px; width: auto; }
.brand-rect, .brand-word { display: none; }

.dialnav { flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bezel {
  position: relative; z-index: 2; align-self: stretch; box-sizing: border-box; padding: 7px 26px;
  background: linear-gradient(180deg, #DDBF70 0%, #B8923A 50%, #8C6A28 100%);
  border: 1px solid #4A360F; border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(58,42,16,0.5), 0 3px 0 #3A2A10, 0 7px 12px rgba(0,0,0,0.5);
}
.dial-scale {
  position: relative; height: 84px; box-sizing: border-box; background: #EFE6D0; border: 3px solid;
  border-color: #4A360F #C9A24E #E6CB82 #6E5220; border-radius: 4px;
  box-shadow: inset 0 4px 10px rgba(42,32,22,0.45), inset 0 -1px 0 rgba(255,255,255,0.5); overflow: hidden;
}
.dial-ticks-a, .dial-ticks-b { position: absolute; left: 0; right: 0; top: 0; }
.dial-ticks-a { height: 18px; background: repeating-linear-gradient(90deg, #2A2016 0px, #2A2016 1px, transparent 1px, transparent 12px); opacity: 0.7; }
.dial-ticks-b { height: 28px; background: repeating-linear-gradient(90deg, #2A2016 0px, #2A2016 2px, transparent 2px, transparent 60px); opacity: 0.8; }
.stations { position: absolute; left: 0; right: 0; top: 28px; bottom: 0; display: flex; }
a.station { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #2A2016; text-decoration: none; }
a.station[aria-current="page"] { color: #8A3E18; }
a.station .freq { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; }
a.station .name { font-size: 22px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
a.station[aria-current="page"] .name { font-weight: 700; }
.dial-needle {
  position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; left: 0; background: #B8653A;
  box-shadow: 0 0 10px rgba(232,163,60,0.8);
  transition: left 520ms cubic-bezier(.3,1.4,.5,1), opacity 300ms ease;
}
body[data-playing="true"] .hum { animation: hum 3.2s ease-in-out infinite; }

/* Bandspread: the slot, drawer and link rules come from design.css; this is the drawer's content. */
.bs-drawer-frame {
  box-sizing: border-box; height: 100%; padding: 5px 12px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #DDBF70 0%, #B8923A 50%, #8C6A28 100%); border: 1px solid #4A360F; border-radius: 0 0 8px 8px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(58,42,16,0.5), 0 3px 0 #3A2A10, 0 6px 10px rgba(0,0,0,0.45);
}
.bs-scale {
  position: relative; box-sizing: border-box; flex: 1; width: 100%; height: 100%; background: #EFE6D0; border: 2px solid;
  border-color: #4A360F #C9A24E #E6CB82 #6E5220; border-radius: 3px; box-shadow: inset 0 3px 7px rgba(42,32,22,0.45); overflow: hidden;
}
.bs-minor { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, #2A2016 0px, #2A2016 1px, transparent 1px, transparent 7px); opacity: 0.6; }
.bs-major { position: absolute; bottom: 0; width: 2px; height: 14px; background: #2A2016; opacity: 0.75; }
.bs-stops { position: absolute; inset: 0; display: flex; }
a.bs-stop {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 0 8px; font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: #2A2016; text-decoration: none;
}
a.bs-stop[aria-current="page"] { color: #8A3E18; font-weight: 700; }
.bs-needle {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; left: 4%; opacity: 0.45; background: #B8653A;
  box-shadow: 0 0 8px rgba(232,163,60,0.8); transition: left 460ms cubic-bezier(.3,1.4,.5,1), opacity 300ms ease;
}
.bs-label { font-size: 11px; white-space: nowrap; color: #3A2A10; text-shadow: 0 1px 0 rgba(255,236,190,0.55); }

.clusters { display: flex; align-items: center; gap: 18px; }
.cluster { display: flex; flex-direction: column; align-items: center; gap: 8px; }
a.search-button { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #2A1D0A; text-decoration: none; }
a.search-button:hover { color: #2A1D0A; }
.dial-label { display: none; font-size: 11px; }
.digit-window {
  width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2A1608, #0C0603 70%);
  box-shadow: inset 0 4px 12px #000, inset 0 -1px 0 rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 34px; font-weight: 500; color: #F2B24E;
  text-shadow: 0 0 12px rgba(242,178,78,0.85);
}
.digit-window .glare { position: absolute; top: 6px; left: 14px; width: 26px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.1); transform: rotate(-20deg); }

/* ===== Body: the panel is the clipping window the drum rolls behind ============================== */
.body-wrap { display: contents; }
#panel { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.panel-inner { position: relative; height: 100%; box-sizing: border-box; padding: 26px clamp(36px, 3.5%, 64px) 26px clamp(48px, 6.5%, 130px); display: flex; gap: 40px; background-color: #1E2F40; }
.panel-inner.drum-exit { position: absolute; inset: 0; }      /* must follow .panel-inner: it sets position */
.panel-left { flex: 1 1 auto; min-width: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; overflow: auto; padding-right: 8px; container-type: inline-size; }
.band-tag { align-self: flex-start; padding: 3px; }
.band-tag .enamel { display: flex; align-items: center; gap: 10px; padding: 6px 18px; font-family: var(--type-signal); font-size: 14px; font-weight: 700; letter-spacing: 0.3em; color: #E8C97A; }
.hl { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(46px, 5.4cqw, 68px); line-height: 1.02; color: #EFE6D0; max-width: none; text-wrap: balance; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.lede { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: clamp(19px, 1.7cqw, 25px); line-height: 1.55; color: #C8C1AE; max-width: min(100%, 46rem); }
.ctas { display: flex; gap: 14px; margin-top: 10px; }
.cta {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 4px; font-size: 18px; letter-spacing: 0.18em;
  text-decoration: none; text-transform: uppercase; font-weight: 600; color: #D9B866;
  border: 2px solid; border-color: #E6CB82 #7A5D22 #5E4718 #C9A24E; background: rgba(8,14,20,0.35);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 3px 0 #0E1822;
}
.cta-primary {
  font-weight: 700; color: #1A0F08; border: 1px solid #5A2C14; background: linear-gradient(180deg, #D48A5C, #B8653A 55%, #9A5230);
  text-shadow: 0 1px 0 rgba(255,210,170,0.45);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(58,20,8,0.4), 0 4px 0 #5A2C14, 0 7px 10px rgba(0,0,0,0.45);
}
.cta:hover, .cta-primary:hover { filter: brightness(1.1); }
.cta:not(.cta-primary):hover { color: #EFE6D0; }
.cta-primary:hover { color: #1A0F08; }
.vent-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.vent-rule { width: 60px; height: 1px; background: rgba(217,184,102,0.5); }

.body-text { font-family: 'Fraunces', Georgia, serif; font-size: clamp(17px, 1.3cqw, 20px); line-height: 1.6; max-width: 100%; color: #E8DDC4; }
/* One reading column: paragraphs keep a comfortable line length, wide things (cards, video, notebooks) use the width. */
.body-text > * { max-width: 68ch; }
.body-text > .children, .body-text > .children-empty, .body-text > .get-it, .body-text > .embed, .body-text > .nb { max-width: none; }
.body-text > :first-child { margin-top: 0; }
.body-text p { margin: 0 0 1em; orphans: 3; widows: 3; }
.body-text h2, .body-text h3 { break-after: avoid; }
.body-text img, .body-text table { max-width: 100%; }
.body-text pre { overflow-x: auto; }
.body-text a { color: #D9B866; }
.facts { display: flex; gap: 28px; margin: 4px 0; }
.facts dt { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #C9A95A; }
.facts dd { margin: 2px 0 0; font-family: 'Fraunces', Georgia, serif; }
.cover { max-width: 100%; max-height: 300px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.price { margin: 0; display: flex; align-items: baseline; gap: 14px; }
.price b { font-family: 'IBM Plex Mono', monospace; font-size: 34px; font-weight: 500; color: #F2B24E; text-shadow: 0 0 10px rgba(242,178,78,0.4); }
.price span { font-family: var(--type-signal); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #C9A95A; }
.date { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #9C927C; }
.back-link { font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; }
.link-list { margin: 0; padding-left: 18px; font-family: 'Fraunces', Georgia, serif; }
.get-it { align-self: stretch; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(217,184,102,0.35); }
.get-it h2 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: #C9A95A; }
.buy-link, .gumroad-button {
  display: inline-block; padding: 10px 22px; border-radius: 4px; text-decoration: none; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #1A0F08; border: 1px solid #5A2C14; background: linear-gradient(180deg, #D48A5C, #B8653A 55%, #9A5230);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 3px 0 #5A2C14;
}

/* ===== Play Log: the plate, and the wrapper that collapses it ================================== */
.plate {
  position: relative; box-sizing: border-box;
  background: linear-gradient(180deg, #1A1611, #110E0A); border: 2px solid; border-color: #4A4233 #1E1A13 #0A0806 #2E281E; border-radius: 6px;
  padding: 20px 28px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 6px #14110D, inset 0 0 0 7px #2A241A, 0 3px 0 #06090C, 0 8px 16px rgba(0,0,0,0.5);
}
.log-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; }
.log-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.32em; color: #E8C97A; }
.playlog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow: auto; min-height: 0; }
.playlog-row { border-bottom: 1px dashed rgba(217,184,102,0.16); }
.logrow {
  width: 100%; min-height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 5px 10px;
  background: transparent; border: 0; border-radius: 3px; text-align: left; color: #E8DDC4; text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease;
}
.logrow:hover { background-color: #221910; color: #E8DDC4; }
.logrow.is-current { background-color: #2A1E14; color: #F2C08A; }
.logrow .num { font-family: 'IBM Plex Mono', monospace; font-size: 14px; width: 26px; color: #9C927C; }
.logrow .title { flex-grow: 1; min-width: 0; font-family: 'Fraunces', Georgia, serif; font-size: 17px; }
.logrow .meta { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #9C927C; }
.playlog-empty { padding: 12px 10px; color: #9C927C; }

.log-wrap.is-empty { display: none; }
body[data-log="empty"] [data-log-toggle] { opacity: 0.45; }

/* Desktop: the wrapper closes up and the plate drops straight down behind the console rail, on a
   fixed track at constant speed (--logdrop and --logms are set by shell.js), and seats with a small
   settle on the way back. */
@media (min-width: 900px) {
  .log-wrap { flex: 0 0 auto; width: 440px; align-self: stretch; min-height: 0; display: flex; flex-direction: column; transition: width 380ms cubic-bezier(.45,0,.55,1), margin-left 380ms cubic-bezier(.45,0,.55,1); }
  .log-wrap.is-collapsed { width: 0; margin-left: -40px; transition: width 380ms cubic-bezier(.45,0,.55,1) var(--logms, 350ms), margin-left 380ms cubic-bezier(.45,0,.55,1) var(--logms, 350ms); }
  .log-plate { width: 440px; flex: 0 0 auto; max-height: 100%; transition: transform var(--logms, 350ms) cubic-bezier(.3,1.05,.5,1) 200ms, visibility 0s linear 0s; }
  .log-wrap.is-collapsed .log-plate { transform: translateY(var(--logdrop, 600px)); visibility: hidden; transition: transform var(--logms, 350ms) cubic-bezier(.45,0,.55,1), visibility 0s linear var(--logms, 350ms); }
}

/* ===== Search page ================================================================================== */
.search-form { display: flex; gap: 10px; align-self: stretch; max-width: 720px; }
.search-form input[type="search"] {
  flex: 1; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 16px; border: 2px solid; border-color: #4A360F #C9A24E #E6CB82 #6E5220;
  border-radius: 4px; background: #EFE6D0; color: #2A2016; font: 500 20px 'Fraunces', Georgia, serif; box-shadow: inset 0 3px 7px rgba(42,32,22,0.45);
}
.search-form input[type="search"]::placeholder { color: #8A7C5C; }
.search-form button { cursor: pointer; }
.search-count { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #9C927C; }

/* ===== Embeds inside body text ===================================================================== */
.embed { margin: 18px 0; }
.embed-video iframe, .embed-video video { width: 100%; max-width: 760px; aspect-ratio: 16 / 9; border: 0; }
.embed-soundcloud iframe { width: 100%; max-width: 760px; height: 166px; border: 0; }
.embed-soundcloud.is-list iframe { height: 300px; }
.embed-image img { max-width: 100%; max-height: 360px; border-radius: 4px; }
.embed-image figcaption { font-size: 13px; color: #9C927C; }
.embed-play { padding: 6px 16px; border: 1px solid #4A360F; border-radius: 3px; background: linear-gradient(180deg, #DDBF70, #B8923A 60%, #9A7630); color: #2A1D0A; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.embed-title { margin-left: 10px; font-family: 'Fraunces', Georgia, serif; }
.embed-artist { color: #C9A95A; }
.embed-playlist ol { padding-left: 20px; }
.embed .link { background: none; border: 0; padding: 0; color: #D9B866; text-decoration: underline; }

/* ===== Console, mini bar and player sheet: states the boards drove from component state ========= */
body { --knob: 0deg; --knob-counter: 0deg; --notch: #EFE6D0; --notch-glow: none; --vol-rot: -135deg; --log-chev: 0deg; }
body[data-playing="true"] { --knob: 40deg; --knob-counter: -40deg; --notch: #F2B24E; --notch-glow: 0 0 8px #F2B24E; }
.ico-pause { display: none; }
body[data-playing="true"] .ico-play { display: none; }
body[data-playing="true"] .ico-pause { display: block; }

.scale .seek-fill { transition: width 1s linear; }
.scale .seek-needle { transition: left 1s linear; }
.scale.jump .seek-fill { transition: width 260ms cubic-bezier(.3,1.4,.5,1); }
.scale.jump .seek-needle { transition: left 260ms cubic-bezier(.3,1.4,.5,1); }

#meter-needle { transition: transform 900ms cubic-bezier(.3,1.25,.5,1); }
body[data-playing="true"] #meter-needle { transition: transform 130ms cubic-bezier(.25,1.6,.5,1); }

.vt { background: #8E7F5C; }
.vt.lit { background: #F2C26A; }
.vn { color: #B8A06A; }
.vn.lit { color: #F4D58A; }

/* The artwork porthole shows a poster, a video, or an embed, depending on the current item. The media
   box moves between the console's porthole and the mobile sheet's, depending on the layout. */
#deck-art { position: absolute; inset: 0; }
#deck-art > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
#deck-ph { display: flex; align-items: center; justify-content: center; }
body[data-kind="audio"] #deck-media { display: none; }
[data-mini-art] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mdock { display: none; }
.chassis > .slot { z-index: 1; }

/* ===================================================================================================== */
/* Mobile layout: below 900px wide the stage is the window itself, the panel is one column that scrolls,
   the console becomes the mini bar, and the full controls live in the player sheet.                     */
/* ===================================================================================================== */
@media (max-width: 899px) {
  #stage { width: 100% !important; height: 100vh !important; height: 100dvh !important; transform: none !important; }
  .desk {
    padding: 6px;
    background:
      linear-gradient(180deg, rgba(255,210,160,0.10) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.35) 100%),
      repeating-linear-gradient(92.5deg, #4A1E12 0px, #4A1E12 5px, #3E1A0E 5px, #3E1A0E 9px, #55251A 9px, #55251A 16px, #461C11 16px, #461C11 21px);
  }
  .chassis { border-radius: 12px; box-shadow: inset 0 0 0 4px #243A4F, inset 0 0 0 5px #15222F, 0 0 0 2px #2A1208, 0 8px 20px rgba(0,0,0,0.6); }
  .chassis > .slot, .dock { display: none; }
  .mdock { display: contents; }

  /* header: logo and dial-stop window on top, the dial below it */
  .masthead {
    position: relative; z-index: 6; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "np cl" "nav nav";
    align-items: center; gap: 8px; padding: 12px 14px; background-color: #1E2F40;
  }
  .brand { grid-area: np; display: flex; align-items: center; gap: 12px; height: 50px; margin: 0; }
  .brand-tall { display: none; }
  .brand-rect { display: block; height: 44px; width: auto; }
  .brand-word { display: block; font-family: var(--type-signal); font-size: 15px; line-height: 1.2; letter-spacing: 0.34em; text-transform: uppercase; color: #D5CEB0; }
  .clusters { grid-area: cl; }
  .cluster { flex-direction: row; gap: 10px; }
  .cluster-search { display: none; }   /* the mobile board has no search in the header */
  .cluster .mount { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .cluster .mount .screw, .cluster .tag { display: none; }
  .cluster .collar { padding: 4px; }
  .dial-label { display: block; }
  .digit-window { width: 40px; height: 40px; font-size: 24px; box-shadow: inset 0 3px 8px #000, inset 0 -1px 0 rgba(255,255,255,0.12); }
  .digit-window .glare { display: none; }

  .dialnav { grid-area: nav; align-items: stretch; gap: 8px; }
  .bezel { padding: 5px 14px; border-radius: 7px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(58,42,16,0.5), 0 3px 0 #3A2A10, 0 6px 10px rgba(0,0,0,0.5); }
  .bezel .screw { left: 3px !important; }
  .bezel .screw.s3 { left: auto !important; right: 3px !important; }
  .dial-scale { height: 52px; box-shadow: inset 0 3px 8px rgba(42,32,22,0.45), inset 0 -1px 0 rgba(255,255,255,0.5); }
  .dial-ticks-a { height: 10px; background: repeating-linear-gradient(90deg, #2A2016 0px, #2A2016 1px, transparent 1px, transparent 8px); }
  .dial-ticks-b { height: 16px; background: repeating-linear-gradient(90deg, #2A2016 0px, #2A2016 2px, transparent 2px, transparent 40px); }
  .stations { top: 16px; }
  a.station .freq { display: none; }
  a.station .name { font-size: 12px; letter-spacing: 0.06em; }
  .dial-needle { width: 3px; margin-left: -1.5px; }

  /* the bandspread drawer closes to nothing when it is not Folio, giving the panel the room back */
  .bs-slot { height: 0; margin-top: -8px; transition: height 440ms cubic-bezier(.34,1.3,.5,1), margin-top 440ms cubic-bezier(.34,1.3,.5,1); }
  .bs-slot.bs-open { height: 34px; margin-top: 0; }
  .bs-caption, .bs-link, .bs-label { display: none; }
  .bs-drawer { left: 10px; right: 10px; width: auto; height: 34px; }
  .bs-drawer-frame { padding: 4px 8px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(58,42,16,0.5), 0 3px 0 #3A2A10, 0 5px 8px rgba(0,0,0,0.45); }
  .bs-scale { box-shadow: inset 0 3px 6px rgba(42,32,22,0.45); }
  .bs-minor { height: 6px; background: repeating-linear-gradient(90deg, #2A2016 0px, #2A2016 1px, transparent 1px, transparent 6px); }
  .bs-major { height: 11px; }
  a.bs-stop { font-size: 11px; letter-spacing: 0.05em; padding-bottom: 6px; }

  /* body: panel, mini bar and the sheet that slides up over both */
  .body-wrap { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .mdock > section[aria-label="Mini player"] { z-index: 4; }

  .panel-inner { flex-direction: column; gap: 12px; padding: 14px 14px 18px; overflow-y: auto; scrollbar-width: none; }
  .panel-inner::-webkit-scrollbar { display: none; }
  .panel-left { flex: none; margin-top: 0; gap: 12px; overflow: visible; padding-right: 0; align-items: flex-start; }
  .band-tag .enamel { padding: 5px 14px; font-size: 12px; letter-spacing: 0.26em; }
  .hl { font-size: 36px; line-height: 1.04; max-width: none; }
  .lede { font-size: 15px; line-height: 1.5; max-width: none; }
  .ctas { margin-top: 0; gap: 10px; }
  .cta { height: 42px; padding: 0 16px; font-size: 15px; letter-spacing: 0.14em; }
  .cta-primary { box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(58,20,8,0.4), 0 3px 0 #5A2C14, 0 5px 8px rgba(0,0,0,0.45); }
  .vent-row { display: none; }
  .body-text { font-size: 15px; max-width: none; }
  .back-link { font-size: 12px; }
  .search-form input[type="search"] { height: 42px; font-size: 17px; }

  .plate { padding: 14px 14px 10px; gap: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 5px #14110D, inset 0 0 0 6px #2A241A, 0 3px 0 #06090C, 0 6px 12px rgba(0,0,0,0.5); }
  .plate .screw { display: none; }
  .plate .screw.ctl { display: block; top: 7px; left: 7px; }
  .plate .screw.ctr { display: block; top: 7px; right: 7px; }
  .log-head { padding: 0 4px 4px; }
  .log-head .enamel { padding: 4px 16px !important; }
  .log-head h2 { font-size: 15px; letter-spacing: 0.3em; }
  .log-head .silk { font-size: 11px !important; }
  .playlog { overflow: visible; gap: 1px; }
  .logrow { min-height: 44px; gap: 10px; padding: 4px 6px; }
  .logrow .jewel { width: 14px !important; height: 14px !important; }
  .logrow .num { font-size: 12px; width: 22px; }
  .logrow .title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logrow .meta { font-size: 12px; }

  /* the Play Log slides down out of the page while the slot it sat in closes behind it */
  .log-wrap { flex: none; overflow: hidden; max-height: var(--plate-h, 380px); padding: 0 6px 16px; margin: 0 -6px -6px; transition: max-height 420ms cubic-bezier(.45,0,.55,1), margin 420ms cubic-bezier(.45,0,.55,1), padding 420ms cubic-bezier(.45,0,.55,1); }
  .log-plate { transition: transform 420ms cubic-bezier(.3,1.05,.5,1) 60ms; }
  .log-wrap.is-collapsed { max-height: 0; padding-bottom: 0; margin-top: -12px; margin-bottom: 0; visibility: hidden; transition: max-height 420ms cubic-bezier(.45,0,.55,1), margin 420ms cubic-bezier(.45,0,.55,1), padding 420ms cubic-bezier(.45,0,.55,1), visibility 0s linear 420ms; }
  .log-wrap.is-collapsed .log-plate { transform: translateY(100%); transition: transform 420ms cubic-bezier(.45,0,.55,1); }
}

/* ===== Page and post layouts: landing, about, article, photo essay, release ===================== */
.hl-post { font-size: clamp(38px, 4.2cqw, 60px); line-height: 1.06; }
.banner { align-self: stretch; max-height: 260px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.note { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #9C927C; }

/* Landing: the dial stops as plates. They press down like the console's keys. */
.landing-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.landing-hero .hl { max-width: 900px; }
.stops { align-self: stretch; max-width: 1240px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.stop, .child-link {
  display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; padding: 12px 14px 12px; text-decoration: none; color: #E8DDC4;
  background: linear-gradient(180deg, #1B2A39, #142030); border: 1px solid rgba(217,184,102,0.5); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 4px #14202C, inset 0 0 0 5px rgba(217,184,102,0.22), 0 3px 0 #06090C, 0 6px 10px rgba(0,0,0,0.4);
  transition: transform 140ms cubic-bezier(.6,0,.3,1), box-shadow 140ms cubic-bezier(.6,0,.3,1), border-color 200ms ease;
}
.stop:hover, .child-link:hover { border-color: #E8C97A; color: #E8DDC4; }
.stop:active, .child-link:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 4px #14202C, inset 0 0 0 5px rgba(217,184,102,0.22), 0 1px 0 #06090C, 0 2px 5px rgba(0,0,0,0.4); }
.stop-freq { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: #F2B24E; text-shadow: 0 0 8px rgba(242,178,78,0.55); }
.stop-name { font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1.1; color: #EFE6D0; }
.stop-note { font-family: 'Fraunces', Georgia, serif; font-size: 13px; line-height: 1.35; color: #9C927C; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Child items: the {{children}} widget, the automatic list on section pages, and search results. Each card is a
   keyed plate with its picture in a small brass bezel; the first card of the Journal list is the large "feature". */
.children { list-style: none; margin: 4px 0; padding: 0; align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.child { display: flex; min-width: 0; }
.child-link { flex: 1 1 auto; min-width: 0; padding: 12px 12px 16px; gap: 10px; }
.child-shot { display: block; padding: 6px; border-radius: 6px; background: linear-gradient(180deg, #DDBF70 0%, #B8923A 50%, #8C6A28 100%); border: 1px solid #4A360F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 0 #3A2A10, 0 5px 8px rgba(0,0,0,0.5); }
.child-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid; border-color: #4A360F #C9A24E #E6CB82 #6E5220; border-radius: 2px; box-sizing: border-box; box-shadow: inset 0 3px 6px rgba(0,0,0,0.5); }
.child-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 4px; }
.child-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #F2B24E; text-shadow: 0 0 8px rgba(242,178,78,0.45); }
.child-title { font-family: 'Fraunces', Georgia, serif; font-size: 20px; line-height: 1.15; color: #EFE6D0; }
.child-summary { font-family: 'Fraunces', Georgia, serif; font-size: 14px; line-height: 1.45; color: #9C927C; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.child.is-feature { grid-column: 1 / -1; }
.is-feature .child-link { display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 1fr); gap: 32px; align-items: center; padding: 16px 28px 16px 16px; }
.is-feature .child-shot { padding: 10px; border-radius: 8px; }
.is-feature .child-title { font-size: clamp(26px, 2.6cqw, 36px); }
.is-feature .child-summary { font-size: 17px; -webkit-line-clamp: 5; }
@container (max-width: 820px) { .is-feature .child-link { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 12px 16px; } }
.children-empty { margin: 4px 0; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #9C927C; }

/* About: the portrait is mounted in a brass frame */
.about { display: flex; align-items: flex-start; gap: 36px; align-self: stretch; }
.about .body-text { flex: 1 1 auto; min-width: 0; }
.portrait { flex: 0 0 180px; margin: 0; padding: 8px; box-sizing: border-box; border-radius: 4px; background: linear-gradient(180deg, #DDBF70, #B8923A 60%, #9A7630); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 0 #3A2A10, 0 8px 14px rgba(0,0,0,0.5); }
.portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid #3A2A10; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); }

/* Photo essay: prints in dark mounts. A lone print spans the row. */
.photo-grid { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.photo { margin: 0; }
.photo:only-child { grid-column: 1 / -1; }
.photo a { display: block; padding: 5px; background: #0E1620; border: 1px solid rgba(217,184,102,0.45); border-radius: 3px; box-shadow: 0 3px 0 #06090C, 0 6px 10px rgba(0,0,0,0.45); transition: border-color 200ms ease; }
.photo a:hover { border-color: #E8C97A; }
.photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo:only-child img { aspect-ratio: auto; max-height: 440px; object-fit: contain; }
.photo figcaption { margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.4; color: #9C927C; }

/* Release */

/* Older / newer */
.pager { align-self: stretch; display: flex; gap: 16px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(217,184,102,0.35); }
.pager-link { display: flex; flex-direction: column; gap: 3px; max-width: 48%; text-decoration: none; font-family: 'Fraunces', Georgia, serif; font-size: 16px; line-height: 1.3; color: #E8DDC4; }
.pager-link small { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #C9A95A; }
.pager-link:hover { color: #F2C08A; }
.pager-link.next { margin-left: auto; text-align: right; }

@media (max-width: 899px) {
  .hl-post { font-size: 32px; }
  .banner, .stops, .pager { max-width: none; }
  .stops { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stop:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stop { padding: 10px 14px; }
  .stop-name { font-size: 21px; }
  .stop-note { display: none; }
  .about { flex-direction: column; gap: 14px; max-width: none; }
  .portrait { flex: none; width: 160px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); max-width: none; gap: 10px; }
  .pager-link { font-size: 14px; }
}

/* ===== Framed pictures, hero blocks, reading columns and notebooks ============================== */
/* .shot: a picture in a brass bezel with four screws and an optional caption tab (templates/content/_bezel.html). */
.shot { position: relative; margin: 0 0 12px; padding: 12px; box-sizing: border-box; min-width: 0; border-radius: 8px;
  background: linear-gradient(180deg, #DDBF70 0%, #B8923A 50%, #8C6A28 100%); border: 1px solid #4A360F;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(58,42,16,0.5), 0 3px 0 #3A2A10, 0 9px 16px rgba(0,0,0,0.55); }
.shot .screw.ctl { top: 4px; left: 4px; }
.shot .screw.ctr { top: 4px; right: 4px; }
.shot .screw.cbl { bottom: 4px; left: 4px; }
.shot .screw.cbr { bottom: 4px; right: 4px; }
.shot-win { border: 3px solid; border-color: #4A360F #C9A24E #E6CB82 #6E5220; border-radius: 3px; overflow: hidden; background: #0E1822; box-shadow: inset 0 4px 10px rgba(0,0,0,0.5); }
.shot-win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot.is-wide .shot-win { aspect-ratio: 16 / 10; }
.shot.is-square .shot-win { aspect-ratio: 1 / 1; }
.shot.is-tall .shot-win { aspect-ratio: 2 / 3; }
.shot-cap { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); font-size: 11px; }

/* .hero: the title block with its picture. Wide and square pictures sit to the right, a tall poster stands at the left. */
.hero { align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; align-items: start; }
.hero.has-shot.is-wide { grid-template-columns: minmax(0, 1fr) minmax(0, min(600px, 46cqw)); }
.hero.has-shot.is-square { grid-template-columns: minmax(0, 1fr) minmax(0, min(380px, 34cqw)); }
.hero.has-shot.is-tall { grid-template-columns: minmax(0, min(270px, 28cqw)) minmax(0, 1fr); }
.hero.is-tall .shot { order: -1; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.hero-text .hl { font-size: clamp(36px, 3.8cqw, 56px); line-height: 1.04; }
.hero-text .body-text { margin-top: 6px; }

/* .reading: one column of text with a side rail for embeds, credits and the buy plate. */
.reading { align-self: stretch; display: grid; grid-template-columns: minmax(0, 66ch) clamp(260px, 36cqw, 460px); gap: 28px 56px; justify-content: space-between; margin-top: 4px; padding-top: 22px; border-top: 1px solid rgba(217,184,102,0.3); }
.reading.rail-only { grid-template-columns: minmax(0, 1fr); border-top: 0; padding-top: 0; }
.rail-only .read-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 460px)); align-items: start; }
.read-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.read-rail .embed { margin: 0; }
.read-rail .embed-video iframe, .read-rail .embed-video video, .read-rail .embed-soundcloud iframe { max-width: none; }
.read-rail .get-it { margin-top: 0; }

/* .spec: a small engraved plate of labelled facts (credit, details) */
.spec { box-sizing: border-box; padding: 14px 18px; border: 2px solid; border-color: #4A4233 #1E1A13 #0A0806 #2E281E; border-radius: 6px; background: linear-gradient(180deg, #1A1611, #110E0A);
  box-shadow: inset 0 0 0 4px #14110D, inset 0 0 0 5px #2A241A, 0 3px 0 #06090C, 0 8px 14px rgba(0,0,0,0.5); }
.spec h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: #C9A95A; }
.spec dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; font-family: 'Fraunces', Georgia, serif; font-size: 17px; color: #E8DDC4; }
.spec dt { align-self: center; font-family: var(--type-signal); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #C9A95A; }
.spec dd { margin: 0; }

/* Narrow panels (and phones): everything stacks, the picture first. */
@container (max-width: 780px) {
  .reading { grid-template-columns: minmax(0, 1fr); }
  .hero.has-shot.is-wide, .hero.has-shot.is-square, .hero.has-shot.is-tall { grid-template-columns: minmax(0, 1fr); }
  .hero.has-shot .shot { order: -1; max-width: 560px; }
  .hero.has-shot.is-tall .shot { max-width: 220px; }
  .hero.has-shot.is-square .shot { max-width: 340px; }
  .shot { padding: 8px; }
  .hero-text .hl { font-size: 32px; }
}

/* Jupyter notebooks (content/notebooks.py): a dark console window of cells, saved outputs and plots */
.nb-section { align-self: stretch; margin-top: 10px; }
.nb { align-self: stretch; box-sizing: border-box; min-width: 0; border: 2px solid; border-color: #4A4233 #1E1A13 #0A0806 #2E281E; border-radius: 6px; background: #0F1620;
  box-shadow: inset 0 0 0 4px #14110D, inset 0 0 0 5px #2A241A, 0 3px 0 #06090C, 0 8px 16px rgba(0,0,0,0.5); }
.nb-bar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; cursor: pointer; list-style: none; background: linear-gradient(180deg, #1A1611, #110E0A); border-radius: 4px 4px 0 0; }
.nb-bar::-webkit-details-marker { display: none; }
.nb:not([open]) .nb-bar { border-radius: 4px; }
.nb-title { font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: #EFE6D0; min-width: 0; }
.nb-meta { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #9C927C; white-space: nowrap; }
.nb-body { padding: 6px 22px 16px; }
.nb-cell { margin: 16px 0; }
.nb-text { font-family: 'Fraunces', Georgia, serif; font-size: 17px; line-height: 1.55; color: #E8DDC4; max-width: 80ch; }
.nb-text h1, .nb-text h2, .nb-text h3 { font-weight: 400; color: #EFE6D0; margin: 0.6em 0 0.3em; line-height: 1.15; }
.nb-text h1 { font-size: 30px; } .nb-text h2 { font-size: 24px; } .nb-text h3 { font-size: 20px; }
.nb-text p { margin: 0 0 0.8em; }
.nb-text code { font-family: 'IBM Plex Mono', monospace; font-size: 0.88em; padding: 1px 5px; background: #0A1018; border-radius: 3px; }
.nb-text img { max-width: 100%; }
.nb-raw pre { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #9C927C; white-space: pre-wrap; }
.nb-in, .nb-out { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
.nb-out { margin-top: 8px; }
.nb-prompt { padding-top: 9px; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; color: #7DA8C8; }
.nb-out .nb-prompt { color: #F2B24E; }
.nb-code { margin: 0; padding: 10px 14px; overflow-x: auto; background: #0A1018; border: 1px solid rgba(217,184,102,0.2); border-radius: 3px; font: 13.5px/1.5 'IBM Plex Mono', monospace; color: #D8DEE6; }
.nb-code code { font: inherit; }
.nb-k { color: #E39A5F; } .nb-s { color: #9CC98A; } .nb-c { color: #7A8794; font-style: italic; } .nb-n { color: #D9B866; }
.nb-out-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nb-stream { margin: 0; padding: 6px 0; overflow-x: auto; white-space: pre-wrap; font: 13px/1.45 'IBM Plex Mono', monospace; color: #C8C1AE; }
.nb-stderr, .nb-error { color: #E58A7A; }
.nb-img { display: block; max-width: 100%; height: auto; padding: 6px; box-sizing: border-box; background: #fff; border-radius: 3px; }
.nb-html { overflow-x: auto; font-size: 14px; color: #E8DDC4; }
.nb-html table { border-collapse: collapse; font: 13px 'IBM Plex Mono', monospace; }
.nb-html th, .nb-html td { padding: 3px 10px; border: 1px solid rgba(217,184,102,0.2); text-align: right; }
.nb-html th { color: #C9A95A; font-weight: 500; }
.nb-foot { padding: 0 22px 14px; text-align: right; }
.nb-download { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; }
.nb-problem { margin: 0; padding: 12px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #E58A7A; }
@container (max-width: 700px) {
  .nb-in, .nb-out { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nb-prompt { text-align: left; padding-top: 0; }
  .nb-body { padding: 4px 12px 12px; }
  .nb-bar { flex-wrap: wrap; padding: 10px 12px; }
  .nb-meta { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.search-count:empty { display: none; }