:root {
  color-scheme: dark;
  --bg: #03070c;
  --panel: #08111c;
  --panel-2: #0d1925;
  --ink: #f2f7ff;
  --muted: #a9b8c8;
  --line: rgba(183, 207, 235, 0.16);
  --blue: #3f8eb8;
  --teal: #5fc4c5;
  --amber: #ffb35a;
  --amber-bright: #ffe0ad;
  --shadow: rgba(0, 0, 0, 0.5);
  --max: 1160px;
  --radius: 14px;
  /* Quiet, book-jacket display serif for headings — system stack only, no
     network fonts. Body copy stays on the existing sans for readability. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* Shared premium "slow-in, slow-out" easing — replaces default/linear
     easing on every hover + transition site-wide. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Cross-page navigation transition ────────────────────────────────
   Chrome/Edge only (View Transitions API). Other browsers navigate
   instantly — the web's default, which no visitor will question.
   Old page dissolves over 500ms. After a 180ms dark pause the new
   page rises over 650ms. Total ~1.3s — a deliberate cinematic beat,
   not a blink. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 500ms var(--ease-premium) both vt-fade-out;
}

::view-transition-new(root) {
  animation: 650ms var(--ease-premium) 180ms both vt-fade-in;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html {
  overflow-x: hidden;
}

/* These gradients paint onto the body's own (scrolling) background box, so
   — unlike the fixed viewport-pinned atmosphere layers below — they sit at
   fixed relative depths down the whole page. That matters for a long page:
   without this, "atmosphere" would only ever exist near the very top of
   whatever the visitor currently has scrolled to, and every section below
   the first screen would read as flat black. Positions are percentages of
   full page height, so each section passes near a different soft light. */
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(63, 142, 184, 0.13), transparent 38rem),
    radial-gradient(60rem 34rem at 88% 22%, rgba(63, 142, 184, 0.1), transparent 72%),
    radial-gradient(52rem 30rem at 4% 46%, rgba(255, 179, 90, 0.055), transparent 72%),
    radial-gradient(58rem 32rem at 92% 68%, rgba(95, 196, 197, 0.08), transparent 72%),
    radial-gradient(50rem 30rem at 8% 90%, rgba(63, 142, 184, 0.09), transparent 72%),
    linear-gradient(180deg, #06101b 0%, var(--bg) 34%, #020407 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

/* Layer 1 of the site-wide server-hall atmosphere: the structural grid
   (unchanged) plus a handful of very soft, very large "distant light"
   blooms and one vertical light-shaft hint — the kind of far-off glow you'd
   see between server racks. Everything here stays deliberately out of
   focus and low-opacity so it reads as depth, never decoration. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(rgba(95, 196, 197, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 196, 197, 0.03) 1px, transparent 1px),
    radial-gradient(46rem 30rem at 82% 8%, rgba(63, 142, 184, 0.16), transparent 70%),
    radial-gradient(38rem 26rem at 6% 78%, rgba(255, 179, 90, 0.07), transparent 72%),
    linear-gradient(180deg, transparent, rgba(95, 196, 197, 0.05) 45%, transparent 88%);
  background-size:
    48px 48px,
    48px 48px,
    140% 140%,
    140% 140%,
    3px 100%;
  background-position:
    0 0,
    0 0,
    0% 0%,
    0% 0%,
    31% 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 75%);
  animation: ambient-lights-drift 46s ease-in-out infinite;
}

/* Layer 2: slow-drifting dust/particle field plus a very soft breathing
   depth-haze, layered above the grid+lights, site-wide. Pure CSS: tiny
   radial-gradient dots nudged via background-position, and one large
   ultra-low-opacity fog blob whose opacity itself breathes over ~50s to
   suggest volumetric haze shifting in the dark, never wallpaper. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 224, 173, 0.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 62%, rgba(149, 214, 215, 0.28), transparent 60%),
    radial-gradient(1.8px 1.8px at 40% 82%, rgba(255, 179, 90, 0.22), transparent 60%),
    radial-gradient(1.3px 1.3px at 85% 22%, rgba(149, 214, 215, 0.22), transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 48%, rgba(255, 224, 173, 0.2), transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 12%, rgba(255, 224, 173, 0.18), transparent 60%),
    radial-gradient(1.1px 1.1px at 92% 46%, rgba(149, 214, 215, 0.2), transparent 60%),
    radial-gradient(1.4px 1.4px at 8% 62%, rgba(255, 179, 90, 0.16), transparent 60%),
    radial-gradient(1.3px 1.3px at 33% 30%, rgba(149, 214, 215, 0.16), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 88%, rgba(255, 224, 173, 0.16), transparent 60%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 82%);
  animation: ambient-particles-drift 140s ease-in-out infinite;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-140%);
  background: var(--ink);
  color: #08111c;
  padding: 10px 14px;
  border-radius: 6px;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 0 clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 7, 12, 0.82);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 18px var(--amber), 0 0 42px rgba(255, 179, 90, 0.58);
  /* The consciousness motif, quietly alive everywhere it appears: a slow
     ~13s breathing pulse, never a blink. */
  animation: brand-pulse 13s ease-in-out infinite;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  color: var(--muted);
  font-size: 0.92rem;
}

.site-nav a {
  text-decoration: none;
  transition: color 380ms var(--ease-premium);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

.hero,
.page-hero,
.section,
.site-footer {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 470px);
  align-items: center;
  gap: clamp(36px, 7vw, 96px);
  min-height: calc(100vh - 72px);
  padding: 58px 0 80px;
}

.page-hero {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: end;
  padding: 88px 0 96px;
  border-bottom: 1px solid var(--line);
}

.page-hero.compact {
  min-height: 320px;
}

.circuitry::after {
  content: "";
  position: absolute;
  inset: 12% 0 auto auto;
  width: min(520px, 48vw);
  height: 300px;
  pointer-events: none;
  opacity: 0.35;
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(95, 196, 197, 0.42) 20% 20.5%, transparent 20.5% 100%),
    linear-gradient(0deg, transparent 0 30%, rgba(95, 196, 197, 0.3) 30% 30.5%, transparent 30.5% 100%),
    linear-gradient(90deg, transparent 0 62%, rgba(255, 179, 90, 0.3) 62% 62.5%, transparent 62.5% 100%);
  filter: blur(0.2px);
}

.eyebrow,
.section-kicker {
  margin: 0 0 22px;
  color: var(--amber-bright);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.005em;
}

h1 {
  max-width: 780px;
  /* ~26% off the previous 5.75rem ceiling, per the brief's "cut oversized
     titles 20-30%" instruction — measured against the pre-pass value. */
  font-size: clamp(2.3rem, 5.4vw, 4.25rem);
  line-height: 1.08;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.22;
  font-weight: 500;
}

p {
  color: var(--muted);
  font-size: 1.02rem;
}

.hero-lede,
.page-hero p {
  max-width: 620px;
  margin: 26px 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.65;
}

/* Breathing room around every heading + kicker pairing, site-wide, so
   hierarchy comes from space rather than raw font size. */
.section-kicker + h2,
h2 + p,
.hero-copy h1 + .hero-lede {
  margin-top: 20px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Two-button hero layout: equal-grow so both read as a balanced, wider
   pair rather than shrink-wrapped labels — reads more premium at a glance. */
.button-row .button {
  flex: 1 1 200px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 30px rgba(0, 0, 0, 0.28);
  transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium),
    border-color 420ms var(--ease-premium), background 420ms var(--ease-premium);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 42px rgba(0, 0, 0, 0.38);
}

.store-card:hover {
  transform: translateY(-2px);
}

.button.primary {
  background: var(--ink);
  color: #06101b;
  border-color: var(--ink);
}

.button.primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 22px 46px rgba(255, 179, 90, 0.16), 0 22px 42px rgba(0, 0, 0, 0.38);
}

.button.secondary {
  background: rgba(95, 196, 197, 0.08);
  border-color: rgba(95, 196, 197, 0.36);
}

.button.secondary:hover {
  background: rgba(95, 196, 197, 0.14);
  border-color: rgba(95, 196, 197, 0.5);
}

.button.ghost {
  background: rgba(255, 255, 255, 0.03);
}

.button.ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 224, 173, 0.3);
}

.hero-book {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
}


/* Ghostlike server-room hint: very soft rack uprights + shelf lines behind
   the book, pushed dark and blurred so it reads as atmosphere, not decor. */
.hero-book::before {
  content: "";
  position: absolute;
  inset: 6% -14% 4%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(95, 196, 197, 0.12) 39px, transparent 40px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(95, 196, 197, 0.09) 47px, transparent 48px),
    linear-gradient(90deg, transparent 0 9%, rgba(95, 196, 197, 0.09) 9% 9.4%, transparent 9.4% 20%, rgba(95, 196, 197, 0.06) 20% 20.3%, transparent 20.3% 39%, rgba(242, 247, 255, 0.05) 39% 39.25%, transparent 39.25% 61%, rgba(95, 196, 197, 0.06) 61% 61.35%, transparent 61.35% 100%),
    radial-gradient(ellipse at 50% 42%, rgba(63, 142, 184, 0.16), transparent 62%);
  filter: blur(1.4px);
  mask-image: radial-gradient(ellipse at center, black 0 46%, transparent 72%);
}

.hero-book::after {
  content: "";
  position: absolute;
  inset: 18% 10% 18%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background: linear-gradient(90deg, transparent 0 48%, rgba(255, 224, 173, 0.42) 48% 48.25%, transparent 48.25% 100%);
}

.hero-book .book-stage,
.hero-book .consciousness-point {
  z-index: 1;
}
.consciousness-point {
  position: absolute;
  top: 24%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber-bright);
  box-shadow: 0 0 16px var(--amber), 0 0 56px rgba(255, 179, 90, 0.86);
  animation: pulse 3.8s ease-in-out infinite;
}

.book-stage {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 0.66;
  perspective: 1200px;
  transition: transform 900ms var(--ease-premium);
}

/* One soft light source that slowly orbits the book — a large, heavily
   blurred glow sitting behind the object, drifting position over ~24s.
   Subtle enough to almost not register consciously, but it keeps the
   book's rim-light and the floor pool below it shifting very gently. */
.book-stage::before {
  content: "";
  position: absolute;
  inset: -36% -30%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.6;
  background: radial-gradient(closest-side, rgba(255, 200, 130, 0.16), rgba(63, 142, 184, 0.1) 46%, transparent 72%);
  filter: blur(22px);
  animation: book-light-orbit 24s ease-in-out infinite;
}

/* Dark reflective "resting surface" — two stacked pools: a tighter, darker
   contact shadow right at the spine, plus the softer ambient bloom further
   out. Together they read as polished black glass under the book rather
   than a single flat blob. */
.book-stage::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -15%;
  height: 34%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(3, 5, 9, 0.7), transparent 68%),
    radial-gradient(ellipse at 50% 6%, rgba(63, 142, 184, 0.24), rgba(3, 7, 12, 0.5) 55%, transparent 78%);
  filter: blur(12px);
  animation: book-light-orbit 24s ease-in-out infinite reverse;
}

/* Hover previously added a scale() zoom here — removed entirely per the
   physical-presence fix: the book must never change size on hover. No
   replacement hover transform is added; the idle float is motion enough. */

.book-stage-small {
  width: min(100%, 300px);
  justify-self: center;
}

.book-object {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-9deg) rotateX(1.6deg);
  animation: idle-book 34s ease-in-out infinite;
}

/* A noticeably deeper turn than the shared default above, so the
   right-side page block reads as clear 3D depth rather than a flat poster.
   Scoped to the shared .book-premium treatment layer: matched by both
   .hero-book (the homepage hero wrapper) and .book-premium (the wrapper
   reused as-is on ailex-10.html), so every page gets the identical
   premium book presentation from one rule instead of a second copy. */
.hero-book .book-object,
.book-premium .book-object {
  transform: rotateY(-22deg) rotateX(4deg);
  animation: idle-book-hero 34s ease-in-out infinite;
}

.book-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(242, 247, 255, 0.22);
  background: #07111d;
  /* Layered shadow stack (near contact + far ambient + faint rim) so the
     cover reads as a lit, photographed object rather than a flat pasted
     image — matches the "should look photographed" brief note. */
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.5),
    0 32px 70px var(--shadow),
    0 0 80px rgba(63, 142, 184, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* One soft moving light: a low, slow gloss sweep across the cover. Kept
   subtle via low opacity + overlay blend so it registers as "alive" gloss
   rather than a conscious animation. */
.book-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.8;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 40%);
  background-size: 220% 220%;
  background-position: 12% 8%;
  mix-blend-mode: overlay;
  animation: book-gloss-drift 46s ease-in-out infinite;
}

/* Faint cool diagonal sheen suggesting the cover is catching a reflection
   of its dark surroundings — separate from the warm gloss sweep above so
   the two never fight; both stay under ~0.1 real opacity once blended. */
.book-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(115deg, transparent 32%, rgba(149, 214, 215, 0.1) 45%, transparent 58%);
  background-size: 260% 260%;
  background-position: 80% 20%;
  mix-blend-mode: overlay;
  animation: book-gloss-drift 58s ease-in-out infinite reverse;
}

.book-cover img.is-missing {
  display: none;
}

.cover-fallback {
  display: none;
  height: 100%;
  padding: 34px 28px;
  place-content: center;
  gap: 18px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(63, 142, 184, 0.14), transparent 46%),
    #07111d;
}

.book-cover img.is-missing + .cover-fallback {
  display: grid;
}

.cover-fallback span,
.cover-fallback small {
  color: var(--muted);
}

.cover-fallback strong {
  color: var(--ink);
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  line-height: 0.95;
}

.book-spine {
  position: absolute;
  top: 1.4%;
  right: -26px;
  width: 28px;
  height: 97.2%;
  transform: rotateY(78deg);
  transform-origin: left;
  background: linear-gradient(90deg, #05080e, #122234);
  border: 1px solid rgba(242, 247, 255, 0.12);
}

/* --- Shared "premium book" physical-presence refinements ---------------
   Everything below is scoped under the shared .book-premium treatment
   layer (matched by both .hero-book on the homepage and the .book-premium
   wrapper reused on ailex-10.html) so the base .book-stage/.book-object/
   .book-cover classes stay as plain, unrefined fallbacks for any future
   instance that doesn't opt into the premium treatment. */

/* Thin, light-colored page-block strips peeking from behind the front
   cover — right edge and bottom edge — distinct from the dark .book-spine.
   Flat, unrotated, sitting in the same z=0 plane as .book-cover so only
   the sliver outside the cover's box is visible; no second cover image,
   no extra markup needed. */
/* Page-block strips — recolored off the original cream/tan paper tones
   (#efe6d0 / #d9cba9 read as bright UI-artifact paper against this site's
   dark palette). Now a dark blue-gray pairing pulled from the same family
   as --panel-2 and the .book-spine gradient, so the page edge reads as
   shadowed depth rather than a lit paper stack. The hero's deeper -21deg
   rotateY angle makes the right-side page block visible — built below as a
   proper 3D face, not a flat pseudo-element strip. */

/* --- Right-side page block (3D face) ---
   A true 3D CSS face rotated 90deg around its left edge so it extends in
   -Z (page depth), visible from the viewer's angle after the parent's
   rotateY(-21deg). Uses the cover's own base colors pushed darker so it
   reads as a compressed stack of pages, not a painted strip. */
.hero-book .book-pages-right,
.book-premium .book-pages-right {
  position: absolute;
  top: 0;
  left: 100%;
  width: 82px;
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg) translateZ(-1px);
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      rgba(150, 176, 198, 0.03) 1px,
      rgba(130, 155, 178, 0.018) 3px,
      transparent 5px,
      transparent 12px
    ),
    linear-gradient(180deg,
      rgba(96, 120, 142, 0.52) 0%,
      rgba(72, 94, 114, 0.58) 18%,
      rgba(55, 75, 94, 0.64) 40%,
      rgba(40, 58, 76, 0.72) 65%,
      rgba(28, 42, 58, 0.8) 85%,
      rgba(18, 28, 42, 0.86) 100%
    );
  border-left: 1px solid rgba(180, 200, 220, 0.12);
  border-radius: 0 2px 2px 0;
  box-shadow:
    -4px 0 10px rgba(0, 0, 0, 0.35) inset,
    2px 0 6px rgba(0, 0, 0, 0.3);
}

/* Cover board spine edge — a thin dark strip on the left spine side,
   suggesting the hardcover board underneath the jacket. */
.hero-book .book-cover::after,
.book-premium .book-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 4px;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.15) 60%,
    transparent 100%
  );
  border-radius: 1px 0 0 1px;
}

/* Very slight spine/bevel on the cover's own left edge, layered on top of
   the existing shadow stack (box-shadow entries don't merge across rules,
   so the full stack is repeated here with the bevel added). */
.hero-book .book-cover,
.book-premium .book-cover {
  /* Near-zero radius — a real hardcover's corner is almost imperceptible,
     not a rounded UI-card corner. Overrides the shared var(--radius) (14px)
     used by any non-premium .book-cover instance; that shared default is
     left untouched for anything that doesn't opt into .book-premium. */
  border-radius: 1px;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.5),
    0 32px 70px var(--shadow),
    0 0 80px rgba(63, 142, 184, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 2px 0 5px -2px rgba(0, 0, 0, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Black-glass product surface: a tight contact shadow, a wider ambient
   pool, and — critically — a subtle reflective sheen so the floor reads
   as polished obsidian/granite rather than a generic dark blur. The
   stretched proportions (wider than the book, taller toward the viewer)
   suggest a reflective plane receding into the distance. */
.hero-book .book-stage::after,
.book-stage.book-premium::after {
  left: -14%;
  right: -14%;
  bottom: -48%;
  height: 64%;
  opacity: 0.8;
  background:
    /* Tight, dense contact shadow — anchors the book to the surface */
    radial-gradient(ellipse 42% 10% at 50% 0%, rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.35) 18%, rgba(0, 0, 0, 0.08) 30%, transparent 48%),
    /* Wider ambient pool */
    radial-gradient(ellipse 80% 50% at 50% 4%, rgba(2, 6, 14, 0.5), transparent 64%),
    /* Polished glass/marble highlight — a bright cool streak near the
       contact line that reads as reflected overhead light, then fades
       into deep dark. Clearly defines the surface as glossy/reflective
       rather than matte. */
    linear-gradient(180deg,
      rgba(100, 122, 148, 0.12) 0%,
      rgba(70, 90, 112, 0.08) 4%,
      rgba(45, 62, 80, 0.04) 12%,
      transparent 28%,
      transparent 75%,
      rgba(20, 32, 46, 0.05) 100%
    );
  filter: blur(4px);
}

/* Faint book reflection on the black-glass surface below — a soft,
   blurry echo of the book's silhouette, not a literal mirror. Deliberately
   NOT a `-webkit-box-reflect`: a prior pass (documented in STATE.md) tried
   that and found mirrored text illegible and cheap-looking. This is a
   dark-toned rectangle matching the book's aspect ratio, heavy-blurred,
   masked to fade to transparent going down, at very low opacity. Sits
   behind .book-object (z-index -1) in .book-stage's untransformed space. */
.hero-book .book-reflection,
.book-premium .book-reflection {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 96%;
  height: 62%;
  z-index: -1;
  pointer-events: none;
  /* Soft book-shaped reflection on polished glass: sits right below the
     book's baseline, fades downward naturally. Peak is ~18% opacity at
     the contact line — enough to read as a glossy surface catching the
     book, never a mirror. */
  background: linear-gradient(180deg,
    rgba(60, 82, 106, 0.18) 0%,
    rgba(45, 64, 86, 0.13) 8%,
    rgba(32, 48, 66, 0.08) 20%,
    rgba(20, 32, 48, 0.04) 36%,
    transparent 55%
  );
  border-radius: 2px;
  filter: blur(6px);
}

/* Slow right-to-left light sweep across the cover — a lighting effect, not
   a glow ring. Replaces the base rule's radial gloss spot with a soft
   diagonal band that travels once across the cover every 18s. */
.hero-book .book-cover::before,
.book-premium .book-cover::before {
  opacity: 0.45;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 244, 224, 0.12) 12%, rgba(255, 244, 224, 0.04) 18%, transparent 28%);
  background-size: 280% 100%;
  background-position: 130% 0%;
  animation: book-light-sweep 22s linear infinite;
}

.section {
  padding: clamp(68px, 10.5vw, 148px) 0;
  border-top: 1px solid var(--line);
}

.section.narrow {
  max-width: 820px;
}

/* Sample excerpt (ailex-10.html #sample) — reads as the opening pages of a
   novel, not a blog post: no card chrome, just a constrained reading
   measure narrower than the section's own 820px, set in the site's
   existing --font-display book-jacket serif (Iowan Old Style / Palatino /
   Georgia) which is already a body-friendly text-book face at paragraph
   scale, unlike a display-only face. Line-height is opened up for long-form
   reading while explicit paragraph margins keep breaks from collapsing. */
.sample-excerpt {
  max-width: 680px;
  margin-inline: auto;
  font-family: var(--font-display);
}

.sample-excerpt p {
  margin: 0 0 26px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.8;
}

.sample-excerpt p:last-child {
  margin-bottom: 0;
}

#sample .sample-excerpt + p {
  max-width: 680px;
  margin: 40px auto 0;
  font-family: var(--font-display);
}

#sample .text-link {
  display: flex;
  max-width: 680px;
  margin-inline: auto;
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 48px);
}

.align-start {
  align-items: start;
}

.feature-panel,
.contact-form,
.copy-stack {
  min-width: 0;
}

/* Cards get a physical-object treatment: deeper padding, softer corner
   radius, a two-tier shadow (contact + ambient) and a faint inset top
   highlight so they read as lit panels rather than flat placeholders. */
.feature-panel {
  padding: clamp(28px, 4.5vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 17, 28, 0.68);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 50px rgba(0, 0, 0, 0.28);
  transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium), border-color 420ms var(--ease-premium);
}

.feature-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(183, 207, 235, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 64px rgba(0, 0, 0, 0.36);
}

.text-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--amber-bright);
  font-weight: 700;
  text-decoration: none;
  transition: transform 380ms var(--ease-premium), opacity 380ms var(--ease-premium);
}

.text-link:hover {
  transform: translateY(-2px);
  opacity: 0.82;
}

.author-section {
  display: grid;
  /* Percentage/fr-based cap (not a fixed px cap) so the portrait column
     never exceeds ~32% of the section's content width on desktop, per the
     "portrait must never exceed 35% of content width" requirement carried
     over from a prior pass. The brief asks the portrait to "lead" the
     layout — done here via framing/whitespace/alignment rather than raw
     size, so that guardrail stays intact. */
  grid-template-columns: minmax(200px, 32%) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 84px);
}

.author-portrait {
  margin: 0;
  width: 100%;
  justify-self: center;
}

.author-portrait img {
  width: 100%;
  /* height must be explicit (not left to the browser default) because the
     <img> also carries width/height HTML attributes for CLS purposes; those
     attributes act as a presentational height hint that otherwise wins over
     the aspect-ratio-driven auto height, forcing the image to render at its
     raw intrinsic height (e.g. 1402px) regardless of the rendered width. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  border: 1px solid rgba(242, 247, 255, 0.14);
  /* Magazine-plate framing: a tight contact shadow, a wider ambient falloff,
     and a faint outer ring standing in for a gallery mat — lets the
     portrait "lead" the layout through presentation, not raw size. */
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 30px rgba(0, 0, 0, 0.48),
    0 46px 80px rgba(0, 0, 0, 0.4),
    0 0 0 8px rgba(255, 255, 255, 0.02),
    0 0 60px rgba(63, 142, 184, 0.12);
}

.author-portrait.is-missing {
  display: none;
}

.author-bio {
  max-width: 760px;
}

.store-section {
  display: grid;
  gap: clamp(28px, 5vw, 54px);
}

.store-direct-card {
  display: grid;
  gap: 14px;
  min-height: 230px;
  align-content: end;
  padding: clamp(30px, 5vw, 50px);
  border: 1px solid rgba(255, 179, 90, 0.3);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 179, 90, 0.1), transparent 44%),
    rgba(8, 17, 28, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 28px 62px rgba(0, 0, 0, 0.34);
  text-decoration: none;
  transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium),
    border-color 420ms var(--ease-premium), background 420ms var(--ease-premium);
}

.store-direct-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 224, 173, 0.5);
  background:
    linear-gradient(135deg, rgba(255, 179, 90, 0.14), transparent 44%),
    rgba(13, 25, 37, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 36px 76px rgba(0, 0, 0, 0.4);
}

/* Deliberately restrained — this is the element the brief asks us to strip
   visual "BUY" emphasis from. Sized closer to a heading than a shout, and
   set in the display serif so it reads as a quiet statement, not a CTA. */
.store-direct-card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
}

.store-direct-card small {
  max-width: 540px;
  color: var(--muted);
  font-size: 1rem;
}

.retailer-block {
  display: grid;
  gap: 14px;
}
.release-list {
  display: grid;
  gap: 22px;
}

.release-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(18px, 4vw, 40px);
  padding: clamp(30px, 4.5vw, 52px) 0;
  border-top: 1px solid var(--line);
}

.release-item:first-child {
  border-top: 0;
}

.release-number {
  font-family: var(--font-display);
  color: rgba(242, 247, 255, 0.2);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1;
}

.is-live .release-number {
  color: rgba(255, 179, 90, 0.46);
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

/* Retailer cards get the same physical-object treatment as feature panels:
   softer radius, layered shadow, a slower lift on hover instead of the
   flat 160ms snap. */
.store-card {
  display: grid;
  min-height: 176px;
  align-content: end;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 17, 28, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 34px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium),
    border-color 420ms var(--ease-premium), background 420ms var(--ease-premium);
}

.store-card:hover {
  border-color: rgba(255, 179, 90, 0.4);
  background: rgba(13, 25, 37, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 26px 48px rgba(0, 0, 0, 0.3);
}

.store-card span {
  font-size: 1.15rem;
  font-weight: 700;
}

.store-card small {
  color: var(--muted);
}

.contact-form {
  display: grid;
  gap: 14px;
  padding: clamp(28px, 4.5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 17, 28, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 50px rgba(0, 0, 0, 0.26);
}

label {
  color: var(--ink);
  font-weight: 750;
}

input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(183, 207, 235, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
}

input:focus {
  outline: 2px solid rgba(255, 179, 90, 0.76);
  outline-offset: 2px;
}

/* Visible keyboard-focus ring for every interactive element (nav links,
   buttons, store cards, brand mark) — previously only <input> had one. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(255, 179, 90, 0.76);
  outline-offset: 3px;
  border-radius: 4px;
}

.form-note {
  margin: 0;
  font-size: 0.92rem;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.site-footer p {
  margin: 0;
  font-size: 0.92rem;
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

@keyframes pulse {
  0%, 100% { opacity: 0.58; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* Gentle 13s breathing pulse for the permanent brand mark — the intro's
   awakening point settles into this same rhythm once it becomes the logo. */
@keyframes brand-pulse {
  0%, 100% { box-shadow: 0 0 18px var(--amber), 0 0 42px rgba(255, 179, 90, 0.58); }
  50% { box-shadow: 0 0 22px var(--amber), 0 0 52px rgba(255, 179, 90, 0.78); }
}

/* Very subtle idle float: a slight vertical drift and gentle rotation so
   the book reads as present and physical — but never scales or breathes
   like a UI card. The moving light sweep (book-light-sweep) provides the
   primary sense of life; this animation is a barely-perceptible secondary
   cue. Single authoritative definition — do not add a second idle-book
   block or reintroduce scale. */
@keyframes idle-book {
  0%, 100% { transform: translateY(0) rotateY(-9deg) rotateX(1.6deg); }
  50% { transform: translateY(-4px) rotateY(-7deg) rotateX(1.2deg); }
}

/* Same idle float as idle-book, retuned around the hero's deeper -21deg
   base angle (see .hero-book .book-object) instead of the shared -9deg
   default, so the float doesn't snap back to a flatter angle. */
@keyframes idle-book-hero {
  0%, 100% { transform: translateY(0) rotateY(-22deg) rotateX(4deg); }
  50% { transform: translateY(-4px) rotateY(-20deg) rotateX(3.2deg); }
}

/* Slow circular drift for the orbiting light source behind the book. */
@keyframes book-light-orbit {
  0% { transform: translate(6%, -4%); }
  25% { transform: translate(-3%, 5%); }
  50% { transform: translate(-6%, -2%); }
  75% { transform: translate(2%, 6%); }
  100% { transform: translate(6%, -4%); }
}

@keyframes book-gloss-drift {
  0%, 100% { background-position: 12% 8%; }
  50% { background-position: 82% 60%; }
}

/* Right-to-left light sweep for the hero book cover (see
   .hero-book .book-cover::before). One pass every 18s, then resets while
   fully transparent at the wrap point so there's no visible snap. */
@keyframes book-light-sweep {
  0% { background-position: 130% 0%; }
  100% { background-position: -30% 0%; }
}

@keyframes ambient-particles-drift {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  50% {
    background-position: 2% -3%, -3% 2%, 1% 3%, -2% -2%, 3% 1%, -2% 3%, 2% -2%, -1% 2%, 3% -1%, -3% -2%;
  }
}

/* Distant light blooms drifting very slowly, as if a soft source were
   moving somewhere deep in the server hall — grid layers stay locked at
   0 0 (first two position values), only the light/haze layers move. */
@keyframes ambient-lights-drift {
  0%, 100% {
    background-position: 0 0, 0 0, 0% 0%, 0% 0%, 31% 0;
  }
  50% {
    background-position: 0 0, 0 0, 6% 5%, -5% -4%, 31% 0;
  }
}

/* ----------------------------------------------------------------------
   Scroll-triggered reveal animations.
   .reveal elements start hidden and fade up when they enter the viewport.
   The .revealed class is added by Intersection Observer in main.js.
   ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-premium), transform 800ms var(--ease-premium);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------------
   One-time homepage intro sequence (index.html only).
   Gated by html.intro-run, added via an inline script in <head> before
   first paint, only when sessionStorage has no "played" flag for this
   session. Default (no class) renders the final, fully-visible state
   instantly — so returning visitors and no-JS visitors see zero flash.
   ---------------------------------------------------------------------- */
.intro-overlay {
  display: none;
}

html.intro-run .intro-overlay {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #020305;
  pointer-events: none;
  opacity: 1;
  animation: intro-overlay-out 1.1s ease forwards;
  animation-delay: 2.5s;
}

/* The point tells the whole story in two moves: it wakes up (glow), then
   — as the overlay dissolves — it travels from screen-center toward the
   header's brand mark and contracts into it, so the permanent logo dot
   reads as the same point of consciousness, not a new element appearing.
   The travel keyframe's end position is expressed in viewport units offset
   from center, since .intro-point starts exactly centered by the overlay's
   place-items: center. */
.intro-point {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-bright);
  opacity: 0;
  transform: scale(0.4);
  animation:
    intro-point-glow 1.5s ease-out forwards 0.3s,
    intro-point-travel 1.1s var(--ease-premium) forwards 2.5s;
}

.intro-circuitry {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255, 179, 90, 0.16) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(95, 196, 197, 0.14) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 50%, rgba(255, 179, 90, 0.08), transparent 60%);
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 55%);
  animation: intro-circuitry-in 1.3s ease-out forwards;
  animation-delay: 1.3s;
}

html.intro-run .brand {
  opacity: 0;
  animation: intro-fade-up 0.9s ease forwards;
  animation-delay: 3.6s;
}

html.intro-run .nav-toggle {
  opacity: 0;
  animation: intro-fade-up 0.9s ease forwards;
  animation-delay: 4s;
}

/* Keep the mobile navigation drawer closed on first load. The one-time
   homepage intro may animate the desktop navigation into view, but applying
   that same opacity animation to the mobile drawer overrides its closed
   state and makes the links appear before the menu button is pressed. */
@media (min-width: 901px) {
  html.intro-run .site-nav {
    opacity: 0;
    animation: intro-fade-up 0.9s ease forwards;
    animation-delay: 4s;
  }
}

html.intro-run .hero-book {
  opacity: 0;
  animation: intro-fade-up 1s ease forwards;
  animation-delay: 4.6s;
}

@keyframes intro-point-glow {
  0% { opacity: 0; box-shadow: 0 0 0 rgba(255, 179, 90, 0); transform: scale(0.4); }
  100% { opacity: 1; box-shadow: 0 0 18px var(--amber), 0 0 54px rgba(255, 179, 90, 0.7); transform: scale(1); }
}

@keyframes intro-point-travel {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50vw + 68px), calc(-50vh + 36px)) scale(0.5); opacity: 0; }
}

@keyframes intro-circuitry-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes intro-overlay-out {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes intro-fade-up {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

/* Laptop/tablet-landscape range (between the desktop 5-across grid and the
   900px stacked-nav breakpoint): 5 columns get too narrow here and force
   two-word retailer names ("Amazon Kindle", "Google Play Books") into a
   cramped wrap. Drop to 3 columns so each card keeps comfortable spacing. */
@media (max-width: 1100px) {
  .store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    display: grid;
    padding: 18px 20px 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(3, 7, 12, 0.98);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 320ms var(--ease-premium), transform 320ms var(--ease-premium);
  }

  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .hero,
  .grid-two {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 48px;
  }

  .hero-book {
    min-height: 500px;
    order: -1;
  }

  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .store-card {
    min-height: 128px;
  }

  .author-section {
    grid-template-columns: 1fr;
  }

  .author-portrait {
    /* Fluid clamp instead of a flat px cap: scales with the viewport
       between a comfortable floor and the desktop-ish ceiling rather than
       jumping straight to one fixed size for every width under 900px. */
    width: clamp(180px, 42vw, 300px);
    order: -1;
  }
}

@media (max-width: 620px) {
  .hero,
  .page-hero,
  .section,
  .site-footer {
    width: min(100% - 28px, var(--max));
  }

  .site-header {
    padding-inline: 14px;
  }

  .brand {
    letter-spacing: 0.12em;
  }

  /* Narrower header padding moves the brand mark closer to the left edge —
     retarget the intro point's travel destination to match. */
  @keyframes intro-point-travel {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50vw + 26px), calc(-50vh + 36px)) scale(0.5); opacity: 0; }
  }

  .button-row {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .hero-book {
    min-height: 430px;
  }

  .release-item {
    grid-template-columns: 1fr;
  }

  .site-footer {
    display: grid;
  }

  h1 {
    font-size: clamp(1.9rem, 9.5vw, 2.6rem);
  }

  .store-grid {
    grid-template-columns: 1fr;
  }

  .store-direct-card {
    min-height: 190px;
  }
}

/* ----------------------------------------------------------------------
   Version 5 DeepSeek refinement layer
   Adds the five requested premium polish details without changing assets
   or restructuring the existing cinematic system.
   ---------------------------------------------------------------------- */

/* Near-invisible film grain: pure CSS, fixed over the page, intentionally
   weaker than the atmosphere layers so it reads as analog texture rather
   than dirt. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.8) 0 0.8px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(0, 0, 0, 0.9) 0 0.7px, transparent 1px),
    radial-gradient(circle at 76% 34%, rgba(255, 255, 255, 0.55) 0 0.6px, transparent 1px),
    radial-gradient(circle at 88% 68%, rgba(0, 0, 0, 0.7) 0 0.75px, transparent 1px);
  background-size: 43px 47px, 51px 59px, 67px 61px, 37px 41px;
}

.site-nav a {
  position: relative;
  padding: 8px 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 179, 90, 0.78), transparent);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 520ms var(--ease-premium), opacity 520ms var(--ease-premium);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  opacity: 1;
}

.button:active,
.store-card:active,
.store-direct-card:active,
.text-link:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 120ms;
}

.sample-excerpt p:first-of-type::first-letter {
  float: left;
  margin: 0.12em 0.14em 0 0;
  color: var(--amber-bright);
  font-family: var(--font-display);
  font-size: 4.35rem;
  line-height: 0.82;
  text-shadow: 0 0 24px rgba(255, 179, 90, 0.18);
}

.site-footer {
  display: grid;
  gap: clamp(26px, 5vw, 52px);
  padding: clamp(54px, 8vw, 94px) 0 34px;
  border-top: 1px solid rgba(183, 207, 235, 0.18);
}

.footer-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(183, 207, 235, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 36%),
    radial-gradient(38rem 18rem at 80% 12%, rgba(255, 179, 90, 0.09), transparent 70%),
    rgba(8, 17, 28, 0.74);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 72px rgba(0, 0, 0, 0.32);
}

.footer-cta::after {
  content: "";
  position: absolute;
  inset: auto 8% 0;
  height: 1px;
  opacity: 0.62;
  background: linear-gradient(90deg, transparent, rgba(255, 179, 90, 0.36), transparent);
}

.footer-cta h2 {
  max-width: 720px;
}

.footer-cta p:not(.section-kicker) {
  max-width: 680px;
}

.footer-actions {
  max-width: 460px;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.footer-meta p {
  margin: 0;
  font-size: 0.92rem;
}

.footer-meta a {
  color: var(--ink);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html::before {
    opacity: 0.025;
  }
}

@media (max-width: 620px) {
  .sample-excerpt p:first-of-type::first-letter {
    font-size: 3.45rem;
  }

  .footer-meta {
    display: grid;
  }
}

/* V5 mobile edge-safety: keep cinematic scale, but prevent transformed book
   geometry and long hero copy from feeling clipped on narrow phones. */
@media (max-width: 620px) {
  .page-hero,
  .hero {
    overflow: hidden;
  }

  .page-hero p,
  .hero-lede,
  .copy-stack p,
  .sample-excerpt p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .book-stage-small {
    width: min(68vw, 260px);
    margin-inline: auto;
  }

  .book-premium .book-object,
  .hero-book .book-object {
    transform: rotateY(-16deg) rotateX(3deg);
    animation-name: idle-book-hero-mobile;
  }
}

@keyframes idle-book-hero-mobile {
  0%, 100% { transform: translateY(0) rotateY(-16deg) rotateX(3deg); }
  50% { transform: translateY(-4px) rotateY(-14deg) rotateX(2.4deg); }
}

@media (max-width: 620px) {
  .page-hero > div,
  .hero-copy,
  .copy-stack,
  .sample-excerpt {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .page-hero p,
  .hero-lede,
  .copy-stack p,
  .sample-excerpt p {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 620px) {
  .page-hero > div,
  .hero-copy,
  .copy-stack,
  .sample-excerpt,
  #sample .sample-excerpt + p,
  #sample .text-link {
    max-width: min(100%, 340px);
    margin-left: 0;
    margin-right: auto;
  }
}


/* V5.1 launch-preparation additions */
.store-card.is-disabled,
.store-direct-card.is-disabled {
  cursor: default;
  opacity: 0.72;
}
.store-card.is-disabled:hover,
.store-direct-card.is-disabled:hover,
.store-card.is-disabled:active,
.store-direct-card.is-disabled:active {
  transform: none;
}
.field-optional { color: var(--muted); font-weight: 400; }
.consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}
.consent-row input { margin-top: 0.32em; }
.consent-row a,
.legal-copy a { color: var(--amber-bright); }
.legal-copy h2 { margin-top: 2.1rem; }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { max-width: 76ch; }
.consent-row { text-align: left; }

/* Ambient music control.
   Restrained on purpose: this is a quiet offer, not a call to action, so it
   borrows the panel treatment rather than the button treatment and only picks
   up the amber accent once music is actually playing. */
.ambient-audio {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ambient-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 17, 28, 0.86);
  backdrop-filter: blur(9px);
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 30px rgba(0, 0, 0, 0.34);
  transition: color 420ms var(--ease-premium), border-color 420ms var(--ease-premium),
    background 420ms var(--ease-premium);
}

.ambient-toggle:hover {
  color: var(--ink);
  border-color: rgba(255, 179, 90, 0.4);
  background: rgba(13, 25, 37, 0.94);
}

/* Three bars that stand still when paused and breathe when playing — reads as
   "sound" without needing an icon font or an inline SVG per page. */
.ambient-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}

.ambient-bars i {
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
  transition: height 300ms var(--ease-premium);
}

.ambient-audio.is-playing .ambient-toggle {
  color: var(--ink);
  border-color: rgba(255, 179, 90, 0.46);
}

.ambient-audio.is-playing .ambient-bars i {
  background: var(--amber-bright);
  animation: ambient-bar 1.15s ease-in-out infinite;
}

.ambient-audio.is-playing .ambient-bars i:nth-child(2) { animation-delay: 0.22s; }
.ambient-audio.is-playing .ambient-bars i:nth-child(3) { animation-delay: 0.44s; }

@keyframes ambient-bar {
  0%, 100% { height: 4px; }
  50% { height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-audio.is-playing .ambient-bars i { animation: none; height: 9px; }
}

@media (max-width: 620px) {
  .ambient-toggle { padding: 8px 13px; font-size: 0.8rem; }
}

/* Hero: photographic render variant.
   The render is a real photograph of the hardcover — it already carries its own
   angle, page edges, floor reflection and lighting, so the CSS book-stage is not
   used on this page. The radial mask lets the render's own black fall away into
   the page background so it reads as an object in the room rather than a photo
   pasted into a rectangle.

   The free-floating .consciousness-point is hidden here on purpose. It is
   absolutely positioned at the centre of .hero-book, which sat harmlessly behind
   the narrower CSS book-stage but lands squarely on top of a full-bleed
   photograph. The amber motif is not lost: the cover artwork inside the render
   carries its own amber point, and the nav logo still pulses. */
.hero-book-render .consciousness-point {
  display: none;
}

.hero-book-render picture {
  display: block;
}

.hero-book-render img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: radial-gradient(76% 70% at 50% 45%, #000 34%, transparent 92%);
  mask-image: radial-gradient(76% 70% at 50% 45%, #000 34%, transparent 92%);
}