:root {
  --gold-hi: #fff1bf; --gold: #d9a43a; --gold-lo: #7a4f12;
  --lacquer: #6e1a14; --lacquer-hi: #9c2b1f; --ink: #2a0d09; --cream: #f6ead2; --dusk: #1d1630;
  --rye: 'Rye', 'Georgia', serif; --body: 'Libre Baskerville', 'Georgia', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--dusk); color: var(--cream); overflow: hidden; overscroll-behavior: none; }
body { font: 16px/1.55 var(--body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

#ride { position: fixed; inset: 0; }
#gl { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
#gl.point { cursor: pointer; }
#gl.drag { cursor: grabbing; }

/* the brass name plate under the panel you're looking at */
#plaque { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); pointer-events: none; opacity: 0; transition: opacity .35s ease;
  padding: 6px 16px 7px; border-radius: 4px; text-align: center; white-space: nowrap; max-width: 92vw;
  background: linear-gradient(#f6dc8e, #c8902e 55%, #8a5a17); color: #3a1608; box-shadow: 0 2px 0 #4a2a06, 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6); }
#plaque.on { opacity: 1; }
#plaque b { display: block; font: 400 17px/1.15 var(--rye); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
#plaque span { display: block; font: 700 10px/1.3 var(--body); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }

/* the ring at the end of the arm: an invisible hand-sized target over the ring itself */
#ring { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; padding: 0; }
#ring:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ticket booth */
#booth { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); width: 118px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); transition: transform .2s ease; }
#booth img { display: block; width: 100%; height: auto; }
#booth:hover { transform: translateY(-3px); }
#booth:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 8px; }
.booth-sign { position: absolute; left: 50.2%; top: 26.6%; transform: translate(-50%, -50%); font: 400 8.5px/1 var(--rye); letter-spacing: .03em; color: #8e1c14; text-shadow: 0 1px 0 rgba(255,240,200,.6); white-space: nowrap; pointer-events: none; }

/* the board of every figure */
#board { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(12, 6, 20, .55); }
#board[hidden] { display: none; }
.board-wood { position: relative; width: min(760px, 100%); max-height: min(86vh, 860px); max-height: min(86svh, 860px); overflow: auto; overscroll-behavior: contain;
  padding: 26px 28px 30px; border-radius: 10px;
  background: radial-gradient(120% 80% at 50% 0%, #a3402a 0%, #6e1a14 55%, #4a100c 100%);
  border: 10px solid transparent; border-image: linear-gradient(135deg, var(--gold-hi), var(--gold) 30%, var(--gold-lo) 60%, var(--gold) 80%, var(--gold-hi)) 1;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,220,140,.35); }
.board-name { display: block; margin: 0 auto 18px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 clamp(26px, 5vw, 40px)/1.1 var(--rye); color: #ffe39a; letter-spacing: .04em;
  text-shadow: 0 2px 0 #3a0c06, 0 0 18px rgba(255, 190, 90, .35); }
.board-name:hover, .board-name:focus-visible { color: #fff6d8; outline: none; }
#board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
#board-list button { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; }
#board-list button:hover, #board-list button:focus-visible { background: rgba(255, 214, 140, .12); outline: none; }
#board-list img { width: 74px; height: 50px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
#board-list b { display: block; font: 400 17px/1.15 var(--rye); color: #ffe7b0; }
#board-list span { display: block; font: 700 10px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #e9b98a; }

.gilt-x { position: absolute; top: 8px; right: 8px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d9a43a 45%, #6f4510 100%); color: #3a1608; font: 700 26px/44px var(--body);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 -2px 0 rgba(0,0,0,.25); }
.gilt-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* sound */
#snd { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 20; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; padding: 9px;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #c8902e 50%, #6f4510); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
#snd svg { width: 100%; height: 100%; fill: none; stroke: #3a1608; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#snd .spk { fill: #3a1608; }
#snd[aria-pressed="true"] .off, #snd[aria-pressed="false"] .on { display: none; }

/* the case study, in a rounding-board frame */
#study { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px; background: rgba(10, 5, 18, .62); }
#study[hidden] { display: none; }
.study-frame { position: relative; width: min(1040px, 100%); height: min(92vh, 1000px); height: min(92svh, 1000px); border-radius: 12px; padding: 22px;
  background: linear-gradient(135deg, #fff2c2, #d9a43a 22%, #8a5a17 46%, #e6b552 64%, #7a4f12 84%, #f2d389);
  box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 6px rgba(80,40,0,.35);
  animation: frame-in .45s cubic-bezier(.2,.9,.25,1); }
@keyframes frame-in { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.study-bulbs { position: absolute; left: 30px; right: 30px; height: 10px; pointer-events: none;
  background: radial-gradient(circle, #fffbe6 0 2.5px, #ffcf6e 3.5px, rgba(255,190,80,.45) 5px, transparent 7px) 0 50% / 26px 10px repeat-x; }
.study-bulbs.top { top: 6px; } .study-bulbs.bottom { bottom: 6px; }
.study-scroll { position: relative; height: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 6px;
  padding: 34px clamp(16px, 4vw, 48px) 48px;
  background: radial-gradient(130% 60% at 50% 0%, #7c2219 0%, #4e120d 50%, #300a07 100%);
  box-shadow: inset 0 0 0 3px #3a0c06, inset 0 0 40px rgba(0,0,0,.55);
  --ab-fg: #f6ead2; --ab-muted: #e3b98c; --ab-accent: #ffd27a; --ab-chrome: 150px; }
.study-head { text-align: center; margin: 0 52px 26px; }
#study-name { margin: 0; font: 400 clamp(30px, 5vw, 52px)/1.05 var(--rye); color: #ffe39a; letter-spacing: .02em; text-shadow: 0 2px 0 #2a0805, 0 0 24px rgba(255, 190, 90, .3); }
#study-client { margin: 8px 0 0; font: 700 12px/1.4 var(--body); letter-spacing: .24em; text-transform: uppercase; color: #e9b98a; }
#study-client:empty { display: none; }
#study-box { --ab-chrome: 150px; }
#study-box .ab-lede { font-size: 1.12em; font-style: italic; text-align: center; max-width: 46em; margin: 0 auto; }
#study-box .ab-heading { font: 400 22px/1.2 var(--rye); color: #ffd98a; letter-spacing: .02em; }
#study-box .ab-text { max-width: 46em; }
#study-box .ab-credits { border-top: 1px solid rgba(255, 210, 140, .25); padding-top: 14px; }
#study-box .ab-frame, #study-box .ab-image img { box-shadow: 0 0 0 3px #c8902e, 0 0 0 5px #3a0c06, 0 10px 28px rgba(0,0,0,.5); }
#study-box audio { filter: sepia(.4) saturate(1.2); }
.about-title { text-align: center; font: 700 13px/1.4 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #ffd98a; margin: 0 0 12px; }
.about-bio { text-align: center; font-size: 1.15em; font-style: italic; max-width: 34em; margin: 0 auto 18px; }
.about-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 0 26px; }
.about-contact a { color: #ffe39a; }
.about-jobs { list-style: none; margin: 0 auto; padding: 0; max-width: 40em; display: grid; gap: 14px; }
.about-jobs b { display: block; font: 400 18px/1.2 var(--rye); color: #ffe7b0; }
.about-jobs span { display: block; font: 700 10px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #e9b98a; }
.about-jobs p { margin: 4px 0 0; }

/* loading: a ticket and its bulbs */
#loader { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; gap: 22px; justify-items: center; transition: opacity .7s ease;
  background: radial-gradient(120% 90% at 50% 100%, #4a2440 0%, #1d1630 55%, #120c1e 100%); }
#loader.done { opacity: 0; pointer-events: none; }
.ticket { display: flex; align-items: center; gap: 16px; padding: 16px 26px; color: #fff3d6; background: #b8231c; border-radius: 4px;
  font: 400 30px/1 var(--rye); letter-spacing: .06em; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 9px, #000 10px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 10px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 9px, #000 10px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 10px) right / 51% 100% no-repeat;
  outline: 2px dashed rgba(255,235,200,.55); outline-offset: -8px; }
.ticket-num::before { content: '\2605'; font-size: 16px; opacity: .8; }
.loader-bulbs { display: flex; gap: 10px; }
.loader-bulbs i { width: 12px; height: 12px; border-radius: 50%; background: #5a3a22; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); transition: background .25s, box-shadow .25s; }
.loader-bulbs i.lit { background: #fff1c2; box-shadow: 0 0 6px #ffd27a, 0 0 18px rgba(255, 190, 80, .8); }

@media (max-width: 700px) {
  #booth { width: 66px; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); }
  .booth-sign { display: none; }
  #board { padding: 8px; }
  .board-wood { max-height: calc(100vh - 16px); max-height: calc(100svh - 16px); padding: 18px 14px 20px; border-width: 7px; }
  #board-list { grid-template-columns: minmax(0, 1fr); }
  #study { padding: 6px; }
  .study-frame { height: calc(100vh - 12px); height: calc(100svh - 12px); padding: 12px; border-radius: 8px; }
  .study-bulbs { left: 18px; right: 18px; }
  .study-bulbs.top { top: 1px; } .study-bulbs.bottom { bottom: 1px; }
  .study-scroll { padding: 26px 12px 36px; }
  #study-box { --ab-chrome: 110px; }
  .study-head { margin: 0 40px 18px; }
  #snd { width: 36px; height: 36px; padding: 8px; }
  .ticket { font-size: 22px; padding: 12px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .study-frame { animation: none; }
}