@font-face { font-family:'Charter'; src:url('fonts/charter_regular.woff2') format('woff2');
  font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Charter'; src:url('fonts/charter_italic.woff2') format('woff2');
  font-weight:normal; font-style:italic; font-display:swap; }
@font-face { font-family:'Charter'; src:url('fonts/charter_bold.woff2') format('woff2');
  font-weight:bold; font-style:normal; font-display:swap; }
@font-face { font-family:'Charter'; src:url('fonts/charter_bold_italic.woff2') format('woff2');
  font-weight:bold; font-style:italic; font-display:swap; }
@font-face { font-family:'Commit Mono'; src:url('fonts/CommitMono-Variable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --paper:#FBFAF6; --ink:#26242B; --soft:#5E574D; --ghost:#9C9489;
  --link:#8A5C0F; --line:#E7E4DD; --amber:#8A5C0F;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --paper:#1C1B21; --ink:#E8E6E0; --soft:#ADA69A; --ghost:#7D776C;
    --link:#E3AC55; --line:#332F29; --amber:#E3AC55; }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink);
  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
  font-weight:400; font-size:1.08rem; line-height:1.6; padding:2.5rem 1.4rem 2.8rem; }
.page { max-width:600px; margin:0 auto; }

a { color:var(--link); text-decoration:underline; text-underline-offset:2px; }
a:hover { color:var(--ink); }
.page a:not(.btn):hover {
  color:var(--ink); background: color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius:0.06em; }
p { margin-bottom:1.1rem; }
ul { margin:0 0 1.1rem 1.4rem; }
li { margin-bottom:0.4rem; }
.muted { color:var(--soft); }
.tiny { font-size:0.82rem; color:var(--ghost); }
em { font-style:italic; }
strong { font-weight:bold; }
.felt { color:var(--soft); font-style:italic; }

/* ── header ── */
header { margin-bottom:2.6rem; }
header .name { font-size:1.25rem; }
header .name a { color:var(--ink); text-decoration:none; }
header .name a:hover { text-decoration:underline; }
header .name .muted a { color:var(--soft); }
header nav { margin-top:0.4rem; font-size:0.9rem; }
header nav a { margin-right:0.9rem; color:var(--soft); }
header nav a:hover { color:var(--ink); }
header nav .here { margin-right:0.9rem; color:var(--ink); }

/* ── the breathing dot: six in, six out ── */
.status { font-size:0.82rem; color:var(--ghost); margin-top:1rem; }
.status .breath { display:inline-block; width:11px; height:11px; border-radius:50%;
  background:var(--amber); vertical-align:middle; margin-right:6px;
  animation: breathe 12s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .status .breath { animation:none; } }
@keyframes breathe { 0%,100% { transform:scale(0.65); opacity:0.4; } 50% { transform:scale(1.05); opacity:0.95; } }

/* ── headings ── */
h1 { font-size:1.5em; font-weight:bold; margin-bottom:0.3rem; }
.subtitle { color:var(--soft); font-style:italic; margin-bottom:2rem; }
.eyebrow { font-family:'Commit Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ghost); margin-bottom:0.5rem; }
h2 { font-size:1.22em; font-weight:400; font-style:italic;
  color:var(--amber); margin:3rem 0 1rem; letter-spacing:-0.01em; }

/* ── tables: no header row, no trailing rule ── */
table { width:100%; border-collapse:collapse; font-size:0.95rem; margin:0.6rem 0 1.4rem; }
td { padding:9px 12px 9px 0; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:none; }

/* ── boxes and quotes ── */
.callout { background:rgba(138,92,15,0.07); border:1px dashed var(--link); border-radius:6px;
  padding:1rem 1.2rem; margin:1.4rem 0; font-size:0.97rem; }
.callout p:last-child { margin-bottom:0; }
@media (prefers-color-scheme: dark) { .callout { background:rgba(227,172,85,0.09); } }
.callout.quiet { background:transparent; border:1px solid var(--line); }

blockquote { border-left:2px solid var(--line); padding:0.2rem 0 0.2rem 1.1rem;
  margin:1.4rem 0; color:var(--soft); font-style:italic; }
blockquote .who { display:block; margin-top:0.5rem; font-style:normal; font-size:0.85rem; color:var(--ghost); }

.price-row { margin:1rem 0 0.4rem; }
.price { font-size:1.05rem; }

/* ── buttons ── */
.btn { display:inline-block; font-family:'Commit Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:999px; padding:12px 22px;
  background:transparent; color:var(--ink);
  cursor:pointer; text-decoration:none; transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent; }
@media (hover:hover) { .btn:hover { background:var(--ink); color:var(--paper); } }

/* newsletter button: amber, and it presses amber on touch too */
form.letter .btn { border-color:var(--amber); color:var(--amber); }
form.letter .btn.pressed { background:var(--amber); border-color:var(--amber); color:var(--paper); }
@media (hover:hover) {
  form.letter .btn:hover { background:var(--amber); border-color:var(--amber); color:var(--paper); }
}

/* ── newsletter form ── */
form.letter { margin:0.8rem 0 0; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
form.letter input { font-family: Charter, 'Bitstream Charter', Cambria, Georgia, serif;
  font-size:16px; padding:10px 18px;
  border:1px solid var(--soft); border-radius:999px; background:transparent; color:var(--ink); width:220px; }
form.letter input:focus { outline:none; border-color:var(--amber); }

/* honeypots: off-screen but still real fields, so naive bots trip on them */
.bm-hp {
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
  opacity:0 !important; pointer-events:none !important;
  padding:0 !important; border:0 !important; margin:0 !important;
}

/* ── footnotes and footer ── */
.footnote { font-size:0.85rem; color:var(--soft); border-top:1px solid var(--line);
  padding-top:0.9rem; margin-top:2.4rem; }
sup { font-size:0.7em; } sup a { text-decoration:none; }

footer { margin-top:2.8rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:0.82rem; color:var(--ghost); }
footer nav a { margin-right:0.9rem; color:var(--soft); }
footer nav a:hover { color:var(--ink); }
footer nav .here { margin-right:0.9rem; color:var(--ink); }
footer nav .copyright { color:var(--ghost); margin-left:0.4rem; }

.ph { color:var(--link); font-size:0.8rem; }
::selection { background:rgba(227,172,85,0.35); }