/**
 * Dog Father Pro — Inner page styling (posts, archives, 404).
 * Clean, readable, no scroll motion. Brand chrome only.
 */

.df-page {
	padding-top: 120px;
	padding-bottom: var(--df-sp-10);
	min-height: 70vh;
}
.df-page__inner {
	max-width: var(--df-container-narrow);
}
.df-page__head {
	margin-bottom: var(--df-sp-8);
	text-align: left;
}
.df-page__title {
	font-size: var(--df-fs-h1);
	margin-bottom: var(--df-sp-4);
}
.df-page__desc { color: var(--df-fg-muted); font-size: var(--df-fs-h4); }
.df-page__meta {
	display: flex;
	gap: var(--df-sp-4);
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-4);
}
.df-page__thumb {
	margin-bottom: var(--df-sp-7);
	border-radius: var(--df-radius-lg);
	overflow: hidden;
}
.df-page__thumb img { width: 100%; }
.df-page__content {
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-loose);
	color: var(--df-fg);
}
.df-page__content h2 { font-size: var(--df-fs-h3); margin-top: var(--df-sp-7); margin-bottom: var(--df-sp-3); }
.df-page__content h3 { font-size: var(--df-fs-h4); margin-top: var(--df-sp-6); margin-bottom: var(--df-sp-3); }
.df-page__content p { margin-bottom: var(--df-sp-4); color: var(--df-fg-muted); }
.df-page__content a { color: var(--df-gold); text-decoration: underline; text-decoration-color: rgba(254,194,8,0.3); text-underline-offset: 3px; }
.df-page__content a:hover { text-decoration-color: var(--df-gold); }
.df-page__content ul, .df-page__content ol { margin: 0 0 var(--df-sp-4) var(--df-sp-5); }
.df-page__content ul { list-style: disc; }
.df-page__content ol { list-style: decimal; }
.df-page__content li { margin-bottom: var(--df-sp-2); color: var(--df-fg-muted); }
.df-page__content blockquote {
	border-left: 3px solid var(--df-gold);
	padding-left: var(--df-sp-5);
	font-style: italic;
	color: var(--df-fg);
	margin: var(--df-sp-6) 0;
}
.df-page__content img { border-radius: var(--df-radius); margin: var(--df-sp-5) 0; }
.df-page__content pre {
	background: var(--df-bg-elevated);
	padding: var(--df-sp-5);
	border-radius: var(--df-radius);
	overflow-x: auto;
	font-size: var(--df-fs-small);
	border: 1px solid var(--df-bg-line);
}

/* Post list cards */
.df-posts {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-7);
}
.df-post {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--df-sp-6);
	padding-bottom: var(--df-sp-7);
	border-bottom: 1px solid var(--df-bg-line);
	/* Anchor for the stretched link below. */
	position: relative;
}
/* On these cards the picture, the title and "Read more" were each links, but
   the paragraph between them was not -- so tapping the words of the summary,
   which is most of the card, did nothing at all.
   
   The paragraph cannot simply be wrapped in an anchor: it is block content
   produced by the_excerpt(), and three separate links to one post is already
   more than a screen reader needs. Instead the title's link grows an invisible
   layer over the whole card, so a tap anywhere on it opens the post. This is
   the standard "stretched link" pattern; the other two links sit underneath
   it, and since all three lead to the same post nothing is lost.
   
   Hovering anywhere on the card now also lights the title, which is the
   affordance the card was missing. */
.df-post__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--df-radius);
}
/* The category link goes somewhere else -- the category archive -- so it is
   the one thing on the card that must stay clickable in its own right. The
   stretched layer above would otherwise swallow it and send the reader to the
   post instead. Anything else added to these cards that needs its own
   destination needs this same pair of rules. */
.df-post__cat a {
	position: relative;
	z-index: 1;
}
.df-post__thumb {
	border-radius: var(--df-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.df-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.df-post__meta {
	display: flex;
	gap: var(--df-sp-3);
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-3);
}
.df-post__title { font-size: var(--df-fs-h3); margin-bottom: var(--df-sp-3); }
.df-post__title a { color: var(--df-fg); }
.df-post__title a:hover { color: var(--df-gold); }
.df-post__excerpt { color: var(--df-fg-muted); margin-bottom: var(--df-sp-4); }
.df-post__more {
	font-size: var(--df-fs-small);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-gold);
}

.df-pagination {
	margin-top: var(--df-sp-8);
	display: flex;
	justify-content: center;
	gap: var(--df-sp-3);
}
.df-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--df-sp-3);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-sm);
	color: var(--df-fg-muted);
	font-size: var(--df-fs-small);
}
.df-pagination .page-numbers.current { background: var(--df-gold); color: var(--df-bg); border-color: var(--df-gold); }
.df-pagination a.page-numbers:hover { border-color: var(--df-gold); color: var(--df-gold); }

.df-page__empty { color: var(--df-fg-muted); font-size: var(--df-fs-h4); }

/* 404 */
.df-page--404 .df-page__inner { max-width: 640px; text-align: center; }
.df-404 { display: flex; flex-direction: column; align-items: center; padding-block: var(--df-sp-9); }
.df-404__paw { color: var(--df-gold); opacity: 0.3; margin-bottom: var(--df-sp-5); }
.df-404 .df-eyebrow { justify-content: center; }
.df-404__title { font-size: var(--df-fs-h1); margin-bottom: var(--df-sp-4); }
.df-404__lead { color: var(--df-fg-muted); font-size: var(--df-fs-h4); margin-bottom: var(--df-sp-7); max-width: 480px; }
.df-404__actions { display: flex; gap: var(--df-sp-4); flex-wrap: wrap; justify-content: center; }

@media (max-width: 720px) {
	.df-post { grid-template-columns: 1fr; }
	.df-post__thumb { aspect-ratio: 16 / 9; }
}

/* ================================================================== */
/* BLOG ENHANCEMENTS                                                   */
/* ================================================================== */

/* Breadcrumb */
.df-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--df-sp-2);
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	margin-bottom: var(--df-sp-5);
}
.df-breadcrumb a { color: var(--df-fg-muted); }
.df-breadcrumb a:hover { color: var(--df-gold); }
.df-breadcrumb span { color: var(--df-fg-faint); }

/* Focus keyword tag */
.df-page__focus-keyword {
	display: inline-block;
	font-size: var(--df-fs-tiny);
	color: var(--df-gold);
	background: var(--df-gold-glow);
	padding: 4px 12px;
	border-radius: var(--df-radius-full);
	margin-top: var(--df-sp-3);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	font-weight: 600;
}

/* Featured image caption */
.df-page__thumb { position: relative; }
.df-page__thumb-caption {
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	margin-top: var(--df-sp-3);
	text-align: center;
	font-style: italic;
}

/* Social share */
.df-page__share-top { margin-bottom: var(--df-sp-7); }
.df-page__share-bottom { margin-top: var(--df-sp-8); padding-top: var(--df-sp-6); border-top: 1px solid var(--df-bg-line); }
.df-share {
	display: flex;
	align-items: center;
	gap: var(--df-sp-3);
}
.df-share__label {
	font-size: var(--df-fs-small);
	font-weight: 600;
	color: var(--df-fg-muted);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-right: var(--df-sp-2);
}
.df-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--df-bg-line);
	color: var(--df-fg-muted);
	background: transparent;
	cursor: pointer;
	transition: all var(--df-dur-base) var(--df-ease-out);
}
.df-share__btn:hover {
	color: var(--df-bg);
	background: var(--df-gold);
	border-color: var(--df-gold);
	transform: translateY(-2px);
}

/* Tags */
.df-page__tags {
	margin-top: var(--df-sp-6);
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
}
.df-page__tags-label {
	font-weight: 600;
	margin-right: var(--df-sp-2);
}
.df-page__tags a {
	color: var(--df-gold);
	text-decoration: none;
}
.df-page__tags a:hover { text-decoration: underline; }

/* Author bio */
.df-author-bio {
	display: flex;
	gap: var(--df-sp-5);
	align-items: flex-start;
	margin-top: var(--df-sp-8);
	padding: var(--df-sp-6);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
}
.df-author-bio__avatar {
	border-radius: 50% !important;
	border: 2px solid var(--df-gold);
}
.df-author-bio__label {
	display: block;
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.df-author-bio__name {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4);
	margin-bottom: var(--df-sp-2);
}
.df-author-bio__desc {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
}

/* Related posts */
.df-related {
	margin-top: var(--df-sp-9);
	padding-top: var(--df-sp-7);
	border-top: 1px solid var(--df-bg-line);
}
.df-related__title {
	font-size: var(--df-fs-h3);
	margin-bottom: var(--df-sp-6);
}
.df-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--df-sp-5);
}
.df-related__card {
	display: flex;
	flex-direction: column;
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
	overflow: hidden;
	color: var(--df-fg);
	transition: transform var(--df-dur-base) var(--df-ease-out),
	            border-color var(--df-dur-base) var(--df-ease-out);
}
.df-related__card:hover {
	transform: translateY(-4px);
	border-color: var(--df-gold-deep);
	color: var(--df-fg);
}
.df-related__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.df-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.df-related__body {
	padding: var(--df-sp-4);
}
.df-related__date {
	display: block;
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-2);
}
.df-related__name {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-body);
	font-weight: 700;
	margin-bottom: var(--df-sp-2);
}
.df-related__excerpt {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
}

@media (max-width: 768px) {
	.df-related__grid { grid-template-columns: 1fr; }
	.df-author-bio { flex-direction: column; }
}

/* ================================================================== */
/* BLOG LISTING (magazine style)                                       */
/* ================================================================== */
.df-blog-listing { padding-top: 140px; }
.df-blog-listing__head {
	text-align: center;
	margin-bottom: var(--df-sp-9);
}
.df-blog-listing__title {
	font-size: var(--df-fs-h1);
	margin-bottom: var(--df-sp-4);
}
.df-blog-listing__lead {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	max-width: 560px;
	margin-inline: auto;
}
.df-blog-listing .df-eyebrow { justify-content: center; }

.df-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--df-sp-6);
}
.df-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	color: var(--df-fg);
	text-decoration: none;
	transition: transform var(--df-dur-base) var(--df-ease-out),
	            border-color var(--df-dur-base) var(--df-ease-out),
	            box-shadow var(--df-dur-base) var(--df-ease-out);
}
.df-blog-card:hover {
	transform: translateY(-6px);
	border-color: var(--df-gold-deep);
	box-shadow: var(--df-shadow);
	color: var(--df-fg);
}
.df-blog-card--featured {
	grid-column: span 2;
	flex-direction: row;
}
.df-blog-card__img {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--df-bg-subtle);
	flex-shrink: 0;
}
.df-blog-card--featured .df-blog-card__img { width: 55%; aspect-ratio: auto; }
.df-blog-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--df-dur-slow) var(--df-ease-out);
}
.df-blog-card:hover .df-blog-card__img img { transform: scale(1.06); }
.df-blog-card__img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(10,10,11,0.6) 100%);
}
.df-blog-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Posts without a photograph get a deliberate cover rather than an empty
	   grey box, so a blog full of text-only posts still looks composed. Once
	   real photos exist these disappear on their own. */
	background:
		radial-gradient(circle at 30% 25%, rgba(254, 194, 8, 0.10), transparent 55%),
		linear-gradient(135deg, #101013 0%, #1B1B21 100%);
	color: rgba(254, 194, 8, 0.22);
	position: relative;
	overflow: hidden;
}
.df-blog-card__img--placeholder span {
	display: flex;
	transform: scale(2.1);
	transform-origin: center;
}
.df-blog-card__img--placeholder::after {
	content: '';
	position: absolute;
	inset: auto auto 0 0;
	width: 42px;
	height: 2px;
	margin: 0 0 18px 18px;
	background: var(--df-gold);
	opacity: 0.55;
}
.df-blog-card__body {
	padding: var(--df-sp-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.df-blog-card--featured .df-blog-card__body {
	padding: var(--df-sp-7);
	justify-content: center;
}
.df-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-sp-3);
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-3);
}
.df-blog-card__cat { color: var(--df-gold); font-weight: 600; }
/* The blog is bilingual -- Arabic posts sit beside English ones in the same
   grid. unicode-bidi: plaintext makes each title and excerpt take its
   direction from its own first strong character, so an Arabic title reads
   right to left and an English one left to right, with nothing tagged by
   hand and no per-post setting to remember. */
.df-blog-card__title,
.df-blog-card__excerpt {
	unicode-bidi: plaintext;
	text-align: start;
}
.df-blog-card__title {
	font-family: var(--df-font-display);
	font-weight: 700;
	line-height: var(--df-lh-snug);
	margin-bottom: var(--df-sp-3);
}
.df-blog-card--featured .df-blog-card__title { font-size: var(--df-fs-h2); }
.df-blog-card:not(.df-blog-card--featured) .df-blog-card__title { font-size: var(--df-fs-h4); }
.df-blog-card__excerpt {
	color: var(--df-fg-muted);
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-normal);
	margin-bottom: var(--df-sp-4);
	flex: 1;
}
.df-blog-card__readmore {
	font-size: var(--df-fs-small);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-gold);
}

.df-blog-empty {
	text-align: center;
	padding: var(--df-sp-11) var(--df-sp-6);
}
.df-blog-empty__icon {
	display: inline-block;
	color: var(--df-gold);
	opacity: 0.3;
	margin-bottom: var(--df-sp-5);
}
.df-blog-empty h2 { font-size: var(--df-fs-h2); margin-bottom: var(--df-sp-4); }
.df-blog-empty p { color: var(--df-fg-muted); max-width: 480px; margin: 0 auto var(--df-sp-6); }

/* ------------------------------------------------------------------ */
/* Blog listing on a phone.                                            */
/*                                                                     */
/* One post per row, and every card built identically: the picture on  */
/* top at a fixed 16/10 crop, the words underneath, the whole rectangle */
/* a single tap target. The newest post gets a side-by-side layout and  */
/* a wider column on a desktop; none of that survives down here.        */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.df-blog-grid {
		grid-template-columns: 1fr;
		gap: var(--df-sp-5);
	}

	.df-blog-card--featured {
		/* grid-column: span 2 is set on the wide layout and MUST be undone
		   here. A span of 2 inside a single-column grid does not clamp to
		   the one column that exists -- it makes the grid generate a second,
		   implicit one. Measured at 390px, the grid computed to
		   "2px 324px": the declared 1fr column collapsed to 2px, and every
		   post that landed in it rendered 2 pixels wide with a 0x0 image.
		   Half the posts were invisible, and the ones that were not sat
		   beside a sliver -- which is what read as two stretched columns on
		   a phone. */
		grid-column: auto;
		flex-direction: column;
	}

	/* Same picture treatment on every card, newest included. Cropped to fill
	   the frame rather than squashed to fit it, so nothing is distorted
	   whatever shape the photo was uploaded in. */
	.df-blog-card__img,
	.df-blog-card--featured .df-blog-card__img {
		width: 100%;
		aspect-ratio: 16 / 10;
	}

	/* Grid and flex children are min-width:auto by default, so one long word
	   or a wide image can push a card past its column instead of wrapping
	   inside it. */
	.df-blog-card,
	.df-blog-card__body { min-width: 0; }
	.df-blog-card__title,
	.df-blog-card__excerpt { overflow-wrap: break-word; }

	.df-blog-card--featured .df-blog-card__title { font-size: var(--df-fs-h3); }
}

/* Comments */
.df-comments { margin-top: var(--df-sp-9); padding-top: var(--df-sp-7); border-top: 1px solid var(--df-bg-line); }
.df-comments h2 { font-size: var(--df-fs-h3); margin-bottom: var(--df-sp-5); }
.comment-list { display: flex; flex-direction: column; gap: var(--df-sp-5); }
.comment-body { padding: var(--df-sp-5); background: var(--df-bg-elevated); border-radius: var(--df-radius); border: 1px solid var(--df-bg-line); }
.comment-author { font-weight: 700; color: var(--df-fg); }
.comment-meta { font-size: var(--df-fs-small); color: var(--df-fg-faint); margin-bottom: var(--df-sp-3); }
.comment-content { color: var(--df-fg-muted); }
.comment-reply-link { color: var(--df-gold); font-size: var(--df-fs-small); }

/* ================================================================== */
/* PAGE HERO — the opening block on an inner page                      */
/*                                                                     */
/* All motion here is CSS. Inner pages deliberately do not load GSAP    */
/* (see dfpro_assets()), and the 57KB that saves would be spent again   */
/* the moment the hero needed a JavaScript animation library.           */
/*                                                                     */
/* Two kinds of motion, both optional to the design:                    */
/*   - the photograph drifts very slowly, so a still image is not dead  */
/*   - the words rise once, staggered, on load                          */
/* Both are switched off entirely under prefers-reduced-motion, and the */
/* resting state of every element is the FINISHED state, so if an       */
/* animation never runs the hero still reads correctly.                 */
/* ================================================================== */
.df-phero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--df-bg);
	/* Clears the fixed header, and the notch on a phone. */
	padding-top: calc(96px + env(safe-area-inset-top, 0px));
	padding-bottom: var(--df-sp-8);
	isolation: isolate;
}
.df-phero--short  { min-height: 46vh; }
.df-phero--medium { min-height: 62vh; }
.df-phero--tall   { min-height: 82vh; }

/* No photograph is a deliberate state, not a broken one: the title sits
   on flat black with a hairline under it, and the block gets shorter. */
/* No photograph, no tall band. Written with the base class repeated so it
   outranks .df-phero--tall on specificity rather than on source order: the
   phone-sized heights are redeclared further down inside a media query, and
   with a single class this rule lost to them. The result was three quarters
   of a phone screen of empty black above the content on every inner page
   whose hero photo had not been set yet -- which is all of them, until the
   owner sets one. */
.df-phero.df-phero--bare {
	min-height: 0;
	padding-bottom: var(--df-sp-7);
	border-bottom: 1px solid var(--df-bg-line);
}

.df-phero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.df-phero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	animation: df-phero-drift 18s ease-out forwards;
}
@keyframes df-phero-drift {
	from { transform: scale(1.06); }
	to   { transform: scale(1.14); }
}

/* One veil, its darkness set per page from the Control Center. Weighted
   to the bottom, where the words are, so the top of the photograph stays
   readable. */
.df-phero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			180deg,
			rgba(10, 10, 11, calc(var(--df-phero-dim, .55) * 0.95)) 0%,
			rgba(10, 10, 11, calc(var(--df-phero-dim, .55) * 0.25)) 42%,
			rgba(10, 10, 11, calc(var(--df-phero-dim, .55) * 1.5 + 0.15)) 100%
		);
}

.df-phero__inner { width: 100%; }

.df-phero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--df-sp-3);
	font-size: var(--df-fs-tiny);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-gold);
	margin: 0 0 var(--df-sp-4);
}
.df-phero__rule {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--df-gold);
	flex: none;
}
.df-phero__title {
	font-family: var(--df-font-display);
	font-size: clamp(2.75rem, 13vw, 5.5rem);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.035em;
	margin: 0;
	/* pretty keeps a two-word title from leaving one word alone on line two. */
	text-wrap: balance;
}
.df-phero__lead {
	margin: var(--df-sp-4) 0 0;
	max-width: 34ch;
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-normal);
	color: rgba(245, 245, 247, .72);
}

.df-phero__cue {
	position: absolute;
	left: 50%;
	bottom: var(--df-sp-5);
	transform: translateX(-50%);
	color: rgba(245, 245, 247, .5);
	animation: df-phero-cue 2.4s ease-in-out infinite;
}
@keyframes df-phero-cue {
	0%, 100% { transform: translate(-50%, 0); opacity: .5; }
	50%      { transform: translate(-50%, 7px); opacity: 1; }
}

/* The words rise once. Every element's RESTING state is its finished
   state, and the animation runs backwards from it, so nothing depends on
   the animation completing -- or starting. */
@media (prefers-reduced-motion: no-preference) {
	.df-phero__eyebrow,
	.df-phero__title,
	.df-phero__lead {
		animation: df-phero-rise .85s cubic-bezier(.22, 1, .36, 1) backwards;
	}
	.df-phero__eyebrow { animation-delay: .05s; }
	.df-phero__title   { animation-delay: .14s; }
	.df-phero__lead    { animation-delay: .26s; }
}
@keyframes df-phero-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.df-phero__media img,
	.df-phero__cue { animation: none; }
	.df-phero__media img { transform: scale(1.06); }
}

@media (max-width: 720px) {
	.df-phero--short  { min-height: 38vh; }
	.df-phero--medium { min-height: 54vh; }
	.df-phero--tall   { min-height: 76vh; }
	.df-phero { padding-bottom: var(--df-sp-7); }
}

/* ---------------------------------------------------------------------------
   Section pages — About / Contact / Gallery.

   These pages open with the page hero and then run the same designed section
   the front page carries. Two things need adjusting for that join:

   1. The section directly under the hero has already been introduced by it,
      so its full 12rem top padding leaves the page looking broken in half.
      Only the FIRST section is trimmed; a second one below keeps its own
      rhythm.
   2. Anything typed into the WordPress editor sits below the section, and
      needs the reading width and vertical room the blog pages already use.
   --------------------------------------------------------------------------- */
.df-sectionpage > .df-section:first-child {
	padding-top: var(--df-sp-9);
}

.df-sectionpage__body {
	padding-block: 0 var(--df-sp-9);
}

/* The section above already ends on generous padding; without this the editor
   content reads as part of it rather than as a separate note below it. */
.df-sectionpage > .df-section + .df-sectionpage__body {
	border-top: 1px solid var(--df-bg-line);
	padding-top: var(--df-sp-8);
}

@media (max-width: 720px) {
	.df-sectionpage > .df-section:first-child {
		padding-top: var(--df-sp-7);
	}

	.df-sectionpage__body {
		padding-bottom: var(--df-sp-7);
	}

	.df-sectionpage > .df-section + .df-sectionpage__body {
		padding-top: var(--df-sp-6);
	}
}