/* chroniton.ai: the site's own layout. Everything else comes from the design system, vendored
   in /assets/design/: tokens.css (colours, faces, sizes, spacing and timing as custom
   properties, and the fonts) and bundle.css (the components' classes: .label, .chr-btn,
   .chr-tag and the rest). Colours, faces and sizes here are tokens by name.
   Grid (40-layout.md): content at most 1200px, margins 24px, 48px from 720px, 64px from 1080px. */

:root { color-scheme: dark; --margin: var(--space-5); }
@media (min-width: 720px) { :root { --margin: var(--space-7); } }
@media (min-width: 1080px) { :root { --margin: var(--space-8); } }

html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
a { color: var(--signal-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chr-btn { text-decoration: none; }
.skip { position: absolute; z-index: 1; left: var(--margin); top: calc(-1 * var(--space-9)); padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--ink); }
.skip:focus { top: var(--space-3); }

/* --- The teaser (index.html) ----------------------------------------------------------------
   The title slide's composition, scaled to the window. --lk is the lockup's height; the
   eyebrow and the gaps keep the slide's proportions to it (a 351px lockup with a 16px label
   and 64px gaps on a 1080px slide) and never drop below the web type scale. The gaps hold the lockup's clear space, two QED squares: 17.2% of its
   height. Narrow or tall windows stack the text over the drawing, which fades in from the top,
   clear of the text. The lockup is 1.583 times as wide as it is tall; with its clear space on
   both sides, 1.93 times. */

.teaser {
  --lk: clamp(120px, calc((100vw - 2 * var(--margin)) / 1.93), 240px);
  --gap: max(var(--space-6), calc(var(--lk) * 0.1821));
  position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.teaser-text { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: max(var(--space-8), 8svh) var(--margin) var(--space-6); text-align: center; }
.teaser-eyebrow { margin: 0 0 var(--gap); color: var(--ink-muted); font-size: max(11px, calc(var(--lk) * 0.0455)); line-height: 1.5; }
.teaser-lockup { margin: 0; line-height: 0; }
.teaser-lockup svg { display: block; width: auto; height: var(--lk); }
.teaser-links { margin: var(--gap) 0 0; color: var(--ink-muted); font-size: max(11px, calc(var(--lk) * 0.0455)); line-height: 1.5; }
.teaser-links a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.teaser-links a:hover { color: var(--ink); }
.teaser-text .chr-btn { margin-top: var(--gap); }
.teaser-art { position: relative; width: 100%; aspect-ratio: 1720 / 2160; max-height: 80svh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 30%); mask-image: linear-gradient(to bottom, transparent 8%, #000 30%); }
.teaser-art svg { display: block; width: 100%; height: 100%; }
.teaser-foot { margin: 0; padding: var(--space-6) var(--margin); color: var(--ink-muted); text-align: center; }

/* Wide windows: the slide's own layout. The drawing is as tall as the window and starts at
   52% of its width or further right, bleeding off the edge rather than crowding the text; its
   lines fade in from its left edge (gone by 6% of its width, full from 23%, as on the slide).
   The text is centred between the left edge and where the lines begin. */
@media (min-width: 900px) and (min-aspect-ratio: 5 / 4) {
  .teaser {
    --h: max(100vh, 640px);
    --art-w: calc(var(--h) * 1720 / 2160);
    --art-left: max(52vw, calc(100vw - var(--art-w)));
    --text-w: calc(var(--art-left) + var(--art-w) * 0.1);
    --lk: clamp(170px, min(calc(var(--h) * 0.3254), calc((var(--art-left) - 2 * var(--margin)) / 1.93)), 352px);
    display: block; min-height: var(--h);
  }
  .teaser-art { position: absolute; top: 0; left: var(--art-left); width: var(--art-w); height: var(--h); max-height: none; margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 6%, #000 23%); mask-image: linear-gradient(to right, transparent 6%, #000 23%); }
  .teaser-text { position: absolute; top: 0; left: 0; width: var(--text-w); height: var(--h); justify-content: center; padding: 0 var(--margin); }
  .teaser-foot { position: absolute; bottom: 0; left: 0; width: var(--text-w); box-sizing: border-box; }
}

/* --- The site frame: header, page, footer (70-collateral.md, "Website") ----------------------- */

.site-head, .page, .site-foot { box-sizing: border-box; width: min(1200px, 100% - 2 * var(--margin)); margin: 0 auto; }
.site-head { display: flex; align-items: center; gap: var(--space-6); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.site-home { display: block; padding: 8px 0; line-height: 0; }
.site-home svg { display: block; }
.site-nav { display: flex; gap: var(--space-5); margin-left: auto; font: 400 13px/20px var(--font-sans); }
.site-nav a { color: var(--ink-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

.page { flex: 1; padding-top: var(--space-8); padding-bottom: var(--space-9); }
.page-eyebrow { margin: 0 0 var(--space-4); color: var(--ink-muted); }

.site-foot { display: grid; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-7); border-top: var(--hairline) solid var(--line); }
.site-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-5); }
.site-foot-glyph { display: block; line-height: 0; }
.site-foot-links { display: flex; gap: var(--space-5); font: 400 13px/20px var(--font-sans); }
.site-foot-links a { color: var(--ink-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.site-foot-links a:hover { color: var(--ink); }
.site-foot-legal { margin: 0; color: var(--ink-muted); }

/* --- Lists of posts (the blog, tag pages) ----------------------------------------------------- */

.listing-head { max-width: 680px; margin-bottom: var(--space-8); }
.listing-eyebrow { margin: 0 0 var(--space-4); color: var(--ink-muted); }
.listing-eyebrow a { color: inherit; text-decoration: none; }
.listing-eyebrow a:hover { color: var(--ink); }
.listing-title { margin: 0; font: 600 34px/40px var(--font-sans); letter-spacing: -0.015em; }
.post-list { max-width: 680px; margin: 0; padding: 0; list-style: none; border-bottom: var(--hairline) solid var(--line); }
.post-item { padding: var(--space-6) 0; border-top: var(--hairline) solid var(--line); }
.post-item .post-meta { margin: 0 0 var(--space-2); }
.post-item-title { margin: 0; }
.post-item-title a { color: var(--ink); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.post-item-title a:hover { color: var(--signal-ink); }
.post-item-descr { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.post-tags .chr-tag { text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.post-tags a.chr-tag:hover { border-color: var(--ink-muted); color: var(--ink); }
.post-empty { max-width: 680px; margin: 0; color: var(--ink-muted); }

/* --- A post ------------------------------------------------------------------------------------ */

.post-head, .post-foot, .prose { max-width: 680px; }
.post-head { margin-bottom: var(--space-7); }
.post-meta { margin: 0 0 var(--space-4); color: var(--ink-muted); }
.post-title { margin: 0; font: 600 34px/40px var(--font-sans); letter-spacing: -0.015em; text-wrap: balance; }
.post-lead { margin: var(--space-4) 0 0; color: var(--ink-muted); }
.post-foot { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.post-foot .post-tags { margin: 0 0 var(--space-4); }
.post-foot p { margin: 0; color: var(--ink-muted); }
.post-foot a { color: inherit; }
.post-foot a:hover { color: var(--ink); }

/* The reading column: body-lg (18/28) at most 680px wide, 60 to 75 characters a line. */
.prose { font: 400 18px/28px var(--font-sans); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-5); }
.prose h1 { margin: 0 0 var(--space-6); font: 600 34px/40px var(--font-sans); letter-spacing: -0.015em; }
.prose h2 { margin: var(--space-7) 0 var(--space-4); font: 600 24px/30px var(--font-sans); letter-spacing: -0.01em; }
.prose h3 { margin: var(--space-6) 0 var(--space-3); font: 600 18px/28px var(--font-sans); letter-spacing: -0.005em; }
.prose h4, .prose h5, .prose h6 { margin: var(--space-6) 0 var(--space-3); font: 500 11px/16px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.prose :is(h1, h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; }
.prose a { text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 600; }
/* List markers: the glyph's point, as on the slides. */
.prose ul { padding: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 1.1em; }
.prose ul > li::before { content: ""; position: absolute; left: 0.1em; top: calc(0.5lh - 0.13em); width: 0.26em; height: 0.26em; border-radius: var(--radius-full); background: var(--ink-muted); }
.prose ol { padding-left: 1.6em; }
.prose ol > li::marker { color: var(--ink-muted); font: 400 0.8em var(--font-mono); }
.prose li > p { margin: 0; }
.prose li > ul, .prose li > ol { margin: var(--space-2) 0 0; }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { margin: var(--space-6) 0; padding: 0 0 0 var(--space-5); border-left: 2px solid var(--line-strong); color: var(--ink-muted); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { margin: var(--space-7) 0; border: 0; border-top: var(--hairline) solid var(--line); }
.prose img { display: block; max-width: 100%; height: auto; border: var(--hairline) solid var(--line); }
.prose figure { margin: var(--space-6) 0; }
.prose figcaption { margin-top: var(--space-2); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.prose table:not(.fndef) { width: 100%; margin: var(--space-6) 0; border-collapse: collapse; font: 400 15px/24px var(--font-sans); }
.prose th { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--hairline) solid var(--line-strong); font: 500 11px/16px var(--font-mono); letter-spacing: 0.2em; text-align: left; text-transform: uppercase; color: var(--ink-muted); }
.prose td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); vertical-align: top; }
.prose :is(th, td):last-child { padding-right: 0; }
.prose :is(th, td)[align="center"] { text-align: center; }
/* A right-aligned column holds numbers: set them in mono, as data (70-collateral.md, "Tables"). */
.prose :is(th, td)[align="right"] { text-align: right; }
.prose td[align="right"] { font: 400 13px/24px var(--font-mono); font-variant-numeric: tabular-nums; }
/* Code: inline code in mono on the surface; blocks as CodeBlock (bundle.css, .chr-code). */
.prose code { font-family: var(--font-mono); font-size: 0.85em; }
.prose :not(pre) > code { padding: 0.1em 0.3em; background: var(--surface); border: var(--hairline) solid var(--line); }
.prose pre { margin: var(--space-6) 0; padding: var(--space-3) var(--space-4); overflow-x: auto; background: var(--surface); border: var(--hairline) solid var(--line); font: 400 13px/20px var(--font-mono); color: var(--ink); tab-size: 4; }
.prose pre code { font: inherit; }
/* highlight.js's classes (the build highlights code blocks) in the three syntax tokens. */
.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-meta .hljs-keyword { color: var(--syntax-keyword); }
.hljs-string, .hljs-number, .hljs-literal, .hljs-symbol, .hljs-regexp, .hljs-char { color: var(--syntax-literal); }
.hljs-comment, .hljs-quote { color: var(--syntax-comment); }
/* Footnotes and maths. */
.prose sup { line-height: 0; }
.prose .fnref { text-decoration: none; font-family: var(--font-mono); font-size: 0.8em; }
.prose table.fndef { margin: var(--space-2) 0 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); border-collapse: collapse; }
.prose table.fndef td { padding: 0 var(--space-3) 0 0; border: 0; vertical-align: top; }
.prose table.fndef .fndef-backref a { font-family: var(--font-mono); font-size: 0.8em; text-decoration: none; }
.prose .katex-display { margin: var(--space-6) 0; overflow-x: auto; overflow-y: hidden; }
/* The QED square after a post's last word (README, rule 10): as Qed, 0.62em in signal-ink. */
.post-head + .prose > :nth-last-child(1 of :not(.fndef, script)):is(p)::after { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.3em; background: var(--signal-ink); }

@media (max-width: 719px) {
  .site-head { gap: var(--space-4); }
  .post-title, .listing-title, .prose h1 { font-size: 28px; line-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .teaser-links a, .site-nav a, .site-foot-links a, .post-item-title a, .post-tags .chr-tag, .prose a { transition: none; }
}