/* ============================================================
   DEZACT components — .dz-* classes for Group blocks + core-block
   treatments. Editors add ONE class in "Additional CSS class(es)";
   the block inherits the design. Documented in README.md.
   ============================================================ */

/* ============ HEADER / NAV ============ */
.dz-header {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin: 22px var(--dz-gutter) 0;
	padding: 12px 14px 12px 24px;
	background: var(--dz-surface-gloss);
	border: 1px solid var(--dz-hairline);
	border-radius: var(--dz-r-blade);
	box-shadow: 0 18px 40px -30px rgba(20, 19, 23, .5), var(--dz-sheen);
	position: relative;
	z-index: 20;
}
.dz-header .wp-block-site-logo img { width: 26px; height: 26px; border-radius: 0 13px 0 13px; }
.dz-header .wp-block-site-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: var(--dz-track-wordmark);
	text-transform: uppercase;
}
.dz-header .wp-block-site-title a { text-decoration: none; color: var(--dz-ink); }
.dz-header .wp-block-navigation { margin-left: auto; font-size: 14.5px; }
.dz-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 8px 17px;
	border-radius: var(--dz-r-blade);
	color: var(--dz-grey);
	transition: background var(--dz-speed) var(--dz-ease), color var(--dz-speed) var(--dz-ease);
}
.dz-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.dz-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(179, 146, 95, .14);
	color: var(--dz-ink);
	text-decoration: none;
}
.dz-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(20, 19, 23, .07);
}
/* dropdowns as gloss shells */
.dz-header .wp-block-navigation__submenu-container {
	background: var(--dz-gloss) !important;
	border: 1px solid var(--dz-hairline) !important;
	border-radius: 22px 22px 22px 4px !important;
	box-shadow: var(--dz-shadow-hover);
	padding: 8px !important;
	min-width: 260px;
}
.dz-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: 14px; }
/* mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--dz-plaster);
	font-family: var(--dz-font-sans);
}

/* language switch — a Buttons block with class dz-lang */
.dz-lang { border: 1px solid var(--dz-hairline-strong); border-radius: var(--dz-r-blade); padding: 3px; gap: 2px !important; flex-wrap: nowrap !important; }
.dz-lang .wp-block-button__link {
	background: transparent;
	color: var(--dz-grey);
	font-family: var(--dz-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	padding: 4px 12px;
	border-radius: var(--dz-r-blade);
	transition: background var(--dz-speed) var(--dz-ease), color var(--dz-speed) var(--dz-ease);
}
.dz-lang .wp-block-button__link:hover { background: rgba(179, 146, 95, .2); color: var(--dz-ink); }
.dz-lang .is-active .wp-block-button__link, .dz-lang .wp-block-button:first-child .wp-block-button__link { background: var(--dz-ink); color: var(--dz-plaster); }
.dz-zh .dz-lang .wp-block-button:first-child .wp-block-button__link { background: transparent; color: var(--dz-grey); }
.dz-zh .dz-lang .wp-block-button:last-child .wp-block-button__link { background: var(--dz-ink); color: var(--dz-plaster); }

/* ============ SHELLS (Group blocks) ============ */
.dz-shell {
	background: var(--dz-surface-shell);
	border-radius: 8px 8px var(--dz-r-shell-size) 8px;
	box-shadow: var(--dz-sheen), 0 30px 60px -50px rgba(20, 19, 23, .5);
	overflow: hidden;
}
.dz-shell-oak {
	background: var(--dz-surface-oak);
	border-radius: 0 190px 0 0;
	padding: clamp(28px, 4vw, 54px) var(--dz-gutter);
	position: relative;
	overflow: hidden;
	color: #1d1812;
}
.dz-shell-oak h1, .dz-shell-oak h2, .dz-shell-oak h3 { color: #1d1812; }
.dz-shell-oak p { color: #42351f; }
.dz-plinth {
	background: #eceae4;
	border-radius: var(--dz-r-plinth);
	padding: clamp(28px, 4vw, 48px) var(--dz-gutter);
	text-align: center;
}
.dz-dark {
	background: var(--dz-ink);
	color: #c9c7c1;
	border-radius: 170px 8px 8px 8px;
	position: relative;
	overflow: hidden;
}
.dz-dark::before { /* LED light-line seam */
	content: "";
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--dz-light-line);
	box-shadow: var(--dz-light-glow);
}
.dz-dark h1, .dz-dark h2, .dz-dark h3, .dz-dark .wp-block-site-title a { color: var(--dz-plaster); }
.dz-dark a { color: #c9c7c1; }
.dz-dark a:hover { color: #d5bd93; }

/* ============ RIBBON (Separator block: dz-ribbon) ============ */
hr.dz-ribbon {
	border: 0;
	background: none;
	height: 58px;
	margin: 34px 0;
	position: relative;
	overflow: visible;
	opacity: 1;
	width: 100%;
	max-width: none !important;
}
hr.dz-ribbon::before {  /* up-arc + node dot */
	content: "";
	position: absolute;
	left: 4%; right: 55%; top: 0; bottom: 0;
	border-top: 2.5px solid var(--dz-ink);
	border-top-left-radius: 100% 100%;
	background:
		radial-gradient(circle 5px at 5px calc(100% - 5px), var(--dz-ink) 98%, transparent) no-repeat;
}
hr.dz-ribbon::after {  /* down-arc */
	content: "";
	position: absolute;
	left: 45%; right: 8%; top: 0; bottom: 0;
	border-top: 2.5px solid var(--dz-ink);
	border-top-right-radius: 100% 100%;
}

/* ============ TYPE ACCESSORIES ============ */
.dz-kicker {
	font-family: var(--dz-font-mono) !important;
	font-size: 11.5px !important;
	letter-spacing: var(--dz-track-label);
	text-transform: uppercase;
	color: var(--dz-oak-deep);
}
.dz-kicker-grey { color: var(--dz-grey-soft); }
.dz-outline {  /* stroked display text */
	-webkit-text-stroke: 2px var(--dz-ink);
	color: transparent !important;
}
.dz-dark .dz-outline { -webkit-text-stroke: 1.5px rgba(246, 245, 242, .42); }
.dz-indent-1 { margin-left: clamp(20px, 5vw, 70px) !important; }
.dz-indent-2 { margin-left: clamp(48px, 12vw, 170px) !important; }
.dz-year {  /* big outlined year numeral, e.g. a paragraph holding ’16 */
	font-family: var(--dz-font-mono) !important;
	font-size: clamp(44px, 7vw, 88px) !important;
	line-height: 1 !important;
	-webkit-text-stroke: 2px var(--dz-oak-deep);
	color: transparent !important;
}

/* ============ SPECS (event fact block) ============ */
/* Group class dz-specs — each paragraph: <strong>LABEL</strong> value */
.dz-specs { border-top: 1px solid var(--dz-hairline-strong); border-bottom: 1px solid var(--dz-hairline-strong); padding: 6px 0; }
.dz-specs p {
	display: grid;
	grid-template-columns: minmax(110px, 150px) 1fr;
	gap: 12px;
	align-items: baseline;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--dz-hairline);
	font-size: 15px;
}
.dz-specs p:last-child { border-bottom: 0; }
.dz-specs p strong {
	font-family: var(--dz-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: var(--dz-track-label);
	text-transform: uppercase;
	color: var(--dz-grey-soft);
}
/* Chip variant — Group class dz-chips (row layout); each paragraph becomes a capsule */
.dz-chips { gap: 14px !important; flex-wrap: wrap; }
.dz-chips p {
	margin: 0;
	background: var(--dz-surface-gloss);
	border: 1px solid var(--dz-hairline);
	border-radius: var(--dz-r-blade);
	box-shadow: var(--dz-sheen);
	padding: 11px 22px;
	font-size: 14px;
}
.dz-chips p strong {
	font-family: var(--dz-font-mono);
	font-weight: 500;
	font-size: 9.5px;
	letter-spacing: var(--dz-track-label);
	text-transform: uppercase;
	color: var(--dz-grey-soft);
	margin-right: 10px;
}

/* ============ BLADES (index rows / pagers) ============ */
/* Group class dz-index: every direct child link-row becomes a strata blade.
   Works on hand-authored Groups AND on Query Loop post-templates. */
.dz-index { display: flex; flex-direction: column; gap: 12px; }
.dz-blade, .dz-index > * {
	background: var(--dz-surface-gloss);
	border: 1px solid rgba(20, 19, 23, .09);
	border-radius: var(--dz-r-blade);
	box-shadow: var(--dz-sheen);
	padding: 18px 30px;
	transition: transform var(--dz-speed) var(--dz-ease), box-shadow var(--dz-speed) var(--dz-ease), border-color var(--dz-speed) var(--dz-ease);
}
.dz-blade:hover, .dz-index > *:hover {
	transform: translateX(18px);
	box-shadow: var(--dz-shadow-hover);
	border-color: rgba(138, 107, 60, .55);
}
/* staggered shelf lengths — the strata wall */
.dz-index > *:nth-child(4n+2) { margin-right: clamp(12px, 3.5vw, 44px); }
.dz-index > *:nth-child(4n+3) { margin-right: clamp(24px, 7vw, 88px); }
.dz-index > *:nth-child(6n)   { margin-right: clamp(36px, 10vw, 132px); }
.dz-index a { text-decoration: none; }
.dz-index .wp-block-post-title { font-size: 19px; font-weight: 500; margin: 0; }
.dz-index .wp-block-post-date { font-family: var(--dz-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--dz-grey-soft); }

/* ============ CARDS (featured work) ============ */
/* Group class dz-card around Image + paragraphs (usually inside Columns) */
.dz-card { display: flex; flex-direction: column; gap: 14px; }
.dz-card .wp-block-image { margin: 0; }
.dz-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	border-radius: 0 var(--dz-r-sweep-size) 0 0;
	transition: border-radius .6s var(--dz-ease), box-shadow .6s var(--dz-ease);
}
.dz-card:hover .wp-block-image img {
	border-radius: var(--dz-r-sweep-size) 0 var(--dz-r-sweep-size) 0;
	box-shadow: 0 30px 50px -34px rgba(20, 19, 23, .6);
}
.dz-card h3, .dz-card h2 { font-size: 19px; font-weight: 500; margin: 0; }
.dz-card .dz-kicker, .dz-card .dz-kicker-grey { margin: 0; }

/* ============ GALLERIES ============ */
/* Default Gallery block = editorial: aspect kept, alternating swept corners, mono captions */
.wp-block-gallery { --wp--style--unstable-gallery-gap: 26px; gap: 26px; }
.wp-block-gallery .wp-block-image img { transition: border-radius .6s var(--dz-ease); }
.wp-block-gallery .wp-block-image:nth-child(4n+1) img { border-radius: 0 var(--dz-r-sweep-size) 0 0; }
.wp-block-gallery .wp-block-image:nth-child(4n+2) img { border-radius: var(--dz-r-sweep-size) 0 0 0; }
.wp-block-gallery .wp-block-image:nth-child(4n+3) img { border-radius: 0 0 0 var(--dz-r-sweep-size); }
.wp-block-gallery .wp-block-image:nth-child(4n+4) img { border-radius: 0 0 var(--dz-r-sweep-size) 0; }
.wp-block-gallery .wp-block-image:hover img { border-radius: 24px; }
.wp-block-gallery figcaption, .wp-block-image figcaption {
	font-family: var(--dz-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dz-grey-soft);
	text-align: left;
	margin-top: 12px;
	position: static;
	background: none;
	padding: 0;
}
/* Uniform grid — Gallery class dz-gallery-grid */
.wp-block-gallery.dz-gallery-grid .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; }
.wp-block-gallery.dz-gallery-grid .wp-block-image:nth-child(n) img { border-radius: 0; }
.wp-block-gallery.dz-gallery-grid .wp-block-image:nth-child(3n+1) img { border-radius: 0 0 70px 0; }
.wp-block-gallery.dz-gallery-grid .wp-block-image:nth-child(3n+3) img { border-radius: 0 0 0 70px; }
/* Strata — Gallery class dz-gallery-strata: full-width stacked, editorial spacing */
.wp-block-gallery.dz-gallery-strata { flex-direction: column; gap: 56px; }
.wp-block-gallery.dz-gallery-strata .wp-block-image { width: 100% !important; }
.wp-block-gallery.dz-gallery-strata .wp-block-image:nth-child(n) img { border-radius: 0 var(--dz-r-sweep-size) 0 0; width: 100%; }
/* Archival — add dz-archival to a Gallery, Image or Group: plinth field, never upscaled */
.dz-archival { background: #eceae4; border-radius: var(--dz-r-plinth); padding: clamp(28px, 4vw, 48px); justify-content: center; }
.dz-archival .wp-block-image img, .wp-block-image.dz-archival img {
	width: auto;
	max-width: 100%;
	max-height: 70vh;
	border-radius: 0 !important;
	box-shadow: 0 26px 40px -30px rgba(20, 19, 23, .55);
	margin: 0 auto;
}
.dz-archival figcaption { text-align: center; }

/* ============ BUTTONS ============ */
.wp-block-button__link, .wp-element-button {
	font-family: var(--dz-font-sans);
	font-size: 14.5px;
	letter-spacing: .04em;
	background: var(--dz-ink);
	color: var(--dz-plaster);
	border-radius: var(--dz-r-blade) var(--dz-r-blade) var(--dz-r-blade) 26px;
	padding: 15px 34px;
	transition: background var(--dz-speed) var(--dz-ease), transform var(--dz-speed) var(--dz-ease), box-shadow var(--dz-speed) var(--dz-ease);
}
.wp-block-button__link:hover, .wp-element-button:hover {
	background: var(--dz-oak-deep);
	color: var(--dz-plaster);
	transform: translateY(-2px);
	box-shadow: 0 18px 30px -18px rgba(20, 19, 23, .6);
}
.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--dz-hairline-strong);
	color: var(--dz-ink);
	border-radius: 26px var(--dz-r-blade) var(--dz-r-blade) var(--dz-r-blade);
}
.is-style-outline .wp-block-button__link:hover { border-color: var(--dz-oak-deep); background: rgba(179, 146, 95, .1); box-shadow: none; }

/* ============ MARQUEE (Group class dz-marquee; put the same paragraph in it TWICE) ============ */
.dz-marquee {
	background: var(--dz-ink);
	overflow: hidden;
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	padding: 16px 0;
}
.dz-marquee::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--dz-light-line);
	box-shadow: var(--dz-light-glow);
}
.dz-marquee p {
	margin: 0;
	font-family: var(--dz-font-mono);
	font-size: 12.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #c9c7c1;
	white-space: nowrap;
	padding-right: 60px;
	flex: none;
	animation: dz-marquee 32s linear infinite;
}

/* ============ PULSE DOT (inline span class dz-live) ============ */
.dz-live {
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 999px;
	background: currentColor;
	margin-right: 10px;
	animation: dz-pulse 1.6s ease-in-out infinite;
}

/* ============ CURSOR (elements created by dezact.js) ============ */
.dz-has-cursor body { cursor: none; }
.dz-has-cursor a, .dz-has-cursor button, .dz-has-cursor input, .dz-has-cursor label { cursor: none; }
.dz-cursor-ring {
	position: fixed;
	left: -19px; top: -19px;
	width: 38px; height: 38px;
	border: 1.5px solid var(--dz-ink);
	border-radius: 999px;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 500 9px var(--dz-font-mono);
	letter-spacing: .14em;
	color: var(--dz-oak-deep);
	transition: width .25s, height .25s, left .25s, top .25s, background .25s, border-color .25s, opacity .2s;
}
.dz-cursor-ring.is-link { width: 52px; height: 52px; left: -26px; top: -26px; border-color: var(--dz-oak-deep); background: rgba(179, 146, 95, .14); }
.dz-cursor-ring.is-view { width: 64px; height: 64px; left: -32px; top: -32px; border-color: var(--dz-oak-deep); background: rgba(179, 146, 95, .16); }
.dz-cursor-ring.is-view::after { content: "VIEW"; }
.dz-cursor-dot {
	position: fixed;
	left: -3.5px; top: -3.5px;
	width: 7px; height: 7px;
	background: var(--dz-ink);
	border-radius: 999px;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
	transition: background .25s, opacity .2s;
}
.dz-cursor-dot.is-accent { background: var(--dz-oak-deep); }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.dz-cursor-ring, .dz-cursor-dot { display: none; }
	.dz-has-cursor body, .dz-has-cursor a, .dz-has-cursor button { cursor: auto; }
}

/* ============ SCROLL MOTION ============ */
/* Modern engines: pure-CSS scroll-scrubbed reveals. Others: static (or IO fallback via dezact.js). */
@supports (animation-timeline: view()) {
	.wp-block-image, .wp-block-gallery figure, .dz-card, .dz-blade, .dz-index > *, .dz-shell-oak, .dz-plinth, .dz-rise {
		animation: dz-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 42%;
	}
	.dz-aperture, .dz-aperture img {
		animation: dz-aperture linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}
	/* shelf cascade */
	.dz-index > *:nth-child(2n) { animation-range: entry 6% entry 48%; }
	.dz-index > *:nth-child(3n) { animation-range: entry 10% entry 52%; }
	.wp-block-gallery figure:nth-child(2n) { animation-range: entry 8% entry 50%; }
	.wp-block-gallery figure:nth-child(3n) { animation-range: entry 16% entry 58%; }
}
/* IO fallback states (html.dz-io added by dezact.js when view() unsupported) */
.dz-io .wp-block-image, .dz-io .wp-block-gallery figure, .dz-io .dz-card, .dz-io .dz-blade, .dz-io .dz-shell-oak, .dz-io .dz-plinth, .dz-io .dz-rise {
	opacity: 0;
	transform: translateY(46px);
	transition: opacity .8s var(--dz-ease), transform .8s var(--dz-ease);
}
.dz-io .dz-in { opacity: 1; transform: none; }