/* The Olde Blog — app chrome (admin/auth) + the three blog templates.
   The chrome follows the landing page's language: serif display, monospace
   labels, hairline rules, one oxblood accent, no rounded-card clutter. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; }
img { max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- App chrome (admin + auth) ---------- */

.app {
  --bg: #F7F5EF;
  --ink: #1C1B18;
  --muted: #6F6B61;
  --rule: #DCD8CD;
  --surface: #FDFCF8;
  --accent: #7C2D19;
  --danger: #8E2F1D;
  --ok: #3F5F45;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}
/* Dark palette in two cases: the OS asks for it and the reader hasn't
   explicitly chosen light, or they picked dark in the topbar toggle.
   The two blocks are identical by necessity — CSS can't share a rule
   body across a media query and a plain selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app {
    --bg: #171613;
    --ink: #ECE9E0;
    --muted: #9A958A;
    --rule: #302E28;
    --surface: #1D1C18;
    --accent: #D98A6A;
    --danger: #E08A72;
    --ok: #8FB89A;
  }
}
:root[data-theme="dark"] .app {
  --bg: #171613;
  --ink: #ECE9E0;
  --muted: #9A958A;
  --rule: #302E28;
  --surface: #1D1C18;
  --accent: #D98A6A;
  --danger: #E08A72;
  --ok: #8FB89A;
}

.app a { color: var(--accent); text-underline-offset: 3px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); }
.right { text-align: right; }

/* Uppercase monospace label — the landing page's signature device. */
.label, .field > span, .table th, .pill, .eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
  color: var(--muted);
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--rule);
}
.topbar nav { display: flex; align-items: center; gap: 1.2rem; }
.topbar nav .muted { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; }
.app .brand {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.brand-dot { color: var(--accent); }
/* "The Olde Blog / <blog>" — the second crumb goes back to that blog's admin page. */
.brandline { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.brand-sep { font-family: var(--mono); color: var(--rule); font-size: .9rem; }
.app .brand-blog { text-transform: none; letter-spacing: .04em; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.app .brand-blog:hover { color: var(--accent); }

/* Theme toggle: one small button cycling system → light → dark. */
.themetoggle {
  background: none; border: 1px solid var(--rule); border-radius: 0;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding: .35rem .6rem; display: inline-flex; align-items: center; gap: .4rem;
  line-height: 1;
}
.themetoggle:hover { color: var(--accent); border-color: var(--accent); }
.themetoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.themetoggle .ticon { font-size: .8rem; line-height: 1; }
@media (max-width: 560px) { .themetoggle .tlabel { display: none; } }
/* Phone top bar: brand on one line, no author name, crumb shortened. */
.topbar nav { flex-shrink: 0; }
.brandline { flex: 1 1 auto; overflow: hidden; }
.app .brand { white-space: nowrap; }
@media (max-width: 560px) {
  .topbar { padding: .85rem 1rem; gap: .6rem; }
  .topbar nav { gap: .8rem; }
  .topbar nav .muted { display: none; }
  .app .brand { font-size: .7rem; letter-spacing: .12em; }
  .app .brand-blog { font-size: .76rem; max-width: 30vw; }
}

.container { max-width: 54rem; margin: 0 auto; padding: 2.4rem 1.4rem 5rem; }
/* The editor: as wide as the screen allows, within reason, so the Markdown
   and the preview each get a comfortable column on a desktop. */
.container-wide { max-width: 100rem; padding-inline: 2rem; }
.centered { display: grid; place-items: center; padding: 1.2rem; }

.pagehead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: 0 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
.pagehead h1 { font-size: 2rem; font-weight: 500; margin: 0; letter-spacing: -.02em; line-height: 1.1; }
.pagehead h1 a { color: var(--ink); text-decoration: none; }
.pagehead h1 a:hover { color: var(--accent); }
.pagehead-actions { display: flex; gap: 1rem; align-items: baseline; }

/* Stat strip: the blog at a glance, above the detail. A definition list —
   value first, mono label under it — so it reads as data, not headings. */
.stats { display: flex; gap: 2.6rem; flex-wrap: wrap; margin: 0 0 2.4rem; }
.stats .stat { margin: 0; }
.stat-n { margin: 0; font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.stat-k { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-top: .4rem; }

/* Post rows carry a meta subline instead of table columns. */
.cardmeta { margin: .2rem 0 0; }
.cardmeta .pill { letter-spacing: .14em; }

/* Readers no longer own a section here — one line, with a way through. */
.summaryline { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: 2.4rem; padding-top: 1.3rem; }
.summaryline p { margin: 0; }
.summaryline strong { color: var(--ink); font-weight: 600; }

/* Sections are separated by rules and labels, not boxes. */
.panel { border-top: 1px solid var(--rule); padding: 2.6rem 0 .6rem; margin: 0 0 2.4rem; }
.panel:first-of-type { border-top: none; padding-top: 0; }
.panel h2 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 1.4rem;
}
.panel-danger { border-top-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); }
.panel-danger h2 { color: var(--danger); }

.authcard { width: 100%; max-width: 26rem; padding: 2rem 0; }
.authcard .eyebrow { margin: 0 0 1.6rem; }
.authcard .eyebrow a { color: var(--muted); text-decoration: none; }
.authcard .eyebrow a:hover { color: var(--accent); }
.authtitle { margin: 0 0 .7rem; font-size: 2rem; font-weight: 500; letter-spacing: -.02em; }
.authcard .btn { margin-top: .4rem; }
/* Only rendered when DEV_LOGIN=1 on a loopback origin; deliberately drab so
   it never gets mistaken for part of the real sign-in. */
.devlogin { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px dashed var(--rule); }
.devlogin p {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .9rem;
}
.devlogin .devlogin-note {
  font-family: var(--serif); font-size: .92rem; letter-spacing: 0; text-transform: none;
  margin: -.5rem 0 1.1rem;
}

.stack { display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; }
.stack .field, .stack textarea { width: 100%; }
/* Text inputs want a short measure; the appearance pickers want room to
   line up side by side, so cap the fields, not the whole form. */
.panel .stack > .field, .panel .stack > .checkfield { max-width: 34rem; }
.fieldrow { display: flex; gap: 1.4rem; flex-wrap: wrap; width: 100%; }
/* Fields in a row share the line instead of inheriting .stack's full width. */
.fieldrow .field { width: auto; flex: 1 1 11rem; }
.fieldrow .field:has(input[type="color"]) { flex: 0 0 auto; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field input, .field textarea, .field select {
  border: 1px solid var(--rule); border-radius: 0; padding: .6rem .7rem;
  background: var(--surface); width: 100%; font-family: var(--serif);
}
.field textarea { font-family: var(--mono); font-size: .9rem; }
.field input[type="color"] { padding: .2rem; width: 4rem; height: 2.5rem; }
/* iOS Safari zooms the whole page when a focused control's text is under
   16px, and the zoom outlives the focus — the page then looks cropped and
   scrolls sideways. Keep every control at 16px on phones. */
@media (max-width: 560px) {
  .field input, .field textarea, .field select, .devlogin input { font-size: 16px; }
}
.checkfield { display: flex; gap: .7rem; align-items: flex-start; width: 100%; font-size: .95rem; }
.checkfield input { margin-top: .3rem; flex: none; accent-color: var(--accent); }
.checkfield span { color: var(--muted); }
.checkfield strong { color: var(--ink); font-weight: 600; }
.field :focus-visible, .checkfield input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Scoped to `.app` on purpose: a bare `.btn` (one class) loses to `.app a`
   (class + element), which would paint every anchor-button's text with the
   link accent — oxblood on near-black, and invisible once hover fills the
   background with that same accent. */
.app .btn {
  display: inline-block; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 0;
  padding: .7rem 1.3rem; text-decoration: none;
}
.app .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.app .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.app .btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.app .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--bg); }
.app .btn-ghost.danger { color: var(--danger); }
.app .btn-publish { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.app .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Floating "New post" on the blog page. Scoped under .app so it outranks the
   generic `.app a` link colour, which otherwise paints the label accent-on-accent. */
.app .fab {
  position: fixed; right: max(1.4rem, calc((100vw - 54rem) / 2 - 1rem)); bottom: 2rem; z-index: 20;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .9rem; letter-spacing: .06em; text-decoration: none;
  background: var(--accent); color: var(--bg); border-radius: 999px; padding: 1rem 1.5rem 1rem 1.2rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.app .fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .28); color: var(--bg); }
.app .fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fab-plus { font-size: 1.5rem; line-height: 1; font-weight: 300; }
@media (max-width: 560px) { .app .fab { right: 1.2rem; bottom: 1.2rem; } }
.linklike {
  background: none; border: none; padding: 0; color: var(--accent);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  text-decoration: underline; text-underline-offset: 3px;
}
.linklike.danger { color: var(--danger); }

.flash {
  padding: .7rem 0 .7rem 1rem; margin: 0 0 1.6rem; font-size: .95rem;
  border-left: 2px solid var(--ok); color: var(--ok); background: none;
}
.flash-error { border-left-color: var(--danger); color: var(--danger); }

.cardlist { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.card {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--rule); padding: 1rem 0;
}
.card:first-child { border-top: 1px solid var(--rule); }
.cardtitle { font-weight: 600; font-size: 1.15rem; text-decoration: none; }
.plainlist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

/* Standalone form pages (new blog): narrower measure, actions on a rule. */
.stack.narrow { max-width: 30rem; }
.formactions {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 1.2rem; width: 100%;
}
.empty { font-size: 1.05rem; max-width: 42ch; }

.table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.table th {
  text-align: left; font-weight: 400;
  padding: 0 1rem .7rem 0; border-bottom: 1px solid var(--rule);
}
.table td {
  padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline;
}
.table tr:last-child td { border-bottom: none; }
/* Phones: each row becomes a small stacked block instead of overflowing. Cells
   that carry a data-label print it, so multi-column tables stay readable. */
@media (max-width: 560px) {
  .table, .table tbody, .table tr, .table td { display: block; }
  .table thead { display: none; }
  .table tr { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
  .table tr:last-child { border-bottom: none; }
  .table td { padding: .12rem 0; border-bottom: none; }
  .table td.right { text-align: left; }
  .table td:empty { display: none; }
  .table td[data-label]::before {
    content: attr(data-label); display: inline-block; min-width: 6.5rem;
    font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
}

.pill {
  display: inline-block; padding: 0; letter-spacing: .16em; background: none;
}
.pill::before { content: "● "; }
.pill-published, .pill-active { color: var(--ok); }
.pill-draft { color: var(--muted); }
.pill-unsubscribed, .pill-bounced { color: var(--danger); }
.pagehead .pill { font-size: .66rem; vertical-align: middle; margin-left: .4rem; }

.editor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; width: 100%; }
@media (max-width: 760px) { .editor-split { grid-template-columns: 1fr; } }
#editor-md {
  min-height: 26rem; font-family: var(--mono); font-size: .9rem; line-height: 1.65;
  resize: vertical; background: var(--surface);
}
/* ---- Appearance pickers ---------------------------------------------- */
.sublabel { margin: 1.5rem 0 -.2rem; }
.stack > .sublabel:first-of-type { margin-top: .6rem; }
.pickrow { display: flex; gap: .8rem; flex-wrap: wrap; width: 100%; }
.pick { cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-body {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--rule); padding: .7rem .8rem; background: var(--surface);
}
.pick input:checked + .pick-body { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pick input:focus-visible + .pick-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-name { font-weight: 600; font-size: .95rem; }
.pick-note { color: var(--muted); font-size: .8rem; }

/* Each template card holds a little rendered page in that template's real
   type and layout — so the choice is shown, not just named. */
.templates { gap: 1rem; align-items: stretch; }
.templates .pick { display: flex; }
.templates .pick-body { width: 13.5rem; gap: .55rem; flex: 1; }
.tpl-preview {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--rule);
  padding: .85rem .9rem 1rem; height: 9rem; overflow: hidden;
}
.tpl-p-meta {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.tpl-p-title { color: var(--ink); font-size: .98rem; line-height: 1.15; margin: .18rem 0 0; }
.tpl-p-body { display: block; margin-top: .55rem; }
.tpl-p-line { display: block; height: 3px; border-radius: 1px; background: var(--rule); margin-bottom: 4px; }
.tpl-p-line.short { width: 52%; }

/* essay — centered serif, the title leading, date whispering beneath a rule */
.tpl-sample-essay .tpl-preview { text-align: center; align-items: center; }
.tpl-sample-essay .tpl-p-title { order: 1; font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 1.35rem; margin: 0; }
.tpl-sample-essay .tpl-p-title::after {
  content: ""; display: block; width: 1.7rem; height: 2px; background: var(--accent); margin: .45rem auto .1rem;
}
.tpl-sample-essay .tpl-p-meta {
  order: 2; margin-top: .1rem; font-family: var(--serif); font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: .64rem;
}
.tpl-sample-essay .tpl-p-body { order: 3; width: 100%; }

/* journal — date in a left gutter, bold sans title: a dated ledger */
.tpl-sample-journal .tpl-preview {
  display: grid; grid-template-columns: 2.7rem 1fr; column-gap: .55rem; row-gap: .5rem; align-content: start;
}
.tpl-sample-journal .tpl-p-meta { grid-column: 1; grid-row: 1; font-variant-numeric: tabular-nums; }
.tpl-sample-journal .tpl-p-title {
  grid-column: 2; grid-row: 1; margin: 0;
  font-family: "Archivo Black", "Arial Black", system-ui, sans-serif; font-weight: 400;
  text-transform: uppercase; font-size: .82rem; letter-spacing: -.01em; line-height: 1;
}
.tpl-sample-journal .tpl-p-body { grid-column: 2; grid-row: 2; margin: 0; }

/* mono — uppercase monospace, indexed, a heavy rule across the top */
.tpl-sample-mono .tpl-preview { border-top: 3px solid var(--ink); }
.tpl-sample-mono .tpl-p-meta { font-family: "Space Mono", ui-monospace, monospace; }
.tpl-sample-mono .tpl-p-title {
  font-family: "Space Mono", ui-monospace, monospace; text-transform: uppercase; font-size: .8rem; letter-spacing: .01em; font-weight: 700;
}
.tpl-sample-mono .tpl-p-title::before { content: "[01]  "; color: var(--muted); font-weight: 400; }

.tone-pick .pick-body { align-items: center; width: 5.5rem; }
.tone-chip {
  display: grid; place-items: center; width: 100%; height: 2.4rem;
  border: 1px solid var(--rule); font-family: var(--serif); font-size: 1rem;
}

.accentrow { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; max-width: 34rem; }
/* A field following a picker group needs the same air the groups get. */
.pickrow + .field, .accentrow + .field { margin-top: .5rem; }
.swatch { cursor: pointer; line-height: 0; }
.swatch input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.swatch > span {
  display: block; width: 2.15rem; height: 2.15rem; border: 1px solid var(--rule);
}
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch.custom { display: inline-flex; align-items: center; }
.swatch.custom input[type="color"] { width: 2.15rem; height: 2.15rem; padding: 0; border: 1px dashed var(--muted); }
.swatch.custom input:checked + span, .swatch.custom input[type="color"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Post editor -------------------------------------------------------
   Writing gets the room: a wide column for the text, a narrower reference
   preview, and an action bar that stays put however long the post runs. */
.editor { display: flex; flex-direction: column; gap: 1.2rem; }
.titlefield input { font-family: var(--serif); font-size: 1.3rem; padding: .7rem .8rem; }

.editor-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4rem; width: 100%; }
@media (max-width: 900px) { .editor-split { grid-template-columns: 1fr; } }
.editor-col, .preview-col { min-width: 0; }

.toolbar {
  display: flex; align-items: center; gap: .15rem; flex-wrap: wrap;
  border: 1px solid var(--rule); border-bottom: none; padding: .3rem .35rem;
  background: var(--surface);
}
.tool {
  font-family: var(--mono); font-size: .78rem; line-height: 1;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem;
  background: none; border: 1px solid transparent; border-radius: 0; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.tool:hover { color: var(--accent); border-color: var(--rule); background: var(--bg); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolsep { width: 1px; height: 1.1rem; background: var(--rule); margin: 0 .3rem; }

/* Sized for a 600–1200 word post without scrolling the field itself. */
#editor-md {
  min-height: 60vh; height: 34rem; resize: vertical;
  font-family: var(--mono); font-size: .92rem; line-height: 1.7;
  background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.1rem;
}
#editor-md.dragover { outline: 2px dashed var(--accent); outline-offset: -3px; }
@media (max-width: 560px) { #editor-md { font-size: 16px; } } /* no iOS focus zoom; see .field rules */
.editor-meta { margin: .4rem 0 0; }

.preview-col > span { display: block; }
.preview-pane {
  overflow-wrap: anywhere;
  border: 1px solid var(--rule); padding: 1rem 1.2rem;
  height: calc(34rem + 2.55rem); min-height: 60vh; overflow-y: auto;
  background: var(--surface); font-size: .95rem;
}
@media (max-width: 900px) {
  .preview-pane { height: 20rem; min-height: 0; }
  #editor-md { height: 26rem; min-height: 0; }
}

.editor-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule); background: var(--bg);
  padding: .9rem 0; margin-top: -.2rem;
}
.editor-actions .spacer { flex: 1 1 auto; }

/* ---------- Blog templates ---------- */

.blog { background: var(--bg); color: var(--ink); font-size: 18px; line-height: 1.65; }
.tone-light { --bg: #FFFFFF; --ink: #1E2322; --muted: #68716D; --rule: #E6E6E2; --surface: #F5F5F2; }
.tone-warm  { --bg: #FAF6EF; --ink: #26211A; --muted: #75705F; --rule: #E8E1D3; --surface: #F2ECE0; }
.tone-dark  { --bg: #181B1A; --ink: #E8E6DF; --muted: #969C95; --rule: #2E3330; --surface: #202422; }

.blog-wrap { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1.4rem 5rem; }
.blog a { color: var(--accent); text-underline-offset: 2px; }

.authorbar {
  font-size: .85rem; color: var(--muted); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 6px; padding: .4rem .8rem; margin: 0 0 2rem;
}
.crumb { margin: 0 0 2rem; font-size: .9rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb-tagline { display: block; margin-top: .2rem; color: var(--muted); font-size: .85rem; }
.tpl-essay .crumb-tagline { font-style: italic; }

.blog-header { margin-bottom: 2.6rem; padding-bottom: 1.4rem; border-bottom: 2px solid var(--accent); }
.blog-title { margin: 0 0 .4rem; line-height: 1.1; letter-spacing: -.015em; color: var(--accent); }
.blog-desc { margin: 0; color: var(--muted); font-size: 1.05rem; }
.blog-empty { color: var(--muted); font-style: italic; }
.blog-foot {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .9rem; font-style: italic;
}

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-bottom: 1px solid var(--rule); }
.post-link {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1rem 0; text-decoration: none; color: var(--ink) !important;
}
.post-link:hover .post-title { color: var(--accent); }
.post-date { font-size: .8rem; color: var(--muted); }
.post-title { font-size: 1.2rem; font-weight: 600; line-height: 1.3; }

.post-header { margin-bottom: 2rem; }
.post-heading { margin: 0 0 .5rem; line-height: 1.12; letter-spacing: -.015em; }
.post-meta { margin: 0; color: var(--muted); font-size: .92rem; }
.post-tagline { margin: 0 0 .7rem; color: var(--muted); font-size: 1.2rem; line-height: 1.35; }
.post-tagline-sm { display: block; margin-top: .15rem; font-weight: 400; font-size: .8em; line-height: 1.35; color: var(--muted); }
.post-link:hover .post-tagline-sm { color: var(--muted); }

.prose { overflow-wrap: anywhere; }
.prose p { margin: 0 0 1.15em; }
.prose h1, .prose h2 { font-size: 1.45rem; margin: 1.8em 0 .5em; line-height: 1.25; color: var(--accent); }
.prose h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; color: var(--accent); }
.prose img { border-radius: 4px; margin: 1.1em 0; }
@media (min-width: 40rem) {
  .prose img { width: calc(100% + 4rem); max-width: calc(100% + 4rem); margin-inline: -2rem; }
}
/* ![alt](src "Caption") renders as a figure; the caption sits tight under
   the picture, quieter than body text. */
.prose figure { margin: 1.1em 0 1.6em; }
.prose figure img { display: block; margin-block: 0; }
.prose figcaption { margin-top: .55em; font-size: .9em; font-style: italic; color: var(--muted); }
.prose blockquote { margin: 1.3em 0; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--accent); color: var(--muted); }
.prose pre { background: var(--surface); border-radius: 6px; padding: .8em 1em; overflow-x: auto; font-size: .85em; }
.prose code { background: var(--surface); border-radius: 3px; padding: .1em .35em; font-size: .88em; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.2em 0; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .4em .6em .4em 0; text-align: left; }

/* essay — a literary review. Playfair Display, a high-contrast Didone, set
   large and centred; a drop cap opens the piece; Newsreader carries the body. */
.tpl-essay { font-family: "Newsreader", Georgia, "Times New Roman", serif; letter-spacing: .003em; }
.tpl-essay .blog-wrap { max-width: 44rem; }
.tpl-essay .blog-title, .tpl-essay .post-heading, .tpl-essay .post-title {
  font-family: "Playfair Display", Georgia, serif;
}
.tpl-essay .blog-header { text-align: center; border-bottom: none; padding-bottom: 0; margin-bottom: 2.9rem; }
.tpl-essay .blog-header::after {
  content: ""; display: block; width: 3rem; height: 2px; background: var(--accent); margin: 1.5rem auto 0;
}
.tpl-essay .blog-title { font-size: 3.4rem; font-weight: 800; line-height: 1.02; letter-spacing: -.01em; }
.tpl-essay .blog-desc { font-style: italic; font-size: 1.15rem; }
.tpl-essay .post-heading { font-size: 2.9rem; font-weight: 700; line-height: 1.06; }
.tpl-essay .post-tagline { font-style: italic; font-size: 1.35rem; }
.tpl-essay .post-tagline-sm { font-style: italic; }
.tpl-essay .prose { font-size: 1.1em; }
/* Drop cap on the opening paragraph — the literary flourish. */
.tpl-essay .prose > p:first-of-type::first-letter {
  font-family: "Playfair Display", Georgia, serif; float: left; font-weight: 800;
  font-size: 3.4em; line-height: .74; padding: .04em .1em 0 0; color: var(--accent);
}
.tpl-essay .post-link { align-items: center; text-align: center; padding: 1.4rem 0; }
.tpl-essay .post-title { font-weight: 600; font-size: 1.5rem; }
.tpl-essay .post-date { font-style: italic; }

/* journal — a brutalist logbook. Archivo Black shouts the mastheads, uppercase
   and tight; Space Grotesk runs the body; a slab of accent underlines it. */
.tpl-journal {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5;
}
.tpl-journal .blog-title, .tpl-journal .post-heading {
  font-family: "Archivo Black", "Arial Black", system-ui, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: -.01em; line-height: .95; color: var(--ink);
}
.tpl-journal .blog-header { border-bottom: .5rem solid var(--accent); margin-bottom: 2.1rem; padding-bottom: 1rem; }
.tpl-journal .blog-title { font-size: 2.9rem; }
.tpl-journal .blog-desc { font-size: 1rem; font-weight: 500; }
.tpl-journal .post-heading { font-size: 2.5rem; }
.tpl-journal .post-link { flex-direction: row; align-items: baseline; gap: 1.2rem; padding: 1rem 0; }
.tpl-journal .post-date {
  flex: 0 0 6rem; font-size: .72rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; padding-top: .3rem;
}
.tpl-journal .post-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }

/* mono — a terminal session. Space Mono throughout, uppercase, entries indexed,
   the masthead framed in rules with a caret blinking after the title. */
.tpl-mono { font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.tpl-mono .blog-header {
  border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: 1rem 0 1.1rem; margin-bottom: 2.4rem;
}
.tpl-mono .blog-title { font-size: 1.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.tpl-mono .blog-title::after {
  content: "_"; color: var(--accent); font-weight: 700;
  animation: mono-caret 1.1s steps(1) infinite;
}
.tpl-mono .blog-desc { font-size: .92rem; }
.tpl-mono .post-heading { font-size: 1.7rem; font-weight: 700; }
.tpl-mono .post-tagline { font-size: 1rem; }
.tpl-mono .post-list { counter-reset: entry; }
.tpl-mono .post-list li { border-bottom-color: color-mix(in srgb, var(--rule) 60%, transparent); counter-increment: entry; }
.tpl-mono .post-title { font-weight: 700; font-size: 1.1rem; }
.tpl-mono .post-title::before { content: "[" counter(entry, decimal-leading-zero) "]  "; color: var(--accent); }
.tpl-mono .post-date { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
@keyframes mono-caret { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tpl-mono .blog-title::after { animation: none; } }

@media (prefers-reduced-motion: no-preference) {
  .btn, .post-link .post-title, .crumb a { transition: color .12s ease, background-color .12s ease, opacity .12s ease; }
  .btn:hover { opacity: .9; }
}