/*
 * Shok's look, for the app and the landing page alike: warm paper ruled with a faint grid, deep teal-black ink, a
 * serif for what is read as a headline, a grotesk for the rest, and a mono for small labels. Fonts are served from
 * here (fonts/, under the SIL Open Font License), never from a font service.
 */

@font-face {
	font-family: "Source Serif";
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url("/fonts/source-serif-4.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("/fonts/inter.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("/fonts/geist-mono.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--paper: #f6f3ee;
	--paper-deep: #efebe4;
	--sheet: #fffefc;
	--ink: #0f1d1e;
	--ink-soft: #2c3a3b;
	--muted: #6b7372;
	--faint: #9aa09e;
	--line: #e3ded6;
	--line-strong: #cfc8bd;
	--teal: #0e4744;
	--teal-deep: #0c2427;
	--teal-wash: #e3ecea;
	--stone: #7b7a70;
	--warn: #a85d0b;
	--warn-wash: #fbefdc;
	--good: #1d7a4f;
	--bad: #b42318;

	--serif: "Source Serif", ui-serif, "New York", Georgia, serif;
	--font: "Inter", ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
	--mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--radius: 14px;
	--radius-small: 9px;
	--shadow: 0 1px 0 rgba(15, 29, 30, 0.04), 0 8px 24px -12px rgba(15, 29, 30, 0.14);
	/* The grid the paper is ruled with (Tinfoil's): 1px lines every 24px, barely there. */
	--grid: linear-gradient(rgba(15, 29, 30, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 29, 30, 0.035) 1px, transparent 1px);
	/* Film grain, for photographs that are not there: fractal noise, very light. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	color-scheme: light;
}

/* A small mono label, as Tinfoil's ("For your thoughts"). */
.kicker {
	font: 500 11.5px/1.3 var(--mono);
	letter-spacing: 0.02em;
	color: var(--muted);
}

/* The marker before a speaker's name (Branch's): a small square. */
.marker {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: currentColor;
	flex: none;
}