/**
 * Notes article: a page of ruled notebook paper.
 *
 * The body HTML uses a small vocabulary that this file styles:
 *   h2 / h3                 numbered section heads, sub-heads
 *   ul.dash, ul.bullets,    "- " lines, "• " lines, numbered steps
 *   ol.steps
 *   p.like / p.eg / p.note  analogies, examples, bracketed asides
 *   p.warn / p.arrow        red "!!" lines, "->" conclusions
 *   mark.tag.tag--<colour>  highlight boxes (blue green pink orange yellow)
 *   span.stamp              red oval stamp (TOP 6, REAL, MARKETING)
 *   aside.box.box--remember / --story / --info
 *   table.pairs             A -> B  note
 *   ol.ladder               ranked bars, --w per rung
 *   p.scale                 a row of tags as a scale
 *   figure.sketch           inline SVG with --sk-* fills
 *
 * Every colour is a --notes-* token defined on .notes and redefined for
 * dark mode, so the paper darkens with the page instead of staying a
 * cream slab; the tags keep their hue and drop their brightness.
 */
.notes {
  --notes-paper: #fbf8ef;
  --notes-ink: #1f1f21;
  --notes-muted: #6b6b6e;
  --notes-rule: #cfd9e6;
  --notes-margin: #e8a4a4;
  --notes-head: #1f5fa8;
  --notes-red: #d23b2f;
  --notes-orange: #d27b2f;
  --notes-green: #2f8f4e;
  --notes-eg: #2c6bb8;
  --notes-line: 32px;
  --tag-blue: #cfe4fb;
  --tag-green: #d4f2d9;
  --tag-pink: #fbd6df;
  --tag-orange: #fde3c6;
  --tag-yellow: #fbf2b8;
  --sk-blue: #cfe4fb;
  --sk-green: #d4f2d9;
  --sk-pink: #fbd6df;
  --sk-orange: #fde3c6;
  --sk-yellow: #fbf2b8;
  --sk-red: #d23b2f;
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--space-7) var(--space-6) var(--space-6) 64px;
  color: var(--notes-ink);
  background-color: var(--notes-paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--notes-line) - 1px),
    var(--notes-rule) calc(var(--notes-line) - 1px),
    var(--notes-rule) var(--notes-line)
  );
  background-position: 0 var(--space-7);
  border-radius: var(--radius-m);
  box-shadow: 0 1px 0 rgb(0 0 0 / 6%), 0 12px 32px rgb(0 0 0 / 8%);
  font-family: var(--notes-body-font, var(--font-body));
  font-size: 18px;
  line-height: var(--notes-line);
}

/* The double red margin line. */
.notes::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 40px;
  width: 0;
  border-left: 1px solid var(--notes-margin);
  border-right: 1px solid var(--notes-margin);
  padding-left: 3px;
  pointer-events: none;
}

:root[data-theme='dark'] .notes,
.notes.is-dark {
  --notes-paper: #1c1d24;
  --notes-ink: #ececf0;
  --notes-muted: #9c9ca6;
  --notes-rule: #2a2c38;
  --notes-margin: #6e3a3a;
  --notes-head: #8ab8f5;
  --notes-red: #ff7a6e;
  --notes-orange: #f0a35c;
  --notes-green: #7ad096;
  --notes-eg: #8ab8f5;
  --tag-blue: #24405f;
  --tag-green: #214a2e;
  --tag-pink: #5a2a37;
  --tag-orange: #5b3a1c;
  --tag-yellow: #55501f;
  --sk-blue: #2f4f74;
  --sk-green: #2b5e3b;
  --sk-pink: #6b3242;
  --sk-orange: #6b4522;
  --sk-yellow: #6a6328;
  --sk-red: #ff7a6e;
  box-shadow: 0 1px 0 rgb(255 255 255 / 4%), 0 12px 32px rgb(0 0 0 / 40%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .notes {
    --notes-paper: #1c1d24;
    --notes-ink: #ececf0;
    --notes-muted: #9c9ca6;
    --notes-rule: #2a2c38;
    --notes-margin: #6e3a3a;
    --notes-head: #8ab8f5;
    --notes-red: #ff7a6e;
    --notes-orange: #f0a35c;
    --notes-green: #7ad096;
    --notes-eg: #8ab8f5;
    --tag-blue: #24405f;
    --tag-green: #214a2e;
    --tag-pink: #5a2a37;
    --tag-orange: #5b3a1c;
    --tag-yellow: #55501f;
    --sk-blue: #2f4f74;
    --sk-green: #2b5e3b;
    --sk-pink: #6b3242;
    --sk-orange: #6b4522;
    --sk-yellow: #6a6328;
    --sk-red: #ff7a6e;
    box-shadow: 0 1px 0 rgb(255 255 255 / 4%), 0 12px 32px rgb(0 0 0 / 40%);
  }
}

@media screen and (max-width: 749px) {
  .notes {
    --notes-line: 30px;
    font-size: 17px;
    padding: var(--space-6) var(--space-4) var(--space-5) 44px;
    border-radius: 0;
    margin-inline: calc(-1 * var(--page-gutter, 16px));
  }
  .notes::before { left: 26px; }
}

/* ------------------------------------------------------------------ head */
.notes__head {
  margin-bottom: var(--notes-line);
}

.notes__series {
  margin: 0;
  color: var(--notes-muted);
  font-family: var(--notes-body-font, var(--font-body));
  font-style: italic;
}

.notes__series a {
  color: inherit;
  text-decoration: none;
}

.notes__series a:hover { text-decoration: underline; }

.notes__number::before { content: ' - '; }

.notes__title {
  margin: 0;
  font-family: var(--notes-heading-font, var(--font-heading));
  font-weight: 400;
  font-size: clamp(34px, 5vw, 46px);
  line-height: calc(var(--notes-line) * 2);
  text-align: center;
  color: var(--notes-ink);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.notes__meta {
  margin: 0;
  text-align: center;
  color: var(--notes-muted);
}

/* ------------------------------------------------------------------ body */
.notes__body > * { margin: 0; }
.notes__body > * + * { margin-top: 0; }
.notes__body > h2 { margin-top: var(--notes-line); }
.notes__body > aside,
.notes__body > figure,
.notes__body > table,
.notes__body > ol.ladder { margin-block: var(--notes-line); }

.notes__body h2 {
  font-family: var(--notes-heading-font, var(--font-heading));
  font-weight: 400;
  font-size: 27px;
  line-height: var(--notes-line);
  color: var(--notes-head);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

.notes__body h3 {
  font-family: var(--notes-body-font, var(--font-body));
  font-weight: 700;
  font-style: italic;
  font-size: 19px;
  line-height: var(--notes-line);
  color: var(--notes-head);
}

.notes__body h4 {
  font-family: var(--notes-body-font, var(--font-body));
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  line-height: var(--notes-line);
  margin: 0;
}

.notes__body p,
.notes__body li {
  font-size: inherit;
  line-height: var(--notes-line);
}

.notes__body ul,
.notes__body ol {
  padding-left: 0;
  list-style: none;
}

.notes__body ul.dash > li::before {
  content: '-';
  margin-right: 0.5em;
  color: var(--notes-muted);
}

.notes__body ul.bullets > li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.notes__body ul.bullets > li::before {
  content: '\2022';
  display: inline-block;
  width: 1.2em;
  text-indent: 0;
  color: var(--notes-muted);
}

.notes__body ul.bullets > li > p,
.notes__body ol.steps > li > p {
  text-indent: 0;
  padding-left: 1.6em;
}

.notes__body ol.steps {
  counter-reset: step;
}

.notes__body ol.steps > li {
  counter-increment: step;
  padding-left: 1.8em;
  text-indent: -1.8em;
}

.notes__body ol.steps > li::before {
  content: counter(step) '.';
  display: inline-block;
  width: 1.8em;
  text-indent: 0;
  font-weight: 700;
}

.notes__body p.like,
.notes__body p.eg,
.notes__body p.note {
  padding-left: 1.6em;
  font-style: italic;
}

.notes__body p.like { color: var(--notes-muted); }
.notes__body p.eg { color: var(--notes-eg); }
.notes__body p.note { color: var(--notes-muted); font-size: 0.92em; }
.notes__body p.warn { color: var(--notes-red); font-weight: 700; }
.notes__body p.arrow { color: var(--notes-head); padding-left: 1.6em; }

.notes__body a { color: var(--notes-eg); }
.notes__body b, .notes__body strong { font-weight: 700; }

/* ------------------------------------------------------------------ tags */
.notes .tag {
  display: inline;
  padding: 0 0.3em;
  border: 1px solid color-mix(in srgb, var(--notes-ink) 45%, transparent);
  border-radius: 2px;
  background-color: var(--tag-blue);
  color: var(--notes-ink);
  font-weight: 700;
  font-style: italic;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.notes .tag--green { background-color: var(--tag-green); }
.notes .tag--pink { background-color: var(--tag-pink); }
.notes .tag--orange { background-color: var(--tag-orange); }
.notes .tag--yellow { background-color: var(--tag-yellow); }

.notes .legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4em 0.6em;
  color: var(--notes-muted);
  font-style: italic;
}

.notes .stamp {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0 0.55em;
  border: 1.5px solid var(--notes-red);
  border-radius: 999px;
  color: var(--notes-red);
  font-size: 0.72em;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-indent: 0;
  vertical-align: 0.12em;
  transform: rotate(-3deg);
}

/* ------------------------------------------------------------------ boxes */
.notes__body .box {
  padding: calc(var(--notes-line) / 2 - 1px) var(--space-4);
  border: 1.5px solid var(--notes-red);
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--notes-paper) 70%, transparent);
}

.notes__body .box > h4 { color: var(--notes-red); }
.notes__body .box--story { border-color: var(--notes-orange); }
.notes__body .box--story > h4 { color: var(--notes-orange); }
.notes__body .box--info { border-color: var(--notes-head); }
.notes__body .box--info > h4 { color: var(--notes-head); }

/* ------------------------------------------------------------------ pairs */
.notes__body table.pairs {
  border-collapse: collapse;
  width: 100%;
  font-size: inherit;
}

.notes__body table.pairs td {
  padding: 0 0.5em 0 0;
  vertical-align: baseline;
  line-height: var(--notes-line);
  border: 0;
}

.notes__body table.pairs td:first-child { white-space: nowrap; }

.notes__body table.pairs td.arrow {
  width: 1px;
  white-space: nowrap;
  color: var(--notes-muted);
}

.notes__body table.pairs td.arrow::before,
.notes__body table.pairs td.arrow::after {
  content: '\2014';
}

.notes__body table.pairs td.note {
  color: var(--notes-muted);
  font-style: italic;
  font-size: 0.92em;
}

@media screen and (max-width: 749px) {
  .notes__body table.pairs td:first-child { white-space: normal; }
  .notes__body table.pairs td.arrow::before { content: none; }
}

/* ------------------------------------------------------------------ ladder */
.notes__body ol.ladder {
  position: relative;
  padding-right: 48px;
}

.notes__body ol.ladder::after {
  content: 'better \2191';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--notes-red);
  font-weight: 700;
  font-style: italic;
  font-size: 0.85em;
}

.notes__body ol.ladder > li {
  --w: 100%;
  width: var(--w);
  min-width: 40%;
  margin-bottom: 4px;
  padding: 0 0.6em;
  line-height: calc(var(--notes-line) - 4px);
  background-color: var(--tag-yellow);
  border-radius: 2px;
  box-sizing: border-box;
}

.notes__body ol.ladder > li:nth-child(1) { background-color: var(--tag-orange); }
.notes__body ol.ladder > li:nth-child(2) { background-color: var(--tag-orange); }
.notes__body ol.ladder > li:nth-child(3),
.notes__body ol.ladder > li:nth-child(4) { background-color: var(--tag-blue); }

/* ------------------------------------------------------------------ scale */
.notes__body p.scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.8em;
}

/* ------------------------------------------------------------------ sketch */
.notes__body figure.sketch {
  margin-inline: 0;
  text-align: center;
}

.notes__body figure.sketch svg {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-inline: auto;
  font-family: var(--notes-body-font, var(--font-body));
  font-style: italic;
  color: var(--notes-ink);
  /* Hand-placed labels run past the viewBox edge now and then; clipping
     them mid-word is worse than letting them spill into the margin. */
  overflow: visible;
}

.notes__body figure.sketch text { fill: currentColor; paint-order: stroke; stroke: var(--notes-paper); stroke-width: 4px; stroke-linejoin: round; }
.notes__body figure.sketch .sk-blue { fill: var(--notes-head); }
.notes__body figure.sketch .sk-red { fill: var(--notes-red); }
.notes__body figure.sketch .sk-green { fill: var(--notes-green); }
.notes__body figure.sketch .sk-orange { fill: var(--notes-orange); }
.notes__body figure.sketch .sk-pink { fill: var(--notes-red); opacity: 0.8; }

.notes__body figure.sketch figcaption {
  color: var(--notes-red);
  font-style: italic;
  line-height: var(--notes-line);
}

/* ------------------------------------------------------------------ foot */
.notes__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: calc(var(--notes-line) * 2);
  padding-top: calc(var(--notes-line) / 2);
  border-top: 1px solid var(--notes-rule);
  color: var(--notes-muted);
  font-style: italic;
}

.notes__foot a { color: inherit; }

/* ------------------------------------------------------------------ series */
.article-series {
  max-width: 880px;
  margin-inline: auto;
}

.article-series__heading {
  margin: 0 0 var(--space-4);
}

.article-series__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: 2px;
}

.article-series__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  background-color: color-mix(in srgb, var(--color-ink) 3%, transparent);
}

.article-series__item.is-current {
  background-color: color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.article-series__num {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}

.article-series__title {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}

a.article-series__title:hover { text-decoration: underline; }

.article-series__excerpt {
  grid-column: 2;
  color: var(--color-muted);
}

.article-series__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.article-series__nav .btn { max-width: 100%; }

/* ================================================================== */
/* Store skin                                                          */
/*                                                                     */
/* The notes read as a notebook page - cream ruled paper, a red margin,*/
/* handwriting - which looked like a different shop inside this one.   */
/* This layer keeps every piece of the body vocabulary (tags, stamps,  */
/* boxes, ladders, sketches) and redraws it in the store's own UI: the */
/* page ground and type, brand purple for heads and numbers, rounded   */
/* cards for the boxes, soft chips for the tags. The notebook rules    */
/* above stay underneath, so this block is the one place to change.   */
/* ================================================================== */
.notes,
:root[data-theme='dark'] .notes {
  --notes-paper: transparent;
  --notes-ink: var(--color-ink);
  --notes-muted: var(--color-muted);
  --notes-rule: var(--color-line);
  --notes-head: var(--color-ink);
  --notes-eg: var(--color-brand);
  --notes-line: 1.75em;
  --notes-heading-font: var(--font-heading);
  --notes-body-font: var(--font-body);
  --tag-blue: color-mix(in srgb, #3b82f6 18%, transparent);
  --tag-green: color-mix(in srgb, #22c55e 18%, transparent);
  --tag-pink: color-mix(in srgb, #ec4899 18%, transparent);
  --tag-orange: color-mix(in srgb, #f97316 20%, transparent);
  --tag-yellow: color-mix(in srgb, #eab308 22%, transparent);

  max-width: 760px;
  padding: var(--space-6) 0 var(--space-7);
  background-image: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 17px;
  line-height: 1.75;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .notes {
    --notes-paper: transparent;
    --notes-ink: var(--color-ink);
    --notes-muted: var(--color-muted);
    --notes-rule: var(--color-line);
    --notes-head: var(--color-ink);
    --notes-eg: var(--color-brand);
    box-shadow: none;
  }
}

.notes::before {
  display: none;
}

@media screen and (max-width: 749px) {
  .notes {
    padding: var(--space-5) 0 var(--space-6);
    margin-inline: 0;
    font-size: 16px;
  }
}

.notes__head {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}

.notes__series {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.notes__series a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-brand) 14%, transparent);
  color: var(--color-ink);
}

.notes__number::before {
  content: '';
}

.notes__number {
  margin-left: 6px;
  color: var(--color-brand);
}

.notes__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
  text-wrap: balance;
}

.notes__body > * + * {
  margin-top: var(--space-4);
}

.notes__body > h2 {
  margin-top: var(--space-8);
}

.notes__body h2 {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-brand);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
}

.notes__body h3,
.notes__body h4 {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}

.notes__body p,
.notes__body li {
  line-height: 1.75;
}

.notes__body p.like,
.notes__body p.eg,
.notes__body p.note {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-ink) 4%, transparent);
  font-style: normal;
}

.notes__body p.eg {
  border-left: 3px solid var(--color-brand);
  color: var(--color-ink);
}

.notes__body p.warn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, #ef4444 12%, transparent);
  color: var(--color-ink);
}

.notes__body p.arrow {
  color: var(--color-ink);
  font-weight: 600;
}

.notes__body ul.bullets > li::before,
.notes__body ul.dash > li::before,
.notes__body ol.steps > li::before {
  color: var(--color-brand);
}

.notes__body a {
  color: var(--color-ink);
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.notes .tag {
  padding: 0.1em 0.45em;
  border: 0;
  border-radius: 6px;
  font-style: normal;
  font-weight: 600;
}

.notes .stamp {
  display: inline-block;
  padding: 2px 10px;
  border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-pill);
  color: var(--color-brand);
  font-family: var(--font-body);
  font-size: 0.72em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: none;
}

.notes__body .box,
.notes__body .box--story,
.notes__body .box--info {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-ink) 3%, transparent);
}

.notes__body .box > h4,
.notes__body .box--story > h4,
.notes__body .box--info > h4 {
  margin-bottom: var(--space-2);
  color: var(--color-brand);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.notes__body ol.ladder > li {
  border-radius: 6px;
}

.notes__body figure.sketch {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
}

.notes__body figure.sketch text {
  stroke: var(--color-bg);
}

.notes__body figure.sketch figcaption {
  color: var(--color-muted);
  font-style: normal;
}

.notes__foot {
  border-top-color: var(--color-line);
}

/* Reading progress across the top of the window: the notes are long, and
   the bar says how much is left. Scroll-driven where the browser supports
   it; elsewhere it simply is not drawn. */
@supports (animation-timeline: scroll()) {
  .notes::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 3px;
    background-color: var(--color-brand);
    transform-origin: 0 50%;
    animation: notes-progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes notes-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}