:root {
  color-scheme: light dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page-width: 84rem;
  --reading-width: 54rem;
  --line: color-mix(in srgb, CanvasText 15%, transparent);
  --soft: color-mix(in srgb, Canvas 96%, CanvasText 4%);
  --muted: color-mix(in srgb, CanvasText 62%, transparent);
  --accent: #d9572b;
  --accent-ink: color-mix(in srgb, var(--accent) 80%, CanvasText);
}

body {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2.5rem) clamp(1rem, 3vw, 2rem) 4rem;
  line-height: 1.7;
  color: CanvasText;
  background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 10%, Canvas) 0, transparent 26rem), Canvas;
}

.site-sidebar {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, Canvas 92%, transparent);
  box-shadow: 0 1rem 3rem color-mix(in srgb, CanvasText 4%, transparent);
  font-size: 0.88rem;
  scrollbar-width: thin;
}

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: 0.45rem 0.7rem; border-radius: 0.4rem; background: var(--accent); color: Canvas; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 1rem; outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }

.site-brand { margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.site-brand__name { display: block; color: var(--accent-ink); font-size: 1.35rem; font-weight: 850; letter-spacing: -0.055em; text-transform: uppercase; }
.site-brand__tagline { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.77rem; line-height: 1.45; }

.site-search { margin: 0 0 1rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 0.7rem; background: color-mix(in srgb, var(--accent) 5%, Canvas); }
.site-search__label { display: block; margin-bottom: 0.35rem; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.02em; }
.site-search__controls { display: flex; gap: 0.35rem; }
.site-search input { min-width: 0; width: 100%; box-sizing: border-box; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 0.4rem; color: inherit; background: Canvas; font: inherit; }
.site-search button { flex: 0 0 auto; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 0.4rem; color: inherit; background: color-mix(in srgb, var(--accent) 15%, Canvas); font: inherit; cursor: pointer; }
.site-search button:hover, .site-search button:focus-visible { background: color-mix(in srgb, var(--accent) 25%, Canvas); }
.site-search__status { margin: 0.55rem 0 0; font-size: 0.78rem; opacity: 0.72; }
.site-search__results { margin: 0.65rem 0 0; padding: 0; list-style: none; }
.site-search__result { margin: 0.55rem 0; }
.site-search__result a { display: block; color: inherit; text-decoration: none; }
.site-search__result a:hover, .site-search__result a:focus-visible { text-decoration: underline; }
.site-search__title { display: block; color: color-mix(in srgb, var(--accent) 82%, CanvasText); font-weight: 700; }
.site-search__path { display: block; font-size: 0.72rem; opacity: 0.62; overflow-wrap: anywhere; }
.site-search__excerpt { display: block; margin-top: 0.1rem; font-size: 0.78rem; line-height: 1.4; opacity: 0.82; }
.site-search__fallback { margin: 0.55rem 0 0; font-size: 0.78rem; }

.site-menu { margin-top: 1.2rem; }
.site-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 0.55rem; color: CanvasText; background: color-mix(in srgb, var(--accent) 5%, Canvas); cursor: pointer; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary::after { content: "+"; color: var(--accent-ink); font-size: 1rem; letter-spacing: 0; }
.site-menu[open] > summary::after { content: "−"; }
.site-menu > summary:hover { background: color-mix(in srgb, var(--accent) 11%, Canvas); }
.site-menu > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
.site-menu > .site-nav { margin-top: 0.65rem; }

.site-nav::before { content: "Browse the docs"; display: block; margin: 0 0 0.7rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.site-nav ul { margin: 0; padding: 0; list-style: none; }
.site-nav > ul > li { margin: 0.2rem 0; }
.site-nav ul ul { margin: 0.2rem 0 0.35rem 0.35rem; padding-left: 0.65rem; border-left: 2px solid color-mix(in srgb, CanvasText 15%, transparent); }
.site-nav a { display: block; padding: 0.24rem 0.4rem; border-radius: 0.35rem; color: inherit; text-decoration: none; }
.site-nav a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.site-nav .is-current > a { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 var(--accent); font-weight: 750; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; color: var(--muted); font-size: 0.8rem; list-style: none; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.35rem; opacity: 0.5; }
.breadcrumb a { color: inherit; }

main { width: 100%; max-width: var(--reading-width); box-sizing: border-box; padding: clamp(1.5rem, 4vw, 3.25rem); border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in srgb, Canvas 97%, transparent); box-shadow: 0 1.25rem 3rem color-mix(in srgb, CanvasText 6%, transparent); }
main h1, main h2, main h3 { line-height: 1.2; letter-spacing: -0.02em; }
main h1 { margin-top: 0; font-size: clamp(2.25rem, 6vw, 4rem); }
main h2 { margin-top: 2.75rem; font-size: clamp(1.4rem, 3vw, 2rem); }
main h3 { margin-top: 1.75rem; }
main a { color: var(--accent-ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }
main a:hover { color: var(--accent); }
main img { max-width: 100%; height: auto; border-radius: 0.45rem; border: 1px solid var(--line); }
main table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
main th, main td { min-width: 9rem; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
main th { background: color-mix(in srgb, var(--accent) 9%, Canvas); }
main pre { overflow-x: auto; padding: 1rem; border-radius: 0.65rem; background: color-mix(in srgb, CanvasText 9%, Canvas); }
main code { font-size: 0.92em; }
main hr { border: 0; border-top: 1px solid var(--line); margin: 2.25rem 0; }
main del { color: var(--muted); text-decoration-thickness: 0.12em; }
main dl { margin: 1.25rem 0; }
main dt { margin-top: 0.85rem; color: var(--accent-ink); font-weight: 750; }
main dd { margin: 0.2rem 0 0 1.1rem; }
main .showcase-heading, main .hero-heading { letter-spacing: -0.03em; }
.footnotes { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
.footnotes ol { margin: 0; padding-left: 1.25rem; }
.footnote-ref { font-size: 0.75em; }
.footnote-backref { text-decoration: none; }

.admonition { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 4px solid #888; border-radius: 0.5rem; background: color-mix(in srgb, Canvas 92%, CanvasText 8%); }
.admonition__title { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.75; text-transform: uppercase; }
.admonition__body > :first-child { margin-top: 0; }
.admonition__body > :last-child { margin-bottom: 0; }
.admonition--tip { border-left-color: #0a7; }
.admonition--info, .admonition--note { border-left-color: #48a; }
.admonition--warning { border-left-color: #c80; }
.admonition--danger { border-left-color: #c33; }
main blockquote { margin: 1.5rem 0; padding: 0.35rem 1rem; border-left: 3px solid var(--accent); color: color-mix(in srgb, CanvasText 78%, Canvas); background: color-mix(in srgb, var(--accent) 5%, Canvas); }
main > h1 + p, main > p:first-of-type:not(.eyebrow) { font-size: 1.15rem; color: color-mix(in srgb, CanvasText 82%, Canvas); }
.eyebrow { margin: 0 0 0.65rem; color: var(--accent-ink); font-size: 0.74rem !important; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.home-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.5rem 0 2rem; }
.home-actions a { display: inline-block; padding: 0.55rem 0.85rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 0.5rem; background: color-mix(in srgb, var(--accent) 8%, Canvas); font-weight: 700; text-decoration: none; }
.home-actions a:hover { background: color-mix(in srgb, var(--accent) 16%, Canvas); }
.home-actions a:first-child { border-color: var(--accent); color: Canvas; background: var(--accent); }
.home-actions a:first-child:hover { color: Canvas; background: color-mix(in srgb, var(--accent) 88%, CanvasText); }
.details { margin: 1.25rem 0; padding: 0.75rem 1rem; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 0.5rem; background: color-mix(in srgb, Canvas 95%, CanvasText 5%); }
.details > summary { cursor: pointer; font-weight: 700; }
.details__body > :first-child { margin-top: 0.75rem; }
.details__body > :last-child { margin-bottom: 0; }
.site-outline { max-width: var(--reading-width); }
.page-toc { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; background: color-mix(in srgb, Canvas 92%, CanvasText 8%); font-size: 0.85rem; }
.page-toc ul { margin: 0; padding: 0; list-style: none; }
.page-toc li { margin: 0.2rem 0; }
.page-toc__l2 { padding-left: 0.75rem; }
.page-toc__l3 { padding-left: 1.5rem; }
.page-toc a { color: inherit; text-decoration: none; }
.page-toc a:hover { text-decoration: underline; }
.page-metadata { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0 0 1.25rem; padding: 0; color: var(--muted); font-size: 0.78rem; }
.page-metadata div { display: flex; gap: 0.4rem; }
.page-metadata dt { margin: 0; font-weight: 750; color: var(--accent-ink); }
.page-metadata dd { margin: 0; }
.page-children, .semantic-relations, .semantic-backlinks { margin: 2rem 0 0; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 0.5rem; background: color-mix(in srgb, var(--accent) 5%, Canvas); }
.page-children ul, .semantic-relations ul, .semantic-backlinks ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.site-footer { max-width: var(--reading-width); padding: 1rem 0; color: var(--muted); font-size: 0.8rem; }

@media (min-width: 48rem) {
  body { display: grid; grid-template-areas: "nav breadcrumb" "nav toc" "nav main" "nav footer"; grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; align-items: start; column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 1rem; }
  .site-sidebar { grid-area: nav; }
  .breadcrumb { grid-area: breadcrumb; }
  .site-outline { grid-area: toc; }
  main { grid-area: main; }
  .site-footer { grid-area: footer; }
  .site-nav { position: static; max-height: none; }
}

@media (max-width: 47.99rem) {
  .site-sidebar { position: static; max-height: none; margin-bottom: 1rem; }
  .site-nav { max-height: 20rem; overflow: auto; padding-right: 0.25rem; }
  .breadcrumb { margin-bottom: 0.85rem; }
  main { margin-top: 0.85rem; }
}

/* --- Pass 3 Homepage Presentation Components --- */
.specimen-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 48rem) { .specimen-grid { grid-template-columns: 1fr 1fr; } }
.specimen-card { border: 1px solid var(--line); border-radius: 0.65rem; background: color-mix(in srgb, Canvas 96%, CanvasText 4%); overflow: hidden; }
.specimen-card__header { padding: 0.6rem 0.85rem; background: color-mix(in srgb, Canvas 88%, CanvasText 12%); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); border-bottom: 1px solid var(--line); }
.specimen-card__body { padding: 1rem; font-size: 0.9rem; }
.specimen-card__body pre { margin: 0; background: transparent; padding: 0; font-size: 0.82rem; }

.edition-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 42rem) { .edition-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.edition-card { border: 1px solid var(--line); border-radius: 0.65rem; padding: 1rem; background: color-mix(in srgb, Canvas 97%, CanvasText 3%); display: flex; flex-direction: column; justify: space-between; }
.edition-card__tag { display: inline-block; font-size: 0.7rem; font-weight: 800; padding: 0.2rem 0.45rem; border-radius: 0.3rem; background: color-mix(in srgb, var(--accent) 15%, Canvas); color: var(--accent-ink); text-transform: uppercase; margin-bottom: 0.5rem; width: fit-content; }
.edition-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.edition-card code { font-size: 0.78rem; word-break: break-all; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 36rem) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card { border: 1px solid var(--line); border-radius: 0.65rem; padding: 1rem; background: color-mix(in srgb, Canvas 98%, CanvasText 2%); }
.feature-card h3 { margin: 0 0 0.35rem; font-size: 0.98rem; }
.feature-card p { margin: 0; font-size: 0.85rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .skip-link, .site-search, .site-menu { display: none; }
  body { display: block; max-width: none; }
  main { box-shadow: none; }
}

/* Flatlophone brand layer. Boris supplies the docs and search primitives. */
:root {
  color-scheme: light;
  --accent: #c53329;
  --accent-ink: #a52b23;
  --muted: #5b5550;
  --line: #d6cdbd;
  --reading-width: 64rem;
}
html { background: #f7f2e8; }
body { color: #292724; background: none; max-width: 91rem; padding-top: 2rem; }
::selection { background: #f4d07a; color: #292724; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, table:focus-visible {
  outline: 3px solid #235e65; outline-offset: 4px;
}
.site-sidebar { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0 1rem 1rem 0; }
.site-brand { border-bottom: 2px solid #292724; padding-bottom: 1.5rem; }
.site-brand__stamp { display: inline-block; transform: rotate(-5deg); border: 2px solid #c53329; color: #c53329; padding: 0.15rem 0.55rem; font-weight: 950; font-size: 1.1rem; letter-spacing: 0.05em; }
.site-brand__name { color: #292724; font-size: 1.9rem; text-transform: none; margin-top: 0.65rem; }
.site-brand__tagline { color: var(--muted); font-size: 0.84rem; }
.repo-link { display: inline-block; color: var(--accent-ink); font-weight: 650; margin-top: 1rem; text-underline-offset: 0.2em; }
.site-search { border-radius: 0.25rem; background: #eee7d9; padding: 0.8rem; }
.site-search input { background: #fffdf8; border-color: #b7ae9e; }
.site-search button { background: #292724; color: #fffdf8; border-color: #292724; }
.site-search button:hover { background: #514b43; }
.site-search__status { opacity: 1; color: #5b5550; }
.site-menu > summary { border: 0; border-radius: 0; background: none; padding: 0.4rem 0; }
.site-nav::before { display: none; }
.site-nav a { padding: 0.3rem 0.45rem; font-size: 0.88rem; border-radius: 0.15rem; }
.site-nav ul ul { border-left: 1px solid #c8bdab; }
.site-nav .is-current > a { background: #f0dfcb; box-shadow: inset 3px 0 #c53329; }
.breadcrumb { text-transform: uppercase; letter-spacing: 0.07em; font-weight: 650; }
.site-outline { display: none; }
main { min-width: 0; background: #fffdf8; border: 1px solid #d6cdbd; border-top: 5px solid #292724; border-radius: 0; box-shadow: 7px 7px 0 #e5ddcf; padding: clamp(1.25rem, 4vw, 3.5rem); }
main h1 { font-weight: 900; letter-spacing: -0.06em; font-size: clamp(2.3rem, 5vw, 4.2rem); }
main .hero-heading { font-size: clamp(3rem, 6vw, 6.1rem); line-height: 0.99; letter-spacing: -0.075em; margin-bottom: 1.5rem; }
main h2 { font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); }
main pre { background: #252b2b; color: #f7f2e8; border-radius: 0.2rem; line-height: 1.65; font-size: 0.86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
main :not(pre) > code { background: #eee7d9; padding: 0.08em 0.25em; border-radius: 0.15rem; overflow-wrap: anywhere; }
main th { background: #eee7d9; }
.eyebrow { color: #a52b23; margin-bottom: 1.2rem; }
.home-actions a { border: 2px solid #292724; border-radius: 0.2rem; background: transparent; color: #292724; padding: 0.7rem 1rem; font-size: 0.9rem; }
.home-actions a:first-child { color: #fffdf8; background: #c53329; border-color: #c53329; }
.home-actions a:hover { background: #eee7d9; color: #292724; }
.home-actions a:first-child:hover { background: #a52b23; color: #fffdf8; }
.specimen-card { border: 1px solid #d6cdbd; border-radius: 0.2rem; background: #fffdf8; }
.specimen-card__header { background: #eee7d9; color: #514b43; }
.specimen-card__body { padding: 0; }
.specimen-card__body pre { padding: 1rem; background: #252b2b; border-radius: 0; color: #f7f2e8; font-size: 0.8rem; }
.specimen-card__body > p { padding: 0 1rem; font-size: 0.86rem; }
.feature-grid { gap: 0.75rem; }
.feature-card { background: #f7f2e8; border-color: #d6cdbd; border-radius: 0.2rem; padding: 1.15rem; }
.feature-card h3 { font-size: 1.1rem; line-height: 1.25; margin: 0.6rem 0; }
.feature-card p { color: #5b5550; min-height: 5rem; }
.feature-card a { display: inline-block; font-size: 0.86rem; font-weight: 750; margin-top: 0.8rem; }
.edition-card__tag { background: #e8dfcd; color: #514b43; border-radius: 0.1rem; font-size: 0.65rem; }
.admonition { background: #f1ebdf; border-radius: 0.2rem; }
.admonition--warning { border-left-color: #9b6200; }
.admonition--info, .admonition--tip { border-left-color: #235e65; }
.page-children { background: #f7f2e8; border-radius: 0.2rem; }
.site-footer { font-size: 0.78rem; line-height: 1.7; }
.site-footer a { color: #a52b23; }
@media (min-width: 48rem) {
  body { grid-template-columns: 15.5rem minmax(0, 1fr); column-gap: 2.5rem; grid-template-areas: "nav breadcrumb" "nav main" "nav footer"; grid-template-rows: auto 1fr auto; }
}
@media (max-width: 47.99rem) {
  body { padding: 1rem 1rem 2rem; }
  .site-sidebar { padding-right: 0; }
  .site-brand { display: grid; grid-template-columns: auto 1fr; column-gap: 0.8rem; margin-bottom: 0.8rem; padding-bottom: 0.8rem; }
  .site-brand__stamp { grid-row: 1 / 3; align-self: center; font-size: 0.9rem; }
  .site-brand__name { margin: 0; font-size: 1.6rem; }
  .site-brand__tagline { font-size: 0.75rem; }
  .repo-link { grid-column: 2; margin-top: 0.5rem; font-size: 0.8rem; }
  .site-search { margin-bottom: 0.6rem; }
  .site-menu { margin-top: 0; }
  main { box-shadow: 4px 4px 0 #e5ddcf; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card p { min-height: 0; }
}
@media print {
  html, main { background: white; }
  main { border: 0; box-shadow: none; padding: 0; }
  .site-sidebar, .breadcrumb, .site-outline { display: none; }
}