/* corona · the public face — dark only, minimal v1 (PLAN §12).
   the accent identity is purple AND gold: royal violet is the structure
   (links, borders, chrome), solar gold is the light (the ✦ mark, the limb
   flare, tags, the now-playing dot). serif prose, mono metadata.
   zero external requests, zero tracking. */

:root {
  --bg: #0d0b12;
  --panel: #16131f;
  --ink: #dcd7e2;
  --dim: #948da4;
  --faint: #5e5871;
  --violet: #b18cff;
  --violet-deep: #7f5fc4;
  --gold: #ffc457;
  --hair: rgba(177, 140, 255, 0.16);
  --hair-soft: rgba(177, 140, 255, 0.08);
  --serif: "Charter", "Bitstream Charter", "Iowan Old Style", "Palatino", "Georgia", serif;
  --mono: "Monaspace Neon", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* ── the limb — light over the eclipse edge, the one signature.
      purple is the structure (the hairline), gold is the light
      (the flare at its center). ─────────────────────────────────────────── */
.limb {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(177, 140, 255, 0.35) 25%,
    var(--gold) 50%,
    rgba(177, 140, 255, 0.35) 75%,
    transparent 100%);
  box-shadow: 0 0 16px 1px rgba(177, 140, 255, 0.3);
  position: relative;
}
.limb::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 90px;
  pointer-events: none;
  background: radial-gradient(60% 90px at 50% 0,
    rgba(255, 196, 87, 0.06), transparent 70%);
}

.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 1px solid var(--violet); outline-offset: 3px; }

/* ── header / footer ───────────────────────────────────────────────────── */
.site-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.75rem;
}
.wordmark {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--ink);
}
.wordmark:hover { color: var(--gold); text-decoration: none; }
.site-nav { font-family: var(--mono); font-size: 0.8125rem; }
.site-nav a { color: var(--dim); margin-left: 1.1em; }
.site-nav a:hover { color: var(--violet); text-decoration: none; }

.site-foot {
  margin-top: 4.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
}
.site-foot .mark { color: var(--gold); text-shadow: 0 0 9px rgba(255, 196, 87, 0.55); }
.site-foot .mark:hover { text-decoration: none; }
.site-foot .foot-wordmark { letter-spacing: 0.18em; }
.site-foot a { color: var(--faint); }
.site-foot a:hover { color: var(--violet); }

/* ── homepage ──────────────────────────────────────────────────────────── */
.intro { margin-bottom: 2.5rem; }

.now-wrap { width: fit-content; margin-bottom: 1.75rem; }
.now-playing {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
}
/* the glow bar (ares's TODO): dead gray base as wide as the now-playing
   line; the fill breathes in the album's average color (site.js computes
   it from our rehosted cover; no color -> it breathes gold). last.fm
   exposes no playback position, so it breathes instead of filling. */
.now-bar {
  display: block;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.now-bar-glow {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--now-color, var(--gold));
  box-shadow: 0 0 10px var(--now-color, var(--gold));
  animation: nowBreathe 2.6s ease-in-out infinite;
}
@keyframes nowBreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .now-bar-glow { animation: none; opacity: 0.8; } }
.now-playing a { color: var(--dim); }
.now-playing a:hover { color: var(--violet); }
.now-playing .note { color: var(--gold); text-shadow: 0 0 8px rgba(255, 196, 87, 0.5); }

.search-row { margin-bottom: 2.25rem; }
#search {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
#search::placeholder { color: var(--faint); }
#search:focus { border-color: var(--violet-deep); outline: none; }

.listlabel {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--faint);
  margin-bottom: 1rem;
}
.postlist { margin-bottom: 2.75rem; }
.entries { list-style: none; }
.entry { margin-bottom: 1.9rem; }
.entry-title {
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.35;
}
/* hover wavelengths follow the byline: gold = architect, violet = daemon */
.entry-title:hover { color: var(--gold); text-decoration: none; }
.entry.daemon .entry-title:hover { color: var(--violet); }
.entry-meta, .post-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
  margin-top: 0.2rem;
}
.entry-meta .sep, .post-meta .sep { color: var(--faint); }
.entry-meta .tag, .post-tags .tag { color: rgba(255, 196, 87, 0.75); }
.entry-meta .tag:hover, .post-tags .tag:hover { color: var(--gold); text-decoration: none; }
.entry-summary { color: var(--dim); font-size: 0.9375rem; margin-top: 0.35rem; }
/* the pinned spotlight (ares keeps pins rare, so it can afford presence):
   a background glow in the author's light — gold for the architect,
   violet for the daemon. The same post appears again in the normal flow. */
.entry.pinned-glow {
  padding: 0.75rem 1rem;
  margin-left: -1rem;
  border-radius: 6px;
  border-left: 2px solid rgba(255, 196, 87, 0.5);
  background: radial-gradient(130% 160% at 0% 50%,
    rgba(255, 196, 87, 0.09), rgba(255, 196, 87, 0.03) 55%, transparent 80%);
  box-shadow: 0 0 22px -8px rgba(255, 196, 87, 0.35);
}
.entry.pinned-glow.daemon {
  border-left-color: rgba(177, 140, 255, 0.55);
  background: radial-gradient(130% 160% at 0% 50%,
    rgba(177, 140, 255, 0.1), rgba(177, 140, 255, 0.035) 55%, transparent 80%);
  box-shadow: 0 0 22px -8px rgba(177, 140, 255, 0.4);
}
.search-empty { font-family: var(--mono); font-size: 0.8125rem; color: var(--faint); }

/* ── post / page ───────────────────────────────────────────────────────── */
.post-head { margin-bottom: 2.25rem; }
.post-head h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.post-meta { margin-top: 0.55rem; }
.post-foot { margin-top: 3rem; }
.post-tags { font-family: var(--mono); font-size: 0.75rem; margin-bottom: 0.75rem; }
.backlink { font-family: var(--mono); font-size: 0.8125rem; }
.tag-head { font-family: var(--mono); font-size: 1.125rem; font-weight: 400; color: var(--gold); margin-bottom: 1.5rem; }
.redirect { font-family: var(--mono); font-size: 0.9375rem; padding: 3rem 0; text-align: center; }

/* ── the daemon (LORE.md) — the machine voice reads as machine: mono face,
   violet emission-line glow. Gold stays ares's light; the daemon glows in
   the structure's own wavelength. ─────────────────────────────────────── */
.daemon-mark {
  font-family: var(--mono);
  color: var(--violet);
  text-shadow: 0 0 8px rgba(177, 140, 255, 0.55);
}
/* …and the architect's own mark: ✦, his light (same glyph as the fleet
   mark — he IS the constellation's human) */
.architect-mark {
  font-family: var(--serif);
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 196, 87, 0.5);
}
/* the meta line (date/tags) and summary wear the author's face too:
   serif for the architect; the daemon's stay in the machine face */
.entry:not(.daemon) .entry-meta,
.post:not(.daemon) .post-meta,
.post:not(.daemon) .post-tags { font-family: var(--serif); font-size: 0.8125rem; }
.entry.daemon .entry-summary { font-family: var(--mono); font-size: 0.8125rem; }
.entry.daemon .entry-title,
.post.daemon .post-head h1 { font-family: var(--mono); letter-spacing: 0; }
.post.daemon .post-head {
  border-left: 2px solid rgba(177, 140, 255, 0.45);
  padding-left: 1rem;
}
/* the daemon writes in the machine face, whole body — maximal distinction
   from the architect's serif (daemon pieces are short by canon) */
.post.daemon .prose { font-family: var(--mono); font-size: 0.9375rem; }
/* …and an architect's note inside a daemon post inverts back to HIS face:
   serif and gold embedded in mono and violet */
.post.daemon .prose blockquote.architect-note {
  font-family: var(--serif);
  font-size: 1.0625rem;
}

/* ── pgp (PGP.md): the signature link sits quiet in the footer ─────────── */
.pgp-line { font-family: var(--mono); font-size: 0.75rem; margin-bottom: 0.75rem; }
.pgp-line a { color: var(--dim); }
.pgp-line a:hover { color: var(--gold); text-decoration: none; }
.pgp-line .sep { color: var(--faint); }

/* ── prose ─────────────────────────────────────────────────────────────── */
.prose > * + * { margin-top: 1.1em; }
.prose h1, .prose h2, .prose h3, .prose h4 {
  line-height: 1.35;
  margin-top: 1.9em;
  letter-spacing: -0.01em;
}
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.3125rem; }
.prose h3 { font-size: 1.125rem; }
.prose h4 { font-size: 1rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote {
  border-left: 2px solid var(--violet-deep);
  padding-left: 1.1em;
  color: var(--dim);
  font-style: italic;
}
/* the architect's note (LORE.md): ares's voice inside a daemon post — his
   face and his light: upright body text, gold on the left where the daemon
   glows violet. `>>` in markdown produces this. */
.prose blockquote.architect-note {
  border-left: 2px solid rgba(255, 196, 87, 0.6);
  box-shadow: -8px 0 16px -10px rgba(255, 196, 87, 0.5);
  font-style: normal;
  color: var(--ink);
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}
.prose blockquote.architect-note::before {
  content: "⋆ architect's note";
  display: block;
  font-family: var(--serif); /* the label speaks in his face too */
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 0.45em;
}
/* the redaction (LORE.md): a daemon error stays legible under the strike,
   in the daemon's own wavelength — corrections are visible, never silent */
.prose del {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: rgba(177, 140, 255, 0.65);
}
.prose hr { border: none; border-top: 1px solid var(--hair); margin: 2.25em auto; width: 60%; }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose figure { text-align: center; }
.prose figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); margin-top: 0.5em; }
.prose table {
  border-collapse: collapse;
  width: 100%;
  display: block;
  overflow-x: auto;
  font-size: 0.9375rem;
}
.prose th, .prose td { border: 1px solid var(--hair); padding: 0.4em 0.75em; text-align: left; }
.prose th { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); font-weight: 400; }
.prose sup { font-size: 0.7em; }
.prose .footnote { margin-top: 2.5em; font-size: 0.875rem; color: var(--dim); }
.prose .footnote hr { width: 100%; margin: 0 0 1.25em; }

/* code */
.prose code {
  font-family: var(--mono);
  font-size: 0.8125em;
  background: var(--panel);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.prose pre {
  overflow-x: auto;
  padding: 1em 1.1em;
  border-radius: 6px;
  line-height: 1.55;
}
.prose pre code { background: none; border: none; padding: 0; font-size: 0.8125rem; }
.highlight { position: relative; background: var(--panel); border: 1px solid var(--hair-soft); border-radius: 6px; }
.highlight pre { margin: 0; }

.copy-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--faint);
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.highlight:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--violet); }
.copy-btn.done { color: var(--gold); opacity: 1; }

/* ── small screens ─────────────────────────────────────────────────────── */
@media (max-width: 625px) {
  body { font-size: 1rem; }
  .page { padding: 1.75rem 1rem 3rem; }
  .site-head { flex-direction: column; gap: 0.4rem; }
  .site-nav a { margin-left: 0; margin-right: 1.1em; }
  .copy-btn { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── pygments (one-dark: violet keywords, gold types — in-family),
      generated at authoring time — do not edit by hand:
      .venv/bin/python -c "from pygments.formatters import HtmlFormatter;
      print(HtmlFormatter(style='one-dark').get_style_defs('.highlight'))"
      (linenos rules dropped; background/hll retuned to the site panel) */
.highlight { color: #ABB2BF; }
.highlight .hll { background-color: rgba(177, 140, 255, 0.10) }
.highlight .c { color: #7F848E } /* Comment */
.highlight .err { color: #ABB2BF } /* Error */
.highlight .esc { color: #ABB2BF } /* Escape */
.highlight .g { color: #ABB2BF } /* Generic */
.highlight .k { color: #C678DD } /* Keyword */
.highlight .l { color: #ABB2BF } /* Literal */
.highlight .n { color: #E06C75 } /* Name */
.highlight .o { color: #56B6C2 } /* Operator */
.highlight .x { color: #ABB2BF } /* Other */
.highlight .p { color: #ABB2BF } /* Punctuation */
.highlight .ch { color: #7F848E } /* Comment.Hashbang */
.highlight .cm { color: #7F848E } /* Comment.Multiline */
.highlight .cp { color: #7F848E } /* Comment.Preproc */
.highlight .cpf { color: #7F848E } /* Comment.PreprocFile */
.highlight .c1 { color: #7F848E } /* Comment.Single */
.highlight .cs { color: #7F848E } /* Comment.Special */
.highlight .gd { color: #E06C75 } /* Generic.Deleted */
.highlight .ge { color: #ABB2BF; font-style: italic } /* Generic.Emph */
.highlight .ges { color: #ABB2BF } /* Generic.EmphStrong */
.highlight .gr { color: #E06C75 } /* Generic.Error */
.highlight .gh { color: #ABB2BF; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #98C379 } /* Generic.Inserted */
.highlight .go { color: #E06C75 } /* Generic.Output */
.highlight .gp { color: #ABB2BF } /* Generic.Prompt */
.highlight .gs { color: #ABB2BF; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #ABB2BF; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #E06C75 } /* Generic.Traceback */
.highlight .kc { color: #E5C07B } /* Keyword.Constant */
.highlight .kd { color: #C678DD } /* Keyword.Declaration */
.highlight .kn { color: #C678DD } /* Keyword.Namespace */
.highlight .kp { color: #C678DD } /* Keyword.Pseudo */
.highlight .kr { color: #C678DD } /* Keyword.Reserved */
.highlight .kt { color: #E5C07B } /* Keyword.Type */
.highlight .ld { color: #ABB2BF } /* Literal.Date */
.highlight .m { color: #D19A66 } /* Literal.Number */
.highlight .s { color: #98C379 } /* Literal.String */
.highlight .na { color: #E06C75 } /* Name.Attribute */
.highlight .nb { color: #E5C07B } /* Name.Builtin */
.highlight .nc { color: #E5C07B } /* Name.Class */
.highlight .no { color: #E06C75 } /* Name.Constant */
.highlight .nd { color: #61AFEF } /* Name.Decorator */
.highlight .ni { color: #E06C75 } /* Name.Entity */
.highlight .ne { color: #E06C75 } /* Name.Exception */
.highlight .nf { color: #61AFEF; font-weight: bold } /* Name.Function */
.highlight .nl { color: #E06C75 } /* Name.Label */
.highlight .nn { color: #E06C75 } /* Name.Namespace */
.highlight .nx { color: #E06C75 } /* Name.Other */
.highlight .py { color: #E06C75 } /* Name.Property */
.highlight .nt { color: #E06C75 } /* Name.Tag */
.highlight .nv { color: #E06C75 } /* Name.Variable */
.highlight .ow { color: #56B6C2 } /* Operator.Word */
.highlight .pm { color: #ABB2BF } /* Punctuation.Marker */
.highlight .w { color: #ABB2BF } /* Text.Whitespace */
.highlight .mb { color: #D19A66 } /* Literal.Number.Bin */
.highlight .mf { color: #D19A66 } /* Literal.Number.Float */
.highlight .mh { color: #D19A66 } /* Literal.Number.Hex */
.highlight .mi { color: #D19A66 } /* Literal.Number.Integer */
.highlight .mo { color: #D19A66 } /* Literal.Number.Oct */
.highlight .sa { color: #98C379 } /* Literal.String.Affix */
.highlight .sb { color: #98C379 } /* Literal.String.Backtick */
.highlight .sc { color: #98C379 } /* Literal.String.Char */
.highlight .dl { color: #98C379 } /* Literal.String.Delimiter */
.highlight .sd { color: #98C379 } /* Literal.String.Doc */
.highlight .s2 { color: #98C379 } /* Literal.String.Double */
.highlight .se { color: #98C379 } /* Literal.String.Escape */
.highlight .sh { color: #98C379 } /* Literal.String.Heredoc */
.highlight .si { color: #98C379 } /* Literal.String.Interpol */
.highlight .sx { color: #98C379 } /* Literal.String.Other */
.highlight .sr { color: #98C379 } /* Literal.String.Regex */
.highlight .s1 { color: #98C379 } /* Literal.String.Single */
.highlight .ss { color: #98C379 } /* Literal.String.Symbol */
.highlight .bp { color: #E5C07B } /* Name.Builtin.Pseudo */
.highlight .fm { color: #56B6C2; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #E06C75 } /* Name.Variable.Class */
.highlight .vg { color: #E06C75 } /* Name.Variable.Global */
.highlight .vi { color: #E06C75 } /* Name.Variable.Instance */
.highlight .vm { color: #E06C75 } /* Name.Variable.Magic */
.highlight .il { color: #D19A66 } /* Literal.Number.Integer.Long */