:root {
  color-scheme: light;
}

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

/* Every size below is in rem, so this one line sizes the whole page: the reader's own font size up to
   a 1920px-wide screen, then growing to an eighth more at 2400px, where the page would otherwise be a
   small column of small type in the middle of the screen. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(100%, 0.5rem + 0.417vw, 112.5%);
}

body.blog {
  /* The space either side of the content column: the header and footer start on the same line the
     page's content does, at every width. */
  --edge: max(var(--gutter), calc((100% - var(--max-width)) / 2));
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  /* A word too long for its line (an address, a code name) breaks rather than running out of its box. */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--blue); text-underline-offset: 0.16em; text-decoration-thickness: 0.09em; }
a:hover { color: var(--blue-deep); }

/* Visible focus everywhere (WCAG 2.2 AA) — never suppressed. Gold where blue would vanish. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-intro a:focus-visible,
.blog-footer a:focus-visible {
  outline-color: var(--gold);
}

/* --- header ------------------------------------------------------------------------------------- */

/* The name on the left, the sections on the right; on a screen too narrow for both on one line, the
   sections take a line of their own under the name. */
.blog-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 2rem;
  padding: 0.6rem var(--edge);
  background: var(--paper);
  border-bottom: var(--line);
  font-family: var(--font-display);
}

.blog-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

/* The mark: a blue tile with one gold coin on it, drawn here so no image is loaded. */
.blog-wordmark::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--line);
  border-radius: 0.5rem;
  background: radial-gradient(circle at 66% 36%, var(--gold) 0 30%, transparent 32%), var(--blue);
}

.blog-wordmark:hover { color: var(--blue); }

.site-nav ul,
.footer-nav ul,
.breadcrumbs ol,
.topic-chips {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pulled out by a link's own padding, so the first and last words line up with the page's edges. */
.site-nav ul { gap: 0.1rem 0.2rem; margin: 0 -0.75rem; }

.site-nav a {
  display: block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.site-nav a:hover { background: var(--ink); color: var(--paper); }

/* --- page frame --------------------------------------------------------------------------------- */

/* Three columns: a gutter, the content, a gutter. Everything sits in the middle one; a full-width
   band spans all three and pads its own contents in to the same line. */
.blog-container {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
  align-content: start;
  padding-bottom: 4rem;
}

.blog-container > * { grid-column: 2; min-width: 0; }

/* --- bands: the coloured block every page opens with -------------------------------------------- */

/* A band is a title block, not a screenful: on every screen the page's content starts in view. */
.blog-container > .site-intro,
.blog-container > .page-intro {
  grid-column: 1 / -1;
  padding-inline: var(--edge);
  border-bottom: var(--line);
}

/* A band takes its category's colour; a page that belongs to no category takes gold. */
.page-intro {
  padding-block: 1.25rem 1.75rem;
  background: var(--tone, var(--gold));
  color: var(--ink);
}

/* A band whose page continues on a sheet: room for the sheet to ride up over its lower edge, and
   its own contents lined up with the sheet's text. */
.page-intro.has-sheet { padding-bottom: calc(var(--overlap) + 1.5rem); }

.page-intro.has-sheet > * {
  max-width: var(--measure);
  margin-inline: auto;
}

.page-intro-note { margin: 0.4rem 0 0; font-family: var(--font-display); font-weight: 700; }

/* The home page: the site's own blue, the name large on one line where there is room for it, and
   three coins beside it. */
.blog-container > .site-intro {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 2.5rem) calc(var(--overlap) + clamp(1.5rem, 3vw, 2rem));
  background: var(--blue);
  color: var(--paper);
}

/* The coins: whole, inside the band, at the right-hand end of the content column and above the
   cards that ride up over the band's lower edge. Each is one circle with an ink rim, sized and
   placed in the box by its own background layer. */
.site-intro::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--edge);
  bottom: var(--overlap);
  width: 15rem;
  pointer-events: none;
  background:
    radial-gradient(circle closest-side, var(--gold) calc(100% - 3.5px), var(--ink) calc(100% - 3px) calc(100% - 0.5px), transparent) left 1.25rem top 1.25rem / 6rem 6rem no-repeat,
    radial-gradient(circle closest-side, var(--pink) calc(100% - 3.5px), var(--ink) calc(100% - 3px) calc(100% - 0.5px), transparent) right 0 bottom 0.75rem / 8.5rem 8.5rem no-repeat,
    radial-gradient(circle closest-side, var(--lime) calc(100% - 3.5px), var(--ink) calc(100% - 3px) calc(100% - 0.5px), transparent) left 2.25rem bottom 1.25rem / 3.25rem 3.25rem no-repeat;
}

.site-intro > * { position: relative; z-index: 1; }

.site-intro .post-title {
  font-size: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--paper);
}

.site-lead {
  max-width: 36rem;
  margin: 0.9rem 0 0;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

/* The categories, as tickets: each one in its own colour. */
.topic-chips { gap: 0.6rem; margin-top: 1.25rem; }

.topic-chips a {
  display: block;
  padding: 0.35rem 1rem;
  border: var(--line);
  border-radius: 999px;
  background: var(--tone, var(--gold));
  box-shadow: var(--shadow-small);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
  transition: translate 120ms, box-shadow 120ms;
}

.topic-chips a:hover { translate: -2px -2px; box-shadow: var(--shadow); color: var(--ink); }

/* --- titles, trail, meta ------------------------------------------------------------------------ */

/* A page's title: heavy, and sized to sit on two lines or so at any width, from a phone to a desk. */
.post-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* A category's name is a word or two, so it can be larger than an article's title. */
.blog-list .post-title { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem); line-height: 1; }

.breadcrumbs { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; }

.breadcrumbs ol { gap: 0.4rem; }

.breadcrumbs a {
  display: block;
  padding: 0.1rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.breadcrumbs a:hover { background: var(--ink); color: var(--paper); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

/* Read before the article, and before the first affiliate link. */
.disclosure {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 2px solid var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.disclosure a { color: var(--ink); font-weight: 700; }

/* --- the sheet: white paper an article is read on, riding up over the band above it --------------- */

.blog-container > article {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--sheet-pad));
  justify-self: center;
  margin-top: calc(-1 * var(--overlap));
  padding: var(--sheet-pad);
  overflow: hidden;
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--ink);
}

/* The picture fills the top of the sheet, edge to edge. */
.post-hero {
  display: block;
  width: calc(100% + 2 * var(--sheet-pad));
  max-width: none;
  margin: calc(-1 * var(--sheet-pad)) calc(-1 * var(--sheet-pad)) var(--sheet-pad);
  border-bottom: var(--line);
}

/* --- article body ------------------------------------------------------------------------------- */

.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }

.post-body h2,
.post-body h3,
.post-body h4,
.cta h2,
.related-posts h2 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Each section opens with a block of its category's colour. */
.post-body h2 {
  margin: 2.2em 0 0.7em;
  padding-left: 0.8rem;
  border-left: 0.5rem solid var(--tone, var(--gold));
  font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
}

.post-body h3 { margin: 2em 0 0.5em; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem); }
.post-body h4 { margin: 1.6em 0 0.4em; font-size: 1.15rem; }

.post-body p,
.post-body ul,
.post-body ol,
.post-body blockquote,
.post-body pre,
.post-body table {
  margin: 0 0 1.2em;
}

.post-body ul,
.post-body ol { padding-left: 1.4em; }

.post-body li + li { margin-top: 0.4em; }

.post-body li::marker { color: var(--blue); font-weight: 800; }

.post-body blockquote {
  padding: 1rem 1.2rem;
  border: var(--line);
  border-radius: 14px;
  background: var(--page);
  box-shadow: var(--shadow-small);
  font-weight: 600;
}

.post-body blockquote > :last-child { margin-bottom: 0; }

.post-body code {
  padding: 0.12em 0.36em;
  border-radius: 6px;
  background: var(--page);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.post-body pre {
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  line-height: 1.5;
}

.post-body pre code { padding: 0; background: none; color: inherit; }

/* A table too wide for the sheet scrolls sideways in its own box. A shadow at an edge says there is
   more that way: the two shadows stay put, and a paper-coloured cover at each end of the table moves
   with it, hiding the shadow once that end is reached (or when the whole table fits). */
.post-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95em;
  background:
    linear-gradient(to right, var(--paper) 40%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, transparent) right / 2.5rem 100% no-repeat local,
    linear-gradient(to right, var(--shade), transparent) left / 0.9rem 100% no-repeat scroll,
    linear-gradient(to left, var(--shade), transparent) right / 0.9rem 100% no-repeat scroll;
}

.post-body th,
.post-body td {
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--ink);
  text-align: left;
  vertical-align: top;
}

.post-body th { background: var(--tone, var(--gold)); font-family: var(--font-display); font-weight: 800; }

.post-body hr { margin: 2.5em 0; border: 0; border-top: var(--line); }

.post-body img { display: block; border-radius: 12px; }

/* --- video and screenshots (content/media.json) -------------------------------------------------- */

.media { margin: 0 0 1.6em; }

.media img,
.video-frame {
  display: block;
  width: 100%;
  border: var(--line);
  border-radius: 14px;
}

.media-video img,
.video-frame {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}

.video-frame { height: auto; }

.video-facade { position: relative; display: block; }

.video-play {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.5rem 1.1rem 0.5rem 2.4rem;
  border: var(--line);
  border-radius: 999px;
  background: var(--gold);
  box-shadow: var(--shadow-small);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
}

.video-play::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 50%;
  translate: 0 -50%;
  border: 0.42em solid transparent;
  border-left: 0.7em solid var(--ink);
  border-right: 0;
}

.video-facade:hover .video-play { background: var(--lime); }

.media figcaption {
  padding-top: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* --- the call-to-action -------------------------------------------------------------------------- */

.cta,
.related-posts {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--sheet-pad));
  justify-self: center;
}

.cta {
  margin: 2.5rem 0 0;
  padding: 1.8rem clamp(1.2rem, 4vw, 2.2rem) 2rem;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--gold);
  box-shadow: 8px 8px 0 var(--ink);
  color: var(--ink);
}

.cta h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.cta p { margin: 0 0 1.3rem; font-weight: 600; }

.cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
}

.cta-button:hover { background: var(--blue); color: var(--paper); }
.cta-button:focus-visible { outline-color: var(--ink); }

/* --- related articles ------------------------------------------------------------------------------ */

.related-posts { margin-top: 3.5rem; }

.related-posts h2 { margin: 0 0 1rem; font-size: 1.6rem; }

.related-posts ul { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.related-posts a {
  display: block;
  padding: 0.8rem 1.1rem;
  border: var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-small);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
  text-decoration: none;
  transition: translate 120ms, box-shadow 120ms;
}

.related-posts a:hover { translate: -2px -2px; box-shadow: var(--shadow); }

/* --- lists of posts (home, category pages) ------------------------------------------------------- */

/* As many columns as fit, each at least 18rem wide: three across the widest page, one on a phone. */
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 1.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

/* On the home page the list rides up over the band, and the newest post is the big one: it has a
   row to itself at every width. */
.blog-home .post-list { position: relative; z-index: 1; margin-top: calc(-1 * var(--overlap)); }

.blog-home .post-card:first-child { grid-column: 1 / -1; }

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: 1rem;
  line-height: 1.5;
  transition: translate 120ms, box-shadow 120ms;
}

.post-card:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--ink); }

.post-card > p { margin: 0; padding: 0 1.1rem; color: var(--ink-soft); }
.post-card > p:last-child { padding-bottom: 1.2rem; }

.post-card-link { display: block; color: var(--ink); text-decoration: none; }

/* The thumbnail is the post's own wide hero, cropped by the stylesheet — never squashed, and never a
   second resized copy of the file. */
.post-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: var(--line);
  background: var(--page);
}

.post-card-title {
  display: block;
  padding: 0.95rem 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.post-card-link:hover .post-card-title { color: var(--blue); }

.post-card .post-card-meta {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
}

/* The category, as a ticket stuck on the corner of the picture. */
.post-card-category {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.15rem 0.8rem;
  border: var(--line);
  border-radius: 999px;
  background: var(--tone, var(--gold));
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

/* Where there is room, the newest post's picture sits beside its words instead of above them: the
   whole picture shows (it is never a thin strip cut from its middle), and the card is half as tall.
   The picture fills the card's left side from top to bottom; the card is at least as tall as that
   side needs to show the picture uncropped (its width x 0.54, at 16:9). */
@media (min-width: 44rem) {
  .blog-home .post-card:first-child {
    display: block;
    min-height: calc(min(100vw - 2 * var(--gutter), var(--max-width)) * 0.54 * 0.5625);
    padding-left: 54%;
  }

  .blog-home .post-card:first-child .post-card-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 54%;
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: var(--line);
  }

  .blog-home .post-card:first-child .post-card-title {
    padding: 1.25rem 1.4rem 0;
    font-size: clamp(1.5rem, 0.9rem + 1.7vw, 2.25rem);
    line-height: 1.06;
  }

  .blog-home .post-card:first-child > p { padding-left: 1.4rem; padding-right: 1.4rem; }
  .blog-home .post-card:first-child > p:last-child { padding-bottom: 1.4rem; font-size: 1.05rem; }
}

/* A list with nothing in it yet. */
.empty-note {
  position: relative;
  z-index: 1;
  justify-self: start;
  margin: calc(1rem - var(--overlap)) 0 0;
  padding: 1rem 1.4rem;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--lime);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
}

/* --- footer ---------------------------------------------------------------------------------------- */

.blog-footer {
  padding: 2.25rem var(--edge) 2.75rem;
  border-top: var(--line);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.blog-footer:empty { display: none; }

.footer-nav ul { gap: 0.4rem 1.75rem; }

.blog-footer a { color: var(--paper); }
.blog-footer a:hover { color: var(--gold); }

.footer-note { margin: 1.1rem 0 0; }
.footer-note:first-child { margin-top: 0; }

/* The coins need room beside the name: on a narrower screen they would sit on top of it. */
@media (max-width: 64rem) {
  .site-intro::after { display: none; }
}

@media (max-width: 40rem) {
  body.blog { font-size: 1.0625rem; }

  .blog-container > article,
  .cta { box-shadow: var(--shadow-small); }

  /* A phone: the sections take one line under the name, however many there are. Too many to fit
     scroll sideways, and the line fades out at the screen's right edge to show there is more. */
  .site-nav { flex: 1 1 100%; min-width: 0; }

  .site-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter));
    padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, #fff calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #fff calc(100% - 1.5rem), transparent);
  }

  .site-nav ul::-webkit-scrollbar { display: none; }

  .site-nav a { white-space: nowrap; }

  /* Drawn inside the link: the scrolling line would cut off a ring drawn around it. */
  .site-nav a:focus-visible { outline-offset: -3px; }

  .post-body th,
  .post-body td { padding: 0.4rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card,
  .topic-chips a,
  .related-posts a { transition: none; }
}