/* The blog's look: one book page on a dark ground, in two looks (docs/superpowers/specs/
   2026-10-10-drawn-blog-design.md). Dark is bone and amber lines on near-black; Light is the same
   drawings in dark ink on cream paper. The site's header and footer and the ground round the page
   stay dark in both. This file holds the look itself: the type, the colours, the ground, the
   switch, the page and its drawn edges, the running head and one line of a list. The home page,
   the post and the search and missing pages add their own files on top (src/blog/home/, post/,
   search/, missing/). Class names all start with blog- because the site has many short ones.

   The numbers and colours below were drawn once on the approved reference pages and are copied
   from there, so a change here is a change to what Azhar approved. */

/* ----------------------------------------------------------------------------- type */

/* Newsreader (SIL Open Font License, licence beside the files), self-hosted: the blog loads
   nothing from another server. One variable file per style, with weight and optical size. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}

/* ----------------------------------------------------------------------------- the two looks */

/* The colours have plain names here. The reference pages in the design scratch folder call them
   tx (--ink), mu (--ink-soft), ac (--accent), ach (--accent-lit), cut (--rule), cutE
   (--rule-strong), outline (--cut), stack (--stack), foldL (--fold), tick (--tick), bulbfill
   (--bulb-fill) and hatch-b (--hatch-ring). */

/* Dark first. A pick the reader made wins (the radios in the switch, or before they are ticked the
   pick /blog/look.js found stored and wrote on <html> as data-blog-look); until then the device
   decides (prefers-color-scheme); with scripts off the radios still work on the page being read.
   The light colours are written twice, once for a pick and once for the device, and the two
   blocks must stay the same. */
.blog-book {
  color-scheme: dark;
  --page: #0a0806;
  --ink: #efe9dc;
  --ink-soft: #a89e8a;
  --accent: #dd9a33;
  --accent-lit: #f3b45a;
  /* hairlines and the hand-cut rules; --rule-strong is the one under a search box */
  --rule: rgba(239, 233, 220, 0.4);
  --rule-strong: rgba(239, 233, 220, 0.62);
  /* the drawn edge strokes round the page */
  --cut: rgba(239, 233, 220, 0.36);
  --stack: rgba(239, 233, 220, 0.34);
  --fold: rgba(239, 233, 220, 0.5);
  --tick: rgba(239, 233, 220, 0.34);
  /* the lure's line, the bulb's fill, and the hatching on the bulb */
  --lure: #efe9dc;
  --bulb-fill: #0a0806;
  --hatch: #dd9a33;
  --hatch-ring: rgba(239, 233, 220, 0.55);
  /* the cream page is cut to a hand-drawn outline, written once here; the dark page is a plain
     rectangle, which is the ground's colour, so it needs no cut */
  --paper-cut: none;
  --paper-cut-drawn: polygon(
      0.55px 0.55px, 3.57% 0.7px, 7.14% 0.72px, 10.71% 1.37px, 14.29% 0.65px, 17.86% 0.16px,
      21.43% 0.34px, 25% 0.44px, 28.57% 0.95px, 32.14% 1.04px, 35.71% 1.45px, 39.29% 1.93px,
      42.86% 2px, 46.43% 2px, 50% 1.53px, 53.57% 1.74px, 57.14% 1.04px, 60.71% 1.61px,
      64.29% 1.52px, 67.86% 2px, 71.43% 2px, 75% 2px, 78.57% 1.48px, 82.14% 1.03px, 85.71% 1.89px,
      89.29% 2px, 92.86% 2px, 96.43% 2px, calc(100% - 1.43px) 1.43px, calc(100% - 1.68px) 4.55%,
      calc(100% - 1.55px) 9.09%, calc(100% - 1.18px) 13.64%, calc(100% - 0.77px) 18.18%,
      calc(100% - 0.1px) 22.73%, calc(100% - 0.38px) 27.27%, calc(100% - 0.56px) 31.82%,
      calc(100% - 0.48px) 36.36%, calc(100% - 0.52px) 40.91%, calc(100% - 0.5px) 45.45%,
      calc(100% - 1.26px) 50%, calc(100% - 0.83px) 54.55%, calc(100% - 0.8px) 59.09%,
      calc(100% - 0.82px) 63.64%, calc(100% - 1.41px) 68.18%, calc(100% - 1.97px) 72.73%,
      calc(100% - 2px) 77.27%, calc(100% - 2px) 81.82%, calc(100% - 2px) 86.36%,
      calc(100% - 1.67px) 90.91%, calc(100% - 2px) 95.45%, calc(100% - 1.58px) calc(100% - 1.58px),
      96.43% calc(100% - 0.81px), 92.86% calc(100% - 1.66px), 89.29% calc(100% - 1.63px),
      85.71% calc(100% - 1.66px), 82.14% calc(100% - 0.9px), 78.57% calc(100% - 1.04px),
      75% calc(100% - 1.48px), 71.43% calc(100% - 0.73px), 67.86% calc(100% - 0.74px),
      64.29% calc(100% - 0.56px), 60.71% calc(100% - 0.11px), 57.14% calc(100% - 0.1px),
      53.57% calc(100% - 0.39px), 50% calc(100% - 0.39px), 46.43% calc(100% - 0.24px),
      42.86% calc(100% - 0.42px), 39.29% calc(100% - 0.56px), 35.71% calc(100% - 0.81px),
      32.14% calc(100% - 0.43px), 28.57% calc(100% - 1.28px), 25% calc(100% - 1.14px),
      21.43% calc(100% - 0.78px), 17.86% calc(100% - 0.1px), 14.29% calc(100% - 0.1px),
      10.71% calc(100% - 0.2px), 7.14% calc(100% - 0.1px), 3.57% calc(100% - 0.25px),
      1.17px calc(100% - 1.17px), 2px 95.45%, 2px 90.91%, 1.65px 86.36%, 2px 81.82%, 2px 77.27%,
      2px 72.73%, 2px 68.18%, 1.66px 63.64%, 0.89px 59.09%, 0.94px 54.55%, 1.02px 50%,
      0.79px 45.45%, 0.1px 40.91%, 0.58px 36.36%, 0.62px 31.82%, 0.67px 27.27%, 0.45px 22.73%,
      1.16px 18.18%, 0.47px 13.64%, 0.1px 9.09%, 0.11px 4.55%
    );

  color: var(--ink);
  font: 400 16px/normal var(--font-text);
  /* The site smooths all type with the lighter "antialiased" setting, which thins pale type on a
     dark ground on a Mac. The approved reference pages were drawn without it, so the book page
     goes back to the browser's own. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.blog-book:has(#blog-look-light:checked),
:root[data-blog-look="light"] .blog-book:not(:has(#blog-look-dark:checked)) {
  color-scheme: light;
  --page: #efe6d3;
  --ink: #1d1710;
  --ink-soft: #5c5244;
  --accent: #8a5410;
  --accent-lit: #6d420c;
  --rule: #b9ab8f;
  --rule-strong: rgba(29, 23, 16, 0.62);
  --cut: rgba(29, 23, 16, 0.3);
  --stack: #cfc3a8;
  --fold: rgba(29, 23, 16, 0.5);
  --tick: rgba(29, 23, 16, 0.24);
  --lure: #1d1710;
  --bulb-fill: #efe6d3;
  --hatch: #8a5410;
  --hatch-ring: rgba(29, 23, 16, 0.55);
  --paper-cut: var(--paper-cut-drawn);
}
@media (prefers-color-scheme: light) {
  :root:not([data-blog-look]) .blog-book:not(:has(.blog-switch input:checked)) {
    color-scheme: light;
    --page: #efe6d3;
    --ink: #1d1710;
    --ink-soft: #5c5244;
    --accent: #8a5410;
    --accent-lit: #6d420c;
    --rule: #b9ab8f;
    --rule-strong: rgba(29, 23, 16, 0.62);
    --cut: rgba(29, 23, 16, 0.3);
    --stack: #cfc3a8;
    --fold: rgba(29, 23, 16, 0.5);
    --tick: rgba(29, 23, 16, 0.24);
    --lure: #1d1710;
    --bulb-fill: #efe6d3;
    --hatch: #8a5410;
    --hatch-ring: rgba(29, 23, 16, 0.55);
    --paper-cut: var(--paper-cut-drawn);
  }
}

/* Where a drawing differs by look, the markup carries both copies, marked blog-dark and
   blog-light, each loading="lazy": the copy that is hidden has no box, so it is never fetched. */
.blog-book:has(#blog-look-dark:checked) .blog-light,
.blog-book:has(#blog-look-light:checked) .blog-dark,
:root[data-blog-look="dark"] .blog-book:not(:has(#blog-look-light:checked)) .blog-light,
:root[data-blog-look="light"] .blog-book:not(:has(#blog-look-dark:checked)) .blog-dark {
  display: none !important;
}
@media not (prefers-color-scheme: light) {
  :root:not([data-blog-look]) .blog-book:not(:has(.blog-switch input:checked)) .blog-light {
    display: none !important;
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-blog-look]) .blog-book:not(:has(.blog-switch input:checked)) .blog-dark {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------- the header and footer stay dark */

/* The page behind the header, the book and the footer is the site's own near-black, so the light
   behind the rest of the site does not show through the blog. The header takes its place in the
   page instead of lying over the first screen, so the ground starts right under it at any width. */
body:has(.blog-book) .page {
  background: var(--abyss);
}
body:has(.blog-book) .site-header {
  position: relative;
}

/* ----------------------------------------------------------------------------- shared small things */

.blog-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Defaults for everything inside the book, at the lowest weight so any component's own rule wins. */
:where(.blog-book) a {
  color: var(--ink);
  text-decoration: none;
}
:where(.blog-book) a:hover {
  color: var(--accent-lit);
}
/* a picture never runs wider than the page (a post's own picture is as wide as the writer made it) */
:where(.blog-book) img {
  max-width: 100%;
  height: auto;
}
.blog-book :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.blog-book input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

/* Every drawn line is a stretched box with a stroke that does not scale; the data is in
   book-lines.ts and the colour is set per place below. */
.blog-edge path,
.blog-stack path,
.blog-binding path,
.blog-running-rule path,
.blog-switch-underline path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ----------------------------------------------------------------------------- the ground and the switch */

/* The ground: dark in both looks. The switch sits in its top 40px, above the page's top-right
   corner (a negative margin pulls the row up into the padding). */
.blog-ground {
  padding: 40px clamp(24px, 3vw, 40px);
  background: #0a0806;
  overflow-x: clip;
}
.blog-switch-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 1360px;
  height: 40px;
  margin: -40px auto 0;
}
.blog-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin: 0 -10px 0 0;
  padding: 0;
  border: 0;
}
.blog-switch-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  color: #a89e8a;
  font: 500 14px/1 var(--font-text);
  cursor: pointer;
}
.blog-switch-label:hover {
  color: #f3b45a;
}
.blog-switch input:checked + .blog-switch-label {
  color: #efe9dc;
}
/* the switch is on the dark ground in both looks, so its ring is the dark look's amber */
.blog-switch input:focus-visible + .blog-switch-label {
  outline: 2px solid #dd9a33;
  outline-offset: 0;
}
.blog-swatch {
  display: block;
  width: 18px;
  height: 14px;
  overflow: visible;
}
.blog-swatch path {
  stroke-width: 1;
  stroke-linejoin: round;
}
.blog-swatch-dark path {
  fill: #0a0806;
  stroke: rgba(239, 233, 220, 0.62);
}
.blog-swatch-light path {
  fill: #efe6d3;
  stroke: #efe6d3;
}
/* the underline marks the look in use */
.blog-switch-underline {
  position: absolute;
  bottom: 9px;
  left: 36px;
  display: none;
  width: calc(100% - 44px);
  height: 6px;
  overflow: visible;
}
.blog-switch-underline path {
  stroke: #dd9a33;
}
.blog-switch input:checked + .blog-switch-label .blog-switch-underline {
  display: block;
}
/* a pick stored on this browser, before look.js ticks its radio */
:root[data-blog-look="dark"] .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-dark"],
:root[data-blog-look="light"] .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-light"] {
  color: #efe9dc;
}
:root[data-blog-look="dark"] .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-dark"] .blog-switch-underline,
:root[data-blog-look="light"] .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-light"] .blog-switch-underline {
  display: block;
}
/* with nothing picked, it marks the look the device asks for (dark when the device has no say) */
@media not (prefers-color-scheme: light) {
  :root:not([data-blog-look]) .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-dark"] {
    color: #efe9dc;
  }
  :root:not([data-blog-look]) .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-dark"] .blog-switch-underline {
    display: block;
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-blog-look]) .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-light"] {
    color: #efe9dc;
  }
  :root:not([data-blog-look]) .blog-book:not(:has(.blog-switch input:checked)) label[for="blog-look-light"] .blog-switch-underline {
    display: block;
  }
}
@media (max-width: 599px) {
  .blog-ground {
    padding: 8px;
  }
  .blog-switch-row {
    max-width: 420px;
    height: 48px;
    margin: -8px auto 0;
  }
}

/* ----------------------------------------------------------------------------- the page */

/* One full-width page: a hand-cut outline, page edges stacked down the right and along the
   bottom, a ruled binding down the left. From 1100px it is up to 1360px wide; from 600 to 1099 it
   is one column of 760px at most; under 600 it is the phone page. */
.blog-page {
  position: relative;
  box-sizing: border-box;
  max-width: 1360px;
  margin: 0 auto;
  padding: 56px 72px 64px 96px;
  isolation: isolate;
}
/* The paper. Light cuts it to the hand-cut outline; dark leaves it a plain rectangle. */
.blog-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--page);
  clip-path: var(--paper-cut);
}
.blog-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.blog-edge {
  position: absolute;
  display: block;
  overflow: visible;
}
.blog-edge path {
  stroke: var(--cut);
  stroke-width: 1.4;
}
.blog-edge-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
}
.blog-edge-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
}
/* The two upright edges are drawn on a box stretched over the whole page, so the few units they
   overshoot at each end would grow with the page: on a post (thousands of pixels tall) the line
   poked 35px above the page, behind the Dark / Light switch. The box here is 7px taller than the
   page at each end and clips to itself (sideways it is free, for the line's wobble), so the
   overshoot is 7px however tall the page is, as on the reference. */
.blog-edge-left,
.blog-edge-right {
  top: -7px;
  width: 6px;
  height: calc(100% + 14px);
  clip-path: inset(0 -4px);
}
.blog-edge-left {
  left: 0;
}
.blog-edge-right {
  right: 0;
}
.blog-stack-right {
  position: absolute;
  top: 0;
  left: 100%;
  width: 24px;
  height: 100%;
  overflow: hidden;
}
.blog-stack-bottom {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 24px;
  overflow: hidden;
}
.blog-stack {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.blog-stack-right .blog-stack {
  width: 24px;
  height: 100%;
}
.blog-stack-bottom .blog-stack {
  width: 100%;
  height: 24px;
}
.blog-stack path {
  stroke: var(--stack);
}
.blog-binding {
  position: absolute;
  top: 0;
  left: 26px;
  width: 44px;
  height: 100%;
  overflow: hidden;
}
.blog-binding svg {
  display: block;
  width: 44px;
  height: 100%;
  overflow: hidden;
}
.blog-binding-ticks {
  stroke: var(--tick);
  stroke-width: 1;
}
.blog-binding-fold {
  stroke: var(--fold);
}
@media (min-width: 600px) and (max-width: 1099px) {
  .blog-page {
    padding: 48px 40px 56px 64px;
  }
  .blog-page > *:not(.blog-deco) {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }
  .blog-binding {
    left: 20px;
  }
}
@media (max-width: 599px) {
  .blog-page {
    max-width: 420px;
    padding: 28px 18px 44px 36px;
  }
  .blog-stack-right {
    width: 8px;
  }
  .blog-stack-bottom {
    height: 14px;
  }
  .blog-binding {
    left: 0;
  }
  .blog-binding svg {
    transform: scaleX(0.75);
    transform-origin: 0 0;
  }
}

/* ----------------------------------------------------------------------------- the running head */

/* The small capitals line at the top of the page, with the hand-cut rule under it and the
   amber start under its left end. It repeats what the page already says, so it is hidden from
   screen readers. A long right-hand label stays on one line and is cut with an ellipsis. */
.blog-running-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  height: 28px;
}
.blog-running-label {
  margin: 0;
  color: var(--ink-soft);
  font: 600 12px/1 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.blog-running-label:first-child {
  flex: none;
}
.blog-running-label:last-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-running-number {
  font-family: var(--font-data);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.blog-running-rule {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.blog-running-rule svg {
  display: block;
  width: 100%;
  height: 6px;
  overflow: visible;
}
.blog-running-rule path {
  stroke: var(--rule);
}
.blog-running-rule .blog-running-start {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 84px;
}
.blog-running-rule .blog-running-start path {
  stroke: var(--accent);
}

/* ----------------------------------------------------------------------------- one line of a list */

/* A post as one line: the title, a dotted leader, the date. With a summary, the summary under
   it in italic. The title's link is stretched over the whole row, so the row is one target and
   one tab stop. When the row is narrow (a phone), the title takes a line of its own and the
   leader and date follow on the next. A numbered row, further down, adds a column for the number. */
.blog-row {
  position: relative;
  padding: 12px 0;
  container-type: inline-size;
}
.blog-row-with-summary {
  padding: 14px 0 16px;
}
.blog-row-line {
  display: flex;
  align-items: baseline;
  align-items: last baseline;
  gap: 10px;
}
/* a long unbroken word (an address pasted into a title) breaks rather than running off the page */
.blog-row-title {
  min-width: 0;
  margin: 0;
  font: 400 22px/1.22 "Newsreader", Georgia, serif;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.blog-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blog-row:hover .blog-row-link {
  color: var(--accent-lit);
}
.blog-row-link:focus-visible {
  outline: none;
}
.blog-row-link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}
.blog-draft-tag {
  flex: none;
  padding: 2px 6px 1px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font: 600 11px/1.2 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.blog-leader {
  flex: 1 1 18px;
  min-width: 14px;
  height: 6px;
  overflow: visible;
}
.blog-leader path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 0 6.3 0 5.6 0 6.8 0 5.9;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}
.blog-row-date {
  flex: none;
  color: var(--ink-soft);
  font: 500 14px/1 var(--font-data);
  white-space: nowrap;
}
.blog-row-summary {
  max-width: 900px;
  margin: 8px 0 0;
  /* a long word (an address pasted into a summary) breaks rather than running off the page */
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font: italic 400 19px/1.5 "Newsreader", Georgia, serif;
}
@container (max-width: 400px) {
  .blog-row-line {
    flex-wrap: wrap;
  }
  .blog-row-title {
    flex: 1 1 100%;
  }
}

/* A numbered row (the home page's Contents): the post's number in the mono face in a column at
   the left, and the title, summary and anything after them in the column beside it. The number
   starts level with the title's first line. Its small top space, which depends on the size of the
   title, is set by the page that uses it (home/blog-home.css), because aligning it by baseline
   would put it level with the title's last line when the title wraps (the date is aligned to
   that line). The title link's stretch still covers the whole row, the number included, because
   the number is inside the row. Under 600px the number is above the title. */
.blog-row-numbered {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding: 20px 0 22px;
}
.blog-row-numbered > * {
  grid-column: 2;
}
.blog-row-numbered > .blog-row-number {
  grid-column: 1;
}
.blog-row-number {
  color: var(--accent);
  font: 500 14px/1.2 var(--font-data);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .blog-row-numbered {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 0;
  }
  .blog-row-numbered > * {
    grid-column: 1;
  }
  .blog-row-number {
    margin-bottom: 6px;
  }
}