* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; color: #c64e48; }
body { font-family: Consolas, Menlo, Monaco, monospace; }
.page { height: 100dvh; min-height: 320px; display: flex; flex-direction: column; }
header { position: relative; z-index: 3; flex: none; padding: 18px 94px 0 24px; }
.identity { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; font-size: 16px; line-height: 1.25; }
.identity-name, .identity-role, .identity-dot { white-space: nowrap; }
.identity-name:last-child { white-space: normal; }
.identity-role { position: static; }
.identity-role button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default; }
.identity-role button:hover, .identity-role button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.role-details { position: absolute; top: 100%; left: 0; right: 0; display: none; width: max-content; max-width: 100%; padding: 5px 24px 8px; font: inherit; line-height: 1.5; white-space: normal; }
.role-details--short { left: var(--details-left, 0px); right: auto; max-width: calc(100vw - var(--details-left, 0px) - 12px); padding-left: 0; padding-right: 0; }
.identity-role.is-open .role-details { display: block; }
.role-details .credit { display: inline-block; white-space: nowrap; margin-right: .35em; }
.role-details .credit:not(:last-child)::after { content: ' ·'; }
.role-details a { color: inherit; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.gallery-title { flex: none; padding: 10px 16px 0; text-align: center; }
h1 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 400; }
.music-control { position: fixed; z-index: 4; top: 11px; right: 18px; display: flex; color: inherit; }
.music-toggle, .next-track { display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.music-toggle svg, .next-track svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle .sound-slash, .music-toggle.is-paused .sound-wave { display: none; }
.music-toggle.is-paused .sound-slash { display: block; }
.volume-panel { position: absolute; top: 34px; right: 0; width: 150px; padding: 10px 12px 12px; border: 1px solid currentColor; background: #000; visibility: hidden; opacity: 0; pointer-events: none; }
.music-control.is-open .volume-panel { visibility: visible; opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .music-control:hover .volume-panel, .music-control:focus-within .volume-panel { visibility: visible; opacity: 1; pointer-events: auto; }
}
.volume-panel label { display: block; margin-bottom: 8px; font-size: 13px; }
.volume-panel input { display: block; width: 100%; margin: 0; accent-color: #c64e48; cursor: pointer; }
.image-frame { position: relative; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.tile-strip { position: absolute; inset: 0; overflow: hidden; }
.tile-strip img { position: absolute; top: 0; display: block; height: 100%; max-width: none; }
.tile-strip img.single-portrait { object-fit: contain; object-position: center top; }
.slideshow-frame .tile-strip { opacity: 0; will-change: opacity; }
.crossfade-frame canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #000; will-change: opacity; }
.crossfade-frame #random-crop, .crossfade-frame #incoming-crop { opacity: 0; }
.arrows { flex: none; display: flex; justify-content: center; align-items: center; gap: 32px; min-height: 54px; }
.arrows button { border: 0; padding: 2px 8px; background: transparent; color: inherit; font: 30px/1 Consolas, Menlo, Monaco, monospace; cursor: pointer; }
.arrows button:disabled { opacity: .35; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
footer { flex: none; min-height: 48px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 28px; padding: 0 16px 12px; }
footer a { color: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.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; }
@media (max-width: 600px) {
  header { padding: 14px 80px 0 15px; }
  .identity, h1 { font-size: 14px; }
  .role-details { padding-left: 15px; padding-right: 15px; }
  .music-control { top: 7px; right: 9px; }
  .arrows { min-height: 50px; gap: 26px; }
  footer { min-height: 44px; }
  footer a { font-size: 13px; }
}