:root { color-scheme: dark; --cream: #fff6e8; --gold: #edb875; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #17110d; color: var(--cream); font: 400 1rem/1.5 "DM Sans", sans-serif; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.tribute { position: relative; isolation: isolate; width: 100%; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.1rem, 3vw, 2.7rem) clamp(1.2rem, 5vw, 5.5rem); }
.stage, .stage img, .shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage { z-index: -3; overflow: hidden; background: #3b2418; }
.stage img { object-fit: cover; opacity: 0; transition: opacity 1.35s ease; animation: ken-burns 7.5s ease-out both; }
.stage img.active { opacity: 1; }
.shade { z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgba(18, 11, 8, .81), rgba(18, 11, 8, .3) 55%, rgba(18, 11, 8, .15)), linear-gradient(0deg, rgba(18, 11, 8, .86), transparent 42%, rgba(18, 11, 8, .25)); }
@keyframes ken-burns { from { transform: scale(1.015) translate(0, 0); } to { transform: scale(1.14) translate(-1.1%, -.9%); } }
.topbar, .bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar { position: relative; z-index: 2; }
.exit { display: inline-flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border: 1px solid rgba(255, 246, 232, .45); border-radius: 999px; background: rgba(22, 14, 10, .3); backdrop-filter: blur(8px); text-decoration: none; font-weight: 700; font-size: .83rem; }
.exit:hover, .controls button:hover { background: rgba(255, 246, 232, .22); }
.exit span { font-size: 1.15rem; }
.classification, .eyebrow, .profile-kicker { text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; font-weight: 700; }
.classification { opacity: .75; }
.editorial { margin-top: clamp(2rem, 7vh, 6rem); max-width: 770px; }
.eyebrow { margin: 0 0 1rem; color: var(--gold); }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; line-height: .98; }
h1 { font-size: clamp(4rem, 11vw, 10rem); font-weight: 500; letter-spacing: -.055em; margin-bottom: .9rem; text-shadow: 0 5px 30px rgba(0,0,0,.2); }
h1 em { color: var(--gold); font-style: normal; }
.disclaimer { max-width: 470px; font-size: clamp(.94rem, 1.45vw, 1.18rem); color: #fff4e9; }
.profile { margin-top: auto; max-width: 620px; padding-top: clamp(2rem, 7vh, 6rem); }
.profile-kicker { margin-bottom: .5rem; color: var(--gold); }
h2 { margin-bottom: .25rem; font-size: clamp(2.45rem, 5.5vw, 5rem); font-weight: 500; }
.role { margin-bottom: 1.8rem; color: var(--gold); font-size: clamp(.8rem, 1.3vw, 1rem); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.bottom-bar { position: relative; z-index: 2; flex-wrap: wrap; }
.controls { display: flex; align-items: center; gap: .5rem; }
.controls button { height: 46px; min-width: 46px; padding: 0 .85rem; border: 1px solid rgba(255, 246, 232, .5); border-radius: 999px; background: rgba(22, 14, 10, .3); color: var(--cream); backdrop-filter: blur(8px); font-weight: 700; }
.controls #sound { display: inline-flex; align-items: center; gap: .45rem; margin-left: .65rem; font-size: .8rem; }
.sound-prompt { margin: 0; font-size: .78rem; }
.sound-prompt[hidden] { display: none; }
.sound-prompt button { padding: .35rem .6rem; color: #1d130d; background: var(--gold); border: 0; border-radius: 7px; font-weight: 700; }
.progress { flex: 1 1 100%; height: 3px; margin-top: 1rem; background: rgba(255, 246, 232, .25); }
.progress span { display: block; width: 0; height: 100%; background: var(--gold); }
@media (max-width: 700px) {
  .tribute { min-height: 100svh; }
  .classification { display: none; }
  .editorial { margin-top: 3.5rem; }
  .stage img { object-position: 60% center; }
  .shade { background: linear-gradient(0deg, rgba(18, 11, 8, .94), rgba(18, 11, 8, .3) 58%, rgba(18, 11, 8, .48)); }
  .profile { padding-top: 2rem; }
  .role { margin-bottom: 1.1rem; }
  .bottom-bar { gap: .7rem; }
  .sound-prompt { order: 2; }
  .progress { order: 3; margin-top: .3rem; }
}
@media (max-height: 680px) {
  .editorial { margin-top: 1.2rem; }
  h1 { font-size: clamp(3rem, 8vw, 6rem); }
  .profile { padding-top: 1rem; }
  h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
  .role { margin-bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .stage img { animation: none; transition: none; } }