/**
 * Theme Name: DCP
 * Description: Blocksy Child theme
 * Author: team A design
 * Version: 1.0.0
 * Template: blocksy
 * Text Domain: blocksy
 */
 
/* Die Grotesk (licensed static files in assets/fonts). Weights available: 300, 400, 500, 700, 900. */
@font-face { font-family: 'ct_font_die__grotesk'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-b-light.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-b-light-italic.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-b-regular.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-b-regular-italic.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-b-medium.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: italic; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-b-medium-italic.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-b-bold.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: italic; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-b-bold-italic.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-b-heavy.woff2') format('woff2'); }
@font-face { font-family: 'ct_font_die__grotesk'; font-style: italic; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-b-heavy-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-a-light.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-a-light-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-a-regular.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-a-regular-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-a-medium.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: italic; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-a-medium-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-a-bold.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: italic; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-a-bold-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-a-heavy.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk A'; font-style: italic; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-a-heavy-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-d-light.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-d-light-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-d-regular.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-d-regular-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-d-medium.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: italic; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-d-medium-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-d-bold.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: italic; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-d-bold-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-d-heavy.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk D'; font-style: italic; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-d-heavy-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-c-light.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/die-grotesk-c-light-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-c-regular.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/die-grotesk-c-regular-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-c-medium.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: italic; font-weight: 500; font-display: swap; src: url('assets/fonts/die-grotesk-c-medium-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-c-bold.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: italic; font-weight: 700; font-display: swap; src: url('assets/fonts/die-grotesk-c-bold-italic.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-c-heavy.woff2') format('woff2'); }
@font-face { font-family: 'Die Grotesk C'; font-style: italic; font-weight: 900; font-display: swap; src: url('assets/fonts/die-grotesk-c-heavy-italic.woff2') format('woff2'); }

:root {
	--dg-text: 'Die Grotesk A', ct_font_die__grotesk, Helvetica, sans-serif;
	--dg-display: 'Die Grotesk D', ct_font_die__grotesk, Helvetica, sans-serif;
}

/* The off-canvas menu uses the A cut: its Heavy has sturdier strokes, so the
   big 900 menu keeps its weight (the test font's 900 was a faked bold). */
.mobile-menu .ct-menu-link {
	font-family: var(--dg-text);
}

/* The two variables above are opt-in. Nothing sets font-family on titles here:
   those come from the Customizer typography settings (several are Fraunces). */

/* keep Blocksy's button hover lift, drop the blurred glow behind it. */
:root {
	--theme-button-shadow: none;
}

/* Bold text is 700. That's set explicitly because the browser's default
   "bolder" only reaches 400 from a 300 base, which is the weight of the press
   quotes, so bold in a quote would barely show. The heavy 900 press quotes keep
   their own weight. The footer social labels and form labels (Blocksy sets 600)
   use 700 too. */
b,
strong {
	font-weight: 700;
}

.press-quote--short .press-quotation b,
.press-quote--short .press-quotation strong {
	font-weight: inherit;
}

.ct-label,
label {
	font-weight: 700;
}

/* Magnetic pull toward the cursor (assets/js/magnetic-buttons.js sets the
   `translate` value on mousemove; this just governs how it eases). Uses
   `translate`, not `transform`, so it composes independently with Blocksy's
   own transform-based hover lift on .ct-button instead of fighting it.
   A slight overshoot on release gives the snap-back some spring. */
.ct-button {
	transition: translate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	.ct-button {
		transition: none;
	}
}

 [data-behaviour*='side'] .ct-panel-inner {
	backdrop-filter: blur(7px);
}

.ct-custom-taxonomies a {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 50px;
	background-color: #282827;
}

.ct-custom-taxonomies a:hover {
	background-color: #313131;
}
 
.project-back-nav {
	 margin-top:  var(--theme-content-vertical-spacing);
 }
 
.project-laurels, .project-accolades, .project-distributors-row, .project-trailer-watch-row {
	margin-top:  var(--theme-content-vertical-spacing);
}
 
/* Acclaim: the label runs vertically in the left margin like a book spine. */
.project-accolades {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 28px;
	align-items: start;
}

.project-accolades .ct-module-title {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.project-accolades-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.project-accolade {
	line-height: 1.5;
	margin: 0;
}

.project-accolade b {
	letter-spacing: 0.03em;
	font-weight: 700;
}

/* Small numbered tracked labels (Acclaim / Watch Now / Details / Press).
   The counter runs across the whole page, so numbering stays sequential
   even when a project is missing a section. */
body.single-project {
	counter-reset: dcp-label;
}

.project-accolades-watch .ct-module-title,
.project-section-label {
	counter-increment: dcp-label;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
}

.project-accolades-watch .ct-module-title::before,
.project-section-label::before {
	content: counter(dcp-label, decimal-leading-zero) " \2014  ";
}

.project-section-label-wrap {
	margin-top: var(--theme-content-vertical-spacing);
	margin-bottom: 24px;
}

/* Press: the label runs vertically down the left edge, matching Acclaim's
   spine (both read bottom-to-top). */
.project-press {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 28px;
	align-items: start;
}

.project-press .project-section-label {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.project-press .press-quotes-grid {
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 689.98px) {
	.project-press {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-press .project-section-label {
		writing-mode: horizontal-tb;
		transform: none;
		margin-bottom: 24px;
	}

	.project-press .press-quotes-grid {
		grid-column: 1;
		grid-row: 2;
	}
}


/* Distributor logos: their own left-aligned row at the top. */
.project-distributors-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
}

/* Trailer button in the single project hero, under the subtitle. */
.hero-section .project-trailer {
	margin-top: 20px;
}

.project-trailer-watch-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
}

/* Accolades (left, two thirds) and Watch Now (right, one third), side by
   side. The wrapper owns the top margin so the two columns line up. */
.project-accolades-watch {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-top: var(--theme-content-vertical-spacing);
}

.project-accolades-watch.is-single-column {
	grid-template-columns: minmax(0, 1fr);
}

.project-accolades-watch > .project-accolades,
.project-accolades-watch > .project-trailer-watch-row {
	margin-top: 0;
}

@media (max-width: 689.98px) {
	.project-accolades-watch {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-accolades {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-accolades .ct-module-title {
		writing-mode: horizontal-tb;
		transform: none;
		margin-bottom: 12px;
	}
}

/* Trailer video popup */
.project-trailer-trigger {
	gap: 12px;
}

.project-trailer-play-icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent currentColor;
}

.project-trailer-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.project-trailer-modal[hidden] {
	display: none;
}

.project-trailer-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.project-trailer-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 960px;
}

.project-trailer-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.project-trailer-modal-close:hover,
.project-trailer-modal-close:focus-visible {
	background: rgba(255, 255, 255, 0.3);
}

.project-trailer-modal-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	background: #000;
}

.project-trailer-modal-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

html.project-trailer-modal-open,
html.project-trailer-modal-open body {
	overflow: hidden;
}

/* Press quotes grid */
.press-quotes-grid {
	--press-grid-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--press-grid-columns), minmax(0, 1fr));
	align-items: start;
	column-gap: clamp(40px, 5vw, 80px);
	row-gap: clamp(64px, 8vw, 128px);
}

@media (max-width: 999.98px) {
	.press-quotes-grid {
		--press-grid-columns: 2;
	}
}

@media (max-width: 689.98px) {
	.press-quotes-grid {
		--press-grid-columns: 1;
	}
}


/* Press quotes, brutalist: short quotes are huge heavy caps (title-card
   style), longer ones stay calm so the extremes hit harder. Cards sit at
   uneven offsets.
   Size classes are set in project-extras-bottom.php. */
.press-quote {
	padding: 0;
	margin: 0;
	border: 0;
}

.press-quotation {
	margin: 0;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.125;
	text-indent: -0.4em;
	hanging-punctuation: first;
	/* Long words stay whole: they wrap to the next line but are never split
	   mid-word (or hyphenated). */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.press-quote--short .press-quotation {
	font-size: clamp(1.75rem, 2.8vw, 3.5rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.05;
}

.press-quote--medium .press-quotation {
	font-size: clamp(1.4rem, 1.9vw, 1.9rem);
}

/* About a third of the medium quotes (picked in project-extras-bottom.php) are
   700, so the weights vary down the page. Bold inside them steps up to 900. */
.press-quote--bold .press-quotation {
	font-weight: 700;
}

.press-quote--bold .press-quotation b,
.press-quote--bold .press-quotation strong {
	font-weight: 900;
}

.press-quote--long .press-quotation {
	font-size: clamp(1.1rem, 1.3vw, 1.3rem);
	line-height: 1.2;
}

.press-attribution {
	margin-top: 1.75em;
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.press-publication {
	font-weight: 700;
}

.press-publication a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Scroll reveals (assets/js/scroll-reveal.js adds .will-reveal / .will-wipe,
   then .is-visible when the element enters the viewport). Without JS, or
   with reduced motion, nothing is hidden. */
.will-reveal {
	opacity: 0;
	transition: opacity 1s ease;
}

.will-reveal.is-visible {
	opacity: 1;
}

.will-wipe {
	clip-path: polygon(0% 0%, -38% 0%, -76% 100%, 0% 100%);
	transition: clip-path 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.will-wipe.is-visible {
	clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
}

/* Single project hero: title words rise from behind a mask one at a time,
   then the subtitle and trailer button fade in. Word spans are added in
   functions.php. */
.single-project .hero-section .title-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.15em;
	margin-bottom: -0.15em;
	padding-right: 0.08em;
	margin-right: -0.08em;
}

.single-project .hero-section .title-word-inner {
	display: inline-block;
	animation: titleRise 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(0.25s + var(--i, 0) * 0.09s);
}

@keyframes titleRise {
	from {
		transform: translateY(110%);
	}
	to {
		transform: translateY(0);
	}
}

.single-project .hero-section .ct-dynamic-data-layer,
.single-project .hero-section .project-trailer {
	animation: heroFadeIn 1s ease both;
}

.single-project .hero-section .ct-dynamic-data-layer {
	animation-delay: 1s;
}

.single-project .hero-section .project-trailer {
	animation-delay: 1.25s;
}

@keyframes heroFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-project .hero-section .title-word-inner,
	.single-project .hero-section .ct-dynamic-data-layer,
	.single-project .hero-section .project-trailer {
		animation: none;
	}
}

/* Irregular offsets once the grid is 3-up: --press-y / --press-x are 0-100,
   set per quote in project-extras-bottom.php. */
@media (min-width: 1000px) {
	.press-quote {
		margin-top: calc(var(--press-y, 0) * 0.01 * clamp(3rem, 8vw, 8rem));
		margin-left: calc(var(--press-x, 0) * 0.01 * clamp(0px, 3vw, 3rem));
	}
}


.post-navigation {
	border-top:1px solid rgba(255,255,255,.2);
}

.ct-module-title {
	margin:0 0 20px;
	text-transform: uppercase;
}

.streaming-links-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
}

.distributors-list img {
	max-height: 60px;
	margin-right: 30px;
}

/* Mobile: keep the distributor logos on a single row and let them shrink to
   fit, instead of wrapping. */
@media (max-width: 689.98px) {
	.project-distributors-row {
		flex-wrap: nowrap;
	}

	.project-distributors {
		min-width: 0;
		width: 100%;
	}

	.distributors-list {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 16px;
	}

	.distributors-list img {
		flex: 0 1 auto;
		min-width: 0;
		width: auto;
		height: auto;
		max-height: 60px;
		margin-right: 0;
		object-fit: contain;
	}
}


/* TRANSITIONS */

.entry-card .ct-media-container {
  overflow: hidden;
  position: relative;
  display: block;
}

/*
 * LEGACY — "sideline sweep" hover effect, retired 2026-09-11 in favor of the
 * still-swap + drift effect below. Restore by uncommenting this block and
 * removing the replacement block that follows it.
 *
.entry-card .ct-media-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--theme-palette-color-6, red) 0px,
    var(--theme-palette-color-6, red) 2px,
    transparent 2px,
    transparent 6px
  );
  mix-blend-mode: normal;
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
  z-index: 1;
}
.entry-card .ct-media-container:hover img {
	opacity:.9;
}
.entry-card .ct-media-container:hover::after {
  transform: translateX(0);
  transition: transform 0.35s steps(8, end);
}
*/

/* Project archive + homepage grid: hovering the card slides the image a
   little to the right and the title/subtitle a little further — a small
   parallax separation instead of moving the card as one flat block. The
   still only wipes in — a diagonal clip-path reveal, like a film-editing
   wipe cut — when the pointer is directly over the image itself. Uses the
   standalone `translate` property (not `transform`) because .entry-card
   already carries a `transform`-based entrance animation with a `forwards`
   fill mode — a plain :hover transform declaration is a lower-priority
   normal style and gets shadowed by that held animation value, so translate
   is used to sidestep the conflict.
   .ct-swap is already stacked above the base image (its own `position:
   absolute` lifts it above the base image's stacking order regardless of
   DOM order), so the wipe only needs to mask .ct-swap itself — the base
   image never changes, which is why projects without a "Featured Image
   Hover" (ACF featured_image_alt) need no special-case fallback: with no
   .ct-swap in the markup, the hover rule simply matches nothing. */
body:not(.blog):not(.category):not(.tag) .entry-card {
  position: relative;
}

body:not(.blog):not(.category):not(.tag) .entry-card .ct-media-container,
body:not(.blog):not(.category):not(.tag) .entry-card .card-content,
body:not(.blog):not(.category):not(.tag) .entry-card > .entry-title,
body:not(.blog):not(.category):not(.tag) .entry-card .card-content .entry-title {
  transition: translate 0.5s ease;
}

body:not(.blog):not(.category):not(.tag) .entry-card .ct-media-container .ct-swap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0% 0%, -38% 0%, -76% 100%, 0% 100%);
  transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {
  body:not(.blog):not(.category):not(.tag) .entry-card:hover .ct-media-container {
    translate: 10px 0;
  }

  body:not(.blog):not(.category):not(.tag) .entry-card:hover .card-content,
  body:not(.blog):not(.category):not(.tag) .entry-card:hover > .entry-title {
    translate: 20px 0;
  }

  /* Individual nudge on top of the group slide above, only while the
     pointer is directly over the title itself. */
  body:not(.blog):not(.category):not(.tag) .entry-card .card-content .entry-title:hover {
    translate: 8px 0;
  }

  body:not(.blog):not(.category):not(.tag) .entry-card .ct-media-container:hover .ct-swap {
    clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.blog):not(.category):not(.tag) .entry-card .ct-media-container,
  body:not(.blog):not(.category):not(.tag) .entry-card .card-content,
  body:not(.blog):not(.category):not(.tag) .entry-card > .entry-title,
  body:not(.blog):not(.category):not(.tag) .entry-card .card-content .entry-title,
  body:not(.blog):not(.category):not(.tag) .entry-card .ct-media-container .ct-swap {
    transition: none;
  }
}

/* Project archive + homepage grid: italicize the remainder of each title
   word (everything but its first letter) while the card is hovered. The
   .ct-word-tail spans are added by the dcp_wrap_word_remainder() filter in
   functions.php. Same scope as the parallax/wipe effects above, so the
   homepage project cards match the archive's hover treatment exactly. */
body:not(.blog):not(.category):not(.tag) .entry-card:hover .ct-word-tail {
  font-style: italic;
}

/* News archive + its category/tag archives: the accent color wipes across
   the image on hover (same diagonal clip-path wipe as the project archive's
   still-swap) and the title fades in on top. Declared self-contained here
   (content/position/inset included directly) — the shared base rule that
   used to supply those now lives in the commented-out legacy sideline-sweep
   block above, so this can't lean on it anymore. */
.blog .entry-card .ct-media-container::after,
.category .entry-card .ct-media-container::after,
.tag .entry-card .ct-media-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--theme-palette-color-6, red);
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 1;
  clip-path: polygon(0% 0%, -38% 0%, -76% 100%, 0% 100%);
  transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.blog .entry-card:hover .ct-media-container::after,
.category .entry-card:hover .ct-media-container::after,
.tag .entry-card:hover .ct-media-container::after {
  clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
}

.blog .entry-card .ct-media-container .entry-title,
.category .entry-card .ct-media-container .entry-title,
.tag .entry-card .ct-media-container .entry-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.blog .entry-card .ct-media-container .entry-title a,
.category .entry-card .ct-media-container .entry-title a,
.tag .entry-card .ct-media-container .entry-title a {
  color: #fff;
}

.blog .entry-card:hover .ct-media-container .entry-title,
.category .entry-card:hover .ct-media-container .entry-title,
.tag .entry-card:hover .ct-media-container .entry-title {
  opacity: 1;
  pointer-events: auto;
}

/* "Seen In:" tags on news posts: publication names only, no hash. */
.single-post .entry-tags-items a > span:first-child {
  display: none;
}

/* "Related Project" on news posts: styled like a /work card. The still sits
   above a large light title and the subtitle; on hover the still slides right
   a little, the text a little further, the second still wipes in diagonally
   and the title tails go italic. */
.entry-related-film .related-film-items {
  display: grid;
  gap: 30px;
}

.entry-related-film .related-film-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
}

.entry-related-film .related-film-media {
  position: relative;
  display: block;
  flex: 0 0 45%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #050505;
  border: 0;
  padding: 0;
}

.entry-related-film .related-film-media img,
.entry-related-film .related-film-media:hover img {
  translate: none;
  scale: none;
  transform: none;
}

.entry-related-film .related-film-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-related-film .related-film-media .ct-swap {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(0% 0%, -38% 0%, -76% 100%, 0% 100%);
  transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.entry-related-film .related-film-text {
  min-width: 0;
}

/* Blocksy styles links inside .entry-tags as bordered pills; these aren't. */
.entry-related-film .related-film-card a,
.entry-related-film .related-film-card a:hover,
.entry-related-film .related-film-card a:focus-visible {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Title and subtitle match the /work cards (48px light, tight, capitalized). */
.entry-related-film .related-film-name {
  margin: 0;
  font-size: 48px;
  font-weight: 300;
  line-height: 48px;
  letter-spacing: -0.04em;
  text-transform: capitalize;
}

.entry-related-film .related-film-name a,
.entry-related-film .related-film-name a:hover,
.entry-related-film .related-film-name a:focus-visible {
  color: #050505;
  text-decoration: none;
}

.entry-related-film .related-film-sub {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #050505;
}

@media (hover: hover) {
  .entry-related-film .related-film-media:hover .ct-swap {
    clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
  }
}

.entry-related-film .related-film-card:hover .ct-word-tail {
  font-style: italic;
}

@media (max-width: 599.98px) {
  .entry-related-film .related-film-card {
    flex-direction: column;
    gap: 14px;
  }

  .entry-related-film .related-film-media {
    flex-basis: auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-related-film .related-film-media .ct-swap {
    transition: none;
  }
}

/* "Read More" related posts on single news posts: same wipe + title reveal as
   the News archive, in jet. The title sits beside the image in the markup, so
   it's laid over the (square) image instead. */
.ct-related-posts article > div {
  position: relative;
}

.ct-related-posts .ct-media-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #050505;
  pointer-events: none;
  z-index: 1;
  clip-path: polygon(0% 0%, -38% 0%, -76% 100%, 0% 100%);
  transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.ct-related-posts article > div:hover .ct-media-container::after,
.ct-related-posts article > div:focus-within .ct-media-container::after {
  clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
}

.ct-related-posts .related-entry-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  font-size: 20px;
  font-weight: 500;
  line-height: 22.5px;
  text-transform: capitalize;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ct-related-posts .related-entry-title a {
  color: #fff;
}

.ct-related-posts article > div:hover .related-entry-title,
.ct-related-posts article > div:focus-within .related-entry-title {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .entry-card .ct-media-container::after,
  .ct-related-posts .ct-media-container::after {
    display: none;
  }
}


/* Base animation setup for all grid cards */
.entries article {
    animation: lateralEntrance 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0;
}

/* Slide-in keyframes */
@keyframes lateralEntrance {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animation delays */
.entries article:nth-child(9n+1) { animation-delay: 0.1s; }
.entries article:nth-child(9n+2) { animation-delay: 0.25s; }
.entries article:nth-child(9n+3) { animation-delay: 0.4s; }
.entries article:nth-child(9n+4) { animation-delay: 0.55s; }
.entries article:nth-child(9n+5) { animation-delay: 0.7s; }
.entries article:nth-child(9n+6) { animation-delay: 0.85s; }
.entries article:nth-child(9n+7) { animation-delay: 1.0s; }
.entries article:nth-child(9n+8) { animation-delay: 1.15s; }
.entries article:nth-child(9n+9) { animation-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .entries article {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Featured image on single project + single post views */
.single-post .ct-featured-image .ct-media-container {
	overflow: hidden;
	position: relative;
}

.single-post .ct-featured-image .ct-media-container img {
	opacity: 0;
	animation: featuredImageFadeIn 0.4s linear forwards;
	transition: transform 0.5s ease;
}


.single-project .hero-section .ct-media-container img {
	opacity: 0;
	animation: featuredImageFadeIn 0.4s linear forwards;
}

@keyframes featuredImageFadeIn {
	to {
		opacity: 1;
	}
}

.single-post .ct-featured-image:hover .ct-media-container img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.single-project .hero-section .ct-media-container img,
	.single-post .ct-featured-image .ct-media-container img {
		opacity: 1;
		animation: none;
	}
	.single-post .ct-featured-image:hover .ct-media-container img {
		transform: none;
	}
}

[data-archive="default"][data-cards="simple"] > .entry-card {
	padding-bottom: 0 !important;
	margin-bottom: var(--grid-columns-gap, 30px);
}

/* Single project hero background (shows behind the image while it loads, and
   under the title block when it stacks below the image on mobile). */
body.single-project .hero-section[data-type="type-2"] {
	background-color: var(--theme-palette-color-4);
}

/* Mobile tweaks, single project page */
@media (max-width: 767.98px) {
	/* Hero: image on top, then title / subtitle / trailer button stacked
	   below it (instead of overlaid). The image still runs up under the
	   transparent header. Blocksy positions the image absolutely and Blocksy's
	   parallax sets inline height/transform on it, hence the !importants. */
	body.single-project .hero-section[data-type="type-2"] {
		margin-top: 0;
		padding-top: 0;
		background-color: transparent;
	}

	body.single-project .hero-section[data-type="type-2"] > figure {
		position: relative;
		inset: auto;
		margin: 0;
		height: calc(var(--has-transparent-header, 0) * var(--header-height, 0px) + 65vw);
		background-color: var(--theme-palette-color-4);
	}

	/* Pin the image container to the very top of its box. */
	body.single-project .hero-section[data-type="type-2"] > figure .ct-media-container {
		position: absolute !important;
		inset: 0 !important;
		height: 100% !important;
		margin: 0 !important;
		transform: none !important;
		translate: none !important;
	}

	body.single-project .hero-section[data-type="type-2"] > figure .ct-media-container::after {
		display: none;
	}

	/* Blocksy's parallax script (rellax) writes an inline translate3d onto the
	   image itself on scroll, which pushes it down and exposes the hero
	   background above it. Stacked layout has no parallax, so cancel it. */
	body.single-project .hero-section[data-type="type-2"] > figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: none !important;
		translate: none !important;
	}

	body.single-project .hero-section[data-type="type-2"] > [class*="ct-container"] {
		min-height: 0;
		padding-top: 24px;
		padding-bottom: 32px;
	}

	/* Text under the image sits on the page background in jet, not white. */
	body.single-project .hero-section[data-type="type-2"] .page-title,
	body.single-project .hero-section[data-type="type-2"] .ct-dynamic-data-layer {
		color: var(--theme-palette-color-4);
	}

	/* Breathing room under images in the main content, e.g. the poster once
	   columns stack. */
	.single-project .entry-content img,
	.single-project .entry-content figure {
		margin-bottom: 1em;
	}
}

@media (max-width: 689.98px) {
	/* Keep the press quotes inside the page margin: no hanging opening quote
	   mark poking out to the left. */
	.press-quotation {
		text-indent: 0;
		hanging-punctuation: none;
	}
}


/* Homepage slider (shortcode [dcp_home_feature], see functions.php and
   assets/js/home-slider.js): the still sits on top at a fixed 16:9 and wipes
   diagonally to the next project; the title rises word by word below it, with
   the arrow at the right, level with the top of the title. (No hover image
   swap here; that's only on the project cards.) It sits inside the page's
   content width, with a modest margin above and below, and never grows taller
   than the window minus the header. */
.home-slider {
	--home-slider-gap: clamp(20px, 3vw, 48px);
	position: relative;
	display: flex;
	flex-direction: column;
	/* Window height minus the header and the space above and below, so the
	   whole slider (title and arrow included) fits on screen at once. */
	max-height: calc(100vh - var(--header-height, 90px) - 2 * var(--home-slider-gap));
	max-height: calc(100svh - var(--header-height, 90px) - 2 * var(--home-slider-gap));
	color: var(--theme-palette-color-4);
}

/* Space above and below the slider (specific enough to beat WordPress's
   first/last-child margin reset inside the page content). The page's own
   spacer block above it is hidden, so this is the only gap and the cap above
   can account for it exactly. */
:root .entry-content > .home-slider {
	margin-block: var(--home-slider-gap);
}

.wp-block-spacer:has(+ .home-slider) {
	display: none;
}

/* The still is 16:9 while there's room. When the window is too short for the
   whole slider (still + title + arrow) to fit under the header, only the still
   gives way: it shrinks to a shorter, wider crop (object-fit: cover) while the
   title and arrow keep their size. */
.home-slider__media {
	position: relative;
	flex: 0 1 auto;
	min-height: 140px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--theme-palette-color-4);
}

/* Slides stack in the same box. The active one is fully revealed; an incoming
   one (.is-incoming, on top) starts clipped away and wipes in (.is-entering). */
.home-slide {
	position: absolute;
	inset: 0;
	display: block;
	clip-path: polygon(0% 0%, -38% 0%, -76% 100%, 0% 100%);
}

.home-slide.is-active {
	clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
}

.home-slide.is-incoming {
	z-index: 2;
}

.home-slide.is-entering {
	clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
	transition: clip-path 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The first slide wipes in on page load. */
.home-slider:not(.is-started) .home-slide.is-active {
	animation: homeFeatureWipe 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0.15s both;
}

@keyframes homeFeatureWipe {
	from {
		clip-path: polygon(0% 0%, -38% 0%, -76% 100%, 0% 100%);
	}
	to {
		clip-path: polygon(0% 0%, 138% 0%, 100% 100%, 0% 100%);
	}
}

.home-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Title/subtitle on the left, the arrow at the right, level with the top of the
   title. Text slides share one grid cell so the area is as tall as the longest
   title. */
.home-slider__foot {
	flex: 0 0 auto;
	padding-top: clamp(28px, 3.4vw, 48px);
}

.home-slider__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px 48px;
}

.home-slider__text {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
}

.home-slide-text {
	grid-area: 1 / 1;
	align-self: start;
	display: block;
	color: inherit;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s, translate 0.5s ease;
}

.home-slide-text.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.4s ease 0.2s, visibility 0s, translate 0.5s ease;
}

.home-slide-text__title {
	display: block;
	font-family: Fraunces, serif;
	font-weight: 300;
	font-size: clamp(2.5rem, 7vw, 60px);
	line-height: 1;
	letter-spacing: -0.04em;
	text-transform: capitalize;
}

/* Padding on the right (offset by a negative margin) keeps each word's mask
   from shaving off the last letter, which overhangs its box because of the
   negative letter-spacing. */
.home-slide-text__title .title-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.15em;
	margin-bottom: -0.15em;
	padding-right: 0.08em;
	margin-right: -0.08em;
}

.home-slide-text.is-active .title-word-inner {
	display: inline-block;
	animation: titleRise 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(0.5s + var(--i, 0) * 0.09s);
}

.home-slide-text:not(.is-active) .title-word-inner {
	display: inline-block;
}

.home-slide-text__sub {
	display: block;
	margin-top: 14px;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.home-slide-text.is-active .home-slide-text__sub {
	animation: heroFadeIn 1s ease 1.1s both;
}

.home-slider__nav {
	flex: 0 0 auto;
	display: flex;
	gap: 24px;
}

.home-slider__btn {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
}

.home-slider__btn:hover,
.home-slider__btn:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

@media (hover: hover) {
	.home-slide-text.is-active:hover {
		translate: 20px 0;
	}

	.home-slide-text:hover .ct-word-tail {
		font-style: italic;
	}
}

/* Mobile: the still on top, title / subtitle / controls stacked below it on
   the page background in jet, like the project pages. */
@media (max-width: 689.98px) {
	.home-slider {
		display: block;
		aspect-ratio: auto;
		max-height: none;
		height: auto;
		min-height: 0;
		overflow: visible;
		background: none;
		color: var(--theme-palette-color-4);
	}

	.home-slider::after {
		display: none;
	}

	.home-slider__media {
		position: relative;
		aspect-ratio: 1 / 1;
	}

	.home-slider__foot {
		position: static;
		padding: 24px clamp(16px, 4vw, 24px) 32px;
	}

	.home-slider__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* The text area follows only the current slide, so the arrow sits right
	   under it. The other titles are taken out of flow instead of all sharing
	   one box sized to the tallest title (which left a gap under short ones). */
	.home-slider__text {
		position: relative;
		max-width: none;
		width: 100%;
	}

	.home-slide-text:not(.is-active) {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.home-slide-text__title {
		font-size: clamp(2.2rem, 11vw, 3.2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-slide.is-entering,
	.home-slide-text,
	.home-slide-text.is-active {
		transition: none;
	}

	.home-slider:not(.is-started) .home-slide.is-active,
	.home-slide-text.is-active .title-word-inner,
	.home-slide-text.is-active .home-slide-text__sub {
		animation: none;
	}
}