/* ============================================================
   Sotsworks
   ============================================================ */
:root {
	/* grounds */
	--bg:      #4B538B;  /* indigo — header/footer bands; also the body bg, which Safari
	                        uses to tint the toolbar + overscroll */
	--surface: #15191D;  /* near-black; reading surface, painted on main */

	/* ink */
	--ink:     #E8E8E8;  /* body text */
	--accent:  #F7A21B;  /* amber (links) */
	--heading: #606493;  /* lightened indigo */

	/* white-on-dark, by opacity */
	--line:   rgba(255, 255, 255, 0.22);  /* hairlines/band seams */
	--panel:  rgba(255, 255, 255, 0.06);  /* image load backdrop & code chips */
	--muted:  rgba(255, 255, 255, 0.62);  /* footer text */

	/* type */
	--sans: "Mona Sans Text", "Helvetica", "Arial", "FreeSans", sans-serif;
	--mono: "Mona Sans Mono", "Menlo", "Lucida Console", "DejaVu Sans Mono", monospace;

	/* layout */
	--maxw: 36rem;
}


@font-face {
	font-family: "Mona Sans Text";      /* wght 400, wdth 100, opsz 20 */
	src: url("assets/MonaSans-text.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Mona Sans Title";     /* wght 600, wdth 100, opsz 50 */
	src: url("assets/MonaSans-title.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Mona Sans Wordmark";  /* wght 800, wdth 75, opsz 30 */
	src: url("assets/MonaSans-wordmark.woff2") format("woff2");
	font-weight: 800;
	font-display: swap;
}
@font-face {
	font-family: "Mona Sans Mono";      /* wght 400, wdth 90 */
	src: url("assets/MonaSans-mono.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.65 var(--sans);
	font-synthesis: none;
	font-variant-numeric: proportional-nums;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   Layout
   ============================================================ */
.page {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

main { flex: 1; background: var(--surface); }
section { padding-top: 2.25rem; padding-bottom: 2.25rem; }

/* full-bleed indigo dividers */
hr.rule { border: 0; border-top: 1px solid var(--bg); width: 100%; margin: 0; }
.group + .group { border-top: 1px solid var(--bg); }

main > .group:last-child { border-bottom: 1px solid var(--bg); }

/* ============================================================
   Header / footer bands
   ============================================================ */
header.site,
footer.site { background: var(--bg); }
header.site { border-bottom: 1px solid var(--line); }
footer.site { border-top: 1px solid var(--line); margin-top: -1px; }  /* overlap main by 1px so the footer band absorbs the closing content divider when content is flush */

.bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 3.75rem;
	padding-top: 0.7rem;
	padding-bottom: 0.5rem;
}

nav.main { display: flex; gap: 1.4rem; margin-left: auto; font-size: 0.95rem; }
nav.main a { color: var(--ink); }
nav.main a:hover { color: var(--accent); text-decoration: none; }
nav.main a[aria-current="page"] {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	padding: 0.1rem 0.45rem;
	margin: -0.1rem -0.45rem;  /* keep pill from shifting nav spacing/baseline */
}
nav.main a[aria-current="page"]:hover { color: var(--ink); }

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.4rem 2rem;
	padding-top: 1.4rem;
	padding-bottom: 1.6rem;
	font-size: 0.9rem;
	color: var(--muted);
}
.footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--accent); }

/* ============================================================
   Type
   ============================================================ */
.wordmark { font-family: "Mona Sans Wordmark", "PT Sans Narrow", "Tahoma", "DejaVu Sans Condensed", sans-serif; font-weight: 800; line-height: 1; color: var(--ink); }
.wordmark-lg { display: block; font-size: 3.6rem; letter-spacing: -0.05rem; margin: 0; }
.wordmark-sm {
	font-size: 1.5rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.wordmark-sm:hover { color: var(--ink); text-decoration: none; }

h1 { font-family: "Mona Sans Title", "Helvetica", "Arial", sans-serif; font-weight: 600; font-size: 2.2rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; font-weight: 400; color: var(--heading); margin: 0 0 0.75rem; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
p.updated { color: var(--heading); font-weight: 400; }  /* privacy policy timestamp */

code,
.token {
	font: 1em var(--mono);
	color: var(--ink);
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	padding: 0.05em 0.35em;
}

/* ============================================================
   Components
   ============================================================ */
ul.features { margin: 0 0 0.4rem; padding-left: 1.15rem; list-style-type: square; }
/* A list that ends its block keeps the tight 0.4rem tail before the section's
   padding — every list on the SplitTake page is that shape, so its rhythm is
   untouched. A list with content after it is sitting in prose instead, and takes
   the paragraph's bottom margin: the gap above a list is p's collapsed 1.1rem,
   so leaving 0.4rem below left it nearly 3x tighter underneath than on top. */
ul.features:not(:last-child) { margin-bottom: 1.1rem; }
ul.features li { margin: 0 0 0.5rem; padding-left: 0.2rem; }
ul.features li:last-child { margin-bottom: 0; }
ul.features li::marker { color: var(--accent); }

.shot {
	width: 100%;
	max-width: 50.5rem;
	margin: 0.5rem auto 2.25rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.shot a { display: block; cursor: zoom-in; }
.frame {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	background: var(--panel);
	border-radius: 8px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 30rem) {
	.wordmark-lg { font-size: 2.9rem; }
}