/* The cabinet: makes the exhibit look like one instrument, purpose-built in the style of a
   1920s wireless set or gramophone cabinet. Walnut surround, brass bezels, Bakelite knobs,
   glass over the windows, and a cathedral-style faceplate: the dial between two arched speaker
   grilles.

   The installation (kiosk) has a real wooden overlay with holes cut for each panel, so there the
   on-screen surround stays black and only the insides of the panels are styled: no drawn wood
   or bezels to clash with the real ones. */

:root {
  --brass-light: #e8cf8f;
  --brass-mid: #b8955a;
  --brass-dark: #6e5129;
  --bakelite: #2a1a0e;
}

/* ---------- Walnut surround (website and library only) ---------- */
/* images/walnut.webp is images/walnut.svg (a noise filter) drawn once at 1920 x 1080: browsers
   took over a second to draw the filter itself, holding up the page. After changing the SVG, open
   it in Chrome at 1920 x 1080, screenshot it and save as WebP (quality 82). */
/* Where the screen isn't 16:9 (ultra-wide monitors, 16:10 and 3:2 laptops, tablets held
   sideways), the cabinet stands in a darker walnut carcass that fills the rest of the screen,
   instead of black bars: the same veneer, shaded, with the cabinet front raised from it. */
body:not(.kiosk) {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55) 90%),
    #2a190c url("../images/walnut.webp") center / cover no-repeat;
}
body:not(.kiosk) #stage {
  background: #3b2412 url("../images/walnut.webp") center / cover no-repeat;
  box-shadow:
    0 0 0 2px #1a0e06,
    0 0 0 5px #4a2d16,
    0 0 0 6px #1a0e06,
    0 20px 60px rgba(0, 0, 0, 0.6);
  border-radius: 14px;
}
/* The library screen is exactly 1920 x 1080, so the cabinet fills it: square corners, no notches. */
body.popup #stage {
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Windows: each panel set into the cabinet ---------- */
/* Shadow inside the edge, as if the panel sits behind the woodwork, and a faint glass glare. */
.zone-map::after,
.zone-stories::after,
body.kiosk .zone-dial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 600;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 8px 16px rgba(0, 0, 0, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.25);
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 28%,
    rgba(255, 255, 255, 0) 42%
  );
}
/* Brass bezel round each window. */
body:not(.kiosk) .zone-map,
body:not(.kiosk) .zone-stories {
  box-shadow:
    0 0 0 2px var(--brass-dark),
    0 0 0 4px var(--brass-light),
    0 0 0 6px var(--brass-mid),
    0 0 0 7px #3a2610,
    0 4px 10px 7px rgba(0, 0, 0, 0.45);
}

/* ---------- Date and count: a lit station window ---------- */
.readout {
  border: 0;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px var(--brass-dark),
    0 0 0 4px var(--brass-light),
    0 0 0 6px var(--brass-mid),
    inset 0 0 22px rgba(255, 180, 80, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 40%
    ),
    radial-gradient(ellipse at 50% 120%, #3d2709, #160d05 70%);
}

/* ---------- Section buttons ---------- */
/* Kept as plain, clearly labelled buttons (ivory push-keys were tried, but read less obviously
   as buttons), with the same brass rim as the control buttons. */
.nav-btn {
  border: 0;
  background: radial-gradient(ellipse at 50% 20%, #4f3720, #2e1f10 80%);
  box-shadow:
    0 0 0 2px var(--brass-mid),
    0 0 0 3px var(--brass-dark),
    0 4px 8px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 220, 160, 0.2);
}
@media (hover: hover) {
  .nav-btn:hover {
    background: radial-gradient(ellipse at 50% 20%, #644628, #3a2814 80%);
  }
}
.nav-btn[aria-current] {
  background: radial-gradient(
    ellipse at 50% 20%,
    #e8453c,
    var(--poppy) 60%,
    #7a0b12
  );
  box-shadow:
    0 0 0 2px var(--brass-light),
    0 0 0 3px var(--brass-dark),
    0 0 16px 3px rgba(200, 30, 30, 0.4),
    0 4px 8px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- Control knobs and buttons: Bakelite with brass rims ---------- */
.ctrl {
  color: #f3e3bd;
  background: radial-gradient(circle at 40% 30%, #5a3c22, var(--bakelite) 70%);
  border: 0;
  box-shadow:
    0 0 0 2px var(--brass-mid),
    0 0 0 3px var(--brass-dark),
    0 4px 8px 2px rgba(0, 0, 0, 0.55),
    inset 0 2px 2px rgba(255, 220, 160, 0.25),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
@media (hover: hover) {
  .ctrl:hover:not(:disabled) {
    background: radial-gradient(circle at 40% 30%, #6e4a2a, #35210f 70%);
  }
}
.ctrl:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 0 0 2px var(--brass-mid),
    0 0 0 3px var(--brass-dark),
    0 2px 4px 1px rgba(0, 0, 0, 0.55),
    inset 0 2px 5px rgba(0, 0, 0, 0.6);
}
/* Begin / Pause: a red enamel button that glows. */
.ctrl-play {
  color: #fff6e0;
  background: radial-gradient(
    circle at 40% 25%,
    #e8453c,
    var(--poppy) 55%,
    #6e0a10
  );
  border: 0;
  box-shadow:
    0 0 0 2px var(--brass-light),
    0 0 0 4px var(--brass-dark),
    0 0 20px 4px rgba(200, 30, 30, 0.45),
    0 4px 8px 4px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(255, 210, 190, 0.45),
    inset 0 -3px 5px rgba(60, 0, 0, 0.5);
}
@media (hover: hover) {
  .ctrl-play:hover:not(:disabled) {
    background: radial-gradient(
      circle at 40% 25%,
      #f0574d,
      #c8161f 55%,
      #7a0b12
    );
  }
}

/* The Dock Museum's plaque links to the Museum's website (online only). */
a.plaque {
  text-decoration: none;
}
@media (hover: hover) {
  a.plaque:hover {
    filter: brightness(1.08);
  }
}
a.plaque:focus-visible {
  outline: 3px solid #ffe7b0;
  outline-offset: 3px;
}

/* ---------- Dial faceplate: the dial between two arched speaker grilles ---------- */
/* On the website and at the library the faceplate is the cabinet wood itself. In the installation
   it shows through the hole in the real overlay, so it gets its own walnut. */
.zone-dial {
  background: transparent;
  overflow: visible;
}
body.kiosk .zone-dial {
  background: #3b2412 url("../images/walnut.webp") center / 1920px 1080px;
  overflow: hidden;
}
#dial {
  position: relative;
  z-index: 1;
}
.dial-svg {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.grille {
  position: absolute;
  top: 26px;
  bottom: 26px;
  width: 92px;
  border-radius: 46px 46px 8px 8px;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.45) 100%
    ),
    url("../images/cloth-chevron.webp") center / 336px auto;
  box-shadow:
    0 0 0 2px var(--brass-dark),
    0 0 0 4px var(--brass-light),
    0 0 0 6px var(--brass-mid),
    0 0 0 7px #3a2610,
    0 4px 10px 7px rgba(0, 0, 0, 0.4),
    inset 0 6px 12px rgba(0, 0, 0, 0.55);
}
.grille-left {
  left: 22px;
}
.grille-right {
  right: 22px;
}
/* The grilles stop short of the bottom for two brass maker's plaques: Artfly under the left,
   the Dock Museum under the right. The logos are "engraved" and filled black, like lettering on
   an old instrument plate. */
.zone-dial .grille {
  bottom: 132px;
}
.plaque {
  position: absolute;
  z-index: 1;
  bottom: -12px;
  width: 102px;
  height: 125px;
  box-sizing: border-box;
  padding: 10px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 11px;
  background:
    radial-gradient(
      circle at 7px 7px,
      #5a4220 0 1.5px,
      #e8d199 2px 2.6px,
      transparent 3px
    ),
    radial-gradient(
      circle at calc(100% - 7px) 7px,
      #5a4220 0 1.5px,
      #e8d199 2px 2.6px,
      transparent 3px
    ),
    radial-gradient(
      circle at 7px calc(100% - 7px),
      #5a4220 0 1.5px,
      #e8d199 2px 2.6px,
      transparent 3px
    ),
    radial-gradient(
      circle at calc(100% - 7px) calc(100% - 7px),
      #5a4220 0 1.5px,
      #e8d199 2px 2.6px,
      transparent 3px
    ),
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 246, 214, 0.35) 42%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(160deg, #e6c77c 0%, #c59f4f 38%, #d8b866 58%, #a07a34 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 205, 0.8),
    inset 0 -1px 0 rgba(70, 45, 10, 0.6),
    inset 0 0 0 1px rgba(90, 62, 20, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.55);
}
.plaque-left {
  left: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plaque-right {
  right: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plaque-logo {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  flex: none;
}
/* Artfly's logo is drawn in black outlines: greyed and multiplied, the outlines etch dark and the
   cream fills become plain brass. */
.etched-lines {
  filter: grayscale(1) contrast(1.8) brightness(1.15);
  mix-blend-mode: multiply;
  opacity: 0.92;
}
/* The Museum's logo is solid shapes: cut out of a dark fill. */
.etched-shape {
  background: #2a1b0b;
  -webkit-mask: url("../images/dock-museum-logo.svg") center / contain no-repeat;
  mask: url("../images/dock-museum-logo.svg") center / contain no-repeat;
  opacity: 0.9;
}
.plaque-name {
  text-transform: capitalize;
  font:
    700 18px/1.1 "Cinzel",
    serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #2a1b0b;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
}
.plaque-name-1 {
  font:
    700 10px/1.1 "Cinzel",
    serif;
  line-height: 6px;
}
.plaque-name-2 {
  font:
    700 22px/1.1 "Cinzel",
    serif;
}
.plaque-name-3 {
  font:
    700 16px/1.1 "Cinzel",
    serif;
  line-height: 8px;
}

/* Two thin wooden slats across each opening, as on a fretwork front. */
.grille::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0 calc(33% - 3px),
    #4a2d16 calc(33% - 3px) calc(33% + 3px),
    rgba(0, 0, 0, 0) calc(33% + 3px) calc(67% - 3px),
    #4a2d16 calc(67% - 3px) calc(67% + 3px),
    rgba(0, 0, 0, 0) calc(67% + 3px)
  );
  filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.5));
}