/* ============================================================
   The Church of the Smoking Chicken Fish — the candlelit nave
   ============================================================ */
:root {
  --oak: #1a1410;        /* the nave */
  --oak-2: #241c16;      /* raised stone */
  --oak-3: #332820;      /* mortar lines */
  --vellum: #e6d5b3;     /* parchment */
  --vellum-2: #d9c59c;   /* parchment shadow */
  --ink: #2a1f17;        /* ink on parchment */
  --bone: #efe6d2;       /* text on oak */
  --bone-dim: #b5a78f;
  --gold: #d4a64a;       /* incense light */
  --gold-2: #f0cf7e;
  --olive: #5b6b3a;      /* the hood */
  --ember: #b3261e;      /* Marlboro red — the single accent */
  --ember-2: #d9412f;

  --display: 'Pirata One', 'Blackletter', serif;
  --text: 'EB Garamond', Garamond, 'Times New Roman', serif;

  --measure: 62ch;
  --gutter: clamp(16px, 5vw, 64px);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--oak);
  color: var(--bone);
  font-family: var(--text);
  font-size: clamp(17px, 1.05vw + 12px, 20px);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.drawer-open { overflow: hidden; }

/* the congregation's memes, faintly, behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("assets/collage.jpg") center top / min(900px, 100vw) auto repeat;
  opacity: .11;
}
body::after {
  /* keep the centre of the nave calmer than the edges so long text stays readable */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 45%, rgba(26,20,16,.55), rgba(26,20,16,0) 100%);
}
main { position: relative; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
h3 { font-size: clamp(1.45rem, 2vw, 1.85rem); }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

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

.skip { position: absolute; left: 8px; top: -60px; background: var(--vellum); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { top: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .72em 1.4em;
  font-family: var(--text); font-weight: 500; font-size: 1.02rem;
  text-decoration: none; border: 1px solid transparent; border-radius: 3px;
  transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s;
}
.btn:active { transform: translateY(1px); }
.btn.ember {
  background: var(--ember); color: #fff5ec; border-color: #7d1711;
  box-shadow: 0 1px 0 #5f110c, 0 10px 30px -12px rgba(179,38,30,.7);
}
.btn.ember:hover { background: var(--ember-2); }
.btn.stone {
  background: transparent; color: var(--bone); border-color: rgba(239,230,210,.28);
}
.btn.stone:hover { border-color: var(--gold); color: var(--gold-2); }
.btn.quiet {
  background: transparent; color: var(--ink); border: 1px solid rgba(42,31,23,.35); padding: .5em 1em; font-size: .95rem;
}
.btn.quiet:hover { background: rgba(42,31,23,.07); }

/* ---------- header ---------- */
.nave-head {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(26,20,16,.96), rgba(26,20,16,.82));
  border-bottom: 1px solid var(--oak-3);
  backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.35rem; }
.brand img { border-radius: 50%; box-shadow: 0 0 0 1px var(--oak-3); image-rendering: pixelated; }
.nave-nav { display: flex; gap: 28px; }
.nave-nav a { text-decoration: none; color: var(--bone-dim); font-size: 1.02rem; transition: color .15s; }
.nave-nav a:hover { color: var(--gold-2); }
.head-cta { font-size: .95rem; padding: .55em 1.1em; }
.burger { display: none; width: 44px; height: 44px; background: none; border: 0; padding: 0; flex-direction: column; justify-content: center; gap: 7px; align-items: center; }
.burger span { display: block; width: 24px; height: 2px; background: var(--bone); transition: transform .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.drawer {
  position: fixed; inset: 69px 0 0; z-index: 39; background: var(--oak);
  display: flex; flex-direction: column; gap: 6px; padding: 24px var(--gutter);
}
.drawer[hidden] { display: none; }
.drawer a { font-size: 1.5rem; font-family: var(--display); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--oak-3); }
.drawer .btn { font-family: var(--text); margin-top: 20px; border-bottom: 0; }

@media (max-width: 820px) {
  .nave-nav, .head-cta { display: none; }
  .burger { display: flex; }
  .nave-head { grid-template-columns: 1fr auto; }
}

/* ---------- hero: the window ---------- */
.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(24px, 5vw, 80px); align-items: center;
  padding: clamp(40px, 7vh, 96px) var(--gutter) clamp(24px, 5vh, 64px);
  min-height: calc(100svh - 70px);
  max-width: 1280px; margin: 0 auto;
  isolation: isolate;
}
.hero::before {
  /* stone wall vignette + candle warmth from the right where the window stands */
  content: ""; position: absolute; top: -70px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 72% 48%, rgba(212,166,74,.16), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(0,0,0,.5), transparent 60%);
}
.smoke { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; }

.hero-copy { max-width: 36rem; }
.hero-kicker { color: var(--bone-dim); font-style: italic; font-size: 1.05rem; margin-bottom: 18px; }
.hero h1 { text-shadow: 0 2px 0 #000, 0 0 40px rgba(212,166,74,.15); }
.hero-lede { max-width: var(--measure); margin-top: 22px; font-size: 1.12rem; color: #d8ccb4; }

.ticker-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 30px; }
.ticker {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-size: 1.6rem; padding: 2px 16px;
  color: var(--gold-2); border: 1px solid rgba(212,166,74,.45); border-radius: 3px;
  background: rgba(212,166,74,.06);
}
.ca {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--oak-2); border: 1px solid var(--oak-3); border-radius: 3px;
  padding: 8px 14px; text-align: left; max-width: 100%;
  transition: border-color .15s;
}
.ca:hover { border-color: var(--gold); }
.ca code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .92rem; color: var(--bone); overflow-wrap: anywhere; }
.ca-label { color: var(--bone-dim); font-size: .95rem; }
.ca-copy { color: var(--gold); font-style: italic; font-size: .95rem; margin-left: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.window-wrap {
  margin: 0; position: relative; z-index: 2;
  width: min(100%, 580px); justify-self: center;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.window { width: 100%; height: auto; display: block; }
.sill {
  height: 18px; margin: -2px 0 0 -4%; width: 108%;
  background: linear-gradient(to bottom, #3b2f27, #221a14);
  border-top: 1px solid #5a4a3e; border-radius: 2px;
  box-shadow: 0 14px 20px -10px #000;
}

/* glass */
.pane { stroke: none; }
.p-blue  { fill: #27478a; }
.p-ruby  { fill: #a0231d; }
.p-amber { fill: #e2b04e; }
.p-olive { fill: #6b7a3f; }
.p-violet{ fill: #5a3b73; }
.p-rose  { fill: #f2d78a; }
.diamonds path.p-ruby { fill: #a0231d; }
.lead path, .lead circle { fill: none; stroke: #120d0a; stroke-width: 7; stroke-linecap: round; }
.lead circle { stroke-width: 9; }
.frame { fill: none; stroke: #3a2e26; stroke-width: 14; }
.frame.outer { stroke: #2a211b; stroke-width: 10; }
.light { opacity: 0; }
.panes { opacity: .25; transition: opacity 2.2s var(--ease); }
.halo { opacity: 0; transition: opacity 2.4s var(--ease) .6s; }
.saint { transform-origin: 300px 400px; }
html.lit .panes { opacity: 1; }
html.lit .halo  { opacity: 1; }
html.lit .light { animation: dawn 3s var(--ease) forwards; }
@keyframes dawn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .panes, .halo { transition: none; opacity: 1; }
  html.lit .light { animation: none; opacity: 1; }
}
/* glass glows: tint everything with the dawn light behind it */
.panes { mix-blend-mode: normal; }
.panes .pane { opacity: .86; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 40px; }
  .hero-copy { max-width: none; justify-self: center; }
  .hero-lede { margin-inline: auto; }
  .ticker-row, .hero-actions { justify-content: center; }
  .window-wrap { width: min(100%, 420px); order: -1; }
  .hero::before { background: radial-gradient(60% 40% at 50% 30%, rgba(212,166,74,.16), transparent 70%); }
}

/* ---------- creed lintel ---------- */
.creed {
  border-top: 1px solid var(--oak-3); border-bottom: 1px solid var(--oak-3);
  background: linear-gradient(to bottom, rgba(34,26,20,.82), rgba(28,22,18,.82));
  padding: 20px var(--gutter);
}
.creed ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1200px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
}
.creed li {
  font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  color: var(--bone-dim); padding: 0 clamp(14px, 2.2vw, 32px);
  text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,255,255,.06);
}
.creed li + li { border-left: 1px solid var(--oak-3); }
@media (max-width: 700px) {
  .creed li { width: 100%; text-align: center; padding: 4px 0; }
  .creed li + li { border-left: 0; border-top: 1px solid var(--oak-3); }
}

/* ---------- scripture on vellum ---------- */
.scripture { padding: clamp(48px, 8vh, 110px) var(--gutter); }
.vellum {
  position: relative; max-width: 1080px; margin: 0 auto;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,250,235,.55), transparent 55%),
    linear-gradient(170deg, var(--vellum), var(--vellum-2));
  color: var(--ink);
  padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 80px);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(42,31,23,.25),
    inset 0 0 0 10px var(--vellum), inset 0 0 0 11px rgba(42,31,23,.18),
    0 40px 60px -30px #000;
}
.vellum::after {
  /* parchment grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode: multiply;
}
.scrip-head { text-align: center; max-width: 40rem; margin: 0 auto 40px; }
.scrip-head h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.scrip-head p { font-style: italic; margin-top: 14px; color: #4a3a2e; }

.tablets {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(28px, 5vw, 72px); column-rule: 1px solid rgba(42,31,23,.2);
}
.tablets li {
  break-inside: avoid; display: grid; grid-template-columns: 2.6rem 1fr; gap: 14px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid rgba(42,31,23,.14);
}
.tablets li:nth-child(5), .tablets li:nth-child(10) { border-bottom: 0; }
.tablets .num { font-family: var(--text); font-weight: 600; font-size: 1.5rem; color: var(--ember); line-height: 1; text-align: right; letter-spacing: .02em; }
.tablets p { font-size: 1.1rem; line-height: 1.5; }
.tablets p::first-letter { font-weight: 600; }
@media (max-width: 720px) { .tablets { columns: 1; } .tablets li:nth-child(5) { border-bottom: 1px solid rgba(42,31,23,.14); } }

.verse-card {
  margin-top: 44px; padding: 22px 26px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  border: 1px solid rgba(42,31,23,.3); border-radius: 3px; background: rgba(255,250,235,.35);
}
.verse-today { font-style: italic; color: #5a493c; }
.verse { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.15; margin-top: 4px; }
.verse-ref { color: var(--ember); margin-top: 6px; font-size: .98rem; }
@media (max-width: 640px) { .verse-card { grid-template-columns: auto 1fr; } .verse-card .btn { grid-column: 1 / -1; justify-self: start; } }

/* tiny candle for the verse card */
.candle-mini { position: relative; width: 22px; height: 54px; }
.candle-mini::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(to right, #fbf1d6, #e8d9b1 70%, #cdb98a); border-radius: 3px 3px 2px 2px; }
.candle-mini i { position: absolute; left: 50%; top: 2px; width: 10px; height: 16px; margin-left: -5px; border-radius: 50% 50% 45% 45%; background: radial-gradient(ellipse at 50% 80%, #fff6cf, #f5b63a 55%, rgba(226,96,32,.0)); animation: flicker 1.6s ease-in-out infinite alternate; box-shadow: 0 0 12px 3px rgba(245,182,58,.55); }

/* ---------- shrine ---------- */
.shrine {
  display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: center;
  max-width: 1160px; margin: 0 auto; padding: clamp(40px, 7vh, 100px) var(--gutter);
}
.niche {
  position: relative; padding: 4%;
  background: radial-gradient(70% 60% at 50% 60%, rgba(212,166,74,.22), transparent 70%), var(--oak-2);
  border-radius: 50% 50% 6px 6px / 42% 42% 6px 6px;
  border: 1px solid var(--oak-3);
  box-shadow: inset 0 24px 40px -20px #000, 0 30px 50px -30px #000;
}
.niche img { width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)); }
.status { margin-top: 16px; text-align: center; color: var(--bone-dim); font-style: italic; }
.live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ember-2); box-shadow: 0 0 0 0 rgba(217,65,47,.6); animation: pulse 2.2s ease-out infinite; vertical-align: middle; margin-right: 6px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217,65,47,.6); } 100% { box-shadow: 0 0 0 10px rgba(217,65,47,0); } }
.shrine-copy h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.shrine-copy p { max-width: var(--measure); margin-top: 18px; color: #d8ccb4; }
.shrine-copy .warning { font-family: var(--display); font-size: 1.45rem; color: var(--gold-2); line-height: 1.15; }
.text-link { display: inline-block; margin-top: 22px; color: var(--gold-2); text-decoration-color: rgba(212,166,74,.5); text-underline-offset: 4px; }
@media (max-width: 820px) { .shrine { grid-template-columns: 1fr; } .shrine-portrait { max-width: 380px; margin: 0 auto; } }

/* ---------- order of brothtism ---------- */
.order { max-width: 1160px; margin: 0 auto; padding: clamp(40px, 7vh, 100px) var(--gutter); }
.order-head { max-width: 44rem; }
.order-head p { margin-top: 14px; color: #d8ccb4; max-width: var(--measure); }
.rite {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--oak-3); border-bottom: 1px solid var(--oak-3);
}
.rite li { padding: 28px clamp(16px, 2vw, 28px) 32px; position: relative; }
.rite li + li { border-left: 1px solid var(--oak-3); }
.step { display: block; font-family: var(--display); font-size: 2.6rem; color: var(--ember); line-height: 1; margin-bottom: 14px; }
.rite h3 { margin-bottom: 10px; }
.rite p { color: var(--bone-dim); font-size: 1rem; }
@media (max-width: 900px) { .rite { grid-template-columns: 1fr 1fr; } .rite li:nth-child(3) { border-left: 0; } .rite li:nth-child(n+3) { border-top: 1px solid var(--oak-3); } }
@media (max-width: 520px) { .rite { grid-template-columns: 1fr; } .rite li + li { border-left: 0; border-top: 1px solid var(--oak-3); } }

/* ---------- the reliquary: meme gallery ---------- */
.reliquary { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 8vh, 110px) var(--gutter); border-top: 1px solid var(--oak-3); }
.reliquary-head { max-width: 44rem; }
.reliquary-head p { margin-top: 14px; color: #d8ccb4; max-width: var(--measure); }
.masonry { columns: 4; column-gap: 12px; margin-top: 40px; }
.tile {
  display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; background: var(--oak-2);
  break-inside: avoid; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--oak-3), 0 14px 24px -16px #000;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.tile img { display: block; width: 100%; height: auto; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold), 0 18px 30px -16px #000; }
.tile:focus-visible { outline-offset: 2px; }
.reliquary-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; color: var(--bone-dim); font-style: italic; }
@media (max-width: 1000px) { .masonry { columns: 3; } }
@media (max-width: 640px)  { .masonry { columns: 2; column-gap: 8px; } .tile { margin-bottom: 8px; } }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: var(--bone); }
.lightbox::backdrop { background: rgba(10,7,5,.9); backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 56px clamp(16px, 7vw, 96px); }
.lightbox img { height: min(82vh, 100%); width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 30px 60px -20px #000; border-radius: 3px; }
.lb-close, .lb-nav { position: fixed; background: rgba(26,20,16,.75); color: var(--bone); border: 1px solid var(--oak-3); border-radius: 50%; width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; }
.lb-close { top: 16px; right: 16px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav.prev { left: 14px; } .lb-nav.next { right: 14px; }
.lb-close:hover, .lb-nav:hover { border-color: var(--gold); color: var(--gold-2); }
.lb-count { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; font-style: italic; color: var(--bone-dim); }

/* ---------- votive candles ---------- */
.votive {
  padding: clamp(48px, 8vh, 110px) var(--gutter) clamp(40px, 6vh, 80px);
  background:
    radial-gradient(60% 50% at 50% 85%, rgba(212,166,74,.14), transparent 70%),
    linear-gradient(to bottom, rgba(26,20,16,.7), rgba(18,14,11,.88));
  border-top: 1px solid var(--oak-3);
}
.votive-head { text-align: center; max-width: 40rem; margin: 0 auto; }
.votive-head p { margin-top: 14px; color: var(--bone-dim); }
.rack { max-width: 960px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; }
.shelf {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end;
  padding: 0 14px 16px; min-height: 140px;
  border-bottom: 10px solid #2b2119; box-shadow: 0 10px 0 #16100c, 0 30px 40px -20px #000;
}
@media (max-width: 640px) { .rack { grid-template-columns: 1fr; gap: 48px; } }
.candle {
  position: relative; width: 100%; height: var(--h, 70px); border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  border-radius: 2px;
}
.candle .wax {
  width: 60%; height: 100%;
  background: linear-gradient(to right, #f3e8cf, #dcc9a0 65%, #bba57a);
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 -6px 10px -6px rgba(0,0,0,.4);
  transition: filter .2s;
}
.candle .wax::before { content: ""; position: absolute; top: -8px; left: 50%; width: 2px; height: 10px; background: #2a1f17; transform: translateX(-50%); }
.candle .flame {
  position: absolute; left: 50%; top: -22px; width: 14px; height: 22px; margin-left: -7px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse at 50% 80%, #fff6cf, #f5b63a 50%, rgba(226,96,32,0) 100%);
  opacity: 0; transform: scale(.4) translateY(6px); transform-origin: 50% 100%;
  transition: opacity .25s, transform .3s var(--ease);
}
.candle.lit .flame { opacity: 1; transform: none; animation: flicker 1.4s ease-in-out var(--d, 0s) infinite alternate; box-shadow: 0 0 18px 4px rgba(245,182,58,.45); }
.candle.lit .wax { filter: brightness(1.15); }
.candle:hover .wax { filter: brightness(1.08); }
.candle:focus-visible { outline-offset: 6px; }
@keyframes flicker {
  0%   { transform: scaleX(1) scaleY(1) translateX(0); }
  40%  { transform: scaleX(.92) scaleY(1.08) translateX(.6px); }
  70%  { transform: scaleX(1.05) scaleY(.94) translateX(-.5px); }
  100% { transform: scaleX(.96) scaleY(1.04) translateX(.3px); }
}
@media (prefers-reduced-motion: reduce) { .candle.lit .flame, .candle-mini i, .live { animation: none; } }
.votive-foot { text-align: center; margin-top: 34px; font-style: italic; color: var(--bone-dim); }

/* ---------- token ---------- */
.token { padding: clamp(48px, 8vh, 110px) var(--gutter); }
.token-plate {
  max-width: 880px; margin: 0 auto; text-align: center;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background: var(--oak-2); border: 1px solid var(--oak-3); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 40px 60px -30px #000;
}
.token-plate h2 { font-size: clamp(3rem, 7vw, 5.4rem); color: var(--gold-2); text-shadow: 0 2px 0 #000; }
.token-lede { max-width: 40rem; margin: 16px auto 0; color: #d8ccb4; }
.token-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 36px 0 0;
  text-align: left;
}
.token-facts > div { padding: 14px 18px; border: 1px solid var(--oak-3); border-radius: 3px; background: var(--oak); }
.token-facts .wide { grid-column: 1 / -1; }
.token-facts dt { color: var(--bone-dim); font-style: italic; font-size: .98rem; }
.token-facts dd { margin: 4px 0 0; font-size: 1.15rem; font-weight: 500; }
.fact-link { color: inherit; text-decoration-color: rgba(212,166,74,.45); text-underline-offset: 4px; }
.fact-link:hover { color: var(--gold-2); }
.fact-link code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .85rem; color: var(--bone-dim); margin-left: 6px; }
.ca.big { width: 100%; justify-content: space-between; padding: 10px 14px; }
.ca.big code { font-size: .98rem; }
.token-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.token-note { margin-top: 26px; font-style: italic; color: var(--bone-dim); }
@media (max-width: 560px) { .token-facts { grid-template-columns: 1fr; } }

/* ---------- the tithe ---------- */
.tithe { max-width: 1160px; margin: 0 auto; padding: clamp(48px, 8vh, 110px) var(--gutter); border-top: 1px solid var(--oak-3); }
.tithe-head { max-width: 46rem; margin: 0 auto; text-align: center; }
.tithe-head p { margin-top: 16px; color: #d8ccb4; }
.communion { margin: 44px auto 0; max-width: 900px; }
.communion svg { width: 100%; height: auto; display: block; overflow: visible; }
.medal circle { fill: var(--oak-2); stroke: var(--gold); stroke-width: 2; }
.medal circle.inner { fill: none; stroke: rgba(212,166,74,.35); stroke-width: 1; stroke-dasharray: 3 5; }
.medal-t { font-family: var(--display); font-size: 40px; fill: var(--gold-2); text-anchor: middle; }
.medal-s { font-family: var(--text); font-style: italic; font-size: 17px; fill: var(--bone-dim); text-anchor: middle; }
.flow { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 8 7; animation: tithe-flow 1.6s linear infinite; }
.flow-t { font-family: var(--text); font-size: 18px; fill: var(--bone); text-anchor: middle; }
@keyframes tithe-flow { to { stroke-dashoffset: -30; } }
@media (prefers-reduced-motion: reduce) { .flow { animation: none; } }
.tithe-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--oak-3); border-bottom: 1px solid var(--oak-3); }
.tithe-cols article { padding: 28px clamp(16px, 2vw, 28px) 32px; }
.tithe-cols article + article { border-left: 1px solid var(--oak-3); }
.tithe-cols h3 { margin-bottom: 10px; }
.tithe-cols p { color: var(--bone-dim); font-size: 1rem; }
@media (max-width: 780px) {
  .tithe-cols { grid-template-columns: 1fr; }
  .tithe-cols article + article { border-left: 0; border-top: 1px solid var(--oak-3); }
  .medal-t { font-size: 48px; } .medal-s, .flow-t { font-size: 22px; }
}

/* ---------- gospel ---------- */
.gospel {
  text-align: center; padding: clamp(72px, 14vh, 160px) var(--gutter);
  background: radial-gradient(50% 40% at 50% 50%, rgba(212,166,74,.1), transparent 70%), rgba(15,11,9,.86);
  border-top: 1px solid var(--oak-3);
}
.gospel-lead { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--bone-dim); line-height: 1.1; }
.gospel-em { font-family: var(--display); font-size: clamp(2.6rem, 7vw, 5.4rem); color: var(--gold-2); line-height: 1; margin-top: 10px; text-shadow: 0 2px 0 #000, 0 0 60px rgba(212,166,74,.25); }
.gospel-close { margin-top: 36px; font-style: italic; font-size: 1.15rem; color: var(--bone-dim); }

/* ---------- footer ---------- */
.crypt { padding: 28px var(--gutter) 40px; background: #0b0806; border-top: 1px solid var(--oak-3); color: var(--bone-dim); font-size: .95rem; }
.crypt-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; max-width: 1160px; margin: 0 auto; }
.crypt .brand { font-size: 1.1rem; color: var(--bone); }
.crypt nav { display: flex; gap: 22px; }
.crypt nav a { text-decoration: none; }
.crypt nav a:hover { color: var(--gold-2); }
.crypt-note { max-width: 1160px; margin: 18px auto 0; font-size: .9rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--vellum); color: var(--ink); padding: 10px 18px; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); z-index: 60;
  box-shadow: 0 10px 30px -10px #000;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }