/* Narrative B — terminal/case-file register.
   Toobits palette: near-black ground, off-white body, signal-green accent. */

@font-face {
  font-family: "Anka Coder";
  src: url("_fonts/anka-coder/AnkaCoder-r.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anka Coder";
  src: url("_fonts/anka-coder/AnkaCoder-b.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:        #0a0a0a;
  --paper-edge:   #141414;
  --ink:          #e8e8e8;
  --ink-soft:     #a0a0a0;
  --ink-faint:    #666666;
  --accent:       #00ff88;
  --accent-soft:  #48d099;
  --rule:         #262626;
  --rule-soft:    #1a1a1a;

  /* Body type: Inter (modern grotesque, render-optimized for screens). */
  --serif:  Inter, "Inter var", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --sans:   Inter, "Inter var", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  /* Chrome / numerals / speaker labels: Anka Coder (slab-ish mono, blocky terminals, strong coder register). */
  --mono:   "Anka Coder", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 38rem;
  --wide:    62rem;
}

/* Slightly tighter base size — Inter at 17px reads close to Charter at 18px. */
body { font-size: 17px; }

/* === Coder accent — JetBrains Mono on UI chrome / timestamps / labels === */
.site-mark__name,
.site-nav,
.recent__title,
.day-card__date,
.day-card-entry__meta,
.day-card-entry__time,
.day__eyebrow,
.day__date,
.day-entry__meta,
.day-entry__time,
.entry__eyebrow,
.entry__date,
.entry__dialogue-summary,
.entry__dialogue-label,
.entry__dialogue-hint,
.entry__dialogue-body h3,
.entry__dialogue-body h2,
.section-landing h1 {
  font-family: var(--mono);
}

/* Mono numerals naturally, but normalize leading + letter-spacing where
   it'd otherwise look loose in mono. */
.day-card-entry__meta,
.day-entry__meta,
.day-entry__time { letter-spacing: 0.04em; }
.entry__dialogue-body h3 { letter-spacing: 0.08em; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; padding: .5rem 1rem;
  background: var(--ink); color: var(--paper); z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* Site header — sticky so the soundtrack player + primary nav stay
   available as the reader scrolls down a long entry. The background is
   the paper color (not translucent) so prose underneath doesn't show
   through and create a chrome-vs-text legibility fight. A subtle
   shadow appears below the header so the eye registers it as a floating
   layer once content has scrolled beneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0 1.25rem;
  background: var(--paper);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.85);
}
.site-header__inner {
  display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 720px) {
  .site-header__inner { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

.site-mark { text-decoration: none; color: inherit; display: inline-block; }
.site-mark__name {
  display: block;
  font: 700 1.55rem/1.1 var(--mono);
  letter-spacing: 0;
}
.site-mark__name em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.site-mark__rule {
  display: inline-block;
  width: 2.5rem; height: 1px; background: var(--rule);
  margin: .35rem 0;
}
.site-mark__sub {
  display: block;
  font: 0.88rem/1.4 var(--mono);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1rem;
  font: 0.92rem/1.4 var(--mono);
  letter-spacing: 0.02em;
}
.site-nav a, .site-nav span {
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding: .15rem 0;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent-soft); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Main */
main { padding: 2.5rem 0 4rem; }

h1, h2, h3 { font-family: var(--mono); color: var(--ink); }
h1 { font-size: 1.95rem; line-height: 1.15; letter-spacing: 0; margin: 0 0 1.2rem; font-weight: 700; }
h2 { font-size: 1.3rem; line-height: 1.25; margin: 2.5rem 0 .8rem; font-weight: 700; letter-spacing: 0.01em; }
h3 { font-size: 1.05rem; line-height: 1.3; margin: 2rem 0 .5rem; font-weight: 700; letter-spacing: 0.02em; }

p, ul, ol, blockquote { margin: 0 0 1.1rem; }
p, li { max-width: var(--measure); }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .35rem; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-soft); }

em { font-style: italic; }
strong { font-weight: 700; }

blockquote {
  border-left: 2px solid var(--rule);
  padding: .15rem 0 .15rem 1.1rem;
  color: var(--ink-soft);
  font-style: italic;
  max-width: var(--measure);
}
blockquote p { margin-bottom: 0; }

hr {
  border: none;
  border-top: 1px solid var(--rule-soft);
  margin: 2.5rem auto;
  max-width: var(--measure);
}

/* Hero (landing + section landings) */
.hero { max-width: var(--measure); margin: 1rem 0 3rem; }
.hero__eyebrow {
  font: 0.85rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 .75rem;
}
.hero__eyebrow a { color: var(--ink-soft); }
.hero__title {
  font-family: var(--mono);
  font-size: 2.3rem; letter-spacing: 0; margin: 0 0 1.25rem;
  font-weight: 700;
}
.hero__lede {
  font-size: 1.13rem; line-height: 1.6; color: var(--ink-soft);
}
.hero__lede strong, .hero__lede em { color: var(--ink); }

/* Recent / chronological entry list */
.recent { max-width: var(--measure); }
.recent__title {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: .5rem;
}
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry-list__item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  max-width: none;
}
.entry-list__item:last-child { border-bottom: 0; }
.entry-list__date {
  font: 0.85rem/1.3 var(--mono);
  color: var(--ink-faint);
  margin: 0 0 .25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.entry-list__title {
  font-family: var(--mono);
  font-size: 1.2rem; line-height: 1.3; margin: 0 0 .5rem; font-weight: 700;
  letter-spacing: 0;
}
.entry-list__title a {
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.entry-list__title a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.entry-list__subtitle {
  font: italic 1.02rem/1.4 var(--serif);
  color: var(--ink-soft);
  margin: 0.15rem 0 0.35rem;
}
.entry-list__summary {
  color: var(--ink-soft);
  margin: 0;
  font-size: 1rem;
}
.recent__more {
  margin: 1.5rem 0 0;
  font: italic 1rem/1.4 var(--serif);
}

/* Entry view */
.entry { max-width: var(--measure); }
.entry__eyebrow {
  font: 0.85rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
}
.entry__eyebrow a { color: var(--ink-soft); }
.entry__date {
  font: 0.85rem/1.3 var(--mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 .25rem;
}
.entry__subtitle {
  font: italic 1.25rem/1.4 var(--serif);
  color: var(--ink-soft);
  margin: 0.35rem 0 1.25rem;
  max-width: var(--measure);
}
.entry__lede {
  font-size: 1.13rem; line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.entry__body p:first-of-type::first-line {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.entry__meta {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  font: italic 0.95rem/1.5 var(--serif);
  color: var(--ink-faint);
}

/* Tactics — vocabulary of techniques used by targeters.
   The metadata block at the top of an entry: aka / formal term / overlay. */
.tactic__meta {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--paper-edge);
  border-left: 2px solid var(--rule);
  border-radius: 0 2px 2px 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  font: 0.92rem/1.5 var(--mono);
  max-width: none;
}
.tactic__meta dt {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--ink-faint);
  align-self: baseline;
  padding-top: 0.2rem;
}
.tactic__meta dd {
  margin: 0;
  color: var(--ink);
}
.tactic__meta dd a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.tactic__meta dd a:hover { border-bottom-color: var(--accent); }

/* Tactic backlinks to storm entries — sits between body and Related. */
.tactic__appearances {
  margin: 2.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--paper-edge);
  border-left: 2px solid var(--ink-faint);
  border-radius: 0 2px 2px 0;
  max-width: none;
}
.tactic__appearances-label {
  font: 0.72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0 0 .6rem;
}
.tactic__appearances ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font: 0.92rem/1.5 var(--mono);
}
.tactic__appearances li { margin: 0 0 .25rem; max-width: none; }
.tactic__appearances li:last-child { margin-bottom: 0; }
.tactic__appearances a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.tactic__appearances a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Tactics listing — 'also known as' line under each entry on /tactics/ */
.tactic-list__aka {
  font: 0.85rem/1.4 var(--mono);
  color: var(--ink-faint);
  margin: 0.25rem 0 0;
}
.tactic-list__aka-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  margin-right: 0.4rem;
}

/* Per-entry related cross-references — sits above the share row.
   Frontmatter `related:` list. Quiet mono register, paper-edge background. */
.entry__related {
  margin: 2.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--paper-edge);
  border-left: 2px solid var(--accent);
  border-radius: 0 2px 2px 0;
  max-width: none;
}
.entry__related-label {
  font: 0.72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0 0 .6rem;
}
.entry__related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font: 0.92rem/1.5 var(--mono);
}
.entry__related-list li {
  margin: 0 0 .35rem;
  max-width: none;
}
.entry__related-list li:last-child { margin-bottom: 0; }
.entry__related-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.entry__related-list a:hover,
.entry__related-list a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.entry__related-host {
  display: inline-block;
  margin-left: .5rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

/* Homepage subscribe CTA — small inline panel between the hero and the
   latest-day card. Honest framing (no mailings yet) so it doesn't read
   as a generic "subscribe to my newsletter" demand. */
.home-subscribe {
  margin: 0 0 3rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  max-width: 46rem;
}
.home-subscribe__line {
  margin: 0;
  font: 0.95rem/1.55 var(--serif);
  color: var(--ink-soft);
}
.home-subscribe__label {
  font: 0.78rem/1.55 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-right: 0.4rem;
}
.home-subscribe__cta {
  font: 0.85rem/1.55 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  margin-left: 0.4rem;
  white-space: nowrap;
}
.home-subscribe__cta:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Subscribe form — /subscribe/ page. Minimal, mono register matching the
   rest of the site. */
.subscribe-form {
  max-width: 30rem;
  margin: 2.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.subscribe-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.subscribe-form__label {
  font: 0.85rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.subscribe-form__label em {
  text-transform: none;
  letter-spacing: 0.02em;
  font-style: italic;
  color: var(--ink-faint);
}
.subscribe-form input[type="email"],
.subscribe-form input[type="text"],
.subscribe-form textarea {
  font: 1rem/1.5 var(--mono);
  padding: 0.6rem 0.8rem;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 2px;
  width: 100%;
}
.subscribe-form textarea {
  resize: vertical;
  min-height: 8rem;
}
.subscribe-form input:focus,
.subscribe-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.subscribe-form__honeypot {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.subscribe-form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.7rem 1.4rem;
  font: 0.92rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: var(--paper);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
}
.subscribe-form__submit:hover {
  background: var(--accent-soft);
}
.subscribe-form__error {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid #ff6b6b;
  background: rgba(255, 107, 107, 0.06);
  color: var(--ink);
  font: 0.95rem/1.5 var(--serif);
}

/* Small subscribe-prompt line under the share row on entry pages. */
.entry__subscribe-nudge {
  margin: 0.6rem 0 0;
  font: 0.78rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.entry__subscribe-nudge a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.entry__subscribe-nudge a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Verse block — used for limericks and other poetry inside entries.
   Preserves line breaks faithfully; indented lines (limerick short A-lines)
   render with their leading spaces intact. */
.verse {
  font: italic 1rem/1.55 var(--serif);
  white-space: pre-line;
  margin: 1.25rem 0 1.25rem 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  max-width: var(--measure);
}
.verse__title {
  font: 0.78rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 1.5rem 0 0;
  font-style: normal;
}

/* Per-entry tag chips — sits between the prose and the share row.
   Compact mono chips, no boxes; the # is the chip. */
.entry__tags {
  margin: 1.75rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rule-soft);
  font: 0.78rem/1.7 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}
.entry__tags-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-right: 0.3rem;
}
.entry__tag {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.15s, border-color 0.15s;
}
.entry__tag:hover,
.entry__tag:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}

/* /tags/ landing — alphabetical grid of all tags with counts and a one-line
   description below each. Tap target is the row, not just the chip. */
.tag-grid {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem 1.75rem;
}
.tag-grid__item {
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.9rem;
}
.tag-grid__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  font: 0.95rem/1.4 var(--mono);
  letter-spacing: 0.03em;
  color: var(--ink);
}
.tag-grid__link:hover .tag-grid__name,
.tag-grid__link:focus-visible .tag-grid__name {
  color: var(--accent);
}
.tag-grid__name {
  font-weight: 500;
  transition: color 0.15s;
}
.tag-grid__count {
  font: 0.75rem/1 var(--mono);
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}
.tag-grid__desc {
  margin: 0.45rem 0 0;
  font: 0.8rem/1.6 var(--mono);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* /tags/<slug>/ — filtered list of entries with this tag, grouped by section. */
.tag-page__count {
  font: 0.78rem/1.5 var(--mono);
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.5rem 0 1.5rem;
}
.tag-page__section {
  margin: 3rem 0;
}
.tag-page__heading {
  font: 0.85rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.5rem;
  margin: 0 0 1.5rem;
}
.tag-page__heading a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.tag-page__heading a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tag-page__back {
  margin: 3rem 0 1rem;
  font: 0.8rem/1.5 var(--mono);
  letter-spacing: 0.04em;
}
.tag-page__back a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.tag-page__back a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Per-entry share row — canonical→social pattern.
   Restrained mono text-style (no icons), sits at bottom of each day-entry. */
.entry__share {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule-soft);
  font: 0.78rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  max-width: none;
}
.entry__share-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-right: 0.4rem;
}
.entry__share-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.entry__share-link:hover,
.entry__share-link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}
.entry__share-copy[data-copied="1"] {
  color: var(--accent);
  border-bottom-color: transparent;
}

/* Session transcript (dialogue format) — collapsible via native <details>.
   Content is always in the DOM (SEO-indexable); visually hidden when closed. */
.entry__dialogue {
  margin: 2.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-soft);
}
/* Inline variant: transcript sits directly under its corresponding video,
   without the heavy top rule that separates the bottom-of-post transcript. */
.entry__dialogue--inline {
  margin: 0.5rem 0 1.5rem;
  padding-top: 0;
  border-top: 0;
}
.entry__dialogue-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.35rem 0;
  user-select: none;
  outline: none;
}
.entry__dialogue-summary::-webkit-details-marker { display: none; }
.entry__dialogue-summary::marker { display: none; }
.entry__dialogue-toggle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.4em solid var(--accent);
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  transition: transform 0.18s ease;
  transform-origin: 0.2em center;
  flex-shrink: 0;
  position: relative;
  top: -0.05em;
}
.entry__dialogue[open] > .entry__dialogue-summary .entry__dialogue-toggle {
  transform: rotate(90deg);
}
.entry__dialogue-label {
  font: 0.82rem/1.4 var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--accent);
}
.entry__dialogue-hint {
  font: italic 0.92rem/1.4 var(--serif);
  color: var(--ink-faint);
}
.entry__dialogue-summary:hover .entry__dialogue-label,
.entry__dialogue-summary:focus-visible .entry__dialogue-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.entry__dialogue-summary:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 4px;
  border-radius: 2px;
}
.entry__dialogue-body { margin-top: 1.5rem; }
.entry__dialogue-body h2 {
  font-size: 0.95rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink-soft);
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.entry__dialogue-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.entry__dialogue-body h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 1.75rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.entry__dialogue-body h3:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.entry__dialogue-body p {
  max-width: var(--measure);
  margin: 0 0 0.8rem;
  font-size: 1rem;
}
.entry__dialogue-body p:first-of-type::first-line {
  font-variant: normal;
  letter-spacing: 0;
}

/* Entry image — one or more images attached to a post; rendered below video if both present.
   Multiple non-adjacent images stack vertically. Consecutive images are wrapped
   in .entry__images-row for side-by-side layout (each smaller, equal width). */
.entry__image {
  margin: 1.75rem 0;
  max-width: 56rem;
}
.entry__image + .entry__image {
  margin-top: 1.5rem;
}
.entry__images-row {
  display: flex;
  gap: 1rem;
  margin: 1.75rem 0;
  max-width: 56rem;
}
.entry__images-row .entry__image {
  flex: 1;
  min-width: 0;
  margin: 0;
}
@media (max-width: 600px) {
  .entry__images-row {
    flex-direction: column;
    gap: 1rem;
  }
  .entry__images-row .entry__image {
    flex: 0 0 auto;
  }
}
.entry__image a {
  display: block;
  border: 0;
  text-decoration: none;
}
.entry__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
}
.entry__image-caption {
  font: italic 0.92rem/1.5 var(--serif);
  color: var(--ink-faint);
  margin: 0.6rem 0 1.75rem;
  max-width: var(--measure);
}
.entry__image a {
  cursor: zoom-in;
}

/* Lightbox */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 6, 4, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  cursor: zoom-out;
  animation: lightboxFadeIn 0.18s ease-out;
  outline: none;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}
.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font: 300 2.25rem/1 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  line-height: 1;
}
.lightbox__close:hover { color: #fff; }
.lightbox__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 2px;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font: 300 2.5rem/1 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.4rem 0.95rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.lightbox__nav:hover { background: rgba(0, 0, 0, 0.6); color: #fff; }
.lightbox__nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.lightbox__counter {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.78);
  font: 0.82rem/1 var(--mono, monospace);
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.32rem 0.65rem;
  border-radius: 3px;
}
@media (max-width: 600px) {
  .lightbox__nav { font-size: 2rem; padding: 0.3rem 0.6rem; }
  .lightbox__prev { left: 0.3rem; }
  .lightbox__next { right: 0.3rem; }
}
@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Video embed (Bunny iframe) */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 56rem;
  aspect-ratio: 16 / 9;
  margin: 1.75rem 0 2.25rem;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Facebook reels are vertical 9:16. Cap width so the embed stays in the
   prose column rather than dominating the page. */
.video-embed--fb-reel {
  aspect-ratio: 9 / 16;
  max-width: 26rem;
  margin-left: 0;
}

/* --- Others section ----------------------------------------------------- */

.other-list {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  gap: 1.25rem;
  max-width: var(--measure);
}
.other-card {
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--paper);
}
.other-card__link {
  display: block;
  padding: 1.1rem 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.other-card__link:hover { background: var(--rule-soft); }
.other-card__name {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 .15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.other-card__handle {
  font: 0.82rem/1.4 var(--mono);
  color: var(--ink-soft);
  margin: 0 0 .6rem;
}
.other-card__intro {
  margin: 0 0 .6rem;
  color: var(--ink-soft);
}
.other-card__count {
  font: 0.85rem/1.4 var(--mono);
  color: var(--accent);
  margin: 0;
  text-transform: lowercase;
}
.other__name { margin: .25rem 0 .15rem; }
.other__handle {
  font: 0.9rem/1.4 var(--mono);
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.other__intro {
  max-width: var(--measure);
  margin-bottom: 1.5rem;
}
.other__links { margin: 1rem 0 2.5rem; max-width: var(--measure); }
.other__links-label {
  font: 0.8rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 .4rem;
}
.other__links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.other__posts-heading {
  font-size: 1.1rem;
  margin: 2.5rem 0 1rem;
}
.other__post-list { list-style: none; padding: 0; margin: 0; }
.other__post-item {
  padding: 1rem 0;
  border-top: 1px solid var(--rule-soft);
}
.other__post-item:last-child { border-bottom: 1px solid var(--rule-soft); }
.other__post-eyebrow {
  font: 0.8rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 .25rem;
}
.other__post-platform { text-transform: none; letter-spacing: 0; }
.other__post-title {
  font-size: 1.15rem;
  margin: 0 0 .35rem;
  font-weight: 700;
}
.other__post-title a { color: var(--ink); }
.other__post-summary { margin: 0 0 .35rem; }
.other__post-source {
  font: 0.85rem/1.4 var(--mono);
  margin: 0;
}
.entry__source-attribution {
  background: var(--rule-soft);
  border-left: 3px solid var(--accent);
  padding: .75rem 1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
  max-width: var(--measure);
}
.entry__source-footer {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font: 0.9rem/1.5 var(--sans);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.entry--video .entry__body p:first-of-type::first-line {
  /* Disable the small-caps first-line on video posts (looks wrong without prose-led opening) */
  font-variant: normal;
  letter-spacing: 0;
}
.entry__collection {
  font: 0.85rem/1.3 var(--serif);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Account landing — day cards */
.day-list { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.day-card {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule-soft);
  max-width: none;
}
.day-card:last-child { border-bottom: 0; }
.day-card__date {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 .5rem;
}
.day-card__date a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.day-card__date a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.day-card__opening {
  font: italic 1.02rem/1.55 var(--serif);
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.day-card__entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.day-card-entry {
  margin: 0 0 1.1rem;
}
.day-card-entry:last-child { margin-bottom: 0; }
.day-card-entry__link {
  display: flex;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  padding: 0.5rem;
  margin-left: -0.5rem;
  border-radius: 3px;
  transition: background 0.15s;
}
.day-card-entry__link:hover {
  background: rgba(44, 62, 92, 0.04);
}
.day-card-entry__link:hover .day-card-entry__title {
  color: var(--accent);
}
.day-card-entry__link:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}
.day-card-entry__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.day-card-entry__meta {
  display: block;
  font: 0.78rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 .15rem;
}
.day-card-entry__time { color: var(--ink-soft); font-weight: 600; }
.day-card-entry__collection { font-style: italic; text-transform: none; letter-spacing: 0.04em; }
.day-card-entry__title {
  display: block;
  width: 100%;
  font-family: var(--mono);
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0 0 .3rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  transition: color 0.15s;
}
.day-card-entry__summary {
  display: block;
  width: 100%;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  /* Two-line clamp on listings; full summary lives in the markup (SEO-readable)
     but visually truncates so the card height stays uniform.
     The -webkit-line-clamp fails on summaries that contain inline <a> tags
     in some browsers, so we also enforce a max-height as a hard ceiling. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(2 * 0.98rem * 1.55);
}

/* Day-digest view — the day page renders a flat list of entry cards that
   each link to the per-entry URL. Shares visual DNA with .day-card-entry
   from the month-index view but a bit roomier since this is the only thing
   on the page besides the day header. */
.day-digest { list-style: none; padding: 0; margin: 0; }
.day-digest__item { margin: 0 0 1.5rem; }
.day-digest__item:last-child { margin-bottom: 0; }
.day-digest__link {
  display: flex;
  gap: 1.25rem;
  text-decoration: none;
  color: inherit;
  padding: 0.65rem;
  margin-left: -0.65rem;
  border-radius: 3px;
  transition: background 0.15s;
}
.day-digest__link:hover { background: rgba(44, 62, 92, 0.04); }
.day-digest__link:hover .day-digest__title { color: var(--accent); }
.day-digest__link:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.day-digest__body { flex: 1; min-width: 0; }
.day-digest__meta {
  font: 0.78rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 .2rem;
}
.day-digest__time { color: var(--ink-soft); font-weight: 600; }
.day-digest__collection { font-style: italic; text-transform: none; letter-spacing: 0.04em; }
.day-digest__title {
  font-family: var(--mono);
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 0 0 .4rem;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.15s;
}
.day-digest__summary {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* max-height fallback for browsers where -webkit-line-clamp doesn't
     reliably truncate summaries containing inline <a> tags. */
  max-height: calc(3 * 1rem * 1.55);
}
@media (max-width: 520px) {
  .day-digest__link { flex-direction: column; gap: 0.75rem; }
  .day-digest__link .entry-thumb { width: 100%; max-width: none; }
}

/* Per-entry storm page (entry.php) — h1-level entry with its own header.
   Reuses .entry visual conventions; just needs the eyebrow + chrome to
   feel like a standalone page rather than a list item. */
.entry--storm .entry__eyebrow {
  font: 0.85rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 .75rem;
}
.entry--storm .entry__eyebrow a { color: var(--ink-soft); }
.entry--storm .entry__eyebrow a:hover { color: var(--accent); }
.entry--storm .entry__eyebrow-collection { font-style: italic; text-transform: none; letter-spacing: 0.04em; }

/* Prev / next nav at the bottom of an entry page. */
.entry-nav {
  display: flex;
  gap: 1.5rem;
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  max-width: var(--measure);
}
.entry-nav__prev, .entry-nav__next {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  padding: 0.6rem 0;
}
.entry-nav__next { text-align: right; }
.entry-nav__direction {
  font: 0.78rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.entry-nav__title {
  font: 0.95rem/1.35 var(--mono);
  color: var(--ink-soft);
  transition: color 0.15s;
}
.entry-nav__prev:hover .entry-nav__title,
.entry-nav__next:hover .entry-nav__title { color: var(--accent); }
@media (max-width: 520px) {
  .entry-nav { flex-direction: column; gap: 0.5rem; }
  .entry-nav__next { text-align: left; }
}

/* Entry thumbnail — used in any listing card (account index, home recent).
   Aspect 16:9 to match the Bunny iframe player as rendered on entry pages.
   Background is black so portrait sources letterbox the same way the player
   shows them (bars on the sides). Image thumbs of the underlying photos
   (.entry-thumb--image) still cover-fit for visual fullness. */
.entry-thumb {
  flex-shrink: 0;
  width: 168px;
  height: 94px;            /* explicit fallback if aspect-ratio isn't honored */
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}
.entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.entry-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.entry-thumb--video::after {
  /* Small play-glyph overlay in the corner */
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 0;
  height: 0;
  border-left: 0.5rem solid rgba(255, 255, 255, 0.92);
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.entry-thumb--fallback {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
}

/* Stack thumbnail above text on narrow viewports */
@media (max-width: 520px) {
  .day-card-entry__link { flex-direction: column; gap: 0.65rem; }
  .entry-thumb { width: 100%; max-width: none; }
}

/* Day page — single day with one or more entries inline */
.day { max-width: var(--measure); }
.day__header { margin-bottom: 2.5rem; }
.day__eyebrow {
  font: 0.85rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
}
.day__eyebrow a { color: var(--ink-soft); }
.day__date {
  font-family: var(--mono);
  font-size: 1.95rem;
  letter-spacing: 0;
  margin: 0 0 1.2rem;
  font-weight: 700;
}
.day__opening {
  font-size: 1.05rem;
  color: var(--ink-soft);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.day__entries { list-style: none; padding: 0; margin: 0; }
.day-entry {
  margin: 0 0 4rem;
  padding-top: 1rem;
  scroll-margin-top: 5rem;
  max-width: none;
}
.day-entry + .day-entry {
  padding-top: 3rem;
  border-top: 1px solid var(--rule-soft);
}
.day-entry__header { margin-bottom: 1rem; }
.day-entry__meta {
  font: 0.82rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 .25rem;
}
.day-entry__time { font-weight: 700; color: var(--ink-soft); }
.day-entry__collection { font-style: italic; text-transform: none; letter-spacing: 0.04em; }
.day-entry__permalink {
  color: var(--ink-faint);
  text-decoration: none;
  margin-left: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.day-entry:hover .day-entry__permalink { opacity: 1; color: var(--accent); }
.day-entry__title {
  font-family: var(--mono);
  font-size: 1.45rem; line-height: 1.2; margin: 0 0 1.2rem; font-weight: 700;
  letter-spacing: 0;
}

/* Origin map */
.origin-map__row {
  max-width: none;
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.origin-map__row:last-child { border-bottom: 0; }
.origin-map__work {
  font-size: 1.15rem; font-weight: 600; margin: 0 0 .35rem;
}
.origin-map__work a {
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.origin-map__work a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.origin-map__source {
  font: italic 0.95rem/1.5 var(--serif);
  color: var(--ink-soft);
  margin: 0 0 .35rem;
}
.origin-map__note { font-size: 1rem; margin: 0; }

/* Techniques landing — bear-maxim epigraph between the lede and the catalog.
   Decorative literary-witness register; pulls the eye, sets the framing. */
.tech-epigraph {
  margin: 0 0 3rem;
  padding: 1.75rem 0 1.75rem 1.5rem;
  border-left: 3px solid var(--accent);
  max-width: 42rem;
}
.tech-epigraph blockquote {
  margin: 0;
  padding: 0;
}
.tech-epigraph blockquote p {
  font: italic 1.35rem/1.5 var(--serif);
  color: var(--ink);
  margin: 0;
}
.tech-epigraph figcaption {
  font: 0.85rem/1.55 var(--mono);
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
  letter-spacing: 0.01em;
}

/* Category layout: psych (the longest category) spans the FULL width
   on top, flowing its entries into two columns for vertical compactness.
   opsec + physical sit below in a second two-column row so the page
   covers without leaving large vertical gaps under the longer category. */
.tech-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "psych    psych"
    "opsec    physical";
  grid-column-gap: 2.5rem;
  grid-row-gap: 0.5rem;
}
.tech-group--psych    { grid-area: psych; }
.tech-group--opsec    { grid-area: opsec; }
.tech-group--physical { grid-area: physical; }

/* Psych is the only group that flows two-column internally — its eleven
   entries are the reason we need the layout in the first place. The list
   uses CSS columns so the items balance automatically across breakpoints. */
.tech-group--psych .entry-list {
  columns: 2;
  column-gap: 2.5rem;
}
.tech-group--psych .entry-list__item {
  break-inside: avoid;
}

@media (max-width: 820px) {
  .tech-groups {
    grid-template-columns: 1fr;
    grid-template-areas:
      "psych"
      "opsec"
      "physical";
  }
  .tech-group--psych .entry-list { columns: 1; }
}

/* Techniques grouping */
.tech-group {
  margin: 0 0 2.5rem;
  max-width: none;
}
.tech-group__title,
.tactic-group__title {
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: .5rem;
  margin: 0 0 1rem;
}
.tech-group__summary,
.tactic-group__summary {
  font: italic 1rem/1.55 var(--serif);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}

/* Tactics grouping — linear stack, same typography as tech-group */
.tactic-groups {
  display: block;
}
.tactic-group {
  margin: 0 0 3rem;
  max-width: none;
}
.tactic-group:last-child {
  margin-bottom: 0;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-edge);
  padding: 2.5rem 0 2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.site-footer__inner { max-width: var(--wide); }
.site-footer__name {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .2rem;
  letter-spacing: 0;
}
.site-footer__tag { font-style: italic; margin: 0 0 1.25rem; max-width: var(--measure); }
.site-footer__nav ul {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.25rem;
  font: 0.9rem/1.4 var(--mono);
  letter-spacing: 0.02em;
}
.site-footer__nav a {
  text-decoration: none; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.site-footer__nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-footer__colophon {
  font: italic 0.92rem/1.55 var(--serif);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 1rem;
}
.site-footer__colophon a { color: var(--ink-soft); }
.site-footer__honto-mark {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -2px;
}
.site-footer__legal {
  font: 0.78rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0;
}

/* Collapsing day cards — each <details> defaults closed in month views,
   open on the home page. Summary line is the always-visible chrome. */
.day-card__details {
  border-top: 1px solid var(--rule-soft);
  padding: 0;
}
.day-card:first-child .day-card__details { border-top: 0; }
.day-card__summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 0 1.1rem 1.6rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  max-width: none;
}
.day-card__summary::-webkit-details-marker { display: none; }
.day-card__summary::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 1.15rem;
  font: 0.85rem/1 var(--mono);
  color: var(--ink-faint);
  transition: transform 0.15s, color 0.15s;
  width: 1rem;
  text-align: center;
}
.day-card__details[open] > .day-card__summary::before {
  transform: rotate(90deg);
  color: var(--accent);
}
.day-card__summary:hover::before {
  color: var(--accent);
}
.day-card__summary .day-card__date {
  font-size: 1.05rem;
  margin: 0;
}
.day-card__summary .day-card__opening {
  font: italic 0.95rem/1.5 var(--serif);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
  flex: 1 1 auto;
}
.day-card__count {
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-left: auto;
  white-space: nowrap;
}
.day-card__details[open] > .day-card__entries {
  margin-top: 0.5rem;
  padding-bottom: 1.5rem;
}
/* Storm toolbar — search box + expand-all toggle */
.storm-toolbar__search {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 28rem;
}
.storm-toolbar__label {
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.storm-toolbar__search input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font: 0.95rem/1.4 var(--mono);
  letter-spacing: 0.02em;
  transition: border-color 0.15s, background 0.15s;
}
.storm-toolbar__search input[type="search"]::placeholder {
  color: var(--ink-faint);
  opacity: 0.7;
}
.storm-toolbar__search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}

/* Search results — replaces the day list when active */
.storm-search-results {
  margin: 0 0 1.5rem;
  max-width: var(--measure);
}
.storm-search-results__heading,
.storm-search-results__loading,
.storm-search-results__empty {
  font: 0.85rem/1.5 var(--mono);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}
.storm-search-results code {
  font: inherit;
  color: var(--accent);
  background: var(--paper-edge);
  padding: 0 0.3rem;
  border-radius: 2px;
}
.storm-search-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.storm-search-result {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
  max-width: none;
}
.storm-search-result:last-child { border-bottom: 0; }
.storm-search-result a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.storm-search-result__meta {
  font: 0.72rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 0.25rem;
}
.storm-search-result__title {
  font: 700 1.05rem/1.3 var(--mono);
  color: var(--ink);
  margin: 0 0 0.35rem;
  letter-spacing: 0;
}
.storm-search-result a:hover .storm-search-result__title {
  color: var(--accent);
}
.storm-search-result__summary {
  font: 0.95rem/1.5 var(--serif);
  color: var(--ink-soft);
  margin: 0;
}

/* Toggle button — Expand all / Collapse all */
.storm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.storm-toolbar__toggle {
  font: 0.78rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.75rem;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.storm-toolbar__toggle:hover,
.storm-toolbar__toggle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

/* Month-strip nav — sits below the section-landing on /thestorm/.
   Horizontal scrollable list of months with entries, current highlighted. */
.month-strip {
  margin: 0 0 2rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.month-strip ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: max-content;
}
.month-strip li { max-width: none; margin: 0; }
.month-strip a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink-soft);
  font: 0.78rem/1 var(--mono);
  letter-spacing: 0.02em;
  background: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 3rem;
}
.month-strip a:hover {
  color: var(--ink);
  border-color: var(--accent-soft);
  background: var(--paper-edge);
}
.month-strip li.is-current a,
.month-strip a[aria-current="page"] {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.month-strip li.is-current a:hover,
.month-strip a[aria-current="page"]:hover {
  background: var(--accent-soft);
  color: var(--paper);
}
.month-strip__label { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; }
.month-strip__year  { font-size: 0.65rem; color: inherit; opacity: 0.72; }
.month-strip__count {
  font-size: 0.62rem;
  color: inherit;
  opacity: 0.55;
  margin-top: 0.1rem;
}
.month-strip li.month-strip__archive a {
  border-style: dashed;
  color: var(--ink-faint);
  justify-content: center;
  font-size: 0.78rem;
  align-self: stretch;
}
.month-strip li.month-strip__archive a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}

/* Month pager — prev/next under the day list. */
.month-pager {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font: 0.92rem/1.4 var(--mono);
  letter-spacing: 0.02em;
  max-width: var(--measure);
}
.month-pager a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.month-pager a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.month-pager span[class*="--disabled"] {
  color: var(--ink-faint);
  opacity: 0.55;
}

/* Archive grid — full month/year view at /thestorm/archive/ */
.archive-grid {
  max-width: var(--measure);
  margin: 1.5rem 0 0;
}
.archive-year {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.archive-year:last-child { border-bottom: 0; }
.archive-year__label {
  font: 700 1.4rem/1 var(--mono);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  color: var(--ink);
}
.archive-year__months {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.6rem;
}
.archive-month { max-width: none; margin: 0; }
.archive-month a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.archive-month a:hover {
  border-color: var(--accent);
  background: var(--paper);
}
.archive-month__label {
  font: 700 1rem/1 var(--mono);
  letter-spacing: 0.04em;
}
.archive-month__counts {
  font: 0.72rem/1.3 var(--mono);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* Section-landing qualifier (e.g. '· May 2026' next to 'The Storm') */
.section-landing__qualifier {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.7em;
  letter-spacing: 0.02em;
  margin-left: 0.5rem;
}

/* Sections / interior pages */
.section-landing { max-width: var(--measure); margin-bottom: 3rem; }
.section-landing h1 { margin-bottom: 1rem; }
.section-landing__lede {
  font-size: 1.13rem; line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  h1 { font-size: 1.8rem; }
  .hero__title { font-size: 2.1rem; }
}

/* === Site-header right column: nav + soundtrack player ========================
   The nav links and the player share a right-side flex column. Both
   children align to the LEFT of the column so the player sits directly
   under the first nav link ("The Storm") rather than right-anchored under
   the last nav link. On mobile the header stacks vertically — the wrapper
   keeps its flex-start alignment, which fits the stacked layout naturally.
*/
.site-header__right {
  display: flex;
  flex-direction: column;
  /* stretch so the player below the nav matches the nav's width — the wider
     child (the nav) drives the column width, the player fills it. */
  align-items: stretch;
  gap: 0.55rem;
}
@media (max-width: 719px) {
  .site-header__right {
    gap: 0.4rem;
  }
}

/* === Site-header soundtrack player ============================================
   Compact prev / play / next + click-to-expand track-list popover. Sits
   under the primary nav in the right column. Empty/missing _audio/ folder
   makes the partial render nothing — header stays plain.
*/
.site-player {
  position: relative;             /* anchor for the popover */
  display: flex;                  /* block-flex so it can be stretched by the parent column */
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  font: 0.78rem/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  /* Crucial: don't let the title's content size leak up into the column's
     natural width calculation. Without this, a long track title makes the
     player's max-content wider than the nav, which makes the column wider,
     which makes the nav stretch — the "nav moving around" effect. With
     containment, the column is sized by the nav alone, and the player
     stretches to fill it. */
  contain: inline-size;
}
.site-player__top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.site-player__bottom {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.site-player__btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.site-player__btn--play {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.site-player__btn--prev,
.site-player__btn--next {
  border-color: transparent;
  font-size: 13px;
  color: var(--ink-faint);
}
.site-player__btn:hover,
.site-player__btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent-soft);
  outline: none;
}
.site-player__btn--prev:hover,
.site-player__btn--next:hover,
.site-player__btn--prev:focus-visible,
.site-player__btn--next:focus-visible {
  border-color: transparent;
  color: var(--accent);
}
.site-player.is-playing .site-player__btn--play {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 255, 136, 0.06);
}
/* Prev/next are not meaningful with a single track — hide them. */
.site-player--single .site-player__btn--prev,
.site-player--single .site-player__btn--next { display: none; }
/* Chevron suppressed for single-track mode (no popover to open). */
.site-player--single .site-player__chev { display: none; }

.site-player__icon--play  { transform: translateX(1px); } /* optical centering of ▶ */
.site-player__icon--pause { letter-spacing: -1px; }

.site-player__title {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0 0 0 0.35rem;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  /* grow to fill the rest of the top row after the prev/play/next buttons —
     player ends up as wide as the nav above it. */
  flex: 1;
  min-width: 0;
}
.site-player--single .site-player__title { cursor: default; }
.site-player__title:hover .site-player__title-text,
.site-player__title:focus-visible .site-player__title-text { color: var(--accent); }
.site-player__title:focus-visible { outline: none; }
.site-player__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Grow to fill the title button (which itself fills the top row), so the
     player's overall width is driven by the nav, not by the title length.
     Short titles leave trailing space; long titles ellipsize. */
  flex: 1;
  min-width: 0;
  transition: color 0.15s;
}
.site-player__chev {
  font-size: 0.7rem;
  color: var(--ink-faint);
  transition: transform 0.15s;
}
.site-player.is-open .site-player__chev { transform: rotate(180deg); }
.site-player.is-playing .site-player__title-text { color: var(--accent); }

/* Popover — left-anchored to match the player's new left-aligned position
   under "The Storm". */
.site-player__list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 50;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  min-width: 18rem;
  max-width: min(28rem, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  font: 0.82rem/1.35 var(--mono);
  letter-spacing: 0.01em;
}
.site-player__list li { margin: 0; padding: 0; max-width: none; }
.site-player__list-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  font: inherit;
  display: block;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-player__list-btn:hover,
.site-player__list-btn:focus-visible {
  background: rgba(0, 255, 136, 0.06);
  color: var(--accent);
  outline: none;
}
.site-player__list li.is-current .site-player__list-btn {
  color: var(--accent);
}
.site-player__list li.is-current .site-player__list-btn::before {
  content: "▸ ";
  color: var(--accent);
}

/* Scrubber + time display (second row of the player) */
.site-player__scrub {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  height: 4px;
  background: var(--rule);        /* overridden by JS-painted gradient */
  border-radius: 2px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  outline: none;
}
.site-player__scrub::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border: none;
  border-radius: 2px;
}
.site-player__scrub::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
  border-radius: 2px;
}
.site-player__scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;               /* center 12px thumb on 4px track */
  border-radius: 50%;
  background: var(--ink-soft);
  border: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.site-player__scrub::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.site-player.is-playing .site-player__scrub::-webkit-slider-thumb,
.site-player__scrub:hover::-webkit-slider-thumb,
.site-player__scrub:focus-visible::-webkit-slider-thumb { background: var(--accent); }
.site-player.is-playing .site-player__scrub::-moz-range-thumb,
.site-player__scrub:hover::-moz-range-thumb,
.site-player__scrub:focus-visible::-moz-range-thumb { background: var(--accent); }
.site-player__scrub:active::-webkit-slider-thumb { transform: scale(1.2); }
.site-player__scrub:active::-moz-range-thumb     { transform: scale(1.2); }

.site-player__time {
  font: 0.72rem/1 var(--mono);
  color: var(--ink-faint);
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.site-player.is-playing .site-player__time-cur { color: var(--accent); }

/* Mobile (<720px): the title stays visible — it gets its own row in the
   stacked header so it has room to breathe. (The width cap is handled
   above in the .site-player__title-text rules.) */
@media (max-width: 719px) {
  .site-player__title { padding-left: 0.15rem; }
}