/* SecondPage blog article: "Crayon margins".
   One stylesheet for every article. Copy it, with patrick-hand.woff2, next to the
   article's index.html. secondpage.cc adds its header (about 72px) above the article
   and its footer below it. No JavaScript runs in articles, so everything here is CSS.

   Host crayon: <article class="article" data-host="...">
     purple  guides (default)      red   opinions
     orange  comparisons           pink  roundups and lists
     teal    behind the scenes
   The host colours the title underline, step circles, ticks, highlights and the byline crayon.
   Margin notes are written by Purple or Red only (data-crayon="purple" or "red").

   Notebook layer (optional): <main class="article-shell notebook"> lays the article on a
   sheet of paper over the blog index's graph paper, puts margin notes on the grid, turns
   notes into sticky notes and the checklist into crayon-ticked boxes. */

@font-face {
  font-family: "SP Hand";
  src: url("patrick-hand.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #fffefa;
  --ink: #1a1614;
  --text: #2a2420;
  --muted: #625951;
  --rule: #e6dfd6;
  --accent: #5a3d6e;
  --accent-hover: #432c53;
  --tint: #f4eff7;
  --tint-rule: #e2d6ea;
  --code-bg: #f3efe9;
  --end-bg: #1a1614;
  --end-text: #f4efe9;
  --end-muted: #c9bfb5;
  --end-accent: #bda2cf;
  --desk: #f7f5f1;
  --sheet: #fffefa;
  --grid-line: rgba(26, 22, 20, 0.06);

  /* Crayon line colours: dark enough for text on paper, lightened in dark mode */
  --purple: #442b60;
  --red: #77291f;
  --orange: #783912;
  --pink: #6e274a;
  --teal: #084a3d;
  /* Crayon bodies and wrappers: the same in both themes, like real crayons */
  --purple-fill: #8a6bb8;  --purple-band: #442b60;
  --red-fill: #e06a55;     --red-band: #77291f;
  --orange-fill: #e0904f;  --orange-band: #783912;
  --pink-fill: #df85ad;    --pink-band: #6e274a;
  --teal-fill: #45aa98;    --teal-band: #084a3d;

  --serif: "Iowan Old Style", "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand: "SP Hand", "Patrick Hand", "Marker Felt", "Comic Sans MS", cursive;

  /* A hand-drawn crayon stroke, used as a mask so it takes any colour */
  --crayon-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12C40 5 86 16 128 9s52-3 69 2' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M14 15c48-5 98 2 176-4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151312;
    --ink: #f1ebe4;
    --text: #e2dbd3;
    --muted: #a69c92;
    --rule: #2e2925;
    --accent: #bda2cf;
    --accent-hover: #d4c1e1;
    --tint: #231d27;
    --tint-rule: #3a2f42;
    --code-bg: #24201d;
    --end-bg: #26202b;
    --end-text: #f1ebe4;
    --end-muted: #b5aab9;
    --end-accent: #bda2cf;
    --desk: #151312;
    --sheet: #1f1b1d;
    --grid-line: rgba(241, 235, 228, 0.06);
    --purple: #bba4dc;
    --red: #f08a78;
    --orange: #e6a26c;
    --pink: #e597bc;
    --teal: #7fd3b8;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor jumps land below the site header. */
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body { margin: 0; background: var(--paper); }

.article-shell {
  padding: 40px 20px 80px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.article-shell ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.article {
  --host: var(--purple);
  --host-fill: var(--purple-fill);
  --host-band: var(--purple-band);
  max-width: 42rem;
  margin: 0 auto;
}
.article[data-host="red"]    { --host: var(--red);    --host-fill: var(--red-fill);    --host-band: var(--red-band); }
.article[data-host="orange"] { --host: var(--orange); --host-fill: var(--orange-fill); --host-band: var(--orange-band); }
.article[data-host="pink"]   { --host: var(--pink);   --host-fill: var(--pink-fill);   --host-band: var(--pink-band); }
.article[data-host="teal"]   { --host: var(--teal);   --host-fill: var(--teal-fill);   --host-band: var(--teal-band); }

/* ---------- Heading block ---------- */

.kicker {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--host);
}
.kicker .page-no { margin-left: 0.6em; color: var(--muted); font-weight: 500; }

:where(.article) :is(h1, h2, h3) {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  text-wrap: balance;
}

:where(.article) h1 {
  margin: 0;
  font-size: clamp(2.125rem, 7vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* Wrap 1 to 4 words of the h1 in <span class="crayon-line"> to underline them in crayon. */
.crayon-line { position: relative; white-space: nowrap; }
.crayon-line::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.12em;
  height: 0.3em;
  background: var(--host);
  -webkit-mask: var(--crayon-stroke) center / 100% 100% no-repeat;
          mask: var(--crayon-stroke) center / 100% 100% no-repeat;
  pointer-events: none;
}

.dek {
  margin: 1.25rem 0 0;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.byline {
  margin: 1.75rem 0 2.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}
.byline span { padding: 0 0.35em; }

/* A small crayon in the host colour, drawn in CSS. */
.byline::before,
.margin-note::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 1.3rem;
  background: linear-gradient(var(--c-fill) 0 34%, var(--c-band) 34% 47%, var(--c-fill) 47% 88%, var(--c-band) 88% 93%, var(--c-fill) 93%);
  clip-path: polygon(50% 0, 100% 27%, 100% 100%, 0 100%, 0 27%);
  border-radius: 0 0 2px 2px;
}
.byline::before {
  --c-fill: var(--host-fill);
  --c-band: var(--host-band);
  margin-right: 0.6rem;
  vertical-align: -0.35rem;
  transform: rotate(-10deg);
}

/* ---------- The short answer ---------- */

.short-answer {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem 1.1rem;
  border: 2px solid var(--host);
  border-radius: 18px 8px 16px 10px / 10px 16px 8px 18px;
}
.short-answer-title {
  margin: 0 0 0.25rem;
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--host);
}
.short-answer p:last-child { margin: 0; }

/* ---------- Body copy ---------- */

:where(.article) p { margin: 0 0 1.15em; text-wrap: pretty; }

:where(.article) h2 {
  margin: 3rem 0 1rem;
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

:where(.article) h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* "Step 1", written in crayon above its h2. */
.option-label {
  margin: 3.5rem 0 0.25rem;
  font-family: var(--hand);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--host);
  transform: rotate(-2deg);
  transform-origin: left center;
}
.option-label + h2 { margin-top: 0; }

/* Jumping here from the contents swipes a crayon highlight under the heading. */
.article :is(h2, h3):target {
  background: linear-gradient(100deg, transparent 0.2em, color-mix(in srgb, var(--host-fill) 38%, transparent) 0.4em, color-mix(in srgb, var(--host-fill) 38%, transparent) calc(100% - 0.4em), transparent calc(100% - 0.2em)) no-repeat 0 85% / 100% 0.5em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .article :is(h2, h3):target { animation: crayon-swipe 0.6s ease-out 0.25s both; }
  @keyframes crayon-swipe { from { background-size: 0 0.5em; } }
}

:where(.article) :is(b, strong) { font-weight: 600; color: var(--ink); }

/* One <mark> per section: the phrase a skimmer should not miss. */
:where(.article) mark {
  color: inherit;
  padding: 0 0.15em;
  background: linear-gradient(100deg, transparent 0.15em, color-mix(in srgb, var(--host-fill) 34%, transparent) 0.3em, color-mix(in srgb, var(--host-fill) 30%, transparent) calc(100% - 0.3em), transparent calc(100% - 0.15em)) no-repeat 0 75% / 100% 62%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

:where(.article) a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
:where(.article) a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
:where(.article) a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

:where(.article) code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--ink);
}

/* Code blocks for tutorials: <pre><code>...</code></pre>. Long lines scroll inside the block. */
.article pre {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  tab-size: 2;
}
.article pre code { padding: 0; background: none; font-size: inherit; border-radius: 0; }

:where(.article) q { quotes: "\201C" "\201D"; font-style: italic; }

/* ---------- Margin notes ----------
   <span class="margin-note" data-crayon="purple">One short sentence.</span>
   inside a <p>, right after the sentence it comments on. One per section at most.
   Wide screens: in the right margin. Narrow screens: a small card in the text. */

.margin-note {
  --note: var(--purple);
  --c-fill: var(--purple-fill);
  --c-band: var(--purple-band);
  position: relative;
  display: block;
  margin: 0.9rem 0 0.4rem;
  padding: 0.7rem 1rem 0.8rem 2.2rem;
  background: color-mix(in srgb, var(--c-fill) 13%, var(--paper));
  border-radius: 14px 6px 12px 8px / 8px 12px 6px 14px;
  font-family: var(--hand);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--note);
  transform: rotate(-0.6deg);
}
.margin-note[data-crayon="red"] {
  --note: var(--red);
  --c-fill: var(--red-fill);
  --c-band: var(--red-band);
}
.margin-note::before { content: "Purple says"; display: block; font-size: 1.05rem; opacity: 0.8; }
.margin-note[data-crayon="red"]::before { content: "Red says"; }
.margin-note::after { position: absolute; left: 0.85rem; top: 0.8rem; transform: rotate(-10deg); }

@media (min-width: 78rem) {
  .margin-note {
    float: right;
    clear: right;
    width: 12rem;
    margin: 0.15rem -15rem 0.75rem 0;
    padding: 0 0 0 1.4rem;
    background: none;
    font-size: 1.15rem;
    transform: rotate(-1.5deg);
  }
  .margin-note::after { left: 0; top: 0.15rem; }
}

/* ---------- Table of contents ---------- */

.toc {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.9375rem;
}
.toc-title {
  margin: 0 0 0.4rem;
  font-family: var(--hand);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--host);
}
.toc ol { margin: 0; padding-left: 1.4rem; }
.toc li { margin: 0.3rem 0; padding-left: 0.25rem; }
.toc li::marker { font-family: var(--hand); font-size: 1.1em; color: var(--host); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- Note ---------- */

.note {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid color-mix(in srgb, var(--host) 35%, transparent);
  border-radius: 6px 14px 8px 12px / 12px 8px 14px 6px;
  background: var(--tint);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.note p { margin: 0; }

/* ---------- Good for / not so good for ---------- */

.verdict {
  display: grid;
  gap: 1px;
  margin: 1.75rem 0 0;
  border: 1px solid var(--tint-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--tint-rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.verdict > div { padding: 1rem 1.25rem; background: var(--tint); }
.verdict dt {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.verdict dd { margin: 0; color: var(--text); }
@media (min-width: 640px) { .verdict { grid-template-columns: 1fr 1fr; } }

/* ---------- Numbered steps: numbers circled in crayon ---------- */

.steps {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  margin: 0 0 1.1rem;
  padding-left: 3rem;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--host);
  border-radius: 52% 46% 55% 44% / 48% 55% 45% 52%;
  color: var(--host);
  font-family: var(--hand);
  font-size: 1.35rem;
  line-height: 1;
  transform: rotate(-6deg);
}
.steps li:nth-child(even)::before {
  border-radius: 46% 54% 44% 56% / 55% 45% 52% 48%;
  transform: rotate(5deg);
}

/* ---------- Comparison table ---------- */

.table-wrap { clear: both; margin: 1.5rem 0 1.75rem; }

.compare {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
}
.compare caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare th, .compare td {
  padding: 0.75rem 0.75rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.compare thead th {
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom-color: var(--accent); }
.compare tbody tr:last-child { background: var(--tint); }
.compare tbody tr:last-child th { padding-left: 0.75rem; }

@media (min-width: 900px) {
  .table-wrap { margin-left: -4rem; margin-right: -4rem; }
}

/* Small screens: each row becomes a card with labelled lines. */
@media (max-width: 639px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare, .compare caption, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr {
    margin: 0 0 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 12px;
  }
  .compare tbody tr:last-child { border-color: var(--accent); }
  .compare th, .compare td { padding: 0.2rem 0; border: 0; }
  .compare tbody tr:last-child th { padding-left: 0; }
  .compare tbody th { font-size: 0.9375rem; margin-bottom: 0.35rem; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------- Checklist: crayon ticks ---------- */

.checklist {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.checklist li {
  position: relative;
  margin: 0 0 1rem;
  padding-left: 2rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 3px solid var(--host);
  border-bottom: 3px solid var(--host);
  border-radius: 0 0 0 3px;
  transform: rotate(-48deg);
}
.checklist li:nth-child(even)::before { transform: rotate(-42deg) scaleX(1.08); }

/* ---------- Screenshot: taped to the page ----------
   <figure class="screenshot"><img src="images/x.png" alt="..." width="..." height="..."><figcaption>...</figcaption></figure> */

.screenshot {
  position: relative;
  margin: 2.25rem 0;
  padding: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 10px 24px -16px rgba(26, 22, 20, 0.35);
  transform: rotate(-0.5deg);
}
.screenshot::before,
.screenshot::after {
  content: "";
  position: absolute;
  top: -0.7rem;
  width: 4.5rem;
  height: 1.4rem;
  background: color-mix(in srgb, var(--host-fill) 30%, transparent);
}
.screenshot::before { left: 1.25rem; transform: rotate(-5deg); }
.screenshot::after { right: 1.5rem; transform: rotate(4deg); }
.screenshot img { display: block; width: 100%; height: auto; border-radius: 2px; }
.screenshot figcaption {
  padding: 0.6rem 0.25rem 0.1rem;
  font-family: var(--hand);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
}

/* ---------- Prompt to copy ----------
   <div class="prompt"><p class="prompt-title">Try this prompt</p><p>...</p></div> */

.prompt {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem 1.1rem;
  border: 2px dashed color-mix(in srgb, var(--host) 55%, transparent);
  border-radius: 12px;
  background: var(--code-bg);
}
.prompt-title {
  margin: 0 0 0.3rem;
  font-family: var(--hand);
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--host);
}
.prompt p:last-child { margin: 0; font-family: var(--mono); font-size: 0.9rem; line-height: 1.6; color: var(--ink); user-select: all; }

/* ---------- Questions people ask ----------
   <section class="faq"><h2 id="faq">Questions people ask</h2><details><summary>...</summary><p>...</p></details></section> */

.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.9rem 0;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  flex: none;
  width: 1rem;
  font-family: var(--hand);
  font-size: 1.5rem;
  line-height: 0.8;
  color: var(--host);
}
.faq details[open] summary::before { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.faq details p { padding-left: 1.75rem; }

/* ---------- Closing call to action ---------- */

.end-note {
  margin: 3rem 0;
  padding: 1.75rem;
  border-radius: 16px;
  background: var(--end-bg);
  color: var(--end-muted);
  font-family: var(--sans);
  font-size: 0.9375rem;
}
:where(.end-note) p { margin: 0 0 1em; }
.end-note-title {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--end-text);
}
.end-note-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1.25rem 0 0;
}
/* Optional last line: a nudge to try the comment toolbar on this page. */
.end-note-hint {
  margin: 1.25rem 0 0;
  font-family: var(--hand);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--end-accent);
  transform: rotate(-1deg);
  transform-origin: left center;
}
.end-note a { color: var(--end-accent); text-decoration-color: color-mix(in srgb, var(--end-accent) 50%, transparent); }
.end-note a:focus-visible { outline-color: var(--end-accent); }
.end-note .end-note-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--end-text);
  color: var(--end-bg);
  font-weight: 600;
  text-decoration: none;
}
.end-note .end-note-cta:hover { background: var(--end-accent); color: var(--end-bg); }

/* ---------- Sources ---------- */

.sources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}
.sources h2 {
  margin: 0 0 0.5rem;
  font-family: var(--hand);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--host);
}
.sources ul { margin: 0; padding-left: 1.1rem; }
.sources li { margin: 0.35rem 0; }

/* ---------- Larger screens ---------- */

@media (min-width: 640px) {
  .article-shell { padding: 64px 32px 112px; font-size: 1.1875rem; }
  .dek { font-size: 1.375rem; }
}

/* ---------- Notebook layer: the article as a sheet on the index's graph paper ----------
   From 961px up the sheet spans the same frame as the site header and the /blog index
   (92% of the window, at most 1465px of content), so its edges line up with the header's.
   The text stays a readable column inside it, with margin notes in a rail to its right. */

body:has(> .notebook),
.notebook {
  background-color: var(--desk);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  background-attachment: fixed;
}
/* When the page's body carries the grid (header and footer included, as on /blog), the wrapper does not repeat it. */
body:has(> .notebook) > .notebook { background: none; }

/* As on /blog: one grid line along the site header's bottom row (the header is 76px, 64px
   on phones) and the grid carries on from it. The header ignores article CSS, so the
   article draws the line just above its own top edge. */
body:has(> .notebook) { background-position: center 75px; }
body:has(> .notebook) > .notebook { box-shadow: 0 -1px 0 var(--grid-line); }
@media (max-width: 960px) {
  body:has(> .notebook) { background-position: center calc(63px + env(safe-area-inset-top, 0px)); }
}

.notebook { padding-inline: 12px; }

.notebook .article {
  --paper: var(--sheet);
  position: relative;
  max-width: none;
  padding: 2rem 1.25rem 1.5rem;
  background: var(--paper);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
    0 18px 36px -24px rgba(26, 22, 20, 0.4);
}

/* Every block keeps the reading column; the header and the comparison table get more room. */
.notebook .article > * { max-width: 42rem; margin-left: auto; margin-right: auto; }
.notebook .article > :is(.article-head, .table-wrap) { max-width: 58rem; }
.notebook .dek { max-width: 42rem; }

/* Two strips of tape hold the sheet down. */
.notebook .article::before,
.notebook .article::after {
  content: "";
  position: absolute;
  top: -0.7rem;
  width: 5.5rem;
  height: 1.5rem;
  background: color-mix(in srgb, var(--host-fill) 32%, transparent);
}
.notebook .article::before { left: 2rem; transform: rotate(-4deg); }
.notebook .article::after { right: 2rem; transform: rotate(3deg); }

/* Tips become sticky notes. */
.notebook .note {
  max-width: 32rem;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--host-fill) 22%, var(--paper));
  box-shadow: 0 12px 20px -14px rgba(26, 22, 20, 0.5);
  transform: rotate(0.8deg);
}

/* The checklist gets hand-drawn boxes with the crayon tick through them. */
.notebook .checklist li { padding-left: 2.4rem; }
.notebook .checklist li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid color-mix(in srgb, var(--ink) 65%, transparent);
  border-radius: 4px 6px 3px 7px / 6px 3px 7px 4px;
}
.notebook .checklist li::before { left: 0.35rem; top: 0.2em; width: 0.95rem; height: 0.5rem; }

@media (min-width: 640px) {
  .notebook { padding-inline: 24px; }
  .notebook .article { padding: 3rem 2.5rem 2.5rem; }
}

/* The site frame: the same width formula as the header and the /blog index.
   The text fills the sheet: one column up to 64rem with larger type, and margin notes
   become small cards on the right that the text wraps around, so no space sits reserved. */
@media (min-width: 961px) {
  .notebook { padding-inline: 0; font-size: 1.25rem; }
  .notebook .article { width: 92vw; max-width: 1465px; padding-top: 3.5rem; }
  .notebook .article > *,
  .notebook .article > :is(.article-head, .table-wrap) { max-width: 64rem; }
  .notebook .dek { max-width: 52rem; }
  .notebook .margin-note {
    float: right;
    clear: right;
    width: 15rem;
    margin: 0.35rem 0 1rem 2rem;
    padding: 0.7rem 1rem 0.8rem 2.2rem;
    background: color-mix(in srgb, var(--c-fill) 13%, var(--paper));
    font-size: 1.15rem;
    transform: rotate(1deg);
  }
  .notebook .margin-note::after { left: 0.85rem; top: 0.8rem; }
}

@media (min-width: 75rem) {
  .notebook { font-size: 1.3125rem; }
}