/* Theologia Ritualis: hero */

@font-face { font-family: "Reenie Beanie"; src: url("assets/fonts/reenie-beanie.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Special Elite"; src: url("assets/fonts/SpecialElite-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("assets/fonts/CourierPrime-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("assets/fonts/CourierPrime-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("assets/fonts/EBGaramond-Italic.ttf") format("truetype"); font-style: italic; font-weight: 400 800; font-display: swap; }

:root {
  --stone: #141414;
  --ink: #000;
  --paper: #eeebe4;
  --text: #e1ded7;
  --muted: #96938c;

  --display: "Special Elite", "Courier New", monospace;
  --body: "Courier Prime", "Courier New", monospace;
  --serif: "EB Garamond", Georgia, serif;

  --margin: clamp(20px, 6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stone) url("assets/img/stone.webp") center / cover fixed;
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.45;
}
a { color: inherit; }

/* ---------- Hero: fills the viewport ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--margin);
  overflow: hidden;
}

/* nav */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(14px, 2.6vh, 28px);
}
.mark img { display: block; height: clamp(50px, 8vh, 76px); width: auto; }
nav { display: flex; gap: clamp(16px, 2.6vw, 40px); }
nav a {
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}
nav a:hover, nav a:focus-visible { color: var(--paper); border-bottom-color: var(--paper); outline: none; }

/* cross ring + descriptor */
.head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(14px, 3vh, 36px);
}
.ring {
  display: grid; place-items: center;
  width: clamp(46px, 6.6vh, 58px); aspect-ratio: 1;
  border: 3px solid var(--paper);
  border-radius: 50%;
  color: var(--paper);
}
.kind {
  margin: 0;
  text-align: right;
  font-family: var(--display);
  font-size: clamp(1.5rem, min(3.6vw, 5.6vh), 3.6rem);
  line-height: 1.12;
  color: var(--paper);
}

/* ---------- Collage band: scripture pages, photocopied ---------- */
.band {
  position: relative;
  --bh: clamp(210px, 40vh, 460px);
  flex: none;
  height: var(--bh);
  margin: auto 0;
  background: #0a0a0a;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.band::after {            /* toner speckle across the whole band */
  content: "";
  position: absolute; inset: 0;
  background: url("assets/img/speckle-white.png") center / 600px;
  opacity: .55;
  pointer-events: none;
}
.pages img {
  position: absolute;
  width: calc(var(--bh) * .66 * .707);   /* A-series ratio; sized by band height */
  height: auto;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * var(--bh) / 100);
  transform: rotate(var(--r));
  filter: brightness(.38) contrast(1.2);
}
.pages img:nth-child(1)  { --x: -2;  --y: -6;  --r: -24deg; }
.pages img:nth-child(2)  { --x: 6;   --y: 30;  --r: 12deg; }
.pages img:nth-child(3)  { --x: 14;  --y: -20; --r: 33deg; }
.pages img:nth-child(4)  { --x: 23;  --y: 22;  --r: -10deg; }
.pages img:nth-child(5)  { --x: 32;  --y: -14; --r: 18deg; }
.pages img:nth-child(6)  { --x: 42;  --y: 30;  --r: -30deg; }
.pages img:nth-child(7)  { --x: 52;  --y: -18; --r: 8deg; }
.pages img:nth-child(8)  { --x: 61;  --y: 26;  --r: 27deg; }
.pages img:nth-child(9)  { --x: 70;  --y: -12; --r: -16deg; }
.pages img:nth-child(10) { --x: 79;  --y: 28;  --r: 36deg; }
.pages img:nth-child(11) { --x: 88;  --y: -8;  --r: -22deg; }
.pages img:nth-child(12) { --x: 95;  --y: 24;  --r: 10deg; }

h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 100%;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 8.4vw, 9rem);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: .06em .08em 0 var(--ink);
}

/* ---------- Foot: the argument left, reading actions right ---------- */
.foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 5vw, 80px);
  padding-bottom: clamp(18px, 4vh, 44px);
}
.thesis {
  margin: 0;
  max-width: 15em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, min(3.4vw, 5.4vh), 3.4rem);
  line-height: 1.1;
  color: var(--paper);
}
.side { max-width: 30em; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.sparkle { display: block; color: var(--paper); margin-bottom: 10px; }
.lede { margin: 0; font-size: .975rem; color: var(--text); }

.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: clamp(12px, 2.2vh, 20px); }
.btn {
  display: inline-block;
  padding: 12px 20px;
  border: 3px solid var(--paper);
  font-family: var(--body);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: transparent;
}
.btn-solid { background: var(--paper); color: var(--ink); }
.btn:hover, .btn:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.btn-solid:hover, .btn-solid:focus-visible { background: transparent; color: var(--paper); }

/* ---------- Narrow screens ---------- */
@media (max-width: 760px) {
  .band { --bh: clamp(190px, 30svh, 300px); }
  .pages img:nth-child(n+8) { display: none; }
  .pages img:nth-child(1) { --x: -8; } .pages img:nth-child(2) { --x: 6; }  .pages img:nth-child(3) { --x: 20; }
  .pages img:nth-child(4) { --x: 34; } .pages img:nth-child(5) { --x: 48; } .pages img:nth-child(6) { --x: 62; }
  .pages img:nth-child(7) { --x: 78; }
  .pages img { width: calc(var(--bh) * .78 * .707); }
  h1 { font-size: clamp(2.2rem, 12.5vw, 4.5rem); max-width: 7em; }
  nav { gap: 14px; }
  nav a { font-size: .6875rem; letter-spacing: .08em; }
  nav a:nth-child(3) { display: none; }
  .kind { font-size: 1.15rem; }
  .foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .thesis { font-size: 1.6rem; }
  .side { text-align: left; align-items: flex-start; max-width: none; }
  .actions { justify-content: flex-start; margin-top: 0; }
  .lede, .sparkle { display: none; }
  .btn { padding: 11px 14px; font-size: .8125rem; border-width: 2.5px; }
}

/* ---------- Section 2: the argument ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.argument {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: center;
  padding: clamp(72px, 14vh, 180px) var(--margin);
}

.leaves { position: relative; margin: 0; aspect-ratio: 640 / 910; width: min(100%, 520px); justify-self: center; }
.leaf { position: absolute; display: block; width: 86%; height: auto; background: #fff; }
.leaf-front { left: 0; top: 4%; transform: rotate(-2.5deg); z-index: 2; }
.leaf-back  { right: 0; top: 0; transform: rotate(5deg); filter: brightness(.55); }

.text { max-width: 36em; }
.label {
  margin: 0 0 18px;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.text h2 {
  margin: 0 0 clamp(20px, 3vh, 32px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  line-height: 1.08;
  color: var(--paper);
}
.text p { margin: 0 0 1.1em; font-size: 1.125rem; line-height: 1.55; }
.text i { font-family: var(--serif); font-size: 1.12em; color: var(--paper); }
blockquote {
  margin: clamp(26px, 4vh, 40px) 0;
  padding-top: 22px;
  border-top: 3px solid var(--paper);
}
blockquote p {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.25;
  color: var(--paper);
}
cite {
  font-style: normal;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 760px) {
  .argument { grid-template-columns: minmax(0, 1fr); padding-block: 64px; }
  .leaves { width: min(78%, 360px); }
  .text p { font-size: 1.0625rem; }
}

/* ---------- Section 3: two witnesses ---------- */
.witnesses {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: center;
  padding: 0 var(--margin) clamp(72px, 14vh, 180px);
}
.witnesses .note { margin: 18px 0 0; font-size: .875rem; color: var(--muted); }

.slips { position: relative; width: min(100%, 440px); justify-self: center; display: grid; gap: 0; }
.slip {
  position: relative;
  padding: 28px 30px 32px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);   /* cut edge, so overlapping slips read as separate paper */
}
.slip::after { content: ""; position: absolute; inset: 0; background: url("assets/img/speckle-black.png") center / 600px; opacity: .5; pointer-events: none; }
.slip-a { transform: rotate(-2.2deg); z-index: 2; margin-right: 8%; }
.slip-b { transform: rotate(2.4deg); margin: -14px 0 0 8%; }
.year { display: block; font-family: var(--display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }
.what { display: block; margin-top: 12px; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.what i { font-family: var(--serif); font-size: 1.15em; }

@media (max-width: 760px) {
  .witnesses { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .slips { order: -1; width: min(86%, 380px); margin-bottom: 8px; }
}

/* ---------- Section 4: who I am ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: center;
  padding: 0 var(--margin) clamp(72px, 14vh, 180px);
}
.portrait { margin: 0; width: min(100%, 420px); justify-self: center; }
.print {
  position: relative;
  padding: 16px 16px 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  transform: rotate(-2deg);
}
.print::after { content: ""; position: absolute; inset: 0; background: url("assets/img/speckle-black.png") center / 600px; opacity: .5; pointer-events: none; }
.print .ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; padding: 14%; background: #cfcbc2; }
/* when a real photo is dropped in: add class "photo" to the img for a photocopied look */
.print .ph.photo { padding: 0; object-fit: cover; filter: grayscale(1) contrast(1.15); }

.about h3 {
  margin: clamp(22px, 3.4vh, 34px) 0 10px;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.holds { margin: 0 0 1.1em; padding: 0; list-style: none; }
.holds li { position: relative; margin: 0 0 .7em; padding-left: 1.5em; font-size: 1.125rem; line-height: 1.5; }
.holds li::before { content: "+"; position: absolute; left: 0; font-weight: 700; color: var(--paper); }
.holds b { color: var(--paper); }
.about .note { margin-top: 28px; font-size: .875rem; color: var(--muted); }
.about .note a { color: var(--text); }

@media (max-width: 760px) {
  .about { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .portrait { width: min(70%, 320px); }
  .holds li { font-size: 1.0625rem; }
}

/* ---------- Footer ---------- */
.site-foot {
  margin: 0 var(--margin);
  padding: 28px 0 clamp(32px, 6vh, 56px);
  border-top: 1px solid var(--muted);
}
.safety { margin: 0; max-width: 46em; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.safety b { color: var(--text); }

/* ---------- Inner pages (essays index) ---------- */
.page { padding: 0 var(--margin); }
.page .top { padding-right: 0; }
nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--paper); }

.index-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: center;
  padding: clamp(40px, 9vh, 110px) 0 clamp(36px, 7vh, 80px);
}
.index-head h1 {
  margin: 0 0 clamp(16px, 3vh, 28px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.04;
  text-transform: none;
  text-shadow: none;
  text-align: left;
  color: var(--paper);
}
.dek { margin: 0; max-width: 30em; font-size: 1.125rem; line-height: 1.5; }
.leaves-one { aspect-ratio: auto; width: min(100%, 300px); justify-self: center; margin: 0; }
.leaves-one .leaf { position: static; width: 100%; transform: rotate(3deg); border: 2px solid var(--ink); }

.entries { border-top: 3px solid var(--paper); }
.entry {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr) 12em;
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(22px, 3.6vh, 34px) 0;
  border-bottom: 1px solid var(--muted);
}
.entry .meta, .entry .series {
  margin: 0;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.entry .series { text-align: right; }
.entry h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  color: var(--paper);
}
.entry .body p { margin: 0; max-width: 38em; }
.entry h2 a { text-decoration: none; }
.entry h2 a:hover, .entry h2 a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; outline: none; }
.inner .site-foot { margin-top: clamp(48px, 9vh, 110px); }

@media (max-width: 760px) {
  .index-head { grid-template-columns: minmax(0, 1fr); }
  .leaves-one { order: -1; width: min(52%, 220px); }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .entry .series { text-align: left; order: -1; }
  .entry .meta { order: -2; }
}

/* ---------- Single essay ---------- */
.top-over nav a { color: var(--text); }
.top-over nav a:hover, .top-over nav a:focus-visible, .top-over nav a[aria-current="page"] { color: var(--paper); }
.top-over { position: absolute; inset: 0 0 auto 0; z-index: 5; padding: clamp(14px, 2.6vh, 28px) var(--margin) 0; }

.feature { position: relative; margin: 0; }
.feature-img {
  position: relative;
  height: clamp(380px, 68vh, 760px);
  background: #0a0a0a;
  overflow: hidden;
}
/* a real artwork: grayscale, darkened and photocopied so the title reads. No gradient. */
.feature-img > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.42) contrast(1.2);
}
.feature-img::after {
  content: ""; position: absolute; inset: 0;
  background: url("assets/img/speckle-white.png") center / 600px; opacity: .5; pointer-events: none;
}

/* stand-in collage, sized by the image box */
.stand-in { --bh: clamp(380px, 68vh, 760px); }
.stand-in img {
  position: absolute; height: auto;
  width: calc(var(--bh) * .62 * .707);
  left: calc(var(--x) * 1%); top: calc(var(--y) * var(--bh) / 100);
  transform: rotate(var(--r)); filter: brightness(.34) contrast(1.2);
}
.stand-in img:nth-child(1) { --x: -2;  --y: 4;   --r: -22deg; }
.stand-in img:nth-child(2) { --x: 11;  --y: 44;  --r: 14deg; }
.stand-in img:nth-child(3) { --x: 24;  --y: -6;  --r: 30deg; }
.stand-in img:nth-child(4) { --x: 38;  --y: 38;  --r: -12deg; }
.stand-in img:nth-child(5) { --x: 51;  --y: -10; --r: 18deg; }
.stand-in img:nth-child(6) { --x: 64;  --y: 42;  --r: -28deg; }
.stand-in img:nth-child(7) { --x: 77;  --y: -4;  --r: 9deg; }
.stand-in img:nth-child(8) { --x: 90;  --y: 40;  --r: -20deg; }

.feature-title {
  position: absolute; left: var(--margin); right: var(--margin); bottom: clamp(26px, 6vh, 64px);
  z-index: 2;
}
.kicker {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px;
  font-weight: 700; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text);
}
.feature-title h1 {
  margin: 0; max-width: 17em;
  font-family: var(--display); font-weight: 400; text-transform: none; text-align: left;
  font-size: clamp(2.3rem, 6.2vw, 6rem); line-height: 1.04;
  color: var(--paper); text-shadow: .05em .07em 0 var(--ink);
}
.credit { margin: 0; padding: 10px var(--margin) 0; font-size: .8125rem; color: var(--muted); }
.credit i { font-family: var(--serif); font-size: 1.1em; }

/* reading column */
.essay-body { max-width: 40rem; margin: clamp(40px, 8vh, 96px) auto 0; padding: 0 var(--margin); box-sizing: content-box; }
.essay-body p { margin: 0 0 1.25em; font-size: 1.125rem; line-height: 1.7; }
.essay-body .dek { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.3; color: var(--paper); margin-bottom: 1.6em; }
.essay-body h2 { margin: 2em 0 .6em; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; color: var(--paper); }
.essay-body h3 { margin: 0 0 10px; font-weight: 700; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.essay-body sup a { font-weight: 700; text-decoration: none; padding: 0 2px; }
.takeaways, .notes { margin-top: clamp(32px, 6vh, 56px); }
.notes ol { margin: 0; padding-left: 1.4em; font-size: .9375rem; color: var(--muted); }
.notes li { margin-bottom: .5em; }
.related { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); margin-top: clamp(40px, 8vh, 80px); padding-top: 24px; border-top: 3px solid var(--paper); }
.related p { margin: 0 0 .6em; font-size: 1rem; line-height: 1.5; }
.essay .site-foot { margin-top: clamp(56px, 10vh, 120px); }

@media (max-width: 760px) {
  .feature-img { height: clamp(320px, 56svh, 520px); }
  .stand-in { --bh: clamp(320px, 56svh, 520px); }
  .stand-in img:nth-child(n+6) { display: none; }
  .related { grid-template-columns: minmax(0, 1fr); }
  .top-over nav a:nth-child(3) { display: none; }
}

/* composed banner is already toned, so skip the darkening filter and keep the heads in frame */
.feature-img > img.composed { filter: none; object-position: 72% 50%; }
@media (max-width: 760px) { .feature-img > img.composed { object-position: 80% 50%; filter: brightness(.58); } }

/* ---------- Book call-to-action (color blocked in the book's cover color) ---------- */
.cta-book {
  position: relative;
  margin-top: clamp(56px, 10vh, 120px);
  padding: clamp(48px, 9vh, 104px) var(--margin);
  background: var(--cover);
  color: var(--paper);
  overflow: hidden;
}
.cta-book::after {            /* toner speckle, as on the printed covers */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("assets/img/speckle-white.png") center / 600px; opacity: .55;
}
.cta-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(28px, 7vw, 110px);
  align-items: center;
  max-width: 76rem; margin: 0 auto;
}
.cta-cover { margin: 0; width: min(100%, 320px); justify-self: center; }
.cta-cover img { display: block; width: 100%; height: auto; border: 10px solid var(--paper); outline: 2px solid var(--ink); transform: rotate(-2.5deg); }
.cta-book .label { color: var(--paper); opacity: .85; }
.cta-book h2 {
  margin: 0 0 6px; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.02; color: var(--paper);
  text-shadow: .05em .07em 0 var(--ink);
}
.cta-sub { margin: 0 0 1.1em; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.2; }
.cta-text p { font-size: 1.0625rem; line-height: 1.55; max-width: 34em; }
.cta-facts { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .875rem !important; margin: 1.4em 0 1.1em; }
.cta-book .btn { border-color: var(--paper); color: var(--ink); background: var(--paper); cursor: default; }
.cta-book .btn[aria-disabled="true"] { opacity: .92; }
.cta-note { margin: 1.4em 0 0; font-size: .9375rem !important; opacity: .9; }
.essay .cta-book + .site-foot { margin-top: 0; }

@media (max-width: 760px) {
  .cta-inner { grid-template-columns: minmax(0, 1fr); }
  .cta-cover { width: min(62%, 260px); }
}

/* ---------- Essay layout with a sticky "In this essay" sidebar ---------- */
.essay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 8vh, 96px);
  padding: 0 var(--margin);
}
.essay-layout .essay-body { grid-column: 2; margin: 0; padding: 0; max-width: none; }
.essay-body h2, .essay-body section[id] { scroll-margin-top: 28px; }

.toc { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: min(100%, 15.5rem); position: sticky; top: 28px; }
.toc summary {
  list-style: none; cursor: default; pointer-events: none;
  margin: 0 0 14px; font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.toc summary::-webkit-details-marker { display: none; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 7px 0 7px 12px; border: 0; border-left: 3px solid transparent;
  font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3; text-decoration: none; color: var(--muted);
}
.toc a:hover, .toc a:focus-visible { color: var(--paper); outline: none; }
.toc a[aria-current="true"] { color: var(--paper); border: 0; border-left: 3px solid var(--paper); font-weight: 700; }

.dates { margin: 0 0 1.6em; border-top: 3px solid var(--paper); }
.dates > div { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 4px 18px; padding: 10px 0; border-bottom: 1px solid #3c3b38; }
.dates dt { font-weight: 700; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dates dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.dates i { font-family: var(--serif); font-size: 1.1em; }

@media (min-width: 900px) and (max-width: 1179px) {
  .essay-layout { grid-template-columns: 14rem minmax(0, 40rem); justify-content: center; column-gap: 40px; }
  .toc { justify-self: start; width: 100%; }
}
@media (max-width: 899px) {
  .essay-layout { display: block; }
  .essay-layout .essay-body { max-width: 40rem; margin: 0 auto; }
  .toc { position: static; width: auto; max-width: 40rem; margin: 0 auto 36px; padding: 12px 16px; border: 2px solid var(--muted); }
  .toc summary { pointer-events: auto; cursor: pointer; margin: 0; }
  .toc summary::after { content: "+"; float: right; }
  .toc details[open] summary::after { content: "‘2"; }
  .toc details[open] summary { margin-bottom: 10px; }
}
@media (max-width: 760px) {
  .dates > div { grid-template-columns: minmax(0, 1fr); }
}

/* long essay titles: smaller type and a narrower measure so the title stays clear of the artwork */
.feature-title h1.long { font-size: clamp(1.9rem, 4.4vw, 4rem); max-width: 15em; }

/* for the longest titles: a narrower measure keeps the title off the artwork */
.feature-title h1.long.narrow { max-width: 12.5em; }

/* ---------- Start here: reading path ---------- */
.feature-short .feature-img { height: clamp(300px, 46vh, 460px); }
.feature-short .stand-in { --bh: clamp(300px, 46vh, 460px); }
.path { list-style: none; margin: 0 0 1.4em; padding: 0; border-top: 3px solid var(--paper); counter-reset: step; }
.path li { counter-increment: step; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid #3c3b38; }
.path li::before { content: counter(step); font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--paper); }
.path .meta { margin: 0 0 6px; font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.path h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--paper); }
.path h3 a { text-decoration: none; }
.path h3 a:hover, .path h3 a:focus-visible { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; outline: none; }
.path li p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; }

/* ---------- Essays page: visual rows and planned slips ---------- */
.rule-head { margin: 0 0 clamp(20px, 4vh, 36px); padding-top: 14px; border-top: 3px solid var(--paper); font-family: var(--body); font-weight: 700; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.shown { margin-top: clamp(8px, 2vh, 24px); }
.show { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: center; margin-bottom: clamp(48px, 9vh, 104px); }
.show:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.show:nth-of-type(even) .show-img { order: 2; }
.show-img { display: block; position: relative; border: 10px solid var(--paper); outline: 2px solid var(--ink); background: #0a0a0a; transform: rotate(-1.2deg); transition: transform .18s ease-out; }
.show:nth-of-type(even) .show-img { transform: rotate(1.2deg); }
.show-img:hover { transform: rotate(0deg) translateY(-4px); }
.show-img img { display: block; width: 100%; height: auto; }
.show-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("assets/img/speckle-white.png") center / 500px; opacity: .35; }
.show-text .series { margin: 0 0 12px; font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: left; }
.show-text h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.08; color: var(--paper); }
.show-text h2 a { text-decoration: none; }
.show-text h2 a:hover, .show-text h2 a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; outline: none; }
.show-text .sum { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.55; max-width: 32em; }
.show-text .facts { margin: 0 0 20px; font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.coming { margin-top: clamp(16px, 4vh, 40px); }
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 34px); }
.plan { position: relative; padding: 26px 26px 28px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.plan::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("assets/img/speckle-black.png") center / 600px; opacity: .5; }
.plan:nth-child(odd) { transform: rotate(-1.4deg); }
.plan:nth-child(even) { transform: rotate(1.2deg); margin-top: 14px; }
.plan > * { position: relative; z-index: 1; }
.plan .series { margin: 0 0 10px; font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; text-align: left; }
.plan h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.12; color: var(--ink); letter-spacing: 0; text-transform: none; }
.plan p { margin: 0 0 12px; font-size: .9375rem; line-height: 1.45; }
.plan .tag { display: inline-block; margin: 0; padding: 4px 8px; border: 2px solid var(--ink); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 900px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .show, .show:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .show:nth-of-type(even) .show-img { order: 0; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan, .plan:nth-child(even) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .show-img { transition: none; } }

/* ---------- Care note: a small strip of masking tape, handwritten ---------- */
:root { --hand: "Reenie Beanie", "Ink Free", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.site-foot { margin-left: var(--margin); margin-right: var(--margin); padding: clamp(24px, 4vh, 44px) 0 clamp(36px, 6vh, 64px); border-top: 0; }
.site-foot .safety {
  position: relative; display: inline-block; max-width: 29rem; margin: 0;
  padding: 15px 32px 16px;
  font-family: var(--hand); font-size: 1.32rem; line-height: 1.12; letter-spacing: .01em;
  color: #1f1b14; background: #e4d9ad;               /* masking tape */
  transform: rotate(-1.3deg);
  clip-path: polygon(0 0, 98.4% 8.3%, 100% 16.7%, 98.4% 25.0%, 100% 33.3%, 98.4% 41.7%, 100% 50.0%, 98.4% 58.3%, 100% 66.7%, 98.4% 75.0%, 100% 83.3%, 98.4% 91.7%, 100% 100%, 0 100%, 0% 91.7%, 1.6% 83.3%, 0% 75.0%, 1.6% 66.7%, 0% 58.3%, 1.6% 50.0%, 0% 41.7%, 1.6% 33.3%, 0% 25.0%, 1.6% 16.7%, 0% 8.3%);                                  /* torn ends */
}
.site-foot .safety::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("assets/img/speckle-black.png") center / 520px; opacity: .28; }
.site-foot .safety b { color: inherit; font-weight: 700; }
@media (max-width: 760px) { .site-foot .safety { max-width: 100%; padding: 14px 26px 15px; font-size: 1.22rem; } }

/* ---------- Yellow highlighter on the tape note ---------- */
.site-foot .safety mark {
  background: #f4e23a; color: #1f1b14;
  padding: 0 .16em .04em; margin: 0 -.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  position: relative; z-index: 1;                 /* sits above the speckle overlay */
}

/* ---------- Footer legal links and small print ---------- */
.site-foot .legal { margin: 18px 0 0; display: flex; gap: 22px; font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.site-foot .legal a { color: var(--muted); text-decoration: none; }
.site-foot .legal a:hover, .site-foot .legal a:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; outline: none; }
.essay-body .small { margin: -.6em 0 1.4em; font-size: .875rem; color: var(--muted); }

/* ---------- Care note: a slide-out book page on the right edge ---------- */
@font-face { font-family: "EB Garamond Text"; src: url("assets/fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
.care { position: fixed; right: 0; top: 52vh; z-index: 40; display: flex; align-items: flex-start; transform: translateX(calc(100% - 2.7rem)); transition: transform .28s ease-out; }
.care.is-open { transform: translateX(0); }
.care-tab {
  flex: none; width: 2.7rem; padding: 16px 0; cursor: pointer; position: relative;
  background: #fff; color: #000; border: 2px solid #000; border-right: 0;
  font-family: var(--display); font-size: .95rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.care-tab::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("assets/img/speckle-black.png") center / 520px; opacity: .35; }
.care-tab:hover, .care-tab:focus-visible { background: #f1ede2; outline: none; }
.care-tab:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.care-panel {
  position: relative; width: min(86vw, 24rem); background: #fff; color: #000; margin: 0;
  border: 2px solid #000; border-right: 0; padding: 14px 24px 34px 24px;
}
.care-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("assets/img/speckle-black.png") center / 520px; opacity: .45; }
.care-head { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid #000; font-family: "EB Garamond Text", "EB Garamond", Georgia, serif; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.care-title { position: relative; z-index: 1; display: block; margin: 0 0 12px; padding: 6px 10px 7px; background: #000; color: #fff; font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.care-panel .safety { position: relative; z-index: 1; margin: 0; max-width: none; font-family: "EB Garamond Text", "EB Garamond", Georgia, serif; font-size: 1.12rem; line-height: 1.38; color: #000; }
.care-panel .safety b { color: inherit; font-weight: 700; }
.care-panel mark { background: #f4e23a; color: #000; padding: 0 .14em .04em; margin: 0 -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.care-folio { position: absolute; z-index: 1; left: 0; right: 0; bottom: 10px; text-align: center; font-family: "EB Garamond Text", "EB Garamond", Georgia, serif; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .care { transition: none; } }
@media (max-width: 760px) { .care { top: 50vh; } }

/* footer now holds only the legal links */
.site-foot { padding: clamp(20px, 3vh, 32px) 0 clamp(32px, 5vh, 52px); }
.site-foot .legal { margin: 0; }

/* ---------- Sticky nav ---------- */
:root { --navh: 84px; }
.top, .top.top-over, .page .top {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto; z-index: 50;
  height: var(--navh); box-sizing: border-box; padding: 0 var(--margin);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.top.is-stuck { background: var(--stone) url("assets/img/stone.webp") center / cover fixed; border-bottom-color: var(--muted); }
.top .mark img { height: 52px; width: auto; }
.top nav a { color: var(--text); }
.top nav a:hover, .top nav a:focus-visible, .top nav a[aria-current="page"] { color: var(--paper); }
.hero { padding-top: var(--navh); }
.page { padding-top: var(--navh); }
.essay-body h2, .essay-body section[id], .essay-body h3[id] { scroll-margin-top: calc(var(--navh) + 20px); }
.toc { top: calc(var(--navh) + 20px); }

@media (max-width: 760px) {
  :root { --navh: 58px; }
  .top .mark img { height: 36px; }
  .top nav { gap: 13px; }
  .top nav a { font-size: .625rem; letter-spacing: .06em; padding: 8px 0; }
  .top nav a:nth-child(3) { display: none; }
}

/* ---------- Footer ---------- */
.site-foot, .inner .site-foot, .essay .site-foot {
  margin: clamp(56px, 9vh, 110px) 0 0; padding: clamp(32px, 5vh, 52px) var(--margin) clamp(28px, 4vh, 40px);
  border-top: 3px solid var(--paper);
}
.essay .cta-book + .site-foot { margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.foot-brand img { display: block; height: 64px; width: auto; margin-bottom: 14px; }
.foot-tag { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.2; color: var(--paper); }
.foot-place { margin: 0; font-size: .875rem; color: var(--muted); }
.foot-h { margin: 0 0 12px; font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0 0 8px; }
.foot-col a { font-size: .9375rem; color: var(--text); text-decoration: none; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; outline: none; }
.foot-base { margin: clamp(28px, 5vh, 44px) 0 0; padding-top: 16px; border-top: 1px solid #3c3b38; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

.foot-col { display: block; gap: 0; }
.foot-col a { font-weight: 400; letter-spacing: 0; text-transform: none; padding: 0; border-bottom: 0; }

/* ---------- Mobile menu (hamburger) ---------- */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px;
    margin-right: -10px; padding: 0 10px; background: transparent; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 3px; background: var(--paper); transition: transform .2s, opacity .2s; }
  .nav-toggle:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
  .top.menu-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .top.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .top.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .top nav#site-nav {
    display: none; position: fixed; top: var(--navh); left: 0; right: 0; z-index: 49;
    flex-direction: column; gap: 0; padding: 4px 0 10px;
    background: var(--stone) url("assets/img/stone.webp") center / cover fixed;
    border-bottom: 1px solid var(--muted);
  }
  .top.menu-open nav#site-nav { display: flex; }
  .top.menu-open { background: var(--stone) url("assets/img/stone.webp") center / cover fixed; border-bottom-color: var(--muted); }
  .top nav#site-nav a, .top nav#site-nav a:nth-child(3) {
    display: block; padding: 15px var(--margin); font-size: .9375rem; letter-spacing: .14em; border-bottom: 0; border-top: 1px solid #3c3b38;
  }
  .top nav#site-nav a:first-child { border-top: 0; }
  .top nav#site-nav a[aria-current="page"] { background: #1f1f1d; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* ---------- Condensed pill nav on scroll (inverted) ---------- */
@keyframes pill-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
.top.is-stuck, .top.top-over.is-stuck, .page .top.is-stuck {
  left: 0; right: 0; margin-left: auto; margin-right: auto; top: 12px; bottom: auto;
  width: max-content; max-width: calc(100vw - 24px); height: auto;
  padding: 7px 12px 7px 18px; gap: 24px; justify-content: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
  animation: pill-in .25s ease-out;
}
.top.is-stuck .mark img { height: 34px; filter: invert(1); }
.top.is-stuck nav { gap: 22px; }
.top.is-stuck nav a { color: var(--ink); font-size: .75rem; padding: 6px 0; }
.top.is-stuck nav a:hover, .top.is-stuck nav a:focus-visible, .top.is-stuck nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.top.is-stuck .nav-toggle span { background: var(--ink); }
.top.is-stuck .nav-toggle:focus-visible { outline-color: var(--ink); }

@media (max-width: 760px) {
  .top.is-stuck, .top.top-over.is-stuck, .page .top.is-stuck { top: 10px; padding: 4px 6px 4px 16px; gap: 22px; }
  .top.is-stuck .mark img { height: 30px; }
  .top.is-stuck .nav-toggle { margin-right: 0; width: 40px; height: 40px; }
  .top.is-stuck nav#site-nav {
    top: 66px; left: 12px; right: 12px; padding: 6px 0; gap: 0;
    background: var(--paper); border: 2px solid var(--ink); border-radius: 22px;
  }
  .top.is-stuck nav#site-nav a, .top.is-stuck nav#site-nav a:nth-child(3) { color: var(--ink); font-size: .875rem; border-top-color: #cdc8bb; }
  .top.is-stuck nav#site-nav a:first-child { border-top: 0; }
  .top.is-stuck nav#site-nav a[aria-current="page"] { background: #e3dece; border-bottom: 0; }
  .top.is-stuck.menu-open { background: var(--paper); border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .top.is-stuck { animation: none; } }

/* ---------- One-line footer ---------- */
.site-foot.site-foot-line, .inner .site-foot.site-foot-line, .essay .site-foot.site-foot-line {
  margin: clamp(48px, 8vh, 96px) 0 0; padding: 18px var(--margin) 22px; border-top: 1px solid var(--muted);
}
.essay .cta-book + .site-foot.site-foot-line { margin-top: 0; }
.foot-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.foot-line span { margin-right: auto; }
.foot-line a { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.foot-line a:hover, .foot-line a:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; outline: none; }
@media (max-width: 760px) { .foot-line span { flex: 1 0 100%; margin-right: 0; } .foot-line { gap: 8px 18px; } }

/* call-to-action for light book covers: dark ink on a pale block */
.cta-light { color: var(--ink); }
.cta-light::after { background-image: url("assets/img/speckle-black.png"); opacity: .4; }
.cta-light .label, .cta-light h2, .cta-light .cta-sub, .cta-light p { color: var(--ink); }
.cta-light h2 { text-shadow: none; }
.cta-light .cta-cover img { border-color: var(--ink); outline: 0; }
.cta-light .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta-light .btn:hover, .cta-light .btn:focus-visible { background: transparent; color: var(--ink); }

/* ---------- Care tab: compact emoji square on phones ---------- */
.care-icon { display: none; }
@media (max-width: 760px) {
  .care { top: auto; bottom: 88px; align-items: flex-end; transform: translateX(calc(100% - 2.75rem)); }
  .care.is-open { transform: translateX(0); }
  .care-tab {
    width: 2.75rem; height: 2.75rem; padding: 0; writing-mode: horizontal-tb; transform: none;
    display: flex; align-items: center; justify-content: center;
  }
  .care-label { display: none; }
  .care-icon { display: block; font-size: 1.45rem; line-height: 1; position: relative; z-index: 1; }
}

/* ---------- Care tab: round info button in the bottom-right corner on phones ---------- */
@media (max-width: 760px) {
  .care, .care.is-open { top: auto; bottom: 14px; right: 14px; left: auto; display: block; transform: none; transition: none; }
  .care-tab {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 2px solid #000; border-radius: 50%; margin-left: auto;
  }
  .care-tab::after { border-radius: 50%; }
  .care-icon { font-size: 1.3rem; }
  .care-panel { display: none; position: absolute; right: 0; bottom: 54px; width: min(calc(100vw - 28px), 24rem); border: 2px solid #000; }
  .care.is-open .care-panel { display: block; }
}

/* plain serif i in the round care button (phones) */
@media (max-width: 760px) {
  .care-icon { font-family: "EB Garamond Text", "EB Garamond", Georgia, serif; font-weight: 700; font-size: 1.7rem; line-height: 1; color: #000; padding-bottom: .08em; }
}

/* for a very long title next to wide artwork */
.feature-title h1.long.xnarrow { max-width: 9.6em; }

/* ---------- Free book page ---------- */
.book-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; }
.facts-line { margin: 0; font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.book-cover .leaf { transform: rotate(-2deg); }
.book-sec { margin-top: clamp(36px, 7vh, 80px); }
.book-cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.book-copy p { margin: 0 0 1.1em; max-width: 36em; }
.book-inside h3 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--paper); }
.book-inside ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--muted); }
.book-inside li { padding: 12px 0; border-bottom: 1px solid var(--muted); font-size: .9375rem; line-height: 1.45; }
.book-inside li span { display: inline-block; min-width: 5.2em; font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.book-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 3vw, 40px); }
.book-pages img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: #fff; }
.book-pages img:nth-child(1) { transform: rotate(-1.5deg); }
.book-pages img:nth-child(3) { transform: rotate(1.5deg); }
.book-files { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--muted); }
.book-files li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--muted); }
.book-files strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--paper); }
.book-files span { display: block; font-size: .9375rem; color: var(--text); }
.book-how { max-width: 40em; margin: 0 0 1em; }
@media (max-width: 760px) {
  .book-cols { grid-template-columns: minmax(0, 1fr); }
  .book-pages { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-inline: auto; }
  .book-files li { flex-direction: column; align-items: flex-start; gap: 12px; }
  .book-cover { order: -1; }
}

/* ---------- Statement of faith + calling ---------- */
.faith-head { grid-template-columns: minmax(0, 1fr); }
.faith-sec { max-width: 46em; margin-top: clamp(8px, 2vh, 24px); }
.creed { list-style: none; counter-reset: c; margin: 0 0 clamp(28px, 5vh, 48px); padding: 0; border-top: 3px solid var(--paper); }
.creed li { counter-increment: c; position: relative; padding: 20px 0 20px 3.2em; border-bottom: 1px solid var(--muted); font-size: 1.0625rem; line-height: 1.55; }
.creed li::before { content: counter(c); position: absolute; left: 0; top: 16px; font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--paper); }
.creed li b { color: var(--paper); font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin-right: .35em; }
.faith-next { max-width: 38em; }
.calling { margin-top: clamp(48px, 9vh, 110px); padding: 0 var(--margin); }
.calling .inner-col { max-width: 46em; margin-inline: auto; }
.calling h2 { margin: 0 0 clamp(16px, 3vh, 28px); font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.08; color: var(--paper); text-align: left; text-transform: none; text-shadow: none; }
.calling p { max-width: 38em; }
.calling .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- Forms ---------- */
.site-form { margin: 0 0 clamp(28px, 5vh, 48px); max-width: 38em; }
.site-form .field { margin: 0 0 20px; }
.site-form label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.site-form label span { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.site-form input[type="text"], .site-form input[type="email"], .site-form textarea {
  display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--paper); border-radius: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 1rem; line-height: 1.5;
}
.site-form textarea { resize: vertical; min-height: 9em; }
.site-form input:focus-visible, .site-form textarea:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.site-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-form .form-actions { margin: 0 0 14px; }
.site-form .form-status { margin: 0; min-height: 1.5em; font-weight: 700; }
.site-form .form-status.err { color: var(--paper); text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 4px; }
.small-h { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--paper); text-align: left; text-transform: none; text-shadow: none; }
.signup { margin-top: clamp(48px, 9vh, 110px); padding: 0 var(--margin); }
.signup .inner-col { max-width: 46em; margin-inline: auto; border-top: 3px solid var(--paper); padding-top: 22px; }
.signup p { max-width: 38em; }
.signup .signup-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 14px 0 10px; }
.signup .signup-row input { flex: 1 1 14em; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--paper); border-radius: 0; background: transparent; color: var(--text); font: inherit; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .form-status { margin: 0; min-height: 1.5em; font-weight: 700; }

/* ---------- Home: ministry ---------- */
.m-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(32px, 7vw, 120px); align-items: center; min-height: calc(100svh - var(--navh)); padding: clamp(32px, 6vh, 80px) 0; }
.m-hero h1 { margin: 0 0 clamp(18px, 3vh, 30px); font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 6.2vw, 5.6rem); line-height: 1.04; text-transform: none; text-shadow: none; text-align: left; color: var(--paper); }
.m-sub { margin: 0 0 clamp(20px, 4vh, 32px); max-width: 30em; font-size: 1.1875rem; line-height: 1.5; }
.m-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.m-cover { justify-self: center; width: min(100%, 340px); }
.m-sec { margin-top: clamp(40px, 8vh, 96px); }
.m-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.m-big { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.1; color: var(--paper); text-align: left; text-transform: none; text-shadow: none; }
.m-copy p { margin: 0 0 1.1em; max-width: 36em; }
.m-copy .holds { margin: 0 0 1.4em; }
.m-title { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.12; color: var(--paper); text-align: left; text-transform: none; text-shadow: none; }
.m-title a { text-decoration: none; }
.m-title a:hover, .m-title a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; outline: none; }
.show-cover img { width: auto; max-height: 340px; margin-inline: auto; display: block; border: 2px solid var(--ink); }
.m-last { margin-bottom: clamp(8px, 2vh, 24px); }
@media (max-width: 760px) {
  .m-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .m-cover { order: -1; width: min(52%, 220px); }
  .m-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}