/* jhmira Bookshelf.
   Type, colour and spacing are taken from jhmira.com's own stylesheet (the
   Odrin theme's master.css plus the page's inline overrides), not from
   screenshots: headings in Cinzel Decorative, labels and buttons in Gentium
   Book Basic, running text in Helvetica/Arial at 14px. Where a number below
   looks oddly specific it is quoted from there. */

:root {
  --paper: #ffffff;
  --paper-2: #faf7f1;
  --cream: #e5dcc3;
  --cream-soft: #f3ece0;
  --ink: #222;            /* headings */
  --ink-soft: #333;       /* running text */
  --muted: #9a9082;
  --coral: #faab9f;
  --coral-soft: #f4adad;  /* the cover mark's initial is a shade lighter */
  --coral-deep: #ef8b7b;
  --gold: #d38d45;
  --line: #ece5d8;
  --line-2: #e2dccf;
  --shadow-sm: 0 6px 20px rgba(40, 32, 18, 0.08);
  --shadow: 0 18px 44px rgba(40, 32, 18, 0.16);
  --radius: 8px;

  --font-display: "Cinzel Decorative", Georgia, serif;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Gentium Book Basic", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 0.875rem;          /* 14px */
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.42857143;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* The theme's .fw-container: 1170px from 1200px up, with 25px gutters. */
.container { width: min(1170px, 100% - 50px); margin-inline: auto; }
/* The shelf row carries three books plus the detail panel, which needs more
   than the theme's text column; it widens on its own and wraps below that. */
.showcase > .container { width: min(1340px, 100% - 50px); }

a { color: var(--ink); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--coral-deep); }

h1, h2, h3 { color: var(--ink); line-height: 1.4; font-weight: 700; }

/* small uppercase label used for author / meta */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- header ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;              /* .navigation-logo h1 is 32px */
  letter-spacing: 0.01em;
  color: var(--ink);
}
.brand__mark {
  display: inline-grid;
  place-items: center;
  width: 1.5em; height: 1.5em;
  margin-right: 4px;
  border: 2px solid var(--coral);
  color: var(--coral-deep);
  border-radius: 4px;
  transform: translateY(2px);
}
/* .main-navigation-menu a: 13px/700, 1px tracking, #333, uppercase. */
.site-nav a {
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.077em;
  line-height: 1.46em;
  text-transform: uppercase;
  margin-left: 30px;
}

.site-main { min-height: 64vh; padding-bottom: 80px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding: 30px 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- buttons ---------- */
/* The theme's .btn: Gentium Book Basic, 17px/600, 0.05em tracking, uppercase,
   in a 1px #232323 box with no fill and no radius. Hover fills it coral. */
.btn {
  position: relative;
  display: inline-block;
  background: transparent;
  color: #000;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.42857143;
  text-align: center;
  padding: 15px 35px;
  border: 1px solid #232323;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-serif);
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.btn:hover { background: var(--coral); border-color: var(--coral); color: #fafafa; }
.btn--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

/* ---------- flash ---------- */
.flash-wrap { margin-top: 18px; }
.flash {
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  margin-bottom: 10px;
}
.flash--success { border-left-color: #4f9d69; }
.flash--error { border-left-color: var(--coral-deep); }

/* ---------- hero / shelf header ---------- */
.hero, .shelf-hero {
  background: #eff0f0;
  border-bottom: 1px solid var(--line);
  padding: 84px 0 76px;
  text-align: center;
}
/* The cover band on the home page: a tall photo strip with the mark, the
   tagline and the Browse stories box stacked down its left edge. */
.shelf-hero--cover {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(340px, 31vw, 400px);
  padding: 56px 0;
  text-align: left;
}
.shelf-hero--cover > .container { position: relative; z-index: 1; }
.hero__title, .shelf-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.shelf-hero__title::after {
  content: "";
  display: block;
  width: 56px; height: 2px;
  margin: 20px auto 0;
  background: var(--coral);
}
.hero__intro, .shelf-hero__intro {
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  max-width: 620px;
  margin-inline: auto;
}
.hero__cta { margin-top: 30px; }
.hero__cta .btn { margin: 0 6px; }

/* ---------- category chips ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 44px 0 40px;
}
.chip {
  padding: 8px 22px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.chip:hover { border-color: var(--coral); color: var(--coral-deep); }
.chip--active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip--active:hover { color: #fff; }

/* ---------- book grid ---------- */
.book-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 40px 30px;
}
.book-card { text-align: center; }
.book-card__link { color: inherit; display: block; }
.book-card__cover {
  aspect-ratio: 2 / 3;
  border-radius: 2px 4px 4px 2px;
  overflow: hidden;
  box-shadow:
    1px 0 0 #efe7d6, 3px 0 0 #e3d9c3, 5px 0 0 #efe7d6,
    7px 0 0 #e3d9c3, 9px 0 0 #efe7d6,
    8px 10px 22px rgba(40, 32, 18, 0.18);
  background: var(--paper-2);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.book-card__link:hover .book-card__cover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.book-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 18px; text-align: center;
  background: linear-gradient(155deg, var(--coral) 0%, var(--gold) 100%);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.05rem;
}
.book-card__meta { padding: 18px 6px 0; }
.book-card__title {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}
.book-card__author {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0;
}
.book-card__rating { margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }

/* ---------- stars (CSS-only via --rating 0..5) ---------- */
.stars {
  --rating: 0;
  display: inline-block; position: relative;
  font-size: 0.95rem; line-height: 1;
  color: var(--line-2); letter-spacing: 2px;
}
.stars::before {
  content: "★★★★★";
  position: absolute; left: 0; top: 0;
  width: calc(var(--rating) / 5 * 100%);
  overflow: hidden; white-space: nowrap;
  color: var(--gold);
}

.empty, .reviews__empty {
  text-align: center; color: var(--muted);
  font-family: var(--font-serif); font-size: 1.1rem;
  padding: 60px 0;
}

/* ---------- reader ---------- */
.reader { padding-top: 36px; }
.reader__head { margin-bottom: 24px; text-align: center; }
.reader__back {
  display: inline-block;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 14px;
}
.reader__title { font-family: var(--font-serif); font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0; }
.reader__author { margin: 8px 0 0; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.reader__stage {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: min(1160px, 94vw); margin: 0 auto;
  padding: 22px; background: #1c1a17; border-radius: var(--radius);
}
.reader__stage:fullscreen { background: #1c1a17; padding: 28px; }
.flipbook { width: 100%; max-width: 1100px; height: clamp(420px, 72vh, 780px); }
.reader__nav {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--coral); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background 0.15s ease;
}
.reader__nav:hover { background: var(--coral-deep); }
.reader__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 22px; }
.reader__pageinfo { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.08em; }

/* ---------- blurb / reviews ---------- */
.blurb {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink-soft);
  margin: 52px auto 0; max-width: 700px; text-align: center;
}
.reviews { margin: 60px auto 0; max-width: 760px; }
.reviews__heading {
  font-family: var(--font-serif); font-size: 1.7rem; text-align: center;
  margin-bottom: 8px;
}
.reviews__summary { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; color: var(--ink-soft); margin-bottom: 28px; }
.review { padding: 22px 0; border-top: 1px solid var(--line); }
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.review__name { font-weight: 700; }
.review__date { color: var(--muted); font-size: 0.8rem; margin-left: auto; }
.review__body { margin: 0; font-family: var(--font-serif); color: var(--ink-soft); }

@media (max-width: 760px) {
  /* No veil — the old site does not wash its cover out on a phone. The photo
     anchors left instead, so the mark sits on the artwork's own pale side
     rather than over the middle of it. */
  .shelf-hero--cover,
  .shelf-hero--cover.shelf-hero--image { background-position: left center; }
  /* Keep the wordmark and the three menu items on one line on a phone. */
  .brand { font-size: 1.4rem; }
  .site-nav { white-space: nowrap; }
  .site-nav a { margin-left: 14px; font-size: 0.64rem; letter-spacing: 0.05em; }
}

@media (max-width: 600px) {
  .reader__nav { width: 38px; height: 38px; font-size: 1.3rem; }
  .reader__stage { padding: 10px; gap: 8px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 32px 20px; }
  .hero, .shelf-hero { padding: 56px 0 50px; }
}

/* ---------- shelf heading: Cinzel display + boxed first letter (Odrin) ---- */
.shelf-hero__title {
  font-family: var(--font-display);
  /* Cinzel's lower case is small caps, so "Short Stories" already sets as
     SHORT STORIES with a taller S — the same trick the old site uses. Forcing
     uppercase would flatten it. */
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
}
/* One recipe frames every display initial on the old site:
     .special-heading-letter:first-letter {
       font-size: 1.9em; color: #FAAB9F; border: 1px solid #FAAB9F;
       padding: 0 30px; margin-right: -30px; }
   The negative margin is what makes the small caps resume at the letter and
   tuck under the frame's right edge. Its h5 size pads the frame vertically. */
.shelf-hero__brand::first-letter,
.shelf-hero__title::first-letter,
.page-hero__title::first-letter,
.detail__info .detail__title::first-letter {
  font-size: 1.9em;
  color: var(--coral);
  border: 1px solid var(--coral);
  padding: 0 30px;
  margin-right: -30px;
}
.shelf-hero__title::first-letter { padding: 15px 30px; }
.shelf-hero__title::after { display: none; }

/* ---------- featured showcase (books panel) ---------- */
.showcase { padding: 28px 0 24px; }
.showcase__stage {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 380px;
}

/* The standing 3D book. The old site builds its books out of one trick: a
   page-edge slab (.has-edge:after) stood up at 90deg beside the cover, over a
   35%/50% transform origin, so turning the cover swings a real block of pages
   into view. Copied here rather than faked with stacked box-shadows, which is
   why the book now reads as thick.
   showcase.js moves this element into the active book's slot in the row. */
.book3d { perspective: 600px; flex: 0 0 auto; }
.book3d__inner {
  width: 288px;
  height: 332px;
  background-color: var(--paper-2);
  background-size: cover;
  background-position: center;
  transform-origin: 35% 50%;
  transform-style: preserve-3d;
  /* Rests square-on like every other book on the shelf. (The old theme turns
     whichever book is selected, and auto-selects the first on load, so its
     first book always sat at an angle — we don't.) */
  transform: rotateY(0deg);
  box-shadow: 10px 10px 22px rgba(40, 32, 18, 0.16);
  position: relative;
}
/* The block of pages: 45px deep, standing at a right angle to the cover. */
.book-edge::after,
.book3d__inner::after {
  content: "";
  position: absolute; top: 3px; bottom: 3px; left: 98.5%;
  width: 45px;
  background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
  transform-origin: 0% 50%;
  transform: rotateY(90deg);
}
.book3d__inner::before {
  content: "";
  position: absolute; top: 0; left: 0; width: 12px; height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
}
.book3d__ph { display: none; }
.book3d__inner.is-empty { display: grid; place-items: center; }
.book3d__inner.is-empty .book3d__ph {
  display: block; padding: 20px; text-align: center;
  color: var(--ink-soft); font-family: var(--font-serif); font-size: 1.1rem;
}

/* The standing book opens the reader when clicked. There is no "Read the
   book" ribbon out here — on the old site that belongs to the book's own
   page, and the shelf just shows the book. */
.book3d.is-openable { cursor: pointer; }
.book3d__inner { transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.book3d.is-openable:hover .book3d__inner {
  transform: rotateY(-45deg);
  box-shadow: 18px 16px 34px rgba(40, 32, 18, 0.24);
}
.book3d:focus-visible { outline: 3px solid var(--gold); outline-offset: 8px; }

.book3d__inner--in { animation: bookIn 0.4s ease; }
@keyframes bookIn {
  from { opacity: 0; transform: rotateY(0deg) translateX(-14px); }
  to   { opacity: 1; transform: rotateY(0deg) translateX(0); }
}

/* thumbnail strip */
/* Covers line up along their tops, as they do in the old three-per-row grid;
   titles of different lengths then hang below without pushing the books out
   of line. */
.thumbs {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-start; gap: 22px;
  flex: 0 1 auto; flex-wrap: wrap;
}
.thumb {
  background: none; border: none; padding: 0; cursor: pointer;
  display: block; text-align: center; font-family: inherit;
  opacity: 0.7; transition: opacity 0.18s ease, transform 0.18s ease;
}
.thumb:hover { opacity: 1; }
.thumb.is-active { opacity: 1; }
/* Same gesture as the standing book: the cover turns on its 35%/50% origin to
   swing its block of pages into view (the theme hovers to -45deg). */
.thumb { perspective: 600px; }
.thumb__pic {
  display: block; position: relative; width: 288px; height: 332px;
  background: var(--paper-2);
  transform-origin: 35% 50%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  box-shadow: 10px 10px 22px rgba(40, 32, 18, 0.16);
}
.thumb__pic::after {
  content: "";
  position: absolute; top: 3px; bottom: 3px; left: 98.5%;
  width: 45px;
  background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
  transform-origin: 0% 50%;
  transform: rotateY(90deg);
}
.thumb:hover .thumb__pic { transform: rotateY(-45deg); box-shadow: 18px 16px 34px rgba(40, 32, 18, 0.24); }
/* The active book is drawn by .book3d sitting in this slot, so its flat cover
   is hidden while its title stays beneath the standing book. */
.thumb--standing .thumb__pic { display: none; }
.thumb__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb__ph { border-radius: 0; }
.thumb__ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  padding: 12px; text-align: center; color: #fff; font-family: var(--font-serif);
  background: linear-gradient(155deg, var(--coral) 0%, var(--gold) 100%);
}
.thumb__label {
  display: block; margin-top: 12px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  text-transform: none; letter-spacing: 0.01em; color: var(--ink);
  max-width: 160px;
}
.thumb.is-active .thumb__label { color: var(--ink); }

/* detail panel */
.showcase__detail { flex: 1 1 280px; max-width: 360px; padding-left: 10px; }
.detail__title {
  font-family: var(--font-display); font-weight: 700;
  text-transform: none; letter-spacing: 0.01em;
  font-size: clamp(1.9rem, 3.2vw, 2.54rem); line-height: 1.12; margin: 0 0 22px;
}
.detail__cat { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; }
.detail__rule { display: inline-block; width: 42px; height: 1px; background: var(--ink); }
#dCat {
  font-size: 0.95rem; color: var(--coral-deep); font-weight: 600;
  letter-spacing: 0.02em;
}
/* "View book" carries 0.4em of tracking, so it needs room to drop below the
   button rather than run off the panel. */
.detail__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .showcase__stage { gap: 24px; }
  /* The standing book shares a slot in the row now, so it has to shrink with
     the flat covers or the row goes ragged. */
  .thumb__pic { width: 160px; height: 184px; }
  .book3d__inner { width: 160px; height: 184px; }
  /* a shallower page block so a turned book still fits the column */
  .thumb__pic::after, .book3d__inner::after { width: 26px; }
  .thumbs { gap: 16px; justify-content: center; }
  .thumb__label { font-size: 0.78rem; max-width: 140px; }
  .showcase__detail { text-align: center; max-width: 100%; padding-left: 0; }
  .detail__cat, .detail__actions { justify-content: center; }
}

/* ---------- shelf grid: 3D tilt on hover ---------- */
.book-card__link { perspective: 1100px; display: block; }
.book-card__tilt {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.book-card__link:hover .book-card__tilt {
  transform: rotateY(-24deg) translateZ(14px);
}
.book-card__cover { position: relative; }
.book-card__cover::after {
  content: "";
  position: absolute; top: 0; right: 0; width: 10px; height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0.18), rgba(0,0,0,0));
  opacity: 0; transition: opacity 0.35s ease;
}
.book-card__link:hover .book-card__cover::after { opacity: 1; }
.book-card__link:hover .book-card__cover {
  box-shadow:
    1px 0 0 #efe7d6, 3px 0 0 #e3d9c3, 5px 0 0 #efe7d6, 7px 0 0 #e3d9c3,
    9px 0 0 #efe7d6, 11px 0 0 #e3d9c3, 13px 0 0 #efe7d6,
    20px 16px 38px rgba(40, 32, 18, 0.28);
}

/* ---------- book detail page ---------- */
.detail { padding-top: 30px; }
/* Arial Black, 13px — the old breadcrumb line. */
.detail__crumbs {
  font-family: var(--font-sans);
  font-size: 0.81rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 34px; font-weight: 900;
}
.detail__crumbs a { color: var(--ink); }
.detail__crumbs a:hover { color: var(--coral-deep); }
.detail__crumbs span { color: var(--ink); }
.detail__main {
  display: grid; grid-template-columns: minmax(0, 348px) 1fr;
  gap: 56px; align-items: start;
}
/* The book's own page shows the thick edge (.has-edge-thick is 70px deep). */
.detail__cover {
  position: relative;
  align-self: start;
  max-width: 348px; width: 100%;   /* the old product cover width */
  transform-origin: 35% 50%;
  box-shadow: 20px 18px 38px rgba(40, 32, 18, 0.22);
}
.detail__cover::after {
  content: "";
  position: absolute; top: 3px; bottom: 3px; left: 98.5%;
  width: 70px;
  background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
  transform-origin: 0% 50%;
  transform: rotateY(90deg);
}
.detail__cover img { width: 100%; height: auto; display: block; }
.detail__cover::before {
  content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.18), rgba(0,0,0,0)); border-radius: 2px 0 0 2px;
}
/* rich-text image wrapping inside the description */
.detail__desc img { max-width: 100%; height: auto; }
.detail__desc .richtext-image.left  { float: left;  margin: 6px 28px 16px 0; }
.detail__desc .richtext-image.right { float: right; margin: 6px 0 16px 28px; }
.detail__desc .richtext-image.full-width { display: block; width: 100%; margin: 24px auto; }
.detail__desc .richtext-image.centred { margin-block: 24px; }
.detail__ph {
  aspect-ratio: 2/3; display: grid; place-items: center; padding: 24px; text-align: center;
  background: linear-gradient(155deg, var(--coral), var(--gold)); color: #fff; font-family: var(--font-serif);
}
/* The theme's .page-flip-book-ribbon: half the cover wide, hung off the right
   edge at 40% height, coral on white type, with a folded gold corner beneath
   its end. It is not a full-width band. */
.detail__cover-cta {
  position: absolute; top: 40%; right: -12px;
  width: 50%;
  background: var(--coral);
  color: #fff;
  text-align: left;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 1;
}
.detail__cover-cta::after {
  content: "";
  position: absolute; top: 100%; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: var(--gold) transparent transparent transparent;
}
.detail__cover-cta:hover { background: var(--coral-deep); color: #fff; }
@media (max-width: 991px) { .detail__cover-cta { width: 65%; } }
@media (max-width: 600px) { .detail__cover-cta { width: 85%; } }
.detail__title {
  font-family: var(--font-display); font-weight: 700; text-transform: none;
  letter-spacing: 0.01em; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; margin: 0 0 22px;
}
/* On the book page only: larger, and held to a column so a long title stacks
   over two or three lines beside the cover the way the reference does, instead
   of running out in one thin line. The shelf panel keeps the smaller size — it
   has a third of the width to work in. */
.detail__info .detail__title {
  font-size: clamp(2.2rem, 5vw, 4rem);      /* h1.special-title is 64px */
  line-height: 1.1;
  max-width: 7em;
}
/* Only the book's own page frames its initial (the shared rule above); the
   shelf panel sets its title plain, as the old shelf did. */
.detail__title { animation: detailTitleIn 0.6s ease both; }
@keyframes detailTitleIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.detail__cat { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; color: var(--coral-deep); }
.detail__rule { display: inline-block; width: 42px; height: 1px; background: var(--ink); }
.detail__author { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin: 0 0 30px; }
.detail__actions { margin: 8px 0 0; }
.detail__section { margin-top: 60px; }
/* Section headings read as words, not labels: large mixed-case serif, no rule
   under them. The all-caps letterspaced treatment is kept for small labels
   (author, category, buttons), where it belongs. */
.detail__h {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.54rem);  /* 40px, as on the old site */
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  margin: 0 0 26px;
}
/* Description and story opening share the reader's setting — justified sans with
   a gold drop cap — so a story reads the same on the page that introduces it. */
.detail__desc,
.detail__excerpt-body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 760px;
  text-align: justify;
}
.detail__desc { display: flow-root; }
.detail__excerpt-body { margin: 0 0 26px; }
/* Three lines tall, matching the reader's drop cap. */
.detail__desc > p:first-of-type::first-letter,
.detail__excerpt-body::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.2em;
  line-height: 0.82;
  padding: 8px 14px 0 0;
  color: var(--gold);
}

.review { padding: 20px 0; border-bottom: 1px solid var(--line); max-width: 760px; }
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.review__name { font-weight: 700; font-size: 0.73rem; }
.review__date { color: var(--muted); font-size: 0.66rem; margin-left: auto; }
/* Comments in the same sans as the description above them. */
.review__body { margin: 0; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.8; color: var(--ink-soft); }
.reviews__summary { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }

@media (max-width: 760px) {
  .detail__main { grid-template-columns: 1fr; gap: 30px; }
  .detail__cover { max-width: 320px; margin: 0 auto; }
}


/* ---------- detail cover: 3D tilt on hover ---------- */
.detail__main { perspective: 600px; }
.detail__cover { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); transform-style: preserve-3d; }
.detail__cover:hover { transform: rotateY(-35deg); }
/* The ribbon swings back to face the reader as the cover turns. */
.detail__cover-cta { transition: transform 0.3s ease-out, right 0.3s ease-out; }
.detail__cover:hover .detail__cover-cta { right: 0; transform: rotateY(35deg) translate3d(10px, 0, 20px); }

/* ---------- review form + star input ---------- */
.review-form { max-width: 760px; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 26px; }
/* "Add a review" is a heading like the others, not a small label. */
.review-form__title { font-family: var(--font-serif); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.7rem; margin: 0 0 16px; }
.review-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.rating-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 1.8rem; margin: 2px 0 16px; }
.rating-input input { display: none; }
.rating-input label { color: var(--line-2); cursor: pointer; padding: 0 2px; transition: color 0.12s ease; }
.rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label { color: var(--gold); }
.review-form__row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.review-form input[type="text"], .review-form input[type="email"], .review-form textarea {
  flex: 1; min-width: 220px; padding: 12px 14px; border: 1px solid var(--line);
  font-family: var(--font-sans); font-size: 0.875rem; border-radius: 0; background: #fff; color: var(--ink);
}
.review-form textarea { width: 100%; margin-bottom: 14px; resize: vertical; }
.review-form input:focus, .review-form textarea:focus { outline: none; border-color: var(--coral); }

/* ---------- newsletter (footer) ---------- */
/* Left-aligned heading with the field and a hairline coral button on one row,
   which is how the old footer is built. */
.newsletter { background: var(--paper-2); border-top: 1px solid var(--line); padding: 46px 0 40px; text-align: left; }
.newsletter__title { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: 0.01em; font-size: 1.27rem; margin: 0 0 6px; }
.newsletter__sub { color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: 0.94rem; margin: 0 0 18px; }
.newsletter__form { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.newsletter__input { flex: 1 1 320px; padding: 14px 0; border: none; border-bottom: 1px solid var(--line-2); background: transparent; font-family: var(--font-sans); font-size: 0.83rem; color: var(--ink); }
.newsletter__input::placeholder { color: #757575; }
.newsletter__input:focus { outline: none; border-bottom-color: var(--coral); }
.newsletter__btn { flex: 0 0 auto; padding: 13px 30px; background: transparent; color: var(--ink); border: 1px solid var(--coral); text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--font-serif); font-weight: 700; font-size: 0.94rem; cursor: pointer; transition: background 0.15s ease; }
.newsletter__btn:hover { background: var(--coral); }
.site-footer__copy { text-align: center; padding-top: 26px; font-family: var(--font-serif); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; }

/* ---------- shelf hero with background image ----------
   The cover photo runs the full width and is not veiled — on the old site the
   artwork's own pale left-hand side is what the lockup sits on. */
.shelf-hero--image { background-size: cover; background-position: center right; position: relative; }
.shelf-hero--image .container { position: relative; z-index: 1; }

/* ---------- StreamField content blocks (reusable) ---------- */
.imgtext-fig { margin: 0 0 12px; }
.imgtext-fig img { width: 100%; height: auto; display: block; border-radius: 2px; }
.imgtext-fig--left  { float: left;  margin: 4px 30px 14px 0; }
.imgtext-fig--right { float: right; margin: 4px 0 14px 30px; }
.imgtext-fig--small  { width: 30%; }
.imgtext-fig--medium { width: 44%; }
.imgtext-fig--large  { width: 58%; }
.imgtext-clear { clear: both; }

/* A picture on its own line. Width is a share of the text column, so the
   author's choice holds on a phone as well as a desktop; alignment only bites
   once the picture is narrower than the text. */
.block-full-image { margin: 24px 0; }
.block-full-image img { width: 100%; height: auto; display: block; border-radius: 2px; }
.block-full-image figcaption { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 6px; }
.block-image--small  { width: 32%; }
.block-image--medium { width: 50%; }
.block-image--large  { width: 68%; }
.block-image--full   { width: 100%; }
.block-image--left   { margin-inline: 0 auto; }
.block-image--center { margin-inline: auto; }
.block-image--right  { margin-inline: auto 0; }

/* Images placed inside rich text. The size class sets the width; left/right
   float so the text wraps, "centred" breaks the line. */
.richtext-image { height: auto; }
.richtext-image.size-small  { width: 32%; }
.richtext-image.size-medium { width: 50%; }
.richtext-image.size-large  { width: 68%; }
.richtext-image.centred { display: block; float: none; margin-inline: auto; }

.block-quote { border-left: 3px solid var(--coral); padding: 6px 0 6px 22px; margin: 1.4em 0; font-family: var(--font-serif); font-style: italic; color: var(--ink); }
.block-quote cite { display: block; font-style: normal; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.block-callout { background: var(--cream-soft); border-left: 3px solid var(--gold); border-radius: 4px; padding: 16px 22px; margin: 1.4em 0; }
.block-callout > :first-child { margin-top: 0; }
.block-callout > :last-child { margin-bottom: 0; }

.block-sep { border: none; border-top: 1px solid var(--line-2); width: 80px; margin: 30px auto; }

@media (max-width: 680px) {
  .imgtext-fig { float: none !important; width: 100% !important; margin: 0 0 14px !important; }
  /* A third of a phone column is too small to read: sizes step up one. */
  .block-image--small  { width: 55%; }
  .block-image--medium { width: 75%; }
  .block-image--large  { width: 100%; }
  .richtext-image.size-small  { width: 45%; }
  .richtext-image.size-medium { width: 70%; }
  .richtext-image.size-large  { width: 100%; float: none; display: block; margin-inline: auto; }
}

/* ---------- header brand + hero brand lockup ---------- */
/* jhmira.com sets the whole wordmark in one ink colour. */
.brand__accent { color: inherit; }

/* ---------- hero lockup (the J.H.MIRA cover mark) ----------
   One line of Cinzel Decorative with a framed initial — the theme's
   .special-title.special-heading-letter, at the home page's own overrides:
   28px / 50px line / 2px tracking / #222, initial in #f4adad. (The grey and
   coral blocks in the review screenshot are a text selection, not design:
   the site sets ::selection to #FAAB9F on white.) */
.shelf-hero__brand {
  display: block; width: max-content;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.75rem;              /* 28px */
  line-height: 50px;
  letter-spacing: 2px;
  margin: 0; color: var(--ink);
}
.shelf-hero--center .shelf-hero__brand { margin-inline: auto; }
.shelf-hero--right  .shelf-hero__brand { margin-left: auto; }
.shelf-hero__brand::first-letter { color: var(--coral-soft); border-color: var(--coral-soft); }

.shelf-hero__tag {
  display: inline-block; font-family: var(--font-sans);
  font-size: 0.75rem;              /* 12px, 4px of tracking */
  letter-spacing: 0.333em; line-height: 29px;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 700;
  border-bottom: 3px dotted var(--ink-soft); margin: 20px 0 0;
}
.shelf-hero__cta { margin-top: 60px; }

/* ---------- simple page hero + body (About / Contact) ---------- */
/* About and Contact carry their heading on plain paper on the old site — no
   tinted band behind it. */
.page-hero { background: var(--paper); border-bottom: none; padding: 64px 0 8px; text-align: center; }
.page-hero__title { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: 0.01em; font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0; }
/* The old About page sets its prose in Gentium Book Basic italic at 17px. */
.page-body { max-width: 820px; margin: 48px auto 0; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.9; color: var(--ink); }
.page-intro { margin-bottom: 1.4em; }

/* contact page */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: start; }
.contact__intro { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.85; color: var(--ink-soft); }
/* Arial Bold 10.6px tracked a third of an em — the old contact form's labels. */
.contact__form label { display: block; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.333em; text-transform: uppercase; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.contact__form p { margin: 0 0 18px; }
.contact__form input, .contact__form textarea, .contact__form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: #fff;
  font-family: var(--font-sans); font-size: 0.875rem; border-radius: 0; color: var(--ink);
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--coral); }
.contact__form textarea { min-height: 150px; resize: vertical; }
.contact__form .helptext { font-size: 0.78rem; color: var(--muted); }
.contact__thanks { text-align: center; }

/* footer social icons */
.social { display: flex; justify-content: center; gap: 14px; padding-top: 26px; }
.social__link {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 4px; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: color 0.15s ease, border-color 0.15s ease;
}
.social__link:hover { color: var(--coral-deep); border-color: var(--coral); }

@media (max-width: 760px) { .contact { grid-template-columns: 1fr; gap: 28px; } }

/* Hero text justification (admin-configurable) */
.shelf-hero--left   { text-align: left; }
.shelf-hero--center { text-align: center; }
.shelf-hero--right  { text-align: right; }
.shelf-hero--left   .shelf-hero__intro,
.shelf-hero--left   .shelf-hero__cta { margin-left: 0; margin-right: auto; }
.shelf-hero--right  .shelf-hero__intro,
.shelf-hero--right  .shelf-hero__cta { margin-left: auto; margin-right: 0; }

/* showcase heading + detail panel extras (reconstructed) */
/* 32px on the old shelf — the frame around the initial does the shouting. */
.showcase__head { text-align: center; font-size: clamp(1.7rem, 3.2vw, 2.25rem); margin: 6px 0 44px; }
.detail__status { color: var(--muted); font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; margin: 0 0 22px; }
/* Outlined, not filled: the cover art is the colour on this row, so the call to
   action sits quietly beside it with just a coral book mark. */
/* Hairline black box with a black book glyph, exactly as on the old site. */
.detail__read {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  white-space: nowrap;
}
.detail__read:hover { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.detail__read svg { flex: 0 0 auto; }
.detail__view { font-size: 1rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--coral-deep); font-weight: 700; white-space: nowrap; }
.detail__view:hover { color: var(--gold); }