:root {
	--paper: oklch(0.95 0.008 220);
	--paper-2: oklch(0.91 0.01 220);
	--ink: oklch(0.16 0.005 220);
	--soft: oklch(0.46 0.01 220);
	--rule: oklch(0.7 0.01 220);
	--green: oklch(0.539 0.106 136);
	/* optional services a team deploys into its own account */
	--ext: oklch(0.6 0.13 62);
	--hatch: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in oklch, var(--ext) 14%, transparent) 9px 10px);
	--sans: "Inter Variable", system-ui, sans-serif;
	--serif: "Source Serif 4 Variable", Georgia, serif;
	--dot: "Lilex Variable", ui-monospace, monospace;
	/* the only three type sizes on the site; drawings (the header stage, terrain, marks) are artwork */
	--fs-l: clamp(30px, 3.2vw, 46px);
	--fs-m: 16px;
	--fs-s: 13px;
}
* { box-sizing: border-box; }
.tag { display: inline-block; font: 400 var(--fs-s)/1 var(--dot); letter-spacing: .06em; color: var(--ext); border: 1px dashed var(--ext); padding: 5px 7px 4px; }
html { background: var(--paper); }
html, body { margin: 0; overflow-x: clip; }
body { color: var(--ink); font: 400 var(--fs-m)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
em { font: italic 400 1em var(--serif); }
.fold { height: 100vh; min-height: 720px; display: flex; flex-direction: column; }

.bar { display: flex; justify-content: space-between; align-items: center; padding: 24px 48px; font: 400 var(--fs-s) var(--dot); letter-spacing: .06em; border-bottom: 1px solid var(--ink); }
.bar nav { display: flex; gap: 22px; }
.bar nav a { text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; font: 500 var(--fs-m) var(--sans); letter-spacing: -.02em; text-decoration: none; }
.brand svg, .brand canvas { width: 26px; height: 26px; }
.dashmark path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 7 6; stroke-width: 6; animation: crawl 14s linear infinite; }
@keyframes crawl { to { stroke-dashoffset: -260; } }

h1 { margin: 0; font: 300 var(--fs-l)/1.08 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.lede { margin: 20px 0 0; color: var(--soft); font-size: var(--fs-m); max-width: 50ch; }
.lede b { color: var(--ink); font-weight: 500; }
.cta { display: flex; gap: 18px; align-items: center; margin-top: 28px; }
.btn { background: var(--ink); color: var(--paper); text-decoration: none; padding: 11px 18px; font: 500 var(--fs-s) var(--sans); }
.link { font: 500 var(--fs-s) var(--sans); text-decoration: none; border-bottom: 1px dashed var(--ink); }
.from { font-size: var(--fs-s); color: var(--soft); }
.from b { color: var(--ink); font-weight: 600; }
.gdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; }
.note { font: italic 400 var(--fs-m)/1.35 var(--serif); fill: var(--soft); color: var(--soft); }
.m { font: 400 var(--fs-s) var(--dot); letter-spacing: .06em; fill: var(--ink); }
.dither { color: var(--ink); }
code, .cmd { font: 400 var(--fs-s) var(--dot); }

/* the large mark behind the page, set in characters */
.glyph { position: fixed; z-index: -1; top: 50%; right: -22vmin; width: 104vmin; height: 104vmin; margin: -52vmin 0 0; overflow: hidden; font-family: var(--dot); line-height: 1; color: var(--ink); opacity: .05; pointer-events: none; user-select: none; }
@media (max-width: 760px) { .glyph { right: -40vmin; opacity: .045; } }

/* glossary hover cards, definitions from docs/terms.md */
.term { position: relative; border-bottom: 1.5px dotted currentColor; cursor: help; outline: none; }
.term .def {
	position: absolute; z-index: 30; left: -14px; bottom: calc(100% + 10px); width: 300px;
	padding: 12px 14px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
	font: 400 var(--fs-s)/1.5 var(--sans); color: var(--ink); letter-spacing: 0; text-align: left; white-space: normal;
	opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.term .def b { display: block; font: 400 var(--fs-s) var(--dot); letter-spacing: .1em; margin-bottom: 4px; }
.term:hover .def, .term:focus .def { opacity: 1; transform: none; }


/* nav and footer */
footer { display: flex; justify-content: space-between; align-items: center; padding: 28px 48px 40px; border-top: 1px solid var(--ink); font: 400 var(--fs-s) var(--dot); letter-spacing: .06em; }
footer nav { display: flex; gap: 24px; }
footer a { text-decoration: none; }

@media (max-width: 760px) {
	.bar { padding: 16px; }
	.bar nav { gap: 14px; }
	.bar nav .wide-only { display: none; }
	footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 16px 32px; }
	footer nav { flex-wrap: wrap; gap: 10px 20px; }
	footer a { white-space: nowrap; }
	.term .def { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* the one footnote, for what's provider-specific */
.fn { margin-left: 2px; text-decoration: none; font-size: var(--fs-s); vertical-align: super; line-height: 0; }
.footnote { margin: 0; padding: 20px 48px; border-top: 1px solid var(--ink); font-size: var(--fs-s); color: var(--soft); }
.footnote b { color: var(--ink); font-weight: 400; margin-right: 4px; }
@media (max-width: 760px) { .footnote { padding: 18px 16px; } }