/* Light-only technology journal: blue / white surfaces, full-colour identity,
   modern sans type and progressive motion with reduced-motion support. */
@font-face { font-family: Geist; src: url('../fonts/GeistVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans SC'; src: url('../fonts/NotoSansSCVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --paper: #f6f7f9; --surface: #edf0f4; --ink: #202c3b; --soft: #3b4859;
  --muted: #5b697b; --faint: #657387; --rule: #dfe4eb;
  --accent: #386bc0; --cyan: #386bc0;
  --sans: Geist, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --reading: var(--sans);
  --mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --frame: 1200px; --margin: 32px; --head-h: 88px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 32px; }
body { position: relative; isolation: isolate; margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, pre { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { color: var(--paper); background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
a, button { -webkit-tap-highlight-color: transparent; transition: color 300ms var(--ease), opacity 300ms var(--ease), background-color 300ms var(--ease); }
a:hover { color: var(--accent); }
.wrap { width: min(var(--frame),calc(100% - var(--margin) * 2)); margin-inline: auto; }
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 200; padding: 12px 16px; background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.bg { position: fixed; inset: 0; z-index: -1; display: block; pointer-events: none; overflow: hidden; background: var(--paper); }
/* Navigation */
.site-head { position: relative; z-index: 70; }
.head-inner { min-height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 32px; height: 32px; flex: none; filter: none; opacity: 1; transition: transform 500ms var(--ease); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; align-items: baseline; gap: 12px; }
.brand-text strong { font: 650 18px/28px var(--sans); letter-spacing: 0; }
.brand-text em { font: 400 12px/16px var(--sans); color: var(--muted); font-style: normal; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav > a { min-height: 40px; display: inline-flex; align-items: center; font: 500 14px/20px var(--sans); }
.nav a.is-active { color: var(--accent); }
.nav-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.nav .nav-icon { display: grid; }
.nav-icon:hover, .burger:hover { background: var(--surface); color: var(--ink); }
.burger { display: none; }
.burger { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; }
.burger span { position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; background: var(--ink); transition: transform 500ms var(--ease); }
.burger span:first-child { transform: translate(-50%,-4px); }
.burger span:last-child { transform: translate(-50%,3px); }
.burger[aria-expanded='true'] span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: calc(var(--head-h) + 32px) var(--margin) 32px; background: var(--paper); overflow-y: auto; }
.mobile-menu nav a { display: flex; justify-content: space-between; align-items: baseline; padding-block: 24px; font: 500 36px/40px var(--reading); animation: menu-enter 600ms var(--ease) both; }
.mobile-menu nav a:nth-child(2) { animation-delay: 60ms; }
.mobile-menu nav a:nth-child(3) { animation-delay: 120ms; }
.mobile-menu nav a span { font: 400 12px/16px var(--sans); color: var(--faint); }
.mobile-contacts { display: grid; gap: 12px; font: 400 14px/20px var(--sans); color: var(--muted); overflow-wrap: anywhere; }
@keyframes menu-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Colourful identity and lightweight signal motion. */
.hero { display: flex; flex-direction: column; align-items: center; padding-top: 64px; padding-bottom: 40px; gap: 32px; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.eyebrow { color: #3c659c; font: 500 14px/20px var(--sans); letter-spacing: .02em; margin-bottom: 24px; }
.pulse { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--cyan); vertical-align: middle; animation: signal-pulse 2800ms var(--ease) infinite; }
.caret { display: inline-block; width: 2px; height: 20px; background: var(--cyan); animation: cursor-pulse 1600ms var(--ease) infinite; }
.hero-title { font: 700 96px/1.08 var(--sans); letter-spacing: .02em; padding: 0; background: linear-gradient(105deg,#315b9b,#547db7); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-title .accent { display: inline-block; color: var(--cyan); -webkit-text-fill-color: var(--cyan); letter-spacing: 0; margin: 0; animation: signal-pulse 2800ms var(--ease) infinite; }
.hero-sub { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; font: 500 20px/28px var(--sans); letter-spacing: .10em; color: var(--soft); }
.hero-slash { color: var(--cyan); font-family: var(--sans); }
.hero-quote { max-width: 560px; }
.hero-desc { font: 400 24px/32px var(--sans); color: var(--soft); text-wrap: balance; }
.quote-break { display: none; }
.hero-credit { margin-top: 16px; font: 400 12px/16px var(--sans); color: var(--muted); }
.hero-summary { font: 500 14px/20px var(--sans); color: #3269a6; letter-spacing: .02em; }
.ticker { padding-block: 0; margin-bottom: 48px; border: 0; }
.ticker-track { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.ticker-track span { padding: 8px 12px; border: 0; border-radius: 8px; background: var(--surface); font: 500 12px/16px var(--sans); letter-spacing: 0; color: #376394; transition: transform 500ms var(--ease), background-color 300ms var(--ease); }
/* Two-column note feed, preserving chronological reading order. */
.stream { display: block; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-head h2 { display: flex; align-items: baseline; gap: 12px; font: 600 30px/36px var(--sans); }
.sec-index { color: var(--accent); font: 400 12px/16px var(--sans); }
.sec-more, .sec-note { color: var(--muted); font: 400 12px/16px var(--sans); }
.sec-more { display: inline-flex; align-items: center; min-height: 40px; gap: 12px; }
.post-list { columns: 2; column-gap: 16px; }
.post-card { display: inline-block; width: 100%; break-inside: avoid; vertical-align: top; margin-bottom: 16px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); transition: transform 500ms var(--ease), border-color 300ms var(--ease); }
.pc-link { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 24px; border: 0; border-radius: 12px; }
.pc-link:hover { color: inherit; }
.pc-link:hover .pc-main { color: var(--soft); }
.pc-date { display: flex; align-items: baseline; gap: 8px; font: 500 12px/16px var(--sans); letter-spacing: .02em; color: #426da7; }
.pc-main { min-width: 0; color: var(--soft); transition: color 300ms var(--ease); }
.pc-title { font: 650 24px/32px var(--sans); margin-bottom: 12px; color: var(--ink); }
.pc-text, .pc-ex { font: 400 18px/28px var(--sans); text-align: left; overflow-wrap: anywhere; }
.pc-ex { color: var(--muted); }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; font: 400 12px/16px var(--sans); color: var(--faint); }
.pc-tag--pin { color: var(--accent); }
.pc-arrow { position: absolute; right: 24px; top: 24px; font: 400 18px/24px var(--sans); color: var(--accent); opacity: .65; transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.pc-link:hover .pc-arrow { opacity: 1; transform: translate(2px,-2px); color: var(--accent); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 0; font: 400 12px/16px var(--sans); }
.pager-btn { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 0; }
.pager-btn.is-off { color: var(--faint); opacity: .6; }
.pager-now { color: var(--muted); }
.pager-now i { font-style: normal; color: var(--faint); padding-inline: 8px; }
.empty { padding: 48px 24px; text-align: center; display: grid; gap: 16px; }
.empty .mono { font-size: 12px; color: var(--muted); }
/* Interior page furniture */
.page-head { padding-top: 40px; padding-bottom: 32px; }
.page-head .eyebrow { margin-bottom: 24px; }
.page-title { font: 650 72px/1.08 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.page-sub { max-width: 680px; margin-top: 24px; font: 400 20px/28px var(--sans); color: var(--muted); }
.year-chips { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; }
.year-chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding-block: 8px; font: 500 16px/24px var(--sans); }
.year-chip i { font: 400 12px/16px var(--sans); color: var(--faint); }
.year-block { display: block; padding-block: 0; border: 0; }
.year-label { position: static; display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.year-num { display: inline; font: 600 20px/28px var(--sans); color: var(--accent); }
.year-count { display: inline; margin: 0; font: 400 12px/16px var(--sans); color: var(--faint); }
.year-item a { display: grid; grid-template-columns: 48px minmax(0,1fr) 20px; gap: 16px; padding: 20px 16px; align-items: baseline; border-radius: 8px; }
.yi-date { font: 400 12px/16px var(--sans); color: var(--faint); }
.yi-title { display: block; font: 500 18px/28px var(--sans); overflow-wrap: anywhere; }
.yi-ex { display: block; margin-top: 8px; font: 400 16px/24px var(--sans); color: var(--muted); }
.yi-arrow { color: var(--faint); font: 400 16px/24px var(--sans); }
/* About */
.about-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 48px; align-items: center; }
.about-card { display: flex; flex-direction: column; gap: 24px; }
.avatar-tile { width: 160px; aspect-ratio: 1; background: var(--surface); border: 0; border-radius: 16px; overflow: hidden; }
.avatar-tile img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.avatar-tile img.avatar-logo { padding: 32px; object-fit: contain; }
.about-id h2 { font: 600 24px/32px var(--sans); }
.about-id p { font: 400 12px/16px var(--sans); margin-top: 8px; color: var(--faint); }
.about-bio { max-width: none; padding: 32px; border: 0; border-radius: 8px; background: #fff; font: 400 20px/32px var(--sans); color: var(--soft); }
.contact, .facts, .about-site { margin-top: 40px; }
.contact .section-head, .about-site .section-head { margin-bottom: 24px; }
.contact-row { width: 100%; display: grid; grid-template-columns: 144px minmax(0,1fr) 64px; gap: 24px; align-items: center; padding: 24px; border: 0; border-radius: 12px; text-align: left; background: #fff; }
.cr-k, .cr-act { font: 400 12px/16px var(--sans); color: var(--faint); }
.cr-v { font: 400 24px/32px var(--sans); overflow-wrap: anywhere; min-width: 0; }
.cr-act { text-align: right; color: var(--accent); }
.facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; }
.fact-num { display: block; font: 600 60px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); }
.fact-k { display: block; margin-top: 16px; font: 400 12px/16px var(--sans); color: var(--faint); }
.about-note { width: 100%; max-width: none; padding: 24px; border: 0; border-radius: 8px; background: #fff; font: 400 18px/28px var(--sans); color: var(--soft); }
.about-note p + p { margin-top: 24px; }
.about-note .mono { font: 400 14px/24px var(--sans); color: var(--muted); }
/* Search */
.search-form { display: flex; gap: 8px; max-width: 680px; margin-top: 32px; padding: 8px; border: 0; border-radius: 12px; background: #fff; }
.search-form input { flex: 1; width: 0; min-width: 0; border: 0; background: none; padding: 8px 12px; font: 400 18px/28px var(--sans); }
.search-form input:focus { outline: none; }
.search-form:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.search-form input::placeholder { color: var(--faint); opacity: 1; }
.search-form button { border: 0; border-radius: 8px; background: var(--accent); color: #fff; padding: 8px 16px; font: 600 14px/20px var(--sans); white-space: nowrap; }
.search-hint { margin-top: 24px; font: 400 12px/16px var(--sans); color: var(--muted); }
/* Reading */
.article-head, .article-body, .article-nav, .article-end { width: min(720px,calc(100% - var(--margin) * 2)); margin-inline: auto; }
.article-head { padding-top: 48px; }
.back { display: inline-flex; align-items: center; min-height: 40px; font: 400 12px/16px var(--sans); color: var(--muted); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; font: 400 12px/16px var(--sans); color: var(--faint); }
.article-meta .sep { opacity: .5; }
.draft-flag { color: var(--accent); }
.article-title { margin-top: 24px; font: 600 48px/1.25 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.article-title--quiet { font-weight: 400; }
.article-title-date { font: 400 20px/28px var(--sans); color: var(--faint); }
.article-body { margin-top: 40px; padding: 32px; border: 0; border-radius: 8px; background: #fff; }
.prose { font: 400 18px/30px var(--sans); color: var(--soft); overflow-wrap: anywhere; }
.prose p { margin-bottom: 24px; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.prose strong, .prose b { font-weight: 600; color: var(--ink); }
.prose h2, .prose h3, .prose h4 { font-weight: 600; line-height: 1.5; margin: 48px 0 24px; color: var(--ink); }
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 24px; }
.prose h4 { font-size: 20px; }
.prose ul, .prose ol { padding-left: 24px; margin-block: 24px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-block: 8px; }
.prose blockquote { margin: 32px 0; padding: 24px 32px; background: var(--surface); color: var(--muted); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { margin: 32px auto; cursor: zoom-in; max-width: 100%; height: auto; }
.prose figure { margin-block: 32px; }
.prose figure img { margin: 0 auto; }
.prose figcaption { margin-top: 12px; font: 400 12px/20px var(--sans); color: var(--faint); }
.prose hr { height: 1px; width: 64px; border: 0; background: var(--rule); margin: 48px auto; }
.prose code { background: var(--surface); padding: 2px 4px; font-family: var(--mono); font-size: .8em; }
.prose pre { margin-block: 32px; padding: 24px; background: var(--surface); overflow-x: auto; font: 400 14px/24px var(--mono); }
.prose pre code { padding: 0; background: none; font: inherit; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: 32px; font: 400 14px/24px var(--sans); }
.prose th, .prose td { border: 0; padding: 12px 16px; text-align: left; }
.prose th { background: var(--surface); }
.img-fallback { padding: 40px 24px; background: var(--surface); font: 400 14px/24px var(--sans); color: var(--muted); text-align: center; }
.article-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; padding-top: 24px; border-top: 0; margin-top: 64px; }
.an-item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.an-next { text-align: right; align-items: flex-end; }
.an-k, .an-d { font: 400 12px/16px var(--sans); color: var(--faint); }
.an-t { font: 500 18px/28px var(--sans); overflow-wrap: anywhere; }
.article-end { margin-top: 40px; text-align: center; }
.end-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; font: 400 14px/20px var(--sans); color: var(--accent); }
.read-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 100; pointer-events: none; }
.read-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* Error */
.error-wrap { padding-block: 64px; text-align: center; }
.error-code { font: 400 96px/1 var(--reading); color: var(--accent); }
.error-title { margin-top: 32px; font: 500 36px/44px var(--reading); }
.error-msg { margin-top: 16px; color: var(--muted); }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 32px; }
.btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 40px; font: 500 14px/20px var(--sans); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { color: var(--paper); background: var(--accent); }
/* Full-width closing surface; animate content once without moving the background. */
.site-foot { margin-top: 64px; background: var(--surface); padding-bottom: max(48px,env(safe-area-inset-bottom)); }
.site-foot > .footer-shell { padding-top: 48px; padding-bottom: 0; background: transparent; }
.footer-shell.reveal.is-in { animation: footer-enter 600ms var(--ease) backwards; }
@keyframes footer-enter { from { opacity: 0; } to { opacity: 1; } }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.foot-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; min-width: 0; }
.foot-brand { font: 600 24px/32px var(--sans); color: var(--ink); }
.foot-word { font: 500 12px/16px var(--sans); color: var(--muted); letter-spacing: .08em; }
.foot-contact { font: 400 14px/20px var(--sans); color: var(--soft); overflow-wrap: anywhere; min-width: 0; }
.foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font: 400 12px/20px var(--sans); color: var(--muted); }
.foot-bottom > span { min-width: 0; overflow-wrap: anywhere; }

/* Transient UI */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 130; max-width: calc(100% - 32px); background: var(--ink); color: var(--paper); padding: 12px 24px; font: 400 14px/20px var(--sans); pointer-events: none; opacity: 0; transform: translate(-50%,8px); transition: opacity 300ms var(--ease), transform 500ms var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%,0); }
.lightbox { position: fixed; inset: 0; z-index: 140; background: rgba(24,24,24,.96); display: grid; place-items: center; padding: 64px 24px 24px; opacity: 0; visibility: hidden; pointer-events: none; cursor: zoom-out; transition: opacity 300ms var(--ease); }
.lightbox.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 96px); object-fit: contain; }
.lightbox-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; background: #313131; color: #fff; font: 400 18px/28px var(--sans); }
.reveal { opacity: 1; }
.reveal.is-in { animation: tech-enter 700ms var(--ease) backwards; }
@keyframes tech-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  :root { --margin: 24px; }
  .post-list { column-gap: 16px; }
  .about-grid { grid-template-columns: 192px minmax(0,1fr); gap: 40px; }
  .about-bio { padding: 24px; font-size: 18px; line-height: 28px; }
}
@media (max-width: 820px) {
  .nav { display: none; }
  .burger { display: block; }
  .head-inner { gap: 8px; }
  .brand-text em { display: none; }
  .site-head:has(.burger[aria-expanded='true']) { position: sticky; top: 0; background: var(--paper); }
}
@media (max-width: 600px) {
  :root { --margin: 16px; --head-h: 72px; }
  .brand-mark { width: 24px; height: 24px; }
  .brand-text strong { font-size: 18px; line-height: 28px; }
  .hero { padding-top: 40px; padding-bottom: 32px; gap: 24px; }
  .eyebrow { font-size: 12px; line-height: 16px; margin-bottom: 24px; letter-spacing: 0; }
  .hero-title { font-size: 60px; line-height: 1.1; }
  .hero-sub { font-size: 16px; line-height: 24px; margin-top: 16px; }
  .hero-desc { font-size: 20px; line-height: 28px; }
  .hero-credit { margin-top: 12px; }
  .hero-summary { font-size: 12px; line-height: 16px; letter-spacing: 0; }
  .ticker { padding-block: 16px; margin-bottom: 32px; }
  .ticker-track { gap: 8px 16px; }
  .ticker-track span { letter-spacing: 0; }
  .section-head { margin-bottom: 24px; gap: 16px; }
  .section-head h2 { font-size: 24px; line-height: 32px; gap: 8px; }
  .sec-more { gap: 8px; }
  .post-list { columns: 1; }
  .post-card { margin-bottom: 24px; }
  .pc-link { padding: 24px; gap: 16px; }
  .pc-title { font-size: 24px; line-height: 32px; }
  .pc-text, .pc-ex { font-size: 18px; line-height: 28px; }
  .pc-meta { margin-top: 16px; }
  .pc-arrow { top: 24px; right: 24px; }
  .pager { padding-top: 16px; gap: 8px; }
  .pager-btn { font-size: 12px; line-height: 16px; }
  .page-head { padding-top: 40px; padding-bottom: 32px; }
  .page-title { font-size: 48px; line-height: 1.1; }
  .page-sub { font-size: 18px; line-height: 32px; margin-top: 24px; }
  .year-block { padding-block: 0; }
  .year-label { gap: 12px; }
  .year-num { font-size: 20px; line-height: 28px; }
  .year-count { margin-top: 0; }
  .year-item a { grid-template-columns: 40px minmax(0,1fr) 16px; gap: 12px; padding: 16px 8px; }
  .yi-title { font-size: 18px; line-height: 28px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-card { flex-direction: row; align-items: center; gap: 24px; }
  .avatar-tile { width: 96px; flex: none; }
  .avatar-tile img.avatar-logo { padding: 16px; }
  .about-id h2 { font-size: 24px; line-height: 32px; }
  .about-id p { font-size: 12px; line-height: 20px; }
  .about-bio { padding: 24px; font-size: 18px; line-height: 28px; }
  .contact, .facts, .about-site { margin-top: 48px; }
  .contact-row { grid-template-columns: 1fr auto; gap: 12px; }
  .cr-v { grid-column: 1 / -1; grid-row: 2; font-size: 18px; line-height: 28px; }
  .cr-act { grid-column: 2; grid-row: 1; }
  .facts { gap: 16px; }
  .fact { padding: 16px; }
  .fact-num { font-size: 36px; line-height: 40px; }
  .about-note { padding: 24px; font-size: 16px; line-height: 28px; }
  .search-form input { font-size: 18px; line-height: 28px; }
  .article-head { padding-top: 32px; }
  .article-title { font-size: 30px; line-height: 44px; }
  .article-meta { margin-top: 24px; }
  .article-body { margin-top: 32px; padding: 24px; }
  .prose { font-size: 16px; line-height: 28px; }
  .prose blockquote, .prose pre { padding: 24px; }
  .article-nav { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .an-next { align-items: flex-start; text-align: left; }
  .error-wrap { padding-block: 48px; }
  .error-code { font-size: 72px; }
  .error-title { font-size: 30px; line-height: 40px; }
  .site-foot { margin-top: 64px; }
}

/* Direct year links retain native navigation, history and no-script support. */
.archive-years { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.archive-year { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 16px; border-radius: 8px; background: var(--surface); font: 600 14px/20px var(--sans); color: #326199; }
.archive-year small { font: 400 12px/16px var(--sans); color: var(--muted); }
.archive-year:hover { background: #dceaff; }
.archive-year.is-active { background: var(--accent); color: #fff; }
.archive-year.is-active small { color: #fff; }
/* Real writing data fills the opening; the chart links to each year's archive. */
.hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.85fr); align-items: center; gap: 32px; padding-top: 32px; padding-bottom: 24px; text-align: left; }
.hero-intro { min-width: 0; }
.hero-copy { align-items: flex-start; }
.hero-sub { justify-content: flex-start; }
.hero-quote { margin-top: 32px; }
.hero-desc { text-wrap: pretty; }
.writing-overview { min-width: 0; padding: 24px; border-radius: 12px; background: #fff; }
.overview-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; font: 500 12px/16px var(--sans); color: var(--muted); }
.overview-head > span:first-child { color: #326199; }
.overview-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.overview-totals strong { display: block; font: 600 36px/40px var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.overview-totals > div:first-child strong { color: var(--accent); }
.overview-totals span { display: block; margin-top: 8px; font: 400 12px/16px var(--sans); color: var(--muted); }
.year-activity { margin-top: 32px; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: 400 12px/16px var(--sans); color: var(--faint); }
.activity-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 24px; align-items: center; gap: 12px; min-height: 32px; font: 500 12px/16px var(--sans); color: var(--muted); }
.activity-track { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface); }
.activity-fill { display: block; height: 100%; background: #a4b7d2; border-radius: inherit; transform: scaleX(var(--ratio)); transform-origin: left; }
.activity-row:first-of-type .activity-fill { background: var(--accent); }
.activity-row:hover .activity-fill { background: var(--cyan); }
.activity-count { text-align: right; font-variant-numeric: tabular-nums; }
.writing-overview.is-in .activity-fill { animation: activity-enter 900ms var(--ease) backwards; animation-delay: calc(var(--row) * 60ms); }
@keyframes activity-enter { from { transform: scaleX(0); } to { transform: scaleX(var(--ratio)); } }
.ticker-track { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .hero-intro { text-align: center; }
  .hero-copy { align-items: center; }
  .hero-sub { justify-content: center; }
  .hero-quote { margin-inline: auto; margin-top: 24px; }
  .writing-overview { width: 100%; max-width: 680px; margin-inline: auto; padding: 24px; }

  .overview-totals { margin-top: 16px; gap: 16px; }
  .overview-totals strong { font-size: 30px; line-height: 36px; }
  .ticker-track { justify-content: center; }
}
/* Hover, active and ambient motion are isolated from document layout. */
.bg-grid { position: absolute; inset: -24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M64 0H0V64' fill='none' stroke='%2392b8ee' stroke-opacity='.12'/%3E%3C/svg%3E"); background-size: 64px 64px; opacity: .12; }
.bg-noise { display: none; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.05); }
.nav a.is-active { color: var(--accent); }
.ticker-track span:hover { background: #dcecff; transform: translateY(-2px); }
.post-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(36,107,253,.16); }
.pc-link:hover .pc-title { color: var(--accent); }
.pager-btn:not(.is-off):hover { color: var(--accent); }
.year-list { padding: 8px; border: 0; border-radius: 8px; background: #fff; }
.year-item a:hover { background: #f0f6ff; }
.fact { padding: 24px; border: 0; border-radius: 8px; background: #fff; }
.contact-row:hover { background: #f0f6ff; }
.search-form button:hover { background: #1457df; }
button:active, .pager-btn:active { transform: scale(.98); }
.hero-sub.reveal.is-in { animation-delay: 60ms; }
.hero-quote.reveal.is-in { animation-delay: 120ms; }
.hero-summary.reveal.is-in { animation-delay: 180ms; }
.post-card.reveal.is-in { animation-delay: min(calc(var(--i,0) * 40ms),240ms); }
@keyframes signal-pulse { 0%, 100% { opacity: .7; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes cursor-pulse { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
@keyframes grid-drift { from { transform: translateY(0); } to { transform: translateY(24px); } }
@media (max-width: 600px) {
  .site-foot { margin-top: 48px; padding-bottom: max(32px,env(safe-area-inset-bottom)); }
  .site-foot > .footer-shell { padding-top: 32px; padding-bottom: 0; }
  .foot-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot-brand { font-size: 20px; line-height: 28px; }
  .foot-bottom { flex-direction: column; gap: 4px; margin-top: 16px; }

}
@media (max-width: 350px) {
  .fact-num { font-size: 30px; line-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-head, .site-foot, .mobile-menu, .article-nav, .article-end, .read-progress, .ticker, .toast, .lightbox { display: none !important; }
  body { color: #000; background: #fff; }
  .wrap, .article-head, .article-body { width: 100%; }
  .prose { color: #000; }
  .reveal.is-in { animation: none; }
}

/* Long titles, addresses and pasted content must stay within the viewport. */
.brand-copy, .pc-main, .foot-contact, .foot-stack { min-width: 0; overflow-wrap: anywhere; }
.prose { overflow-wrap: anywhere; }
.prose img { max-width: 100%; height: auto; }
.prose table { display: block; max-width: 100%; overflow-x: auto; }

/* Refined surfaces and consistent alignment. */
.overview-head { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.overview-head > span:last-child, .overview-totals > div:last-child { text-align: left; }
.hero-desc { letter-spacing: .03em; }
.reveal-ready .reveal:not(.is-in) { opacity: 0; }
@media (max-width: 900px) { .overview-head { gap: 16px; } }
@media (max-width: 600px) {
  .pc-link, .about-bio, .about-note, .contact-row, .article-body { padding: 16px; }
  .pc-arrow { right: 16px; top: 16px; }
  .writing-overview { padding: 16px; }
  .hero-title { letter-spacing: .02em; }
  .contact, .facts, .about-site { margin-top: 32px; }
  .ticker { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .reveal-ready .reveal:not(.is-in) { opacity: 1; } }
@media print { .bg { display: none; } .reveal-ready .reveal:not(.is-in) { opacity: 1; } }

/* Keep the author portrait while giving the biography room to breathe. */
.about-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 32px; }
.about-card { align-items: flex-start; }
.mobile-menu a[aria-current="page"] { color: var(--accent); }
@media (max-width: 600px) {
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .year-activity { display: none; }
}

/* A warmer journal surface with one restrained blue accent. */
:root {
  --paper: #eeeae2;
  --surface: #e2e8ec;
  --ink: #24313b;
  --soft: #40505a;
  --muted: #596971;
  --faint: #65777e;
  --rule: #d3d9d8;
  --accent: #436b85;
  --cyan: #436b85;
}
.bg-grid {
  inset: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Ccircle cx='1' cy='1' r='.7' fill='%23808b8b' fill-opacity='.32'/%3E%3C/svg%3E");
  background-size: 96px 96px;
}
.hero-title { background-image: linear-gradient(105deg,#344c5b,#5f8192); }
.hero-title .accent { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.eyebrow, .hero-summary, .pc-date, .ticker-track span, .archive-year { color: #4b6878; }
.writing-overview { background: #dbe5e8; box-shadow: inset 0 0 0 1px #cbd9dd; }
.overview-head > span:first-child { color: #456577; }
.activity-fill { background: #9eb8c3; }
.ticker-track span, .archive-year { background: #e0e6e6; }
.ticker-track span:hover, .archive-year:hover { background: #d5e0e2; }
.post-card { background: #f8f6f1; box-shadow: inset 0 0 0 1px #dedbd3; }
.post-card:hover { box-shadow: inset 0 0 0 1px #aebec0; }
.year-list, .about-bio, .about-note, .contact-row, .fact, .article-body, .search-form { background: #f8f6f1; }
.year-item a:hover, .contact-row:hover { background: #edf0eb; }
.search-form button:hover { background: #355c73; }
.site-foot { background: #dce5e6; }
@media print {
  body { background: #fff; color: #000; }
  .article-body { background: #fff; }
}

/* Cool, technical surfaces: a shared slate-blue palette and a fine grid. */
:root {
  --paper: #e9eef4;
  --surface: #dce6f0;
  --ink: #182b3d;
  --soft: #344b5e;
  --muted: #516b7c;
  --faint: #60798a;
  --rule: #cbd8e3;
  --accent: #28689d;
  --cyan: #28689d;
}
.bg-grid {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M96 0H0V96' fill='none' stroke='%237991a5' stroke-opacity='.12'/%3E%3Ccircle cx='1' cy='1' r='1.2' fill='%237991a5' fill-opacity='.28'/%3E%3C/svg%3E");
  background-size: 96px 96px;
}
.hero-title { background-image: linear-gradient(105deg,#203d59,#3976a1); }
.hero-title .accent { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.eyebrow, .hero-summary, .pc-date, .ticker-track span, .archive-year { color: #386783; }
.writing-overview { background: rgb(215 229 239 / 25%); box-shadow: inset 0 0 0 1px #c1d4e2; }
.overview-head > span:first-child { color: #386783; }
.activity-fill { background: #91b2c7; }
.ticker-track span, .archive-year { background: rgb(220 232 241 / 25%); }
.ticker-track span:hover, .archive-year:hover { background: rgb(205 223 235 / 25%); }
.post-card { background: rgb(243 247 250 / 25%); box-shadow: inset 0 0 0 1px #cedce6; }
.post-card:hover { box-shadow: inset 0 0 0 1px #91b1c5; }
.year-list, .about-bio, .about-note, .contact-row, .fact, .article-body, .search-form { background: rgb(243 247 250 / 25%); }
.year-item a:hover, .contact-row:hover { background: rgb(227 238 245 / 25%); }
.search-form button:hover { background: #20547f; }
.site-foot { background: rgb(214 227 237 / 20%); }
@media print { body, .article-body { background: #fff; color: #000; } }

.archive-year.is-active, .archive-year.is-active:hover { background: var(--accent); }
@media print { .article-body { background: #fff; } }