/* blog.afstkla.nl: an engineer's pad with red pencil; dark mode is a blueprint.
   Layout: one reading column (--col); figures with class="wide" break out to --wide. */
:root {
  --paper: #ffffff; --panel: #ffffff; --ink: #18202e; --muted: #5d6779; --rule: #d9e2ee; --track: #e8eef6;
  --sky: #1f6fd1; --brick: #d7263d; --yes: #1f8f4e; --off: #a7b1c2; --pen: #d7263d; --mark: rgba(215,38,61,.14);
  --display: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hand: "Reenie Beanie", "Bradley Hand", cursive;
  --col: 40rem; --wide: 66rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0e2a52; --panel: #123360; --ink: #eef4ff; --muted: #a9c0e2; --rule: #2a4c7e; --track: #1d4374;
  --sky: #9cc7ff; --brick: #ffd166; --yes: #7ee0a8; --off: #5d7aa6; --pen: #ffd166; --mark: rgba(255,209,102,.2); color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #0e2a52; --panel: #123360; --ink: #eef4ff; --muted: #a9c0e2; --rule: #2a4c7e; --track: #1d4374;
  --sky: #9cc7ff; --brick: #ffd166; --yes: #7ee0a8; --off: #5d7aa6; --pen: #ffd166; --mark: rgba(255,209,102,.2); color-scheme: dark }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 1.12rem/1.68 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 6rem; }
main { display: grid; gap: 1.15rem; justify-items: center; position: relative; counter-reset: sec fig; }
main > * { width: 100%; max-width: var(--col); margin: 0; }
main > .wide { max-width: var(--wide); }
h1, h2 { font-family: var(--display); text-wrap: balance; line-height: 1.05; text-transform: uppercase; }
h1 { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 800; letter-spacing: -0.02em; margin-block: 3.5rem 0; }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 700; letter-spacing: 0.01em; margin-block: 2.2rem 0; }
h2::before { content: counter(sec) " / "; counter-increment: sec; color: var(--pen); font-family: var(--mono); font-weight: 400; font-size: 0.8em; }
.dek { font-family: var(--hand); font-size: 2rem; color: var(--pen); line-height: 1.1; }
p, dd, figcaption { margin: 0; position: relative; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
a { color: var(--pen); text-decoration: none; padding-bottom: 3px;
  background: var(--squiggle, linear-gradient(var(--sky), var(--sky)) 0 100% / 100% 1.5px no-repeat); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
hr { border: 0; height: 2px; max-width: var(--col); margin-block: 2rem;
  background: linear-gradient(90deg, transparent 0 calc(50% - 1px), var(--brick) calc(50% - 1px) calc(50% + 1px), transparent 0), var(--rule); }
pre { font-family: var(--mono); font-size: 0.84rem; line-height: 1.6; background: var(--panel); border: 1px solid var(--rule);
  padding: 1rem 1.1rem; overflow-x: auto; margin: 0; }
.label { font: 600 0.72rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
figure { margin: 0; display: grid; gap: 0.6rem; }
figcaption { font-size: 0.85rem; line-height: 1.5; color: var(--muted); max-width: var(--col); width: 100%; justify-self: center; }
@media (max-width: 600px) { figcaption { font-size: 0.78rem; } }
figcaption::before { content: "fig. " counter(fig) "  "; counter-increment: fig; font: 1.35em var(--hand); color: var(--pen); }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.closing { font-style: italic; color: var(--muted); }
[data-scribble] { position: relative; }

/* footnotes: a [n] marker that pops its note out under the line, like xkcd's What If */
.fnref { font: 600 0.62em/1.2 var(--mono); color: var(--pen); vertical-align: 0.6em; background: none; border: 0; padding: 0 0.15em; margin-left: 0.1em; cursor: pointer; }
.fnref[aria-expanded="true"] { background: var(--pen); color: var(--paper); }
.fn { position: absolute; z-index: 5; width: min(20rem, 100%); padding: 0.65rem 0.85rem; background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--mark); font: 400 0.95rem/1.5 var(--body); text-align: left; }
.fn::before { content: ""; position: absolute; top: -7px; left: calc(var(--cx, 50%) - 6px); width: 11px; height: 11px;
  background: inherit; border: solid var(--ink); border-width: 1.5px 0 0 1.5px; transform: rotate(45deg); }

/* share a selection */
.share { position: absolute; z-index: 30; display: flex; gap: 2px; padding: 4px; background: var(--ink); box-shadow: 0 8px 24px -8px rgba(0,0,0,.45); }
.share::after { content: ""; position: absolute; left: calc(var(--cx, 50%) - 6px); bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.share.below::after { bottom: auto; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.share button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; background: none; color: var(--paper); cursor: pointer; }
.share button:hover { color: var(--pen); }
.share svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.share svg.line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.share .done { color: var(--yes); }


/* generic segmented toggle */
.seg { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 999px; padding: 2px; gap: 2px; }
.seg button { border: 0; background: none; font: 600 0.75rem var(--mono); color: var(--muted); padding: 0.35rem 0.75rem; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--paper); }

/* site chrome: the small link home at the top of every page, and the post list on the front page */
.top { justify-self: stretch; max-width: var(--wide); display: flex; gap: 1.5rem; align-items: baseline; padding-top: 1.2rem;
  font: 400 0.8rem var(--mono); color: var(--muted); }
.top a { color: var(--muted); background: none; margin-right: auto; }
.top a:hover { color: var(--pen); }
.draft { font: 400 1.4rem var(--hand); color: var(--pen); }
.posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.posts a { display: grid; gap: 0.2rem; color: inherit; background: none; padding: 0; }
.posts b { font: 700 1.35rem/1.15 var(--display); text-transform: uppercase; }
.posts a:hover b { color: var(--pen); }
.posts span { color: var(--muted); }
.posts time { font: 400 0.8rem var(--mono); color: var(--muted); }