/* stephenshaffer.io — "Almanac / Phosphor" theme
   ------------------------------------------------------------------
   A skin over styles.css: same markup, same class names, no template
   change beyond the stylesheet link. Switch with "theme": "almanac" in
   src/_data/site.json, drop the key to revert to Field Notes.

   Structure is the almanac: ruled ledger rows, numbered sections, dense
   tabular data, a reference you consult rather than read. Chrome is
   cassette futurism, kept quiet: phosphor indicators, stencilled mono
   labelling, tabular numerals, a terminal wordmark with a live cursor.

   Palette is Phosphor from the theme bench — a dark ground with a green
   signal and an amber accent. Every text token clears WCAG AA against
   both the ground and the raised card: ink 13.71:1, body 10.12:1, soft
   8.68:1, muted 6.66:1, fainter 5.81:1, signal 8.16:1, accent 6.00:1.

   Type is the base stack: Archivo for display, IBM Plex Sans for text,
   IBM Plex Mono for every label and figure. No extra webfont. */

:root {
  color-scheme: dark;

  --paper:    #161A16;   /* ground   */
  --card:     #1E241E;   /* raised   */
  --ink:      #DDE6D6;
  --body:     #BCC8B6;
  --soft:     #ADBAA7;
  --muted:    #96A391;
  --faint:    #96A391;
  --fainter:  #8B9886;
  --green:    #8CBD86;   /* signal   */
  --clay:     #D2853A;   /* accent   */
  --amber:    #D2853A;
  --rule:     #333B32;
  --hairline: #2A312A;

  --radius:    9px;   /* panels, figures */
  --radius-sm: 5px;   /* controls        */

  /* One page, one surface set — the light theme needed a second set for
     its dark plates, this one does not. */
  --link:        #8CBD86;
  --link-hover:  #DDE6D6;
  --link-accent: #D2853A;
  --focus:       #D2853A;
}

/* ---- substrate: dot matrix over ledger rules, inverted for the dark ground ---- */
body::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(140,189,134,.055) 0 1px, transparent 1px 28px),
    radial-gradient(circle, rgba(140,189,134,.10) .5px, transparent .6px);
  background-size: auto, 7px 7px;
}
body { font-size: 16.5px; }

/* ---- masthead: the ground with a rule, not a faceplate ---- */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { padding-block: 14px; }

/* the wordmark is a shell prompt: lowercase, monospaced, mid-keystroke */
.wordmark {
  font-family: var(--mono); font-weight: 500; font-size: 14px;
  letter-spacing: .01em; text-transform: lowercase;
  color: var(--ink); white-space: nowrap;
}
.wordmark .prompt { color: var(--link-accent); margin-left: .12em; }
.wordmark::after {
  content: ""; display: inline-block; width: .5em; height: 1.05em;
  background: var(--link-accent); margin-left: .35em; vertical-align: -.2em;
  animation: cursor 1.2s steps(1) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wordmark::after { animation: none; } }
.site-nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- botanical marks were drawn in dark green for paper; on this ground
        they need to come up rather than go down ---- */
.hero-fern, .divider img, .group-mark, .topics-mark, .eyebrow img,
.entry li::before, .essay-body ul li::before {
  filter: brightness(2.05) saturate(.85);
}
.entry li::before, .essay-body ul li::before { background: var(--green); filter: none; }

/* ---- hero ---- */
.hero h1 {
  letter-spacing: -.028em;
  /* the base clamps to 13ch, which breaks the name over two lines. Keep it
     on one and let the size ride the viewport so it never has to wrap. */
  max-width: none; white-space: nowrap;
  font-size: clamp(27px, 7.1vw, 62px);
}
.hero .lead { font-size: 19px; }
.eyebrow {
  color: var(--amber); letter-spacing: .2em;
  border-top: 1px solid var(--amber); padding-top: 9px;
  display: inline-flex;
}
.hero-fern { opacity: .26; }

/* ---- perforated divider, the tear line on a printout ---- */
.divider::before, .divider::after {
  height: 5px; background:
    radial-gradient(circle, var(--rule) 1.4px, transparent 1.5px) 0 50% / 9px 5px repeat-x;
}
.divider img { opacity: .55; }

/* ---- browse panel: a labelled control strip ---- */
.browse [data-controls] {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.browse-label, .topics-label {
  font-family: var(--mono); letter-spacing: .2em; color: var(--amber);
}
.route, .topic {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
  border: 1px solid var(--rule); background: transparent; color: var(--body);
  padding: 6px 11px; border-radius: var(--radius-sm);
}
.route:hover, .topic:hover { border-color: var(--green); color: var(--ink); }
.route[aria-pressed="true"], .topic[aria-pressed="true"] {
  background: var(--green); color: var(--paper); border-color: var(--green);
}
.route[aria-pressed="true"] .count { color: var(--paper); }
.count {
  font-variant-numeric: tabular-nums; letter-spacing: .08em;
  margin-left: 8px; color: var(--amber);
}
.clear { font-family: var(--mono); color: var(--amber); text-transform: uppercase; }

/* ---- section heads: § 01, § 02 … numbered like almanac chapters.
        A filled bar reads at 1.11:1 on this ground, so the heading sits
        on the ground with the rule carrying the structure instead. ---- */
.index .group { counter-increment: plate; }
.index { counter-reset: plate; }
.group-head { gap: 14px; align-items: center; }
.group-head::after { background: var(--rule); }
.group-head h2 {
  font-weight: 700; font-size: 21px;
  letter-spacing: -.01em; color: var(--ink);
}
.group-head h2::before {
  content: "§ " counter(plate, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--amber); margin-right: 12px;
}
.group-note { color: var(--muted); font-family: var(--mono); font-size: 12px; }

/* ---- rows as ledger lines ---- */
.row {
  border-top: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  padding-block: 18px;
}
.row:hover { background: var(--card); border-left-color: var(--amber); border-radius: var(--radius); }
.row-when {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber);
}
.row-title { font-weight: 600; letter-spacing: -.008em; }
.row-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.row-cta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.row:hover .row-cta { color: var(--amber); }

/* ---- essays ---- */
.essay-body h2 {
  text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
}
.essay-body > p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 700; float: left;
  font-size: 3.1em; line-height: .84; padding: .05em .12em 0 0; color: var(--amber);
}
.essay-body blockquote {
  border-left: 2px solid var(--amber); background: var(--card);
  padding: 14px 20px; font-style: normal;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.essay-body pre {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 18px 20px;
}
.essay-body figure {
  border: 1px solid var(--rule); background: var(--card);
  padding: 10px; border-radius: var(--radius);
}
.essay-body figure img { border-radius: calc(var(--radius) - 5px); }
.essay-body figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber); padding-top: 8px;
}

/* ---- contact: a readout block ---- */
.contact h2, .page-head h1 { text-transform: uppercase; letter-spacing: .02em; }
/* the base clamps this to 46ch, which breaks the sentence over two lines.
   It needs 371px flat, so nowrap holds down to a ~415px viewport and is
   released below that — a wrap beats a horizontally scrolling page. */
.contact > .wrap > p { max-width: none; white-space: nowrap; }
@media (max-width: 440px) { .contact > .wrap > p { white-space: normal; } }

.contact-col .h {
  font-family: var(--mono); color: var(--amber);
  letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule); padding-bottom: 6px;
}
.contact-col a { font-family: var(--mono); font-size: 13px; color: var(--ink); }

/* ---- footer: status strip ---- */
.site-foot { border-top: 1px solid var(--rule); margin-top: 60px; }
.site-foot .wrap {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding-block: 16px;
}

/* ---- the skip link inverts with everything else ---- */
.skip { background: var(--ink); color: var(--paper); }

@media (max-width: 820px) {
  .group-head { flex-wrap: wrap; }
  .essay-body > p:first-of-type::first-letter { font-size: 2.6em; }
}

/* ---- literal colours in the base stylesheet -------------------------
   styles.css sets seven colours as raw hex rather than tokens, all of
   them chosen for a paper ground. On this ground .essay-body alone —
   #2F3A34 on #161A16, about 1.5:1 — would have made every blog post
   unreadable. The green washes are likewise invisible here, so the
   tints are restated against the signal instead. */
.essay-body { color: var(--body); }
.essay-lead, .page-head .lead { color: var(--soft); }
.note, .todo { color: var(--muted); }
.todo { background: var(--card); border-color: var(--rule); }
.post-nav a { background: var(--card); border-color: var(--rule); }
.post-nav a:hover { border-color: var(--green); }
.route[aria-pressed="true"] { color: var(--paper); }

::selection { background: rgba(140, 189, 134, .22); }
.quiet-link { border-bottom-color: rgba(140, 189, 134, .38); }
.quiet-link:hover { border-bottom-color: var(--green); color: var(--green); }
.essay-body a { text-decoration-color: rgba(140, 189, 134, .42); }