/* Nobedan — base layer: reset, element defaults, typography.
 *
 * Everything here is unclassed HTML behaving correctly on its own. A page
 * that ships nothing but semantic markup and these three stylesheets should
 * already read as Nobedan; layout.css adds the spec-sheet grammar on top.
 */

/* ── Reset ────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, dt, ol, ul, pre {
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style: none;
}

img, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

/* ── Root ─────────────────────────────────────────────────────────────── */

html {
	/* Rules are hairlines; keep them from being smeared by fractional
	 * scroll offsets, and let in-page jumps land below a sticky index. */
	scroll-behavior: auto;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-grand);
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: var(--track-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Grand ships tabular (uniform-width) figures natively; this is here
	 * for the fallback stack, where they are usually proportional. */
	font-variant-numeric: tabular-nums lining-nums;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--accent);
	color: var(--ink);
}

:focus-visible {
	outline: var(--rule-medium-width) solid var(--ink);
	outline-offset: 3px;
}

/* ── Headings — three sizes, hierarchy from weight and rule ───────────────
 * There are only three sizes in the document (caption, body, heading), so
 * heading rank cannot be spent on size: h2 and h3 are the same size and are
 * told apart by weight, by the rule above them, and — in the spec-sheet
 * grammar — by the section number the label column hangs on an h2.
 */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-grand);
	font-weight: var(--weight-medium);
	line-height: var(--leading-head);
	letter-spacing: var(--track-head);
	text-wrap: balance;
}

/* h1 is the masthead and nothing else — the design register, outside the
 * three sizes. */
h1 {
	font-size: var(--text-masthead);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-display);
}

h2 {
	font-size: var(--text-heading);
	font-weight: var(--weight-light);
}

h3 {
	font-size: var(--text-heading);
	font-weight: var(--weight-medium);
}

h4 {
	font-size: var(--text-body);
	font-weight: var(--weight-bold);
	letter-spacing: var(--track-body);
}

h5, h6 {
	font-size: var(--text-caption);
	font-weight: var(--weight-bold);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

/* ── Text ─────────────────────────────────────────────────────────────── */

p {
	max-width: var(--measure);
	text-wrap: pretty;
}

p + p,
p + ul,
p + ol,
ul + p,
ol + p {
	margin-top: var(--space-s);
}

h2 + p,
h3 + p,
h4 + p {
	margin-top: var(--space-xs);
}

/* A heading opens a block: the space belongs above it, and above the rule
 * that sets it off — never between the rule and the heading. */
p + h3,
p + h4,
ul + h3,
ul + h4,
ol + h3,
ol + h4 {
	margin-top: var(--space-xl);
}

strong, b {
	font-weight: var(--weight-medium);
}

em, i {
	/* Grand has no italic on hand. Emphasis is carried by the weight axis
	 * rather than by a synthesised oblique, which would be a face change
	 * by the back door. */
	font-style: normal;
	font-weight: var(--weight-medium);
}

small {
	font-size: var(--text-caption);
	line-height: var(--leading-tight);
	color: var(--ink-muted);
}

code, kbd, samp, pre {
	font-family: var(--font-mono);
	font-size: 0.88em;
	letter-spacing: 0;
	font-variant-ligatures: none;
}

pre {
	max-width: 100%;
	overflow-x: auto;
	line-height: var(--leading-tight);
	padding-left: var(--space-s);
	border-left: var(--rule-hairline-width) solid var(--rule-color);
}

abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
}

/* ── Links — ink, underlined; the accent is not a link colour ─────────── */

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: var(--rule-hairline-width);
	text-underline-offset: 0.18em;
	text-decoration-color: var(--rule-color);
}

a:hover {
	text-decoration-color: currentColor;
}

/* ── Lists ────────────────────────────────────────────────────────────── */

ul li, ol li {
	max-width: var(--measure);
}

ul li + li,
ol li + li {
	margin-top: var(--space-2xs);
}

/* Hung markers. A real bullet, and it hangs entirely OUTSIDE the text
 * block — `right: 100%` puts the marker's right edge on the list text's
 * left edge, so the list sets flush with the body copy above and below it
 * and the marker lives in the margin where a marker belongs. Nothing is
 * indented; a list is not a quotation.
 *
 * The hang is under 1em wide, which fits inside the page margin at the
 * narrowest viewport, so a list at the left edge of a phone screen still
 * shows its bullets. */
ul.marked li,
ol.marked li {
	position: relative;
	padding-left: 0;
}

ul.marked li::before {
	content: "\2022";
	position: absolute;
	right: 100%;
	margin-right: 0.35em;
	color: var(--ink);
}

ol.marked {
	counter-reset: marked;
}

ol.marked li {
	counter-increment: marked;
}

/* The number hangs from its right edge, so a column of them aligns on the
 * text edge whatever their width. Caption size, because a marker names an
 * item rather than saying anything. */
ol.marked li::before {
	content: counter(marked, decimal-leading-zero);
	position: absolute;
	right: 100%;
	margin-right: 0.45em;
	font-size: var(--text-caption);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--ink);
	line-height: calc(var(--leading-body) * var(--text-body) / var(--text-caption));
}

/* ── Rules ────────────────────────────────────────────────────────────────
 * Three laws, and they hold everywhere a rule is drawn — this element, the
 * row borders in layout.css, the ledger in components.css:
 *
 *   1. A rule is never grey. It is the body text colour, always. Hierarchy
 *      is carried by width — heavy, medium, hairline, fine — and by
 *      nothing else.
 *   2. A rule rides ABOVE the heading it sets off and belongs to it: it
 *      sits nearer its own title than the paragraph it just left behind.
 *      A rule under a heading is an underline, and there are none here.
 *   3. A rule does not break for a column gap. It runs from the left edge
 *      of the thing it introduces to the end of the row, gutters included.
 */

hr {
	border: none;
	border-top: var(--rule-hairline-width) solid var(--rule-color);
	/* Law 2, as margins: four parts above, one below. */
	margin-top: var(--space-xl);
	margin-bottom: var(--space-s);
}

hr.heavy {
	border-top-width: var(--rule-heavy-width);
}

hr.medium {
	border-top-width: var(--rule-medium-width);
}

hr.fine {
	border-top-width: var(--rule-fine-width);
}

/* ── Quotes — a rule, never a box ─────────────────────────────────────── */

blockquote {
	max-width: var(--measure);
	border-left: var(--rule-medium-width) solid var(--rule-color-strong);
	padding-left: var(--space-s);
	font-weight: var(--weight-light);
	font-size: var(--text-heading);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-head);
}

blockquote cite {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--text-caption);
	font-weight: var(--weight-bold);
	font-style: normal;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* ── Stillness is the default ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}