/* ================================================================
   LORRAINE H. — AUTHOR SITE
   main.css
   ================================================================ */

/* ── RESET & BOX MODEL ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── DESIGN TOKENS ── */
:root {
  --ink:     #16120e;
  --deep:    #1e1812;
  --surface: #231e18;
  --muted:   #f0ebe3;
  --warm:    #faf6f0;
  --stone:   #8a8278;
  --pale:    #c8c0b4;
  --blush:   #c49a8a;
  --rose:    #9a5a50;
  --gold:    #b89060;
  --serif:   'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --jp:      'Noto Serif JP', serif;
  --sans:    'Jost', system-ui, sans-serif;
}

/* ── BASE ── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--ink);
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* ── GRAIN OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1000;
}

/* ================================================================
   CURSOR
   ================================================================ */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--blush);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: screen;
}

.cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 0.5px solid var(--blush);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, width 0.3s, height 0.3s;
  opacity: 0.5;
}

a, button, [data-book], .book-entry, .book-spine { cursor: none; }

body:has(a:hover) .cursor,
body:has(button:hover) .cursor,
body:has([data-book]:hover) .cursor,
body:has(.book-entry:hover) .cursor { width: 14px; height: 14px; }

body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring,
body:has([data-book]:hover) .cursor-ring,
body:has(.book-entry:hover) .cursor-ring { width: 48px; height: 48px; opacity: 0.3; }

/* ================================================================
   NAVIGATION
   ================================================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3.5rem;
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pale);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 0.5px;
  background: var(--blush);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-links a:hover { color: var(--pale); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ── Book page nav ── */
.book-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3.5rem;
}

.back-btn {
  background: none;
  border: none;
  cursor: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.3s;
  text-decoration: none;
}

.back-btn:hover { color: var(--pale); }

.back-btn-line {
  display: block;
  width: 28px;
  height: 0.5px;
  background: currentColor;
  transition: width 0.3s;
}

.back-btn:hover .back-btn-line { width: 40px; }

.book-nav-counter {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  height: 100vh;
  min-height: 700px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 3.5rem 5rem;
  overflow: hidden;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 40%, #2e1f1a 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 30% 70%, #1a1520 0%, transparent 60%),
    var(--ink);
}

.hero-deco-letter {
  position: absolute;
  right: -0.05em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(280px, 30vw, 480px);
  font-weight: 300;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(184, 144, 96, 0.12);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hero-vline {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 0.5px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(184,144,96,0.3) 30%,
    rgba(184,144,96,0.3) 70%,
    transparent
  );
}

.hero-left {
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 30px;
  height: 0.5px;
  background: var(--blush);
}

.hero-name {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 300;
  line-height: 0.95;
  color: var(--warm);
  letter-spacing: -0.01em;
  margin-bottom: 2.5rem;
}

.hero-name em {
  font-style: italic;
  color: var(--pale);
  font-weight: 300;
}

.hero-tagline {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--stone);
  line-height: 1.8;
  max-width: 340px;
  margin-bottom: 3rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pale);
  text-decoration: none;
  border-bottom: 0.5px solid var(--gold);
  padding-bottom: 0.3rem;
  transition: gap 0.4s, color 0.3s;
}

.hero-cta:hover { gap: 1.8rem; color: var(--warm); }

.hero-right {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.hero-book-stack {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
}

.hero-scroll-line {
  width: 0.5px;
  height: 40px;
  background: linear-gradient(to bottom, var(--stone), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 0.8; transform: scaleY(1.2); }
}

/* ── Book spines in hero ── */
.book-spine {
  border-radius: 2px 4px 4px 2px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: -4px 6px 20px rgba(0,0,0,0.5);
  transition: transform 0.4s ease;
}

.book-spine:hover {
  transform: translateY(-8px);
  box-shadow: -4px 6px 20px rgba(0,0,0,0.5), 0 0 12px rgba(184,144,96,0.15);
}

/* All three spines carry real art. Every file is 992x4896, so the width of each
   slot is its height at that ratio rather than a number picked to look right:
   57x280, 65x320, 53x260. The heights are the ones the stack was designed with,
   which is what keeps it reading as a shelf rather than three copies of the
   same object.
   No title overlays. Each piece of art sets its own title, so the rule and
   title divs are gone from the markup rather than hidden.
   The gradients are sampled from each cover and only show if an image fails. */
.book-spine-1 { width: 57px; height: 280px; background: linear-gradient(170deg, #0a0a0a 0%, #060606 55%, #000000 100%); }
.book-spine-2 { width: 65px; height: 320px; background: linear-gradient(170deg, #6a6a9e 0%, #3d4470 60%, #1b2140 100%); }
.book-spine-3 { width: 53px; height: 260px; background: linear-gradient(170deg, #1f7f9e 0%, #17607a 60%, #0e3a4c 100%); }

/* book-gold-rule and book-title-spine lived here. They set a hairline and a
   vertical title over each placeholder spine, and every spine has real art
   now, so nothing referenced them. Deleted rather than left behind: a rule
   nothing uses is a rule somebody reapplies by accident. */

/* ================================================================
   SECTION SHARED
   ================================================================ */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1rem;
}

.section-eyebrow::before {
  content: attr(data-num);
  font-size: 0.55rem;
  color: var(--rose);
}

.section-heading {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  color: var(--warm);
  margin-bottom: 5rem;
}

/* ================================================================
   WORKS
   ================================================================ */
#works {
  padding: 10rem 3.5rem;
  position: relative;
}

/* Same list as the homepage section, but as its own page, so it clears the
   fixed nav the way the other subpage headers do. */
.books-index-page {
  padding-top: 12rem;
}

.books-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.book-entry {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.2);
  cursor: pointer;
  transition: border-color 0.4s;
  text-decoration: none;
  color: inherit;
}

.book-entry:last-child { border-bottom: 0.5px solid rgba(138,130,120,0.2); }

.series-group-label {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
  padding-bottom: 0.75rem;
  border-bottom: 0.5px solid rgba(184,144,96,0.15);
  margin-top: 4rem;
}
.book-entry:hover { border-color: rgba(184,144,96,0.4); }
.book-entry:hover .book-entry-num { color: var(--gold); }
.book-entry:hover .book-entry-title { color: var(--warm); }
.book-entry:hover .book-entry-cover { transform: scale(1.04) rotate(-1deg); }

.book-entry-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(138,130,120,0.3);
  transition: color 0.4s;
  text-align: right;
}

.book-entry-tag {
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 0.6rem;
}

.book-entry-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--pale);
  line-height: 1.2;
  margin-bottom: 0.8rem;
  transition: color 0.4s;
}

.book-entry-desc {
  font-size: 0.8rem;
  line-height: 1.9;
  color: var(--stone);
  max-width: 480px;
}

.book-entry-cover {
  width: 140px;
  height: 224px;
  border-radius: 2px 5px 5px 2px;
  box-shadow: -6px 8px 30px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.05);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Cover colour variants */
.cover-bg-1 { background: linear-gradient(160deg, #3d2535 0%, #2a1825 50%, #1a1018 100%); }
.cover-bg-2 { background: linear-gradient(160deg, #2a2535 0%, #1e1a28 50%, #130f1c 100%); }
.cover-bg-3 { background: linear-gradient(160deg, #352520 0%, #251a18 50%, #180f0d 100%); }
/* Nothing is written behind this one, so it does not belong to a book. It is
   for the concept placeholders on the guides. */
.cover-bg-4 { background: linear-gradient(160deg, #1f2a2c 0%, #17201f 50%, #0e1414 100%); }
.cover-bg-5 { background: linear-gradient(160deg, #1c2733 0%, #141d27 50%, #0b1118 100%); }
.cover-bg-6 { background: linear-gradient(160deg, #2c2231 0%, #1f1824 50%, #130e17 100%); }
.cover-bg-7 { background: linear-gradient(160deg, #302020 0%, #221616 50%, #150c0c 100%); }

/* Decorative SVG overlay on covers */
.cover-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Real cover image — sits on top of placeholder, hidden until file exists.
   contain rather than cover: the slots are 1:1.6, which is what a book cover
   is, so a correctly sized cover fills them exactly and contain behaves the
   same as cover. A cover at the wrong ratio letterboxes onto the gradient
   behind it instead of having its title sliced off, which is what cover did
   to Past the Whistle the moment the slot changed shape. */
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  z-index: 2;
}

.cover-text {
  position: absolute;
  inset: 0;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cover-text-title {
  font-family: var(--serif);
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 300;
  color: var(--pale);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.cover-text-author {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

.cover-rule {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 28px;
  height: 0.5px;
  background: var(--gold);
  opacity: 0.5;
}

.cover-bottom-rule {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 28px;
  height: 0.5px;
  background: var(--gold);
  opacity: 0.3;
}

/* ================================================================
   ABOUT
   ================================================================ */
#about {
  padding: 10rem 3.5rem;
  background: var(--deep);
  position: relative;
  overflow: hidden;
}

.about-deco {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--jp);
  font-size: 280px;
  font-weight: 200;
  writing-mode: vertical-rl;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(184,144,96,0.06);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.about-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 8rem;
  align-items: start;
}

.portrait-frame {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #2e2020 0%, #201818 50%, #161010 100%);
  position: relative;
  overflow: hidden;
}

.portrait-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 0.5px solid rgba(184,144,96,0.2);
  pointer-events: none;
}

.portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-initials {
  font-family: var(--serif);
  font-size: 5rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(184,144,96,0.2);
  letter-spacing: 0.1em;
}

.portrait-caption {
  margin-top: 1.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
}

.about-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--warm);
  margin-bottom: 3rem;
  padding-left: 1.5rem;
  border-left: 0.5px solid var(--rose);
}

.about-bio {
  font-size: 0.875rem;
  line-height: 2.1;
  color: var(--stone);
  margin-bottom: 1.5rem;
  max-width: 540px;
}

.about-meta {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.meta-row {
  display: flex;
  gap: 2rem;
  padding: 0.9rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.15);
  font-size: 0.78rem;
}

.meta-row:last-child { border-bottom: 0.5px solid rgba(138,130,120,0.15); }

.meta-label {
  min-width: 120px;
  color: var(--stone);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta-value { color: var(--pale); }

/* ================================================================
   NEWSLETTER
   ================================================================ */
#newsletter {
  padding: 10rem 3.5rem;
  position: relative;
  text-align: center;
}

.newsletter-inner {
  max-width: 640px;
  margin: 0 auto;
}

.newsletter-ornament {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 2rem;
  letter-spacing: 0.3em;
}

.newsletter-heading {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--warm);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.newsletter-sub {
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--stone);
  margin-bottom: 3rem;
}

.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
  border-bottom: 0.5px solid var(--stone);
}

.newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.9rem 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--muted);
  outline: none;
}

.newsletter-input::placeholder { color: var(--stone); }

.newsletter-btn {
  background: none;
  border: none;
  padding: 0.9rem 0 0.9rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blush);
  cursor: none;
  transition: color 0.3s, letter-spacing 0.3s;
}

.newsletter-btn:hover { color: var(--warm); letter-spacing: 0.35em; }

.newsletter-note {
  margin-top: 1rem;
  font-size: 0.65rem;
  color: var(--stone);
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* ================================================================
   CONTACT
   ================================================================ */
#contact {
  padding: 10rem 3.5rem;
  background: var(--deep);
}

.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: start;
}

/* The right-hand column was a contact form that submitted nowhere. With it
   gone there is one column, and it should not sit at half width. */
.contact-inner-single {
  grid-template-columns: 1fr;
  max-width: 640px;
}

.contact-links {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.15);
  text-decoration: none;
  color: var(--stone);
  font-size: 0.78rem;
  transition: color 0.3s;
}

.contact-link-row:last-child { border-bottom: 0.5px solid rgba(138,130,120,0.15); }
.contact-link-row:hover { color: var(--pale); }
.contact-link-row span { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--stone);
}

.form-input,
.form-textarea {
  background: transparent;
  border: none;
  border-bottom: 0.5px solid rgba(138,130,120,0.25);
  padding: 0.7rem 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--muted);
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}

.form-input:focus,
.form-textarea:focus { border-color: var(--gold); }

.form-textarea { resize: vertical; min-height: 100px; line-height: 1.8; }

.form-submit {
  align-self: flex-start;
  background: none;
  border: 0.5px solid rgba(138,130,120,0.3);
  padding: 0.9rem 2.5rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: none;
  color: var(--pale);
  transition: all 0.4s;
}

.form-submit:hover {
  border-color: var(--gold);
  color: var(--warm);
  background: rgba(184,144,96,0.06);
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
  padding: 2.5rem 3.5rem;
  border-top: 0.5px solid rgba(138,130,120,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--stone);
  text-decoration: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  list-style: none;
  justify-content: center;
}

.footer-links a {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--pale); }

.footer-copy {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(138,130,120,0.4);
}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.35s; }

/* ================================================================
   PAGE TRANSITION CURTAIN
   ================================================================ */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}

.curtain-left,
.curtain-right {
  background: var(--ink);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.curtain-left  { transform: translateX(-100%); }
.curtain-right { transform: translateX(100%); transition-delay: 0.04s; }

.curtain.closed .curtain-left  { transform: translateX(0); }
.curtain.closed .curtain-right { transform: translateX(0); }

/* ================================================================
   BOOK PAGES
   ================================================================ */
.book-page-hero {
  padding: 0 3.5rem;
  padding-top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6rem;
  max-width: 1200px;
  margin: 0 auto;
}

.book-cover-col {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 4rem;
}

.book-cover-large {
  width: 260px;
  height: 416px;
  border-radius: 3px 8px 8px 3px;
  box-shadow: -12px 16px 60px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

/* Large cover colour variants */
.cover-large-1 { background: linear-gradient(160deg, #3d2535 0%, #2a1825 50%, #1a1018 100%); }
.cover-large-2 { background: linear-gradient(160deg, #2a2535 0%, #1e1a28 50%, #130f1c 100%); }
.cover-large-3 { background: linear-gradient(160deg, #352520 0%, #251a18 50%, #180f0d 100%); }

.cover-rule-top {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 22px;
  height: 0.5px;
  background: var(--gold);
  opacity: 0.5;
}

.cover-rule-bottom {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 22px;
  height: 0.5px;
  background: var(--gold);
  opacity: 0.3;
}

.cover-inner {
  position: absolute;
  inset: 0;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cover-inner-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--pale);
  line-height: 1.3;
}

.cover-inner-author {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.5rem;
}

.cover-inner-genre {
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  color: rgba(138,130,120,0.5);
  text-transform: uppercase;
}

/* Book info column */
.book-info-col {
  padding-top: 10rem;
  padding-bottom: 4rem;
}

.book-genre-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.book-genre-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 0.5px;
  background: var(--blush);
}

.book-title-large {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--warm);
  line-height: 1.1;
  margin-bottom: 2.5rem;
}

.book-tropes {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--blush);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.book-desc {
  font-size: 0.875rem;
  line-height: 2.1;
  color: var(--stone);
  /* The leading here is already 2.1, so a 1.5rem margin put more than two
     lines of air between paragraphs and the blurb read as disconnected
     fragments. Roughly one line's worth now: still a clear break, no chasm. */
  margin-bottom: 0.9rem;
  max-width: 480px;
}

.book-meta-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2.5rem;
}

.book-meta-row {
  display: flex;
  gap: 2rem;
  padding: 0.8rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.15);
  font-size: 0.78rem;
}

.book-meta-row:last-child { border-bottom: 0.5px solid rgba(138,130,120,0.15); }

.book-meta-label {
  min-width: 100px;
  color: var(--stone);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.book-meta-value { color: var(--pale); }

.heat-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.heat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blush);
  display: block;
}

.heat-dot.empty {
  background: transparent;
  border: 0.5px solid var(--blush);
}

.book-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.btn-ghost {
  display: inline-block;
  border: 0.5px solid rgba(138,130,120,0.3);
  padding: 0.85rem 2rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pale);
  text-decoration: none;
  transition: all 0.3s;
  cursor: none;
}

.btn-ghost:hover {
  border-color: var(--pale);
  color: var(--warm);
}

.btn-gold {
  display: inline-block;
  border: 0.5px solid var(--gold);
  padding: 0.85rem 2rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: all 0.3s;
  cursor: none;
}

.btn-gold:hover {
  background: rgba(184,144,96,0.08);
  color: var(--warm);
}

/* Book section: sample excerpt */
.book-section {
  padding: 8rem 3.5rem;
  border-top: 0.5px solid rgba(138,130,120,0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.book-section-dark {
  padding: 8rem 3.5rem;
  border-top: 0.5px solid rgba(138,130,120,0.1);
  background: var(--deep);
}

.book-section-dark-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sample-eyebrow,
.links-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.sample-eyebrow::before,
.links-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 0.5px;
  background: var(--blush);
}

.sample-quote {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  color: var(--pale);
  line-height: 1.9;
  max-width: 680px;
  border-left: 0.5px solid var(--rose);
  padding-left: 2rem;
}
.sample-quote p + p {
  margin-top: 1.2em;
}
.sample-break {
  font-style: normal;
  letter-spacing: 0.5em;
  color: var(--stone);
  margin-top: 1.8em;
}

.sample-attribution {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 1.5rem;
  padding-left: 2rem;
}

/* Buy links */
.buy-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.buy-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.15);
  text-decoration: none;
  color: var(--pale);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  transition: color 0.3s;
}

.buy-link-row:last-child { border-bottom: 0.5px solid rgba(138,130,120,0.15); }
.buy-link-row:hover { color: var(--warm); }

.buy-link-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-style: normal;
  color: var(--stone);
}

/* Book page bottom navigation */
.book-pager {
  border-top: 0.5px solid rgba(138,130,120,0.12);
  padding: 3rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.book-pager-btn {
  background: none;
  border: none;
  cursor: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.3s;
  text-decoration: none;
}

.book-pager-btn:hover { color: var(--pale); }

.pager-line {
  display: block;
  width: 28px;
  height: 0.5px;
  background: currentColor;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* ================================================================
   HAMBURGER BUTTON
   ================================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: none;
  padding: 4px;
  z-index: 600;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--stone);
  transition: background 0.3s;
}

.nav-toggle:hover span { background: var(--pale); }

/* ================================================================
   MOBILE NAV OVERLAY
   ================================================================ */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.nav-mobile.open {
  opacity: 1;
  pointer-events: all;
}

/* grain on overlay matches body */
.nav-mobile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
}

.nav-mobile-close {
  position: absolute;
  top: 2rem;
  right: 1.5rem;
  background: none;
  border: none;
  cursor: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-mobile-close span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--stone);
  position: absolute;
  transition: background 0.3s;
}

.nav-mobile-close span:first-child { transform: rotate(45deg); }
.nav-mobile-close span:last-child  { transform: rotate(-45deg); }
.nav-mobile-close:hover span { background: var(--pale); }

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.nav-mobile-link {
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--stone);
  text-decoration: none;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(16px);
  transition: color 0.3s, opacity 0.45s ease, transform 0.45s ease;
}

.nav-mobile.open .nav-mobile-link { opacity: 1; transform: translateY(0); }

.nav-mobile.open .nav-mobile-link:nth-child(1) { transition-delay: 0.08s; }
.nav-mobile.open .nav-mobile-link:nth-child(2) { transition-delay: 0.13s; }
.nav-mobile.open .nav-mobile-link:nth-child(3) { transition-delay: 0.18s; }
.nav-mobile.open .nav-mobile-link:nth-child(4) { transition-delay: 0.23s; }
.nav-mobile.open .nav-mobile-link:nth-child(5) { transition-delay: 0.28s; }
.nav-mobile.open .nav-mobile-link:nth-child(6) { transition-delay: 0.33s; }
.nav-mobile.open .nav-mobile-link:nth-child(7) { transition-delay: 0.38s; }

.nav-mobile-link:hover { color: var(--warm); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  nav { padding: 1.5rem 1.5rem; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .hero {
    grid-template-columns: 1fr;
    padding: 0 1.5rem 5rem;
  }
  .hero-right { display: none; }
  .hero-deco-letter { font-size: 200px; opacity: 0.5; }

  #works,
  #about,
  #newsletter,
  #contact { padding: 6rem 1.5rem; }

  .book-entry {
    grid-template-columns: 50px 1fr;
    gap: 1.5rem;
  }
  .book-entry-cover { display: none; }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-portrait { max-width: 240px; }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .book-page-hero {
    grid-template-columns: 1fr;
    padding: 0 1.5rem;
  }
  .book-cover-col { padding-top: 7rem; padding-bottom: 2rem; }
  .book-info-col  { padding-top: 2rem; }

  .book-nav { padding: 1.5rem 1.5rem; }
  .book-section,
  .book-section-dark { padding: 5rem 1.5rem; }
  .book-pager { padding: 2rem 1.5rem; }
}

/* ================================================================
   BOOK TITLE SUBTITLE (Untitled III — smaller secondary line)
   ================================================================ */
.book-title-subtitle {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--stone);
}

/* ================================================================
   SERIES NOTE
   ================================================================ */
.series-note {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--stone);
  max-width: 560px;
  line-height: 1.9;
  margin-top: -3rem;
  margin-bottom: 4rem;
  padding-left: 1.5rem;
  border-left: 0.5px solid rgba(138,130,120,0.2);
}

/* ================================================================
   READER NOTES / CONTENT WARNINGS
   ================================================================ */
.warnings-intro {
  font-family: var(--serif);
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.9;
  color: var(--stone);
  max-width: 540px;
  margin-bottom: 2.5rem;
}

.warnings-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 540px;
}

.warning-item {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--stone);
  padding: 0.85rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.12);
}

.warning-item:last-child {
  border-bottom: 0.5px solid rgba(138,130,120,0.12);
}

/* The notes give away plot, so they sit behind a reveal. <details> rather
   than a script: it works with JS off, it is keyboard operable for free, and
   screen readers announce the expanded state without any ARIA. */
.warnings-reveal {
  max-width: 540px;
}

.warnings-reveal > summary {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--stone);
  padding: 0.85rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.12);
  border-bottom: 0.5px solid rgba(138,130,120,0.12);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
  transition: color 0.3s ease;
}

/* Safari draws its own triangle unless both of these are cleared. */
.warnings-reveal > summary::-webkit-details-marker { display: none; }
.warnings-reveal > summary::marker { content: ''; }

.warnings-reveal > summary::after {
  content: '+';
  font-size: 0.95rem;
  line-height: 1;
  color: var(--pale);
  transition: color 0.3s ease;
}

.warnings-reveal[open] > summary::after { content: '\2212'; }

.warnings-reveal > summary:hover,
.warnings-reveal > summary:hover::after {
  color: var(--ink);
}

.warnings-reveal > summary:focus-visible {
  outline: 1px solid var(--stone);
  outline-offset: 4px;
}

/* Open, the first item's own top border does this job. */
.warnings-reveal[open] > summary {
  border-bottom-color: transparent;
}

/* ================================================================
   PRAISE
   ================================================================ */
#praise {
  padding: 10rem 3.5rem;
  background: var(--deep);
  position: relative;
}

.praise-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.praise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 0;
}

.praise-coming-soon {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  font-style: italic;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  text-align: center;
  padding: 3rem 0;
}

.praise-quote {
  padding: 3rem 2.5rem;
  border: 0.5px solid rgba(138,130,120,0.12);
  position: relative;
  transition: border-color 0.4s;
  display: flex;
  flex-direction: column;
}

.praise-quote:hover {
  border-color: rgba(184,144,96,0.2);
}

.praise-quote::before {
  content: '\201C';
  position: absolute;
  top: 1.8rem;
  left: 2rem;
  font-family: var(--serif);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--rose);
  opacity: 0.25;
  pointer-events: none;
}

.praise-text {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-style: italic;
  font-weight: 300;
  color: var(--pale);
  line-height: 1.75;
  margin-bottom: 2rem;
  padding-top: 1.2rem;
  flex: 1;
}

.praise-source {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 0.5px solid rgba(138,130,120,0.12);
  padding-top: 1rem;
}

.praise-reader {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

.praise-book {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--blush);
  opacity: 0.7;
}

@media (max-width: 900px) {
  #praise { padding: 6rem 1.5rem; }
  .praise-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ================================================================
   ARC PAGE
   ================================================================ */
.arc-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12rem 3.5rem 6rem;
}

.arc-heading {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--warm);
  margin-bottom: 3rem;
  margin-top: 1.5rem;
}

.arc-heading em {
  font-style: italic;
  color: var(--pale);
}

.arc-body {
  font-size: 0.875rem;
  line-height: 2.1;
  color: var(--stone);
  margin-bottom: 1.5rem;
  max-width: 540px;
}

.arc-form-wrap {
  padding: 8rem 3.5rem;
  background: var(--deep);
  border-top: 0.5px solid rgba(138,130,120,0.1);
}

.arc-form-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.arc-form {
  max-width: 540px;
  margin-top: 3rem;
}

.form-checkgroup {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 0.6rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--pale);
  cursor: none;
}

.form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border: 0.5px solid rgba(138,130,120,0.35);
  background: transparent;
  cursor: none;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.3s;
}

.form-check input[type="checkbox"]:checked {
  background: rgba(184,144,96,0.15);
  border-color: var(--gold);
}

.form-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--gold);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .arc-header { padding: 9rem 1.5rem 4rem; }
  .arc-form-wrap { padding: 5rem 1.5rem; }
}

/* ================================================================
   PRESS PAGE
   ================================================================ */
.press-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12rem 3.5rem 6rem;
}

.press-assets-wrap {
  padding: 8rem 3.5rem;
  background: var(--deep);
  border-top: 0.5px solid rgba(138,130,120,0.1);
}

.press-assets-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.press-assets-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 7rem;
  align-items: start;
  margin-top: 3rem;
}

.press-portrait {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3/4;
}

.press-download-links {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.press-dl-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.15);
  text-decoration: none;
  color: var(--stone);
  font-size: 0.78rem;
  transition: color 0.3s;
}

.press-dl-link:last-child { border-bottom: 0.5px solid rgba(138,130,120,0.15); }
.press-dl-link:hover { color: var(--pale); }

.press-bio-label {
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}

.press-copy-btn {
  background: none;
  border: 0.5px solid rgba(138,130,120,0.25);
  padding: 0.5rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: none;
  transition: all 0.3s;
  margin-top: 1.2rem;
  display: inline-block;
}

.press-copy-btn:hover {
  border-color: var(--gold);
  color: var(--pale);
}

.press-covers-wrap {
  padding: 8rem 3.5rem;
  border-top: 0.5px solid rgba(138,130,120,0.1);
}

.press-covers-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.press-covers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
  margin-top: 3rem;
}

.press-cover-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.press-cover-thumb {
  width: 180px;
  height: 256px;
}

.press-cover-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--pale);
  margin-bottom: 0.3rem;
}

.press-inline-link {
  color: var(--blush);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(196,154,138,0.4);
  padding-bottom: 0.1em;
  transition: color 0.3s, border-color 0.3s;
}

.press-inline-link:hover {
  color: var(--warm);
  border-color: var(--blush);
}

.press-enquiry-wrap {
  padding: 8rem 3.5rem;
  background: var(--deep);
  border-top: 0.5px solid rgba(138,130,120,0.1);
}

.press-enquiry-inner {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .press-header { padding: 9rem 1.5rem 4rem; }
  .press-assets-wrap,
  .press-covers-wrap,
  .press-enquiry-wrap { padding: 5rem 1.5rem; }
  .press-assets-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .press-covers-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ================================================================
   PAGE LOADER  (first visit only — controlled by JS)
   ================================================================ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

/* grain carried through onto the loader */
#loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
}

#loader.done {
  transform: translateY(-100%);
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRIVACY PAGE
   ════════════════════════════════════════════════════════════════════════ */

.privacy-body {
  max-width: 640px;
  margin: 0 auto;
  padding: 5rem 3.5rem 8rem;
}

.privacy-article {
  border-top: 0.5px solid rgba(138,130,120,0.15);
  padding-top: 2.5rem;
  margin-bottom: 3rem;
}

.privacy-article-num {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.5rem;
}

.privacy-article-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--pale);
  margin-bottom: 1.25rem;
}

.privacy-article p {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--stone);
  line-height: 1.85;
  margin-bottom: 0.9rem;
}

.privacy-article ol {
  padding-left: 1.25rem;
  margin-bottom: 0.9rem;
}

.privacy-article ol li {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--stone);
  line-height: 1.85;
  margin-bottom: 0.4rem;
  padding-left: 0.25rem;
}

.privacy-article a {
  color: var(--blush);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(196,154,138,0.3);
  transition: border-color 0.3s;
}
.privacy-article a:hover { border-color: var(--blush); }

.privacy-note {
  font-style: italic;
  color: rgba(138,130,120,0.7) !important;
}

@media (max-width: 700px) {
  .privacy-body { padding: 3rem 1.5rem 6rem; }
}

/* ────────────────────────────────────────────────────────────── */

.loader-letter {
  font-family: var(--serif);
  font-size: clamp(52px, 9vw, 108px);
  font-weight: 300;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(184, 144, 96, 0.4);
  line-height: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  user-select: none;
}

.loader-rule {
  width: 0;
  height: 0.5px;
  background: rgba(184, 144, 96, 0.25);
  transition: width 0.7s ease 0.3s;
}

#loader.active .loader-letter {
  opacity: 1;
  transform: translateY(0);
}

#loader.active .loader-rule {
  width: 48px;
}

/* ── TOUCH / MOBILE: hide custom cursor, restore native cursor ── */
@media (pointer: coarse) {
  .cursor,
  .cursor-ring { display: none; }
  * { cursor: revert !important; }
}

/* ================================================================
   READING GUIDES
   Long-form recommendation pages under /reading/. Reuses book-entry
   and book-meta-* for the per-book blocks; everything here is the
   article furniture those pages need and the rest of the site does not.
   ================================================================ */

.guide {
  max-width: 720px;
  margin: 0 auto;
  padding: 12rem 3.5rem 6rem;
}

.guide-eyebrow {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.guide h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  color: var(--warm);
  margin: 0 0 1.5rem;
}

.guide h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--warm);
  margin: 4rem 0 1.25rem;
}

.guide h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 2.5rem 0 0.75rem;
}

/* Body copy sized for four thousand words, not for a privacy policy. */
.guide p,
.guide li {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--pale);
  margin-bottom: 1.1rem;
}

.guide a { color: var(--gold); text-decoration: none; border-bottom: 0.5px solid rgba(184,144,96,0.35); }
.guide a:hover { color: var(--warm); border-bottom-color: var(--warm); }

.guide-updated {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 3rem;
}

/* Key takeaways, and the criteria block four of five competitors open with. */
.guide-callout {
  background: var(--deep);
  border-left: 2px solid var(--gold);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
}
.guide-callout p:last-child,
.guide-callout li:last-child { margin-bottom: 0; }
.guide-callout ul { margin: 0; padding-left: 1.1rem; }

/* One recommendation. Cover left, everything else right. */
.rec {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 0.5px solid rgba(138,130,120,0.2);
}
.rec:last-of-type { border-bottom: 0.5px solid rgba(138,130,120,0.2); }
.rec-nocover { grid-template-columns: 1fr; }

.rec-cover { width: 120px; aspect-ratio: 5 / 8; }
img.rec-cover { background: var(--surface); object-fit: contain; }

/* Placeholder for my own books that have no cover art yet. Reuses the
   cover-bg-N gradients from the book pages so the two agree. */
.rec-cover-ph {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 1rem 0.6rem 0.75rem;
  border-radius: 1px 3px 3px 1px;
  box-shadow: -4px 6px 20px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.05);
}
.rec-ph-text   { display: flex; flex-direction: column; gap: 0.5rem; margin: auto 0; }
.rec-ph-title  { font-family: var(--serif); font-style: italic; font-size: 0.85rem;
                 font-weight: 300; line-height: 1.3; color: var(--warm); }
.rec-ph-author { font-family: var(--sans); font-size: 0.48rem; font-weight: 300;
                 letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.rec-ph-soon   { font-family: var(--sans); font-size: 0.46rem; font-weight: 300;
                 letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
                 border-top: 0.5px solid rgba(184,144,96,0.35);
                 padding-top: 0.5rem; width: 70%; }
.rec-title  { font-family: var(--serif); font-size: 1.3rem; color: var(--warm); margin: 0 0 0.2rem; }
.rec-author { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--stone); margin-bottom: 1rem; }
/* Reuses the book-meta-row idiom so the fields read the same as a book page. */
.rec-fields { margin-top: 1rem; }
.rec-field  { display: flex; gap: 1.5rem; padding: 0.5rem 0;
              border-top: 0.5px solid rgba(138,130,120,0.12); font-size: 0.78rem; }
.rec-field-label { font-family: var(--sans); font-weight: 300; letter-spacing: 0.1em;
                   text-transform: uppercase; color: var(--stone);
                   min-width: 104px; flex-shrink: 0; }
.rec-field-value { font-family: var(--sans); font-weight: 300; color: var(--pale); }

/* The heat scale key, on every guide so the Heat field means one thing. */
.heat-scale { margin: 1.25rem 0 0; padding-left: 1.4rem; }
.heat-scale li { font-size: 0.8rem; line-height: 1.9; color: var(--pale); margin-bottom: 0.35rem; }
.heat-scale-name {
  font-family: var(--sans); font-weight: 300; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 0.7rem; color: var(--blush);
  display: block;
}

/* Concept teaser. It is a .rec card like every other entry, so all that is
   needed here is the row of controls that replaces the "Find this book" link,
   and those borrow the newsletter input and button from the homepage.

   Scoped to .guide because `.guide p` is a class-plus-element selector and
   outranks a bare class. Without the prefix this renders as body copy. */
.guide .concept-note {
  font-size: 0.65rem; line-height: 1.7;
  color: var(--stone); letter-spacing: 0.05em; margin: 1rem 0 0;
}
/* Two rows, not one. Beside the email field the vote read as that field's
   submit, so the free action looked like it wanted your details as well. */
.concept-actions { margin-top: 1.5rem; }

/* No box, because a box is what made it look like a form control. A thumb and
   a line of text, sized like the field labels beside it. */
.concept-vote {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: none; border: none; padding: 0;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 300;
  letter-spacing: 0.02em; color: var(--gold);
  cursor: none; white-space: nowrap;
  transition: color 0.3s;
}
.concept-thumb {
  width: 17px; height: 17px; flex: none;
  transition: transform 0.25s, fill 0.3s;
}
.concept-vote:hover { color: var(--warm); }
.concept-vote:hover .concept-thumb { transform: translateY(-2px); }
.concept-vote.voted,
.concept-vote:disabled { color: var(--stone); cursor: default; }
/* Filled once pressed, so the state is visible without a number next to it. */
.concept-vote.voted .concept-thumb { fill: var(--stone); transform: none; }

.concept-form {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.25rem; max-width: 460px;
  border-bottom: 0.5px solid var(--stone);
}
/* .newsletter-form supplies this underline on the homepage. There is no such
   wrapper here, so the row carries it and the input stays bare. */
.concept-input { flex: 1 1 120px; min-width: 0; }
.newsletter-btn.concept-btn { padding-left: 0; white-space: nowrap; }
.concept-note:empty { display: none; }

/* The right-hand column of a .rec is around 220px on a phone, which is not
   enough for a field and a submit side by side. The field takes the line and
   carries the underline itself, and the submit drops under it. */
@media (max-width: 600px) {
  .concept-form { max-width: none; flex-wrap: wrap; gap: 0; border-bottom: none; }
  .concept-input { flex: 1 1 100%; border-bottom: 0.5px solid var(--stone); }
  .newsletter-btn.concept-btn { padding: 0.9rem 0 0; }
}

/* At-a-glance and comparison tables. Nothing else on the site uses tables. */
.guide table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-family: var(--sans); }
.guide th, .guide td {
  text-align: left; padding: 0.7rem 0.9rem;
  border-bottom: 0.5px solid rgba(138,130,120,0.15);
  font-size: 0.8rem; font-weight: 300; color: var(--pale);
}
.guide th {
  color: var(--stone); font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; border-bottom-color: rgba(184,144,96,0.3);
}

.guide-draft {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 0.2rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.6rem;
}

.faq-q {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 400;
  color: var(--warm); margin: 2rem 0 0.6rem;
}

@media (max-width: 700px) {
  .guide { padding: 9rem 1.5rem 4rem; }
  .rec { grid-template-columns: 84px 1fr; gap: 1.25rem; }
  .rec-cover { width: 84px; }
  .rec-cover-ph  { padding: 0.6rem 0.35rem 0.5rem; }
  .rec-ph-title  { font-size: 0.66rem; }
  .rec-ph-author { display: none; }
  .rec-ph-soon   { font-size: 0.4rem; letter-spacing: 0.12em; width: 84%; }
  .rec-field { flex-direction: column; gap: 0.2rem; }
}