/* ------------------------------------------------------------------
   Fonts. All three are SIL OFL 1.1 and self-hosted — no third-party
   requests, no tracking, nothing that can disappear. Licence text is
   in /fonts/. See /fonts/README.txt for what each one is doing here.

   Jost*          Futura lineage, 1927 geometric — panel lettering
   IBM Plex Mono  IBM's type programme — data and labels
   Source Serif 4 reading text
   ------------------------------------------------------------------ */
@font-face{
  font-family:"Jost";src:url("/fonts/jost-var.woff2") format("woff2-variations"),
                        url("/fonts/jost-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plex Mono";src:url("/fonts/plexmono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plex Mono";src:url("/fonts/plexmono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Source Serif";src:url("/fonts/sourceserif-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Source Serif";src:url("/fonts/sourceserif-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Source Serif";src:url("/fonts/sourceserif-400i.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

/* ==================================================================
   bmoyer.net

   Direction: laboratory instrument panel, c. 1958. Bakelite chassis,
   silkscreened panel lettering, amber indicator lamps, oscilloscope
   graticule. Dark by design rather than as an inverted light theme —
   the palette starts from a warm near-black instead of grey.

   Type: a grotesque for panel lettering (Helvetica is 1957, which is
   the right year), a serif for reading, mono for data. No web fonts:
   nothing to load, nothing to leak, nothing to rot.
   ================================================================== */

:root{
  /* chassis */
  --chassis:   #15120F;   /* warm near-black, the panel itself      */
  --panel:     #1D1915;   /* raised surface: cards, code, tracks    */
  --panel-hi:  #262019;   /* hover / active surface                 */
  --score:     #332B22;   /* hairlines, engraved divisions          */
  --score-lit: #453A2D;

  /* lettering */
  --letter:    #DED6C6;   /* silkscreen cream, main text            */
  --letter-dim:#948B7C;   /* secondary                              */
  --letter-fnt:#6C6559;   /* faint: stamps, footnotes               */

  /* lamps */
  --amber:     #E5A03C;   /* indicator amber — links, accents       */
  --amber-lit: #F6C57C;   /* lamp at full brightness — hover        */
  --amber-dim: #8A6529;   /* unlit filament                         */
  --phosphor:  #7FB08A;   /* secondary trace, sparingly             */

  --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace,"SF Mono","IBM Plex Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --serif: "Source Serif", Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;

  --measure:36rem; --wide:56rem; --shell:84rem;
  --gut:clamp(1.1rem,4vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--chassis)}

body{
  margin:0;background:var(--chassis);color:var(--letter);
  font-family:var(--serif);
  font-size:clamp(1.04rem,1rem+.24vw,1.16rem);
  /* light-on-dark blooms, so give it more air and less weight */
  line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}

/* ---------------- panel lettering ---------------------------------
   Silkscreened labels: grotesque, uppercase, widely tracked, small.
   Used for every section head and eyebrow on the site.              */
.eyebrow,h2.rule,.clab,.label,.tag,.bar nav a,.meta dt,.toc-h,.prose th,.callout b,.badge{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.2em;   /* Jost is wide; give the caps more air */
  font-weight:600;       /* heavier than Helvetica needed — silkscreen weight */
}
.eyebrow{font-size:.64rem;color:var(--amber);margin:0}
h2.rule{
  font-size:.65rem;color:var(--letter-dim);margin:0 0 1.2rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--score);
  position:relative;
}
/* engraved-lamp tick at the left of every section division */
h2.rule::after{
  content:"";position:absolute;left:0;bottom:-1px;width:2.2rem;height:1px;
  background:var(--amber);opacity:.75;
}

/* ---------------- links ---------------- */
a{color:var(--amber);text-decoration:none;
  border-bottom:1px solid var(--amber-dim);
  transition:color 130ms ease,border-color 130ms ease}
a:hover{color:var(--amber-lit);border-bottom-color:var(--amber-lit)}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:1px}

/* ---------------- chassis bar ---------------- */
.bar{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
  padding:1.3rem 0 1.1rem;border-bottom:1px solid var(--score);
}
.bar .who{
  font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.01em;
  color:var(--letter);border:0;display:flex;align-items:center;gap:.6rem;
}
/* power-on indicator */
.bar .who::before{
  content:"";width:.42rem;height:.42rem;border-radius:50%;
  background:var(--amber);box-shadow:0 0 6px var(--amber);flex:none;
}
.bar nav{margin-left:auto;display:flex;gap:1.3rem;flex-wrap:wrap}
.bar nav a{font-size:.62rem;color:var(--letter-fnt);border:0}
.bar nav a:hover{color:var(--amber-lit)}
.bar nav a[aria-current]{color:var(--letter)}
.bar nav a[aria-current]::after{
  content:"";display:block;height:1px;background:var(--amber);margin-top:.3rem;
}

/* ---------------- home ---------------- */
.home header{padding:clamp(2.5rem,7vw,5rem) 0 0}
.home h1{
  font-family:var(--sans);font-weight:600;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(2rem,.8rem+5vw,5.5rem);margin:1.2rem 0 0;color:var(--letter);
}
.standfirst{max-width:30ch;margin:1.2rem 0 0;line-height:1.45;
            color:var(--letter-dim);font-size:clamp(1.05rem,.95rem+.6vw,1.45rem)}
@media(min-width:60rem){
  .masthead{display:grid;grid-template-columns:1fr minmax(20rem,26rem);
            gap:0 4rem;align-items:end}
  .home h1{margin-bottom:0}
  .standfirst{max-width:none;margin-top:0;padding-bottom:.5em}
}

/* ---------------- oscilloscope ---------------------------------- */
.record{
  margin:clamp(2rem,5vw,3.5rem) 0 .9rem;
  padding:clamp(.9rem,2.5vw,1.4rem);
  background:#100E0B;
  border:1px solid var(--score);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), inset 0 0 40px rgba(0,0,0,.6);
}
.record svg{display:block;width:100%;height:auto}
.grat{stroke:var(--score-lit);stroke-width:.5;vector-effect:non-scaling-stroke;opacity:.55}
.grat-major{stroke:var(--score-lit);stroke-width:.8;vector-effect:non-scaling-stroke;opacity:.85}
.trace{fill:none;stroke:var(--amber);stroke-width:1.15;stroke-linejoin:round;
       vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(229,160,60,.45))}
.band{fill:var(--amber);opacity:.10}
.tick{stroke:var(--phosphor);stroke-width:1;stroke-dasharray:3 3;
      vector-effect:non-scaling-stroke;opacity:.8}
.glyph{font-family:var(--mono);font-size:9px;fill:var(--phosphor);letter-spacing:.08em}
.caption{font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--letter-fnt);
         max-width:62ch;margin:0 0 clamp(2.5rem,6vw,4.5rem)}

/* ---------------- home body ---------------- */
@media(min-width:60rem){
  .body{display:grid;grid-template-columns:minmax(13rem,16rem) minmax(0,1fr);
        gap:0 clamp(3rem,6vw,6rem);align-items:start}
  .rail{position:sticky;top:2.5rem}
}
.rail{margin:0 0 3rem}
.contact{list-style:none;margin:0;padding:0;font-family:var(--mono);
         font-size:.78rem;line-height:1.5}
.contact li{margin:0 0 .9rem}
.contact .label{display:block;color:var(--letter-fnt);font-size:.58rem;
                margin-bottom:.2rem}
.home section{margin:0 0 clamp(2.5rem,6vw,4rem)}
.home p{max-width:var(--measure);margin:0 0 1.15rem;color:var(--letter)}
.home p:last-child{margin-bottom:0}

/* ---------------- entry lists ---------------- */
.entries{list-style:none;margin:0;padding:0}
.entries li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 1.5rem;
            padding:.95rem 0;border-bottom:1px solid var(--score)}
.entries li:last-child{border-bottom:0}
@media(min-width:72rem){
  .entries li{grid-template-columns:5.5rem minmax(0,1fr) 14rem}
  .entries .where{font-family:var(--mono);font-size:.7rem;padding-top:.45em}
}
@media(max-width:32rem){
  .entries li{grid-template-columns:1fr;gap:.2rem}
  .when{padding-top:0 !important}
}
.when{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--amber-dim);
      padding-top:.45em;font-variant-numeric:tabular-nums}
.what{margin:0;max-width:46ch}
.where{display:block;color:var(--letter-fnt);font-size:.9em}

/* ---------------- list pages --------------------------------------
   Constrained and centred rather than pinned to the left of a wide
   shell. The date column carries the left edge; descriptions get a
   real measure instead of running the full window width.          */
.list-shell{max-width:74rem;margin:0 auto}
.notes-head{padding:clamp(2rem,6vw,3.5rem) 0 0}
.notes-head h1{font-family:var(--sans);font-weight:600;letter-spacing:-.035em;line-height:1.02;
               font-size:clamp(1.7rem,1.1rem+2.6vw,3rem);margin:.9rem 0}
.lede{max-width:38rem;margin:0 0 2.5rem;color:var(--letter-dim)}
.posts{list-style:none;margin:0;padding:0}
.posts li{border-top:1px solid var(--score);padding:1.5rem 0}
.posts li:last-child{border-bottom:1px solid var(--score)}
.pi{display:grid;gap:.35rem 2rem}
@media(min-width:52rem){.pi{grid-template-columns:8rem minmax(0,1fr);align-items:baseline}}
.pt{font-family:var(--sans);font-size:1.14rem;font-weight:600;letter-spacing:-.025em;
    border:0;color:var(--letter);display:inline-block;max-width:38rem}
.pt:hover{color:var(--amber-lit)}
.pd{margin:.4rem 0 .6rem;max-width:40rem;color:var(--letter-dim)}
.tags{display:inline-flex;gap:.4rem;flex-wrap:wrap}
.tag{font-size:.56rem;padding:.18rem .45rem;border:1px solid var(--score-lit);
     border-radius:1px;color:var(--letter-fnt)}
a.tag:hover{color:var(--amber-lit);border-color:var(--amber-dim)}

/* ---------------- single post -------------------------------------
   A 36rem column of prose inside an 84rem shell leaves a thousand
   pixels of nothing on a 16:9 display. The horizontal space goes to
   a sticky rail carrying the metadata and a table of contents, and
   the prose column sits beside it rather than adrift at the left.  */
article.post{padding:clamp(2rem,5vw,3.5rem) 0 0}
.post-grid{max-width:74rem;margin:0 auto}

@media(min-width:62rem){
  .post-grid{
    display:grid;
    grid-template-columns:13rem minmax(0,1fr);
    gap:0 clamp(3rem,5vw,5rem);
    align-items:start;
  }
  .post-rail{position:sticky;top:2.5rem}
}

.post-rail{margin:0 0 2.5rem}
.post-rail .eyebrow{margin-bottom:1.1rem}
.meta{margin:0 0 1.8rem;font-family:var(--mono);font-size:.7rem;line-height:1.55}
.meta dt{font-family:var(--sans);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;
         color:var(--letter-fnt);margin:0 0 .2rem}
.meta dd{margin:0 0 .95rem;color:var(--letter-dim);font-variant-numeric:tabular-nums}
.meta dd:last-child{margin-bottom:0}
.meta .tags{display:flex;gap:.35rem;flex-wrap:wrap}

.toc{border-top:1px solid var(--score);padding-top:1rem}
.toc-h{font-family:var(--sans);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;
       color:var(--letter-fnt);margin:0 0 .7rem}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 .5rem;line-height:1.4}
.toc ul ul{margin:.45rem 0 0 .8rem}
.toc a{font-family:var(--mono);font-size:.68rem;color:var(--letter-dim);border:0;
       display:block}
.toc a:hover{color:var(--amber-lit)}
/* scroll-margin so an anchored heading is not glued to the viewport top */
.prose h2,.prose h3{scroll-margin-top:2rem}

.ph{max-width:var(--measure);margin:0 0 clamp(1.8rem,4vw,2.6rem)}
article h1{font-family:var(--sans);font-weight:600;letter-spacing:-.035em;line-height:1.06;
           font-size:clamp(1.6rem,1.1rem+2.4vw,2.9rem);margin:0 0 .9rem;color:var(--letter)}
.dek{font-size:1.08em;color:var(--letter-dim);margin:0;line-height:1.55}

.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1.2rem}
.prose h2{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.2em;
          text-transform:uppercase;color:var(--letter-dim);margin-top:2.8rem;
          padding-bottom:.6rem;border-bottom:1px solid var(--score);position:relative}
.prose h2::after{content:"";position:absolute;left:0;bottom:-1px;width:2.2rem;height:1px;
                 background:var(--amber);opacity:.75}
.prose h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;margin-top:2.1rem;
          letter-spacing:-.015em;color:var(--letter)}
.prose strong{font-weight:600;color:#F0E9DB}
.prose em{color:var(--letter)}
.prose blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.3rem;
                  border-left:2px solid var(--amber);font-size:1.05em;color:var(--letter)}
.prose blockquote p{margin:0}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--panel);
            color:var(--amber-lit);padding:.12em .34em;border-radius:2px}
.prose pre{background:var(--panel);padding:1rem 1.1rem;overflow-x:auto;border-radius:2px;
           border:1px solid var(--score);font-family:var(--mono);font-size:.78rem;line-height:1.65}
.prose pre code{background:none;padding:0;color:var(--letter);font-size:inherit}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li::marker{color:var(--amber-dim)}
.prose li+li{margin-top:.45rem}
.prose hr{border:0;border-top:1px solid var(--score);margin:2.6rem 0}

/* tables and figures escape the reading measure */
/* tables and figures break out of the reading measure to fill the column */
.prose .wide,.prose figure,.prose table{max-width:min(var(--wide),100%)}
@media(min-width:62rem){.prose .wide,.prose figure{width:calc(100% + 8rem);max-width:none}
  .prose .wide table{max-width:none}}
.prose table{border-collapse:collapse;width:100%;font-family:var(--mono);
             font-size:.76rem;font-variant-numeric:tabular-nums}
.prose caption{caption-side:bottom;font-family:var(--mono);font-size:.66rem;
               color:var(--letter-fnt);text-align:left;padding-top:.7rem;line-height:1.65;
               max-width:var(--measure)}
.prose th{text-align:left;font-family:var(--sans);font-weight:500;font-size:.58rem;
          letter-spacing:.16em;text-transform:uppercase;color:var(--letter-fnt);
          border-bottom:1px solid var(--score-lit);padding:.6rem .8rem .5rem 0}
.prose td{padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--score);color:var(--letter)}
.prose tbody tr:last-child td{border-bottom:0}
.prose td.num,.prose th.num{text-align:right;padding-right:0}
.prose table td:first-child{color:var(--letter-dim)}

.prose figure{margin:2.2rem 0}
.prose figure img{display:block;width:100%;height:auto;background:var(--panel)}
.prose figcaption{font-family:var(--mono);font-size:.66rem;color:var(--letter-fnt);
                  line-height:1.7;padding-top:.7rem;max-width:var(--measure)}
.ph-img{aspect-ratio:3/2;
        background:repeating-linear-gradient(45deg,var(--panel) 0 10px,#231D17 10px 20px);
        border:1px solid var(--score);
        display:flex;align-items:center;justify-content:center;font-family:var(--mono);
        font-size:.68rem;color:var(--letter-fnt);letter-spacing:.06em}

.callout{background:var(--panel);border:1px solid var(--score);border-left:2px solid var(--amber);
         padding:1rem 1.2rem;font-family:var(--mono);font-size:.75rem;line-height:1.75;
         max-width:var(--wide);color:var(--letter-dim)}
.callout b{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;
           text-transform:uppercase;color:var(--amber);margin-bottom:.5rem;font-weight:500}

.footnotes{margin-top:3.2rem;padding-top:1.1rem;border-top:1px solid var(--score);
           max-width:var(--measure);font-size:.84rem;color:var(--letter-fnt)}
.footnotes ol{padding-left:1.15rem}
.footnotes a{border:0}
.reply{margin-top:3.2rem;padding-top:1.1rem;border-top:1px solid var(--score);
       max-width:var(--measure);font-family:var(--mono);font-size:.75rem;
       color:var(--letter-fnt);line-height:1.8}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--score);margin-top:clamp(3rem,7vw,5rem);
      padding:1.5rem 0 3.5rem;font-family:var(--mono);font-size:.66rem;
      color:var(--letter-fnt);line-height:1.9}
.foot a{border:0;color:var(--letter-fnt)}
.foot a:hover{color:var(--amber-lit)}

::selection{background:var(--amber-dim);color:#0F0D0B}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}