/* ============================================================
   Page-specific styles (services, projects, grants, blog, contact).
   Built on the site.css vocabulary; loaded site-wide after site.css.
   ============================================================ */

/* --- Contact layout --- */
.contact-layout {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 64px;
	align-items: start;
}
@media (max-width: 960px) {
	.contact-layout { grid-template-columns: 1fr; gap: 48px; }
}

/* --- "We know the forest" expertise section (replaces the GT-200 showcase) --- */
.expertise { background: var(--dts-forest-900); color: var(--fg-on-dark); }
.expertise h2 { color: var(--fg-on-dark); }
.expertise-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .expertise-grid { grid-template-columns: 1fr; gap: 32px; } }
.expertise p { color: rgba(250, 247, 240, 0.85); font-size: 17px; line-height: 1.6; max-width: 56ch; }
.video-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--dts-forest-800); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--dts-forest-800); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; }
.video-placeholder .vp-play { width: 66px; height: 66px; border-radius: 999px; background: var(--dts-rust-600); display: flex; align-items: center; justify-content: center; }
.video-placeholder .vp-play::before { content: ""; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; margin-left: 5px; }
.video-placeholder .vp-label { font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 247, 240, 0.7); }
.credential-strip { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250, 247, 240, 0.8); font-weight: 700; }
.credential-strip span { display: inline-flex; align-items: center; gap: 9px; }
.credential-strip span::before { content: ""; width: 9px; height: 9px; background: var(--dts-rust-500); clip-path: polygon(0 0, 100% 50%, 0 100%); flex-shrink: 0; }

/* --- About / Founder page --- */
.about-founder-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
@media (max-width: 860px) { .about-founder-grid { grid-template-columns: 1fr; gap: 32px; } }
.img-placeholder { aspect-ratio: 4 / 5; background: var(--dts-bone-200); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--fg-3); font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 24px; }
.img-placeholder.is-wide { aspect-ratio: 16 / 10; }
.about-creds { font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.06em; color: var(--fg-3); font-weight: 700; margin: 24px 0 0; line-height: 1.7; }
.about-creds span { color: var(--brand-primary); }

.timeline { position: relative; max-width: 860px; margin-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--border-default); }
.timeline-item { position: relative; padding: 0 0 40px 56px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: 9px; top: 4px; width: 18px; height: 18px; border-radius: 999px; background: var(--dts-rust-600); border: 3px solid var(--bg-page); }
.timeline-year { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; color: var(--brand-primary); line-height: 1; }
.timeline-item h4 { font-size: 22px; margin: 6px 0 8px; }
.timeline-item p { color: var(--fg-2); font-size: 15px; line-height: 1.6; margin: 0; max-width: 62ch; }

/* --- Careers / job listings --- */
.job-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 4px solid var(--brand-primary); padding: clamp(24px, 3vw, 40px); }
.job-card + .job-card { margin-top: 24px; }
.job-card-head { display: flex; justify-content: space-between; gap: 16px 32px; align-items: flex-start; flex-wrap: wrap; }
.job-card h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; margin: 0; }
.job-meta { font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-top: 8px; }
.job-card > p { color: var(--fg-2); font-size: 16px; line-height: 1.6; margin: 18px 0 0; max-width: 72ch; }
.job-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 24px; }
@media (max-width: 760px) { .job-cols { grid-template-columns: 1fr; } }
.job-cols h4 { font-size: 13px; letter-spacing: 0.04em; margin: 0 0 12px; color: var(--brand-primary); }
.job-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.job-cols li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.job-cols li::before { content: ""; width: 9px; height: 9px; margin-top: 6px; flex-shrink: 0; background: var(--brand-primary); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* --- Service rows (alternating) --- */
.service-row + .service-row { border-top: 1px solid var(--border-subtle); }
.service-row .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.service-row.is-reverse .service-row-media { order: 2; }
@media (max-width: 860px) {
	.service-row .container { grid-template-columns: 1fr; gap: 32px; }
	.service-row.is-reverse .service-row-media { order: 0; }
}
.service-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}
.service-bullets li {
	font-size: 14px;
	color: var(--fg-2);
	line-height: 1.45;
	padding-left: 20px;
	position: relative;
}
.service-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 11px;
	height: 11px;
	background: var(--brand-primary);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- Projects category filter --- */
.proj-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.proj-filter-btn {
	padding: 10px 18px;
	background: transparent;
	color: var(--fg-1);
	border: 2px solid var(--border-default);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: var(--radius-md);
	transition: all var(--dur-fast);
}
.proj-filter-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.proj-filter-btn.is-active { background: var(--brand-primary); color: var(--fg-on-dark); border-color: var(--brand-primary); }
.card[hidden] { display: none; }

/* --- Generic card grid (projects, blog) --- */
.card-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.card {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .card-media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card .card-cat {
	position: absolute; top: 16px; left: 16px;
	background: var(--dts-rust-600); color: var(--fg-on-dark);
	padding: 6px 12px;
	font-family: var(--font-display); font-weight: 800; font-size: 11px;
	letter-spacing: 0.16em; text-transform: uppercase;
}
.card .card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card .card-meta {
	display: flex; justify-content: space-between; gap: 12px;
	font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--fg-3); font-weight: 700;
}
.card .card-meta.mt-auto { margin-top: auto; padding-top: 8px; }
.card h3 { font-size: 24px; line-height: 1.05; margin: 0; }
.card p { margin: 0; font-size: 14px; color: var(--fg-2); line-height: 1.55; }
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }

/* --- Grants page --- */
.grant-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .grant-intro-grid { grid-template-columns: 1fr; gap: 32px; } }
.grant-quickfacts {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--border-default); border: 1px solid var(--border-default);
}
.grant-quickfacts .qf { background: var(--bg-surface); padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.grant-quickfacts .qf .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--brand-primary); }
.grant-quickfacts .qf .v small { font-size: 0.42em; color: var(--dts-rust-600); margin-left: 4px; letter-spacing: 0.04em; }
.grant-quickfacts .qf .l { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; }

.program-card {
	background: var(--bg-surface); border: 1px solid var(--border-subtle);
	border-top: 4px solid var(--brand-primary);
	display: grid; grid-template-columns: 4.2fr 7.8fr; box-shadow: var(--shadow-sm);
}
.program-card + .program-card { margin-top: 24px; }
@media (max-width: 860px) { .program-card { grid-template-columns: 1fr; } }
.program-rail { padding: 40px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 860px) { .program-rail { border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 32px 28px; } }
.program-num { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: 0.18em; color: var(--dts-rust-600); line-height: 1; }
.program-rail h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1; margin: 0; }
.program-fullname { font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.06em; color: var(--fg-2); font-weight: 700; line-height: 1.4; }
.program-admin { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; border-top: 1px solid var(--border-subtle); padding-top: 16px; line-height: 1.5; }
.program-admin span { color: var(--brand-primary); display: block; margin-bottom: 4px; }
.program-tag { align-self: flex-start; background: var(--dts-rust-100); color: var(--dts-rust-700); font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; }
.program-rail .btn { margin-top: auto; }
.program-body { padding: 40px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 860px) { .program-body { padding: 32px 28px; } }
.program-body > p { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 62ch; }
.program-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 28px; }
.program-stats .ps { border-top: 2px solid var(--dts-rust-600); padding-top: 10px; }
.program-stats .ps .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2vw, 30px); line-height: 1; color: var(--dts-bark-900); letter-spacing: -0.01em; }
.program-stats .ps .v small { font-size: 0.5em; color: var(--dts-rust-600); margin-left: 3px; letter-spacing: 0.04em; }
.program-stats .ps .l { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-top: 7px; font-weight: 700; line-height: 1.35; }
.program-covers { border-top: 1px solid var(--border-subtle); padding-top: 24px; }
.program-covers .lbl { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-bottom: 14px; }
.program-covers ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.program-covers li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.program-covers li::before { content: ""; width: 11px; height: 11px; margin-top: 5px; flex-shrink: 0; background: var(--brand-primary); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.disclaimer-band { background: var(--dts-bone-100); border-top: 1px solid var(--border-subtle); padding: 40px 0; }
.disclaimer-band p { font-family: var(--font-accent); font-size: 12.5px; line-height: 1.6; color: var(--fg-3); max-width: 90ch; margin: 0; }
.disclaimer-band strong { color: var(--fg-2); }

/* Program "May cover / Provides" line (replaces the dollar-figure stats) */
.program-maycover { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.program-maycover strong { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-primary); display: block; margin-bottom: 6px; }

/* Grant steps: 3-up layout for the six-step process */
.process-steps.process-steps--3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .process-steps.process-steps--3up { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .process-steps.process-steps--3up { grid-template-columns: 1fr; } }
.grant-timeline-note { font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.04em; line-height: 1.6; color: var(--fg-3); margin: 32px 0 0; font-weight: 700; }
.grant-timeline-note strong { color: var(--brand-secondary); }

/* "Our role in the grant process" do / don't note */
.grant-role { background: var(--bg-surface); border: 1px solid var(--border-default); border-top: 5px solid var(--dts-rust-600); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-sm); }
.grant-role h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1; margin: 14px 0 0; }
.grant-role .grant-role-intro { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin: 16px 0 0; max-width: 70ch; }
.grant-role-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin-top: 32px; }
@media (max-width: 760px) { .grant-role-cols { grid-template-columns: 1fr; } }
.grant-role-col h4 { font-size: 15px; letter-spacing: 0.04em; margin: 0 0 16px; }
.grant-role-do h4 { color: var(--brand-primary); }
.grant-role-dont h4 { color: var(--brand-secondary); }
.grant-role-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.grant-role-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.grant-role-col li::before { font-weight: 800; flex-shrink: 0; line-height: 1.4; }
.grant-role-do li::before { content: "\2713"; color: var(--brand-primary); }
.grant-role-dont li::before { content: "\2715"; color: var(--brand-secondary); }
.grant-role-fine { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-subtle); font-family: var(--font-accent); font-size: 12.5px; line-height: 1.6; color: var(--fg-3); }

/* Guidance contacts */
.grant-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .grant-contacts { grid-template-columns: 1fr; } }
.contact-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-top: 4px solid var(--brand-primary); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.contact-card .cc-label { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-bottom: 4px; }
.contact-card .cc-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.contact-card .cc-role { font-family: var(--font-accent); font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.contact-card .cc-line { font-size: 14px; color: var(--fg-2); }
.contact-card a { color: var(--brand-primary); }
.contact-card .cc-note { font-size: 13px; line-height: 1.5; color: var(--fg-3); margin: 8px 0 0; }

/* Zone 1 standalone callout */
.zone1 { background: var(--dts-forest-900); color: var(--fg-on-dark); padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
@media (max-width: 600px) { .zone1 { grid-template-columns: 1fr; } }
.zone1 .z1-badge { width: 64px; height: 64px; border-radius: 999px; background: var(--dts-rust-600); color: var(--fg-on-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.04em; flex-shrink: 0; }
.zone1 h3 { color: var(--fg-on-dark); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; margin: 0 0 16px; }
.zone1 p { color: rgba(250, 247, 240, 0.85); font-size: 16px; line-height: 1.6; margin: 0 0 14px; max-width: 70ch; }
.zone1 p:last-of-type { margin-bottom: 0; }
.zone1 strong { color: var(--dts-bone-50); }
.zone1 .zone1-def { font-size: 17px; color: rgba(250, 247, 240, 0.92); }
.zone1 .zone1-def strong { color: var(--dts-rust-500); }


/* --- Blog feature --- */
.blog-feature { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; border: 1px solid var(--border-subtle); background: var(--bg-surface); overflow: hidden; margin-bottom: 64px; }
.blog-feature .blog-feature-media { aspect-ratio: 4 / 3; overflow: hidden; }
.blog-feature .blog-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-feature .blog-feature-body { padding: 48px 48px 48px 0; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
@media (max-width: 860px) { .blog-feature { grid-template-columns: 1fr; } .blog-feature .blog-feature-body { padding: 0 28px 32px; } }

/* --- Contact sidebar bits --- */
.contact-aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; }
.contact-phone-card { background: var(--dts-forest-900); color: var(--fg-on-dark); padding: 32px; }
.contact-phone-card a.tel { display: block; font-family: var(--font-display); font-weight: 900; font-size: 44px; color: var(--fg-on-dark); letter-spacing: 0.02em; text-decoration: none; margin: 12px 0 4px; line-height: 1; }
.contact-area-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.contact-area-card ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; color: var(--fg-2); }
.form-embed-placeholder { border: 2px dashed var(--border-default); padding: 40px; text-align: center; color: var(--fg-3); font-family: var(--font-accent); border-radius: var(--radius-md); }

/* --- Blog index (core query loop styled as cards) --- */
.blog-query .wp-block-post-template { gap: 24px; }
.blog-query .wp-block-post {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.blog-query .wp-block-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-query .wp-block-post-featured-image { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.blog-query .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-query .wp-block-post-terms { padding: 24px 24px 0; margin: 0; }
.blog-query .wp-block-post-title { font-size: 22px; line-height: 1.1; padding: 0 24px; margin: 10px 0; }
.blog-query .wp-block-post-title a { text-decoration: none; color: var(--fg-1); }
.blog-query .wp-block-post-title a:hover { color: var(--brand-primary); }
.blog-query .wp-block-post-excerpt { padding: 0 24px 20px; margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.blog-query .wp-block-post-excerpt__excerpt { margin: 0; }
.blog-query .wp-block-post-date { padding: 0 24px 24px; margin-top: auto; }
.blog-query .wp-block-query-pagination { margin-top: 48px; }

/* =============================================================
   Our Story — sticky-year timeline
   Ported from the inline <style> block in the design canvas'
   story.html (project 019dc33a…). The canvas used the <image-slot>
   design-tool element; here the media is a plain <img> or <iframe>,
   so .shot styles both.
   ============================================================= */
.story-grid {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 64px;
	align-items: start;
}
.story-year { position: sticky; top: 96px; align-self: start; }
.story-year .yr {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(56px, 7vw, 110px);
	line-height: 0.9;
	color: var(--dts-forest-800);
}
.story-year .yr small {
	display: block;
	font-family: var(--font-accent);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dts-rust-600);
	margin-top: 10px;
}

.story-rail {
	border-left: 2px solid var(--border-default);
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	gap: 72px;
	position: relative;
}
.story-item { position: relative; }
.story-item::before {
	content: "";
	position: absolute;
	left: -47px;
	top: 8px;
	width: 12px;
	height: 12px;
	background: var(--dts-rust-600);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--dts-bone-100);
}
.story-item .when {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dts-rust-600);
	margin-bottom: 10px;
}
.story-item h3 { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 14px; }
.story-item p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--fg-2);
	margin: 0;
	max-width: 62ch;
	text-wrap: pretty;
}
.story-item .shot { margin-top: 24px; max-width: 560px; }
.story-item .shot img,
.story-item .shot iframe {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 0;
	border-radius: 4px;
}
.story-item .shot iframe { aspect-ratio: 16 / 9; }
.story-item.is-wide .shot { max-width: 100%; }
.story-item.is-wide .shot img { aspect-ratio: 21 / 9; }

.story-break {
	background: var(--dts-forest-900);
	color: var(--fg-on-dark);
	padding: 96px 0;
	margin: 96px 0;
}
.story-break blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 56px);
	line-height: 1.05;
	max-width: 22ch;
	color: var(--fg-on-dark);
}
.story-break blockquote em { color: var(--dts-rust-500); font-style: normal; }
.story-break .attr {
	font-family: var(--font-accent);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(250, 247, 240, 0.6);
	margin-top: 24px;
}

@media (max-width: 860px) {
	.story-grid { grid-template-columns: 1fr; gap: 24px; }
	.story-year { position: static; }
	.story-year .yr {
		font-size: 44px;
		/* Year and tag sit side by side to save vertical space, but as inline
		   text the tag broke mid-phrase: "2014-2020 THE" then "APPRENTICESHIP"
		   on its own line. As flex items they wrap as whole units, so the tag
		   drops intact when it will not fit beside the year. */
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 12px;
	}
	.story-year .yr small { display: block; margin-top: 0; }
	.story-rail { padding-left: 28px; gap: 56px; }
	.story-item::before { left: -35px; }
}