/* Signal theme for eattechdad.com.
   Layout idea: a readable dashboard. Numbered index rows, the slash from the site name as the motif,
   topics as toggle switches, one lit amber signal. Mobile first: thumb dock, big tap targets, no JavaScript needed to read. */

@font-face { font-family: "Geist"; src: url(/assets/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument.woff2) format("woff2"); font-weight: 400 650; font-display: swap; }

:root {
  --bg: #EDF0F4;
  --surface: #FFFFFF;
  --ink: #0D1829;
  --mute: #52627A;
  --line: #D3DAE4;
  --accent: #F29100;
  --accent-text: #974C00;
  --on-accent: #1A0F00;
  --link: #0A55C8;
  --code-bg: #0E1A2C;
  --code-ink: #E3ECF8;
  --code-mute: #9DB0C9;
  --ok: #1F9E62;
  --f-display: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-body: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 16px;
  --gutter: 16px;
  --measure: 66ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08111D; --surface: #0F1B2C; --ink: #E7EEF8; --mute: #93A5BC; --line: #1D2D44;
    --accent: #FFB52E; --accent-text: #FFB52E; --on-accent: #1A0F00; --link: #82B8FF;
    --code-bg: #0A1525; --ok: #3DD58C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #08111D; --surface: #0F1B2C; --ink: #E7EEF8; --mute: #93A5BC; --line: #1D2D44;
  --accent: #FFB52E; --accent-text: #FFB52E; --on-accent: #1A0F00; --link: #82B8FF;
  --code-bg: #0A1525; --ok: #3DD58C;
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; padding-bottom: calc(68px + env(safe-area-inset-bottom)); background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--f-body); -webkit-font-smoothing: antialiased; }
@media (min-width: 900px) { body { padding-bottom: 0; font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
i { font-style: normal; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.mark { display: inline-flex; align-items: baseline; gap: .1em; font: 800 1.5rem/1 var(--f-display); letter-spacing: -.02em; text-decoration: none; }
.mark .dim { opacity: .55; }
.mark i { color: var(--accent); }
.mark .lit { position: relative; }
.mark .lit::after { content: ""; position: absolute; inset: auto 0 -.2em 0; height: .13em; border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
/* desktop with a mouse: one bar that slides between the three words (set up in signal.js) */
.mark { position: relative; }
.mark span { transition: opacity .3s ease; }
.mark.live .lit::after { display: none; }
.mark.live::after { content: ""; position: absolute; bottom: -.2em; left: var(--bx, 0); width: var(--bw, 0); height: .13em; border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); transition: left .4s cubic-bezier(.4, 0, .2, 1), width .4s cubic-bezier(.4, 0, .2, 1); }
.main { display: none; gap: 6px; margin-left: auto; }
.main a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 99px; text-decoration: none; font-weight: 550; }
.main a { gap: 8px; transition: background-color .25s ease, color .25s ease; }
.main a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: color .25s ease, opacity .25s ease; }
.main a:hover, .main a:focus-visible { background: var(--surface); color: var(--accent-text); }
.main a:hover svg, .main a:focus-visible svg { opacity: 1; }
.main a[aria-current] { color: var(--ink); }
.main a[aria-current] svg { color: var(--accent-text); opacity: 1; }
@media (min-width: 900px) { .main { display: flex; } }
.lights { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mute); font: 600 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.track { position: relative; width: 40px; height: 24px; border-radius: 99px; background: var(--line); transition: background .2s; }
.knob { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.lights[aria-pressed="true"] .track { background: var(--accent); }
.lights[aria-pressed="true"] .knob { transform: translateX(16px); }

/* ---------- intro and feature ---------- */
.feature { display: grid; gap: 18px; margin: 28px 0 10px; }
.feature .media { margin-inline: calc(var(--gutter) * -1); }
.feature .media { display: block; }
.flag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 .7rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.feature h2 { margin: 0 0 12px; font: 760 clamp(1.65rem, 6.2vw, 2.6rem)/1.08 var(--f-display); letter-spacing: -.022em; text-wrap: balance; }
.feature h2 a { text-decoration: none; }
.feature h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .15em; }
.dek { margin: 0 0 14px; color: var(--mute); }
.meta { margin: 0; font: 500 .72rem/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.meta i { margin: 0 .45em; color: var(--accent-text); }
@media (min-width: 700px) {
  .feature .media { margin-inline: 0; }
  .feature .frame { border-radius: 22px; }
}
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 30px; }
  .feature .frame { aspect-ratio: 2 / 1; max-height: 520px; }
  .feature .frame > img { object-position: 50% 42%; }
  .feature h2 { max-width: 24ch; font-size: clamp(2.2rem, 3.6vw, 3.1rem); }
  .feature .dek { max-width: 68ch; }
}

/* ---------- topics as toggle switches ---------- */
.topics { display: flex; gap: 8px; margin: 26px 0 4px; padding: 4px 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.topics::-webkit-scrollbar { display: none; }
.sw { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px 0 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); text-decoration: none; font-weight: 600; font-size: .86rem; transition: border-color .25s ease, background-color .25s ease, color .25s ease; scroll-snap-align: start; }
.sw i { position: relative; width: 26px; height: 16px; border-radius: 99px; background: var(--line); transition: background .2s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .2s; }
.sw.on i { background: var(--accent); }
.sw.on i::after { transform: translateX(10px); }
.sw:hover { border-color: var(--accent); }
.sw:hover i::after { transform: translateX(5px); }
.sw.on:hover i::after { transform: translateX(10px); }
.sw b { font: 500 .68rem var(--f-mono); color: var(--mute); }

/* ---------- index rows ---------- */
.cols { display: grid; gap: 44px; margin-top: 22px; }
@media (min-width: 960px) { .cols { grid-template-columns: minmax(0, 1fr) 300px; gap: 76px; } .side { position: sticky; top: 24px; align-self: start; } }
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; font: 700 .78rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
.index { margin: 0; padding: 0; list-style: none; }
.row a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 112px; gap: 12px; align-items: start; padding: 22px 0; border-top: 1px dashed var(--line); text-decoration: none; }
.index li:last-child a { border-bottom: 1px dashed var(--line); }
.num { padding-top: .45rem; font: 500 .78rem/1 var(--f-mono); color: var(--mute); }
.row a:hover .num { color: var(--accent-text); }
.kick { margin: 0 0 6px; font: 600 .66rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.row h3 { margin: 0 0 8px; font: 680 1.04rem/1.22 var(--f-display); letter-spacing: -.012em; text-wrap: pretty; hyphens: manual; }
.row a:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .12em; text-underline-offset: .18em; }
.thumbbox { display: block; width: 112px; height: 84px; overflow: hidden; border-radius: 16px; background: var(--line); }
.thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-empty { display: grid; place-items: center; width: 112px; height: 84px; border-radius: 16px; background: var(--line); color: var(--mute); font: 800 1.4rem var(--f-display); }
@media (min-width: 700px) {
  .row a { grid-template-columns: 3rem minmax(0, 1fr) 200px; gap: 24px; padding: 28px 0; }
  .row h3 { font-size: 1.32rem; }
  .thumbbox, .thumb-empty { width: 200px; height: 150px; }
}

/* ---------- side column, buttons ---------- */
.side h2 { margin: 0 0 10px; font: 700 .78rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
.side p { margin: 0 0 16px; }
.side .block { margin-bottom: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 99px; background: var(--ink); color: var(--bg); font: 650 .95rem var(--f-body); text-decoration: none; cursor: pointer; transition: background-color .28s ease, border-color .28s ease, color .28s ease; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.amber { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn:hover, .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.amber:hover, .btn.amber:focus-visible { background: color-mix(in srgb, var(--accent) 86%, #fff); border-color: transparent; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 0; font: 500 .75rem var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--mute); }

/* ---------- footer: one slim bar (links with slashes, compact search on desktop) and a legal line ---------- */
.foot { margin-top: 48px; padding: 12px 0 20px; border-top: 1px solid var(--line); color: var(--mute); }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; padding-bottom: 14px; }
.foot ul { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.foot li { display: inline-flex; align-items: center; }
.foot li + li::before { content: "/"; margin-right: 10px; color: color-mix(in srgb, var(--mute) 50%, transparent); font: 500 .8rem var(--f-mono); }
.foot p { margin: 0; }
.foot .legal p { display: flex; flex-wrap: wrap; gap: 0 14px; }
.foot a, .foot li button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 0; color: var(--mute); font: 600 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .1em; text-underline-offset: 6px; transition: color .25s ease, text-decoration-color .25s ease; }
.foot a:hover, .foot a:focus-visible, .foot li button:hover, .foot li button:focus-visible { color: var(--accent-text); text-decoration-color: var(--accent); }
.foot li button { border: 0; background: none; cursor: pointer; }
/* Slim pill search with the magnifier inside the field; it widens a little when you click into it. */
.foot form.search.mini { position: relative; display: block; margin-left: auto; max-width: none; }
.foot .search.mini input { -webkit-appearance: none; appearance: none; width: 160px; min-height: 0; height: 34px; padding: 0 38px 0 15px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font: 500 .82rem var(--f-body); transition: width .35s cubic-bezier(.2, .7, .2, 1), border-color .25s ease, background-color .25s ease; }
.foot .search.mini input::placeholder { color: var(--mute); opacity: .85; }
.foot .search.mini input::-webkit-search-cancel-button { display: none; }
.foot .search.mini input:hover { border-color: color-mix(in srgb, var(--mute) 55%, var(--line)); }
.foot .search.mini input:focus { width: 230px; outline: 0; border-color: var(--accent); background: var(--surface); }
.foot .search.mini button { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer; transform: translateY(-50%); transition: color .25s ease; }
.foot .search.mini button:hover, .foot .search.mini button:focus-visible, .foot .search.mini input:focus + button { color: var(--accent-text); }
.foot .search.mini button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 899px) { .foot form.search.mini { display: none; } }   /* phones and tablets have Search in the bottom dock */
.foot .legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; margin-top: 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .8rem; }
.foot .lights { transition: color .25s ease; }
.foot .lights:hover, .foot .lights:focus-visible { color: var(--accent-text); }
@media (pointer: fine) { .foot a, .foot li button, .foot .lights { min-height: 34px; } }

/* ---------- mobile dock ---------- */
.dock { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.dock a { display: grid; justify-items: center; gap: 4px; padding: 10px 0 9px; text-decoration: none; color: var(--mute); font: 600 .64rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.dock svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color .2s ease, background-color .2s ease; }
.dock a:active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.dock a[aria-current] { color: var(--ink); }
.dock a[aria-current] svg { color: var(--accent-text); }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- search ---------- */
form.search { display: flex; gap: 8px; max-width: 460px; }
form.search input { flex: 1; min-width: 0; }
input, select, textarea { width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; }
input[type="search"] { border-radius: 99px; }
textarea { min-height: 160px; }

/* ---------- post ---------- */
.progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } @keyframes grow { to { transform: scaleX(1); } } }
.post { padding-top: 14px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 8px 0 14px; font: 600 .7rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs i { color: var(--accent-text); }
.post h1 { margin: 0 0 14px; font: 800 clamp(2rem, 7.4vw, 3.7rem)/1.03 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 22px; font: 500 .74rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.byline i { color: var(--accent-text); }
.note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 13px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); font-size: .88rem; line-height: 1.5; }
.note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--accent-text); stroke-width: 1.9; stroke-linecap: round; }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.post-grid > * { min-width: 0; }
@media (min-width: 1100px) { .post-grid { grid-template-columns: 240px minmax(0, var(--measure)); gap: 64px; justify-content: center; } .toc { position: sticky; top: 24px; align-self: start; } }
.toc { margin: 0 0 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none; font: 650 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font-size: 1.1rem; color: var(--accent-text); }
.toc[open] summary::after { content: "\2212"; }
.toc ol { margin: 0; padding: 0 18px 10px; list-style: none; counter-reset: t; }
.toc li a { display: flex; gap: 12px; padding: 11px 0; border-top: 1px dashed var(--line); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.toc li a::before { counter-increment: t; content: counter(t, decimal-leading-zero); flex: none; padding-top: .2em; font: 500 .72rem/1 var(--f-mono); color: var(--accent-text); }
.toc li a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
@media (min-width: 1100px) { .toc summary { pointer-events: none; } .toc summary::after { content: none; } }

.prose { counter-reset: sec; max-width: var(--measure); overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15em; }
.prose a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
.prose h2 { counter-increment: sec; margin: 2.3em 0 .55em; font: 720 clamp(1.45rem, 4.6vw, 1.85rem)/1.15 var(--f-display); letter-spacing: -.018em; text-wrap: balance; scroll-margin-top: 20px; }
.prose h2::before { content: counter(sec, decimal-leading-zero) " /"; display: block; margin-bottom: .4em; font: 600 .72rem/1 var(--f-mono); letter-spacing: .1em; color: var(--accent-text); }
.prose h3 { margin: 1.9em 0 .4em; font: 700 1.2rem/1.25 var(--f-display); letter-spacing: -.01em; }
.prose h4, .prose h5, .prose h6 { margin: 1.6em 0 .3em; font: 650 1rem/1.3 var(--f-body); }
.prose ul { padding-left: 1.3em; list-style: none; }
.prose ul > li { position: relative; margin-bottom: .45em; }
.prose ul > li::before { content: ""; position: absolute; left: -1.05em; top: calc(.825em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.prose ol { padding-left: 1.5em; }
.prose ol > li::marker { font: 600 .85em var(--f-mono); color: var(--accent-text); }
.prose li > ul, .prose li > ol { margin: .45em 0 .2em; }
.prose strong { font-weight: 650; }
.prose hr { margin: 2.4em 0; border: 0; border-top: 1px dashed var(--line); }
.prose img { height: auto; border-radius: 14px; margin: 1.4em 0; }
.prose :not(pre) > code { padding: .1em .38em; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); font: .88em var(--f-mono); }
.prose blockquote { margin: 2em 0; padding: 0; font: 650 clamp(1.3rem, 4.4vw, 1.6rem)/1.28 var(--f-display); letter-spacing: -.012em; text-wrap: balance; }
.prose blockquote::before { content: "\201C"; display: block; height: .55em; font: 800 4.2rem/1 var(--f-display); color: var(--accent); }
.prose blockquote p { margin: 0 0 .5em; }
.code { margin: 1.5em 0; border-radius: 16px; overflow: hidden; background: var(--code-bg); color: var(--code-ink); }
.code-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px; border-bottom: 1px solid rgb(255 255 255 / .09); font: 600 .68rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--code-mute); }
.copy { min-height: 38px; padding: 0 14px; border: 1px solid rgb(255 255 255 / .16); border-radius: 99px; background: transparent; color: var(--code-ink); font: 600 .68rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.copy:hover { background: rgb(255 255 255 / .08); }
.code pre { margin: 0; padding: 16px; overflow-x: auto; font: .84rem/1.65 var(--f-mono); tab-size: 2; }
.code code { font: inherit; }
.code .k { color: #8EC7FF; } .code .s { color: #FFD28A; } .code .n { color: #A6E8C0; } .code .c { color: #8396B0; }
.prose figure { margin: 1.5em 0; }
.prose figure .table-wrap { margin: 0; }
.table-wrap { margin: 1.5em 0; overflow-x: auto; border-top: 2px solid var(--ink); }
.table-wrap table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .95rem; }
.table-wrap th { padding: 12px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; font: 650 .68rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.table-wrap td { padding: 13px 14px 13px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.table-wrap tr:last-child td { border-bottom: 1px solid var(--line); }

.after { max-width: var(--measure); margin-top: 38px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); text-decoration: none; font: 600 .68rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.chips a:hover { border-color: var(--accent); }
.after .row-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 0; font: 500 .74rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pn { display: grid; gap: 12px; margin-top: 34px; }
@media (min-width: 700px) { .pn { grid-template-columns: 1fr 1fr; } }
.pn a { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-decoration: none; }
.pn small { font: 650 .66rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }
.pn strong { font: 680 1.08rem/1.25 var(--f-display); letter-spacing: -.01em; }
.pn a:hover strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .15em; }
.pn .next { text-align: right; }

/* ---------- pages and forms ---------- */
.page { padding-top: 22px; }
.page h1 { margin: 0 0 18px; font: 800 clamp(2.1rem, 8vw, 3.6rem)/1.02 var(--f-display); letter-spacing: -.03em; }
.notice { margin: 0 0 20px; padding: 13px 16px; border-radius: 14px; font-weight: 550; }
.notice.ok { background: color-mix(in srgb, var(--ok) 20%, var(--surface)); }
.notice.bad { background: color-mix(in srgb, #E5484D 18%, var(--surface)); }
.req { color: var(--accent-text); }
.field-error { margin: -8px 0 0; color: #C5282D; font-size: .92rem; }
:root[data-theme="dark"] .field-error { color: #FF8A8E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-error { color: #FF8A8E; } }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.empty { color: var(--mute); }

/* ---------- 404 ---------- */
.lost { position: relative; padding-block: 18px 8px; overflow: hidden; }
.lost .glow { position: absolute; inset: -10% -20% auto auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); opacity: 0; transition: opacity .5s; pointer-events: none; }
#lamp:checked ~ .glow { opacity: .55; }
.code-4 { position: relative; display: flex; align-items: flex-end; gap: .02em; margin: 6px 0 6px; font: 800 clamp(6.2rem, 33vw, 13rem)/.8 var(--f-display); letter-spacing: -.06em; }
.bulb { width: .62em; height: .85em; margin-inline: .02em; overflow: visible; }
.bulb .glass { fill: color-mix(in srgb, var(--ink) 6%, transparent); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; transition: fill .3s; }
.bulb .base { fill: var(--ink); }
.bulb .fil { fill: none; stroke: var(--mute); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
#lamp:not(:checked) ~ .code-4 .bulb .glass { animation: flick 6s steps(1) infinite; }
@keyframes flick { 0%, 91%, 95%, 100% { fill: color-mix(in srgb, var(--ink) 6%, transparent); } 92%, 94% { fill: color-mix(in srgb, var(--accent) 45%, transparent); } }
#lamp:checked ~ .code-4 .bulb .glass { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 22px var(--accent)); }
#lamp:checked ~ .code-4 .bulb .fil { stroke: var(--on-accent); }
.lost h1 { margin: 14px 0 12px; font: 800 clamp(1.9rem, 7vw, 3.1rem)/1.04 var(--f-display); letter-spacing: -.03em; text-wrap: balance; max-width: 18ch; }
.lost .lede { max-width: 44ch; margin: 0 0 22px; color: var(--mute); }
.plate { display: inline-flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 22px 8px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); cursor: pointer; font-weight: 650; }
.rocker { position: relative; width: 44px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 14%, var(--surface)); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); transition: background .2s; }
.rocker::after { content: ""; position: absolute; inset: 6px 8px 22px 8px; border-radius: 6px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: inset .2s; }
#lamp:checked ~ .plate .rocker { background: var(--accent); }
#lamp:checked ~ .plate .rocker::after { inset: 22px 8px 6px 8px; }
#lamp:focus-visible ~ .plate { outline: 3px solid var(--accent); outline-offset: 3px; }
.plate .on-text { display: none; }
#lamp:checked ~ .plate .on-text { display: inline; }
#lamp:checked ~ .plate .off-text { display: none; }
.lost .tries { margin-top: 36px; }
.guess { margin: 0 0 24px; padding: 0; list-style: none; }
.guess li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px dashed var(--line); }
.guess li::before { content: ""; flex: none; width: 7px; height: 7px; margin: .6em 4px 0 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.joke { max-width: 560px; margin-top: 8px; }
@media (min-width: 900px) { .lost { padding-top: 40px; } .lost .glow { width: 55%; inset: -20% -5% auto auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- hover fades on small controls ---------- */
.code .copy, .copyb, .pager a, .pn a, .chips a { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.code .copy:hover, .code .copy:focus-visible { color: var(--accent-text); border-color: var(--accent); }
.pager a:hover, .chips a:hover { color: var(--accent-text); border-color: var(--accent); }

/* ---------- share row ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; }
.share-h { margin-right: 4px; font: 600 .7rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
.copyb { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font: 600 .86rem var(--f-body); cursor: pointer; }
.copyb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copyb code { display: none; padding: 3px 7px; border-radius: 6px; background: var(--surface); color: var(--mute); font: 500 .74rem var(--f-mono); }
.copyb:hover, .copyb:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.copyb:hover code, .copyb:focus-visible code { background: rgb(0 0 0 / .12); color: inherit; }
/* The short address stays hidden until the pill is hovered (or focused, or just used): then the pill grows to show it.
   Phones and tablets have no hover, so they never see it (a tap copies it, and the label says "Copied"). */
@media (hover: hover) {
  .copyb code { display: inline-block; max-width: 0; margin-left: -8px; padding-inline: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-width .4s ease, margin .4s ease, padding .4s ease, opacity .3s ease; }
  .copyb:hover code, .copyb:focus-visible code, .copyb.copied code { max-width: 16rem; margin-left: 0; padding-inline: 7px; opacity: 1; }
}

/* ---------- Buy Me a Coffee ---------- */
.bmc { display: inline-block; margin-top: 4px; line-height: 0; }
.bmc img { width: 164px; height: auto; border-radius: 10px; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; }
.bmc:hover img, .bmc:focus-visible img { transform: translateY(-2px); filter: saturate(1.15); box-shadow: 0 8px 18px rgb(0 0 0 / .25); }

/* ---------- topics index ---------- */
.topic-list { margin: 0; padding: 0; list-style: none; }
.topic-list a { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-top: 1px dashed var(--line); text-decoration: none; transition: color .25s ease; }
.topic-list li:last-child a { border-bottom: 1px dashed var(--line); }
.topic-list .tn { flex: 1; font: 700 clamp(1.3rem, 5vw, 1.8rem)/1.15 var(--f-display); letter-spacing: -.02em; }
.topic-list .tc { font: 500 .74rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.topic-list svg { width: 22px; height: 22px; fill: none; stroke: var(--mute); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease, stroke .25s ease; }
.topic-list a:hover .tn, .topic-list a:focus-visible .tn { color: var(--accent-text); }
.topic-list a:hover svg, .topic-list a:focus-visible svg { stroke: var(--accent-text); transform: translateX(4px); }

/* ---------- picture frame: keeps any image in shape without cropping ---------- */
.frame { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: var(--ar, 4 / 3); max-height: min(64vh, 560px); background: var(--surface); }
.frame::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg) center / cover; filter: blur(24px) saturate(1.15); opacity: .55; }
.frame > img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* D: a large picture on a full-width blurred band; the picture rises above and hangs below the band */
.hero-band { --over: clamp(14px, 3.2vw, 34px); position: relative; isolation: isolate; overflow-x: clip; margin: 4px 0 30px; }
.hero-band::before { content: ""; position: absolute; top: calc(var(--over) - 48px); bottom: calc(var(--over) - 48px); left: -48px; right: -48px; z-index: -1; background: var(--bg) center / cover; filter: blur(34px) saturate(1.25) brightness(.78); clip-path: inset(48px); }
.hero-band .stage { container-type: inline-size; display: grid; justify-items: center; width: min(100%, 980px); margin-inline: auto; }
.hero-band img { --w: min(calc(100cqw - 2 * var(--gutter)), 760px); --h: min(calc(var(--w) / var(--r)), min(72vh, 540px)); display: block; height: var(--h); width: calc(var(--h) * var(--r)); border-radius: 12px; box-shadow: 0 14px 38px rgb(0 0 0 / .38), 0 2px 6px rgb(0 0 0 / .25); }
@media (min-width: 700px) { .hero-band img { border-radius: 16px; } }

/* Home feature on desktop: a plain rounded picture, no blurred backdrop (phones keep the backdrop) */
@media (min-width: 700px) {
  .feature .frame { background: none; }
  .feature .frame::before { display: none; }
  .feature .frame > img { object-fit: cover; }
}

/* ---------- hover zoom on pictures (6%, slow ease, as on the-ambient.com); only where a mouse can hover ---------- */
.frame > img, .thumb { transition: transform .75s cubic-bezier(.25, .46, .45, .94); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature:hover .frame > img, .row a:hover .thumb, .row a:focus-visible .thumb { transform: scale(1.06); }
}

/* ---------- contact page ---------- */
.cx { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .cx { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding-top: 18px; } .cx-intro { position: sticky; top: 28px; } }
.cx-intro .lede { max-width: 40ch; margin: 0 0 22px; color: var(--mute); }
.cx-hints { margin: 0; padding: 0; list-style: none; }
.cx-hints li { position: relative; padding: 9px 0 9px 24px; border-top: 1px dashed var(--line); color: var(--ink); }
.cx-hints li:last-child { border-bottom: 1px dashed var(--line); }
.cx-hints li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }

.cx-panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 4.5vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.cx-panel::before, .cx-panel::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; }
.cx-panel::before { right: -110px; top: -130px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent); animation: drift 15s ease-in-out infinite alternate; }
.cx-panel::after { left: -140px; bottom: -150px; background: radial-gradient(closest-side, color-mix(in srgb, var(--link) 20%, transparent), transparent); animation: drift 19s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-46px, 38px) scale(1.18); } }

.cx-intro > *, .cx-form .fld, .cx-subject, .cx-actions { animation: rise .65s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.cx-form { --bad: #C5282D; display: grid; gap: 14px; }
:root[data-theme="dark"] .cx-form { --bad: #FF8A8E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cx-form { --bad: #FF8A8E; } }
.cx-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .cx-row { grid-template-columns: 1fr 1fr; gap: 22px; } }

.cx-form .fld { position: relative; }
.cx-form .fld input, .cx-form .fld textarea { display: block; width: 100%; min-height: 62px; padding: 27px 2px 9px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.0625rem; outline: 0; resize: none; }
.cx-form .fld textarea { min-height: 128px; line-height: 1.55; }
.cx-form .fld label { position: absolute; left: 2px; top: 21px; color: var(--mute); font-weight: 500; transform-origin: 0 0; pointer-events: none; transition: transform .28s cubic-bezier(.2, .7, .2, 1), color .28s ease; }
.cx-form .fld input:focus + label, .cx-form .fld input:not(:placeholder-shown) + label, .cx-form .fld textarea:focus + label, .cx-form .fld textarea:not(:placeholder-shown) + label { transform: translateY(-17px) scale(.74); }
.cx-form .fld input:focus + label, .cx-form .fld textarea:focus + label { color: var(--accent-text); }
.cx-form .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.cx-form .fld input:focus ~ .bar, .cx-form .fld textarea:focus ~ .bar { transform: scaleX(1); }
.cx-form .fld.bad .bar { background: var(--bad); box-shadow: none; transform: scaleX(1); }
.cx-form .fld.bad label { color: var(--bad); }
.cx-form .fld.bad { animation: rise .65s cubic-bezier(.2, .7, .2, 1) both, shake .5s .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cx-form .field-error { margin: 7px 0 0; color: var(--bad); font-size: .88rem; }
.cx-form .count { position: absolute; right: 2px; bottom: 11px; color: var(--mute); font: 500 .68rem var(--f-mono); letter-spacing: .06em; opacity: 0; transition: opacity .3s ease; }
.cx-form .fld textarea:focus ~ .count, .cx-form .fld textarea:not(:placeholder-shown) ~ .count { opacity: 1; }

.cx-subject { margin: 4px 0 2px; padding: 0; border: 0; min-width: 0; }
.cx-subject legend { margin: 0 0 10px; padding: 0; color: var(--mute); font: 600 .7rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
.cx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill .sw { min-height: 44px; transition: border-color .25s ease, background-color .25s ease, color .25s ease; }
.pill:hover .sw { border-color: var(--accent); }
.pill input:checked + .sw { border-color: var(--accent); }
.pill input:checked + .sw i { background: var(--accent); }
.pill input:checked + .sw i::after { transform: translateX(10px); }
.pill input:focus-visible + .sw { outline: 3px solid var(--accent); outline-offset: 3px; }

.cx-actions { margin-top: 8px; }
.cx-send { min-height: 56px; gap: 12px; padding: 0 28px 0 30px; font-size: 1rem; }
.cx-send .arr { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.cx-send:hover .arr, .cx-send:focus-visible .arr { transform: translateX(5px); }
.cx-send.is-sending { pointer-events: none; }
.cx-send.is-sending .arr { display: none; }
.cx-send.is-sending .lbl::after { content: ""; display: inline-block; width: 1.4em; text-align: left; animation: dots 1s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.cx-done { display: grid; justify-items: start; gap: 6px; padding: 8px 0; animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.cx-done h2 { margin: 12px 0 0; font: 800 clamp(1.6rem, 5vw, 2.2rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.cx-done p { margin: 0 0 16px; color: var(--mute); max-width: 36ch; }
.tick { width: 68px; height: 68px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tick circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .8s .15s cubic-bezier(.4, 0, .2, 1) forwards; }
.tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- page entrance: the first screen drops in, one piece after another ----------
   Only headings, intro text, toggles and the first few rows. Reading text, header, footer and dock stay still.
   Big pictures use "lift" (movement only, no fade) so they paint immediately. Switched off by prefers-reduced-motion. */
@keyframes lift { from { transform: translateY(18px); } }

/* home */
.feature .media, .hero-band { animation: var(--lift, lift) .7s cubic-bezier(.2, .7, .2, 1) both; }
.feature > div, .topics, .cols .sec, .index .row:nth-child(-n+5), .side .block,
.page:not(.cx) h1, .page:not(.cx) .empty, .page:not(.cx) .topics, .page:not(.cx) form.search, .page:not(.cx) .sec, .topic-list li:nth-child(-n+8), .page:not(.cx) .prose > :nth-child(-n+3), .page:not(.cx) > .wrap > .note,
.post .crumbs, .post h1, .post .byline, .post .note,
.lost .flag, .lost .code-4, .lost h1, .lost .lede, .lost .plate, .lost .tries:first-of-type { animation: var(--rise, rise) .65s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }

.feature > div { --d: 110ms; }
.topics { --d: 200ms; }
.cols .sec, .page:not(.cx) .sec { --d: 260ms; }
.index .row:nth-child(1) { --d: 300ms; }
.index .row:nth-child(2) { --d: 360ms; }
.index .row:nth-child(3) { --d: 420ms; }
.index .row:nth-child(4) { --d: 480ms; }
.index .row:nth-child(5) { --d: 540ms; }
.side .block:nth-child(1) { --d: 340ms; }
.side .block:nth-child(2) { --d: 420ms; }

.page:not(.cx) .empty { --d: 90ms; }
.page:not(.cx) form.search { --d: 150ms; }
.topic-list li:nth-child(1) { --d: 200ms; }
.topic-list li:nth-child(2) { --d: 260ms; }
.topic-list li:nth-child(3) { --d: 320ms; }
.topic-list li:nth-child(4) { --d: 380ms; }
.topic-list li:nth-child(n+5) { --d: 440ms; }
.page:not(.cx) .prose > :nth-child(1) { --d: 160ms; }
.page:not(.cx) .prose > :nth-child(2) { --d: 220ms; }
.page:not(.cx) .prose > :nth-child(3) { --d: 280ms; }

.post .crumbs { --d: 0ms; }
.post h1 { --d: 70ms; }
.post .byline { --d: 140ms; }
.post .note { --d: 200ms; }

.lost .flag { --d: 0ms; }
.lost .code-4 { --d: 80ms; }
.lost h1 { --d: 180ms; }
.lost .lede { --d: 250ms; }
.lost .plate { --d: 320ms; }
.lost .tries:first-of-type { --d: 400ms; }

/* ---------- 404 "Did you mean" ---------- */
.row.plain a { grid-template-columns: 1.5rem minmax(0, 1fr); }
.mean .row:first-child h3 { font-size: clamp(1.35rem, 4.6vw, 1.7rem); }

/* ---------- About page (themes/signal/page-about-me.php) ---------- */
.about h1 { max-width: 15ch; text-wrap: balance; }
.about-lede { max-width: 40ch; margin: 0 0 26px; color: var(--mute); font-size: clamp(1.08rem, 3.6vw, 1.3rem); line-height: 1.5; }
.about section { margin-top: clamp(44px, 9vw, 80px); }
.about h2 { margin: 0 0 22px; font: 720 clamp(1.45rem, 4.6vw, 1.85rem)/1.15 var(--f-display); letter-spacing: -.018em; text-wrap: balance; }
.about .story { margin-top: clamp(40px, 8vw, 64px); }

/* The four chapters: a vertical timeline on phones, four columns on a wide screen. */
.chapters { list-style: none; margin: 0; padding: 0; display: grid; }
.chapters > li { position: relative; margin-left: 5px; padding: 0 0 30px 28px; border-left: 1px solid var(--line); }
.chapters > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.chapters > li::before { content: ""; position: absolute; left: -6px; top: .2rem; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ch-n { display: block; margin: 0 0 8px; font: 600 .7rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }
.chapters h3 { margin: 0 0 8px; font: 700 1.2rem/1.2 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.chapters p { margin: 0; max-width: 38ch; color: var(--mute); }
@media (min-width: 900px) {
  .chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
  .chapters > li, .chapters > li:last-child { margin: 0; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .chapters > li::before { left: 0; top: -6px; }
}

/* The languages trail under the Tech chapter: BASIC to Visual Basic to Java to PHP to vibe coding. */
.trail { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; font: 600 .7rem/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.trail li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); }
.trail li:not(:last-child)::after { content: "\2192"; color: var(--accent-text); }
.trail li:last-child { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* Numbers: plain, no boxes. */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.stats li { padding-top: 14px; border-top: 1px solid var(--line); }
.stats b { display: block; font: 800 clamp(2.3rem, 9vw, 3.4rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 10px; color: var(--mute); font: 500 .72rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.honest { max-width: var(--measure); padding: clamp(22px, 4.5vw, 34px); border-radius: 18px; background: var(--surface); }
.honest h2 { margin-bottom: 14px; }
.honest .prose ul { margin: 0; }
.byday p { max-width: var(--measure); margin: 0 0 18px; }
.byday .about-cta { margin: 0; }
.about-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Things slide up as they scroll into view. signal.js adds .rv only when it can also reveal them, so nothing is ever hidden without it. */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
  .rv.in { opacity: 1; transform: none; }
  .chapters > li:nth-child(2), .stats li:nth-child(2) { --d: 90ms; }
  .chapters > li:nth-child(3), .stats li:nth-child(3) { --d: 180ms; }
  .chapters > li:nth-child(4), .stats li:nth-child(4) { --d: 270ms; }
}

/* ---------- cookie question (themes/signal/partials/consent.php, logic in signal.js) ----------
   Sits above the phone dock; bottom-left card on desktop. Both buttons have the same size and weight. */
.consent { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 420px; margin-inline: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgb(0 0 0 / .28); color: var(--ink); animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.consent[hidden] { display: none; }
.consent h2 { margin: 0 0 6px; font: 740 1rem/1.2 var(--f-display); letter-spacing: -.01em; }
.consent p { margin: 0 0 14px; color: var(--mute); font-size: .9rem; line-height: 1.5; }
.consent p a { color: var(--link); }
.consent .acts { display: flex; gap: 8px; }
.consent .btn { flex: 1 1 0; min-height: 44px; padding: 0 12px; font-size: .9rem; }
@media (min-width: 900px) { .consent { left: 20px; right: auto; bottom: 20px; width: 400px; margin-inline: 0; } }

/* ---------- page-to-page fade (CSS view transitions; unsupported browsers simply navigate as before) ----------
   Level 2: the page content cross-fades; the phone dock and the cookie card are separate layers, so they stay crisp and
   do not blend. A tiny script in layout.php adds class "vt" to <html> when a transition is playing, and the entrance
   "rise" and "lift" animations step aside so the two effects do not stack. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .dock { view-transition-name: dock; }
  .consent { view-transition-name: consent; }
  ::view-transition-old(root) { animation: vt-out .18s ease both; }
  ::view-transition-new(root) { animation: vt-in .26s cubic-bezier(.2, .7, .2, 1) both; }
  html.vt { --rise: vt-none; --lift: vt-none; }
  /* A list picture grows into the post's top picture (and back). Both ends are cropped to fill so nothing is stretched. */
  ::view-transition-group(hero-pic) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); overflow: clip; border-radius: 16px; }
  ::view-transition-old(hero-pic), ::view-transition-new(hero-pic) { width: 100%; height: 100%; object-fit: cover; }   /* no @keyframes of that name exist, so the entrance animations do not run */
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }