/* Shared article styles for blogs.zethian.com.
   Screen rules first, then the width queries, then @media print last so it
   overrides them: a Letter page is about 695 CSS px, which falls under the
   760px breakpoint. */

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --panel: #f0f4fa;
  --panel-strong: #e8eef8;
  --line: #dbe3ef;
  --ink: #152033;
  --ink-soft: #33415c;
  --muted: #5d6b82;
  --accent: #1757c2;
  --accent-dark: #113f8d;
  --accent-soft: #e7effd;
  --allow: #147a36;
  --allow-bg: #e7f5eb;
  --ask: #8a5c00;
  --ask-bg: #fff3d4;
  --deny: #c62835;
  --deny-bg: #fdebed;
  --content: 68rem;
  --page: 76rem;
  --shadow: 0 24px 70px rgba(26, 42, 70, 0.11), 0 3px 12px rgba(26, 42, 70, 0.05);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -12rem, #dbe7fa 0, rgba(219, 231, 250, 0) 34rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-dark); }
a:focus-visible {
  outline: 3px solid #8ab4ff;
  outline-offset: 3px;
  border-radius: 2px;
}

.page {
  width: min(100% - 2rem, var(--page));
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 4rem;
}
.page > article {
  position: relative;
  padding: clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(199, 210, 226, 0.9);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.page > article::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--allow) 0 33.333%, var(--ask) 33.333% 66.666%, var(--deny) 66.666%);
  content: "";
}
.measure {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

.hero {
  max-width: var(--content);
  margin-bottom: 3.5rem;
  padding-bottom: 3.25rem;
  border-bottom: 1px solid var(--line);
}
.eyebrow,
.meta,
.label,
.section-kicker,
figcaption,
th,
.coverage,
.site-foot {
  font-family: var(--sans);
}
.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.dek {
  width: 100%;
  max-width: none;
  margin: 1.7rem 0 1.5rem;
  color: var(--ink-soft);
  font-size: clamp(1.18rem, 2.5vw, 1.45rem);
  line-height: 1.48;
  text-wrap: pretty;
}
.rule-mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 9rem;
  height: 0.28rem;
  margin-top: 1.5rem;
  overflow: hidden;
  border-radius: 999px;
}
.rule-mark span:nth-child(1) { background: var(--allow); }
.rule-mark span:nth-child(2) { background: var(--ask); }
.rule-mark span:nth-child(3) { background: var(--deny); }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 0.82rem;
}
.meta span + span::before {
  content: "·";
  margin-right: 0.75rem;
  color: #97a3b6;
}

.brief {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 0;
  margin: 0 0 1.25rem;
  padding: 1.5rem 1.65rem;
  background: var(--accent-soft);
  border: 1px solid #cbdcff;
  border-radius: 12px;
}
.label {
  margin: 0;
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.brief > :not(.label) { grid-column: 2; color: var(--ink-soft); }
.brief p:last-child { margin: 0; }

.toc {
  margin: 1.25rem 0 3.75rem;
  padding: 1.45rem 1.65rem 1.55rem;
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.toc ol {
  columns: 2;
  column-gap: 2.5rem;
  margin: 0.55rem 0 0;
  padding-left: 1.25rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
}
.toc li { break-inside: avoid; margin: 0.4rem 0; }

section { margin-top: 5rem; }
section.measure:not(.closing),
section.wide-section {
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
section.wide-section {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}
.section-kicker {
  margin: 0 0 0.45rem;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
h2,
h3 {
  font-family: var(--sans);
  color: var(--ink);
  text-wrap: balance;
}
h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  scroll-margin-top: 1rem;
}
h3 {
  margin: 2.3rem 0 0.65rem;
  font-size: 1.22rem;
  line-height: 1.25;
}
p {
  margin: 0 0 1.3rem;
  text-wrap: pretty;
}
ul, ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
li { margin: 0.35rem 0; }
li::marker { color: #8b98ad; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
}
:not(pre) > code {
  padding: 0.09em 0.3em;
  background: #edf1f7;
  border: 1px solid #dde4ee;
  border-radius: 4px;
}
pre {
  margin: 1.35rem 0 1.55rem;
  padding: 1.2rem 1.35rem;
  overflow-x: auto;
  color: #edf4ff;
  background: #111a2b;
  border: 1px solid #26334a;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.65;
  tab-size: 2;
}
pre code { font-size: inherit; }
.comment { color: #94a6bf; }
.key { color: #86b7ff; }
.string { color: #9ee6a7; }

figure {
  width: 100%;
  max-width: var(--content);
  margin: 2.4rem auto 2.8rem;
  padding: 0;
  overflow: hidden;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(36, 52, 79, 0.06);
}
figure img {
  display: block;
  width: 100%;
  height: auto;
}
figcaption {
  margin: 0;
  padding: 0.95rem 1.25rem 1rem;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
}

.callout {
  margin: 1.75rem 0;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}
.callout.warn {
  background: #fffaf0;
  border-left-color: var(--ask);
}
.callout > :last-child,
.callout p:last-child,
.callout ul:last-child { margin-bottom: 0; }

.limits-list {
  display: grid;
  gap: 0;
  margin: 1.8rem 0 2rem;
  border-top: 1px solid var(--line);
}
.limit-item {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.limit-item h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.limit-item p { margin: 0; color: var(--ink-soft); }
.limit-item .boundary {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
}

.table-wrap {
  width: 100%;
  margin: 1.65rem 0 2rem;
  overflow-x: auto;
  border-radius: 12px;
}
/* The wrapper is focusable so a keyboard reaches the horizontal scroll. */
.table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
caption {
  margin-bottom: 0.6rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}
table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.91rem;
  line-height: 1.45;
}
th,
td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  background: var(--panel);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
tr:last-child td { border-bottom: 0; }
.verdict {
  display: inline-block;
  min-width: 3.5rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.allow { color: var(--allow); background: var(--allow-bg); }
.ask { color: var(--ask); background: var(--ask-bg); }
.deny { color: var(--deny); background: var(--deny-bg); }

.three-up,
.recipes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: var(--content);
  margin: 2rem auto 2.4rem;
}
.recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
table.compact { min-width: 0; font-size: 0.86rem; }
table.compact th,
table.compact td { padding: 0.6rem 0.75rem; }
.card {
  min-width: 0;
  min-height: 100%;
  padding: 1.45rem;
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 4px 16px rgba(36, 52, 79, 0.045);
}
.card h3 { margin: 0 0 0.55rem; font-size: 1.05rem; }
.card p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.93rem; }
.recipe { margin: 0; }
.recipe pre { margin: 1rem 0; font-size: 0.82rem; }
.coverage {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.coverage strong { color: var(--ink-soft); }

.recipe-details > summary,
.more-details > summary {
  padding: 1.15rem 1.3rem;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #cbdcff;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 750;
}
.recipe-details[open] > summary,
.more-details[open] > summary { margin-bottom: 2rem; }

.author-note {
  max-width: var(--content);
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.55;
}

.closing {
  width: 100%;
  max-width: var(--content);
  margin-right: auto;
  margin-left: auto;
  margin-top: 4.8rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: #f5f8ff;
  background: linear-gradient(165deg, #17263f 0%, #101a2c 100%);
  border: 1px solid #2a3a55;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 26, 46, 0.18);
}
/* On this dark surface the page accent drops to 2.4:1, so the kicker uses the
   same light blue as the code blocks (7.4:1). */
.closing .section-kicker { color: #86b7ff; }
.closing h2 { color: #fff; }
.closing p:last-child { margin-bottom: 0; color: #d7e2f2; }
.closing a { color: #b9d2ff; }

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  margin-top: 4rem;
  padding-top: 1.25rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.site-foot span + span::before {
  content: "·";
  margin-right: 0.8rem;
  color: #98a5b8;
}

@media (max-width: 1000px) {
  .three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-up .card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .recipes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .page {
    width: min(100% - 0.75rem, var(--page));
    padding: 0.5rem 0 2rem;
  }
  .page > article {
    padding: 2.2rem 1.1rem 2.8rem;
    border-radius: 15px;
  }
  h1 {
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .hero { padding-bottom: 2.2rem; }
  .brief { grid-template-columns: 1fr; gap: 0.35rem; }
  .brief > :not(.label) { grid-column: 1; }
  .toc ol { columns: 1; }
  .three-up { grid-template-columns: 1fr; }
  .three-up .card:last-child { grid-column: auto; }
  figure {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  figure img { min-width: 42rem; }
  figure figcaption { min-width: 42rem; }
  .meta span + span::before,
  .site-foot span + span::before { content: none; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Paper has no scrollbars and no dark surfaces, and browsers omit
   background graphics unless the reader opts in. Every rule below either
   keeps text legible once its background disappears, or stops content
   from being clipped at the sheet edge. Placed last so it overrides the
   width queries above: a Letter page is about 695 CSS px wide, which
   matches the 760px breakpoint. */
@media print {
  @page { margin: 18mm 16mm; }

  body {
    background: none;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* The article card wraps the whole page, so in print its border draws
     rails down every sheet while the radius and shadow fragment. */
  .page { width: 100%; padding: 0; }
  .page > article {
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .page > article::before { display: none; }

  .rule-mark,
  .site-foot { display: none; }

  /* Dark surfaces invert. Left alone, the background drops out and the
     near-white text prints white on white. */
  pre {
    overflow: visible;
    color: #000;
    background: none;
    border: 1px solid #999;
    border-radius: 0;
    font-size: 8.5pt;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .comment { color: #555; font-style: italic; }
  .key { color: #000; font-weight: 700; }
  .string { color: #333; }

  .closing {
    margin-top: 2.4rem;
    color: #000;
    background: none;
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
  }
  .closing .section-kicker,
  .closing h2,
  .closing p:last-child,
  .closing a { color: #000; }

  figure,
  .card,
  .callout,
  .brief,
  .recipe-details > summary,
  .more-details > summary {
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  figure { overflow: visible; }
  figcaption { background: none; }
  :not(pre) > code { background: none; border: 1px solid #bbb; }

  /* Nothing scrolls on paper, so wide tables and diagrams have to fit
     the text column rather than run off the edge. */
  .table-wrap { overflow: visible; border-radius: 0; }
  table {
    min-width: 0;
    background: none;
    font-size: 8.5pt;
  }
  th { background: none; }
  figure img,
  figure figcaption { min-width: 0; }

  /* The pill tint carries the verdict on screen; on paper the word does. */
  .verdict {
    min-width: 0;
    padding: 0;
    color: #000;
    background: none;
    border-radius: 0;
    text-align: left;
  }

  figure,
  table,
  tr,
  pre,
  .card,
  .callout,
  .brief,
  .limit-item { break-inside: avoid; }
  h1, h2, h3, .section-kicker { break-after: avoid; }

  a { color: #000; text-decoration: underline; }
}