/* GENERATED by design/theme/export.py from the canvas board wcc.css. Change the canvas and re-export; do not edit. */
/* Whiskey City Cruisers: shared comp stylesheet. Mirrors assets/css/site.css tokens; the System board documents each rule.
   Chrome is never a CSS gradient: it comes from 3D renders (gauge, radio plate, knob, lever, nut, frame sprites). */
:root {
  --onyx: #0e1012; --onyx-2: #17191c; --onyx-3: #24272b;
  --ivory: #f1e8d4; --ivory-2: #e3d5b6;
  --turq: #4fb3a6; --turq-club: #3c8c82; --turq-deep: #1d6964;
  --red: #b02f26; --red-hi: #df4a3a; --red-key: #9e2a22;
  --gold: #d2a24c; --gold-hi: #f6d98f;
  --muted-dark: #b3ada2; --muted-light: #4d4638; --stitch: #c8b49a33;
  --f-script: 'Yellowtail', cursive; --f-wide: 'Michroma', sans-serif;
  --f-display: 'Big Shoulders Display', sans-serif; --f-body: 'DM Sans', sans-serif;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px);
  /* Every chrome part reflects My Old Kentucky Home (Federal Hill, Bardstown). */
  --sprite-knob: url("../img/options-knob-a.png");
  --sprite-lever: url("../img/options-lever-a.png");
  --sprite-nut: url("../img/options-nut-a.png");
  --sprite-frame: url("../img/parts-frame.png");
  --leather: url("../img/parts-leather.png");
  --sprite-bezel: url("../img/parts-bezel.png");
  --brushed: url("../img/parts-brushed.png");
  --jeweled: url("../img/parts-jeweled.png");
  --gauge-chrome: url("../img/parts-gauge-chrome.png");
  --chrome-type: url("../img/parts-chrome-type.png");
  --wordmark: url("../img/options-word-b3.png");
  --sprite-knob-bakelite: url("../img/options-knob-b.png");
  --sprite-switch-on: url("../img/options-switch-on.png");
  --sprite-switch-off: url("../img/options-switch-off.png");
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--onyx); color: var(--ivory); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.eyebrow { font: 400 12px/1 var(--f-wide); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.h2 { font: 900 clamp(44px, 8vw, 96px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.sub { margin-top: 14px; font-size: 18px; color: var(--muted-dark); max-width: 52ch; }
.on-ivory .sub { color: var(--muted-light); }
.sec { padding: clamp(56px, 9vw, 112px) 0; }
.on-ivory { background: var(--ivory); color: #1a1a1a; }
.on-ivory .eyebrow { color: var(--turq-deep); }
.leather { background: var(--leather) 0 0 / 180px, linear-gradient(180deg, #1c1b1a, #141413 40%, #0d0d0d); background-blend-mode: soft-light, normal; }

/* Top bar: leather dash pad, stitched seam, radio nav in a chrome-tube bezel around a recessed brushed-satin face */
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px var(--gutter) 18px; border-bottom: 1px solid #ffffff14; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; border-top: 1.5px dashed var(--stitch); }
.brand { display: flex; flex-direction: column; line-height: .9; text-decoration: none; }
.brand b { font: 400 27px var(--f-script); color: var(--ivory); }
.brand span { font: 400 10px var(--f-wide); letter-spacing: .42em; color: var(--gold); margin-top: 3px; text-transform: uppercase; }
/* Bezel is a 9-slice of the 3D chrome tube, so it never stretches; the face is brushed satin, tinted a
   touch darker toward the edges and shadowed where it sits below the bezel. */
.radio { display: flex; flex-direction: column; gap: 8px; padding: 4px 5px 6px; border: 9px solid transparent; border-image: var(--sprite-bezel) 44 / 9px stretch; border-radius: 14px;
  background: radial-gradient(120% 140% at 50% 30%, #0000 40%, #0005), var(--brushed) center / 512px 100% repeat-x; background-clip: padding-box;
  box-shadow: inset 0 3px 6px #0007, inset 0 -1px 0 #fff3, 0 8px 18px -8px #000; }
.dial { position: relative; display: flex; justify-content: space-between; align-items: center; height: 20px; padding: 0 12px; border-radius: 5px; background: radial-gradient(60% 160% at 40% 50%, #5a3d17, transparent 70%), #140e07; box-shadow: inset 0 2px 6px #000; font: 400 8px/1 var(--f-wide); color: var(--gold-hi); }
.dial i { position: absolute; top: 2px; bottom: 2px; width: 2px; background: var(--red-hi); box-shadow: 0 0 8px var(--red-hi); }
.keys { display: flex; gap: 6px; }
.keys a { display: grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 14px; border-radius: 5px 5px 8px 8px; text-decoration: none; font: 400 10px/1 var(--f-wide); letter-spacing: .12em; text-transform: uppercase; color: #1d1a14; background: linear-gradient(180deg, #fffaf0, var(--ivory) 60%, var(--ivory-2)); box-shadow: 0 3px 0 #8d8169, 0 4px 6px #0007; }
.keys a.on { transform: translateY(3px); box-shadow: 0 0 0 #8d8169, inset 0 2px 4px #0003; color: var(--red-key); }

/* Dash controls drawn from 3D sprites */
.knob-row { display: flex; gap: 14px; flex-wrap: wrap; }
.knob { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; min-width: 88px; text-decoration: none; color: var(--ivory); }
.knob-cap { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sprite-knob) center / 118% no-repeat; box-shadow: 0 10px 14px -6px #000c; }
.knob-cap span { display: grid; place-items: center; width: 44%; height: 44%; border-radius: 50%; background: #121314; color: var(--ivory); font: 400 12px/1 var(--f-wide); box-shadow: inset 0 2px 3px #000; }
.plate { font: 400 10px/1 var(--f-wide); letter-spacing: .2em; text-transform: uppercase; padding: 7px 10px 6px; border-radius: 4px; background: #08090a; color: var(--ivory); box-shadow: inset 0 1px 2px #000; }
.toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ivory); text-decoration: none; }
.toggle-body { display: grid; grid-template-columns: auto 44px auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: #08090a; }
.toggle-body small { font: 400 8px/1 var(--f-wide); letter-spacing: .14em; text-transform: uppercase; color: #8e887d; }
.toggle-body small.lit { color: var(--ivory); }
.toggle-nut { grid-column: 2; grid-row: 1; justify-self: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #121314 26%, transparent 27%), var(--sprite-nut) center / 120% no-repeat; }
.toggle-lever { grid-column: 2; grid-row: 1; justify-self: center; width: 52px; height: 52px; margin: -11px 0; background: var(--sprite-lever) center / contain no-repeat; transform: rotate(30deg); }
.toggle-lever.off { transform: rotate(-30deg); }
.toggle-label { font: 400 10px/1.2 var(--f-wide); letter-spacing: .18em; text-transform: uppercase; }

/* Chrome-tube frame (9-slice of the 3D frame sprite) around photos and album cards */
.framed { border: 18px solid transparent; border-image: var(--sprite-frame) 60 / 18px stretch; background: #0d0e0f; background-clip: padding-box; }

/* Date cards */
.dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.date { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 18px; border-radius: 16px; background: #fffaf0; box-shadow: 0 0 0 1px #0000000f, 0 10px 24px -14px #0006; color: #1a1a1a; }
.date.next { background: var(--onyx); color: var(--ivory); }
.date.next::after { content: "Next up"; position: absolute; top: -10px; right: 16px; padding: 5px 10px; border-radius: 99px; background: var(--red); color: #fff; font: 400 9px/1 var(--f-wide); letter-spacing: .18em; text-transform: uppercase; }
.date-dial { width: 76px; height: 76px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--onyx); color: var(--ivory); box-shadow: 0 0 0 3px #c9d0d4, 0 0 0 5px #5b646a, inset 0 2px 6px #000; }
.date-dial b { font: 900 30px/.9 var(--f-display); }
.date-dial small { font: 400 9px/1 var(--f-wide); letter-spacing: .2em; color: var(--gold); margin-top: 3px; text-transform: uppercase; }
.date h3 { font: 700 22px/1.05 var(--f-display); text-transform: uppercase; }
.date p { margin-top: 6px; font-size: 14px; color: var(--muted-light); }
.date.next p { color: var(--muted-dark); }

/* Info cards on painted turquoise */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.info { padding: 28px; border-radius: 16px; background: var(--turq); color: var(--onyx); }
.info h3 { font: 400 12px/1 var(--f-wide); letter-spacing: .26em; text-transform: uppercase; margin-bottom: 14px; }
.info p, .info li { font-size: 16px; }
.info ul { margin: 0; padding-left: 18px; }

/* Albums */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.album { display: block; text-decoration: none; color: var(--ivory); }
.album-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.count { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 99px; background: #0e1012d9; font: 400 10px/1 var(--f-wide); letter-spacing: .14em; }
.album-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 6px 4px; }
.album-meta h3 { font: 900 24px/1 var(--f-display); text-transform: uppercase; }
.album-meta time { font: 400 10px/1 var(--f-wide); letter-spacing: .12em; color: var(--gold); white-space: nowrap; }

/* Merch */
.merch { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.product { padding: 12px 12px 20px; border-radius: 18px; background: var(--onyx-2); box-shadow: 0 0 0 1px #ffffff14; text-decoration: none; color: var(--ivory); display: block; }
.product-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.product h3 { font: 900 22px/1 var(--f-display); text-transform: uppercase; margin: 14px 6px 4px; }
.product p { margin: 0 6px; color: var(--muted-dark); font-size: 14px; }
.price { display: block; margin: 10px 6px 0; font: 400 11px/1 var(--f-wide); letter-spacing: .14em; color: var(--gold); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 99px; font: 400 12px/1 var(--f-wide); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 0 2px #0008, 0 0 0 4px #c9d0d4, 0 0 0 5px #5b646a; }
.btn-red { background: var(--red); color: #fff; }
.btn-ivory { background: var(--ivory); color: var(--onyx); }
.btn-dark { background: var(--onyx-3); color: var(--ivory); }

.spear { height: 22px; margin: 0 var(--gutter); background: #9aa2a6; clip-path: polygon(0 50%, 100% 0, 100% 100%); }

.footer { position: relative; padding: 48px 0 40px; background: #08090a; color: var(--muted-dark); font-size: 14px; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.credits { margin-top: 18px; font-size: 12px; color: #8e887d; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }

/* Hover never changes a control's text color: keys, buttons, knobs and cards keep their own (pages set a gold
   hover for plain text links, which is unreadable on ivory keys and buttons). Hover is shown by depth instead. */
.keys a:hover { color: #1d1a14; background: linear-gradient(180deg, #fffdf6, #f6eedd 60%, var(--ivory-2)); }
.keys a.on:hover { color: var(--red-key); }
.btn-red:hover { color: #fff; filter: brightness(1.08); }
.btn-ivory:hover { color: var(--onyx); filter: brightness(1.04); }
.btn-dark:hover { color: var(--ivory); filter: brightness(1.15); }
.knob:hover, .album:hover, .product:hover, .brand:hover { color: var(--ivory); }
.on-ivory a:not(.btn):hover, .info a:not(.btn):hover { color: var(--turq-deep); }

/* Radio tuning: on every page the dial needle swings in from the last station, overshoots and settles,
   like a tuner on a cord-and-pulley drive. (The live theme springs it from the previous page's spot.) */
.dial i { animation: tune 1.15s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tune {
  0% { transform: translateX(-140px); }
  52% { transform: translateX(9px); }
  68% { transform: translateX(-5px); }
  82% { transform: translateX(2px); }
  92% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* Realistic presses: a fast travel down under the finger, a springy return when released. */
.keys a { transition: transform .22s cubic-bezier(.3, 1.8, .5, 1), box-shadow .22s ease, background .2s; }
.keys a:active { transform: translateY(4px); box-shadow: 0 0 0 #8d8169, inset 0 3px 5px #0004; transition-duration: .05s; }
.btn { transition: transform .25s cubic-bezier(.3, 1.8, .5, 1), box-shadow .25s ease, filter .2s; }
.btn:active { transform: translateY(2px) scale(.97); box-shadow: 0 0 0 2px #0008, 0 0 0 3px #c9d0d4, 0 0 0 4px #5b646a, inset 0 3px 6px #0006; transition-duration: .05s; }
.knob-cap { transition: transform .35s cubic-bezier(.3, 1.8, .5, 1), box-shadow .25s ease; }
.knob:hover .knob-cap { transform: none; } /* no hover motion: things move on scroll and on press only */
.knob:active .knob-cap { transform: rotate(14deg) translateY(-3px) scale(1.06); box-shadow: 0 18px 20px -8px #000; transition-duration: .08s; }
.toggle-lever { transition: transform .2s cubic-bezier(.5, 1.9, .5, 1); }
@media (prefers-reduced-motion: reduce) { .dial i { animation: none; } .keys a, .btn, .knob-cap, .toggle-lever { transition: none; } }

/* Radio geometry, after the '57 Chevy radio: a chrome volume knob and tuning knob at either end, a dial
   window of curved glass in its own chrome frame, and push buttons that are solid keys (ivory face tilted
   toward the driver, a visible body below it, a chrome collar around each) rather than flat tiles. */
.topbar .radio { position: relative; padding-inline: 54px; }
.topbar .radio::before, .topbar .radio::after {
  content: ""; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  background: var(--sprite-knob) center / 118% no-repeat; box-shadow: 0 6px 8px -3px #000c;
}
.topbar .radio::before { left: 6px; transform: rotate(-24deg); }
.topbar .radio::after { right: 6px; transform: rotate(31deg); }
.dial {
  height: 24px; border: 3px solid transparent; border-image: var(--sprite-bezel) 44 / 3px stretch;
  border-radius: 10px / 14px; background-clip: padding-box;
  box-shadow: inset 0 3px 7px #000, inset 0 -1px 0 #ffffff1a;
}
.dial::before { /* one soft glare across the curved glass */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 28%, #ffffff17 40%, transparent 54%);
}
.keys { gap: 8px; perspective: 260px; }
.keys a {
  min-height: 38px; border: 3px solid transparent; border-image: var(--sprite-bezel) 44 / 3px stretch; border-radius: 3px;
  background: linear-gradient(180deg, #fffdf5 0%, var(--ivory) 55%, #e2d4b4 100%); background-clip: padding-box;
  transform: rotateX(14deg); transform-origin: 50% 100%;
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px -2px #8d816988, 0 2px 0 #b7a988, 0 5px 0 #6d6553, 0 8px 9px -2px #000a;
}
.keys a:hover { background: linear-gradient(180deg, #fffefa 0%, #f6eedd 55%, #e8dbbd 100%); background-clip: padding-box; }
.keys a.on, .keys a:active {
  transform: rotateX(4deg) translateY(4px);
  box-shadow: inset 0 2px 4px #0003, 0 1px 0 #6d6553, 0 3px 5px -2px #000a;
}
.phone-bar .radio::before, .phone-bar .radio::after { display: none; }

/* Dash build: the top bar is the padded crash pad of a '57 dash. It catches light along its crown and rolls
   under into shadow at the front edge, sits on a chrome molding strip (the top run of the 3D tube), and
   carries the club name as a dash nameplate: script in a chrome-framed plate, like the Bel Air emblem. */
.topbar {
  box-shadow: inset 0 12px 16px -12px #ffffff1f, inset 0 -14px 16px -10px #000d, 0 10px 18px -6px #000c;
  border-bottom: 0; margin-bottom: 6px; z-index: 2;
}
.topbar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 0;
  border-top: 6px solid transparent; border-image: var(--sprite-bezel) 44 0 0 0 / 6px 0 0 0 stretch;
  filter: drop-shadow(0 3px 3px #000a);
}
.topbar::after { bottom: 9px; }
.brand {
  padding: 7px 16px 9px; border: 5px solid transparent; border-image: var(--sprite-bezel) 44 / 5px stretch; border-radius: 8px;
  background: radial-gradient(120% 90% at 50% 20%, #23272b, #0b0c0d 70%); background-clip: padding-box;
  box-shadow: inset 0 2px 4px #000, 0 4px 8px -3px #000c;
}
.brand b { text-shadow: 0 2px 0 #000; }
.footer .brand { padding: 0; border: 0; background: none; box-shadow: none; }
.phone-bar .keys a { border-width: 2px; transform: rotateX(10deg); }

@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  .topbar { justify-content: center; }
  .topbar .radio { display: none; }
  .phone-bar { display: block !important; }
  .cards3 { grid-template-columns: 1fr; }
  .knob-row { justify-content: center; gap: 6px; flex-wrap: nowrap; }
  .knob { min-width: 0; }
  .knob-cap { width: 56px; height: 56px; }
  .plate { font-size: 9px; letter-spacing: .12em; padding-inline: 8px; }
  .footer-grid { flex-direction: column; text-align: center; }
}
.phone-bar { display: none; position: sticky; bottom: 10px; margin: 0 10px; z-index: 5; }
.phone-bar .radio { padding: 6px 6px 8px; gap: 6px; }
.phone-bar .dial { height: 12px; font-size: 0; }
.phone-bar .keys { gap: 4px; }
.phone-bar .keys a { flex: 1; min-width: 0; min-height: 44px; padding: 0 2px; font-size: 8px; letter-spacing: .02em; }

/* Engine-turned aluminum, after the '64 Impala and '59 dash panels: rows of overlapping spun discs. It
   replaces the brushed satin on the radio face; the vignette keeps it reading as recessed under the bezel. */
.radio { background: radial-gradient(120% 140% at 50% 30%, #0000 40%, #0006), var(--jeweled) 0 0 / 104px; background-clip: padding-box; }

/* Moving reflections. Light travels across the real 3D chrome as the page scrolls: one hard highlight with
   a dark band trailing it, the way a strip of sky slides along a bumper when the car rolls. The band is
   masked to the chrome itself (the gauge's chrome-only render, the knob sprite, the frame tube), so paint,
   leather and type never catch it. Only the light moves; the chrome under it is the same render. */
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes sweep-mask { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.sheen-host { position: relative; }
.sheen, .knob-cap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, #0000 28%, #fff0 36%, #fff3 44%, #fff5 46%, #fff2 49%, #0000 53%, #0003 58%, #0000 66%) 62% 0 / 260% 100% no-repeat;
}
.sheen { -webkit-mask: var(--gauge-chrome) center / 100% 100% no-repeat; mask: var(--gauge-chrome) center / 100% 100% no-repeat; }
.knob-cap { position: relative; }
.knob-cap::after { border-radius: 50%; -webkit-mask: var(--sprite-knob) center / 118% no-repeat; mask: var(--sprite-knob) center / 118% no-repeat; }
.framed { position: relative; }
.framed::after { /* a brighter copy of the tube, revealed by a moving band */
  content: ""; position: absolute; inset: -18px; pointer-events: none;
  border: 18px solid transparent; border-image: var(--sprite-frame) 60 / 18px stretch; filter: brightness(1.35);
  -webkit-mask: linear-gradient(112deg, #0000 40%, #000 47%, #000 49%, #0000 56%) 70% 0 / 320% 100% no-repeat;
  mask: linear-gradient(112deg, #0000 40%, #000 47%, #000 49%, #0000 56%) 70% 0 / 320% 100% no-repeat;
}
@supports (animation-timeline: scroll()) {
  .sheen, .knob-cap::after { animation: sweep linear both; animation-timeline: scroll(root); animation-range: 0 1100px; }
  .framed::after { animation: sweep-mask linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@media (prefers-reduced-motion: reduce) { .sheen, .knob-cap::after, .framed::after { animation: none; } }

/* Chrome lettering, like the script on a '57 fender: the letter is filled with the same Kentucky Home
   reflection as the 3D chrome, squeezed to letter height (sky, dark horizon band, lawn). Dark grounds only:
   the texture never drops below 5:1 on onyx (4.6:1 on onyx-2), and it fails on ivory (3.2:1), so it is never used there. Large script
   only (32 px and up); small caps stay solid gold. */
.chrome-type, .footer .brand b {
  color: #c9cdd0; /* fallback where background-clip: text is unsupported */
  background: var(--chrome-type) center / 100% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: none;
  filter: drop-shadow(0 1px 0 #fff3) drop-shadow(0 2px 0 #000) drop-shadow(0 8px 10px #0009);
}
.footer .brand b { font-size: 40px; line-height: 1.05; padding-right: .12em; }

/* Contrast pass (System page). Ratios are measured, WCAG 2.2 AA: 4.5:1 text, 3:1 large text and UI edges.
   1. Keys sit in a dark slot: ivory against the engine-turned face was only 2.8:1 at the key's edge. */
.keys a { box-shadow: 0 0 0 1.5px #000c, inset 0 1px 0 #fff, inset 0 -3px 4px -2px #8d816988, 0 2px 0 #b7a988, 0 5px 0 #6d6553, 0 8px 9px -2px #000a; }
.keys a.on, .keys a:active { box-shadow: 0 0 0 1.5px #000c, inset 0 2px 4px #0003, 0 1px 0 #6d6553, 0 3px 5px -2px #000a; }
/* 2. Nothing readable under 10 px: phone keys, toggle labels and date-dial months were 8 to 9 px. */
.phone-bar .keys a, .phone-nav .keys a { font-size: 10px; letter-spacing: .06em; }
.toggle-body small { font-size: 10px; color: var(--muted-dark); } /* 8.9:1 */
.date-dial small { font-size: 10px; }
/* 3. Focus is always visible: turquoise ring on dark (7.6:1 on onyx), onyx ring on ivory and turquoise (15.7:1). */
:focus-visible, .is-focus { outline: 3px solid var(--turq); outline-offset: 3px; }
.on-ivory :focus-visible, .info :focus-visible, .on-ivory .is-focus { outline-color: var(--onyx); }

/* Bakelite keys: solid molded plastic, opaque all the way through. The chrome collar is gone (a 3 px slice of
   the tube read as see-through); the key sits in a dark slot with a warm ivory body, a soft rounded highlight
   across the top and a darker inner edge at the bottom, the way molded phenolic catches light. Hover changes
   nothing but a touch of brightness. Label 12:1 at the key's darkest edge; pressed red label 4.7:1. */
.keys a {
  border: 0; border-image: none; border-radius: 4px;
  background: radial-gradient(130% 75% at 50% 0%, #fffaf0 0%, #f3e9d3 45%, #e4d5b3 100%) #ece0c4;
  box-shadow: 0 0 0 1.5px #000c, inset 0 1px 1px #fffc, inset 0 -3px 3px -1px #9c8a6488, 0 2px 0 #b9a77f, 0 5px 0 #5f553f, 0 8px 9px -2px #000a;
}
.keys a:hover { background: radial-gradient(130% 75% at 50% 0%, #fffdf6 0%, #f6eedc 45%, #e8dabb 100%) #efe4ca; }
.keys a.on, .keys a:active {
  background: radial-gradient(130% 75% at 50% 10%, #f3e9d3 0%, #e8dbbd 60%, #ddcca6 100%) #e6d8b8;
  box-shadow: 0 0 0 1.5px #000c, inset 0 2px 4px #0003, 0 1px 0 #5f553f, 0 3px 5px -2px #000a;
}
.phone-bar .keys a { border-width: 0; }

/* Butterscotch Bakelite, chosen over ivory: the classic amber phenolic of '50s radio buttons. Label stays
   near-black (5.9:1 at the key's darkest edge, 5.2:1 pressed). Red text on butterscotch is only 2.6:1, so the
   current page shows by depth plus a small red lamp above the label, never by text color. */
.keys a, .keys a:hover, .keys a.on:hover { color: #1d1a14; }
.keys a { background: radial-gradient(130% 75% at 50% 0%, #f7d27e 0%, #e8b155 45%, #c98a2b 100%) #dda04a; box-shadow: 0 0 0 1.5px #000c, inset 0 1px 1px #fff6, inset 0 -3px 3px -1px #7a4a1088, 0 2px 0 #a8721f, 0 5px 0 #5b3a10, 0 8px 9px -2px #000a; }
.keys a:hover { background: radial-gradient(130% 75% at 50% 0%, #fad98c 0%, #ecb85f 45%, #cf9030 100%) #e0a650; }
.keys a.on, .keys a:active { background: radial-gradient(130% 75% at 50% 10%, #e8b155 0%, #d39a3c 60%, #c08227 100%) #d39a3c; box-shadow: 0 0 0 1.5px #000c, inset 0 2px 4px #0004, 0 1px 0 #5b3a10, 0 3px 5px -2px #000a; color: #1d1a14; }
.keys a.on { position: relative; }
.keys a.on::before { content: ""; position: absolute; top: 4px; left: 50%; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--red-hi); box-shadow: 0 0 6px var(--red-hi); }

/* Card button: a butterscotch Bakelite push-plate from the radio-key family, for actions on painted cards.
   Label 5.9:1; the dark slot ring holds 7.6:1 against turquoise so the button's edge always reads. */
.btn-key {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 6px;
  font: 400 11px/1 var(--f-wide); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #1d1a14;
  background: radial-gradient(130% 75% at 50% 0%, #f7d27e 0%, #e8b155 45%, #c98a2b 100%) #dda04a; box-shadow: 0 0 0 1.5px #000c, inset 0 1px 1px #fff6, inset 0 -3px 3px -1px #7a4a1088, 0 2px 0 #a8721f, 0 5px 0 #5b3a10, 0 8px 9px -2px #000a;
  transition: transform .22s cubic-bezier(.3, 1.8, .5, 1), box-shadow .22s ease;
}
.btn-key::after { content: "\2197"; font: 400 15px/1 var(--f-body); }
.btn-key:hover, .info a.btn-key:hover { color: #1d1a14; filter: brightness(1.04); }
.btn-key:active { transform: translateY(3px); background: radial-gradient(130% 75% at 50% 10%, #e8b155 0%, #d39a3c 60%, #c08227 100%) #d39a3c; box-shadow: 0 0 0 1.5px #000c, inset 0 2px 4px #0004, 0 1px 0 #5b3a10, 0 3px 5px -2px #000a; transition-duration: .05s; }
@media (prefers-reduced-motion: reduce) { .btn-key { transition: none; } }

/* The next cruise-in card matches the others; only the Next up label sets it apart. */
.date.next { background: #fffaf0; color: #1a1a1a; }
.date.next p { color: var(--muted-light); }

/* Refined dash controls, after the inspo dashes.
   Pull knob: a fluted chrome skirt and stepped shoulder ('57 to '59 knobs) around the black Bakelite insert.
   Toggle: a long chrome bat handle out of a hex nut on a knurled washer, mounted in a small chrome-bezeled
   plate with engraved-white labels, like an accessory switch under the dash. */
.toggle-body { border: 4px solid transparent; border-image: var(--sprite-bezel) 44 / 4px stretch; border-radius: 9px;
  background: radial-gradient(120% 140% at 50% 20%, #1b1d20, #08090a 70%); background-clip: padding-box;
  box-shadow: inset 0 2px 4px #000, 0 4px 8px -3px #000c; padding: 7px 10px; }
.toggle-nut { width: 34px; height: 34px; background: var(--sprite-nut) center / 118% no-repeat; }
.toggle-lever { width: 66px; height: 66px; margin: -16px 0; }
.toggle-body small { text-shadow: 0 1px 0 #000; }

/* Knurled pull knob: a diamond-knurled chrome skirt under a stepped top, seen a little from above so the
   grip shows. The cap is drawn whole (no round crop) and shadowed to its own outline. */
.knob-cap, .topbar .radio::before, .topbar .radio::after { border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 8px #000b); background-size: 104%; }
.knob-cap span { width: 38%; height: 38%; transform: translateY(-3%); }

/* Card button in ivory Bakelite (butterscotch did not sit well on the turquoise cards): opaque warm off-white,
   soft top highlight, darker bottom edge, dark slot ring. Label 12:1 at the darkest edge. */
.btn-key { background: radial-gradient(130% 75% at 50% 0%, #fffaf0 0%, #f3e9d3 45%, #e4d5b3 100%) #ece0c4;
  box-shadow: 0 0 0 1.5px #000c, inset 0 1px 1px #fffc, inset 0 -3px 3px -1px #9c8a6488, 0 2px 0 #b9a77f, 0 5px 0 #5f553f, 0 8px 9px -2px #000a; }
.btn-key:active { background: radial-gradient(130% 75% at 50% 10%, #f3e9d3 0%, #e8dbbd 60%, #ddcca6 100%) #e6d8b8;
  box-shadow: 0 0 0 1.5px #000c, inset 0 2px 4px #0003, 0 1px 0 #5f553f, 0 3px 5px -2px #000a; }

/* Wordmark insignia (option B3): chrome "Whiskey City" script on a chrome corn-husk leaf, CRUISERS in gold
   block letters. Bourbon is at least 51% corn, so the husk ties the badge to whiskey. It is a real 3D render
   sitting straight on the leather; the name stays in the markup as text for screen readers and search. */
.brand, .footer .brand { width: 232px; height: 86px; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--wordmark) center / contain no-repeat; filter: drop-shadow(0 6px 6px #000c); }
.footer .brand { width: 300px; height: 112px; }
.brand b, .brand span, .footer .brand b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Toggle in perspective: the whole switch is one 3D render seen from above the dash, a slim chrome lever out
   of a smooth chrome bushing (the hex nut is gone), thrown toward the lit side. One render per state. */
.toggle-nut { display: none; }
.toggle-lever, .toggle-lever.off { width: 62px; height: 62px; margin: -16px 0; transform: none; background: var(--sprite-switch-on) center / contain no-repeat; }
.toggle-lever.off { background-image: var(--sprite-switch-off); }

/* Two knobs, two jobs, the way '50s dashes mixed them: knurled chrome pull knobs for navigation, butterscotch
   Bakelite for the radio's volume and tuning knobs, matching its Bakelite keys. */
.topbar .radio::before, .topbar .radio::after { background-image: var(--sprite-knob-bakelite); }

/* Radio keys back to ivory Bakelite, matching the card buttons (butterscotch stays on the radio's two knobs).
   Labels 12:1 at the darkest edge, 11:1 pressed; the current page still shows by depth and the red lamp. */
.keys a { background: radial-gradient(130% 75% at 50% 0%, #fffaf0 0%, #f3e9d3 45%, #e4d5b3 100%) #ece0c4; box-shadow: 0 0 0 1.5px #000c, inset 0 1px 1px #fffc, inset 0 -3px 3px -1px #9c8a6488, 0 2px 0 #b9a77f, 0 5px 0 #5f553f, 0 8px 9px -2px #000a; }
.keys a:hover { background: radial-gradient(130% 75% at 50% 0%, #fffdf6 0%, #f6eedc 45%, #e8dabb 100%) #efe4ca; }
.keys a.on, .keys a:active { background: radial-gradient(130% 75% at 50% 10%, #f3e9d3 0%, #e8dbbd 60%, #ddcca6 100%) #e6d8b8; box-shadow: 0 0 0 1.5px #000c, inset 0 2px 4px #0003, 0 1px 0 #5f553f, 0 3px 5px -2px #000a; }

/* No decorative knobs on the radio: they did nothing, so they are gone. The radio face keeps its normal padding. */
.topbar .radio::before, .topbar .radio::after { display: none; }
.topbar .radio { padding-inline: 5px; }

/* Album covers sit in a windshield gasket: a black rubber channel with a thin chrome locking bead (3D render).
   Single photos (the viewer, the show grid, one-off images) get no frame at all; the photo is the point. */
:root { --sprite-gasket: url("../img/options-frame-d.png"); }
.framed { border: 0; border-image: none; background: none; }
.framed::after { display: none; }
.album.framed { border: 20px solid transparent; border-image: var(--sprite-gasket) 64 / 20px stretch; background: #0d0e0f; background-clip: padding-box; }

/* Section header: a working pull knob with its plate label, then the heading. The knob always links somewhere
   real (no decorative controls), and it replaces the old eyebrow line. */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
.sec-head .knob { flex-direction: row; gap: 0; height: 48px; }

/* Hero photo strips: three rows of the club's own show photos run behind the hero, tilted like the wordmark.
   They are dimmed and warmed, and feathered away around the text (and faded at the top and bottom) so the
   copy sits on clean onyx. They slide with scroll rather than on a timer, so there is no endless motion to pause
   (WCAG 2.2.2), and they hold still for reduced motion. Single photos, so no frames. */
.hero-band { position: relative; overflow: hidden; isolation: isolate; }
.hero-band > .hero { position: relative; z-index: 1; }
.hero-strips {
  position: absolute; inset: -6% -12%; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  transform: rotate(-4deg); opacity: .42; filter: sepia(.3) saturate(.85) brightness(.65); pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 34% 60% at 30% 52%, transparent 58%, #000 96%), linear-gradient(#0000, #000 18%, #000 82%, #0000);
  -webkit-mask-composite: source-in; mask: radial-gradient(ellipse 34% 60% at 30% 52%, transparent 58%, #000 96%), linear-gradient(#0000, #000 18%, #000 82%, #0000);
  mask-composite: intersect;
}
.strip { display: flex; gap: 14px; width: max-content; }
.strip img { height: 168px; width: auto; border-radius: 6px; }
.strip:nth-child(2) { margin-left: -220px; }
@keyframes strip-drift { from { transform: translateX(0); } to { transform: translateX(-18%); } }
@supports (animation-timeline: scroll()) {
  .strip { animation: strip-drift linear both; animation-timeline: scroll(root); animation-range: 0 1400px; }
  .strip:nth-child(2) { animation-direction: reverse; }
}
@media (prefers-reduced-motion: reduce) { .strip { animation: none; } }

/* Knob panel: the hero's pull knobs mounted in a small dash panel built like the gauge pod (leather face,
   saddle stitch, the same two chrome-and-steel rings, rounded corners), so they read as one instrument. */
.knob-panel { position: relative; display: inline-flex; gap: 22px; padding: 20px 26px 18px; border-radius: 28px;
  background: var(--leather) 0 0 / 180px, linear-gradient(180deg, #1c1b1a, #141413 40%, #0d0d0d); background-blend-mode: soft-light, normal;
  box-shadow: 0 0 0 3px #c9d0d4, 0 0 0 5px #4d555a, 0 24px 40px -18px #000, inset 0 1px 0 #ffffff1f; }
.knob-panel::before { content: ""; position: absolute; inset: 8px; border-radius: 21px; border: 1.5px dashed var(--stitch); pointer-events: none; }
.knob-panel .knob { position: relative; min-width: 76px; }

/* Toggle plate without the chrome rectangle: the switch sits on a plain dark plate. */
.toggle-body { border: 0; border-image: none; box-shadow: inset 0 1px 2px #000; padding: 6px 10px; }

/* Dense photo field: five tighter rows of show photos. They fade and settle in when the page loads (rows
   staggered), then keep running sideways at different speeds, alternating direction. Motion that never stops
   needs a way to stop it (WCAG 2.2.2), so the hero carries a working Reel switch; reduced motion starts it off. */
.hero-strips { gap: 10px; animation: field-in 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.strip img { height: 112px; }
.strip:nth-child(2) { margin-left: -160px; }
.strip:nth-child(4) { margin-left: -90px; }
@keyframes field-in { from { opacity: 0; transform: rotate(-4deg) scale(1.06); } to { opacity: .42; transform: rotate(-4deg) scale(1); } }
@keyframes strip-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes strip-in { from { opacity: 0; translate: 80px 0; } to { opacity: 1; translate: 0 0; } }
.strip, .strip:nth-child(2) { animation: strip-in 1.1s cubic-bezier(.2, .7, .2, 1) both, strip-run 90s linear infinite; animation-timeline: auto; animation-range: normal; }
.strip:nth-child(2) { animation-delay: .12s, 0s; animation-direction: normal, reverse; animation-duration: 1.1s, 120s; }
.strip:nth-child(3) { animation-delay: .24s, 0s; animation-duration: 1.1s, 75s; }
.strip:nth-child(4) { animation-delay: .36s, 0s; animation-direction: normal, reverse; animation-duration: 1.1s, 105s; }
.strip:nth-child(5) { animation-delay: .48s, 0s; animation-duration: 1.1s, 85s; }
.hero-band.reel-off .strip { animation-play-state: running, paused; }
.reel-toggle { position: absolute; right: var(--gutter); bottom: 16px; z-index: 2; background: none; border: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hero-strips, .strip { animation: none; } .hero-strips { opacity: .42; } }

/* Pull knob press: the knob pulls straight out toward you (grows, its shadow deepens) and springs back.
   It no longer shifts or tilts. */
.knob:hover .knob-cap, .knob:active .knob-cap { transform: none; }
.knob:active .knob-cap { transform: scale(1.08); filter: drop-shadow(0 14px 10px #000c); transition-duration: .08s; }

/* Dash molding between sections, after the long ribbed trim on a '57 dash: a crowned chrome strip with three
   ribs and bullet ends (3D render, 9-sliced so the ends never stretch) and a gold V badge at center. It
   straddles the seam between sections, and the dash pieces above it (knob panel, gauge pod) sit right on it,
   so the page reads as one connected dash. Decorative only. */
:root { --dash-bar: url("../img/options-dash-bar.png"); --dash-badge: url("../img/options-dash-badge-wc.png"); }
.dash-bar { position: relative; z-index: 3; box-sizing: border-box; height: 24px; width: min(100% - 2 * var(--gutter), 1260px); margin: -12px auto;
  border-style: solid; border-width: 0 32px; border-image: var(--dash-bar) 0 200 fill / 0 32px stretch; filter: drop-shadow(0 4px 4px #000a); }
.dash-bar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; background: var(--dash-badge) center / contain no-repeat; }
.reel-toggle { top: 14px; bottom: auto; }
.reel-toggle .toggle-label { padding: 6px 8px; border-radius: 4px; background: #08090a; } /* label sits over photos: keep it on solid dark */

/* Tighter top bar: less padding around the nameplate and radio, and a snugger radio. Keys keep their 44 px
   tap height. */
.topbar { padding: 6px var(--gutter) 12px; }
.topbar::after { bottom: 6px; }
.brand { width: 200px; height: 74px; }
.topbar .radio { padding: 3px 5px 5px; gap: 5px; }
.topbar .dial { height: 20px; }
.topbar .keys { gap: 6px; }
.topbar .keys a { min-height: 44px; padding: 0 12px; }

/* Knobs: no drop shadow. The knob render is drawn slightly larger than its box, so a filter shadow traced the
   box's cut edge and showed a square halo. The 3D render carries its own shading. */
.knob-cap, .knob:active .knob-cap { filter: none; box-shadow: none; }

/* Working toggles: each is a real checkbox (role switch) inside a label, so clicking or pressing Space flips
   it with no script. The lever render follows the state, the lit label follows the state, and focus shows on
   the plate. Off = left label, on = right label. */
.toggle-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
label.toggle { position: relative; cursor: pointer; }
.toggle:has(.toggle-input) .toggle-lever { background-image: var(--sprite-switch-off); }
.toggle:has(.toggle-input:checked) .toggle-lever { background-image: var(--sprite-switch-on); }
.toggle:has(.toggle-input) .toggle-body small { color: #8e887d; }
.toggle:has(.toggle-input:not(:checked)) .toggle-body small:first-of-type,
.toggle:has(.toggle-input:checked) .toggle-body small:last-of-type { color: var(--ivory); }
.toggle:has(.toggle-input:focus-visible) .toggle-body { outline: 3px solid var(--turq); outline-offset: 3px; }
/* Photo reel switch really pauses the running photo field. */
.hero-band:has(.reel-toggle .toggle-input:not(:checked)) .strip { animation-play-state: running, paused; }
/* Sort switch really reorders the albums: oldest year first, and oldest album first within each year. */
.years { display: flex; flex-direction: column; }
body:has(.sort-input:checked) .years { flex-direction: column-reverse; }
body:has(.sort-input:checked) .years .albums { direction: rtl; }
.years .albums > * { direction: ltr; }

/* Poke: pressing the gauge jiggles just the gauge and its rigged parts, like a hand tapping the instrument.
   On press it snaps off-center; on release it springs back past center and settles (a hard overshoot curve).
   The rest of the hero stays put. Off for reduced motion. */
.hero .sheen-host { cursor: pointer; transition: transform .5s cubic-bezier(.25, 3.2, .35, .7); }
.hero .sheen-host:active { transform: translate(-3px, 1px) rotate(-.6deg); transition-duration: .04s; }
@media (prefers-reduced-motion: reduce) { .hero .sheen-host, .hero .sheen-host:active { transition: none; transform: none; } }

/* Directional poke on the comp: four invisible tap zones over the gauge (one per quadrant). The gauge rocks
   away from the quadrant you press and springs back past center when you let go. The theme does this with the
   exact tap point, and there every needle and odometer drum also jiggles on its own random timing. */
.poke-zones { position: absolute; inset: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; }
.sheen-host:has(.pz-tl:active) { transform: translate(3px, 2px) rotate(-.7deg); transition-duration: .04s; }
.sheen-host:has(.pz-tr:active) { transform: translate(-3px, 2px) rotate(.7deg); transition-duration: .04s; }
.sheen-host:has(.pz-bl:active) { transform: translate(3px, -2px) rotate(.5deg); transition-duration: .04s; }
.sheen-host:has(.pz-br:active) { transform: translate(-3px, -2px) rotate(-.5deg); transition-duration: .04s; }
.hero .sheen-host:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .sheen-host:has(.poke-zones span:active) { transform: none; } }
/* The Photo reel switch floats in the hero's top-right corner, clear of the top bar's chrome molding. It needs
   the extra class weight: label.toggle (the working-toggle rule) would otherwise drop it back into the flow. */
label.toggle.reel-toggle { position: absolute; top: 30px; right: var(--gutter); bottom: auto; left: auto; z-index: 2; }

/* Dash molding badge: a WC emblem drawn from the nameplate (chrome script WC on the chrome husk leaf, onyx
   disc, chrome ring), replacing the generic V. */
.dash-bar::after { width: 54px; height: 54px; margin: -27px 0 0 -27px; }

/* Phone nav matches the desktop radio: the same dial window with its numbers, needle and glare, and the same
   bakelite keys at the same tilt and spacing. Keys stay 44 px tall; labels stay 10 px (rule 2). */
.phone-bar .radio { padding: 3px 5px 5px; gap: 5px; }
.phone-bar .dial { height: 20px; padding: 0 8px; font-size: 8px; }
.phone-bar .keys { gap: 6px; }
.phone-bar .keys a { transform: rotateX(14deg); min-height: 44px; }
.phone-bar .keys a.on, .phone-bar .keys a:active { transform: rotateX(4deg) translateY(4px); }
/* On a phone the hero stacks, so the Photo reel switch drops into the flow under the gauge instead of covering the eyebrow. */
@media (max-width: 720px) { label.toggle.reel-toggle { position: relative; top: auto; right: auto; display: flex; width: fit-content; margin: 8px auto 28px; } }