:root{
  --bg:#ffffff; --fg:#0a0a0a; --muted:#0a0a0a; --rule:#0a0a0a;
  --accent:#d90000; --card:#ffffff;
  --mast:#0a0a0a; --mast-fg:#ffffff; --mast-cut:url("images/cut-edge.png");
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0a0a0a; --fg:#ffffff; --muted:#ffffff; --rule:#ffffff; --accent:#d90000; --card:#0a0a0a;
    --mast:#ffffff; --mast-fg:#0a0a0a; --mast-cut:url("images/cut-edge-dark.png"); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);
     font-size:19px;line-height:1.66;overflow-x:hidden}
a{color:inherit}
a:hover{color:var(--accent)}
.wrap{max-width:44rem;margin:0 auto;padding:0 22px}
/* The masthead is an ink field. No palette photograph, no swatch strip and no mark: the name,
   the countdown and the navigation are all set in type, and the only picture anywhere on a page
   is a post's own artwork. The lower edge is cut in the artwork rather than ruled as a border. */
/* The ink field stops just inside the top of the cut strip, so the strip's torn pixels can
   reveal the page and the article scrolling under the sticky header. Painted white instead
   (the old cut-edge.png had no alpha channel) the tear covered that content and stopped
   reading as a tear at all.
   It stops 12px above the foot, not 14px, deliberately: the strip is the last 14px, so 12px
   overlaps the strip's first 2px, and the overlap is invisible because both sides are the same
   opaque ink. It is what stops a hairline appearing. On a phone the header's height is
   fractional (121.975px at 390px wide), so the boundary lands on a fractional device pixel; the
   browser then snaps the gradient's stop and the strip's top independently, and the device row
   between them was painted by neither, showing the white page as a 1px line across the field.
   Two pixels of overlap covers that whichever way it snaps.
   The field must stay OPAQUE for this to hold. A translucent field cannot be joined to the strip
   cleanly: with no overlap the snapped gap shows the page as a white line, and with overlap two
   86% inks stack to 98% and the same row goes darker instead (measured 23.8 against 52.2 either
   side). With solid ink on both sides of the boundary, more of the same colour changes nothing. */
header.site{position:sticky;top:0;z-index:100;color:var(--mast-fg);margin-bottom:36px;
  background:linear-gradient(to bottom,var(--mast) 0,var(--mast) calc(100% - 12px),transparent calc(100% - 12px));
  }
header.site .cut{height:14px;background:var(--mast-cut) repeat-x;
  background-size:auto 14px;margin-top:16px}
/* Line 1: wordmark + days remaining. Line 2: site name + nav. */
/* padding-top/bottom only: the padding SHORTHAND would zero the horizontal padding that
   .wrap supplies, which left the header text flush against the screen edge on mobile. */
header.site .top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  padding-top:14px}
header.site .inner{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  justify-content:space-between;padding-top:8px;padding-bottom:11px}
/* Outline instead of a chip. Fill black, outline white: on the palette white column the
   outline vanishes and the fill carries the word, on its black column the fill vanishes and
   the white outline carries it. Drawn as a ring of shadows rather than a stroke, so no
   spike is thrown off a sharp corner. Hover inverts the pair. */
.brand,nav a{color:var(--mast-fg);text-decoration:none}
.brand{font-family:var(--sans);font-size:15px;letter-spacing:.02em;font-weight:600}
.brand span{color:var(--accent);font-weight:400}
nav{font-family:var(--sans);font-size:13px;display:flex;flex-wrap:wrap;gap:16px}
nav a{border-bottom:2px solid transparent;padding-bottom:2px}
nav a:hover,nav a[aria-current]{color:var(--mast-fg);border-bottom-color:var(--accent)}
h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 8px;letter-spacing:-.01em}
h2{font-size:1.28em;line-height:1.3;margin:1.9em 0 .5em}
h3{font-size:1.1em;margin:1.6em 0 .4em}
.meta{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0 0 26px}
article p,article li{margin:0 0 1.05em}
article img{max-width:100%;height:auto;display:block;margin:1.6em auto}
article hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
article blockquote{margin:1.4em 0;padding-left:18px;border-left:3px solid var(--rule);color:var(--muted)}
article pre{background:var(--card);border:1px solid var(--rule);padding:14px;overflow:auto;
  font-size:14px;line-height:1.45}
article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
article table{border-collapse:collapse;width:100%;font-size:15px;margin:1.4em 0;display:block;overflow-x:auto}
article th,article td{border:1px solid var(--rule);padding:7px 10px;text-align:left;vertical-align:top}
article th{background:var(--card);font-family:var(--sans);font-size:13px}
/* An edited body may carry more than markdown allowed: a picture with a caption, a rebuilt
   chart, a numeric column that lines up. These rules exist so those can be used at all. */
article caption{caption-side:top;text-align:left;font-family:var(--sans);font-size:13px;
  color:var(--muted);padding:0 0 8px}
article td.num,article th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
article figure:not(.hero){margin:1.8em 0}
article figure:not(.hero) img{margin:0 auto}
article figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.5;
  margin:9px 0 0;text-align:left}
article svg{display:block;width:100%;height:auto;margin:1.8em 0}
article .chart{background:var(--card);border:1px solid var(--rule);
  padding:14px 16px;margin:1.8em 0}
article .chart svg{margin:0}
article .chart .chart-note{font-family:var(--sans);font-size:12.5px;color:var(--muted);
  margin:10px 0 0;line-height:1.5}
ul.posts{list-style:none;padding:0;margin:0}
ul.posts li{border-bottom:1px solid var(--rule);padding:20px 0}
ul.posts li:first-child{padding-top:0}
ul.posts h3{margin:0 0 4px;font-size:1.16em;line-height:1.3;font-weight:600}
ul.posts h3 a{text-decoration:none}
ul.posts .d{font-family:var(--sans);font-size:12.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
ul.posts .x{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.year{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:44px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.year:first-child{margin-top:0}
.pager{display:flex;justify-content:space-between;gap:20px;margin:52px 0 0;padding-top:22px;
  border-top:1px solid var(--rule);font-family:var(--sans);font-size:14px}
.pager a{text-decoration:none}
.pager span{color:var(--muted)}
footer.site{margin:70px 0 0;padding:26px 0 48px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.65}
footer.site a{color:var(--muted)}
.note{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--accent);
  padding:14px 16px;font-family:var(--sans);font-size:13.5px;
  line-height:1.6;color:var(--muted);margin:0 0 34px}
.lede{font-size:1.06em;color:var(--muted)}
/* Long unbreakable runs must not widen the page: ASCII-art lines (box drawing
   characters are ~48 chars with no spaces) and bare URLs both did. */
ul.posts .x,ul.posts h3,ul.posts h3 a,article,article pre,article code{overflow-wrap:anywhere} 
article table{max-width:100%}
/* NOTE: no html{overflow-x:hidden} here - it cancels position:sticky on the masthead.
   The real overflow cause (unbreakable ASCII-art runs and URLs) is handled by
   overflow-wrap:anywhere above. */
/* No wordmark mark is used: the name is set in type in the masthead. */
/* The countdown was a 1200x158 PNG (100px digits, 30px labels); same proportions here,
   scaled for the header, with DAYS stacked over REMAINING to the right of the number. */
.countdown{display:flex;align-items:baseline;gap:9px;flex:none;color:var(--mast-fg);
  font-family:var(--sans)}
/* Outline radius scales with the type: 2.2px on the 30px digits, 0.8px on the 9.5px labels.
   A single 2px radius left the small labels mostly outline, reading as blobs. */
.cd-num{font-family:var(--serif);font-size:38px;line-height:1;letter-spacing:-.01em;color:var(--mast-fg)}
.cd-labels{display:flex;flex-direction:column;gap:2px;font-size:9.5px;line-height:1;
  letter-spacing:.16em;color:var(--accent)}
/* optional per-post summary image on the index (see summaries.json) */
ul.posts .thumb{width:100%;max-height:220px;object-fit:cover;display:block;
  border:1px solid var(--rule);margin:0 0 14px}
/* the post's own picture, full width and uncropped, at the top of a post page */
article .hero{margin:0 0 26px}
article .hero img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
@media (max-width:600px){
  body{font-size:17.5px} .wrap{padding:0 18px}
  .cd-num{font-size:24px}
}