/* The Left Hand Scientist — a circuit-board theme. Three colour states, in the order they resolve: :root the light board, always defined @media dark + :not([data-theme="light"]) the system's preference :root[data-theme="dark"] the reader's explicit choice Every rule that varies by scheme needs all three, not just the token block — the layer toggle sets data-theme on and has to beat the media query in both directions. */ :root { --bg: #F4F1EA; /* substrate the board is etched on */ --panel: #FCFBF8; /* the reading surface, mounted on the board */ --ink: #1A1917; --muted: rgba(26,25,23,0.66); --faint: rgba(26,25,23,0.26); --rule: rgba(26,25,23,0.12); --board: rgba(26,25,23,0.40); --board-op: 0.58; --accent: #953fd4; --accent-ink:#7B2FB5; /* accent darkened for text on light */ /* the pulse's core reads against the ground, so it goes DARKER on light and brighter on dark — the glow underneath is always the accent */ --pulse: #6D21A8; --pulse-glow: 0.20; --panel-shadow: 0 0 0 1px var(--rule); --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --serif: "EB Garamond", Georgia, Times, serif; --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* Ghost injects --gh-font-heading / --gh-font-body when fonts are chosen in Design settings; these fall back to the theme's own pairing. */ --font-heading: var(--gh-font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif); --font-body: var(--gh-font-body, "EB Garamond", Georgia, Times, serif); --page: 1440px; --col: 760px; --half-col: 410px; /* half the panel incl. its padding */ --rail: 128px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0A0C0E; --panel: #101214; --ink: #E9EAEC; --muted: rgba(233,234,236,0.70); --faint: rgba(233,234,236,0.30); --rule: rgba(233,234,236,0.14); --board: rgba(233,234,236,0.38); --board-op: 0.50; --accent: #B36BE8; --accent-ink:#C89BEC; --pulse: #EBD9FF; --pulse-glow: 0.26; --panel-shadow: 0 0 0 1px var(--rule); } } :root[data-theme="dark"] { --bg: #0A0C0E; --panel: #101214; --ink: #E9EAEC; --muted: rgba(233,234,236,0.70); --faint: rgba(233,234,236,0.30); --rule: rgba(233,234,236,0.14); --board: rgba(233,234,236,0.38); --board-op: 0.50; --accent: #B36BE8; --accent-ink:#C89BEC; --pulse: #EBD9FF; --pulse-glow: 0.26; --panel-shadow: 0 0 0 1px var(--rule); } /* the board ------------------------------------------------------------- Two strips, one each side of the reading column, grown in the browser by board.js. Routes start at pins on the inner edge, so the column reads as a component seated in the routing rather than a card floating on a pattern. */ .board { position: fixed; inset: 0; z-index: 0; background: var(--bg); pointer-events: none; } .board-strip { position: absolute; top: 0; bottom: 0; width: 320px; color: var(--board); overflow: hidden; } /* The dimming sits on the trace groups, NOT on the strip. Put it on the strip and it multiplies the pulse down with everything else — 0.5 x 0.85 left the pulse at 0.42 alpha on a 2.6px dot, which is to say invisible. */ .board-strip svg > g { opacity: var(--board-op); } .board-strip svg { display: block; width: 100%; height: 100%; overflow: visible; } .board-left { right: calc(50% + var(--half-col)); } .board-right { left: calc(50% + var(--half-col)); } /* The inner layer: routing that carries on underneath the reading column, drawn fainter and seen through a translucent panel — copper under soldermask rather than a pattern behind a card. */ .board-under { /* width:auto or the 320px on .board-strip wins over left+right */ left: calc(50% - var(--half-col)); right: calc(50% - var(--half-col)); width: auto; } .board-under svg > g { opacity: calc(var(--board-op) * 0.55); } body.board-subtle .board-strip svg > g { opacity: calc(var(--board-op) * 0.55); } body.board-subtle .board-under svg > g { opacity: calc(var(--board-op) * 0.3); } body.board-bare .board-strip { display: none; } body.board-bare .board { background: var(--panel); } @media (max-width: 1120px) { .board-left, .board-right { display: none; } .board-under { left: 0; right: 0; width: auto; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 20.5px; line-height: 1.68; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent-ink) 35%, transparent); } a:hover { border-bottom-color: currentColor; } body.accent-trace-only a { color: var(--ink); border-bottom-color: var(--rule); } .shell { position: relative; z-index: 1; max-width: calc(var(--col) + var(--rail) + 60px); margin: 0 auto; padding: 0 20px 96px; } /* header / footer -------------------------------------------------------- */ /* Translucent, so the inner layer of routing reads through the reading surface — copper under soldermask rather than a card on a pattern. The opaque declaration first is the fallback where color-mix is unsupported. */ .site-head, .site-foot, .panel { background: var(--panel); background: color-mix(in srgb, var(--panel) 84%, transparent); box-shadow: var(--panel-shadow); } .site-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 30px; border-radius: 2px 2px 0 0; position: relative; } .site-brand { display: flex; align-items: center; gap: 13px; border: 0; color: var(--ink); } .site-logo { width: 32px; height: 32px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-logo { filter: invert(1); } } :root[data-theme="dark"] .site-logo { filter: invert(1); } :root[data-theme="light"] .site-logo { filter: none; } .site-name { font-family: var(--font-heading); font-weight: 600; font-size: 16.5px; letter-spacing: -0.012em; } .site-nav { display: flex; align-items: center; gap: 22px; } .site-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; } .nav-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; } .nav-icon:hover { color: var(--accent); border-color: var(--accent); } .nav-member { font-family: var(--mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); border: 0; display: flex; align-items: center; gap: 8px; } .nav-member::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.6px solid var(--accent); flex: 0 0 auto; } .nav-member:hover { color: var(--accent-ink); } /* .site-nav a below is more specific than a bare .nav-member, so this rule never took effect and Sign in wrapped over two lines on a phone. */ @media (max-width: 620px) { .site-nav .nav-member, .site-nav .nav-icon { display: none; } } .site-nav a { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); border: 0; } .site-nav a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.6px solid var(--accent); flex: 0 0 auto; } .site-nav a:hover { color: var(--accent-ink); } .panel { padding: 56px 30px 64px; border-radius: 2px; } .site-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 22px 30px; border-radius: 0 0 2px 2px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .site-foot a { color: var(--muted); border: 0; } .foot-mark { width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--accent); } /* post ------------------------------------------------------------------- */ .post { position: relative; } .post-rail { position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail); pointer-events: none; } .post-head, .post-content, .post-image, .post-tags { padding-left: var(--rail); } .post-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .post-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(34px, 5.2vw, 52px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 22px; text-wrap: balance; } .post-lede { font-size: 22px; line-height: 1.55; color: var(--muted); font-style: italic; margin: 0 0 30px; } .post-image { margin: 0 0 34px; } .post-image figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 10px; } .post-content > * { margin: 0 0 22px; } .post-content h2 { font-family: var(--font-heading); font-weight: 600; font-size: 28px; letter-spacing: -0.018em; margin: 40px 0 18px; scroll-margin-top: 24px; } .post-content h3 { font-family: var(--font-heading); font-weight: 600; font-size: 22px; margin: 30px 0 14px; } .post-content blockquote { margin: 30px 0; padding-left: 22px; border-left: 2px solid var(--accent); font-style: italic; color: var(--muted); } .post-content pre { font-family: var(--mono); font-size: 14px; line-height: 1.7; overflow-x: auto; background: color-mix(in oklab, var(--ink) 5%, var(--panel)); border: 1px solid var(--rule); border-left: 2px solid var(--accent); padding: 18px 20px; border-radius: 2px; } .post-content code { font-family: var(--mono); font-size: 0.86em; } .post-content :not(pre) > code { background: color-mix(in oklab, var(--ink) 6%, var(--panel)); padding: 0.12em 0.36em; border-radius: 2px; } .post-content figure { margin: 30px 0; } .post-content figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; } .post-content hr { border: 0; border-top: 1px solid var(--rule); margin: 38px 0; } .post-content table { width: 100%; border-collapse: collapse; font-size: 17px; } .post-content th, .post-content td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); } .post-content th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } /* a link to another post on this site is a buried via: it connects to a layer you cannot see from this page */ .post-content a[data-buried]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border: 1.6px dashed var(--faint); border-radius: 50%; vertical-align: 1px; } .post-tags { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 40px; } /* index / cards ---------------------------------------------------------- */ .index-head { padding-left: var(--rail); margin-bottom: 44px; } .index-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.03em; margin: 0 0 14px; } .index-lede { font-size: 21px; color: var(--muted); margin: 0; max-width: 56ch; } .card-grid { display: flex; flex-direction: column; gap: 2px; } .card-link { display: flex; align-items: flex-start; gap: 20px; padding: 22px var(--rail) 22px 0; border: 0; border-top: 1px solid var(--rule); color: var(--ink); } .card:last-child .card-link { border-bottom: 1px solid var(--rule); } .card-pad { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--faint); flex: 0 0 auto; margin: 8px 0 0 calc(var(--rail) - 68px); transition: border-color .18s, background-color .18s; } .card-link:hover .card-pad { border-color: var(--accent); background: var(--accent); } .card-meta { display: flex; gap: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .card-title { font-family: var(--font-heading); font-weight: 600; font-size: 23px; letter-spacing: -0.015em; margin: 0 0 8px; } .card-excerpt { color: var(--muted); font-size: 18.5px; line-height: 1.6; margin: 0; } .more-title { font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; padding-left: var(--rail); } .pagination { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12.5px; margin-top: 40px; padding-left: var(--rail); } /* the rail collapses on narrow screens: a thin spine at the edge ---------- */ @media (max-width: 860px) { :root { --rail: 34px; } body { font-size: 19px; } .panel { padding: 34px 20px 44px; } .site-head { padding: 16px 20px; } .post-lede { font-size: 20px; } .card-link { padding-right: 0; } .card-pad { margin-left: calc(var(--rail) - 24px); } } @media (max-width: 520px) { :root { --rail: 22px; } .post-content h2 { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media print { .board, .site-nav, .panel-more { display: none; } .post-rail { display: none; } .post-head, .post-content { padding-left: 0; } body { background: #fff; color: #000; } } /* Koenig card widths ----------------------------------------------------- */ .gh-content { position: relative; } .kg-width-wide { position: relative; width: calc(100% + 60px); max-width: none; margin-left: -30px; } .kg-width-full { position: relative; width: calc(100vw - 40px); max-width: 100vw; margin-left: calc(50% - 50vw + 20px); } .kg-width-full img, .kg-width-wide img { width: 100%; } @media (max-width: 860px) { .kg-width-wide { width: 100%; margin-left: 0; } .kg-width-full { width: 100%; margin-left: 0; } } /* Koenig cards ----------------------------------------------------------- Ghost supplies cards.min.css via {{ghost_head}} (card_assets: true), so cards work out of the box. These only pull the ones in use into the theme's palette and radius - deliberately light, so Ghost keeps owning card layout and any new card type still works untouched. */ .gh-content .kg-card { border-radius: 2px; } .gh-content .kg-callout-card { border-radius: 2px; border-left: 2px solid var(--accent); background: color-mix(in oklab, var(--ink) 5%, var(--panel)); } .gh-content .kg-callout-text { font-family: var(--font-body); color: var(--ink); } .gh-content .kg-card figcaption, .gh-content .kg-image-card figcaption { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--muted); text-align: center; padding-top: 10px; } .gh-content .kg-bookmark-container { border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); color: var(--ink); } .gh-content .kg-bookmark-title { font-family: var(--font-heading); color: var(--ink); } .gh-content .kg-bookmark-description, .gh-content .kg-bookmark-metadata { color: var(--muted); } .gh-content .kg-btn { border-radius: 2px; background: var(--accent); font-family: var(--mono); } .gh-content .kg-toggle-card { border: 1px solid var(--rule); border-radius: 2px; } .gh-content .kg-toggle-heading-text { font-family: var(--font-heading); } /* tag = a net ------------------------------------------------------------- A net is a set of pads electrically connected. A tag is the same idea: posts joined by one shared thread. The list gets a net line running through the pads to say so. */ .net-head { padding-left: var(--rail); margin-bottom: 40px; } .net-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--muted); } .net-pad { width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid var(--accent); flex: 0 0 auto; } .net-count { margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .card-grid.is-net { position: relative; } .card-grid.is-net::before { /* the net running through the pads */ content: ""; position: absolute; top: 24px; bottom: 24px; left: calc(var(--rail) - 62px); width: 2px; background: var(--rule); border-radius: 2px; } .card-grid.is-net .card-pad { position: relative; z-index: 1; background: var(--panel); } /* author = a component datasheet ------------------------------------------ */ .sheet { display: flex; gap: 34px; align-items: flex-start; padding-left: var(--rail); margin-bottom: 44px; } .sheet-part { position: relative; flex: 0 0 auto; } .sheet-image, .sheet-blank { display: block; width: 104px; height: 104px; border-radius: 2px; border: 1px solid var(--rule); object-fit: cover; background: var(--bg); } .sheet-designator { position: absolute; top: -9px; left: -9px; padding: 2px 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--accent); background: var(--panel); border: 1px solid var(--accent); border-radius: 2px; } .sheet-body { min-width: 0; } .sheet-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 12px; } .sheet-specs { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 22px 0 0; } .sheet-specs > div { display: flex; flex-direction: column; gap: 4px; } .sheet-specs dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .sheet-specs dd { margin: 0; font-size: 16px; } /* errors = an open circuit ------------------------------------------------ */ .panel-fault { padding-top: 88px; padding-bottom: 96px; } .fault { padding-left: var(--rail); max-width: 620px; } .fault-code { font-family: var(--mono); font-size: 13px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 18px; } .fault-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(34px, 5vw, 50px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 20px; } .fault-text { font-size: 20px; line-height: 1.62; color: var(--muted); margin: 0 0 40px; } .fault-trace { display: block; width: 100%; max-width: 520px; height: auto; color: var(--ink); margin-bottom: 40px; } .fault-details { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; border: 1px solid var(--rule); border-left: 2px solid var(--accent); padding: 14px 16px; border-radius: 2px; margin-bottom: 32px; color: var(--muted); } .fault-link { display: inline-flex; align-items: center; gap: 10px; border: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; } .fault-link::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); flex: 0 0 auto; } @media (max-width: 860px) { .sheet { gap: 22px; } .sheet-image, .sheet-blank { width: 76px; height: 76px; } .card-grid.is-net::before { display: none; } } /* board revision ---------------------------------------------------------- Every page grows its board from a hash of its own path, so the same article always carries the same routing. The stamp makes that legible. */ .foot-rev { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .foot-rev[hidden] { display: none; } /* layer toggle ------------------------------------------------------------ Light and dark as the two copper layers of the board rather than a sun and a moon, plus a third position that hands the decision back to the system. Auto is the default and is drawn as neither layer fully lit, because in that state the board is not the one deciding. */ .layer-toggle { display: flex; align-items: center; gap: 9px; padding: 0 10px; height: 30px; border: 1px solid var(--rule); border-radius: 15px; background: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); cursor: pointer; } .layer-toggle:hover { color: var(--accent); border-color: var(--accent); } .layer-toggle svg { flex: 0 0 auto; } .layer-toggle .layer-top, .layer-toggle .layer-bottom { transition: opacity .18s ease; } .layer-name { display: none; } @media (min-width: 1000px) { .layer-name { display: inline; } } /* search and sign-in fold away on small screens; the layer toggle stays — it is the one control a phone reader is most likely to want. */ /* the lit layer is the one you are on */ .layer-toggle .layer-bottom { opacity: 0.28; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .layer-toggle .layer-top { opacity: 0.28; } :root:not([data-theme="light"]) .layer-toggle .layer-bottom { opacity: 1; } } :root[data-theme="dark"] .layer-toggle .layer-top { opacity: 0.28; } :root[data-theme="dark"] .layer-toggle .layer-bottom { opacity: 1; } :root[data-theme="light"] .layer-toggle .layer-top { opacity: 1; } :root[data-theme="light"] .layer-toggle .layer-bottom { opacity: 0.28; } /* Auto last, and via :root so it outranks the media query above — in auto the board is not the thing deciding, so neither layer is fully lit. */ :root .layer-toggle.is-auto .layer-top, :root .layer-toggle.is-auto .layer-bottom { opacity: 0.62; } /* the reading trace ------------------------------------------------------- h2 is a surface pad routed out to the edge of the rail; h3 is a buried via sitting against the trunk, because it routes on a layer you cannot see from here. Hovering the rail names every section; the one you are reading names itself without being asked. */ /* The content boxes carry padding-left: var(--rail), so their padding covers the rail and, being later in the document, they win the hit test. Lifting the rail is what makes hovering it possible at all — the gutter is empty space, so nothing is stolen from the article. */ .post-rail { pointer-events: auto; z-index: 2; } .post-rail svg text { pointer-events: none; user-select: none; } .via-label { opacity: 0; transition: opacity .16s ease; } .post-rail:hover .via-label, .via-current .via-label { opacity: 1; } /* the via itself is real; it is the route beyond it that you cannot see */ .via-buried path { stroke-dasharray: 2.4 3; } @media (max-width: 860px) { .via-label { display: none; } } /* continuity -------------------------------------------------------------- */ .panel-more .net-head { margin-bottom: 26px; } /* Both continuity blocks are rendered; only the one with cards is kept. :has() does it without scripting, and continuity.js repeats it for anything older. */ .panel-more .net-block:not(:has(.card)) { display: none; } .panel-more:has([data-net-same] .card) [data-net-else] { display: none; } .net-block[hidden] { display: none !important; } /* pulses ------------------------------------------------------------------ Current finding a route: a lit length of the trace with a brighter head, drawn over the dimmed traces at full strength. One at a time, only while the tab is visible, never at all when the reader has asked for less motion. */ .pulse { fill: var(--accent); stroke: none; } .pulse-glow { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; } /* butt caps: the tail is a run of short dashes and round caps would bead it */ .pulse-trail { fill: none; stroke: var(--pulse); stroke-width: 2.4; stroke-linecap: butt; stroke-linejoin: round; } .pulse-halo { fill: var(--accent); stroke: none; } .pulse-head { fill: var(--pulse); stroke: none; } @media (prefers-reduced-motion: reduce) { .pulse, .pulse-glow, .pulse-trail, .pulse-halo, .pulse-head { display: none; } } .net-head .more-title { padding-left: 0; margin: 0; font-size: 22px; text-transform: none; letter-spacing: -0.015em; color: var(--ink); }