:root{
  /* Palette moved to css/tokens.css — see that file for the single source of truth. */
color-scheme:dark;}
html[data-theme="light"]{
  /* Light palette moved to css/tokens.css. */
color-scheme:light;}
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  html{scrollbar-width:none; -ms-overflow-style:none;}
  html::-webkit-scrollbar{display:none; width:0; height:0;}
  body{
    background-color:var(--ink); color:var(--paper); line-height:1.9;
    /* font-family used to be hardcoded to system-ui here, so this page rendered
       in the OS face while the rest of the site used the site typeface. It is
       inherited from the base rule in css/tokens.css now. */
    /* The top and bottom padding reserve the footer's band: this page has no
       header bar, so the bottom padding is the only thing that keeps the last
       paragraph out from under the fixed card.

       The inline padding is 0, not 20px. .wrap is already capped at --page-w and
       centred, and it pads itself by --gutter, so a body inset on top of that
       narrowed the text twice: the policy text measured 640px inside a 680px box
       inside a viewport already inset by 20px, which put the text 20px inside the
       footer card that is supposed to frame it. The gutter belongs in exactly
       one place per page, and on this page that place is .wrap. */
    padding:20px 0 var(--foot-fixed-h, 88px); touch-action:manipulation;
    transition:background-color .25s, color .25s;
  }
  /* This page has no header bar, but it does have the footer card, and the card
     is --band-w. At the default 1200px page width that made the card 1168px
     around a 680px policy text: the card overhung the text by 244px on each
     side, so the one element on the page that was actually about the text was
     the one element that did not line up with it. Re-stating --page-w and
     --gutter is the same adoption the article pages make, and it leaves
     --band-w resolving to the measure so the card frames the text.

     --head-inset is the other half of that adoption and this page was the one
     sheet that had forgotten it. main.css, blog.css and blog-post.css all
     publish `--head-inset: var(--gutter)`, and `footer` pads itself by
     `var(--head-inset, 12px)`. Without the line here, this page fell back to the
     literal 12px while its own gutter is the 20px reading gutter. Above the cap,
     where --band-w is 640px and the padding cannot bind, nothing showed. Below
     it — every phone — the footer card measured 366px inside a 390px viewport
     against a 350px text column, so the one band on the page sat 8px proud of the
     text on each side. The layout audit only saw it at 390px; the reading pages,
     which publish the inset, were aligned at every width. */
  :root{--page-w:var(--read-page-w); --gutter:var(--read-gutter); --head-inset:var(--gutter);}
  .wrap{max-width:var(--page-w); margin:0 auto; padding:40px var(--gutter) 0;}
  /* A page rhythm built on four arbitrary numbers reads as four unrelated
     decisions, because the eye compares gaps within a column and finds nothing
     repeating: 8px under the h1, 28px under the back link, 12px under each h2,
     32px above each h2. Nothing in that set is wrong on its own, and together
     they mean the page has no rhythm at all — a reader scrolling it cannot tell
     a section break from a paragraph break by distance alone.

     Four steps off a 4px base, each one a multiple of the last, so the
     relationships are visible:
       --sp-1   4px   inside a group of lines
       --sp-2   8px   between a heading and the line it introduces
       --sp-4  16px   between blocks inside a section
       --sp-8  32px   between sections
     A section break is then always four times a block break, and a heading is
     always tight to its own text.

     Those four steps used to be re-declared in a :root block here. The values
     matched tokens.css exactly, so nothing ever rendered wrong, and that is what
     made the copy dangerous: it looked correct, and it was the same habit that
     had main.css keeping a whole second scale whose values did not match. This
     sheet already loads tokens.css, so the canonical steps are in scope. The
     block is gone and the reasoning stays. */
  a{color:var(--signal);}
  a:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--signal) 40%, transparent); border-radius:4px;}
  /* 32px, not 28: the back link is a block above the h1, and 32 is the scale's
     section step. 28 was neither a step nor a multiple of any other gap here. */
  .back{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-family:var(--mono); direction:ltr; font-size:12.5px; color:var(--muted); margin-bottom:var(--sp-8);}
  .back:hover{color:var(--signal);}
  /* The title and the date it was revised are one thought, so they sit a single
     step apart; the date and the body text are different thoughts, so they take
     the block step. */
  h1{font-size:26px; margin-bottom:var(--sp-2);}
  .updated{font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:var(--sp-4);}
  /* The 32px above is the section step and the 8px below is the heading step, so
     a heading binds to the text under it and separates from what came before. */
  h2{font-size:17px; margin:var(--sp-8) 0 var(--sp-2); color:var(--signal);}
  p, li{color:var(--muted); font-size:14.5px;}
  ul{padding-inline-start:20px; margin-top:var(--sp-2);}
  li{margin-bottom:var(--sp-1);}
  .skip-link{position:fixed; inset-inline-start:20px; top:16px; z-index:100; padding:8px 16px; border-radius:12px; background-color:var(--panel); border:1px solid var(--signal); color:var(--signal); font-size:13px; font-weight:700; line-height:1.5; opacity:0; pointer-events:none; transform:translateY(-10px); transition:opacity .2s, transform .2s;}
  .skip-link:focus{opacity:1; pointer-events:auto; transform:none;}
  @media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important;}}