/* Portfolio reading layer. Opt-in: the galley keeps its existing styles. */
body.editorial { color: #555; line-height: 1.75; }
.editorial #container { box-sizing: border-box; }
.editorial #header, .editorial #footer { max-width: 36rem; }
.editorial #header h1, .editorial #footer h1 { font-size: 1rem; line-height: 1.6; }
.editorial #header nav, .editorial #footer nav { font-size: .9rem; }
.editorial #header nav ul, .editorial #footer nav ul { font-size: inherit; }
.editorial #header nav a, .editorial #footer nav a { display: inline-block; padding: .35rem .1rem; }
.editorial #footer nav ul { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.editorial #footer nav ul li { display: block; }
.editorial #content p,
.editorial #content ul,
.editorial #content ol { font-size: 1rem; line-height: 1.75; }
.editorial #content h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.3; }
.editorial #content h2 { font-size: 1.35rem; line-height: 1.4; margin-top: 2.79rem; }
.editorial #content h3 { font-size: 1.08rem; line-height: 1.5; }
.editorial #container #content .eyebrow,
.editorial #container #content .small-note { font-size: .85rem; line-height: 1.65; }
.editorial .inline-meta, .editorial .post-meta, .editorial h6 { opacity: 1; color: #666; font-size: .85rem; line-height: 1.6; }
.editorial #footer { opacity: 1; }
.editorial a:focus-visible, .editorial button:focus-visible,
.editorial select:focus-visible, .editorial summary:focus-visible { outline: 2px solid #555; outline-offset: 5px; }
.editorial .skip-link { position: absolute; top: .5rem; left: 1rem; transform: translateY(-200%); background: #fff; z-index: 10000; padding: .6rem; }
.editorial .skip-link:focus { transform: none; }
.editorial #content { overflow-wrap: anywhere; }
.editorial #content .btn-ghost { min-height: 44px; box-sizing: border-box; font-size: .9rem; }
.editorial .project-hero .kicker, .editorial .tag, .editorial .spec .spec-label { font-size: .8rem; color: #666; }
.editorial .project-hero .tagline, .editorial .feat-list .feat .feat-text { opacity: 1; }
.editorial .contact-card a { font-size: .9rem; }
.editorial .contact-card p { color: #555; }
.editorial ul.archive.thumblist { gap: 1.5rem; }
.editorial ul.archive.thumblist li a .thumbnail { background: #f8f8f8; }
.editorial ul.archive.thumblist li a p .excerpt { display: block; white-space: normal; overflow: visible; }
.editorial ul.archive.thumblist li a p { width: 100%; }
.editorial .term pre { font-size: .85rem; line-height: 1.65; }
.editorial .spec-table table { font-size: .9rem; }
.editorial .home-intro,
.editorial .field-notes, .editorial .project-status,
.editorial .clearing-demo { max-width: 36rem; margin: 2.79rem auto; text-align: left; }
.editorial .home-intro { margin-top: 0; }
.editorial #content .home-intro h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: .7rem 0 1.4rem; line-height: 1.35; }
.editorial .eyebrow { letter-spacing: .04em; }
.editorial .intro-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; }
.editorial .intro-actions a { padding: .45rem .1rem; }
.editorial .intro-actions .primary-link { font-weight: 900; background: #fe9; }
.editorial .proof-note { padding-top: 1rem; border-top: 1px solid #ddd; }
.editorial .project-links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.editorial .work-item { padding: 0 0 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid #ddd; }
.editorial #container #content .work-meta { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 .45rem; font-size: .85rem; color: #666; }
.editorial #content .work-item h3 { font-size: 1.25rem; font-style: normal; margin: 0 0 .7rem; }
.editorial #content .work-item p { margin: .7rem 0; }
.editorial #content .work-item .project-links { margin: 1rem 0 0; }
.editorial .work-figure { margin: 1.2rem 0; padding: 1rem 1.2rem; background: #f8f8f8; border: 1px solid #ddd; }
.editorial .work-figure strong { display: block; font-size: 1.1rem; }
.editorial .work-figure figcaption, .editorial .work-shot figcaption { font-size: .85rem; line-height: 1.6; color: #666; margin-top: .3rem; }
.editorial .work-shot { margin: 1.2rem 0; }
.editorial .work-shot img { aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid #ddd; box-sizing: border-box; }
.editorial .field-notes dl { margin: 1rem 0; }
.editorial dt { font-weight: 900; }
.editorial dd { margin: 0; }
/* Home, below the three projects: every section sits on the project rows' grid -
   a label rail where the preview figures are, content where the project text is. */
.editorial .home-section { max-width: 48rem; margin: 0 auto; padding: 3.6rem 0; border-top: 1px solid #ddd; display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.8rem; text-align: left; }
.editorial #content .home-section h2 { font-size: 1.08rem; line-height: 1.5; margin: 0; }
.editorial #content .home-section-head p { margin: .45rem 0 0; }
.editorial #content .home-section-body > :first-child { margin-top: 0; }
.editorial #content .home-section-body > :last-child { margin-bottom: 0; }
.editorial #container #content .label-rows,
.editorial #container #content .note-list { margin: 0; padding: 0; list-style: none; }
.editorial #container #content .label-rows > *,
.editorial #container #content .note-list li { margin: 0; list-style: none; padding: 1rem 0; border-bottom: 1px solid #ddd; }
.editorial #container #content .label-rows > :first-child,
.editorial #container #content .note-list li:first-child { padding-top: 0; }
.editorial .label-rows > * { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.editorial .label-rows dt, .editorial .label-rows > li > a { font-size: .9rem; font-weight: 900; justify-self: start; }
.editorial .note-list .small-note { display: block; margin-top: .3rem; }
.editorial #content .section-more { margin: 1.4rem 0 0; }
.editorial .site-index { max-width: none; margin: 0; }
.editorial .layer-list { margin-top: 1.8rem; border-top: 1px solid #555; }
.editorial #content .layer-root { display: flex; flex-wrap: wrap; gap: .1rem 1rem; align-items: baseline; margin: 0; padding: 1rem 0; border-bottom: 1px solid #ddd; }
.editorial .layer { border-bottom: 1px solid #ddd; }
.editorial .layer summary { display: flex; align-items: center; gap: 1rem; min-height: 44px; padding: .45rem 0; box-sizing: border-box; cursor: pointer; font-weight: 900; list-style: none; }
.editorial .layer summary::-webkit-details-marker { display: none; }
.editorial .layer summary::after { content: '+'; margin-left: auto; padding: 0 .3rem; font-weight: 300; }
.editorial .layer[open] summary::after { content: '\2212'; }
.editorial .layer-num { min-width: 1.6rem; font-size: .85rem; font-weight: 300; color: #666; }
.editorial #content .layer p { font-size: .9rem; margin: 0 0 .6rem; padding-left: 2.6rem; }
.editorial #content .layer p:last-child { margin-bottom: 1.4rem; }
.editorial .about-note { display: flex; gap: 1.5rem; align-items: center; }
.editorial .about-note img { width: 7rem; height: 7rem; object-fit: cover; flex: none; }
.editorial #content .about-note p { margin: 0; }
.editorial .home-section .social-links { margin: 1.8rem 0 0; max-width: none; }
.editorial .about-story { max-width: 36rem; margin: 0 auto; }
.editorial .about-story figure { margin: 2rem 0; }
.editorial .about-story figure img { max-width: 22rem; margin: auto; }
.editorial .about-story figcaption { font-size: .85rem; text-align: center; margin-top: .5rem; }
.editorial .project-status { border-left: 3px solid #555; padding: .1rem 0 .1rem 1rem; box-sizing: border-box; }
.editorial #content .project-status h2 { margin-top: .5rem; }
.editorial .field-notes { border-top: 1px solid #ccc; }
.editorial .field-notes dt { margin-top: 1.2rem; }
.editorial .field-notes dd { margin-top: .35rem; }
.editorial .clearing-demo { border: 1px solid #ccc; padding: 1.2rem; box-sizing: border-box; }
.editorial #content .clearing-demo h2 { margin-top: 0; }
.editorial .demo-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }
.editorial .demo-controls[hidden], .editorial [hidden] { display: none; }
.editorial button, .editorial select { font: inherit; color: #555; background: #fff; border: 1px solid #999; padding: .5rem .75rem; border-radius: 0; min-height: 44px; max-width: 100%; }
.editorial button { cursor: pointer; }
.editorial button:hover:not(:disabled) { background: #eee; }
.editorial button:disabled { opacity: .5; cursor: default; }
.editorial .demo-controls label { width: 100%; }
.editorial .demo-controls select { width: 100%; }
.editorial .demo-stage { border-top: 1px solid #ddd; padding-top: 1rem; }
.editorial .demo-stage ol { padding-left: 1.5rem; }
.editorial .demo-stage table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.editorial .demo-stage th, .editorial .demo-stage td { text-align: left; padding: .5rem; border-bottom: 1px solid #ddd; }
.editorial .demo-stage th:last-child, .editorial .demo-stage td:last-child { text-align: right; }
.editorial .demo-total { background: #eee; padding: .8rem; }
.editorial #content .demo-stage h3 { margin-top: 0; }
@media (max-width: 600px) {
  .editorial .home-section { grid-template-columns: 1fr; gap: 1.2rem; padding: 2.79rem 0; }
  .editorial .label-rows > * { grid-template-columns: 1fr; gap: .2rem; }
  .editorial #content .layer p { padding-left: 0; }
  .editorial .about-note { align-items: start; gap: 1rem; }
  .editorial .about-note img { width: 5rem; height: 5rem; }
  .editorial #header nav ul { gap: .25rem .8rem; }
  .editorial .clearing-demo { padding: 1rem; }
}
/* ---- shared pieces for the d's labs page, demos, now/uses/colophon, changelog, homelab, explainers ----
   greyscale, border-radius 0, no shadow, no motion. state changes only when the reader asks. */
.editorial .demo { max-width: 36rem; margin: 2.79rem auto; text-align: left; border: 1px solid #ccc; padding: 1.2rem; box-sizing: border-box; }
.editorial #content .demo h2 { margin-top: 0; }
.editorial .demo pre, .editorial pre.plain { margin: .6rem 0 0; padding: .6rem .8rem; background: #f8f8f8; border: 1px solid #e0e0e0; font-family: monospace; font-size: .78rem; line-height: 1.5; color: #333; text-transform: none; white-space: pre; overflow-x: auto; }
.editorial .demo-steps { margin: 1rem 0 0; padding-left: 1.5rem; }
.editorial #content .demo-steps li { margin: 0 0 1.2rem; padding-left: .3rem; }
.editorial #content .demo-steps li p { margin: 0 0 .3rem; }
.editorial .demo-steps li:focus { outline: none; }
.editorial .demo-steps li.is-current { border-left: 3px solid #555; margin-left: -.6rem; padding-left: .6rem; }
.editorial .step-name { font-weight: 900; }
.editorial #content .demo-status { margin: .6rem 0 0; font-size: .85rem; color: #666; min-height: 1.4em; }
.editorial .demo label { display: block; font-size: .85rem; margin: .8rem 0 .2rem; }
.editorial .demo input[type="text"], .editorial .demo input[type="number"], .editorial .demo input[type="range"], .editorial .shell input { font: inherit; color: #555; background: #fff; border: 1px solid #999; border-radius: 0; padding: .45rem .6rem; min-height: 44px; box-sizing: border-box; width: 100%; }
.editorial .demo input[type="range"] { padding: 0; border: 0; accent-color: #555; }
.editorial .demo .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem; }
.editorial .demo table, .editorial table.plain { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1rem 0; }
.editorial .demo th, .editorial .demo td, .editorial table.plain th, .editorial table.plain td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid #ddd; vertical-align: baseline; }
.editorial .demo td.num, .editorial .demo th.num, .editorial table.plain .num { text-align: right; font-variant-numeric: tabular-nums; }
.editorial .demo tr.total th, .editorial .demo tr.total td { border-top: 1px solid #555; font-weight: 900; }
.editorial .demo .struck td, .editorial .demo .struck th { text-decoration: line-through; color: #999; }
.editorial .related { max-width: 36rem; margin: 2.79rem auto 0; border-top: 1px solid #ccc; text-align: left; }
.editorial #content .related h2 { font-size: 1.08rem; margin-top: 1.4rem; }
.editorial .site-foot { font-size: .85rem; color: #666; margin: .6rem 0 0; }
.editorial .site-foot code, .editorial code { font-family: monospace; text-transform: none; font-size: .9em; }
.editorial .page-meta { font-size: .85rem; color: #666; }
.editorial .short-page { max-width: 36rem; margin: 0 auto; text-align: left; }
.editorial .short-page h1 { margin-bottom: .4rem; }
.editorial .short-page .label-rows { margin: 1rem 0 0; }
.editorial .status-line { font-size: 1.08rem; padding: 1rem 1.2rem; border: 1px solid #ccc; background: #f8f8f8; }
.editorial .changelog-month { margin: 2rem 0 .4rem; font-size: 1rem; }
.editorial .changelog { margin: 0; padding: 0; list-style: none; }
.editorial #content .changelog li { display: grid; grid-template-columns: 6.5rem 6.5rem minmax(0, 1fr); gap: .8rem; padding: .6rem 0; border-bottom: 1px solid #ddd; margin: 0; font-size: .95rem; }
.editorial .changelog .what { min-width: 0; }
.editorial .changelog time, .editorial .changelog .area { font-size: .85rem; color: #666; font-variant-numeric: tabular-nums; }
.editorial .cite-as { font-size: .85rem; color: #666; border-top: 1px solid #ddd; padding-top: 1rem; }
.editorial .answer { font-size: 1.05rem; }

/* in-page shell: a bordered panel pinned to the bottom of the viewport. no typing effect, no colour. */
.editorial .shell { text-align: left; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: #fff; border-top: 1px solid #555; max-height: 55vh; display: flex; flex-direction: column; }
.editorial .shell[hidden] { display: none; }
.editorial .shell-bar { display: flex; justify-content: space-between; align-items: center; padding: .2rem 1rem; border-bottom: 1px solid #ddd; font-size: .8rem; color: #666; }
.editorial .shell-bar button { min-height: 36px; padding: .2rem .6rem; font-size: .8rem; }
.editorial .shell pre { flex: 1; margin: 0; padding: .8rem 1rem; overflow: auto; font-family: monospace; font-size: .8rem; line-height: 1.5; color: #333; text-transform: none; white-space: pre-wrap; }
.editorial .shell form { display: flex; align-items: center; gap: .5rem; padding: .4rem 1rem .8rem; font-family: monospace; font-size: .85rem; text-transform: none; }
.editorial .shell form label { white-space: nowrap; color: #333; }
.editorial .shell input { font-family: monospace; text-transform: none; }

@media (max-width: 600px) {
  .editorial #content .changelog li { grid-template-columns: 1fr; gap: .1rem; }
  .editorial .demo { padding: 1rem; }
}
/* home: work figures are links to each project's demo */
.editorial a.work-figure { display: block; color: inherit; }
.editorial a.work-figure:hover strong { text-decoration: underline; }
.editorial .work-figure .figcaption { display: block; font-size: .85rem; line-height: 1.6; color: #666; margin-top: .3rem; }

/* the riddle behind the lock */
.riddle { position: fixed; top: 3.6rem; right: 1.2rem; z-index: 9001; width: 18rem; max-width: calc(100vw - 2.4rem); box-sizing: border-box; background: #fff; border: 1px solid #555; padding: 1rem; text-align: left; font-size: .9rem; color: #555; }
.riddle[hidden] { display: none; }
.riddle p { margin: 0 0 .6rem; }
.riddle label { display: block; font-size: .8rem; }
.riddle input { font: inherit; width: 100%; box-sizing: border-box; border: 1px solid #999; border-radius: 0; padding: .4rem; margin: .2rem 0 .5rem; min-height: 40px; }
.riddle button { font: inherit; background: #fff; color: #555; border: 1px solid #999; border-radius: 0; padding: .4rem .8rem; cursor: pointer; min-height: 40px; }
.riddle p[role="status"] { margin: .6rem 0 0; font-size: .8rem; }
/* lists and tables placed straight in a post's content keep the 36rem reading column */
.editorial #container #content > .label-rows, .editorial #container #content > table.plain, .editorial #container .short-page table.plain { max-width: 36rem; margin: 1.4rem auto; text-align: left; }
.editorial #content > .label-rows dd, .editorial .short-page .label-rows dd { text-align: left; }
.editorial #content p code, .editorial #content dd code, .editorial #content li code, .editorial #content td code { font-size: .85em; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.editorial) { scroll-behavior: auto; }
  .editorial *, .editorial *::before, .editorial *::after { animation: none !important; transition: none !important; }
}
@media print {
  .editorial .demo-controls, .editorial .skip-link, .editorial .shell, .editorial .site-foot, .editorial #secret-lock { display: none; }
  .editorial .demo-steps li[hidden] { display: list-item; }
  .editorial .work-item, .editorial .project-status, .editorial .home-section { break-inside: avoid; }
}