/*
Theme Name: Seren Hayes — The Mercy Lines
Theme URI: https://serenhayes.com
Author: Seren Hayes / Brightwell Press
Author URI: https://serenhayes.com
Description: A book-selling author theme for the Seren Hayes brand. Deep-space dark design with Resonance-glow accents, 3D book showcase, page-flip free chapter reader, MailerLite lead-magnet capture, and Amazon affiliate buy links. Built for The Mercy Lines series.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seren-hayes
Tags: dark, one-column, custom-logo, custom-menu, featured-images
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --ink: #04080f;          /* deep space */
  --ink-2: #081020;        /* raised panel */
  --ink-3: #0d1830;        /* card */
  --line: rgba(101, 227, 214, 0.14);
  --cyan: #52e3d2;         /* Resonance glow */
  --cyan-soft: rgba(82, 227, 210, 0.55);
  --amber: #e8a860;        /* warm highlight */
  --bone: #ece6d9;         /* body text */
  --slate: #93a1b4;        /* muted */
  --danger: #e06767;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "EB Garamond", Georgia, serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --wrap: 1180px;
  --radius: 6px;
  --shadow-book: 18px 24px 50px rgba(0, 0, 0, 0.65);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--amber); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--bone);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--cyan-soft); }

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.section-lede { max-width: 46rem; color: var(--slate); font-size: 1.2rem; margin-bottom: 3rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1.05em 2.1em; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; transition: all .25s ease; line-height: 1;
}
.btn-primary { background: var(--cyan); color: #03231f; border-color: var(--cyan); }
.btn-primary:hover { background: transparent; color: var(--cyan); box-shadow: 0 0 28px rgba(82,227,210,.25); }
.btn-ghost { background: transparent; color: var(--bone); border-color: rgba(236,230,217,.3); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn-amber { background: var(--amber); color: #2a1a05; border-color: var(--amber); }
.btn-amber:hover { background: transparent; color: var(--amber); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  background: rgba(4, 8, 15, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.site-brand { display: flex; flex-direction: column; line-height: 1; }
.site-brand a { color: var(--bone); }
.site-brand .brand-name { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.12em; }
.site-brand .brand-tag { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); margin-top: 4px; }
.custom-logo { max-height: 48px; width: auto; }

.site-nav ul { list-style: none; display: flex; gap: 2.2rem; margin: 0; padding: 0; }
.site-nav a { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); }
.site-nav a:hover { color: var(--cyan); }
.nav-toggle { display: none; background: none; border: none; color: var(--bone); font-size: 1.6rem; cursor: pointer; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav { position: fixed; top: 76px; right: 0; left: 0; background: var(--ink-2); border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .3s ease; }
  .site-nav.open { transform: translateY(0); }
  .site-nav ul { flex-direction: column; gap: 0; padding: 1rem 2rem 2rem; }
  .site-nav li { border-bottom: 1px solid rgba(255,255,255,0.04); }
  .site-nav a { display: block; padding: 1rem 0; }
}

/* ============================================================
   HERO — vitals waveform signature
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 140px 0 90px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 75% 18%, rgba(82,227,210,0.07), transparent 60%),
    radial-gradient(ellipse 60% 45% at 15% 85%, rgba(232,168,96,0.05), transparent 60%),
    var(--ink);
}
.hero-stars { position: absolute; inset: 0; pointer-events: none; opacity: .7; }
#sh-ecg { position: absolute; left: 0; right: 0; bottom: 14%; width: 100%; height: 120px; pointer-events: none; opacity: .85; }

.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; position: relative; z-index: 2; }
.hero-title em { font-style: normal; color: var(--cyan); }
.hero-sub { font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--slate); max-width: 34rem; margin: 1.4rem 0 2.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-meta { margin-top: 2.6rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); display: flex; gap: 2rem; flex-wrap: wrap; }
.hero-meta strong { color: var(--amber); font-weight: 400; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-sub, .hero-ctas, .hero-meta { margin-left: auto; margin-right: auto; justify-content: center; }
  .hero-book { margin: 0 auto; }
}

/* ============================================================
   3D BOOK (Odrin-style cuboid with thickness)
   ============================================================ */
.book3d-scene { perspective: 1400px; width: 260px; }
.book3d { position: relative; width: 260px; height: 390px; transform-style: preserve-3d; transform: rotateY(-24deg); transition: transform .6s cubic-bezier(.2,.8,.25,1); }
.book3d-scene:hover .book3d { transform: rotateY(-8deg); }
.book3d .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 2px 6px 6px 2px; }
.book3d .cover {
  background: linear-gradient(160deg, #0e1c33 0%, #071120 55%, #04101c 100%);
  border: 1px solid rgba(82,227,210,.25);
  box-shadow: var(--shadow-book), inset 0 0 60px rgba(82,227,210,.06);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.6rem 1.3rem;
}
.book3d .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book3d .spine {
  width: 34px; height: 100%; left: -34px; inset: auto;
  position: absolute; top: 0;
  transform: rotateY(-90deg); transform-origin: right center;
  background: linear-gradient(#0a1626, #050d18);
  border: 1px solid rgba(82,227,210,.18);
  border-radius: 3px 0 0 3px;
}
.book3d .pages-edge {
  position: absolute; top: 4px; bottom: 4px; right: -12px; width: 12px;
  background: repeating-linear-gradient(to bottom, #d9d2c2 0 2px, #b8b1a2 2px 3px);
  transform: rotateY(90deg); transform-origin: left center;
  border-radius: 0 2px 2px 0;
}
/* generated-cover typography (used when no cover image) */
.gen-cover .gc-series { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); }
.gen-cover .gc-title { font-family: var(--font-display); font-size: 2rem; letter-spacing: .06em; line-height: 1.05; color: var(--bone); }
.gen-cover .gc-author { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--amber); }
.gen-cover .gc-pulse { height: 26px; margin: .8rem 0; opacity: .9; }

/* ============================================================
   BOOKS GRID
   ============================================================ */
.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.2rem; }
.book-card {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem 1.8rem; display: flex; gap: 1.6rem;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.book-card:hover { transform: translateY(-6px); border-color: rgba(82,227,210,.4); box-shadow: 0 22px 50px rgba(0,0,0,.5); }
.book-card .mini-scene { perspective: 900px; flex: 0 0 auto; }
.book-card .mini3d { width: 118px; height: 176px; position: relative; transform-style: preserve-3d; transform: rotateY(-22deg); transition: transform .45s ease; }
.book-card:hover .mini3d { transform: rotateY(-6deg); }
.book-card .mini3d .cover { padding: .8rem .7rem; border-radius: 2px 4px 4px 2px; }
.book-card .mini3d .spine { width: 16px; left: -16px; }
.book-card .mini3d .pages-edge { right: -7px; width: 7px; }
.book-card .gc-title { font-size: .95rem; }
.book-card .gc-series { font-size: .42rem; }
.book-card .gc-author { font-size: .42rem; }
.book-card .gc-pulse { height: 12px; margin: .35rem 0; }

.book-info { min-width: 0; }
.book-no { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); }
.book-info h3 { margin: .35rem 0 .4rem; }
.book-info h3 a { color: var(--bone); } .book-info h3 a:hover { color: var(--cyan); }
.book-tagline { color: var(--slate); font-size: 1.02rem; font-style: italic; margin: 0 0 1.1rem; }
.book-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.book-actions .btn { padding: .75em 1.3em; font-size: .68rem; }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .24em; text-transform: uppercase; padding: .5em 1em;
  border: 1px solid rgba(232,168,96,.45); color: var(--amber); border-radius: 2px;
}

/* ============================================================
   FLIPBOOK READER
   ============================================================ */
.reader-cta {
  display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(82,227,210,.06), transparent 70%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 800px) { .reader-cta { grid-template-columns: 1fr; text-align: center; } .reader-cta .btn { margin: 0 auto; } }

.flip-modal {
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 5, 10, 0.94); backdrop-filter: blur(6px);
  padding: 1rem;
}
.flip-modal.open { display: flex; }
.flip-shell { width: 100%; max-width: 1040px; }
.flip-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.flip-topbar .flip-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); }
.flip-close { background: none; border: 1px solid rgba(236,230,217,.3); color: var(--bone); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; padding: .6em 1.2em; cursor: pointer; border-radius: 3px; }
.flip-close:hover { border-color: var(--danger); color: var(--danger); }

.flipbook-viewport { display: flex; justify-content: center; }
.flipbook { position: relative; transform-style: preserve-3d; perspective: 2400px; }
.flip-leaf {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  transform-style: preserve-3d; transform-origin: left center;
  transition: transform .85s cubic-bezier(.35,.1,.2,1);
  cursor: pointer;
}
.flipbook.single .flip-leaf { width: 100%; right: 0; }
.flip-leaf.flipped { transform: rotateY(-180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #f2ecdd;
  color: #241f16;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(120, 100, 60, 0.14);
  border-radius: 2px;
}
.flip-face.back { transform: rotateY(180deg); }
.flip-face.recto { border-radius: 0 4px 4px 0; box-shadow: inset 24px 0 34px -24px rgba(90,70,40,.5); }
.flip-face.verso { border-radius: 4px 0 0 4px; box-shadow: inset -24px 0 34px -24px rgba(90,70,40,.5); }
.flip-face .page-body { font-family: var(--font-body); font-size: 15.5px; line-height: 1.62; height: calc(100% - 2rem); overflow: hidden; hyphens: auto; }
.flip-face .page-body p { margin: 0 0 .85em; text-align: justify; }
.flip-face .page-no { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; color: #8a8069; }
.flip-face.is-cover {
  background: linear-gradient(160deg, #10203a 0%, #081120 60%, #050e1a 100%);
  color: var(--bone); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem;
  border: 1px solid rgba(82,227,210,.3);
}
.flip-face.is-cover .fc-series { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .32em; text-transform: uppercase; color: var(--cyan); }
.flip-face.is-cover .fc-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .06em; }
.flip-face.is-cover .fc-hint { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); margin-top: 1.5rem; }
.flip-face.is-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2rem; }
.flip-face.is-end .btn { font-size: .7rem; }

.flip-controls { display: flex; justify-content: center; align-items: center; gap: 1.6rem; margin-top: 1.2rem; }
.flip-controls button { background: none; border: 1px solid rgba(236,230,217,.28); color: var(--bone); width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; transition: all .2s; }
.flip-controls button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.flip-controls button:disabled { opacity: .3; cursor: default; }
.flip-progress { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; color: var(--slate); min-width: 90px; text-align: center; }

/* ============================================================
   RELEASE ALERTS BAND
   ============================================================ */
.alerts-band {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  background:
    radial-gradient(ellipse 70% 120% at 100% 50%, rgba(82,227,210,.08), transparent 65%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(82,227,210,.22); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.2rem);
}
@media (max-width: 840px) { .alerts-band { grid-template-columns: 1fr; text-align: center; } .alerts-band .ml-form-slot { margin-left: auto; margin-right: auto; } }

/* ============================================================
   LEAD MAGNET / MAILERLITE
   ============================================================ */
.magnet {
  background:
    radial-gradient(ellipse 70% 90% at 8% 50%, rgba(232,168,96,.07), transparent 65%),
    radial-gradient(ellipse 60% 80% at 95% 20%, rgba(82,227,210,.06), transparent 60%),
    var(--ink-2);
}
.magnet-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 880px) { .magnet-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* dossier-style artifact for the lead magnet */
.dossier {
  width: 280px; padding: 1.8rem 1.5rem; position: relative;
  background: linear-gradient(165deg, #0f1d35, #071120);
  border: 1px solid rgba(82,227,210,.35); border-radius: 4px;
  box-shadow: var(--shadow-book), 0 0 60px rgba(82,227,210,.08);
  transform: rotate(-2.5deg);
  font-family: var(--font-mono);
}
.dossier::before {
  content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(82,227,210,.2); border-radius: 2px; pointer-events: none;
}
.dossier .d-stamp {
  position: absolute; top: 16px; right: -10px; transform: rotate(8deg);
  border: 2px solid var(--amber); color: var(--amber);
  font-size: .55rem; letter-spacing: .3em; text-transform: uppercase;
  padding: .45em .9em; border-radius: 2px; background: rgba(4,8,15,.7);
}
.dossier .d-kicker { font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
.dossier .d-title { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: .05em; line-height: 1.1; color: var(--bone); margin-bottom: .8rem; }
.dossier .d-lines { margin: 1.2rem 0 0; padding: 0; list-style: none; font-size: .62rem; letter-spacing: .12em; color: var(--slate); }
.dossier .d-lines li { padding: .5em 0; border-top: 1px solid rgba(147,161,180,.15); display: flex; gap: .6em; }
.dossier .d-lines li::before { content: "✦"; color: var(--amber); }
.dossier .d-pulse { height: 30px; margin-top: 1.1rem; opacity: .9; }

.magnet-copy h2 em { font-style: normal; color: var(--amber); }
.magnet-copy .free-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); }

.ml-form-slot { margin-top: 2rem; max-width: 520px; }
@media (max-width: 880px) { .ml-form-slot { margin-left: auto; margin-right: auto; } }
.sh-fallback-form { display: flex; gap: .7rem; flex-wrap: wrap; }
.sh-fallback-form input[type="email"] {
  flex: 1 1 240px; background: rgba(4,8,15,.7); border: 1px solid rgba(147,161,180,.35);
  color: var(--bone); font-family: var(--font-body); font-size: 1.05rem;
  padding: .95em 1.2em; border-radius: 3px;
}
.sh-fallback-form input[type="email"]:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(82,227,210,.15); }
.form-note { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; color: var(--slate); margin-top: 1rem; }

/* MailerLite embed harmonizer */
.ml-form-slot .ml-embedded, .ml-form-slot .ml-form-embedContainer { font-family: var(--font-body) !important; }

/* ============================================================
   LEAD MAGNET POPUP
   ============================================================ */
.magnet-popup {
  position: fixed; inset: 0; z-index: 480; display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 5, 10, 0.9); backdrop-filter: blur(6px);
  padding: 1.2rem;
}
.magnet-popup.open { display: flex; }
.popup-card {
  position: relative; width: 100%; max-width: 560px;
  background: linear-gradient(165deg, #101f38, #071120);
  border: 1px solid rgba(232, 168, 96, 0.5); border-radius: 6px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(232,168,96,.1);
  animation: popup-in .45s cubic-bezier(.2,.9,.3,1.1);
}
.popup-card::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px dashed rgba(232,168,96,.28); border-radius: 3px;
}
@keyframes popup-in { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }
.popup-card .d-stamp { top: 20px; right: 20px; position: absolute; transform: rotate(6deg);
  border: 2px solid var(--amber); color: var(--amber); font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; padding: .45em .9em;
  border-radius: 2px; background: rgba(4,8,15,.7); }
.popup-card .d-kicker { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
.popup-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: .04em; margin: 0 0 .6rem; max-width: 22ch; }
.popup-copy { color: var(--slate); font-size: 1.08rem; margin: 0; }
.popup-close {
  position: absolute; top: -14px; left: -14px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid rgba(236,230,217,.35);
  background: var(--ink); color: var(--bone); font-size: .95rem; cursor: pointer;
  transition: all .2s ease; z-index: 2;
}
.popup-close:hover { border-color: var(--danger); color: var(--danger); }
@media (max-width: 560px) {
  .popup-card .d-stamp { position: static; display: inline-block; margin-bottom: 1rem; transform: rotate(-2deg); }
}

/* Real artwork: hero mockup image */
.hero-bookimg {
  width: min(440px, 82vw); height: auto; display: block;
  border-radius: 12px; border: 1px solid rgba(82,227,210,.22);
  box-shadow: 0 34px 80px rgba(0,0,0,.65), 0 0 70px rgba(82,227,210,.12);
}

/* Real artwork: Casefile cover in the magnet section */
.dossier-cover { position: relative; width: min(300px, 76vw); margin: 0; transform: rotate(-2.5deg); }
.dossier-cover img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  border: 1px solid rgba(82,227,210,.35);
  box-shadow: var(--shadow-book), 0 0 60px rgba(82,227,210,.1);
}
.dossier-cover .d-stamp {
  position: absolute; top: 14px; right: -12px; transform: rotate(8deg);
  border: 2px solid var(--amber); color: var(--amber); font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .3em; text-transform: uppercase;
  padding: .45em .9em; border-radius: 2px; background: rgba(4,8,15,.82);
}

/* Popup with cover image */
.popup-body { display: flex; gap: 1.6rem; align-items: flex-start; }
.popup-cover {
  flex: 0 0 148px; width: 148px; height: auto; border-radius: 4px;
  border: 1px solid rgba(82,227,210,.35);
  box-shadow: 10px 14px 34px rgba(0,0,0,.6);
  transform: rotate(-2deg);
}
.popup-text { min-width: 0; }
@media (max-width: 560px) {
  .popup-body { flex-direction: column; align-items: center; text-align: center; }
  .popup-cover { flex-basis: auto; width: 128px; }
}

/* Flipbook image cover */
.flip-face.is-cover.has-img { padding: 0; border: none; }
.fc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fc-overlay {
  position: absolute; bottom: .9rem; left: 0; right: 0; z-index: 2; text-align: center;
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
.about-photo { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-book); }
.about-photo /* Author brand mark (pen-name friendly: no photo needed) */
.brand-mark {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 70% 15%, rgba(82,227,210,.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 90%, rgba(232,168,96,.08), transparent 65%),
    linear-gradient(170deg, #0b1830, #050b16);
  border: 1px solid rgba(82,227,210,.22);
  box-shadow: inset 0 0 80px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
}
.brand-mark::before {
  content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(236,230,217,.14);
  border-radius: 5px; pointer-events: none;
}
.bm-monogram {
  font-family: var(--font-display); font-size: clamp(5rem, 12vw, 8rem); line-height: 1;
  color: var(--cyan); text-shadow: 0 0 30px rgba(82,227,210,.55), 0 0 80px rgba(82,227,210,.25);
}
.bm-ecg { width: 62%; height: 26px; color: var(--cyan); opacity: .75; filter: drop-shadow(0 0 6px rgba(82,227,210,.6)); }
.bm-label {
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--bone); padding-left: .34em;
}
.bm-sub {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--amber); padding-left: .32em;
}

.photo-fallback {
  aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(82,227,210,.12), transparent 60%), var(--ink-3);
  font-family: var(--font-display); font-size: 5rem; color: rgba(82,227,210,.5);
}
.about-copy p { color: var(--slate); font-size: 1.18rem; }
.about-copy p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3.2em; float: left; line-height: .8; margin: .05em .12em 0 0; color: var(--cyan); }
.socials { display: flex; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.socials a { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid transparent; }
.socials a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2.5rem; background: #030609; }
.footer-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.footer-brand .brand-name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .1em; }
.footer-brand .brand-tag { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); }
.footer-legal { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--slate); max-width: 60ch; line-height: 1.9; }
.footer-legal .disclosure { display: block; margin-top: .8em; color: rgba(147,161,180,.75); }

/* ============================================================
   INNER PAGES / POSTS / SINGLE BOOK
   ============================================================ */
.page-hero { padding: 170px 0 70px; border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 60% at 70% 0%, rgba(82,227,210,.06), transparent 60%), var(--ink); }
.entry-content { max-width: 760px; margin: 0 auto; padding: 4rem 0 6rem; }
.entry-content p { margin: 0 0 1.3em; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content blockquote { border-left: 2px solid var(--amber); margin: 2em 0; padding: .2em 0 .2em 1.4em; color: var(--slate); font-style: italic; }
.entry-content img { border-radius: var(--radius); border: 1px solid var(--line); }

.single-book-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; padding: 4rem 0 6rem; }
.single-book-grid .entry-content { position: relative; z-index: 1; }
.single-book-cover { position: sticky; top: 110px; }
@media (max-width: 880px) {
  .single-book-grid { grid-template-columns: 1fr; justify-items: center; }
  .single-book-cover { position: static; display: flex; flex-direction: column; align-items: center; }
}

.post-list { display: grid; gap: 1.5rem; padding: 4rem 0 6rem; max-width: 760px; margin: 0 auto; }
.post-list article { border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; background: var(--ink-2); }
.post-list h2 { font-size: 1.8rem; } .post-list h2 a { color: var(--bone); } .post-list h2 a:hover { color: var(--cyan); }
.post-meta { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* WP core niceties */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.alignwide { max-width: var(--wrap); } .alignfull { max-width: 100%; }


/* ==========================================================================
   Mobile popup accessibility fix - added 29 July 2026
   The sign-up overlay was taller than a phone screen with no way to scroll,
   which pushed the close button off the top of the screen and left mobile
   visitors with no way out. These rules let the overlay scroll, and keep the
   close button on screen and inside the card on small screens.
   ========================================================================== */
#sh-magnet-popup.magnet-popup,
#sh-flip-modal.flip-modal {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 1.5rem 1.2rem 2.5rem !important;
}
#sh-magnet-popup .popup-card,
#sh-flip-modal .flip-shell {
  margin: auto !important;
}
@media (max-width: 640px) {
  #sh-magnet-popup .popup-card { padding-top: 3.6rem !important; }
  #sh-magnet-popup .popup-close {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.05rem !important;
  }
  #sh-magnet-popup .popup-card::before { inset: 6px !important; }
}