/* johnnienewman.com — v1
   Warm monochrome calling card.
   Fraunces for display, Inter for everything else.
*/

:root {
  /* Lynch midnight-blue palette — velvet, not navy */
  --bg: #0b1525;
  --bg-deep: #050a14;
  --bg-hover: #11203a;
  --text: #ecedf3;
  --text-muted: #7c8499;
  --text-very-muted: #4a5266;
  --border: #1d2740;
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg-deep);
}

body {
  /* Soft Lynch vignette — bright blue center, deeper at the edges */
  background:
    radial-gradient(ellipse 130% 110% at 50% 35%, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Film-grain texture overlay — fine, atmospheric, Lynchian */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Keep page content above the grain */
.page {
  position: relative;
  z-index: 2;
}

/* ---------- Layout shell ---------- */

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  opacity: 0;
  animation: fadeIn 0.7s ease-out forwards;
}

.page.interior {
  max-width: 720px;
}

.page.fade-out {
  animation: fadeOut 0.35s ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Stagger entrance for direct children of .stagger */
.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.10s; }
.stagger > *:nth-child(2) { animation-delay: 0.28s; }
.stagger > *:nth-child(3) { animation-delay: 0.46s; }
.stagger > *:nth-child(4) { animation-delay: 0.64s; }
.stagger > *:nth-child(5) { animation-delay: 0.82s; }
.stagger > *:nth-child(6) { animation-delay: 1.00s; }

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Landing page ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 2.25rem;
}

.hero-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.75rem, 14vw, 10rem);
  letter-spacing: 0.005em;
  line-height: 0.92;
  margin-bottom: 0.75rem;
  /* Black fill, electric-blue outline, faint blue glow */
  color: #050505;
  -webkit-text-stroke: 1.5px #3aa7ff;
  text-shadow:
    0 0 12px rgba(58, 167, 255, 0.55),
    0 0 32px rgba(58, 167, 255, 0.28);
}

/* Subtitle line under the wordmark — small caps with star punctuation */
.eyebrow-below {
  margin-top: 0;
  margin-bottom: 5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.tagline {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-bottom: 5rem;
}

/* ---------- Door grid ---------- */

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.door {
  background: var(--bg);
  padding: 2.5rem 2rem 2.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  transition: background 0.4s ease;
  position: relative;
}

.door:hover,
.door:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.door-number {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  font-weight: 400;
  transition: transform 0.4s ease, color 0.4s ease;
}

.door:hover .door-number,
.door:focus-visible .door-number {
  transform: translateY(-2px);
  color: var(--text);
}

.door-body {
  margin-top: 3rem;
}

.door-name {
  font-family: var(--display);
  font-size: 1.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.door-descriptor {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  letter-spacing: 0;
}

/* ---------- Footer ---------- */

footer {
  margin-top: 6rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-very-muted);
  font-weight: 400;
}

/* ---------- Interior pages ---------- */

.back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 5rem;
  font-weight: 400;
  transition: color 0.3s ease;
}

.back:hover {
  color: var(--text);
}

.interior h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 9vw, 6.25rem);
  letter-spacing: 0.005em;
  line-height: 0.95;
  margin-bottom: 1.75rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 48ch;
  margin-bottom: 3rem;
}

/* Body prose on interior pages — bios, credits, longer text */
.bio {
  max-width: 60ch;
  margin-bottom: 3rem;
}

.bio p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.4rem;
  letter-spacing: 0;
}

.bio p:last-child {
  margin-bottom: 0;
}

/* External link CTA (e.g., IMDB on the Film & Television page).
   Inherits the page's persona color via the body's persona variables. */
.external-link {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.04em;
  color: var(--c-writing);
  text-decoration: none;
  text-shadow:
    0 0 12px var(--g-writing-1),
    0 0 32px var(--g-writing-2);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: text-shadow 0.4s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 4rem;
}

.external-link:hover {
  text-shadow:
    0 0 18px var(--g-writing-1),
    0 0 48px var(--g-writing-2);
  border-bottom-color: var(--c-writing);
  transform: translateX(4px);
}

.spotify-embed {
  margin-top: 1rem;
}

/* When two Spotify embeds stack, give them more breathing room */
.spotify-embed + .spotify-embed {
  margin-top: 1.75rem;
}

/* Caption label sitting above a Spotify embed (e.g., "Co-writes") */
.embed-caption {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-songwriter);
  font-weight: 500;
  margin-top: 2.5rem;
  margin-bottom: 0.7rem;
  text-shadow:
    0 0 10px var(--g-songwriter-1),
    0 0 24px var(--g-songwriter-2);
}

/* When an embed follows a caption, neutralize the embed's own top margin */
.embed-caption + .spotify-embed {
  margin-top: 0;
}

.spotify-embed iframe {
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .page {
    padding: 4rem 1.5rem 3rem;
  }
  .tagline {
    margin-bottom: 3.5rem;
  }
  .doors {
    grid-template-columns: 1fr;
  }
  .door {
    min-height: 170px;
    padding: 2rem 1.5rem 1.75rem;
  }
  .door-body {
    margin-top: 2rem;
  }
  .back {
    margin-bottom: 3.5rem;
  }
  footer {
    margin-top: 4rem;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page,
  .stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .door,
  .door-number,
  .back {
    transition: none !important;
  }
}

/* ----------------------------------------------------
   Per-persona atmospheres
   Each interior page can opt into a distinct mood via a
   body class. Default pages stay on the standard Lynch blue.
   ---------------------------------------------------- */

/* Blue Diamond Phillips — deeper, dreamier, more saturated */
.atmosphere-deep-blue {
  background: radial-gradient(ellipse 130% 110% at 50% 35%, #0a1d4a 0%, #02060f 100%);
}
.atmosphere-deep-blue .page.interior {
  max-width: 920px;
}
.atmosphere-deep-blue .interior h1 {
  text-shadow:
    0 0 80px rgba(60, 120, 220, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.4);
}
.atmosphere-deep-blue .lede {
  color: #9aa6c4;
}

/* Release gallery — album covers + audio players */
.releases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.release {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.release-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.release-cover:hover {
  transform: translateY(-3px);
}

.release-audio {
  width: 100%;
  height: 36px;
  /* Hint to browsers to render audio controls in dark mode */
  color-scheme: dark;
  border-radius: 18px;
}

/* Mobile — stack the releases */
@media (max-width: 720px) {
  .releases {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
  }
  .release-cover {
    max-width: 380px;
    margin: 0 auto;
  }
  .release-audio {
    max-width: 380px;
    margin: 0 auto;
  }
}

/* Share button — sits under each song's audio player.
   Cyan, restrained, brightens on hover, swaps to "Copied" state on success. */
.share-btn {
  display: inline-block;
  align-self: flex-start;
  background: none;
  border: 1px solid rgba(76, 212, 255, 0.25);
  color: var(--c-blue);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  margin-top: 0.4rem;
  transition: color 0.3s ease, border-color 0.3s ease, text-shadow 0.3s ease, background-color 0.3s ease;
  text-shadow: 0 0 8px rgba(76, 212, 255, 0.25);
}

.share-btn:hover {
  border-color: var(--c-blue);
  text-shadow: 0 0 14px var(--g-blue-1), 0 0 28px var(--g-blue-2);
  background-color: rgba(76, 212, 255, 0.06);
}

.share-btn:focus-visible {
  outline: 1px solid var(--c-blue);
  outline-offset: 3px;
}

.share-btn-success { display: none; }
.share-btn.copied .share-btn-default { display: none; }
.share-btn.copied .share-btn-success { display: inline; }
.share-btn.copied {
  border-color: var(--c-blue);
  background-color: rgba(76, 212, 255, 0.10);
}

/* Tracklist share button — sits at the right side of the row on desktop */
.tracklist .share-btn {
  align-self: flex-start;
  margin-top: 0.2rem;
}

/* Scroll-anchor offset — when a visitor lands on a song via hash link,
   don't let it slam against the top of the viewport */
.release, .track {
  scroll-margin-top: 2rem;
}

/* =====================================================
   Single-song detail pages (/songs/<slug>.html)
   Centered layout: cover art → title → subtitle → audio
   → share. Uses the deep-blue atmosphere from BDP.
   ===================================================== */

body.song-detail .page {
  max-width: 560px;
  text-align: center;
}

body.song-detail .back {
  display: inline-block;
  margin-bottom: 3rem;
  text-align: left;
}

.song-cover {
  margin: 0 auto 2.25rem;
  width: 100%;
  max-width: 440px;
}

.song-cover-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 14px 56px rgba(0, 0, 0, 0.6);
}

body.song-detail h1 {
  text-align: center;
  margin-bottom: 0.4rem;
}

.song-subtitle {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: #9aa6c4;
  margin-bottom: 2.25rem;
  letter-spacing: 0.01em;
}

.song-audio {
  width: 100%;
  height: 40px;
  color-scheme: dark;
  border-radius: 20px;
  margin-bottom: 1.75rem;
}

body.song-detail .share-btn {
  margin: 0 auto;
}

body.song-detail footer {
  margin-top: 4rem;
  text-align: center;
}

@media (max-width: 720px) {
  body.song-detail .page {
    text-align: center;
  }
  .song-cover {
    max-width: 360px;
  }
}

/* =====================================================
   Lyrics on individual song pages
   Faintly glowing, cyan-tinted off-white, generous breathing,
   section labels in small caps. Override center-alignment from
   .song-detail since lyrics want a left-aligned reading column.
   ===================================================== */

.lyrics {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  text-align: left;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid rgba(76, 212, 255, 0.14);
}

.lyric-section {
  margin-bottom: 1.85rem;
}

.lyric-section:last-child {
  margin-bottom: 0;
}

.lyric-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(154, 166, 196, 0.55);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.lyric-lines {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #d6e6f5;
  letter-spacing: 0.005em;
  text-shadow:
    0 0 8px rgba(76, 212, 255, 0.18),
    0 0 20px rgba(76, 212, 255, 0.08);
}

/* Lyrics fade in last, after the hero (cover/title/audio/share) has settled.
   Creates a cinematic reveal — like the song's text emerging out of the dark. */
.stagger > .lyrics {
  animation-delay: 1.4s;
}

@media (max-width: 720px) {
  .lyrics {
    margin-top: 2.5rem;
    padding-top: 2rem;
    max-width: 100%;
  }
  .lyric-lines {
    font-size: 1rem;
    line-height: 1.75;
  }
}

/* =====================================================
   Blue's Requiem · The Musical — section under releases
   Hero photo + curated tracklist
   ===================================================== */

.musical {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(154, 166, 196, 0.18);
}

.musical-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.musical-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #7b88a8;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.musical-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: 0.005em;
  line-height: 0.95;
  color: var(--text);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 60px rgba(60, 120, 220, 0.3), 0 1px 0 rgba(0, 0, 0, 0.35);
}

.musical-subtitle {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #9aa6c4;
}

.musical-hero {
  max-width: 540px;
  margin: 0 auto 3rem;
}

.musical-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.55);
}

/* Tracklist */
.tracklist {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.track {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(154, 166, 196, 0.12);
}

.track:last-child {
  border-bottom: none;
}

.track-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.track-number {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: #7b88a8;
  font-weight: 400;
  flex-shrink: 0;
  min-width: 2ch;
}

.track-title {
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.1;
}

/* When the track title is a link to its dedicated song page,
   give it a discoverable hover affordance — cyan glow + subtle underline. */
a.track-title {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s ease, text-shadow 0.3s ease, border-color 0.3s ease;
}

a.track-title:hover,
a.track-title:focus-visible {
  color: var(--c-blue);
  text-shadow:
    0 0 12px var(--g-blue-1),
    0 0 30px var(--g-blue-2);
  border-bottom-color: rgba(76, 212, 255, 0.35);
  outline: none;
}

/* Wrapped album cover link on /baseball.html — the existing hover lift
   moves to the link wrapper so the whole click target responds */
.release-cover-link {
  display: block;
  cursor: pointer;
}

.release-cover-link .release-cover {
  /* Reset — the existing hover transition still works, but the parent link
     also controls hover so we keep everything coordinated */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.release-cover-link:hover .release-cover,
.release-cover-link:focus-visible .release-cover {
  transform: translateY(-4px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(76, 212, 255, 0.25);
  outline: none;
}

.track-title em {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: #9aa6c4;
  text-transform: lowercase;
  margin-left: 0.4rem;
  vertical-align: 0.15rem;
}

.track-audio {
  width: 100%;
  height: 36px;
  color-scheme: dark;
  border-radius: 18px;
}

@media (max-width: 720px) {
  .musical {
    margin-top: 4rem;
    padding-top: 3rem;
  }
  .musical-hero {
    max-width: 100%;
    margin-bottom: 2.5rem;
  }
  .track {
    padding: 1rem 0;
  }
  .track-title {
    font-size: 1.4rem;
  }
}

/* =====================================================
   Per-page background images
   Each page gets a cinematic still behind a Lynch-blue
   overlay so the typography stays legible. Overlay is
   tuned per-page via CSS variables.
   ===================================================== */

body[class*="bg-"] {
  background:
    radial-gradient(
      ellipse 130% 110% at 50% 35%,
      var(--page-overlay-top, rgba(11, 21, 37, 0.66)) 0%,
      var(--page-overlay-bottom, rgba(5, 10, 20, 0.94)) 100%
    ),
    var(--page-bg-image) center center / cover no-repeat fixed,
    var(--bg-deep);
}

body.bg-landing    { --page-bg-image: url('assets/bg-landing.webp'); }
body.bg-songwriter { --page-bg-image: url('assets/bg-songwriter.webp'); }
body.bg-modern     { --page-bg-image: url('assets/bg-modern.webp'); }
body.bg-blue {
  --page-bg-image: url('assets/bg-blue.webp');
  /* Deeper, more saturated overlay to match the BDP atmosphere */
  --page-overlay-top: rgba(10, 29, 74, 0.62);
  --page-overlay-bottom: rgba(2, 6, 15, 0.95);
}
body.bg-writing    { --page-bg-image: url('assets/bg-writing.webp'); }

/* iOS Safari doesn't render fixed backgrounds well — use scroll on mobile */
@media (max-width: 720px) {
  body[class*="bg-"] {
    background-attachment: scroll, scroll, scroll;
  }
}

/* =====================================================
   Persona color system
   Each of the four doors carries a signature color that
   lights up the door name AND the matching interior H1.
   ===================================================== */

:root {
  --c-songwriter: #ff7bd0;            /* pink */
  --c-modern:     #6ee07d;            /* green */
  --c-blue:       #4cd4ff;            /* cyan */
  --c-writing:    #ff4757;            /* red */

  --g-songwriter-1: rgba(255, 123, 208, 0.52);
  --g-songwriter-2: rgba(255, 123, 208, 0.22);
  --g-modern-1:     rgba(110, 224, 125, 0.52);
  --g-modern-2:     rgba(110, 224, 125, 0.22);
  --g-blue-1:       rgba(76, 212, 255, 0.60);
  --g-blue-2:       rgba(76, 212, 255, 0.25);
  --g-writing-1:    rgba(255, 71, 87, 0.52);
  --g-writing-2:    rgba(255, 71, 87, 0.22);
}

/* Landing — color each door name with a faint neon glow */
.door-songwriter .door-name,
.door-modern .door-name,
.door-blue .door-name,
.door-writing .door-name {
  transition: text-shadow 0.4s ease, color 0.4s ease;
}

.door-songwriter .door-name {
  color: var(--c-songwriter);
  text-shadow: 0 0 14px var(--g-songwriter-1), 0 0 38px var(--g-songwriter-2);
}
.door-modern .door-name {
  color: var(--c-modern);
  text-shadow: 0 0 14px var(--g-modern-1), 0 0 38px var(--g-modern-2);
}
.door-blue .door-name {
  color: var(--c-blue);
  text-shadow: 0 0 14px var(--g-blue-1), 0 0 38px var(--g-blue-2);
}
.door-writing .door-name {
  color: var(--c-writing);
  text-shadow: 0 0 14px var(--g-writing-1), 0 0 38px var(--g-writing-2);
}

/* Intensify the glow on hover — door breathes */
.door-songwriter:hover .door-name {
  text-shadow: 0 0 22px var(--g-songwriter-1), 0 0 58px var(--g-songwriter-2);
}
.door-modern:hover .door-name {
  text-shadow: 0 0 22px var(--g-modern-1), 0 0 58px var(--g-modern-2);
}
.door-blue:hover .door-name {
  text-shadow: 0 0 22px var(--g-blue-1), 0 0 58px var(--g-blue-2);
}
.door-writing:hover .door-name {
  text-shadow: 0 0 22px var(--g-writing-1), 0 0 58px var(--g-writing-2);
}

/* Interior page H1s — match the persona color */
body.bg-songwriter .interior h1 {
  color: var(--c-songwriter);
  text-shadow: 0 0 16px var(--g-songwriter-1), 0 0 44px var(--g-songwriter-2);
}
body.bg-modern .interior h1 {
  color: var(--c-modern);
  text-shadow: 0 0 16px var(--g-modern-1), 0 0 44px var(--g-modern-2);
}
body.bg-blue .interior h1 {
  color: var(--c-blue);
  text-shadow: 0 0 16px var(--g-blue-1), 0 0 44px var(--g-blue-2);
}
body.bg-writing .interior h1 {
  color: var(--c-writing);
  text-shadow: 0 0 16px var(--g-writing-1), 0 0 44px var(--g-writing-2);
}

/* Film and Television — letterboxed cinematic widescreen */
.letterbox {
  position: fixed;
  left: 0;
  right: 0;
  height: 64px;
  background: #000;
  z-index: 20;
  pointer-events: none;
}
.letterbox-top    { top: 0; }
.letterbox-bottom { bottom: 0; }

.atmosphere-cinema .page {
  padding-top: 7.5rem;
  padding-bottom: 5.5rem;
}

@media (max-width: 720px) {
  .letterbox { height: 40px; }
  .atmosphere-cinema .page { padding-top: 5.5rem; }
}