/* Editorial serif for the cream-paper voice — Source Serif 4, SIL OFL 1.1
   (assets/fonts/OFL-SourceSerif4.txt). A system-default serif at pull-quote
   size reads as stock CMS, which is why this is vendored. */
@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/sourceserif4-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/sourceserif4-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/sourceserif4-italic.woff2') format('woff2');
}

/* ==========================================================================
   At The Well — site layer.
   Sits on the kit2 "atw" token register (tokens.css): every color, space,
   and radius resolves through register custom properties; this file adds
   only what kit2 has no vocabulary for yet — site blocks and the laminate
   texture roles.
   ========================================================================== */

/* ---- Laminate texture roles ---------------------------------------------
   Tiles baked through the laminate v6 pipeline (receipts in
   assets/textures/laminate/). Seamless toroidal 1024² WebP; role custom
   properties mirror the kit texture contract so a runtime .fprb upgrade
   later only swaps how the URL is produced. */
:root {
	/* The receipted laminate tiles (assets/textures/laminate/ holds their bake
	   verdicts). The unreceipted paper-*.webp tiles that briefly pointed here
	   were low-frequency drift — grain read blown-up at every viewport. */
	--canvas-texture: url('textures/topo-dark.webp');
	--paper-texture: url('textures/topo-cream.webp');

	/* Grayscale multiply maps for the painted reds. They are not laminate roles
	   and carry no bake verdict in assets/textures/laminate/; each is a
	   luminance map that only ever multiplies its surface DOWN, so the hue is
	   the token's and the weathering is the map's. Three maps, because the bar,
	   a band and a button are three different amounts of paint to look at.
	   Every one of them is a real texture — the bar's lifted from the reference
	   mockup, the other two generated as grunge sources and only made seamless
	   and level-normalized here. Nothing on this page is a synthesized field
	   any more.

	   PROVENANCE — the bar map is the reference mockup's own paint, lifted
	   pixel-for-pixel: the announcement strip was cropped out of the mockup,
	   its text and icons masked and inpainted (low-frequency fill plus real
	   high-frequency residue displaced from clean paint, so the filled areas
	   are not smoother than their surroundings — verify against
	   grunge-bar-inpaint-zoom3x.png), divided by its own bright end (p99 of R)
	   and upscaled to 1440. The reference's chroma carries no texture — G and B
	   vary by 1.8 levels against R's 11.8 and correlate 0.68/0.74 with it, i.e.
	   one multiplicative field — so a map taken from R alone is the whole
	   truth. It is a single stretched image, not a tile: no repeat, therefore
	   no seam to align, and it holds the reference's left-bright to right-dark
	   wash (0.961 / 0.840 / 0.773 by thirds) as measured paint rather than as a
	   gradient fitted by hand. */
	--atw-red-grunge-bar: url('textures/grunge-bar.webp');

	/* The 1024² band tile is a generated broad-paint grunge source, made
	   seamless and levelled in-house and otherwise untouched. Seamless by
	   Moisan's periodic+smooth decomposition, not by cross-fading: the smooth
	   component carries the whole cross-boundary discontinuity, so subtracting
	   it leaves a field that is exactly toroidal with no blended band down the
	   join (wrap-edge step 0.003 against an interior step of 0.008 — the wrap
	   is quieter than the texture itself). The source's outer 3px carry a dark
	   border ring that would have drawn a grid line at every repeat, so it is
	   cropped before anything else. Levelling is one monotone linear scale
	   about the mean in multiply space; the source's character is not reshaped,
	   only its contrast set. Result: mean 0.95, p5 0.89, floor 0.80, 1440×300
	   band at 2.9 R of 50px mottle, no dark region wider than 113 display px,
	   and 1.7 R of the source's own stipple carried through as grain. The
	   mottle is short of the 3.5 R this surface used to carry because this
	   source cannot give both: at 3.5 R its dark regions run 156 display px,
	   which is the smoke three reviews rejected. */
	--atw-red-grunge: url('textures/grunge-red.webp');

	/* The 512² speckle, for plates too small to hold weather. A button is
	   170×48, so a band tile only ever hands it one corner of one cloud — a
	   smooth diagonal ramp (9.7 R across the plate) with grain under the eye's
	   floor (1.0 R), which reads as a gradient swatch, not paint. This is a
	   generated fine-grit source, seamless-converted and levelled exactly like
	   the band tile: 3.4 R of grain against 0.6 R of variation across the whole
	   plate (reference button 3.6 R), mean 0.96, floor 0.79. Same paint,
	   sampled at the size the plate is actually seen at. */
	--atw-red-grunge-fine: url('textures/grunge-red-fine.webp');

	--atw-red: #e22f2a;

	/* Painted-plate reds, three roles. The maps only ever multiply DOWN, so
	   each is declared at the BRIGHT end of the range it should read at, and
	   each role's declaration differs because the map over it differs — the bar
	   carries the reference's wash, the others do not.

	   Only small plates are the brighter red: in the reference every large red
	   surface is the deep bar red and just the BUTTONS run rgb(152,13,11).
	   Measured on the rendered result — bar median rgb(112,9,8) with thirds
	   130/114/105, which is the reference strip's own 113 and 131/114/105 to
	   within half a unit, large surfaces rgb(115,10,9), buttons rgb(160,14,12).
	   White measures 12.1:1 on the bar, 11.8:1 on a band, 8.2:1 on a button.

	   The band was rgb(121,10,9) until four independent reviews each read the
	   step where a band meets the bar. They are separate declarations because
	   the bar wears the reference's washed map and the bands wear a flat tile,
	   not because they are separate colours: closing the rendered gap to 2 R
	   (from 10) is what makes them one paint, and the band token is re-levelled
	   whenever a new map changes the mean it multiplies by. Every large surface follows the
	   token, the torn sheet above the ticker included, so the joint stays
	   continuous by construction. */
	--atw-red-bar: #880b0a;   /* announcement bar — wears the extracted map */
	--atw-red-band: #780a09;  /* every large flat red surface */
	--atw-red-deep: #a60e0c;  /* buttons and small plates */

	/* Annotation red. Brand red is a display accent (≥24px, where 3:1 is the
	   bar) and measures only 4.30:1 on the canvas and 3.59:1 on paper, so every
	   sub-18px red — eyebrows, dates, chips, numbers, view-all links — shifts to
	   the ground it stands on: lightened on canvas (5.62:1 on #0f0e0b),
	   deepened on cream (5.28:1 on #ece5d8). The paper value is bound to the
	   surface below, so a plate declares its ground once and every annotation
	   inside it follows. */
	--atw-red-note: #f0554e;
	--atw-red-note-paper: #b3231f;

	--atw-canvas: #0f0e0b;
	--atw-paper: #ece5d8;
	--atw-paper-ink: #1c1914;
	--font-display: 'Anton', 'Arial Narrow', sans-serif;
	--font-body: 'Archivo', system-ui, sans-serif;
	--font-eyebrow: 'JetBrains Mono', ui-monospace, monospace;
	--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Facet hairline drawn along a notch diagonal. Inherited, so a surface
	   declares the light it is cut under once and every plate inside it —
	   card, button, frame — reads machined against that ground. */
	--atw-facet-canvas: rgba(242, 240, 235, 0.42);
	--atw-facet: var(--atw-facet-canvas);
	--atw-facet-ink: rgba(28, 25, 20, 0.30);
	--atw-facet-lit: rgba(255, 255, 255, 0.58);
}

.texture-canvas {
	background-color: var(--atw-canvas);
	background-image: var(--canvas-texture);
	background-size: 1024px 1024px;
	background-repeat: repeat;
}

.texture-paper {
	background-color: var(--atw-paper);
	background-image: var(--paper-texture);
	background-size: 1024px 1024px;
	background-repeat: repeat;
	color: var(--atw-paper-ink);
	--atw-facet: var(--atw-facet-ink);
	--atw-red-note: var(--atw-red-note-paper);
}

/* ---- Base rhythm -------------------------------------------------------- */
/* The sticky header would otherwise land on top of whatever an in-page link
   scrolled to. */
html { scroll-padding-top: 84px; }

body {
	font-family: var(--font-body);
	color: var(--text);
	margin: 0;
}

/* Scroll lock while the full-screen menu is open (set by assets/js/atw.js). */
html.atw-menu-open,
html.atw-menu-open body { overflow: hidden; }

:focus-visible {
	outline: 2px solid var(--atw-red);
	outline-offset: 2px;
}

/* A notch is a clip: an outward outline would be cut off with the corner, so
   focus rings on cut plates ride inside the shape instead. */
.atw-cut:focus-visible,
.atw-cut--btn:focus-visible,
.atw-story-card:focus-visible,
.atw-featured:focus-visible { outline-offset: -5px; }

.atw-skip {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 200;
	background-color: var(--atw-red-deep);
	color: #fff;
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 18px;
}

.atw-skip:focus { top: 8px; }

.atw-container {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: var(--space-4, 24px);
}

.atw-section {
	padding-block: var(--section-gap, 72px);
}

.atw-eyebrow {
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--atw-red-note);
}

/* The annotation dash: the hero's 32px red rule, generalized to every
   section eyebrow standing on the dark canvas. */
.atw-eyebrow--dash {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.atw-eyebrow--dash::before {
	content: '';
	flex: none;
	width: 32px;
	height: 3px;
	background: var(--atw-red);
}

/* Anton is a condensed display face and the headlines are long: a word that
   cannot fit its column breaks rather than pushing the band sideways. */
.atw-display,
.atw-band-title,
.atw-team-head h2,
.atw-stories-head h2,
.atw-page-hero h1,
.atw-story-body h3,
.atw-team-name,
.atw-featured-body h3 {
	overflow-wrap: break-word;
}

.atw-display {
	font-family: var(--font-display);
	text-transform: uppercase;
	line-height: 1.04;
	letter-spacing: 0.01em;
	margin: 0;
}

/* Letterpress grit on display faces: a tileable erosion mask bites ~4% of
   the ink at fiber scale, matching the reference's weathered fill. Applied to
   the heading element, so accent spans erode identically. Never a text-shadow
   — the reference type carries no glow. */
.atw-display,
.atw-band-title,
.atw-give h2,
.atw-subscribe h2,
.atw-lost h1,
.atw-featured-body h3,
.atw-quick-card .title,
.atw-menu-nav a {
	-webkit-mask-image: url('textures/type-grit.png');
	mask-image: url('textures/type-grit.png');
	-webkit-mask-size: 256px 256px;
	mask-size: 256px 256px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

/* ---- Announcement bar + header ------------------------------------------ */
/* tokens.css (frozen) reserves a stable scrollbar gutter on <html>; where
   scrollbars are overlay-style that reservation renders as a 10px dead strip
   down the right edge of every band. Every page here scrolls, so the gutter
   is surrendered — and the menu scroll-lock compensates inline (atw.js sets a
   lock-time padding-right) so classic-scrollbar desktops do not reflow when
   the overlay opens. */
html { scrollbar-gutter: auto; }

/* One centered owner-authored message line (the convergent single-message
   composition — the old left anchor balanced a Contact link that no longer
   exists). line-height is strip-wide by design: it sets both the 35px
   single-line bar and the 53px two-line bar. Tracking ladder:
   0.12em / 0.08em ≤560px / 0.05em ≤360px — three steps, recorded in
   DESIGN.md; do not flatten. */
.atw-announce {
	background-color: var(--atw-red-bar);
	color: #fff;
	font-family: var(--font-eyebrow);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding: 8px 0;

	/* The reference bar ends on cream, where painted red simply stops. Ours
	   ends on the dark nav (rgb(15,14,11)), which is close enough in value to
	   the washed right end of the bar that the two dissolve into each other.
	   The hairline is the terminus that ground no longer provides: a red-black
	   mix at R 68, which is 53 R off the nav and 26 R off the darkest pixel of
	   the bar's own bottom row — a line, not a shadow, against either. */
	border-block-end: 1px solid color-mix(in srgb, var(--atw-red) 30%, #000);
}

/* One message line, no link: the strip's Contact duplicated the nav item one
   row below it, and its target height failed the 24px minimum besides.
   Contact lives in the nav and the footer. Balance rides the block container
   that owns the line box (on the inline span it is a no-op), so long
   owner-authored copy wraps as even centered lines, never truncates. */
.atw-announce .atw-container { text-wrap: balance; }

/* ---- Grunge red fill treatment ------------------------------------------
   Every red-painted surface on the site wears the same paint, so a button and
   the band it stands on are one weathered surface rather than two flat
   swatches. Every map is grayscale and blended multiply, which keeps the hue
   fixed and moves only luminance — the reference's mottling lives almost
   entirely in the red channel for exactly that reason.

   Each site keeps its OWN background-color and must declare it as the
   longhand: a `background:` shorthand anywhere in this file would reset
   background-image and drop the texture, hover states included.

   Which map a surface takes is a question of how much of it there is, not of
   what it is: the bar takes the extracted map (below), anything else wide
   enough to show weather takes the 1024² tile, and anything the size of a
   button takes the 512² speckle. */
.atw-ticker,
.atw-mission-plate,
.atw-subscribe,
.atw-vision {
	background-image: var(--atw-red-grunge);
	background-repeat: repeat;
	background-size: 1024px 1024px;
	background-blend-mode: multiply;
}

.atw-skip,
.atw-btn--primary,
.atw-subscribe-form button.atw-send-btn,
.atw-video-play,
.atw-pagination .page-numbers.current,
.atw-comments .atw-form input[type='submit'],
.atw-prose .post-password-form input[type='submit'],
a.atw-tag-chip:hover,
a.atw-tag-chip:focus-visible {
	background-image: var(--atw-red-grunge-fine);
	background-repeat: repeat;
	background-size: 512px 512px;
	background-blend-mode: multiply;
}

/* The bar is the one surface the reference shows us end to end, so it does not
   get a texture that imitates the reference — it gets the reference. The map
   is the mockup's own announcement strip, and it carries that strip's smooth
   left-bright-to-right-dark wash as paint. The hand-fitted gradient this
   replaces (three black stops, sized per layer so it would not tile against
   the tile beneath it) is gone with it: a wash that is IN the map cannot band
   against a repeat, because the map does not repeat.

   100% 100% is correct here and nowhere else on this page. The map is one
   stretched image over a fixed-height bar, so `no-repeat` leaves no seam to
   align at any viewport width, and stretching a 1440-wide map to 2560 costs
   nothing a soft texture shows — there is no edge in it to blur. A tiled
   texture would have to keep its own pixel scale; this one has no scale to
   keep. */
.atw-announce {
	background-image: var(--atw-red-grunge-bar);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
}

/* Dark chrome floating over the canvas: the topo texture reads through the
   blur, and the hairline only appears once the page has moved (.is-scrolled,
   set by assets/js/atw.js) so the header sits seamless at rest. */
.atw-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(15, 14, 11, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 150ms ease, background-color 150ms ease;
}

/* The stuck edge must read over the page's darkest band, so it speaks twice:
   the hairline sharpens and the bar compacts. Lines, not glows — no shadow. */
.atw-header.is-scrolled {
	background: rgba(15, 14, 11, 0.94);
	border-bottom-color: rgba(242, 240, 235, 0.22);
}

/* The gap is stated, not tokened: the register's --space-4 resolves to 16px,
   under the 24px minimum seam the bar needs between its logo / nav / action
   groups. */
.atw-header .atw-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 13px;
	transition: padding 150ms ease;
}

.atw-header.is-scrolled .atw-container { padding-block: 9px; }

.atw-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #f2f0eb;
	text-decoration: none;
}

.atw-logo-lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.atw-logo-name {
	font-family: var(--font-display);
	font-size: clamp(21px, 2.4vw, 27px);
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
}

.atw-logo-sub {
	font-family: var(--font-eyebrow);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--atw-red-note);
}

/* An uploaded custom logo stands in for the mark + wordmark pair. */
.atw-header .custom-logo-link,
.atw-footer .custom-logo-link { display: inline-flex; }

.atw-header .custom-logo { height: 44px; width: auto; display: block; }

.atw-footer .custom-logo { height: 40px; width: auto; display: block; }

/* Give + MENU travel together, so the tablet header reads logo-left /
   actions-right rather than spreading three items across the bar. */
.atw-header-end {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

/* The bar's conversion action holds the 44px touch minimum at every width. */
.atw-give-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0;
}

/* The list carries an explicit class (menu_class in header.php) so it never
   wears tokens.css's `.menu` popover chrome — links stand directly on the
   header's blurred canvas. The gap is small because the links carry their own
   inline padding: the whole visual gap is clickable, not dead space.

   WordPress also stamps `menu-item` on every <li>, which tokens.css styles as
   a flex popover row (padding, hover fill, pointer cursor) — the same
   collision one level down, neutralized here for all three menus. */
.atw-nav li,
.atw-menu-nav li,
.atw-footer-list li {
	display: block;
	padding: 0;
	gap: 0;
	font-size: inherit;
	cursor: auto;
	border-radius: 0;
}

.atw-nav li:hover,
.atw-menu-nav li:hover,
.atw-footer-list li:hover { background: none; }

.atw-nav ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.atw-nav a {
	position: relative;
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #cfcac0;
	text-decoration: none;
	padding: 10px 12px;
	transition: color 150ms ease;
}

/* The annotation dash, scaled to a link: state reads as a drawn rule, not a
   color swap alone. */
.atw-nav a::after {
	content: '';
	position: absolute;
	left: 12px;
	bottom: 3px;
	width: 18px;
	height: 2px;
	background: rgba(242, 240, 235, 0.55);
	opacity: 0;
	transition: opacity 150ms ease;
}

.atw-nav a:hover,
.atw-nav a:focus-visible { color: #f2f0eb; }

.atw-nav a:hover::after,
.atw-nav a:focus-visible::after { opacity: 1; }

.atw-nav .current-menu-item > a,
.atw-nav .current_page_item > a { color: var(--atw-red-note); }

.atw-nav .current-menu-item > a::after,
.atw-nav .current_page_item > a::after {
	background: var(--atw-red-note);
	opacity: 1;
}

/* ---- Nav submenus ----------------------------------------------------------
   A dark plate hung under its parent: the canvas surface the header already
   floats over, a hairline border, and the small 12px bottom-right cut so the
   drop reads as another machined plate rather than a browser menu. It opens on
   hover and on focus-within, so it is reachable by keyboard without script. */
.atw-nav li { position: relative; }

.atw-nav .menu-item-has-children > a::after {
	content: '▾';
	margin-left: 7px;
	font-size: 10px;
	line-height: 1;
	vertical-align: 1px;
	opacity: 0.7;
}

.atw-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 10;
	display: block;
	min-width: 210px;
	flex-direction: column;
	gap: 0;
	padding: 6px 0;
	background-color: var(--atw-canvas);
	background-image: var(--canvas-texture);
	background-size: 1024px 1024px;
	border: 1px solid rgba(242, 240, 235, 0.16);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 120ms ease, visibility 120ms ease;
}

.atw-nav li:hover > .sub-menu,
.atw-nav li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

.atw-nav .sub-menu li { display: block; }

.atw-nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: #cfcac0;
}

.atw-nav .sub-menu a:hover,
.atw-nav .sub-menu a:focus-visible { color: var(--atw-red-note); }

/* In the overlay the same submenu is simply an indented, smaller Anton run —
   nothing hangs, because there is nothing to hang from. */
.atw-menu-nav .sub-menu {
	margin: 0;
	padding-left: clamp(16px, 5vw, 34px);
}

.atw-menu-nav .sub-menu a {
	font-size: clamp(22px, 6vw, 34px);
	color: #cfcac0;
}

/* ---- Menu box button + full-screen overlay ------------------------------- */
.atw-menu-btn {
	display: none;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: transparent;
	border: 1px solid rgba(242, 240, 235, 0.34);
	color: #f2f0eb;
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease;
}

.atw-menu-btn:hover { border-color: var(--atw-red); }

/* The overlay fills from the top, not the center: its head row reproduces the
   header's geometry (same container, same padding-block, same 44px control)
   so the close box lands exactly where the MENU trigger was. --atw-menu-top is
   set at open time (atw.js) to the header's live offset — the announce
   strip's height at page top, 0 once scrolled. */
.atw-menu {
	position: fixed;
	inset: 0;
	z-index: 120;
	padding-top: var(--atw-menu-top, 0px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.atw-menu[hidden] { display: none; }

.atw-menu .atw-container { padding-bottom: 40px; }

/* The head's padding tracks the header's live state (13px at rest, 9px
   compacted after scroll — measured at open time by atw.js) so the close box
   lands on the trigger in both states. */
.atw-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: var(--atw-menu-head-pad, 13px);
	border-bottom: 1px solid rgba(242, 240, 235, 0.14);
}

.atw-menu-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.atw-menu-close {
	width: 44px;
	height: 44px;
	flex: none;
	background: transparent;
	border: 1px solid rgba(242, 240, 235, 0.34);
	color: #f2f0eb;
	font-family: var(--font-eyebrow);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease;
}

.atw-menu-close:hover { border-color: var(--atw-red); }

/* The link run keeps a readable measure on wide-but-collapsed viewports
   (tablets) instead of sprawling edge to edge. */
.atw-menu-nav ul {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	max-width: 560px;
	counter-reset: atw-menu-item;
}

.atw-menu-nav > ul > li { counter-increment: atw-menu-item; }

.atw-menu-nav a {
	display: flex;
	align-items: baseline;
	gap: 18px;
	font-family: var(--font-display);
	font-size: clamp(34px, 10vw, 62px);
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #f2f0eb;
	text-decoration: none;
	padding-block: 10px;
	border-bottom: 1px solid rgba(242, 240, 235, 0.1);
	transition: color 150ms ease;
}

/* The numbered-cards annotation voice, carried into the menu: a mono red
   index in front of every destination. */
.atw-menu-nav > ul > li > a::before {
	content: counter(atw-menu-item, decimal-leading-zero);
	font-family: var(--font-eyebrow);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--atw-red-note);
	flex: none;
}

.atw-menu-nav a:hover,
.atw-menu-nav a:focus-visible { color: var(--atw-red); }

.atw-menu-nav .current-menu-item > a,
.atw-menu-nav .current_page_item > a { color: var(--atw-red); }

/* Scoped past .atw-btn's later inline-block so the overlay CTA spans the
   list's measure. */
.atw-menu .atw-menu-give {
	display: block;
	max-width: 560px;
	margin-top: 34px;
	text-align: center;
}

.atw-menu-social { margin-top: 18px; }

/* ---- Hero ---------------------------------------------------------------- */
.atw-hero {
	position: relative;
	overflow: hidden;
	min-height: 82vh;
	display: flex;
	align-items: flex-end;
}

.atw-hero-media {
	position: absolute;
	inset: 0;
}

/* The photo anchors right and dissolves into the topo canvas on the left,
   where the headline sits — the body texture reads through the masked-out
   region, so the blend is photo → texture, not photo → flat black. */
.atw-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 78% keeps the sun core to the right of the headline's last word at wide
	   viewports — the accent red cannot survive sitting on the glow itself. */
	object-position: 78% center;
	-webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 52%);
	mask-image: linear-gradient(100deg, transparent 6%, #000 52%);
}

/* The horizontal scrim must hold alpha through the full headline zone (~75%
   of the width at 1440) — the sun glow lives at 60–80% and sits at the same
   luminance as the accent red, which erases the line without this hold. */
.atw-hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(10, 9, 7, 0.9) 0%, rgba(10, 9, 7, 0.3) 34%, rgba(10, 9, 7, 0) 58%),
		linear-gradient(90deg, rgba(10, 9, 7, 0.87) 0%, rgba(10, 9, 7, 0.56) 42%, rgba(10, 9, 7, 0.42) 62%, rgba(10, 9, 7, 0.26) 80%, rgba(10, 9, 7, 0) 96%);
}

/* Wide enough that "Equipping the Church." holds one line at 1440 and the
   headline stands as three balanced lines rather than four ragged ones. */
.atw-hero-inner {
	position: relative;
	padding-block: clamp(96px, 12vw, 150px) clamp(56px, 8vw, 96px);
	max-width: 880px;
}

.atw-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #cac5ba;
}

.atw-hero-eyebrow::before {
	content: '';
	width: 32px;
	height: 3px;
	background: var(--atw-red);
}

/* Three authored lines. Where the narrow viewport forces a fourth, the break
   is balanced rather than left to drop a single word on its own. */
.atw-hero h1 {
	font-size: clamp(44px, 7.5vw, 92px);
	line-height: 0.98;
	color: #f2f0eb;
	text-wrap: balance;
}

.atw-hero h1 .accent { color: var(--atw-red); }

.atw-hero p {
	color: #d9d5cc;
	font-size: 17px;
	line-height: 1.6;
	max-width: 44ch;
}

.atw-actions {
	display: flex;
	gap: var(--space-3, 16px);
	margin-top: var(--space-5, 32px);
}

.atw-btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 14px 26px;
	text-decoration: none;
	border-radius: var(--radius-control, 2px);
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Red fill takes the lit facet on either ground — dark canvas or cream paper —
   because the cut face of a painted plate catches light, never shadow. */
/* White on brand red measures 4.49:1 — under the bar for a 13px label — so the
   painted plate takes the deep red and darkens further on hover. */
.atw-btn--primary {
	background-color: var(--atw-red-deep);
	color: #fff;
	--atw-facet: var(--atw-facet-lit);
}

.atw-btn--primary:hover { background-color: color-mix(in srgb, var(--atw-red-deep) 82%, #000); }

.atw-btn--ghost {
	border: 1px solid rgba(242, 240, 235, 0.55);
	color: #f2f0eb;
	--atw-facet: rgba(242, 240, 235, 0.5);
}

.atw-btn--ghost:hover { border-color: #fff; }

/* ---- Values strip --------------------------------------------------------
   The register's --divider is a border shorthand, not a colour, so the rule
   names the paper's own edge tone directly. */
.atw-values {
	border-block: 1px solid #d8d2c4;
}

.atw-values .atw-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5, 32px);
	padding-block: var(--space-6, 40px);
}

.atw-value h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.atw-value p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--atw-paper-ink) 72%, var(--atw-paper));
}

/* ---- Stories grid -------------------------------------------------------- */
.atw-stories-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-bottom: var(--space-5, 32px);
}

/* Band titles are Anton: the serif counter-voice is reserved for cream paper,
   so it never appears standing on the canvas. */
.atw-stories-head h2 {
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #f2f0eb;
	margin: 12px 0 0;
}

.atw-view-all {
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--atw-red-note);
	text-decoration: none;
}

/* 260px is the narrowest a cream card can be and still hold a serif title on
   two lines with its chip beside the date. */
.atw-story-grid {
	display: grid;
	/* 3-up at the content width: six stories fill two clean rows, four fill
	   one-plus-one — never a lone orphan beside a dead field. */
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-4, 24px);
}

/* Cream paper plate, cut like every other plate — the facet here is a darker
   cream, the shade of the paper's own edge, never a white highlight. */
.atw-story-card {
	position: relative;
	background: var(--atw-paper);
	background-image: var(--paper-texture);
	background-size: 1024px 1024px;
	border: 1px solid rgba(28, 25, 20, 0.22);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--atw-paper-ink);
	--atw-facet: var(--atw-facet-ink);
	--atw-red-note: var(--atw-red-note-paper);
	transition: transform 150ms ease, border-color 150ms ease;
}

.atw-story-card:hover,
.atw-story-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--atw-red);
}

.atw-story-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* A story with no thumbnail keeps the card's shape: the same 4:3 well, filled
   with the card's own paper and the brush mark set as a watermark. */
.atw-card-ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid rgba(28, 25, 20, 0.16);
}

.atw-card-ph .atw-mark {
	width: 44px;
	height: auto;
	opacity: 0.16;
	color: var(--atw-paper-ink);
}

.atw-story-body {
	padding: var(--space-4, 24px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--atw-paper-ink);
}

.atw-story-body h3 {
	font-family: var(--font-serif);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.22;
	margin: 0;
}

.atw-story-body h3 a {
	color: inherit;
	text-decoration: none;
}

.atw-story-body p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--atw-paper-ink) 78%, var(--atw-paper));
}

.atw-story-date {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--atw-paper-ink) 55%, var(--atw-paper));
	margin-top: auto;
	padding-top: 10px;
}

/* Meta row: mono date + outlined category chip, set above the serif title —
   the annotation layer arriving before the editorial voice. The chip always
   takes its own line rather than wrapping only in narrow columns, so the serif
   titles start at the same height right across a row of cards. */
.atw-story-meta {
	display: grid;
	justify-items: start;
	gap: 8px;
}

/* Standing in a hero or on the wide featured card there is only ever one row,
   so the annotation reads as a single line again. */
.atw-page-hero .atw-story-meta,
.atw-featured .atw-story-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.atw-story-meta .atw-story-date {
	margin-top: 0;
	padding-top: 0;
}

/* ---- Mission band --------------------------------------------------------
   Convergent split-band shape: the paper texture bleeds to the viewport
   edges; the copy/media grid stays in the standard content container, so an
   ultrawide viewport widens the band, never the content. */
/* ---- Line-art layer -------------------------------------------------------
   Carved-linocut motifs printed at watermark strength into band corners and
   gutters (masters + style seed live in assets/lineart/; each *-ink/-bone/
   -red.webp is its master with the paper level subtracted, ink lifted to
   alpha, and one theme ink baked in, so only CSS opacity says how loud it
   prints). One shared layer, driven entirely by custom properties: a band
   opts in with `atw-lineart atw-lineart--<motif>` in its class list and the
   modifier sets the variables. Every seat claims a zone its band's layout
   leaves empty, and every motif re-seats (or sits out via --art-display) in
   the ≤900px block below when the collapse moves its empty zone — a modifier
   with no entry there is a defect. Budgets: one motif per band; opacity
   0.07 warm-black ink on paper, 0.09 bone on canvas (the red flame runs
   hotter because red's luma nearly vanishes on the dark canvas); art never
   sits under form fields, and dense ink never under body copy — gated by
   tools/lineart-audit.mjs (thresholds and their receipts live there). The
   band isolates so the negative-z layer prints above its own ground texture
   but below every child. */
.atw-lineart {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.atw-lineart::before {
	content: '';
	position: absolute;
	z-index: -1;
	display: var(--art-display, block);
	top: var(--art-top, auto);
	right: var(--art-right, auto);
	bottom: var(--art-bottom, auto);
	left: var(--art-left, auto);
	transform: var(--art-shift, none);
	width: var(--art-w);
	aspect-ratio: var(--art-ar);
	background: var(--art-img) center / contain no-repeat;
	opacity: var(--art-opacity, 0.07);
	pointer-events: none;
}

/* Mission (paper): the John 4 well off the left edge, under the quote —
   the approved reference for how much ink may sit behind copy. */
.atw-lineart--well {
	--art-img: url('lineart/well-ink.webp');
	--art-ar: 833 / 1148;
	--art-left: clamp(-60px, -3vw, -24px);
	--art-top: 50%;
	--art-shift: translateY(-50%);
	--art-w: clamp(240px, 26vw, 400px);
}

/* Team (canvas): rooftops + water tower rising from the band's bottom-right
   padding — the "city by city" line made literal. */
.atw-lineart--skyline {
	--art-img: url('lineart/skyline-bone.webp');
	--art-ar: 1689 / 516;
	--art-right: -60px;
	--art-bottom: -4px;
	--art-w: clamp(420px, 44vw, 640px);
	--art-opacity: 0.09;
}

/* Media (canvas): the descending dove in the band's left gutter, centered —
   at narrower widths its overrun hides behind the opaque video tiles and
   only stroke slivers show in the grid gaps. */
.atw-lineart--dove {
	--art-img: url('lineart/dove-bone.webp');
	--art-ar: 877 / 1106;
	--art-left: -30px;
	--art-top: 50%;
	--art-shift: translateY(-50%);
	--art-w: 150px;
	--art-opacity: 0.09;
}

/* Contact (paper): the wheat sheaf in the right gutter beside the letter —
   sized to the gutter; any overrun hides behind the opaque field fills. */
.atw-lineart--wheat {
	--art-img: url('lineart/wheat-sheaf-ink.webp');
	--art-ar: 724 / 1234;
	--art-right: clamp(-30px, -1.5vw, -16px);
	--art-top: 50%;
	--art-shift: translateY(-50%);
	--art-w: clamp(140px, 12vw, 200px);
}

/* Give (canvas): the lamp's flame beside the invitation — the set's one red
   print, deep red so it reads ember, not alarm. */
.atw-lineart--flame {
	--art-img: url('lineart/flame-red.webp');
	--art-ar: 356 / 880;
	--art-left: clamp(-8px, 2vw, 48px);
	--art-top: 50%;
	--art-shift: translateY(-50%);
	--art-w: clamp(100px, 11vw, 150px);
	--art-opacity: 0.22;
}

/* Connect (paper): ripple arcs spreading from the bottom-right corner —
   the well's water going out, as the pointers do. The card grid fills the
   container at every width, so the only empty zone is the wide-viewport
   gutter: the print exists only ≥1240px and its width tracks the gutter
   itself (half the space beyond the 1160px container, plus bleed). */
.atw-lineart--ripple {
	--art-img: url('lineart/ripple-arc-ink.webp');
	--art-ar: 1050 / 640;
	--art-display: none;
	--art-right: -50px;
	--art-bottom: -20px;
	--art-w: min(calc((100vw - 1160px) / 2 + 60px), 320px);
}

@media (min-width: 1240px) {
	.atw-lineart--ripple { --art-display: block; }
}

.atw-mission-inner {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: var(--space-4, 24px);
	padding-block: clamp(48px, 6vw, 88px);
	align-items: center;
}

.atw-mission-copy {
	padding-block: 0;
}

.atw-mission-copy h2 {
	font-family: var(--font-serif);
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 500;
	line-height: 1.2;
	margin: 8px 0 20px;
}

.atw-mission-copy p {
	font-size: 15px;
	line-height: 1.65;
	max-width: 46ch;
}

.atw-mission-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Connect strip + footer ---------------------------------------------- */
/* Cream on every page (band-rhythm law 2026-08-08): the connect band breaks
   what would otherwise be a 4-5 band dark tail run on most templates. The
   hairline is the values band's paper edge, not the canvas hairline. */
.atw-connect {
	border-block: 1px solid #d8d2c4;
}

.atw-connect .atw-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5, 32px);
	padding-block: var(--space-6, 40px);
}

.atw-connect h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--atw-paper-ink);
	margin: 0 0 6px;
}

.atw-connect p {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--atw-paper-ink) 72%, var(--atw-paper));
}

.atw-footer {
	padding-block: var(--space-7, 56px) var(--space-5, 32px);
	color: #b9b4a9;
	font-size: 13.5px;
}

/* Only the column block is a grid — the legal strip below it is its own,
   full-width container — so the grid rides a dedicated class rather than a
   structural :first-child selector the responsive overrides could not outrank. */
.atw-footer-cols {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: var(--space-6, 40px);
}

.atw-footer-tagline { margin-top: 12px; }

.atw-footer-social { margin-top: 16px; }

.atw-footer-note { margin: 0 0 12px; }

.atw-footer-links--spaced { margin-top: 14px; }

.atw-footer h4 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #f2f0eb;
	margin: 0 0 12px;
}

.atw-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.atw-footer a {
	color: inherit;
	text-decoration: none;
}

.atw-footer a:hover { color: #f2f0eb; }

.atw-footer-legal {
	margin-top: var(--space-6, 40px);
	padding-top: var(--space-4, 24px);
	border-top: 1px solid rgba(242, 240, 235, 0.12);
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

/* ---- Machined notch (design-bundle plate language) -------------------------
   A clip-path alone erases the border along the diagonal, so the cut vanishes
   dark-on-dark and the plate just looks damaged. Every notch therefore carries
   a facet: a hairline laid on the diagonal itself, drawn by a gradient inside
   a square pseudo-element sized to the cut. The gradient runs perpendicular to
   the diagonal, so the band lands exactly on it; it is biased to the inner
   half (stops end at 50%) because the outer half would be clipped away with
   the corner. Its colour is inherited from --atw-facet, which each surface
   sets once — light on dark grounds and painted plates, darker cream on paper.

   Cuts: plates 22px top-right, buttons and small plates 12px bottom-right. */
.atw-cut,
.atw-story-card,
.atw-featured {
	position: relative;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.atw-cut::after,
.atw-story-card::after,
.atw-featured::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
	pointer-events: none;
	background: linear-gradient(
		to top right,
		transparent 0 calc(50% - 1.3px),
		var(--atw-facet) calc(50% - 1.3px) 50%,
		transparent 50%
	);
}

.atw-cut--btn {
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.atw-cut--btn::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	pointer-events: none;
	background: linear-gradient(
		to bottom right,
		transparent 0 calc(50% - 1.1px),
		var(--atw-facet) calc(50% - 1.1px) 50%,
		transparent 50%
	);
}

/* ---- Hero tear ------------------------------------------------------------
   The one torn-paper moment on a page: the red band rips across the bottom of
   the hero photo like a pasted collage strip. The torn sheet is not a decal —
   it is the band's own paint, carried above the band's top edge through a
   silhouette mask, so sheet and band are one continuous painted surface: same
   declared red, same grunge tile, same phase. The decal that used to bake the
   sheet colour in (edge-tear-hero.png) could not follow a retuned red and left
   a visible joint where it met the band. Only the deckle survives as a raster,
   because fibres are shape, not paint. The tear keeps its physical scale at
   every viewport width: mask and fibres repeat-x at a FIXED 1024px.
   Per-band mask tears at every boundary were retired 2026-08-08: repeated ten
   times a page at fiber-scale amplitude, with no exposed-fiber deckle and no
   shadow, they read as a grunge border, not paper. */
.atw-tear {
	position: relative;

	/* The shadow lives here, not on ::before: a filter is applied BEFORE the
	   element's own mask, so a drop-shadow on the masked sheet would be cut
	   away by the very mask that shapes it. Applied to the band, the group
	   silhouette is band + torn sheet, and the -2px rise puts the shadow above
	   the tear only — the band's own edges keep their shadow behind them. */
	filter: drop-shadow(0 -2px 3px rgb(0 0 0 / 0.35));
}

/* The sheet. background-position-y is the phase correction, not a nudge: the
   pseudo-element starts 55px above the band's padding box, so the tile has to
   be pushed back down by exactly that much for tile row r to land on the same
   page row in both boxes. At 0 0 the two surfaces would sit 55 rows out of
   step and the joint would read as a line. */
.atw-tear::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -27px;
	height: 28px;
	/* Bound to the band, not to the button red: the sheet IS the ticker's
	   paint carried above its top edge, so the two must declare one colour. */
	background-color: var(--atw-red-band);
	background-image: var(--atw-red-grunge);
	background-repeat: repeat;
	background-size: 1024px 1024px;
	background-position: 0 27px;
	background-blend-mode: multiply;
	-webkit-mask-image: url('textures/edge-tear-mask.png');
	mask-image: url('textures/edge-tear-mask.png');
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 1024px 28px;
	mask-size: 1024px 28px;
	pointer-events: none;
}

/* The deckle: exposed fibre, wisp strands and crumb speckle, unmixed out of
   the old decal as cream-on-transparent. It rides above the sheet unmasked,
   so strands can stand clear of the torn edge the way loose fibre does. */
.atw-tear::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -27px;
	height: 28px;
	background: url('textures/edge-tear-fibers.png') repeat-x 0 0 / 1024px 28px;
	pointer-events: none;
}

/* ---- Brand mark ----------------------------------------------------------- */
.atw-mark {
	width: 30px;
	height: 34px;
	flex-shrink: 0;
	color: var(--atw-red);
}

/* ---- Value icons ---------------------------------------------------------- */
.atw-value-icon {
	width: 44px;
	height: 44px;
	color: var(--atw-red);
	margin-bottom: 12px;
}

.atw-value-icon svg { width: 100%; height: 100%; }

/* ---- City ticker ----------------------------------------------------------- */
.atw-ticker {
	background-color: var(--atw-red-band);
	/* Bottom hairline only: the top edge is the hero tear — a machine-straight
	   hairline under a torn silhouette would contradict it. */
	border-block-end: 1px solid color-mix(in srgb, var(--atw-red) 60%, #000);
	padding: 13px 0;
	white-space: nowrap;
}

/* The marquee clip lives on an inner wrapper, not the band itself: the band
   must stay overflow-visible so the hero tear can rise above its top edge. */
.atw-ticker-clip {
	overflow: hidden;
}

/* The track holds ten identical copies (see front-page.php) and loops at
   -50%, so the duration is per five copies — scale it with the copy count or
   the scroll speed changes. */
.atw-ticker-track {
	display: inline-flex;
	animation: atw-ticker 150s linear infinite;
}

/* No padding between copies: each copy ends with the same nbsp-✦-nbsp
   separator it uses internally, so the copy seam must add nothing or the
   rhythm hiccups there. */
.atw-ticker-track span {
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: 0.16em;
	color: #f2f0eb;
}

@keyframes atw-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---- Quick links -----------------------------------------------------------
   Breathing belongs to the band (.atw-section wraps this grid), never to the
   grid itself: this strip is exposed canvas between two paper bands, so any
   padding the grid drops is dark ground that vanishes at the paper's edge. */
.atw-quick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.atw-quick-card {
	display: block;
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.12);
	padding: 28px 24px;
	text-decoration: none;
	transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.atw-quick-card:hover,
.atw-quick-card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--atw-red);
	background: rgba(242, 240, 235, 0.07);
}

/* Numbers are red on every card — the template's blue accent is ruled out. */
.atw-quick-card .num {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	color: var(--atw-red-note);
	letter-spacing: 0.18em;
	display: block;
	margin-bottom: 14px;
	transition: color 150ms ease;
}

.atw-quick-card:hover .num,
.atw-quick-card:focus-visible .num { color: color-mix(in srgb, var(--atw-red-note) 68%, #fff); }

.atw-quick-card .title {
	font-family: var(--font-display);
	font-size: 23px;
	letter-spacing: 0.03em;
	color: #f2f0eb;
	display: block;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.atw-quick-card .blurb {
	font-size: 14px;
	color: #b9b4a9;
	line-height: 1.5;
	display: block;
}

/* Plate-on-paper variant (the About creed band): the dark plate's wash
   arithmetic mirrored into the paper's ink. Hover border stays brand red —
   the cream story card already hovers to it — and the number deepens toward
   ink where the dark plate's brightens toward white, so the hover moves away
   from the ground on both surfaces. The annotation red itself re-points via
   the texture-paper token swap. */
.texture-paper .atw-quick-card {
	background: rgba(28, 25, 20, 0.04);
	border-color: rgba(28, 25, 20, 0.22);
}

.texture-paper .atw-quick-card:hover,
.texture-paper .atw-quick-card:focus-visible {
	background: rgba(28, 25, 20, 0.07);
	border-color: var(--atw-red);
}

.texture-paper .atw-quick-card:hover .num,
.texture-paper .atw-quick-card:focus-visible .num { color: color-mix(in srgb, var(--atw-red-note) 68%, #000); }

.texture-paper .atw-quick-card .title { color: var(--atw-paper-ink); }

.texture-paper .atw-quick-card .blurb { color: color-mix(in srgb, var(--atw-paper-ink) 72%, var(--atw-paper)); }

/* ---- Mission quote plate ---------------------------------------------------
   Until real photography exists the panel is composed rather than blank: its
   own canvas texture, the brush mark set large and low as a watermark, the
   22px cut with its facet, and the red plate riding the corner. A flat black
   rectangle reads broken; this reads as awaiting. */
.atw-mission-media {
	position: relative;
	min-height: 320px;
	background-color: var(--atw-canvas);
	background-image: var(--canvas-texture);
	background-size: 1024px 1024px;
	border: 1px solid rgba(28, 25, 20, 0.28);
	--atw-facet: var(--atw-facet-canvas);
}

.atw-mission-ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

/* Watermark reads as a faint ink stamp, not a decal: small relative to its
   panel, low alpha, never mid-size mid-opacity (that reads as a muddy smear). */
.atw-mark--watermark {
	width: 84px;
	height: auto;
	opacity: 0.12;
}

.atw-mission-plate {
	position: absolute;
	left: -14px;
	bottom: 22px;
	background-color: var(--atw-red-band);
	color: #f2f0eb;
	--atw-facet: var(--atw-facet-lit);
	padding: 16px 22px;
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	max-width: 360px;
	line-height: 1.25;
	text-wrap: balance;
}

/* ---- Team band -------------------------------------------------------------- */
.atw-team-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: var(--space-5, 32px);
}

.atw-team-head h2,
.atw-band-title {
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	color: #f2f0eb;
}

.atw-band-title .accent { color: var(--atw-red); }

/* A band title standing on paper is ink — same value the contact band sets by
   hand; the accent stays brand red (display size, where 3:1 is the bar). */
.texture-paper .atw-band-title { color: var(--atw-paper-ink); }

.atw-team-tag {
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: #b9b4a9;
	text-transform: uppercase;
}

.atw-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.atw-team-card {
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.12);
	transition: transform 150ms ease, border-color 150ms ease;
}

.atw-team-card:hover,
.atw-team-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--atw-red);
}

.atw-team-card img,
.atw-team-card .ph {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid rgba(242, 240, 235, 0.12);
}

/* ---- Designed portrait placeholder -----------------------------------------
   Documentary photographs of people are never generated, so a portrait slot
   with no real photograph carries the surface it sits on and an Anton monogram
   set huge and low — the initial is passed from PHP as data-initial. */
.ph[data-initial] {
	display: grid;
	place-items: center;
	overflow: hidden;
	/* The slot carries the same lifted fill as its card body — raw canvas here
	   reads as a hole punched in the card, not a designed slot. */
	background-color: #16140f;
	background-image: var(--canvas-texture);
	background-size: 1024px 1024px;
	background-blend-mode: lighten;
}

.ph[data-initial]::before {
	content: attr(data-initial);
	font-family: var(--font-display);
	/* Fixed size: a viewport-scaled glyph overflows narrow slots and clips. */
	font-size: 72px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: rgba(242, 240, 235, 0.16);
}

/* The brush-mark variant of the same idea, for slots that name no person. */
.atw-ph--mark {
	display: grid;
	place-items: center;
	background-color: var(--atw-canvas);
	background-image: var(--canvas-texture);
	background-size: 1024px 1024px;
}

.atw-ph--mark .atw-mark { color: rgba(242, 240, 235, 0.9); }

.atw-team-card figcaption,
.atw-team-body {
	padding: 26px;
}

.atw-team-quote {
	font-size: 19px;
	line-height: 1.45;
	color: #f2f0eb;
	margin: 0 0 20px;
	font-weight: 500;
}

.atw-team-name {
	font-family: var(--font-display);
	font-size: 23px;
	letter-spacing: 0.03em;
	color: #f2f0eb;
	margin: 0 0 6px;
	text-transform: uppercase;
}

/* ---- Media band -------------------------------------------------------------- */
.atw-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 20px;
}

.atw-media-grid > .atw-cut {
	border: 1px solid rgba(242, 240, 235, 0.14);
	background: rgba(242, 240, 235, 0.04);
	transition: border-color 150ms ease;
}

.atw-media-grid > .atw-cut:hover,
.atw-media-grid > .atw-cut:focus-within { border-color: var(--atw-red); }

.atw-media-grid iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	background: #000;
}

/* ---- Social row ------------------------------------------------------------
   Marks, not words: one square notched plate per profile carrying a line glyph
   in the same 2px stroke voice as the values icons. The profile name lives in
   each link's aria-label, and the plate is 44px square so it is a real touch
   target. */
.atw-social-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.atw-social-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(242, 240, 235, 0.3);
	color: #b9b4a9;
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}

.atw-social-row a svg {
	width: 22px;
	height: 22px;
	display: block;
}

.atw-social-row a:hover,
.atw-social-row a:focus-visible { border-color: var(--atw-red); color: #f2f0eb; }

/* ---- Newsletter band ---------------------------------------------------------- */
.atw-subscribe {
	background-color: var(--atw-red-band);
	color: #f2f0eb;
	--atw-facet: var(--atw-facet-lit);
}

.atw-subscribe .atw-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 40px;
	align-items: center;
	padding-block: clamp(48px, 6vw, 72px);
}

.atw-subscribe h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.atw-subscribe p { margin: 0; color: rgba(242, 240, 235, 0.8); line-height: 1.6; font-size: 15px; }

.atw-subscribe-form {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.atw-subscribe-form input {
	flex: 1;
	min-width: 150px;
	height: 50px;
	padding: 0 16px;
	/* The field has to sink into the band it sits in. Against the deeper band
	   red the old mix measured 1.03:1 — the field vanished — so it deepens
	   rather than the band lightening: 1.55:1 against the band, with the
	   placeholder still at 5.42:1 and typed value at 16.1:1. The mix is bound
	   to the band token, so it tracked the band's own darkening and held its
	   separation without a second edit. The edge takes the brand red instead,
	   the one lit line on a recessed plate. */
	background-color: color-mix(in srgb, var(--atw-red-band) 40%, #000);
	border: 1px solid color-mix(in srgb, var(--atw-red) 75%, #000);
	color: #f2f0eb;
	font-family: var(--font-body);
	font-size: 15px;
	outline: none;
}

.atw-subscribe-form input::placeholder { color: rgba(242, 240, 235, 0.55); }

/* Cream button on the red band: the facet inverts to ink so the cut still
   reads as a machined face rather than a nick in the paper. */
.atw-subscribe-form button {
	height: 50px;
	padding: 0 28px;
	background: #f2f0eb;
	color: #171310;
	border: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	cursor: pointer;
	text-transform: uppercase;
	--atw-facet: rgba(23, 19, 16, 0.4);
	transition: background-color 150ms ease;
}

.atw-subscribe-form button:hover { background: #fff; }

/* Footer send button rides the red fill, so it takes the lit facet back. */
.atw-subscribe-form button.atw-send-btn {
	width: 56px;
	min-height: 44px;
	padding: 0;
	background-color: var(--atw-red-deep);
	color: #fff;
	font-size: 16px;
	--atw-facet: var(--atw-facet-lit);
}

.atw-subscribe-form button.atw-send-btn:hover { background-color: color-mix(in srgb, var(--atw-red-deep) 82%, #000); }

.atw-footer .atw-subscribe-form {
	flex-wrap: nowrap;
	gap: 8px;
}

.atw-footer .atw-subscribe-form input {
	min-width: 0;
	height: 44px;
	background: rgba(242, 240, 235, 0.06);
	border-color: rgba(242, 240, 235, 0.2);
}

.atw-footer .atw-subscribe-form button { height: 44px; }

/* ---- Contact ------------------------------------------------------------------ */
.atw-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 56px;
	padding-block: var(--section-gap, 72px);
}

.atw-contact h2 { color: #f2f0eb; }

.atw-contact-intro {
	font-size: 15px;
	color: #b9b4a9;
	line-height: 1.7;
	margin: 14px 0 26px;
}

.atw-helpline {
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.12);
	border-left: 3px solid var(--atw-red);
	padding: 18px 20px;
}

.atw-helpline .label {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--atw-red-note);
	display: block;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.atw-helpline p { margin: 0; font-size: 14px; color: #d9d5cc; line-height: 1.6; }

.atw-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.atw-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.atw-form input,
.atw-form select,
.atw-form textarea {
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	padding: 0 16px;
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.16);
	color: #f2f0eb;
	font-family: var(--font-body);
	font-size: 15px;
	outline: none;
}

/* The native select control cannot be painted, so it is redrawn: the chevron
   is a background mark on the same ground as the fields either side of it. */
.atw-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9d5cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}

.atw-form textarea { height: auto; padding: 14px 16px; resize: vertical; }

.atw-form input::placeholder,
.atw-form textarea::placeholder { color: #8d8a80; }

.atw-form input:focus,
.atw-form select:focus,
.atw-form textarea:focus { border-color: var(--atw-red); }

.atw-form button { align-self: flex-start; border: 0; cursor: pointer; }

/* ---- Contact on paper ------------------------------------------------------
   The front page's contact band is a letter written on paper (DESIGN.md band
   rhythm): it breaks the long dark run through the page's bottom half, so the
   fields are re-grounded in ink-on-cream. Inputs stay rectangular — a notched
   field reads as a gimmick — and only the submit carries the cut. */
.atw-contact-band .atw-contact h2 { color: var(--atw-paper-ink); }

.atw-contact-band .atw-contact-intro {
	color: color-mix(in srgb, var(--atw-paper-ink) 76%, var(--atw-paper));
}

.atw-contact-band .atw-helpline {
	background: color-mix(in srgb, var(--atw-paper-ink) 5%, var(--atw-paper));
	border: 1px solid color-mix(in srgb, var(--atw-paper-ink) 20%, var(--atw-paper));
	border-left: 3px solid var(--atw-red-deep);
}

.atw-contact-band .atw-helpline p { color: var(--atw-paper-ink); }

.atw-contact-band .atw-form input,
.atw-contact-band .atw-form select,
.atw-contact-band .atw-form textarea {
	background-color: color-mix(in srgb, #fff 42%, var(--atw-paper));
	border-color: color-mix(in srgb, var(--atw-paper-ink) 26%, var(--atw-paper));
	color: var(--atw-paper-ink);
}

.atw-contact-band .atw-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1914' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.atw-contact-band .atw-form input::placeholder,
.atw-contact-band .atw-form textarea::placeholder {
	color: color-mix(in srgb, var(--atw-paper-ink) 55%, var(--atw-paper));
}

.atw-contact-band .atw-form input:focus,
.atw-contact-band .atw-form select:focus,
.atw-contact-band .atw-form textarea:focus { border-color: var(--atw-red-deep); }

/* ---- Give band ----------------------------------------------------------------- */
.atw-give {
	text-align: center;
	padding-block: clamp(72px, 9vw, 120px);
}

.atw-give h2 {
	font-family: var(--font-display);
	font-size: clamp(44px, 6.5vw, 88px);
	line-height: 0.95;
	margin: 14px 0 22px;
	text-transform: uppercase;
	color: #f2f0eb;
}

.atw-give h2 .accent { color: var(--atw-red); }

.atw-give p {
	font-size: 16px;
	color: #d9d5cc;
	line-height: 1.7;
	max-width: 620px;
	margin: 0 auto 36px;
}

/* ---- Page hero (about / stories) ------------------------------------------------ */
.atw-page-hero {
	border-bottom: 1px solid rgba(242, 240, 235, 0.12);
}

.atw-page-hero .atw-container {
	padding-block: clamp(72px, 9vw, 110px) clamp(48px, 6vw, 72px);
}

.atw-page-hero h1 {
	font-size: clamp(48px, 7.5vw, 104px);
	line-height: 0.95;
	color: #f2f0eb;
	margin: 0;
}

.atw-page-hero h1 .accent { color: var(--atw-red); }

/* ---- About: story, vision, believe ---------------------------------------------- */
.atw-story-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 56px;
	align-items: start;
	padding-block: var(--section-gap, 72px);
}

.atw-story-split .media { position: sticky; top: 32px; }

.atw-story-split .media img,
.atw-story-split .media .ph {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border: 1px solid rgba(242, 240, 235, 0.12);
}

.atw-story-split .media img { background-color: rgba(242, 240, 235, 0.05); }

.atw-story-split h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.05;
	margin: 0 0 16px;
	text-transform: uppercase;
	color: #f2f0eb;
}

.atw-story-split .verse {
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--atw-red-note);
	display: block;
	margin-bottom: 24px;
}

.atw-story-split p {
	font-size: 16px;
	line-height: 1.75;
	color: #d9d5cc;
	margin: 0 0 18px;
}

.atw-vision {
	background-color: var(--atw-red-band);
	color: #f2f0eb;
}

.atw-vision .atw-container { padding-block: clamp(56px, 7vw, 80px); }

.atw-vision .label {
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: rgba(242, 240, 235, 0.75);
	display: block;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.atw-vision p {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 42px);
	line-height: 1.15;
	margin: 0;
	text-transform: uppercase;
	max-width: 980px;
}

.atw-believe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.atw-portrait-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 20px;
}

/* A <figure>, so the browser's default margin is cleared here rather than at
   each call site. */
.atw-portrait-card {
	margin: 0;
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.12);
}

.atw-portrait-card img,
.atw-portrait-card .ph {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid rgba(242, 240, 235, 0.12);
}

.atw-portrait-card img { background-color: rgba(242, 240, 235, 0.06); }

.atw-portrait-note {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #b9b4a9;
}

.atw-cta-band {
	border-top: 1px solid rgba(242, 240, 235, 0.12);
}

.atw-cta-band .atw-container {
	padding-block: clamp(48px, 6vw, 72px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

/* ---- Stories page: filters + featured -------------------------------------------- */
.atw-filter-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.atw-filter-row a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(242, 240, 235, 0.3);
	color: #b9b4a9;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.atw-filter-row a:hover { border-color: #f2f0eb; color: #f2f0eb; }

.atw-filter-row a.is-active {
	background: #f2f0eb;
	color: #171310;
	border-color: #f2f0eb;
}

.atw-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.12);
	text-decoration: none;
	margin-bottom: var(--space-6, 40px);
}

.atw-featured {
	transition: transform 150ms ease, border-color 150ms ease;
}

.atw-featured:hover,
.atw-featured:focus-visible {
	transform: translateY(-2px);
	border-color: var(--atw-red);
}

.atw-featured img,
.atw-featured .ph {
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
	display: block;
}

.atw-featured img { background-color: rgba(242, 240, 235, 0.06); }

.atw-featured-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.atw-featured-body h3 {
	font-family: var(--font-display);
	font-size: clamp(26px, 3vw, 36px);
	letter-spacing: 0.03em;
	color: #f2f0eb;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.atw-featured-body p { margin: 0; font-size: 15px; color: #b9b4a9; line-height: 1.6; }

/* Category chip: mono, red text in a red hairline box — the template's
   STORIES tag, part of the annotation layer. */
.atw-tag-chip {
	display: inline-block;
	font-family: var(--font-eyebrow);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.16em;
	color: var(--atw-red-note);
	border: 1px solid var(--atw-red-note);
	padding: 5px 9px 4px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- Article prose (single/page) ----------------------------------------- */
.atw-prose {
	max-width: 68ch;
	margin-inline: auto;
	padding-block: var(--section-gap, 72px);
	line-height: 1.7;
	font-size: 16px;
}

.atw-prose h1 {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
}

.atw-prose img { max-width: 100%; height: auto; }

/* ---- Responsive ----------------------------------------------------------- */
/* Nav collapse: with 14px links and their clickable padding, the full bar
   (logo + five links + Give) needs ~24px of slack per group seam at 1024 and
   has none at 900 — so the menu takes over below 1024. LOCKSTEP: this pair of
   queries and atw.js's matchMedia('(min-width: 1024px)') are one constant
   with three consumers. */
@media (max-width: 1023px) {
	.atw-nav { display: none; }
	.atw-menu-btn { display: inline-flex; }

	/* With the nav gone the header is two blocks: the mark on the left, Give
	   and MENU travelling together on the right. */
	.atw-header .atw-container { justify-content: flex-start; }
}

/* Above the menu breakpoint the overlay cannot be reached, so it stays shut
   even if the viewport grew while it was open. */
@media (min-width: 1024px) {
	.atw-menu { display: none; }
}

@media (max-width: 900px) {
	.atw-values .atw-container,
	.atw-connect .atw-container { grid-template-columns: repeat(2, 1fr); }
	.atw-mission-inner { grid-template-columns: 1fr; }

	/* Collapsed-layout seats for every line-art motif: the single-column
	   grids type into the desktop seats, so each print moves to the zone the
	   collapsed band leaves empty — or sits out when it has none. A motif
	   with no entry here is a defect (see the line-art layer doctrine). */
	.atw-lineart--well {
		--art-left: auto;
		--art-right: -28px;
		--art-top: 6px;
		--art-shift: none;
		--art-w: 120px;
	}

	.atw-lineart--skyline {
		--art-right: -40px;
		--art-w: 320px;
	}

	/* Stacked full-width video tiles cover the band; no empty zone remains. */
	.atw-lineart--dove { --art-display: none; }

	/* The corner right of the submit button; overrun up the page hides
	   behind the opaque message field. */
	.atw-lineart--wheat {
		--art-top: auto;
		--art-bottom: 4px;
		--art-right: -16px;
		--art-shift: none;
		--art-w: 130px;
	}

	/* Centered give copy spans the collapsed band edge to edge. */
	.atw-lineart--flame { --art-display: none; }

	.atw-footer .atw-footer-cols { grid-template-columns: 1fr 1fr; }

	/* Narrow enough that the photo's sun glow would sit under the headline, so
	   the crop pans right and the left scrim deepens to hold the red rule. */
	.atw-hero-media img { object-position: 88% center; }

	.atw-hero-media::after {
		background:
			linear-gradient(to top, rgba(10, 9, 7, 0.92) 0%, rgba(10, 9, 7, 0.3) 34%, rgba(10, 9, 7, 0) 58%),
			linear-gradient(90deg, rgba(10, 9, 7, 0.94) 0%, rgba(10, 9, 7, 0.62) 46%, rgba(10, 9, 7, 0.42) 82%, rgba(10, 9, 7, 0.1) 96%);
	}
}

@media (max-width: 560px) {
	.atw-values .atw-container,
	.atw-connect .atw-container { grid-template-columns: 1fr; }
	.atw-footer .atw-footer-cols { grid-template-columns: 1fr; }

	/* The one conversion action never leaves the bar: Give compacts on phones
	   instead of hiding (padding-block holds the ≥44px hit). */
	.atw-give-link { padding-inline: 16px; }
	.atw-announce { letter-spacing: 0.08em; }
	.atw-actions { flex-wrap: wrap; }
	.atw-form-row { grid-template-columns: 1fr; }
	.atw-mission-plate { position: static; margin-top: 12px; max-width: none; }
}

/* Third step of the strip's tracking ladder: buys the default motto real
   slack at 320px without walking back the 12px type. Slack is measured as
   TOTAL content-box slack (both insets summed), not per-side: 0.05em
   measures 15.0px at 320 with fonts loaded, clearing the ≥10px gate. */
@media (max-width: 360px) {
	.atw-announce { letter-spacing: 0.05em; }
}

/* Sacrifice order at the smallest widths: chrome tightens and the wordmark's
   MINISTRIES subline goes before the CTA ever would. */
@media (max-width: 379px) {
	.atw-logo { gap: 8px; }
	.atw-logo-sub { display: none; }
	.atw-header-end { gap: 8px; }
	.atw-give-link { padding-inline: 12px; }
	.atw-menu-btn { padding: 0 12px; }
}

/* ---- Motion ---------------------------------------------------------------
   Motion here is scarce by design: the ticker, hover raises, arrow nudges.
   Under a reduced-motion preference all of it stops. */
@media (prefers-reduced-motion: reduce) {
	.atw-ticker-track { animation: none; }

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Slice B — the templates past the front page: paper sheets, story
   navigation, pagination, search, comments, 404. Everything here is what the
   Slice A vocabulary had no word for; where it had one (plates, chips,
   eyebrows, helpline rule) the markup reuses it instead.
   ========================================================================== */

/* ---- Utilities ------------------------------------------------------------ */
/* WP's canonical visually-hidden class, plus the form honeypot: the honeypot
   leaves the layout and the accessibility tree both, so only a bot finds it. */
.screen-reader-text,
.atw-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
}

.atw-actions--center { justify-content: center; }

/* A phrase that must not be split across a line break. */
.atw-nowrap { white-space: nowrap; }

/* An action row that already sits inside a band with its own rhythm. */
.atw-actions--flush { margin: 0; }

/* A band title standing alone under its eyebrow rather than inside a head row. */
.atw-band-title--spaced { margin: 12px 0 36px; }

/* ---- Paper sheet (single / page) ------------------------------------------
   A cream plate floating on the canvas, so it is cut like every other plate.
   The torn edge belongs to the hero seam alone (see Hero tear) — never to a
   sheet with borders on four sides. */
.atw-sheet {
	border: 1px solid rgba(28, 25, 20, 0.22);
	padding-inline: clamp(24px, 5vw, 64px);
	margin-block: var(--section-gap, 72px);
}

/* Prose is the serif counter-voice; the annotation layer stays mono, and a
   quote takes the same red rule as the helpline plate. */
.atw-prose h2,
.atw-prose h3,
.atw-prose h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.25;
	margin: 1.7em 0 0.5em;
}

.atw-prose h2 { font-size: 28px; }
.atw-prose h3 { font-size: 22px; }
.atw-prose h4 { font-size: 18px; }

.atw-prose p,
.atw-prose ul,
.atw-prose ol { margin: 0 0 1.25em; }

.atw-prose li { margin-bottom: 0.4em; }

.atw-prose a {
	color: var(--atw-red-note);
	text-underline-offset: 3px;
}

.atw-prose blockquote {
	margin: 1.6em 0;
	padding-left: 22px;
	border-left: 3px solid var(--atw-red);
	font-family: var(--font-serif);
	font-size: 20px;
	line-height: 1.45;
}

.atw-prose figure { margin: 0 0 1.6em; }

.atw-prose figure img { width: 100%; display: block; }

.atw-prose figcaption {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 8px;
	color: color-mix(in srgb, var(--atw-paper-ink) 55%, var(--atw-paper));
}

.atw-page-links {
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.12em;
	margin-top: 2em;
}

/* ---- Password-protected posts ---------------------------------------------
   WP writes this form itself and it lands on the cream sheet, so it is dressed
   like every other paper-ground field: rectangular input, notched red submit. */
.atw-prose .post-password-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.atw-prose .post-password-form p { margin: 0; }

.atw-prose .post-password-form label {
	display: block;
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--atw-paper-ink) 62%, var(--atw-paper));
}

.atw-prose .post-password-form input[type='password'] {
	height: 50px;
	min-width: 200px;
	margin-top: 8px;
	padding: 0 16px;
	box-sizing: border-box;
	background-color: color-mix(in srgb, #fff 42%, var(--atw-paper));
	border: 1px solid color-mix(in srgb, var(--atw-paper-ink) 26%, var(--atw-paper));
	color: var(--atw-paper-ink);
	font-family: var(--font-body);
	font-size: 15px;
	outline: none;
}

.atw-prose .post-password-form input[type='password']:focus { border-color: var(--atw-red-deep); }

.atw-prose .post-password-form input[type='submit'] {
	position: relative;
	height: 50px;
	padding: 0 26px;
	background-color: var(--atw-red-deep);
	border: 0;
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.atw-prose .post-password-form input[type='submit']:hover { background-color: color-mix(in srgb, var(--atw-red-deep) 82%, #000); }

/* ---- Meta rows on the dark canvas ------------------------------------------
   .atw-story-date is mixed for cream paper; standing on the canvas — in a page
   hero or on the dark featured card — it takes the canvas body ink instead. */
.atw-page-hero .atw-story-meta { margin-top: 22px; }

.atw-featured .atw-story-meta { margin-bottom: 14px; }

.atw-page-hero .atw-story-meta .atw-story-date,
.atw-featured .atw-story-meta .atw-story-date {
	color: #b9b4a9;
	margin-top: 0;
	padding-top: 0;
}

/* A chip that links: the outline fills on hover rather than growing an
   underline, so the annotation layer keeps its printed look. */
a.atw-tag-chip {
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

a.atw-tag-chip:hover,
a.atw-tag-chip:focus-visible {
	background-color: var(--atw-red-deep);
	border-color: var(--atw-red-deep);
	color: #fff;
}

/* ---- Story navigation ------------------------------------------------------
   The quick-card plate, carrying an annotation label where the card number
   would sit. */
.atw-post-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.atw-post-nav .num { text-transform: uppercase; }

/* The "Next story →" label is right-aligned into the 22px corner cut, so it is
   padded clear of the diagonal. */
.atw-post-nav .is-next { text-align: right; }

.atw-post-nav .is-next .num { padding-right: 28px; }

.atw-back { padding-block: 28px var(--section-gap, 72px); }

/* ---- Pagination ------------------------------------------------------------
   WP emits this markup itself, so the cut is drawn straight onto the current
   page number rather than through .atw-cut--btn — same 12px bottom-right
   geometry, same inherited facet. */
.atw-pagination { padding-top: var(--space-6, 40px); }

.atw-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.atw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid rgba(242, 240, 235, 0.3);
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #b9b4a9;
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}

.atw-pagination a.page-numbers:hover,
.atw-pagination a.page-numbers:focus-visible {
	border-color: #f2f0eb;
	color: #f2f0eb;
}

.atw-pagination .page-numbers.current {
	position: relative;
	background-color: var(--atw-red-deep);
	border-color: var(--atw-red-deep);
	color: #fff;
	--atw-facet: var(--atw-facet-lit);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.atw-pagination .page-numbers.current::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	pointer-events: none;
	background: linear-gradient(
		to bottom right,
		transparent 0 calc(50% - 1.1px),
		var(--atw-facet) calc(50% - 1.1px) 50%,
		transparent 50%
	);
}

.atw-pagination .page-numbers.dots { border-color: transparent; }

/* ---- Search ----------------------------------------------------------------
   Inputs stay rectangular — a notched field reads as a gimmick — and only the
   submit carries the cut. */
.atw-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 560px;
}

.atw-searchform input[type='search'] {
	flex: 1;
	min-width: 180px;
	height: 50px;
	padding: 0 16px;
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.16);
	color: #f2f0eb;
	font-family: var(--font-body);
	font-size: 15px;
	outline: none;
}

.atw-searchform input[type='search']::placeholder { color: #8d8a80; }

.atw-searchform input[type='search']:focus { border-color: var(--atw-red); }

.atw-searchform button {
	display: inline-flex;
	align-items: center;
	height: 50px;
	padding: 0 26px;
	border: 0;
	cursor: pointer;
}

.atw-search-again { margin-bottom: var(--space-6, 40px); }

/* ---- Empty states ----------------------------------------------------------- */
.atw-empty { max-width: 640px; }

.atw-empty p {
	color: #b9b4a9;
	font-size: 16px;
	line-height: 1.7;
	margin: 16px 0 28px;
}

/* ---- 404 ---------------------------------------------------------------------
   The same centred moment as the give band, held at the height of a screen so
   the page is one statement and nothing else. */
.atw-lost {
	display: grid;
	align-content: center;
	min-height: 64vh;
	text-align: center;
	padding-block: clamp(64px, 8vw, 104px);
}

.atw-lost h1 {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 82px);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #f2f0eb;
	margin: 14px 0 22px;
}

.atw-lost h1 .accent { color: var(--atw-red); }

.atw-lost p {
	font-size: 16px;
	color: #d9d5cc;
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto;
}

/* ---- Form notice + give note --------------------------------------------------
   The notice reuses the helpline plate: red left rule, dark ground, cut. */
.atw-notice { padding-top: var(--space-5, 32px); }

.atw-notice .atw-helpline { max-width: 640px; }

.atw-give .atw-give-note {
	font-family: var(--font-eyebrow);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b9b4a9;
	margin: 30px auto 0;
}

/* ---- Comments ------------------------------------------------------------------
   Top air is always supplied by what precedes it — the sheet's block margin on
   pages, the back row's bottom padding on stories — so the block pads only its
   bottom; a symmetric pad here doubled the gap to two section-gaps of dead
   canvas above the responses title. */
.atw-comments { padding-block: 0 var(--section-gap, 72px); }

.atw-comments-title { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 28px; }

.atw-comment-list,
.atw-comment-list ol.children {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.atw-comment-list ol.children { margin: 16px 0 0 clamp(12px, 3vw, 32px); }

.atw-comments .comment-body {
	background: rgba(242, 240, 235, 0.04);
	border: 1px solid rgba(242, 240, 235, 0.12);
	padding: 22px 24px;
}

.atw-comments .comment-author {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #f2f0eb;
}

.atw-comments .comment-author a { color: inherit; text-decoration: none; }

.atw-comments .comment-metadata,
.atw-comments .reply {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 6px;
}

.atw-comments .comment-metadata a,
.atw-comments .reply a {
	color: var(--atw-red-note);
	text-decoration: none;
}

.atw-comments .comment-content {
	margin-top: 14px;
	color: #d9d5cc;
	font-size: 15px;
	line-height: 1.7;
}

.atw-comments .comment-respond { margin-top: var(--space-6, 40px); }

.atw-comments .comment-reply-title {
	font-family: var(--font-display);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: #f2f0eb;
	margin: 0 0 22px;
}

.atw-comments .comment-reply-title small {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.14em;
	margin-left: 12px;
}

.atw-comments .atw-form p { margin: 0; }

.atw-comments .atw-form label {
	display: block;
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b9b4a9;
	margin-bottom: 6px;
}

.atw-comments .atw-form input[type='text'],
.atw-comments .atw-form input[type='email'],
.atw-comments .atw-form input[type='url'],
.atw-comments .atw-form textarea { width: 100%; box-sizing: border-box; }

/* The submit is an <input>, which outranks .atw-btn--primary on the field
   rule above, so the painted plate is restored here. */
.atw-comments .atw-form input[type='submit'] {
	width: auto;
	height: auto;
	align-self: flex-start;
	padding: 14px 26px;
	background-color: var(--atw-red-deep);
	border: 0;
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	--atw-facet: var(--atw-facet-lit);
}

.atw-comments .atw-form input[type='submit']:hover { background-color: color-mix(in srgb, var(--atw-red-deep) 82%, #000); }

.atw-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.atw-comments .comment-form-cookies-consent input[type='checkbox'] {
	width: auto;
	height: auto;
	margin-top: 2px;
}

.atw-comments .comment-form-cookies-consent label {
	margin: 0;
	text-transform: none;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0;
}

.atw-comments-closed,
.atw-comments .no-comments {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8d8a80;
	margin-top: 24px;
}

@media (max-width: 560px) {
	.atw-post-nav .is-next { text-align: left; }
}

/* ---- Post-mortem round 2: interaction & media polish ----------------------- */

/* Dense link rows still need a 44px hit area: pad the target, pull the visual
   rhythm back with negative margins so the type grid is unchanged. */
.atw-footer li a,
.atw-connect .atw-view-all,
.atw-footer .atw-view-all {
	display: inline-block;
	padding-block: 14px;
	margin-block: -10px;
}

/* Comment form: no naked UA widgets inside the paper sheet. */
.atw-comments input[type='checkbox'] {
	width: 16px;
	height: 16px;
	accent-color: var(--atw-red-deep);
}

.atw-comments .comment-form-cookies-consent label {
	font-family: var(--font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--atw-paper-ink) 62%, var(--atw-paper));
}

/* YouTube facade: the poster frame wears the site's own chrome — full player
   chrome loads only after an explicit play. */
.atw-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 1px solid rgba(242, 240, 235, 0.12);
	background-color: #000;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.atw-video::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 9, 7, 0.55), rgba(10, 9, 7, 0.08) 45%);
	transition: background-color 150ms ease;
}

.atw-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 64px;
	height: 46px;
	background-color: var(--atw-red-deep);
	color: #f2f0eb;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
	transition: background-color 150ms ease, transform 150ms ease;
}

.atw-video-play svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.atw-video:hover .atw-video-play,
.atw-video:focus-visible .atw-video-play {
	background-color: var(--atw-red);
	transform: translate(-50%, -50%) scale(1.06);
}

.atw-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.atw-video-play { transition: none; }
}