/* Layout: a narrow reading column (about 66 characters) with figures and code allowed to run wider.
   Sans headings, serif body, mono for tokens and code. Red is the one accent, used for links and markers. */
:root {
  --bg: #ffffff;
  --bg-2: #f3f5f8;
  --ink: #13202d;
  --ink-2: #3d4b5c;
  --muted: #64748b;
  --rule: #dfe4ea;
  --accent: #c8161d;
  --accent-soft: #fdecec;
  --code-bg: #f3f5f8;
  --code-ink: #24364a;
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141a; --bg-2: #161d26; --ink: #e6ebf1; --ink-2: #c2ccd8; --muted: #8e9aab; --rule: #2a333f;
    --accent: #ff6b66; --accent-soft: #2c1718; --code-bg: #161d26; --code-ink: #d5dde8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141a; --bg-2: #161d26; --ink: #e6ebf1; --ink-2: #c2ccd8; --muted: #8e9aab; --rule: #2a333f;
  --accent: #ff6b66; --accent-soft: #2c1718; --code-bg: #161d26; --code-ink: #d5dde8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.7 var(--serif); }
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Site header and footer */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 17px/1 var(--display); letter-spacing: -0.01em; }
.brand-mark { width: 12px; height: 12px; background: var(--accent); border-radius: 2px; }
.site-nav { display: flex; gap: 20px; font: 500 15px/1 var(--display); }
.site-nav a { color: var(--ink-2); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.site-foot { border-top: 1px solid var(--rule); margin-top: 96px; }
.site-foot .wrap { padding-block: 28px 40px; font: 400 14px/1.6 var(--display); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Shared type */
h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; margin: 0; }
.eyebrow { font: 600 13px/1.3 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.meta { font: 400 15px/1.5 var(--display); color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.meta span + span::before { content: "·"; margin-right: 14px; color: var(--rule); }

/* Index */
.index-hero { padding-block: 72px 40px; display: grid; gap: 14px; max-width: 720px; }
.index-hero h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.index-hero p { color: var(--ink-2); font-size: 19px; margin: 0; }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.post-card { padding-block: 32px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; max-width: 760px; }
.post-card h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.post-card p { margin: 0; color: var(--ink-2); }
.read-more { font: 600 15px/1 var(--display); }

/* Post */
.post-head { padding-block: 64px 36px; display: grid; gap: 18px; max-width: 800px; margin: 0 auto; }
.post-head h1 { font-size: clamp(36px, 5.6vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; }
.dek { font-size: 21px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.prose { max-width: 680px; margin: 0 auto; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; }
.prose h2 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin-top: 2.2em; }
.prose h3 { font-size: 21px; line-height: 1.3; font-weight: 700; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 0; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--accent); }
.prose ol li::marker { font: 700 16px var(--display); }
.prose strong { font-weight: 650; }
.prose code { font: 400 0.82em var(--mono); background: var(--code-bg); color: var(--code-ink); padding: 0.12em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
.prose pre { margin-top: 1.4em; background: var(--code-bg); color: var(--code-ink); padding: 16px 18px; border-radius: 6px; overflow-x: auto; font: 400 14px/1.6 var(--mono); border: 1px solid var(--rule); }
.prose pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }

.acts { list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.acts li { margin: 0 !important; display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 16px 18px; background: var(--bg-2); border-radius: 6px; }
.acts .act { font: 700 13px/1.4 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); padding-top: 4px; }
.acts p { margin: 0; }

blockquote.pull { margin: 2em 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font: 600 22px/1.4 var(--display); color: var(--ink); letter-spacing: -0.01em; }
blockquote.pull p { margin: 0; }

.figure-wide { max-width: 980px; margin: 2.4em auto 0; }
.figure-wide .frame { background: #ffffff; border: 1px solid var(--rule); border-radius: 8px; padding: 12px; overflow-x: auto; }
.figure-wide img { display: block; width: 100%; min-width: 680px; height: auto; }
.figure-wide figcaption { max-width: 680px; margin: 10px auto 0; font: 400 15px/1.5 var(--display); color: var(--muted); }

.table-wrap { overflow-x: auto; margin-top: 1.4em; border: 1px solid var(--rule); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font: 400 15.5px/1.5 var(--display); }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
thead th { background: var(--bg-2); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

.lessons { counter-reset: lesson; list-style: none; padding: 0 !important; }
.lessons li { counter-increment: lesson; position: relative; padding-left: 52px; margin-top: 1.4em !important; }
.lessons li::before {
  content: counter(lesson, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font: 700 15px/1 var(--mono);
  color: var(--accent);
}

.cta { margin-top: 2.6em !important; padding: 24px 26px; background: var(--accent-soft); border-radius: 8px; display: grid; gap: 10px; }
.cta h2 { margin: 0 !important; font-size: 24px; }
.cta p { margin: 0; color: var(--ink-2); }
.button {
  justify-self: start;
  display: inline-block;
  margin-top: 6px;
  background: var(--accent);
  color: var(--bg);
  font: 600 16px/1 var(--display);
  padding: 13px 20px;
  border-radius: 6px;
  text-decoration: none;
}
.button:hover { filter: brightness(1.08); }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .post-head { padding-block: 40px 24px; }
  .acts li { grid-template-columns: 1fr; gap: 4px; }
  .lessons li { padding-left: 40px; }
}