/* ==============================================================
   bqckf1sh - readout brutalism

   Warm bone on a cool near-black. One accent (Mercury), reserved
   strictly for STATE: status lamp, row numerals, hover, focus,
   active nav. Hierarchy is otherwise carried by brightness alone.

   Deliberately single-theme - every colour is painted explicitly
   so the page holds on any host background.
   ============================================================== */

/* ---- faces --------------------------------------------------
   Served from this origin, not from Google. The footer claims "no trackers",
   and a webfont request hands the visitor's IP and user agent to a third
   party. Paths are relative to this file so they survive a baseurl change.

   Fraunces is variable: one file covers 300-700 plus the opsz, SOFT and WONK
   axes the headings drive. The italic is a separate 150 KB file and is only
   fetched on pages that actually set font-style:italic - which is why the
   emphasis in the hero is a real italic rather than a synthesised slant.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin-var-italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("../fonts/dm-mono-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("../fonts/dm-mono-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

:root{
  /* The page is painted dark on purpose, so say so: without this the browser
     still renders scrollbars and form controls from the light theme. */
  color-scheme:dark;

  /* ground - near-black with a cool bias, never neutral grey */
  --bg:        #0B0B0D;
  --bg-lift:   #111116;
  --rule:      #22222A;
  --rule-soft: #17171C;

  /* foreground - bone, warm; the tension against the cool ground */
  --fg:        #E7E3DA;
  --dim:       #8B877E;
  --dimmer:    #7E7B74;   /* 4.6:1 on --bg; #6B6862 was 3.5:1 and failed AA */

  /* accent - Mercury. Cool metal against warm paper. */
  --acc:       #A8BCCB;
  --acc-dim:   #5A6873;

  /* plate - the single loud surface. Not a new colour: the site's own
     palette turned inside out. Paper stock, printed in the ground
     colour as ink. Everything else on the site is near-black, so the
     inversion alone carries the contrast. */
  --plate:       #EDEAE1;
  --plate-fg:    #0B0B0D;
  --plate-ghost: rgba(11,11,13,.09);
  --plate-rule:  rgba(11,11,13,.22);

  --mono: "DM Mono", ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --maxw: 1080px;
  --readw: 66ch;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  font-weight:300;
  line-height:1.7;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--acc); color:#0B0B0D; }

a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:4px; }
/* The rail is sticky, so a skip link or heading anchor would otherwise land
   underneath it. */
#main,.prose h2,.prose h3,:target{ scroll-margin-top:5rem; }
/* the plate inverts the page, so the ring has to invert with it */
.plate :focus-visible{ outline-color:var(--plate-fg); outline-width:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--acc); color:#0B0B0D; padding:.5rem 1rem;
}
.skip:focus{ left:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); font-weight:400;
}

/* ---- top rail ---------------------------------------------- */
.rail{
  border-bottom:1px solid var(--rule);
  background:var(--bg);
  position:sticky; top:0; z-index:20;
}
.rail-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:56px; padding:.5rem 0;
}
/* Mark plus four nav items need ~377px; a 375px phone offers ~335px.
   Below that the wordmark drops and the glyph carries the identity. */
@media (max-width:560px){
  .mark-name{ display:none; }
  .nav{ gap:1rem; }
}
.mark{ display:flex; align-items:center; gap:.7rem; flex:none; }
.mark svg{ display:block; flex:none; }
.mk-l{ stroke:var(--fg); fill:none; }
.mk-d{ fill:var(--acc); }
.mark-name{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

.nav{ display:flex; gap:1.35rem; flex-wrap:wrap; }
.nav a{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); transition:color 80ms linear;
}
.nav a:hover{ color:var(--fg); }
.nav a[aria-current]{ color:var(--acc); }

/* ---- readout strip ----------------------------------------- */
.readout{
  border-bottom:1px solid var(--rule);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dimmer);
  font-variant-numeric:tabular-nums;
}
.readout-in{
  display:flex; flex-wrap:wrap; gap:.35rem 1.4rem;
  padding:.6rem 0; align-items:center;
}
/* On a phone the strip wraps to three lines and eats the first screen before
   the headline. Keep the two fields that answer "is anything here at all". */
@media (max-width:560px){ .ro-opt{ display:none; } }
.readout b{ font-weight:400; color:var(--dim); }
.lamp{
  display:inline-block; width:6px; height:6px; background:var(--acc);
  margin-right:.5rem; vertical-align:1px;
}

/* ---- hero -------------------------------------------------- */
.hero{ padding:clamp(4rem,13vh,8.5rem) 0 clamp(3.5rem,9vh,6rem); }
.hero-sm{ padding:clamp(3rem,8vh,5rem) 0 clamp(2.5rem,5vh,3.5rem); }
.hero .eyebrow{ margin-bottom:2.25rem; }
.hero-sm .eyebrow{ margin-bottom:1.5rem; }

.hero h1{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 108;
  font-weight:340;
  font-size:clamp(2.35rem,6.4vw,4.6rem);
  line-height:1.02;
  letter-spacing:-0.035em;
  text-wrap:balance;
  max-width:19ch;
  margin:0 0 2rem;
}
.hero-sm h1{
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  max-width:24ch; margin-bottom:1.5rem;
}
/* Mercury is dimmer than bone, so emphasis is carried by the
   italic and the WONK axis alone - never by colour. */
.hero h1 em{
  font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 108;
}
.hero p{
  margin:0; max-width:54ch; color:var(--dim);
  font-size:14px; line-height:1.75;
}
.hero p a{ color:var(--fg); border-bottom:1px solid var(--acc-dim); }
.hero p a:hover{ color:var(--acc); border-color:var(--acc); }

.rise{ animation:rise 500ms cubic-bezier(.2,.7,.3,1) both; }
.rise:nth-child(2){ animation-delay:60ms; }
.rise:nth-child(3){ animation-delay:120ms; }
@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* ---- nodes (home + index sections) ------------------------- */
.node{ border-top:1px solid var(--rule); padding:2.75rem 0 3.25rem; }
.node-grid{ display:grid; grid-template-columns:1fr; gap:1.75rem; }
@media (min-width:900px){
  .node-grid{ grid-template-columns:150px 1fr; gap:0 2.5rem; }
}
.node-tag{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dimmer); font-variant-numeric:tabular-nums; padding-top:.3rem;
}
.node-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
}
.node-head h2{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg);
}
.node-head .more{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); transition:color 80ms linear;
}
.node-head .more:hover{ color:var(--acc); }

.empty{
  color:var(--dim); font-size:13px; margin:0;
  border-top:1px solid var(--rule-soft); padding-top:1rem;
}
.empty code{ color:var(--fg); }

/* ---- list rows --------------------------------------------- */
.rows{ list-style:none; margin:0; padding:0; }
.rows li{ border-top:1px solid var(--rule-soft); }
.rows li:last-child{ border-bottom:1px solid var(--rule-soft); }

.row{
  display:grid; grid-template-columns:2.9rem 1fr; gap:0 .5rem;
  /* A constant left pad gives the hover bar somewhere to sit and keeps the
     lifted background flush with the hairline rules above and below. The old
     rule animated padding-left, which relaid out the row on every hover. */
  padding:1.05rem .75rem 1.15rem .7rem;
  transition:background 80ms linear, box-shadow 80ms linear;
}
@media (min-width:760px){
  .row{ grid-template-columns:2.9rem 1fr 13rem; align-items:baseline; }
}
@media (hover:hover){
  .row:hover{ background:var(--bg-lift); box-shadow:inset 2px 0 0 var(--acc); }
}
.row:active{ background:var(--bg-lift); box-shadow:inset 2px 0 0 var(--acc); }

/* A project that stopped is a state, not something to hide. The palette
   already carries state in brightness, so a past entry steps down one level
   instead of earning a colour of its own. */
.row.is-past .row-title{ color:var(--dim); }
.row.is-past .row-desc{ color:var(--dimmer); }
.row.is-past .arrow{ opacity:.25; }
@media (hover:hover){ .row.is-past:hover .arrow{ opacity:.6; } }

.idx{
  font-size:11px; color:var(--dimmer); letter-spacing:.06em;
  font-variant-numeric:tabular-nums; padding-top:.28rem;
  transition:color 80ms linear;
}
@media (hover:hover){ .row:hover .idx{ color:var(--acc); } }
.row:active .idx{ color:var(--acc); }

.row-title{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 32;
  font-weight:400; font-size:1.28rem; line-height:1.2; letter-spacing:-0.02em;
  display:flex; align-items:baseline; gap:.55rem;
}
/* On touch there is no hover, so the arrow would never appear and the
   rows would read as dead text. Show it, dimmed, by default instead. */
.arrow{
  color:var(--acc); opacity:.45; font-size:.85rem;
  transition:opacity 80ms linear;
}
@media (hover:hover){
  .arrow{ opacity:0; }
  .row:hover .arrow{ opacity:1; }
}

.row-desc{
  display:block; color:var(--dim); font-size:13px; line-height:1.6;
  margin-top:.3rem; max-width:52ch;
}
.row-meta{
  display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.55rem;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dimmer); font-variant-numeric:tabular-nums;
}
@media (min-width:760px){
  .row-meta{
    grid-column:3; align-self:start; margin-top:.4rem;
    justify-content:flex-end; text-align:right;
  }
}
.st{ color:var(--dim); }
.st-live::before{
  content:""; display:inline-block; width:5px; height:5px;
  background:var(--acc); margin-right:.4rem; vertical-align:1px;
}

/* ---- document pages (post / project / static) -------------- */
.doc{ padding:clamp(3rem,8vh,5rem) 0 4rem; }
.doc-head{ margin-bottom:2.75rem; }
.doc-head .eyebrow{ margin-bottom:1.5rem; }
.doc-head h1{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 72;
  font-weight:360;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.06; letter-spacing:-0.03em; text-wrap:balance;
  max-width:22ch; margin:0;
}
.standfirst{
  margin:1.5rem 0 0; max-width:56ch;
  color:var(--dim); font-size:14px; line-height:1.75;
}

/* spec block - the instrument panel for a single document */
.spec{
  margin:2.25rem 0 0; padding:0;
  border-top:1px solid var(--rule-soft);
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:700px){
  .spec{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2.5rem; }
}
.spec > div{
  display:flex; gap:1rem; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--rule-soft); padding:.6rem 0;
}
.spec dt{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dimmer); flex:none;
}
.spec dd{
  margin:0; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg); text-align:right; font-variant-numeric:tabular-nums;
}
.spec dd a{ border-bottom:1px solid var(--acc-dim); }
.spec dd a:hover{ color:var(--acc); border-color:var(--acc); }

/* ---- prose ------------------------------------------------- */
/* Body copy is the one place the instrument voice steps aside. Mono stays in
   the frame - rail, readout, row meta, spec, code - and the reading column
   switches to the display face at a text optical size. */
.prose{
  max-width:var(--readw);
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 14;
  font-weight:400; font-size:17px; line-height:1.65;
  letter-spacing:0; color:var(--fg);
}
.prose code,.prose pre,.prose kbd{ font-family:var(--mono); letter-spacing:-0.01em; }
.prose > * + *{ margin-top:1.35rem; }
.prose p{ margin:0; }

.prose h2,.prose h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 28;
  letter-spacing:-0.02em; line-height:1.25; text-wrap:balance;
}
.prose h2{ font-size:1.65rem; margin-top:3rem; }
.prose h3{ font-size:1.28rem; margin-top:2.25rem; }
.prose h2 + *,.prose h3 + *{ margin-top:.85rem; }

.prose a{
  color:var(--fg); border-bottom:1px solid var(--acc-dim);
  transition:color 80ms linear, border-color 80ms linear;
}
.prose a:hover{ color:var(--acc); border-color:var(--acc); }

.prose ul,.prose ol{ margin:1.35rem 0 0; padding-left:1.5rem; }
.prose li + li{ margin-top:.5rem; }
.prose li::marker{ color:var(--dimmer); }

.prose blockquote{
  margin:2rem 0 0; padding:.2rem 0 .2rem 1.35rem;
  border-left:1px solid var(--acc-dim);
  color:var(--dim); font-style:italic;
}
.prose blockquote p{ margin:0; }

.prose hr{ border:0; border-top:1px solid var(--rule); margin:2.75rem 0 0; }

/* Any picture dropped into a post lands on the same paper stock as the
   plate, so screenshots and line-art both read as plates in a book
   rather than as loose files pasted into the page. */
.prose figure{ margin:2.25rem 0 0; }
.prose img{
  display:block; width:100%; height:auto;
  background:var(--plate); padding:1.25rem;
}
.prose figcaption{
  margin-top:.75rem; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dimmer);
}

.prose code{
  font-family:var(--mono); font-size:.88em;
  background:var(--bg-lift); border:1px solid var(--rule-soft);
  padding:.1em .38em; color:var(--fg);
}
.prose pre{
  margin:1.75rem 0 0; padding:1.1rem 1.25rem;
  background:var(--bg-lift); border:1px solid var(--rule);
  overflow-x:auto; font-size:13px; line-height:1.65;
}
.prose pre code{ background:none; border:0; padding:0; font-size:inherit; }

.prose table{
  display:block; overflow-x:auto; border-collapse:collapse;
  width:100%; font-size:13px;
}
.prose th,.prose td{
  border-bottom:1px solid var(--rule-soft); padding:.6rem .9rem .6rem 0;
  text-align:left; vertical-align:top;
}
.prose th{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-weight:400;
}
.prose td{ font-variant-numeric:tabular-nums; }

/* rouge - kept near-monochrome so code sits inside the palette */
.prose .highlight .c,.prose .highlight .c1,.prose .highlight .cm{
  color:var(--dimmer); font-style:italic;
}
.prose .highlight .k,.prose .highlight .kd,.prose .highlight .kn,.prose .highlight .kr{ color:#FFFFFF; }
.prose .highlight .s,.prose .highlight .s1,.prose .highlight .s2,.prose .highlight .sb{ color:var(--acc); }
.prose .highlight .nf,.prose .highlight .nc{ color:var(--fg); }
.prose .highlight .m,.prose .highlight .mi,.prose .highlight .mf{ color:var(--acc); }
.prose .highlight .nt,.prose .highlight .na{ color:var(--dim); }
.prose .highlight .o,.prose .highlight .p{ color:var(--dim); }

/* ---- plate -------------------------------------------------
   The one loud moment on an otherwise near-black site: a full-bleed
   flat-colour panel carrying an illustration and a ghosted wordmark.
   Artwork is white line-art on black, inverted (not blended) so it prints
   as ink on the light stock.

   To make this a fixed backdrop that the dark page scrolls over instead of
   a closing panel, give .plate `position:sticky; bottom:0; z-index:-1` and
   drop the border-top. Worth doing once the index is long enough to give the
   effect room - below about eight entries it barely triggers.
   ------------------------------------------------------------ */
.plate ::selection{ background:var(--plate-fg); color:var(--plate); }
.plate{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--plate);
  color:var(--plate-fg);
  border-top:1px solid var(--rule);
  padding:clamp(3rem,9vw,6rem) 0 0;
}
.plate-ghost{
  position:absolute; left:50%; top:38%;
  transform:translate(-50%,0);
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  font-weight:300;
  font-size:clamp(5rem,21vw,17rem);
  line-height:.82; letter-spacing:-0.04em; text-align:center;
  color:var(--plate-ghost);
  white-space:nowrap; pointer-events:none; user-select:none;
  z-index:0;
}
.plate-in{ position:relative; z-index:2; text-align:center; }
.plate-eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--plate-fg); opacity:.72;
  margin:0 auto 1.5rem; padding-bottom:1.25rem;
  max-width:34ch; border-bottom:1px solid var(--plate-rule);
}
.plate-title{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
  font-weight:300;
  font-size:clamp(2.4rem,8vw,5.5rem);
  line-height:1; letter-spacing:.01em; text-transform:uppercase;
  margin:0 auto; max-width:16ch; text-wrap:balance;
}
.plate-sub{
  margin:1.5rem auto 0; max-width:52ch;
  font-size:11.5px; line-height:1.9; letter-spacing:.14em;
  text-transform:uppercase; color:var(--plate-fg); opacity:.86;
}
.btn{
  display:inline-block; margin-top:2rem;
  background:var(--plate-fg); color:var(--plate);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:.85rem 1.6rem;
  transition:background 80ms linear, color 80ms linear;
}
.btn:hover{ background:var(--plate); color:var(--plate-fg); box-shadow:inset 0 0 0 1px var(--plate-fg); }

.plate-art{
  position:relative; z-index:1;
  display:block; margin:clamp(1.5rem,4vw,2.5rem) auto -1px;
  max-width:min(560px,82%); height:auto;
  filter:invert(1);
}
.plate-foot{
  position:relative; z-index:2;
  border-top:1px solid var(--plate-rule);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1rem; padding:1.25rem 0 1.5rem;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--plate-fg); opacity:.7; font-variant-numeric:tabular-nums;
}
.plate-foot .pf-r{ text-align:right; line-height:1.7; }
.plate-foot a{ border-bottom:1px solid var(--plate-rule); }
.plate-foot a:hover{ border-color:var(--plate-fg); }
.plate-foot span{ opacity:1; }
/* no artwork yet: keep the panel from collapsing */
.plate.is-bare{ padding-bottom:clamp(2rem,6vw,3.5rem); }
.plate.is-bare .plate-ghost{ top:auto; bottom:-4%; }

/* ---- cover image on a document ----------------------------- */
.cover{
  margin:0 0 2.5rem; background:var(--plate);
  overflow:hidden; display:flex; justify-content:center;
}
.cover img{ display:block; max-width:100%; height:auto; }
/* Opt-in, via `cover_lineart: true` in front matter. White line-art on black
   is inverted so it sits on the light stock; a photograph or a screenshot
   must never get this, or it renders as a negative. */
.cover.is-lineart img{ filter:invert(1); }

/* ---- pager ------------------------------------------------- */
.pager{
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between;
  margin-top:4rem; border-top:1px solid var(--rule); padding-top:1.5rem;
}
.pager a{ display:block; max-width:24ch; transition:color 80ms linear; }
.pager .pager-r{ text-align:right; margin-left:auto; }
.pager .eyebrow{ display:block; margin-bottom:.4rem; }
.pager-t{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 24;
  font-size:1.05rem; line-height:1.25; letter-spacing:-0.02em;
}
.pager a:hover .pager-t{ color:var(--acc); }

/* ---- footer ------------------------------------------------ */
footer{ border-top:1px solid var(--rule); margin-top:1rem; }
.foot-in{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  padding:1.6rem 0 3.5rem;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dimmer); font-variant-numeric:tabular-nums;
}
.foot-links{ display:flex; gap:1.4rem; }
.foot-links a{ color:var(--dim); transition:color 80ms linear; }
.foot-links a:hover{ color:var(--acc); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---- print --------------------------------------------------
   Someone printing a post wants the text, not the instrument
   panel. Ink on paper, chrome removed, link targets spelled out.
   ------------------------------------------------------------ */
@media print{
  :root{
    color-scheme:light;
    --bg:#FFFFFF; --bg-lift:#FFFFFF; --fg:#000000;
    --dim:#333333; --dimmer:#555555;
    --rule:#CCCCCC; --rule-soft:#DDDDDD; --acc:#000000;
  }
  .rail,.readout,.plate,.pager,footer,.skip{ display:none; }
  body{ font-size:11pt; line-height:1.5; }
  .doc{ padding:0; }
  .prose{ max-width:none; }
  .prose img{ background:none; padding:0; filter:none; }
  .prose a{ border-bottom:0; text-decoration:underline; }
  .prose a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:9pt; color:#555555; word-break:break-all;
  }
  .prose h2,.prose h3,.doc-head h1{ break-after:avoid; }
  .prose pre,.prose blockquote,.prose table{ break-inside:avoid; }
}