/* adamrizvi.com consolidated theme styles
 *
 * Production locks:
 *   - EB Garamond (single family, all sizes, italic for the wordmark)
 *   - Inter for small uppercase eyebrows and UI labels
 *   - paper #f5f1e8 (warm ivory)
 *   - accent terra #a85a3a
 *   - color portrait, centered hero
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Ghost custom-font CSS variables. Ghost admin (Settings > Design >
     Typography) can override these at runtime. Body and heading both
     resolve to EB Garamond. */
  --gh-font-heading: 'EB Garamond', 'Garamond', Georgia, serif;
  --gh-font-body: 'EB Garamond', 'Garamond', Georgia, serif;

  --serif: var(--gh-font-body);
  --serif-display: var(--gh-font-heading);
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --paper: #f5f1e8;
  --paper-soft: #efeadd;
  --ink: #1f1b16;
  --ink-soft: #4a4339;
  --ink-mute: #8a8273;
  --ink-deep: #35302a;
  --rule: #d8cfb9;
  --rule-soft: #e6dfca;
  --accent: #a85a3a;

  /* Garamond has a small x-height; bump base size for readability. */
  --t-body: 20px;
  --lh-body: 1.6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

/* ============================================================
   Shared site header (interior pages)
   ============================================================ */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 44px 80px 0;
  font-family: var(--serif);
}
.site-header__brand {
  font-family: var(--serif-display);
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0.005em;
  color: var(--ink);
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--accent); }
.site-header__nav {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  gap: 36px;
}
.site-header__nav a {
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.site-header__nav a:hover { color: var(--ink); }
.site-header__nav a.is-current {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Shared site footer (identical on home and interior)
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 80px;
  padding: 40px 80px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.site-footer a { cursor: pointer; }
.site-footer a:hover { color: var(--ink); }
.site-footer__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
}
.site-footer__l { display: flex; gap: 28px; }
.site-footer__r { display: flex; gap: 28px; }
.site-footer__colophon {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   Interior page-title block
   ============================================================ */

.page-title {
  padding: 96px 80px 56px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.page-title__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.page-title__eyebrow::before,
.page-title__eyebrow::after {
  content: "";
  width: 24px; height: 1px;
  background: var(--accent);
}
.page-title__title {
  font-family: var(--serif-display);
  font-size: 64px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.014em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.page-title__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.page-title__deck {
  font-family: var(--serif-display);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ============================================================
   Home, Quiet Room (centered layout)
   ============================================================ */

.qr { padding: 0; font-family: var(--serif); color: var(--ink); }

.qr__nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 44px 80px 0;
}
.qr__brand {
  font-family: var(--serif-display);
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0.005em;
  cursor: pointer;
}
.qr__nav-links {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  gap: 36px;
}
.qr__nav-links a { cursor: pointer; }
.qr__nav-links a:hover { color: var(--ink); }

.qr__hero {
  padding: 120px 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.qr__portrait-wrap {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 64px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(31,27,22,0.10),
    0 4px 18px rgba(31,27,22,0.10);
}
.qr__portrait-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(120% 100% at 50% 25%, transparent 65%, rgba(0,0,0,0.06) 100%);
  pointer-events: none;
}
.qr__portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.qr__intro {
  margin-top: 0;
  font-family: var(--serif-display);
  font-size: 22px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
}

.qr__rule {
  margin: 120px auto;
}

.qr__quote {
  padding: 0 80px 100px;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  align-items: start;
}
.qr__quote-body {
  font-family: var(--serif-display);
  font-size: 28px;
  line-height: 1.36;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  max-width: 22ch;
  margin: 0;
  letter-spacing: -0.005em;
}
.qr__quote-cite {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 20px;
}

/* The wordmark hero: large italic serif name above portrait */
.qr__wordmark {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 56px;
  text-align: center;
}

/* ============================================================
   Writing
   ============================================================ */

.writing { font-family: var(--serif); color: var(--ink); }

.writing__index {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 32px 56px;
  border-top: 1px solid var(--rule-soft);
}

.writing__list { list-style: none; margin: 0; padding: 0; }
.writing__item {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 32px;
  align-items: baseline;
}
.writing__item:first-child { padding-top: 0; }
.writing__item:last-child { border-bottom: 0; }
.writing__item-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-feature-settings: "lnum" 1;
}
.writing__item-meta .src {
  display: block;
  margin-top: 4px;
  color: var(--accent);
}
.writing__item-title {
  font-family: var(--serif-display);
  font-size: 24px;
  line-height: 1.28;
  margin: 0 0 8px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.writing__item-title a:hover { color: var(--accent); }
.writing__item-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.writing__loading,
.writing__empty {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 40px 0;
}

.writing__subscribe {
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 0;
}
.writing__sub-h {
  font-family: var(--serif-display);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 14px;
  line-height: 1.2;
}
.writing__sub-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 50ch;
}
.writing__sub-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.writing__sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.writing__sub-btn:hover { background: var(--accent); }
.writing__sub-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.writing__sub-btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   Books
   ============================================================ */

.books { font-family: var(--serif); color: var(--ink); }

.books__main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 80px 96px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.books__cover-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.books__cover {
  width: 320px;
  height: auto;
  aspect-ratio: 5.5 / 8.5;
  display: block;
  object-fit: cover;
  background: var(--paper-soft);
  /* Soft drop shadow + slight lift. Two layers: a tight near shadow for edge
     definition, a longer diffuse shadow for the floating-above-paper feel. */
  box-shadow:
    0 1px 2px rgba(31, 27, 22, 0.08),
    0 14px 36px rgba(31, 27, 22, 0.16);
  transform: translateY(-2px);
}
.books__cover-caption {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.books__info { padding-top: 12px; }
.books__info-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.books__info-h {
  font-family: var(--serif-display);
  font-size: 40px;
  line-height: 1.14;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.books__info-h em { font-style: italic; }
.books__info-subtitle {
  font-family: var(--serif-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 0 0 24px;
  font-weight: 400;
  max-width: 38ch;
}
.books__info-tagline {
  font-family: var(--serif-display);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 42ch;
}
.books__info-body {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1em;
  max-width: 50ch;
  text-wrap: pretty;
}
.books__info-body + .books__info-body { color: var(--ink-soft); }

.books__find {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-soft);
}
.books__find-h {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.books__find-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.books__find-list a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 10px 18px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.books__find-list a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.books__find-list a.indie {
  border-color: var(--accent);
  color: var(--accent);
}
.books__find-list a.indie:hover {
  background: var(--accent);
  color: var(--paper);
}

.books__pull {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 80px 96px;
  text-align: center;
}
.books__pull-rule {
  margin: 0 auto 48px;
}
.books__pull-body {
  font-family: var(--serif-display);
  font-size: 30px;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 auto;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.books__pull-cite {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.books__more {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px 80px 0;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.books__more-h {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.books__more-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0;
  text-wrap: pretty;
}
.books__more-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* ============================================================
   About
   ============================================================ */

.about { font-family: var(--serif); color: var(--ink); }

/* About opens on the eyebrow, then the photo. Tighten the eyebrow's
   bottom padding so the photo sits comfortably as the page opening. */
.about .page-title { padding-bottom: 32px; }
.about__hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 80px 56px;
  display: flex;
  justify-content: center;
}
.about__portrait {
  width: 320px; height: 400px;
  overflow: hidden;
  background: #d8d0bd;
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }

.about__pull {
  max-width: 880px;
  margin: 16px auto 64px;
  padding: 48px 80px 0;
  text-align: center;
}
.about__pull-rule {
  width: 60px;
  height: 1px;
  background: var(--ink-mute);
  opacity: 0.5;
  margin: 0 auto 40px;
}
.about__pull-body {
  font-family: var(--serif-display);
  font-size: 26px;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 auto;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.about__long {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 32px 0;
}
.about__long-h {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
}
.about__long p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.2em;
  max-width: 56ch;
  text-wrap: pretty;
}
.about__long p.muted { color: var(--ink-soft); }
.about__long p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif-display);
  font-size: 4.6em;
  line-height: 0.88;
  padding: 0.06em 0.08em 0 0;
  color: var(--accent);
}
.about__long a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
/* In-body photograph. Sits in the prose column and holds the same 56ch
   measure as .about__long p so it never juts past the text block. */
.about__figure {
  margin: 0 0 1.2em;
  max-width: 56ch;
}
.about__figure img { width: 100%; height: auto; display: block; }

.about__speaking {
  max-width: 1080px;
  margin: 80px auto 0;
  padding: 56px 80px 0;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
}
.about__speak-h {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 16px;
}
.about__speak-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 24px;
}
.about__speak-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* ============================================================
   Practice (new)
   Same rail-grid rhythm as About; structured for clinical clarity.
   ============================================================ */

.practice { font-family: var(--serif); color: var(--ink); }

.practice__section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 80px 56px;
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.practice__section + .practice__section {
  padding-top: 56px;
  border-top: 1px solid var(--rule-soft);
}
.practice__h {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
}
.practice__body p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1em;
  max-width: 56ch;
  text-wrap: pretty;
}
.practice__body p + p { color: var(--ink-soft); }

.practice__focus {
  list-style: none;
  margin: 0;
  padding: 0;
}
.practice__focus li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.practice__focus li:last-child { border-bottom: 0; }
.practice__focus h4 {
  font-family: var(--serif-display);
  font-size: 19px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink);
}
.practice__focus p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

.practice__creds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.practice__creds li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.practice__creds li:last-child { border-bottom: 0; }
.practice__creds dt {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.practice__creds dd {
  font-family: var(--serif-display);
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink);
}
.practice__creds dd em {
  font-style: italic;
  color: var(--ink-soft);
  display: block;
  font-size: 14px;
  margin-top: 2px;
}

/* ============================================================
   Podcast (Letters to the Sky)
   Same rail-grid rhythm as Practice/About.
   ============================================================ */

.podcast { font-family: var(--serif); color: var(--ink); }

.podcast__section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 80px 56px;
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.podcast__section + .podcast__section {
  padding-top: 56px;
  border-top: 1px solid var(--rule-soft);
}
/* Photograph between the page intro and section i. Matches the About
   figures: the 56ch text measure, centered in the content column. */
.podcast__figure {
  max-width: 56ch;
  margin: 0 auto 56px;
}
.podcast__figure img { width: 100%; height: auto; display: block; }
/* Promoted section heading (replaces the roman-numeral rail). */
.podcast__h {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
}
.podcast__body p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1em;
  max-width: 56ch;
  text-wrap: pretty;
}
.podcast__body p + p { color: var(--ink-soft); }
.podcast__body a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.podcast__listen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.podcast__listen a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 11px 20px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.podcast__listen a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.podcast__listen a.indie {
  border-color: var(--accent);
  color: var(--accent);
}
.podcast__listen a.indie:hover {
  background: var(--accent);
  color: var(--paper);
}

/* ============================================================
   Connect
   ============================================================ */

.connect { font-family: var(--serif); color: var(--ink); }

.connect__main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 32px 0;
}
.connect__col-h {
  font-family: var(--serif-display);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 16px;
  letter-spacing: -0.008em;
}
.connect__col-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 42ch;
}
.connect__col-body em {
  font-style: italic;
  color: var(--ink);
}

.connect__form { display: flex; flex-direction: column; gap: 18px; }
.connect__row { display: flex; flex-direction: column; gap: 6px; }
.connect__row label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.connect__row input,
.connect__row select,
.connect__row textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  outline: none;
}
.connect__row textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.connect__honeypot {
  display: none;
}
.connect__turnstile {
  margin: 6px 0 0;
}
.connect__status {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-soft);
  min-height: 1.5em;
}
.connect__status[data-state="success"] {
  color: var(--ink);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0;
}
.connect__status[data-state="error"] {
  color: var(--accent);
}
.connect__send {
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 13px 28px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.connect__send:hover { background: var(--accent); }
.connect__send[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.connect__send[disabled]:hover { background: var(--ink); }

.connect__newsletter {
  margin: 80px auto 0;
  max-width: 720px;
  padding: 56px 64px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  text-align: center;
}
.connect__nl-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.connect__nl-h {
  font-family: var(--serif-display);
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.connect__nl-h em { font-style: italic; color: var(--accent); font-weight: 300; }
.connect__nl-body {
  font-family: var(--serif-display);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.connect__nl-form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
}
.connect__nl-form input {
  flex: 1;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.connect__nl-form input:focus { border-color: var(--ink); }
.connect__nl-form button {
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.connect__nl-form button:hover { background: var(--accent); }
.connect__nl-note {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.connect__nl-placeholder {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.7;
}

/* ============================================================
   Kit (ConvertKit) newsletter embed. Restyled to read as a
   native element of the site, mirroring the geometry of the
   former .connect__nl-form. All rules are scoped under
   .connect__newsletter so nothing leaks to other pages. Kit's
   own stylesheet was not retained; !important guards only the
   visual properties Kit's runtime CSS would otherwise reclaim
   via its [data-uid] scoping.
   ============================================================ */
.connect__newsletter .formkit-form[data-uid] {
  max-width: 440px;
  margin: 0 auto;
}
.connect__newsletter .formkit-fields {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0;
}
.connect__newsletter .formkit-field {
  flex: 1;
  margin: 0;
}
.connect__newsletter .formkit-input {
  width: 100%;
  padding: 12px 14px !important;
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  font-family: var(--serif) !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  outline: none;
}
.connect__newsletter .formkit-input::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}
.connect__newsletter .formkit-input:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: none;
}
.connect__newsletter .formkit-submit {
  flex: 0 0 auto;
  align-self: stretch;
  padding: 12px 20px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.connect__newsletter .formkit-submit > span { color: var(--paper); }
.connect__newsletter .formkit-submit:hover { background: var(--accent) !important; }

/* Alerts restyled to the site palette (no green/red SaaS pills). */
.connect__newsletter .formkit-alert {
  margin: 0 auto 12px;
  max-width: 440px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
}
.connect__newsletter .formkit-alert:empty { display: none; }
.connect__newsletter .formkit-alert-error { border-color: var(--accent); }
.connect__newsletter .formkit-alert-success {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--serif);
}

/* Kit badge hidden defensively even though its anchor was removed. */
.connect__newsletter .formkit-powered-by-convertkit-container,
.connect__newsletter .formkit-powered-by-convertkit { display: none !important; }

.connect__elsewhere {
  margin: 80px auto 0;
  max-width: 1080px;
  padding: 56px 80px 0;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.connect__else-list {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.connect__else-list a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 11px 20px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.connect__else-list a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ============================================================
   Dinkus
   Centered asterism for section breaks. Spaced triad of asterisks set
   in the display serif. Pair it with a context wrapper (e.g. .qr__rule,
   .books__pull-rule) that supplies the vertical spacing.
   ============================================================ */

.dinkus {
  display: block;
  text-align: center;
  font-family: var(--serif-display);
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink-mute);
  line-height: 1;
  user-select: none;
}

/* ============================================================
   Koenig editor (Ghost post body) wide and full-bleed images.
   These break out of a constrained content column (post.hbs/page.hbs
   use ~640px). The min-width:100% guards against shrinkage when the
   viewport is narrower than the wide breakpoint.
   ============================================================ */

.kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.kg-width-full {
  position: relative;
  width: 100vw;
  min-width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.kg-width-full img { width: 100vw; }

/* ============================================================
   Responsive shims: fold rail grids to single column on narrow screens
   ============================================================ */

@media (max-width: 880px) {
  .site-footer { padding-left: 32px; padding-right: 32px; }

  /* Stack the header: brand centered on its own line, nav wrapping to
     centered rows below, so all six links stay reachable with comfortable
     tap spacing and no horizontal overflow. Applies to the interior header
     and the home (qr) nav alike. */
  .site-header,
  .qr__nav {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 20px 0;
  }
  .site-header__brand,
  .qr__brand { font-size: 16px; white-space: nowrap; }
  .site-header__nav,
  .qr__nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
  }

  .qr__hero { padding: 80px 32px 0; }
  .qr__wordmark { font-size: 40px; }
  .page-title { padding: 64px 32px 40px; }
  .page-title__title { font-size: 44px; }

  /* Two-column book layout folds to one column. */
  .books__main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 32px;
    padding-right: 32px;
  }
  /* Collapsed reading-column sections: keep the column full-width on
     narrow screens and trim the side padding. */
  .books__more,
  .practice__section,
  .podcast__section,
  .connect__elsewhere {
    grid-template-columns: 1fr;
    padding-left: 32px;
    padding-right: 32px;
  }
  .about__hero { padding-left: 32px; padding-right: 32px; }
  .podcast__figure { padding-left: 32px; padding-right: 32px; }
  .practice__creds li { grid-template-columns: 1fr; gap: 4px; }
  .books__cover-wrap { align-items: flex-start; }
  .about__portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; }

  /* Kit newsletter form stacks vertically on narrow screens. */
  .connect__newsletter .formkit-fields { flex-direction: column; }
  .connect__newsletter .formkit-submit { width: 100%; }
}