/* ABOUTME: Homepage styles: a short banner hero and horizontally expanding series panels. */
/* ABOUTME: On wide screens panels.js opens one series panel at a time; otherwise the panels stack as cards. */

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--ink-line); }
.hero__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; z-index: -2; filter: saturate(0.7) brightness(0.55); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 15, 19, 0.96) 0%, rgba(11, 15, 19, 0.85) 45%, rgba(11, 15, 19, 0.35) 100%), linear-gradient(0deg, var(--ink) 0%, transparent 30%); }
.hero__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(24px, 5vw, 72px); padding-block: clamp(40px, 7vw, 80px); }
.hero h1 { font-size: clamp(3.5rem, 9vw, 7rem); letter-spacing: 0.02em; margin-bottom: 16px; }
.hero__hook { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--crimson-bright); margin-bottom: 8px; }
.hero__blurb { max-width: 34em; color: var(--text-muted); font-size: 1.125rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 32px; }
.hero__buy-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 10px; }
.hero__cover img { width: clamp(200px, 22vw, 300px); box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.3s; }
.hero__cover:hover img { transform: translateY(-6px); }

/* Section heading */
.series { padding-top: clamp(56px, 8vw, 96px); }
.section-title { font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: 0.08em; }
.section-intro { color: var(--text-muted); margin: 8px 0 32px; }

/* Series panels: stacked cards on narrow screens, and until panels.js has run */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.panel { --accent: var(--crimson); position: relative; min-width: 0; overflow: hidden; isolation: isolate; background: var(--ink-raised); }
.panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); z-index: 2; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 15, 19, 0.97) 10%, rgba(11, 15, 19, 0.55) 55%, rgba(11, 15, 19, 0.25) 100%); }
.panel__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.7) brightness(0.75); transition: filter 0.5s, transform 0.8s; }
.panel__toggle { display: none; }
.panel__content { position: relative; padding: 28px 24px; }
.panel__title { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 12px; }
.panel__title a { text-decoration: none; }
.panel__title a:hover { color: var(--accent); }
.panel__tagline { color: var(--text-muted); max-width: 32em; }
.panel__covers { list-style: none; display: flex; gap: 10px; margin: 20px 0 24px; padding: 0; }
.panel__covers img { width: 64px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6); transition: transform 0.2s; }
.panel__covers a:hover img, .panel__covers a:focus-visible img { transform: translateY(-4px); }
.panel .text-link { border-bottom-color: var(--accent); }

/* Wide screens: one panel open at a time. panels.js sets .is-open on hover (mouse), tap or keyboard. */
@media (min-width: 860px) {
  .panels--interactive { display: flex; gap: 6px; height: 560px; }
  .panels--interactive .panel { flex: 1 1 0; transition: flex-grow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .panels--interactive .panel.is-open { flex-grow: 5; }
  .panels--interactive .panel__toggle { display: block; position: absolute; inset: 0; z-index: 3; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  .panels--interactive .panel.is-open .panel__toggle { visibility: hidden; }
  .panels--interactive .panel__label { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .panels--interactive .panel__content { position: absolute; left: 0; bottom: 0; width: min(560px, 60vw); padding: 36px; opacity: 0; transition: opacity 0.3s; }
  .panels--interactive .panel.is-open .panel__content { opacity: 1; transition-delay: 0.2s; }
  .panels--interactive .panel.is-open .panel__backdrop { filter: saturate(0.9) brightness(0.75); transform: scale(1.03); }
  .panels--interactive .panel:not(.is-open):focus-within .panel__backdrop { filter: saturate(0.8) brightness(0.85); }
  .panel__covers img { width: 84px; }
}

/* Audio / print callout */
.audio { margin-top: clamp(64px, 9vw, 112px); }
.audio__inner { display: grid; grid-template-columns: minmax(0, 360px) 1fr; align-items: center; gap: clamp(24px, 5vw, 64px); }
.audio h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 16px; }
.audio p { color: var(--text-muted); max-width: 36em; }
.audio .retailers { margin-top: 20px; }

.about-author { margin-top: clamp(64px, 9vw, 112px); }

@media (max-width: 859px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__cover { order: -1; }
  .hero__cover img { width: 150px; }

  .audio__inner { grid-template-columns: 1fr; }
  .audio__image { max-width: 280px; margin-inline: auto; }
}