:root {
  --bg: #f2ede6;
  --bg-top: #fbf8f4;
  --panel: rgba(255, 255, 255, 0.90);
  --panel-strong: rgba(255, 255, 255, 0.97);
  --panel-soft: rgba(250, 246, 240, 0.86);
  --navy: #1c1a17;
  --navy-deep: #000000;
  --navy-soft: #56504a;
  --gold: #b0670f;
  --gold-soft: #f0dcc0;
  --gold-line: rgba(176, 103, 15, 0.42);
  --text: #241f1a;
  --muted: #6d635a;
  --muted-soft: #8d8279;
  --shadow: rgba(60, 42, 24, 0.14);
  --shadow-strong: rgba(60, 42, 24, 0.22);
  --white: #ffffff;
  --row-active: rgba(176, 103, 15, 0.10);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,0.96) 0%, rgba(251,248,244,0.96) 18%, rgba(242,237,230,1) 52%, rgba(233,226,216,1) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 8% 96%, rgba(255,255,255,0.55), transparent 18%),
    radial-gradient(circle at 92% 4%, rgba(255,255,255,0.5), transparent 16%);
  pointer-events: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}
img { max-width: 100%; }

.app-shell {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 34px 22px 122px;
  isolation: isolate;
}
.orb {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}
.orb-left {
  left: -220px;
  top: 72px;
  width: 620px;
  height: 930px;
  border: 1.5px solid rgba(176, 103, 15, 0.48);
  border-radius: 50%;
  transform: rotate(-24deg);
}
.orb-right {
  right: -230px;
  top: 34px;
  width: 640px;
  height: 900px;
  border: 1.5px solid rgba(176, 103, 15, 0.4);
  border-radius: 50%;
  transform: rotate(24deg);
}

.view {
  display: none;
  max-width: 1180px;
  margin: 0 auto;
  animation: fadeIn 0.4s ease both;
}
.view.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header {
  text-align: center;
  width: min(820px, 94vw);
  margin: 0 auto 22px;
}
.home-header h1 {
  margin: 8px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
}
.home-header p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
.section-title-block {
  width: min(840px, 94vw);
  margin: 0 auto 14px;
}
.section-title-block h2 {
  margin: 8px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: clamp(1.4rem, 2vw, 2rem);
}
.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--gold);
  font-size: 12px;
}

.hero-cover-wrap {
  width: min(430px, 78vw);
  margin: 0 auto;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.4));
  border: 1px solid rgba(255,255,255,0.52);
  box-shadow: 0 22px 60px var(--shadow);
  position: relative;
}
.hero-cover-wrap::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -22px;
  height: 38px;
  background: radial-gradient(ellipse at center, rgba(116, 140, 177, 0.18), transparent 68%);
  filter: blur(12px);
}
.hero-cover,
.quick-cover {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(221, 204, 177, 0.68);
  box-shadow: 0 16px 42px rgba(56, 76, 112, 0.16);
}
.hero-cover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-cover:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(56, 76, 112, 0.22);
}
.hero-cover:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Hero row: cover with the issue selector rail beside it (right on wide
   screens, stacked below on narrow). */
.hero-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  width: min(1040px, 96vw);
  margin: 0 auto;
}
.hero-row .hero-cover-wrap { margin: 0; }

.issue-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 258px;
  max-width: 78vw;
  align-self: center;
}
.issue-rail-title {
  margin-bottom: 2px;
  padding-left: 4px;
}
.issue-rail-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: 16px;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid rgba(176, 103, 15, 0.32);
  box-shadow: 0 10px 26px var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.issue-rail-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px var(--shadow);
  border-color: rgba(176, 103, 15, 0.6);
}
.issue-rail-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.issue-rail-item.active {
  border-color: var(--gold);
  background: var(--panel-strong);
  box-shadow: 0 14px 32px var(--shadow), inset 0 0 0 1px rgba(176, 103, 15, 0.4);
}
.issue-rail-thumb {
  width: 48px;
  height: 63px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(176, 103, 15, 0.55);
  box-shadow: 0 6px 14px rgba(56, 76, 112, 0.18);
}
.issue-rail-copy { display: flex; flex-direction: column; line-height: 1.25; }
.issue-rail-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: 1.02rem;
}
.issue-rail-copy small {
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 2px;
}
.issue-rail-item.active .issue-rail-copy strong { color: var(--gold); }

@media (max-width: 720px){
  .issue-rail { width: min(430px, 78vw); }
}

.sound-card,
.glass-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(247,250,255,0.86));
  border: 1px solid rgba(218, 198, 162, 0.68);
  box-shadow: 0 22px 54px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
}
.sound-card {
  display: grid;
  grid-template-columns: 66px 1fr 46px 110px;
  gap: 18px;
  align-items: center;
  width: min(760px, 92vw);
  margin: 24px auto 22px;
  padding: 18px 22px;
  border-radius: 28px;
  text-align: left;
}
.sound-thumb {
  width: 66px;
  height: 66px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(218, 198, 162, 0.7);
}
.sound-copy {
  display: flex;
  flex-direction: column;
}
.sound-copy strong,
.quick-copy h1,
.expanded-copy h1,
.mag-meta h2,
.mag-track-copy strong,
.track-title,
.feature-card h2,
.magazine-topline h1,
.section-title-block h2 {
  font-family: Georgia, "Times New Roman", serif;
}
.sound-copy strong {
  font-size: 2rem;
  line-height: 1.02;
  color: var(--navy);
}
.sound-copy small,
.issue-line,
.quick-copy p,
.feature-card p,
.mag-meta p,
.mag-track-copy small,
.track-sub,
.track-time,
.home-header p,
.collection-card small {
  color: var(--muted);
}
.round-icon,
.more,
.back-btn,
.mag-side-btn,
.magazine-edge-arrow,
.heart {
  border: 1px solid rgba(176,103,15,0.48);
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,243,234,0.92));
  color: var(--navy);
  box-shadow: 0 10px 22px rgba(55, 81, 118, 0.08);
}
.round-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
/* Mute / play toggle on the home soundtrack card. Click toggles the
   issue's launch song (Track 01) without leaving the home view. */
.mute-toggle {
  position: relative;
  padding: 0;
  cursor: pointer;
  color: var(--navy, #1a3a6b);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mute-toggle:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(55, 81, 118, 0.18); }
.mute-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mute-toggle .mute-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  transition: opacity 0.18s ease;
}
.mute-toggle .mute-icon-playing { opacity: 0; }
.mute-toggle.is-playing { color: var(--gold, #b0670f); }
.mute-toggle.is-playing .mute-icon-muted { opacity: 0; }
.mute-toggle.is-playing .mute-icon-playing { opacity: 1; }
.mini-eq,
.mag-wave {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.mini-eq { height: 48px; }
.mini-eq i,
.large-eq i,
.mag-wave i {
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8de98, var(--gold));
  box-shadow: 0 0 10px rgba(176, 103, 15, 0.22);
  animation: eq 1s ease-in-out infinite;
}
.mini-eq i:nth-child(1) { height: 14px; }
.mini-eq i:nth-child(2) { height: 24px; animation-delay: .1s; }
.mini-eq i:nth-child(3) { height: 34px; animation-delay: .2s; }
.mini-eq i:nth-child(4) { height: 42px; animation-delay: .3s; }
.mini-eq i:nth-child(5) { height: 30px; animation-delay: .4s; }
.mini-eq i:nth-child(6) { height: 20px; animation-delay: .5s; }
@keyframes eq {
  50% { transform: scaleY(0.42); opacity: 0.72; }
}

/* When a visualizer is .visualizer-live, the JS analyser is driving each bar
   via the --eq-scale CSS variable. Disable the canned animation, give all
   bars the full container height, and let scaleY() modulate them. */
.visualizer-live i {
  animation: none !important;
  height: 100% !important;
  transform-origin: bottom center;
  transform: scaleY(var(--eq-scale, 0.22));
  transition: transform 80ms ease-out;
}

.home-actions {
  width: min(760px, 92vw);
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.open-magazine-btn,
.listen-issue-btn,
.subscribe-btn,
.mag-actions-row button,
.read-feature {
  border-radius: 999px;
  padding: 12px 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.79rem;
}
.open-magazine-btn {
  background: linear-gradient(180deg, #e0a555, #b0670f);
  color: var(--navy-deep);
  box-shadow: 0 12px 28px rgba(176,103,15,0.18);
}
.listen-issue-btn,
.subscribe-btn,
.mag-actions-row button,
.read-feature {
  background: rgba(255,255,255,0.78);
  color: var(--navy);
  border: 1px solid rgba(176,103,15,0.38);
}

/* Subscription section under the issue chooser */
.chooser-subscribe {
  width: min(1080px, 96vw);
  margin: 8px auto 10px;
  padding-top: 34px;
  border-top: 1px solid rgba(176,103,15,0.24);
}
.chooser-subscribe .section-title-block { text-align: center; }
.chooser-subscribe .section-title-block h2 { margin-bottom: 6px; }
.chooser-subscribe-sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}
.chooser-subscribe .billing-toggle { margin-top: 18px; }
.chooser-subscribe .subscribe-foot { margin-bottom: 26px; }

/* ---------- Subscribe page ---------- */
.view-subscribe { position: relative; }
.subscribe-header { margin-bottom: 4px; }

.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 22px auto 30px;
  padding: 6px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid rgba(176,103,15,0.3);
  box-shadow: 0 10px 26px var(--shadow);
}
.billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}
.billing-opt.active {
  background: linear-gradient(180deg, #e0a555, #b0670f);
  color: var(--navy-deep);
  box-shadow: 0 8px 18px rgba(176,103,15,0.22);
}
.billing-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.billing-save {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.85;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
  width: min(1080px, 96vw);
  margin: 0 auto 30px;
}
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid rgba(176,103,15,0.3);
  box-shadow: 0 18px 44px var(--shadow);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tier-card:hover { transform: translateY(-3px); box-shadow: 0 26px 56px var(--shadow); }
.tier-card.featured {
  border-color: var(--gold);
  background: var(--panel-strong);
  box-shadow: 0 24px 56px var(--shadow), inset 0 0 0 1px rgba(176,103,15,0.35);
}
.tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e0a555, #b0670f);
  color: var(--navy-deep);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(176,103,15,0.25);
}
.tier-name {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-size: 1.32rem;
  margin: 2px 0 4px;
}
.tier-tagline { color: var(--muted); font-size: 0.86rem; margin: 0 0 14px; line-height: 1.45; }
.tier-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 16px; }
.tier-amount {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--gold);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
}
.tier-per { color: var(--muted); font-size: 0.86rem; }
.tier-perks { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.tier-perks li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--navy);
  font-size: 0.86rem;
  line-height: 1.45;
}
.tier-perks li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--gold);
  font-size: 0.7rem;
}
.tier-cta {
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.79rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.78);
  color: var(--navy);
  border: 1px solid rgba(176,103,15,0.38);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tier-card.featured .tier-cta {
  background: linear-gradient(180deg, #e0a555, #b0670f);
  color: var(--navy-deep);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(176,103,15,0.2);
}
.tier-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--shadow); }
.tier-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.subscribe-foot {
  width: min(760px, 92vw);
  margin: 0 auto 40px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
.subscribe-foot a { color: var(--gold); }

.subscribe-mode .view-subscribe .bottom-nav {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0 auto 42px;
}

@media (max-width: 980px){
  .tier-grid { grid-template-columns: 1fr; width: min(520px, 92vw); }
}
.mag-actions-row button.active {
  background: linear-gradient(180deg, rgba(248,223,159,0.85), rgba(248,223,159,0.55));
}

.theme-grid {
  width: min(840px, 94vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.theme-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(218,198,162,0.72);
  background: var(--panel-strong);
  box-shadow: 0 16px 40px var(--shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px var(--shadow-strong);
  border-color: rgba(176,103,15,0.66);
}
.theme-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.theme-card .play-dot {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--navy-deep);
  background: linear-gradient(180deg, #e0a555, #b0670f);
  box-shadow: 0 10px 22px rgba(176,103,15,0.22);
}

/* "Own the April 2026 Issue" promo card on the home page */
.buy-issue-card {
  width: min(840px, 94vw);
  margin: 36px auto 34px;
  padding: 22px;
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 28px;
  align-items: center;
  border-radius: 24px;
  border: 1px solid rgba(218,198,162,0.55);
  background: var(--panel-strong, rgba(255,255,255,0.92));
  box-shadow: 0 18px 44px var(--shadow);
}
body.dark-theme .buy-issue-card {
  background: linear-gradient(180deg, rgba(11,40,42,0.88), rgba(8,28,30,0.92));
  border-color: rgba(218,198,162,0.32);
  box-shadow: 0 22px 52px rgba(0,0,0,0.45);
}
.buy-issue-cover-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(221,204,177,0.6);
  box-shadow: 0 12px 28px rgba(56,76,112,0.18);
}
.buy-issue-cover {
  display: block;
  width: 100%;
  height: auto;
}
.buy-issue-copy { display: flex; flex-direction: column; gap: 8px; }
.buy-issue-copy h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
}
.buy-issue-copy p {
  margin: 0 0 12px;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.45;
}
body.dark-theme .buy-issue-copy p { color: rgba(232,224,206,0.78); }
.buy-issue-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.buy-issue-btn,
.buy-issue-details {
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.buy-issue-btn {
  border: none;
  color: var(--navy-deep);
  background: linear-gradient(180deg, #e0a555, #b0670f);
  box-shadow: 0 12px 24px rgba(176,103,15,0.28);
}
.buy-issue-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(176,103,15,0.36); }
.buy-issue-cart { font-size: 14px; }
.buy-issue-details {
  background: transparent;
  color: var(--navy-deep);
  border: 1px solid rgba(20,40,70,0.4);
}
body.dark-theme .buy-issue-details {
  color: #f4ead2;
  border-color: rgba(244,234,210,0.42);
}
.buy-issue-details:hover { transform: translateY(-2px); border-color: var(--gold); }
@media (max-width: 700px) {
  .buy-issue-card { grid-template-columns: 1fr; gap: 18px; padding: 18px; text-align: center; }
  .buy-issue-cover-wrap { max-width: 220px; margin: 0 auto; }
  .buy-issue-actions { justify-content: center; }
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 20;
  width: min(620px, 92vw);
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 26px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(218,198,162,0.8);
  box-shadow: 0 14px 30px rgba(58,89,132,0.12);
  backdrop-filter: blur(18px);
}
.bottom-nav button {
  min-width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--navy-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bottom-nav button span {
  font-size: 24px;
  line-height: 1;
}
.bottom-nav .active {
  color: var(--gold);
}

/* Home page only: keep the menu below the Buy Issue card instead of floating over it. */
.home-mode .view-home .bottom-nav,
.chooser-mode .view-chooser .bottom-nav {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0 auto 42px;
}

/* Cover chooser (first page) */
.view-chooser { position: relative; }
.view-home { position: relative; }
.chooser-header { margin-bottom: 6px; }
.chooser-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  width: min(920px, 96vw);
  margin: 34px auto 46px;
}
.chooser-cover {
  width: min(348px, 42vw);
  padding: 14px;
  border-radius: 28px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.4));
  border: 1px solid rgba(255,255,255,0.52);
  box-shadow: 0 22px 60px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chooser-cover:hover { transform: translateY(-6px); box-shadow: 0 32px 72px var(--shadow); }
.chooser-cover:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.chooser-cover img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* Back-to-issues link on an issue landing */
.issue-back {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: var(--panel);
  border: 1px solid rgba(176, 103, 15, 0.42);
  box-shadow: 0 8px 20px var(--shadow);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.issue-back:hover { transform: translateY(-1px); border-color: var(--gold); box-shadow: 0 12px 26px var(--shadow); }
.issue-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 720px){
  .chooser-cover { width: min(360px, 82vw); }
}

.back-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  font-size: 34px;
  line-height: 1;
  z-index: 5;
}
.back-btn.inline {
  position: static;
}
.view-quick {
  max-width: 900px;
  position: relative;
}
.quick-cover {
  width: min(470px, 72vw);
  margin: 0 auto;
}
.quick-panel {
  width: min(820px, 94vw);
  margin: -18px auto 0;
  padding: 30px;
  border-radius: 34px;
  display: grid;
  grid-template-columns: 190px 1fr 70px;
  gap: 24px;
  align-items: start;
  position: relative;
}
.handle {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 5px;
  background: rgba(117, 136, 165, 0.3);
  border-radius: 999px;
}
.quick-art,
.expanded-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(218,198,162,0.64);
  box-shadow: 0 12px 32px rgba(58,89,132,0.12);
}
.quick-copy h1,
.expanded-copy h1 {
  margin: 0.25rem 0;
  color: var(--navy);
  line-height: 1.05;
  font-size: clamp(2rem, 4vw, 2.35rem);
}
.quick-copy .issue-line span,
.expanded-copy span,
.brand-mark span,
.feature-card h3,
.mag-track-copy strong,
.magazine-topline h1,
.mag-meta h2 {
  color: var(--navy);
}
.heart {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  font-size: 28px;
  align-self: center;
}
.full-row { grid-column: 1 / -1; }
.progress-row {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}
.progress-row input {
  width: 100%;
  accent-color: var(--navy);
}
.controls {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  padding: 8px 0;
}
.controls button {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(218,198,162,0.56);
  box-shadow: 0 8px 18px rgba(58,89,132,0.08);
  font-size: 24px;
}
.big-play {
  width: 74px !important;
  height: 74px !important;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8df9f, #d8a74b) !important;
  color: var(--navy-deep) !important;
  border: 0 !important;
  box-shadow: 0 16px 32px rgba(176,103,15,0.26) !important;
  font-size: 28px !important;
}
.up-next,
.expanded-list,
.collections {
  border-radius: 24px;
  padding: 18px;
  background: rgba(255,255,255,0.48);
  border: 1px solid rgba(225,212,188,0.72);
}
/* Rows are <button>s — without width:100% each one shrink-wraps to its own
   content, which is why the divider lines used to stop short and leave dead
   space on the right. Full width lets the 1fr title column absorb the slack. */
.track-row {
  display: grid;
  grid-template-columns: 48px 26px 1fr auto 28px;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 12px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  border-bottom: 1px solid var(--gold-line, rgba(125, 145, 174, 0.14));
  transition: background 0.16s ease;
}
.track-row:hover { background: var(--panel-soft); }
.track-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Now playing: a lighter wash of the page ground — no label needed. */
.track-row.is-playing {
  background: var(--row-active);
}
.track-row.is-playing .track-num,
.track-row.is-playing .track-title { color: var(--gold); }
.track-row:last-child { border-bottom: 0; }
.track-row img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
}
.track-title {
  font-size: 1.1rem;
  color: var(--navy);
}
.expand-link {
  grid-column: 1 / -1;
  padding-top: 6px;
  text-align: center;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.view-expanded {
  max-width: 900px;
  padding-bottom: 40px;
}
.expanded-card,
.feature-card,
.expanded-list,
.collections {
  margin-bottom: 14px;
}
.expanded-card {
  padding: 24px 26px;
  border-radius: 34px;
}
.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-mark {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  line-height: 0.86;
  color: var(--navy-deep);
}
.more {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  font-size: 24px;
  letter-spacing: 0.16em;
}
.mag-fs-toggle {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--gold);
}
.mag-fs-toggle .fs-icon { display: none; }
.mag-fs-toggle .fs-icon-expand { display: block; }
body.mag-fullscreen .mag-fs-toggle .fs-icon-expand { display: none; }
body.mag-fullscreen .mag-fs-toggle .fs-icon-compress { display: block; }
.expanded-player {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 20px;
}
.expanded-copy > p { margin: 0.25rem 0; color: var(--muted); }
.large-eq {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  height: 104px;
  margin: 20px auto 0;
  max-width: 360px;
}
.large-eq i { min-height: 12px; width: 6px; }
.expanded-controls { padding: 18px 0 8px; }
.feature-card {
  min-height: 290px;
  padding: 28px;
  border-radius: 32px;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.94), rgba(255,255,255,0.56)),
    url('assets/images/cover.jpg?v=1');
  background-size: cover;
  background-position: center right;
}
.feature-card h2 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.02;
  margin: 0.4rem 0;
  color: var(--navy);
}
.feature-card h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
.feature-card p {
  max-width: 420px;
  line-height: 1.5;
}
.collections > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.collection-card {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  padding: 14px;
  text-align: left;
  border-radius: 18px;
  border: 1px solid rgba(218,198,162,0.72);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 24px rgba(58,89,132,0.08);
}
.collection-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.45));
}
.collection-card > * {
  position: relative;
}
.collection-card h4 {
  margin: 0 0 6px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.view-magazine {
  max-width: none;
  width: 100%;
  padding-bottom: 46px;
}
/* Fullscreen mode for the magazine reader. Triggered when the user clicks
   the ••• button on the magazine page. Magazine takes center stage; the
   topline header, narration player, and page strip all compress. */
.view-magazine:fullscreen,
.view-magazine:-webkit-full-screen {
  background: var(--app-bg, #eef3fb);
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 88px 0 24px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
body.dark-theme .view-magazine:fullscreen,
body.dark-theme .view-magazine:-webkit-full-screen {
  background: var(--bg, #051b1d);
}
body.mag-fullscreen .bottom-nav { display: none; }

/* Compressed topline */
.view-magazine:fullscreen .magazine-topline,
.view-magazine:-webkit-full-screen .magazine-topline {
  margin: 0 auto 32px;
  gap: 10px;
}
.view-magazine:fullscreen .magazine-topline h1,
.view-magazine:-webkit-full-screen .magazine-topline h1 {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin: 2px 0 0;
}
.view-magazine:fullscreen .magazine-topline .eyebrow,
.view-magazine:-webkit-full-screen .magazine-topline .eyebrow {
  font-size: 10px;
}
.view-magazine:fullscreen .magazine-topline .back-btn,
.view-magazine:fullscreen .magazine-topline .more,
.view-magazine:-webkit-full-screen .magazine-topline .back-btn,
.view-magazine:-webkit-full-screen .magazine-topline .more {
  width: 36px; height: 36px; font-size: 22px;
}

/* Magazine stage takes its natural size — NOT flex:1 — so the document
   can grow taller than the viewport when the strip expands, which is what
   triggers vertical scroll on the fullscreen container. */
.view-magazine:fullscreen .magazine-stage,
.view-magazine:-webkit-full-screen .magazine-stage {
  flex: 0 0 auto;
  width: min(2400px, 99vw);
  margin: 0 auto 8px;
  display: flex;
  flex-direction: column;
}
.view-magazine:fullscreen .magazine-reader-frame,
.view-magazine:-webkit-full-screen .magazine-reader-frame {
  flex: 1 1 auto;
  align-items: center;
  /* In fullscreen the arrows are pinned to the viewport edges via
     position: fixed below, so we just need a single column for the page. */
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  padding: 0 96px; /* leave room on the sides for the fixed arrows */
}
.view-magazine:fullscreen .magazine-edge-arrow,
.view-magazine:-webkit-full-screen .magazine-edge-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 140px;
  z-index: 30;
  /* Arrow contrast against varied pages: solid pill with a soft shadow */
  background: rgba(15, 30, 50, 0.78);
  color: #f4ead2;
  border: 1px solid rgba(244,234,210,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.view-magazine:fullscreen .magazine-edge-arrow:hover,
.view-magazine:-webkit-full-screen .magazine-edge-arrow:hover {
  transform: translateY(-50%) scale(1.04);
}
.view-magazine:fullscreen .magazine-edge-arrow-left,
.view-magazine:-webkit-full-screen .magazine-edge-arrow-left { left: clamp(18px, 18vw, 344px); right: auto; }
.view-magazine:fullscreen .magazine-edge-arrow-right,
.view-magazine:-webkit-full-screen .magazine-edge-arrow-right { right: clamp(18px, 18vw, 344px); left: auto; }
.view-magazine:fullscreen .mag-page-wrap,
.view-magazine:-webkit-full-screen .mag-page-wrap {
  width: 100%;
  max-height: calc(100vh - 220px);
}
.view-magazine:fullscreen .mag-spread,
.view-magazine:-webkit-full-screen .mag-spread {
  max-height: calc(100vh - 220px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.view-magazine:fullscreen .mag-meta,
.view-magazine:-webkit-full-screen .mag-meta {
  padding: 6px 0 2px;
}
.view-magazine:fullscreen .mag-meta h2,
.view-magazine:-webkit-full-screen .mag-meta h2 {
  font-size: 1.05rem;
  margin: 2px 0;
}
.view-magazine:fullscreen .mag-meta small,
.view-magazine:-webkit-full-screen .mag-meta small { font-size: 11px; }
.view-magazine:fullscreen .mag-pages,
.view-magazine:-webkit-full-screen .mag-pages { font-size: 10px; }

/* Compact narration player */
.view-magazine:fullscreen .mag-player,
.view-magazine:-webkit-full-screen .mag-player {
  width: min(900px, 90vw);
  margin: 0 auto 8px;
  padding: 8px 12px;
  border-radius: 18px;
}
.view-magazine:fullscreen .mag-player-main,
.view-magazine:-webkit-full-screen .mag-player-main {
  grid-template-columns: 48px 1fr 240px;
  gap: 10px;
}
.view-magazine:fullscreen .mag-play,
.view-magazine:-webkit-full-screen .mag-play {
  width: 48px; height: 48px; font-size: 18px;
}
.view-magazine:fullscreen .mag-track-copy strong,
.view-magazine:-webkit-full-screen .mag-track-copy strong {
  font-size: 0.95rem;
  line-height: 1.1;
}
.view-magazine:fullscreen .mag-track-copy small,
.view-magazine:-webkit-full-screen .mag-track-copy small { font-size: 10px; }
.view-magazine:fullscreen .mag-wave,
.view-magazine:-webkit-full-screen .mag-wave { height: 36px; }
.view-magazine:fullscreen .mag-progress,
.view-magazine:-webkit-full-screen .mag-progress { padding: 4px 0; }
.view-magazine:fullscreen .mag-actions-row,
.view-magazine:-webkit-full-screen .mag-actions-row { padding: 4px 0 0; gap: 8px; }
.view-magazine:fullscreen .mag-actions-row .pill,
.view-magazine:-webkit-full-screen .mag-actions-row .pill {
  padding: 6px 14px;
  font-size: 11px;
}
.view-magazine:fullscreen .mag-side-btn,
.view-magazine:-webkit-full-screen .mag-side-btn {
  width: 36px; height: 64px; font-size: 22px; border-radius: 14px;
}

/* Tighter page strip */
.view-magazine:fullscreen .mag-strip,
.view-magazine:-webkit-full-screen .mag-strip {
  /* Fullscreen wrap grid: exactly 22 thumbnails per row.
     The fullscreen container scrolls vertically to show all rows. */
  display: flex;
  flex-wrap: wrap;
  width: min(2400px, 99vw);
  margin: 12px auto 24px;
  gap: 6px;
  padding: 4px 0;
}
.view-magazine:fullscreen .mag-strip > *,
.view-magazine:-webkit-full-screen .mag-strip > * {
  flex: 0 0 calc((100% - 21 * 6px) / 22);
  min-width: 0;
}
.view-magazine:fullscreen .mag-strip-card,
.view-magazine:-webkit-full-screen .mag-strip-card {
  padding: 4px;
  border-radius: 10px;
  font-size: 10px;
}
.view-magazine:fullscreen .mag-strip-card span,
.view-magazine:-webkit-full-screen .mag-strip-card span { font-size: 9px; }
.magazine-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1120px, 96vw);
  margin: 0 auto 18px;
}
.magazine-topline > div {
  text-align: center;
}
.magazine-topline h1 {
  margin: 6px 0 0;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
}
.magazine-stage {
  width: min(1560px, 99vw);
  margin: 0 auto 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}
.magazine-reader-frame {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 68px;
  align-items: center;
  column-gap: 20px;
  padding: 0;
}
.mag-page-wrap {
  position: relative;
  perspective: 2400px;
  transform-style: preserve-3d;
  border-radius: 24px;
  width: min(1400px, 100%);
  margin: 0 auto;
  background: rgba(255,255,255,0.15);
  justify-self: center;
}
.magazine-edge-arrow {
  position: relative;
  top: auto;
  transform: none;
  width: 68px;
  height: 180px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 3.4rem;
  line-height: 1;
  z-index: 2;
  opacity: 0.82;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.magazine-edge-arrow:hover {
  opacity: 1;
  transform: scale(1.02);
}
.magazine-edge-arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.magazine-edge-arrow-left { justify-self: start; }
.magazine-edge-arrow-right { justify-self: end; }

/* Single smooth page-turn. The half-page rotates from 0° to ~92° at the
   spine and fades out as it passes vertical. The new spread sits underneath
   from the start; the rotating half-page on top covers it during the flip
   and reveals it as it rotates away. */
.mag-spread {
  display: block;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(58,89,132,0.12);
}
/* Single-page items (e.g. back cover) render at half width, centered */
.mag-page-wrap.is-single .mag-spread {
  width: 50%;
  margin: 0 auto;
}
.mag-page-wrap.is-single { display: flex; justify-content: center; }

.mag-page-flipper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
  z-index: 3;
  perspective: 2400px;
  transform-style: preserve-3d;
  will-change: transform;
}
.mag-page-flipper.flip-next { right: 0; left: auto; }
.mag-page-flipper.flip-prev { left: 0; right: auto; }

.mag-page-static-hold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
  z-index: 2;
  background-size: 200% 100%;
  background-repeat: no-repeat;
}
.mag-page-static-hold.hold-next {
  left: 0;
  right: auto;
  background-position: 0 0;
  border-radius: 18px 0 0 18px;
}
.mag-page-static-hold.hold-prev {
  right: 0;
  left: auto;
  background-position: 100% 0;
  border-radius: 0 18px 18px 0;
}

.mag-page-flipper-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 0 18px 18px 0;
  will-change: transform;
}
.mag-page-flipper.flip-next .mag-page-flipper-inner { transform-origin: left center; }
.mag-page-flipper.flip-prev .mag-page-flipper-inner {
  transform-origin: right center;
  border-radius: 18px 0 0 18px;
}

.mag-page-face {
  position: absolute;
  inset: 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 24px 48px rgba(15,32,64,0.22);
}
.mag-page-face-back { display: none; }

.mag-page-flipper.flip-next .mag-page-face-front {
  background-position: 100% 0;
  border-radius: 0 18px 18px 0;
}
.mag-page-flipper.flip-prev .mag-page-face-front {
  background-position: 0 0;
  border-radius: 18px 0 0 18px;
}

.mag-page-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.mag-page-flipper.flip-next .mag-page-shade {
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0)    100%);
}
.mag-page-flipper.flip-prev .mag-page-shade {
  border-radius: 18px 0 0 18px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0.45) 100%);
}

.mag-page-flipper.flip-next.animate .mag-page-flipper-inner { animation: pageTurnNext 0.42s cubic-bezier(0.4, 0.0, 0.2, 1) both; }
.mag-page-flipper.flip-prev.animate .mag-page-flipper-inner { animation: pageTurnPrev 0.42s cubic-bezier(0.4, 0.0, 0.2, 1) both; }
.mag-page-flipper.animate .mag-page-shade { animation: pageShade 0.42s ease-in both; }

@keyframes pageTurnNext {
  from { transform: rotateY(0deg);   opacity: 1; }
  to   { transform: rotateY(-95deg); opacity: 0; }
}
@keyframes pageTurnPrev {
  from { transform: rotateY(0deg);  opacity: 1; }
  to   { transform: rotateY(95deg); opacity: 0; }
}
@keyframes pageShade {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .mag-page-flipper.animate .mag-page-flipper-inner { animation-duration: 0.01s; }
}
.mag-meta {
  width: min(1400px, calc(100% - 144px));
  margin: 0 auto;
  padding: 14px 0 2px;
}
.mag-meta h2 {
  margin: 6px 0;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.mag-player {
  width: min(980px, 94vw);
  margin: 0 auto 18px;
  padding: 18px 22px;
  border-radius: 30px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 14px;
  align-items: center;
}
.mag-player-main {
  display: grid;
  grid-template-columns: 74px 1fr 380px;
  gap: 18px;
  align-items: center;
}
.mag-track-copy {
  display: flex;
  flex-direction: column;
}
.mag-track-copy strong {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.06;
}
.mag-wave { height: 58px; gap: 6px; }
.mag-wave i { width: 8px; }
.mag-wave i:nth-child(1)  { height: 18px; }
.mag-wave i:nth-child(2)  { height: 26px; animation-delay: .04s; }
.mag-wave i:nth-child(3)  { height: 34px; animation-delay: .08s; }
.mag-wave i:nth-child(4)  { height: 42px; animation-delay: .12s; }
.mag-wave i:nth-child(5)  { height: 48px; animation-delay: .16s; }
.mag-wave i:nth-child(6)  { height: 52px; animation-delay: .20s; }
.mag-wave i:nth-child(7)  { height: 44px; animation-delay: .24s; }
.mag-wave i:nth-child(8)  { height: 36px; animation-delay: .28s; }
.mag-wave i:nth-child(9)  { height: 28px; animation-delay: .32s; }
.mag-wave i:nth-child(10) { height: 22px; animation-delay: .36s; }
.mag-wave i:nth-child(11) { height: 30px; animation-delay: .40s; }
.mag-wave i:nth-child(12) { height: 40px; animation-delay: .44s; }
.mag-wave i:nth-child(13) { height: 50px; animation-delay: .48s; }
.mag-wave i:nth-child(14) { height: 46px; animation-delay: .52s; }
.mag-wave i:nth-child(15) { height: 38px; animation-delay: .56s; }
.mag-wave i:nth-child(16) { height: 30px; animation-delay: .60s; }
.mag-wave i:nth-child(17) { height: 24px; animation-delay: .64s; }
.mag-wave i:nth-child(18) { height: 32px; animation-delay: .68s; }
.mag-wave i:nth-child(19) { height: 26px; animation-delay: .72s; }
.mag-wave i:nth-child(20) { height: 20px; animation-delay: .76s; }
.mag-wave i:nth-child(21) { height: 28px; animation-delay: .80s; }
.mag-wave i:nth-child(22) { height: 38px; animation-delay: .84s; }
.mag-wave i:nth-child(23) { height: 46px; animation-delay: .88s; }
.mag-wave i:nth-child(24) { height: 36px; animation-delay: .92s; }
.mag-wave i:nth-child(25) { height: 26px; animation-delay: .96s; }
.mag-wave i:nth-child(26) { height: 22px; animation-delay: 1.0s; }
.mag-progress,
.mag-actions-row {
  grid-column: 2 / 3;
}
.mag-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mag-side-btn {
  width: 44px;
  height: 88px;
  border-radius: 18px;
  font-size: 32px;
  line-height: 1;
}
#magPrev.mag-side-btn { grid-column: 1; grid-row: 1 / -1; align-self: center; }
#magNext.mag-side-btn { grid-column: 3; grid-row: 1 / -1; align-self: center; }
.mag-strip {
  width: min(980px, 94vw);
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.mag-thumb {
  padding: 8px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(218,198,162,0.76);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 12px 24px rgba(58,89,132,0.08);
  transition: 0.2s ease;
}
.mag-thumb.active {
  border-color: rgba(176,103,15,0.72);
  box-shadow: 0 16px 30px rgba(176,103,15,0.12);
}
.mag-thumb img {
  width: 100%;
  aspect-ratio: 1.72 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.mag-thumb span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.home-mode .bottom-nav [data-nav="home"],
.chooser-mode .bottom-nav [data-nav="home"],
.magazine-mode .bottom-nav [data-nav="magazine"],
.expanded-mode .bottom-nav [data-nav="audio"] {
  color: var(--gold);
}

@media (max-width: 860px) {
  .sound-card { grid-template-columns: 62px 1fr 44px; }
  .sound-card .mini-eq { grid-column: 2 / 4; justify-content: flex-start; }
  .theme-grid,
  .collections > div,
  .mag-strip { grid-template-columns: repeat(2, 1fr); }
  .quick-panel { grid-template-columns: 150px 1fr 58px; }
  .expanded-player { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app-shell { padding: 24px 12px 102px; }
  .orb-left { left: -280px; top: 120px; width: 560px; height: 760px; }
  .orb-right { right: -290px; top: 90px; width: 560px; height: 760px; }
  .sound-card {
    grid-template-columns: 54px 1fr 36px;
    gap: 12px;
    padding: 14px;
    margin-top: 18px;
  }
  .sound-thumb { width: 54px; height: 54px; }
  .sound-copy strong { font-size: 1.55rem; }
  .home-actions { flex-direction: column; }
  .open-magazine-btn,
  .listen-issue-btn { width: 100%; }
  .theme-grid,
  .collections > div,
  .mag-strip { grid-template-columns: 1fr; }
  .bottom-nav { bottom: 10px; width: min(720px, 96vw); }
  .bottom-nav button { min-width: auto; font-size: 10px; }
  .quick-panel {
    grid-template-columns: 110px 1fr 44px;
    padding: 24px 16px;
    gap: 16px;
  }
  .quick-art { width: 110px; }
  .heart { width: 44px; height: 44px; font-size: 22px; }
  .controls button { width: 48px; height: 48px; }
  .big-play { width: 68px !important; height: 68px !important; }
  .feature-card h2 { font-size: 2rem; }
  .magazine-topline { grid-template-columns: 1fr; }
  .magazine-topline h1 { font-size: 2rem; }
  .magazine-stage { padding: 0; }
  .magazine-reader-frame {
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    column-gap: 10px;
    padding: 0;
  }
  .mag-page-wrap,
  .mag-meta {
    width: 100%;
  }
  .magazine-edge-arrow {
    width: 54px;
    height: 84px;
    border-radius: 20px;
    font-size: 2.6rem;
    background: rgba(255,255,255,0.88);
  }
  .magazine-edge-arrow-left { justify-self: start; }
  .magazine-edge-arrow-right { justify-self: end; }
  .mag-player {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .mag-side-btn { display: none; }
  .mag-player-main {
    grid-template-columns: 64px 1fr;
    gap: 14px;
  }
  .mag-wave {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .mag-progress,
  .mag-actions-row { grid-column: 1 / -1; }
}


/* Theme toggle + dark reader aesthetic */
.theme-toggle {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(176, 103, 15, 0.56);
  background: rgba(255, 255, 255, 0.72);
  color: var(--navy);
  box-shadow: 0 12px 28px rgba(58, 89, 132, 0.12);
  backdrop-filter: blur(18px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 11px;
}
.theme-toggle-track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,223,186,0.84));
  border: 1px solid rgba(176,103,15,0.42);
}
.theme-toggle-knob {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8df9f, #d8a74b);
  box-shadow: 0 3px 9px rgba(58, 89, 132, 0.18);
  transition: transform .22s ease;
}

body.dark-theme {
  --bg: #0a0908;
  --bg-top: #1c1713;
  --panel: rgba(26, 22, 18, 0.86);
  --panel-strong: rgba(16, 13, 11, 0.95);
  --panel-soft: rgba(22, 18, 15, 0.80);
  --navy: #f4ece1;
  --navy-deep: #fffaf2;
  --navy-soft: rgba(244, 236, 225, 0.72);
  --gold: #d98c2b;
  --gold-soft: rgba(217, 140, 43, 0.18);
  --gold-line: rgba(217, 140, 43, 0.42);
  --text: #f4ece1;
  --muted: rgba(244, 236, 225, 0.72);
  --muted-soft: rgba(244, 236, 225, 0.56);
  --shadow: rgba(0, 0, 0, 0.40);
  --shadow-strong: rgba(0, 0, 0, 0.55);
  --row-active: rgba(255, 236, 210, 0.10);
  background:
    radial-gradient(circle at 50% -18%, rgba(120, 62, 12, 0.55) 0%, rgba(46, 28, 12, 0.85) 24%, rgba(16, 12, 9, 0.98) 56%, rgba(0, 0, 0, 1) 100%);
}
body.dark-theme::before {
  background:
    radial-gradient(circle at 50% 4%, rgba(140, 74, 16, 0.34), transparent 28%),
    radial-gradient(circle at 13% 92%, rgba(110, 58, 12, 0.20), transparent 18%),
    radial-gradient(circle at 88% 8%, rgba(110, 58, 12, 0.18), transparent 18%);
}
body.dark-theme .orb-left,
body.dark-theme .orb-right {
  border-color: rgba(217, 140, 43, 0.22);
  opacity: 0.9;
}
body.dark-theme .theme-toggle {
  background: rgba(0, 30, 25, 0.72);
  color: var(--gold);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
body.dark-theme .theme-toggle-track {
  background: rgba(0, 18, 15, 0.88);
}
body.dark-theme .theme-toggle-knob { transform: translateX(18px); }
body.dark-theme .hero-cover-wrap,
body.dark-theme .sound-card,
body.dark-theme .glass-panel,
body.dark-theme .bottom-nav,
body.dark-theme .up-next,
body.dark-theme .expanded-list,
body.dark-theme .collections,
body.dark-theme .theme-card,
body.dark-theme .collection-card,
body.dark-theme .mag-thumb {
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.82), rgba(14, 11, 8, 0.76));
  border-color: rgba(217, 140, 43, 0.38);
  box-shadow: 0 22px 54px rgba(0,0,0,0.36), inset 0 1px 0 rgba(217,140,43,0.08);
}
body.dark-theme .round-icon,
body.dark-theme .more,
body.dark-theme .back-btn,
body.dark-theme .mag-side-btn,
body.dark-theme .magazine-edge-arrow,
body.dark-theme .heart,
body.dark-theme .controls button,
body.dark-theme .listen-issue-btn,
body.dark-theme .subscribe-btn,
body.dark-theme .tier-cta,
body.dark-theme .mag-actions-row button,
body.dark-theme .read-feature {
  background: rgba(0, 24, 20, 0.82);
  color: var(--navy);
  border-color: rgba(217, 140, 43, 0.42);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
body.dark-theme .tier-card.featured .tier-cta,
body.dark-theme .billing-opt.active {
  background: linear-gradient(180deg, #e0a555, #b0670f);
  color: #14211c;
  border-color: transparent;
}
body.dark-theme .open-magazine-btn,
body.dark-theme .big-play,
body.dark-theme .theme-card .play-dot {
  background: linear-gradient(180deg, #ffe38c, #d8a844) !important;
  color: #0a0908 !important;
}
body.dark-theme .mag-actions-row button.active {
  background: rgba(217, 140, 43, 0.18);
  color: var(--gold);
}
body.dark-theme .feature-card {
  background-image:
    linear-gradient(90deg, rgba(0, 31, 25, 0.96), rgba(0, 31, 25, 0.74)),
    url('assets/images/cover.jpg?v=1');
}
body.dark-theme .collection-card::before {
  background: linear-gradient(90deg, rgba(0, 28, 23, 0.92), rgba(0, 28, 23, 0.44));
}
body.dark-theme .mag-strip::-webkit-scrollbar-thumb { background: rgba(217, 140, 43, 0.42); }
body.dark-theme .progress-row input { accent-color: var(--gold); }

@media (max-width: 760px) {
  .theme-toggle {
    top: 12px;
    right: 12px;
    padding-right: 10px;
  }
  #themeToggleText { display: none; }
}


/* Fullscreen narration player overlap fix: reserve real space for the 74px play button */
.view-magazine:fullscreen .mag-player-main,
.view-magazine:-webkit-full-screen .mag-player-main {
  grid-template-columns: 82px minmax(0, 1fr) 240px;
  gap: 18px;
  align-items: center;
}
.view-magazine:fullscreen .mag-player-main .big-play,
.view-magazine:-webkit-full-screen .mag-player-main .big-play {
  width: 74px !important;
  height: 74px !important;
  flex: 0 0 74px;
  justify-self: start;
}
.view-magazine:fullscreen .mag-track-copy,
.view-magazine:-webkit-full-screen .mag-track-copy {
  min-width: 0;
  overflow: hidden;
  padding-left: 0;
}
.view-magazine:fullscreen .mag-track-copy strong,
.view-magazine:-webkit-full-screen .mag-track-copy strong {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
@media (max-width: 900px) {
  .view-magazine:fullscreen .mag-player-main,
  .view-magazine:-webkit-full-screen .mag-player-main {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .view-magazine:fullscreen .mag-wave,
  .view-magazine:-webkit-full-screen .mag-wave {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* Small spacing refinement: give narration label, title, and status breathing room */
.mag-track-copy .eyebrow {
  line-height: 1.2;
  margin-bottom: 2px;
}
.mag-track-copy strong {
  line-height: 1.18;
}
.mag-track-copy small {
  display: block;
  line-height: 1.2;
  margin-top: 2px;
}
.view-magazine:fullscreen .mag-track-copy .eyebrow,
.view-magazine:-webkit-full-screen .mag-track-copy .eyebrow {
  line-height: 1.2;
  margin-bottom: 2px;
}
.view-magazine:fullscreen .mag-track-copy strong,
.view-magazine:-webkit-full-screen .mag-track-copy strong {
  line-height: 1.22;
  margin: 1px 0 0;
}
.view-magazine:fullscreen .mag-track-copy small,
.view-magazine:-webkit-full-screen .mag-track-copy small {
  line-height: 1.22;
  margin-top: 2px;
}

/* ---------- Issue Details modal ----------
   Triggered by the "View Details" button on the home Buy Issue card. */
.details-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.details-modal.open { display: flex; animation: detailsFade 0.22s ease both; }
@keyframes detailsFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.details-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 28, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.details-modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px 32px 28px;
  border-radius: 20px;
  background: var(--panel-strong, rgba(255,255,255,0.98));
  color: var(--navy, #1a3a6b);
  border: 1px solid rgba(218,198,162,0.55);
  box-shadow: 0 30px 70px rgba(8, 22, 28, 0.5);
  animation: detailsPanelIn 0.28s cubic-bezier(0.16,0.84,0.44,1) both;
}
@keyframes detailsPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
body.dark-theme .details-modal-panel {
  background: linear-gradient(180deg, rgba(11,40,42,0.96), rgba(8,28,30,0.98));
  color: var(--text-soft, #e8eef0);
  border-color: rgba(218,198,162,0.32);
}
.details-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(218,198,162,0.55);
  background: rgba(255,255,255,0.7);
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.18s ease, background 0.18s ease;
}
.details-modal-close:hover { transform: scale(1.06); background: var(--gold, #b0670f); color: #fff; }
body.dark-theme .details-modal-close { background: rgba(255,255,255,0.08); color: var(--text-soft, #e8eef0); }
.details-modal-panel .eyebrow {
  color: var(--gold, #b0670f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.details-modal-panel h2 {
  margin: 8px 0 4px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}
.details-modal-sub {
  margin: 0 0 8px;
  font-size: 14px;
  opacity: 0.78;
}
.details-modal-divider {
  border: 0;
  border-top: 1px solid rgba(218,198,162,0.45);
  margin: 18px 0;
}
.details-modal-body {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.details-modal-body a {
  color: var(--gold, #b0670f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.details-modal-ok {
  margin-top: 12px;
  padding: 11px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e0a555, #b0670f);
  color: var(--navy-deep, #122a4a);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  box-shadow: 0 10px 22px rgba(176,103,15,0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.details-modal-ok:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(176,103,15,0.42); }

/* Product / offer block inside the Issue Details modal */
.details-modal-product {
  margin: 16px 0 4px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(247,221,160,0.22), rgba(215,166,75,0.10));
  border: 1px solid rgba(218,198,162,0.55);
}
body.dark-theme .details-modal-product {
  background: linear-gradient(180deg, rgba(247,221,160,0.10), rgba(215,166,75,0.05));
  border-color: rgba(218,198,162,0.32);
}
.details-modal-product-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.details-modal-product-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.details-modal-product-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold, #b0670f);
  letter-spacing: 0.01em;
}
.details-modal-product-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.92;
}
.details-modal-product-desc em {
  font-style: italic;
}

/* Bundle "includes" list inside the product card */
.details-modal-includes {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}
.details-modal-includes li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 3px;
}
.details-modal-includes li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold, #b0670f);
  font-size: 11px;
  line-height: 1.7;
}
/* Smaller footnote-style "claim your flyer" line */
.details-modal-product-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(218,198,162,0.45);
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
  opacity: 0.82;
}

/* ---------- Buy Issue trust strip ----------
   Two composite images: one for dark theme (white text/icons on dark bg),
   one for light theme (navy text/icons on white bg). CSS shows the one
   that matches the current theme. Lifts on hover. */
.buy-issue-trust {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(218,198,162,0.45);
  display: flex;
  justify-content: center;
}
.buy-issue-trust-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.buy-issue-trust-img:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}
/* Default (light theme): show light variant, hide dark */
.buy-issue-trust-dark { display: none; }
.buy-issue-trust-light { display: block; }
/* Dark theme: flip */
body.dark-theme .buy-issue-trust-light { display: none; }
body.dark-theme .buy-issue-trust-dark { display: block; }