/* Reading pages design system. One stylesheet for every non-3D page (reading, credits, 404).
   Structure and principles follow reference/felixrieseberg.com (assets/posts/posts.css, assets/theme/flat.css): tokens for ground/ink/muted/rule/accent,
   a 680px reading measure, mono meta lines, a log-style list, one header and one footer, a prev/next block, system light/dark.
   Colours, type and shapes are Ray's: the room's warm dark browns and the lamp-orange accent. */

/* Fallback metrics keep the swap from Bricolage Grotesque to the system font from shifting the layout (CLS). */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 97%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

:root {
  color-scheme: dark light;
  --display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  /* dark is the room: brown-black ground, warm paper ink, lamp orange. AA checked in build-assets/restyle/contrast.txt */
  --ground: #120d09; --sheet: #1a120c; --raise: #231810; --raise2: #2d1f13;
  --ink: #f4e8d6; --soft: #dccab0; --muted: #b9a389; --rule: rgba(255, 181, 107, .17); --rule-strong: rgba(255, 181, 107, .34);
  --accent: #ffb56b; --accent-hi: #ffd09a; --on-accent: #1a120c; --glow: rgba(255, 170, 90, .10);
  --code-bg: #0b0907; --code-bar: #1d140d; --code-label: #b9a389; --code-ink: #e9dcc8;
  --ok: #8fd18f; --warn: #ff9a6e;
  --r: 10px; --r-sm: 6px;
  --measure: 680px; --wrap: 1080px; --gutter: clamp(18px, 4vw, 32px);
  --step: clamp(17px, 1.1vw + 13.5px, 19px);
}
@media (prefers-color-scheme: light) {
  :root {
    --ground: #f6f2ec; --sheet: #fffdf9; --raise: #fbf6ee; --raise2: #f0e7da;
    --ink: #20150b; --soft: #3b2c1e; --muted: #67533f; --rule: rgba(70, 40, 10, .16); --rule-strong: rgba(70, 40, 10, .38);
    --accent: #9c4700; --accent-hi: #7a3700; --on-accent: #fff8ef; --glow: rgba(255, 150, 60, .13);
    --ok: #1f6b2c; --warn: #a63d12;
  }
}

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--soft); font: 400 var(--step)/1.7 var(--body);
  background: radial-gradient(60rem 28rem at 88% -6rem, var(--glow), transparent 70%), var(--ground); /* the desk lamp, off screen */
  text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
main { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: clamp(28px, 6vw, 72px) var(--gutter) clamp(56px, 9vw, 112px); }
::selection { background: var(--accent); color: var(--on-accent); }
a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .22em; transition: text-decoration-thickness .12s, color .12s; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 20; background: var(--accent); color: var(--on-accent); padding: .7rem 1rem; border-radius: var(--r-sm); font: 600 15px var(--body); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- header and footer (one of each, every page) ---- */
header.site { border-bottom: 1px solid var(--rule); }
.bar { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; font: 500 15px/1.2 var(--body); }
.bar a { text-decoration: none; }
header.site .name { order: 1; font: 800 21px/1 var(--display); letter-spacing: -.01em; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; margin-right: auto; }
header.site nav { order: 2; display: flex; gap: 2px; }
header.site nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; color: var(--muted); }
header.site nav a:hover { color: var(--ink); background: var(--raise); }
header.site nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.room { order: 3; min-height: 44px; display: inline-flex; align-items: center; gap: .45em; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent) !important; font-weight: 700; white-space: nowrap; transition: background .12s, transform .12s; }
.room:hover { background: var(--accent-hi); }
.room:active { transform: translateY(1px); }
@media (max-width: 720px) {
  header.site .name { order: 1; } .room { order: 2; margin-left: 0; }
  header.site nav { order: 3; flex: 1 0 100%; margin: 0 -12px; justify-content: space-between; padding: 0 4px; border-top: 1px solid var(--rule); }
  header.site nav a { flex: 1; justify-content: center; padding: 0 6px; }
}
footer.site { border-top: 1px solid var(--rule); background: var(--sheet); color: var(--muted); }
footer.site .bar { padding-block: 22px; justify-content: space-between; gap: 6px 24px; font-size: 14.5px; }
footer.site .fine { margin: 0; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
footer.site nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; color: var(--soft); }
footer.site nav a:hover { color: var(--ink); }

/* ---- type ---- */
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; scroll-margin-top: 24px; }
h1 { font-size: clamp(2.2rem, 1.2rem + 4.6vw, 3.6rem); font-weight: 800; margin: 0 0 .3em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2rem); font-weight: 700; margin: 2.2em 0 .6em; }
h3 { font-size: 1.3rem; font-weight: 700; margin: 1.8em 0 .5em; }
h4 { font-size: 1.1rem; font-weight: 600; margin: 1.5em 0 .4em; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
.meta, .sub { font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); margin: 0; }
.lede { font-size: clamp(1.1rem, .95rem + .7vw, 1.3rem); line-height: 1.6; color: var(--ink); max-width: 62ch; }
.crumb { margin: 0 0 clamp(18px, 3vw, 30px); font: 500 14px var(--body); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: .9rem 0 0; }
.tags li { font: 500 12px/1 var(--mono); color: var(--soft); border: 1px solid var(--rule-strong); padding: 6px 9px; border-radius: 999px; }

/* ---- page head (lists, posts, about, contact) ---- */
.head { margin-bottom: clamp(26px, 5vw, 52px); }
.head .meta { margin-top: .5rem; }
.head .sub { margin-top: .4rem; }

/* ---- home ---- */
.hello { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: clamp(24px, 5vw, 72px); align-items: center; padding-bottom: clamp(36px, 6vw, 72px); }
.hello h1 { font-size: clamp(2.8rem, 1.2rem + 7vw, 5.6rem); line-height: .98; letter-spacing: -.03em; margin-bottom: .22em; }
.hello .lede { margin-bottom: 1.2em; }
.portrait-frame { margin: 0; justify-self: end; width: 100%; }
.portrait-frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--rule-strong); box-shadow: 0 0 0 6px var(--glow), 0 18px 50px rgba(0, 0, 0, .35); }
@media (max-width: 720px) {
  .hello { grid-template-columns: 1fr; }
  .portrait-frame { order: -1; width: 112px; justify-self: start; }
  .portrait-frame img { border-radius: 50%; box-shadow: 0 0 0 5px var(--glow); }
}
.links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.links a, .btn { min-height: 44px; display: inline-flex; align-items: center; gap: .5em; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); text-decoration: none; font: 600 15px var(--body); transition: background .12s, border-color .12s; }
.links a:hover, .btn:hover { background: var(--raise2); border-color: var(--accent); }
.links a.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.links a.primary:hover { background: var(--accent-hi); }
.sec { margin-top: clamp(36px, 6vw, 72px); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 4px; }
.sec-head h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.sec-head a { font: 500 14px var(--body); min-height: 44px; display: inline-flex; align-items: center; color: var(--soft); }

/* ---- the log: writing as rows (Felix's log pattern: title, date, reading time) ---- */
ol.log, ul.log { list-style: none; margin: 0; padding: 0; }
.log > li { border-bottom: 1px solid var(--rule); }
.log a.row { display: grid; grid-template-columns: 9.5ch minmax(0, 1fr); gap: 4px clamp(14px, 3vw, 32px); padding: 22px 12px; margin: 0 -12px; text-decoration: none; color: inherit; border-radius: var(--r-sm); transition: background .15s; }
.log a.row:hover { background: var(--raise); }
.log a.row .when { font: 400 13px/1.9 var(--mono); color: var(--muted); letter-spacing: .02em; }
.log a.row h2, .log a.row h3 { margin: 0 0 .25em; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.2; text-wrap: balance; }
.log a.row:hover h2, .log a.row:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.log a.row p { margin: 0; color: var(--soft); font-size: .95em; line-height: 1.6; max-width: 62ch; }
.log a.row.has-thumb { grid-template-columns: 9.5ch minmax(0, 1fr) 116px; }
.log a.row .thumb { width: 116px; height: 84px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--raise); align-self: start; }
.log .tags { margin-top: .7rem; }
@media (max-width: 640px) {
  .log a.row, .log a.row.has-thumb { grid-template-columns: minmax(0, 1fr); padding-block: 18px; }
  .log a.row .thumb { display: none; }
  .log a.row .when { order: -1; line-height: 1.4; }
}

/* ---- project grid ---- */
ul.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2.4vw, 24px); }
ul.grid.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.tile { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; transition: border-color .15s, transform .15s, background .15s; }
.tile:hover { border-color: var(--accent); background: var(--raise); transform: translateY(-2px); }
.tile .shot { aspect-ratio: 16 / 10; background: var(--raise2); border-bottom: 1px solid var(--rule); display: block; width: 100%; object-fit: cover; }
.tile .shot.none { display: grid; place-items: center; color: var(--muted); font: 800 2.4rem var(--display); letter-spacing: -.03em; background: linear-gradient(135deg, var(--raise), var(--raise2)); }
.tile .txt { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tile h2, .tile h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.tile p { margin: 0; font-size: .93em; line-height: 1.55; color: var(--soft); }
.tile .tags { margin-top: auto; padding-top: 10px; }
.tile .tags li { font-size: 11.5px; padding: 5px 8px; }
.tile.plain .txt { padding: 18px; }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }

/* ---- article (posts, projects, about, credits): 680px measure ---- */
.prose, article.prose { max-width: var(--measure); margin-inline: auto; }
.prose > h1 { margin-top: 0; }
.prose > * { max-width: 100%; }
.prose h2 { padding-top: .3em; border-top: 1px solid var(--rule); margin-top: 2.4em; }
.prose h2:first-child { border-top: 0; margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; text-wrap: pretty; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0; }
.prose a { overflow-wrap: anywhere; }
.prose code { font: .86em var(--mono); background: var(--raise2); color: var(--ink); padding: .14em .38em; border-radius: 4px; }
.prose pre { position: relative; margin: 1.6em 0 1.8em; padding: 0; background-color: var(--code-bg) !important; color: var(--code-ink); border: 1px solid var(--rule); border-radius: var(--r); overflow: auto; font: 13.5px/1.65 var(--mono); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.prose pre::before { content: attr(data-language); display: block; position: sticky; left: 0; padding: 8px 16px 7px; background: var(--code-bar); border-bottom: 1px solid var(--rule); color: var(--code-label); font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.prose pre:not([data-language])::before { content: "code"; }
.prose pre code { display: block; width: max-content; min-width: 100%; background: none; color: inherit; padding: 16px 18px 18px; font-size: inherit; white-space: pre; }
.prose pre code span { overflow-wrap: normal; }
.prose img { display: block; border-radius: var(--r); border: 1px solid var(--rule); background: var(--raise); }
.prose figure { margin: 1.8em 0; }
.prose p > img:only-child { margin: .4em 0; }
.prose figcaption, .prose img + em { font: 400 13.5px/1.5 var(--body); color: var(--muted); margin-top: .5em; }
.prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.6em 0; font: 15px/1.5 var(--body); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.prose th, .prose td { padding: 9px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.prose th { color: var(--ink); background: var(--raise); font: 600 13px/1.3 var(--body); white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
.prose blockquote { margin: 1.8em 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--raise); border-radius: 0 var(--r) var(--r) 0; color: var(--soft); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose blockquote .callout-title { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-hi); margin-bottom: .6em; }
.prose blockquote.callout-warn { border-left-color: var(--warn); } .prose blockquote.callout-warn .callout-title { color: var(--warn); }
.prose blockquote.callout-ok { border-left-color: var(--ok); } .prose blockquote.callout-ok .callout-title { color: var(--ok); }
.prose section.footnotes, .prose .footnotes { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: .88em; color: var(--muted); }
.prose sup a { text-decoration: none; padding: 0 2px; }
.prose .cv-name { font: 700 1.1rem var(--display); color: var(--ink); margin: 0 0 .2em; }
.prose .repo { margin: 1.4em 0 0; }
@media (max-width: 720px) { .prose > pre { max-width: none; margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; } }

/* post / project head */
.post-head { max-width: var(--measure); margin: 0 auto clamp(26px, 5vw, 44px); }
.post-head h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.2rem); line-height: 1.04; }
.post-head .meta { font-size: 13.5px; }
.post-head .links { margin-top: 1.1rem; }

/* prev / next */
.pager { max-width: var(--measure); margin: clamp(48px, 8vw, 88px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; min-height: 44px; text-decoration: none; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); transition: border-color .15s, background .15s; }
.pager a:hover { border-color: var(--accent); background: var(--raise); }
.pager .lbl { font: 500 12px/1.2 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pager .ttl { font: 700 1.05rem/1.25 var(--display); color: var(--ink); text-wrap: balance; }
.pager a.next { text-align: right; grid-column: 2; }
.pager a.prev { grid-column: 1; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager a.next, .pager a.prev { grid-column: 1; text-align: left; } }

/* ---- about ---- */
.about-head { max-width: var(--measure); margin: 0 auto clamp(30px, 5vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: end; }
.about-head h1 { margin: 0; }
.about-head img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--rule-strong); box-shadow: 0 0 0 5px var(--glow); }
@media (max-width: 560px) { .about-head { grid-template-columns: 1fr; } .about-head img { width: 132px; order: -1; } }

/* ---- contact ---- */
.contact-list { list-style: none; margin: clamp(24px, 4vw, 40px) auto 0; padding: 0; max-width: var(--measure); border-top: 1px solid var(--rule); }
.contact-list li { border-bottom: 1px solid var(--rule); }
.contact-list a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 14px 10px; margin: 0 -10px; text-decoration: none; border-radius: var(--r-sm); transition: background .15s; }
.contact-list a:hover { background: var(--raise); }
.contact-list .k { font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-list .v { font: 700 clamp(1.05rem, .9rem + .8vw, 1.35rem)/1.25 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.contact-list .go { color: var(--accent); font-size: 1.3rem; transition: transform .15s; }
.contact-list a:hover .go { transform: translateX(4px); }
@media (max-width: 560px) { .contact-list a { grid-template-columns: minmax(0, 1fr) auto; } .contact-list .k { grid-column: 1 / -1; } }

/* ---- credits ---- */
.credit-list { columns: 2 280px; column-gap: 32px; font-size: .9em; }
.credit-list li { break-inside: avoid; margin: .5em 0; }
.credit-list code { font-size: .8em; }
.prose .sub { font-family: var(--mono); }

/* ---- 404 ---- */
.lost { max-width: var(--measure); margin: clamp(24px, 8vw, 96px) auto 0; }
.lost .big { font: 800 clamp(5rem, 3rem + 14vw, 11rem)/.9 var(--display); letter-spacing: -.05em; color: var(--accent); margin: 0 0 .1em; }

@media print { header.site, footer.site, .skip { display: none; } body { background: #fff; color: #000; } a { color: #000; } .prose pre { background: #fff !important; color: #000; border-color: #999; } }


/* ================= Mobile reading v2 (2026-11-09) =================
   Index pages become scannable rows, articles get a sticky slim bar with progress, a collapsible contents list, scroll-shadow hints on
   wide tables and code, tap-to-open images, a thumb-reach pager. No scripts: chips use radio inputs and :has(). Rules in docs/WORKFLOW.md. */
.desk, .readbar { display: none; }
.zoom { display: block; text-decoration: none; position: relative; }
.zoom::after { content: "Tap the image to open it full size"; display: block; margin-top: .5em; font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .zoom::after { display: none; } }
.prose figure .zoom, .prose p > .zoom:only-child { margin: .4em 0; }
.prose p > .zoom { margin: .4em 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chips .fi { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: 999px; font: 500 14px/1 var(--mono); color: var(--soft); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.chips .fi:checked + label { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.chips .fi:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.log .when time, .log .when span { display: block; }
.toc { max-width: var(--measure); margin: 0 auto 26px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--sheet); }
.toc summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; cursor: pointer; font: 600 15px var(--body); color: var(--ink); list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary span { font: 400 12.5px var(--mono); color: var(--muted); }
.toc summary::after { content: "+"; font: 400 24px/1 var(--mono); color: var(--accent); margin-left: 4px; }
.toc[open] summary::after { content: "\2212"; }
.toc[open] summary { border-bottom: 1px solid var(--rule); }
.toc ol { list-style: none; margin: 0; padding: 4px 0 8px; counter-reset: s; }
.toc li { margin: 0; }
.toc li:not(.l3) { counter-increment: s; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; text-decoration: none; color: var(--soft); font: 500 15px/1.35 var(--body); }
.toc li.l3 a { padding-left: 32px; color: var(--muted); font-size: 14px; }
.toc a:hover { background: var(--raise); color: var(--ink); }
.prose pre, .prose table { background-image: linear-gradient(to right, var(--code-bg), var(--code-bg)), linear-gradient(to right, var(--code-bg), var(--code-bg)), linear-gradient(to right, rgba(255, 181, 107, .28), transparent), linear-gradient(to left, rgba(255, 181, 107, .28), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
.prose table { --tbg: var(--ground); background-color: var(--tbg); background-image: linear-gradient(to right, var(--tbg), var(--tbg)), linear-gradient(to right, var(--tbg), var(--tbg)), linear-gradient(to right, rgba(255, 181, 107, .28), transparent), linear-gradient(to left, rgba(255, 181, 107, .28), transparent); }
.prose blockquote table { --tbg: var(--raise); }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 72px; break-after: avoid; }
.prose h2, .prose h3 { text-wrap: balance; }
.endrow { max-width: var(--measure); margin: 14px auto 0; display: flex; flex-wrap: wrap; gap: 10px; }
.endrow .btn { flex: 1 1 140px; justify-content: center; }
.post-head .tags .x { display: list-item; }

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  :root { --gutter: 18px; --step: 17px; }
  body { line-height: 1.65; }
  main { padding-top: 20px; padding-bottom: 48px; }
  /* header: one slim row (name + Desktop) and the section tabs; the 3D room link lives on the /m/ Start menu */
  .bar { padding-block: 4px; }
  header.site .name { font-size: 19px; }
  header.site .room { display: none; }
  .desk { display: inline-flex; order: 3; align-items: center; gap: .3em; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent) !important; font-weight: 700; white-space: nowrap; }
  .desk:active { background: var(--accent-hi); }
  header.site nav { margin-top: 0; }
  h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .post-head h1 { font-size: clamp(1.65rem, 7.2vw, 2.1rem); line-height: 1.1; margin-bottom: .35em; text-wrap: pretty; }
  .prose h2 { font-size: 1.4rem; margin-top: 2em; line-height: 1.18; }
  .prose h3 { font-size: 1.18rem; margin-top: 1.6em; }
  .head { margin-bottom: 18px; }
  .crumb { display: none; }
  .tags li { font-size: 12.5px; padding: 6px 10px; }
  .post-head { margin-bottom: 20px; }
  .post-head .tags li:nth-child(n+5) { display: none; }
  .prose p, .prose li { hyphens: manual; }
  .prose ul, .prose ol { padding-left: 1.15em; }
  .prose li { margin: .5em 0; }
  .prose code { overflow-wrap: anywhere; font-size: .84em; }
  .prose pre { font-size: 13px; line-height: 1.55; }
  .prose pre::before { padding: 7px 14px 6px; }
  .prose pre code { padding: 12px 14px 14px; }
  .prose table { font-size: 14px; margin-inline: 0; }
  .prose th, .prose td { padding: 8px 10px; }
  .prose th { font-size: 12.5px; }
  .prose blockquote { margin-inline: 0; padding: 12px 14px; }
  .prose figcaption, .prose img + em { font-size: 13px; }
  .prose a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
  /* sticky slim reading bar with progress */
  .readbar { display: flex; align-items: center; position: sticky; top: 0; z-index: 10; height: 48px; padding-inline: 4px 6px; background: var(--sheet); border-bottom: 1px solid var(--rule); }
  .readbar a { text-decoration: none; display: flex; align-items: center; min-height: 48px; }
  .readbar .back { padding: 0 12px 0 8px; gap: .25em; color: var(--accent-hi); font: 700 15px var(--body); flex: none; }
  .readbar .back span { font-size: 24px; line-height: 1; margin-top: -2px; }
  .readbar .rt { flex: 1; min-width: 0; padding: 0 8px; color: var(--soft); font: 600 14px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 48px; }
  .readbar .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; display: none; }
  @supports (animation-timeline: scroll()) { .readbar .prog { display: block; animation-name: rprog !important; animation-duration: 1s !important; animation-timing-function: linear !important; animation-fill-mode: both !important; animation-timeline: scroll(root) !important; } }
  @keyframes rprog { to { transform: scaleX(1); } }
  /* project list: compact rows */
  ul.grid { display: block; border-top: 1px solid var(--rule); }
  ul.grid > li { border-bottom: 1px solid var(--rule); }
  .tile { flex-direction: row; align-items: stretch; height: auto; border: 0; border-radius: 0; background: none; padding: 14px 0; gap: 14px; overflow: visible; }
  .tile:hover { transform: none; background: none; }
  .tile:active { background: var(--raise); }
  .tile .shot, .tile .shot.none { order: 2; flex: none; width: 84px; height: 84px; aspect-ratio: auto; border: 1px solid var(--rule); border-radius: var(--r-sm); font-size: 1.5rem; align-self: flex-start; }
  .tile .txt, .tile.plain .txt { padding: 0; gap: 3px; min-width: 0; }
  .tile h2 { font-size: 1.12rem; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tile p { font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile .meta { font-size: 12px; }
  .tile .tags { padding-top: 6px; margin-top: 0; gap: 5px; }
  .tile .tags li.x { display: none; }
  .tile .tags li { font-size: 11.5px; padding: 4px 8px; }
  /* blog list */
  .log a.row, .log a.row.has-thumb { padding: 16px 0; margin: 0; gap: 2px; border-radius: 0; }
  .log a.row:active { background: var(--raise); }
  .log a.row .when { display: flex; gap: 0; font-size: 12.5px; }
  .log a.row .when time, .log a.row .when span { display: inline; }
  .log a.row .when span::before { content: "\00a0\00b7\00a0"; }
  .log a.row h2 { font-size: 1.2rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .2em; }
  .log a.row p { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .log .tags { margin-top: .5rem; gap: 5px; }
  .log .tags li.x { display: none; }
  /* chips: one scrolling row stuck under the top of the screen */
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 6px; padding: 8px var(--gutter); position: sticky; top: 0; z-index: 5; background: var(--ground); border-bottom: 1px solid var(--rule); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips label { flex: none; }
  /* pager in thumb reach: next first, big */
  .pager { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
  .pager a { padding: 16px 18px; min-height: 76px; justify-content: center; }
  .pager a.next { order: -1; text-align: left; border-color: var(--rule-strong); }
  .pager .ttl { font-size: 1.1rem; }
  footer.site .bar { padding-block: 14px; }
}
@media (max-width: 720px) { .desk { order: 2; } }
@media (max-height: 500px) and (orientation: landscape) { .readbar { height: 44px; } .readbar a { min-height: 44px; } .readbar .rt { line-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .readbar .prog { animation-name: rprog !important; animation-duration: 1s !important; animation-timing-function: linear !important; animation-fill-mode: both !important; animation-timeline: scroll(root) !important; } }