/* Identity keyboard: loads AFTER style.css and overrides the keyboard block. */
html { scroll-behavior: smooth; }
.keyboard-wrap { perspective: none; width: min(1240px, 96vw); }
.keyboard {
height: clamp(250px, 24vw, 310px);
transform: none; padding: 12px 10px 0;
touch-action: manipulation;
}
.key.white { margin: 0 1.5px; }
.key.black { height: 60%; }
.key.white.bonus { background: linear-gradient(180deg,#f6e7b8 0%,#ecd38e 70%,#dcbd72 100%); border-color:#a8873c; }
/* Identity words printed on the keys (desktop: reads top-to-bottom, full word, never clipped) */
.key-name {
position: absolute; left: 50%; pointer-events: none; white-space: nowrap;
font-family: var(--serif); font-weight: 700; letter-spacing: .005em;
writing-mode: vertical-rl; transform: translateX(-50%);
}
.key.white .key-name { bottom: 14px; font-size: 23px; color: #2a2112; }
.key.black .key-name { bottom: 14px; font-size: 20px; color: var(--gold-soft); }
.key-letter {
position: absolute; left: 50%; top: 66%; transform: translate(-50%,-50%);
font-family: var(--serif); font-weight: 600; font-size: 2.1rem; color: #7a5a17; pointer-events: none; line-height: 1;
}
.key-cap {
position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); pointer-events: none;
font-family: var(--serif); font-weight: 700; font-size: 17px; color: #4a3a0e; white-space: nowrap;
}
.key.white.bonus::before { display: none; }
.key.facet:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.kb-hint { max-width: 60ch; line-height: 1.5; }
.facet-label { color: var(--muted); font-size: .85rem; text-align: center; max-width: 52ch; margin: 1.5rem auto 0; }
.facet-label em { color: var(--gold-soft); }
.flash-target { animation: flashTarget 1.5s ease; }
/* Phone: the piano turns sideways. Keys become full-width rows so the words print horizontally. */
@media (max-width: 700px) {
.hero { padding-left: 12px; padding-right: 12px; }
.keyboard-wrap { width: 100%; }
.keyboard { flex-direction: column; height: auto; padding: 8px 8px 8px 8px; touch-action: pan-y; }
.key.white { flex: none; height: 54px; margin: 1.5px 0; border: 1px solid #b9b2a0; border-left: none; border-radius: 0 6px 6px 0; }
.key.black { height: auto; width: 46%; left: 0; border-radius: 0 5px 5px 0; }
.key-name { writing-mode: horizontal-tb; transform: translateY(-50%); top: 50%; bottom: auto; }
.key.white .key-name { left: 48%; font-size: 20px; transform: translateY(-50%); }
.key.black .key-name { left: 12px; bottom: auto; top: 50%; font-size: 19px; }
.key-letter { left: 56%; top: 47%; font-size: 2.2rem; color: #5b4713; line-height: 1; }
.key-cap { left: 80%; bottom: auto; top: 50%; transform: translate(-50%,-50%); font-size: 18px; }
}
/* ===== v5: keyboard rotated 90 degrees at every width (low C at top, high C at bottom). ===== */
.keyboard-wrap { width: min(560px, 100%); }
.keyboard { flex-direction: column; height: auto; padding: 10px; touch-action: pan-y; }
.key.white { flex: none; height: 54px; margin: 1.5px 0; border: 1px solid #b9b2a0; border-left: none; border-radius: 0 6px 6px 0; }
.key.black { height: auto; width: 46%; left: 0; border-radius: 0 5px 5px 0; }
.key-name { writing-mode: horizontal-tb; text-orientation: mixed; line-height: 1; }
.key.white .key-name, .key.black .key-name { top: 50%; bottom: auto; transform: translateY(-50%); }
.key.white .key-name { left: 48%; font-size: 20px; }
.key.black .key-name { left: 12px; font-size: 19px; }
.key-letter { left: 56%; top: 47%; font-size: 2.2rem; color: #5b4713; line-height: 1; }
.key-cap { left: 80%; bottom: auto; top: 50%; transform: translate(-50%, -50%); font-size: 18px; }
/* Desktop: title on the left, tall keyboard on the right; rows short enough that the whole keyboard fits on screen. */
@media (min-width: 901px) {
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; justify-items: start; text-align: left;
column-gap: 5vw; min-height: 0; padding: 4rem max(4vw, calc((100vw - 1240px) / 2)) 3rem; }
.hero h1 { font-size: clamp(3.5rem, 7.5vw, 7rem); }
.hero-inner { grid-column: 1; grid-row: 1 / span 2; }
.keyboard-wrap { grid-column: 2; grid-row: 1; width: 100%; }
.kb-hint { grid-column: 2; grid-row: 2; text-align: left; }
.key.white { height: 44px; }
.key-letter { font-size: 1.9rem; }
.key.white .key-name { font-size: 21px; }
}
/* ===== v7: realistic keys for the sideways piano (shading, grain and shadows re-aimed for rows). ===== */
.keyboard {
padding: 12px 10px 12px 0;
background: linear-gradient(90deg, #120f0b 0, #2b241a 14px, #1a150f 100%);
border-radius: 10px;
box-shadow: 0 30px 60px rgba(0,0,0,.65), 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 22px rgba(0,0,0,.8);
}
/* red felt strip along the left edge, like the cloth under the fallboard */
.keyboard::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; background: linear-gradient(90deg,#4a0f12,#7a1c1f); box-shadow: 1px 0 2px rgba(0,0,0,.6); z-index: 4; pointer-events: none; }
.key.white {
margin: 0 0 3px 0; border: 1px solid #a89f88; border-left: none; border-radius: 0 7px 7px 0;
background:
linear-gradient(90deg, rgba(0,0,0,.10) 0, rgba(0,0,0,0) 7%, rgba(0,0,0,0) 78%, rgba(110,88,50,.24) 100%),
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #fffef8 0%, #f6f0de 45%, #ece3cb 80%, #ddd2b4 100%);
background-blend-mode: normal, multiply, normal;
box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px rgba(120,100,60,.30), inset -12px 0 14px rgba(120,100,60,.20), 1px 2px 3px rgba(0,0,0,.55);
}
.key.white::after { background: repeating-linear-gradient(180deg, rgba(150,130,90,.06) 0 1px, transparent 1px 6px); opacity: .6; }
.key.white:nth-child(odd) { filter: brightness(.985) sepia(.05); }
.key.white:nth-child(3n) { filter: brightness(.965) sepia(.10); }
.key.white.pressed { transform: translateX(4px); filter: brightness(.9); box-shadow: inset 0 1px 0 #fff, inset -4px 0 8px rgba(90,70,40,.35), 0 1px 1px rgba(0,0,0,.5); }
.key.black {
border: 1px solid #000; border-left: none; border-radius: 0 6px 6px 0;
background:
linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 70%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, #55504a 0%, #25211c 14%, #0d0b09 50%, #000 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(255,255,255,.10), inset -7px 0 8px rgba(255,255,255,.07), 5px 6px 9px rgba(0,0,0,.70), 1px 1px 1px rgba(0,0,0,.9);
}
.key.black.pressed { transform: translateX(4px); filter: brightness(.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 2px 3px 4px rgba(0,0,0,.6); }
/* v7: shorter keys (less empty space between the black keys and the end of the key). */
.keyboard-wrap { width: min(400px, 100%); }
@media (min-width: 901px) {
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.kb-hint { max-width: 400px; }
}
/* v7: two-line keys (role + small qualifier) */
.key-name small { display: block; margin-top: 3px; font-size: .6em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }
.key-name { text-align: left; }
/* ===== v8: role slideshow ===== */
#roles { max-width: 1100px; margin: 0 auto; padding: 2rem 16px 3rem; scroll-margin-top: 70px; }
.rs-stage { min-height: 420px; }
.rs-slide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.rs-slide[hidden] { display: none; }
.rs-photo { width: 100%; height: 420px; object-fit: cover; border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.55); background: #1a1712; }
.rs-count { color: var(--muted); font-size: .8rem; letter-spacing: .14em; }
.rs-copy h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); margin: .3rem 0 .8rem; }
.rs-copy p { line-height: 1.6; }
.rs-link { display: inline-block; margin-top: 1rem; color: var(--gold); }
.rs-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.rs-btn { font: inherit; font-size: 1.4rem; width: 52px; height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--gold); cursor: pointer; }
.rs-btn:hover { background: rgba(201,162,91,.15); }
.rs-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rs-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; cursor: pointer; }
.rs-dot.on { background: var(--gold); border-color: var(--gold); }
@media (max-width: 800px) {
.rs-slide { grid-template-columns: 1fr; gap: 1rem; }
.rs-photo { height: 260px; }
.rs-stage { min-height: 0; }
}
.rs-copy .credits { list-style: none; padding: 0; margin: 1rem 0 0; }
.rs-copy .credits li { margin: 0 0 .65rem; line-height: 1.4; }
.rs-copy .credit-role { display: block; color: var(--gold-soft); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.rs-photo { object-position: 22% 40%; }
/* ===== v9: arrows on the picture, smooth motion ===== */
#roles { position: relative; }
.rs-slide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.rs-media { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.rs-photo { display: block; box-shadow: none; border-radius: 0; will-change: transform, opacity; }
.rs-media:hover .rs-photo { transform: scale(1.025); transition: transform 1.2s ease-out; }
/* the two arrow buttons float over the photo's left and right edges; each is a wide, easy tap strip */
.rs-arrow { position: absolute; z-index: 3; width: 84px; height: 420px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; transition: background .25s ease; }
.rs-prev { left: calc(16px + 0px); justify-content: flex-start; padding-left: 14px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0)); border-radius: 10px 0 0 10px; }
.rs-next { justify-content: flex-end; padding-right: 14px; border-radius: 0 10px 10px 0; }
.rs-arrow span { display: block; width: 36px; height: 66.6%; background: rgba(255,255,255,.52); filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); transition: background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), filter .2s ease; }
.rs-prev span { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.rs-next span { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.rs-arrow:hover { background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0)); }
.rs-next:hover { background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,0)); }
.rs-arrow:hover span { background: rgba(255,255,255,.88); filter: drop-shadow(0 3px 14px rgba(255,255,255,.55)); }
.rs-prev:hover span { transform: translateX(-5px); }
.rs-next:hover span { transform: translateX(5px); }
.rs-arrow:active span { transform: scale(.9); background: #fff; }
.rs-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.rs-dot { transition: width .25s cubic-bezier(.2,.8,.2,1), background .2s ease, transform .15s ease; }
.rs-dot:hover { transform: scale(1.35); }
.rs-dot.on { width: 30px; border-radius: 6px; }
@media (max-width: 800px) {
.rs-arrow { height: 260px; width: 64px; }
.rs-arrow span { width: 28px; }
}
@media (prefers-reduced-motion: reduce) { .rs-media:hover .rs-photo, .rs-arrow span, .rs-dot { transition: none; transform: none; } }
/* v9 final geometry: arrows live inside each photo; strips cover the photo's full height */
.rs-arrow { top: 0; height: 100%; width: 24%; }
.rs-prev { left: 0; padding-left: 14px; }
.rs-next { right: 0; left: auto; padding-right: 14px; }
.rs-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 40%; z-index: 1; pointer-events: none; }
.rs-photo { position: relative; z-index: 0; }
@media (max-width: 800px) { .rs-arrow { height: 100%; width: 28%; } }
/* ===== v18: v9 with the piano flipped to the LEFT side (title on the right) ===== */
@media (min-width: 901px) {
.hero { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); justify-items: start; text-align: left; }
.keyboard-wrap { grid-column: 1; grid-row: 1; }
.kb-hint { grid-column: 1; grid-row: 2; text-align: left; }
.hero-inner { grid-column: 2; grid-row: 1 / span 2; justify-self: start; }
}
/* ===== v19: much smaller name + tagline ===== */
.hero h1 { font-size: clamp(1.7rem, 2.9vw, 2.6rem); }
.hero .tagline { font-size: clamp(.6rem, .85vw, .75rem); letter-spacing: .18em; margin-top: .5rem; }
/* ===== v20: the picture/text window lives in the hero beside the piano; a Watch button opens a player under it ===== */
@media (min-width: 901px) {
.hero { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; padding-top: 1.5rem; padding-bottom: 2rem; }
.keyboard-wrap { grid-column: 1; grid-row: 1 / span 2; }
.kb-hint { grid-column: 1; grid-row: 3; }
.hero-inner { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; padding-left: 4px; }
#roles { grid-column: 2; grid-row: 2 / span 2; padding: .6rem 0 0; margin: 0; max-width: none; width: 100%; }
.rs-photo { height: clamp(250px, 32vh, 330px); }
.rs-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.rs-copy p, .rs-copy .credits li { font-size: .92rem; }
}
.rs-watchrow { display: flex; justify-content: center; margin-top: .9rem; min-height: 0; }
.rs-watch { font: inherit; font-size: .9rem; letter-spacing: .04em; padding: .7rem 1.4rem; border-radius: 999px; border: 1px solid var(--gold); background: rgba(201,162,91,.12); color: var(--gold); cursor: pointer; transition: background .2s ease, transform .15s ease; }
.rs-watch:hover { background: rgba(201,162,91,.28); transform: translateY(-1px); }
.rs-watch:active { transform: scale(.97); }
.rs-player:empty { display: none; }
.rs-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: .9rem; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.55); background: #000; animation: rsFrameIn .25s ease-out; }
.rs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@keyframes rsFrameIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#roles { display: flex; flex-direction: column; }
.rs-stage { order: 0; min-height: 0; }
.rs-bar { order: 1; margin-top: 1rem; }
.rs-watchrow { order: 2; }
.rs-player { order: 3; }
@media (min-width: 901px) { .rs-slide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.4rem; } }
@media (min-width: 901px) { .hero { grid-template-rows: auto auto 1fr; } .kb-hint { align-self: start; } }
/* ===== v21: big video box, full width under the piano and window ===== */
.hero #rsPlayer { grid-column: 1 / -1; width: min(1040px, 100%); justify-self: center; }
.hero #rsPlayer .rs-frame { margin-top: 1.4rem; }
@media (min-width: 901px) { .hero { grid-template-rows: auto auto 1fr auto; } .hero #rsPlayer { grid-row: 4; } }
/* ===== v22: chakra-coloured keys. Each key glows its note's colour; pressed / hovered / current-role keys blaze. ===== */
.key { --kc: #fff; --kd: 0s; }
.key.white::before { content: ''; display: block !important; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 62%, transparent) 0%, color-mix(in srgb, var(--kc) 30%, transparent) 55%, color-mix(in srgb, var(--kc) 12%, transparent) 100%);
mix-blend-mode: multiply; opacity: .78; transition: opacity .25s ease; animation: keyBreath 6s ease-in-out var(--kd) infinite; }
.key.white { box-shadow: inset 0 -12px 14px rgba(120,100,60,.2), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55), 0 0 10px color-mix(in srgb, var(--kc) 30%, transparent); }
.key.black::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 70%, transparent), color-mix(in srgb, var(--kc) 14%, transparent) 70%, transparent);
opacity: .55; transition: opacity .25s ease; animation: keyBreath 6s ease-in-out var(--kd) infinite; }
.key.black { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(255,255,255,.10), inset -7px 0 8px rgba(255,255,255,.07), 5px 6px 9px rgba(0,0,0,.70), 0 0 12px color-mix(in srgb, var(--kc) 38%, transparent); }
.key.white > span, .key.black > span { z-index: 2; }
.key.white.hover::before, .key.white.active::before, .key.white.pressed::before { opacity: 1; }
.key.black.hover::before, .key.black.active::before, .key.black.pressed::before { opacity: 1; }
.key.white.hover, .key.white.active { box-shadow: inset 0 -12px 14px rgba(120,100,60,.2), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55), 0 0 26px color-mix(in srgb, var(--kc) 85%, transparent), 0 0 4px var(--kc); filter: brightness(1.03) saturate(1.2); }
.key.black.hover, .key.black.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 5px 6px 9px rgba(0,0,0,.7), 0 0 26px color-mix(in srgb, var(--kc) 90%, transparent), 0 0 5px var(--kc); filter: brightness(1.25) saturate(1.3); }
.key.pressed { animation: none; }
.key.white.pressed { box-shadow: inset 0 -5px 10px rgba(90,70,40,.3), 0 0 38px var(--kc), 0 0 8px var(--kc); filter: brightness(1.1) saturate(1.4); }
.key.black.pressed { box-shadow: 0 0 38px var(--kc), 0 0 8px var(--kc); filter: brightness(1.4) saturate(1.4); }
@keyframes keyBreath { 0%, 100% { opacity: .62; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .key.white::before, .key.black::before { animation: none; } }
/* ===== v23: keys rest blank and nearly white; a played key lights up in its colour and shows its word, then fades. ===== */
.key .key-name { opacity: 0; transition: opacity .9s ease; }
.key.played .key-name { opacity: 1; transition: opacity .12s ease; }
.key.white::before { animation: none; opacity: .13; transition: opacity .9s ease; }
.key.black::before { animation: none; opacity: .10; transition: opacity .9s ease; }
.key.white { box-shadow: inset 0 -12px 14px rgba(120,100,60,.2), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55); transition: box-shadow .9s ease, filter .9s ease; }
.key.black { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(255,255,255,.10), inset -7px 0 8px rgba(255,255,255,.07), 5px 6px 9px rgba(0,0,0,.70); transition: box-shadow .9s ease, filter .9s ease; }
/* no hover / "current role" glow any more: only playing lights a key */
.key.white.hover, .key.white.active { filter: none; box-shadow: inset 0 -12px 14px rgba(120,100,60,.2), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55); }
.key.black.hover, .key.black.active { filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(255,255,255,.10), inset -7px 0 8px rgba(255,255,255,.07), 5px 6px 9px rgba(0,0,0,.70); }
.key.white.hover::before, .key.white.active::before { opacity: .13; }
.key.black.hover::before, .key.black.active::before { opacity: .10; }
/* played: blaze (fast in, slow out) */
.key.white.played::before { opacity: 1; transition: opacity .1s ease; }
.key.black.played::before { opacity: 1; transition: opacity .1s ease; }
.key.white.played, .key.white.played.hover { box-shadow: inset 0 -12px 14px rgba(120,100,60,.2), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55), 0 0 32px var(--kc), 0 0 6px var(--kc); filter: brightness(1.05) saturate(1.5); transition: box-shadow .1s ease, filter .1s ease; }
.key.black.played, .key.black.played.hover { box-shadow: 5px 6px 9px rgba(0,0,0,.7), 0 0 32px var(--kc), 0 0 6px var(--kc); filter: brightness(1.45) saturate(1.5); transition: box-shadow .1s ease, filter .1s ease; }
/* ===== v24: no page jerk (fixed-height window, nothing resizes between slides) + more luminous played keys ===== */
@media (min-width: 901px) {
.rs-stage { min-height: 500px; }
.rs-slide { align-items: start; }
.rs-copy { padding-top: .4rem; }
}
.key.pressed { transform: none !important; } /* no key-sink motion either */
.key.white::before { opacity: .09; background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 100%, transparent) 0%, color-mix(in srgb, var(--kc) 75%, transparent) 55%, color-mix(in srgb, var(--kc) 45%, transparent) 100%); }
.key.black::before { opacity: .08; }
.key.white.played::before { opacity: .92; }
.key.black.played::before { opacity: 1; }
.key.white.played, .key.white.played.hover {
box-shadow: inset 0 0 26px rgba(255,255,255,.85), inset 0 0 12px var(--kc), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55),
0 0 46px var(--kc), 0 0 16px var(--kc), 0 0 3px #fff;
filter: brightness(1.12) saturate(1.6);
}
.key.black.played, .key.black.played.hover {
box-shadow: inset 0 0 18px var(--kc), 5px 6px 9px rgba(0,0,0,.7), 0 0 46px var(--kc), 0 0 16px var(--kc), 0 0 3px #fff;
filter: brightness(1.6) saturate(1.6);
}
.key.white.played .key-name { color: #fff; font-weight: 700; text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.55); }
/* ===== v25: glowing key words + a more translucent, glassy lit key ===== */
.key.white.played::before { opacity: .70; }
.key.black.played::before { opacity: .78; }
.key.white.played, .key.white.played.hover { filter: brightness(1.08) saturate(1.45); }
.key.black.played, .key.black.played.hover { filter: brightness(1.45) saturate(1.45); }
.key.played .key-name {
color: #fff; font-weight: 700;
text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 0 5px #fff, 0 0 12px var(--kc), 0 0 24px var(--kc), 0 0 38px var(--kc);
}
/* ===== v26: much more luminous key words (sharp white letters, layered coloured halo, no blur filter) ===== */
.key.played .key-name {
color: #fff; font-weight: 700; -webkit-text-stroke: .4px rgba(0,0,0,.28); filter: none;
text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 2px #fff, 0 0 6px #fff, 0 0 12px var(--kc), 0 0 22px var(--kc), 0 0 36px var(--kc), 0 0 58px var(--kc);
animation: wordGlow 1.8s ease-out both;
}
@keyframes wordGlow {
0% { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 3px #fff, 0 0 10px #fff, 0 0 22px var(--kc), 0 0 44px var(--kc), 0 0 70px var(--kc), 0 0 100px var(--kc); }
30% { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 2px #fff, 0 0 6px #fff, 0 0 12px var(--kc), 0 0 22px var(--kc), 0 0 36px var(--kc), 0 0 58px var(--kc); }
100% { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 2px #fff, 0 0 6px #fff, 0 0 12px var(--kc), 0 0 22px var(--kc), 0 0 36px var(--kc), 0 0 58px var(--kc); }
}
@media (prefers-reduced-motion: reduce) { .key.played .key-name { animation: none; } }
/* ===== v28: 35% piano / 65% picture box ===== */
@media (min-width: 901px) {
.hero { grid-template-columns: 35fr 65fr; column-gap: 2.5vw; }
.keyboard-wrap { width: 100%; }
.kb-hint { max-width: none; }
.rs-photo { height: clamp(300px, 40vh, 420px); }
.rs-stage { min-height: 520px; }
.rs-slide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
@media (min-width: 901px) {
.rs-stage { min-height: 0; }
.rs-copy .credits { columns: 2; column-gap: 1rem; margin-top: .7rem; }
.rs-copy .credits li { break-inside: avoid; font-size: .8rem; margin: 0 0 .5rem; }
.rs-copy p { font-size: .9rem; line-height: 1.5; }
}
@media (min-width: 901px) {
.rs-stage { min-height: 350px; }
.rs-watchrow { min-height: 46px; align-items: center; }
}
/* ===== v29: smaller keys (rows 44px -> 33px, piano 80% of its column) ===== */
@media (min-width: 901px) {
.keyboard-wrap { width: 80%; }
.key.white { height: 33px; margin: 1px 0; }
.keyboard { padding: 8px 8px 8px 0; }
.key.white .key-name { font-size: 17px; }
.key.black .key-name { font-size: 15px; left: 10px; }
}
/* ===== v30: another 10% smaller (rows 33 -> 30px, width 80% -> 72%, words 17 -> 15.5px) ===== */
@media (min-width: 901px) {
.keyboard-wrap { width: 72%; }
.key.white { height: 30px; }
.key.white .key-name { font-size: 15.5px; }
.key.black .key-name { font-size: 13.5px; left: 9px; }
}
/* ===== v32: the piano is exactly as tall as the picture box, and level with it ===== */
:root { --box-h: clamp(300px, 40vh, 420px); }
@media (min-width: 901px) {
.rs-photo { height: var(--box-h); }
.hero { grid-template-rows: auto auto 1fr; }
.hero-inner { grid-column: 2; grid-row: 1; }
.keyboard-wrap { grid-column: 1; grid-row: 2; margin-top: .6rem; align-self: start; }
#roles { grid-row: 2 / span 2; padding-top: .6rem; }
.keyboard { box-sizing: border-box; height: var(--box-h); padding: 8px 8px 8px 0; }
.key.white { flex: 1 1 0; height: auto; min-height: 0; margin: 1px 0; }
}
/* ===== v33: calmer, readable key words: white letters with a firm dark edge and only a faint coloured halo ===== */
.key.played .key-name {
color: #fff; font-weight: 700; -webkit-text-stroke: 0; filter: none; animation: none;
text-shadow: 0 0 1px rgba(0,0,0,.95), 1px 1px 1px rgba(0,0,0,.75), -1px 1px 1px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.65), 0 0 9px var(--kc);
}
/* white keys light up pastel, so their word is dark; black keys stay light-on-dark */
.key.white.played .key-name { color: #1a1208; text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.6); }
.key.black.played .key-name { color: #fff; }
/* ===== v34: piano pushed right, up against the picture box ===== */
@media (min-width: 901px) {
.keyboard-wrap { justify-self: end; margin-right: 0; }
}
/* ===== v35: first key's top edge = picture top, last key's bottom edge = picture bottom; keys a touch larger ===== */
@media (min-width: 901px) {
.keyboard-wrap { width: 76%; margin-top: .6rem; }
.keyboard { padding: 0; border-radius: 6px; }
.keyboard::before { top: 0; bottom: 0; }
.key.white { margin: 0 0 2px 0; }
.key.white:last-of-type { margin-bottom: 0; }
}
/* ===== v36: piano nudged 40px left (gap to the picture box 32px -> 72px) ===== */
@media (min-width: 901px) { .keyboard-wrap { margin-right: 40px; } }
/* ===== v37: picture-box arrows half as opaque (resting 52% -> 26%; hover 88% -> 60%) ===== */
.rs-arrow span { background: rgba(255,255,255,.26); }
.rs-arrow:hover span { background: rgba(255,255,255,.60); }
.rs-arrow:active span { background: rgba(255,255,255,.85); }
/* ===== v38: slimmer arrows (36px -> 22px wide), pushed to the picture's edges (inset 14px -> 5px) ===== */
.rs-arrow span { width: 22px; }
.rs-prev { padding-left: 5px; }
.rs-next { padding-right: 5px; }
@media (max-width: 800px) { .rs-arrow span { width: 18px; } }
/* ===== v39: arrows pushed to the very edge (inset 5px -> 1px) and fainter (rest 26% -> 14%, hover 60% -> 40%) ===== */
.rs-prev { padding-left: 1px; }
.rs-next { padding-right: 1px; }
.rs-arrow span { background: rgba(255,255,255,.14); }
.rs-arrow:hover span { background: rgba(255,255,255,.40); }
.rs-arrow:active span { background: rgba(255,255,255,.70); }
/* ===== v40: hover no longer slides the arrow past the picture edge; it grows in place, anchored to its outer edge ===== */
.rs-prev:hover span, .rs-prev.fh span { transform: scale(1.12); transform-origin: left center; }
.rs-next:hover span, .rs-next.fh span { transform: scale(1.12); transform-origin: right center; }
.rs-prev:active span { transform: scale(.94); transform-origin: left center; }
.rs-next:active span { transform: scale(.94); transform-origin: right center; }
.rs-arrow:hover span, .rs-arrow.fh span { background: rgba(255,255,255,.40); }
/* ===== v41: arrows drawn as outlined triangles so the point is always crisp and visible ===== */
.rs-arrow span { clip-path: none !important; filter: none; background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; }
.rs-prev span { background-image: url("data:image/svg+xml;utf8,"); }
.rs-next span { background-image: url("data:image/svg+xml;utf8,"); }
.rs-prev:hover span, .rs-prev.fh span { background-image: url("data:image/svg+xml;utf8,"); background-color: transparent; }
.rs-next:hover span, .rs-next.fh span { background-image: url("data:image/svg+xml;utf8,"); background-color: transparent; }
.rs-arrow:active span { background-color: transparent; }
/* ===== v42: the top key (Pianist) rests lit in its colour (red), no word until it is played ===== */
.key.white.lit::before { opacity: .70; }
.key.white.lit, .key.white.lit.hover {
box-shadow: inset 0 0 26px rgba(255,255,255,.85), inset 0 0 12px var(--kc), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55),
0 0 46px var(--kc), 0 0 16px var(--kc), 0 0 3px #fff;
filter: brightness(1.08) saturate(1.45);
}
/* ===== v43: the lit Pianist key shows its word at rest ===== */
.key.white.lit .key-name { opacity: 1; color: #1a1208; font-weight: 700; text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.6); }
/* ===== v45: no visible big name/tagline (the menu bar carries the name); the heading stays for screen readers and search ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ===== v47: the full menu bar stays visible in narrower windows; spacing tightens smoothly. Phones (760px and under) keep the compact menu button. ===== */
@media (min-width: 761px) and (max-width: 1279px) {
.nav { padding-left: clamp(.9rem, 2.6vw, 3rem); padding-right: clamp(.9rem, 2.6vw, 3rem); }
.brand { font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: clamp(.07em, 1.1vw, .18em); white-space: nowrap; }
.nav-links { gap: clamp(.55rem, 1.9vw, 2rem); }
.nav-links a { font-size: clamp(.62rem, .98vw, .82rem); letter-spacing: clamp(.04em, .75vw, .14em); white-space: nowrap; }
.nav-cta { padding: clamp(.35rem, .6vw, .55rem) clamp(.55rem, 1.2vw, 1.1rem); }
}
/* ===== v50: white light with only a faint hue (colours are mixed toward white in the JS palette; glows and saturation toned down) ===== */
.key.white::before { opacity: .05; }
.key.white.lit::before { opacity: .45; }
.key.white.lit, .key.white.lit.hover { filter: brightness(1.04); box-shadow: inset 0 0 26px rgba(255,255,255,.9), inset 0 0 10px var(--kc), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55), 0 0 40px rgba(255,255,255,.55), 0 0 14px var(--kc); }
.key.white.played, .key.white.played.hover { filter: brightness(1.05); box-shadow: inset 0 -12px 14px rgba(120,100,60,.2), inset 0 1px 0 #fff, 1px 2px 3px rgba(0,0,0,.55), 0 0 34px rgba(255,255,255,.6), 0 0 12px var(--kc); }
.key.black.played, .key.black.played.hover { filter: brightness(1.45); box-shadow: 5px 6px 9px rgba(0,0,0,.7), 0 0 34px rgba(255,255,255,.55), 0 0 10px var(--kc); }
/* ===== v52: every key shows its word from the start (words no longer wait for a press) ===== */
.key .key-name { opacity: 1; font-weight: 700; transition: none; }
.key.white .key-name { color: #1a1208; text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.6); }
.key.black .key-name { color: #fff; text-shadow: 0 0 1px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.7); }
/* ===== v53: the picture is ~2/3 of the page width; the slide text sits under the picture ===== */
@media (min-width: 901px) {
.hero { grid-template-columns: 28fr 72fr; column-gap: 2vw; }
.rs-slide { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.rs-copy { min-height: 150px; }
.rs-copy .credits { columns: 3; }
.rs-stage { min-height: 0; }
}
@media (min-width: 901px) {
.hero { padding-left: 3vw; padding-right: 3vw; }
:root { --box-h: clamp(340px, 48vh, 540px); }
}
/* ===== v54: the picture is the hero background; piano and text sit on top of it ===== */
@media (min-width: 901px) {
:root { --box-h: clamp(340px, 58vh, 580px); }
.hero { position: relative; overflow: hidden; min-height: min(90vh, 880px); align-items: center; padding-left: 3vw; padding-right: 3vw; }
#roles, .rs-stage, .rs-slide { position: static; }
#roles { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 1.2rem; }
.keyboard-wrap { grid-column: 1; grid-row: 1 / span 3; align-self: center; margin-top: 0; position: relative; z-index: 2; }
.rs-media { position: absolute; inset: 0; z-index: 0; border-radius: 0; box-shadow: none; }
.rs-photo { width: 100%; height: 100%; }
.rs-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(8,6,4,.92) 0%, rgba(8,6,4,.6) 30%, rgba(8,6,4,0) 62%), linear-gradient(to right, rgba(8,6,4,.55) 0%, rgba(8,6,4,0) 38%); }
.rs-arrow { top: 0; height: 100%; z-index: 3; }
.rs-prev { left: 31%; }
.rs-next { right: 0; }
.rs-copy { position: relative; z-index: 2; max-width: 640px; min-height: 0; padding-left: 90px; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.rs-copy .credits { columns: 2; }
.rs-watchrow, .rs-bar { position: relative; z-index: 2; padding-left: 90px; justify-content: flex-start; }
.hero #rsPlayer { position: relative; z-index: 2; }
}
/* ===== v55: black frame around the picture ===== */
@media (min-width: 901px) {
.hero { background: #000; padding-top: 2.2rem; padding-bottom: 2.2rem; }
.rs-media { inset: 22px; border-radius: 4px; }
#roles { padding-bottom: 1.6rem; }
}
/* ===== v56: wider black frame ===== */
@media (min-width: 901px) {
.hero { padding-top: 3.2rem; padding-bottom: 3.2rem; }
.rs-media { inset: 40px; }
#roles { padding-bottom: 2.4rem; }
}
/* ===== v57: arrows no longer overlap the slide text at any desktop width; keys are white outline + white text only ===== */
@media (min-width: 901px) {
.rs-prev { left: calc(30.76vw - 40px); }
.rs-copy { padding-right: 100px; box-sizing: border-box; }
}
.keyboard { background: none; box-shadow: none; }
.keyboard::before { display: none; }
.key.white::before, .key.white::after, .key.black::before, .key.black::after { display: none; }
.key.white, .key.black, .key.white.hover, .key.black.hover, .key.white.active, .key.black.active {
background: none !important; box-shadow: none !important; filter: none !important; box-sizing: border-box;
border: 1px solid rgba(255,255,255,.88) !important; border-radius: 3px;
}
.key.white.played, .key.black.played, .key.white.played.hover, .key.black.played.hover, .key.white.lit, .key.white.lit.hover {
background: rgba(255,255,255,.26) !important; box-shadow: 0 0 18px rgba(255,255,255,.55) !important; filter: none !important;
}
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name {
color: #fff; font-weight: 600; -webkit-text-stroke: 0; text-shadow: 0 1px 3px rgba(0,0,0,.65); opacity: 1;
}
@media (min-width: 901px) { .rs-arrow.rs-prev, .rs-arrow.rs-next { width: 84px; } }
/* ===== v58: frosted-glass outline keys; black keys are solid dark glass so white-key lines never run through their words ===== */
.key.white, .key.white.hover, .key.white.active {
background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 70%, rgba(255,255,255,.015)) !important;
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
border: 1px solid rgba(255,255,255,.62) !important; border-top-color: rgba(255,255,255,.85) !important; border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.key.black, .key.black.hover, .key.black.active {
background: linear-gradient(90deg, rgba(10,8,6,.96), rgba(22,18,14,.93)) !important;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.8) !important; border-radius: 4px;
box-shadow: 4px 5px 12px rgba(0,0,0,.55) !important;
}
.key.white.played, .key.white.played.hover, .key.white.lit, .key.white.lit.hover {
background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.12)) !important;
border-color: #fff !important; box-shadow: 0 0 22px rgba(255,255,255,.55), inset 0 0 14px rgba(255,255,255,.35) !important;
}
.key.black.played, .key.black.played.hover {
background: linear-gradient(90deg, rgba(60,56,50,.97), rgba(30,27,23,.95)) !important;
border-color: #fff !important; box-shadow: 0 0 20px rgba(255,255,255,.55), 4px 5px 12px rgba(0,0,0,.55) !important;
}
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name {
font-weight: 500; letter-spacing: .05em; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
/* ===== v59: bolder, livelier key words ===== */
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name {
font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 5px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.35);
}
/* ===== v60: back to the angular Inter, just bolder ===== */
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name {
font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0; text-shadow: 0 1px 4px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.3);
}
/* ===== v61: the original key font (Cormorant Garamond), true bold weight ===== */
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name {
font-family: var(--serif); font-weight: 700; letter-spacing: .005em; text-shadow: 0 1px 4px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.3);
}
/* ===== v62: keys 10% bigger (piano 10% wider and taller, words 10% larger) ===== */
@media (min-width: 901px) {
:root { --box-h: clamp(374px, 63.8vh, 638px); }
.keyboard-wrap { width: 83.6%; }
.key.white .key-name { font-size: 17px; }
.key.black .key-name { font-size: 14.8px; }
}
@media (min-width: 901px) { .keyboard-wrap { justify-self: end; margin-right: clamp(0px, 1.5vw, 20px); } }
/* ===== v63: the piano is a dropdown (closed at first); a small-letter role menu sits under the top bar ===== */
.rolebar { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.3rem; padding: .55rem 16px; background: #000; border-bottom: 1px solid rgba(255,255,255,.08); }
.rolebar button { font: inherit; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.62); background: none; border: 0; padding: .2rem 0; cursor: pointer; transition: color .2s ease; }
.rolebar button:hover { color: #fff; }
.rolebar button.on { color: var(--gold, #c9a25b); }
.kb-toggle { font: inherit; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; position: relative; z-index: 4; transition: background .2s ease; }
.kb-toggle:hover { background: rgba(255,255,255,.18); }
.kb-toggle span { display: inline-block; transition: transform .25s ease; }
.kb-toggle.open span { transform: rotate(180deg); }
.keyboard-wrap { transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.keyboard-wrap.kb-collapsed { opacity: 0 !important; visibility: hidden; pointer-events: none; transform: translateY(-10px); }
@media (min-width: 901px) { .kb-toggle { position: absolute; left: 64px; top: 60px; } }
@media (max-width: 900px) { .kb-toggle { justify-self: center; margin: 0 auto .8rem; display: block; } .keyboard-wrap.kb-collapsed { display: none; } }
@media (max-width: 760px) { .rolebar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 1.1rem; white-space: nowrap; } }
/* ===== v64: key words in Hind (bold) ===== */
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name {
font-family: 'Hind', 'Inter', sans-serif; font-weight: 700; letter-spacing: .01em;
}
/* ===== v66: Inter, regular weight (not bold) ===== */
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name {
font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: 0;
}
/* ===== v70: only "Ethnomusicologist" (the last white key) starts further left so it fits at full size; every other key stays as in v68 ===== */
.key.white:last-child .key-name { left: 12px; }
/* ===== v71: oval "Play the keys" button with a small modern keyboard symbol, in a different face from the key words ===== */
.kb-toggle { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.25rem .5rem 1rem; border-radius: 999px; font-family: 'Source Sans 3', 'Inter', sans-serif; font-weight: 500; font-size: .82rem; letter-spacing: .2em; }
.kb-icon { width: 28px; height: 16px; flex: none; }
.kb-toggle .kb-label { display: inline; }
.kb-toggle .kb-caret { display: inline-block; transition: transform .25s ease; font-size: .75em; }
.kb-toggle.open .kb-caret { transform: rotate(180deg); }
.kb-toggle span { transition: none; }
.kb-toggle.open span { transform: none; }
.kb-toggle.open .kb-caret { transform: rotate(180deg); }
/* ===== v72: the button itself is a little set of keys: white-key dividers across an oval, black keys along the top, the words on the white keys below ===== */
.kb-toggle {
display: inline-flex; align-items: flex-end; justify-content: center; gap: .55rem;
width: 234px; height: 50px; padding: 0 0 7px; box-sizing: border-box; border-radius: 999px; overflow: hidden;
border: 1px solid rgba(255,255,255,.85);
background:
linear-gradient(90deg, rgba(8,6,4,.94) 0 7px, transparent 7px 19px, rgba(8,6,4,.94) 19px 26px) 0 0 / 26px 28px repeat-x,
repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.55) 25px 26px),
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
font-size: .74rem; letter-spacing: .2em; text-shadow: 0 1px 3px rgba(0,0,0,.7);
transition: box-shadow .25s ease, filter .25s ease;
}
.kb-toggle:hover { background:
linear-gradient(90deg, rgba(8,6,4,.94) 0 7px, transparent 7px 19px, rgba(8,6,4,.94) 19px 26px) 0 0 / 26px 28px repeat-x,
repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.7) 25px 26px),
linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12)); }
.kb-toggle.open { box-shadow: 0 0 18px rgba(255,255,255,.45), inset 0 -10px 14px rgba(255,255,255,.18); }
.kb-toggle .kb-label, .kb-toggle .kb-caret { line-height: 1; position: relative; top: 1px; }
/* ===== v73: the words sit in the top half of the button ===== */
.kb-toggle { align-items: flex-start; padding: 8px 0 0; }
.kb-toggle .kb-label, .kb-toggle .kb-caret { top: 0; text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6); }
/* ===== v74: the piano sits below the button (no overlap) and its keys drop in one after another, top to bottom ===== */
@media (min-width: 901px) { .keyboard-wrap { align-self: start; margin-top: 73px; } }
@keyframes keyIn { from { opacity: 0; transform: translateX(-16px) scaleX(.92); } to { opacity: 1; transform: none; } }
.keyboard-wrap.kb-pop .key { animation: keyIn .4s cubic-bezier(.2,.8,.2,1) both; transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .keyboard-wrap.kb-pop .key { animation: none; } }
@media (min-width: 901px) { .kb-toggle { top: 52px; } .keyboard-wrap { margin-top: 80px; } }
/* ===== v75: the "Play the keys" button (words and key decal) disappears while the menu is folded out ===== */
.kb-toggle { transition: opacity .2s ease, visibility .2s; }
body:has(.nav-links.open) .kb-toggle { opacity: 0; visibility: hidden; pointer-events: none; }
/* ===== v76: beveled keys. Each key is a shape with cut front corners (outline layer + glass layer), not a plain rectangle ===== */
.key.white, .key.black, .key.white.hover, .key.black.hover, .key.white.active, .key.black.active,
.key.white.played, .key.black.played, .key.white.played.hover, .key.black.played.hover, .key.white.lit, .key.white.lit.hover {
background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.key.white, .key.black { --cut: 9px; }
.key.white::before, .key.white::after, .key.black::before, .key.black::after { display: block !important; content: ''; position: absolute; pointer-events: none; z-index: 0; opacity: 1;
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.key.white::before, .key.black::before { inset: 0; background: rgba(255,255,255,.72); }
.key.white::after, .key.black::after { inset: 1px; --cut: 8.4px; }
.key.white::after { background: linear-gradient(180deg, rgba(255,255,255,.34) 0, rgba(255,255,255,.10) 2px, rgba(30,26,20,.34) 2px, rgba(30,26,20,.30) 55%, rgba(0,0,0,.42) 100%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.key.black::before { background: rgba(255,255,255,.85); }
.key.black::after { background: linear-gradient(180deg, rgba(120,114,104,.9) 0, rgba(28,24,20,.97) 2px, rgba(8,6,4,.98) 60%, rgba(0,0,0,1) 100%); }
.key.black { filter: drop-shadow(4px 5px 5px rgba(0,0,0,.5)) !important; }
.key.white.played::before, .key.white.lit::before, .key.black.played::before { background: #fff; opacity: 1; }
.key.white.played::after, .key.white.lit::after { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.34) 50%, rgba(255,255,255,.2)); }
.key.black.played::after { background: linear-gradient(180deg, rgba(190,184,172,.95) 0, rgba(70,64,56,.97) 2px, rgba(36,32,27,.97) 100%); }
.key.white.played, .key.white.lit, .key.black.played { filter: drop-shadow(0 0 9px rgba(255,255,255,.65)) !important; }
.key .key-name { position: absolute; z-index: 2; }
/* the little key decal on the "Play the keys" button: black keys with cut bottom corners */
.kb-toggle, .kb-toggle:hover { background-image:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.55) 25px 26px),
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); background-size: 26px 28px, auto, auto; background-repeat: repeat-x, repeat, repeat; background-position: 0 0, 0 0, 0 0; }
/* ===== v77: bevel dialled back by half (smaller corner cuts, softer highlights and shadows) ===== */
.key.white, .key.black { --cut: 4.5px; }
.key.white::after, .key.black::after { --cut: 4.1px; }
.key.white::before { background: rgba(255,255,255,.66); }
.key.white::after { background: linear-gradient(180deg, rgba(255,255,255,.22) 0, rgba(255,255,255,.07) 2px, rgba(30,26,20,.32) 2px, rgba(30,26,20,.30) 55%, rgba(0,0,0,.36) 100%); }
.key.black::after { background: linear-gradient(180deg, rgba(70,66,60,.92) 0, rgba(20,17,14,.97) 2px, rgba(8,6,4,.98) 60%, rgba(0,0,0,1) 100%); }
.key.black { filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4)) !important; }
.key.white.played::after, .key.white.lit::after { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.34) 50%, rgba(255,255,255,.24)); }
.kb-toggle, .kb-toggle:hover { background-image:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.55) 25px 26px),
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); }
/* ===== v78: bevel dialled back by half again ===== */
.key.white, .key.black { --cut: 2.3px; }
.key.white::after, .key.black::after { --cut: 2px; }
.key.white::before { background: rgba(255,255,255,.64); }
.key.white::after { background: linear-gradient(180deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.05) 2px, rgba(30,26,20,.31) 2px, rgba(30,26,20,.30) 55%, rgba(0,0,0,.33) 100%); }
.key.black::after { background: linear-gradient(180deg, rgba(40,37,33,.95) 0, rgba(14,12,10,.98) 2px, rgba(8,6,4,.98) 60%, rgba(0,0,0,1) 100%); }
.key.black { filter: drop-shadow(2px 2px 2px rgba(0,0,0,.35)) !important; }
.key.white.played::after, .key.white.lit::after { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.34) 50%, rgba(255,255,255,.28)); }
.kb-toggle, .kb-toggle:hover { background-image:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.55) 25px 26px),
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); }
/* ===== v79: bevel restored by ~25% (cuts 2.3px -> 2.9px, highlights a touch stronger); "Ethnomusicologist" is right-justified ===== */
.key.white, .key.black { --cut: 2.9px; }
.key.white::after, .key.black::after { --cut: 2.6px; }
.key.white::before { background: rgba(255,255,255,.65); }
.key.white::after { background: linear-gradient(180deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.055) 2px, rgba(30,26,20,.315) 2px, rgba(30,26,20,.30) 55%, rgba(0,0,0,.345) 100%); }
.key.black { filter: drop-shadow(2.4px 2.4px 2.4px rgba(0,0,0,.36)) !important; }
.kb-toggle, .kb-toggle:hover { background-image:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.55) 25px 26px),
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); }
.key.white:last-child .key-name { left: auto; right: 14px; text-align: right; }
/* ===== v81: white keys are transparent glass again (the grey fill from the bevel is gone); only a faint top highlight remains ===== */
.key.white::after {
background: linear-gradient(180deg, rgba(255,255,255,.20) 0, rgba(255,255,255,0) 2px), linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 70%, rgba(255,255,255,.015));
}
.key.white.played::after, .key.white.lit::after { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.34) 50%, rgba(255,255,255,.2)); }
/* ===== v82: white keys are truly transparent: only a thin outline with cut front corners, nothing inside. A key lights up (soft white fill + glow) only when played. ===== */
.key.white::before {
background: rgba(255,255,255,.75); inset: 0;
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 0,
1px 1px, 1px calc(100% - 1px), calc(100% - var(--cut) - .41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--cut) - .41px),
calc(100% - 1px) calc(var(--cut) + .41px), calc(100% - var(--cut) - .41px) 1px, 1px 1px, 0 0);
}
.key.white::after { display: none !important; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.key.white.played::after, .key.white.lit::after { display: block !important; inset: 0; background: rgba(255,255,255,.34); }
.key.white.played::before, .key.white.lit::before { background: #fff; }
/* ===== v83: a whisper of translucent white inside the resting white keys (about 5%) ===== */
.key.white::after { display: block !important; inset: 1px; --cut: 2.6px; background: rgba(255,255,255,.05); }
.key.white.played::after, .key.white.lit::after { inset: 0; --cut: 2.9px; background: rgba(255,255,255,.34); }
/* ===== v84: resting white-key fill 3% ===== */
.key.white::after { background: rgba(255,255,255,.03); }
.key.white.played::after, .key.white.lit::after { background: rgba(255,255,255,.34); }
/* ===== v85: keys about 20% shorter (piano height x 0.8) ===== */
@media (min-width: 901px) { :root { --box-h: clamp(299px, 51vh, 510px); } }
/* short windows: rows are as small as they get, so the words step down a little to stay clear of the black keys */
@media (min-width: 901px) and (max-height: 660px) { .key.white .key-name { font-size: 15px; } .key.black .key-name { font-size: 13px; } }
/* ===== v86: key words scaled down 20% with the keys (17px -> 13.6px white, 14.8px -> 11.9px black) ===== */
@media (min-width: 901px) { .key.white .key-name { font-size: 13.6px; } .key.black .key-name { font-size: 11.9px; } }
@media (min-width: 901px) and (max-height: 660px) { .key.white .key-name { font-size: 12.5px; } .key.black .key-name { font-size: 10.8px; } }
/* ===== v87: mini video player (fixed in the bottom-right corner), Watch button on the picture, "Videos" entry in the role menu ===== */
#miniPlayer { position: fixed; right: 18px; bottom: 18px; width: min(340px, 78vw); z-index: 60; background: #000; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.65); animation: miniIn .28s cubic-bezier(.2,.8,.2,1); transition: width .3s ease; }
#miniPlayer.big { width: min(780px, 94vw); }
#miniPlayer[hidden] { display: none; }
.mini-bar { display: flex; align-items: center; gap: .3rem; padding: .3rem .4rem .3rem .75rem; background: rgba(12,10,8,.96); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.mini-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-bar button { font: inherit; font-size: .95rem; line-height: 1; color: #fff; background: none; border: 0; padding: .35rem .5rem; cursor: pointer; opacity: .75; }
.mini-bar button:hover { opacity: 1; }
.mini-frame { position: relative; aspect-ratio: 16 / 9; }
.mini-frame iframe, .mini-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mini-frame video { object-fit: contain; background: #000; }
@keyframes miniIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #miniPlayer { animation: none; transition: none; } }
@media (min-width: 901px) {
.rs-watchrow { position: absolute; top: 52px; right: 136px; margin: 0; min-height: 0; padding: 0; z-index: 4; }
.rs-watch { background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.75); color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem 1.1rem; }
.rs-watch:hover { background: rgba(255,255,255,.2); transform: none; }
}
.rolebar { position: relative; }
.rolebar .rb-videos { color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: .2rem .8rem; }
.rolebar .rb-videos:hover { background: rgba(255,255,255,.14); }
#vidMenu { position: absolute; top: 100%; right: 16px; z-index: 70; min-width: 260px; background: rgba(8,6,4,.97); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: .3rem; box-shadow: 0 14px 34px rgba(0,0,0,.6); }
#vidMenu[hidden] { display: none; }
#vidMenu button { display: block; width: 100%; text-align: left; font: inherit; color: #fff; background: none; border: 0; border-radius: 6px; padding: .55rem .7rem; cursor: pointer; text-transform: none; letter-spacing: .02em; font-size: .85rem; }
#vidMenu button:hover { background: rgba(255,255,255,.12); }
#vidMenu b { display: block; font-weight: 600; }
#vidMenu i { display: block; font-style: normal; font-size: .72rem; opacity: .6; letter-spacing: .1em; text-transform: uppercase; margin-top: .1rem; }
/* ===== v88: bevel +15% (corner cuts 2.9px -> 3.3px); piano narrowed so the empty space beside the longest word ("Ethnomusicologist") is halved ===== */
.key.white, .key.black { --cut: 3.3px; }
.key.white::after, .key.black::after { --cut: 3px; }
.key.white.played::after, .key.white.lit::after { --cut: 3.3px; }
.key.white::before { background: rgba(255,255,255,.77); }
.kb-toggle, .kb-toggle:hover { background-image:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.55) 25px 26px),
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); }
@media (min-width: 901px) { .keyboard-wrap { width: calc(41.8% + 64px); } }
/* ===== v89: words start near the left edge of each white key (14px in) and the piano is narrowed to fit the longest word, so there is little blank space ===== */
@media (min-width: 901px) {
.keyboard-wrap { width: 164px; }
.key.white .key-name, .key.white:last-child .key-name { left: 14px; right: auto; text-align: left; }
}
/* ===== v90: more vertical room for the words: rows are about 25% taller again (the piano is back to its earlier height), and the black keys reach less far into the white rows ===== */
@media (min-width: 901px) {
:root { --box-h: clamp(374px, 63.8vh, 638px); }
.key.white .key-name { font-size: 13.6px; }
.key.black .key-name { font-size: 11.9px; }
}
/* ===== v91: white-key words start a bit further right (22px in) and the keys are a bit shorter in length (164px -> 156px) ===== */
@media (min-width: 901px) {
.keyboard-wrap { width: 156px; }
.key.white .key-name, .key.white:last-child .key-name { left: 22px; }
}
/* ===== v92: real piano-key proportions. A white key is about 6 times as long as it is wide; a black key is about 0.58 as wide and 0.63 as long as a white key.
Words scale with the key so they stay large and easy to read. ===== */
@media (min-width: 901px) {
.keyboard-wrap { width: min(calc(var(--box-h) * .6 - 2px), calc(100% - 12px)); }
.key.black { width: 63%; }
.key.white .key-name, .key.white:last-child .key-name { font-size: clamp(14px, calc(var(--box-h) * .044), 24px); left: 22px; }
.key.black .key-name { font-size: clamp(11px, calc(var(--box-h) * .028), 15px); }
}
@media (min-width: 901px) and (max-height: 660px) { .key.white .key-name { font-size: clamp(14px, calc(var(--box-h) * .044), 24px); } .key.black .key-name { font-size: clamp(11px, calc(var(--box-h) * .028), 15px); } }
/* ===== v93: in narrower windows the piano may not run past the picture's left edge, so it gives up a little length there ===== */
@media (min-width: 901px) { .keyboard-wrap { width: min(calc(var(--box-h) * .6 - 2px), calc(27.26vw - 64px)); } }
/* ===== v94: white keys 20% shorter (black keys keep their length); key words redone: one size, capitals, even tracking, crisp weight, left edges aligned ===== */
@media (min-width: 901px) {
:root { --kl: calc(min(calc(var(--box-h) * .6 - 2px), calc(27.26vw - 64px)) * .8 - 6.4px); } /* white-key length */
.keyboard-wrap { width: calc(var(--kl) + 8px); }
.key.black { width: 78.75%; } /* = the old black length (0.63 x the old white length) */
.key .key-name, .key.white .key-name, .key.black .key-name, .key.played .key-name, .key.white.played .key-name, .key.black.played .key-name, .key.white.lit .key-name, .key.white:last-child .key-name {
font-family: 'Inter', sans-serif; font-weight: 500; text-transform: uppercase; line-height: 1; white-space: nowrap;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-stroke: 0;
text-shadow: 0 0 1px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.key.white .key-name, .key.white:last-child .key-name { font-size: clamp(11px, calc((var(--kl) - 30px) / 13.4), 16px); letter-spacing: .08em; left: 18px; right: auto; text-align: left; }
.key.black .key-name { font-size: clamp(9px, calc((var(--kl) - 30px) / 16.5), 12.5px); letter-spacing: .1em; left: 14px; }
}
/* ===== v95: white-key words centred in the middle of their key (across and up-down) ===== */
@media (min-width: 901px) {
.key.white .key-name, .key.white:last-child .key-name { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); text-align: center; }
}
/* ===== v96: more room around the white-key words: rows ~12% taller, words ~13% smaller, key length unchanged ===== */
@media (min-width: 901px) {
:root { --box-h: clamp(420px, 71.5vh, 714px); --kl: calc(min(calc(var(--box-h) * .536 - 2px), calc(27.26vw - 64px)) * .8 - 6.4px); }
.key.white .key-name, .key.white:last-child .key-name { font-size: clamp(10px, calc((var(--kl) - 30px) / 16), 15px); letter-spacing: .1em; }
.key.black .key-name { font-size: clamp(9px, calc((var(--kl) - 30px) / 19), 11.5px); letter-spacing: .1em; }
}
/* ===== v97: the four "double-white" keys are 10% shorter; the piano's total height drops with them so every other key keeps its size ===== */
.key.white.dbl { flex-grow: .9; }
@media (min-width: 901px) {
:root { --bh0: clamp(420px, 71.5vh, 714px); --box-h: calc(var(--bh0) * .96 + .64px); --kl: calc(min(calc(var(--bh0) * .536 - 2px), calc(27.26vw - 64px)) * .8 - 6.4px); }
}
/* ===== v101: compensating vertical offsets for five white-key words (set per key in the JS as --ty) ===== */
@media (min-width: 901px) {
.key.white .key-name, .key.white:last-child .key-name { top: calc(50% + var(--ty, 0%)); }
}
.rs-copy .rs-group { margin: .9rem 0 .2rem; color: var(--gold-soft); font: inherit; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.rs-copy .rs-bullets { margin: 0; padding-left: 1.2rem; line-height: 1.45; }
.rs-copy .rs-bullets li { margin: 0 0 .25rem; }
.rs-copy .rs-downloads { list-style: none; padding: 0; margin: 1rem 0 0; }
.rs-copy .rs-downloads li { margin: 0 0 .6rem; line-height: 1.4; }
.rs-copy .rs-downloads a { color: var(--gold); }
.rs-copy .rs-gallery { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.rs-copy .rs-gallery img { height: 70px; width: auto; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.rs-copy .rs-gallery.lg img { height: 170px; }
#miniPlayer.tall .mini-frame { aspect-ratio: auto; height: 300px; }
/* v126: each arrow is centred in its own push surface (it used to sit flush against one edge of it) */
.rs-arrow.rs-prev, .rs-arrow.rs-next { justify-content: center; padding-left: 0; padding-right: 0; }
.rs-prev:hover span, .rs-prev.fh span { transform-origin: center; }
.rs-next:hover span, .rs-next.fh span { transform-origin: center; }
.rs-prev:active span, .rs-next:active span { transform-origin: center; }
/* v126: press page */
.press-page .nav-links a { white-space: nowrap; }
.press-item { max-width: 980px; margin: 0 auto 3.5rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.press-item h3 { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.press-date { color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin: .3rem 0 1.2rem; }
.press-item .review { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); text-align: left; max-width: none; }
.press-clip { display: block; text-decoration: none; }
.press-clip img { width: 100%; height: auto; max-height: 340px; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 14px 36px rgba(0,0,0,.55); opacity: .92; transition: opacity .2s ease; }
.press-clip:hover img { opacity: 1; }
.press-clip span { display: block; margin-top: .6rem; color: var(--gold); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.press-page .press-links { max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .press-item { grid-template-columns: 1fr; gap: 1.2rem; } }