/* ============================================================
   Aware Software — site-wide stylesheet
   Anthropic-inspired editorial design:
   - single warm cream ground (no alternating bands)
   - distinctive serif/sans pairing: Fraunces + DM Sans
   - thin section dividers, generous whitespace
   - subtle warm coral accent, used sparingly
   ============================================================ */

:root {
	/* Light cream palette with two ground tones, plus a dark scope
	   for the footer only.  Sections alternate between --bg
	   (lighter cream) and --bg-tint (slightly deeper cream).
	   The footer overrides these variables back to the dark scope
	   so descendants render light-on-black. */
	--bg: #f0eee8;
	--bg-tint: #e2dbcf;
	--bg-deep: #ddd2bf;
	--text: #141414;
	--text-mid: #5d5247;
	--text-soft: #8a7f74;
	--rule: rgba(20, 20, 19, 0.10);
	--rule-strong: rgba(20, 20, 19, 0.18);
	--accent: #8E1F3F;
	--accent-soft: rgba(142, 31, 63, 0.12);

	--serif: "Fraunces", "Source Serif Pro", "Iowan Old Style", "Hoefler Text", "Georgia", serif;
	--sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--mono: "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

	--max-w: 1200px;
	--side: 48px;
}

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

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.55;
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
img { display: block; max-width: 100%; }

.container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--side);
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ============================================================
   Typography primitives
   ============================================================ */

.display-xl {
	font-family: var(--serif);
	font-weight: 380;
	font-size: clamp(48px, 8.5vw, 116px);
	line-height: 0.96;
	letter-spacing: -0.025em;
	color: var(--text);
	margin: 0;
	font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display-l {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(40px, 5.5vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.022em;
	color: var(--text);
	margin: 0;
	font-variation-settings: "opsz" 120, "SOFT" 30;
}
.display-m {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.018em;
	color: var(--text);
	margin: 0;
	font-variation-settings: "opsz" 96, "SOFT" 50;
}
.display-s {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
	font-variation-settings: "opsz" 72, "SOFT" 50;
}

.display-xl .accent,
.display-l .accent,
.display-m .accent {
	font-style: italic;
	color: var(--accent);
	font-variation-settings: "opsz" 144, "SOFT" 100;
}

.eyebrow {
	display: inline-block;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 22px;
}

.lead {
	font-size: 21px;
	line-height: 1.5;
	color: var(--text-mid);
	max-width: 720px;
	margin: 0;
	font-weight: 400;
}

p { margin: 0 0 1em; }
p.body {
	font-size: 17px;
	line-height: 1.65;
	color: var(--text-mid);
	max-width: 680px;
}
p.body strong { color: var(--text); font-weight: 600; }
p.body + p.body { margin-top: 18px; }


/* ============================================================
   Top navigation — sticky with frosted-glass on scroll
   ============================================================ */

.site-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(240, 238, 232, 0.72);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	padding: 4px 0;
}
.site-nav .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}
.site-nav .brand {
	display: flex;
	align-items: center;
	gap: 14px;
}
.site-nav .brand img {
	height: 34px;
	width: auto;
	display: block;
}
.site-nav .brand .name {
	font-family: var(--serif);
	font-size: 21px;
	letter-spacing: -0.02em;
	color: var(--text);
	font-weight: 400;
}
.site-nav .links {
	display: flex;
	align-items: center;
	gap: 32px;
	font-size: 15px;
}
.site-nav .links a { color: var(--text); position: relative; }
.site-nav .links a:hover { color: var(--accent); }
.site-nav .links .cta {
	border: 1px solid var(--text);
	border-radius: 999px;
	padding: 9px 18px;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.site-nav .links .cta:hover {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
}

@media (max-width: 720px) {
	.site-nav .container { height: 64px; }
	.site-nav .links { gap: 20px; font-size: 14px; }
	.site-nav .links .cta { padding: 7px 14px; }
	/* Hide AWARE SOFTWARE wordmark below 720px — the triangle mark
	   alone serves as the brand at tablet+phone widths. */
	.site-nav .brand .wordmark { display: none; }
}

@media (max-width: 480px) {
	/* Phone widths: brand stacks on top, nav links wrap to a second
	   row beneath.  Pure-CSS collapse — no hamburger, no JS. */
	.site-nav .container {
		flex-direction: column;
		align-items: flex-start;
		height: auto;
		gap: 10px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.site-nav .links {
		width: 100%;
		font-size: 13px;
		gap: 14px;
	}
	.site-nav .brand .mark { height: 48px; }
}


/* ============================================================
   Section base — single bg with thin dividers between
   ============================================================ */

.section { padding: 120px 0; position: relative; }
.section.compact { padding: 80px 0; }
.section.spacious { padding: 160px 0 140px; }

@media (max-width: 900px) {
	.section { padding: 80px 0; }
	.section.compact { padding: 56px 0; }
	.section.spacious { padding: 96px 0 80px; }
}


/* ============================================================
   Hero — first impression, large headline + lead + stats
   ============================================================ */

.hero {
	padding: 44px 0 96px;
	min-height: 76vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero .container {
	width: 100%;
}
.hero .brand-mark {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin: 0 0 56px;
}
.hero h1 {
	margin: 0;
	max-width: 1100px;
}
.hero p.lead {
	margin: 32px 0 0;
	max-width: 640px;
}
.hero .hero-actions {
	display: flex;
	gap: 20px;
	margin-top: 44px;
	align-items: center;
	flex-wrap: wrap;
}

.stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	border-top: none;
	margin-top: 48px;
	padding-top: 18px;
}
.stat-row.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat-value {
	font-family: var(--serif);
	font-size: clamp(26px, 2.4vw, 34px);
	letter-spacing: -0.02em;
	line-height: 1.0;
	color: var(--text);
	font-weight: 400;
	font-variation-settings: "opsz" 72, "SOFT" 50;
}
.stat-label {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--text-soft);
	line-height: 1.45;
}

@media (max-width: 900px) {
	.hero { padding: 28px 0 64px; min-height: 60vh; }
	.hero .brand-mark { margin-bottom: 40px; }
	.stat-row { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; }
	/* .stat-row.cols-5 has equal specificity but appears later, so it wins
	   over the base .stat-row rule above.  Without this, the 5-col grid
	   would stay 5-wide at narrow widths (AR7 hero bug). */
	.stat-row.cols-5 { grid-template-columns: 1fr 1fr; gap: 28px; }
}


/* ============================================================
   Announcement strip — slim row, after hero
   ============================================================ */

.announce {
	padding: 28px 0;
	background: var(--bg-tint);
}
.announce-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.announce-text {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}
.announce-text .label {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent);
}
.announce-text .h {
	font-family: var(--serif);
	font-size: 20px;
	letter-spacing: -0.018em;
	color: var(--text);
}
.announce-text .d {
	color: var(--text-mid);
	font-size: 15px;
}

@media (max-width: 720px) {
	.announce-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}


/* ============================================================
   Section layout — "intro + body" two-column
   ============================================================ */

.col-2 {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 80px;
	align-items: start;
}
.col-2 .head { position: sticky; top: 96px; padding-top: 4px; }
.col-2 .head .display-l,
.col-2 .head .display-m { margin-bottom: 24px; }
.col-2 .body p:first-of-type { margin-top: 0; }

/* Section-intro paragraphs (the right-column body in every .col-2
   section) read at lead-size — 21px instead of the default 17px
   body.  Matches the hero .lead weight so each section opens with
   the same display presence. */
.col-2 .body p.body { font-size: 21px; }

@media (max-width: 900px) {
	.col-2 { grid-template-columns: 1fr; gap: 36px; }
	.col-2 .head { position: static; }
}


/* ============================================================
   Card grids — minimal, editorial entries
   ============================================================ */

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px 48px;
	margin-top: 80px;
}
.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 64px 56px;
	margin-top: 80px;
}

.entry { display: flex; flex-direction: column; gap: 14px; }
.entry .entry-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin: 0;
}
.entry .entry-title {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.18;
	color: var(--text);
	margin: 0;
	font-variation-settings: "opsz" 72, "SOFT" 50;
}
.entry .entry-body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-mid);
	margin: 0;
}
.entry .entry-cta {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
	border-bottom: 1px solid var(--text);
	padding-bottom: 3px;
	align-self: flex-start;
	margin-top: 4px;
	transition: color 0.2s, border-color 0.2s;
}
.entry .entry-cta:hover { color: var(--accent); border-color: var(--accent); }

.grid-3 .entry.span-2 { grid-column: span 2; }
.grid-3 .entry.span-3 { grid-column: 1 / -1; }

@media (max-width: 900px) {
	.grid-3, .grid-2 { grid-template-columns: 1fr; gap: 44px; margin-top: 48px; }
	.grid-3 .entry.span-2, .grid-3 .entry.span-3 { grid-column: auto; }
}


/* ============================================================
   CTAs
   ============================================================ */

.button-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--text);
	border-bottom: 1px solid var(--text);
	padding-bottom: 4px;
	transition: gap 0.2s, color 0.2s, border-color 0.2s;
}
.button-link::after {
	content: "→";
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1;
	transition: transform 0.2s;
}
.button-link:hover {
	color: var(--accent);
	border-color: var(--accent);
	gap: 16px;
}
.button-link:hover::after { transform: translateX(2px); }

.button-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--text);
	border-radius: 999px;
	padding: 14px 28px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--text);
	transition: background 0.2s, color 0.2s, transform 0.15s;
}
.button-pill:hover {
	background: var(--text);
	color: var(--bg);
}
.button-pill:active { transform: translateY(1px); }


/* ============================================================
   Closing CTA section
   ============================================================ */

.closing {
	text-align: left;
	padding: 160px 0;
}
.closing .closing-eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 32px;
}
.closing .closing-headline {
	font-family: var(--serif);
	font-size: clamp(40px, 6vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.022em;
	color: var(--text);
	max-width: 1000px;
	margin: 0 0 28px;
	font-weight: 400;
	font-variation-settings: "opsz" 120, "SOFT" 30;
}
.closing .closing-lead {
	font-size: 19px;
	line-height: 1.55;
	color: var(--text-mid);
	max-width: 720px;
	margin: 0 0 48px;
}

@media (max-width: 900px) {
	.closing { padding: 96px 0; }
}


/* ============================================================
   Subpage (legal / privacy) — single readable column
   ============================================================ */

.subpage {
	max-width: 720px;
	margin: 0 auto;
	padding: 96px 0 128px;
}
.subpage .eyebrow { margin-bottom: 16px; }
.subpage h1 {
	font-family: var(--serif);
	font-size: clamp(40px, 6vw, 64px);
	letter-spacing: -0.022em;
	line-height: 1.04;
	margin: 0 0 56px;
	font-weight: 400;
	color: var(--text);
	font-variation-settings: "opsz" 120, "SOFT" 30;
}
.subpage p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-mid);
	margin: 0 0 22px;
}
.subpage p strong {
	color: var(--text);
	font-weight: 600;
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.01em;
	display: block;
	margin-bottom: 4px;
}
.subpage a { color: var(--text); border-bottom: 1px solid var(--text); padding-bottom: 1px; }
.subpage a:hover { color: var(--accent); border-color: var(--accent); }


/* ============================================================
   Footer
   ============================================================ */

.site-footer {
	padding: 80px 0 32px;
	background: #141414;
	color: #f0eee8;
	/* Scope dark-theme variables to the footer only.  Descendants
	   that consume --text / --text-mid / --text-soft / --rule /
	   --accent pick them up via the CSS custom-property cascade. */
	--text: #f0eee8;
	--text-mid: #b3ad9f;
	--text-soft: #8a847a;
	--rule: rgba(240, 238, 232, 0.10);
	--rule-strong: rgba(240, 238, 232, 0.18);
	--accent: #d76b5d;
	--accent-soft: rgba(215, 107, 93, 0.15);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
	gap: 56px;
	margin-bottom: 80px;
}
.footer-grid h4 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin: 0 0 20px;
	font-weight: 400;
}
.footer-grid p, .footer-grid ul {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-mid);
	margin: 0 0 12px;
}
.footer-grid ul { padding: 0; list-style: none; }
.footer-grid ul li { margin-bottom: 4px; }
.footer-grid a { color: var(--text-mid); }
.footer-grid a:hover { color: var(--accent); }

.footer-grid .brand-cell {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.footer-grid .brand-cell .logo-line {
	display: flex;
	align-items: center;
	gap: 12px;
}
.footer-grid .brand-cell .logo-line img { height: 32px; width: auto; }
.footer-grid .brand-cell .logo-line .name {
	font-family: var(--serif);
	font-size: 18px;
	letter-spacing: -0.02em;
	color: var(--text);
}
.footer-grid .brand-cell .tagline {
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	color: var(--text);
	max-width: 280px;
	line-height: 1.35;
	font-variation-settings: "opsz" 72, "SOFT" 100;
}

.footer-base {
	border-top: 1px solid var(--rule);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--text-soft);
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
		margin-bottom: 56px;
	}
	.footer-grid .brand-cell { grid-column: 1 / -1; }
	.footer-base { flex-direction: column; gap: 12px; align-items: flex-start; }
}


/* ============================================================
   Inline mono accents (e.g. for engine commands, file types)
   ============================================================ */

code, .mono {
	font-family: var(--mono);
	font-size: 0.92em;
	background: rgba(27, 22, 18, 0.06);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--text);
}


/* ============================================================
   Atmospheric grain — subtle film-grain overlay on the whole
   page. Fixed-positioned pseudo-element, very low opacity,
   multiply blend, pointer-events:none so it doesn't interfere.
   The grain is generated by an SVG fractal-noise filter, inlined
   as a data URI to avoid a network request.
   ============================================================ */

body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1000;
	opacity: 0.08;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}


/* ============================================================
   Per-section subtle tonal variation. Within the single cream
   ground, every other section gets a barely-perceptible deeper
   tint to add atmosphere without breaking the editorial single-
   background rule. Differences are 1-2 luminance steps; on
   most displays this reads as depth, not as alternating bands.
   ============================================================ */

.section:nth-of-type(even) { background: var(--bg-tint); }


/* Site-nav .is-scrolled state — currently a no-op (the JS toggle
   still fires, but the nav background already matches --bg whether
   scrolled or not).  Kept here as a hook in case scroll-state
   styling returns. */


/* ============================================================
   Scroll-triggered reveal — subtle fade-up on appear.
   Section content uses .reveal; the JS toggles .is-visible.
   Gracefully degrades when JS is off (immediate visibility).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}
	.reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Stagger pattern — apply .reveal-stagger to a container; its
	   direct children get the same fade-up with successive delays.
	   The container itself receives .is-visible from the observer. */
	.reveal-stagger > * {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}
	.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
	.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
	.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
	.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
	.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
	.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.24s; }
	.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.30s; }
	.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.36s; }
	.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.42s; }
}


/* ============================================================
   Page-load orchestration — the hero elements arrive in
   sequence on initial render. body.is-loaded is added by JS
   on DOMContentLoaded.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	body:not(.is-loaded) .hero .brand-mark,
	body:not(.is-loaded) .hero h1,
	body:not(.is-loaded) .hero p.lead,
	body:not(.is-loaded) .hero .hero-actions,
	body:not(.is-loaded) .hero .stat-row {
		opacity: 0;
		transform: translateY(20px);
	}
	body.is-loaded .hero .brand-mark,
	body.is-loaded .hero h1,
	body.is-loaded .hero p.lead,
	body.is-loaded .hero .hero-actions,
	body.is-loaded .hero .stat-row {
		opacity: 1;
		transform: none;
		transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	}
	body.is-loaded .hero .brand-mark { transition-delay: 0.05s; }
	body.is-loaded .hero h1 { transition-delay: 0.15s; }
	body.is-loaded .hero p.lead { transition-delay: 0.30s; }
	body.is-loaded .hero .hero-actions { transition-delay: 0.42s; }
	body.is-loaded .hero .stat-row { transition-delay: 0.54s; }
}


/* ============================================================
   Logo treatment — the SVG mark inherits currentColor so the
   nav and footer pick up the appropriate text color. The .name
   wordmark is set in Fraunces for visual coherence with
   display type.
   ============================================================ */

.site-nav .brand .mark,
.footer-grid .brand-cell .logo-line .mark {
	width: auto;
	display: block;
	color: var(--text);
}
.site-nav .brand .mark { height: 64px; }
.footer-grid .brand-cell .logo-line .mark { height: 36px; }

/* Wordmark — AWARE SOFTWARE letterforms sit beside the triangle mark.
   Aspect ratio is ~8.2:1, so a small height yields a generous width. */
.site-nav .brand .wordmark,
.footer-grid .brand-cell .logo-line .wordmark {
	width: auto;
	display: block;
}
.site-nav .brand .wordmark { height: 22px; }
.footer-grid .brand-cell .logo-line .wordmark { height: 15px; }

/* Footer-only: invert the mark + wordmark so the black SVG paths
   render light on the dark footer ground.  The header sits on
   cream and keeps the default black marks. */
.footer-grid .brand-cell .logo-line .mark,
.footer-grid .brand-cell .logo-line .wordmark {
	filter: invert(1);
}


/* ============================================================
   Refined display headline accent — the italic Fraunces accent
   gets a tighter optical-size + softer "SOFT" axis for warmth.
   ============================================================ */

.display-xl .accent,
.display-l .accent,
.display-m .accent,
.closing-headline .accent {
	font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 360;
}