/* ============================================================
   blog.eddiequinn.xyz — site-specific stylesheet
   ------------------------------------------------------------
   Direction: Blade Runner / 2049 noir. Cold body, cold headings,
   one neon purple accent for the things that earn it. The
   reading surface carries the personality (venetian-blind stripes,
   tight typographic rhythm) so colour stays rare.

   This file is the site-specific layer of the relic design
   system. The shared base (reset, dark theme tokens, page frame,
   footer) lives in /shared/base.css. The shared header (// mark,
   name, handle, subhead, nav, glitch) lives in /shared/header.css.
   This file overrides only what makes the blog distinct.

   Restraint rules (specific to this site):
     - one accent: neon purple #B967FF
     - accent appears on exactly five things:
         1. the // brand mark in the header
         2. link hover
         3. the date stamp on the post list
         4. the prev/next nav hover on the post page
         5. the comment marker inside code blocks
     - body text is cold grey (--ink from shared base) — no
       ivory, no warm cast
     - the only decoration is the hairline rules; the
       previous venetian-blind overlay was dropped because
       it read as strikethrough on most monitors (see the
       .prose block below for the note)
   ============================================================ */

:root {
  /* site accent — neon purple. The 2049 off-world neon. */
  --accent:     #B967FF;

  /* type — same family names as the portfolio, tighter tracking
     and higher x-height on the body to give the reading surface
     a more editorial feel than the portfolio's engineering chrome. */
  --display: "Saira SemiCondensed", "Arial Narrow", sans-serif;
  --label:   "Michroma", monospace;
  --sans:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- site body typography ---------- */
body {
  font-family: var(--sans);
  /* Cold grey body. We override --ink here to a slightly cooler
     cast than the shared base — closer to the launcher's
     #C9D1DC than the portfolio's #C9CED4. Cold body is what
     makes the neon purple read as atmospheric rather than
     decorative. If this feels too cold, drop the override and
     inherit shared/base.css --ink directly. */
  color: #C9D1DC;
  font-size: 1.125rem;          /* a touch larger for reading */
  line-height: 1.7;             /* a touch more generous */
}

/* ---------- shared header — font family bindings ----------
   The shared header.css declares layout, colour, and the // mark.
   This file assigns the type family. Header layout MUST stay
   identical to shared/header.css — only font-family overrides here. */
.identity h1 { font-family: var(--display); }
.identity h1 .handle { font-family: var(--mono); }
.identity .subhead { font-family: var(--mono); }
.site-nav { font-family: var(--label); }

/* ---------- site-specific link hover ----------
   The shared base sets `a { color: inherit }`. The blog's hover
   is the neon purple accent. */
a:hover { color: var(--accent); }

/* ---------- section chrome ----------
   Reused across the index and the post page. The shared base
   has hairlines for rules; the blog's section labels get the
   display font and slightly tighter rhythm. */
.section-label {
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.section-label::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hairline);
}

/* ---------- index page: post list ----------
   Each entry: date above, title below, dek below that. The
   date is the loudest line on the page — bigger than you
   think it should be. The title is the second-loudest. The
   dek is the quietest. This hierarchy is the personality. */
.lede {
  font-family: var(--sans);
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  max-width: 32em;
  margin: 0 0 4rem;
  text-wrap: pretty;
}

/* ---------- index + archive: post list ----------
   Layout B: date stacked above the title, full-width. The
   date is the loudest line on the page (small mono, neon
   purple, all-caps). The title sits beneath. The dek sits
   beneath the title. Each entry is one self-contained block,
   separated from the next by a hairline.

   This replaced an earlier grid-with-baseline layout where
   the date sat in a left column next to the content. The grid
   layout read fine for 3-5 posts on the home page but felt
   cramped once the list got longer, and didn't work at all
   for a year-grouped archive of 30+ posts. */
.post-list { list-style: none; margin: 0 0 3rem; padding: 0; }
.post-list li {
  padding: 2.5rem 0;
  border-top: 1px solid var(--hairline);
  display: block;
}
.post-list li:last-child { border-bottom: 1px solid var(--hairline); }

.post-date {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--accent);                                    /* accent use #3 */
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 0.5rem;
}

.post-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  letter-spacing: 0.01em;
  color: var(--ink-bright);
  margin: 0 0 0.35rem;
  line-height: 1.2;
  text-wrap: balance;
}
.post-title a { color: inherit; }
.post-title a:hover { color: var(--accent); }

/* Underline on hover for prose + about-prose links. The base
   `a:hover` above already paints them accent; this rule adds
   the border-bottom that turns the link into a tappable cue.
   Same accent, same five uses. */
.prose a,
.about-prose a {
  color: var(--ink-bright);
  border-bottom: 1px solid var(--hairline);
}
.prose a:hover,
.about-prose a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.post-dek {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 38em;
  text-wrap: pretty;
}

/* ---------- archive: year section breaks ----------
   The archive groups posts by year with a thin label and a
   full-width hairline. Each year is a tight cluster of post
   entries, separated from the next year by enough whitespace
   to read as a new section, not just a new row. */
.archive-year {
  margin: 0 0 4rem;
}
.archive-year:first-of-type { margin-top: 1rem; }
.archive-year-label {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.archive-year-label::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hairline);
}
.archive-year-label .count {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-left: auto;
}
.archive-year .post-list { margin: 0; }
.archive-year .post-list li:first-child { border-top: 0; padding-top: 0; }
.archive-year .post-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- post page: article header ----------
   The article kicker is the date in mono caps. The article
   title is the display font, tighter tracking, larger. The
   dek is the same one-liner the post list shows, repeated
   here for the reader who landed directly on the article. */
.article-kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);                                    /* accent use #3 */
  margin: 0 0 1.5rem;
}

.article-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink-bright);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.article-dek {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 3rem;
  max-width: 36em;
  text-wrap: pretty;
}

/* ---------- post page: reading surface ---------- */
.prose {
  position: relative;
  padding: 2.5rem 0 0;
  margin: 0 0 3rem;
  background-color: transparent;
}

/* The previous version had a horizontal repeating-linear-gradient
   stripe here at 4% white every 14px, evoking venetian-blind lighting.
   In practice the stripe hit each line of body text at mid-character
   height on most monitors and read as a strikethrough — the strikethrough
   effect dominated the Blade Runner reference it was meant to evoke.
   Dropped. The noir feel still lives in the colour palette, the
   IBM Plex / Saira / Michroma type stack, and the hairline rules. */

.prose p {
  margin: 0 0 1.5rem;
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose p + h2 { margin-top: 3.5rem; }
.prose p + h3 { margin-top: 2.5rem; }

.prose h2 {
  font-family: var(--label);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: var(--measure);
}
.prose h2::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hairline);
}
.prose h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--ink-bright);
  margin: 0 0 1rem;
  max-width: var(--measure);
}

.prose ul, .prose ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  max-width: var(--measure);
}
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink-bright); font-weight: 600; }
.prose em { font-style: italic; }
.prose a { color: var(--ink-bright); border-bottom: 1px solid var(--hairline); }
.prose blockquote {
  margin: 1.5rem 0 1.5rem 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--hairline);
  color: var(--ink);
  font-style: italic;
  max-width: var(--measure);
}
.prose blockquote p { margin-bottom: 0.5rem; }

.prose code {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink-bright);
  background: var(--panel);
  padding: 0.1em 0.35em;
  border: 1px solid var(--hairline);
}
.prose pre {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 0 0 2rem;
  max-width: var(--measure);
}
.prose pre code {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
/* The comment marker inside a code block. This is the fifth
   and final accent use. It's tiny but it's the only colour
   inside a code block, so it carries the post. */
.prose pre code .comment,
.prose pre code .c,
.prose pre code .cm {
  color: var(--accent);                                    /* accent use #5 */
  font-style: italic;
}

.prose figure { margin: 2.5rem 0; max-width: var(--measure); }
.prose figure img { max-width: 100%; height: auto; border: 1px solid var(--hairline); }
.prose figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.85rem;
}

/* ---------- post page: prev/next nav ----------
   The article's bottom-of-page navigation. Same pattern as
   the portfolio's back-link, but bidirectional. */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 4rem;
}
.post-nav a {
  display: block;
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.5rem 0;
}
.post-nav a:hover { color: var(--accent); }               /* accent use #4 */
.post-nav .next { text-align: right; }
.post-nav .dir { display: block; }
.post-nav .ttl {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-bright);
  margin-top: 0.35rem;
}

/* ---------- signature badge ----------
   A single line, sitting between the article body and the
   prev/next nav. Indicates the post is published as a PGP
   clearsigned document; the right-hand link goes to the
   canonical .txt artifact at /sigs/posts/<slug>.txt.

   Aesthetic rules:
     - lives next to the venetian-blind reading surface, so it
       can't shout. Mono, dim, hairline above only (the verify
       <details> below carries the bottom of the visual frame).
     - the // glyph does the brand work, same as the header.
     - the link is the only interactive element, sits on the right.
*/
.sig-badge {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1.25rem 0 0.6rem;        /* tighter bottom — the hairline moves to the block below */
  margin: 0 0 1rem;                 /* small gap to the verify block, no visual rule between */
  border-top: 1px solid var(--hairline, #22262D);
  /* no border-bottom: the verify <details> below picks up the visual
     "compartment" without a doubled hairline between them. */
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint, #8A93A0);
  background: transparent;  /* do not paint — sit on the page bg */
}
.sig-badge .mark { color: var(--accent, #B967FF); }
.sig-badge .line { opacity: 0.95; }

/* right-side action — a single link. Right-justified, dim, hover to accent. */
.sig-badge .actions {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
}
.sig-badge .action {
  color: var(--ink-faint, #8A93A0);
  text-decoration: none;
}
.sig-badge .action:hover { color: var(--accent, #B967FF); }

/* ---------- verification block ----------
   Sits directly below the badge. A native <details> so the page can
   be read without it expanded; collapse-by-default keeps the visual
   weight low.

   THE PAGE NEVER TOUCHES THE USER'S CLIPBOARD OR SHELL.
   The commands are visible text. The reader runs them by hand. */
.sig-verify {
  margin: 0 0 2.5rem;
  padding: 0 1.2rem 1.25rem;     /* top padding 0 — the summary sits flush below the badge */
  border: 1px solid var(--hairline, #22262D);
  border-top: none;                /* meets the badge above without a doubled hairline */
  border-radius: 0 0 3px 3px;      /* square top, rounded bottom only */
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  color: var(--ink-faint, #8A93A0);
}
.sig-verify > summary {
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-bright, #E9ECEF);
  list-style: none;            /* hide the default disclosure triangle */
  outline: none;
  padding: 0.85rem 0;          /* own padding since the container has no top padding */
}
.sig-verify > summary::-webkit-details-marker { display: none; }
.sig-verify > summary:hover { color: var(--accent, #B967FF); }
.sig-verify > summary:focus-visible {
  outline: 1px solid var(--accent, #B967FF);
  outline-offset: 4px;
  border-radius: 2px;
}
.sig-verify[open] > summary {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline, #22262D);
}
.sig-verify-intro,
.sig-verify-note {
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0.75rem 0;
  font-family: var(--sans, "IBM Plex Sans", sans-serif);
  color: var(--ink, #C9CED4);
}
.sig-verify-intro { font-style: normal; }
.sig-verify-intro code {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.85em;
}
.sig-verify pre {
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  background: var(--panel, #12151A);
  border: 1px solid var(--hairline, #22262D);
  border-radius: 2px;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-bright, #E9ECEF);
  overflow-x: auto;
  white-space: pre;            /* don't wrap the sig — line breaks matter */
}
.sig-verify pre code {
  font-family: inherit;        /* don't override the pre font */
  background: transparent;
  padding: 0;
  border: none;
}

/* ---------- shell token highlighting ----------
   Hand-rolled classes for the verification block. The two commands
   in the verify block are the only shell content on the site, so a
   real highlighter would be overkill. Tokens map to:
     - .tok-cmd  : command verb (gpg, curl)            — accent purple
     - .tok-flag : long/short option (--keyserver)     — ink (default body)
     - .tok-url  : URL inside an option arg            — dim cyan
     - .tok-str  : single-quoted string                — desaturated green
     - .tok-fpr  : key fingerprint hex                  — muted amber
     - .tok-pipe : shell pipe                          — accent rule, dim
   Colour values are inline because the shared palette doesn't
   define per-token hues — Veridian Cyan / Phosphor Green / Rust
   Amber are the closest 2049-adjacent tones we have without adding
   a fifth colour to the badge.
*/
.sig-verify .tok-cmd  { color: #C490FF; font-weight: 500; }   /* purple, accent-adjacent */
.sig-verify .tok-flag { color: var(--ink, #C9CED4); }       /* same as body — the verbs carry the colour */
.sig-verify .tok-url  { color: #7BC9D9; }                   /* veridian cyan */
.sig-verify .tok-str  { color: #A8D5A2; }                   /* phosphor green, muted */
.sig-verify .tok-fpr  { color: #D9B071; letter-spacing: 0.04em; } /* rust amber, fingerprint reads as a value */
.sig-verify .tok-pipe { color: var(--ink-faint, #8A93A0); } /* syntax delimiter, dim */
.sig-verify-note {
  font-size: 0.78rem;
  color: var(--ink-faint, #8A93A0);
}

/* ---------- about page ----------
   The one paragraph that says who you are. Links to the launcher. */
.about-prose {
  max-width: 38em;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}
.about-prose p { margin: 0 0 1.5rem; }
/* .about-prose a + .about-prose a:hover live up with the .prose
   pair so the underline-hover behaviour stays in one rule. */

/* ---------- small screens ---------- */
@media (max-width: 44rem) {
  body { font-size: 1.0625rem; }
  .identity h1 { white-space: normal; }
  .post-list li {
    padding: 2rem 0;
  }
  .post-nav { grid-template-columns: 1fr; gap: 1rem; }
  .post-nav .next { text-align: left; }
  .prose { padding: 1.5rem 0.5rem; }
}