/* Sequence.
 *
 * A name, a sigil, and a sequence of posts numbered in hex. Numbers count from the first post, so a post's
 * number never changes. Posts have §-numbered sections and notes beside the text in the left margin, and
 * nothing else. Atkinson Hyperlegible Mono on a cool grey-violet page. Two colours with jobs: violet is the
 * system (numbers, sections, the brackets), mint is what got in (links, the sigil's dot, note marks). The name
 * carries a slight colour fringe, like a CRT slipping out of register.
 */

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-mono.799affaeb9.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-mono-italic.562058b794.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
/* Full-width quotation marks for Chinese, from the installed Chinese sans (no network request). */
@font-face {
  font-family: "CJK Punctuation";
  src: local("PingFang SC"), local("PingFangSC-Regular"), local("Hiragino Sans GB"), local("Source Han Sans SC"),
       local("Noto Sans CJK SC"), local("Microsoft YaHei");
  unicode-range: U+2018-2019, U+201C-201D, U+2014, U+2026, U+00B7;
}

/* Colour: violet as the system colour (numbers, sections, the brackets) and mint as what
   got in (links, the sigil's dot, note marks). Measured contrast on the page (and on code panels): dark — text
   12.1:1 (12.1), dim 6.6 (6.1), violet 7.3 (6.8), mint 11.8 (10.9); code ≥ 8.6. Light — 13.7 (12.5), 6.1 (5.5),
   6.2 (5.7), 5.2 (4.7); code ≥ 5.3. WCAG AA asks for 4.5:1. */
:root {
  color-scheme: dark light;
  --page: #131219;
  --fg: #d9d7e5;
  --dim: #9b98ad;
  --rule: #2c2a39;
  --panel: #1b1a24;
  --violet: #a893ff;
  --mint: #7fe0c3;
  /* The name's fringe: a misregistered copy of the letters in each accent, as on a CRT slipping out of register. */
  --fringe: -1.5px 0 color-mix(in srgb, var(--mint) 70%, transparent), 1.5px 0 color-mix(in srgb, var(--violet) 45%, transparent);
  --tok-kw: var(--violet);
  --tok-str: var(--mint);
  --tok-type: #8fb8ff;
  --tok-num: #f1c07e;

  --mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, "PingFang SC", "Noto Sans CJK SC", monospace;
  --measure: 64rem;           /* the widest the text column gets, on large displays */
  --compact: 42rem;           /* the column below 75rem, where notes go to the end instead of the margin */
  --note: 13rem;
  --gap: 2.25rem;
}
@media (prefers-color-scheme: light) {
  :root {
    --page: #eeedf3;
    --fg: #22202f;
    --dim: #595669;
    --rule: #d3d0de;
    --panel: #e4e2ec;
    --violet: #5b3cc4;
    --mint: #16705a;
    --tok-type: #2e5aa0;
    --tok-num: #8d4a10;
  }
}

/* One centred column, as wide as the screen allows, up to --measure:
     phones:        the full width, less the gutters
     up to 75rem:   --compact at most (notes are at the end of the post)
     75rem and up:  whatever is left after a note column on each side, growing to --measure
   so the column only ever gets wider as the screen does. min() picks the smallest of its values. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); color: var(--fg); font-family: var(--mono); -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  padding: 0 1.25rem;
  max-width: calc(min(var(--measure), var(--compact)) + 2.5rem);
  font-size: .9375rem;
  line-height: 1.7;           /* a longer line needs a little more space between lines */
}

::selection { background: var(--mint); color: var(--page); }
a { color: var(--mint); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--fg); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.skip-link { position: absolute; left: -999rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1; padding: .3rem .6rem; background: var(--mint); color: var(--page); }

/* --- Header ------------------------------------------------------------------------------------------------- */
.site-header { padding: 3.5rem 0 3rem; }
.site-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1; }
.site-title a { display: inline-flex; align-items: center; gap: .75rem; color: var(--fg); text-decoration: none; }
.sigil { flex: none; width: 1.6rem; height: 1.6rem; color: var(--violet); }   /* the brackets */
.sigil-dot { fill: var(--mint); }
/* The name, with room above and below. */
.name { padding: .6em 0; color: var(--fg); letter-spacing: .04em; text-shadow: var(--fringe); }
.site-title a:hover .name { color: var(--mint); }

/* --- The sequence --------------------------------------------------------------------------------------- */
/* The numbers are printed (hex), so the list's own markers are off. */
.sequence { margin: 0; padding: 0; list-style: none; }
.sequence li { padding: .5rem 0; border-top: 1px solid var(--rule); }
.sequence li:last-child { border-bottom: 1px solid var(--rule); }
.sequence .number { display: inline-block; min-width: 6ch; color: var(--violet); }
.sequence a { color: var(--fg); text-decoration: none; font-weight: 700; }
.sequence a:hover { color: var(--mint); text-decoration: underline; }
.sequence time { display: block; padding-left: 6ch; color: var(--dim); font-size: .8125rem; }
/* Wider screens: the date sits at the right. */
@media (min-width: 36rem) {
  .sequence time { display: inline; float: right; margin-left: 1rem; padding-left: 0; }
}
.draft-badge { color: var(--mint); font-weight: 400; }

/* --- A post ---------------------------------------------------------------------------------------------- */
h1, h2, h3 { line-height: 1.3; font-weight: 700; text-wrap: balance; }
.post-header { margin-bottom: 2.25rem; }
.post-header h1 { margin: .25rem 0 0; font-size: 1.4rem; }
main > h1 { font-size: 1.4rem; margin: 0 0 1rem; }
.post-meta { margin: 0; color: var(--dim); font-size: .8125rem; }
.post-meta .number { color: var(--violet); }
.post-meta .sep { margin: 0 .5ch; }

p { margin: 0 0 1.1em; }
em { font-style: italic; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px dashed var(--rule); margin: 2.5rem 0; }

/* Sections: §1, §2, §2.1 */
.post-body { counter-reset: s; }
.post-body h2 { counter-increment: s; counter-reset: ss; margin: 2.75rem 0 .75rem; font-size: 1rem; }
.post-body h3 { counter-increment: ss; margin: 2rem 0 .5rem; font-size: .9375rem; }
.post-body h2::before { content: "§" counter(s) "\2003"; color: var(--violet); }
.post-body h3::before { content: "§" counter(s) "." counter(ss) "\2003"; color: var(--violet); }

.post-nav { margin-top: 3.5rem; font-size: .875rem; }
.post-nav ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.post-nav li { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.post-nav a { color: var(--fg); text-decoration: none; }
.post-nav a:hover { color: var(--mint); }
.post-nav .number { display: inline-block; min-width: 4ch; color: var(--violet); }
.post-nav .older .number::before { content: "← "; }
.post-nav .newer { text-align: right; }
.post-nav .newer .number { min-width: 0; }
.post-nav .newer a::after { content: " →"; color: var(--violet); }

/* --- Blocks ----------------------------------------------------------------------------------------------- */
blockquote { margin: 1.5rem 0; padding: .1rem 0 .1rem 1.25rem; border-left: 3px solid var(--rule); }
figure { margin: 2rem 0; }
figure.quote blockquote { margin-bottom: .4rem; }
figure.quote figcaption { padding-left: 1.25rem; color: var(--dim); font-size: .875rem; }
img { display: block; max-width: 100%; height: auto; }
figure > figcaption { margin-top: .5rem; color: var(--dim); font-size: .8125rem; }

.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .8125rem; }
th { text-align: left; font-weight: 700; border-bottom: 2px solid var(--violet); }
th, td { padding: .35rem 1.25rem .35rem 0; vertical-align: top; }
td { border-bottom: 1px solid var(--rule); }
.align-right { text-align: right; white-space: nowrap; } .align-center { text-align: center; }

code { font-size: .95em; }
:not(pre) > code { padding: .05em .3em; background: var(--panel); }
pre { margin: 1.5rem 0; padding: 1rem 1.1rem; overflow-x: auto; background: var(--panel); font-size: .8125rem; line-height: 1.6; tab-size: 4; }
.tok-kw, .tok-meta { color: var(--tok-kw); }
.tok-str, .tok-ins { color: var(--tok-str); }
.tok-type, .tok-attr { color: var(--tok-type); }
.tok-fn { font-weight: 700; }
.tok-num, .tok-lit, .tok-var { color: var(--tok-num); }
.tok-com, .tok-out { color: var(--dim); font-style: italic; }
.tok-del { color: var(--tok-num); }

/* Statutes and verse (```statute / ```verse): one <div class="line dN"> per source line, N = indentation level.
   Monospace makes "ch" exactly one character. A statute steps each level in by 4 characters and hangs
   wrapped lines by the same 4, so a wrapped "(1) …" continues where its "(A)" children start. */
.statute, .verse { margin: 1.75rem 0; }
.statute blockquote, .verse blockquote { margin: 0; }
.statute { --step: 4ch; --hang: 4ch; }
.verse { --step: 2ch; --hang: 2ch; }
.line { padding-left: calc(var(--depth, 0) * var(--step) + var(--hang)); text-indent: calc(-1 * var(--hang)); }
.d1 { --depth: 1; } .d2 { --depth: 2; } .d3 { --depth: 3; } .d4 { --depth: 4; }
.d5 { --depth: 5; } .d6 { --depth: 6; } .d7 { --depth: 7; } .d8 { --depth: 8; }
.statute .line + .line { margin-top: .35em; }
.gap { height: .9em; }
.statute figcaption, .verse figcaption { margin-top: .4rem; padding-left: 1.25rem; color: var(--dim); font-size: .875rem; }

/* --- Chinese ------------------------------------------------------------------------------------------------ */
:lang(zh) {
  font-family: "CJK Punctuation", "Atkinson Hyperlegible Mono", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", monospace;
  font-style: normal;
}
:lang(zh-Hant) { font-family: "Atkinson Hyperlegible Mono", "PingFang TC", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", monospace; }
html:lang(zh) .post-body { line-height: 1.9; }
:lang(zh) em, em:lang(zh) { font-style: normal; -webkit-text-emphasis: dot; text-emphasis: dot; -webkit-text-emphasis-position: under right; text-emphasis-position: under right; }

/* --- Notes: in the left margin on wide screens, at the end otherwise ---------------------------------------- */
.fnref { font-size: .75em; line-height: 0; }
.fnref a { color: var(--mint); text-decoration: none; font-weight: 700; }
.footnotes { margin-top: 3rem; padding-top: .75rem; border-top: 1px solid var(--rule); font-size: .8125rem; }
.footnotes h2 { margin: 0 0 .5rem; font-size: .8125rem; color: var(--dim); }
.footnotes ol { padding-left: 3.5ch; }
.footnotes li { margin-bottom: .6rem; }
.footnotes li::marker { color: var(--mint); font-weight: 700; }
.footnotes li:target { background: var(--panel); outline: 6px solid var(--panel); }
.footnote-back { color: var(--mint); text-decoration: none; }

/* Wide enough for a note column on each side of the centred text. The margins are kept symmetric so the
   text stays centred; the notes use the left one. */
@media (min-width: 75rem) {
  body { max-width: min(calc(var(--measure) + 2.5rem), calc(100vw - 2 * (var(--note) + var(--gap)))); }
  .sidenote[hidden] {
    display: block; float: left; clear: left;
    width: var(--note);
    margin: .1rem 0 1rem calc(-1 * (var(--note) + var(--gap)));
    padding-top: .3rem; border-top: 1px solid var(--rule);
    font-size: .75rem; line-height: 1.55; color: var(--dim);
  }
  .sidenote-number { color: var(--mint); font-weight: 700; margin-right: .6ch; }
  .sidenote .sn-p + .sn-p { display: block; margin-top: .4em; }
  .sidenote .sn-quote { display: block; margin: .3em 0 .3em 1ch; }
  .footnotes { display: none; }
  .post-body pre, .post-body .table-wrap, .post-body figure { clear: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  @page { margin: 1.8cm; }
  :root { --page: #fff; --fg: #000; --dim: #444; --rule: #bbb; --panel: #f2f2f2; --violet: #000; --mint: #000; }
  html { font-size: 9.5pt; background: #fff; }
  .name { text-shadow: none; }
  body { max-width: none; padding: 0; }
  .skip-link, .post-nav, .footnote-back { display: none; }
  .sidenote[hidden] { display: none; }
  .footnotes { display: block; }
  .post-body a[href^="http"]::after { content: " <" attr(href) ">"; word-break: break-all; }
  pre { white-space: pre-wrap; }
}