/* Activate the Nation — the marketing site.
 *
 * Two halves. The token block below is lifted verbatim from the WordPress
 * theme's style.css, because it is the design: both palettes fully declared,
 * light as the base, dark for a reader whose device says so, and a toggle that
 * overrides either. What is NOT carried across is the ~950 lines under it that
 * paint `.wp-block-*` selectors and bridge `--wp--preset--color--*`. Those are
 * plumbing for a block editor that is being deleted; the markup here is
 * semantic, so the layout rules are written fresh against it.
 *
 * Fonts are self-hosted and served from /a/ with a content hash and a one-year
 * immutable cache. No Google Fonts request, on purpose: a webfont CDN sees
 * every reader of every page.
 */

/* ─────────────────────────── ATN tokens ───────────────────────────
 *
 * Light and dark, following the reader's device, with a toggle that overrides.
 *
 * WHY THE VALUES LIVE HERE AND NOT IN theme.json
 * theme.json ships the *light* literals and this file redeclares the preset
 * variables generated from them. Putting `var(--atn-ink)` directly into
 * theme.json would be shorter, but it breaks everything that reads a palette
 * entry as data rather than paint: duotone presets compile server-side into SVG
 * colour matrices and cannot parse a var(), editor swatches render empty, and
 * the contrast checker goes quiet. Real hex in theme.json also means that if
 * this stylesheet ever fails to load, the site degrades to a coherent light
 * page instead of an unstyled one.
 *
 * THREE STATES, NOT TWO
 * A reader is explicitly light, explicitly dark, or — the default, and the one
 * everyone forgets — has stated no preference. So the bare :root block is a
 * COMPLETE palette. Defining a colour only inside a media query is what gives
 * the no-preference reader one theme's ink on the other theme's ground.
 *
 * Light is the base. `[data-atn-theme="light"]` needs no block of its own:
 * neither override matches it, so it falls through here.
 */
:root {
	/* Both palettes, always defined, so any scope can reach either. */
	--atn-l-ground: #f8f4e9;
	--atn-l-surface: #fffdf6;
	--atn-l-surface-2: #f2ecdc;
	--atn-l-ink: #17120d;
	--atn-l-body: #4c4338;
	--atn-l-muted: #8c8274;
	--atn-l-hairline: #e3dac6;
	--atn-l-hairline-strong: #cfc3a9;
	--atn-l-gold: #e9b949;
	--atn-l-gold-ink: #8a6712;
	--atn-l-gold-wash: #fbf0d2;
	--atn-l-ember: #d4623c;
	--atn-l-clay: #b8503f;
	--atn-l-clay-wash: #fae8e2;
	--atn-l-shadow: 0 1px 2px rgba(23,18,13,.05), 0 12px 32px -18px rgba(23,18,13,.28);

	--atn-d-ground: #100e0c;
	--atn-d-surface: #1a1613;
	--atn-d-surface-2: #221d18;
	--atn-d-ink: #f6f0e3;
	--atn-d-body: #bfb6a6;
	--atn-d-muted: #8a8175;
	--atn-d-hairline: #2c2621;
	--atn-d-hairline-strong: #3d352c;
	--atn-d-gold: #efc258;
	--atn-d-gold-ink: #efc258;
	--atn-d-gold-wash: #2a2317;
	--atn-d-ember: #e5744c;
	--atn-d-clay: #cb6152;
	--atn-d-clay-wash: #2b1d19;
	--atn-d-shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);

	/* ── the live set: light ── */
	color-scheme: light;

	--atn-ground: var(--atn-l-ground);
	--atn-surface: var(--atn-l-surface);
	--atn-surface-2: var(--atn-l-surface-2);
	--atn-ink: var(--atn-l-ink);
	--atn-body: var(--atn-l-body);
	--atn-muted: var(--atn-l-muted);
	--atn-hairline: var(--atn-l-hairline);
	--atn-hairline-strong: var(--atn-l-hairline-strong);
	--atn-gold: var(--atn-l-gold);
	--atn-gold-ink: var(--atn-l-gold-ink);
	--atn-gold-wash: var(--atn-l-gold-wash);
	--atn-ember: var(--atn-l-ember);
	--atn-clay: var(--atn-l-clay);
	--atn-clay-wash: var(--atn-l-clay-wash);
	--atn-shadow: var(--atn-l-shadow);

	/* The opposite mode, for inverted bands. */
	--atn-inv-ground: var(--atn-d-ground);
	--atn-inv-surface: var(--atn-d-surface);
	--atn-inv-surface-2: var(--atn-d-surface-2);
	--atn-inv-ink: var(--atn-d-ink);
	--atn-inv-body: var(--atn-d-body);
	--atn-inv-muted: var(--atn-d-muted);
	--atn-inv-hairline: var(--atn-d-hairline);
	--atn-inv-hairline-strong: var(--atn-d-hairline-strong);
	--atn-inv-gold: var(--atn-d-gold);
	--atn-inv-gold-ink: var(--atn-d-gold-ink);
	--atn-inv-gold-wash: var(--atn-d-gold-wash);
	--atn-inv-ember: var(--atn-d-ember);
	--atn-inv-clay: var(--atn-d-clay);
	--atn-inv-clay-wash: var(--atn-d-clay-wash);
	--atn-inv-shadow: var(--atn-d-shadow);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-atn-theme]) {
		color-scheme: dark;

		--atn-ground: var(--atn-d-ground);
		--atn-surface: var(--atn-d-surface);
		--atn-surface-2: var(--atn-d-surface-2);
		--atn-ink: var(--atn-d-ink);
		--atn-body: var(--atn-d-body);
		--atn-muted: var(--atn-d-muted);
		--atn-hairline: var(--atn-d-hairline);
		--atn-hairline-strong: var(--atn-d-hairline-strong);
		--atn-gold: var(--atn-d-gold);
		--atn-gold-ink: var(--atn-d-gold-ink);
		--atn-gold-wash: var(--atn-d-gold-wash);
		--atn-ember: var(--atn-d-ember);
		--atn-clay: var(--atn-d-clay);
		--atn-clay-wash: var(--atn-d-clay-wash);
		--atn-shadow: var(--atn-d-shadow);

		--atn-inv-ground: var(--atn-l-ground);
		--atn-inv-surface: var(--atn-l-surface);
		--atn-inv-surface-2: var(--atn-l-surface-2);
		--atn-inv-ink: var(--atn-l-ink);
		--atn-inv-body: var(--atn-l-body);
		--atn-inv-muted: var(--atn-l-muted);
		--atn-inv-hairline: var(--atn-l-hairline);
		--atn-inv-hairline-strong: var(--atn-l-hairline-strong);
		--atn-inv-gold: var(--atn-l-gold);
		--atn-inv-gold-ink: var(--atn-l-gold-ink);
		--atn-inv-gold-wash: var(--atn-l-gold-wash);
		--atn-inv-ember: var(--atn-l-ember);
		--atn-inv-clay: var(--atn-l-clay);
		--atn-inv-clay-wash: var(--atn-l-clay-wash);
		--atn-inv-shadow: var(--atn-l-shadow);
	}
}

/* The explicit dark choice. Same body as the block above, and the duplication is
 * deliberate — the selectors are mutually exclusive, so neither covers for the
 * other. Add a token, add it in BOTH. */
:root[data-atn-theme="dark"] {
	color-scheme: dark;

	--atn-ground: var(--atn-d-ground);
	--atn-surface: var(--atn-d-surface);
	--atn-surface-2: var(--atn-d-surface-2);
	--atn-ink: var(--atn-d-ink);
	--atn-body: var(--atn-d-body);
	--atn-muted: var(--atn-d-muted);
	--atn-hairline: var(--atn-d-hairline);
	--atn-hairline-strong: var(--atn-d-hairline-strong);
	--atn-gold: var(--atn-d-gold);
	--atn-gold-ink: var(--atn-d-gold-ink);
	--atn-gold-wash: var(--atn-d-gold-wash);
	--atn-ember: var(--atn-d-ember);
	--atn-clay: var(--atn-d-clay);
	--atn-clay-wash: var(--atn-d-clay-wash);
	--atn-shadow: var(--atn-d-shadow);

	--atn-inv-ground: var(--atn-l-ground);
	--atn-inv-surface: var(--atn-l-surface);
	--atn-inv-surface-2: var(--atn-l-surface-2);
	--atn-inv-ink: var(--atn-l-ink);
	--atn-inv-body: var(--atn-l-body);
	--atn-inv-muted: var(--atn-l-muted);
	--atn-inv-hairline: var(--atn-l-hairline);
	--atn-inv-hairline-strong: var(--atn-l-hairline-strong);
	--atn-inv-gold: var(--atn-l-gold);
	--atn-inv-gold-ink: var(--atn-l-gold-ink);
	--atn-inv-gold-wash: var(--atn-l-gold-wash);
	--atn-inv-ember: var(--atn-l-ember);
	--atn-inv-clay: var(--atn-l-clay);
	--atn-inv-clay-wash: var(--atn-l-clay-wash);
	--atn-inv-shadow: var(--atn-l-shadow);
}

.atn-invert {
	color-scheme: dark;

	--atn-ground: var(--atn-inv-ground);
	--atn-surface: var(--atn-inv-surface);
	--atn-surface-2: var(--atn-inv-surface-2);
	--atn-ink: var(--atn-inv-ink);
	--atn-body: var(--atn-inv-body);
	--atn-muted: var(--atn-inv-muted);
	--atn-hairline: var(--atn-inv-hairline);
	--atn-hairline-strong: var(--atn-inv-hairline-strong);
	--atn-gold: var(--atn-inv-gold);
	--atn-gold-ink: var(--atn-inv-gold-ink);
	--atn-gold-wash: var(--atn-inv-gold-wash);
	--atn-ember: var(--atn-inv-ember);
	--atn-clay: var(--atn-inv-clay);
	--atn-clay-wash: var(--atn-inv-clay-wash);
	--atn-shadow: var(--atn-inv-shadow);

	background-color: var(--atn-ground);
	color: var(--atn-body);
}

/* ─────────────────────────── faces ─────────────────────────── */

/* font-display: swap everywhere. Anton is the display face and a blocking load
 * would leave the page's largest text invisible while 44KB arrives; a flash of
 * the fallback is the better failure. */
@font-face {
	font-family: Anton;
	src: url("/a/anton-400.23aab0b2692a0c89.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: Oswald;
	src: url("/a/oswald-variable.c36937da4c390497.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
}
@font-face {
	font-family: Mulish;
	src: url("/a/mulish-variable.14cc0eabadfeb1af.woff2") format("woff2");
	font-weight: 200 1000;
	font-display: swap;
}
@font-face {
	font-family: Mulish;
	src: url("/a/mulish-variable-italic.59b79338a0889d12.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: Caveat;
	src: url("/a/caveat-variable.7d2f75e65d4ebde6.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--atn-display: Anton, Impact, "Arial Narrow Bold", sans-serif;
	--atn-util: Oswald, "Arial Narrow", sans-serif;
	--atn-body-face: Mulish, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--atn-script: Caveat, "Segoe Script", cursive;
	--atn-measure: 68ch;
	/* The hero mark, per mode. A single value cannot serve both: the same alpha
	 * that reads as a whisper on cream is nearly invisible on charcoal, because
	 * the mark is dark-on-light in one and light-on-dark in the other. */
	--atn-watermark: 0.08;
	--atn-gutter: clamp(1.25rem, 5vw, 3rem);
	--atn-column: 72rem;
}

/* ─────────────────────────── base ─────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--atn-ground);
	color: var(--atn-body);
	font-family: var(--atn-body-face);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--atn-ink); line-height: 1.12; margin: 0; }

h1 {
	font-family: var(--atn-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
h2 {
	font-family: var(--atn-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
}
h3 {
	font-family: var(--atn-util);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--atn-clay); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--atn-ember); }

/* Never remove the outline — only replace it. A keyboard reader on the legal
 * pages is exactly the person who most needs to see where they are. */
:focus-visible {
	outline: 2px solid var(--atn-clay);
	outline-offset: 3px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--atn-hairline);
	margin: 2.5rem 0;
}

/* Skip link: off-screen until focused. */
.atn-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--atn-surface);
	color: var(--atn-ink);
	padding: 0.75rem 1rem;
	z-index: 100;
}
.atn-skip:focus { left: 0; }

/* ─────────────────────────── shell ─────────────────────────── */

.atn-wrap {
	width: 100%;
	max-width: var(--atn-column);
	margin-inline: auto;
	padding-inline: var(--atn-gutter);
}

.atn-header {
	border-bottom: 1px solid var(--atn-hairline);
	background: color-mix(in srgb, var(--atn-surface) 88%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	position: sticky;
	top: 0;
	z-index: 50;
}
.atn-header .atn-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	/* Tall enough for a 76px logo with air around it — the live site measures
	 * 109px at desktop widths and 98px once the logo shrinks. */
	min-height: 6.5rem;
	padding-block: 0.6rem;
}
/* Sized by WIDTH with height auto, which is what the WordPress theme did and
 * is right for a lockup: the mark and the wordmark share a baseline, so
 * constraining the height is really constraining the wordmark's cap height and
 * the whole thing shrinks past reading size to fit a bar. 190px is the measured
 * width of the live site's logo; the clamp is its mobile rule.
 *
 * The img carries width="190" height="76" — the SVG's own 1520.9x607.8, which
 * is 2.502:1. Those attributes are not decoration: the browser reserves a box
 * from them before the file arrives, and the 220x34 they used to say described
 * a shape this logo has never been, so the header jumped on every first paint. */
.atn-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.atn-logo img {
	width: clamp(132px, 42vw, 190px);
	height: auto;
	display: block;
}
/* One lockup per mode, chosen by CSS so the right one is painted first.
 *
 * Three states, the same three the tokens handle: explicitly light, explicitly
 * dark, and — the one that is easy to forget — no stated preference, which is
 * the default and follows the device. Light is the base and needs no block of
 * its own, so [data-atn-theme="light"] falls through here and beats the media
 * query by not matching it. */
.atn-logo .atn-logo-dark { display: none; }
.atn-logo .atn-logo-light { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-atn-theme="light"]) .atn-logo .atn-logo-light { display: none; }
	:root:not([data-atn-theme="light"]) .atn-logo .atn-logo-dark { display: block; }
}
:root[data-atn-theme="dark"] .atn-logo .atn-logo-light { display: none; }
:root[data-atn-theme="dark"] .atn-logo .atn-logo-dark { display: block; }

/* The menu.
 *
 * A <details>, so it works with no script and no ARIA of our own: the summary
 * is a real button to every assistive technology, and open/closed is state the
 * browser keeps. Wide screens hide the summary and lay the links out in a row;
 * narrow ones show the summary and drop the links into a panel under the bar.
 * The breakpoint is where five uppercase labels plus a logo stop fitting on
 * one line — that is what the wrapping in the first mobile screenshot was. */
.atn-menu { position: relative; }
.atn-menu > summary { list-style: none; cursor: pointer; }
.atn-menu > summary::-webkit-details-marker { display: none; }
.atn-menu-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--atn-util);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--atn-ink);
	padding: 0.55rem 0.2rem 0.55rem 0.6rem;
	border-radius: 999px;
}
.atn-menu-btn:hover { color: var(--atn-clay); }
.atn-burger { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.atn-burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.atn-menu[open] .atn-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.atn-menu[open] .atn-burger i:nth-child(2) { opacity: 0; }
.atn-menu[open] .atn-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.atn-nav { display: flex; gap: clamp(0.9rem, 2.2vw, 1.9rem); align-items: center; }
.atn-nav a {
	font-family: var(--atn-util);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--atn-ink);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.atn-nav a:hover { color: var(--atn-clay); border-color: var(--atn-gold); }
.atn-nav-cta {
	border: 1px solid var(--atn-hairline-strong) !important;
	border-radius: 999px;
	padding: 0.5rem 1rem !important;
}
.atn-nav-cta:hover { background: var(--atn-gold-wash); border-color: var(--atn-gold) !important; }

@media (min-width: 60rem) {
	.atn-menu > summary { display: none; }
}
/* This bar is sticky, so on a phone its height is a tax on every screenful.
 * The live site measures 98px there; matching it keeps the logo at the size it
 * should be without the header taking an eighth of the viewport. */
@media (max-width: 59.99rem) {
	.atn-header .atn-wrap { min-height: 5.6rem; padding-block: 0.4rem; }
}
/* No script on a phone: the details is open, so the links show. Lay them out
 * as a wrapped row under the bar and hide the summary, which would be a button
 * nothing listens to. */
@media (max-width: 59.99rem) {
	html:not(.js) .atn-menu > summary { display: none; }
	html:not(.js) .atn-header .atn-wrap { flex-wrap: wrap; padding-bottom: 0.6rem; }
	html:not(.js) .atn-nav { flex-wrap: wrap; gap: 0.4rem 1rem; width: 100%; }
}
@media (max-width: 59.99rem) {
	.js .atn-nav {
		position: absolute;
		right: 0;
		top: calc(100% + 0.6rem);
		min-width: 15rem;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--atn-surface);
		border: 1px solid var(--atn-hairline);
		border-radius: 12px;
		box-shadow: var(--atn-shadow);
		padding: 0.5rem;
		transform-origin: top right;
		animation: atn-menu-in .18s ease-out;
	}
	.js .atn-nav a { padding: 0.85rem 0.9rem; border-bottom: 0; border-radius: 8px; }
	.js .atn-nav a:hover { background: var(--atn-surface-2); }
	.js .atn-nav-cta { margin-top: 0.35rem; text-align: center; background: var(--atn-clay); color: #fff !important; border-color: var(--atn-clay) !important; }
	.js .atn-nav-cta:hover { background: var(--atn-ember) !important; }
}
@keyframes atn-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.atn-footer {
	/* No margin-top.
	 *
	 * It used to carry 5rem, from when a page ended with plain content sitting
	 * on the page ground. Every page now ends with either a coloured band or a
	 * .atn-doc, both of which have generous bottom padding of their own — so
	 * that margin showed as a strip of bare --atn-ground between two coloured
	 * surfaces, which read as a gap somebody forgot to close. The space belongs
	 * to whatever comes last, where it can take the right background with it. */
	border-top: 1px solid var(--atn-hairline);
	background: var(--atn-surface);
	padding-block: 3rem 3.5rem;
	font-size: 0.9375rem;
}
.atn-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem 3rem;
}
.atn-footer h3 {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--atn-muted);
	margin-bottom: 0.75rem;
}
.atn-footer ul { list-style: none; margin: 0; padding: 0; }
.atn-footer li { margin-bottom: 0.4rem; }
.atn-footer a { color: var(--atn-body); text-decoration: none; }
.atn-footer a:hover { color: var(--atn-clay); text-decoration: underline; }
.atn-colophon {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--atn-hairline);
	color: var(--atn-muted);
	font-size: 0.875rem;
}

/* ─────────────────────────── bands ─────────────────────────── */

.atn-band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.atn-band-surface { background: var(--atn-surface); }
.atn-band-invert { background: var(--atn-ground); }

.atn-eyebrow {
	font-family: var(--atn-util);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--atn-gold-ink);
	margin-bottom: 0.9rem;
}
.atn-script { font-family: var(--atn-script); font-size: 1.5rem; color: var(--atn-clay); }
.atn-lede {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: var(--atn-body);
	max-width: var(--atn-measure);
}

/* Always-dark bands.
 *
 * The brand art is charcoal with ember and gold light on it, and the app is the
 * same in both of its themes. So the hero and the app bands are dark for a
 * light-theme reader too. This is NOT .atn-invert: that flips to the opposite
 * palette, which in dark mode means light. This pins the dark set, whatever
 * the reader chose — and the lockup swap at the top of the file does not apply
 * inside it, because there is no lockup inside it. */
.atn-force-dark {
	color-scheme: dark;
	--atn-ground: var(--atn-d-ground);
	--atn-surface: var(--atn-d-surface);
	--atn-surface-2: var(--atn-d-surface-2);
	--atn-ink: var(--atn-d-ink);
	--atn-body: var(--atn-d-body);
	--atn-muted: var(--atn-d-muted);
	--atn-hairline: var(--atn-d-hairline);
	--atn-hairline-strong: var(--atn-d-hairline-strong);
	--atn-gold: var(--atn-d-gold);
	--atn-gold-ink: var(--atn-d-gold);
	--atn-gold-wash: var(--atn-d-gold-wash);
	--atn-ember: var(--atn-d-ember);
	--atn-clay: var(--atn-d-clay);
	--atn-clay-wash: var(--atn-d-clay-wash);
	--atn-shadow: var(--atn-d-shadow);
	background: var(--atn-ground);
	color: var(--atn-body);
}

/* Gradient type — the "GO!" of the store art. Background-clip text with a
 * solid-colour fallback underneath, so a browser without it still prints the
 * word in gold rather than in nothing. */
.atn-fire {
	color: var(--atn-gold);
	background: linear-gradient(100deg, var(--atn-ember) 0%, var(--atn-gold) 70%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 18px color-mix(in srgb, var(--atn-ember) 35%, transparent));
}

/* ─────────────────────────── the hero ─────────────────────────── */

.atn-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(5rem, 14vw, 10rem) clamp(4.5rem, 12vw, 8.5rem);
	text-align: center;
	background:
		radial-gradient(60% 55% at 18% 88%, color-mix(in srgb, var(--atn-ember) 18%, transparent), transparent 70%),
		radial-gradient(55% 50% at 86% 10%, color-mix(in srgb, var(--atn-gold) 14%, transparent), transparent 70%),
		var(--atn-ground);
}
/* The mark, behind everything.
 *
 * A pseudo-element rather than an <img>: it is decoration and has no place in
 * the accessibility tree, and opacity on a real element would have to be undone
 * on every child. It sits at z-index 0 under the arcs (z-index 1) and the copy
 * (2), so all three layers compose rather than one hiding another.
 *
 * Centred on the home hero, because the headline is centred there and an
 * off-centre mark behind centred type reads as a mistake. Sized to frame the
 * words rather than sit squarely behind them — the crosshair ring lands around
 * the headline, not through it. */
.atn-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 46%;
	width: min(78vw, 46rem);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	background: url("/a/atn-color-logo-only.df88dd2bd224ff40.svg") center / contain no-repeat;
	opacity: var(--atn-watermark);
	pointer-events: none;
}
.atn-art { z-index: 1; }

/* The page heroes set their type to the left, so the mark goes right and is
 * allowed to bleed off the edge. Fitting it entirely on screen would shrink it
 * to a logo sitting in a corner; running out of frame is what makes it read as
 * a watermark rather than a second logo. */
.atn-hero-sm::before {
	left: auto;
	right: clamp(-6rem, -4vw, -1rem);
	top: 50%;
	width: min(42vw, 26rem);
	transform: translateY(-50%);
}

/* Under about 48rem the headline runs the full width and a mark centred behind
 * it becomes texture under the words rather than around them. */
@media (max-width: 48rem) {
	.atn-hero::before { opacity: calc(var(--atn-watermark) * 0.7); width: min(96vw, 30rem); }
	.atn-hero-sm::before { right: -30vw; }
}

/* A reader who asked for more contrast asked for exactly this to go. */
@media (prefers-contrast: more) {
	.atn-hero::before { display: none; }
}

.atn-hero-inner { position: relative; z-index: 2; max-width: 56rem; }
.atn-hero .atn-eyebrow { color: var(--atn-gold); }
.atn-hero h1 {
	font-size: clamp(2.75rem, 1.4rem + 6.4vw, 6.25rem);
	line-height: 0.98;
	letter-spacing: 0.005em;
	text-wrap: balance;
	color: var(--atn-ink);
	text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.atn-hero .atn-ref {
	margin-top: 1.4rem;
	font-family: var(--atn-util);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	color: var(--atn-gold);
}
.atn-hero-lede { margin: 1.5rem auto 0; max-width: 40rem; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem); color: var(--atn-ink); }
.atn-hero-cta { justify-content: center; margin-top: 2.25rem; }

/* The light.
 *
 * One inline SVG, three arcs, a scatter of sparks and some contour lines —
 * the same vocabulary as the store screenshots, drawn rather than pasted so it
 * scales to any width without a seam and costs 4KB instead of a JPEG. Each arc
 * is a wide blurred stroke (the halo) under a thin sharp one (the filament),
 * both on the ember-to-gold gradient. Motion is slow and small: the arcs
 * breathe and the filaments carry a travelling highlight. Nothing loops fast
 * enough to pull the eye off the headline, and prefers-reduced-motion stops
 * all of it at the bottom of this file. */
.atn-art {
	position: absolute;
	inset: -10% -6%;
	z-index: 0;
	pointer-events: none;
}
.atn-arcs { width: 100%; height: 100%; display: block; }
.atn-contours { opacity: 0.09; }
.atn-arc { opacity: 0.95; transform-origin: 50% 50%; }
.atn-arc-halo { opacity: 0.55; }
.atn-arc-line {
	stroke-dasharray: 260 2200;
	stroke-dashoffset: 0;
	animation: atn-travel 14s linear infinite;
}
.atn-arc-a { animation: atn-breathe 11s ease-in-out infinite alternate; }
.atn-arc-b { animation: atn-breathe 13s ease-in-out infinite alternate-reverse; opacity: 0.8; }
.atn-arc-b .atn-arc-line { animation-duration: 18s; animation-delay: -6s; }
.atn-arc-c { animation: atn-breathe 16s ease-in-out infinite alternate; opacity: 0.55; }
.atn-arc-c .atn-arc-line { animation-duration: 22s; animation-delay: -11s; }
.atn-sparks circle { opacity: .55; animation: atn-twinkle 4.5s ease-in-out infinite; }
.atn-sparks circle:nth-child(2n) { animation-delay: -1.3s; animation-duration: 5.5s; }
.atn-sparks circle:nth-child(3n) { animation-delay: -2.7s; animation-duration: 6.5s; }
.atn-sparks circle:nth-child(4n) { animation-delay: -0.6s; }

@keyframes atn-travel { to { stroke-dashoffset: -2460; } }
@keyframes atn-breathe {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-1.2%, 1%) scale(1.03); }
}
@keyframes atn-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

/* A reader who has asked for more contrast has asked for exactly this to go. */
@media (prefers-contrast: more) {
	.atn-art { display: none; }
}

.atn-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/* The five tabs. A numbered list, not bullets: the order is the order they sit
 * in along the bottom of the app, and a stranger who has seen the screenshot
 * beside it can match them up. */
.atn-tabs {
	list-style: none;
	counter-reset: tab;
	margin: 3rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 0.9rem;
}
.atn-tabs li {
	counter-increment: tab;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.35rem 1.3rem 1.5rem;
	background: color-mix(in srgb, var(--atn-surface) 80%, transparent);
	border: 1px solid var(--atn-hairline);
	border-radius: 14px;
	position: relative;
	transition: border-color .18s ease, transform .18s ease;
}
.atn-tabs li:hover { border-color: var(--atn-gold); transform: translateY(-2px); }
.atn-tabs li::before {
	content: "0" counter(tab);
	font-family: var(--atn-util);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--atn-gold);
}
.atn-tabs b {
	font-family: var(--atn-display);
	font-weight: 400;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--atn-ink);
}
.atn-tabs span { color: var(--atn-body); font-size: 0.95rem; line-height: 1.55; }

/* Buttons are pills — the brief's, and the app's. */
.atn-store { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.atn-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
	font-family: var(--atn-util);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.875rem;
	padding: 0.95rem 1.65rem;
	border-radius: 999px;
	text-decoration: none;
	background: var(--atn-clay);
	color: #fff;
	border: 1px solid transparent;
	box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--atn-clay) 70%, transparent);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.atn-btn:hover { background: var(--atn-ember); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--atn-ember) 80%, transparent); }
.atn-btn:active { transform: translateY(0); }
.atn-btn-k { font-size: 0.6rem; letter-spacing: 0.12em; opacity: .8; margin-bottom: 0.2rem; }
.atn-btn-quiet {
	background: transparent;
	color: var(--atn-ink);
	border-color: var(--atn-hairline-strong);
	box-shadow: none;
}
.atn-btn-quiet:hover { background: var(--atn-surface-2); color: var(--atn-ink); border-color: var(--atn-gold); box-shadow: none; }
.atn-force-dark .atn-btn-quiet { color: var(--atn-ink); border-color: rgba(246,240,227,.28); }
.atn-force-dark .atn-btn-quiet:hover { background: rgba(246,240,227,.08); }
@media (max-width: 30rem) {
	.atn-store { flex-direction: column; }
	.atn-btn { width: 100%; }
}

.atn-more {
	font-family: var(--atn-util);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 2px solid var(--atn-gold);
}
.atn-more:hover { color: var(--atn-ember); border-color: var(--atn-ember); }

/* The commission, set as the app's home screen sets it. */
.atn-commission {
	margin: 1.5rem 0 0;
	font-family: var(--atn-display);
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--atn-ink);
}
.atn-commission span { display: block; }
.atn-commission span:nth-child(2) { color: var(--atn-clay); }
.atn-commission span:nth-child(3) { color: var(--atn-gold-ink); }

/* The page hero: every page but the home page. Same art, smaller, left-set,
 * with the breadcrumb trail inside it so the trail sits on the dark band
 * rather than as a stripe between header and page. */
.atn-hero-sm {
	text-align: left;
	padding-block: clamp(2.75rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.atn-hero-sm .atn-hero-inner { max-width: var(--atn-column); }
.atn-hero-sm h1 {
	font-size: clamp(2.2rem, 1.3rem + 4vw, 4.25rem);
	text-wrap: balance;
	max-width: 22ch;
}
.atn-hero-sm .atn-hero-lede { margin-inline: 0; max-width: var(--atn-measure); font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem); color: var(--atn-body); }
.atn-hero-sm .atn-hero-meta { margin-top: 1rem; color: var(--atn-gold); }
.atn-hero-sm .atn-art { opacity: .7; inset: -30% -6% -10%; }
.atn-hero-sm .atn-crumbs { background: transparent; border: 0; margin-bottom: 1.25rem; }
.atn-hero-sm .atn-crumbs ol { padding: 0; color: rgba(246,240,227,.55); }
.atn-hero-sm .atn-crumbs a { color: rgba(246,240,227,.55); }
.atn-hero-sm .atn-crumbs a:hover { color: var(--atn-gold); }
.atn-hero-sm .atn-crumbs li:last-child a { color: var(--atn-ink); }
.atn-hero-sm .atn-crumbs li + li::before { color: rgba(246,240,227,.3); }
/* The load-in stagger is the home hero's; five beats on a legal page is four
 * too many. Everything rises together here. */
.atn-hero-sm .atn-hero-inner > * { animation-delay: .05s; }

/* Cards and state tiles lift on hover, everywhere they appear. */
.atn-card, .atn-states a, .atn-kinds li { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.atn-card:hover, .atn-kinds li:hover { transform: translateY(-3px); border-color: var(--atn-gold); box-shadow: var(--atn-shadow); }
.atn-states a:hover { transform: translateY(-2px); }

/* ─────────────────────────── the app bands ─────────────────────────── */

.atn-pocket { padding-block: clamp(4rem, 9vw, 7rem); position: relative; overflow: hidden; }
.atn-pocket::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 60% at 80% 40%, color-mix(in srgb, var(--atn-ember) 12%, transparent), transparent 70%),
		radial-gradient(40% 40% at 10% 90%, color-mix(in srgb, var(--atn-gold) 8%, transparent), transparent 70%);
	pointer-events: none;
}
.atn-pocket > .atn-wrap { position: relative; }
.atn-pocket-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
.atn-pocket-grid-flip .atn-phone { order: -1; }
.atn-pocket .atn-script { color: var(--atn-gold); }
.atn-free { margin-top: 1.25rem; color: var(--atn-ink); }
.atn-free strong { color: var(--atn-gold); font-family: var(--atn-util); letter-spacing: 0.06em; text-transform: uppercase; }

/* The phone.
 *
 * A real store frame, not a mock. The tilt is small and the float is slow —
 * the page should feel awake, not restless. */
.atn-phone { margin: 0; justify-self: center; width: min(100%, 21rem); position: relative; }
.atn-phone img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 22px;
	box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
	animation: atn-float 7s ease-in-out infinite;
}
.atn-phone-a img { transform: rotate(-3deg); }
.atn-phone-b img { transform: rotate(2.5deg); animation-delay: -3.5s; }
.atn-phone::after {
	content: "";
	position: absolute;
	inset: 20% 10% -5%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--atn-ember) 35%, transparent), transparent);
	filter: blur(24px);
}
@keyframes atn-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}
@media (max-width: 52rem) {
	.atn-pocket-grid { grid-template-columns: 1fr; }
	.atn-pocket-grid-flip .atn-phone { order: 0; }
	.atn-phone { width: min(78%, 17rem); }
	.atn-phone-a img, .atn-phone-b img { transform: rotate(0); }
}

/* Safe by design. */
.atn-safe {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1.25rem 2.5rem;
	max-width: 68rem;
}
.atn-safe li { padding-left: 1.6rem; position: relative; color: var(--atn-body); }
.atn-safe li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--atn-ember), var(--atn-gold));
}
.atn-safe b { color: var(--atn-ink); display: block; margin-bottom: 0.15rem; }

/* The closing band. */
.atn-final {
	text-align: center;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--atn-ember) 22%, transparent), transparent 70%),
		var(--atn-ground);
}
.atn-final .atn-script { color: var(--atn-gold); }
.atn-final h2 { font-size: clamp(4rem, 2rem + 9vw, 9rem); line-height: 1; }
.atn-final .atn-lede { margin-inline: auto; margin-top: 1.25rem; }
.atn-final .atn-store { justify-content: center; }

/* ─────────────────────────── motion ─────────────────────────── */

/* The hero rises on load: eyebrow, headline, reference, lede, buttons, each a
 * beat after the last. CSS only, so it happens whether or not the script
 * arrives, and it is gone under reduced motion with everything else. */
.atn-hero-inner > * { animation: atn-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.atn-hero-inner > :nth-child(1) { animation-delay: .05s; }
.atn-hero-inner > :nth-child(2) { animation-delay: .15s; }
.atn-hero-inner > :nth-child(3) { animation-delay: .35s; }
.atn-hero-inner > :nth-child(4) { animation-delay: .45s; }
.atn-hero-inner > :nth-child(5) { animation-delay: .6s; }
@keyframes atn-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* The layers the script moves. will-change only here: promising the compositor
 * a layer costs memory, and these three are the only elements that earn it. */
.atn-arcs, .atn-hero-inner, .atn-phone { will-change: transform; }

/* Cards inside a revealed section arrive one after another. nth-child rather
 * than a script-set index: eight rules cover every list on the site and need
 * nothing to run. */
.js .atn-reveal :is(.atn-tabs, .atn-safe, .atn-kinds) > li {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li { opacity: 1; transform: none; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(1) { transition-delay: .05s; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(2) { transition-delay: .12s; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(3) { transition-delay: .19s; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(4) { transition-delay: .26s; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(5) { transition-delay: .33s; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(6) { transition-delay: .40s; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(7) { transition-delay: .47s; }
.js .atn-reveal.is-in :is(.atn-tabs, .atn-safe, .atn-kinds) > li:nth-child(8) { transition-delay: .54s; }

/* ─────────────────────────── reveal ─────────────────────────── */

/* Only with the `js` class the head stamp adds: a section is hidden solely
 * when the script that will reveal it has a chance of running. With scripts
 * blocked the class is absent and nothing here applies. */
.js .atn-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .atn-reveal.is-in { opacity: 1; transform: none; }

/* ─────────────────────────── documents ─────────────────────────── */

/* Asymmetric on purpose: the top is measured against the hero above it, the
 * bottom against the footer, and the footer is a hard edge where the hero is a
 * soft one. */
.atn-doc { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5.5rem); }
.atn-doc-head { margin-bottom: 2.5rem; }
.atn-doc-head p { color: var(--atn-muted); font-size: 0.9375rem; margin: 0.75rem 0 0; }

.atn-prose { max-width: var(--atn-measure); }
.atn-prose h2 { margin: 2.5rem 0 0.85rem; }
.atn-prose h3 { margin: 1.85rem 0 0.6rem; }
.atn-prose > :first-child { margin-top: 0; }
.atn-prose ul { margin: 0 0 1.15em; padding-left: 1.15rem; }
.atn-prose li { margin-bottom: 0.45rem; }
.atn-prose strong { color: var(--atn-ink); font-weight: 700; }
/* A bold lead-in is the rule and the rest is its explanation — the two are
 * parsed separately, so set them so the eye can tell them apart. */
.atn-prose .atn-lead { color: var(--atn-ink); font-weight: 700; }
/* Citation apparatus, not prose: smaller, quieter, tighter. */
.atn-prose .atn-cites {
	font-family: var(--atn-util);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--atn-muted);
	margin-top: -0.4em;
}

/* ─────────────────────────── resources ─────────────────────────── */

.atn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding: 0;
	list-style: none;
}
.atn-card {
	background: var(--atn-surface);
	border: 1px solid var(--atn-hairline);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.atn-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.atn-card-body { padding: 1.1rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.atn-card h2 { font-size: 1.15rem; }
.atn-card h2 a { color: var(--atn-ink); text-decoration: none; }
.atn-card h2 a:hover { color: var(--atn-clay); }
.atn-card p { color: var(--atn-body); font-size: 0.9375rem; margin: 0; }
.atn-meta {
	font-family: var(--atn-util);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--atn-muted);
}
/* The three resource taxonomies are not publicly queryable, so these are text
 * and not links. WordPress handed back a term URL that 302'd to the front page
 * with a 200; printing a label avoids inventing a destination. */
.atn-meta span + span::before { content: " · "; }

.atn-empty {
	border: 1px dashed var(--atn-hairline-strong);
	border-radius: 3px;
	padding: 2.5rem;
	text-align: center;
	color: var(--atn-muted);
	margin-top: 2rem;
}

.atn-back { display: inline-block; margin-top: 3rem; font-family: var(--atn-util); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Light ink on a dark ground carries further, so the dark mode value is lower
 * than the light one, not higher. */
@media (prefers-color-scheme: dark) {
	:root:not([data-atn-theme="light"]) { --atn-watermark: 0.07; }
}
:root[data-atn-theme="dark"] { --atn-watermark: 0.07; }

/* ── the phone budget ──
 *
 * Everything above is affordable on a desktop GPU and several things above are
 * not affordable on a phone. Scrolling felt bad on a phone for four specific
 * reasons, none of which are "too much animation":
 *
 *   1. `atn-travel` animates stroke-dashoffset on paths that carry an SVG
 *      filter. A geometry change inside a filtered subtree cannot be cached, so
 *      the Gaussian blur re-runs over the whole filter region every frame, for
 *      the life of the page. Three paths, forever.
 *   2. `atn-breathe` animates a transform on <g> elements whose children carry
 *      filter="url(#atn-glow)". A transform on a filtered subtree is not a
 *      compositor transform — it re-rasterises the blur instead of moving a
 *      finished layer.
 *   3. backdrop-filter on the sticky header re-samples and re-blurs whatever is
 *      behind it on every scroll frame. This one IS the "scrolling is choppy"
 *      feeling: it is the only per-scroll-frame cost in the list.
 *   4. will-change on .atn-arcs pins all of the above into one permanently
 *      promoted layer, which is therefore a layer that can never be reused.
 *
 * So the phone keeps the motion and loses the blur. The arcs still breathe, the
 * phones still float, the sparks still twinkle — those are transforms and
 * opacity, which the compositor does for free. What goes is every Gaussian in
 * the scrolling path. At 390px a 6px-deviation glow is close to invisible
 * anyway; a wide round-capped stroke at low opacity reads as the same light.
 *
 * Gated on pointer: coarse rather than a width, because the cost follows the
 * GPU, not the viewport — a narrow desktop window has no such problem, and a
 * big tablet does. */
@media (pointer: coarse) {
	/* 1 & 2 — no Gaussian anywhere in the art. CSS `filter` overrides the
	 * `filter` presentation attribute in the markup, so this is enough; the
	 * attribute stays for pointer: fine. */
	.atn-arc-halo, .atn-arc-line { filter: none; }
	.atn-arc-halo { opacity: 0.34; }
	/* A solid filament rather than a travelling dash: same line, no per-frame
	 * geometry change. Same treatment reduced motion already gives it. */
	.atn-arc-line { stroke-dasharray: none; animation: none; }

	/* 3 — the one cost paid on every scroll frame. The background goes opaque
	 * to the same degree the blur was providing, so the header still separates
	 * from what passes under it. */
	.atn-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: color-mix(in srgb, var(--atn-surface) 97%, transparent);
	}

	/* 4 — the script does not run parallax on a coarse pointer (see site.js),
	 * so nothing here is script-transformed and the promotion buys nothing.
	 * .atn-phone keeps its own, because atn-float still moves it. */
	.atn-arcs, .atn-hero-inner { will-change: auto; }

	/* The ember glow behind each phone: a 24px blur on a box that is also
	 * floating, so it re-blurs as it moves. A radial gradient is already a soft
	 * edge — the blur was gilding it. */
	.atn-phone::after { filter: none; opacity: .75; }

	/* Gold type with a drop-shadow, inside text that scrolls. */
	.atn-fire { filter: none; }
}

/* Off-screen art stops animating. Three arcs and twelve sparks keep the
 * compositor busy for the whole length of a nine-thousand-pixel privacy policy
 * otherwise — work whose only output is pixels nobody can see. Set by site.js;
 * with the script blocked the animations simply run as before. */
.atn-art-idle :is(.atn-arc, .atn-arc-line, .atn-sparks circle) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	/* Belt and braces: site.js also reveals everything immediately under this
	 * preference, but if the file never arrives nothing may stay invisible. */
	.js .atn-reveal, .js .atn-reveal :is(.atn-tabs, .atn-safe, .atn-kinds) > li { opacity: 1; transform: none; transition: none; }
	.atn-hero-inner > * { animation: none; }
	.atn-arc-line { stroke-dasharray: none; }
}

/* ─────────────────────────── group directory ─────────────────────────── */

.atn-crumbs { border-bottom: 1px solid var(--atn-hairline); background: var(--atn-surface); }
.atn-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0.7rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--atn-util);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--atn-muted);
}
.atn-crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--atn-hairline-strong); }
.atn-crumbs a { color: var(--atn-muted); text-decoration: none; }
.atn-crumbs a:hover { color: var(--atn-clay); text-decoration: underline; }
.atn-crumbs li:last-child a { color: var(--atn-ink); }

.atn-states {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1px;
	background: var(--atn-hairline);
	border: 1px solid var(--atn-hairline);
	border-radius: 3px;
	overflow: hidden;
}
.atn-states a {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.1rem 1.25rem;
	background: var(--atn-surface);
	text-decoration: none;
	height: 100%;
}
.atn-states a:hover { background: var(--atn-gold-wash); }
.atn-state-name {
	font-family: var(--atn-util);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	color: var(--atn-ink);
}

/* A city section is a landmark on its state page, and scroll-margin is what
 * makes /groups/nj/#montclair land with the heading visible rather than tucked
 * under the header. An anchor that scrolls to the wrong place reads as broken. */
.atn-city { margin-top: 3.5rem; scroll-margin-top: 1.5rem; }
.atn-city > h2 { padding-bottom: 0.6rem; border-bottom: 1px solid var(--atn-hairline); }

.atn-card-title { font-family: var(--atn-display); font-size: 1.25rem; text-transform: none; letter-spacing: 0; }
.atn-card-title a { color: var(--atn-ink); text-decoration: none; }
.atn-card-title a:hover { color: var(--atn-clay); }
.atn-where { color: var(--atn-body); font-size: 0.9375rem; margin: 0; }

.atn-join {
	margin-top: 3rem;
	padding: 1.75rem;
	border: 1px solid var(--atn-hairline);
	border-left: 3px solid var(--atn-gold);
	border-radius: 3px;
	background: var(--atn-surface);
	max-width: var(--atn-measure);
}
.atn-join h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.atn-join .atn-store { margin-top: 1.25rem; }

/* ─────────────────────────── group kinds ─────────────────────────── */

.atn-kinds {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem;
}
.atn-kinds li {
	padding: 1.5rem 1.6rem 1.4rem;
	background: var(--atn-surface);
	border: 1px solid var(--atn-hairline);
	border-top: 3px solid var(--atn-gold);
	border-radius: 3px;
}
.atn-kinds h3 {
	font-family: var(--atn-display);
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	margin-bottom: 0.7rem;
}
.atn-kinds p { color: var(--atn-body); }
.atn-kinds .atn-meta { margin-top: 0.9rem; }

/* The band the cards sit on is already --atn-surface on the home page, so the
 * cards would vanish into it. Lift them onto the alternate surface there. */
.atn-band-surface .atn-kinds li { background: var(--atn-surface-2); }

.atn-kinds-after { margin-top: 2rem; }
.atn-kinds-intro { margin-top: 2.5rem; }
.atn-kinds-intro > h2,
.atn-states-heading {
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--atn-hairline);
}
.atn-states-heading { margin-top: 3.5rem; }
.atn-kinds-intro + .atn-states-heading { margin-top: 3.5rem; }


/* ─────────────────────────── scripture ─────────────────────────── */

/* A reference in prose. Underlined in gold rather than coloured like a link:
 * the statement of faith cites about forty passages, and forty clay-coloured
 * words would read as a page of links with sentences between them. */
a[data-osis] {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--atn-gold);
	cursor: pointer;
}
a[data-osis]:hover,
a[data-osis][aria-expanded="true"] {
	color: var(--atn-gold-ink);
	border-bottom-style: solid;
	background: var(--atn-gold-wash);
	border-radius: 2px;
}
/* On a citation line every word is already a reference, so the dotted rule
 * under each one is noise. */
.atn-cites a[data-osis] { border-bottom-color: transparent; }
.atn-cites a[data-osis]:hover { border-bottom-color: var(--atn-gold); }

.atn-verse-panel {
	position: absolute;
	z-index: 80;
	width: min(28rem, calc(100vw - 1.5rem));
	background: var(--atn-surface);
	color: var(--atn-body);
	border: 1px solid var(--atn-hairline);
	border-radius: 14px;
	box-shadow: var(--atn-shadow);
	padding: 1.1rem 1.2rem 1rem;
	animation: atn-pop .14s ease-out;
}
@keyframes atn-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.atn-verse-head { display: flex; align-items: flex-start; gap: 1rem; }
.atn-verse-ref {
	flex: 1;
	margin: 0 0 .65rem;
	font-family: var(--atn-display);
	font-size: 1.15rem;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--atn-ink);
}
.atn-verse-close {
	flex: 0 0 auto;
	width: 1.9rem; height: 1.9rem;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--atn-surface-2);
	color: var(--atn-muted);
	font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.atn-verse-close:hover { background: var(--atn-gold-wash); color: var(--atn-ink); }

.atn-verse-body {
	border-top: 2px solid var(--atn-gold);
	padding-top: .85rem;
	font-size: .975rem;
	line-height: 1.6;
	max-height: 45vh;
	overflow-y: auto;
}
.atn-verse-body p { margin: 0; }
.atn-verse-num {
	font-family: var(--atn-util);
	font-size: .7em;
	font-weight: 600;
	color: var(--atn-gold-ink);
	vertical-align: super;
	margin-right: .1em;
}

.atn-verse-foot {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: .9rem;
	padding-top: .8rem;
	border-top: 1px solid var(--atn-hairline);
	font-family: var(--atn-util);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.atn-verse-version { color: var(--atn-muted); margin-right: auto; }
.atn-verse-read { color: var(--atn-gold-ink); text-decoration: none; border-bottom: 1px solid var(--atn-gold); }
.atn-verse-read:hover { color: var(--atn-ember); border-color: var(--atn-ember); }
.atn-verse-copy {
	border: 1px solid var(--atn-hairline-strong);
	background: transparent;
	color: var(--atn-ink);
	border-radius: 999px;
	padding: .4rem .9rem;
	font: inherit;
	cursor: pointer;
}
.atn-verse-copy:hover { background: var(--atn-surface-2); border-color: var(--atn-gold); }

@media (prefers-reduced-motion: reduce) { .atn-verse-panel { animation: none; } }

.atn-byline {
	font-family: var(--atn-util);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--atn-muted);
	margin: 0 0 1.75rem;
}
.atn-byline time { color: var(--atn-body); }

.atn-cadence { margin-top: 1.75rem; color: var(--atn-body); }
.atn-place { margin-top: 2.5rem; }
.atn-place > h2 { font-size: 1.35rem; margin-bottom: 0.8rem; }
.atn-city-context { margin-top: 1.5rem; color: var(--atn-muted); font-size: 1rem; }
.atn-siblings { margin-top: 3.5rem; }