/* ============================================================
   adjuyandkidt — editorial styles
   Typography: Anton (display) · Archivo (body) · Space Mono (labels)
   All classes are prefixed ak- and applied via each block's
   "Additional CSS class(es)" field, so everything stays native.

   Specificity system:
   - base resets:    body .ak-sec <element>   (beats theme defaults)
   - variants:       .ak-sec .ak-<class>      (beats the base resets)
   ============================================================ */

:root {
	--ak-bg: #e9e7e1;
	--ak-ink: #131210;
	--ak-body: #26241f;
	--ak-mute: #98948c;
	--ak-faint: #bdb9b1;
	--ak-line: rgba(19, 18, 16, 0.22);
	--ak-line-strong: #131210;
	--ak-font-display: "Anton", "Arial Narrow", sans-serif;
	--ak-font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--ak-font-mono: "Space Mono", "Courier New", monospace;
	--ak-max: 1720px;
	--ak-gut: clamp(18px, 3vw, 48px);
	--ak-gap: clamp(0.8rem, 1.6vw, 1.6rem);
}

/* Page canvas: any page containing our sections gets the paper background */
body:has(.ak-sec) {
	background: var(--ak-bg);
	color: var(--ak-body);
}
.editor-styles-wrapper:has(.ak-sec) {
	background: var(--ak-bg);
}

/* Blocksy renders the header and footer itself (they're theme chrome, not
   part of any page's pasted content), so our fonts never reached them and
   they were falling back to the browser's plain system font. */
.ct-header,
.ct-footer {
	font-family: var(--ak-font-mono);
}
.ct-header .site-title a {
	font-family: var(--ak-font-mono);
	font-weight: 700;
	letter-spacing: 0.03em;
}
/* !important: Blocksy sets font-family directly on nav/footer links, which
   wins over a plain inherited value from the .ct-header/.ct-footer rule
   above (confirmed by testing live — inheritance alone wasn't enough) */
.ct-header nav a,
.ct-footer a {
	font-family: var(--ak-font-mono) !important;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- base ---------- */

.ak-sec {
	font-family: var(--ak-font-sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ak-body);
	margin-top: 0;
	margin-bottom: 0;
}
body .ak-sec :is(h1, h2, h3, h4, p, ul, ol, figure) {
	margin: 0;
}
.ak-sec a {
	color: inherit;
	text-decoration: none;
}
.ak-sec p a:hover,
.ak-sec li a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ak-wrap {
	max-width: var(--ak-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ak-gut);
	padding-right: var(--ak-gut);
}
.ak-sec img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

/* section vertical rhythm */
.ak-sec.ak-pad {
	padding-top: clamp(3rem, 7vw, 6.5rem);
	padding-bottom: clamp(3rem, 7vw, 6.5rem);
}
.ak-sec.ak-pad-s {
	padding-top: clamp(1.5rem, 3.5vw, 3rem);
	padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
}

/* ---------- type variants ---------- */

.ak-sec .ak-mono,
.ak-sec .ak-mono a {
	font-family: var(--ak-font-mono);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ak-ink);
	line-height: 1.9;
}
.ak-sec .ak-mono-mute,
.ak-sec .ak-mono-mute a {
	color: var(--ak-mute);
}
.ak-sec .ak-center {
	text-align: center;
}

.ak-sec .ak-h1,
.ak-sec .ak-line,
.ak-sec .ak-filter-item {
	font-family: var(--ak-font-display);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--ak-ink);
	margin: 0;
}

/* hero headline */
.ak-sec .ak-h1 {
	font-size: clamp(3rem, 8vw, 8.6rem);
	line-height: 0.96;
	letter-spacing: 0.005em;
}

/* body copy widths */
.ak-sec .ak-intro-copy {
	max-width: 34ch;
	font-size: clamp(0.95rem, 1.15vw, 1.1rem);
	margin-bottom: 1.5rem;
}
.ak-sec .ak-copy {
	max-width: 62ch;
}
.ak-sec .ak-small {
	font-size: 0.9rem;
	line-height: 1.55;
}

/* arrow links (SAY HELLO →, LEARN MORE →, …) */
.ak-sec .ak-link,
.ak-sec .ak-link a {
	font-family: var(--ak-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ak-ink);
	line-height: 1.9;
}
.ak-sec .ak-link a {
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 0.15s ease;
}
.ak-sec .ak-link a:hover {
	text-decoration: none;
	border-bottom-color: var(--ak-ink);
}

/* ============================================================
   HOME — HERO
   ============================================================ */

.ak-hero .wp-block-columns {
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 4rem);
}
.ak-sec .ak-hero-line2 {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.8vw, 1.8rem);
	margin-top: 0.08em;
}
.ak-hero-line2 > .wp-block-image {
	flex: 0 0 clamp(60px, 7.5vw, 120px);
}
.ak-hero-line2 > .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.ak-hero-line2 > .ak-round img {
	aspect-ratio: 1 / 1;
}
.ak-sec .ak-hero-aside {
	padding-top: clamp(0.5rem, 2.5vw, 2.4rem);
}

/* hover text-disperse — same font/size/color as any other .ak-h1, JS just
   wraps each character in a span so it can be nudged on :hover */
.ak-sec .ak-disperse {
	cursor: pointer;
}
.ak-disperse-ch {
	display: inline-block;
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform;
}
.ak-disperse:hover .ak-disperse-ch {
	transform: translate(var(--dx), var(--dy)) rotate(var(--dr));
}

/* ============================================================
   CASE STUDY THUMBNAIL STRIP
   ============================================================ */

.ak-sec .ak-strip {
	display: flex;
	gap: var(--ak-gap);
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ak-faint) transparent;
	padding-bottom: 0.5rem;
}
.ak-strip > .wp-block-image {
	flex: 0 0 clamp(210px, 23vw, 320px);
}
.ak-strip > .wp-block-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}
.ak-strip > .wp-block-image a {
	display: block;
}

/* ============================================================
   FEATURED IMAGE (full-bleed single visual)
   ============================================================ */

.ak-sec.ak-featured img {
	width: 100%;
	aspect-ratio: 21 / 10;
	object-fit: cover;
	border-radius: 0; /* full-bleed edge-to-edge, no rounding */
}

/* ============================================================
   MANIFESTO
   ============================================================ */

.ak-sec.ak-manifesto {
	text-align: center;
}
.ak-manifesto .ak-mono {
	margin-bottom: clamp(1.6rem, 3.5vw, 3rem);
}
.ak-sec .ak-line {
	font-size: clamp(1.9rem, 4.9vw, 4.5rem);
	line-height: 1.12;
	text-align: center;
}
.ak-sec .ak-line span[style*="underline"] {
	text-decoration-thickness: 0.045em;
	text-underline-offset: 0.1em;
}

/* ============================================================
   FOOTER BAR
   ============================================================ */

.ak-sec.ak-footbar {
	border-top: 1px solid var(--ak-line-strong);
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}
.ak-sec .ak-footbar-in {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ============================================================
   PRACTICE — INTRO
   ============================================================ */

.ak-pr-intro .wp-block-columns {
	gap: clamp(1.5rem, 3.5vw, 4rem);
	align-items: flex-start;
}
.ak-pr-intro .ak-taglist-cols {
	gap: clamp(1rem, 2vw, 2rem);
	margin-top: 0;
}
.ak-sec.ak-pr-intro h2 {
	font-family: var(--ak-font-sans);
	font-weight: 600;
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	letter-spacing: -0.01em;
	color: var(--ak-ink);
	margin: 0 0 1.2rem;
}
.ak-sec.ak-pr-intro .ak-copy {
	margin-bottom: 2rem;
}
.ak-sec .ak-taglist {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--ak-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ak-ink);
}
.ak-sec .ak-taglist li {
	margin: 0 0 0.85em;
}
.ak-sec.ak-pr-intro .ak-link {
	margin-top: 2rem;
}
.ak-pr-img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* ============================================================
   LABEL + PARAGRAPH ROWS  (bio, CV, case study sections)
   ============================================================ */

.ak-sec .ak-row {
	border-top: 1px solid var(--ak-line);
	padding-top: clamp(1.8rem, 3.5vw, 3rem);
	padding-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.ak-row .wp-block-columns {
	gap: clamp(1rem, 3vw, 3rem);
	align-items: flex-start;
}
.ak-row .ak-copy p + p {
	margin-top: 1em;
}
.ak-row .ak-cs-fig,
.ak-row .ak-bento {
	margin-top: var(--ak-gap);
}
.ak-row .ak-copy + .ak-cs-fig,
.ak-row .ak-copy + .ak-bento {
	margin-top: 1.8rem;
}

/* CV entries */
.ak-sec .ak-cv-title {
	font-weight: 600;
	color: var(--ak-ink);
	margin: 0;
	max-width: 72ch;
}
.ak-sec .ak-cv-meta {
	font-family: var(--ak-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ak-mute);
	margin: 0.3em 0 1.7em;
}
.ak-sec .ak-cv-meta:last-child {
	margin-bottom: 0;
}

/* ============================================================
   SELECTED WORK — FILTER
   ============================================================ */

.ak-sec.ak-filter {
	text-align: center;
}
.ak-sec .ak-filter-item {
	font-size: clamp(2.3rem, 6.4vw, 5.6rem);
	line-height: 1.08;
	color: var(--ak-faint);
	cursor: pointer;
	transition: color 0.15s ease;
	user-select: none;
	text-align: center;
}
.ak-sec .ak-filter-item:hover {
	color: var(--ak-mute);
}
.ak-sec .ak-filter-item.is-on {
	color: var(--ak-ink);
}
.ak-sec .ak-filter-reset {
	cursor: pointer;
	margin-top: 2rem;
}

/* hover-pop preview image beside each category — pure CSS, no JS.
   The figure sits right after its paragraph in the markup and is
   revealed via the adjacent-sibling combinator on :hover. */
.ak-filter-stage {
	position: relative;
}
.ak-sec .ak-filter-img {
	position: absolute;
	left: 4%;
	top: 0;
	width: clamp(150px, 15vw, 230px);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(0.9);
	transform-origin: left center;
	transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 6;
}
.ak-sec .ak-filter-img img {
	width: 100%;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 16px 34px -14px rgba(19, 18, 16, 0.4);
}
.ak-sec .ak-filter-item:hover + .ak-filter-img {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}
/* two classes to match/beat ".ak-sec .ak-filter-img" specificity above —
   a single-class ".ak-fi-x" selector was losing to it, so every category's
   preview image was stuck at the base rule's top:0 regardless of hover target */
.ak-sec .ak-filter-img.ak-fi-speculative-design { top: 8%; }
.ak-sec .ak-filter-img.ak-fi-participatory-futures { top: 24%; }
.ak-sec .ak-filter-img.ak-fi-initiative-project { top: 40%; }
.ak-sec .ak-filter-img.ak-fi-brand-identity { top: 56%; }
.ak-sec .ak-filter-img.ak-fi-art-direction { top: 72%; }
.ak-sec .ak-filter-img.ak-fi-illustration { top: 88%; }

@media (max-width: 781px) {
	.ak-sec .ak-filter-img {
		display: none;
	}
}

/* ============================================================
   SELECTED WORK — PREVIEW CARDS
   ============================================================ */

.ak-sec .ak-card {
	border-top: 1px solid var(--ak-line-strong);
	padding-top: clamp(1.6rem, 3vw, 2.6rem);
	padding-bottom: clamp(2.4rem, 5vw, 4.5rem);
}
.ak-sec .ak-card-kicker {
	margin-bottom: 0.9rem;
}
.ak-sec .ak-card h3,
.ak-sec .ak-card h3 a {
	font-family: var(--ak-font-sans);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.9vw, 1.7rem);
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--ak-ink);
}
.ak-sec .ak-card h3 {
	margin: 0 0 1.6rem;
	max-width: 40ch;
}
.ak-sec .ak-card-meta {
	margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
	max-width: 1100px;
}
.ak-card-meta .ak-mono {
	margin-bottom: 0.4rem;
	color: var(--ak-mute);
}
.ak-card-meta .ak-small {
	max-width: 32ch;
}
.ak-sec .ak-card .ak-link {
	margin-top: 1.6rem;
}

/* ============================================================
   BENTO IMAGE GRID
   ============================================================ */

.ak-sec .ak-bento {
	gap: var(--ak-gap);
}
.ak-bento .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--ak-gap);
}
.ak-b-l img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}
.ak-b-s img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}
.ak-b-w img {
	aspect-ratio: 21 / 10;
	object-fit: cover;
	width: 100%;
}
/* Selected Work preview cards specifically: 16:9 for both images instead of
   the landscape/portrait bento pairing above (that pairing is still used
   inside full case-study pages' own Outcome & Gallery sections) — 16:9
   crops real photography much less aggressively than the 3:4 portrait cut. */
.ak-card .ak-b-l img,
.ak-card .ak-b-s img {
	aspect-ratio: 16 / 9;
}

/* ============================================================
   CASE STUDY
   ============================================================ */

.ak-sec .ak-cs-title {
	font-family: var(--ak-font-sans);
	font-weight: 600;
	font-size: clamp(1.9rem, 3.6vw, 3.2rem);
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--ak-ink);
	margin: 0.6rem 0 0;
	max-width: 30ch;
}
.ak-sec.ak-cs-hero img {
	width: 100%;
	aspect-ratio: 21 / 10;
	object-fit: cover;
	border-radius: 0; /* full-bleed edge-to-edge, no rounding */
}
.ak-cs-fig img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

/* ============================================================
   CONTACT — FORM
   ============================================================ */

.ak-form .wpcf7 form {
	margin: 0;
}
.ak-form .ak-frow {
	display: grid;
	grid-template-columns: clamp(90px, 12vw, 160px) minmax(0, 1fr);
	align-items: baseline;
	gap: 1rem;
	padding: 1.2rem 0;
}
/* Contact Form 7 runs its content through WordPress's automatic paragraph
   filter, which wraps each row's label+field in an unwanted <p>. That extra
   wrapper broke the 2-column grid above (the grid only saw one child — the
   <p> — instead of the label and field, so it collapsed into column 1).
   display:contents removes the <p> from the box model without removing it
   from the markup, so the grid sees the label and field directly again. */
.ak-form .ak-frow > p {
	display: contents;
}
@media (min-width: 782px) {
	.ak-form .ak-frow:has(textarea) {
		align-items: start;
	}
	.ak-form .ak-frow:has(textarea) .ak-flabel {
		padding-top: 1.15rem;
	}
}
.ak-form .ak-flabel {
	font-family: var(--ak-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ak-ink);
}
.ak-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.ak-form input[type="text"],
.ak-form input[type="email"],
.ak-form input[type="tel"],
.ak-form textarea {
	width: 100%;
	border: 0;
	background: transparent;
	font-family: var(--ak-font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.6vw, 3.1rem);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ak-ink);
	padding: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
}
.ak-form textarea {
	min-height: 3.4em;
	resize: vertical;
}
.ak-form ::placeholder {
	color: var(--ak-faint);
	opacity: 1;
}
.ak-form input:focus,
.ak-form textarea:focus {
	outline: none;
	box-shadow: none;
	border: 0;
}

/* interest pills (Contact Form 7 checkboxes) */
.ak-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.ak-form .wpcf7-list-item {
	margin: 0;
}
.ak-form .wpcf7-list-item label {
	display: inline-block;
	cursor: pointer;
}
.ak-form .wpcf7-list-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ak-form .wpcf7-list-item-label {
	display: inline-block;
	font-family: var(--ak-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ak-mute);
	border: 1px solid var(--ak-line);
	padding: 0.55em 1em;
	transition: all 0.15s ease;
}
.ak-form .wpcf7-list-item label:hover .wpcf7-list-item-label {
	color: var(--ak-ink);
	border-color: var(--ak-ink);
}
.ak-form .wpcf7-list-item input:checked + .wpcf7-list-item-label {
	background: var(--ak-ink);
	border-color: var(--ak-ink);
	color: var(--ak-bg);
}

/* submit */
.ak-form input[type="submit"],
.ak-form button[type="submit"] {
	font-family: var(--ak-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--ak-ink);
	color: var(--ak-bg);
	border: 1px solid var(--ak-ink);
	border-radius: 0;
	padding: 1em 2.2em;
	cursor: pointer;
	transition: all 0.15s ease;
}
.ak-form input[type="submit"]:hover,
.ak-form button[type="submit"]:hover {
	background: transparent;
	color: var(--ak-ink);
}
.ak-form .wpcf7-spinner {
	display: none;
}
.ak-form .wpcf7-not-valid-tip {
	font-family: var(--ak-font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #b3401f;
	margin-top: 0.4rem;
	display: block;
}
.ak-form .wpcf7-response-output {
	border: 1px solid var(--ak-ink) !important;
	font-family: var(--ak-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1em 1.4em !important;
	margin: 1.5rem 0 0 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 781px) {
	.ak-sec .ak-hero-aside {
		padding-top: 0;
	}
	.ak-strip > .wp-block-image {
		flex-basis: 68vw;
	}
	.ak-form .ak-frow {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
}

@media (max-width: 480px) {
	.ak-sec .ak-h1 {
		font-size: clamp(2.7rem, 13.5vw, 3.6rem);
	}
	.ak-sec .ak-filter-item {
		font-size: 2.1rem;
	}
}

/* ============================================================
   ROUNDED IMAGE HELPER  (add class ak-round-img to any image/video block)
   ============================================================ */

.ak-sec .ak-round-img img,
.ak-sec .ak-round-img video {
	border-radius: 16px;
}

/* ============================================================
   HOME — CASE STUDY GALLERY (fan stack)
   Reproduces the reference React/framer-motion gallery with plain
   CSS + JS: 5 rounded overlapping tiles that fan out, tilt, lift on
   hover and can be dragged. Images stay editable image blocks.
   ============================================================ */

.ak-gallery .ak-mono {
	margin-bottom: clamp(2rem, 4.5vw, 3.6rem);
}
.ak-fan {
	position: relative;
	height: 360px;
	max-width: 920px;
	margin: 0 auto clamp(1.6rem, 3vw, 2.6rem);
}
.ak-fan .ak-fan-item {
	--tw: clamp(180px, 18vw, 250px);
	--dx: 0px;
	--dy: 0px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--tw);
	aspect-ratio: 4 / 3;
	margin: calc(var(--tw) * -0.375) 0 0 calc(var(--tw) * -0.5);
	transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) rotate(var(--r));
	transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
	cursor: grab;
	touch-action: none;
	will-change: transform;
}
.ak-fan .ak-fan-item a {
	display: block;
	width: 100%;
	height: 100%;
}
.ak-fan .ak-fan-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 12px 34px -14px rgba(19, 18, 16, 0.4);
	pointer-events: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* fanned positions (this is also the no-JS static state) */
.ak-fan .ak-fan-item:nth-child(1) { --x: -300px; --y: 12px; --r: -3deg; z-index: 50; }
.ak-fan .ak-fan-item:nth-child(2) { --x: -150px; --y: 30px; --r: -2deg; z-index: 40; }
.ak-fan .ak-fan-item:nth-child(3) { --x: 0px;    --y: 4px;  --r: 3deg;  z-index: 30; }
.ak-fan .ak-fan-item:nth-child(4) { --x: 150px;  --y: 22px; --r: 2deg;  z-index: 20; }
.ak-fan .ak-fan-item:nth-child(5) { --x: 300px;  --y: 40px; --r: -2deg; z-index: 10; }
/* hover lift */
.ak-fan .ak-fan-item:hover {
	z-index: 100;
}
.ak-fan .ak-fan-item:hover img {
	transform: scale(1.07);
	box-shadow: 0 20px 44px -14px rgba(19, 18, 16, 0.45);
}
/* dragging: follow the pointer 1:1 (no position easing), raise above all */
.ak-fan .ak-fan-item.is-dragging {
	transition: none;
	z-index: 200;
	cursor: grabbing;
}
.ak-fan .ak-fan-item.is-dragging img {
	transform: scale(1.06);
}
/* JS entrance: collapsed + hidden, released with a stagger when in view */
.ak-fan .ak-fan-item.ak-pre {
	--x: 0px !important;
	--y: 0px !important;
	--r: 0deg !important;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ak-fan .ak-fan-item {
		transition: none;
	}
	.ak-fan .ak-fan-item.ak-pre {
		opacity: 1;
		--x: initial;
	}
}

/* mobile: fall back to a rounded horizontal scroll strip */
@media (max-width: 781px) {
	.ak-fan {
		position: static;
		height: auto;
		max-width: none;
		display: flex;
		gap: 12px;
		overflow-x: auto;
		padding-bottom: 8px;
		scrollbar-width: thin;
		scroll-snap-type: x mandatory;
	}
	.ak-fan .ak-fan-item {
		position: static;
		flex: 0 0 62vw;
		width: 62vw;
		margin: 0;
		transform: none !important;
		opacity: 1 !important;
		scroll-snap-align: center;
	}
	.ak-fan .ak-fan-item img {
		box-shadow: 0 8px 22px -14px rgba(19, 18, 16, 0.35);
	}
}

/* ============================================================
   CASE STUDY — extra elements (lede, caption, video, pull quote, wide)
   ============================================================ */

.ak-sec .ak-cs-kicker {
	margin-top: 0.5rem;
}
.ak-sec .ak-lede {
	font-size: clamp(1.1rem, 1.7vw, 1.45rem);
	line-height: 1.5;
	color: var(--ak-ink);
	margin-bottom: 1.3rem !important;
}
.ak-sec .ak-fig-cap {
	margin-top: 0.6rem;
}
.ak-sec .ak-cs-video video {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	background: #dcd9d2;
}
.ak-sec .ak-cs-video figcaption {
	font-family: var(--ak-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ak-mute);
	margin-top: 0.6rem;
}
.ak-sec.ak-cs-wide img {
	width: 100%;
	aspect-ratio: 21 / 10;
	object-fit: cover;
	border-radius: 0; /* full-bleed edge-to-edge, no rounding */
}
.ak-sec .ak-quote {
	border-left: 2px solid var(--ak-ink);
	padding-left: 1.3rem;
	margin: 0 0 1.5rem;
}
.ak-sec .ak-quote p {
	font-family: var(--ak-font-display);
	text-transform: uppercase;
	font-size: clamp(1.3rem, 2.5vw, 2.1rem);
	line-height: 1.15;
	color: var(--ak-ink);
}

/* case study — prev / next navigation */
.ak-sec .ak-cs-nav {
	border-top: 1px solid var(--ak-line-strong);
}
.ak-cs-nav .wp-block-column:last-child {
	text-align: right;
}
.ak-cs-nav-dir {
	display: block;
	margin-bottom: 0.5rem;
}
.ak-cs-nav-title {
	font-family: var(--ak-font-sans);
	font-weight: 600;
	font-size: clamp(1.1rem, 1.9vw, 1.5rem);
	line-height: 1.25;
	color: var(--ak-ink);
}
@media (max-width: 781px) {
	.ak-cs-nav .wp-block-column:last-child {
		text-align: left;
	}
}

/* ============================================================
   VIDEO BACKGROUND (utility — currently powers the Home manifesto)
   Full-bleed, scroll-scrubbed video behind a block of text.

   Scrollytelling pattern: the outer .ak-vidbg is a tall (200vh)
   scroll "runway" so there is always a full viewport of scroll
   distance to scrub through, no matter what content follows it.
   The inner .ak-vidbg-stage is position:sticky and pins the video
   to the viewport for that runway, then releases back to normal
   scrolling once it's played through — matching the brief's "run
   for the scroll distance across the section, then release" spec.

   object-fit: cover crops the near-square source to fill a wide
   banner (keep the important motion centred). A dark scrim keeps
   the white text readable. Scrubbing is driven by adjuy-kidt.js
   (targets any .ak-vidbg section on the page).
   ============================================================ */

.ak-sec.ak-vidbg {
	position: relative;
	height: 200vh;
}
.ak-vidbg-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: clamp(3rem, 7vw, 6.5rem) 0;
	box-sizing: border-box;
}
.ak-vidbg-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ak-ink);
}
.ak-vidbg-vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.ak-vidbg-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(9, 8, 7, 0.5) 0%,
		rgba(9, 8, 7, 0.32) 45%,
		rgba(9, 8, 7, 0.52) 100%
	);
}
.ak-vidbg .ak-vidbg-in {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* white-on-video text: scoped to the manifesto so it only applies here */
.ak-manifesto.ak-vidbg .ak-mono {
	color: rgba(255, 255, 255, 0.86);
}
.ak-manifesto.ak-vidbg .ak-line {
	color: #fdfcfa;
}
.ak-manifesto.ak-vidbg .ak-line span[style*="underline"] {
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 781px) {
	/* mobile plays a quiet loop instead of scrubbing (see adjuy-kidt.js),
	   so the tall scroll-runway trick isn't needed here */
	.ak-sec.ak-vidbg {
		height: auto;
	}
	.ak-vidbg-stage {
		position: static;
		height: auto;
		min-height: 88vh;
	}
	/* slightly heavier wash on mobile — text stacks over more of the frame */
	.ak-vidbg-scrim {
		background: linear-gradient(
			180deg,
			rgba(9, 8, 7, 0.56) 0%,
			rgba(9, 8, 7, 0.4) 50%,
			rgba(9, 8, 7, 0.6) 100%
		);
	}
}