/* Kris Bradley | the room pages (one template for every released song)
   Loads after home.css and uses its colors, type, buttons, nav, porch signup and footer.
   Rhythm: lamp-lit room at night, then the story on morning paper, the dark listening room,
   the bright board of all 26 rooms, and the porch light. */

.roompage { background: var(--night); }

/* ---------- inside the room ---------- */
.rhero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(640px, 100svh, 1000px);
  display: grid; align-items: center;
  background: #0B1B26; color: var(--cream);
}
.rhero__stage { position: absolute; inset: 0; z-index: 0; }
.rhero__still, .room-hero__3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rhero__still { object-fit: cover; object-position: 50% 50%; transition: opacity 1s ease; pointer-events: none; z-index: 0; }
.room-hero__3d { z-index: 1; opacity: 0; transition: opacity 1.1s ease; touch-action: pan-y; }
.room-hero--3d .room-hero__3d { opacity: 1; }
.room-hero--3d .rhero__still { opacity: 0; }
.rhero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 20, 29, .9) 0%, rgba(8, 20, 29, .66) 30%, rgba(8, 20, 29, .12) 52%, rgba(8, 20, 29, 0) 62%),
    linear-gradient(0deg, rgba(15, 36, 51, .95) 0%, rgba(15, 36, 51, 0) 22%),
    linear-gradient(180deg, rgba(8, 20, 29, .7) 0%, rgba(8, 20, 29, 0) 16%);
}
.rhero__copy { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 90px; pointer-events: none; }
.rhero__copy > * { pointer-events: auto; max-width: 560px; }
/* with 3D, the words arrive after you've stepped through the window */
.can3d .rhero__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1s var(--ease); }
.can3d .rhero.is-arrived .rhero__copy > * { opacity: 1; transform: none; }
.can3d .rhero.is-arrived .rhero__copy > :nth-child(2) { transition-delay: .08s; }
.can3d .rhero.is-arrived .rhero__copy > :nth-child(3) { transition-delay: .18s; }
.can3d .rhero.is-arrived .rhero__copy > :nth-child(4) { transition-delay: .26s; }
.can3d .rhero.is-arrived .rhero__copy > :nth-child(5) { transition-delay: .34s; }
.can3d .rhero.is-arrived .rhero__copy > :nth-child(6) { transition-delay: .5s; }
.rhero__title {
  margin-top: 14px; font-size: clamp(54px, 6.3vw, 100px); font-weight: 900; line-height: .96; letter-spacing: -.02em;
  color: var(--cream); text-shadow: 0 6px 40px rgba(0, 0, 0, .45);
}
.rhero__lyric {
  margin: 24px 0 0; padding-left: 18px; border-left: 2px solid rgba(246, 178, 74, .6);
  font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; color: var(--porch);
}
.rhero__sub { margin-top: 18px; font-size: 17px; color: rgba(244, 230, 200, .8); max-width: 30em !important; }
.rhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rhero__flip {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 0;
  border: 0; background: none; cursor: pointer; color: rgba(244, 230, 200, .82); font-size: 14.5px; font-weight: 500;
}
.rhero__flip:hover { color: var(--porch); }
.rhero__flipstar svg { width: 16px; height: 16px; color: var(--porch); display: block; animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.8) rotate(0); opacity: .7; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }

/* card fallback (no 3D): the flip card opens over the page */
.cardview { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px; background: rgba(9, 22, 32, .88); backdrop-filter: blur(8px); }
.cardview .flip { max-width: 360px; }
.cardview__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); background: rgba(11, 29, 43, .6); color: var(--cream); font-size: 22px; cursor: pointer; }

/* ---------- the story, on morning paper ---------- */
.rstory { background: var(--paper); color: var(--ink); padding: clamp(80px, 10vw, 130px) 0; }
.rstory__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 84px); align-items: start; }
.rstory__photo { margin: 0; position: sticky; top: 104px; }
.rstory__photo img { width: 100%; border-radius: 12px; box-shadow: 18px 18px 0 -2px rgba(201, 162, 83, .35), 0 30px 60px -30px rgba(19, 33, 43, .5); }
.rstory__photo figcaption { margin-top: 14px; font-family: var(--display); font-style: italic; color: var(--muted); font-size: 16px; }
.rstory__copy h2 { margin-top: 12px; font-size: clamp(34px, 4.2vw, 56px); color: var(--ink); }
.rstory__text { margin-top: 26px; max-width: 36em; }
.rstory__text p { margin-top: 18px; font-size: 18px; line-height: 1.75; color: #2B3A44; }
.rstory__text p:first-child { margin-top: 0; font-size: 21px; line-height: 1.6; color: var(--ink); }
.rstory__pull {
  margin: 40px 0 0; padding-left: 22px; border-left: 3px solid var(--ember); max-width: 26em;
  font-family: var(--display); font-style: italic; font-size: clamp(25px, 2.6vw, 34px); line-height: 1.3; color: var(--teal);
}
.rstory__credit { margin-top: 32px; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--muted); }

/* ---------- the listening room ---------- */
.listen {
  position: relative; color: var(--cream); padding: clamp(80px, 10vw, 120px) 0;
  background:
    radial-gradient(ellipse 50% 40% at 30% 0%, rgba(246, 178, 74, .16), transparent 70%),
    linear-gradient(180deg, var(--night-2), var(--night));
}
.listen__head { max-width: 680px; }
.listen__head h2 { margin-top: 10px; font-size: clamp(38px, 4.6vw, 64px); font-weight: 900; color: var(--cream); }
.listen__head p:last-child { margin-top: 12px; font-size: 18px; color: rgba(244, 230, 200, .78); }
.listen__grid { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.listen__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.listen__media { margin: 0; }
.listen__side { display: grid; gap: 24px; }
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #08141c; box-shadow: 0 0 0 1px rgba(201, 162, 83, .35), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.screen__play { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.screen img, .screen video, .screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.screen__btn {
  position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%;
  display: grid; place-items: center; background: var(--porch); box-shadow: 0 0 0 10px rgba(246, 178, 74, .22), 0 20px 50px -10px rgba(0, 0, 0, .6);
  transition: transform .3s var(--ease);
}
.screen__btn svg { width: 34px; height: 34px; fill: #2A1A06; margin-left: 4px; }
.screen__play:hover .screen__btn { transform: scale(1.08); }
.screen--soon img { filter: brightness(.45) saturate(.6); }
.screen__soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(244, 230, 200, .5); font-weight: 600; letter-spacing: .06em; font-size: 14px; background: rgba(11, 29, 43, .5); }
.press { margin: 0; }
.press p { font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--cream); }
.press cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--porch); }
.own-it { padding: 28px; border-radius: 14px; background: rgba(244, 230, 200, .05); box-shadow: inset 0 0 0 1px var(--line-dark); }
.own-it h3 { margin-top: 8px; font-size: 32px; color: var(--cream); }
.own-it p:not(.eyebrow) { margin: 10px 0 20px; color: rgba(244, 230, 200, .78); }
.heard { margin-top: 70px; }
.heard h3 { font-size: clamp(28px, 3vw, 40px); color: var(--cream); }
.heard > p { margin-top: 8px; color: rgba(244, 230, 200, .75); }
.heard__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.heard__list li { padding: 22px; border-radius: 12px; background: rgba(244, 230, 200, .05); box-shadow: inset 0 0 0 1px var(--line-dark); display: grid; gap: 10px; align-content: start; }
.heard__list strong { font-family: var(--display); font-size: 20px; color: var(--porch); }
.heard__list q { font-style: italic; color: var(--cream); line-height: 1.5; }
.heard__list span { font-size: 13.5px; color: rgba(244, 230, 200, .6); }

/* ---------- the board: all 26 rooms ---------- */
.board { background: var(--mist); color: var(--ink); padding: clamp(80px, 10vw, 120px) 0; }
.board__head { max-width: 680px; }
.board__head h2 { font-size: clamp(40px, 5vw, 68px); font-weight: 900; }
.board__head p { margin-top: 12px; font-size: 18px; color: var(--muted); }
.board__act { margin-top: 44px; }
.board__name { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--teal); display: flex; align-items: baseline; gap: 12px; }
.board__name span { font-style: italic; font-weight: 400; font-size: 18px; color: var(--ember); }
.board__track { list-style: none; margin: 18px 0 0; padding: 26px 0 6px; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 12px; position: relative; }
.board__track::before { content: ""; position: absolute; left: 3%; right: 3%; top: calc(26px + 4.2vw); height: 3px; background: repeating-linear-gradient(90deg, rgba(217, 105, 46, .55) 0 10px, transparent 10px 18px); z-index: 0; }
.square { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: center; text-decoration: none; color: var(--ink); }
.square__card { position: relative; width: 100%; aspect-ratio: 760 / 1085; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #1E4D5C, #0F2433); box-shadow: 0 10px 22px -12px rgba(19, 33, 43, .6); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.square__card img { width: 100%; height: 100%; object-fit: cover; }
.square__num { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.5vw, 22px); color: rgba(244, 230, 200, .45); }
.square__label { font-size: 12px; line-height: 1.25; text-align: center; font-weight: 600; min-height: 2.5em; }
.square.is-dark .square__label { color: #8796A0; font-weight: 500; }
a.square:hover .square__card { transform: translateY(-4px); box-shadow: 0 0 0 2px rgba(246, 178, 74, .9), 0 16px 30px -12px rgba(19, 33, 43, .6); }
.square.is-here .square__card { transform: scale(1.1); box-shadow: 0 0 0 3px var(--porch), 0 0 30px 4px rgba(246, 178, 74, .55); }
.square.is-here .square__label { color: var(--ember); }
.square__token { position: absolute; top: -30px; left: 50%; width: 26px; height: 26px; margin-left: -13px; color: var(--porch); filter: drop-shadow(0 4px 6px rgba(217, 105, 46, .5)); animation: hop 1.8s ease-in-out infinite; z-index: 2; }
.square__token svg { width: 100%; height: 100%; display: block; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.doors { margin-top: 64px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.door { display: flex; align-items: center; gap: 18px; padding: 16px 20px 16px 16px; border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 var(--line-light), 0 20px 40px -26px rgba(19, 33, 43, .5); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.door:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(246, 178, 74, .8), 0 24px 44px -24px rgba(19, 33, 43, .55); }
.door img { width: 64px; border-radius: 6px; flex: 0 0 auto; }
.door__text { display: grid; gap: 2px; }
.door__lab { font-size: 13px; font-weight: 600; color: var(--ember); letter-spacing: .03em; }
.door__title { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1; }
.door__meta { font-size: 13px; color: var(--muted); }
.door--next { flex-direction: row-reverse; text-align: right; justify-self: end; }
.door--prev { justify-self: start; }
.door--house { background: var(--night); color: var(--cream); padding: 16px 30px; justify-content: center; text-align: center; }
.door--house .door__lab { color: var(--porch); }

/* ---------- small screens ---------- */
@media (max-width: 1080px) {
  .heard__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .rhero__scrim {
    background:
      linear-gradient(90deg, rgba(8, 20, 29, .85) 0%, rgba(8, 20, 29, .55) 45%, rgba(8, 20, 29, .2) 100%),
      linear-gradient(0deg, rgba(15, 36, 51, .95) 0%, rgba(15, 36, 51, 0) 30%);
  }
  .rstory__grid { grid-template-columns: minmax(0, 1fr); }
  .rstory__photo { position: relative; top: 0; max-width: 420px; }
  .listen__grid { grid-template-columns: minmax(0, 1fr); }
  .doors { grid-template-columns: 1fr 1fr; }
  .door--house { grid-column: 1 / -1; order: 3; }
  .board__track { grid-template-columns: repeat(13, 74px); overflow-x: auto; scrollbar-width: none; padding-left: 4px; padding-right: 4px; scroll-snap-type: x proximity; }
  .board__track::-webkit-scrollbar { display: none; }
  .board__track li { scroll-snap-align: center; }
  .board__track::before { top: 60px; left: 30px; right: auto; width: calc(13 * 86px - 60px); }
}
@media (max-width: 699px) {
  .rhero { display: block; min-height: 0; }
  .rhero__stage { position: relative; inset: auto; height: 64svh; min-height: 420px; max-height: 640px; }
  .rhero__stage::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, #0F2433, rgba(15, 36, 51, 0)); pointer-events: none; }
  .rhero__scrim { display: none; }
  .rhero__copy { margin-top: -96px; padding-top: 0; padding-bottom: 64px; }
  .rhero__title { font-size: clamp(48px, 14vw, 72px); }
  .rhero__actions .btn { flex: 1 1 auto; }
  .doors { grid-template-columns: 1fr; }
  .door--next { flex-direction: row; text-align: left; justify-self: stretch; }
  .door--prev { justify-self: stretch; }
  .heard__list { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-r)); padding: 0 var(--gutter-r) 6px var(--gutter); }
  .heard__list::-webkit-scrollbar { display: none; }
  .heard__list li { flex: 0 0 78%; scroll-snap-align: start; }
  .rhero__still { object-position: 72% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .square__token, .rhero__flipstar svg { animation: none; }
}

.board__play { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px !important; }
.board__play button { border: 1.5px solid rgba(19, 33, 43, .2); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s, transform .2s; }
.board__play button:hover { border-color: var(--porch); transform: translateY(-2px); }

/* ---------- the 20-second clip: a little record that spins while it plays ---------- */
.rhero__clip { margin-top: 26px; display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 1.5px solid rgba(246, 178, 74, .5); background: rgba(15, 36, 51, .45); backdrop-filter: blur(6px); color: var(--cream); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.rhero__clip:hover { border-color: var(--porch); transform: translateY(-2px); }
.rhero__clip + .rhero__flip { margin-top: 14px; display: flex; }
.rhero__disc { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle, var(--porch) 0 17%, #1a1a1a 18% 22%, transparent 23%), repeating-radial-gradient(circle, #141414 0 2px, #222 2px 4px); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3), 0 6px 14px -4px rgba(0, 0, 0, .6); }
.rhero__disc i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -7px 0 0 -4px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #2A1A06; }
.rhero__clip.is-playing .rhero__disc { animation: spin 1.8s linear infinite; }
.rhero__clip.is-playing .rhero__disc i { width: 10px; height: 12px; border: 0; margin: -6px 0 0 -5px; background: linear-gradient(90deg, #2A1A06 0 35%, transparent 35% 65%, #2A1A06 65%); }
@keyframes spin { to { transform: rotate(360deg); } }
.rhero__cliptext { display: grid; line-height: 1.25; }
.rhero__cliptext b { font-size: 15px; }
.rhero__cliptext small { font-size: 12.5px; color: rgba(244, 230, 200, .65); }
.rhero__clip.is-done { border-color: var(--porch); background: rgba(246, 178, 74, .14); }
.rhero__actions .btn.is-nudge { animation: nudge 1.2s var(--ease) 2; }
@keyframes nudge { 30% { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(246, 178, 74, .25), 0 14px 36px -8px rgba(246, 178, 74, .8); } }

/* ---------- things you can touch in the room (room3d.js) ---------- */
.rhero__tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; padding: 7px 12px; border-radius: 999px; background: rgba(15, 36, 51, .88); color: var(--cream); font: 600 13px/1 var(--body); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 0 0 1px rgba(201, 162, 83, .45), 0 10px 24px -10px rgba(0, 0, 0, .7); backdrop-filter: blur(6px); }
.rhero__note { position: absolute; z-index: 4; width: max-content; max-width: min(320px, 80vw); transform: translate(-50%, -100%) translateY(8px) rotate(-1.5deg); opacity: 0; transition: opacity .45s, transform .45s var(--ease); pointer-events: none;
  padding: 16px 20px 14px; border-radius: 4px; background: #F1E6CE; color: #2B2F3A; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(70, 110, 150, .2) 29px 30px); }
.rhero__note.is-in { opacity: 1; transform: translate(-50%, -100%) rotate(-1.5deg); }
.rhero__note-line { display: block; font: 600 26px/1.15 "Caveat", "Segoe Print", cursive; }
.rhero__note-meta { display: block; margin-top: 8px; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--wine); }
.rhero__hint { position: absolute; z-index: 4; right: max(24px, 4vw); bottom: 34px; margin: 0; padding: 10px 16px; border-radius: 999px; background: rgba(15, 36, 51, .82); color: var(--cream); font: 600 14px/1.2 var(--body); box-shadow: 0 0 0 1px rgba(201, 162, 83, .4); backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); pointer-events: none; }
.rhero__hint.is-in { opacity: 1; transform: none; }
@media (max-width: 699px) {
  .rhero__hint { left: 16px; right: 16px; top: 84px; bottom: auto; text-align: center; font-size: 13px; }
  .rhero__note-line { font-size: 22px; }
}

/* "The story continues": the next chapter in release order */
.rnext { margin-top: 28px; display: inline-grid; gap: 4px; padding: 16px 22px 16px 20px; border-radius: 14px; text-decoration: none;
  background: #fff; color: var(--ink); border-left: 4px solid var(--ember);
  box-shadow: 0 1px 0 var(--line-light), 0 18px 36px -24px rgba(19, 33, 43, .5); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.rnext:hover, .rnext:focus-visible { transform: translateY(-2px); box-shadow: 0 1px 0 var(--line-light), 0 24px 44px -24px rgba(19, 33, 43, .6); }
.rnext__lab { font: 700 11.5px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.rnext__title { font: italic 700 clamp(20px, 2vw, 24px)/1.2 var(--display); }

/* room heroes no longer eat the whole screen: the story peeks in below, with a scroll cue */
@media (min-width: 700px) {
  .rhero { min-height: clamp(560px, 80svh, 860px); }
  .rhero__copy { padding-top: 104px; padding-bottom: 96px; }
}
.rhero__more { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px; color: var(--cream); text-decoration: none; font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.rhero__more svg { width: 22px; height: 22px; color: var(--porch); animation: rheroBob 1.8s ease-in-out infinite; }
.rhero__more:hover { color: var(--porch); }
@keyframes rheroBob { 50% { transform: translateY(5px); } }
@media (max-width: 699px) { .rhero__more { position: relative; left: auto; bottom: auto; transform: none; display: flex; margin: -36px auto 28px; width: max-content; } }
@media (prefers-reduced-motion: reduce) { .rhero__more svg { animation: none; } }
@media (max-width: 699px) { .rhero__stage { height: 46svh; min-height: 300px; max-height: 460px; } .rhero__copy { margin-top: -72px; } }

/* song card: make your own (Fireproof, Shapeshifter, Renovate Me; Walking Contradiction's lives on the homepage) */
.songcard { padding: clamp(56px, 7vw, 96px) 0; background: #120E0B; }
.songcard .twothings { margin-top: 0; padding: clamp(24px, 4vw, 48px); border-radius: 18px; background: radial-gradient(120% 120% at 15% 0%, #2E2620, #16120F 60%); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); color: var(--cream); }
.songcard .twothings h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; color: var(--cream); }
.twothings__form--one { grid-template-columns: 1fr; max-width: 460px; }

/* nav pills (copied from kb-brand.css so room pages match the rest of the site) */
.nav__light { display: inline-flex; align-items: center; gap: 9px; margin-left: 26px; padding: 9px 18px 9px 14px; border-radius: 999px; background: var(--porch, #F6B24A); color: #2A1A06; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; box-shadow: 0 0 22px -4px rgba(246, 178, 74, .7); transition: transform .2s, box-shadow .2s; }
.nav__light:hover { transform: translateY(-1px); box-shadow: 0 0 30px -2px rgba(246, 178, 74, .9); color: #2A1A06; }
.nav__light i { width: 9px; height: 9px; border-radius: 50%; background: #FFF4D6; box-shadow: 0 0 0 3px rgba(255, 244, 214, .35), 0 0 10px 2px #FFE2A6; animation: kbGlow 2.4s ease-in-out infinite; }
@keyframes kbGlow { 50% { box-shadow: 0 0 0 4px rgba(255, 244, 214, .15), 0 0 16px 4px #FFE2A6; } }
@media (max-width: 1100px) { .nav__light { margin-left: auto; } .nav__menu { margin-left: 14px !important; } }
@media (max-width: 640px) { .nav__light { padding: 7px 13px 7px 11px; font-size: 13px; gap: 7px; } .nav__light i { width: 7px; height: 7px; } }
@media (prefers-reduced-motion: reduce) { .nav__light i { animation: none; } }
.nav__lighttxt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.nav__lighttxt b { font-weight: 700; }
.nav__lighttxt small { font-size: 11px; font-weight: 600; opacity: .78; margin-top: 2px; letter-spacing: .01em; }
.nav__light { padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 640px) { .nav__lighttxt small { font-size: 9.5px; } }
/* "On Air" sign for live requests, same size as Light the Fan Map, visible on phones too */
.nav__air { display: inline-flex; align-items: center; gap: 9px; margin-left: 26px; padding: 7px 18px 7px 14px; border-radius: 999px; background: #1A0605; border: 1.5px solid #FF3B2F; color: #FFE9E6; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; box-shadow: 0 0 18px -2px rgba(255, 59, 47, .65), inset 0 0 12px rgba(255, 59, 47, .25); transition: transform .2s, box-shadow .2s; }
.nav__air + .nav__light { margin-left: 12px; }
.nav__air:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 0 28px 0 rgba(255, 59, 47, .85), inset 0 0 14px rgba(255, 59, 47, .35); }
.nav__air i { width: 9px; height: 9px; border-radius: 50%; background: #FF3B2F; box-shadow: 0 0 8px 2px #FF3B2F; animation: kbAir 1.6s ease-in-out infinite; }
.nav__airtxt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.nav__airtxt b { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FF5A4E; text-shadow: 0 0 6px rgba(255, 59, 47, .9), 0 0 14px rgba(255, 59, 47, .6); }
.nav__airtxt small { font-size: 11px; font-weight: 600; margin-top: 2px; opacity: .85; letter-spacing: .01em; }
@keyframes kbAir { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 1100px) { .nav__air { margin-left: auto; } .nav__air + .nav__light { margin-left: 8px; } }
@media (max-width: 640px) {
  .nav__air { padding: 7px 11px 7px 9px; font-size: 13px; gap: 6px; }
  .nav__air i { width: 7px; height: 7px; }
  .nav__airtxt small { font-size: 9.5px; }
  .nav__air + .nav__light { margin-left: 6px; }
}
@media (max-width: 420px) {
  .nav__mark img { height: 30px; }
  .nav__air, .nav__light { padding: 6px 9px 6px 8px; gap: 5px; font-size: 12px; }
  .nav__airtxt small, .nav__lighttxt small { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) { .nav__air i { animation: none; } }

/* OFF AIR (default): same sign, lights out. js/onair.js adds .is-live while Kris is streaming */
.nav__air:not(.is-live) { background: #17110E; border-color: rgba(244, 230, 200, .28); color: rgba(244, 230, 200, .75); box-shadow: none; }
.nav__air:not(.is-live) i { background: #5A4A42; box-shadow: none; animation: none; }
.nav__air:not(.is-live) .nav__airtxt b { color: rgba(244, 230, 200, .6); text-shadow: none; }
.nav__air:not(.is-live):hover { border-color: rgba(255, 59, 47, .6); box-shadow: 0 0 14px -4px rgba(255, 59, 47, .5); }

/* Behind the song mini doc, right under the room hero */
.mdoc { background: #120E0B; color: var(--cream, #F4E6C8); padding: clamp(56px, 7vw, 96px) 0; }
.mdoc__head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.mdoc__head .eyebrow { color: var(--porch, #F6B24A); }
.mdoc__head h2 { margin-top: 10px; font-size: clamp(30px, 3.8vw, 48px); color: inherit; }
.mdoc__sub { margin-top: 10px; font-size: 18px; line-height: 1.6; color: rgba(244, 230, 200, .72); }
.mdoc__frame { max-width: 1100px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(244, 230, 200, .08); }
.mdoc__frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.mdoc { scroll-margin-top: 60px; }
.own-it__cover { display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; margin: 0 0 22px; border-radius: 6px; box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(244, 230, 200, .12); }