/* ============================================================
   Shared styles for writing pages (blog index + posts).

   Grey ladder adapted from paco.me's dark scale. Our ground
   (#232323) is his --gray3, so the steps below it are gone;
   the two dimmest tiers are shifted up one notch to keep
   contrast on the lighter ground.

     #ededed  headings, standalone links     12.9:1
     #e5e5e5  body prose                     12.5:1
     #a0a0a0  blurbs, labels, quotes, meta    6.0:1
     #7e7e7e  footer, colophon                3.9:1
     #505050  underlines (not text)

   Every link is underlined in #505050 — standalone or inline,
   one grey, no hover colour change. Hover is carried by the
   diagonal arrow and by dim text stepping up a rung instead.
   ============================================================ */

:root {
  --bg: #232323;

  --fg-strong: #ededed;
  --fg: #e5e5e5;
  --fg-dim: #a0a0a0;
  --fg-lowest: #7e7e7e;

  --underline: #505050;

  --arrow-up-right: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19 15.477-.02-9.672a.802.802 0 0 0-.218-.577c-.145-.152-.34-.228-.587-.228H8.499a.751.751 0 0 0-.777.76c0 .199.076.371.227.517.15.145.326.218.525.218h3.733l4.52-.129-1.728 1.54-9.767 9.783a.692.692 0 0 0-.232.518c0 .205.078.387.235.545a.74.74 0 0 0 .542.237.73.73 0 0 0 .527-.224l9.775-9.78 1.544-1.727-.143 4.188v4.065c0 .199.075.376.225.531.15.155.327.232.531.232.202 0 .38-.076.534-.228a.768.768 0 0 0 .23-.569Z' fill='%23000'/%3E%3C/svg%3E");

  --rule: #343434;
  --surface: #2e2e2e;   /* code block fill */
  --surface-2: #343434; /* inline code chip */

  --font-sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Newsreader', 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --block: 28px; /* rhythm between prose blocks */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--rule) var(--bg); }
::selection { background: rgba(255,255,255,0.12); color: var(--fg-strong); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "kern", "liga", "calt";
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: clamp(1.5rem, 6vh, 4.5rem) clamp(1.5rem, 4vw, 3rem) 5rem;
}

.page { max-width: 920px; margin: 0 auto; }

/* Newsreader italic for emphasis, with line-height:normal so it
   doesn't disturb the baseline grid. +2px, not +1: Newsreader's
   x-height sits well below Bricolage's, so matched on px the italic
   reads a size smaller. Brighter than the prose, never dimmer. */
em, i {
  font: 400 italic calc(1em + 2px)/normal var(--font-serif);
  color: var(--fg-strong);
}

/* ===== Links =====
   Every link is underlined, standalone or inline, one grey
   throughout. Real text-decoration rather than a border, so it
   skips descenders. */
a {
  color: var(--fg-strong);
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 2.5px;
  text-decoration-thickness: 1px;
}

/* Diagonal arrow marking a standalone destination. Drawn as a mask
   so it takes a colour from the ladder, and it sits *outside* the
   anchor so the hover underline never runs beneath it. Not used in
   prose — there the underline already marks the link, and an arrow
   mid-sentence chops the line up. */
.ext {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: text-top;
  background-color: var(--fg-dim);
  -webkit-mask: var(--arrow-up-right) no-repeat center / 100% 100%;
  mask: var(--arrow-up-right) no-repeat center / 100% 100%;
  transition: background-color 0.15s;
}
/* The underline is permanent now, so the arrow carries the
   hover state instead. */
a:hover + .ext { background-color: var(--fg-strong); }

/* ===== Back link — sits above the heading, sidenote weight ===== */
.back {
  display: inline-block;
  margin-bottom: 2.2rem;
  color: var(--fg-dim);
}
.back em { color: inherit; }
.back:hover, .back:hover em { color: var(--fg-strong); }

/* ===== Page heading ===== */
.title {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.standfirst {
  max-width: 580px;
  color: var(--fg-dim);
  margin-bottom: 3.5rem;
}

/* ===== Index: post list ===== */
.posts { list-style: none; }

.posts li { border-top: 1px solid var(--rule); }
.posts li:last-child { border-bottom: 1px solid var(--rule); }
/* The final group is closed by hr.rule below it — a border here
   would stack a second hairline right on top of it. */
.posts:last-of-type li:last-child { border-bottom: 0; }

/* The row wrapper spans title, blurb and date, so the underline
   goes on .post-title inside it, not on the whole grid cell. */
.post-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: clamp(2rem, 8vw, 7rem);
  align-items: baseline;
  padding: 1.15rem 0;
  text-decoration-line: none;
}

.post-title {
  color: var(--fg-strong);
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 2.5px;
  text-decoration-thickness: 1px;
}

.post-blurb {
  display: block;
  color: var(--fg-dim);
  font-size: 15px;
  margin-top: 0.15rem;
}

/* Row hover: the title is already at full brightness and the
   underline is permanent, so the dim parts step up instead. */
.post-blurb, .post-date { transition: color 0.15s; }
.post-link:hover .post-blurb,
.post-link:hover .post-date { color: var(--fg); }

/* Day/month only — the year group above already said the year. */
.post-date {
  font-size: 15px;
  color: var(--fg-dim);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.year {
  font-size: 15px;
  color: var(--fg-dim);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.06em;
  margin: 3rem 0 0.6rem;
}
.year:first-of-type { margin-top: 0; }

/* ===== Post: article body ===== */
.article { max-width: 640px; }

.article .meta {
  display: block;
  font-size: 14px;
  color: var(--fg-dim);
  font-feature-settings: "tnum" 1;
  margin-bottom: 42px;
}

.article h1 {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.article h2 {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
  text-transform: uppercase;
  margin: 56px 0 var(--block);
}

.article h3 {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
  text-transform: uppercase;
  margin: 2.25rem 0 0.8rem;
}

/* Ragged right. */
.article p,
.article li,
.article blockquote { line-height: 1.75; }

.article p { margin-bottom: var(--block); }
.article p:last-child { margin-bottom: 0; }

/* Both list types use the same padding and the browser's own
   marker box, so numerals and bullets land in one gutter and the
   text after them starts at the same x. */
.article ul,
.article ol {
  padding-left: 16px;
  margin-bottom: var(--block);
}
.article ul { list-style: disc outside; }
.article ol { list-style: decimal outside; }
.article li + li { margin-top: 0.5rem; }
.article li::marker {
  color: var(--fg-dim);
  font-feature-settings: "tnum" 1;
}

.article blockquote {
  border-left: 1px solid var(--underline);
  padding-left: 1.4rem;
  margin: 0 0 var(--block);
  color: var(--fg-dim);
}
.article blockquote * { color: var(--fg-dim); }

.article code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-strong);
  background: var(--surface-2);
  border-radius: 0;
  padding: 3px 5px;
}

.article pre {
  background: var(--surface);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: var(--block);
  overflow-x: auto;
  font-size: 13px;
  line-height: 24px;
  tab-size: 4;
}
.article pre code {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  color: var(--fg);
}

/* highlight.js (GitHub Dark) — keep its token colors, drop its box.
   The theme ships a #0d1117 fill and 1em padding; we use the
   surface fill above instead. Loaded before this file. */
.article pre code.hljs {
  display: block;
  background: transparent;
  padding: 0;
  overflow-x: visible;
  color: #c9d1d9;
}
.article code.hljs { padding: 0; }

.article figure { margin: 0 0 var(--block); }
.article figcaption {
  font-size: 14px;
  color: var(--fg-dim);
  margin-top: 0.55rem;
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3.5rem 0 2rem;
}

.colophon {
  max-width: 640px;
  color: var(--fg-lowest);
  font-size: 14px;
}
.colophon p { margin-bottom: 0.6rem; }
.colophon p:last-child { margin-bottom: 0; }
.colophon a { color: var(--fg-dim); }

/* ===== Footer ===== */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 2.5rem;
  font-size: 14px;
  color: var(--fg-lowest);
}
.site-footer .year-mark { font-feature-settings: "tnum" 1; }

/* ===== Responsive ===== */
@media (max-width: 720px) {
  body { padding: 4rem 1.4rem 4rem; font-size: 16px; }
  .title, .article h1 { font-size: 23px; }
  .post-link {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .standfirst { margin-bottom: 2.5rem; }
}