/* /dispatch — long-form reading.
   The rest of the site is 12–13px monospace at tight measure, which is right for a store and
   wrong for essays. Here the body steps up to 17px with a generous line-height and a ~68ch
   measure, because this is the one place on the site people actually read. */

:root{
  --bg:#0a0b0a; --panel:#141614; --line:#2a2c2e;
  --paper:#e7e4da; --dim:#8a8d8f; --accent:#7c8891;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--paper);font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-weight:300;-webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:0.02em;}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0.05;mix-blend-mode:overlay;
       background:url('/assets/grain.webp') repeat;background-size:64px 64px;}

@font-face{
  font-family:'Ginerin';
  src:url('/assets/fonts/Ginerin-Regular.woff2') format('woff2'),
      url('/assets/fonts/Ginerin-Regular.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap;
}

/* Nav and cart sidebar: render_nav() emits class names every page's CSS is expected to define. */
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:10;}
.nav-left{display:flex;gap:28px;font-size:12px;letter-spacing:0.14em;}
.nav-left a{color:var(--dim);text-decoration:none;transition:color .2s;}
.nav-left a.active{color:var(--paper);border-bottom:1px solid var(--accent);padding-bottom:2px;}
.nav-left a:hover{color:var(--paper);}
.brand{font-family:'Ginerin',ui-monospace,Menlo,monospace;font-size:30px;letter-spacing:0.06em;font-weight:600;position:absolute;left:50%;transform:translateX(-50%);color:inherit;text-decoration:none;display:block;}
.nav-right{display:flex;gap:16px;align-items:center;font-size:11px;color:var(--dim);}
.nav-right a{color:var(--dim);text-decoration:none;letter-spacing:0.1em;transition:color .2s;}
.nav-right a:hover,.nav-right a.active{color:var(--paper);}
.cart-sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.cart-sidebar-backdrop.open{opacity:1;pointer-events:auto;}
.cart-sidebar{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;background:var(--bg);border-left:1px solid var(--line);z-index:91;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;}
.cart-sidebar.open{transform:translateX(0);}
.cart-sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);}
.cart-sidebar-header span{font-size:13px;letter-spacing:0.1em;text-transform:uppercase;}
.cart-sidebar-close{background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer;line-height:1;}
.cart-sidebar-body{flex:1;overflow-y:auto;padding:16px 24px;}
.cart-sidebar-empty{color:var(--dim);font-size:12px;text-align:center;padding:40px 0;}
.cart-sidebar-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line);position:relative;}
.cart-sidebar-thumb{width:56px;height:56px;object-fit:cover;filter:grayscale(0.4);}
.cart-sidebar-thumb-empty{background:linear-gradient(160deg,#141614 0%,#0d0e0d 60%,#0a0b0a 100%);}
.cart-sidebar-name{font-size:12px;}
.cart-sidebar-variation{font-size:10px;color:var(--dim);margin-top:3px;}
.cart-sidebar-qty{display:flex;align-items:center;gap:8px;margin-top:8px;}
.qty-btn{background:var(--panel);border:1px solid var(--line);color:var(--paper);width:22px;height:22px;cursor:pointer;font-family:inherit;font-size:12px;line-height:1;}
.cart-sidebar-line-price{font-size:12px;text-align:right;padding-right:18px;}
.cart-sidebar-remove{position:absolute;top:16px;right:0;background:none;border:none;color:var(--dim);font-size:14px;cursor:pointer;line-height:1;}
.cart-sidebar-footer{padding:20px 24px;border-top:1px solid var(--line);}
.cart-sidebar-subtotal{font-size:13px;margin-bottom:14px;}
.checkout-btn{background:var(--panel);color:var(--paper);border:1px solid var(--line);padding:14px 28px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;display:block;text-align:center;}

/* ---- the stream ----
   Reads as terminal output: left-justified, monospace metrics, an 80-column measure. No fake
   prompt, host or timestamp prefixes — this is the output of the script, not a session
   transcript. Everything below is styled with characters the terminal actually has. */

.dispatch{max-width:none;margin:0;padding:56px 40px 32px;}
.dispatch-inner{max-width:82ch;}          /* 80 columns plus breathing room */
.dispatch-empty{color:var(--dim);font-size:13px;padding:60px 0;}
.dispatch-empty a{color:var(--accent);}

.post{padding-bottom:40px;margin-bottom:40px;}
/* A row of box-drawing characters between entries, the way a log separates records. */
.post::after{
  content:"────────────────────────────────────────────────────────────────────────────────";
  display:block;overflow:hidden;white-space:nowrap;
  color:var(--line);font-size:13px;line-height:1;margin-top:40px;
}
.post:last-child::after,.dispatch-single .post::after{content:none;}

.post-head{margin-bottom:22px;}
.post-date{display:block;font-size:12px;letter-spacing:0.04em;color:var(--dim);text-decoration:none;margin-bottom:6px;}
.post-date:hover{color:var(--accent);}
.post-title{font-size:16px;line-height:1.4;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--paper);}
.post-title a{color:inherit;text-decoration:none;}
.post-title a:hover{color:var(--accent);}

/* 15px/1.65 keeps monospace readable over long passages without losing the fixed-width feel. */
.post-body{font-size:15px;line-height:1.65;color:#cfccc4;max-width:82ch;}
.post-body p{margin-bottom:1.15em;}
.post-body h2,.post-body h3{
  font-size:15px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--paper);margin:2em 0 0.9em;
}
/* Headings announce themselves the way a script does, rather than by changing size. */
.post-body h2::before{content:"## ";color:var(--accent);}
.post-body h3::before{content:"### ";color:var(--accent);}
.post-body a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);}
.post-body a:hover{color:var(--accent);}
.post-body strong{color:var(--paper);font-weight:600;}
.post-body em{color:var(--paper);font-style:italic;}

/* Real character bullets, aligned on the text grid instead of browser list markers. */
.post-body ul,.post-body ol{list-style:none;margin:0 0 1.15em 0;padding:0;}
.post-body ul li{padding-left:2ch;text-indent:-2ch;margin-bottom:0.35em;}
.post-body ul li::before{content:"- ";color:var(--accent);}
.post-body ol{counter-reset:li;}
.post-body ol li{counter-increment:li;padding-left:4ch;text-indent:-4ch;margin-bottom:0.35em;}
.post-body ol li::before{content:counter(li) ". ";color:var(--accent);}

/* Quoted text carries the ">" a mail client would have put there. */
.post-body blockquote{margin:1.5em 0;color:var(--dim);}
.post-body blockquote p{padding-left:2ch;text-indent:-2ch;margin-bottom:0.5em;}
.post-body blockquote p::before{content:"> ";color:var(--accent);}
.post-body code{background:var(--panel);padding:1px 5px;font-size:0.95em;color:var(--paper);}
.post-body pre{background:var(--panel);padding:14px 16px;overflow-x:auto;margin-bottom:1.15em;font-size:13px;line-height:1.5;}
.post-body pre code{background:none;padding:0;}
.post-body hr{border:none;color:var(--line);margin:1.8em 0;}
.post-body hr::before{content:"----------------------------------------";display:block;overflow:hidden;white-space:nowrap;}
.post-body img{max-width:100%;height:auto;display:block;margin:1.5em 0;}

/* The Usenet signature delimiter: two dashes, a space, a newline. Kept literal. */
.post-sig{margin-top:2em;font-size:13px;line-height:1.6;color:var(--dim);white-space:pre-wrap;}
.post-sig::before{content:"-- \A";white-space:pre;color:var(--dim);}

.post-quote{margin-bottom:24px;}
.post-quote p{font-size:16px;line-height:1.6;color:var(--paper);padding-left:2ch;text-indent:-2ch;}
.post-quote p::before{content:"> ";color:var(--accent);}
.post-quote cite{display:block;margin-top:12px;font-size:12px;color:var(--dim);font-style:normal;}
.post-quote cite::before{content:"-- ";color:var(--dim);}

.post-link-card{display:block;border:1px solid var(--line);background:var(--panel);padding:16px 18px;margin-bottom:24px;text-decoration:none;transition:border-color .2s;}
.post-link-card:hover{border-color:var(--accent);}
.post-link-title{display:block;font-size:14px;color:var(--paper);margin-bottom:4px;}
.post-link-host{font-size:11px;letter-spacing:0.06em;color:var(--dim);}

.post-media{margin-bottom:22px;max-width:82ch;}
.post-media img,.post-media video{width:100%;height:auto;display:block;}
.post-media audio{width:100%;}
.post-media figcaption{margin-top:8px;font-size:12px;color:var(--dim);}
.post-media figcaption::before{content:"# ";color:var(--accent);}
.embed iframe{width:100%;border:0;display:block;}
.embed-video iframe{aspect-ratio:16/9;height:auto;}

.dispatch-more{max-width:none;margin:0;padding:0 40px 72px;text-align:left;}
.more-link{display:inline-block;color:var(--dim);text-decoration:none;font-size:12px;letter-spacing:0.06em;border:1px solid var(--line);padding:11px 18px;transition:color .2s,border-color .2s;}
.more-link:hover{color:var(--paper);border-color:var(--accent);}
.dispatch-loading{color:var(--dim);font-size:12px;}

footer{padding:26px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--dim);}
footer a{color:var(--dim);}
footer a:hover{color:var(--paper);}

@media (max-width: 620px){
  .dispatch{padding:36px 20px 20px;}
  .dispatch-more{padding:0 20px 52px;}
  .post{padding-bottom:32px;margin-bottom:32px;}
  .post::after{margin-top:32px;font-size:11px;}
  .post-title{font-size:15px;}
  .post-body{font-size:14.5px;line-height:1.7;}
  .post-quote p{font-size:15px;}
  footer{flex-direction:column;align-items:flex-start;text-align:left;gap:8px;}
}