/* 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-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 */
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Departure Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.6;
  padding:48px 20px;
  -webkit-font-smoothing:none;   /* crisp pixels */
}

/* 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);line-height:1.3;letter-spacing:.01em;font-weight:normal}

/* ============================================================= 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:1rem;letter-spacing:.06em}
.site-title:hover{color:var(--red);text-decoration:none}
.site-tagline{display:block;margin-top:.35rem;color:var(--dim);font-size:.82rem}

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:1rem}
.post-link:hover{color:var(--red);text-decoration:none}
.post-meta{
  margin-top:.4rem;color:var(--dim);font-size:.76rem;
  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:.7rem;text-transform:lowercase;letter-spacing:.02em;
}

.site-footer{
  max-width:560px;margin:2rem auto 0;padding:1.6rem 0 0;
  color:var(--dim);font-size:.76rem;border-top:1px solid var(--rule);
}

/* ===================================================== POST — DOT-MATRIX PRINTOUT */
body.post-page{padding:32px 16px}
/* 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 backline, sheet, and footer */
.shell{max-width:1200px;margin:0 auto}

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

.sheet{
  width:100%;
  background:var(--sheet);
  display:grid;grid-template-columns:56px 1fr 56px;
}
/* tractor-feed holes: punch bg-coloured circles out of the sheet edges */
.feed{
  border-right:1px dashed var(--rule);
  background-image:radial-gradient(circle at 50% 24px, var(--bg) 7px, transparent 7px);
  background-size:100% 48px;
}
.feed.right{border-right:0;border-left:1px dashed var(--rule)}
/* 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{padding:40px 28px;min-width:0}

/* one type size throughout; markdown-ish # / ## / ### prefixes via CSS */
.post-page .post-title{
  color:var(--red);font-size:2rem;font-weight:normal;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;
}
.post-page .post-title::before{content:"# ";color:var(--dim)}

.post-page .meta{color:var(--dim)}
.post-page hr{border:0;border-top:1px solid var(--rule);margin:24px 0}

.post-page .post-body{font-size:1rem}
.post-page .post-body h1,
.post-page .post-body h2,
.post-page .post-body h3{
  color:var(--red);font-size:1rem;font-weight:normal;
  letter-spacing:.06em;text-transform:uppercase;margin:28px 0 12px;
}
.post-page .post-body h2::before{content:"## ";color:var(--dim)}
.post-page .post-body h3::before{content:"### ";color:var(--dim)}
.post-page .post-body p{margin:12px 0;overflow-wrap:anywhere}
.post-page .post-body a{text-decoration:none}
.post-page .post-body a:hover{color:var(--red);text-decoration:none}
.post-page .post-body strong{color:var(--head)}

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

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

.post-page .post-body pre{
  border:1px solid var(--rule);padding:12px;margin:16px 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-left:1px solid var(--rule);padding-left:2ch;color:var(--dim);margin:16px 0;
}
.post-page .post-body blockquote p{margin:8px 0}

/* ---- 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:16px 0}
.post-page .post-body iframe,
.post-page .post-body embed,
.post-page .post-body object{max-width:100%;margin:16px 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:16px 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:28px;font-size:.9rem;
}
.nav-next{margin-left:auto;text-align:right}

.printout-footer{margin:16px 0 0;color:var(--dim)}

/* ---- math (KaTeX) — keep its own font, just contain overflow ---- */
.math-display{margin:1.5rem 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:600px){
  .sheet{grid-template-columns:20px 1fr 20px}
  .feed{background-size:100% 40px;background-position:50% 20px}
  .page{padding:28px 16px}
  .backline,.printout-footer{padding:0 4px}
}