/* =========================================================
   CONNIE BROCKWAY — SITE STYLES v2
   Aesthetic: literary, white canvas, one dramatic color
   Palette drawn directly from the FALLEN LADIES cover:
     - cream-white ground
     - warm near-black ink
     - oxblood-wine (boot) as the only saturated accent
     - putty-taupe and dusty rose-mauve as subtle neutrals
     - pearl ivory for card surfaces
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Canvas — TRUE WHITE. The literary-confident, register-flexible choice.
     Works for FALLEN LADIES (literary mystery) and FETCHING LOVE (rom-com) alike. */
  --paper:        #FFFFFF;   /* primary background — true white */
  --paper-soft:   #FFFFFF;   /* secondary sections stay white; structure comes from rules + spacing */
  --paper-card:   #FFFFFF;   /* card surfaces */

  /* Ink — warm near-black, never pitch */
  --ink:          #14100E;   /* primary text */
  --ink-soft:     #3D2E26;   /* secondary text */
  --ink-muted:    #7A6557;   /* meta text */

  /* THE umbrella accent — LOCKED (revised).
     DEEPER WARM BROWN #584238 (LAB L30 a8 b10). Slightly darker and more saturated
     than prior grayed chocolate; still pulls warm-orange enough to separate from
     the cover's red boot. */
  --oxblood:      #584238;   /* primary inline-link / accent color — deeper warm brown */
  --oxblood-deep: #45332A;   /* darker for link hover/pressed */
  --oxblood-soft: #F9F7F6;   /* faint warm-brown tint */

  /* LOCKED palette — buttons stay greige, covers move to cool blue.
     Buttons:  L74 a3 b6 #C0B4AB ; hover L54 a3 b6 #8B7F77
     Covers:   L88.9 a-4.7 b-1.6 #D4E2E2 (cool literary, pulls the brand pivot) */
  --button:       #C0B4AB;
  --button-deep:  #8B7F77;
  --cover-bg:     #D4E2E2;
  --cover-border: #8FA3A2;

  /* Hairlines & subtle neutrals */
  --taupe:        #B5A892;   /* darker hairline / dividers */
  --taupe-soft:   #E4DCC8;   /* lighter hairline */
  --rose:         #9C7B7C;   /* meta type, small marks */
  --rose-soft:    #D4BFC0;
  --lace:         #F5EFE2;   /* rare secondary surface */

  /* Type — LOCKED.
     IVYMODE via Adobe Fonts (kit bvm4cqs). High-contrast didone serif.
     Available weights: 200, 300, 400, 600, 700 + italics on 300/400/600/700.
     We use 300 (Light) for hero display and 400 (Regular) for wordmark. */
  --brand:   'ivymode', 'Cormorant Garamond', Georgia, serif;
  --display: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --body:    'Lora', Georgia, 'Times New Roman', serif;
  --ui:      'Cormorant Garamond', Georgia, serif;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 10vw, 8rem);  /* more breathing room than v1 */
  --radius: 2px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--oxblood); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--oxblood-deep); }
button { font-family: inherit; cursor: pointer; }

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  line-height: 1.12;
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 500; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

p { margin: 0 0 1.1em; }
.lede {
  font-size: 1.18rem;
  color: var(--ink-soft);
  line-height: 1.6;
  font-style: normal;          /* italics stripped — Broc preference */
}

/* Italics removed across the design system. Book titles distinguished via the
   underlying typography instead. */
em, i { font-style: normal; }
.book-cover .cover-title,
.book .book-title,
.feature .feature-art::before,
.series-heading h3,
.timeline .when {
  font-style: normal;
}

.eyebrow {
  font-family: var(--ui);
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 1.25rem;
  font-weight: 600;
}

/* Simple typographic rule (replaces the gold flourish) */
.rule,
.flourish {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: clamp(4rem, 10vw, 6rem);
  margin: 1.5rem auto 2rem;
  color: var(--taupe);
}
.flourish::before,
.flourish::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--taupe-soft);
}
.flourish svg { width: 5px; height: 5px; opacity: 0.7; fill: var(--rose); }

/* ---------- 4. LAYOUT ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--deep { background: var(--paper-soft); }
.section--noir { background: var(--paper-soft); }  /* re-mapped: no more dark sections */
.section--noir h1, .section--noir h2, .section--noir h3 { color: var(--ink); }
.section--noir .eyebrow { color: var(--rose); }

/* Section transitions no longer use faint full-width hairlines.
   Where breath is wanted, drop <hr class="kicker-rule" /> explicitly. */

.grid-2 {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ---------- 5. NAV / HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--taupe-soft);
}
/* Masthead nav: split layout — items left of brand, items right of brand.
   Brand is the visual center of gravity. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.6rem var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  font-family: var(--brand);
  font-size: 2.5rem;
  color: var(--ink);
  letter-spacing: 0.035em;
  text-transform: uppercase;       /* All caps for true masthead weight */
  font-weight: 600;                /* Bolder Ivymode (kit has 600 available) */
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.brand small {
  display: block;
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--rose);
  margin-top: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

/* Side nav lists — flank the brand */
.nav-side {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.8rem);
  list-style: none;
  padding: 0; margin: 0;
  font-family: var(--ui);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-side--left { justify-content: flex-start; }
.nav-side--right { justify-content: flex-end; }
.nav-side a {
  color: var(--ink);
  position: relative;
  padding-bottom: 2px;
}
.nav-side a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--oxblood);
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
.nav-side a:hover::after,
.nav-side a.active::after { transform: scaleX(1); }
.nav-side a.active { color: var(--oxblood); }

/* Mobile menu — full list dropdown when toggle is open */
.nav-mobile {
  display: none;
  list-style: none;
  padding: 0; margin: 0;
}
.nav-mobile.open {
  display: flex;
  flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-top: 1px solid var(--taupe-soft);
  border-bottom: 1px solid var(--taupe-soft);
  padding: 1.5rem var(--gutter);
  gap: 1.1rem;
  font-family: var(--ui);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 49;
}
.nav-mobile a { color: var(--ink); }
.nav-mobile a:hover { color: var(--oxblood); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.45rem 0.8rem;
  font-family: var(--ui);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  justify-self: end;
}

/* Mobile breakpoint — hide split nav, show centered brand + hamburger */
@media (max-width: 940px) {
  .nav { grid-template-columns: 1fr auto 1fr; position: relative; }
  .nav-side { display: none; }
  .nav-toggle { display: inline-block; grid-column: 3; }
  .brand { grid-column: 2; }
  /* Make brand a bit smaller on mobile so it fits with the toggle */
  .brand { font-size: 1.85rem; letter-spacing: 0.03em; }
  .brand small { font-size: 0.72rem; letter-spacing: 0.36em; margin-top: 0.45rem; }
}
@media (max-width: 420px) {
  .brand { font-size: 1.55rem; }
  .brand small { font-size: 0.65rem; }
  .nav { padding: 1.1rem var(--gutter); }
}

/* ---------- 5b. LAWHON HERO MASTHEAD + HYBRID STICKY BAR ----------
   Big thin Ivymode wordmark + eyebrow credential + single-row nav below.
   Hero-only (scrolls away with the page).
   Slim sticky bar fades in via JS once hero masthead scrolls off. */

.lawhon-header {
  background: #FFFFFF;
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(1.3rem, 2.5vw, 2.2rem);
  text-align: center;
  border-bottom: 2px solid #584238;
}

/* Short centered walnut rule — editorial section break.
   Drop <hr class="kicker-rule"> wherever a deliberate breath is wanted. */
.kicker-rule {
  border: 0;
  background: #584238;
  height: 2px;
  width: clamp(60px, 18vw, 140px);
  margin: clamp(2.5rem, 5vw, 4rem) auto;
}

/* Editorial stamp below the wordmark — italic Cormorant, sentence case */
.lawhon-wordmark::after {
  content: 'Twin Cities & the Driftless';
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rose);
  margin-top: 0.5rem;
}

/* Drop cap utility — apply class to a paragraph to enlarge first letter.
   Uses !important to beat the .lede font-size cascade. */
p.has-drop-cap::first-letter {
  font-family: var(--brand) !important;
  font-weight: 300 !important;
  font-size: 5.2rem !important;
  float: left !important;
  line-height: 0.85 !important;
  padding: 0.35rem 0.7rem 0 0 !important;
  color: #584238 !important;
  text-transform: none !important;
}

/* Editorial pull quote — for in-prose featured quotes */
.pull-quote {
  text-align: center;
  margin: 0 auto;
  max-width: 38ch;
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.pull-quote .pull-quote-text {
  font-family: var(--brand);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.pull-quote .pull-quote-cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rose);
}
.lawhon-eyebrow {
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  letter-spacing: 0.03em;
  margin: 0 0 0.95rem;
  color: var(--ink);
}
.lawhon-wordmark {
  font-family: var(--brand);
  font-weight: 300;
  font-size: clamp(2.1rem, 8.5vw, 5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin: 0;
  display: block;
  text-decoration: none;
}
.lawhon-wordmark:hover { color: var(--ink); }
.lawhon-nav {
  list-style: none;
  padding: 0;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.2vw, 2rem) clamp(1rem, 2.5vw, 2.2rem);
  font-family: var(--brand);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  letter-spacing: 0.025em;
  font-weight: 400;
}
.lawhon-nav a {
  color: var(--ink);
  position: relative;
  padding-bottom: 2px;
}
.lawhon-nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--oxblood);
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
.lawhon-nav a:hover::after,
.lawhon-nav a.active::after { transform: scaleX(1); }
.lawhon-nav a.active { color: var(--oxblood); }
@media (max-width: 600px) {
  .lawhon-wordmark { letter-spacing: 0.08em; }
  .lawhon-nav { font-size: 0.82rem; gap: 0.75rem 1.1rem; }
  .lawhon-eyebrow { font-size: 0.84rem; }
}

.sticky-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--taupe-soft);
  padding: 0.85rem var(--gutter);
  z-index: 100;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.sticky-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sticky-brand {
  font-family: var(--brand);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}
.sticky-brand:hover { color: var(--ink); }
.sticky-nav {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  gap: clamp(0.85rem, 1.8vw, 1.6rem);
  font-family: var(--brand);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.025em;
}
.sticky-nav a {
  color: var(--ink);
  position: relative;
  padding-bottom: 2px;
}
.sticky-nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--oxblood);
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
.sticky-nav a:hover::after { transform: scaleX(1); }
@media (max-width: 700px) {
  .sticky-nav { display: none; }
  .sticky-bar-inner { justify-content: center; }
}

/* ---------- 6. HERO ---------- */
.hero {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding: clamp(6rem, 14vw, 11rem) 0 clamp(5rem, 12vw, 9rem);
}
.hero h1 {
  font-family: var(--brand);
  color: var(--ink);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300;       /* Light Ivymode reads luxurious at large display */
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.005em;
  max-width: none;
  line-height: 1.05;
  margin-bottom: 2rem;
}

/* FL-zone — Fetching Love sections on any page get turquoise via this scoped
   override of the accent variable. Add class to any container that should be
   in "FL color mode" (e.g., the FL feature block on the home page). */
.fl-zone {
  --oxblood:      #1F8E90;
  --oxblood-deep: #156C6D;
  --oxblood-soft: #F8FAFA;
}
.hero .lede {
  color: var(--ink-soft);
  max-width: 58ch;
  font-style: normal;
  font-size: 1.15rem;
}
.hero .eyebrow { color: var(--rose); }

/* ---------- 7. BUTTONS / LINKS ---------- */
.btn {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--button);
  color: var(--ink);
  background: transparent;
  transition: all .25s ease;
  font-weight: 600;
}
.btn:hover { background: var(--button); color: var(--ink); }
.btn--solid { background: var(--button); color: var(--ink); border-color: var(--button); }
.btn--solid:hover { background: var(--button-deep); color: var(--paper); border-color: var(--button-deep); }
/* legacy class names from v1, re-mapped to new greige */
.btn--gold { background: var(--button); color: var(--ink); border-color: var(--button); }
.btn--gold:hover { background: var(--button-deep); color: var(--paper); border-color: var(--button-deep); }
.btn--light { border-color: var(--ink); color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--paper); }

.linkish {
  font-family: var(--ui);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  font-weight: 600;
}
.linkish:hover { color: var(--oxblood-deep); }

/* ---------- 8. CARDS ---------- */
.card {
  background: var(--paper-card);
  border: 1px solid var(--taupe-soft);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--taupe);
  box-shadow: 0 10px 30px -18px rgba(26, 16, 12, 0.18);
}
.card h3 { margin-bottom: 0.4em; }
.card .meta {
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.cards-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 700px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 9. BOOK COVER PLACEHOLDER ---------- */
.book {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.book-cover {
  aspect-ratio: 2 / 3;
  background: var(--cover-bg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cover-border);
  box-shadow: 0 14px 40px -25px rgba(26, 16, 12, 0.4);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 1.5rem;
  color: var(--ink);
  text-align: center;
}
.book-cover::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(20, 16, 14, 0.15);
  pointer-events: none;
}
.book-cover .cover-title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
}
.book-cover .cover-author {
  margin-top: 1.2rem;
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.book .book-title {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.25rem;
  margin: 0;
}
.book .book-series {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 600;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 700px) { .books-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .books-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .books-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- 10. FORMS ---------- */
.form { display: grid; gap: 1rem; max-width: 540px; }
.form--wide { max-width: none; }
.form label {
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.form input,
.form textarea,
.form select {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: var(--paper-card);
  border: 1px solid var(--taupe-soft);
  color: var(--ink);
  border-radius: 0;
  transition: border-color .2s ease, background .2s ease;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--oxblood);
  background: var(--paper);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form .row { grid-template-columns: 1fr 1fr; } }

.newsletter-block {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  text-align: center;
}
.newsletter-block h2 { color: var(--ink); }
.newsletter-block .form {
  margin: 2rem auto 0;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  max-width: 520px;
}
.newsletter-block input {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--taupe);
}
.newsletter-block input::placeholder { color: var(--ink-muted); }
@media (max-width: 540px) {
  .newsletter-block .form { grid-template-columns: 1fr; }
}

/* ---------- 11. TIMELINE / EVENTS ---------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--taupe-soft);
}
.timeline li:last-child { border-bottom: none; }
.timeline .when {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.15rem;
  color: var(--oxblood);
}
.timeline .what h3 { margin-bottom: 0.2em; }
.timeline .where {
  font-family: var(--ui);
  font-size: 0.76rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
@media (max-width: 640px) {
  .timeline li { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- 12. POST CARDS (BLOG / NEWS) ---------- */
.posts { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .posts { grid-template-columns: 1fr 1fr; } }
.post {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--taupe-soft);
}
.post .meta { color: var(--rose); }
.post h3 { margin: 0.2em 0 0.4em; }
.post h3 a { color: var(--ink); }
.post h3 a:hover { color: var(--oxblood); }

/* ---------- 13. FEATURE BLOCK (PROJECTS) ---------- */
.feature {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .feature { grid-template-columns: 1fr 1.1fr; }
  .feature--reverse > :first-child { order: 2; }
}
.feature .feature-art {
  aspect-ratio: 4 / 5;
  background: var(--lace);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -36px rgba(26, 16, 12, 0.32);
  border: 1px solid var(--taupe);
}
.feature .feature-art::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: normal;
  color: var(--ink-soft);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  text-align: center;
  padding: 2rem;
}
.feature .feature-art::after {
  content: '';
  position: absolute; inset: 14px;
  border: 1px solid rgba(122, 32, 48, 0.22);
  pointer-events: none;
}

/* ---------- 14. FOOTER ---------- */
.site-footer {
  background: var(--paper);   /* white footer — confident, modern, register-flexible */
  color: var(--ink-soft);
  padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
  border-top: 1px solid var(--taupe-soft);
}
.site-footer .wrap {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .site-footer .wrap { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h4 {
  color: var(--rose);
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--oxblood); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.site-footer .brand { color: var(--ink); }
.site-footer .brand small { color: var(--rose); }
.colophon {
  border-top: 1px solid var(--taupe-soft);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  font-weight: 600;
}

/* ---------- 15. FADE-IN ON SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 15b. RETAILER LINKS (BOOKS) ---------- */
.retailers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.retailers a {
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--taupe);
  color: var(--ink-soft);
  background: transparent;
  transition: all .2s ease;
  font-weight: 600;
}
.retailers a:hover {
  border-color: var(--oxblood);
  color: var(--oxblood);
}

.selected-works {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .selected-works { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .selected-works { grid-template-columns: repeat(4, 1fr); } }

.selected-works .book .book-blurb {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0.3rem 0 0;
}

.series-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--taupe-soft);
  padding-bottom: 0.6rem;
  margin: clamp(3rem, 5vw, 4rem) 0 1.5rem;
}
.series-heading h3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: normal;
  margin: 0;
}
.series-heading .series-note {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 600;
}

/* ---------- 16. UTILITY ---------- */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mw-prose { max-width: 60ch; }
.mw-prose.center { margin-left: auto; margin-right: auto; }
.kicker {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--oxblood);
  color: var(--oxblood);
  background: var(--oxblood-soft);
  font-weight: 600;
}