/* Raudiobooks — full-screen photographic hero, title-only hotspots */

:root {
  --hero-w: 1024;
  --hero-h: 576;
  --hero-aspect: 1024 / 576;
  --focus: #7c6af5;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #1c1613;
  color: #f0ece8;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
}

/* ——— Full-viewport hero ———
   Frame keeps the photo's aspect ratio and scales like object-fit: cover,
   so percentage hotspots stay locked to the titles after cropping. */
.hero {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #1c1613;
}

.frame {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  aspect-ratio: var(--hero-aspect);
  /* Cover the viewport. Landscape photo is wide; portrait phones use a
     taller asset so wall + table fill without cropping headphones. */
  width: max(100vw, calc(100dvh * 1024 / 576));
}

.frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ——— Title hit areas + letter-only glow ——— */
.spines {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.spine {
  position: absolute;
  display: block;
  text-decoration: none;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  outline: none;
  background: transparent;
}

.spine-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.spine:focus-visible {
  outline: none;
}

/* Full-frame PNGs that contain only one word's brightened letters */
.glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.glow img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.glow.is-on,
.frame:has(.spine--about:hover) .glow--about,
.frame:has(.spine--about:focus-visible) .glow--about,
.frame:has(.spine--contact:hover) .glow--contact,
.frame:has(.spine--contact:focus-visible) .glow--contact,
.frame:has(.spine--showreel:hover) .glow--showreel,
.frame:has(.spine--showreel:focus-visible) .glow--showreel,
.frame:has(.spine--services:hover) .glow--services,
.frame:has(.spine--services:focus-visible) .glow--services {
  opacity: 1;
}

/* Landscape hit boxes — hero.png (1024 × 576) */
.spine--about {
  --x: 0.3883;
  --y: 0.4202;
  --w: 0.0457;
  --h: 0.2326;
}

.spine--contact {
  --x: 0.4518;
  --y: 0.3889;
  --w: 0.0437;
  --h: 0.2760;
}

.spine--showreel {
  --x: 0.5104;
  --y: 0.3820;
  --w: 0.0437;
  --h: 0.2846;
}

.spine--services {
  --x: 0.5705;
  --y: 0.3820;
  --w: 0.0445;
  --h: 0.2846;
}

@media (orientation: portrait) {
  .frame {
    --hero-aspect: 473 / 1024;
    width: max(100vw, calc(100dvh * 473 / 1024));
  }

  .spine--about {
    --x: 0.2738;
    --y: 0.4185;
    --w: 0.0677;
    --h: 0.1464;
  }

  .spine--contact {
    --x: 0.4069;
    --y: 0.3999;
    --w: 0.0656;
    --h: 0.1865;
  }

  .spine--showreel {
    --x: 0.5317;
    --y: 0.3960;
    --w: 0.0677;
    --h: 0.2002;
  }

  .spine--services {
    --x: 0.6587;
    --y: 0.3960;
    --w: 0.0677;
    --h: 0.2002;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow {
    transition: none;
  }
}

/* ——— Placeholder section pages ——— */
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #3a2c26, transparent 60%),
    #251d1a;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(240, 236, 232, 0.1);
}

.page-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: #f0ece8;
}

.back-link {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(240, 236, 232, 0.55);
  transition: color 160ms ease;
}

.back-link:hover {
  color: #f0ece8;
}

.page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 40rem;
}

.page-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 236, 232, 0.45);
}

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.page-copy {
  margin: 0;
  color: rgba(240, 236, 232, 0.55);
  font-size: 1.05rem;
  max-width: 32rem;
}

.page-accent {
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--accent, var(--focus));
}

.page[data-section="about"] {
  --accent: #0f5c5c;
}

.page[data-section="contact"] {
  --accent: #b85a32;
}

.page[data-section="showreel"] {
  --accent: #35507f;
}

.page[data-section="services"] {
  --accent: #c9a03a;
}