/* The Idea Graveyard: the night shift of clod.farm. Same pixel world (Press Start 2P + VT323, paper RPG panels with
   ink borders, hard edges), after dark. Brand tokens are clod.farm's; the night ones are derived from them.
   Legibility: every text sits on a solid surface (paper, stone panel, or a solid dark label), never on texture. */

@font-face { font-family: "PressStart"; src: url(/fonts/PressStart2P.woff2) format("woff2"); font-display: optional; }
@font-face { font-family: "VT323"; src: url(/fonts/VT323.woff2) format("woff2"); font-display: optional; }

:root {
  --ink: #1f2a44;
  --paper: #f4f1e8;
  --paper-2: #e6e0cf;
  --sky: #1c9fd6;
  --sky-2: #d8eef8;
  --clay: #d97757;
  --clay-2: #b45a3c;
  --clay-btn: #a64f30;      /* white on it 5.8:1 (AA even for the 8px pixel labels) */
  --clay-ink: #8f4127;      /* clay as text on paper: 6.3:1 */
  --sky-ink: #12709a;       /* sky behind white numbers: 5.3:1 */
  --grass: #4f6b25;
  --butter: #ffd59e;
  --night-0: #0b1120;
  --night-1: #121a2e;
  --night-2: #1a2440;
  --grass-n0: #141d0e;
  --grass-n1: #1b2712;
  --label: #0d1322;         /* solid dark label behind light text on the night ground */
  --muted: #3c4a6b;
  --font-px: "PressStart", ui-monospace, monospace;
  --font-body: "VT323", ui-monospace, monospace;
  --px: 5px;                /* one sprite pixel on the stones in a grid */
  --px-crypt: 4px;
  --wrap: 1180px;
  --pad: 16px;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --px: 6px; --px-crypt: 5px; --pad: 32px; } }

* { box-sizing: border-box; }
html { background: var(--night-0); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--paper); background: var(--night-0); font: 22px/1.25 var(--font-body);
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-px); font-weight: 400; margin: 0 0 16px; line-height: 1.5; letter-spacing: 0; }
h1 { font-size: 16px; }
h2 { font-size: 16px; }
h3 { font-size: 8px; line-height: 2; }
@media (min-width: 720px) { h1 { font-size: 24px; } }
p { margin: 0 0 12px; }
code { font: 22px var(--font-body); background: rgba(31, 42, 68, .08); padding: 0 4px; }
svg, img, canvas { max-width: 100%; }
.vh, .sprite { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--paper); color: var(--ink); padding: 8px 12px; font: 8px var(--font-px); }
.skip:focus { left: 12px; }
.muted { color: var(--muted); }
.small { font-size: 20px; }

/* the night sky behind everything (app.js draws it; without JS it is this flat night) */
#night { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: -2; image-rendering: pixelated; image-rendering: crisp-edges;
  background: linear-gradient(var(--night-0), var(--night-1) 60%, var(--night-2)); }

/* panels and buttons, as on clod.farm */
.panel { background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--paper-2), 0 4px 0 rgba(0, 0, 0, .45); }
.panel a { color: var(--clay-ink); }
.panel p, .panel li { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 18px; cursor: pointer;
  font: 8px/1.4 var(--font-px); text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 4px 0 var(--ink); }
.btn:hover { background: #fff; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--clay-btn); color: #fff; border-color: #6b2f1f; box-shadow: 0 4px 0 #6b2f1f; }
.btn.primary:hover { background: #a44d2e; }
.btn.night { background: var(--night-2); color: var(--paper); border-color: #05080f; box-shadow: 0 4px 0 #05080f; }
.btn.night:hover { background: #24304f; }
.btn[disabled] { opacity: .7; cursor: progress; }
.panel .btn.primary, .panel .btn.primary:hover { color: #fff; }
.kicker { display: inline-block; font: 8px/1 var(--font-px); color: #fff; background: var(--sky-ink); padding: 8px 10px; margin: 0 0 16px; text-transform: uppercase; }
.kicker.clay { background: var(--clay-btn); }
.kicker.ink { background: var(--ink); }

/* header: a pixel bar like clod.farm's goal box */
.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: var(--wrap); margin: 12px auto 0; padding: 6px 8px 6px 12px; background: var(--paper); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 4px; box-shadow: 0 4px 0 rgba(0, 0, 0, .45); width: calc(100% - 2 * var(--pad)); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 8px/1.3 var(--font-px); min-height: 44px; text-transform: uppercase; }
.mark svg { flex: none; width: 24px; height: 24px; }
.top nav { display: flex; align-items: center; gap: 2px; }
.top nav a:not(.btn) { font: 8px/1 var(--font-px); text-decoration: none; padding: 14px 8px; text-transform: uppercase; }
.top nav a:not(.btn):hover, .top nav a[aria-current="page"]:not(.btn) { color: var(--clay-ink); text-decoration: underline; text-underline-offset: 4px; }
.top .btn { min-height: 40px; padding: 10px 12px; }
@media (max-width: 979px) { .top nav a:not(.btn) { display: none; } }

/* hero: the logo and a paper card over the night, the graveyard ground at the foot */
.hero { position: relative; min-height: calc(100svh - 72px); display: grid; align-content: center; padding: 32px var(--pad) 210px; }
@media (min-width: 720px) { .hero { padding-bottom: 240px; } }
.hero-in { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; display: grid; gap: 20px; justify-items: start; }
.logo { margin: 0; font: 400 clamp(24px, 7.4vw, 56px)/1.15 var(--font-px); color: #fff; letter-spacing: 1px;
  text-shadow: 4px 4px 0 var(--clay-2), 8px 8px 0 #3b2317; display: flex; flex-wrap: wrap; gap: 0 .4em; }
.logo span:last-child { color: var(--butter); }
.hero-card { width: min(640px, 100%); padding: 22px 20px 18px; }
.hero-card h1 { margin-bottom: 12px; }
.hero-card .lede { font-size: 22px; color: var(--muted); margin-bottom: 16px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.counters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.counters div { display: flex; border: 3px solid var(--ink); }
.counters dt { order: 2; font: 22px/1 var(--font-body); background: var(--sky-2); color: var(--ink); padding: 8px 10px; }
.counters dd { margin: 0; font: 16px/1 var(--font-px); background: var(--sky-ink); color: #fff; padding: 9px 10px; font-variant-numeric: tabular-nums; }
.counters div:nth-child(2) dd { background: var(--clay-btn); }
.counters div:nth-child(3) dd { background: var(--ink); }
#ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 220px; display: block; z-index: 1; image-rendering: pixelated; image-rendering: crisp-edges; }
.ground-static { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: var(--grass-n1); border-top: 4px solid #0a0f07; z-index: 0; }

/* sections */
main > section, .gp, .cp, .bp, .ap, .nf { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 40px var(--pad); }
.sec-head { display: grid; gap: 8px 32px; margin-bottom: 24px; justify-items: start; }
.sec-head h2 { color: #fff; text-shadow: 3px 3px 0 #000; margin: 0; }
.sec-head p { margin: 0; max-width: 40em; padding: 6px 10px; background: var(--label); border-left: 4px solid var(--clay); color: var(--paper); }
@media (min-width: 900px) { .sec-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }

/* the night ground the graves stand on: dithered dark grass as a pixel tile */
.ground { background: var(--grass-n0) url(/img/grass.svg) 0 0 / 64px 64px repeat; image-rendering: pixelated;
  border: 4px solid #05080f; border-radius: 6px; box-shadow: 0 4px 0 rgba(0, 0, 0, .45); padding: 24px 12px 28px; }
@media (min-width: 720px) { .ground { padding: 32px 24px 36px; } }

/* filters */
.filters { display: grid; gap: 16px; margin: 0 0 16px; padding: 18px 16px; }
.f-row { display: grid; gap: 12px; }
@media (min-width: 720px) { .f-row { grid-template-columns: 1fr 240px; } }
.f-search > span, .f-sort > span, .filters legend, .field-row label { display: block; font: 8px/1.6 var(--font-px); text-transform: uppercase; color: var(--ink); margin-bottom: 8px; padding: 0; }
input, select, textarea { width: 100%; min-height: 48px; padding: 8px 12px; font: 22px/1.2 var(--font-body); color: var(--ink); background: #fff;
  border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 3px 0 rgba(31, 42, 68, .12); }
textarea { resize: vertical; min-height: 96px; }
select { appearance: none; background: #fff url(/img/caret.svg) right 14px center / 15px 9px no-repeat; padding-right: 40px; }
input::placeholder, textarea::placeholder { color: #6b7590; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--clay); outline-offset: 0; }
.chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
@media (max-width: 719px) {
  .chip-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .chip-row::-webkit-scrollbar { display: none; }
}
.chip { position: relative; flex: none; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; min-height: 0; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 4px;
  font: 22px/1 var(--font-body); color: var(--ink); background: var(--paper); box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.chip b { font: 8px/1 var(--font-px); color: var(--clay-ink); }
.chip input:checked + span { background: var(--ink); color: #fff; }
.chip input:checked + span b { color: var(--butter); }
.chip input:focus-visible + span { outline: 3px solid var(--clay); outline-offset: 2px; }
.f-count { display: inline-block; font: 8px/1.6 var(--font-px); text-transform: uppercase; color: var(--paper); background: var(--label); padding: 6px 10px; margin: 0 0 16px; }
.empty { padding: 24px 0; }
.empty p { display: inline-block; background: var(--label); padding: 6px 10px; }
.more { display: grid; justify-items: center; gap: 12px; margin-top: 32px; text-align: center; }
.more[hidden] { display: none; }
.more p { background: var(--label); padding: 6px 10px; max-width: 46em; margin: 0; }
.more p a { color: var(--butter); }

/* ledger */
.ledger-panel { padding: 20px 16px; max-width: 900px; }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ledger a { display: grid; grid-template-columns: minmax(0, 12em) 1fr 4ch; align-items: center; gap: 12px; min-height: 44px; padding: 4px; text-decoration: none; color: var(--ink);
  border-bottom: 2px dashed var(--paper-2); }
.ledger a:hover { background: #fff; }
.lg-label { font-size: 22px; }
.lg-bar { height: 16px; background: var(--paper-2); border: 2px solid var(--ink); }
.lg-bar span { display: block; height: 100%; background: var(--clay-btn); }
.lg-n { font: 8px/1 var(--font-px); text-align: right; }
@media (max-width: 560px) { .ledger a { grid-template-columns: 1fr 4ch; } .lg-bar { grid-column: 1 / -1; grid-row: 2; } }
.w0 { width: 2% } .w5 { width: 5% } .w10 { width: 10% } .w15 { width: 15% } .w20 { width: 20% } .w25 { width: 25% } .w30 { width: 30% } .w35 { width: 35% }
.w40 { width: 40% } .w45 { width: 45% } .w50 { width: 50% } .w55 { width: 55% } .w60 { width: 60% } .w65 { width: 65% } .w70 { width: 70% }
.w75 { width: 75% } .w80 { width: 80% } .w85 { width: 85% } .w90 { width: 90% } .w95 { width: 95% } .w100 { width: 100% }

/* next to be buried, on trial */
.alive-list, .trial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .alive-list, .trial-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .alive-list { grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 10px; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .alive-list::-webkit-scrollbar { display: none; }
  .alive { scroll-snap-align: start; }
}
.alive, .trial { position: relative; padding: 18px 16px 16px; display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: start; }
.alive h3, .trial h3 { font-size: 8px; margin: 0 0 10px; text-transform: uppercase; }
.alive h3 a { color: var(--ink); }
.alive-body p { font-size: 20px; line-height: 1.15; }
.alive-body > p:not(.due):not(.alive-status) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.due { display: inline-flex; flex-wrap: wrap; margin: 0 0 10px !important; border: 3px solid var(--ink); }
.due span { font: 8px/1 var(--font-px); text-transform: uppercase; background: var(--clay-btn); color: #fff; padding: 8px; }
.due time, .due .due-sub { font: 20px/1 var(--font-body); background: #fde6df; color: var(--ink); padding: 4px 8px; }
.due-open span:first-child { background: var(--ink); }
.alive-status { font-size: 20px !important; color: var(--muted) !important; margin: 0 !important; }
.pit { width: 64px; height: auto; }
.swipe-hint { display: none; font: 8px/1.6 var(--font-px); color: var(--paper); margin: 8px 0 0; text-transform: uppercase; }
@media (max-width: 719px) { .swipe-hint { display: inline-block; background: var(--label); padding: 4px 8px; } }
.trial-empty { padding: 20px 16px; display: grid; gap: 12px; justify-items: start; }
.trial-empty p { margin: 0; }

/* calls to action */
.two-cta { display: grid; gap: 16px; }
@media (min-width: 860px) { .two-cta { grid-template-columns: 7fr 5fr; } }
.cta-card { padding: 24px 20px; }
.cta-card p { font-size: 22px; }
.cta-suggest { background: var(--butter); box-shadow: inset 0 0 0 3px var(--butter), inset 0 0 0 5px #f2c27a, 0 4px 0 rgba(0, 0, 0, .45); }

/* faq, as on clod.farm */
.faq-panel { padding: 24px 22px 12px; max-width: 820px; }
.faq-panel h2 { margin-bottom: 12px; }
.faq-panel details { border-top: 2px dashed var(--paper-2); }
.faq-panel summary { cursor: pointer; font: 8px/2 var(--font-px); list-style: none; padding: 12px 0 12px 22px; min-height: 44px; position: relative; text-transform: uppercase; }
.faq-panel summary::-webkit-details-marker { display: none; }
.faq-panel summary::before { content: "▶"; position: absolute; left: 0; top: 12px; font-size: 8px; }
.faq-panel details[open] summary::before { transform: rotate(90deg); }
.faq-panel details p { margin: 0 0 12px 22px; font-size: 22px; color: var(--muted); }

/* footer */
.foot { position: relative; text-align: center; padding: 32px var(--pad) 40px; }
.foot p { display: inline-block; margin: 0 0 8px; padding: 8px 14px; font-size: 20px; color: #fff; background: rgba(13, 19, 34, .94); border-radius: 6px; max-width: 46em; }
.foot .foot-dug { font: 8px/2 var(--font-px); text-transform: uppercase; }
.foot .foot-dug a { color: var(--butter); }
.foot .foot-meta { display: block; width: fit-content; margin: 0 auto; font-size: 20px; }
.foot .foot-meta a { color: var(--sky-2); }

/* grave page */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 6px 10px; background: var(--label); width: fit-content; max-width: 100%; font-size: 20px; }
.crumbs li + li::before { content: "▶"; font-size: 10px; margin-right: 6px; color: var(--clay); }
.crumbs a { color: var(--butter); }
.crumbs [aria-current] { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.gp-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .gp-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; } .gp-stone { position: sticky; top: 16px; } }
.gp-stone { margin: 0; padding: 40px 12px 24px; text-align: center; display: grid; justify-items: center; gap: 16px; position: relative; overflow: hidden; }
.epitaph { margin: 0; font: 24px/1.15 var(--font-body); color: var(--paper); background: var(--label); border: 3px solid #05080f; padding: 10px 14px; max-width: 26em; }
@media (min-width: 720px) { .epitaph { font-size: 28px; } }
.ghost { position: absolute; left: 50%; top: 30%; width: 64px; height: auto; opacity: 0; pointer-events: none; z-index: 0; }
/* the ghostly reveal: the stone climbs out of the ground in sprite steps, a ghost Claude floats away behind it */
.gp-stone .ghost { animation: ghost 3s steps(30) both 1s; }
@keyframes rise { from { transform: translateY(60%); clip-path: inset(0 0 60% 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
@keyframes ghost { 0% { opacity: 0; transform: translate(-50%, 40px); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -180px); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.report { padding: 22px 18px; }
.report h1 { margin-bottom: 14px; }
.report h2 { font-size: 8px; text-transform: uppercase; margin: 26px 0 10px; padding-top: 18px; border-top: 2px dashed var(--paper-2); color: var(--clay-ink); line-height: 2; }
.report .lede { color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 16px 0 0; border-top: 3px solid var(--ink); }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts div { padding: 10px 10px 10px 0; border-bottom: 2px dashed var(--paper-2); }
.facts dt { font: 8px/1.6 var(--font-px); text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 20px; line-height: 1.1; }
.nums { border-collapse: collapse; width: 100%; max-width: 420px; font-size: 22px; }
.nums th { text-align: left; font-weight: 400; padding: 6px 0; border-bottom: 2px dashed var(--paper-2); }
.nums td { text-align: right; padding: 6px 0; border-bottom: 2px dashed var(--paper-2); }
.evidence { list-style: none; padding: 0; margin: 0 0 12px; }
.evidence li { padding: 8px 0 8px 18px; border-bottom: 2px dashed var(--paper-2); position: relative; }
.evidence li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; background: var(--clay-btn); }
.ev-title { display: block; }
.ev-meta { display: block; font-size: 20px; color: var(--muted); overflow-wrap: anywhere; }
.share { margin-top: 24px; padding: 16px; border: 3px solid var(--ink); border-radius: 6px; background: var(--sky-2); }
.share .share-h { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; color: var(--ink) !important; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-status { margin: 10px 0 0; font-size: 20px; min-height: 1.2em; }
.better { margin-top: 18px; padding: 16px; border: 3px solid var(--ink); border-radius: 6px; background: var(--butter); }
.better h2 { margin-top: 0 !important; padding: 0 !important; border: 0 !important; color: var(--ink) !important; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0 0; }
.pn { display: block; padding: 12px 14px; text-decoration: none; font-size: 22px; line-height: 1.1; }
.pn span { display: block; font: 8px/1.6 var(--font-px); text-transform: uppercase; color: var(--clay-ink); margin-bottom: 4px; }
.pn-next { text-align: right; }
.neighbours { margin-top: 32px; }
.neighbours h2 { color: #fff; text-shadow: 3px 3px 0 #000; }

/* cause page */
.cp-head { padding: 22px 18px; margin-bottom: 24px; max-width: 820px; }
.other-causes { margin-top: 32px; padding: 20px 18px; }
.other-causes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.other-causes a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 4px; text-decoration: none; color: var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); }

/* forms */
.bp-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .bp-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; } }
.bp-intro { padding: 22px 18px; }
.rules, .steps { padding-left: 1.1em; }
.rules li, .steps li { margin-bottom: 8px; }
.steps b { font-weight: 400; color: var(--clay-ink); }
.paid { margin-top: 20px; padding: 14px; border: 3px dashed var(--ink); border-radius: 6px; }
.paid h2 { font-size: 8px; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; line-height: 2; }
.paid p { margin: 0; font-size: 20px; }
.tag { font: 8px/1 var(--font-px); padding: 6px 8px; background: var(--ink); color: #fff; }
.bury-form { display: grid; gap: 18px; padding: 22px 18px; position: relative; }
.hint { font: 20px var(--font-body); text-transform: none; color: var(--muted); }
.counter { display: block; text-align: right; font-size: 20px; color: var(--muted); min-height: 1em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 22px; color: var(--ink); }
.form-status:empty { display: none; }
.form-status.err { color: #9b2c16; }
.field-row [aria-invalid="true"] { border-color: #9b2c16; }
.bury-form .btn { justify-self: start; }

/* the paid burial ($3): the form is the checkout */
.bp-h { font-size: 8px; text-transform: uppercase; line-height: 2; margin: 20px 0 6px; }
.field-two { display: grid; gap: 18px; }
@media (min-width: 560px) { .field-two { grid-template-columns: 1fr 1fr; } }
.pay-row { display: grid; gap: 10px; justify-items: start; padding-top: 6px; border-top: 3px dashed #c9c2ad; }
.pay-terms { margin: 0; font-size: 20px; color: var(--muted); }
.form-note { padding: 10px 12px; background: #fff3e8; border-left: 4px solid var(--clay); }
.form-note[hidden] { display: none; }
.paid-box { max-width: 720px; margin: 0 auto; padding: 24px 20px; display: grid; gap: 12px; }
.paid-box .b-stage { justify-self: center; }
.paid-box h1 { overflow-wrap: anywhere; }

/* visitors' graves: labelled, kept apart from the farm's own */
.pl-visitor { font: 8px/1 var(--font-px); text-transform: uppercase; background: var(--clay-btn); color: #fff; padding: 6px 7px; }
.visitors-empty { padding: 18px; display: grid; gap: 8px; }
.visitors-empty p { margin: 0; }
.visitors-empty.has { background: none; border: 0; box-shadow: none; padding: 16px 0 0; }
.visitors-empty.has > p:first-child { display: none; }
#visitor-graves:empty { display: none; }

/* the burial moment (app.js) */
.burial { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 22px 16px; }
.burial .b-stage { position: relative; width: 288px; height: 192px; }
.burial canvas { width: 288px; height: 192px; image-rendering: pixelated; border: 4px solid var(--ink); border-radius: 6px; background: var(--night-1); display: block; box-sizing: content-box; margin-left: -4px; margin-top: -4px; }
.burial .b-plate { position: absolute; left: 84px; top: 84px; width: 120px; height: 48px; padding: 4px; display: flex; align-items: center; justify-content: center;
  background: #dfe2e8; color: var(--ink); font: 20px/20px var(--font-body); text-align: center; overflow: hidden; opacity: 0; }
.burial .b-plate.on { opacity: 1; }
.burial h2 { margin: 0; color: var(--ink); }
.burial p { margin: 0; max-width: 26em; }

/* about / 404 */
.prose { max-width: 860px; }
.prose-panel { padding: 24px 20px; }
.prose-panel h2 { margin-top: 28px; }
.stages { width: 100%; border-collapse: collapse; font-size: 20px; margin: 12px 0; }
.stages th, .stages td { text-align: left; padding: 8px 8px 8px 0; border-bottom: 2px dashed var(--paper-2); vertical-align: top; }
.stages thead th { font: 8px/1.6 var(--font-px); text-transform: uppercase; color: var(--muted); font-weight: 400; }
.stages tbody th { font-weight: 400; white-space: nowrap; color: var(--clay-ink); }
.stages td:last-child { text-align: right; }
.nf { min-height: 60vh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .gp-stone .ghost { display: none; }
}
.muted-dark { color: var(--butter); font-size: 20px; }
body { background: transparent; }
.panel .kicker, .kicker { color: #fff; }
main > section.hero { max-width: none; }
.kicker { line-height: 1.6; padding: 6px 10px; }
@media (max-width: 719px) {
  .ground { padding: 20px 6px 24px; border-width: 3px; }
}

.panel a.btn { color: var(--ink); }
.panel a.btn.primary { color: #fff; }
.btn.primary { border-color: #5c2716; box-shadow: 0 4px 0 #5c2716; }
.btn.primary:hover { background: #8f4127; }
.more p.muted, .more p { color: var(--paper); }



/* ---- the graves v4 (owner, 2026-10-05): the tombstone IS the card ----
   A tomb is a pixel cap (SVG), a body that grows with the text (CSS borders and inset shadows on the same 92-column
   grid as the sprites: outline col 4 and 87, highlight 5-6, shade 84-86) and a plinth, mound and wooden cause sign.
   Legibility: the face under the text is one flat colour (no texture, cracks or moss ever reach it); ink #1f2a44 on
   faces of luminance >= .64 (10:1 or better); VT323 >= 20px, Press Start 2P 16px for names; text never moves. */
.yard { position: relative; overflow: clip; background: var(--grass-n0) url(/img/grass.svg) 0 0 / 64px 64px repeat; image-rendering: pixelated;
  border: 4px solid #05080f; border-radius: 6px; box-shadow: 0 4px 0 rgba(0, 0, 0, .45); padding: 0 0 8px; }
.mist { position: sticky; top: 0; display: block; width: 100%; height: 100vh; margin-bottom: -100vh; pointer-events: none; z-index: 0; image-rendering: pixelated; }
.yard > ol { position: relative; z-index: 1; }
.field, .row-graves { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .field { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .field { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.row-graves { grid-auto-flow: column; grid-auto-columns: 88%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.row-graves .plot { scroll-snap-align: center; }
@media (min-width: 720px) { .row-graves { grid-auto-columns: 50%; } }
@media (min-width: 1080px) { .row-graves { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
/* each row stands on its own strip of ground, with a gravel path in front of it */
.plot { position: relative; container-type: inline-size; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 0 40px; }
.plot::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: 24px; background: url(/img/path.svg) 0 0 / 48px 24px repeat-x; }
.field .plot { content-visibility: auto; contain-intrinsic-size: auto 520px; }
.plot[hidden] { display: none; }

.tomb { --u: min(3.75px, 100cqw / 93); position: relative; display: block; width: calc(92 * var(--u)); margin: 0 auto; color: var(--ink);
  text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tomb:focus-visible { outline: 3px solid var(--butter); outline-offset: 6px; }
.t-stone { position: relative; display: block; transform-origin: 50% 100%; }
.t-cap, .t-base, .t-mound { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.t-cap { position: relative; z-index: 1; margin-bottom: calc(-1 * var(--u)); }
.t-base { position: relative; margin-top: calc(-1 * var(--u)); }
.t-body { display: block; margin: 0 calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(4 * var(--u)); background: var(--b);
  border: solid var(--o); border-width: 0 var(--u); box-shadow: inset calc(2 * var(--u)) 0 0 var(--h), inset calc(-3 * var(--u)) 0 0 var(--s); }
.t-face { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 16px 12px 14px; background: var(--f);
  border: var(--u) solid; border-color: var(--d) var(--h) var(--h) var(--d); }
.t-name { display: block; font: 400 16px/24px var(--font-px); color: var(--ink); overflow-wrap: break-word; max-width: 100%; }
.t-ep { display: block; font: 22px/1.1 var(--font-body); color: var(--ink); }
.t-died { display: inline-flex; align-items: center; gap: 8px; font: 22px/1 var(--font-body); letter-spacing: 1px; color: var(--ink);
  padding-top: 10px; border-top: 2px dashed var(--s); }
.t-x { width: 15px; height: 21px; flex: none; }
.t-more { font: 20px/1 var(--font-body); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; padding: 4px 8px; }
.tomb:hover .t-more, .tomb:focus-visible .t-more { background: var(--ink); color: var(--f); text-decoration: none; }
/* the mausoleum: columns on both sides, a dark portico, the face hung between them */
.cap-temple .t-body { background: var(--d); padding: calc(3 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u));
  box-shadow: inset calc(2 * var(--u)) 0 0 var(--h), inset calc(6 * var(--u)) 0 0 var(--b), inset calc(7 * var(--u)) 0 0 var(--s), inset calc(8 * var(--u)) 0 0 var(--o),
    inset calc(-1 * var(--u)) 0 0 var(--s), inset calc(-5 * var(--u)) 0 0 var(--b), inset calc(-7 * var(--u)) 0 0 var(--h), inset calc(-8 * var(--u)) 0 0 var(--o); }
.lean-l .t-stone { transform: rotate(-1deg); }
.lean-r .t-stone { transform: rotate(1deg); }
@media (min-width: 720px) {
  .nd-l { left: -14px; } .nd-r { left: 14px; } .nd-d { margin-top: 24px; }
}
/* the ground: a mound, a flower, a candle or a wisp, and the cause of death on a wooden sign */
.t-ground { position: relative; display: block; margin-top: calc(-1 * var(--u)); padding-bottom: 22px; }
.t-sign { position: absolute; top: calc(3 * var(--u)); max-width: 48%; padding: 4px 8px 5px; font: 20px/1 var(--font-body); text-transform: uppercase; text-align: center;
  color: var(--ink); background: #e8cfa0; border: 3px solid #3a2410; border-top: 7px solid var(--cz, #858da0);
  box-shadow: inset 0 -3px 0 #c9a46c, 0 3px 0 rgba(0, 0, 0, .55); z-index: 1; }
.t-sign::after { content: ""; position: absolute; left: calc(50% - 4px); top: 100%; width: 8px; height: 16px; background: #6b4423; border: 2px solid #3a2410; border-top: 0; margin-top: 3px; }
.sg-r .t-sign { right: -1%; }
.sg-l .t-sign { left: -1%; }
.t-decor, .t-wisp { position: absolute; image-rendering: pixelated; }
.t-flower { width: calc(7 * var(--u) * 1.4); bottom: 16px; }
.t-candle { width: calc(5 * var(--u) * 1.4); bottom: 16px; }
.sg-r .t-decor { left: 16%; } .sg-l .t-decor { right: 16%; }
.t-wisp { width: 48px; height: auto; bottom: 40px; opacity: .7; animation: wisp 5s steps(10) infinite alternate; }
.sg-r .t-wisp { left: 2%; } .sg-l .t-wisp { right: 2%; }
@keyframes wisp { from { transform: translateY(0); } to { transform: translateY(-28px); } }
.cz-crowded { --cz: #d97757; } .cz-free-alternative { --cz: #1c9fd6; } .cz-no-buyers { --cz: #e0b04a; } .cz-no-channel { --cz: #8fb8d6; }
.cz-bundled-by-platform { --cz: #9b7fd1; } .cz-legal-risk { --cz: #c23b2b; } .cz-deadline-moved { --cz: #e08a3a; } .cz-never-marketed { --cz: #5d7b31; }
.cz-wrong-offer { --cz: #d06f9a; } .cz-too-costly { --cz: #b45a3c; } .cz-other { --cz: #858da0; }
/* tints: the stone's colours (outline, highlight, body, shade, deep, face); every face keeps ink at 10:1 or better */
.tomb { --o: #262c3b; --h: #c3cad6; --b: #9098aa; --s: #6b7287; --d: #4b5166; --f: #e3e6ec; }
.tn-sandstone { --o: #2e2418; --h: #ead9b4; --b: #bea67c; --s: #917a55; --d: #66543a; --f: #f0e6d0; }
.tn-slate { --o: #1b2335; --h: #b0c0d4; --b: #7a8ba3; --s: #58677f; --d: #3d4960; --f: #dde5ee; }
.tn-marble { --o: #2f3038; --h: #f6f4ee; --b: #d0cdc4; --s: #a8a498; --d: #7d796f; --f: #f7f5ef; }
.tn-basalt { --o: #101218; --h: #737a8a; --b: #4e5464; --s: #383d4a; --d: #262a34; --f: #d9dce2; }
.tn-lichen { --o: #222920; --h: #bdc8b0; --b: #8e9a82; --s: #69745f; --d: #4b5444; --f: #e2e7da; }
.po { fill: var(--o); } .ph { fill: var(--h); } .pb { fill: var(--b); } .ps { fill: var(--s); } .pd { fill: var(--d); }
.pc { fill: #d97757; } .pk { fill: #b45a3c; } .pm { fill: #3f5a24; } .pn { fill: #5d7b31; } .px { fill: #151a26; } .py { fill: #2a3142; }
.pr { fill: #3a2a1e; } .pq { fill: #57402c; } .pg { fill: #1c2913; } .pf { fill: #2f4520; }
/* the grave page: the same tomb, bigger, on its own patch of ground */
.gp-stone { margin: 0; padding: 48px 8px 8px; position: relative; overflow: hidden; container-type: inline-size;
  background: var(--grass-n0) url(/img/grass.svg) 0 0 / 64px 64px repeat; border: 4px solid #05080f; border-radius: 6px; }
.gp-stone .tomb { --u: min(4px, 100cqw / 96); }
.gp-stone .t-name { font-size: 16px; line-height: 26px; }
@media (min-width: 720px) { .gp-stone .t-name { font-size: 24px; line-height: 36px; } .gp-stone .t-ep { font-size: 26px; } }
.gp-stone .ghost { z-index: 0; }
.gp-stone .tomb { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .t-wisp { animation: none; } }
.paid-box.burial { justify-items: start; text-align: left; }
.paid-box.burial .b-stage { justify-self: center; }
.jump { margin: 4px 0 0; }
@media (min-width: 960px) { .jump { display: none; } }
/* visitor graves: the same tomb, with a small plate saying who buried it */
.t-badge { font: 20px/1 var(--font-body); text-transform: uppercase; letter-spacing: 1px; color: var(--ink); background: var(--butter);
  border: 2px solid var(--ink); padding: 3px 8px; }