/*
Theme Name: Athlete Narrative
Theme URI: https://athletenarrative.com/
Author: Athlete Narrative
Author URI: https://athletenarrative.com/
Description: Dark navy-and-lime classic theme for Athlete Narrative — the recruiting app for student-athletes and their parents. Classic PHP templates plus theme.json presets, so Elementor, Zion Builder and Gutenberg content all keep rendering. No build step, no required plugins.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: athletenarrative
Tags: blog, one-column, custom-logo, custom-menu, featured-images, footer-widgets, translation-ready, accessibility-ready
*/

/* ==========================================================================
   0. FONTS — self-hosted woff2, bundled in this theme.
   Archivo (SIL OFL 1.1) and Inter (SIL OFL 1.1) and Bebas Neue (SIL OFL 1.1).
   Zero requests to fonts.googleapis.com / fonts.gstatic.com at runtime.
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-var-latin.woff2") format("woff2");
	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: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-var-latin.woff2") format("woff2");
	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-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bebasneue-400-latin.woff2") format("woff2");
	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: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bebasneue-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. TOKENS
   Brand palette (locked — see theme.json, which registers the same values as
   editor presets):
     --an-canvas   #171A1D  page canvas
     --an-ink      #0D1014  cards, deep bands, footer
     --an-control  = --an-ink  form controls
     --an-lime     #AAFB00  accent
     --an-white    #FFFFFF  body text on dark
     --an-mute     #9C9C9C  helper text (6.27:1 on canvas)
   Documented neutrals, all drawn from the site's own colour census:
     --an-surface  #0F131A  mid-tone section band / nav hover
     --an-btn-base #141920  primary button base fill
     --an-on-lime  #141920  text on a lime ground (13.88:1) — NEVER white on lime
     --an-line     #2A3140  hairline borders, derived from the canvas hue
     --an-bar-rule = --an-line mixed with --an-mute, ~#63666E

   --an-control used to be its own hex, #0D0F15. Measured against --an-ink it is
   1.00:1 — one unit apart on two channels, which is not a tone, it is a typo
   with a name. It is now an alias, so the sheet carries one fewer literal and
   the form controls sit on the same ink as every other raised surface. (The
   editor preset in theme.json still names the old literal; folding that one is
   a change to a file this pass does not own.)

   --an-line stays a tone of its own: nothing else in the palette sits between
   the darks and --an-mute, and it is the hairline the whole layout is ruled
   with. Deliberate local tone, not a drift.

   --an-bar-rule is derived, not invented: an even sRGB mix of --an-line and
   --an-mute, resolving to #63666E. It exists because the nav bar's bottom edge
   has to read against whatever scrolls under it, and no single existing token
   does. Measured — 3.32:1 on --an-ink, 3.04:1 on --an-canvas, 4.52:1 on
   --an-lime; --an-line alone is 1.46:1 on ink, which is why the pinned bar had
   no visible foot over a dark section. Older engines that cannot compute
   color-mix keep the --an-line hairline they render today.
   Deliberately absent: #ff1514 (Neve legacy red), #36FF00 (off-brand caret
   green), #A9FA00 (the drifted Elementor Kit global). Do not reintroduce them.

   Contrast floors held throughout: 4.5:1 body text, 3:1 large text and UI.
   ========================================================================== */

:root {
	--an-canvas: #171a1d;
	--an-ink: #0d1014;
	--an-control: var(--an-ink);
	--an-surface: #0f131a;
	--an-line: #2a3140;
	--an-bar-rule: var(--an-line);
	--an-bar-rule: color-mix(in srgb, var(--an-line), var(--an-mute));
	--an-lime: #aafb00;
	--an-white: #ffffff;
	--an-mute: #9c9c9c;
	--an-btn-base: #141920;
	--an-on-lime: #141920;

	--an-container: 1170px;
	--an-gutter: 30px;
	--an-radius: 4px;
	--an-header-h: 70px;

	/* Breathing room under the nav bar while it is resting at the foot of the
	   screen on the front page. It is also the distance by which the bar pins
	   early, because the bar reaches the top of the viewport that much sooner. */
	--an-navbar-inset: 28px;

	/* Vertical rhythm — the multiples-of-one-unit scale (1x/2x/3x/4x). */
	--an-s1: 24px;
	--an-s2: 48px;
	--an-s3: 72px;
	--an-s4: 96px;

	/* Editorial section rhythm. Long-form marketing sections breathe on this
	   scale, not on the 1x–4x one, which stays for component-level spacing. */
	--an-s-editorial: clamp(6rem, 11vw, 13rem);

	/* Display scale. Used by .an-display on the marketing surfaces; the base
	   h1–h6 sizes below stay smaller so article, archive and legal-page
	   headings keep a readable measure.
	     xl  hero headline          ~2.9rem →  8rem   (8.5vw)
	     lg  section statement      ~2.5rem →  6.5rem (7vw)
	     md  split-row heading      ~2.1rem →  4rem   (4.6vw)
	     sm  index-row heading      ~1.35rem → 2rem   (2.4vw)

	   THE XL STEP CAME DOWN — 8.5vw/12svh/8rem to 5.6vw/9svh/5rem — and it came
	   down because the headline changed, not because the poster got timid. The
	   owner's value proposition ("The fastest way for student-athletes to get
	   discovered by college coaches.", 2026-08-16) is 71 characters against the
	   43 of the line it replaced, and the hero now carries a subhead, a trust
	   row and a button under it rather than a button alone.

	   The number that decides this is not taste, it is the resting nav bar. On
	   the front page the bar rests at 100svh minus its own height and its inset
	   (§7 below), so anything the hero's copy block extends past that line is
	   something the bar lands on top of — white on lime at 1.27:1 in the worst
	   case, the one pairing this theme bans outright. Measured at 1440x900, the
	   same page, the same copy, only this token changed:

	     8.5vw → 108px, 7 lines, hero 1274, copy ends 1095, bar at 802  ✗ -293
	     7.0vw →  99px, 6 lines, hero 1138, copy ends  959, bar at 802  ✗ -157
	     6.2vw →  89px, 6 lines, hero 1089, copy ends  910, bar at 802  ✗ -108
	     5.6vw →  80px, 4 lines, hero  907, copy ends  728, bar at 802  ✓  +74

	   5.6vw is also the width at which the longest of the headline's four stated
	   segments ("for student-athletes") stops wrapping, so the four `|` breaks in
	   the Customizer field are the four lines on screen — the rag is the owner's
	   decision again rather than the browser's.

	   The height term does the same job at short windows, where the width term
	   cannot see the problem: at 1440 a 5.6vw headline is 80px whatever the
	   window's height, so 9svh is what ties it to the space it actually has.
	   Shorten the headline in the Customizer and it gets bigger relative to the
	   page again, up to the 5rem ceiling.

	   THE FLOOR IS NOT A CONSTANT, and that is what keeps a phone from scrolling
	   sideways. Display type wraps between words or not at all (.an-display
	   below), so a heading's MIN-CONTENT width is its longest single word — and a
	   floor stated in rem holds that word at the same pixel width all the way
	   down to 320px, where it is simply wider than the screen. The word then sets
	   the container's minimum, the container sets the document's, and the whole
	   page gains a horizontal scrollbar because of one word. Measured on this
	   content at 320 (Chrome, the bundled Archivo at wdth 125 / wght 900), the
	   widest min-content run per step and the size it would need in order to fit
	   the 260px a 320px viewport leaves inside the 30px gutters:

	     xl  "The fastest way…"     8.401em  269px @32px  needs ≤ 30.9px
	     lg  "…vs Traditional…"     8.909em  356px @40px  needs ≤ 29.2px
	     md  "Become an Ambassador" 9.465em  318px @33.6  needs ≤ 27.5px
	     sm  "Track Engagement"     8.858em  191px @21.6  needs ≤ 29.4px  ✓ fits

	   So each floor becomes min(its old rem value, the width one word may have).
	   The divisors are the measured em-widths with ~3% of headroom, and the
	   subtrahend is the two gutters (3.75rem = 60px). Above the crossover — 338px
	   for xl, 428px for lg, 389px for md — the second term is the larger of the
	   two and min() returns the old rem floor unchanged, so every viewport a
	   desktop or tablet visitor has is pixel-identical to before. sm needs no
	   step: its longest word already fits at 320 with 8px to spare.

	   Breaking the word instead (overflow-wrap) was the alternative and is worse:
	   it splits ARCHIVO mid-glyph-run at poster scale, and it would have to be
	   scoped to a width band, where this is one arithmetic that holds at every
	   width there is. */
	--an-display-xl: clamp(min(2rem, (100vw - 3.75rem) / 8.7), min(5.6vw, 9vh), 5rem);
	--an-display-xl: clamp(min(2rem, (100vw - 3.75rem) / 8.7), min(5.6vw, 9svh), 5rem);
	--an-display-lg: clamp(min(2.5rem, (100vw - 3.75rem) / 9.2), 7vw, 6.5rem);
	--an-display-md: clamp(min(2.1rem, (100vw - 3.75rem) / 9.8), 4.6vw, 4rem);
	--an-display-sm: clamp(1.35rem, 2.4vw, 2rem);

	--an-font-display: "Archivo", "Arial Narrow", Impact, system-ui, sans-serif;
	--an-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--an-font-label: "Bebas Neue", "Archivo", Impact, system-ui, sans-serif;

	/* This site has one theme and it is dark. Saying so hands the engine the
	   form controls, scrollbars and — the visible one — the native <video>
	   control bar, which otherwise renders as a light grey strip across the
	   foot of every highlight in the lightbox. */
	color-scheme: dark;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

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

body {
	margin: 0;
	background-color: var(--an-canvas);
	color: var(--an-white);
	font-family: var(--an-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.an-nav-open {
	overflow: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

/* The one place the brand accent is allowed to be a ground under body copy:
   --an-on-lime on --an-lime is the same 13.88:1 pairing the CTA band uses. The
   browser default here is a blue that belongs to no palette on this site. */
::selection {
	background-color: var(--an-lime);
	color: var(--an-on-lime);
}

figure {
	margin: 0 0 var(--an-s1);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 116, "wght" 800;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--an-white);
	margin: 0 0 var(--an-s1);
}

h1 {
	font-size: clamp(2.6rem, 6.4vw, 5rem);
}

h2 {
	font-size: clamp(2rem, 4.4vw, 3.2rem);
}

h3 {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-variation-settings: "wdth" 112, "wght" 700;
}

h4 {
	font-size: 1.05rem;
	font-variation-settings: "wdth" 108, "wght" 700;
}

h5,
h6 {
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	font-variation-settings: "wdth" 106, "wght" 700;
}

/* Editorial display type. Archivo at its widest and heaviest — the register
   the brand's own Archivo Black already uses, pushed to poster scale. Applied
   as a class rather than to h1/h2 directly so that only the marketing surfaces
   get poster type and body-content headings keep their measure. */
.an-display {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 125, "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.88;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0;

	/* body sets overflow-wrap: break-word, which at this size snaps words in
	   half mid-glyph-run. Display type wraps between words or not at all. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.an-display--xl {
	font-size: var(--an-display-xl);
	line-height: 0.84;
	letter-spacing: -0.025em;
}

.an-display--lg {
	font-size: var(--an-display-lg);
}

.an-display--md {
	font-size: var(--an-display-md);
	line-height: 0.92;
	letter-spacing: -0.015em;
}

.an-display--sm {
	font-size: var(--an-display-sm);
	font-variation-settings: "wdth" 118, "wght" 800;
	line-height: 1;
	letter-spacing: -0.01em;
}

.an-display a {
	color: inherit;
	text-decoration: none;
}

.an-display a:hover,
.an-display a:focus {
	color: var(--an-lime);
}

p {
	margin: 0 0 var(--an-s1);
}

.an-lead,
.an-prose p,
.an-measure {
	max-width: 68ch;
}

a {
	color: var(--an-lime);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

/* Every component on this site hovers TOWARDS lime — the menu, the footer, the
   cards, the post titles, the display links. This generic rule was the one
   exception, hovering a lime link away to white, so a prose link moved in the
   opposite direction to everything around it. It stays lime now, and the hover
   is carried by the underline instead. Thickness and offset are inert on
   anything with no underline to thicken, so the buttons — which set
   text-decoration: none — are untouched. */
a:hover,
a:focus {
	color: var(--an-lime);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

:focus-visible {
	outline: 3px solid var(--an-lime);
	outline-offset: 3px;
	border-radius: 2px;
}

ul,
ol {
	padding-left: 1.15em;
}

li {
	margin-bottom: 0.4em;
}

blockquote {
	margin: 0 0 var(--an-s1);
	padding: 4px 0 4px var(--an-s1);
	border-left: 3px solid var(--an-lime);
	color: var(--an-white);
	font-size: 1.05rem;
}

code,
pre,
kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
}

code {
	padding: 2px 6px;
}

pre {
	padding: var(--an-s1);
	overflow-x: auto;
}

pre code {
	border: 0;
	padding: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--an-line);
	margin: var(--an-s2) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--an-s1);
}

th,
td {
	border: 1px solid var(--an-line);
	padding: 10px 14px;
	text-align: left;
}

th {
	background-color: var(--an-ink);
	font-family: var(--an-font-display);
	text-transform: uppercase;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
}

/* Muted body copy — 6.27:1 on the canvas, higher on the ink cards. */
.an-muted,
.an-section p,
.an-card p,
.an-prose p {
	color: var(--an-mute);
}

.an-eyebrow {
	display: block;
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 105, "wght" 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.72rem;
	color: var(--an-lime);
	margin: 0 0 clamp(12px, 1.6vw, 22px);
}

/* Eyebrow over a display headline — a touch larger, more air beneath it. */
.an-eyebrow--lg {
	font-size: 0.82rem;
	letter-spacing: 0.28em;
	margin-bottom: clamp(16px, 2.2vw, 30px);
}

/* The `//` heading terminator, mirrored in lime. Decorative only — templates
   render it with aria-hidden so it is never announced.

   0.55 read as a printing fault next to display type set at 900 weight: the
   mark was fainter than the thinnest stroke beside it. 0.8 keeps it secondary
   to the heading without looking like it failed to load. On a lime ground the
   mark is not faded at all — see layout.css §8. */
.an-slash {
	color: var(--an-lime);
	opacity: 0.8;
}

/* Balanced ragging for short display lines. Applied by the template to the
   headlines where an orphaned last word is the failure mode — the hero above
   all, where one word alone on line five is the difference between a poster
   and an accident. Inert on engines without it. */
.u-balance {
	text-wrap: balance;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.an-container {
	width: 100%;
	max-width: var(--an-container);
	margin-inline: auto;
	padding-inline: var(--an-gutter);
}

.an-container--wide {
	max-width: 1400px;
}

/* THE EDITORIAL RAIL.

   Every eyebrow, heading and paragraph on this site starts on one vertical
   line — 165px in at 1440 — and the page reads as a single column of thought
   with the media allowed to run wider than it. Sections built on
   .an-container--wide were breaking that: their heading blocks started at the
   WIDE container's edge, 50px in at 1440, so the page had a second left edge
   115px out from the first and the eye had to re-find the column three times on
   the way down.

   The fix is a nested container, and the arithmetic has to be exact or it
   merely moves the problem. A plain nested .an-container does not work: it
   centres 1170px inside the outer container's CONTENT box and then adds its own
   30px gutter, which lands on the rail at 1440 and drifts by up to a full
   gutter below ~1230px, where the inner box stops being max-width-bound and
   starts being gutter-bound. Dropping the second gutter and shrinking the
   max-width by the same 60px is the identity: the inner content box then has
   the outer's gutter as its own, and the two agree at every width.

     1440   outer content 50..1390, inner 1110 centred  → rail at 165  ✓ (165)
     1300   outer content 30..1270, inner 1110 centred  → rail at  95  ✓ (95)
     1200   outer content 30..1170, inner 1110 centred  → rail at  45  ✓ (45)
      800   outer content 30.. 770, inner 740           → rail at  30  ✓ (30)

   Section heads take the same inset directly, so a --wide section lands on the
   rail whether or not its template wraps the head in a container. Centred heads
   are exempt: they state their own measure and are not on the rail at all. */
.an-container--wide > .an-container,
.an-container--wide > .an-section-head:not(.an-section-head--center) {
	max-width: calc(var(--an-container) - var(--an-gutter) * 2);
	margin-inline: auto;
	padding-inline: 0;
}

.an-section {
	padding-block: var(--an-s4);
}

.an-section--tight {
	padding-block: var(--an-s3);
}

.an-section--flush-top {
	padding-top: 0;
}

.an-section--ink {
	background-color: var(--an-ink);
}

.an-section--surface {
	background-color: var(--an-surface);
}

.an-section-head {
	margin-bottom: var(--an-s2);
}

.an-section-head--center {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

.an-section-head--center p {
	margin-inline: auto;
}

.an-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background-color: var(--an-lime);
	color: var(--an-on-lime);
	padding: 12px 20px;
	font-family: var(--an-font-display);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

.an-skip-link:focus {
	left: 6px;
	top: 6px;
	color: var(--an-on-lime);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 12px 20px;
	background-color: var(--an-lime);
	color: var(--an-on-lime);
	z-index: 1000;
}

/* ==========================================================================
   5. BUTTONS
   The signature interaction: dark base + lime border, inverting to a lime
   fill with near-black label on hover.
   ========================================================================== */

.an-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 30px;
	border: 2px solid var(--an-lime);
	border-radius: var(--an-radius);
	background-color: var(--an-btn-base);
	color: var(--an-white);
	font-family: var(--an-font-label);
	font-size: 1.05rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.an-btn:hover,
.an-btn:focus {
	background-color: var(--an-lime);
	color: var(--an-on-lime);
}

.an-btn--solid {
	background-color: var(--an-lime);
	color: var(--an-on-lime);
}

.an-btn--solid:hover,
.an-btn--solid:focus {
	background-color: var(--an-btn-base);
	color: var(--an-lime);
}

.an-btn--line {
	background-color: transparent;
	color: var(--an-lime);
}

.an-btn--line:hover,
.an-btn--line:focus {
	background-color: var(--an-lime);
	color: var(--an-on-lime);
}

.an-btn--sm {
	padding: 10px 20px;
	font-size: 0.95rem;
}

/* The single hero CTA and the closing CTA — the two buttons that carry the
   whole funnel, sized to match the display type they sit under. */
.an-btn--lg {
	padding: 18px 44px;
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	letter-spacing: 0.2em;
}

/* Below 480px the vw term has long since bottomed out at the 1.1rem floor, so
   the biggest label on the site — "Start Your 7-Day FREE Trial", 27 characters
   of Bebas at 0.2em tracking — was 52px wider than the phone had room for and
   broke across two lines mid-phrase. The tracking goes first: it is 3.5px per
   character at that size, more than a third of the label's width, and it is the
   part nobody reads. The type follows it down only far enough to fit. */
@media (max-width: 479px) {
	.an-btn--lg {
		padding: 16px 24px;
		font-size: 0.95rem;
		letter-spacing: 0.1em;
	}
}

.an-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: var(--an-s1);
}

.an-btn-row--center {
	justify-content: center;
}

/* ==========================================================================
   6. APP STORE BADGES
   Real anchors, always — never a bare <img>. If the owner has not supplied a
   store URL the badge is not rendered at all (see inc/template-tags.php), so
   the site can never ship a dead download affordance again.
   ========================================================================== */

.an-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: var(--an-s1);
}

/* The header's "Download the App" pill jumps here, and the header is sticky —
   so the badge row has to stop clear of the bar rather than under it.

   Two units of air above the bar, not one, and the second unit is not padding
   for its own sake: where the badges sit inside a section that reveals on
   scroll, the browser computes the stop from the row's PRE-reveal position and
   the reveal then lifts it ~30px. Measured after the animation settled, at
   1440x900: with one unit the row landed 64px from the top — 7px under a 71px
   bar — on /features/ and the front page, and at 94px on /pricing/, which
   reveals nothing there. With two, the same three pages land at 88, 88 and 118.
   Every one of them clear. */
#download {
	scroll-margin-top: calc(var(--an-header-h) + var(--an-s2));
}

.an-badges--center {
	justify-content: center;
}

.an-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 22px;
	min-height: 56px;
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	color: var(--an-white);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.an-badge:hover,
.an-badge:focus {
	border-color: var(--an-lime);
	color: var(--an-white);
}

.an-badge__mark {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--an-lime);
}

.an-badge__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.an-badge__kicker {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--an-mute);
}

.an-badge__name {
	font-family: var(--an-font-label);
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.an-badge--image {
	padding: 0;
	border: 0;
	background: none;
	min-height: 0;
}

.an-badge--image img {
	/* Equal HEIGHT, not max-height: Apple's badge SVG declares a 40px intrinsic
	   height and Google's PNG a 120px one, so a max-height cap renders them at
	   different sizes. Both assets are trimmed to their true edges, so a fixed
	   shared height makes the pair proportionate; the small width difference
	   (Apple 2.99:1 vs Google 3.33:1) is inherent to the official artwork.

	   No radius of our own either. Both official badges draw their own rounded
	   corners inside a transparent bounding box, so a 4px clip on top of them
	   would either do nothing or shave the artwork's own corner — and the pair
	   would stop matching the square language the rest of the theme keeps. */
	height: 52px;
	width: auto;
	border-radius: 0;
}

/* Shown only to logged-in editors when a store URL is still empty. */
.an-badge-notice {
	display: block;
	margin-top: var(--an-s1);
	padding: 12px 16px;
	border: 1px dashed var(--an-lime);
	border-radius: var(--an-radius);
	background-color: var(--an-ink);
	color: var(--an-white);
	font-size: 0.85rem;
}

/* ==========================================================================
   7. HEADER
   ========================================================================== */

/* Sits above the mobile overlay (z-index 95) so the close control and the
   wordmark stay visible and clickable while the menu is open.

   No backdrop-filter here, deliberately. It used to carry one, and it made this
   element the containing block for every fixed-position descendant — including
   .an-nav, which becomes the full-screen overlay menu below 1024px. The overlay
   was being clipped to the header's own box: 500x190 instead of 500x657 on a
   phone, reproducible on /pricing/ straight from load. The ground here is now
   fully opaque, so a blur would have nothing left to act on anyway; the overlay
   is what has to be visible.

   THE GROUND IS OPAQUE, and that is a legibility decision rather than a
   stylistic one. It used to be 0.92 (0.97 once scrolled), which is enough to
   read white against most things and not enough to read anything against the
   lime CTA band: on-lime copy passing under the bar was composited with 3-8% of
   the bar's own dark and came out at roughly 1.5:1 for the width of a bar
   height — legible-obligated text rendered illegible on its way past. Alpha
   also gave every section a ghost of itself sliding under the bar. At 1.0 the
   bar is a bar, and whatever is behind it is simply behind it.

   THE BOTTOM RULE has to survive both grounds it can ever sit above: the ink
   and canvas of the page's own sections, and the lime band. --an-line manages
   10.24:1 on lime and 1.46:1 on ink, so the bar had a visible foot over the
   one surface it least needed one and no foot at all over the rest of the
   site. --an-bar-rule is the derived mid tone that clears 3:1 on all three —
   3.32 on ink, 3.04 on canvas, 4.52 on lime. */
.an-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--an-canvas);
	border-bottom: 1px solid var(--an-bar-rule);
}

.an-header.is-scrolled {
	background-color: var(--an-ink);
}

/* --- Front page: one bar, one mechanic, no second copy of anything.

   The bar is NOT fixed. It sits in the document flow one viewport further down
   than it would otherwise, so at rest it reads as the full-width bar lying along
   the foot of the screen over the hero — wordmark at its left, menu and CTA at
   its right, the same row it will be at the top. Scroll and it rides up with the
   page, like any other content; when its top edge reaches the top of the viewport
   `position: sticky` (declared on .an-header above, for every page) pins it,
   and it is the header for the rest of the scroll. Scroll back up and it
   un-pins to the foot of the screen again. All of that is CSS — with the script
   blocked the bar still rests, rides and pins; assets/js/reveal.js only adds
   .is-pinned so the ground can change.

   Because the whole thing is one element, there is one <nav>, one landmark and
   one tab stop set at every scroll position. Nothing is duplicated, hidden,
   inerted, or handed focus.

   THE OFFSET is measured against the viewport, not against the hero. The hero
   is min-height:100svh, but its display headline routinely makes it taller than
   that — 991px against a 757px viewport at 1440 wide on the current copy — and
   anchoring to the hero's real foot would park the bar below the fold, where
   nobody would see it at rest. .an-main takes the exact reciprocal of the
   bar's total flow contribution (offset + height), so the hero still begins at
   the very top of the screen. Both are stated in vh first and svh second, so a
   browser without svh still gets the correct layout.

   The border-bottom becomes an inset shadow on this page: a real border would
   add 1px to the bar's flow height and put that reciprocal out by exactly that
   much. The shadow occupies no layout at all.

   THE GROUND defaults to the pinned treatment, and the transparency below is
   the enhancement — not the other way round. Without JavaScript .is-pinned
   never arrives, and a bar left transparent would still pin, over whatever is
   scrolled under it — including the lime CTA band, where white text measures
   1.27:1. In this order the no-JS bar simply carries its ink ground the whole
   way down, which is legible over anything. It costs no flash: reveal.js sets
   .an-js on <html> from the head before first paint, the same guarantee the
   reveal styles already rely on. */
body.home .an-header {
	margin-top: calc(100vh - var(--an-header-h) - var(--an-navbar-inset));
	margin-top: calc(100svh - var(--an-header-h) - var(--an-navbar-inset));
	background-color: var(--an-ink);
	background-image: none;
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--an-bar-rule);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.home .an-main {
	margin-top: calc(-100vh + var(--an-navbar-inset));
	margin-top: calc(-100svh + var(--an-navbar-inset));
}

/* At rest the bar is exactly the bar: the same container, the same row, the
   wordmark at its left and the menu and CTA at its right. Nothing is re-homed
   and nothing is boxed — the whole thing, branding included, simply rides up
   and pins as one. So there is no at-rest presentation to declare here; the
   only difference from the pinned state is that the ground is not painted yet.

   RESTING LEGIBILITY (the numbers that must not be softened):
   with no ground of its own the bar reads straight off the hero's own veil, so
   that gradient in layout.css §1 is now load-bearing for this bar and not only
   for the headline. Where the bar lands inside the hero moves with the viewport,
   because the offset is a viewport height and the hero's height is its content —
   measured at four sizes, the bar's top edge sits at 74.2% of the hero (1728x857),
   66.5% (1440x757), 62.9% (1280x617) and 46.9% on a short window (1440x557).
   Composited over a pure-white photo, the worst image anyone could upload:

       1728x857   alpha 0.854  sRGB(48.3, 50.9, 54.3)  white 12.70:1  lime 9.99:1
       1440x757   alpha 0.828  sRGB(54.5, 57.0, 60.3)  white 11.59:1  lime 9.11:1
       1280x617   alpha 0.816  sRGB(57.4, 59.9, 63.2)  white 11.10:1  lime 8.72:1
       1440x557   alpha 0.763  sRGB(70.4, 72.7, 75.7)  white  9.09:1  lime 7.14:1

   The guarantee does not rest on those positions, though. The veil's alpha never
   drops below 0.72 anywhere in the hero — that is its shallowest stop — and 0.72
   over a white photo is sRGB(80.8, 82.9, 85.8), luminance 0.0858, giving white
   7.73:1 and lime 6.08:1. Bare AA for white needs alpha 0.570 and 3:1 for lime
   needs 0.520, so the bar clears both floors at any viewport height the offset
   can produce, with the veil at roughly half again what it needs at its very
   worst. The CTA's own text is --an-on-lime on lime at 13.88:1, which is a
   property of the button and independent of the backdrop. */
.an-js body.home .an-header:not(.is-pinned) {
	background-color: transparent;
	box-shadow: none;
}

/* ONE lime call to action on screen at a time. At rest the hero is already
   asking — a single solid lime button under the headline — and the bar carried
   a second solid lime button in the same viewport, four inches away, saying
   something different. Two primary actions competing is one primary action
   less. So the bar's CTA arrives with the bar's ink ground: it is the header's
   CTA, and at rest the bar is not the header yet.

   Hidden with visibility rather than opacity alone, so it leaves the tab order
   while it is invisible instead of being a focus stop nobody can see. Scoped to
   .an-js: with the script blocked .is-pinned never arrives, and a rule keyed on
   its absence would hide the CTA permanently — so no-JS keeps it visible at
   every scroll position, which is the safe failure. */
.an-js body.home .an-header__cta {
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.an-js body.home .an-header:not(.is-pinned) .an-header__cta {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}

.an-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--an-header-h);
}

.an-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	text-decoration: none;
	color: var(--an-white);
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 120, "wght" 800;
	text-transform: uppercase;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	line-height: 1;
}

.an-brand:hover,
.an-brand:focus {
	color: var(--an-white);
}

.an-brand__accent {
	color: var(--an-lime);
}

/* HEIGHT, not max-height. The wordmark the owner uploaded is an SVG that
   declares a viewBox and nothing else — no width, no height attribute — and
   WordPress stored it with width="0" height="0" because that is what its
   metadata probe found. An SVG with a ratio but no intrinsic size resolves to
   nothing at all under `max-height` + `width: auto`: both axes are a maximum,
   neither is a size, so the box computed to 0x0 and the brand was missing from
   every page on the site. One fixed axis is all a ratio needs. Scoped to the
   header instance; the footer mark states its own size below. */
.an-brand img,
.an-brand .custom-logo {
	height: 40px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.an-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

/* --- Primary menu. One DOM tree only: a horizontal bar on desktop, the same
   list promoted to a full-screen overlay below 1024px. No duplicated markup. */

.an-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.an-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.an-menu li {
	margin: 0;
	position: relative;
}

.an-menu a {
	display: block;
	color: var(--an-white);
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 6px 0;
}

.an-menu a:hover,
.an-menu a:focus {
	color: var(--an-lime);
}

.an-menu .current-menu-item > a,
.an-menu .current_page_item > a {
	color: var(--an-lime);
}

/* Sub-menus: lime carets, never the off-brand #36FF00. */
.an-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.an-menu li:hover > .sub-menu,
.an-menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.an-menu .sub-menu a {
	padding: 8px 18px;
	font-weight: 500;
}

.an-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 7px;
	border: 4px solid transparent;
	border-top-color: var(--an-lime);
	transform: translateY(2px);
}

.an-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	background-color: transparent;
	color: var(--an-white);
	cursor: pointer;
}

.an-nav-toggle:hover,
.an-nav-toggle:focus {
	border-color: var(--an-lime);
	color: var(--an-lime);
}

.an-nav-toggle__bars,
.an-nav-toggle__bars::before,
.an-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.an-nav-toggle__bars::before,
.an-nav-toggle__bars::after {
	content: "";
	position: relative;
}

.an-nav-toggle__bars::before {
	top: -6px;
}

.an-nav-toggle__bars::after {
	top: 4px;
}

.an-nav-toggle[aria-expanded="true"] .an-nav-toggle__bars {
	background-color: transparent;
}

.an-nav-toggle[aria-expanded="true"] .an-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.an-nav-toggle[aria-expanded="true"] .an-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1023px) {
	/* --- WITHOUT JAVASCRIPT THIS IS NOT AN OVERLAY, IT IS A LIST.

	   The overlay is a script's behaviour: a button toggles .is-open, and until
	   it does, the menu is `visibility: hidden` across the whole screen. Stated
	   unconditionally, that shipped a phone with a hamburger that did nothing and
	   a site with no navigation at all — every link on the site behind one button
	   that needed a script to work. So the hidden state is scoped to .an-js, the
	   class assets/js/reveal.js writes on <html> before first paint (§ the reveal
	   styles use the identical guarantee).

	   The unscoped state below is therefore the NO-SCRIPT state, and it has to be
	   a working menu on its own: the same one list, wrapped onto its own row
	   under the brand, on the header's ink ground, ruled between items by the
	   .an-menu rules further down — which apply in both states and are what makes
	   it legible either way. A hamburger that cannot open anything is not
	   rendered at all: a control that can't work shouldn't be on screen. */
	.an-header__bar {
		flex-wrap: wrap;
	}

	.an-nav {
		flex: 1 0 100%;
		display: block;
		padding-bottom: var(--an-s1);
	}

	.an-nav-toggle {
		display: none;
	}

	.an-header__cta {
		display: none;
	}

	/* The toggle is also the close control, and it was painting UNDER the thing
	   it closes. .an-header is a stacking context (sticky + z-index), .an-nav is
	   a positioned descendant at z-index 95, and the toggle was static — so the
	   overlay covered it and the ✕ was invisible and unclickable at every phone
	   width. Positioned, one step above the overlay it sits on top of. */
	.an-js .an-nav-toggle {
		display: inline-flex;
		position: relative;
		z-index: 96;
	}

	/* THE ✕ IS PINNED FOR AS LONG AS THE OVERLAY IS.

	   The toggle rides in the header, and on the front page the header is a bar
	   in the document flow that rests one viewport down and pins only once it
	   reaches the top (§7). Open the menu at scrollY 300 and the overlay covered
	   the screen while its close control stayed wherever the bar had got to —
	   floating in the middle of the menu, over a row of links, reading as part of
	   the list. The overlay is fixed, so the control that closes it is fixed too,
	   and it takes the place it would occupy if the bar were pinned: centred in
	   one --an-header-h row (the toggle is 44px tall, hence the halved
	   remainder), one gutter in from the right, which is exactly where the
	   container's content edge is at every width below 1024. */
	body.an-nav-open .an-nav-toggle {
		position: fixed;
		top: calc((var(--an-header-h) - 44px) / 2);
		right: var(--an-gutter);
	}

	/* The overlay used to arrive on --an-canvas, which is the page's own ground:
	   1.09:1 against the sections behind it, so a full-screen menu opened over a
	   dark page and nothing appeared to have happened. Ink is the raised-surface
	   tone this theme already uses for panels — but ink against canvas is 1.09:1
	   too, so the ground is not what announces this. The rule on the list is:
	   the menu arrives as a closed block, ruled top and bottom, where a moment
	   ago there was a page. */
	.an-js .an-nav {
		position: fixed;
		inset: 0;
		z-index: 95;
		display: block;
		padding: calc(var(--an-header-h) + var(--an-s2)) var(--an-gutter) var(--an-s3);
		background-color: var(--an-ink);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		/* visibility must step, not interpolate: an incoming visibility transition computes as
		   `hidden` for its first instant, so navigation.js's focus() into the opening overlay
		   silently no-ops. Outbound it waits for the fade; inbound it flips immediately. */
		transition: opacity 0.22s ease, visibility 0s 0.22s;
	}

	.an-js .an-nav.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.22s ease, visibility 0s;
	}

	/* Ruled top as well as between, so the list closes rather than trailing off
	   — and in --an-bar-rule rather than --an-line, which is 1.46:1 on this ink
	   and was a rule you had to know was there. Stated on the list, not at a
	   fixed offset from the viewport top: on the front page the bar rests at the
	   FOOT of the screen, so a rule drawn at --an-header-h from the top would
	   have marked the edge of a header that is not there yet. */
	.an-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--an-bar-rule);
	}

	.an-menu > li {
		border-bottom: 1px solid var(--an-bar-rule);
	}

	.an-menu a {
		padding: 18px 2px;
		font-family: var(--an-font-display);
		font-variation-settings: "wdth" 112, "wght" 700;
		text-transform: uppercase;
		font-size: 1.25rem;
	}

	.an-menu .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		border: 0;
		background: none;
		padding: 0 0 12px 14px;
		min-width: 0;
	}

	.an-menu .sub-menu a {
		font-size: 0.95rem;
		padding: 8px 0;
		text-transform: none;
	}

	.an-nav__cta {
		display: block;
		margin-top: var(--an-s2);
	}

	.an-nav__cta .an-btn {
		width: 100%;
	}
}

@media (min-width: 1024px) {
	.an-nav__cta {
		display: none;
	}
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.an-footer {
	background-color: var(--an-ink);
	border-top: 1px solid var(--an-line);
	padding-block: clamp(4rem, 8vw, 8rem) var(--an-s2);
}

/* Oversized mark, sparse columns, plenty of air beneath it. The wordmark is a
   monochrome silver-to-white gradient, so it is given room and a dark ground
   rather than being shrunk into a column. */
.an-footer__mark {
	padding-bottom: clamp(2.5rem, 6vw, 5.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--an-line);
}

.an-footer__mark a {
	display: inline-block;
	text-decoration: none;
}

/* Same fix as the header mark above, for the same reason: an SVG with a ratio
   and no intrinsic size renders 0x0 when both axes are maxima. This rule is
   what makes the footer logo possible at all — it is the bug that sent the
   footer to a text wordmark in the first place.

   56-72px, not the 64-132px this once carried and not the 8.5rem the wordmark
   was set at. The mark is 3.83:1 (1169.3x305 in the SVG's own viewBox), so 72px
   of height paints 276px of width — a mark at the foot of the page, which is
   what a footer logo is, rather than a second poster competing with the one the
   page already closed on. The 56px floor holds it legible at 320px wide, where
   6vw would otherwise take it to 19px. */
.an-footer__mark img,
.an-footer__mark .custom-logo {
	height: clamp(56px, 6vw, 72px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* the_custom_logo() wraps the image in its own anchor, which is not the
   .an-footer__wordmark the rule above addresses. */
.an-footer__mark .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.an-footer a.an-footer__wordmark {
	display: block;
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 125, "wght" 900;
	font-size: clamp(2.4rem, 11vw, 8.5rem);
	line-height: 0.86;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--an-white);
}

.an-footer a.an-footer__wordmark:hover,
.an-footer a.an-footer__wordmark:focus {
	color: var(--an-lime);
}

.an-footer__grid {
	/* Flex, not a fixed 4-track grid: columns exist only when populated, so an
	   unregistered widget area cannot leave half the footer as dead air. */
	display: flex;
	flex-wrap: wrap;
	gap: clamp(var(--an-s2), 5vw, 5rem);
}

.an-footer__about {
	flex: 1 1 320px;
	max-width: 420px;
}

.an-footer__col,
.an-footer__menu {
	flex: 1 1 180px;
}

/* THE FOOTER INDEX IN COLUMNS.
   18 links in one column ran 660px — the height of a phone screen and a half,
   below the fold on every device, which is a list nobody reaches the end of.
   Three titled columns put the whole index on one screen.

   The nav takes twice the about column's share so the three tracks have room
   to be read: at 1170px that is a 420px about column and a ~670px index, so
   each track is ~200px and no link in the menu wraps. */
.an-footer__menu--grouped {
	flex: 2 1 420px;
}

.an-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--an-s2) var(--an-s1);
}

/* Eyebrow-styled, and stated rather than left to the .an-eyebrow utility: the
   `.an-footer h2` rule below is one class more specific than `.an-eyebrow`, so
   the utility alone would render these headings white at 0.8rem. Same values as
   .an-eyebrow — lime on ink measures 14.99:1. */
.an-footer .an-footer__group-title {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 105, "wght" 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.72rem;
	color: var(--an-lime);
	margin: 0 0 4px;
}

.an-footer .an-footer__group-title a {
	color: inherit;
	font-size: inherit;
}

/* One column below ~640px. Three tracks in a 320px viewport are 90px wide,
   which breaks "Software License Agreement" over four lines. */
@media (max-width: 639px) {
	.an-footer__cols {
		grid-template-columns: 1fr;
		gap: var(--an-s1);
	}
}

.an-footer__list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.an-footer__list li + li {
	margin-top: 10px;
}

.an-footer__list a {
	color: var(--an-mute);
	text-decoration: none;
	font-size: 0.9rem;
}

.an-footer__list a:hover,
.an-footer__list a:focus {
	color: var(--an-lime);
}

.an-footer__about p {
	color: var(--an-mute);
	font-size: 0.9rem;
	margin-top: 14px;
}

.an-footer h2,
.an-footer h3,
.an-footer .an-footer__heading {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	margin-bottom: 16px;
	color: var(--an-white);
}

.an-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.an-footer li {
	margin-bottom: 10px;
}

.an-footer a {
	color: var(--an-mute);
	text-decoration: none;
	font-size: 0.9rem;
}

.an-footer a:hover,
.an-footer a:focus {
	color: var(--an-lime);
}

.an-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
	list-style: none;
	padding: 0;
}

.an-social li {
	margin: 0;
}

.an-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--an-line);
	border-radius: 50%;
	color: var(--an-mute);
}

.an-social a:hover,
.an-social a:focus {
	border-color: var(--an-lime);
	color: var(--an-lime);
}

.an-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.an-footer__contact {
	margin-top: 18px;
	font-size: 0.9rem;
	color: var(--an-mute);
}

.an-footer__contact a {
	display: inline;
}

.an-footer__legal {
	border-top: 1px solid var(--an-line);
	margin-top: var(--an-s2);
	padding-top: var(--an-s1);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.82rem;
	color: var(--an-mute);
}

.an-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.an-footer__legal li {
	margin: 0;
}

.an-footer__badges {
	margin-top: var(--an-s1);
}

@media (max-width: 1023px) {
	.an-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--an-s2) var(--an-s1);
	}

	.an-footer__about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 479px) {
	.an-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   9. FORMS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 12px 14px;
	background-color: var(--an-control);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	color: var(--an-white);
	font-family: inherit;
	font-size: 1rem;
}

input::placeholder,
textarea::placeholder {
	color: var(--an-mute);
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--an-lime);
	outline: 3px solid var(--an-lime);
	outline-offset: 1px;
}

label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--an-white);
}

button,
input[type="submit"],
.wp-block-button__link,
.wp-element-button {
	font-family: var(--an-font-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

input[type="submit"],
.wp-block-button__link,
.wp-element-button {
	padding: 14px 30px;
	background-color: var(--an-lime);
	color: var(--an-on-lime);
	border: 2px solid var(--an-lime);
	border-radius: var(--an-radius);
	font-size: 1.05rem;
	text-decoration: none;
}

input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--an-btn-base);
	color: var(--an-lime);
}

.an-search-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	max-width: 520px;
}

.an-search-form input[type="search"] {
	flex: 1 1 auto;
}

.an-search-form .an-btn {
	flex: none;
}

/* ==========================================================================
   10. WORDPRESS CORE CLASSES
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0 var(--an-s1) var(--an-s1) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--an-s1) var(--an-s1);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: 1400px;
	margin-inline: auto;
}

.alignfull {
	max-width: none;
}

.wp-caption-text,
.wp-block-image figcaption {
	color: var(--an-mute);
	font-size: 0.85rem;
	text-align: center;
	margin-top: 8px;
}

.sticky .an-card__title::after {
	content: " \2605";
	color: var(--an-lime);
}

.an-prose > * {
	margin-bottom: var(--an-s1);
}

.an-prose h2,
.an-prose h3 {
	margin-top: var(--an-s2);
}

/* A link in running prose is underlined so it is distinguishable without
   relying on the lime alone. A Button block is not a link in running prose: it
   already has a lime fill and a border, and this rule out-specified the
   `text-decoration: none` in §9 and drew a line under the label of every
   button an editor placed in page content. */
.an-prose a:not(.wp-element-button) {
	text-decoration: underline;
}

/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		/* Durations alone leave a delay intact, and a delay is still a wait for
		   something to happen — the staggered reveals and the nav CTA's
		   visibility step both carry one. Everything arrives at once. */
		transition-delay: 0s !important;
		animation-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}