/*
 * Base of the output-canal child theme: document, letter case, type, links, focus,
 * forms, long-form text and forced colours (spec 8.1.2, 8.1.3, 8.1.6 to 8.1.8, 8.6).
 */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Brand guide: the site's own text shows in lower case. The source text keeps its
	   case, so titles, descriptions, schema, alt text and accessible names are unchanged. */
	text-transform: lowercase;
	scroll-padding-top: calc(var(--oc-head-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html.oc-flow {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--oc-paper);
	color: var(--oc-ink);
	font: 400 var(--oc-fs-body) / 1.6 var(--oc-sans);
	overflow-x: clip;
}

/* ---------- Letter case (8.1.3) ---------- */

/* Proper nouns, winner and jury data, long-form text, code and addresses keep their case. */
.keep-case,
.oc-data,
.oc-prose,
.oc-entry-title,
code,
kbd,
pre,
samp,
.oc-url {
	text-transform: none;
}

/* Browsers reset text-transform on form controls. Buttons follow the page (lower case);
   what visitors type stays exactly as typed, only the placeholder follows the page. */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	text-transform: inherit;
}

input::placeholder,
textarea::placeholder {
	text-transform: lowercase;
}

/* ---------- Type (8.1.2) ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--oc-serif);
	font-weight: 400;
	color: var(--oc-ink);
}

h1 {
	font-size: var(--oc-fs-page);
	font-weight: 360;
	line-height: .95;
	letter-spacing: -.03em;
	font-variation-settings: "opsz" 144;
}

h2 {
	font-size: var(--oc-fs-h2);
	line-height: 1.02;
	letter-spacing: -.02em;
	font-variation-settings: "opsz" 144;
}

h3 {
	font-size: var(--oc-fs-h3);
	font-weight: 500;
	line-height: 1.15;
}

h4 {
	font-family: var(--oc-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

p,
ul,
ol,
dl,
figure,
blockquote {
	margin: 0;
}

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

img {
	height: auto;
}

strong,
b {
	font-weight: 600;
}

.oc-h1--hero {
	font-size: var(--oc-fs-hero);
	line-height: .9;
}

.oc-h1--entry {
	font-size: var(--oc-fs-entry);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variation-settings: normal;
}

.oc-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	font: italic 400 var(--oc-fs-kicker) / 1.2 var(--oc-serif);
	color: var(--oc-ink-2);
}

/* Lime accent: a 10 px dot with an ink ring (8.1.1, permitted use 2) */
.oc-kicker::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--oc-lime);
	box-shadow: 0 0 0 1.5px var(--oc-ink);
}

.oc-tagline {
	font: italic 400 var(--oc-fs-tagline) / 1.22 var(--oc-serif);
	color: var(--oc-ink-2);
}

.oc-lede {
	font: italic 400 var(--oc-fs-lede) / 1.1 var(--oc-serif);
}

.oc-meta {
	font-size: var(--oc-fs-meta);
	line-height: 1.4;
	color: var(--oc-pencil);
}

.oc-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 var(--oc-fs-tag) / 1 var(--oc-sans);
	letter-spacing: .02em;
}

.oc-num {
	font-family: var(--oc-serif);
	font-variant-numeric: lining-nums tabular-nums;
}

.oc-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

/* ---------- Links (8.1.6, 8.1.8) ---------- */

a {
	color: inherit;
}

/* A standalone link: wavy underline, thicker and darker on hover; visited links do not change */
.oc-link {
	font-weight: 500;
	text-decoration: underline wavy var(--oc-ink-2) 1.5px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

.oc-link:hover {
	text-decoration-color: var(--oc-ink);
	text-decoration-thickness: 2px;
}

/* ---------- Focus (8.1.7) ---------- */

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--oc-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--oc-focus-gap), 0 0 0 8px var(--oc-blue);
}

[tabindex="-1"]:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Inside the dark band (#111111) the ring turns paper */
.oc-band {
	--oc-focus-ring: var(--oc-paper);
	--oc-focus-gap: var(--oc-deep);
}

.skip-link,
.oc-skip {
	position: absolute;
	top: -100px;
	left: var(--oc-gut);
	z-index: 100;
	padding: 12px 16px;
	background: var(--oc-ink);
	color: var(--oc-paper);
	font: 600 15px / 1 var(--oc-sans);
	text-decoration: none;
}

.skip-link:focus,
.oc-skip:focus {
	top: 8px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

/* ---------- Forms (8.1.8) ---------- */

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

.oc-label {
	display: block;
	margin-bottom: 8px;
	font: 500 15px / 1.3 var(--oc-sans);
}

.oc-input,
.oc-form input[type="text"],
.oc-form input[type="search"],
.oc-form input[type="email"],
.oc-form textarea,
.oc-form select {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: var(--oc-frame);
	border-radius: 0;
	background: var(--oc-white);
	color: var(--oc-ink);
	font: 400 17px / 1.4 var(--oc-sans);
	-webkit-appearance: none;
	appearance: none;
}

.oc-input::placeholder,
.oc-form ::placeholder {
	color: var(--oc-pencil);
	opacity: 1;
}

.oc-input[aria-invalid="true"],
.oc-form [aria-invalid="true"] {
	border-width: 3px;
}

.oc-input:disabled,
.oc-form :disabled {
	background: var(--oc-mist);
	color: var(--oc-pencil);
	border-color: var(--oc-pencil);
	cursor: not-allowed;
}

.oc-error {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font: 600 14px / 1.3 var(--oc-sans);
}

.oc-error::before {
	content: "!";
	flex: none;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--oc-ink);
	color: var(--oc-paper);
	font: 700 12px / 1 var(--oc-sans);
}

/* ---------- Long-form text (8.3, articles and legal pages) ---------- */

.oc-prose {
	max-width: var(--oc-w-prose);
	font-size: var(--oc-fs-prose);
	line-height: 1.7;
}

.oc-prose > * + * {
	margin-top: 1.1em;
}

.oc-prose p {
	max-width: 68ch;
}

.oc-prose h2 {
	margin-top: 1.8em;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -.01em;
	font-variation-settings: normal;
}

.oc-prose h3 {
	margin-top: 1.6em;
	font-size: 24px;
	line-height: 1.25;
}

.oc-prose h4 {
	margin-top: 1.4em;
}

.oc-prose a {
	text-decoration: underline solid var(--oc-ink-2) 1px;
	text-underline-offset: 3px;
}

.oc-prose a:hover {
	text-decoration-style: wavy;
	text-decoration-thickness: 1.5px;
	text-decoration-skip-ink: none;
}

.oc-prose ul,
.oc-prose ol {
	padding-left: 1.4em;
}

.oc-prose ul {
	list-style: none;
}

.oc-prose ul > li {
	position: relative;
}

.oc-prose ul > li::before {
	content: "";
	position: absolute;
	left: -1.1em;
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--oc-ink);
}

.oc-prose li + li {
	margin-top: .4em;
}

.oc-prose blockquote {
	position: relative;
	padding-top: 28px;
	font: italic 400 24px / 1.35 var(--oc-serif);
}

.oc-prose blockquote::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 12px;
	background: var(--oc-waterline) 0 0 / 40px 12px repeat-x;
}

.oc-prose figure img {
	width: 100%;
}

.oc-prose .alignwide {
	max-width: var(--oc-w-wide);
}

.oc-prose figcaption,
.oc-caption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--oc-pencil);
}

.oc-prose table,
.oc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.oc-prose th,
.oc-prose td,
.oc-table th,
.oc-table td {
	padding: 12px 10px;
	border-bottom: var(--oc-rule);
	text-align: left;
	vertical-align: top;
}

.oc-prose th,
.oc-table th {
	font: 600 14px / 1.3 var(--oc-sans);
}

.oc-prose strong {
	font-weight: 600;
}

/* Work Sans italic is only fetched where long-form text has emphasis */
.oc-prose em {
	font-style: italic;
}

/* ---------- Forced colours (8.1.7) ---------- */

@media (forced-colors: active) {
	:focus-visible {
		outline: 2px solid CanvasText;
		box-shadow: none;
	}

	.oc-kicker::before {
		border: 1.5px solid CanvasText;
		box-shadow: none;
	}
}