/*
 * The blog's stylesheet, shared by /blog and every post under /blog/.
 *
 * The landing page and the two standalone pages in public/ each inline their
 * own styles, which is fine for a page that exists once. The blog is one index
 * plus a post per article, all built the same way, so the styles live in a file
 * they all link instead of being pasted into each new post. Tokens match the
 * landing page — light is the bare :root, dark is the same set redefined.
 */

:root {
  --navy: #0b1626;
  --ground: #f5f9fd;
  --surface: #ffffff;
  --surface-2: #eaf2fb;
  --line: #d6e4f2;
  --line-soft: #e7f0fa;
  --text: #1b2735;
  --muted: #5a6b7d;
  --blue: #0d8cf0;
  --blue-deep: #0a5fa8;
  --sky: #dceaf8;
  --hivis: #d8f24b;
  --hivis-ink: #26300a;
  --good: #146c4b;
  --good-bg: #dcf3e8;
  --shadow-s: 0 1px 2px rgba(11, 22, 38, .06), 0 6px 16px rgba(11, 22, 38, .06);
  --shadow-m: 0 2px 4px rgba(11, 22, 38, .06), 0 18px 44px rgba(11, 22, 38, .12);

  /* the head band is committed dark in both themes, as on the landing page */
  --hero-bg: #0b1626;
  --hero-bg-2: #071120;
  --hero-text: #eef5fd;
  --hero-muted: #9db4cd;
  --hero-line: #1d304a;

  --radius: 14px;
  --radius-s: 9px;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #e9f1fa;
    --ground: #080f1a;
    --surface: #0f1b2b;
    --surface-2: #15243a;
    --line: #23364e;
    --line-soft: #1a2b41;
    --text: #dfe9f5;
    --muted: #93a8be;
    --blue: #3aa6ff;
    --blue-deep: #8ac9ff;
    --sky: #16304c;
    --good: #6fd6a9;
    --good-bg: #102f24;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-m: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --navy: #e9f1fa;
  --ground: #080f1a;
  --surface: #0f1b2b;
  --surface-2: #15243a;
  --line: #23364e;
  --line-soft: #1a2b41;
  --text: #dfe9f5;
  --muted: #93a8be;
  --blue: #3aa6ff;
  --blue-deep: #8ac9ff;
  --sky: #16304c;
  --good: #6fd6a9;
  --good-bg: #102f24;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-m: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .5);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--navy); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--blue-deep); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }

.display {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .98;
}

.wrap { width: min(1140px, 100% - 2.6rem); margin-inline: auto; }

.eyebrow {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .18em;
  color: var(--blue-deep);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .78rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-hivis { background: var(--hivis); color: var(--hivis-ink); }
.btn-hivis:hover { background: #e4ff5e; }
.btn-ghost { border-color: #3d5474; color: var(--hero-text); }
.btn-ghost:hover { background: #16283f; }
.btn-outline { background: var(--surface); border-color: var(--blue); color: var(--blue-deep); }
.btn-outline:hover { background: var(--sky); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-line);
}
.nav-in { display: flex; align-items: center; gap: 1.6rem; height: 66px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: linear-gradient(160deg, var(--blue), #06456f);
  font-size: 1rem;
}
.brand-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; font-size: 1.06rem; color: var(--hero-text);
}
.nav-back { color: var(--hero-muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav-back:hover { color: var(--hivis); }
.nav .btn { padding: .5rem 1.15rem; font-size: .94rem; }
@media (max-width: 560px) { .nav-back { display: none; } }

/* ---------- the dark band at the top of both page kinds ---------- */
.band {
  background:
    radial-gradient(120% 90% at 78% -10%, #123a63 0%, transparent 58%),
    linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg-2) 100%);
  color: var(--hero-text);
  padding-block: clamp(2.8rem, 6vw, 4.6rem);
}
.band .eyebrow { color: var(--hivis); }
.band h1 { color: var(--hero-text); margin-block: .5rem .9rem; }
.band p { color: var(--hero-muted); max-width: var(--measure); }
.band-in { max-width: 46rem; }

/* ---------- the index ---------- */
.posts { padding-block: clamp(2.6rem, 6vw, 4rem); }

.post-card {
  /* A column so the "read it" line can be pushed to the bottom: cards in a row
     stretch to the tallest, and a short one would otherwise leave its link
     stranded halfway up. */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-s);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: var(--blue); }
.post-card h2, .post-card h3 { margin-bottom: .5rem; }
.post-card p { color: var(--muted); max-width: 58ch; }

.post-lead { padding-bottom: .4rem; }
.post-lead h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.post-lead p { font-size: 1.06rem; }

/* Two-up, deliberately rather than by auto-fit: every one of these grids holds
   either the index's four cards or a post's two, and auto-fit sized to fit three
   strands one card on its own row in the first case and leaves an empty column
   in the second. minmax(0, …) rather than 1fr so a long unbroken word in a
   heading cannot push a column past its share. */
.post-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.2rem;
}
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }
.post-grid h3 { font-size: 1.24rem; }
.post-grid p { font-size: .98rem; }

/* The line above every post title: category, date, how long it takes to read. */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .8rem;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: .7rem;
}
/* Date and reading time are one span so they wrap as a pair — split, a card
   narrow enough to break the line strands the separator on its own. */
.meta-when { white-space: nowrap; }
.meta time { font-variant-numeric: tabular-nums; }
.tag {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .8rem;
  color: var(--blue-deep);
  background: var(--sky);
  border-radius: 999px;
  padding: .16rem .7rem;
}
.band .meta { color: var(--hero-muted); }
.band .tag { color: var(--hivis); background: #16283f; }

.more { margin-top: auto; padding-top: .9rem; font-weight: 700; color: var(--blue-deep); }
.post-card:hover .more { text-decoration: underline; }

/* ---------- a post ---------- */
.article { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.article-in { max-width: 44rem; }
.article > * + * { margin-top: 1.1rem; }

.lede {
  color: var(--muted);
  font-size: 1.14rem;
  max-width: var(--measure);
}

.article h2 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); margin-top: 2.4rem; }
.article h3 { font-size: 1.12rem; margin-top: 1.7rem; }
.article p, .article li { max-width: var(--measure); }
.article ul, .article ol { padding-left: 1.3rem; }
.article li + li { margin-top: .45rem; }
.article strong { color: var(--navy); }

.article figure { margin: 1.6rem 0; }
.article blockquote {
  margin: 1.6rem 0;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 4px solid var(--hivis);
  font-size: 1.12rem;
  color: var(--navy);
}

/* An aside that is worth reading but is not the argument. */
.note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: 1rem 1.15rem;
  margin-block: 1.6rem;
  box-shadow: var(--shadow-s);
}
.note h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.note p { max-width: none; }

/* The short version, for anyone who reads the box and leaves. */
.takeaways {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin-block: 1.8rem;
}
.takeaways h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.takeaways ul { list-style: none; padding: 0; margin: 0; }
.takeaways li { position: relative; padding-left: 1.6rem; }
.takeaways li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--good);
  font-weight: 700;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .96rem;
  box-shadow: var(--shadow-s);
}
.table-scroll { overflow-x: auto; margin-block: 1.4rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  background: var(--surface-2);
  color: var(--navy);
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .88rem;
}
tbody tr:last-child td { border-bottom: 0; }

/* ---------- the ask at the end of a post ---------- */
.cta {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  margin-top: 2.6rem;
  display: grid;
  gap: .9rem;
  justify-items: start;
}
.cta h2 { color: var(--hero-text); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.cta p { color: var(--hero-muted); max-width: 52ch; }
.cta .fine { font-size: .9rem; }

/* ---------- what to read next ---------- */
.next { border-top: 1px solid var(--line); padding-block: clamp(2.4rem, 5vw, 3.4rem); }
.next h2 { font-size: 1.3rem; margin-bottom: 1.1rem; }

/* ---------- footer ---------- */
.foot {
  background: var(--hero-bg-2);
  color: var(--hero-muted);
  padding-block: 2.2rem;
  font-size: .92rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.foot-in { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.foot .brand-name { font-size: .98rem; }
.foot-links { display: flex; gap: 1.4rem; margin-left: auto; flex-wrap: wrap; }
.foot-links a { color: var(--hero-muted); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--hivis); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .post-card:hover { transform: none; }
  * { transition-duration: .001ms !important; }
}