/* ============================================================
   danwhelan.ie — design system
   Ink on off-white, General Sans, iridescent oil-slick accents.
   ============================================================ */

@font-face {
	font-family: "General Sans";
	src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("../fonts/GeneralSans-VariableItalic.woff2") format("woff2");
	font-weight: 200 700;
	font-style: italic;
	font-display: swap;
}

:root {
	--ink: #101014;
	--ink-soft: #43434b;
	--ink-faint: #6f6f78;
	--bg: #fbfbfa;
	--surface: #ffffff;
	--hairline: rgba(16, 16, 20, 0.12);
	--radius: 18px;
	--radius-pill: 999px;
	--font: "General Sans", "Helvetica Neue", Arial, sans-serif;
	--w-light: 300;
	--w-regular: 420;
	--w-medium: 520;
	--w-bold: 640;
	--container: 1200px;
	--gutter: clamp(20px, 4vw, 48px);
	--iri: conic-gradient(from 210deg,
		#ffd9a0, #ffb7e0, #c9a2ff, #7cd4ff, #8fffd0, #fff6a3, #ffd9a0);
	--iri-linear: linear-gradient(115deg,
		#ffd9a0 0%, #ffb7e0 22%, #c9a2ff 45%, #7cd4ff 66%, #8fffd0 84%, #fff6a3 100%);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	font-weight: var(--w-regular);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: transparent; }
h1, h2, h3, h4 { font-weight: var(--w-bold); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dw-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
::selection { background: #c9a2ff55; }

/* ---------- iridescent utilities ---------- */
.dw-iri-text {
	background: var(--iri-linear);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dw-blob {
	position: absolute;
	border-radius: 50%;
	background: var(--iri);
	filter: blur(70px) saturate(1.15);
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.dw-blob { animation: dw-drift 26s var(--ease) infinite alternate; }
	@keyframes dw-drift {
		from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
		to   { transform: translate3d(4%, 3%, 0) rotate(28deg) scale(1.08); }
	}
}

/* ---------- buttons ---------- */
/* The native contact form's submit is a plain .dw-btn--primary now; the
   Fluent Forms selector chain these lists used to carry is gone with the
   plugin. */
@property --dw-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
:is(.dw-btn, .dw-workbtn) {
	position: relative; isolation: isolate;
	display: inline-flex; align-items: center; gap: 0.55em;
	font-family: var(--font); font-weight: var(--w-medium); font-size: 1rem;
	padding: 0.85em 1.7em; border-radius: var(--radius-pill);
	border: 1px solid var(--ink); cursor: pointer;
	text-decoration: none; line-height: 1;
	background: transparent; color: var(--ink);
	--dw-veil: color-mix(in srgb, var(--surface) 85%, transparent);
	transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
		background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.dw-btn--primary {
	background: var(--ink); color: #fff;
	--dw-veil: color-mix(in srgb, #0d0d11 86%, transparent);
}
/* Comet: an iridescent tail orbiting just outside the border. The mask pair
   (content-box XOR full box) clips the conic wedge to the 3px band the padding
   reserves - without it the wedge paints across the button face, because a
   negative-z pseudo still draws ABOVE its own element's background. */
:is(.dw-btn, .dw-workbtn)::before {
	content: ""; position: absolute; inset: -3px; z-index: -1;
	border-radius: var(--radius-pill);
	padding: 3px;
	background: conic-gradient(from var(--dw-angle),
		transparent 0deg 250deg, #7cd4ff 300deg, #c9a2ff 325deg,
		#ffb7e0 345deg, #fff6a3 355deg, #ffffff 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}
:is(.dw-btn, .dw-workbtn):is(:hover, :focus-visible) {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px -6px rgba(16, 16, 20, 0.35),
		0 0 0 4px #ffffff, 0 0 0 5px transparent,
		0 10px 34px -4px #c9a2ff66;
	text-decoration: none;
	background: linear-gradient(var(--dw-veil), var(--dw-veil)), var(--iri-linear);
	background-size: auto, 260% 260%;
	background-position: 0 0, 0% 50%;
}
:is(.dw-btn, .dw-workbtn):is(:hover, :focus-visible)::before { opacity: 1; }
:is(.dw-btn, .dw-workbtn):active { transform: translateY(0) scale(0.97); box-shadow: none; }
:is(.dw-btn, .dw-workbtn):focus-visible { outline: 2px solid #7cd4ff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
	:is(.dw-btn, .dw-workbtn):is(:hover, :focus-visible) {
		animation: dw-shimmer 2.6s var(--ease) infinite alternate;
	}
	:is(.dw-btn, .dw-workbtn):is(:hover, :focus-visible)::before {
		animation: dw-comet 1.6s linear infinite;
	}
	/* Constant PATH speed, not constant angular speed: on a wide pill, equal
	   angle steps race across the long edges near the left/right ends. Stops
	   computed numerically for a ~180x44 pill (equal arc length per 5% of
	   time); --dw-angle interpolates linearly between them. */
	@keyframes dw-comet {
		0% { --dw-angle: 0deg; }
		5% { --dw-angle: 43deg; }
		10% { --dw-angle: 61.8deg; }
		15% { --dw-angle: 70.3deg; }
		20% { --dw-angle: 77.7deg; }
		25% { --dw-angle: 90deg; }
		30% { --dw-angle: 102.3deg; }
		35% { --dw-angle: 109.7deg; }
		40% { --dw-angle: 118.2deg; }
		45% { --dw-angle: 137deg; }
		50% { --dw-angle: 180deg; }
		55% { --dw-angle: 223.1deg; }
		60% { --dw-angle: 241.8deg; }
		65% { --dw-angle: 250.4deg; }
		70% { --dw-angle: 257.7deg; }
		75% { --dw-angle: 270deg; }
		80% { --dw-angle: 282.3deg; }
		85% { --dw-angle: 289.7deg; }
		90% { --dw-angle: 298.2deg; }
		95% { --dw-angle: 317deg; }
		100% { --dw-angle: 360deg; }
	}
	@keyframes dw-shimmer { to { background-position: 0 0, 100% 50%; } }
	/* The /work/ banners re-run the same correction for their own shape:
	   at ~1110x108 the pill's stops give a 20x speed swing on the long
	   edges. Stops recomputed numerically (equal arc length per 1% of
	   time - 5% granularity still wobbled 6x at this aspect ratio) for
	   the banner's ::before box; mobile widths deviate mildly, as the
	   pill's do. */
	.dw-workbtn:is(:hover, :focus-visible)::before {
		animation-name: dw-comet-banner;
	}
	@keyframes dw-comet-banner {
		0% { --dw-angle: 0deg; }
		1% { --dw-angle: 24deg; }
		2% { --dw-angle: 41.6deg; }
		3% { --dw-angle: 53.1deg; }
		4% { --dw-angle: 60.6deg; }
		5% { --dw-angle: 65.8deg; }
		6% { --dw-angle: 69.5deg; }
		7% { --dw-angle: 72.2deg; }
		8% { --dw-angle: 74.3deg; }
		9% { --dw-angle: 76deg; }
		10% { --dw-angle: 77.3deg; }
		11% { --dw-angle: 78.4deg; }
		12% { --dw-angle: 79.4deg; }
		13% { --dw-angle: 80.2deg; }
		14% { --dw-angle: 80.9deg; }
		15% { --dw-angle: 81.5deg; }
		16% { --dw-angle: 82deg; }
		17% { --dw-angle: 82.5deg; }
		18% { --dw-angle: 82.9deg; }
		19% { --dw-angle: 83.2deg; }
		20% { --dw-angle: 83.6deg; }
		21% { --dw-angle: 83.9deg; }
		22% { --dw-angle: 84.2deg; }
		23% { --dw-angle: 85.1deg; }
		24% { --dw-angle: 87.5deg; }
		25% { --dw-angle: 90deg; }
		26% { --dw-angle: 92.5deg; }
		27% { --dw-angle: 94.9deg; }
		28% { --dw-angle: 95.8deg; }
		29% { --dw-angle: 96.1deg; }
		30% { --dw-angle: 96.4deg; }
		31% { --dw-angle: 96.8deg; }
		32% { --dw-angle: 97.1deg; }
		33% { --dw-angle: 97.5deg; }
		34% { --dw-angle: 98deg; }
		35% { --dw-angle: 98.5deg; }
		36% { --dw-angle: 99.1deg; }
		37% { --dw-angle: 99.8deg; }
		38% { --dw-angle: 100.6deg; }
		39% { --dw-angle: 101.6deg; }
		40% { --dw-angle: 102.7deg; }
		41% { --dw-angle: 104deg; }
		42% { --dw-angle: 105.7deg; }
		43% { --dw-angle: 107.8deg; }
		44% { --dw-angle: 110.6deg; }
		45% { --dw-angle: 114.2deg; }
		46% { --dw-angle: 119.4deg; }
		47% { --dw-angle: 126.9deg; }
		48% { --dw-angle: 138.4deg; }
		49% { --dw-angle: 156deg; }
		50% { --dw-angle: 180deg; }
		51% { --dw-angle: 204deg; }
		52% { --dw-angle: 221.6deg; }
		53% { --dw-angle: 233.1deg; }
		54% { --dw-angle: 240.7deg; }
		55% { --dw-angle: 245.8deg; }
		56% { --dw-angle: 249.4deg; }
		57% { --dw-angle: 252.2deg; }
		58% { --dw-angle: 254.3deg; }
		59% { --dw-angle: 256deg; }
		60% { --dw-angle: 257.3deg; }
		61% { --dw-angle: 258.4deg; }
		62% { --dw-angle: 259.4deg; }
		63% { --dw-angle: 260.2deg; }
		64% { --dw-angle: 260.9deg; }
		65% { --dw-angle: 261.5deg; }
		66% { --dw-angle: 262deg; }
		67% { --dw-angle: 262.5deg; }
		68% { --dw-angle: 262.9deg; }
		69% { --dw-angle: 263.2deg; }
		70% { --dw-angle: 263.6deg; }
		71% { --dw-angle: 263.9deg; }
		72% { --dw-angle: 264.2deg; }
		73% { --dw-angle: 265.1deg; }
		74% { --dw-angle: 267.5deg; }
		75% { --dw-angle: 270deg; }
		76% { --dw-angle: 272.5deg; }
		77% { --dw-angle: 274.9deg; }
		78% { --dw-angle: 275.8deg; }
		79% { --dw-angle: 276.1deg; }
		80% { --dw-angle: 276.4deg; }
		81% { --dw-angle: 276.8deg; }
		82% { --dw-angle: 277.1deg; }
		83% { --dw-angle: 277.5deg; }
		84% { --dw-angle: 278deg; }
		85% { --dw-angle: 278.5deg; }
		86% { --dw-angle: 279.1deg; }
		87% { --dw-angle: 279.8deg; }
		88% { --dw-angle: 280.6deg; }
		89% { --dw-angle: 281.6deg; }
		90% { --dw-angle: 282.7deg; }
		91% { --dw-angle: 284deg; }
		92% { --dw-angle: 285.7deg; }
		93% { --dw-angle: 287.8deg; }
		94% { --dw-angle: 290.6deg; }
		95% { --dw-angle: 294.2deg; }
		96% { --dw-angle: 299.4deg; }
		97% { --dw-angle: 306.9deg; }
		98% { --dw-angle: 318.4deg; }
		99% { --dw-angle: 336deg; }
		100% { --dw-angle: 360deg; }
	}
}

/* ---------- header ---------- */
.dw-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease);
}
.dw-header.is-stuck { border-bottom-color: var(--hairline); }
.dw-header__bar {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 72px; gap: 24px;
}
.dw-logo {
	font-weight: var(--w-bold); font-size: 1.15rem; letter-spacing: -0.02em;
	text-decoration: none;
}
.dw-logo span { color: var(--ink-faint); font-weight: var(--w-light); }
.dw-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.dw-nav li { position: relative; }
.dw-nav a {
	display: inline-block; padding: 0.55em 0.95em; border-radius: var(--radius-pill);
	text-decoration: none; font-weight: var(--w-medium); font-size: 0.98rem;
	transition: background-color 0.15s var(--ease);
}
.dw-nav a:hover { background: rgba(16, 16, 20, 0.06); }
.dw-nav .sub-menu {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px;
	display: none; flex-direction: column; gap: 2px;
	/* The .dw-nav ul rule above centres flex items; stretch so links fill
	   the panel and their text sits left. */
	align-items: stretch;
	background: var(--surface); border: 1px solid var(--hairline);
	border-radius: var(--radius); padding: 8px;
	box-shadow: 0 18px 44px -18px rgba(16, 16, 20, 0.25);
}
.dw-nav li:hover > .sub-menu,
.dw-nav li:focus-within > .sub-menu { display: flex; }
/* Invisible bridge across the 8px gap below the parent link, so the pointer
   can travel into the submenu without the li losing :hover on the way. */
.dw-nav .sub-menu::before {
	content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.dw-nav .sub-menu a { display: block; border-radius: 12px; }
.dw-nav__toggle {
	display: none; background: none; border: 0; cursor: pointer; padding: 10px;
}
.dw-nav__toggle span {
	display: block; width: 22px; height: 2px; background: var(--ink);
	margin: 5px 0; border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s;
}

/* ---------- hero ---------- */
.dw-hero {
	position: relative; overflow: clip;
	padding: clamp(90px, 16vh, 180px) 0 clamp(70px, 12vh, 140px);
}
.dw-hero .dw-blob { width: 560px; height: 560px; top: -160px; right: -80px; }
.dw-hero__eyebrow {
	font-weight: var(--w-medium); font-size: 1rem; letter-spacing: 0.02em;
	color: var(--ink-soft); margin-bottom: 18px;
}
.dw-hero__title {
	font-size: clamp(3.4rem, 11vw, 8.75rem);
	font-weight: var(--w-bold); letter-spacing: -0.04em; line-height: 0.96;
	margin: 0 0 0.18em; position: relative; z-index: 1;
}
.dw-hero__sub {
	max-width: 34em; font-size: clamp(1.1rem, 2vw, 1.35rem);
	font-weight: var(--w-light); color: var(--ink-soft);
	position: relative; z-index: 1;
}
.dw-hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ---------- sections ---------- */
.dw-section { padding: clamp(56px, 10vh, 120px) 0; position: relative; }
.dw-section--hairline { border-top: 1px solid var(--hairline); }
.dw-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 24px; margin-bottom: clamp(28px, 5vh, 56px); flex-wrap: wrap;
}
.dw-section__title { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0; }
.dw-section__link { font-weight: var(--w-medium); white-space: nowrap; }

/* about strip */
.dw-about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); }
.dw-about__lede { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: var(--w-light); }
.dw-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dw-facts li {
	display: flex; justify-content: space-between; gap: 18px;
	padding: 14px 2px; border-bottom: 1px solid var(--hairline);
	font-size: 1rem;
}
.dw-facts li:first-child { border-top: 1px solid var(--hairline); }
.dw-facts b { font-weight: var(--w-medium); }
.dw-facts span { color: var(--ink-faint); text-align: right; }

/* work grid */
.dw-work-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: clamp(20px, 3vw, 36px);
}
/* Homepage only: below the grid's two-column width the six Selected work
   cards stack into a long scroll, so keep the first three. */
@media (max-width: 700px) {
	body.home .dw-work-grid .dw-card:nth-child(n+4) { display: none; }
}
.dw-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--hairline);
	border-radius: var(--radius); overflow: clip;
	transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.dw-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -20px rgba(16, 16, 20, 0.28), 0 12px 40px -10px #c9a2ff44;
}
/* The img must be absolutely positioned: in-flow content taller than the
   4/3 ratio grows the box, so portrait thumbnails would stretch the row. */
.dw-card__media { aspect-ratio: 4 / 3; background: var(--iri-linear); position: relative; overflow: hidden; }
/* Direct child only: wp-emoji swaps the lock emoji in .dw-card__lock for a
   nested <img class="emoji">, which must not be stretched to fill the box. */
.dw-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dw-card__lock {
	position: absolute; top: 12px; right: 12px;
	font-size: 0.78rem; font-weight: var(--w-medium);
	background: rgba(16, 16, 20, 0.78); color: #fff;
	padding: 5px 11px; border-radius: var(--radius-pill);
	backdrop-filter: blur(6px);
}
.dw-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dw-card__title { font-size: 1.35rem; margin: 0; }
.dw-card__title a { text-decoration: none; }
.dw-card__title a::after { content: ""; position: absolute; inset: 0; }
.dw-card__excerpt { color: var(--ink-soft); font-size: 0.98rem; margin: 0; flex: 1; }
.dw-card__cta {
	margin-top: 14px; font-weight: var(--w-medium); font-size: 0.98rem;
	display: inline-flex; align-items: center; gap: 0.4em;
}
.dw-card__cta::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.dw-card:hover .dw-card__cta::after { transform: translateX(4px); }

/* skills strip */
.dw-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dw-chips li {
	border: 1px solid var(--hairline); border-radius: var(--radius-pill);
	padding: 0.55em 1.1em; font-size: 0.98rem; font-weight: var(--w-medium);
	background: var(--surface);
	transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.18s var(--ease);
}
.dw-chips li:hover {
	border-color: transparent; transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px transparent, 0 6px 22px -8px #7cd4ff99, 0 2px 10px -2px #ffb7e066;
	background: linear-gradient(var(--surface), var(--surface)) padding-box,
		var(--iri-linear) border-box;
	border: 1px solid transparent;
}

/* ---------- dark band ---------- */
.dw-band {
	background: #0d0d11; color: #f4f4f2;
	border-radius: calc(var(--radius) * 1.6);
	padding: clamp(40px, 7vw, 84px);
	position: relative; overflow: clip;
}
.dw-band .dw-blob { opacity: 0.35; }
.dw-band__title { font-size: clamp(1.8rem, 4.4vw, 3rem); max-width: 16em; }
.dw-band a { color: inherit; }

/* ---------- password gate ---------- */
.dw-gate {
	max-width: 560px; margin: clamp(40px, 8vh, 90px) auto;
	padding: clamp(28px, 5vw, 48px);
	background: var(--surface); border: 1px solid var(--hairline);
	border-radius: calc(var(--radius) * 1.4); text-align: center;
	box-shadow: 0 30px 60px -30px rgba(16, 16, 20, 0.25);
	position: relative;
}
.dw-gate::before {
	content: ""; position: absolute; inset: -1px; z-index: -1;
	border-radius: inherit; background: var(--iri-linear);
	filter: blur(24px); opacity: 0.35;
}
.dw-gate__eyebrow {
	font-size: 0.85rem; font-weight: var(--w-medium); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.dw-gate__title { font-size: 1.8rem; }
.dw-gate__note { color: var(--ink-soft); font-size: 0.98rem; }
.dw-gate__form { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.dw-gate__form input {
	font: inherit; font-size: 1rem; padding: 0.8em 1.2em;
	border: 1px solid var(--hairline); border-radius: var(--radius-pill);
	min-width: 220px; background: var(--bg);
}
.dw-gate__form input:focus-visible { outline: 2px solid #7cd4ff; outline-offset: 2px; }

/* ---------- contact form (native, [dw_contact] in mu-plugins) ----------
   The post comment form shares every field rule so the two always match. */
.dw-cf__group,
.dw-comments .comment-form > p { margin-bottom: 24px; }
.dw-cf__group > label,
.dw-comments .comment-form > p > label {
	font-weight: var(--w-medium); font-size: 1.02rem;
}
.dw-cf__group > label,
.dw-comments .comment-form > p > label { display: block; margin-bottom: 8px; }
.dw-cf :is(input[type="text"], input[type="email"], textarea),
.dw-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%; max-width: 100%;
	font-family: var(--font); font-size: 1.1rem; font-weight: var(--w-regular);
	line-height: 1.4; color: var(--ink);
	padding: 1em 1.15em;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 16px;
	box-shadow: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.dw-cf textarea,
.dw-comments .comment-form textarea { min-height: 200px; }
/* Focus glow: the same white halo + iridescent bloom the buttons get on hover. */
.dw-cf :is(input[type="text"], input[type="email"], textarea):focus,
.dw-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
	outline: none; border-color: #c9a2ff;
	box-shadow: 0 0 0 4px #ffffff,
		0 10px 34px -4px #c9a2ff66,
		0 6px 24px -6px #7cd4ff55;
}
/* Breathing room between Send message and the social-links copy below;
   on the form only, so the sent state keeps its approved 20px. */
.dw-cf form { margin-bottom: 44px; }
/* Honeypot: parked off-canvas like the skip links, NOT display:none - a
   form-filler that checks visibility styles would skip a hidden field. */
.dw-cf__hp { position: absolute; left: -16000px; top: 0; }
.dw-cf__error {
	display: block; color: #c0303c; font-size: 0.9rem;
	margin: -4px 0 8px;
}
/* Cookie-consent tick stays an inline one-liner, not a chunky block label. */
.dw-comments .comment-form p.comment-form-cookies-consent label {
	display: inline; margin: 0;
	font-weight: var(--w-regular); font-size: 0.92rem; color: var(--ink-soft);
}
/* Post-submit "Thank you for your message." - same grey box as the clients
   logo wall. */
.dw-cf__success {
	background: rgba(16, 16, 20, 0.05);
	border-radius: var(--radius);
	padding: 40px 28px;
	margin-bottom: 20px;
	font-size: 1.1rem; color: var(--ink);
}
/* Once sent, the "E-mail me:" lead-in above the box reads like a stray label -
   hide the paragraph that sits directly before the sent-state wrapper. */
.dw-prose p:has(+ .dw-cf--sent) { display: none; }
.dw-comments .comment-notes { color: var(--ink-soft); font-size: 0.92rem; }
.dw-comments .akismet_comment_form_privacy_notice {
	font-size: 0.78rem; color: var(--ink-faint);
}

/* ---------- clients logo wall ---------- */
/* The /clients/ page keeps a standard Gutenberg gallery so it still renders
   under Koji pre-launch; these rules reshape it into the boxed wall here.
   Core's gallery rules hide an id inside :not(#individual-image), so several
   selectors below carry .wp-block-gallery.has-nested-images plus a :not(#dw)
   of their own purely to outrank them. */
.dw-logo-wall.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
}
.dw-logo-wall.wp-block-gallery.has-nested-images figure.wp-block-image:not(#dw) {
	width: auto; margin: 0;
	background: rgba(16, 16, 20, 0.05);
	border-radius: var(--radius);
	aspect-ratio: 5 / 3;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.dw-logo-wall.wp-block-gallery.has-nested-images figure.wp-block-image:not(#dw) img {
	width: 62%; height: auto; max-height: 62%;
	object-fit: contain;
	filter: grayscale(1); opacity: 0.7;
	transition: filter 0.35s var(--ease), opacity 0.35s var(--ease),
		transform 0.35s var(--ease);
}
.dw-logo-wall.wp-block-gallery.has-nested-images figure.wp-block-image:not(#dw):hover img {
	filter: grayscale(0); opacity: 1; transform: scale(1.04);
}
/* No hover on touch: show the colour logos outright. */
@media (hover: none) {
	.dw-logo-wall.wp-block-gallery.has-nested-images figure.wp-block-image:not(#dw) img {
		filter: none; opacity: 1;
	}
}

/* ---------- blog / prose ---------- */
.dw-list { display: flex; flex-direction: column; }
.dw-list__item {
	position: relative; /* containing block for the row-wide title overlay */
	display: flex; align-items: center; gap: 22px;
	padding: 26px 2px; border-bottom: 1px solid var(--hairline); text-decoration: none;
}
.dw-list__item:first-child { border-top: 1px solid var(--hairline); }
.dw-list__text { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.dw-list__item h3 { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.9rem); transition: color 0.15s; }
.dw-list__item:hover h3 { color: var(--ink-soft); }
.dw-list__link { color: inherit; text-decoration: none; }
/* The title link covers the whole row, keeping the old click-anywhere feel. */
.dw-list__link::after { content: ""; position: absolute; inset: 0; }
.dw-list__meta { color: var(--ink-faint); font-size: 0.92rem; white-space: nowrap; }
/* Action row (blog list only): everything in it must sit ABOVE the title
   overlay or the overlay eats the clicks. */
.dw-list__actions {
	position: relative; z-index: 1;
	display: flex; align-items: center; gap: 10px;
}
.dw-list__act {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border: 1.5px solid var(--ink); border-radius: 50%;
	background: transparent; color: var(--ink); cursor: pointer;
	transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
.dw-list__act svg { width: 17px; height: 17px; }
.dw-list__act:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -8px #7cd4ff99; }
.dw-list__act.is-done { border-color: #2fa36b; color: #2fa36b; }
.dw-list__sep { width: 1px; height: 26px; background: var(--hairline); }
.dw-list__comments {
	display: flex; align-items: center; gap: 9px;
	color: var(--ink); font-size: 0.95rem; font-weight: var(--w-medium);
	text-decoration: none;
}
.dw-list__comments:hover { color: var(--ink-soft); }
.dw-list__bubble {
	position: relative; display: flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 6px;
	border: 1.5px solid currentColor; border-radius: 9px;
	font-size: 0.9rem; font-weight: var(--w-medium);
}
/* Speech-bubble tail: outlined diamond, surface-filled so it hides the
   bubble's own bottom border where they overlap. */
.dw-list__bubble::after {
	content: ""; position: absolute; left: 50%; bottom: -4.5px;
	width: 7px; height: 7px; background: var(--surface);
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateX(-50%) rotate(45deg);
}
/* Polaroid thumbnail: white frame, thick bottom lip, alternating tilt.
   Direct-child img only, for the same wp-emoji reason as .dw-card__media. */
.dw-polaroid {
	flex: 0 0 auto; width: 76px; padding: 5px 5px 15px;
	background: #fff; border: 1px solid var(--hairline);
	box-shadow: 0 10px 22px -12px rgba(16, 16, 20, 0.35);
	transform: rotate(-5deg);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dw-list__item:nth-child(even) .dw-polaroid { transform: rotate(4deg); }
.dw-polaroid > img, .dw-polaroid__blank {
	display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
}
.dw-polaroid__blank { background: var(--iri-linear); }
.dw-list__item:hover .dw-polaroid {
	transform: rotate(-1deg) translateY(-3px);
	box-shadow: 0 14px 26px -12px rgba(16, 16, 20, 0.4);
}
.dw-list__item:nth-child(even):hover .dw-polaroid { transform: rotate(1deg) translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
	.dw-polaroid { transition: none; }
}
.dw-prose { max-width: 720px; margin-inline: auto; }
.dw-prose img { border-radius: var(--radius); }
.dw-prose h2 { font-size: 1.9rem; margin-top: 1.6em; }
.dw-prose h3 { font-size: 1.4rem; margin-top: 1.4em; }
.dw-prose blockquote {
	margin: 1.6em 0; padding: 0.2em 0 0.2em 1.4em;
	border-left: 3px solid transparent;
	border-image: var(--iri-linear) 1;
	font-weight: var(--w-light); font-size: 1.15em; color: var(--ink-soft);
}
.dw-page-title { font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 0 0 0.4em; }
.dw-page-meta { color: var(--ink-faint); margin-bottom: 2.4em; }

/* single post byline + action row (copy link / share / comment count) */
.dw-post-meta { margin-bottom: 2em; }
.dw-post-meta__byline { margin: 0 0 14px; color: var(--ink-faint); }
.dw-post-meta__byline b { color: var(--ink); font-weight: var(--w-medium); }
.dw-post-meta__date { display: block; font-size: 0.92rem; margin-top: 2px; }
.dw-post-meta__actions { display: flex; align-items: center; gap: 12px; }
.dw-icon-btn {
	position: relative; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--ink); background: transparent; color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
	transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
.dw-icon-btn svg { width: 19px; height: 19px; transition: opacity 0.15s; }
.dw-icon-btn__done { position: absolute; opacity: 0; }
.dw-icon-btn.is-done .dw-icon-btn__main { opacity: 0; }
.dw-icon-btn.is-done .dw-icon-btn__done { opacity: 1; }
.dw-icon-btn:hover, .dw-icon-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0 0 4px #ffffff,
		0 10px 34px -4px #c9a2ff66,
		0 6px 24px -6px #7cd4ff55;
}
.dw-icon-btn:focus-visible { outline: 2px solid #7cd4ff; outline-offset: 3px; }
.dw-icon-btn__hint { color: var(--ink-faint); font-size: 0.85rem; }
.dw-post-meta__sep { width: 1px; height: 26px; background: var(--hairline); }
.dw-comment-count {
	display: inline-flex; align-items: center; gap: 10px;
	text-decoration: none; color: var(--ink); font-weight: var(--w-medium);
}
/* Count pill with a little speech-bubble tail. */
.dw-comment-count b {
	position: relative; font-weight: var(--w-medium);
	border: 1px solid var(--ink); border-radius: 8px;
	padding: 7px 11px; line-height: 1; background: var(--bg);
}
/* Tail: two stacked clip-path triangles - ink behind, background in front,
   inset ~1px - so the tail's edges read as a continuation of the 1px border
   and its fill opens the pill's bottom border. (Rotated-square and skew+clip
   versions both drew detached fragments at this size.) */
.dw-comment-count b::before, .dw-comment-count b::after {
	content: ""; position: absolute;
	clip-path: polygon(0 0, 100% 0, 35% 100%);
	background: var(--ink);
	left: 9px; bottom: -6px; width: 11px; height: 7px;
}
.dw-comment-count b::after {
	background: var(--bg);
	left: 10.2px; bottom: -4.2px; width: 8.6px; height: 5.6px;
}
.dw-comment-count:hover { color: var(--ink-soft); }

/* featured image under the title */
.dw-post-hero { margin: 0 0 2.2em; }
.dw-post-hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* comments (minimal for now) */
.dw-comments { max-width: 720px; margin: 64px auto 0; }
/* Core's fallback template prints ol.commentlist (no hyphen) + ul.children,
   not the .comment-list a custom comments.php would give. Cover all three. */
.dw-comments :is(.comment-list, .commentlist, .children) { list-style: none; padding: 0; }
.dw-comments .children { padding-left: 28px; }
.dw-comments .comment-body {
	border: 1px solid var(--hairline); border-radius: var(--radius);
	padding: 18px 20px; margin-bottom: 14px; background: var(--surface);
}

/* ---------- "currently" strip ---------- */
/* Admin preview in mu-plugins/danwhelan-currently.php hand-copies this look -
   keep the two in step. Dark ocean gradient (blues into greens) by request;
   light ink on top, so this block does not use --ink. */
.dw-section--now { padding-top: 0; }
.dw-now {
	position: relative; display: flex; align-items: center; gap: 22px;
	padding: 20px 26px; border-radius: var(--radius);
	text-decoration: none; color: #f2f7f9;
	overflow: hidden; isolation: isolate;
	background: linear-gradient(115deg, #123a5c, #1d6fa3 26%, #12897f 50%, #0f5f46 74%, #123a5c);
	background-size: 220% 220%;
	box-shadow: 0 18px 44px -18px #1d6fa388;
	transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
/* Film grain: inline SVG turbulence, blended over the gradient. */
.dw-now::after {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
	mix-blend-mode: overlay; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dw-now:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 54px -18px #1d6fa3cc;
}
.dw-now__thumb {
	height: 76px; width: auto; max-width: 136px; flex: 0 0 auto;
	border-radius: 10px; background: #fff;
	box-shadow: 0 8px 20px -8px rgba(16, 16, 20, 0.5);
}
.dw-now__eyebrow {
	display: block; font-size: 0.78rem; font-weight: var(--w-medium);
	letter-spacing: 0.08em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72); margin-bottom: 4px;
}
.dw-now__title { display: block; font-size: 1.2rem; font-weight: var(--w-bold); }
.dw-now__arrow { margin-left: auto; font-size: 1.4rem; transition: transform 0.18s var(--ease); }
.dw-now:hover .dw-now__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
	.dw-now { animation: dw-now-drift 16s var(--ease) infinite alternate; }
	@keyframes dw-now-drift {
		from { background-position: 0% 40%; }
		to   { background-position: 100% 60%; }
	}
}

/* ---------- experience page ---------- */
/* /work/experience/ (page-experience.php). Rising-staircase timeline: each
   column's --push is the gap between its index number and its gradient rule,
   so later jobs sit higher. Meta line is pinned to the column floor. */
.dw-xp { position: relative; isolation: isolate; }
.dw-xp::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(58% 46% at 16% 0%, #8fffd066, transparent 72%),
		radial-gradient(48% 42% at 62% 2%, #7cd4ff54, transparent 72%),
		radial-gradient(40% 36% at 90% 12%, #ffb7e03d, transparent 72%);
}
.dw-xp__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
}
.dw-xp__title {
	margin: 0; font-size: clamp(3rem, 10.5vw, 7.2rem);
	font-weight: var(--w-bold); letter-spacing: -0.03em; line-height: 0.95;
}
.dw-xp__years { margin: 0; text-align: right; }
.dw-xp__years-n {
	display: block; font-size: clamp(2.8rem, 7.5vw, 5.6rem);
	font-weight: var(--w-light); line-height: 0.9; letter-spacing: -0.02em;
}
.dw-xp__years-l {
	display: block; text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--ink-faint); font-size: 0.95rem; font-weight: var(--w-medium);
}
.dw-xp__grid {
	list-style: none; margin: clamp(48px, 9vh, 96px) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr);
}
.dw-xp__col {
	display: flex; flex-direction: column; min-height: 540px;
	border-left: 1px solid var(--hairline); padding: 4px 22px 10px;
}
.dw-xp__col:nth-child(1) { --push: 310px; }
.dw-xp__col:nth-child(2) { --push: 230px; }
.dw-xp__col:nth-child(3) { --push: 150px; }
.dw-xp__col:nth-child(4) { --push: 70px; }
.dw-xp__num { font-size: 0.95rem; font-weight: var(--w-medium); }
.dw-xp__body { margin-top: var(--push); }
.dw-xp__rule {
	display: block; height: 3px; border-radius: 2px;
	background: var(--iri-linear); margin-bottom: 18px;
}
.dw-xp__company {
	margin: 0 0 6px; font-size: 1.35rem;
	font-weight: var(--w-bold); letter-spacing: -0.01em;
}
/* Brushed-aluminium pill with a faint iridescent sheen over it. */
.dw-xp__badge {
	display: inline-block; position: relative; overflow: hidden;
	vertical-align: 0.18em; margin-left: 10px;
	padding: 0.32em 0.75em; border-radius: var(--radius-pill);
	font-size: 0.6rem; font-weight: var(--w-medium);
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
	background: linear-gradient(160deg, #fdfdfe, #d7dade 55%, #eef0f3);
	border: 1px solid #c7cad2;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.dw-xp__badge::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: var(--iri-linear); opacity: 0.3; mix-blend-mode: overlay;
}
.dw-xp__roles { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
.dw-xp__meta {
	margin: 28px 0 0; margin-top: auto; padding-top: 28px;
	color: var(--ink-faint); font-size: 0.78rem;
	letter-spacing: 0.06em; text-transform: uppercase;
}
@media (max-width: 860px) {
	.dw-xp__grid { grid-template-columns: 1fr; gap: 8px; }
	.dw-xp__col { min-height: 0; --push: 18px !important; padding: 10px 18px 14px; }
	.dw-xp__meta { padding-top: 16px; }
}

/* ---------- about page ---------- */
/* /about/ (page-about.php). Editorial hero: ink panel with oversize
   cropped numerals behind the framed portrait, intro copy beside it. */
.dw-ab__hero {
	display: grid; grid-template-columns: 1.05fr 1fr;
	gap: clamp(32px, 5vw, 64px); align-items: center;
	margin-bottom: clamp(48px, 8vh, 88px);
}
.dw-ab__panel {
	position: relative; overflow: hidden;
	background: #0d0d11; border-radius: var(--radius);
	min-height: 540px;
	display: flex; align-items: center; justify-content: center;
}
/* The numerals are meant to crop at the panel edges, like the giant "22"
   in the reference spread. */
.dw-ab__big {
	position: absolute; left: -6%; top: -10%;
	font-size: clamp(300px, 34vw, 460px); font-weight: var(--w-bold);
	line-height: 0.75; letter-spacing: -0.06em; color: #ffffff;
	user-select: none;
}
.dw-ab__frame {
	position: relative; display: block;
	width: min(62%, 320px); padding: 3px; border-radius: 24px;
	background: var(--iri-linear);
	box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.65);
}
.dw-ab__frame img { border-radius: 21px; width: 100%; }
.dw-ab__intro p { font-size: 1.15rem; }
/* Centered column, matching how every other page's content sits centred
   in the container. */
.dw-ab__body { max-width: 760px; margin-inline: auto; }
.dw-ab__body h2 { margin-top: 1.8em; }
.dw-ab__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; margin-top: 1.8em;
}
.dw-ab__head h2 { margin: 0; }
.dw-ab__body .dw-chips { margin: 18px 0 6px; }
@media (max-width: 860px) {
	.dw-ab__hero { grid-template-columns: 1fr; }
	.dw-ab__panel { min-height: 420px; }
}

/* ---------- page washes ---------- */
/* Soft radial washes behind the first section of each keyed page, colours
   drawn from the --iri stops with placement, size and pairing deliberately
   varied page to page. The Experience page's wash lives in its own .dw-xp
   block above. Front page deliberately unkeyed. */
body.page-id-19 .dw-section:first-of-type,
body.page-id-14 .dw-section:first-of-type,
body.page-id-30 .dw-section:first-of-type,
body.page-id-557 .dw-section:first-of-type,
body.blog .dw-section:first-of-type,
body.post-type-archive-case_study .dw-section:first-of-type,
body.single-post .dw-section:first-of-type,
body.single-case_study .dw-section:first-of-type {
	position: relative; isolation: isolate;
}
body.page-id-19 .dw-section:first-of-type::before,
body.page-id-14 .dw-section:first-of-type::before,
body.page-id-30 .dw-section:first-of-type::before,
body.page-id-557 .dw-section:first-of-type::before,
body.blog .dw-section:first-of-type::before,
body.post-type-archive-case_study .dw-section:first-of-type::before,
body.single-post .dw-section:first-of-type::before,
body.single-case_study .dw-section:first-of-type::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
/* Contact (19): peach + pink, warm, high right. */
body.page-id-19 .dw-section:first-of-type::before {
	background:
		radial-gradient(52% 42% at 84% 0%, #ffd9a066, transparent 72%),
		radial-gradient(44% 38% at 55% 6%, #ffb7e054, transparent 72%);
}
/* About (14): violet + sky, top left. */
body.page-id-14 .dw-section:first-of-type::before {
	background:
		radial-gradient(56% 44% at 12% 0%, #c9a2ff5e, transparent 72%),
		radial-gradient(46% 40% at 48% 4%, #7cd4ff4d, transparent 72%);
}
/* Past clients (30): mint + lemon, wide and low-key. */
body.page-id-30 .dw-section:first-of-type::before {
	background:
		radial-gradient(50% 40% at 30% 0%, #8fffd061, transparent 72%),
		radial-gradient(42% 36% at 78% 6%, #fff6a35c, transparent 72%);
}
/* My work (557): pink + mint, split wide - the one pairing not used yet. */
body.page-id-557 .dw-section:first-of-type::before {
	background:
		radial-gradient(50% 40% at 22% 0%, #ffb7e052, transparent 72%),
		radial-gradient(44% 36% at 74% 5%, #8fffd04d, transparent 72%);
}
/* Blog list: sky + a pink echo on the far left. */
body.blog .dw-section:first-of-type::before {
	background:
		radial-gradient(54% 42% at 70% 0%, #7cd4ff59, transparent 72%),
		radial-gradient(40% 34% at 20% 8%, #ffb7e047, transparent 72%);
}
/* Case studies archive: quiet sky + mint pushed to the top corners - the
   earlier violet sat under the intro text and hurt readability. */
body.post-type-archive-case_study .dw-section:first-of-type::before {
	background:
		radial-gradient(44% 30% at 90% 0%, #7cd4ff40, transparent 68%),
		radial-gradient(38% 26% at 6% 0%, #8fffd03b, transparent 68%);
}
/* Single blog post: lemon + sky, kept quieter under reading copy. */
body.single-post .dw-section:first-of-type::before {
	background:
		radial-gradient(48% 36% at 80% 0%, #fff6a34d, transparent 72%),
		radial-gradient(40% 32% at 12% 4%, #7cd4ff40, transparent 72%);
}
/* Single case study: peach + violet. */
body.single-case_study .dw-section:first-of-type::before {
	background:
		radial-gradient(50% 40% at 16% 0%, #ffd9a05c, transparent 72%),
		radial-gradient(44% 36% at 66% 5%, #c9a2ff4f, transparent 72%);
}
/* HubSpot case studies (class from functions.php): brand orange + white,
   deliberately flat - no rainbow. */
body.single-case_study.dw-wash-hubspot .dw-section:first-of-type::before {
	background:
		radial-gradient(50% 40% at 16% 0%, #ff7a5942, transparent 72%),
		radial-gradient(44% 36% at 66% 5%, #ffffffd9, transparent 72%);
}

/* ---------- work landing page ---------- */
/* /work/ (page-work.php). Three full-width section banners sharing the
   .dw-btn comet machinery (the :is() lists above include .dw-workbtn);
   these overrides turn the pill into a banner-scale rounded rectangle. */
.dw-work-nav { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; }
/* Same specificity as the base button rules; these sit later in the file,
   so the cascade order carries the override. */
.dw-workbtn {
	display: flex; width: 100%;
	border-radius: var(--radius); padding: 24px 28px;
	line-height: 1.35; gap: 18px;
}
.dw-workbtn::before {
	border-radius: calc(var(--radius) + 3px);
}
.dw-workbtn__title { display: block; font-size: 1.25rem; font-weight: var(--w-bold); }
.dw-workbtn__sub { display: block; color: var(--ink-faint); font-size: 0.95rem; margin-top: 4px; }
.dw-workbtn__arrow {
	margin-left: auto; align-self: center; font-size: 1.5rem;
	transition: transform 0.18s var(--ease);
}
.dw-workbtn:hover .dw-workbtn__arrow { transform: translateX(4px); }
@media (max-width: 520px) {
	.dw-workbtn { padding: 20px 20px; }
}

/* ---------- case-study area filter pills ---------- */
/* /work/case-studies/ (archive-case_study.php). Multi-select: any number can
   be active at once; active pills wear the iridescent border. */
.dw-cs__filters {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 0 0 34px;
}
.dw-cs__filter {
	font: inherit; font-size: 0.92rem; font-weight: var(--w-medium);
	color: var(--ink); cursor: pointer;
	border: 1px solid var(--hairline); border-radius: var(--radius-pill);
	padding: 0.5em 1.1em; background: var(--surface);
	transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease),
		transform 0.18s var(--ease);
}
.dw-cs__filter:hover { transform: translateY(-2px); }
.dw-cs__filter:focus-visible { outline: 2px solid #7cd4ff; outline-offset: 2px; }
.dw-cs__filter.is-active {
	border: 1px solid transparent;
	background: linear-gradient(var(--surface), var(--surface)) padding-box,
		var(--iri-linear) border-box;
	box-shadow: 0 6px 22px -8px #7cd4ff99, 0 2px 10px -2px #ffb7e066;
	font-weight: var(--w-bold);
}
.dw-work-grid .dw-card[hidden] { display: none; }
/* Shown only while at least one pill is active (JS drives [hidden]). */
.dw-cs__clear {
	border: 0; background: none; cursor: pointer;
	font: inherit; font-size: 0.92rem; color: var(--ink-faint);
	padding: 0.5em 0.4em; align-self: center;
}
.dw-cs__clear:hover { color: var(--ink); text-decoration: underline; }
.dw-cs__clear[hidden] { display: none; }

/* ---------- skills page ---------- */
/* /skills/ (page-skills.php). Filter buttons are card-shaped boxes (matched to
   the Omra Support Center topic squares: 14px radius, hairline border, equal
   widths, lift + soft shadow on hover); the active one wears the iridescent
   border the chips use on hover, held permanently. */
.dw-sk__filters {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 26px 0 44px;
}
.dw-sk__filter {
	font: inherit; font-size: 0.95rem; font-weight: var(--w-medium);
	color: var(--ink); cursor: pointer; text-align: center;
	flex: 0 1 160px; min-width: 118px;
	border: 1px solid var(--hairline); border-radius: 14px;
	padding: 16px 12px; background: var(--surface);
	transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease),
		transform 0.18s var(--ease);
}
.dw-sk__filter:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
}
@media (max-width: 520px) {
	.dw-sk__filter { flex: 1 1 calc(50% - 5px); min-width: 0; }
}
.dw-sk__filter:focus-visible { outline: 2px solid #7cd4ff; outline-offset: 2px; }
.dw-sk__filter.is-active {
	border: 1px solid transparent;
	background: linear-gradient(var(--surface), var(--surface)) padding-box,
		var(--iri-linear) border-box;
	box-shadow: 0 6px 22px -8px #7cd4ff99, 0 2px 10px -2px #ffb7e066;
	font-weight: var(--w-bold);
}
.dw-sk__group { margin-bottom: 44px; }
.dw-sk__group[hidden] { display: none; }
.dw-sk__group-title {
	font-size: 0.85rem; font-weight: var(--w-medium);
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-faint); margin: 0 0 16px;
}
.dw-sk__count { font-weight: var(--w-regular); margin-left: 6px; }

/* ---------- footer ---------- */
.dw-footer { padding: clamp(60px, 10vh, 120px) 0 40px; }
.dw-footer__cta {
	font-size: clamp(2.2rem, 7vw, 4.8rem); font-weight: var(--w-bold);
	letter-spacing: -0.035em; text-decoration: none; display: inline-block;
	line-height: 1.05;
}
.dw-footer__cta em { font-style: normal; }
/* One-shot shimmer when the CTA scrolls into view (main.js adds .is-shine).
   Must sit ABOVE the hover rule: equal specificity, and hover has to win.
   The gradient is ink at both ends, so the fill-mode:both end state reads
   as plain text while the band sweeps left-to-right mid-animation. */
@media (prefers-reduced-motion: no-preference) {
	.dw-footer__cta.is-shine em {
		background: linear-gradient(115deg,
			var(--ink) 0% 38%, #7cd4ff 44%, #c9a2ff 50%,
			#ffb7e0 55%, #fff6a3 58%, var(--ink) 64% 100%);
		background-size: 320% 100%;
		-webkit-background-clip: text; background-clip: text; color: transparent;
		/* Delayed so it starts after the eye lands, and slow enough to enjoy. */
		animation: dw-cta-shine 2.4s var(--ease) 0.45s 1 both;
	}
	@keyframes dw-cta-shine {
		from { background-position: 100% 0; }
		to   { background-position: 0% 0; }
	}
}
.dw-footer__cta:hover em {
	background: var(--iri-linear); -webkit-background-clip: text;
	background-clip: text; color: transparent;
}
.dw-footer__row {
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline);
	color: var(--ink-faint); font-size: 0.92rem;
}
.dw-footer__row a { color: inherit; text-decoration: none; }
.dw-footer__row a:hover { color: var(--ink); }

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion: no-preference) {
	.dw-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
	.dw-reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
	.dw-about { grid-template-columns: 1fr; }
	.dw-nav__toggle { display: block; }
	.dw-nav {
		position: fixed; inset: 72px 0 auto 0; z-index: 49;
		background: var(--bg); border-bottom: 1px solid var(--hairline);
		padding: 10px var(--gutter) 26px; display: none;
	}
	.dw-nav.is-open { display: block; }
	.dw-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.dw-nav a { padding: 0.9em 0.4em; font-size: 1.1rem; border-radius: 10px; }
	.dw-nav .sub-menu {
		position: static; display: flex; box-shadow: none; border: 0;
		padding: 0 0 0 18px; background: transparent;
	}
	/* The hover bridge is desktop-only; in the stacked mobile menu its
	   absolute box would sit over the parent link and eat taps. */
	.dw-nav .sub-menu::before { content: none; }
}