/*
Theme Name: Quo Vadis Medicine
Theme URI: https://quo.local
Author: Quo Vadis Medicine
Description: Minimalistyczna, ciemna strona sprzedażowa książki „Quo Vadis Medicine" dr. Huberta Czerniaka. Wszystkie sekcje edytowalne przez ACF.
Version: 1.25.3
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: quo-vadis-medicine
*/

/* ==========================================================================
   Fonts — self-hosted (no external requests, RODO-clean). Variable woff2:
   one file per family covers every weight. Same family name + differing
   font-style so `font-style: italic` resolves to the italic file.
   ========================================================================== */
@font-face {
  font-family: 'Zodiak'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/Zodiak-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Zodiak'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/Zodiak-VariableItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('assets/fonts/PlusJakartaSans-VariableItalic.woff2') format('woff2');
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --qv-bg: #0c0b0a;
  --qv-bg-raised: #141210;
  --qv-bg-card: #100f0d;
  --qv-ink: #efe7d8;
  --qv-ink-strong: #f4ecdd;
  --qv-ink-muted: #cfc6b5;
  --qv-ink-soft: #bcb3a3;
  --qv-ink-faint: #8a8272;
  --qv-ink-ghost: #80796b;
  --qv-gold: #bd9a5c;
  --qv-gold-bright: #d8b878;
  --qv-gold-pale: #9c8150;
  --qv-gold-line: rgba(189, 154, 92, 0.16);
  --qv-gold-line-soft: rgba(189, 154, 92, 0.1);
  /* Metallic-gold button surface — warm highlight to deep amber, reads as
     real gold rather than flat yellow, with dark ink for strong contrast. */
  --qv-gold-btn: linear-gradient(160deg, #e8ca82 0%, #d0ac64 100%);
  --qv-btn-ink: #0a0a0a;
  --qv-font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --qv-font-label: 'Zodiak', Georgia, serif;
  --qv-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --qv-section-pad: clamp(72px, 11vw, 128px);
  --qv-container: 1160px;
  --qv-radius: 4px;
  --qv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.quo-vadis-medicine {
  margin: 0;
  background: var(--qv-bg);
  color: var(--qv-ink);
  font-family: var(--qv-font-body);
  font-weight: 400;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.qv-page a { color: var(--qv-gold); text-decoration: none; }
.qv-page a:hover { color: var(--qv-gold-bright); }
.qv-page ::selection { background: var(--qv-gold); color: var(--qv-bg); }
.qv-page img { max-width: 100%; height: auto; display: block; }
.qv-page :focus-visible { outline: 2px solid var(--qv-gold); outline-offset: 3px; }
.qv-skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 100;
  padding: 12px 16px; border-radius: var(--qv-radius);
  background: var(--qv-ink-strong); color: var(--qv-bg) !important;
  font-size: 14px; font-weight: 700;
}
.qv-skip-link:focus { top: 16px; }

@keyframes qv-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qv-photo-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes qv-glow-drift { 0%, 100% { transform: translateX(-50%) translate(-2%, -1%) scale(1); } 50% { transform: translateX(-50%) translate(2%, 1%) scale(1.04); } }
@keyframes qv-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.qv-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--qv-ease), transform 0.9s var(--qv-ease); }
.qv-reveal.is-visible { opacity: 1; transform: translateY(0); }
.qv-reveal--delay-1.is-visible { transition-delay: 0.1s; }
.qv-reveal--delay-2.is-visible { transition-delay: 0.2s; }

/* ==========================================================================
   Layout backdrop
   ========================================================================== */
.qv-page { background: transparent; position: relative; }
.qv-backdrop { position: fixed; inset: 0; background: var(--qv-bg); z-index: 0; }
.qv-backdrop::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 28%, rgba(206, 156, 86, 0.06), rgba(12, 11, 10, 0) 68%);
  pointer-events: none;
}
.qv-content { position: relative; z-index: 1; }
/* Horizontal longhands only — a `padding` shorthand here would silently reset
   the vertical padding of elements that also carry .qv-container (e.g. the
   hero grid), since this rule can sit later in the cascade. */
.qv-container { max-width: var(--qv-container); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.qv-section { position: relative; overflow: hidden; border-top: 1px solid var(--qv-gold-line-soft); scroll-margin-top: 88px; }
.qv-section:first-of-type { border-top: none; }
.qv-eyebrow { color: var(--qv-gold-pale); letter-spacing: 0.3em; font-size: 12px; text-transform: uppercase; margin-bottom: 22px; font-weight: 400; }
.qv-accent { font-style: italic; font-weight: 500; color: var(--qv-gold); }
.qv-hero__title .qv-accent { font-style: normal; }

/* Dead simple: solid gold fill, black label, and ZERO overlay layers that could
   ever sit over the text. Hover only brightens the fill (black stays black) and
   shifts the outline button's border/tint — the label is never touched. */
.qv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--qv-gold-btn);
  padding: 17px 38px; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
  font-family: var(--qv-font-body); font-weight: 600;
  border: 1px solid rgba(162, 129, 74, 0.65); border-radius: var(--qv-radius);
  box-shadow: 0 10px 28px rgba(189, 154, 92, 0.22);
  white-space: nowrap; cursor: pointer;
  transition: filter 0.25s ease, border-color 0.25s ease;
}
.qv-btn:not(.qv-btn--ghost):hover,
.qv-btn:not(.qv-btn--ghost):focus-visible {
  filter: brightness(1.14);
  border-color: rgba(232, 202, 130, 0.9);
}
.qv-btn--ghost { background: transparent; border-color: rgba(189, 154, 92, 0.5); box-shadow: none; font-weight: 500; }
.qv-btn--ghost:hover,
.qv-btn--ghost:focus-visible { border-color: rgba(189, 154, 92, 0.85); background-color: rgba(189, 154, 92, 0.1); }
.qv-btn--sm { padding: 12px 26px; font-size: 13px; }

/* Label colour. The explicit interactive-state selectors are needed because
   the global `.qv-page a:hover` rule is otherwise more specific for the
   anchor's direct text node. Primary = black; secondary = gold. */
.qv-page .qv-btn,
.qv-page .qv-btn span,
.qv-page .qv-btn:not(.qv-btn--ghost):hover,
.qv-page .qv-btn:not(.qv-btn--ghost):hover span,
.qv-page .qv-btn:not(.qv-btn--ghost):focus-visible,
.qv-page .qv-btn:not(.qv-btn--ghost):focus-visible span { color: var(--qv-btn-ink); }
.qv-page .qv-btn--ghost,
.qv-page .qv-btn--ghost span { color: var(--qv-gold-bright); }

/* ==========================================================================
   Nav
   ========================================================================== */
.qv-nav { position: sticky; top: 0; z-index: 30; background: rgba(12, 11, 10, 0.78); backdrop-filter: blur(10px); border-bottom: 1px solid var(--qv-gold-line); }
.qv-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
/* Brand is now a link home — prefix with .qv-page so it out-specifies the
   global `.qv-page a` gold colour (same rule that bit the buttons). */
.qv-page .qv-nav__brand { font-family: var(--qv-font-label); font-weight: 600; font-size: 17px; letter-spacing: 0.1em; color: var(--qv-ink-strong); white-space: nowrap; transition: opacity 0.25s; }
.qv-page .qv-nav__brand:hover { color: var(--qv-ink-strong); opacity: 0.82; }
.qv-nav__brand span { color: var(--qv-gold); }
.qv-nav__links { display: flex; align-items: center; gap: 32px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.qv-nav__links a { color: var(--qv-ink-soft); }
.qv-nav__links a:hover { color: var(--qv-gold-bright); }
.qv-nav__toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.qv-hero { padding-top: 8px; }
.qv-hero__glow { position: absolute; top: -6%; left: 50%; width: 100vw; height: 110%; background: radial-gradient(ellipse 40% 44% at 60% 40%, rgba(247, 231, 205, 0.22), rgba(206, 156, 86, 0.14) 34%, rgba(12, 11, 10, 0) 72%); animation: qv-glow-drift 22s ease-in-out infinite; pointer-events: none; }
/* Hero fits the viewport (minus the sticky nav) so it never forces scrolling,
   capped so it doesn't get cavernous on very tall monitors. svh keeps mobile
   browser chrome from pushing it past the visible area; vh is the fallback. */
.qv-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.06fr; align-items: center; gap: 48px; min-height: min(760px, calc(100vh - 66px)); min-height: min(760px, calc(100svh - 66px)); padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: clamp(44px, 5vw, 66px); }
.qv-hero__text { align-self: center; }
/* Editorial premiere kicker — small brass diamond + Zodiak italic, echoing the
   book's literary voice rather than a techy status pill. */
.qv-hero__badge { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.qv-hero__badge-mark { flex: none; width: 6px; height: 6px; background: var(--qv-gold); transform: rotate(45deg); box-shadow: 0 0 12px rgba(216, 184, 120, 0.45); }
.qv-hero__badge-text { font-family: var(--qv-font-display); font-style: italic; font-weight: 500; font-size: 18px; letter-spacing: 0.005em; color: var(--qv-gold-bright); }
.qv-hero__eyebrow { color: var(--qv-gold-pale); letter-spacing: 0.3em; font-size: 12px; text-transform: uppercase; margin-bottom: 24px; }
.qv-hero__title { font-family: var(--qv-font-display); font-weight: 600; font-size: clamp(42px, 5.6vw, 80px); line-height: 1.03; margin: 0 0 26px; letter-spacing: -0.01em; color: var(--qv-ink-strong); }
.qv-hero__desc { font-size: 18px; line-height: 1.75; color: var(--qv-ink-soft); max-width: 460px; margin: 0 0 36px; }
.qv-hero__actions { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.qv-hero__price { line-height: 1.35; }
.qv-hero__price-now { font-family: var(--qv-font-display); font-size: 22px; color: var(--qv-ink); }
.qv-hero__price-old { font-size: 14px; color: var(--qv-ink-ghost); text-decoration: line-through; font-family: var(--qv-font-body); }
.qv-hero__price-label { font-size: 11px; color: var(--qv-ink-faint); letter-spacing: 0.11em; text-transform: uppercase; margin-top: 2px; }
/* Hero visual: the two volumes, angled — the product leads the page. */
.qv-hero__covers { position: relative; width: 100%; aspect-ratio: 1.15; }
.qv-hero__covers-glow { position: absolute; inset: -8% -12%; background: radial-gradient(ellipse 46% 50% at 50% 50%, rgba(247, 231, 205, 0.16), rgba(206, 156, 86, 0.09) 42%, rgba(12, 11, 10, 0) 72%); pointer-events: none; }
.qv-hero__covers img { position: absolute; filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.6)); }
.qv-hero__cover-2 { top: 0; left: 2%; width: 76%; z-index: 1; animation: qv-cover-in-a 1s var(--qv-ease) 0.15s both; }
.qv-hero__cover-1 { bottom: 0; right: 2%; width: 82%; z-index: 2; animation: qv-cover-in-b 1s var(--qv-ease) 0s both; }
/* Rotation lives inside the keyframes — a plain qv-fade-up would overwrite
   `transform` at 100% and flatten the tilt. */
@keyframes qv-cover-in-a { from { opacity: 0; transform: rotate(-6deg) translateY(26px); } to { opacity: 1; transform: rotate(-6deg) translateY(0); } }
@keyframes qv-cover-in-b { from { opacity: 0; transform: rotate(4deg) translateY(26px); } to { opacity: 1; transform: rotate(4deg) translateY(0); } }
/* Ledge — full-width rule at the hero's bottom edge that the author leans on */
/* Scroll cue — a hairline track with a brass dot travelling down. The track +
   label carry the meaning on their own, so it still reads with motion disabled. */
.qv-hero__scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.qv-hero__scroll-label { font-family: var(--qv-font-body); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--qv-ink-faint); transition: color 0.3s; }
.qv-hero__scroll:hover .qv-hero__scroll-label { color: var(--qv-gold-bright); }
.qv-hero__scroll-arrow { width: 13px; height: 13px; border-right: 1.6px solid var(--qv-gold-bright); border-bottom: 1.6px solid var(--qv-gold-bright); animation: qv-scroll-bob 1.8s var(--qv-ease) infinite; }
@keyframes qv-scroll-bob { 0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: 0.45; } 50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; } }

.qv-hero__ledge {
  position: absolute; z-index: 3; bottom: 0; left: 0; right: 0;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(189, 154, 92, 0) 0%,
    rgba(189, 154, 92, 0.3) 22%,
    rgba(236, 202, 119, 0.75) 50%,
    rgba(189, 154, 92, 0.3) 78%,
    rgba(189, 154, 92, 0) 100%);
}

/* ==========================================================================
   O książce
   ========================================================================== */
.qv-book { padding: var(--qv-section-pad) 0; }
.qv-book__glow { position: absolute; top: 10%; left: 50%; width: 76vw; height: 78%; background: radial-gradient(ellipse 38% 46% at 50% 50%, rgba(206, 156, 86, 0.08), rgba(12, 11, 10, 0) 70%); pointer-events: none; }
/* Centred editorial block — the covers now lead the hero and close the CTA,
   so repeating them here made the page read as a duplicated section. */
.qv-book__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; }
.qv-book__title { font-family: var(--qv-font-display); font-weight: 600; font-size: clamp(28px, 3.1vw, 44px); margin: 0 0 26px; line-height: 1.14; color: var(--qv-ink-strong); }
.qv-book__desc { font-size: 18px; line-height: 1.8; color: var(--qv-ink-muted); margin: 0 0 36px; }
.qv-book__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--qv-gold-line); border: 1px solid var(--qv-gold-line); border-radius: 6px; overflow: hidden; max-width: 520px; margin: 0 auto; text-align: left; }
.qv-book__stat { background: var(--qv-bg-card); padding: 20px 22px; }
.qv-book__stat-label { font-family: var(--qv-font-display); font-size: 18px; color: var(--qv-ink-strong); }
.qv-book__stat-value { font-size: 13px; color: var(--qv-ink-faint); letter-spacing: 0.07em; margin-top: 4px; }
.qv-book__stat--total { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; }
.qv-book__stat--total .qv-book__stat-label,
.qv-book__stat--total .qv-book__stat-value { color: var(--qv-gold); }
.qv-book__stat--total .qv-book__stat-value { font-family: var(--qv-font-display); font-size: 24px; }

/* ==========================================================================
   O autorze
   ========================================================================== */
.qv-author { padding: var(--qv-section-pad) 0; }
.qv-author__grid { display: grid; grid-template-columns: 0.76fr 1.24fr; gap: 60px; align-items: start; }
.qv-author__side { position: sticky; top: 108px; display: flex; flex-direction: column; align-items: flex-start; }
/* Author portrait — moved here from the hero, which now leads with the books. */
.qv-author__portrait { position: relative; width: 100%; max-width: 300px; margin-bottom: 26px; }
.qv-author__portrait::before { content: ""; position: absolute; inset: -8% -10% -2%; background: radial-gradient(ellipse 50% 52% at 50% 56%, rgba(247, 231, 205, 0.13), rgba(206, 156, 86, 0.08) 44%, rgba(12, 11, 10, 0) 72%); pointer-events: none; }
.qv-author__portrait img { position: relative; z-index: 1; width: 100%; }
.qv-author__name { font-family: var(--qv-font-display); font-size: 32px; color: var(--qv-ink-strong); line-height: 1.12; margin: 0; }
.qv-author__meta { font-size: 14px; color: var(--qv-ink-faint); margin-top: 12px; }
.qv-author__rule { width: 52px; height: 2px; background: var(--qv-gold); margin-top: 26px; }
.qv-author__bio p { font-size: 17px; line-height: 1.85; color: var(--qv-ink-muted); font-weight: 400; margin: 0 0 20px; }
.qv-author__bio p:last-child { margin-bottom: 0; }
.qv-author__bio em, .qv-author__bio i { color: #e6dcc7; font-style: italic; font-family: var(--qv-font-display); }

/* ==========================================================================
   Fragment / PDF reader
   ========================================================================== */
.qv-fragment { padding: var(--qv-section-pad) 0; }
.qv-fragment__glow { position: absolute; bottom: -8%; left: 50%; width: 88vw; height: 84%; background: radial-gradient(ellipse 40% 48% at 50% 55%, rgba(206, 156, 86, 0.1), rgba(12, 11, 10, 0) 66%); pointer-events: none; }
/* Two columns via grid areas: heading (top-left) + CTA (bottom-left) flank the
   tall reader on the right, so the "Zamów" button is visible beside the book
   instead of buried below it. On mobile the areas restack head → reader → cta. */
.qv-fragment__grid {
  position: relative; z-index: 2; max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 22px 56px;
  grid-template-areas: "head reader" "cta reader";
}
.qv-fragment__head { grid-area: head; align-self: end; }
.qv-fragment__reader-col { grid-area: reader; }
.qv-fragment__cta { grid-area: cta; align-self: start; }
.qv-fragment__title { font-family: var(--qv-font-display); font-weight: 600; font-size: clamp(26px, 3.1vw, 42px); margin: 0 0 18px; color: var(--qv-ink-strong); }
.qv-fragment__lead { font-size: 16px; line-height: 1.7; color: var(--qv-ink-soft); margin: 0; max-width: 340px; }
.qv-fragment__quote { font-size: 21px; line-height: 1.9; color: var(--qv-ink-muted); font-style: italic; font-weight: 400; margin: 0; font-family: var(--qv-font-display); text-align: center; }

.qv-reader { max-width: 640px; margin: 0; text-align: left; }
.qv-reader__frame { position: relative; display: flex; justify-content: center; align-items: center; background: var(--qv-bg-raised); border: 1px solid var(--qv-gold-line); border-radius: 8px; padding: clamp(20px, 3.5vw, 44px) clamp(64px, 8vw, 84px); }
.qv-reader__pages { display: flex; justify-content: center; align-items: flex-start; min-height: 300px; width: 100%; }
.qv-reader__page { background: #f4ecdb; border-radius: 2px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); width: 100%; max-width: 500px; overflow: hidden; }
.qv-reader__page canvas { display: block; width: 100%; height: auto; }
.qv-reader__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 24px; }
.qv-reader__nav-btn { background: rgba(20, 18, 16, 0.55); border: 1px solid rgba(189, 154, 92, 0.45); color: var(--qv-gold); width: 46px; height: 46px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; transition: border-color 0.25s, color 0.25s, background 0.25s, opacity 0.25s; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qv-reader__nav-btn:hover:not(:disabled) { border-color: var(--qv-gold-bright); color: var(--qv-gold-bright); background: rgba(20, 18, 16, 0.85); }
.qv-reader__nav-btn:disabled { opacity: 0.28; cursor: default; }
/* Side-positioned arrows — vertically centered on the page, book-style */
.qv-reader__nav-btn--side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(20, 18, 16, 0.82); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.qv-reader__nav-btn--prev { left: clamp(11px, 1.6vw, 18px); }
.qv-reader__nav-btn--next { right: clamp(11px, 1.6vw, 18px); }
.qv-reader__counter { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qv-ink-faint); min-width: 120px; text-align: center; }
.qv-reader__status { text-align: center; padding: 60px 20px; color: var(--qv-ink-faint); font-size: 14px; letter-spacing: 0.04em; }
.qv-reader__caption { text-align: center; margin-top: 14px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qv-ink-faint); }

/* ==========================================================================
   Cena / CTA
   ========================================================================== */
.qv-cta { padding: calc(var(--qv-section-pad) * 1.15) 0; }
.qv-cta__glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: radial-gradient(ellipse 44% 50% at 50% 40%, rgba(247, 231, 205, 0.13), rgba(206, 156, 86, 0.08) 44%, rgba(12, 11, 10, 0) 74%); pointer-events: none; }
.qv-cta__grid { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 60px; align-items: center; }
.qv-cta__covers { position: relative; aspect-ratio: 1.2; }
.qv-cta__covers img { position: absolute; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55)); animation: qv-float-y 8s ease-in-out infinite; }
.qv-cta__cover-2 { top: 0; left: 0; width: 74%; z-index: 1; }
.qv-cta__cover-1 { bottom: 0; right: 0; width: 80%; z-index: 2; filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.65)) !important; animation-delay: 0.7s; }
.qv-cta__title { font-family: var(--qv-font-display); font-weight: 600; font-size: clamp(28px, 3.3vw, 42px); margin: 0 0 18px; color: var(--qv-ink-strong); line-height: 1.1; }
.qv-cta__title .qv-accent { font-size: 0.94em; }
.qv-cta__desc { font-size: 17px; color: var(--qv-ink-soft); margin: 0 0 32px; max-width: 440px; line-height: 1.7; }
.qv-cta__rule { width: 100%; height: 1px; background: var(--qv-gold-line); margin-bottom: 28px; }
.qv-cta__price-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.qv-cta__price-now { font-family: var(--qv-font-display); font-weight: 600; color: var(--qv-gold); font-size: clamp(46px, 6vw, 72px); line-height: 1; }
.qv-cta__price-old { font-family: var(--qv-font-display); font-size: 26px; color: var(--qv-ink-ghost); text-decoration: line-through; }
.qv-cta__price-save { font-size: 12px; color: var(--qv-gold-pale); letter-spacing: 0.09em; text-transform: uppercase; }
.qv-cta__price-label { font-size: 12px; color: var(--qv-ink-faint); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 34px; }
.qv-cta__fine { font-size: 12px; color: var(--qv-ink-ghost); margin-top: 20px; letter-spacing: 0.03em; }

/* ==========================================================================
   Footer / social
   ========================================================================== */
.qv-footer { border-top: 1px solid var(--qv-gold-line); }
.qv-footer__inner { padding: 56px 0 34px; text-align: center; }
.qv-footer__disclaimer { max-width: 1000px; margin: 0 auto 38px; padding: 16px 18px; border: 1px solid rgba(189, 154, 92, 0.2); border-radius: 3px; color: var(--qv-ink-muted); font-size: 13px; line-height: 1.65; white-space: pre-line; }
.qv-footer__label { color: var(--qv-gold-pale); letter-spacing: 0.26em; font-size: 12px; text-transform: uppercase; margin-bottom: 22px; }
.qv-footer__links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.qv-footer__links li { display: flex; max-width: 100%; margin: 0; }
.qv-footer__link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; max-width: 100%; border: 1px solid rgba(189, 154, 92, 0.3); color: var(--qv-ink-muted); padding: 10px 24px; font-size: 13px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; overflow-wrap: anywhere; border-radius: 3px; transition: border-color 0.3s, color 0.3s; }
.qv-footer__link:hover { border-color: var(--qv-gold-bright); color: var(--qv-gold-bright); }
.qv-footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(189, 154, 92, 0.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--qv-ink-ghost); font-size: 13px; letter-spacing: 0.03em; }
.qv-footer__mark { font-family: var(--qv-font-label); letter-spacing: 0.09em; color: var(--qv-ink-faint); }
.qv-footer__legal { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.qv-footer__legal a { color: var(--qv-ink-faint); }
.qv-footer__legal a:hover { color: var(--qv-gold-bright); }

/* Content styling for standalone pages rendered through index.php
   (privacy policy, etc.) — headings, lists and links inside the body copy. */
.qv-author__bio h1, .qv-author__bio h2, .qv-author__bio h3 { font-family: var(--qv-font-display); color: var(--qv-ink-strong); line-height: 1.2; margin: 1.8em 0 0.6em; }
.qv-author__bio h2 { font-size: clamp(22px, 2.4vw, 30px); }
.qv-author__bio h3 { font-size: clamp(18px, 1.9vw, 22px); color: var(--qv-ink); }
.qv-author__bio ul, .qv-author__bio ol { padding-left: 1.3em; margin: 0 0 20px; }
.qv-author__bio li { font-size: 17px; line-height: 1.8; color: var(--qv-ink-muted); margin-bottom: 8px; }
.qv-author__bio a { color: var(--qv-gold); text-decoration: underline; text-underline-offset: 2px; }
.qv-author__bio a:hover { color: var(--qv-gold-bright); }
.qv-author__bio strong { color: var(--qv-ink); font-weight: 600; }
/* Standalone page shell (privacy policy etc.) */
.qv-page-wrap { max-width: 760px; padding-top: 96px; padding-bottom: 100px; }
.qv-page-title { margin: 18px 0 8px; }
.qv-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qv-ink-faint); }
.qv-back:hover { color: var(--qv-gold-bright); }
.qv-back span { font-size: 15px; }
.qv-page-foot { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--qv-gold-line-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .qv-hero__grid { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; padding-bottom: 56px; gap: 20px; text-align: center; align-items: stretch; }
  .qv-hero__text { align-self: auto; padding-bottom: 0; }
  .qv-hero__scroll { display: none; }
  .qv-hero__eyebrow, .qv-hero__desc { margin-left: auto; margin-right: auto; }
  .qv-hero__desc { max-width: 540px; }
  .qv-hero__actions { justify-content: center; }
  .qv-hero__covers { order: -1; max-width: 400px; margin: 0 auto; }
  /* Author column stays vertical on mobile: portrait, then eyebrow/name/meta —
     a flex row here pushed the "AUTOR" eyebrow off to the side. */
  .qv-author__grid { grid-template-columns: 1fr; gap: 32px; }
  .qv-author__side { position: static; flex-direction: column; align-items: stretch; gap: 0; }
  /* Portrait fills the column width — big and symmetric, no side gaps. */
  .qv-author__portrait { width: 100%; max-width: 100%; margin: 0 0 26px; }
  .qv-author__rule { display: none; }
  .qv-cta__grid { grid-template-columns: 1fr; gap: 44px; }
  .qv-cta__covers { max-width: 360px; margin: 0 auto; width: 100%; order: -1; }
  /* Fragment stacks: heading → book → button (button after the book, as on desktop) */
  .qv-fragment__grid { grid-template-columns: 1fr; grid-template-areas: "head" "reader" "cta"; gap: 28px; text-align: center; justify-items: center; }
  .qv-fragment__head { align-self: auto; }
  .qv-fragment__cta { align-self: auto; }
  .qv-fragment__lead { max-width: 460px; }
  .qv-reader { margin: 0 auto; }
}

@media (max-width: 720px) {
  .qv-nav__links { display: none; }
  .qv-nav__row { padding: 14px 0; gap: 14px; }
  .qv-page .qv-nav__brand { font-size: 15px; }
  /* Keep the complete mobile hero inside the visible viewport. The artwork
     scales with the short viewport unit, so browser chrome and short phones
     cannot push the purchase action below the fold. */
  .qv-hero { min-height: calc(100vh - 66px); min-height: calc(100svh - 66px); padding-top: 0; }
  .qv-hero__grid {
    min-height: calc(100vh - 66px); min-height: calc(100svh - 66px);
    padding-top: clamp(12px, 2svh, 18px); padding-bottom: clamp(16px, 2.5svh, 24px);
    gap: clamp(10px, 1.5svh, 14px); align-content: center;
  }
  .qv-hero__glow { display: none; }
  .qv-hero__covers { width: min(72vw, 32svh, 270px); }
  .qv-hero__covers-glow { display: none; }
  .qv-hero__covers img { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)); }
  .qv-hero__badge { margin-bottom: 12px; }
  .qv-hero__badge-text { font-size: 16px; }
  .qv-hero__eyebrow { margin-bottom: 12px; }
  .qv-hero__title { font-size: clamp(36px, 10.5vw, 48px); margin-bottom: 16px; }
  .qv-hero__desc { font-size: 16px; line-height: 1.55; margin-bottom: 20px; }
  .qv-hero__actions { flex-direction: column; align-items: center; gap: 12px; }
  .qv-book__stats { grid-template-columns: 1fr; }
  /* Phones: keep a clear gutter so the arrows never crowd the page edge. */
  .qv-reader__frame { padding: clamp(16px, 4vw, 24px) clamp(52px, 13vw, 58px); }
  .qv-reader__nav-btn { width: 38px; height: 38px; font-size: 16px; }
  .qv-reader__nav-btn--prev { left: 8px; }
  .qv-reader__nav-btn--next { right: 8px; }
  .qv-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

@media (max-width: 480px) {
  .qv-container { padding-left: 18px; padding-right: 18px; }
  /* Full-width CTAs only for the in-content action buttons, never the nav pill */
  .qv-fragment__cta { width: 100%; }
  .qv-hero__actions .qv-btn,
  .qv-fragment .qv-btn,
  .qv-cta .qv-btn { width: 100%; justify-content: center; padding: 16px 22px; }
  .qv-page .qv-nav__brand { font-size: 13px; letter-spacing: 0.06em; }
  .qv-btn--sm { padding: 10px 18px; font-size: 12px; }
  .qv-hero__price { text-align: center; }
  .qv-cta__price-now { font-size: clamp(40px, 13vw, 54px); }
  .qv-cta__price-old { font-size: 22px; }
  .qv-footer__links { gap: 8px; }
  .qv-footer__link { padding: 9px 16px; font-size: 12px; }
  .qv-book__stat { padding: 18px 20px; }
}

@media (max-width: 720px) and (max-height: 740px) {
  .qv-hero__grid { padding-top: 8px; padding-bottom: 12px; gap: 8px; }
  .qv-hero__covers { width: min(68vw, 32svh, 220px); }
  .qv-hero__badge { display: none; }
  .qv-hero__eyebrow { margin-bottom: 8px; font-size: 10px; }
  .qv-hero__title { font-size: clamp(34px, 9.5vw, 42px); margin-bottom: 10px; }
  .qv-hero__desc { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
  .qv-hero__actions { gap: 8px; }
  .qv-hero__actions .qv-btn { padding-top: 14px; padding-bottom: 14px; }
}

@media (max-width: 360px) {
  .qv-nav__row { gap: 8px; }
  .qv-page .qv-nav__brand { font-size: 11px; letter-spacing: 0.04em; }
  .qv-nav .qv-btn--sm { padding-left: 14px; padding-right: 14px; font-size: 11px; }
  .qv-reader__frame { padding: 14px clamp(44px, 13vw, 50px); }
  .qv-reader__nav-btn { width: 34px; height: 34px; font-size: 15px; }
  .qv-reader__nav-btn--prev { left: 6px; }
  .qv-reader__nav-btn--next { right: 6px; }
}