/* ==========================================================================
   Arizona Forensics theme stylesheet. Hand-written, no build step.
   The sheet (§4 hero, §5 content, §7 lists, §10 PDF card, §14) is the look of every page but the
   front page; §3, §9 and §13 keep values measured on the old Astra + Elementor
   site (September 2026). Sections:
   1 tokens  2 base  3 header/nav  4 hero  5 content  7 lists of posts, pagination, search forms
   9 front page  10 PDF card  11 forms (assets/css/af-forms.css)  12 print  footer
   13 tablets + phones  14 the sheet (every page but the front page)
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
	--af-primary: #65001f;      /* Elementor kit primary: headings, card titles */
	--af-link: #91003a;         /* Astra link colour */
	--af-link-hover: #a3005c;
	--af-accent: #9b053f;       /* buttons */
	--af-theme: #970055;        /* Astra theme colour: focus rings, dropdown border, form buttons */
	--af-footer: #4d0222;
	--af-text: #1e1e1e;
	--af-chrome-text: #4b4f58;  /* Astra body text: menu, grey small text */
	--af-heading: #3a3a3a;
	--af-tan: #e4ceb0;          /* outer background */
	--af-hero-from: #44001b;
	--af-hero-to: #6c002b;
	--af-font: Roboto, sans-serif;
	--af-font-slab: "Roboto Slab", serif;
	--af-font-rufina: Rufina, serif;
	--af-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--af-fs: 15px;              /* body text; 13.68px at <=921 px (Astra's 85.5% root) */
	--af-panel-width: 1120px;   /* the sheet and the header's content; = theme.json contentSize */
	--af-radius: 6px;           /* sheet, tile and PDF viewer corners */
	--af-radius-control: 3px;   /* buttons, fields */
	--af-measure: 650px;        /* the text column: 68 characters of 17 px Roboto */
	--af-tint: rgba(101, 0, 31, .045); /* hover surface: rows, tiles, boxes, page numbers */
	--af-line: #ebe2d6;         /* §14 hairlines */
	--af-tan-pale: #f6eee3;     /* §14 tinted surfaces */
	--af-sheet-gutter: 24px;    /* §14 tan beside the sheet (12 px <=767) */
	--af-sheet-pad: 64px;       /* §14 sheet inset (44 px <=1023, 20 px <=767) */
	--af-sheet-lift: 72px;      /* §14 how far the sheet overlaps the hero (56, 40) */
	--af-sky: #e4d5b8;          /* §14 the landscape hero's sky (.af-hero--land; the art draws none): change it here */
	--af-field-line: #766a5e;   /* §14 field borders: 3.6:1 on the sky, 5.3:1 on white */
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--af-tan);
	color: var(--af-chrome-text);
	font: 400 var(--af-fs)/1.65 var(--af-font-system);
	-webkit-font-smoothing: antialiased;
}
img, svg, iframe, video { max-width: 100%; }
img { height: auto; }
a { color: var(--af-link); text-decoration: none; }
a:hover, a:focus { color: var(--af-link-hover); }
a[href^="tel:"] { white-space: nowrap; } /* no break at the hyphen */
:focus-visible { outline: 2px solid var(--af-theme); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; color: var(--af-heading); font-weight: 400; }
h1 { font-size: 40px; line-height: 1.4; }
h2 { font-size: 32px; line-height: 1.3; }
h3 { font-size: 26px; line-height: 1.3; }
h4 { font-size: 24px; line-height: 1.2; }
h5 { font-size: 20px; line-height: 1.2; }
h6 { font-size: 16px; line-height: 1.25; }
@media (max-width: 921px) { h1 { font-size: 30px; } h2 { font-size: 25px; } h3 { font-size: 20px; } }
p { margin: 0 0 1.75em; }
ul, ol { margin: 0 0 1.5em 3em; padding: 0; }
ul { list-style: disc; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } /* Astra: disc at every level, 1.5em nested indent */
.af-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.af-skip:focus {
	position: fixed !important; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto;
	margin: 0; padding: 12px 18px; clip: auto; background: #fff; color: var(--af-link);
}
.af-button, .af-content .wp-block-button__link, .af-content .wp-element-button {
	display: inline-block; padding: 10px 20px; border: 2px solid var(--af-accent); border-radius: var(--af-radius-control);
	background: var(--af-accent); color: #fff; font: 500 14px/1.2 var(--af-font);
	text-align: center; text-decoration: none; cursor: pointer;
}
.af-button--outline, .is-style-outline > .wp-block-button__link { background: #fff; color: var(--af-accent); }
.af-button:hover, .af-button:focus, .af-content .wp-block-button__link:hover, .af-content .wp-block-button__link:focus { background: var(--af-primary); border-color: var(--af-primary); color: #fff; }

/* 3. Header and navigation ---------------------------------------------- */
.af-header { position: relative; z-index: 50; background: #fff; border-bottom: 1px solid #ddd; }
/* The header's white band spans the viewport; the bar's content (content-box: max-width excludes
   the padding) is the panel width, so the logo and the last menu item line up with the panel. */
.af-header__bar { display: flex; align-items: center; box-sizing: content-box; max-width: var(--af-panel-width); min-height: 78px; margin: 0 auto; padding: 0 40px; }
.af-logo { display: block; flex: none; margin-right: auto; line-height: 0; }
.af-logo img { width: 80px; height: auto; }
.af-menu-toggle, .af-menu-close, .af-sub-toggle { display: none; }

.af-menu, .af-menu ul { margin: 0; padding: 0; list-style: none; }
.af-menu { display: flex; align-items: stretch; }
.af-menu li { position: relative; }
.af-menu a {
	display: block; color: var(--af-chrome-text); font: 400 15px/1.45 var(--af-font-system);
	cursor: pointer;
}
.af-menu > li > a { display: flex; align-items: center; height: 78px; padding: 0 15px; }
.af-menu a:hover, .af-menu a:focus,
.af-menu .current-menu-item > a, .af-menu .current-menu-ancestor > a,
.af-menu .current_page_item > a, .af-menu .current-page-ancestor > a { color: var(--af-link); }
/* chevrons after items with a submenu */
.af-menu .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 6px; height: 6px; margin: -4px 0 0 10px;
	border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.8;
}
.af-menu .sub-menu .menu-item-has-children > a::after { position: absolute; right: 18px; top: 50%; margin: -3px 0 0; transform: rotate(-45deg); }
.af-menu .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 10; width: 240px;
	background: #fff; border: 1px solid var(--af-theme); border-top-width: 2px;
	box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
	visibility: hidden; opacity: 0; transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.af-menu .sub-menu .sub-menu { top: -2px; left: 100%; }
.af-menu .sub-menu a { padding: 13.5px 40px 13.5px 15px; }
.af-menu li:hover > .sub-menu,
.af-menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* Mega menu (li.af-mega, set in inc/template-tags.php): full-width panel under the header,
   one column per second-level item (bold heading), third-level links listed below it. The
   columns span the bar's content box: 1 px border + side padding = max(40px, 50% - panel/2). */
.af-menu > .af-mega { position: static; }
.af-menu > .af-mega > .sub-menu { display: flex; left: 0; right: 0; width: auto; padding: 15px max(39px, 50% - var(--af-panel-width) / 2 - 1px); }
.af-mega > .sub-menu > li { flex: 1 1 0; min-width: 0; padding: 0 15px; }
.af-mega > .sub-menu > li:first-child { padding-left: 0; }
.af-mega > .sub-menu > li:last-child { padding-right: 0; }
.af-menu .af-mega > .sub-menu > li > a { padding: 15.85px 16.5px; font-size: 1.1em; font-weight: 700; }
.af-menu .af-mega > .sub-menu > li > a::after { display: none; }
.af-menu .af-mega .sub-menu .sub-menu {
	position: static; width: auto; border: 0; box-shadow: none;
	visibility: inherit; opacity: 1; transform: none; transition: none;
}
.af-menu .af-mega .sub-menu .sub-menu a { display: flex; align-items: center; padding: 14px 15px; }
.af-menu .af-mega .sub-menu .af-icon-star > a, .af-menu .af-mega .sub-menu .af-icon-list > a { padding: 13.5px 15px; }
/* item icons (menu item CSS classes), Font Awesome 5 "star" and "align-left" (CC BY 4.0) */
.af-menu .af-icon-star > a::after, .af-menu .af-icon-list > a::after {
	content: ""; flex: none; order: -1; width: 1em; height: 1em; margin: 0.3333em;
	background: #c9005f; -webkit-mask: var(--af-mm-icon) center / contain no-repeat; mask: var(--af-mm-icon) center / contain no-repeat;
}
.af-menu .af-icon-star > a { --af-mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E"); }
.af-menu .af-icon-list > a { --af-mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z'/%3E%3C/svg%3E"); }
.af-menu .af-icon-list > a::after { width: 1.3333em; height: 1.3333em; }
/* desktop only: the parent stays maroon while the pointer or focus is inside its dropdown (on
   touch screens :hover sticks); the last item's text ends on the panel's right edge */
@media (min-width: 922px) {
	.af-menu li:hover > a, .af-menu li:focus-within > a { color: var(--af-link); }
	.af-menu > li:last-child > a { padding-right: 0; }
}
/* keep the right-most flyouts on screen */
.af-menu > li:nth-last-child(-n+3) .sub-menu .sub-menu { left: auto; right: 100%; }

@media (max-width: 921px) {
	/* Astra's mobile header: 76 px logo row; the open menu is a full-width list under it */
	.af-header__bar { flex-wrap: wrap; min-height: 76px; padding: 0 20px; }
	.af-logo { display: flex; align-items: center; height: 76px; }
	.af-menu-toggle, .af-menu-close {
		display: flex; align-items: center; justify-content: center; width: 44px; height: 49px;
		color: var(--af-theme);
	}
	.af-menu-toggle { order: 1; }
	.af-menu-toggle__bars, .af-menu-toggle__bars::before, .af-menu-toggle__bars::after {
		display: block; width: 18px; height: 2px; background: currentColor; content: "";
	}
	.af-menu-toggle__bars { position: relative; }
	.af-menu-toggle__bars::before { position: absolute; top: -5px; }
	.af-menu-toggle__bars::after { position: absolute; top: 5px; }
	.af-menu-close__x { position: relative; width: 16px; height: 16px; }
	.af-menu-close__x::before, .af-menu-close__x::after {
		content: ""; position: absolute; top: 7px; left: 0; width: 16px; height: 2px; background: currentColor; transform: rotate(45deg);
	}
	.af-menu-close__x::after { transform: rotate(-45deg); }
	/* scroll-margin stops the #af-nav jump from scrolling the header away */
	.af-nav {
		display: none; order: 2; flex: 0 0 calc(100% + 40px); margin: 0 -20px;
		border-top: 1px solid #ddd; background: #f9f9f9; scroll-margin-top: 100vh;
	}
	.af-nav:target { display: block; }
	.af-nav:target ~ .af-menu-toggle { display: none; }
	.af-nav:target .af-menu-close { position: absolute; top: 13.5px; right: 20px; }
	.af-menu { display: block; }
	.af-menu a, .af-menu > li > a, .af-menu .sub-menu a, .af-menu .af-mega .sub-menu .sub-menu a {
		display: block; height: auto; padding: 0 20px; border-bottom: 1px solid #ddd;
		font-size: 13.68px; line-height: 3;
	}
	.af-menu .sub-menu, .af-menu .sub-menu .sub-menu, .af-menu > .af-mega > .sub-menu {
		position: static; display: block; width: auto; padding: 0; visibility: visible; opacity: 1; transform: none;
		border: 0; background: none; box-shadow: none; transition: none;
	}
	.af-mega > .sub-menu > li, .af-mega > .sub-menu > li:first-child, .af-mega > .sub-menu > li:last-child { padding: 0; }
	.af-menu > .af-mega { position: relative; }
	.af-menu .af-mega > .sub-menu > li > a { padding: 0 20px 0 30px; font-size: 13.68px; font-weight: 400; }
	.af-menu .sub-menu a { padding-left: 30px; }
	.af-menu .sub-menu .sub-menu a, .af-menu .af-mega .sub-menu .sub-menu a { padding-left: 40px; }
	/* ">" before every submenu item */
	.af-menu .sub-menu a::before {
		content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 13px 1px 1px;
		border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(-45deg); vertical-align: middle;
	}
	.af-menu > li > a { padding-left: 25px; }
	.af-menu .af-mega .sub-menu .af-icon-star > a, .af-menu .af-mega .sub-menu .af-icon-list > a { display: flex; align-items: center; }
	.af-menu .af-icon-star > a::before, .af-menu .af-icon-list > a::before { order: -2; margin-bottom: 0; }
	.af-menu .menu-item-has-children > a::after, .af-menu .sub-menu .menu-item-has-children > a::after { display: none; }
	/* accordion: chevron buttons (inc/template-tags.php), li.af-open set by the header script */
	.af-nav--js .sub-menu, .af-nav--js .sub-menu .sub-menu, .af-nav--js .af-mega > .sub-menu { display: none; }
	.af-nav--js .af-open > .sub-menu, .af-nav--js .af-mega.af-open > .sub-menu { display: block; }
	.af-menu .af-open > a { color: var(--af-link); }
	.af-nav--js .af-sub-toggle {
		display: block; position: absolute; top: 0; right: 20px; width: 35.5px; height: 41px;
		padding: 0; border: 0; background: none; color: var(--af-chrome-text); cursor: pointer;
	}
	.af-sub-toggle::before {
		content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -9px 0 0 -5.5px;
		border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
	}
	.af-open > .af-sub-toggle::before { margin-top: -3px; transform: rotate(-135deg); }
}

/* 4. Hero (templates/hero.php, printed by af_sheet_open()) ----------------------
   The maroon band, left-aligned on the sheet's text edge; the eyebrow (§14) over the title; the
   sheet overlaps its bottom by --af-sheet-lift. */
.af-hero {
	padding: 64px max(var(--af-sheet-gutter) + var(--af-sheet-pad), 50% - var(--af-panel-width) / 2 + var(--af-sheet-pad)) calc(48px + var(--af-sheet-lift));
	background: linear-gradient(180deg, var(--af-hero-from) 0%, var(--af-hero-to) 11%);
}
.af-hero__title { max-width: 24ch; margin: 0; color: #fff; font: 700 clamp(34px, 1.55rem + 1.9vw, 48px)/1.1 var(--af-font-slab); letter-spacing: -.012em; text-wrap: balance; }
/* A post's tags: one small white line under the title, tag icon first. */
.af-hero__tags { margin: 14px 0 0; color: rgba(255, 255, 255, 0.85); font: 400 15px/1.65 var(--af-font); }
.af-hero__tags .af-icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -1px; }
.af-hero__tags a { color: inherit; text-decoration: none; }
.af-hero__tags a:hover, .af-hero__tags a:focus-visible { color: #fff; text-decoration: underline; }

/* 5. Page content (post_content of pages and posts; always inside the sheet, §14) -- */
.af-content, .af-posts { color: var(--af-text); font: 400 var(--af-fs)/1.7 var(--af-font); overflow-wrap: break-word; } /* long URLs wrap on phones */
.af-content { display: flow-root; } /* holds the split layout's floats */
.af-content > :first-child { margin-top: 0; }
/* headings: h2 opens a section (§14), h3 a sub-section, h4-h6 a run-in label */
.af-content h1, .af-content h2, .af-content h3, .af-content h4, .af-content h5, .af-content h6 { color: var(--af-primary); font-family: var(--af-font); font-weight: 600; }
.af-content > h3 { margin: 40px 0 12px; font: 600 20px/1.3 var(--af-font-slab); }
.af-content > :is(h4, h5, h6) { margin: 32px 0 8px; font-size: inherit; line-height: 1.4; }
.af-content .wp-block-heading a { color: inherit; }
.af-content a:hover { text-decoration: underline; }
.af-content img { vertical-align: middle; }
.af-content figure { margin: 0 0 20px; }
/* lists without a block style; the styled ones (§14) set their own padding */
.af-content > :where(ul, ol) { margin: 0 0 24px; padding-left: 1.5em; }
.af-content blockquote { margin: 0 0 24px; padding: 4px 0 4px 24px; border-left: 3px solid var(--af-tan); }
.af-content blockquote > :last-child { margin-bottom: 0; }
.af-content table { width: 100%; margin: 0 0 1.5em; border-collapse: collapse; }
/* .wp-block-table variant: core's table block CSS (.wp-block-table td, loaded later) would win otherwise */
.af-content th, .af-content td,
.af-content .wp-block-table th, .af-content .wp-block-table td { padding: 0.7em 1em; border: 1px solid var(--af-line); text-align: left; }
.af-content hr, .af-content .wp-block-separator { margin: 20px auto; border: 0; border-top: 1px solid var(--af-line); }
.af-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.af-content .wp-block-buttons { gap: 10px; margin-bottom: 20px; }
.af-content .wp-block-embed { margin: 0 0 20px; }
/* password-protected pages: core's form (a sentence, then the field and its button, 48 px tall;
   nothing below them, so the inset is the same above and below) */
.post-password-form p { max-width: var(--af-measure); }
.post-password-form > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 0; }
.post-password-form input { height: 48px; border-radius: var(--af-radius-control); font: 400 16px var(--af-font); vertical-align: middle; }
.post-password-form input[type="password"] { width: 240px; max-width: 100%; padding: 0 14px; border: 1px solid #ccc; color: var(--af-text); }
.post-password-form input[type="submit"] { padding: 0 24px; border: 0; background: var(--af-accent); color: #fff; font-weight: 500; cursor: pointer; }
.post-password-form input[type="submit"]:hover, .post-password-form input[type="submit"]:focus { background: var(--af-primary); }
.af-pdf-warning { padding: 10px 14px; border-left: 4px solid #d63638; background: #fcf0f1; color: #3c434a; font: 14px/1.5 var(--af-font-system); }

/* Read More (core/details.is-style-af-readmore, hubs): the lead paragraph above it, the rest of
   the intro inside; the summary is a quiet maroon line with a chevron (48 px tall to tap). Open, it
   reads "Read Less" and sits below the text (summary must stay the first child, so it is lifted to
   the bottom of the block). */
.is-style-af-readmore { margin: -8px 0 32px; }
.is-style-af-readmore > p { max-width: var(--af-measure); margin: 0 0 16px; }
.is-style-af-readmore > summary {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; list-style: none;
	color: var(--af-link); font: 500 16px/1.2 var(--af-font); cursor: pointer;
}
.is-style-af-readmore > summary:hover { color: var(--af-link-hover); text-decoration: underline; }
.is-style-af-readmore > summary::-webkit-details-marker { display: none; }
.is-style-af-readmore > summary::after {
	content: ""; width: 7px; height: 7px; margin-top: -4px;
	border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.is-style-af-readmore[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.af-readmore__less, [open] > summary > .af-readmore__more { display: none; }
[open] > summary > .af-readmore__less { display: inline; }
.is-style-af-readmore[open] { position: relative; padding: 8px 0 48px; }
.is-style-af-readmore[open] > summary { position: absolute; bottom: 0; left: 0; }

/* 7. Lists of posts (af_post_list(): listings, archives, search) and the search forms ---------
   One row per post: the slab title links the whole row (stretched link, below), the excerpt under
   it, hairlines between rows. .af-posts' -24px margins cancel the first and last row's padding, so
   the gaps around the list are the neighbours' margins. */
.af-listing__intro { margin-bottom: 40px; } /* a listing's intro, a category's description */
.af-posts { margin: -24px 0; }
.af-post { --af-hit: 8px -16px; position: relative; padding: 24px 0; }
.af-post + .af-post { border-top: 1px solid var(--af-line); }
.af-post__title { margin: 0; color: var(--af-primary); font: 600 22px/1.3 var(--af-font-slab); text-wrap: balance; }
.af-post__title a { color: inherit; }
.af-post__title a:hover { text-decoration: underline; text-underline-offset: .15em; }
/* stretched link (post rows, linked tiles §14): the title's link covers the box (inset --af-hit) */
:is(.af-post__title, .is-style-af-card .wp-block-heading) a::after { content: ""; position: absolute; inset: var(--af-hit); border: 1px solid transparent; border-radius: var(--af-radius); }
:is(.af-post__title, .is-style-af-card .wp-block-heading) a:hover::after { background: var(--af-tint); }
:is(.af-post__title, .is-style-af-card .wp-block-heading) a:focus-visible { outline: 0; }
:is(.af-post__title, .is-style-af-card .wp-block-heading) a:focus-visible::after { outline: 2px solid var(--af-theme); outline-offset: 2px; }
.af-post__excerpt { max-width: var(--af-measure); margin-top: 8px; }
.af-post__excerpt > * { margin: 0; } /* manual excerpts may hold paragraphs and lists */
.af-post__excerpt > * + * { margin-top: 8px; }
.af-post__excerpt :is(ul, ol) { padding-left: 1.5em; }
/* pagination: 44 px boxes, the current page filled */
.af-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; font: 500 16px/1 var(--af-font); }
.af-pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; line-height: 42px; text-align: center; border: 1px solid var(--af-line); border-radius: var(--af-radius); color: var(--af-link); }
.af-pagination a:hover { border-color: var(--af-primary); background: var(--af-tint); color: var(--af-primary); }
.af-pagination .current { border-color: var(--af-primary); background: var(--af-primary); color: #fff; }
.af-pagination .dots { min-width: 0; padding: 0 4px; border-color: transparent; }
/* the search forms (searchform.php: 404, no results; a listing's ?q= box): 48 px, left-aligned */
.af-searchform { display: flex; max-width: 400px; height: 48px; margin: 0 0 40px; }
.af-searchform input {
	flex: 1; min-width: 0; padding: 0 14px; border: 1px solid var(--af-field-line); border-right: 0; border-radius: var(--af-radius-control) 0 0 var(--af-radius-control);
	background: #fff; color: var(--af-text); font: 400 16px var(--af-font); appearance: none;
}
.af-searchform button { flex: none; width: 48px; border: 0; border-radius: 0 var(--af-radius-control) var(--af-radius-control) 0; background: var(--af-accent); color: #fff; font-size: 16px; cursor: pointer; }
.af-searchform button:hover, .af-searchform button:focus { background: var(--af-primary); }

/* 9. Front page ----------------------------------------------------------- */
.af-front-hero {
	display: flex; flex-direction: column; align-items: center; min-height: 90vh; padding: 25px 20px 83px;
	background: #20000d url("../img/mountains.svg") top center / cover no-repeat;
	text-align: center;
}
.af-front-hero__logo { width: 100%; max-width: 1120px; margin: 25px 0 17px; line-height: 0; }
.af-front-hero__logo img { width: 100%; height: 17vh; object-fit: contain; }
.af-phone, .af-address { margin: 0; color: #6f0533; font: 700 30px/1.3 var(--af-font-rufina); text-align: center; }
.af-phone a { color: inherit; }
.af-address { margin-top: 20px; font-size: 20px; }
.af-front-hero__person { margin-top: 30px; }
.af-front-hero__portrait { display: block; width: auto; height: 45vh; margin: 0 auto; object-fit: contain; }
.af-picture { display: contents; } /* af_picture(): the WebP <picture> wrapper; its <img> lays out as before */
.af-front-hero__name {
	margin: 20px 0 0; color: #fff; font: 600 32px/1.3 var(--af-font);
	text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.93);
}
/* The dark block below the hero: welcome, services, then the skyline that closes it. Its three colours
   are custom properties: here mountains.svg's (the hero without JavaScript; #1e000e is its ground, so
   the hero runs into the block); with JavaScript hero.css sets each to the time-of-day palette's
   (tools/hero/src/config.js: ground, near, accent). */
.af-front { --af-front-ground: #1e000e; --af-front-hills: #3a001a; --af-front-accent: #f0af9a; }
.af-front-welcome, .af-front-services { background: var(--af-front-ground); color: #fff; font: 400 var(--af-fs)/1.65 var(--af-font); }
.af-front-welcome { padding: 34px max(20px, calc(50% - 560px)) 10px; }
.af-front-welcome h2 { margin: 0 0 18px; color: #fff; font: 800 36px/1.3 var(--af-font-slab); text-align: center; }
/* the hero's ringed sun, half risen on a hairline (inline SVG in front-page.php) */
.af-front-rule { margin: -4px 0 22px; color: var(--af-front-accent); line-height: 0; text-align: center; }
.af-front-welcome p { max-width: 760px; margin: 0 auto 34px; font-size: 17px; line-height: 1.7; text-align: center; }
.af-front-services {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px;
	padding: 20px max(20px, calc(50% - 560px)) 70px;
}
/* a service icon: its drawing (assets/img/icon-*.svg) as a mask over the accent colour */
.af-front-services__icon {
	display: block; width: 90px; height: 90px; margin: 0 auto 20px; background: var(--af-front-accent);
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
	-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.af-front-services__icon--brain { -webkit-mask-image: url("../img/icon-brain.svg"); mask-image: url("../img/icon-brain.svg"); }
.af-front-services__icon--testimony { -webkit-mask-image: url("../img/icon-testimony.svg"); mask-image: url("../img/icon-testimony.svg"); }
.af-front-services__icon--court { -webkit-mask-image: url("../img/icon-court.svg"); mask-image: url("../img/icon-court.svg"); }
.af-front-services__item h3 { margin: 0 0 20px; color: #fff0eb; color: color-mix(in srgb, var(--af-front-accent) 18%, #fff); font: 600 26px/1.3 var(--af-font); text-align: center; }
.af-front-services__item ul { margin: 0 0 1.5em 1.4em; }
.af-front-services__item p { margin-bottom: 1.5em; }

/* The skyline: the dark block ends in the hero's near hills, and the map section's tan rises into it as
   the hero's ground line with a few saguaros. Two mask tiles (black on transparent; their width/height
   is the size drawn here), each repeated along the top of its layer, flat colour under it; phones draw
   both at 70 %. The inset shadow keeps the foot tan when the page sits on a half pixel. */
.af-front-skyline { position: relative; height: 124px; overflow: hidden; background: var(--af-front-ground); box-shadow: inset 0 -2px var(--af-tan); }
.af-front-skyline::before, .af-front-skyline::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; }
.af-front-skyline::before { /* hills: 777 x 90 px tile, 26 px of hill under it; 8 px of sky over the tallest */
	height: 116px; background: var(--af-front-hills);
	-webkit-mask: url("../img/front-skyline-hills.svg") 180px 0 repeat-x, linear-gradient(#000, #000) 0 100% / 100% 27px no-repeat;
	mask: url("../img/front-skyline-hills.svg") 180px 0 repeat-x, linear-gradient(#000, #000) 0 100% / 100% 27px no-repeat;
}
.af-front-skyline::after { /* ground and saguaros: 1195 x 94 px tile */
	height: 94px; background: var(--af-tan);
	-webkit-mask: url("../img/front-skyline-saguaros.svg") 40px 0 repeat-x; mask: url("../img/front-skyline-saguaros.svg") 40px 0 repeat-x;
}

/* "Find us" (templates/contact-block.php), on tan under the skyline. Left: heading, address, directions,
   links, and the building as a Polaroid (white frame over a flat card turned the other way, like the
   portrait in the hero). Right: the map box, which fills the row's height. */
.af-contact-block { padding: 44px 20px 96px; background: var(--af-tan); color: #330013; font: 400 17px/1.6 var(--af-font); }
.af-contact-block__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; max-width: 1120px; margin: 0 auto; }
.af-contact-block h2 { margin: 0 0 16px; color: var(--af-primary); font: 800 36px/1.2 var(--af-font-slab); }
.af-contact-block__address { margin: 0 0 18px; font: 700 23px/1.35 var(--af-font-rufina); }
.af-contact-block__directions { max-width: 30em; margin: 0 0 20px; }
.af-contact-block__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; font-weight: 500; }
.af-contact-block__links span a { color: var(--af-accent); }
.af-polaroid { position: relative; width: 300px; margin: 44px 0 0 14px; padding: 12px 12px 0; transform: rotate(-3deg); }
/* its own stacking context (the transform), so both sit under the photo: the card, then the white frame */
.af-polaroid::before, .af-polaroid::after { content: ""; position: absolute; inset: 0; }
.af-polaroid::before { z-index: -2; background: #c9a57b; transform: rotate(6deg) translate(6px, 4px); }
.af-polaroid::after { z-index: -1; background: #fffdf8; }
.af-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.af-polaroid figcaption { padding: 10px 0 12px; color: var(--af-footer); font: 700 16px/1.3 var(--af-font-rufina); text-align: center; }
.af-contact-block__map { display: block; width: 100%; height: 300px; margin-bottom: 30px; border: 0; }
.af-contact-block .af-contact-block__map { height: 100%; min-height: 440px; margin: 0; border: 1px solid #d6bf9c; border-radius: var(--af-radius); }
/* the map waits for a click (templates/map-facade.php); same box. The contact page's: .af-visit (§14) */
.af-map-facade {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
	padding: 20px; border: 1px solid #d6bf9c; background: #f3e8d6; text-align: center;
}
.af-map-facade__load[hidden] { display: none; }
.af-map-facade__note { margin: 0; color: #4b4f58; font: 400 14px/1.5 var(--af-font); }
/* the front page's: a pin on a plain street grid (decoration), the button and the note on a plate */
.af-contact-block .af-map-facade { gap: 18px; background: #f3e8d6 url("../img/front-map-streets.svg") center / cover no-repeat; }
.af-map-facade__pin { color: #710d3a; line-height: 0; }
.af-map-facade__pin .af-icon { width: 63px; height: 56px; }
.af-map-facade__plate { display: grid; justify-items: center; gap: 10px; padding: 18px 26px 16px; border: 1px solid #d6bf9c; border-radius: var(--af-radius); background: #f8f0e2; }
.af-map-facade__plate:has(> [hidden]) { display: none; } /* no JavaScript, no "Load map": "Open in Google Maps" does the job */

@media (max-width: 767px) {
	.af-front-hero { min-height: 0; background-position: top right; }
	.af-front-hero__portrait { display: none; }
	.af-phone { font-size: 30px; }
	.af-front-services { grid-template-columns: 1fr; }
	.af-front-welcome h2 { font-size: 30px; }
	.af-front-welcome p { font-size: 15px; }
	.af-front-rule svg { width: 200px; height: auto; }
	.af-front-skyline { height: 87px; }
	.af-front-skyline::before { height: 81px; }
	.af-front-skyline::before { -webkit-mask-size: 544px auto, 100% 19px; mask-size: 544px auto, 100% 19px; -webkit-mask-position: 126px 0, 0 100%; mask-position: 126px 0, 0 100%; }
	.af-front-skyline::after { height: 66px; -webkit-mask-size: 837px auto; mask-size: 837px auto; -webkit-mask-position: 28px 0; mask-position: 28px 0; }
}

/* 10. PDF card ([af_pdf]) ------------------------------------------------ */
/* one bordered box like a tile: title, facts, then Open / Download (48 px) */
.af-pdf {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 20px; padding: 16px 20px;
	border: 1px solid var(--af-line); border-radius: var(--af-radius); background: #fff; font-family: var(--af-font);
}
.af-pdf__body { flex: 1 1 280px; }
.af-pdf__title { margin: 0; color: var(--af-primary); font-size: 17px; font-weight: 600; line-height: 1.35; }
.af-pdf__desc { margin: 4px 0 0; color: var(--af-text); font-size: 14px; line-height: 1.5; }
.af-pdf__facts { margin: 4px 0 0; color: #6b6b6b; font-size: 13px; line-height: 1.5; }
.af-pdf__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* view="inline": assets/css/af-pdf-viewer.css (loaded only then) turns the card into the viewer's frame. */
.af-pdf-link__facts { color: #6b6b6b; font-size: .9em; white-space: nowrap; }

/* 11. Forms: presentation lives in assets/css/af-forms.css, loaded only on form pages.
   The plugin supplies semantic controls, behavior and accessibility helpers. */

/* 12. Print -------------------------------------------------------------- */
@media print {
	.af-header, .af-footer, .af-searchform, .af-pagination, .af-section-nav { display: none; }
	body { background: #fff; }
	.af-hero, .af-hero.af-hero--land { padding: 10px 0; background: none; } /* 0,2,0 beats §14's land hero */
	.af-hero__title, .af-hero__tags, .af-hero .af-eyebrow, .af-hero .af-hero__lead { color: #000; } /* 0,2,0: §14 comes later */
	.af-main > .af-sheet { margin-top: 0; padding: 0; box-shadow: none; } /* no lift over the hero on paper */
}

/* Footer ------------------------------------------------------------------ */
.af-footer { padding: 40px 20px; background: var(--af-footer); color: #fff; text-align: center; }
.af-footer p { margin: 0; font: 400 var(--af-fs)/1.86 var(--af-font-system); }

/* 13. Tablets and phones: Astra's 85.5 % root (13.68 px text) below 922 px, and the
   Elementor mobile sizes and 10 px gutters of the front page. */
@media (max-width: 921px) {
	:root { --af-fs: 13.68px; }
	.af-footer { padding: 36.48px 20px; }
	.af-footer p { line-height: 1.857; }
	.af-front-hero { padding: 25px 10px 70px; }
	.af-front-hero__logo { margin-top: 10px; }
	.af-front-welcome { padding-left: 10px; padding-right: 10px; }
	.af-front-services { padding-left: 10px; padding-right: 10px; }
	.af-front-services__item h3 { font-size: 20px; }
	.af-front-services__item p { margin-bottom: 1.6em; }
	.af-front-hero__name { font-size: 25px; }
	/* "Find us" in one column: text, map, then the Polaroid */
	.af-contact-block { padding: 44px 10px 80px; font-size: 16px; }
	.af-contact-block__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.af-contact-block__text { display: contents; }
	.af-contact-block__mapbox { order: 1; margin-top: 30px; }
	.af-contact-block .af-contact-block__map { height: 320px; min-height: 0; }
	.af-polaroid { order: 2; justify-self: center; width: min(300px, 78vw); margin: 44px 0 0; }
	.af-contact-block h2 { font-size: 30px; }
	.af-contact-block__address { font-size: 21px; }
}
@media (max-width: 767px) {
	.af-front-hero__person { margin-top: 30px; }
	.af-front-hero__name { margin-top: 0; }
	.af-front-services__icon { width: 93px; height: 93px; }
}
@media (max-width: 544px) {
	.af-footer { padding: 27.36px 20px; }
}

/* 14. The sheet (af_sheet_open(): every page but the front page; contract: theme
   README, "The sheet") -- the white sheet lifted over the hero (§4): post_content (.af-content, each
   h2 opens a section) and an optional aside (.af-aside); page-sheet.php without an aside is
   .af-sheet--split. */
.af-eyebrow { display: block; margin: 0 0 6px; color: var(--af-link); font: 600 13px/1.3 var(--af-font); letter-spacing: .16em; text-transform: uppercase; }
.af-hero .af-eyebrow { margin-bottom: 12px; color: var(--af-tan); }
.af-sheet {
	--af-fs: 17px;
	position: relative; /* paints over the hero */
	display: flow-root;
	max-width: min(var(--af-panel-width), 100% - 2 * var(--af-sheet-gutter));
	margin: calc(-1 * var(--af-sheet-lift)) auto 64px;
	padding: var(--af-sheet-pad);
	border-radius: var(--af-radius);
	background: #fff;
	box-shadow: 0 1px 2px rgba(69, 0, 26, .06), 0 28px 56px -32px rgba(69, 0, 26, .5);
}
/* Sibling service links sit above the content in both basic and listing sheets. */
.af-section-nav { margin-bottom: 48px; }
.af-section-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.af-section-nav a {
	display: grid; grid-template-rows: 85px 1fr; align-items: center; justify-items: center; gap: 16px; height: 100%; padding: 24px 16px;
	border: 2px solid var(--af-line); border-radius: var(--af-radius); color: var(--af-link);
	font: 500 16px/1.4 var(--af-font); text-align: center; text-wrap: balance;
}
.af-section-nav img { flex: none; display: block; width: 85px; height: 85px; object-fit: contain; }
.af-section-nav a:hover { border-color: var(--af-link); background: var(--af-tint); }
.af-section-nav a[aria-current="page"] { border-color: var(--af-link); background: var(--af-tint); font-weight: 700; }
@media (max-width: 767px) {
	.af-section-nav { margin-bottom: 32px; }
	.af-section-nav ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.af-section-nav a { display: flex; justify-content: flex-start; padding: 16px; text-align: left; }
	.af-section-nav img { width: 64px; height: 64px; }
}
.af-sheet .af-content > p { max-width: var(--af-measure); margin: 0 0 16px; }
.af-sheet .af-content > :where(ol, ul:not([class*="is-style-af"]), h3, h4, h5, h6, blockquote) { max-width: var(--af-measure); }
.af-sheet .af-content > h2 { margin: 0 0 32px; font: 600 26px/1.25 var(--af-font-slab); text-wrap: balance; }
.af-sheet .af-content > * + h2 { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--af-line); }
.af-sheet .af-content > :last-child { margin-bottom: 0; } /* only the padding below, as above */
/* running-text links: underlined (maroon on near-black is only 1.8:1) */
.af-sheet p a, .is-style-af-ticks a { text-decoration: underline; text-underline-offset: .2em; }
.is-style-af-intro { font-size: 19px; line-height: 1.65; }
.af-sub { color: var(--af-chrome-text); }
/* Topic header: an always-visible overview and a
   bulleted reading guide. Content supplies the subject; these classes are reusable on hubs. */
.af-topic-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.af-topic-intro__overview > h2 { margin: 0 0 20px; color: var(--af-primary); font: 600 30px/1.3 var(--af-font-slab); text-wrap: balance; }
.af-topic-intro__overview > p { margin: 0 0 20px; }
.af-topic-intro__guide { padding: 30px; border-radius: var(--af-radius); background: var(--af-tan-pale); }
.af-topic-intro__points { margin: 0; padding: 0; list-style: none; }
.af-topic-intro__points li { position: relative; padding-left: 22px; }
.af-topic-intro__points li::before { content: ""; position: absolute; top: 9px; left: 0; width: 7px; height: 7px; border: 1.5px solid var(--af-link); transform: rotate(45deg); }
.af-topic-intro__points li + li { margin-top: 22px; }
.af-topic-intro__points h3 { margin: 0 0 7px; color: var(--af-primary); font: 600 18px/1.4 var(--af-font-slab); }
.af-topic-intro__points p { margin: 0; font-size: 16px; line-height: 1.6; }
.af-topic-intro__context { grid-column: 1 / -1; }
.af-topic-intro__context > p { max-width: var(--af-measure); margin: 0 0 20px; }
.af-topic-intro__context > :last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
	.af-topic-intro { gap: 32px; }
	.af-topic-intro__guide { padding: 24px; }
	.af-topic-intro__overview > h2 { font-size: 27px; }
}
@media (max-width: 767px) {
	.af-topic-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.af-topic-intro__overview > h2 { font-size: 26px; }
	.af-topic-intro__guide { padding: 24px 20px; }
}
@media print {
	.af-topic-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.af-topic-intro__guide { padding: 20px; border: 1px solid var(--af-line); background: none; }
	.af-topic-intro__points li { break-inside: avoid; }
}
.is-style-af-ticks { columns: 2; column-gap: 48px; padding: 0; list-style: none; }
.af-sheet--split .is-style-af-ticks { columns: 1; }
.is-style-af-ticks li { position: relative; padding: 6px 0 6px 26px; break-inside: avoid; }
.is-style-af-ticks li::before { content: ""; position: absolute; top: calc(.85em + 1px); left: 2px; width: 8px; height: 8px; border: 2px solid var(--af-link); transform: rotate(45deg); }
.is-style-af-topics { display: grid; gap: 2px; padding: 0; list-style: none; }
.is-style-af-topics li { padding: 8px 10px; }
.is-style-af-topics a { display: block; margin: -8px -10px; padding: 8px 10px; border-radius: var(--af-radius); transition: color .15s, background-color .15s; }
.is-style-af-topics a:hover, .is-style-af-topics a:focus-visible { background: var(--af-tint); color: var(--af-primary); text-decoration: none; }
.is-style-af-doclinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.is-style-af-doclinks a {
	display: flex; align-items: center; gap: 12px; height: 100%; min-height: 56px; padding: 14px 18px;
	border: 1px solid var(--af-line); border-radius: var(--af-radius); color: var(--af-primary); font-weight: 500; line-height: 1.35;
	transition: border-color .15s, background-color .15s;
}
.is-style-af-doclinks a::before { /* arrow */
	content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: var(--af-arrow) center / contain no-repeat; mask: var(--af-arrow) center / contain no-repeat;
	--af-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-7 7 7-7 7'/%3E%3C/svg%3E");
}
.is-style-af-doclinks a:hover { border-color: var(--af-primary); background: var(--af-tint); text-decoration: none; }
.is-style-af-doclinks .af-sub { margin-left: auto; font-size: 13px; font-weight: 400; }
/* The card grid (group.is-style-af-cards > group.is-style-af-card: icon, title, text, buttons) is ONE
   layout, bordered tiles: 2 across (3 or 5+: 3 from 1024 px, 22 px titles). Rows: icon, title, text (1fr),
   buttons, so the buttons of a row share its bottom line; with text, from 768 px a row's tiles share
   these rows (subgrid). A linked title makes the whole tile its link (§7). 48 px around the grid,
   except at the sheet's edges and before an h2 (its hairline has 64 px). */
.af-sheet .is-style-af-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.af-sheet .af-content > * + .is-style-af-cards, .af-sheet .af-content > .is-style-af-cards + :not(h2) { margin-top: 48px; }
.af-sheet .is-style-af-cards:has(> :nth-child(3):last-child, > :nth-child(5)) { --af-tile-title: 22px; --af-span: 2; }
.af-sheet .is-style-af-card { --af-hit: -1px; position: relative; display: grid; grid-template-rows: auto auto 1fr; padding: 28px 16px 16px; border: 1px solid var(--af-line); border-radius: var(--af-radius); text-align: center; }
.af-sheet .is-style-af-card > * { margin: 0 0 20px; }
.af-sheet .is-style-af-card > :where(:last-child) { margin-bottom: 0; } /* a last paragraph keeps its 20 px */
.af-sheet .is-style-af-card > .wp-block-heading:last-child { margin-bottom: 12px; } /* title only: 28 px below it, as above the icon */
.af-sheet .is-style-af-card img { display: block; width: auto; height: 85px; margin: 0 auto; object-fit: contain; }
.af-sheet .is-style-af-card .wp-block-heading { font: 600 var(--af-tile-title, 28px)/1.2 var(--af-font-slab); text-wrap: balance; }
.af-sheet .is-style-af-card .wp-block-heading a:hover { text-decoration: none; }
.af-sheet .is-style-af-card .wp-block-heading a:hover::after { border-color: var(--af-primary); }
.af-sheet .is-style-af-card p { margin-bottom: 20px; text-align: left; text-wrap: pretty; }
.af-sheet .is-style-af-card .wp-block-buttons { position: relative; grid-row: 4; align-self: end; justify-self: center; justify-content: center; width: 100%; max-width: 280px; } /* relative: above a linked title */
@media (min-width: 768px) {
	.af-sheet .is-style-af-cards:has(p) > * { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) { /* 2 across: an odd last tile is centred (8px = half the gap) */
	.af-sheet .is-style-af-cards > :nth-child(odd):last-child { grid-column: span 2; justify-self: center; width: calc(50% - 8px); }
}
.af-sheet .is-style-af-card .wp-block-button { flex: 1; }
.af-sheet .is-style-af-card .wp-block-button__link { padding-inline: 8px; } /* two fit a 3-across tile at 1024 px */
.af-sheet .wp-block-button__link, .af-pdf .af-button { font-size: 16px; line-height: 24px; } /* 48 px tall */
/* with an aside (singular.php adds .af-sheet--aside): content + a 258 px sticky column */
.af-sheet--aside { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr); grid-auto-columns: 258px; gap: 64px; align-items: start; }
.af-aside { position: sticky; top: 24px; }
/* the portrait: af_picture()'s <picture> is a block here (display: contents would make its <source> a grid cell) */
.af-aside > :first-child { display: block; margin-bottom: 32px; }
.af-aside img { display: block; width: 100%; border-radius: var(--af-radius); box-shadow: 10px 10px 0 var(--af-tan-pale); }
.af-aside h2 { margin: 0 0 12px; color: var(--af-primary); font: 600 18px/1.3 var(--af-font-slab); }
.af-facts { display: grid; margin: 0; }
.af-facts div { padding: 12px 0; border-bottom: 1px solid var(--af-line); }
.af-facts dt { color: var(--af-primary); font: 700 28px/1.1 var(--af-font-slab); }
.af-facts dd { margin: 4px 0 0; font: 400 15px/1.45 var(--af-font); }
/* The landscape hero (af_hero_art: .af-hero--land, a lead line .af-hero__lead): dark text on the sky
   (--af-sky, §1), the art (--af-hero-art, set by inc/assets.php) standing on the sheet's top edge at a
   fixed height (--af-art-h), its dark ground running on behind the lifted sheet. The art is a 2000 x 220
   SVG whose highest point is 190 units above its bottom (the clear line); the text stays above it. */
.af-hero--land {
	--af-art-h: max(260px, 13vw); /* 13vw: the 2000-unit art always spans the viewport */
	padding-bottom: calc(var(--af-sheet-lift) + var(--af-art-h) * 190 / 220 + 32px);
	background:
		var(--af-hero-art) no-repeat center bottom var(--af-sheet-lift) / auto var(--af-art-h),
		linear-gradient(#1e000e, #1e000e) no-repeat center bottom / 100% calc(var(--af-sheet-lift) + 2px) /* the art's ground */
		var(--af-sky);
}
.af-hero--land .af-eyebrow { color: var(--af-link); }
.af-hero--land .af-hero__title { color: var(--af-primary); }
.af-hero__lead { max-width: 36em; margin: 16px 0 0; color: rgba(255, 255, 255, .85); font: 400 19px/1.6 var(--af-font); text-wrap: pretty; }
.af-hero--land .af-hero__lead { color: var(--af-text); }
/* A sign-up form (core/html: form.af-signup-form > h2 + .af-signup-form__fields; the email field and
   Subscribe in .af-signup-form__row). From 1024 px its h2 and fields sit on the split sheet's columns. */
.af-signup-form { display: grid; gap: 24px; margin: 0 0 16px; }
.af-signup-form h2 { margin: 0 0 16px; font: 600 clamp(26px, 2.5vw, 32px)/1.2 var(--af-font-slab); text-wrap: balance; }
.af-signup-form p { margin: 0; }
.af-signup-form label { display: block; margin: 0 0 8px; font-weight: 500; }
.af-signup-form input:not([type="submit"]) { display: block; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--af-field-line); border-radius: var(--af-radius-control); background: #fff; color: var(--af-text); font: 17px var(--af-font); }
/* the call to action: a 72 px field with Subscribe beside it */
.af-signup-form__row { display: flex; gap: 12px; }
.af-signup-form__row input:not([type="submit"]) { flex: 1; min-width: 0; height: 72px; padding: 0 20px; border: 2px solid var(--af-primary); border-radius: 4px; font-size: 22px; }
.af-signup-form__row input:focus-visible { outline-width: 3px; outline-offset: 3px; } /* clear of the maroon border */
.af-signup-form__row [type="submit"] { flex: none; height: 72px; padding: 0 24px; border-radius: 4px; font-size: 18px; }
.af-signup-form__fields > .af-sub { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.af-signup-form summary { margin-top: 8px; padding: 10px 0; color: var(--af-link); font-weight: 500; cursor: pointer; }
.af-signup-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 8px 0 0; padding: 0; border: 0; }
.af-signup-form fieldset p:last-child { grid-column: 1 / -1; } /* Title: full width until we know what it holds */
.af-signup-form fieldset label { font-weight: 400; }
/* core/latest-posts (Doc-Talk's past issues): hairline rows, title then date; the first title is level with its h2 */
.af-sheet .wp-block-latest-posts__list { margin: 0 0 16px; padding: 0; list-style: none; }
.af-sheet .wp-block-latest-posts__list li { padding-bottom: 12px; }
.af-sheet .wp-block-latest-posts__list li + li { padding-top: 12px; border-top: 1px solid var(--af-line); }
.af-sheet .wp-block-latest-posts__post-title { display: block; margin: -10px 0; padding: 10px 0; color: var(--af-primary); font-weight: 500; line-height: 1.4; } /* 44 px+ target */
.af-sheet .wp-block-latest-posts__post-date { display: block; margin-top: 4px; color: var(--af-chrome-text); font-size: 15px; }
@media (min-width: 1024px) {
	/* no aside: an h2 floats left and its blocks float right, one below the other; the next h2
	   clears both. The card grid (full width) goes before the first h2. */
	.af-sheet--split .af-content > * { float: right; clear: right; width: 520px; }
	.af-sheet--split .af-content > h2 { float: left; clear: both; width: calc(100% - 520px); margin-bottom: 0; padding-right: 64px; }
	.af-sheet--split .af-content > * + h2, .af-sheet--split .af-content > * + h2 + * { margin-top: 48px; padding-top: 64px; border-top: 1px solid var(--af-line); }
	.af-sheet--split .af-content > ul { margin-bottom: 16px; }
	.af-sheet--split .is-style-af-cards { width: 100%; }
	/* six tracks: tiles span 3 (2 across) or --af-span 2 (3 across); a last row is centred */
	.af-sheet .is-style-af-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.af-sheet .is-style-af-cards > * { grid-column: span var(--af-span, 3); }
	.af-sheet .is-style-af-cards > :nth-child(3n+4):nth-last-child(2) { grid-column: 2 / span 2; }
	.af-sheet .is-style-af-cards > :nth-child(3n+7):last-child { grid-column: 3 / span 2; }
	/* the form's h2 in the heading column, its fields in the 520 px text column */
	.af-sheet--split .af-signup-form { float: none; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; width: auto; }
}
@media (max-width: 1023px) {
	:root { --af-sheet-pad: 44px; --af-sheet-lift: 56px; }
	.af-sheet--aside { grid-auto-flow: row; gap: 48px; }
	.af-aside { position: static; order: -1; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 32px; align-items: start; }
	.af-aside > :first-child { grid-row: 1 / 3; margin: 0; }
	.af-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
	.af-hero--land { --af-art-h: 200px; }
}
@media (max-width: 767px) {
	:root { --af-sheet-gutter: 12px; --af-sheet-pad: 20px; --af-sheet-lift: 40px; }
	.af-hero { padding-top: 48px; }
	.af-sheet { --af-fs: 16px; margin-bottom: 32px; }
	.af-sheet .af-content > h2 { margin-bottom: 24px; font-size: 23px; }
	.af-post__title { font-size: 20px; }
	/* "Previous" / "Next" for screen readers only (a shorter row) */
	.af-pagination__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.af-sheet .af-content > * + h2 { margin-top: 48px; padding-top: 48px; }
	.is-style-af-intro { font-size: 17px; }
	.is-style-af-ticks { columns: 1; }
	/* tiles: the icon beside the title */
	.af-sheet .is-style-af-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; --af-tile-title: 24px; }
	.af-sheet .is-style-af-card { grid-template: none / 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 16px 16px; text-align: left; }
	.af-sheet .is-style-af-card > * { margin: 0; }
	.af-sheet .is-style-af-card > .wp-block-heading:last-child { margin-bottom: 0; }
	.af-sheet .is-style-af-card img { height: 64px; }
	.af-sheet .is-style-af-card p, .af-sheet .is-style-af-card .wp-block-buttons { grid-area: auto / 1 / auto / -1; max-width: none; margin: 0; }
	.af-aside { grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; }
	.af-aside img { box-shadow: 6px 6px 0 var(--af-tan-pale); }
	.af-aside h2 { align-self: end; }
	.af-facts { grid-column: 1 / -1; margin-top: 24px; }
	.af-facts dt { font-size: 24px; }
	.af-hero--land { --af-art-h: 150px; } /* the birds end about 32 px in from the edge at 390 */
	.af-hero__lead { font-size: 17px; }
	.af-signup-form { gap: 20px; }
	.af-signup-form h2 { margin-bottom: 12px; }
	.af-signup-form__row { display: block; }
	.af-signup-form__row input:not([type="submit"]) { height: 60px; font-size: 20px; }
	.af-signup-form__row [type="submit"] { width: 100%; height: 56px; margin-top: 12px; }
	.af-signup-form fieldset { grid-template-columns: minmax(0, 1fr); }
}
/* Contact (page-contact.php) "Find us": the map facade and the building photo, two equal halves
   across the sheet (the photo is cropped to the row); one column under 600 px. After the split
   rules, which it overrides (full width). */
.af-sheet .af-visit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; clear: both; margin: 32px 0 0; }
.af-visit .af-contact-block__map { height: auto; margin: 0; aspect-ratio: 1209 / 715; border-radius: var(--af-radius); }
/* the <picture> is a block, not display: contents (its <source> would take a grid cell) */
.af-visit :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--af-radius); }
/* Load map and Open in Google Maps: one column, equal widths, like the tile buttons */
.af-map-facade .wp-block-buttons { display: grid; width: 100%; max-width: 280px; }
@media (max-width: 599px) { .af-sheet .af-visit { grid-template-columns: minmax(0, 1fr); } }