/* ==========================================================================
   Self-hosted fonts. Both families are VARIABLE fonts, so one file per
   family/style covers the whole weight range declared in font-weight.
   Downloaded from Google Fonts; both are SIL Open Font License, which
   permits self-hosting. Nothing is fetched from Google at runtime.
   ========================================================================== */

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/karla-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/karla-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Kristin Billerbeck — redesign concept
   Palette pulled from the "What a Girl Wants" cover, desaturated way down.
   ========================================================================== */

:root {
  --paper:       #FDFBF9;
  --paper-warm:  #F8F2EC;
  --paper-blush: #F6EAE7;
  --paper-sage:  #EEF3EF;

  --ink:         #2B2628;
  --ink-soft:    #6E6467;
  --ink-faint:   #9A9093;

  --rose:        #B4697F;
  --rose-deep:   #96536A;
  --rose-pale:   #E7CBD1;

  --sage:        #8FAE9C;
  --sage-pale:   #D6E3D9;

  --lilac:       #DAD3E4;
  --line:        #EAE0D9;
  --gilt:        #C0A063;

  --serif: "Cormorant Garamond", "Bodoni MT", Didot, Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: 0.005em;
}

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

a { color: var(--rose-deep); text-decoration: none; }
a:hover { color: var(--rose); }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; }

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

.eyebrow--muted { color: var(--ink-faint); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
}

.script {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  color: var(--rose-deep);
  font-weight: 400;
}

.rule {
  width: 44px;
  height: 1px;
  background: var(--rose-pale);
  border: 0;
  margin: 2rem 0;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.wrap--narrow { max-width: 760px; }

section { padding: clamp(3.5rem, 8vw, 7rem) 0; }

.tint-warm  { background: var(--paper-warm); }
.tint-blush { background: var(--paper-blush); }
.tint-sage  { background: var(--paper-sage); }

.center { text-align: center; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(253, 251, 249, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark em { font-style: italic; color: var(--rose); }

.nav { display: flex; align-items: center; gap: 0.35rem; }

.nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-radius: 2px;
  transition: color .18s ease, background .18s ease;
}
.nav a:hover { color: var(--rose-deep); background: var(--paper-blush); }
.nav a.is-current { color: var(--ink); }
.nav a.is-current::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--rose);
  margin-top: 3px;
}

.has-sub { position: relative; }

.sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.4rem;
  box-shadow: 0 14px 34px rgba(43, 38, 40, 0.09);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all .18s ease;
}
.has-sub:hover .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a { padding: 0.5rem 0.7rem; letter-spacing: 0.1em; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.5rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--rose);
  background: var(--rose);
  color: #fff;
  transition: all .2s ease;
}
.btn:hover { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--rose-deep); }
.btn--ghost:hover { background: var(--rose); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

/* ---------- banner (home masthead) ----------
   Deliberately the one loud thing on the site: a warm wash, a gilt hairline,
   and the name at display size. Everything below it stays quiet.            */

.banner {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(115% 85% at 50% -12%, rgba(231, 203, 209, .55) 0%, rgba(246, 234, 231, 0) 60%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 74%);
}

/* Gilt hairline along the bottom edge, faded at both ends. */
.banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201, 169, 97, .55) 22%,
    rgba(201, 169, 97, .8) 50%,
    rgba(201, 169, 97, .55) 78%, transparent 100%);
}

.banner__crest { text-align: center; }

.banner__flourish {
  display: block;
  width: clamp(170px, 30vw, 240px);
  height: auto;
  margin: 0 auto 1.5rem;
  color: var(--gilt);
}
.banner__flourish--sm {
  width: clamp(110px, 20vw, 150px);
  margin: 1.6rem auto 0;
  opacity: .8;
}

.banner__name {
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
}
.banner__name em { font-style: italic; color: var(--rose); }

.banner__creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(.45rem, 2vw, 1rem);
  margin: 1.4rem 0 0;
  font-size: clamp(.62rem, 1.4vw, .78rem);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.banner__creds i {
  font-style: normal;
  font-size: .5em;
  color: var(--gilt);
  transform: translateY(-.15em);
}

.banner__split {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.banner__genre { margin-bottom: 0.4em; }
.banner__genre em { font-style: italic; color: var(--rose); }

.banner__showcase-label {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Covers fanned out like a hand of cards. Each card carries its own angle and
   lift in --r / --y so one transform rule covers all four; the :hover rule
   sits after the nth-child rules on purpose — same specificity, later wins. */
.cover-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 1rem;
}

.cover-fan .cover {
  flex: 0 0 auto;
  width: clamp(92px, 12vw, 138px);
  margin: 0 clamp(-20px, -2.4vw, -14px);
  transform-origin: 50% 100%;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
}

.cover-fan .cover:nth-child(1) { --r: -11deg; --y: 14px; z-index: 1; }
.cover-fan .cover:nth-child(2) { --r:  -4deg; --y:  2px; z-index: 2; }
.cover-fan .cover:nth-child(3) { --r:   4deg; --y:  2px; z-index: 3; }
.cover-fan .cover:nth-child(4) { --r:  11deg; --y: 14px; z-index: 4; }

.cover-fan .cover:hover,
.cover-fan .cover:focus-visible { --y: -16px; z-index: 9; }

/* ---------- hero ---------- */

.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 7vw, 5.5rem); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.hero h1 { margin-bottom: 0.35em; }
.hero h1 em { font-style: italic; color: var(--rose); }

/* ---------- book covers (typographic placeholders) ---------- */

.cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(160deg, var(--paper-blush), var(--paper-warm));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.4rem 1.2rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(43, 38, 40, 0.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cover:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(43, 38, 40, 0.12); }

.cover::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(180, 105, 127, 0.16);
  border-radius: 1px;
  pointer-events: none;
}

.cover .cover-series {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 600;
}
.cover .cover-title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  color: var(--ink);
  margin: auto 0;
  padding: 0.5rem 0;
}
.cover .cover-author {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cover--sage  { background: linear-gradient(160deg, var(--sage-pale), var(--paper-warm)); }
.cover--lilac { background: linear-gradient(160deg, var(--lilac), var(--paper-warm)); }
.cover--cream { background: linear-gradient(160deg, var(--paper-warm), #F1E7DE); }

.cover--hero { max-width: 330px; margin: 0 auto; }

/* Real cover art: the image is the cover, so drop the gradient, padding and
   decorative inset frame the typographic cards use. */
.cover--art { padding: 0; background: none; overflow: hidden; }
.cover--art::before { display: none; }
.cover--art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ---------- book grids ---------- */

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem);
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.book-grid li { margin: 0; text-align: center; }

/* Center each cover within its cell rather than stretching it full-width. */
.book-grid .cover { max-width: 210px; margin-left: auto; margin-right: auto; }

.book-name {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0.9rem 0 0.2rem;
  color: var(--ink);
}

/* Titles in the same rose italic serif used for pull quotes and taglines. */
.book-grid--script .book-name {
  font-style: italic;
  font-size: 1.24rem;
  color: var(--rose-deep);
}

.book-meta {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.book-link {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--rose-pale);
  padding-bottom: 1px;
}

/* ---------- series blocks ---------- */

.series-block { margin-bottom: clamp(3rem, 6vw, 5rem); }
.series-block:last-child { margin-bottom: 0; }

.series-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.series-head h3 { margin: 0; }
.series-head .count {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- pull quote ---------- */

.quote {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--rose-pale);
  border-bottom: 1px solid var(--rose-pale);
}
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.quote cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- misc cards ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(43,38,40,.08); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* ---------- writers list ---------- */

.advice { list-style: none; padding: 0; margin: 0; counter-reset: tip; }
.advice > li {
  counter-increment: tip;
  position: relative;
  padding: 0 0 2rem 4.2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.advice > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.advice > li::before {
  content: counter(tip, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.15rem;
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--rose-pale);
  line-height: 1;
}
.advice h4 { margin-bottom: 0.35rem; }
.advice p { margin-bottom: 0; color: var(--ink-soft); }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.tag {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-soft);
  background: var(--paper);
}

/* ---------- gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
}
.photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--paper-blush), var(--sage-pale));
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.photo--tall { aspect-ratio: 3 / 4; }

/* A real photograph in place of the gradient placeholder — the same idea as
   .cover--art for book covers. The ratio matches the source file so nothing
   gets cropped by object-fit. */
.photo--art {
  background: none;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(43, 38, 40, 0.12);
}
.photo--art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.photo--portrait { aspect-ratio: 2 / 3; }

/* Let the image set its own height instead of being cropped to a fixed ratio.
   Used for the family group shot, which is tall and would lose heads and feet
   to the placeholder's 4/3 box. */
.photo--free { aspect-ratio: auto; }
.photo--free img { height: auto; }

/* Award seal, overlapping the bottom corner of the book that won it. It sits
   outside .cover (which clips its own overflow) so it can hang off the edge.
   The cover's hover lift is cancelled here, otherwise the book would slide out
   from under a seal that stays put.

   CURRENTLY UNUSED — pulled from the home page 2026-07-29 because it didn't
   look right there. Kept on purpose, along with the artwork at
   /assets/img/artisan-book-reviews-award.png; index.cshtml carries the markup
   needed to restore it. Don't delete as dead code without checking there. */
.book-with-seal { position: relative; }
.book-with-seal .cover:hover { transform: none; }

.award-seal {
  position: absolute;
  right: -30px;
  bottom: -18px;
  z-index: 2;
  width: clamp(101px, 43%, 146px);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(43, 38, 40, 0.3));
}

/* ---------- form ---------- */

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.field input, .field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.8rem 0.95rem;
  transition: border-color .18s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rose-pale);
}
.field textarea { resize: vertical; min-height: 150px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3rem;
}
.footer-grid h4 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a { color: var(--ink-soft); font-size: 0.95rem; }
.footer-links a:hover { color: var(--rose-deep); }

.footer-base {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ---------- mockup note ---------- */

.mock-note {
  background: var(--ink);
  color: #F3ECE8;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.6rem 1rem;
}
.mock-note strong { color: var(--rose-pale); font-weight: 600; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-grid, .split, .banner__split { grid-template-columns: 1fr; }
  .hero-grid, .banner__split { gap: clamp(1.75rem, 6vw, 3rem); }
  .hero-grid .cover--hero { order: -1; max-width: 240px; }
  .banner__showcase { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.6rem var(--gut) 1.2rem;
    box-shadow: 0 18px 34px rgba(43,38,40,.08);
  }
  .nav.is-open { display: flex; }
  /* roomier tap targets in the stacked menu */
  .nav > a, .has-sub > a { padding: 0.95rem 0.5rem; font-size: 0.8rem; }
  .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    margin: 0 0 0.3rem 0.9rem;
    padding: 0;
    min-width: 0;
  }
  .sub a { padding: 0.7rem 0.7rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- phones ---------- */

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  section { padding: 3rem 0; }

  /* Buttons stack full-width so they're easy to thumb */
  .btn-row { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .btn-row .btn { width: 100%; text-align: center; padding: 0.95rem 1.4rem; }

  /* Backlist as a tidy 2-up grid that fills the screen width */
  .book-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.1rem; }
  .book-grid .cover { max-width: 100%; }
  .book-name { font-size: 1rem; margin-top: 0.7rem; }

  /* Gallery 2-up */
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }

  /* A slightly smaller hero cover leaves room for the headline */
  .hero-grid .cover--hero { max-width: 200px; }

  /* Tighter fan so four covers still fit across a phone */
  .cover-fan .cover { width: clamp(84px, 22vw, 110px); margin: 0 -16px; }

  /* "Kristin Billerbeck" is 18 characters — give it room to breathe rather
     than letting it wrap mid-name on a phone. */
  .banner__name { font-size: clamp(2rem, 9.5vw, 2.9rem); }
  .banner__creds { letter-spacing: .18em; gap: .4rem .7rem; }

  /* Thumb-friendly social buttons */
  .social a { width: 44px; height: 44px; }

  .footer-base { justify-content: center; text-align: center; }
  .quote p { font-size: 1.2rem; }
}

/* ---------- small phones ---------- */

@media (max-width: 380px) {
  .wordmark { font-size: 1.35rem; }
  .book-grid { grid-template-columns: 1fr; }
  .book-grid .cover { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
}

/* ==========================================================================
   Accessibility, social, and utility classes.
   The utilities exist to pull repeated inline style="" attributes back into
   the stylesheet — easier to maintain and one step closer to dropping
   'unsafe-inline' from style-src.
   ========================================================================== */

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 0;
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

/* ---------- social icons ---------- */

.social {
  display: flex;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--paper);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.social a:hover {
  color: var(--rose-deep);
  border-color: var(--rose-pale);
  transform: translateY(-2px);
}

.social svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social svg .fill { fill: currentColor; stroke: none; }

.social--inline { justify-content: center; margin-top: 2rem; }

/* ---------- footer ---------- */

.footer-blurb {
  color: var(--ink-soft);
  margin-top: 1rem;
  max-width: 34ch;
}

/* ---------- utilities ---------- */

.hero--short      { padding-bottom: 2rem; }
.section--tight   { padding-top: 2rem; }

.lede--measured   { max-width: 52ch; margin-left: auto; margin-right: auto; }
.script--measured { max-width: 46ch; margin: 1rem auto 0; }

.btn-row--spaced  { margin-top: 2rem; }
.btn-row--center  { justify-content: center; margin-top: 1.8rem; }

.card p:last-child { margin-bottom: 0; }
.card-note        { color: var(--ink-soft); }

.book-blurb {
  font-size: .92rem;
  color: var(--ink-soft);
  margin: .5rem 0 0;
}

.cover--panel { max-width: 300px; }
.portrait     { max-width: 340px; }
.portrait--right { margin-left: auto; }

.quote--feature {
  max-width: 820px;
  margin: 0 auto 3.5rem;
  text-align: center;
  border-color: rgba(180, 105, 127, .28);
}

.series-tagline { margin: -1rem 0 2rem; }

@media print {
  .site-header, .site-footer, .skip-link, .btn-row { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
}

.btn--large { font-size: .8rem; padding: 1.1rem 2.8rem; }

.social--inline-wrap { display: block; margin-top: 2.5rem; }
.social--inline-wrap .social { justify-content: center; }

.footer-links--inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin-top: 1.25rem;
}
.footer-links--inline li { margin-bottom: 0; }

/* ---------- long-form prose (chapter excerpts) ---------- */

.prose {
  max-width: 62ch;
  font-size: 1.06rem;
  line-height: 1.85;
}
.prose p { margin: 0 0 1.35em; }

/* Dialogue and short beats read better tucked in slightly */
.prose p + p { text-indent: 0; }

.prose-open::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.6em;
  line-height: .82;
  padding: 0.08em 0.1em 0 0;
  color: var(--rose-deep);
}

/* ---------- read-more (native <details>, no JS) ---------- */

.read-more { position: relative; }

/* strip the default disclosure triangle in every engine */
.read-more > summary { list-style: none; }
.read-more > summary::-webkit-details-marker { display: none; }
.read-more > summary::marker { content: ""; }

.read-more > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 2.75rem 0 0.5rem;
  text-align: center;
  /* fade the paragraph above into the page so the cut looks deliberate */
  background: linear-gradient(to bottom, transparent, var(--paper) 45%);
  margin-top: -2.75rem;
}

.read-more-label {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: 1px solid var(--rose);
  border-radius: 2px;
  background: var(--rose);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease;
}
.read-more > summary:hover .read-more-label {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
}

.read-more-meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* once open, the control has done its job — reclaim the space */
.read-more[open] > summary { display: none; }

.read-more-body > p:first-child { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .read-more[open] .read-more-body > p:first-child { animation: fade-in .35s ease; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}