@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(fonts/big-shoulders-display-700.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(fonts/big-shoulders-display-900.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format("woff2")}

/* Brand kit colors (README). Light = paper, dark = blueprint. */
:root{
  color-scheme:light dark;
  --paper:#EEF3F2; --sheet:#FAFCFB; --ink:#1B2A40; --orange:#EE5F1B; --orange-text:#C9500F;
  --muted:#56687A; --grid-major:#C3D7DB; --grid-minor:#D6E4E7; --rule:#B6C7CB;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D2440; --sheet:#0F2A4A; --ink:#E3EDF6; --orange:#FF7A33; --orange-text:#FF7A33;
    --muted:#9DB4C9; --grid-major:#1D3D62; --grid-minor:#153253; --rule:#2C4D72;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink); background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  font:500 16px/1.6 "IBM Plex Mono",ui-monospace,monospace;
  display:flex; flex-direction:column; align-items:center; padding:16px;
}
a{color:inherit}
a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.sheet{
  width:100%; max-width:880px; margin:auto 0; background:var(--sheet);
  border:3px solid var(--ink); position:relative; overflow:hidden;
}
.corner{
  margin:0; padding:10px 16px; font-size:12px; letter-spacing:.16em; color:var(--muted);
  border-bottom:1px solid var(--rule);
}

.hero{padding:40px 24px 32px; display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.mark{width:128px; height:128px; flex:none}
.mark .ink{fill:var(--ink)} .mark .tee{fill:var(--orange)}
h1{margin:0; font-weight:900}
.t{display:block; font:900 clamp(64px,15vw,124px)/.82 "Big Shoulders Display",sans-serif; letter-spacing:.02em; text-transform:uppercase}
.s{display:block; font:700 clamp(18px,4.2vw,33px)/1 "Big Shoulders Display",sans-serif; letter-spacing:.36em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.tag{margin:14px 0 0; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-text)}

.about{padding:0 24px 32px; max-width:62ch}
.about p{margin:0}

.links{margin:0 -1px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:3px solid var(--ink)}
.links a{
  display:block; padding:20px 24px; text-decoration:none; border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.links a:hover{background:var(--paper)}
.links .k{display:block; font-size:12px; letter-spacing:.14em; color:var(--muted)}
.links .v{display:block; font:700 26px/1.15 "Big Shoulders Display",sans-serif; letter-spacing:.04em; text-transform:uppercase; margin-top:4px}
.links .n{display:block; font-size:13px; color:var(--muted); margin-top:6px; overflow-wrap:anywhere}
.links a:hover .v{color:var(--orange-text)}

.tb{margin:0 -1px -1px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:3px solid var(--ink)}
.tb div{padding:10px 16px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.tb dt{font-size:11px; letter-spacing:.14em; color:var(--muted)}
.tb dd{margin:2px 0 0; font-weight:600; font-size:14px; text-transform:uppercase}

.fine{margin:16px 0 0; font-size:12px; color:var(--muted); text-align:center}

@media (max-width:520px){
  .hero{padding:28px 16px 24px; gap:18px}
  .mark{width:88px; height:88px}
  .about{padding:0 16px 24px}
  .links a{padding:16px}
}

/* ---- blog ---- */
[hidden]{display:none !important}
.corner a{text-decoration:none}
.corner a:hover{color:var(--orange-text)}
.rule-head{margin:0; padding:10px 24px; font:600 12px/1.4 "IBM Plex Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-top:3px solid var(--ink); border-bottom:1px solid var(--rule)}
.page-head{padding:32px 24px 20px}
.page-head p{margin:10px 0 0; max-width:62ch}
.page-title{font:900 clamp(40px,8vw,72px)/.9 "Big Shoulders Display",sans-serif; letter-spacing:.01em; text-transform:uppercase; margin:0}
.post-meta{font-size:13px; color:var(--muted)}
.post-meta a{color:inherit}
.empty{padding:0 24px 32px; color:var(--muted)}

.post-list{list-style:none; margin:0; padding:0; border-top:3px solid var(--ink)}
.latest .post-list{border-top:0}
.post-row a{display:grid; grid-template-columns:110px 1fr; gap:4px 20px; padding:16px 24px; text-decoration:none; border-bottom:1px solid var(--rule)}
.post-row a:hover{background:var(--paper)}
.post-row a:hover .post-name{color:var(--orange-text)}
.post-date{font-size:13px; color:var(--muted); padding-top:4px}
.post-name{font:700 24px/1.15 "Big Shoulders Display",sans-serif; letter-spacing:.03em; text-transform:uppercase}
.post-desc{grid-column:2; font-size:14px; color:var(--muted)}

.prose{padding:8px 24px 32px; max-width:72ch; font-size:15px; line-height:1.75}
.prose h2,.prose h3{font:700 30px/1.1 "Big Shoulders Display",sans-serif; letter-spacing:.03em; text-transform:uppercase; margin:36px 0 8px}
.prose h3{font-size:23px}
.prose a{color:var(--orange-text)}
.prose .zola-anchor{color:inherit; text-decoration:none}
.prose .zola-anchor:hover{color:var(--orange-text)}
.prose img{max-width:100%; height:auto}
/* Build log date: an orange "/" rising into
   a thin bar that runs over the date, the date in ink underneath. The bar is
   a background gradient (nothing fetched, so the CSP is happy); the slash is
   ::after. William tried and dropped a radical-style tick (2026-09-18). Markup stays a plain
   <p class="log-date">. */
.prose .log-date{position:relative; margin:30px 0 6px; scroll-margin-top:24px; padding:6px 0 0 30px; color:var(--ink); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.5;
  background:linear-gradient(var(--orange),var(--orange)) no-repeat 19px 0 / calc(100% - 19px) 2px}
.prose .log-date::after{content:""; position:absolute; top:0; bottom:0; left:9px; width:3px; background:var(--orange); transform-origin:bottom left; transform:skewX(-20deg)}
.prose .log-date + p{margin-top:0}
.prose .log-date a{color:inherit; text-decoration:none}
.prose .log-date a:hover{color:var(--orange-text)}
.prose .log-date:target a{color:var(--orange-text)}
.prose code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.92em}
.prose :not(pre)>code{background:var(--paper); border:1px solid var(--rule); padding:0 4px}
.prose pre{border:1px solid var(--rule); border-left:3px solid var(--orange); padding:14px 16px; overflow-x:auto; line-height:1.55; font-size:13.5px; margin:18px 0}
.prose blockquote{margin:18px 0; padding:2px 16px; border-left:3px solid var(--rule); color:var(--muted)}
.prose hr{border:0; border-top:1px solid var(--rule); margin:32px 0}
.prose table{border-collapse:collapse; font-size:14px; display:block; overflow-x:auto}
.prose th,.prose td{border:1px solid var(--rule); padding:6px 10px; text-align:left}
.prose .footnotes{font-size:13px; color:var(--muted); border-top:1px solid var(--rule); margin-top:32px}
.giallo-l{display:inline-block; min-height:1lh; width:100%}
.giallo-ln{display:inline-block; user-select:none; margin-right:.4em; padding:.4em; min-width:3ch; text-align:right; opacity:.8}

.fig{margin:22px 0}
.fig img{display:block; width:100%; height:auto; border:1px solid var(--rule)}
.fig figcaption{font-size:12px; color:var(--muted); margin-top:6px}

.tag-list{list-style:none; padding:8px 24px 32px; margin:0; display:flex; flex-wrap:wrap; gap:8px 20px}
.tag-list span{color:var(--muted); font-size:13px}

/* ---- Bluesky comments ---- */
.comments{padding-bottom:24px}
.c-cta{padding:16px 24px 4px; margin:0; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.btn{display:inline-block; font:700 16px/1 "Big Shoulders Display",sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:9px 14px; border:2px solid var(--ink)}
.btn:hover{background:var(--ink); color:var(--sheet)}
.comments>.c-list{margin:12px 24px 0}
.c-list{list-style:none; padding:0; margin:0}
.c-list .c-list{margin-left:14px; padding-left:14px; border-left:1px solid var(--rule)}
.c{padding:12px 0 2px}
.c-meta{margin:0; font-size:12px; color:var(--muted)}
.c-meta a:first-child{color:var(--ink); font-weight:600; text-decoration:none}
.c-meta a{color:inherit}
.c-text{font-size:14px; line-height:1.6; margin-top:2px; overflow-wrap:anywhere}
.c-text a,.c-link{color:var(--orange-text)}
.c-links:empty{display:none}
.c-links{margin:2px 0 0; font-size:12px; display:flex; flex-wrap:wrap; gap:2px 12px; overflow-wrap:anywhere}
.c-empty,.c-fine{padding:0 24px; margin:14px 0 0; font-size:12px; color:var(--muted)}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--orange-text); text-decoration:underline; cursor:pointer}
.links{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

@media (max-width:520px){
  .page-head,.prose{padding-left:16px; padding-right:16px}
  .post-row a{grid-template-columns:1fr; padding:14px 16px}
  .post-desc{grid-column:1}
  .rule-head,.c-cta,.c-empty,.c-fine{padding-left:16px; padding-right:16px}
  .comments>.c-list{margin:12px 16px 0}
}
/* Build log week heading: a row of a drawing's revision table, styled like .tb */
.prose .log-rev{display:grid; grid-template-columns:auto 1fr auto; margin:44px 0 18px; border-top:3px solid var(--ink); border-left:1px solid var(--rule); scroll-margin-top:24px}
.prose .log-rev div{padding:8px 14px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.prose .log-rev dt{font-size:11px; letter-spacing:.14em; color:var(--muted); line-height:1.3}
.prose .log-rev dd{margin:2px 0 0; font-weight:600; font-size:14px; text-transform:uppercase; line-height:1.3}
/* Gear between two entries on the same day: hairline, gear, hairline */
.prose .log-sep{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--orange)}
.prose .log-sep::before,.prose .log-sep::after{content:""; flex:1; height:1px; background:var(--rule)}
.prose .log-sep svg{display:block; fill:currentColor}