/* yap.madebybark.com
   - index/listing: shares the madebybark.com landing aesthetic
   - individual posts: continuous-form / tractor-feed dot-matrix printout
   Self-hosted Departure Mono (pixel), true-black, cyan links / red focus. */

@font-face{
  font-family:'Departure Mono';
  src:url('/fonts/DepartureMono-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:normal;
  font-display:swap;
}

:root{
  --bg:#000;         /* true black background */
  --sheet:#0d0d0d;   /* printout sheet surface */
  --fg:#e6e6e6;      /* body text */
  --head:#f5f5f5;    /* near-white — index headings */
  --dim:#6f6f6f;     /* secondary text / meta */
  --rule:#242424;    /* borders / rules */
  --cyan:#00bbbb;    /* cyan — signals "you can interact with this" */
  --red:#ff3b30;     /* red  — hover / keyboard-focus / active */
  --code-bg:#0e0e0e; /* near-black — code surfaces */
  --type-small:.5rem;
  --type-base:1rem;
  --type-large:2rem;
  --type-xlarge:4rem;
  --type-display:8rem;
  --line-small:1rem;
  --line-base:1.5rem;
  --line-large:2rem;
  --line-xlarge:4rem;
  --line-display:8rem;
  --tracking-ui:0em;
  --tracking-regular:.02em;
  --tracking-bold:-.035em;
  --tracking-meta:.08em;
  --tracking-key:.04em;
  /* 10-cpi tractor-feed system. The live print face is 1rem, so one
     character pitch is .625rem (10px at the default root size). */
  --print-font-size:1rem;
  --print-pitch:.625rem;
  --sheet-columns:95;
  --machine-columns:80;
  --prose-columns:80;
  --sheet-width:calc(var(--print-pitch) * var(--sheet-columns));
  --machine-width:calc(var(--print-pitch) * var(--machine-columns));
  --prose-width:calc(var(--print-pitch) * var(--prose-columns));
  --outer-margin:calc((var(--sheet-width) - var(--machine-width)) / 2);
  --hole-pitch:calc(var(--print-pitch) * 5);
  --hole-size:calc(var(--print-pitch) * 1.56);
  --hole-inset:calc(var(--print-pitch) * 2.36);
  --tear-strip-width:calc(var(--print-pitch) * 5);
  --document-index-width:18rem;
  --layout-gap:2rem;
  --print-line:2.5rem;
  --paragraph-gap:calc(var(--print-line) * 1);
  --section-gap:calc(var(--print-line) * 3);
  --print-rule:calc(var(--print-pitch) * .1);
  --fold-crease:calc(var(--print-pitch) * .2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:1rem;font-synthesis:none}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Departure Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--type-base);
  font-weight:400;
  line-height:var(--line-base);
  letter-spacing:var(--tracking-regular);
  padding:48px 20px;
}

/* interactive = cyan at rest, red on focus (hover / keyboard / active) */
a{color:var(--cyan);text-decoration:none}
a:hover,a:active{color:var(--red);text-decoration:underline}
a:focus-visible,:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}

h1,h2,h3{color:var(--head);font-weight:700;letter-spacing:var(--tracking-bold)}
h1{font-size:var(--type-xlarge);line-height:var(--line-xlarge)}
h2{font-size:var(--type-large);line-height:var(--line-large)}
h3{font-size:var(--type-base);line-height:var(--line-base)}

/* ============================================================= INDEX / LIST */
.site-header{
  max-width:560px;margin:0 auto;
  padding:0 0 1.4rem;
  border-bottom:1px solid var(--rule);
}
.site-title{display:block;color:var(--cyan);font-size:var(--type-base);font-weight:700;line-height:var(--line-base);letter-spacing:var(--tracking-bold)}
.site-title:hover{color:var(--red);text-decoration:none}
.site-tagline{display:block;margin-top:.35rem;color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta)}

main{max-width:560px;margin:0 auto;padding:0 0 3rem}

.post-list{list-style:none;margin:1.8rem 0 0;border-top:1px solid var(--rule)}
.post-item{padding:.95rem 0;border-bottom:1px solid var(--rule)}
.post-link{color:var(--cyan);font-size:var(--type-base);font-weight:400;line-height:var(--line-base);letter-spacing:var(--tracking-ui)}
.post-link:hover{color:var(--red);font-weight:700;letter-spacing:var(--tracking-ui);text-decoration:none}
.post-meta{
  margin-top:.4rem;color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta);
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
}
.sep{color:var(--dim);opacity:.7}
.tag{
  color:var(--dim);border:1px solid var(--rule);
  padding:.05rem .45rem;font-size:var(--type-small);font-weight:300;line-height:var(--line-small);text-transform:lowercase;letter-spacing:var(--tracking-meta);
}

.site-footer{
  max-width:560px;margin:2rem auto 0;padding:1.6rem 0 0;
  color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta);border-top:1px solid var(--rule);
}

/* ===================================================== POST — DOT-MATRIX PRINTOUT */
body.post-page{padding:2rem 1rem}
/* posts drive their own width via .shell — neutralize the index's <main> cap */
body.post-page main{max-width:none;margin:0;padding:0}

/* single centering context for the detached index and independent paper */
.shell{max-width:calc(var(--document-index-width) + var(--layout-gap) + var(--sheet-width));margin:0 auto}

.article-layout{
  display:grid;grid-template-columns:var(--document-index-width) minmax(0,var(--sheet-width));gap:var(--layout-gap);align-items:start;
}
.paper-column{
  width:min(var(--sheet-width),calc(100vw - var(--document-index-width) - var(--layout-gap)));
  min-width:0;
}
.document-index{min-width:0;align-self:stretch;background:transparent;border:0}
.document-index__inner{
  position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow:auto;padding-right:.5rem;
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
}
.document-index__title{
  max-height:0;overflow:hidden;margin:0;color:var(--red);font-size:var(--type-large);font-weight:700;
  line-height:var(--line-large);letter-spacing:var(--tracking-bold);text-transform:uppercase;overflow-wrap:anywhere;opacity:0;
  transform:translateY(-.35rem);transition:max-height .18s ease,margin .18s ease,opacity .18s ease,transform .18s ease;
}
.document-index.is-title-visible .document-index__title{
  max-height:12rem;margin-bottom:1rem;opacity:1;transform:none;
}
.document-index__metadata{font-size:var(--type-base);font-weight:300;line-height:var(--line-base);letter-spacing:var(--tracking-meta)}
.document-index__metadata>div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.75rem;margin-bottom:.25rem}
.document-index__metadata dt{color:var(--dim)}
.document-index__metadata dd{min-width:0;color:var(--fg);overflow-wrap:anywhere}
.document-index__annotation-control{display:flex;align-items:baseline;gap:.75rem}
.document-index .annotation-toggle,
.mobile-annotation-control .annotation-toggle{
  border:0;padding:0;font-size:inherit;line-height:inherit;letter-spacing:inherit;
}
.document-toc{margin-top:1rem}
.document-index__label{margin-bottom:.45rem;color:var(--dim);font-size:var(--type-base);font-weight:300;line-height:var(--line-base);letter-spacing:var(--tracking-meta)}
.document-toc__list{list-style:none}
.document-toc__list .document-toc__list{padding-left:1rem}
.document-toc__item{margin:.2rem 0}
.document-toc__link{
  display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.25rem;color:var(--dim);
  font-size:var(--type-base);font-weight:300;line-height:var(--line-base);letter-spacing:var(--tracking-regular);
}
.document-toc__link:hover{color:var(--cyan);text-decoration:none}
.document-toc__marker{color:var(--red);opacity:0}
.document-toc__link.is-active{color:var(--fg)}
.document-toc__link.is-active .document-toc__marker{opacity:1}
.mobile-document-index{display:none}
.mobile-annotation-control{display:none}

.backline{margin:0 0 1rem}
.backline a{color:var(--cyan)}
.backline a:hover{color:var(--red);text-decoration:none}

.sheet{
  width:min(var(--sheet-width),calc(100vw - var(--document-index-width) - var(--layout-gap)));
  background:var(--sheet);
  display:grid;grid-template-columns:var(--outer-margin) var(--machine-width) var(--outer-margin);
  position:relative;isolation:isolate;
}
/* tractor-feed holes: punch bg-coloured circles out of the sheet edges */
.feed{
  position:relative;z-index:1;
  background-image:radial-gradient(circle at var(--hole-inset) var(--hole-inset),var(--bg) 0 calc(var(--hole-size) * .5),transparent calc((var(--hole-size) * .5) + var(--print-rule)));
  background-size:100% var(--hole-pitch);background-repeat:repeat-y;
}
.feed::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--tear-strip-width);
  border-left:var(--print-rule) dashed var(--rule);pointer-events:none;
}
.feed.right{
  background-image:radial-gradient(circle at calc(100% - var(--hole-inset)) var(--hole-inset),var(--bg) 0 calc(var(--hole-size) * .5),transparent calc((var(--hole-size) * .5) + var(--print-rule)));
}
.feed.right::after{left:auto;right:var(--tear-strip-width)}
/* min-width:0 lets the 1fr track shrink below its content's intrinsic width,
   so wide children (pre/table) scroll internally instead of widening the sheet
   and side-scrolling the whole page. */
.page{position:relative;z-index:1;padding:var(--print-line) 0;min-width:0}

/* geometric heading hierarchy; markdown-ish # / ## / ### prefixes via CSS */
.post-page .post-title{
  color:var(--red);font-size:var(--type-xlarge);font-weight:700;line-height:calc(var(--print-line) * 2);
  letter-spacing:var(--tracking-bold);text-transform:uppercase;margin-bottom:var(--paragraph-gap);overflow-wrap:anywhere;
}
.post-page .post-title::before{content:"# ";color:var(--dim)}

.post-page .meta{color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta)}
.post-page hr{border:0;border-top:var(--print-rule) solid var(--rule);margin:var(--paragraph-gap) 0}
/* A Markdown `---` is an intentional fanfold/perforation marker. Template
   rules outside the article body remain ordinary document rules. */
.post-page .post-body > hr{
  position:relative;height:var(--fold-crease);border:0;margin:var(--section-gap) 0;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--fg) 18%,transparent) 0 var(--print-rule),transparent calc(var(--print-rule) * 1.45)),
    linear-gradient(to bottom,color-mix(in srgb,var(--bg) 18%,transparent),color-mix(in srgb,var(--fg) 5%,transparent) 48%,color-mix(in srgb,var(--bg) 24%,transparent));
  background-size:var(--print-pitch) 100%,100% 100%;
  background-position:calc(var(--print-pitch) * .5) 50%,0 0;
  background-repeat:repeat-x,no-repeat;
}

.post-page .post-body{
  inline-size:min(80ch,100%);max-inline-size:80ch;
  font-size:var(--print-font-size);font-weight:400;line-height:var(--print-line);letter-spacing:var(--tracking-regular);
  text-align:left;text-wrap:wrap;overflow-wrap:normal;word-break:normal;hyphens:none;
}
.post-page .post-body h1,
.post-page .post-body h2,
.post-page .post-body h3{
  color:var(--red);font-weight:700;
  letter-spacing:var(--tracking-key);text-transform:uppercase;margin:var(--section-gap) 0 var(--paragraph-gap);
}
.post-page .post-body h1{font-size:var(--type-xlarge);line-height:calc(var(--print-line) * 2)}
.post-page .post-body h2{font-size:var(--type-large);line-height:var(--print-line)}
.post-page .post-body h3{font-size:var(--type-base);line-height:var(--print-line)}
.post-page .post-body h2::before{content:"## ";color:var(--dim)}
.post-page .post-body h3::before{content:"### ";color:var(--dim)}
.post-page .post-body :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:4rem}
.post-page .post-body p{margin:var(--paragraph-gap) 0;overflow-wrap:normal;word-break:normal;hyphens:none}
.post-page .post-body a{text-decoration:none}
.post-page .post-body a,
.post-page .post-body code{overflow-wrap:anywhere}
.post-page .post-body a:hover{color:var(--red);text-decoration:none}
.post-page .post-body strong:not(.quote-chat *){
  color:inherit;font-weight:400;letter-spacing:inherit;padding:.02em .13em .08em;margin:0 -.02em;
  background-image:
    linear-gradient(178.7deg,transparent 13%,color-mix(in srgb,var(--cyan) 38%,transparent) 14% 88%,transparent 89%),
    linear-gradient(181.2deg,transparent 24%,color-mix(in srgb,var(--cyan) 18%,transparent) 25% 91%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.post-page .post-body em:not(.quote-chat *){
  color:inherit;font-style:normal;text-decoration:none;padding-bottom:.08em;
  background-image:
    linear-gradient(179.1deg,transparent 0 calc(100% - .11em),color-mix(in srgb,var(--fg) 52%,transparent) calc(100% - .1em) calc(100% - .045em),transparent calc(100% - .035em)),
    linear-gradient(181deg,transparent 0 calc(100% - .075em),color-mix(in srgb,var(--fg) 22%,transparent) calc(100% - .065em) calc(100% - .025em),transparent calc(100% - .015em));
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Enhanced Markdown deletion: the source text remains the selectable,
   semantic layer; empty generated cells paint deterministic ribbon strikes. */
.post-page .post-body del.printer-overprint-del:not(.quote-chat *){
  color:inherit;text-decoration:none;
}
.printer-overprint-del .overprint-word{
  position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap;
}
.printer-overprint-del .overprint-original{opacity:.24}
.printer-overprint-del .overprint-layer{
  position:absolute;inset:0;display:flex;align-items:flex-start;color:var(--fg);
  line-height:inherit;white-space:nowrap;pointer-events:none;user-select:none;
}
.printer-overprint-del .overprint-strike{
  position:relative;display:block;flex:0 0 1ch;inline-size:1ch;block-size:100%;
}
.printer-overprint-del .overprint-strike::before,
.printer-overprint-del .overprint-strike.is-double::after{
  content:attr(data-char);position:absolute;inset:0;display:block;color:var(--fg);
  opacity:var(--overprint-alpha);transform:translate(var(--overprint-x),var(--overprint-y));
}
.printer-overprint-del .overprint-strike.is-double::after{
  opacity:var(--overprint-double-alpha);transform:translate(var(--overprint-x-2),var(--overprint-y-2));
}

/* Inline revision shortcode. Both passes share a grid cell; the longest pass
   establishes width before JavaScript attaches interaction handlers. */
.post-page .post-body .thought-overprint:not(.quote-chat *){
  --overprint-readout-x:0px;
  position:relative;display:inline-grid;grid-template-areas:"overprint";vertical-align:baseline;
  border:0;padding:0;margin:0;background:none;color:inherit;font:inherit;line-height:inherit;
  letter-spacing:inherit;text-align:left;appearance:none;cursor:help;
}
.thought-overprint__collision{display:inline-grid;grid-area:overprint;vertical-align:baseline}
.thought-overprint__pass{
  grid-area:1 / 1;color:var(--fg);white-space:pre;transition:opacity 70ms steps(1,end),transform 70ms steps(1,end);
}
.thought-overprint__pass--first{opacity:.44}
.thought-overprint__pass--final{opacity:.76;transform:translate(.06rem,-.04rem)}
.thought-overprint__readout{
  position:absolute;z-index:12;inset-block-start:calc(100% + (var(--print-pitch) * .4));inset-inline-start:0;
  width:max-content;max-width:calc(100vw - 2rem);padding:calc(var(--print-pitch) * .5) calc(var(--print-pitch) * .8);
  border:var(--print-rule) solid var(--rule);background:var(--sheet);box-shadow:calc(var(--print-pitch) * .2) calc(var(--print-pitch) * .2) 0 #0009;
  color:var(--fg);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta);
  white-space:nowrap;visibility:hidden;opacity:0;pointer-events:none;
  transform:translateX(var(--overprint-readout-x));transition:opacity 70ms steps(1,end);
}
.thought-overprint__readout span{display:block}
.thought-overprint:hover .thought-overprint__pass--first,
.thought-overprint:focus-visible .thought-overprint__pass--first,
.thought-overprint.is-resolved .thought-overprint__pass--first{opacity:.12;transform:translate(-.04rem,.02rem)}
.thought-overprint:hover .thought-overprint__pass--final,
.thought-overprint:focus-visible .thought-overprint__pass--final,
.thought-overprint.is-resolved .thought-overprint__pass--final{opacity:1;transform:none}
.thought-overprint:hover .thought-overprint__readout,
.thought-overprint:focus-visible .thought-overprint__readout,
.thought-overprint.is-resolved .thought-overprint__readout{visibility:visible;opacity:1}
.thought-overprint:focus-visible{outline:var(--print-rule) solid var(--fg);outline-offset:calc(var(--print-pitch) * .3)}
.thought-overprint__fallback{color:inherit;text-decoration:none}

.post-page .post-body ul{margin:var(--paragraph-gap) 0 var(--paragraph-gap) 3ch}
.post-page .post-body ol{margin:var(--paragraph-gap) 0 var(--paragraph-gap) 3ch}
.post-page .post-body li{margin:0}
.post-page .post-body li::marker{color:var(--dim)}

.post-page .post-body table{border-collapse:collapse;width:100%;margin:var(--paragraph-gap) 0}
.post-page .post-body th,
.post-page .post-body td{border:1px solid var(--rule);padding:6px 10px;text-align:left;font-weight:400}
.post-page .post-body th{color:var(--dim)}

.post-page .post-body pre{
  border:var(--print-rule) solid var(--rule);padding:calc(var(--print-pitch) * 1.2);margin:var(--paragraph-gap) 0;
  overflow-x:auto;max-width:100%;color:var(--fg);background:var(--code-bg);
}
.post-page .post-body code{font:inherit;background:none;padding:0}
.post-page .post-body pre code{background:none;padding:0}
.post-page .post-body blockquote{
  border:0;padding:0;color:inherit;background:transparent;margin:var(--paragraph-gap) 0;
}
.post-page .post-body blockquote::before,
.post-page .post-body blockquote::after{
  display:block;color:color-mix(in srgb,var(--red) 70%,var(--dim));font-size:var(--type-small);font-weight:400;
  line-height:var(--line-small);letter-spacing:var(--tracking-meta);
}
.post-page .post-body blockquote::before{content:"QUOTE";margin-bottom:0}
.post-page .post-body blockquote::after{content:"UNQUOTE";margin-top:0}
.post-page .post-body blockquote>*{margin-left:4ch}
.post-page .post-body blockquote>p{margin:var(--paragraph-gap) 0 var(--paragraph-gap) 4ch}

/* Article references share the annotation-strip interaction, in red. */
.post-page .post-body a.article-ref{
  color:inherit;text-decoration:none;font-weight:400;letter-spacing:inherit;padding:.02em .13em .08em;margin:0 -.02em;
  background-image:
    linear-gradient(178.7deg,transparent 13%,color-mix(in srgb,var(--red) 38%,transparent) 14% 88%,transparent 89%),
    linear-gradient(181.2deg,transparent 24%,color-mix(in srgb,var(--red) 18%,transparent) 25% 91%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.post-page .post-body a.article-ref:hover,
.post-page .post-body a.article-ref:focus{
  color:inherit;text-decoration:none;
}
.post-page .post-body a.article-ref:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.post-page .reference-hairline,
.post-page .reference-hairline:hover,
.post-page .reference-hairline:focus{color:var(--red);text-decoration:none}
.post-page .reference-hairline span{
  width:max-content;max-width:min(28rem,calc(100vw - 5rem));padding:.08rem .25rem;background:var(--sheet);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media (min-width:601px) and (max-width:81.375rem){
  .post-page .post-body{max-width:var(--prose-width)}
}
@media (min-width:81.4375rem){
  .annotation-stage{display:grid;grid-template-columns:var(--machine-width)}
  .post-page .post-body{grid-column:1;min-width:0;max-inline-size:80ch}
  .post-page .post-body > :is(h1,h2,h3,h4,h5,h6,img,video,picture,figure,iframe,embed,object,.embed-16x9),
  .post-page .post-body > p:has(> :is(img,video,picture):only-child),
  .post-page .post-body > p:has(> a:only-child > :is(img,video,picture):only-child){
    width:var(--machine-width);max-width:var(--machine-width);
  }
}
@media (min-width:62.3125rem){
  .post-page .post-body > hr{
    left:calc(var(--outer-margin) * -1);width:var(--sheet-width);max-width:none;
  }
}

/* ---- quote shortcode: stacked chat bubbles ---- */
.quote-chat{
  --quote-fill:#807b76;
  --quote-text:#fff;
  margin:20px 0;
}
.quote-chat--teal{--quote-fill:#00e0e0;--quote-text:#000}
.quote-chat--red{--quote-fill:#ff3d33;--quote-text:#fff}
.quote-chat--orange{--quote-fill:#ffa024;--quote-text:#000}
.quote-chat--yellow{--quote-fill:#ffd138;--quote-text:#000}
.quote-chat--green{--quote-fill:#73ff4d;--quote-text:#000}
.quote-chat--mint{--quote-fill:#5cffd9;--quote-text:#000}
.quote-chat--blue{--quote-fill:#6b72ff;--quote-text:#fff}
.quote-chat--pink{--quote-fill:#ff7ae7;--quote-text:#000}
.quote-sender{
  margin:0 0 4px;padding-left:4px;color:var(--dim);
  font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta);text-transform:uppercase;
}
.quote-chat--right .quote-sender{padding:0 4px 0 0;text-align:right}
.quote-messages{display:flex;flex-direction:column;gap:4px}
.quote-row{display:flex;justify-content:flex-start}
.quote-bubble{
  max-width:82%;padding:10px 16px;background:var(--quote-fill);color:var(--quote-text);
  border:0;border-radius:4px 18px 18px 4px;font-size:var(--type-base);font-weight:400;line-height:var(--line-base);letter-spacing:var(--tracking-regular);overflow-wrap:anywhere;
}
.quote-row:first-child .quote-bubble{border-radius:18px 18px 18px 4px}
.quote-chat--right .quote-row{justify-content:flex-end}
.quote-chat--right .quote-bubble{border-radius:18px 4px 4px 18px}
.quote-chat--right .quote-row:first-child .quote-bubble{border-radius:18px 18px 4px 18px}
.post-page .post-body .quote-bubble p{margin:0}
.post-page .post-body .quote-bubble strong{color:inherit}
.post-page .post-body .quote-bubble a{color:inherit;text-decoration:underline}
.post-page .post-body .quote-bubble a:hover{color:inherit;text-decoration:none}
@media (max-width:600px){
  .quote-bubble{max-width:85%;padding:9px 13px}
}

/* ---- raw html embeds (iframe/video/etc. pasted straight into markdown) ---- */
.post-page .post-body img,
.post-page .post-body video{max-width:100%;height:auto;display:block;margin:var(--paragraph-gap) 0}
.post-page .post-body iframe,
.post-page .post-body embed,
.post-page .post-body object{max-width:100%;margin:var(--paragraph-gap) 0;border:0}
/* embeds that declare a fixed pixel width (YouTube's default share code, etc.)
   shrink to fit the column; wrap in .embed-16x9 for true aspect-ratio scaling */
.post-page .post-body .embed-16x9{position:relative;height:0;padding-bottom:56.25%;margin:var(--paragraph-gap) 0}
.post-page .post-body .embed-16x9 iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;margin:0;
}

.post-nav{
  display:flex;justify-content:space-between;gap:1rem;margin-top:var(--section-gap);font-size:var(--type-small);font-weight:400;line-height:var(--line-small);letter-spacing:var(--tracking-ui);
}
.nav-next{margin-left:auto;text-align:right}

.printout-footer{margin:var(--paragraph-gap) 0 0;color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta)}

/* ---- math (KaTeX) — keep its own font, just contain overflow ---- */
.math-display{margin:var(--paragraph-gap) 0}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.35rem 0}
.katex{font-size:1em}

/* ---- narrow screens: shrink the feed margins (site is best on desktop) ---- */
@media (max-width:81.375rem){
  .shell{max-width:75rem}
  .article-layout{display:block}
  .paper-column{width:100%}
  .sheet{width:min(var(--sheet-width),100%);margin-inline:auto}
  .document-index{display:none}
  .mobile-document-index{display:block;margin:-.5rem 0 1rem;color:var(--fg)}
  .mobile-document-index summary{
    width:max-content;color:var(--cyan);font-size:var(--type-small);font-weight:400;line-height:var(--line-small);
    letter-spacing:var(--tracking-meta);cursor:pointer;
  }
  .mobile-document-index__toc{margin-top:.75rem}
  .mobile-document-index .document-toc__list .document-toc__list{padding-left:1rem}
  .mobile-annotation-control{
    display:flex;align-items:baseline;gap:.75rem;margin-bottom:1rem;color:var(--dim);
    font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta);
  }
}

/* Once the full 95-column sheet itself no longer fits, switch to the compact
   feed treatment. Until this point only the detached index is removed. */
@media (max-width:62.25rem){
  .sheet{
    width:min(100%,calc(var(--machine-width) + (var(--print-pitch) * 6.4)));
    grid-template-columns:calc(var(--print-pitch) * 3.2) minmax(0,var(--machine-width)) calc(var(--print-pitch) * 3.2);
  }
  .feed{
    background-image:radial-gradient(circle at calc(var(--print-pitch) * 2.4) calc(var(--print-pitch) * 2.4),var(--bg) 0 calc(var(--print-pitch) * .7),transparent calc(var(--print-pitch) * .8));
    background-size:100% calc(var(--print-pitch) * 4.8);
  }
  .feed.right{
    background-image:radial-gradient(circle at calc(100% - (var(--print-pitch) * 2.4)) calc(var(--print-pitch) * 2.4),var(--bg) 0 calc(var(--print-pitch) * .7),transparent calc(var(--print-pitch) * .8));
  }
  .feed::after{left:100%}
  .feed.right::after{left:auto;right:100%}
  .page{padding:var(--print-line) 0}
}
@media (max-width:600px){
  .sheet{grid-template-columns:calc(var(--print-pitch) * 2) minmax(0,1fr) calc(var(--print-pitch) * 2)}
  .feed{
    background-image:radial-gradient(circle at calc(var(--print-pitch) * 1) calc(var(--print-pitch) * 2),var(--bg) 0 calc(var(--print-pitch) * .7),transparent calc(var(--print-pitch) * .8));
    background-size:100% calc(var(--print-pitch) * 4);
  }
  .feed.right{
    background-image:radial-gradient(circle at calc(100% - var(--print-pitch)) calc(var(--print-pitch) * 2),var(--bg) 0 calc(var(--print-pitch) * .7),transparent calc(var(--print-pitch) * .8));
  }
  .page{padding:calc(var(--print-pitch) * 2.8) calc(var(--print-pitch) * 1.6)}
  .backline,.printout-footer{padding:0 calc(var(--print-pitch) * .4)}
}

@media (prefers-reduced-motion:reduce){
  .document-index__title{transition:none}
  .reference-hairline{transition:none}
  .thought-overprint__pass,
  .thought-overprint__readout{transition:none}
}

/* ================================================= HOMEPAGE FILTER / LISTING */
.listing-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.rss-link{display:block;width:1.1rem;height:1.1rem;margin-top:.1rem}
.rss-link svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill-rule:evenodd}
.listing-tools{border:1px solid var(--rule);border-top:0}
.post-search{min-height:2.8rem;padding:.65rem .8rem;border-bottom:1px solid var(--rule);color:var(--cyan);display:flex;align-items:center;gap:.55rem}
.post-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--cyan);font:inherit;font-size:var(--type-base);font-weight:400;line-height:var(--line-base);letter-spacing:var(--tracking-ui);caret-color:var(--red)}
.post-search input::placeholder{color:var(--dim);opacity:1;font-weight:300;letter-spacing:var(--tracking-meta)}
.filter-panel{padding:.75rem .8rem .8rem}
.filter-group{border:0}
.filter-group + .filter-group{margin-top:.7rem}
.filter-group legend{color:var(--red);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta);margin-bottom:.35rem}
.filter-options{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .65rem}
.filter-pill{border:0;padding:0;background:none;font:inherit;font-size:var(--type-base);font-weight:400;line-height:var(--line-base);letter-spacing:var(--tracking-ui);text-transform:none;white-space:nowrap;cursor:pointer}
.filter-pill:hover,.filter-pill.is-active{color:var(--cyan);font-weight:700;letter-spacing:var(--tracking-ui);text-decoration:none}
.filter-pill:active{color:var(--red)}
.list-controls{min-height:2.7rem;padding:.75rem 0 .45rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta)}
.sort-toggle{margin-left:auto;white-space:nowrap}
.sort-option{border:0;background:none;color:var(--dim);font:inherit;font-size:var(--type-base);font-weight:400;line-height:var(--line-base);letter-spacing:var(--tracking-ui);cursor:pointer;padding:0}
.sort-option:hover,.sort-option.is-active{color:var(--cyan);font-weight:700;letter-spacing:var(--tracking-ui)}
.sort-option:active{color:var(--red)}
.results-status{color:var(--dim)}
.listing-tools + .list-controls + .post-list{margin-top:0}
.month-divider{padding:.35rem 0;border-bottom:1px solid var(--rule);color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);text-transform:uppercase;letter-spacing:var(--tracking-meta)}
.post-heading{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap}
.post-heading .post-link{font-size:var(--type-base);font-weight:400;line-height:var(--line-base);letter-spacing:var(--tracking-ui);text-transform:uppercase}
.style-tag{border:0;padding:0;white-space:nowrap;text-transform:uppercase}
.post-description{margin-top:.28rem;color:var(--dim);font-size:var(--type-small);font-weight:400;line-height:var(--line-small);letter-spacing:var(--tracking-regular)}
.copy-link{margin-left:auto;border:0;background:none;color:var(--dim);font:inherit;font-size:var(--type-base);font-weight:400;line-height:var(--line-base);letter-spacing:var(--tracking-ui);cursor:pointer}
.copy-link:hover{color:var(--cyan);font-weight:700;letter-spacing:var(--tracking-ui)}
.copy-link:active{color:var(--red)}
.no-results{padding:1.5rem 0;color:var(--dim);font-size:var(--type-small);font-weight:300;line-height:var(--line-small);letter-spacing:var(--tracking-meta)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.taxonomy-page{padding-top:1.8rem}
.taxonomy-title{color:var(--red);font-size:var(--type-small);font-weight:700;line-height:var(--line-small);letter-spacing:var(--tracking-key)}
.taxonomy-terms{list-style:none;margin-top:1rem}
.taxonomy-terms li{padding:.55rem 0;border-bottom:1px solid var(--rule)}
@media (max-width:600px){
  body:not(.post-page){padding:28px 16px}
  .filter-options{gap:.35rem .5rem}
  .post-heading{gap:.35rem .55rem}
  .post-heading .post-link{font-size:var(--type-base)}
}