/* TOYROBOT, light edition (2026-10-27)
   Black and white first (TOYROBOT is the garage in Fred's brand world). Blue appears once: the lit square on the
   reading rail. Serif for reading, dot matrix for names, mono for labels.
   Fonts are self-hosted, SIL OFL 1.1: Newsreader, Doto, IBM Plex Mono. */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/next/newsreader-latin-opsz-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(../fonts/next/newsreader-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "Doto"; font-weight: 100 900; font-display: swap;
  src: url(../fonts/next/doto-latin.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(../fonts/IBMPlexMono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
  src: url(../fonts/IBMPlexMono-500.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper: #F3F3F1;
  --tile:  #E8E8E5;
  --ink:   #0B0B0C;
  --ink-2: #2E2E30;
  --mute:  #85857F;
  --line:  rgba(11, 11, 12, .12);
  --dots:  rgba(11, 11, 12, .17);
  --blue:  #002FA7;               /* International Klein Blue, shared with Ghostbay: rail only */
  --night: #0B0B0C;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --dot:   "Doto", ui-monospace, monospace;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: 24px;
  --measure: 640px;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font: 400 19px/1.55 var(--serif);
  color: var(--ink-2);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dots) 1px, transparent 1.3px);
  background-size: 32px 32px;
  background-position: 16px 16px;
}
::selection { background: var(--ink); color: #fff; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(11,11,12,.35); }
a:hover { color: var(--ink); text-decoration-color: currentColor; }

.mono { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

.site { max-width: 1280px; margin: 0 auto; padding: 120px var(--gut) 0; }

/* ---------- floating pill ---------- */
.pill {
  position: fixed; z-index: 50; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--gut))); height: 44px; padding: 0 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: #fff; border-radius: 8px; box-shadow: 0 1px 0 rgba(11,11,12,.06), 0 8px 24px -16px rgba(11,11,12,.25);
}
.pill a { text-decoration: none; }
.pill-l, .pill-r { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pill-r { justify-self: end; }
.pill-l:hover, .pill-r:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.pill-mark { font: 900 17px/1 var(--dot); letter-spacing: .08em; color: var(--ink); }

/* ---------- reading rail ---------- */
.rail { position: fixed; z-index: 40; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 3px; }
.rail i { display: block; width: 9px; height: 9px; background: #CDCDC8; transition: background .2s; }
.rail i.on { background: var(--blue); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; padding: 40px 0 120px; }
.statement { max-width: 15.5em; font: 400 clamp(32px, 4.1vw, 54px)/1.12 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.sq { display: inline-block; width: .42em; height: .42em; margin: 0 .3em .06em 0; background: var(--ink); vertical-align: baseline; }
.stats { display: flex; gap: 10px; }
.stat { width: 148px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
        background: var(--tile); border-radius: 4px; }
.stat b { font: 400 44px/1 var(--serif); color: var(--ink); }
.stat span { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* ---------- numbered sections ---------- */
.sec { position: relative; padding: 72px 0 40px; }
.sec::before, .sec::after { content: "+"; position: absolute; top: 18px; font: 300 22px/1 var(--mono); color: var(--mute); }
.sec::before { left: -6px; } .sec::after { right: -6px; }
.sec-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; margin-bottom: 56px; }
.num { font: 500 12px/2.3 var(--mono); color: var(--mute); letter-spacing: .06em; }
.sec-head h2 { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.sec-head p { max-width: 34em; margin-top: 12px; color: var(--ink-2); }

/* editorial blocks (after the portfolio's work grid): straight, square-cornered pictures, a label and a title under
   each. The first story runs full width with its text beside the title; the rest sit three (or two) across. */
.ed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
.ed.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.pic { display: block; overflow: hidden; background: var(--night); }
.pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 50%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.blk:hover .pic img { transform: scale(1.025); }
.cap { display: flex; flex-direction: column; gap: 8px; }
.blk-title { font: 400 22px/1.22 var(--serif); color: var(--ink); letter-spacing: -.005em; }
.blk:hover .blk-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.blk-desc { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.blk:not(.lead) .blk-desc { display: none; }
.blk.lead { grid-column: 1 / -1; }
.blk.lead .pic img { aspect-ratio: 2 / 1; object-position: 50% 75%; }   /* covers keep the product low in the frame */
.blk.lead .cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; }
.blk.lead .cap .mono { grid-column: 1 / -1; }
.blk.lead .blk-title { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; }

/* plain lists */
.list { border-top: 1px solid var(--line); }
.list-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0;
            border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.list-title { font: 400 22px/1.3 var(--serif); color: var(--ink); }
.list-title small { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 40em; }
.list-row:hover .list-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.list-row time { flex: none; }
.list-row.with-img { align-items: center; }
.thumb { flex: none; width: 168px; overflow: hidden; background: var(--night); }
.thumb img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.list-row.with-img .list-title { flex: 1; }

.page-head { padding: 40px 0 56px; }
.page-head h1 { margin-top: 14px; font: 400 clamp(36px, 4.4vw, 58px)/1.08 var(--serif); color: var(--ink); letter-spacing: -.015em; }

/* ---------- a post ---------- */
.post { padding-top: 24px; }
.post-head { max-width: 980px; margin-bottom: 72px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 22px; }
.post-head h1 { font: 400 clamp(36px, 4.6vw, 64px)/1.06 var(--serif); color: var(--ink); letter-spacing: -.02em; }

.post-cover { margin: -24px 0 72px; }
.post-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; cursor: default; }
.post-body { counter-reset: sec; }
.post-body > p, .post-body > h2, .post-body > h3, .post-body > h4, .post-body > ul, .post-body > ol,
.post-body > blockquote, .post-body > hr, .post-body > .highlight, .post-body > pre, .post-body > details { max-width: var(--measure); }
.post-body > * + * { margin-top: 18px; }
.post-body h2 { counter-increment: sec; margin-top: 88px; font: 400 32px/1.15 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.post-body h2::before { content: "( " counter(sec) " )"; display: block; margin-bottom: 14px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--mute); }
.post-body h3 { margin-top: 48px; font: 600 21px/1.3 var(--serif); color: var(--ink); }
.post-body h4 { margin-top: 32px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body ul, .post-body ol { padding-left: 1.2em; }
.post-body li + li { margin-top: 6px; }
.post-body ul > li::marker { content: "\25A0  "; color: var(--ink); font-size: .6em; }
.post-body ol > li::marker { font: 500 .8em var(--mono); color: var(--mute); }
blockquote { padding-left: 18px; border-left: 2px solid var(--ink); font-style: italic; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 56px 0; }

code { font: 400 .82em var(--mono); background: var(--tile); color: var(--ink); padding: .12em .38em; border-radius: 3px; }
pre { background: var(--night); color: #E6E6E2; padding: 20px 24px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* images and figures sit on the paper as dark cards; they may use the full column */
.post-body img { cursor: zoom-in; }
.post-body > p > img, .post-body figure { margin: 40px 0; }
figure img { width: 100%; }
figcaption { margin-top: 10px; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--mute); }

/* editorial blocks inside posts: two or three pictures across, or half text and half picture (picture right,
   or left with .flip). They use the full column; the text inside a split keeps a reading width. */
.post-body > .duo, .post-body > .trio, .post-body > .quad, .post-body > .split { max-width: none; margin-top: 48px; margin-bottom: 48px; }
.duo, .trio, .quad { display: grid; gap: 20px; align-items: start; }
.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }   /* a diagram gets the bigger half */
.split.flip > figure { order: -1; }
.post-body .duo figure, .post-body .trio figure, .post-body .quad figure, .post-body .split figure { margin: 0; }
.duo img, .trio img, .quad img, .split img { width: 100%; object-fit: cover; }
.duo img { aspect-ratio: 4 / 3; }
.trio img, .quad img, .split img { aspect-ratio: 1 / 1; }
.post-body .keep img { aspect-ratio: auto; object-fit: contain; }   /* annotated shots keep their whole frame */
.split-text { max-width: 32em; }
.split-text > * + * { margin-top: 18px; }
.split-text ul { padding-left: 1.2em; }
.split-text li + li { margin-top: 6px; }

/* photo galleries in posts: portrait phone shots three across, captions under */
.post-body > .gallery { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; margin-top: 32px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.gallery figcaption { margin-top: 10px; }

.diagram-frame { position: relative; margin: 40px 0; overflow: hidden; cursor: pointer; background: var(--night); }
.diagram-frame::after { content: "Open \2197"; position: absolute; top: 10px; right: 12px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
                        color: #fff; opacity: 0; transition: opacity .2s; pointer-events: none; }
.diagram-frame:hover::after { opacity: .7; }
iframe.diagram { display: block; width: 100%; height: 600px; border: 0; transition: height .2s; }
iframe.diagram-full { height: 900px; }

/* tables */
.table-wrap { position: relative; margin: 32px 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2rem; z-index: 1; pointer-events: none;
                     background: linear-gradient(to right, transparent, var(--paper)); opacity: 0; transition: opacity .2s; }
.table-wrap.is-scrollable::after { opacity: 1; }
.table-wrap.is-scrolled-end::after { opacity: 0; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border-bottom-color: var(--ink); }

.series-nav { display: grid; gap: 0; max-width: var(--measure); margin-top: 96px; border-top: 1px solid var(--ink); }
.series-nav > .mono { padding: 14px 0; }
.series-nav a { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; font-size: 18px; color: var(--ink); }
.series-nav a .mono { flex: none; }
.series-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.series-nav a.here { font-style: italic; }
.series-nav a.here .mono { color: var(--ink); }

.about-body { padding-left: 112px; }

/* tags page (kept simple) */
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list a { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 8px 12px; background: var(--tile); border-radius: 3px; }

/* ---------- black footer ---------- */
.foot { margin-top: 160px; padding: 120px var(--gut) 28px; color: #fff; background-color: var(--night);
        background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px); background-size: 32px 32px; background-position: 16px 16px; }
.foot a { color: #fff; text-decoration: none; }
.foot-big { display: grid; justify-items: center; gap: 10px; margin-bottom: 120px; }
.foot-big a { font: 900 clamp(26px, 3.4vw, 44px)/1.1 var(--dot); letter-spacing: .06em; text-transform: uppercase; }
.foot-big a:hover { color: rgba(255,255,255,.55); }
.foot-row { display: flex; justify-content: space-between; gap: 16px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.foot-row span:last-child { display: flex; gap: 24px; }
.foot-row a:hover { color: #fff; text-decoration: underline; }

/* ---------- PhotoSwipe ---------- */
.pswp__bg { background: rgba(11, 11, 12, .94); }
.pswp__top-bar { background: transparent; }
.pswp__counter { font: 500 11px var(--mono); color: rgba(255,255,255,.6); }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-bottom: 80px; }
  .ed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; }
  .blk.lead .cap { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 40px; }
  .about-body { padding-left: 0; }
  .post-body > .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .split, .split.flip, .split.wide { grid-template-columns: 1fr; gap: 28px; }
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split.flip > figure { order: 0; }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio > figure:first-child { grid-column: 1 / -1; }
  .rail { display: none; }
}
@media (max-width: 600px) {
  :root { --gut: 16px; }
  body { font-size: 18px; }
  .site { padding-top: 96px; }
  .pill { grid-template-columns: auto 1fr; gap: 16px; }
  .pill-mark { order: -1; }
  .pill-r { display: none; }            /* Fretboard Clarity stays in the footer */
  .pill-l { justify-self: end; }
  .stat { width: 132px; }
  .stat b { font-size: 38px; }
  .post-head { margin-bottom: 48px; }
  .post-body h2 { margin-top: 64px; font-size: 27px; }
  .ed, .ed.two { grid-template-columns: 1fr; }
  .blk.lead .pic img { aspect-ratio: 16 / 10; }
  .list-row { flex-direction: column; gap: 6px; }
  .list-row.with-img { align-items: stretch; }
  .thumb { width: 100%; }
  .foot { padding-top: 88px; }
  .foot-big { margin-bottom: 88px; }
  .foot-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .blk:hover .pic img { transform: none; }
}