/* =========================================================
   The Weekend Scriptorium — shared stylesheet
   ========================================================= */

:root {
  --paper:        #F5EEDE;
  --paper-warm:   #EFE5CD;
  --paper-deep:   #E6D9B8;
  --ink:          #1B1611;
  --ink-soft:     #3A2F22;
  --ochre:        #B8862B;
  --ochre-deep:   #8E6420;
  --sienna:       #8C3B23;
  --olive:        #5E5A38;
  --rule:         #1B1611;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Subtle paper grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184,134,43,0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(140,59,35,0.04) 0, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 1;
  mix-blend-mode: multiply;
}

main, header, footer, nav { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Typography */
h1, h2, h3, h4, .display, .serif-display {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.italic, em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
.ital { font-style: italic; }

/* =================== NAV =================== */
nav.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 48px;
  background: linear-gradient(to bottom, rgba(245,238,222,0.95), rgba(245,238,222,0.85));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(27,22,17,0.08);
}
nav .brand {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 14, 'SOFT' 50;
}
nav .brand .amp { color: var(--ochre); font-style: italic; font-family: 'Cormorant Garamond', serif; font-weight: 600; padding: 0 2px; }
nav ul { display: flex; gap: 36px; list-style: none; }
nav ul a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Lora', serif;
  position: relative;
  padding-bottom: 3px;
}
nav ul a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--ochre);
  transition: width .3s ease;
}
nav ul a:hover::after, nav ul a.active::after { width: 100%; }
nav ul a.active { color: var(--ochre-deep); }

@media (max-width: 980px) {
  nav.topbar { padding: 16px 22px; }
  nav ul { gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
  nav ul a { font-size: 11px; letter-spacing: 0.08em; }
}
@media (max-width: 640px) {
  nav .brand { font-size: 14px; }
  nav ul { display: none; }
  nav ul.mobile-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); padding: 20px; flex-direction: column; align-items: flex-start; }
  .menu-toggle { display: block; background: none; border: 1px solid var(--ink); padding: 6px 10px; font-family: 'Lora', serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
}
.menu-toggle { display: none; }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-family: 'Lora', serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: all .3s ease;
  color: var(--ink);
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--sienna); border-color: var(--sienna); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { transition: transform .3s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* =================== SECTION COMMON =================== */
section { padding: 100px 64px; position: relative; }
@media (max-width: 820px) { section { padding: 70px 28px; } }

.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-eyebrow::before {
  content: '§';
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ochre);
}

.section-title {
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1;
  margin-bottom: 28px;
  letter-spacing: -0.03em;
  max-width: 14ch;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.section-title .ital {
  font-style: italic;
  color: var(--sienna);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}

.divider-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 64px;
  color: var(--ochre);
}
.divider-orn::before, .divider-orn::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: var(--ink);
  opacity: 0.25;
}
.divider-orn span {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* =================== HERO (home) =================== */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 140px 64px 80px;
  position: relative;
  gap: 64px;
}
.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--ochre-deep);
}
.hero h1 {
  font-size: clamp(58px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 1;
}
.hero h1 .ital {
  font-style: italic;
  color: var(--sienna);
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.hero h1 .underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--ochre);
}
.hero p.lead {
  font-size: 19px;
  max-width: 480px;
  color: var(--ink-soft);
  margin-bottom: 40px;
  line-height: 1.6;
}
.hero p.lead em { color: var(--sienna); }
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; }

.hero-ornament {
  position: relative;
  height: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-ornament .stack {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4/5;
}
.hero-ornament .frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink);
  background: var(--paper-warm);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-ornament .frame.back-1 {
  transform: rotate(-3.5deg) translate(-30px, 30px);
  background: var(--paper-deep);
  border-color: var(--olive);
}
.hero-ornament .frame.back-2 {
  transform: rotate(2deg) translate(20px, 14px);
  background: var(--paper-warm);
}
.hero-ornament .frame.front {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 18px 18px 0 -4px var(--ochre);
}
.hero-ornament .frame.front .quote-mark {
  font-family: 'Fraunces', serif;
  font-size: 220px;
  line-height: 0.6;
  color: var(--ochre);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.hero-ornament .frame.front .quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--paper);
}
.hero-ornament .frame.front .attribution {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-deep);
  font-family: 'Lora', serif;
  font-style: normal;
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding: 120px 28px 60px; gap: 80px; }
  .hero-ornament { min-height: 420px; }
  .hero-ornament .stack { max-width: 360px; }
}

/* =================== PAGE HEADER (non-home pages) =================== */
.page-header {
  padding: 180px 64px 80px;
  border-bottom: 1px solid rgba(27,22,17,0.12);
  background: var(--paper-warm);
}
@media (max-width: 820px) { .page-header { padding: 130px 28px 60px; } }
.page-header .eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-header .eyebrow::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--ochre-deep);
}
.page-header h1 {
  font-size: clamp(48px, 8vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  max-width: 14ch;
}
.page-header h1 .ital {
  font-style: italic;
  color: var(--sienna);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.page-header p.lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 620px;
  line-height: 1.55;
}

/* =================== MISSION / TWO-COL =================== */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 100px;
  align-items: start;
}
.mission-grid .lead {
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.mission-grid .lead .drop {
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  font-style: italic;
  color: var(--sienna);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.mission-grid p { font-size: 17px; color: var(--ink-soft); margin-bottom: 18px; }

.pillars {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid rgba(27,22,17,0.15);
}
.pillar h4 {
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: 'Lora', serif;
  font-weight: 600;
  color: var(--ochre-deep);
}
.pillar p { font-size: 15px; color: var(--ink-soft); }
@media (max-width: 980px) {
  .mission-grid { grid-template-columns: 1fr; gap: 50px; }
  .pillars { grid-template-columns: 1fr; gap: 24px; }
}

/* =================== BOOKS GRID =================== */
.books-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 70px;
  flex-wrap: wrap;
  gap: 28px;
}
.books-header .right {
  max-width: 380px;
  font-size: 16px;
  color: var(--ink-soft);
}
.books-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 50px 32px;
}
.book { display: flex; flex-direction: column; }
.book.span-5 { grid-column: span 5; }
.book.span-4 { grid-column: span 4; }
.book.span-3 { grid-column: span 3; }
.book.span-6 { grid-column: span 6; }
.book.span-7 { grid-column: span 7; }
@media (max-width: 980px) {
  .book.span-5, .book.span-4, .book.span-3, .book.span-6, .book.span-7 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .books-grid { gap: 60px 16px; }
  .book.span-5, .book.span-4, .book.span-3, .book.span-6, .book.span-7 { grid-column: span 12; }
}

.cover {
  position: relative;
  aspect-ratio: 2/3;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 14px 14px 0 -2px var(--ochre), 14px 14px 0 -1px var(--ink);
  transition: transform .4s ease, box-shadow .4s ease;
  cursor: pointer;
}

/* Real cover image overlay — drop a JPG into images/ and it appears here. */
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  display: block;
}
.cover:hover {
  transform: translate(-4px, -4px);
  box-shadow: 20px 20px 0 -2px var(--ochre), 20px 20px 0 -1px var(--ink);
}

/* Typeset placeholder cover */
.cover-art {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.cover-art::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid currentColor;
  opacity: 0.35;
  pointer-events: none;
}
.cover-art .top {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-family: 'Lora', serif;
  opacity: 0.7;
}
.cover-art .title {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.cover-art .title .it { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.cover-art .author {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-family: 'Lora', serif;
  margin-top: 8px;
  opacity: 0.85;
}
.cover-art .ornament {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 28px;
  align-self: center;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* Cover variants */
.c-1 { background: #2A1F18; color: #E8C77A; }
.c-2 { background: #8C3B23; color: #F5EEDE; }
.c-3 { background: #F5EEDE; color: #1B1611; border: 1px solid #1B1611; }
.c-4 { background: #1F3528; color: #D4B86A; }
.c-5 { background: #B8862B; color: #1B1611; }
.c-6 { background: #2D2C4A; color: #E6D9B8; }

.book .meta {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 10px;
}
.book h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
}
.book .by {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.book .summary {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 20px;
}
.book .actions {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: auto;
}
.book .actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: color .25s ease, border-color .25s ease;
}
.book .actions a:hover { color: var(--sienna); border-color: var(--sienna); }

/* =================== BOOK DETAIL =================== */
.book-hero {
  padding: 160px 64px 80px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
  background: var(--paper-warm);
  border-bottom: 1px solid rgba(27,22,17,0.12);
}
@media (max-width: 980px) {
  .book-hero { grid-template-columns: 1fr; padding: 130px 28px 60px; gap: 50px; }
}

.book-hero .cover-wrap {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.book-hero .cover-wrap .cover {
  margin-bottom: 0;
  cursor: default;
}
.book-hero .meta-row {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 24px;
}
.book-hero h1 {
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.book-hero h1 .ital {
  font-style: italic;
  color: var(--sienna);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.book-hero .by {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.book-hero .blurb {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 540px;
}
.book-hero .specs {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 14px 40px;
  margin-bottom: 36px;
}
.book-hero .specs .label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.book-hero .specs .value {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
}
.book-hero .buy-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Book detail body */
.book-body { padding: 100px 64px; }
@media (max-width: 820px) { .book-body { padding: 70px 28px; } }
.book-body .col-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
@media (max-width: 980px) { .book-body .col-grid { grid-template-columns: 1fr; gap: 40px; } }
.book-body .label-col h4 {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  font-family: 'Lora', serif;
  font-weight: 600;
}
.book-body .body-col p {
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 22px;
  line-height: 1.65;
}
.book-body .body-col p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 4em;
  font-style: italic;
  float: left;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--sienna);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}

.book-body .excerpt {
  margin-top: 100px;
  padding-top: 80px;
  border-top: 1px solid rgba(27,22,17,0.18);
}
.excerpt-block {
  background: var(--paper-warm);
  padding: 60px 64px;
  border: 1px solid var(--ink);
  position: relative;
  margin-top: 40px;
}
.excerpt-block::before {
  content: '"';
  position: absolute;
  top: -12px;
  left: 32px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 120px;
  color: var(--ochre);
  line-height: 1;
  background: var(--paper);
  padding: 0 8px;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.excerpt-block p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.55;
  margin-bottom: 22px;
  color: var(--ink);
}
.excerpt-block .from {
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  font-style: normal;
  font-family: 'Lora', serif;
}
@media (max-width: 820px) { .excerpt-block { padding: 50px 28px; } }

/* Related books */
.related {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 64px;
}
.related h3 {
  font-size: 36px;
  margin-bottom: 32px;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.related h3 .ital { font-style: italic; color: var(--ochre); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 820px) { .related-grid { grid-template-columns: 1fr; } .related { padding: 60px 28px; } }
.related-card a {
  display: block;
  border: 1px solid rgba(245,238,222,0.2);
  padding: 28px;
  transition: border-color .3s ease, background .3s ease;
}
.related-card a:hover { border-color: var(--ochre); background: rgba(184,134,43,0.05); }
.related-card .meta {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 12px;
}
.related-card h4 {
  font-size: 22px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.related-card .by {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: rgba(245,238,222,0.65);
  font-size: 15px;
}

/* =================== AUTHORS =================== */
.authors {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.authors::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ochre), transparent);
}
.authors .section-eyebrow { color: var(--ochre); }
.authors .section-eyebrow::before { color: var(--ochre); }
.authors .section-title { color: var(--paper); }
.authors .section-title .ital { color: var(--ochre); }
.authors-intro {
  max-width: 600px;
  font-size: 18px;
  color: rgba(245,238,222,0.75);
  margin-bottom: 90px;
}
.author-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
@media (max-width: 980px) { .author-grid { grid-template-columns: 1fr; gap: 60px; } }
.author {
  border-top: 1px solid rgba(245,238,222,0.2);
  padding-top: 40px;
}
.author-portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--paper-warm);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-style: italic;
  margin-bottom: 28px;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  border: 2px solid var(--ochre);
  position: relative;
  overflow: hidden;
}

/* Real portrait overlay — drop a JPG into images/ and it appears here. */
.portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  display: block;
}
.author h3 {
  font-size: 38px;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.author .role {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ochre);
  margin-bottom: 24px;
}
.author p { font-size: 16px; color: rgba(245,238,222,0.78); margin-bottom: 16px; line-height: 1.7; }
.author .credits {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(245,238,222,0.15);
  list-style: none;
}
.author .credits li {
  font-size: 14px;
  color: rgba(245,238,222,0.7);
  padding: 8px 0;
  display: flex;
  gap: 14px;
}
.author .credits li::before {
  content: '◆';
  color: var(--ochre);
  font-size: 8px;
  margin-top: 8px;
  flex-shrink: 0;
}

/* Light author cards (when on paper background) */
.author-light {
  background: var(--paper-warm);
  border-top: 1px solid var(--ink);
  padding-top: 40px;
  color: var(--ink);
}
.author-light .role { color: var(--ochre-deep); }
.author-light p { color: var(--ink-soft); }
.author-light .credits { border-top-color: rgba(27,22,17,0.18); }
.author-light .credits li { color: var(--ink-soft); }
.author-light .credits li::before { color: var(--ochre); }

/* =================== TESTIMONIALS / PRESS =================== */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}
@media (max-width: 980px) { .testimonials { grid-template-columns: 1fr; } }

.testimonial {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 38px 32px;
  position: relative;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 24px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 100px;
  color: var(--ochre);
  line-height: 1;
  background: var(--paper);
  padding: 0 8px;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.testimonial .quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  margin-top: 26px;
  margin-bottom: 24px;
  color: var(--ink);
}
.testimonial .who {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.testimonial .who-detail {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', serif;
  margin-top: 4px;
}

/* Press list (longer-form) */
.press-list { margin-top: 40px; }
.press-item {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(27,22,17,0.18);
  align-items: baseline;
}
.press-item:first-of-type { border-top: 1px solid rgba(27,22,17,0.18); }
.press-item .source {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.press-item .source-detail {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.press-item .quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}
.press-item .read {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  white-space: nowrap;
}
.press-item .read:hover { color: var(--sienna); border-color: var(--sienna); }
@media (max-width: 820px) {
  .press-item { grid-template-columns: 1fr; gap: 14px; }
  .press-item .read { justify-self: start; }
}

/* =================== EVENTS =================== */
.event-row {
  display: grid;
  grid-template-columns: 100px 200px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(27,22,17,0.2);
}
.event-row:first-of-type { border-top: 1px solid rgba(27,22,17,0.2); }
.event-row .date-day {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.event-row .date-month {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.event-row .where {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
}
.event-row .what h4 {
  font-size: 22px;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
}
.event-row .what p { font-size: 14px; color: var(--ink-soft); }
.event-row .rsvp {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.event-row .rsvp:hover { color: var(--sienna); border-color: var(--sienna); }
@media (max-width: 820px) {
  .event-row {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 14px 20px;
  }
  .event-row .where { grid-column: 2; font-size: 16px; }
  .event-row .what { grid-column: 1 / -1; }
  .event-row .rsvp { grid-column: 1 / -1; justify-self: start; }
}

/* =================== NEWSLETTER / CONTACT =================== */
.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 980px) { .connect-grid { grid-template-columns: 1fr; gap: 50px; } }

.newsletter {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 48px;
  position: relative;
}
.newsletter::before {
  content: '';
  position: absolute;
  top: 14px; left: 14px; right: 14px; bottom: 14px;
  border: 1px solid var(--ochre);
  pointer-events: none;
}
.newsletter h3 {
  font-size: 36px;
  line-height: 1.05;
  margin-bottom: 18px;
  color: var(--paper);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.newsletter h3 .ital { font-style: italic; color: var(--ochre); }
.newsletter p {
  font-size: 15.5px;
  color: rgba(245,238,222,0.75);
  margin-bottom: 28px;
  line-height: 1.6;
}
.newsletter form { display: flex; gap: 0; border: 1px solid var(--paper); }
.newsletter input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 20px;
  font-family: 'Lora', serif;
  font-size: 15px;
  color: var(--paper);
}
.newsletter input::placeholder { color: rgba(245,238,222,0.5); font-style: italic; }
.newsletter button {
  background: var(--ochre);
  color: var(--ink);
  border: none;
  padding: 16px 24px;
  font-family: 'Lora', serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}
.newsletter button:hover { background: var(--paper); }

.contact-block h3 {
  font-size: 36px;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.contact-block h3 .ital { font-style: italic; color: var(--sienna); }
.contact-block p { font-size: 16px; color: var(--ink-soft); margin-bottom: 28px; max-width: 420px; }
.contact-rows { margin-bottom: 32px; }
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(27,22,17,0.18);
  gap: 20px;
  flex-wrap: wrap;
}
.contact-row .label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.contact-row .value {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
}
.contact-row .value a:hover { color: var(--sienna); }

.socials { display: flex; gap: 16px; margin-top: 32px; }
.socials a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.socials a:hover { background: var(--ink); color: var(--paper); }
.socials svg { width: 18px; height: 18px; }

/* Contact form (full) */
.contact-form {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 48px;
}
.contact-form .field { margin-bottom: 22px; }
.contact-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 10px;
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 16px;
  font-family: 'Lora', serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .25s ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--ochre);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { margin-top: 8px; width: 100%; }
@media (max-width: 820px) { .contact-form { padding: 32px 24px; } }

/* Submission guidelines list */
.guidelines {
  background: var(--paper-warm);
  padding: 80px 64px;
  border-top: 1px solid rgba(27,22,17,0.12);
  border-bottom: 1px solid rgba(27,22,17,0.12);
}
.guidelines-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
}
@media (max-width: 980px) { .guidelines-grid { grid-template-columns: 1fr; gap: 40px; } .guidelines { padding: 60px 28px; } }
.guidelines ol {
  list-style: none;
  counter-reset: guide;
}
.guidelines ol li {
  counter-increment: guide;
  padding: 22px 0;
  border-bottom: 1px solid rgba(27,22,17,0.18);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: baseline;
}
.guidelines ol li::before {
  content: counter(guide, decimal-leading-zero);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 32px;
  color: var(--ochre);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.guidelines ol li h4 { font-size: 20px; margin-bottom: 6px; letter-spacing: -0.01em; }
.guidelines ol li p { font-size: 15px; color: var(--ink-soft); }

/* =================== FOOTER =================== */
footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 64px 32px;
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 64px; right: 64px;
  height: 1px;
  background: linear-gradient(to right, var(--ochre) 0, var(--ochre) 80px, transparent 80px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } footer { padding: 60px 28px 28px; } footer::before { left: 28px; right: 28px; } }
.footer-brand h3 {
  font-size: 32px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.05;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.footer-brand h3 .ital { font-style: italic; color: var(--ochre); }
.footer-brand p { font-size: 14px; color: rgba(245,238,222,0.6); max-width: 320px; line-height: 1.6; }
.footer-col h5 {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 18px;
  font-family: 'Lora', serif;
  font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { padding: 6px 0; }
.footer-col a {
  font-size: 14px;
  color: rgba(245,238,222,0.7);
  transition: color .25s ease;
}
.footer-col a:hover { color: var(--ochre); }
.footer-base {
  border-top: 1px solid rgba(245,238,222,0.15);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(245,238,222,0.5);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-base .ornament {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ochre);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* =================== ANIMATIONS =================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero p.lead, .hero-cta, .hero-eyebrow {
  animation: fadeUp .9s ease-out both;
}
.hero-eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .15s; }
.hero p.lead { animation-delay: .35s; }
.hero-cta { animation-delay: .5s; }
.hero-ornament { animation: fadeUp 1.2s ease-out .65s both; }

.page-header .eyebrow, .page-header h1, .page-header p.lead {
  animation: fadeUp .9s ease-out both;
}
.page-header h1 { animation-delay: .12s; }
.page-header p.lead { animation-delay: .26s; }

.book-hero .meta-row, .book-hero h1, .book-hero .by, .book-hero .blurb, .book-hero .specs, .book-hero .buy-row, .book-hero .cover-wrap {
  animation: fadeUp 1s ease-out both;
}
.book-hero h1 { animation-delay: .1s; }
.book-hero .by { animation-delay: .2s; }
.book-hero .blurb { animation-delay: .3s; }
.book-hero .specs { animation-delay: .4s; }
.book-hero .buy-row { animation-delay: .5s; }
.book-hero .cover-wrap { animation-delay: .15s; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }