/* The reference site's own chrome, built only from tokens.css, so the pages are the first specimen. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); font: var(--w-regular) var(--fs-body)/var(--lh-ui) var(--font-voice); -webkit-font-smoothing: antialiased; }
body { max-width: var(--max); margin: 0 auto; padding: 0 var(--margin) var(--s10); }
a { color: inherit; text-decoration: none; }
a:hover, a.on { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--tr-mono); font-variant-numeric: tabular-nums; }
.xs { font-size: var(--fs-xs); }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.accent { color: var(--accent); }

/* header: the mark centred like the reference's wordmark, controls as square chips at the right */
.bar { position: sticky; top: 0; z-index: var(--z-header); height: var(--header); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--paper); transition: top var(--t-header) var(--ease-emphasized); }
.bar.hidden { top: calc(var(--header) * -1); }
.bar .crumb { justify-self: start; }
.bar .mark { height: 22px; display: block; }
.logo.l { display: var(--logo-light); }
.logo.d { display: var(--logo-dark); }
.bar .ctl { justify-self: end; display: flex; gap: var(--btn-gap); }
.chip { height: var(--btn-h); min-width: var(--btn-min); padding: 0 var(--btn-pad-lg); display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); background: var(--chip); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--tr-mono); transition: background var(--t-hover) ease; }
.chip:hover { background: var(--hair); }
.chip.on { background: var(--ink); color: var(--paper); }

/* page grid: content in columns 1 to 9, the sticky index in 10 to 12 */
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.main { grid-column: 1 / span 9; min-width: 0; }
.side { grid-column: 10 / span 3; position: sticky; top: calc(var(--header) * .5 - .625em); align-self: start; padding-top: var(--s6); }
@media (max-width: 1023px) { .main { grid-column: 1 / -1; } .side { display: none; } }
.index { list-style: none; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--tr-mono); line-height: 1.7; }
.index li { display: grid; grid-template-columns: var(--marker-w) 1fr; }
.index .n::before { content: '[' attr(data-n) ']'; }
.index .here .n::before { content: '[ ]'; }  /* the page you are on loses its number, as in the reference */
.index ul { list-style: none; padding-left: var(--indent); grid-column: 2; }
.index ul li { display: block; }
.index ul a { color: var(--ink-2); }

/* rhythm: a section opens s8 below the last, a heading sits s3 above its first line */
section { padding-top: var(--s8); scroll-margin-top: var(--header); }
.intro { padding-top: var(--s6); }
h1 { font-weight: var(--w-light); font-size: var(--fs-title-xxl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); max-width: 14em; }
h2 { font-weight: var(--w-light); font-size: var(--fs-title); line-height: var(--lh-tight); letter-spacing: var(--tr-title); margin-bottom: var(--s3); }
h3 { font-weight: var(--w-regular); font-size: var(--fs-body); margin: var(--s5) 0 var(--s2); }
p { max-width: 38em; }
p + p { margin-top: var(--s2); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-read); color: var(--ink-2); margin-top: var(--s3); }
.rule { margin-top: var(--s2); color: var(--ink-2); }

/* spec tables: mono, hairline rows, the value column tabular */
table.spec { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--tr-mono); font-variant-numeric: tabular-nums; margin-top: var(--s2); }
table.spec th { text-align: left; font-weight: var(--w-regular); color: var(--ink-3); padding: 0 var(--s2) var(--s1) 0; }
table.spec td { border-top: 1px solid var(--hair); padding: var(--s1) var(--s2) var(--s1) 0; vertical-align: top; }
table.spec td:first-child { white-space: nowrap; }
.swatch { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: var(--s1); border: 1px solid var(--hair); }

/* specimens: figure grounds, captions, and the rows they sit in */
.row { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: var(--s3); }
.plate { background: var(--tile); --ground: var(--tile); position: relative; overflow: hidden; }
.cap { margin-top: var(--s2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-mono); color: var(--ink); }
.cap .muted { margin-left: .5em; }
.frame { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); outline: 1px solid var(--hair); --ground: var(--paper); }
.stack > * + * { margin-top: var(--s5); }

/* construction guides: margins, columns, the figure box; toggled with G */
.guide { position: absolute; pointer-events: none; display: none; }
body.guides .guide { display: block; }
.guide.col { background: rgba(70, 89, 158, .06); top: 0; bottom: 0; }
.guide.box { outline: 1px dashed var(--accent); }
.guide.line { background: var(--accent); opacity: .5; }
.guide.tag { font-family: var(--font-mono); font-size: 9px; color: var(--accent); }

.do, .dont { font-family: var(--font-mono); font-size: var(--fs-xs); margin-top: var(--s1); }
.do::before { content: 'Do '; color: var(--good); }
.dont::before { content: 'Not '; color: var(--critical); }