/*!==============================
 * Byline — Free Author Website Template
 * Author: uiCookies — https://uicookies.com/
 * License: Free for personal & commercial use — https://uicookies.com/license/
 * Design layer: near-black ink on warm white paper, one rust accent.
 * DM Serif Display for display type, Newsreader for reading.
 *===============================*/

/* ------------------------------------------------------------------
   1. Design tokens — rebrand here
------------------------------------------------------------------ */
:root {
  --ink:          #161412;   /* near-black, warm */
  --ink-2:        #211e1b;
  --ink-3:        #2e2a26;
  --ink-line:     rgba(246, 241, 231, .16);

  --paper:        #f6f1e7;   /* warm white page */
  --paper-2:      #efe8da;   /* tinted band */
  --paper-3:      #e4dbc9;
  --white:        #fffdf8;

  --text:         #2a2622;
  --heading:      #161412;
  --muted:        #6a6157;   /* secondary text on paper */
  --muted-light:  #b8ae9f;   /* secondary text on ink */
  --rule:         #d9cfbd;   /* hairlines */
  --field-line:   #8f8576;   /* form borders (3:1 on white) */

  --accent:       #b3471f;   /* rust — the one bold accent */
  --accent-deep:  #8e3514;
  --accent-light: #e58c63;   /* rust for text on ink */
  --accent-wash:  rgba(179, 71, 31, .14);
  --on-accent:    #fdf0e8;   /* text on rust */

  --display: "DM Serif Display", "Georgia", "Times New Roman", serif;
  --serif:   "Newsreader", "Georgia", "Times New Roman", serif;

  --container: 1200px;
  --section: clamp(4.5rem, 9vw, 8rem);
  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-book: 0 1px 1px rgba(22, 20, 18, .14), 0 12px 20px -10px rgba(22, 20, 18, .4), 0 34px 60px -24px rgba(22, 20, 18, .5);
}

/* ------------------------------------------------------------------
   2. Base
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Bootstrap's reboot turns on smooth scrolling for :root. Byline does smooth
   anchor scrolling in js/main.js (initSmoothAnchors) instead, so programmatic
   scrolling and screenshot tools stay instant. */
:root { scroll-behavior: auto; }

html {
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--heading);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
a:hover { color: var(--accent-deep); }

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

::selection { background: var(--accent); color: var(--white); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sec--ink :focus-visible,
.sec--rust :focus-visible,
.site-footer :focus-visible,
.notice :focus-visible { outline-color: var(--white); }

.container { max-width: var(--container); }

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 2000;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* ------------------------------------------------------------------
   3. Reusable pieces
------------------------------------------------------------------ */
.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.sec { padding: var(--section) 0; position: relative; }
.sec--tint { background: var(--paper-2); }
.sec--flush { padding-top: 0; }
.sec--ink { background: var(--ink); color: var(--paper); }
.sec--rust { background: var(--accent); color: var(--on-accent); }

.sec-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  border-top: 2px solid var(--ink);
  padding-top: .9rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.sec-index {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
}
.sec-label {
  margin: 0;
  font-family: var(--serif);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.sec-aside {
  margin-left: auto;
  font-size: .98rem;
  font-style: italic;
  color: var(--muted);
}
.sec-title {
  font-size: clamp(2.4rem, 5.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}
.sec-title em { font-style: italic; color: var(--accent); }
.sec-lede {
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  color: var(--muted);
  max-width: 34em;
}

.sec--ink .sec-head { border-color: var(--paper); }
.sec--ink .sec-label,
.sec--ink .sec-title { color: var(--paper); }
.sec--ink .sec-title em,
.sec--ink .sec-index { color: var(--accent-light); }
.sec--ink .sec-lede,
.sec--ink .sec-aside { color: var(--muted-light); }

.sec--rust .sec-head { border-color: var(--on-accent); }
.sec--rust .sec-label,
.sec--rust .sec-index { color: var(--on-accent); }

/* Buttons — tuned through Bootstrap's own variables */
.btn {
  --bs-btn-font-family: var(--serif);
  --bs-btn-font-size: .8rem;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.45rem;
  --bs-btn-padding-y: .95rem;
  --bs-btn-border-radius: var(--radius);
  --bs-btn-line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn .icon { width: 1.05rem; height: 1.05rem; }
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .6rem; --bs-btn-font-size: .72rem; }

.btn-rust {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-deep);
  --bs-btn-hover-border-color: var(--accent-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-deep);
  --bs-btn-active-border-color: var(--accent-deep);
  --bs-btn-focus-shadow-rgb: 179, 71, 31;
}
.btn-ink {
  --bs-btn-color: var(--paper);
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-deep);
  --bs-btn-active-border-color: var(--accent-deep);
  --bs-btn-focus-shadow-rgb: 22, 20, 18;
}
.btn-line {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: var(--paper);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--paper);
  --bs-btn-active-bg: var(--ink-2);
  --bs-btn-active-border-color: var(--ink-2);
  --bs-btn-focus-shadow-rgb: 22, 20, 18;
}
.btn-line-light {
  --bs-btn-color: var(--paper);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(246, 241, 231, .55);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--paper);
  --bs-btn-hover-border-color: var(--paper);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--paper-2);
  --bs-btn-active-border-color: var(--paper-2);
}
.btn.dropdown-toggle::after { display: none; }
.btn.dropdown-toggle .icon { transition: transform .25s var(--ease); }
.btn.dropdown-toggle.show .icon { transform: rotate(180deg); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid currentColor;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink);
  text-decoration: none;
}
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* Dropdown (retailer menus) */
.dropdown-menu {
  --bs-dropdown-min-width: 17.5rem;
  --bs-dropdown-padding-y: .5rem;
  --bs-dropdown-bg: var(--white);
  --bs-dropdown-border-color: var(--ink);
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--paper-2);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--ink);
  --bs-dropdown-header-color: var(--accent);
  --bs-dropdown-divider-bg: var(--rule);
  font-family: var(--serif);
  box-shadow: 0 24px 44px -20px rgba(22, 20, 18, .5);
}
.dropdown-header {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 1rem;
  font-size: 1rem;
}
.dropdown-item small { color: var(--muted); font-style: italic; }
.dropdown-item:active small { color: inherit; }

/* Tags */
.tag {
  display: inline-block;
  padding: .28rem .55rem;
  border: 1px solid currentColor;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.tag--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag--muted { color: var(--muted); }

/* Pull quote */
.pullquote {
  margin: 2.5rem 0;
  padding: 1.6rem 0 1.5rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.pullquote p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pullquote p::before { content: "\201C"; color: var(--accent); }
.pullquote p::after { content: "\201D"; color: var(--accent); }
.pullquote cite {
  display: block;
  margin-top: .9rem;
  font-style: normal;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Drop cap */
.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.9em;
  line-height: .78;
  padding: .06em .1em 0 0;
  color: var(--accent);
}

/* Scroll reveal — only hidden when JS is running */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------
   4. Notice bar + header
------------------------------------------------------------------ */
.notice {
  background: var(--ink);
  color: var(--paper);
  font-size: .92rem;
  line-height: 1.4;
  text-align: center;
  padding: .6rem 0;
}
.notice a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-underline-offset: .22em;
}
.notice a:hover { color: var(--accent-light); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(246, 241, 231, .95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 10px 26px -18px rgba(22, 20, 18, .55); }

.site-header .navbar {
  --bs-navbar-padding-y: .85rem;
  --bs-navbar-color: var(--ink);
  --bs-navbar-hover-color: var(--accent);
  --bs-navbar-active-color: var(--accent);
  --bs-navbar-nav-link-padding-x: .85rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .75rem;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-name {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.01em;
}
.brand-tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.menu-toggle:focus { box-shadow: none; }
.menu-toggle-bars { position: relative; width: 20px; height: 10px; display: inline-block; }
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle-bars::before { top: 0; }
.menu-toggle-bars::after { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { top: 4.25px; transform: rotate(-45deg); }

.site-menu .nav-link {
  position: relative;
  font-size: 1.02rem;
}
.site-menu .nav-link::after {
  content: "";
  position: absolute;
  left: var(--bs-navbar-nav-link-padding-x);
  right: var(--bs-navbar-nav-link-padding-x);
  bottom: .3rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-menu .nav-link:hover::after,
.site-menu .nav-link.active::after,
.site-menu .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.site-menu .nav-link[aria-current="page"] { color: var(--accent); }
.nav-cta { margin-left: .75rem; }

@media (max-width: 991.98px) {
  .site-menu { padding: 1.25rem 0 .75rem; }
  .site-menu .nav-link {
    font-family: var(--display);
    font-size: 1.7rem;
    line-height: 1.2;
    padding: .45rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .site-menu .nav-link::after { display: none; }
  .nav-cta { margin: 1.25rem 0 0; width: 100%; }
}
@media (max-width: 420px) {
  .brand-tag { display: none; }
}

/* ------------------------------------------------------------------
   5. Home — dateline + hero
------------------------------------------------------------------ */
.dateline {
  border-bottom: 1px solid var(--rule);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.dateline .container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
@media (max-width: 575.98px) {
  .dateline span:nth-child(2) { display: none; }
}

.hero {
  position: relative;
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}
.hero-title {
  font-size: clamp(3.1rem, 7.4vw, 6.4rem);
  line-height: .9;
  letter-spacing: -.028em;
  margin: 0 0 1.75rem;
}
.hero-title em {
  display: block;
  font-style: italic;
  color: var(--accent);
}
.hero-pitch {
  max-width: 31em;
  margin: 0 0 2.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  font-size: clamp(1.18rem, 1.7vw, 1.42rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 575.98px) {
  .hero-actions > *,
  .hero-actions .dropdown .btn { width: 100%; }
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.hero-meta dt,
.book-facts dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-meta dd,
.book-facts dd { margin: 0; font-size: 1.02rem; }

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding-bottom: 9%;
}
.hero-photo {
  position: relative;
  margin: 0 0 0 24%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.55) sepia(.22) contrast(1.05) brightness(.97);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 20, 18, 0) 45%, rgba(22, 20, 18, .35));
}
.hero-photo figcaption {
  position: absolute;
  right: 1rem;
  bottom: .9rem;
  z-index: 2;
  max-width: 60%;
  font-size: .82rem;
  font-style: italic;
  line-height: 1.35;
  text-align: right;
  color: var(--white);
}
.hero-cover {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 56%;
  transform: rotate(-3deg);
}
.hero-cover .cover {
  box-shadow: 0 2px 2px rgba(22, 20, 18, .18), 0 26px 40px -16px rgba(22, 20, 18, .55), 26px 40px 70px -30px rgba(22, 20, 18, .55);
}

.stamp {
  position: absolute;
  top: -4%;
  right: -3%;
  z-index: 3;
  width: clamp(92px, 11vw, 120px);
  height: auto;
}
.stamp-disc { fill: var(--accent); }
.stamp-text {
  font-family: var(--serif);
  font-size: 10.4px;
  font-weight: 600;
  letter-spacing: 2.3px;
  text-transform: uppercase;
  fill: var(--white);
}
.stamp-center {
  font-family: var(--display);
  font-size: 30px;
  fill: var(--white);
}
.stamp-ring {
  transform-origin: 60px 60px;
  animation: stamp-spin 28s linear infinite;
}
@keyframes stamp-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
   6. Home — praise
------------------------------------------------------------------ */
.praise-lead {
  position: relative;
  margin: 0 0 clamp(3rem, 6vw, 4.75rem);
  max-width: 62rem;
}
.praise-mark {
  display: block;
  height: .5em;
  margin-bottom: .1em;
  font-family: var(--display);
  font-size: clamp(6rem, 12vw, 9.5rem);
  line-height: .9;
  color: var(--accent);
}
.praise-lead blockquote { margin: 0; }
.praise-lead blockquote p {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.praise-lead figcaption,
.praise-item figcaption {
  margin-top: 1.4rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.praise-lead figcaption span,
.praise-item figcaption span { color: var(--muted); }

.praise-grid {
  display: grid;
  gap: 2.25rem;
}
@media (min-width: 768px) {
  .praise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
.praise-item {
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--ink);
}
.praise-item blockquote { margin: 0; }
.praise-item blockquote p {
  font-size: 1.28rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}
.praise-item figcaption { margin-top: 1rem; font-size: .72rem; }

.laurels {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
@media (min-width: 768px) {
  .laurels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.laurel {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--muted);
}
.laurel svg { width: 44px; height: 44px; flex: none; color: var(--accent); }
.laurel strong {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
}

/* ------------------------------------------------------------------
   7. Home — books shelf
------------------------------------------------------------------ */
.shelf-intro {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
@media (min-width: 992px) {
  .shelf-intro { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.shelf-intro .sec-title { margin-bottom: 0; }

.shelf {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 768px) {
  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
  .shelf-group--series { grid-column: span 3; }
}
.shelf-label {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.9rem;
  font-family: var(--serif);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.shelf-label::after {
  content: "";
  flex: 1;
  height: 10px;
  border: 1px solid var(--ink-line);
  border-bottom: 0;
  transform: translateY(5px);
}
.shelf-books {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .shelf-group--series .shelf-books { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shelf-book a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.shelf-book .cover { transition: transform .5s var(--ease); }
.shelf-book a:hover .cover,
.shelf-book a:focus-visible .cover { transform: translateY(-8px) rotate(-1.2deg); }
.shelf-meta { margin-top: 1.4rem; }
.shelf-num {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.shelf-title {
  margin: .4rem 0 .35rem;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.08;
  color: var(--paper);
  transition: color .2s var(--ease);
}
.shelf-book a:hover .shelf-title { color: var(--accent-light); }
.shelf-note {
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--muted-light);
}
@media (max-width: 767.98px) {
  .shelf-book a {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
  }
  .shelf-meta { margin-top: 0; }
}
.shelf-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
  color: var(--muted-light);
  font-style: italic;
}
.sec--ink .link-arrow { color: var(--paper); }
.sec--ink .link-arrow:hover { color: var(--accent-light); }

/* ------------------------------------------------------------------
   8. Home — about
------------------------------------------------------------------ */
.about-grid {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 992px) {
  .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5.5rem; align-items: start; }
  .about-visual { position: sticky; top: 110px; }
}
.about-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding-bottom: 20%;
}

.portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  container-type: inline-size;
}
.portrait-sun {
  position: absolute;
  top: 16cqi;
  right: 10cqi;
  width: 40cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
}
.portrait-name {
  position: absolute;
  left: 9cqi;
  top: 11cqi;
  font-family: var(--display);
  font-size: 23cqi;
  line-height: .84;
  letter-spacing: -.03em;
}
.portrait-name em { display: block; font-style: italic; }
.portrait-role {
  position: absolute;
  left: 9cqi;
  top: 58cqi;
  font-size: 3.3cqi;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.portrait-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
.portrait-art .line { fill: none; stroke: rgba(246, 241, 231, .75); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.portrait-art .line-soft { stroke: rgba(246, 241, 231, .35); }
.portrait-art .beam { fill: rgba(229, 140, 99, .22); }
.portrait-art .lamp { fill: var(--accent-light); }

.about-photo {
  position: absolute;
  right: -7%;
  bottom: 0;
  z-index: 2;
  width: 54%;
  margin: 0;
  border: 8px solid var(--paper-2);
  box-shadow: 0 24px 40px -22px rgba(22, 20, 18, .55);
  transform: rotate(2.5deg);
}
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 575.98px) {
  .about-photo { right: 0; }
}

.about-copy .sec-title { margin-bottom: 1.75rem; }
.about-copy > p { font-size: 1.2rem; }
.about-copy .pullquote { margin-bottom: 0; border-bottom: 0; }
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
}
.stat-label {
  display: block;
  margin-top: .45rem;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-links { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; }

/* ------------------------------------------------------------------
   9. Home — tour dates
------------------------------------------------------------------ */
.tour-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  margin-bottom: 2.25rem;
}
.tour-head .sec-title { margin-bottom: .5rem; }
.tour-head .sec-lede { margin: 0; }

.tour-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
html:not(.js) .tour-tabs { display: none; }
.tour-tab {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tour-tab:hover { background: var(--paper-3); }
.tour-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tour-tab-count {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.tour-panel-title {
  margin: 2.5rem 0 1rem;
  font-size: 1.6rem;
}
.tour-panel:first-of-type .tour-panel-title { margin-top: 0; }
.js .tour-panel-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.js .tour-panel:not([hidden]) { animation: panel-in .45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.event {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: .9rem 1.25rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .event {
    grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 13rem) 11rem;
    gap: 2rem;
    align-items: center;
  }
}
.event-date { line-height: 1; }
.event-day {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 4vw, 3.3rem);
  line-height: .9;
  color: var(--ink);
}
.event-month {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.event-title {
  margin: .55rem 0 .3rem;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.12;
}
.event-desc { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.event-place { font-size: 1rem; line-height: 1.45; }
.event-place strong { display: block; font-weight: 600; color: var(--ink); }
.event-place span { color: var(--muted); font-style: italic; }
.event-action { justify-self: start; }
@media (min-width: 768px) { .event-action { justify-self: end; } }
@media (max-width: 767.98px) {
  .event-place,
  .event-action { grid-column: 2; }
}
.event-status {
  display: inline-block;
  line-height: 1.45;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.event-weekday {
  display: block;
  margin-top: .3rem;
  font-size: .95rem;
  font-style: italic;
  color: var(--muted);
}
.event.is-past .event-day { color: var(--muted); }
.event.is-past .event-month { color: var(--muted); }

.tour-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2rem;
  font-style: italic;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   10. Home — newsletter (rust band)
------------------------------------------------------------------ */
.news-grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 992px) {
  .news-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
}
.chapbook {
  position: relative;
  width: min(300px, 72%);
  margin: 1rem auto 0;
}
.chapbook .cover {
  transform: rotate(-4deg);
  box-shadow: 0 2px 2px rgba(22, 20, 18, .2), 0 30px 50px -20px rgba(22, 20, 18, .65);
}
.chapbook-badge {
  position: absolute;
  bottom: -18px;
  left: -24px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  transform: rotate(10deg);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.chapbook-badge b {
  display: block;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.news-copy .kicker { color: var(--on-accent); }
.news-title {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.news-title em { font-style: italic; }
.news-copy > p { font-size: 1.18rem; color: var(--on-accent); max-width: 34em; }
.news-perks {
  display: grid;
  gap: .55rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
}
.news-perks li { display: flex; gap: .7rem; align-items: baseline; }
.news-perks li::before { content: "\2014"; color: var(--ink); font-weight: 700; }

.news-form .form-row {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 576px) {
  .news-form .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.news-form .form-label { color: #fff; }
.news-form .form-control {
  background: rgba(255, 253, 248, .1);
  border: 0;
  border-bottom: 1.5px solid rgba(255, 253, 248, .85);
  color: #fff;
  font-size: 1.15rem;
  padding: .8rem .9rem;
}
.news-form .form-control::placeholder { color: rgba(253, 240, 232, .78); }
.news-form .form-control:focus {
  background: rgba(255, 253, 248, .16);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 20, 18, .35);
  color: #fff;
}
.news-form .field.is-invalid .form-control { border-color: var(--ink); }
.news-form .field-error {
  display: none;
  margin-top: .5rem;
  padding: .25rem .55rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .88rem;
  font-style: normal;
}
.news-form .field.is-invalid .field-error { display: inline-block; }
.news-form .form-check { margin: 1.25rem 0 1.5rem; padding-left: 1.9em; font-size: 1rem; }
.news-form .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-left: -1.9em;
  border-radius: 0;
  border: 1.5px solid #fff;
  background-color: transparent;
}
.news-form .form-check-input { border-color: var(--field-line); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.field.is-invalid .form-check-input { border-color: var(--accent-deep); }
.news-form .form-check-input:focus { box-shadow: 0 0 0 3px rgba(22, 20, 18, .35); }
.news-form .form-note { margin: 1rem 0 0; font-size: .95rem; font-style: italic; color: var(--on-accent); }
.news-form .form-success {
  padding: 1.75rem;
  background: var(--ink);
  color: var(--paper);
}
.news-form .form-success h3 { color: #fff; font-size: 1.9rem; }

/* ------------------------------------------------------------------
   11. Home — contact options
------------------------------------------------------------------ */
.contact-grid {
  display: grid;
  border-top: 2px solid var(--ink);
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .contact-card { padding: 2.25rem 2rem 2rem; border-bottom: 0; border-right: 1px solid var(--rule); }
  .contact-card:first-child { padding-left: 0; }
  .contact-card:last-child { padding-right: 0; border-right: 0; }
}
.contact-card .kicker { margin-bottom: .8rem; color: var(--accent); }
.contact-card h3 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); margin-bottom: .75rem; }
.contact-card > p:not(.kicker):not(.contact-person) { font-size: 1.05rem; color: var(--muted); }
.contact-person {
  margin: auto 0 0;
  padding-top: 1.25rem;
  font-size: 1.02rem;
  line-height: 1.45;
}
.contact-person strong { display: block; color: var(--ink); font-weight: 600; }
.contact-links { margin: 1rem 0 0; padding: 0; list-style: none; }
.contact-links a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 1.02rem;
  text-decoration: none;
  word-break: break-word;
}
.contact-links a:hover { color: var(--accent); }
.contact-links .icon { color: var(--accent); }

.reader-note {
  display: grid;
  gap: 1rem 2rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.6rem 1.75rem;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}
@media (min-width: 768px) {
  .reader-note { grid-template-columns: minmax(0, 1fr) auto; }
}
.reader-note p { margin: 0; font-size: 1.15rem; font-style: italic; }

/* ------------------------------------------------------------------
   12. Inner page head + bands
------------------------------------------------------------------ */
.page-head {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--ink);
}
.page-head-grid {
  display: grid;
  gap: 1.75rem 3rem;
  align-items: end;
}
@media (min-width: 992px) {
  .page-head-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.page-title {
  font-size: clamp(3.4rem, 10.5vw, 8.4rem);
  line-height: .86;
  letter-spacing: -.035em;
  margin: 0;
}
.page-title em { font-style: italic; color: var(--accent); }
.page-lede {
  margin-bottom: 1.5rem;
  font-size: clamp(1.18rem, 1.7vw, 1.38rem);
  font-style: italic;
  line-height: 1.5;
}
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jump-nav a {
  display: inline-block;
  padding: .5rem .85rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.jump-nav a:hover { background: var(--ink); color: var(--paper); }

.cta-band { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.cta-band-inner {
  display: grid;
  gap: 1.75rem 3rem;
  align-items: center;
}
@media (min-width: 992px) {
  .cta-band-inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 {
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 4vw, 3.1rem);
  color: var(--paper);
}
.cta-band h2 em { font-style: italic; color: var(--accent-light); }
.cta-band p { margin: 0; color: var(--muted-light); font-size: 1.15rem; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------------
   13. Books page
------------------------------------------------------------------ */
.part-head {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}
.series-intro {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: start;
}
@media (min-width: 992px) {
  .series-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.series-intro .sec-title { margin-bottom: 1.5rem; }
.series-copy > p { font-size: 1.18rem; }
.series-figure { margin: 0; }
.series-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(.25) contrast(1.05);
}
.series-figure figcaption {
  margin-top: .75rem;
  font-size: .95rem;
  font-style: italic;
  color: var(--muted);
}

.reading-order {
  display: grid;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
@media (min-width: 768px) {
  .reading-order { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.reading-order li { border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) {
  .reading-order li { border-bottom: 0; border-right: 1px solid var(--rule); }
  .reading-order li:last-child { border-right: 0; }
}
.reading-order a {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 1.25rem 1.25rem 1.25rem 0;
  color: var(--ink);
  text-decoration: none;
}
@media (min-width: 768px) {
  .reading-order li + li a { padding-left: 1.25rem; }
}
.reading-order a:hover .ro-title { color: var(--accent); }
.ro-num {
  font-family: var(--display);
  font-size: 2.7rem;
  line-height: .85;
  color: var(--accent);
}
.ro-title {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.12;
  transition: color .2s var(--ease);
}
.ro-meta { display: block; margin-top: .25rem; font-size: .95rem; font-style: italic; color: var(--muted); }

.book {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 80px;
}
.book:nth-of-type(even) { background: var(--paper-2); }
.book-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 992px) {
  .book-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5.5rem; align-items: start; }
  .book--flip .book-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .book--flip .book-cover-col { order: 2; }
  .book-cover-col { position: sticky; top: 112px; }
}
.book-cover-col {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}
@media (min-width: 992px) {
  .book-cover-col { max-width: none; }
}
.order-badge {
  position: absolute;
  top: -26px;
  right: -8px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  text-align: center;
  transform: rotate(10deg);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.order-badge b {
  display: block;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0;
}
.order-badge--ink { background: var(--ink); }
@media (min-width: 576px) { .order-badge { right: -24px; } }
@media (min-width: 992px) {
  .book--flip .order-badge { right: auto; left: -24px; transform: rotate(-10deg); }
}
.book-caption {
  margin-top: 1.5rem;
  font-size: .95rem;
  font-style: italic;
  text-align: center;
  color: var(--muted);
}

.book-title {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: .96;
  letter-spacing: -.025em;
  margin-bottom: .9rem;
}
.book-tagline {
  font-size: clamp(1.2rem, 1.8vw, 1.42rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.book-blurb p { font-size: 1.16rem; }
.book-blurb p:first-child::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.2em;
  line-height: .78;
  padding: .06em .1em 0 0;
  color: var(--accent);
}
.book-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  margin: 1.75rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.reading-note {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--white);
  border-left: 3px solid var(--accent);
  font-size: 1.05rem;
  line-height: 1.5;
}
.reading-note .icon { width: 1.4rem; height: 1.4rem; margin-top: .15rem; color: var(--accent); }
.reading-note strong {
  display: block;
  margin-bottom: .15rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

.subhead {
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.formats {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.formats li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .1rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}
.format-name { font-weight: 600; color: var(--ink); }
.format-detail { grid-column: 1; font-size: .95rem; font-style: italic; color: var(--muted); }
.format-price {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--ink);
}
.retailers {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.btn-retailer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .95rem;
  border: 1px solid var(--field-line);
  background: var(--white);
  color: var(--ink);
  font-size: .98rem;
  text-decoration: none;
}
.btn-retailer .icon { width: .95rem; height: .95rem; color: var(--muted); transition: transform .2s var(--ease); }
.btn-retailer:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-retailer:hover .icon { color: var(--paper); transform: translate(2px, -2px); }
.book-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------------
   14. Excerpt reader (native <dialog>)
------------------------------------------------------------------ */
.excerpt {
  width: min(780px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}
.excerpt:focus { outline: none; }
.excerpt::backdrop { background: rgba(22, 20, 18, .8); }
.excerpt[open] { animation: excerpt-in .4s var(--ease); }
@keyframes excerpt-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.excerpt-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .75rem .7rem 1.5rem;
  background: rgba(255, 253, 248, .96);
  border-bottom: 1px solid var(--rule);
}
.excerpt-bar .kicker {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}
.excerpt-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.excerpt-tool {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.excerpt-tool:hover { border-color: var(--ink); }
.excerpt-tool[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.excerpt-tool .icon { width: 1.2rem; height: 1.2rem; }

.excerpt-body {
  --excerpt-size: 1.2rem;
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.35rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
  font-size: var(--excerpt-size);
  line-height: 1.78;
}
.excerpt.is-large .excerpt-body { --excerpt-size: 1.42rem; }
.excerpt-head {
  margin-bottom: 2.5rem;
  text-align: center;
}
.excerpt-head .kicker { justify-content: center; }
.excerpt-head h2 {
  font-size: clamp(2rem, 4.8vw, 3.1rem);
  line-height: 1.02;
  margin-bottom: .6rem;
}
.excerpt-head .kicker { margin-bottom: .75rem; }
.excerpt-head p:not(.kicker) { margin: 0; font-style: italic; color: var(--muted); font-size: 1rem; }
.excerpt-head::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin: 1.75rem auto 0;
  background: var(--accent);
}
.excerpt-text p { margin: 0; text-indent: 1.6em; hyphens: auto; }
.excerpt-text p:first-child,
.excerpt-text .break + p { text-indent: 0; }
.excerpt-text p:first-child::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.7em;
  line-height: .8;
  padding: .06em .1em 0 0;
  color: var(--accent);
}
.excerpt-text .break {
  margin: 1.5em 0;
  text-align: center;
  text-indent: 0;
  letter-spacing: .6em;
  color: var(--accent);
}
.excerpt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.5rem clamp(1.35rem, 7vw, 5rem);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.excerpt-foot p { margin: 0; font-style: italic; color: var(--muted); }
body.has-dialog { overflow: hidden; }

/* Without JavaScript, excerpts render inline at the end of the page. */
html:not(.js) dialog.excerpt {
  position: static;
  display: block;
  width: auto;
  max-width: 780px;
  max-height: none;
  margin: 3rem auto;
  border: 1px solid var(--rule);
  box-shadow: none;
  overflow: visible;
}
html:not(.js) .excerpt-bar button { display: none; }
html:not(.js) .excerpt-bar { position: static; }

/* ------------------------------------------------------------------
   15. Press page
------------------------------------------------------------------ */
.press-layout {
  display: grid;
  gap: 2.5rem;
  padding: clamp(3rem, 6vw, 5rem) 0 var(--section);
}
@media (min-width: 992px) {
  .press-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 4.5rem; }
  .press-nav { position: sticky; top: 112px; align-self: start; }
}
.press-nav .subhead { color: var(--muted); }
.press-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pressnav;
}
.press-nav ol a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .45rem .8rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 1rem;
  text-decoration: none;
}
.press-nav ol a::before {
  counter-increment: pressnav;
  content: counter(pressnav, decimal-leading-zero);
  font-family: var(--display);
  font-size: .95rem;
  color: var(--accent);
}
.press-nav ol a:hover,
.press-nav ol a.active { color: var(--accent); }
@media (min-width: 992px) {
  .press-nav ol { display: block; border-top: 2px solid var(--ink); }
  .press-nav ol a { padding: .75rem 0; border: 0; border-bottom: 1px solid var(--rule); }
  .press-nav ol a.active { border-bottom-color: var(--accent); }
}
.press-nav-cta {
  display: none;
  margin-top: 1.75rem;
  padding: 1.25rem;
  background: var(--ink);
  color: var(--muted-light);
  font-size: .95rem;
  line-height: 1.5;
}
.press-nav-cta strong { display: block; color: var(--paper); font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.press-nav-cta a { color: var(--accent-light); }
@media (min-width: 992px) { .press-nav-cta { display: block; } }

.press-block { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); scroll-margin-top: 100px; }
.press-block:last-child { padding-bottom: 0; }
.press-block .sec-head { margin-bottom: 1.75rem; }
.press-block .sec-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.press-block > p.sec-lede { margin-bottom: 2rem; }

.bio-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1200px) {
  .bio-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.bio-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
}
.bio-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.bio-card h3 { margin: 0; font-size: 1.65rem; }
.bio-count { display: block; font-size: .9rem; font-style: italic; color: var(--muted); }
.bio-text p { font-size: 1.06rem; line-height: 1.7; }

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.copy-btn:hover { background: var(--ink); color: var(--paper); }
.copy-btn .icon { width: 1rem; height: 1rem; }
.copy-btn .icon-done { display: none; }
.copy-btn.is-copied { background: var(--accent); border-color: var(--accent); color: #fff; }
.copy-btn.is-copied .icon-copy { display: none; }
.copy-btn.is-copied .icon-done { display: inline; }

.asset-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
}
.asset-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  transition: border-color .2s var(--ease), transform .3s var(--ease);
}
.asset-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.asset-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  padding: 1.25rem;
  background: var(--paper-2);
  overflow: hidden;
}
.asset-preview .cover { width: 50%; }
.asset-preview--dark { background: var(--ink-2); }
.asset-preview--map { padding: 0; }
.asset-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.1rem 1.15rem;
}
.asset-name { margin: 0; font-size: 1.18rem; line-height: 1.15; }
.asset-spec { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.asset-dl {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  padding-top: .8rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.asset-dl:hover { color: var(--accent-deep); }
.asset-dl .icon { width: 1rem; height: 1rem; }

.photo-slot {
  position: relative;
  width: 52%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(165deg, #4a423a 0%, #2a2521 60%, #1c1916 100%);
  box-shadow: var(--shadow-book);
}
.photo-slot svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.photo-slot span {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, .7);
}
.map-art { width: 100%; height: 100%; }
.map-art .sea { fill: #16393a; }
.map-art .land { fill: #e7dcc5; }
.map-art .contour { fill: none; stroke: rgba(231, 220, 197, .35); stroke-width: 1; stroke-dasharray: 3 3; }
.map-art .coast { fill: none; stroke: #161412; stroke-width: 1.4; }
.map-art .label { font-family: var(--serif); font-size: 9px; fill: #161412; font-style: italic; }
.map-art .label-sea { fill: rgba(231, 220, 197, .8); letter-spacing: 2px; font-style: normal; font-size: 7.5px; }
.map-art .pin { fill: #b3471f; }

.press-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--field-line);
}
.press-download p { margin: 0; font-style: italic; color: var(--muted); }

.facts {
  display: grid;
  margin: 0;
  border-top: 2px solid var(--ink);
}
@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
.fact {
  display: grid;
  gap: .2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 576px) {
  .fact { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; }
}
.fact dt {
  padding-top: .2rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact dd { margin: 0; font-size: 1.06rem; line-height: 1.5; color: var(--ink); }

.qa { max-width: 48rem; }
.qa-intro { font-size: 1.12rem; font-style: italic; color: var(--muted); }
.qa-item { padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.qa-item:first-of-type { border-top: 2px solid var(--ink); }
.qa-q {
  display: flex;
  gap: .9rem;
  margin: 0 0 .9rem;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.2;
}
.qa-q::before { content: "Q."; flex: none; color: var(--accent); }
.qa-a { padding-left: 2.35rem; }
.qa-a p { font-size: 1.1rem; }
@media (max-width: 575.98px) { .qa-a { padding-left: 0; } }

/* ------------------------------------------------------------------
   16. Forms (shared)
------------------------------------------------------------------ */
.form-label {
  margin-bottom: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-label .optional { font-weight: 400; letter-spacing: .04em; text-transform: none; font-style: italic; color: var(--muted); }
.form-control,
.form-select {
  padding: .8rem .95rem;
  border: 1px solid var(--field-line);
  border-radius: 0;
  background-color: var(--white);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.08rem;
}
.form-control::placeholder { color: #857b6e; font-style: italic; }
.form-control:focus,
.form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
textarea.form-control { min-height: 150px; resize: vertical; }
.field { margin-bottom: 1.25rem; }
.field.is-invalid .form-control,
.field.is-invalid .form-select { border-color: var(--accent-deep); }
.field-error {
  display: none;
  margin-top: .4rem;
  font-size: .95rem;
  font-style: italic;
  color: var(--accent-deep);
}
.field.is-invalid .field-error { display: block; }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-wash); }
.form-check-label { font-size: 1rem; }

.form-success { display: none; }
.form-success:focus { outline: none; }
.is-sent .form-fields { display: none; }
.is-sent .form-success { display: block; animation: panel-in .45s var(--ease); }

.enquiry {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--rule);
}
.enquiry .row { --bs-gutter-x: 1.25rem; }
.route-hint {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: 1.02rem;
  line-height: 1.5;
}
.route-hint .icon { width: 1.3rem; height: 1.3rem; margin-top: .1rem; color: var(--accent); }
.route-hint strong { color: var(--ink); }
.js .cond-field[hidden] { display: none; }
.enquiry .form-success {
  padding: 2rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.enquiry .form-success h3 { font-size: 2rem; }
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: .5rem;
}
.form-foot p { margin: 0; font-size: .95rem; font-style: italic; color: var(--muted); }

/* ------------------------------------------------------------------
   17. Footer
------------------------------------------------------------------ */
.site-footer {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  background: var(--ink);
  color: var(--muted-light);
}
.footer-mark {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-family: var(--display);
  font-size: clamp(3.4rem, 12.5vw, 10.5rem);
  line-height: .86;
  letter-spacing: -.04em;
  color: var(--paper);
}
.footer-mark em { font-style: italic; color: var(--accent-light); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
}
.footer-about { grid-column: 1 / -1; font-size: 1.05rem; max-width: 26em; }
@media (min-width: 768px) {
  .footer-about { grid-column: auto; }
}
.footer-about p:first-child { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; color: var(--paper); }
.footer-head {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper);
}
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: .45rem; }
.footer-links a { color: var(--muted-light); text-decoration: none; }
.footer-links a:hover { color: var(--accent-light); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 1.5rem;
  font-size: .92rem;
}
.footer-bottom a { color: var(--paper); }
.footer-bottom a:hover { color: var(--accent-light); }

/* ==================================================================
   18. Book covers — designed in HTML/CSS
   Each cover is a container, so its type scales with its width
   (cqi units). Change a title in the HTML; change art here.
================================================================== */
.cover {
  --cv-bg: #222;
  --cv-ink: #f6f1e7;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1px 4px 4px 1px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  box-shadow: var(--shadow-book);
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .16) 100%);
}
.cover::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5.5%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(255, 255, 255, .18) 42%, rgba(0, 0, 0, .14) 78%, rgba(0, 0, 0, 0) 100%);
}
.cover-art { position: absolute; inset: 0; z-index: 0; }
.cover-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 9cqi 9cqi 8.5cqi 12cqi;
}
.cover-kicker {
  display: block;
  font-family: var(--serif);
  font-size: 3.3cqi;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.cover-title {
  display: block;
  font-family: var(--display);
  font-size: 15cqi;
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.01em;
}
.cover-title em { font-style: italic; }
.cover-author {
  display: block;
  margin-top: auto;
  font-family: var(--serif);
  font-size: 3.9cqi;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.cover-rule {
  display: block;
  width: 16cqi;
  height: 1px;
  margin: 5cqi 0 4cqi;
  background: currentColor;
  opacity: .6;
}
.cover-line {
  display: block;
  font-family: var(--serif);
  font-size: 3.5cqi;
  font-style: italic;
  line-height: 1.4;
}

/* I — The Salt Almanac: deep teal, crescent moon, tide-table lines */
.cover--almanac { --cv-bg: #133d3e; --cv-ink: #efe4cc; }
.cover--almanac .cover-art {
  background:
    radial-gradient(circle 11.5cqi at 77% 22.5%, #133f40 98%, transparent 100%),
    radial-gradient(circle 12cqi at 72% 25%, #efe4cc 98%, transparent 100%),
    radial-gradient(circle 32cqi at 72% 25%, rgba(239, 228, 204, .12), transparent 100%),
    repeating-linear-gradient(180deg, transparent 0 2.6cqi, rgba(239, 228, 204, .075) 2.6cqi 2.9cqi),
    linear-gradient(180deg, #0f3334 0%, #17494a 55%, #0c2b2c 100%);
}
.cover--almanac .cover-tides {
  display: block;
  margin-top: 26cqi;
  font-family: var(--serif);
  font-size: 3cqi;
  line-height: 1.75;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  opacity: .62;
}
.cover--almanac .cover-title { margin-top: auto; font-size: 16.5cqi; }
.cover--almanac .cover-author { margin-top: 0; }

/* II — A Map of Low Tides: sand chart, contour rings, cartouche */
.cover--map { --cv-bg: #e7d9bc; --cv-ink: #1c1915; }
.cover--map .cover-art {
  background:
    radial-gradient(circle 2.3cqi at 36% 64%, #b3471f 96%, transparent 100%),
    radial-gradient(circle 5.5cqi at 36% 64%, rgba(179, 71, 31, .18) 96%, transparent 100%),
    repeating-radial-gradient(circle at 36% 64%, transparent 0 3.6cqi, rgba(74, 54, 30, .34) 3.6cqi 3.9cqi, transparent 3.9cqi 4.6cqi),
    repeating-radial-gradient(circle at 92% 12%, transparent 0 3.2cqi, rgba(74, 54, 30, .16) 3.2cqi 3.45cqi, transparent 3.45cqi 4.2cqi),
    linear-gradient(165deg, #efe3c8 0%, #dcc9a4 100%);
}
.cover-frame {
  position: absolute;
  inset: 5.5cqi 5.5cqi 5.5cqi 7cqi;
  z-index: 1;
  border: 1px solid rgba(28, 25, 21, .6);
  box-shadow: inset 0 0 0 1.4cqi rgba(239, 227, 200, .55), inset 0 0 0 calc(1.4cqi + 1px) rgba(28, 25, 21, .35);
}
.cover--map .cover-inner { align-items: center; text-align: center; padding-top: 11cqi; padding-bottom: 11cqi; }
.cover--map .cover-kicker { font-size: 3cqi; }
.cover--map .cover-title {
  margin-top: 5cqi;
  padding: 3.5cqi 5cqi 4cqi;
  border: 1px solid rgba(28, 25, 21, .7);
  background: #f1e6cd;
  font-size: 12.5cqi;
  font-style: italic;
  line-height: .98;
}
.cover-scale {
  display: block;
  width: 30cqi;
  height: 1.8cqi;
  margin-top: auto;
  margin-bottom: 4cqi;
  border: 1px solid #1c1915;
  background: repeating-linear-gradient(90deg, #1c1915 0 25%, transparent 25% 50%);
}
.cover--map .cover-author { margin-top: 0; }

/* III — The Drowned Bell: night sea, copper sun on the horizon */
.cover--bell { --cv-bg: #0e141a; --cv-ink: #f1e9da; }
.cover--bell .cover-art {
  background:
    repeating-linear-gradient(180deg, transparent 0 2.1cqi, #0b1015 2.1cqi 3.5cqi) 0 100% / 100% 40% no-repeat,
    radial-gradient(ellipse 20cqi 36cqi at 50% 0%, rgba(201, 106, 58, .85), rgba(201, 106, 58, 0) 100%) 0 100% / 100% 40% no-repeat,
    radial-gradient(circle 23cqi at 50% 100%, #c96a3a 98%, transparent 100%) 0 0 / 100% 60% no-repeat,
    radial-gradient(circle 70cqi at 50% 60%, rgba(201, 106, 58, .28), transparent 100%),
    linear-gradient(180deg, #121a22 0%, #1f2a35 50%, #2a2f33 60%, #0b1015 60.2%, #0a0e12 100%);
}
.cover--bell .cover-inner { align-items: center; text-align: center; padding-left: 10cqi; padding-right: 8cqi; }
.cover--bell .cover-kicker { font-size: 3cqi; opacity: .8; }
.cover--bell .cover-title {
  margin-top: 6cqi;
  font-family: var(--serif);
  font-size: 11.5cqi;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cover--bell .cover-author { color: #f1e9da; }

/* Standalone — The Glasshouse Winter: frost, arched glasshouse, one bloom */
.cover--glasshouse { --cv-bg: #e8ebe3; --cv-ink: #17211d; }
.cover--glasshouse .cover-art {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 .45cqi, transparent .65cqi) 0 0 / 9cqi 8cqi,
    linear-gradient(180deg, #f1f2ec 0%, #dde3da 100%);
}
.cover-arch {
  position: absolute;
  top: 12%;
  left: 17%;
  right: 15%;
  height: 49%;
  z-index: 1;
  border: 1.3cqi solid #17211d;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 .45cqi, transparent .65cqi) 2cqi 3cqi / 7cqi 7cqi,
    linear-gradient(90deg, transparent calc(33.33% - .45cqi), #17211d calc(33.33% - .45cqi) calc(33.33% + .45cqi), transparent calc(33.33% + .45cqi) calc(66.66% - .45cqi), #17211d calc(66.66% - .45cqi) calc(66.66% + .45cqi), transparent calc(66.66% + .45cqi)),
    repeating-linear-gradient(180deg, transparent 0 10.5cqi, rgba(23, 33, 29, .8) 10.5cqi 11.2cqi),
    radial-gradient(circle 7.5cqi at 64% 70%, #b3471f 97%, transparent 100%),
    radial-gradient(circle 12cqi at 64% 70%, rgba(179, 71, 31, .25), transparent 100%),
    radial-gradient(ellipse 60% 45% at 30% 100%, #5f7d67 0%, rgba(95, 125, 103, 0) 100%),
    radial-gradient(ellipse 50% 35% at 85% 100%, #6c8a72 0%, rgba(108, 138, 114, 0) 100%),
    linear-gradient(180deg, #dbe4de 0%, #b7c8bf 100%);
}
.cover--glasshouse .cover-inner { align-items: center; text-align: center; justify-content: flex-end; }
.cover--glasshouse .cover-kicker { position: absolute; top: 5cqi; left: 0; right: 0; font-size: 2.9cqi; }
.cover--glasshouse .cover-title { font-size: 10.6cqi; line-height: .98; white-space: nowrap; }
.cover--glasshouse .cover-title em { display: block; font-size: 1.45em; color: #b3471f; }
.cover--glasshouse .cover-author { margin-top: 4.5cqi; font-size: 3.6cqi; }

/* Short story — The Keeper's Daughter: dark teal, lighthouse beams */
.cover--keeper { --cv-bg: #10292b; --cv-ink: #f3e7d3; }
.cover--keeper .cover-art {
  background:
    repeating-linear-gradient(180deg, transparent 0 3cqi, rgba(243, 231, 211, .06) 3cqi 3.3cqi) 0 100% / 100% 30% no-repeat,
    linear-gradient(180deg, #0c2022 0%, #173b3d 70%, #0b1d1f 70.3%, #0a1a1c 100%);
}
.cover-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 1; }
.cover-svg .beam { fill: rgba(243, 231, 211, .2); }
.cover-svg .tower { fill: #f3e7d3; }
.cover-svg .band { fill: #b3471f; }
.cover-svg .rock { fill: #1f3436; }
.cover-svg .lamp { fill: #f6c38f; }
.cover--keeper .cover-inner { align-items: center; text-align: center; }
.cover--keeper .cover-kicker { font-size: 3cqi; }
.cover--keeper .cover-title { margin-top: 4cqi; font-size: 13.5cqi; font-style: italic; }
.cover--keeper .cover-author { margin-top: 3cqi; font-size: 3.4cqi; }

/* Size helpers */
.cover-col-sm { width: 100%; max-width: 112px; }