/* ==========================================================================
   ANSWER FIRST
   The page leads with the answer it already contains, and asks afterwards.

   Before this, every page opened with a headline and an eight-field form, and
   the sentence the visitor came for sat below the fold. Every city page's first
   sentence is already a direct answer ("Dumpster rental in Philadelphia
   typically costs between $300 and $600"), so the layout promotes it rather
   than inventing anything new.

   Five typographic families carry the 14 sites, set by data-family on the body,
   so a criminal defence page does not read like a dumpster page. The per-site
   accent hue continues to come from palettes.css.
   ========================================================================== */

body[data-family] {
	--an-paper: var(--dp-paper);
	--an-paper-2: #fff;
	--an-ink: var(--dp-outline);
	--an-ink-2: #4c5a68;
	--an-ink-3: #77828e;
	--an-rule: #ddcfb2;
	--an-accent: var(--dp-mustard);
	--an-band: var(--dp-navy);

	--an-display: "Alfa Slab One", Georgia, serif;
	--an-text: "Archivo", system-ui, sans-serif;
	--an-label: var(--an-text);

	--an-h1: clamp(2.1rem, 4.4vw, 3.4rem);
	--an-lead: clamp(1.1rem, 2vw, 1.35rem);

	background: var(--an-paper);
	color: var(--an-ink);
	font-family: var(--an-text);
	font-size: 17px;
	line-height: 1.62;
}

/* --- the directory theme's dark opener is replaced wholesale ------------- */

body[data-family] .dp-hero,
body[data-family] .dp-sticky,
body[data-family] .dp-steps {
	display: none;
}

body[data-family] .dp-header {
	background: var(--an-band);
	border-bottom: 0;
}

body[data-family] .dp-header__bar { min-height: 58px; }

body[data-family] .dp-brand__name {
	font-family: var(--an-display);
	font-size: 1.35rem;
	letter-spacing: 0.005em;
	color: #fff;
}

body[data-family] .dp-brand__tag,
body[data-family] .dp-nav a,
body[data-family] .dp-header__phone {
	font-family: var(--an-label);
	color: hsla(0, 0%, 100%, 0.72);
}

body[data-family] .dp-nav a:hover { color: #fff; }
body[data-family] .dp-brand__mark { background: hsla(0, 0%, 100%, 0.14); border-radius: 3px; }

body[data-family] .dp-crumbs,
body[data-family] .dp-crumbs a {
	font-family: var(--an-label);
	color: var(--an-ink-3);
}

body[data-family] .dp-crumbs a:hover { color: var(--an-ink); }

/* --- the answer ---------------------------------------------------------- */

.dp-answer {
	max-width: var(--dp-page);
	margin: 0 auto;
	padding: 20px 24px 0;
}

.dp-answer h1 {
	font-family: var(--an-display);
	font-size: var(--an-h1);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--an-ink);
	margin: 8px 0 0;
	max-width: 19ch;
	text-wrap: balance;
}

.dp-answer__lead {
	font-family: var(--an-text);
	font-size: var(--an-lead);
	line-height: 1.46;
	color: var(--an-ink);
	max-width: 44ch;
	margin: 22px 0 0;
	padding-left: 20px;
	border-left: 5px solid var(--an-accent);
}

.dp-answer__note {
	font-family: var(--an-text);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--an-ink-2);
	max-width: 62ch;
	margin: 16px 0 0;
}

.dp-jump {
	max-width: var(--dp-page);
	margin: 32px auto 0;
	padding: 16px 24px 0;
	border-top: 1px solid var(--an-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.dp-jump a {
	font-family: var(--an-label);
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--an-ink-2);
	text-decoration: none;
	border-bottom: 2px solid var(--an-rule);
}

.dp-jump a:hover { color: var(--an-ink); border-bottom-color: var(--an-accent); }

/* --- reading column and rail -------------------------------------------- */

body[data-family] .dp-main { padding-block: 36px 0; }

body[data-family] .dp-cols { gap: 48px; }

@media (min-width: 1000px) {
	body[data-family] .dp-cols {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
	body[data-family] .dp-cols--single { grid-template-columns: minmax(0, 1fr); }
}

body[data-family] .dp-prose { max-width: 66ch; margin-inline: 0; }

body[data-family] .dp-prose p,
body[data-family] .entry-content p {
	font-family: var(--an-text);
	color: var(--an-ink);
	margin: 0 0 1.1em;
}

body[data-family] .dp-prose h2,
body[data-family] .entry-content h2 {
	font-family: var(--an-display);
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--an-ink);
	margin: 2em 0 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid var(--an-rule);
	max-width: 26ch;
}

body[data-family] .dp-prose h3,
body[data-family] .entry-content h3 {
	font-family: var(--an-label);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--an-ink-2);
	margin: 1.7em 0 0.4em;
}

body[data-family] .dp-prose section[data-section="intro"] > p:first-child,
body[data-family] .entry-content section[data-section="intro"] > p:first-child {
	font-size: inherit;
	border-left: 0;
	padding-left: 0;
	color: var(--an-ink);
}

/* --- the ask ------------------------------------------------------------- */

body[data-family] .dp-quote,
body[data-family] .dp-form-wrap {
	background: var(--an-band);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 22px;
	color: #fff;
}

body[data-family] .dp-quote h2,
body[data-family] .dp-form-wrap h2 {
	font-family: var(--an-display) !important;
	font-size: 1.5rem !important;
	font-weight: 600;
	color: #fff;
	border-top: 0;
	padding-top: 0;
	margin: 0 0 6px !important;
	max-width: none;
}

body[data-family] .dp-quote p,
body[data-family] .dp-form-wrap p {
	font-family: var(--an-label);
	font-size: 0.9rem;
	color: hsla(0, 0%, 100%, 0.72);
}

body[data-family] .dp-quote__proof { display: none; }

body[data-family] .dp-quote label,
body[data-family] .dp-form-wrap label,
body[data-family] .dp-form-wrap .ff-el-input--label label {
	font-family: var(--an-label);
	font-size: 0.8rem !important;
	letter-spacing: 0.01em;
	text-transform: none;
	color: hsla(0, 0%, 100%, 0.68);
}

body[data-family] .dp-quote input,
body[data-family] .dp-quote select,
body[data-family] .dp-form-wrap .ff-el-form-control {
	border-radius: 0;
	border-color: hsla(0, 0%, 100%, 0.24);
	box-shadow: none;
}

body[data-family] .dp-quote button[type="submit"],
body[data-family] .dp-form-wrap .ff-btn.ff-btn-submit,
body[data-family] .dp-form-wrap button.ff-btn-submit {
	font-family: var(--an-display) !important;
	font-size: 1.2rem !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: var(--an-accent) !important;
}

body[data-family] .dp-quote__fine {
	font-family: var(--an-label);
	color: hsla(0, 0%, 100%, 0.55) !important;
	text-align: left;
}

/* --- lists of places and guides ----------------------------------------- */

body[data-family] .dp-silo-index a,
body[data-family] .dp-related a {
	font-family: var(--an-label);
	border-radius: 0;
	background: var(--an-paper-2);
	border-color: var(--an-rule);
	border-left: 3px solid var(--an-accent);
	color: var(--an-ink);
}

body[data-family] .dp-silo-index h2,
body[data-family] .dp-related h2 {
	font-family: var(--an-display) !important;
	font-weight: 600;
	color: var(--an-ink) !important;
}

body[data-family] .dp-related {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--an-rule);
	border-radius: 0;
	padding: 22px 0 0;
}

body[data-family] .dp-related a {
	background: transparent;
	border: 0;
	padding-left: 16px;
}

body[data-family] .dp-related a::before { background: var(--an-accent); }

/* --- closing ask and footer --------------------------------------------- */

body[data-family] .dp-cta-band,
body[data-family] .dp-prose section[data-section="cta"],
body[data-family] .entry-content section[data-section="cta"] {
	background: var(--an-band);
	border-radius: 0;
}

body[data-family] .dp-footer {
	background: transparent;
	color: var(--an-ink-2);
	border-top: 1px solid var(--an-rule);
	margin-top: 72px;
}

body[data-family] .dp-footer h2,
body[data-family] .dp-footer a,
body[data-family] .dp-footer p {
	font-family: var(--an-label);
	color: var(--an-ink-2);
}

body[data-family] .dp-footer a:hover { color: var(--an-ink); }
body[data-family] .dp-footer__legal { border-top-color: var(--an-rule); }

/* --- phone --------------------------------------------------------------- */

@media (max-width: 760px) {
	.dp-answer h1 { font-size: 2.1rem; }
	.dp-answer__lead { font-size: 1.12rem; padding-left: 14px; }
	body[data-family] .dp-prose h2 { font-size: 1.5rem; }
	body[data-family] { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* The post date sits under the answer rather than above the title. */
body[data-family] .dp-post-meta {
	font-family: var(--an-label);
	font-size: 0.85rem;
	color: var(--an-ink-3);
	margin: 14px auto 0;
	max-width: var(--dp-page);
	padding: 0 24px;
	text-transform: none;
	letter-spacing: 0;
}

body[data-family] .dp-post-title { display: none; }

/* The jump links replace the in-content table of contents, so only one of them
   appears on a page. */
body[data-family] nav[data-section="toc"],
body[data-family] .dp-toc {
	display: none;
}

/* ==========================================================================
   THE OPENER AND THE SIGNATURE
   Eight sites carry their palette as a real dark band above the answer; seven
   sit on tinted paper with the motif beside the text. Every site then gets one
   module no other site has.
   ========================================================================== */

.dp-opener {
	position: relative;
	background:
		radial-gradient(110% 170% at 8% 110%, var(--dp-ground-2) 0%, transparent 62%),
		var(--an-band);
	overflow: hidden;
	padding: 34px 0 38px;
}

.dp-opener__inner {
	position: relative;
	z-index: 1;
	max-width: var(--dp-page);
	margin: 0 auto;
	padding: 0 24px;
}

.dp-opener__inner h1 {
	font-family: var(--an-display);
	font-size: var(--an-h1);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0;
	max-width: 19ch;
	text-wrap: balance;
}

.dp-opener .dp-motif {
	display: block;
	position: absolute;
	right: max(24px, calc((100% - var(--dp-page)) / 2 + 24px));
	top: 50%;
	transform: translateY(-50%);
	width: 190px;
	height: 190px;
	color: #fff;
	opacity: 0.34;
	margin: 0;
}

.dp-answer--dark { padding-top: 26px; }
.dp-answer--dark h1 { display: none; }

/* On a light site the drawing sits beside the answer rather than behind it. */
body[data-family] .dp-answer > .dp-motif {
	display: none;
}

@media (min-width: 1080px) {
	body[data-family] .dp-answer {
		position: relative;
	}

	body[data-family] .dp-answer > .dp-motif {
		display: block;
		position: absolute;
		right: 24px;
		top: 6px;
		width: 200px;
		height: 200px;
		color: var(--an-accent);
		opacity: 0.22;
		margin: 0;
	}
}

/* --- links inside body copy ---------------------------------------------- */
/* Without this, page content falls through to the parent theme's blue, and a
   locations table renders as a wall of default blue and visited purple. */

body[data-family] .dp-prose a,
body[data-family] .entry-content a,
body[data-family] .dp-main table a {
	color: var(--an-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--an-accent);
	padding-bottom: 1px;
}

body[data-family] .dp-prose a:hover,
body[data-family] .entry-content a:hover,
body[data-family] .dp-main table a:hover {
	color: var(--an-accent);
	border-bottom-color: currentColor;
}

body[data-family] .dp-prose a:visited,
body[data-family] .entry-content a:visited,
body[data-family] .dp-main table a:visited { color: var(--an-ink-2); }

/* --- tables in page content ---------------------------------------------- */

body[data-family] .dp-main table {
	width: 100%;
	border-collapse: collapse;
	background: var(--an-paper-2);
	border: 1px solid var(--an-rule);
	font-size: 0.95rem;
}

body[data-family] .dp-main table th {
	font-family: var(--an-text);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--an-ink-2);
	text-align: left;
	border-bottom: 2px solid var(--an-rule);
}

body[data-family] .dp-main table th,
body[data-family] .dp-main table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--an-rule);
	vertical-align: top;
}

body[data-family] .dp-main table tr:last-child td { border-bottom: 0; }

/* --- not found ------------------------------------------------------------ */

body[data-family] .dp-404-links {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
	max-width: 34ch;
}

body[data-family] .dp-404-links a {
	display: block;
	background: var(--an-paper-2);
	border: 1px solid var(--an-rule);
	border-left: 3px solid var(--an-accent);
	padding: 12px 16px;
	color: var(--an-ink);
	text-decoration: none;
}

body[data-family] .dp-404-links a:hover { border-left-color: var(--an-ink); }

body[data-family] .dp-404-search {
	margin: 32px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	max-width: 44ch;
}

body[data-family] .dp-404-search label {
	flex: 1 0 100%;
	font-size: 0.95rem;
	color: var(--an-ink-2);
}

body[data-family] .dp-404-search input {
	flex: 1 1 16ch;
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--an-rule);
	background: var(--an-paper-2);
	color: var(--an-ink);
}

body[data-family] .dp-404-search button {
	font: inherit;
	padding: 10px 20px;
	border: 0;
	background: var(--an-ink);
	color: var(--an-paper);
	cursor: pointer;
}

body[data-family] .dp-404-search button:hover { background: var(--an-accent); }

/* --- the form's own title ------------------------------------------------- */
/* Fluent Form prints a <legend class="ff_screen_reader_title"> holding the
   form's admin title, "Get Free Quotes". It is meant for screen readers but
   renders visibly here, so every card showed its own heading, then the intro
   sentence, then a second heading. Clip it rather than hide it, so it still
   reaches a screen reader. */

body[data-family] .ff_screen_reader_title,
body[data-family="reference"] .ff_screen_reader_title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- phone --------------------------------------------------------------- */
/* The band sizes itself from its padding now, so it needs no height here. The
   motif does need to come down, or it crowds the headline at 400px. */

@media (max-width: 760px) {
	.dp-opener { padding: 26px 0 28px; }

	.dp-opener .dp-motif {
		width: 130px;
		height: 130px;
		opacity: 0.26;
	}
}

/* The section rule and its 2em of air separate one section from the previous
   one. The first heading on a page has no previous section, so it needs
   neither. This showed up as a dead gap once the signature module that used to
   fill it was removed. */

body[data-family] .dp-prose > h2:first-child,
body[data-family] .entry-content > h2:first-child,
body[data-family] .dp-prose > h3:first-child,
body[data-family] .entry-content > h3:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

body[data-family] .dp-jump + .dp-main,
body[data-family] .dp-jump ~ .dp-main { padding-block: 28px 0; }

/* ==========================================================================
   THE CHARACTER
   Each site's mascot, in the header and carrying the hero. This is what makes
   one site different from the next, so it is drawn at a size you can read and
   given the same heavy outline the artwork has.
   ========================================================================== */

body[data-family] .dp-brand__char {
	width: 54px;
	height: 54px;
	object-fit: contain;
	object-position: center top;
	background: var(--dp-cream);
	border: 2px solid var(--dp-outline);
	border-radius: 50%;
	flex: none;
	display: block;
}

/* --- the home page opener ------------------------------------------------- */

.dp-opener--home { padding: 0; }

.dp-opener__inner--char {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
	align-items: end;
}

@media (min-width: 820px) {
	.dp-opener--home .dp-opener__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
		gap: 32px;
		align-items: end;
	}

	.dp-opener--home .dp-opener__inner > div:first-child { padding-block: 44px 40px; }
}

.dp-opener--home .dp-opener__inner > div:first-child { padding-block: 34px 8px; }

.dp-opener__lead {
	font-family: var(--an-text);
	font-size: var(--an-lead);
	line-height: 1.45;
	color: var(--dp-cream);
	margin: 14px 0 0;
	max-width: 46ch;
}

.dp-opener__note {
	font-family: var(--an-text);
	font-size: 0.95rem;
	color: #a9c4dd;
	margin: 12px 0 0;
}

/* The character stands on the fold rather than floating, so the hero has a
   base and the right side is no longer a void with an icon in it. */
.dp-opener__char {
	align-self: end;
	line-height: 0;
	text-align: center;
}

.dp-opener__char img {
	display: block;
	width: 100%;
	max-width: 230px;
	height: auto;
	margin: 0 auto;
}

@media (max-width: 819px) {
	.dp-opener__char img { max-width: 150px; margin: 0 0 0 auto; }
}

/* On an inner page the band is a strip, so the character rides in it small. */
.dp-opener__char--small img { max-width: 108px; }

@media (min-width: 820px) {
	.dp-opener__inner:has(.dp-opener__char--small) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 28px;
		align-items: center;
	}
}

@media (max-width: 819px) {
	.dp-opener__char--small { display: none; }
}

/* --- spacing the home page actually needed ------------------------------- */
/* The state grid sat 140px below the headline with nothing in between, and the
   rule above it stopped short of the content it was introducing. */

body[data-family] .dp-location-grid,
body[data-family] .dp-silo-index {
	margin-top: 36px;
	border-top: 0;
	padding-top: 0;
}

body[data-family] .dp-silo-index h2,
body[data-family] .dp-location-grid h2 {
	font-family: var(--an-display);
	font-weight: 400;
	font-size: 1.45rem;
	color: var(--dp-navy);
	border-top: 0;
	padding-top: 0;
	margin: 0 0 16px;
	max-width: none;
}

/* Hard shadows, not soft ones. The artwork is outlined, not blurred. */
body[data-family] .dp-silo-index a,
body[data-family] .dp-location-grid a {
	background: #fff;
	border: 2px solid var(--dp-outline);
	border-left: 2px solid var(--dp-outline);
	border-radius: 0;
	box-shadow: 3px 3px 0 var(--dp-navy);
	font-weight: 600;
	color: var(--dp-outline);
	padding: 9px 12px;
}

body[data-family] .dp-silo-index a:hover,
body[data-family] .dp-location-grid a:hover {
	box-shadow: 3px 3px 0 var(--dp-mustard);
	background: var(--dp-cream-2);
}

/* 220px tracks gave two columns in a 765px area, so eleven states filled a
   tall narrow list beside an empty gutter. State names are short. */

body[data-family] .dp-silo-index ul {
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px;
}

/* "See every location" is an action, not a place, and it was styled exactly
   like one, sitting full width at the end of the list as if it were a state. */
body[data-family] .dp-silo-index__all {
	margin: 18px 0 0;
}

body[data-family] .dp-silo-index__all a {
	display: inline-block;
	background: var(--dp-mustard);
	border: 2px solid var(--dp-outline);
	box-shadow: 3px 3px 0 var(--dp-outline);
	color: var(--dp-outline);
	font-weight: 700;
	padding: 10px 18px;
	text-decoration: none;
}

body[data-family] .dp-silo-index__all a:hover {
	background: var(--dp-cream);
	box-shadow: 3px 3px 0 var(--dp-navy);
}

/* A rule of mustard under the band, the one place the accent appears at full
   width, so the navy does not simply stop. */
body[data-family] .dp-opener { border-bottom: 4px solid var(--dp-mustard); }

/* The characters are not all the same aspect: most are 1024 square, the
   midwife is 1024x1536. Sizing on width alone made her band 190px taller than
   the others, with that space sitting empty above the headline. Cap the height
   so every site's band is the same depth. */

.dp-opener--home .dp-opener__char img {
	max-height: 268px;
	width: auto;
	max-width: 230px;
}

@media (max-width: 819px) {
	.dp-opener--home .dp-opener__char img { max-height: 168px; max-width: 150px; }
}

.dp-opener__char--small img { max-height: 84px; width: auto; }

/* ==========================================================================
   ACCORDIONS
   Plain <details>. The answer is in the HTML whether it is open or shut.
   ========================================================================== */

body[data-family] .dp-faq {
	border-top: 2px solid var(--dp-outline);
	margin: 0;
}

body[data-family] .dp-faq + .dp-faq { border-top-width: 1px; }
body[data-family] .dp-faq:last-of-type { border-bottom: 2px solid var(--dp-outline); }

body[data-family] .dp-faq > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 4px;
}

body[data-family] .dp-faq > summary::-webkit-details-marker { display: none; }

body[data-family] .dp-faq > summary h2,
body[data-family] .dp-faq > summary h3,
body[data-family] .dp-faq > summary h4 {
	font-family: var(--an-display);
	font-weight: 400;
	font-size: 1.18rem;
	line-height: 1.25;
	color: var(--dp-navy);
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
	flex: 1;
}

/* A square that becomes a minus. Drawn, not a character, so it matches the
   outline weight in the artwork. */
body[data-family] .dp-faq > summary::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	border: 2px solid var(--dp-outline);
	background:
		linear-gradient(var(--dp-outline), var(--dp-outline)) center/10px 2px no-repeat,
		linear-gradient(var(--dp-outline), var(--dp-outline)) center/2px 10px no-repeat,
		var(--dp-mustard);
}

body[data-family] .dp-faq[open] > summary::after {
	background:
		linear-gradient(var(--dp-outline), var(--dp-outline)) center/10px 2px no-repeat,
		var(--dp-cream);
}

body[data-family] .dp-faq > summary:hover h2,
body[data-family] .dp-faq > summary:hover h3,
body[data-family] .dp-faq > summary:hover h4 { color: var(--dp-brick); }

body[data-family] .dp-faq > summary:focus-visible {
	outline: 3px solid var(--dp-mustard);
	outline-offset: 2px;
}

body[data-family] .dp-faq__body { padding: 0 0 18px; }
body[data-family] .dp-faq__body > *:first-child { margin-top: 0; }
body[data-family] .dp-faq__body > *:last-child { margin-bottom: 0; }

body[data-family] .dp-faq__body h2,
body[data-family] .dp-faq__body h3 {
	border-top: 0;
	padding-top: 0;
	margin-top: 1.4em;
}

@media (prefers-reduced-motion: no-preference) {
	body[data-family] .dp-faq > summary::after { transition: background-color .12s ease; }
}

/* --- spacing, measured off the rendered page ----------------------------- */

@media (min-width: 820px) {
	.dp-opener--home .dp-opener__inner > div:first-child { padding-block: 58px 44px; }
}

body[data-family] .dp-main { padding-block: 26px 0; }

body[data-family] .dp-silo-index--home { margin-top: 22px; }

/* The action belongs in the grid, not hanging off the end of it. */
body[data-family] .dp-silo-index--home ul { margin-bottom: 0; }

body[data-family] .dp-silo-index__all {
	margin: 10px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px;
}

body[data-family] .dp-silo-index__all a { text-align: center; }

/* Five sites have no character yet. Without one the band was still sized for
   a 268px illustration, leaving half of it empty. */

.dp-opener--home .dp-opener__inner:not(.dp-opener__inner--char) {
	display: block;
}

@media (min-width: 820px) {
	.dp-opener--home .dp-opener__inner:not(.dp-opener__inner--char) > div:first-child {
		padding-block: 42px 38px;
		max-width: 46rem;
	}
}

.dp-opener:not(.dp-opener--home) .dp-opener__inner:not(:has(.dp-opener__char--small)) { display: block; }

/* "District Of Columbia" wraps to two lines and made its whole row taller than
   the others. Equal rows, and the text centred in them. */

body[data-family] .dp-silo-index--home ul {
	grid-auto-rows: 1fr;
}

body[data-family] .dp-silo-index--home ul a {
	height: 100%;
	display: flex;
	align-items: center;
}

/* --- balancing the two columns ------------------------------------------- */
/* The quote card is around 660px tall. A four-column state grid is 250px, so
   the left column ran out 460px before the row did and the page had a hole in
   it. Two columns of states is roughly the height of the card. */

@media (min-width: 900px) {
	body[data-family] .dp-silo-index--home ul,
	body[data-family] .dp-silo-index--home .dp-silo-index__all {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The action was sitting in the first cell of its own grid and wrapping to two
   lines inside it. It is one link, so it is sized by its own text. */
body[data-family] .dp-silo-index__all {
	display: block;
}

body[data-family] .dp-silo-index__all a {
	display: inline-block;
	text-align: left;
}

/* --- footer --------------------------------------------------------------- */

body[data-family] .dp-footer h2 {
	font-family: var(--an-display);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dp-navy);
	margin: 0 0 10px;
}

/* The action sat flush against the last row, so its hard shadow and the
   shadow on the cell above it ran into each other. */

body[data-family] .dp-silo-index--home .dp-silo-index__all {
	margin-top: 20px;
	margin-bottom: 0;
}

/* 55px a row for a one-word state is loose, and twelve rows of it is a lot of
   page. */
body[data-family] .dp-silo-index--home ul a {
	padding-top: 7px;
	padding-bottom: 7px;
	line-height: 1.35;
}

/* Rows were sharing borders while columns had a 10px gutter, so the grid read
   as two separate tables side by side. One gap on both axes. */

body[data-family] .dp-silo-index--home ul {
	row-gap: 10px;
	column-gap: 10px;
}

/* --- the answer block on a light site ------------------------------------ */

@media (min-width: 900px) {
	body[data-family] .dp-answer--char {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		gap: 36px;
		align-items: center;
	}
}

body[data-family] .dp-answer__char {
	line-height: 0;
	text-align: center;
}

body[data-family] .dp-answer__char img {
	display: block;
	width: 100%;
	max-width: 210px;
	max-height: 240px;
	height: auto;
	margin: 0 auto;
}

@media (max-width: 899px) {
	body[data-family] .dp-answer__char { display: none; }
}

body[data-family] .dp-answer--char .dp-answer__text > *:first-child { margin-top: 0; }

/* On a phone the character sat on its own row, right aligned, leaving the left
   of that row as empty navy. It is small enough to sit beside the text. */

@media (max-width: 819px) {
	.dp-opener__inner--char {
		grid-template-columns: minmax(0, 1fr) 104px;
		gap: 16px;
		align-items: end;
	}

	.dp-opener--home .dp-opener__inner > div:first-child { padding-block: 26px 0; }

	.dp-opener--home .dp-opener__char img {
		max-height: 132px;
		max-width: 104px;
		margin: 0;
	}

	.dp-opener--home { padding-bottom: 0; }
}

/* --- the post list --------------------------------------------------------- */
/* These cards were still the thin-bordered, accent-railed kind from the old
   theme, indented past the headline, with seventy pixels of nothing above. */

body[data-family] .dp-grid { margin: 0; }

body[data-family] .dp-grid__list {
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

body[data-family] .dp-grid__list a {
	display: block;
	height: 100%;
	background: #fff;
	border: 2px solid var(--dp-outline);
	border-radius: 0;
	box-shadow: 3px 3px 0 var(--dp-navy);
	color: var(--dp-outline);
	font-weight: 600;
	line-height: 1.35;
	padding: 14px 16px;
	text-decoration: none;
}

body[data-family] .dp-grid__list a:hover {
	box-shadow: 3px 3px 0 var(--dp-mustard);
	background: var(--dp-cream-2);
}

body[data-family] .dp-grid__list li { margin: 0; }

/* --- pagination ----------------------------------------------------------- */

body[data-family] .pagination,
body[data-family] .nav-links {
	margin: 26px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

body[data-family] .nav-links .page-numbers {
	font-family: var(--an-label);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid var(--dp-outline);
	background: #fff;
	color: var(--dp-outline);
	padding: 7px 13px;
	text-decoration: none;
	line-height: 1;
}

body[data-family] .nav-links .page-numbers.current {
	background: var(--dp-mustard);
	box-shadow: 3px 3px 0 var(--dp-outline);
}

body[data-family] .nav-links .page-numbers.dots { border: 0; padding: 7px 2px; }
body[data-family] .nav-links a.page-numbers:hover { background: var(--dp-cream-2); }
body[data-family] .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

body[data-family] .dp-index { max-width: none; }