/* brianmickel.io — Index
   Off-white ground, ink rules, cobalt links, one variable display face.
   Base unit is 10px; every space on the page is a multiple of it. */

:root {
  --bg: #f1e9ee;
  --fg: #202323;
  --muted: #6f6871;
  --rule: #d9cdd4;
  --accent: #0000ff;
  --u: 10px;
  --ff-display: "Google Sans Flex", "Roboto Flex", system-ui, sans-serif;
  --ff-text: "Google Sans Text", "Google Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "Google Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a191b;
    --fg: #ece5e9;
    --muted: #a09aa1;
    --rule: #38353b;
    --accent: #8e9bff;
    color-scheme: dark;
  }
}

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

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "pnum" 1;
  padding-inline: calc(2 * var(--u));
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 700px) { body { padding-inline: calc(4 * var(--u)); } }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
time, .mono { font-family: var(--ff-mono); font-feature-settings: "tnum" 1, "lnum" 1; }

main { flex: 1; max-width: 80rem; width: 100%; margin-inline: auto; }

/* ---- top bar ---- */
.top {
  max-width: 80rem; width: 100%; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: calc(1 * var(--u)) calc(3 * var(--u));
  padding-block: calc(2 * var(--u));
  border-bottom: 2px solid var(--fg);
}
.top .home { color: var(--fg); text-decoration: none; font-weight: 500; }
.top nav { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)) calc(2.5 * var(--u)); margin-left: auto; }
.top nav a { color: var(--fg); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ---- hero ---- */
.hero { padding-block: calc(6 * var(--u)) calc(4 * var(--u)); }
.hero-small { padding-block: calc(5 * var(--u)) calc(3 * var(--u)); }
.name {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 12vw, 12rem);
  font-weight: 300;
  font-variation-settings: "wght" 300, "opsz" 144, "wdth" 100;
  letter-spacing: -.03em;
  line-height: .95;
  margin: 0;
  cursor: crosshair;
  -webkit-user-select: none; user-select: none;
}
.name .ch { display: inline-block; will-change: font-variation-settings; }
.name .ch.sp { width: .28em; }
.page-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}
.tagline { max-width: 34em; margin: calc(2 * var(--u)) 0 0; font-size: 1.125rem; }

/* ---- the stream ---- */
.stream { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.year {
  font-family: var(--ff-mono); font-size: .8rem; color: var(--muted);
  padding: calc(2.5 * var(--u)) 0 calc(.8 * var(--u));
  border-top: 1px solid var(--rule);
}
.stream > .year:first-child { border-top: 0; }
.year + .row { border-top: 0; }
.row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  column-gap: calc(2.5 * var(--u));
  align-items: baseline;
  padding-block: calc(1.8 * var(--u));
  border-top: 1px solid var(--rule);
}
.row-nokind { grid-template-columns: auto 1fr auto; }
.row-date { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.row-kind {
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap; min-width: 5.5em;
}
.row-kind:hover { color: var(--accent); }
.row-main { display: flex; flex-wrap: wrap; column-gap: calc(1.5 * var(--u)); align-items: baseline; min-width: 0; }
.row-title { font-weight: 500; }
.row-summary { color: var(--muted); }
.row-topics { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--u)); font-size: .8rem; }
.row-topics a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.row-topics a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 700px) {
  .row, .row-nokind { grid-template-columns: auto 1fr; row-gap: calc(.4 * var(--u)); }
  .row-main { grid-column: 1 / -1; flex-direction: column; }
  .row-topics { grid-column: 1 / -1; }
}
.eyebrow { font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 calc(1 * var(--u)); }
.empty { color: var(--muted); padding-block: calc(3 * var(--u)); border-top: 2px solid var(--fg); margin: 0; }

/* ---- an entry ---- */
.entry { padding-block: calc(5 * var(--u)) 0; }
.entry-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}
.entry-meta {
  display: flex; flex-wrap: wrap; gap: calc(.5 * var(--u)) calc(2.5 * var(--u));
  margin: calc(2 * var(--u)) 0 0; font-size: .9rem; color: var(--muted);
}
.entry-summary { max-width: 34em; margin: calc(2 * var(--u)) 0 0; font-size: 1.125rem; }
.prose { max-width: 35em; margin-top: calc(4 * var(--u)); padding-top: calc(3 * var(--u)); border-top: 1px solid var(--rule); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 2em 0 .6em; font-variation-settings: "opsz" 48; }
.prose h3 { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 600; margin: 1.6em 0 .5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose li { margin-bottom: .3em; }
.prose code { font-family: var(--ff-mono); font-size: .9em; font-feature-settings: "tnum" 1, "lnum" 1; }
.prose pre {
  font-family: var(--ff-mono); font-size: .85rem; line-height: 1.55;
  padding: calc(1.5 * var(--u)) calc(2 * var(--u)); margin: 0 0 1.4em;
  border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--fg) 6%, var(--bg));
  overflow-x: auto;
}
.prose pre code { font-size: 1em; }
.prose img { max-width: 100%; height: auto; }
.prose blockquote { margin: 0 0 1.1em; padding-left: calc(2 * var(--u)); border-left: 2px solid var(--rule); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

/* ---- footer ---- */
.foot {
  max-width: 80rem; width: 100%; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)) calc(3 * var(--u));
  margin-top: calc(8 * var(--u)); padding-block: calc(2 * var(--u)) calc(4 * var(--u));
  border-top: 2px solid var(--fg); font-size: .9rem;
}
.foot a { color: var(--fg); }