/* ==========================================================================
   Irrie — Index
   A revamp layer on top of Munio. Munio keeps the structure, page transitions,
   cursor and filters; this file replaces the type, color and layouts.

   01 Tokens          07 Hero (pages + projects)   13 Next page / project
   02 Base type       08 Page content blocks       14 Sign-off + ticker
   03 Preloader       09 Buttons                   15 Footer bar
   04 Cursor          10 Portfolio grid            16 Carried-over custom CSS
   05 Header + status 11 Filters                   17 Responsive
   06 Menu overlay    12 Home index                18 Reduced motion
   ========================================================================== */

/* 01 Tokens ---------------------------------------------------------------- */
:root {
	--irr-paper:   #F1EDE2;
	--irr-paper-2: #E8E3D5;
	--irr-ink:     #111110;
	--irr-ink-2:   rgba(17, 17, 16, .64);
	--irr-ink-3:   rgba(17, 17, 16, .62);
	--irr-line:    rgba(17, 17, 16, .16);
	--irr-cobalt:  #2433D6;
	--irr-sun:     #FFD54C;

	--irr-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--irr-sans:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--irr-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--irr-gutter:  clamp(20px, 4vw, 64px);
	--irr-max:     1440px;
	--irr-ease:    cubic-bezier(.2, .7, .1, 1);
}
/* Derived tones follow any custom colors (Customizer or per-page) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root, body {
		--irr-ink-2:   color-mix(in srgb, var(--irr-ink) 64%, transparent);
		--irr-ink-3:   color-mix(in srgb, var(--irr-ink) 62%, transparent);
		--irr-line:    color-mix(in srgb, var(--irr-ink) 16%, transparent);
		--irr-paper-2: color-mix(in srgb, var(--irr-ink) 5%, var(--irr-paper));
	}
}

/* Archivo at full width is the display voice */
.irr-display,
.hero-title, .page-title, .main-title, .next-title,
.item-title, .irr-row-title, .irr-signoff-title,
.fullscreen-menu .flexnav li a,
#main-page-content h1, #main-page-content h2 {
	font-family: var(--irr-display) !important;
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
}

/* 02 Base -------------------------------------------------------------------- */
html, body, main, .cd-main-content, #page-content,
#page-content.light-content, #page-content.dark-content {
	background-color: var(--irr-paper) !important;
}
/* #main-content scrolls up over the fixed project cover, so it needs a solid fill */
#main-content { background-color: var(--irr-paper) !important; }
#main-page-content { background-color: transparent !important; }

body {
	font-family: var(--irr-sans) !important;
	color: var(--irr-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--irr-sun); color: var(--irr-ink); }

/* Everywhere Munio names Poppins/Oswald directly; everything else inherits from body */
html, input, textarea, select, button,
input[type="text"], input[type="email"], input[type="search"], input[type="submit"],
.filters-info, .accordion dt, [data-tooltip]::before, .comment-head, .error-title,
.owl-next span, .owl-prev span, .secondary-font, .post-password-form input[type="submit"],
.flexnav li ul li a, .fullscreen-menu .flexnav li ul li a {
	font-family: var(--irr-sans) !important;
}

/* Munio squashes titles to 70% height; the new display face has its own width */
.scale-title .scale-wrapper,
.scale-title .fullscreen-menu .menu-timeline a span,
.main-title {
	transform: none !important;
	-webkit-transform: none !important;
}

#page-content p,
.light-content p, .dark-content p {
	font-family: var(--irr-sans);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--irr-ink-2);
}

#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
	color: var(--irr-ink);
}

#page-content a { color: var(--irr-ink); }

#page-content p a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.irr-label, .irr-mono {
	font-family: var(--irr-mono) !important;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--irr-ink);
}
.irr-muted { color: var(--irr-ink-3) !important; }

/* 03 Preloader --------------------------------------------------------------- */
.preloader-wrap,
.preloader-wrap.light-content,
.preloader-wrap.dark-content {
	background-color: var(--irr-paper) !important;
}
.percentage {
	font-family: var(--irr-mono) !important;
	font-weight: 500 !important;
	letter-spacing: .02em;
	color: var(--irr-ink) !important;
}
.trackbar { background: var(--irr-line) !important; }
.loadbar  { background: var(--irr-ink) !important; }

.cd-cover-layer { background-color: var(--irr-paper) !important; }

/* 04 Cursor ------------------------------------------------------------------ */
#ball,
.dark-content #ball, .light-content #ball {
	border-color: var(--irr-ink) !important;
}
#ball i { color: var(--irr-ink) !important; }
#ball.with-icon { background-color: var(--irr-sun) !important; border-color: var(--irr-sun) !important; }
#ball-loader { border-color: var(--irr-ink) !important; border-bottom-color: transparent !important; }

/* 05 Top banner + header bar ------------------------------------------------ */
:root { --irr-topbar-h: 30px; }

/* Moving banner pinned to the very top (home page only) */
.irr-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--irr-topbar-h);
	z-index: 1002;
	display: flex; align-items: center;
	overflow: hidden;
	white-space: nowrap;
	background: var(--irr-banner-bg, var(--irr-sun));
	color: var(--irr-banner-fg, #111110);
	border-bottom: 1px solid var(--irr-banner-fg, #111110);
	border-radius: 0 !important;
}
.irr-topbar span {
	font-family: var(--irr-display);
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
	font-weight: 800;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.irr-topbar b { font-family: var(--irr-mono); font-weight: 400; font-size: 12px; }
.irr-topbar .irr-ticker-track { animation-duration: 60s; gap: 18px; }
/* quote of the day: the quote in the display face, the author in mono */
.irr-tt-quote { gap: 28px !important; }
.irr-tt-quote span { text-transform: none; letter-spacing: 0; }
.irr-tt-quote q::before { content: open-quote !important; }
.irr-tt-quote q::after { content: close-quote !important; }
.irr-tt-quote q { quotes: "“" "”"; font-family: var(--irr-display); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; }
.irr-tt-quote em { font-family: var(--irr-mono); font-style: normal; font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; }
.admin-bar .irr-topbar { top: 32px; }

header,
header.fullscreen-menu {
	top: 0 !important;
	height: auto !important;
	min-height: 0;
	pointer-events: auto !important;
	background: color-mix(in srgb, var(--irr-paper) 84%, transparent) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	border-bottom: 1px solid var(--irr-line);
	transition: background-color .4s !important;
}
html:has(.irr-topbar:not(.irr-topbar-phone)) header { top: var(--irr-topbar-h) !important; }
.admin-bar header { top: 32px !important; }
.admin-bar:has(.irr-topbar:not(.irr-topbar-phone)) header { top: calc(var(--irr-topbar-h) + 32px) !important; }

#header-container {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px !important;
	padding: 0 var(--irr-gutter) !important;
	color: var(--irr-ink);
	opacity: 1 !important;
}

#logo { top: 0 !important; left: 0 !important; margin: 0 !important; float: none !important; }
#logo img { height: 30px !important; width: auto !important; }
#logo img.black-logo { opacity: 1 !important; }
#logo img.white-logo { opacity: 0 !important; position: absolute; top: 0; left: 0; }

/* The burger and its full-screen overlay give way to the inline pill menu */
.button-wrap.right.menu { display: none !important; }

.irr-status {
	display: flex;
	align-items: center;
	gap: 22px;
	order: 3;
	margin-left: auto;
	font-family: var(--irr-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--irr-ink);
	white-space: nowrap;
}
.irr-status > .irr-status-item:first-child { display: none; }
.irr-status-item { display: inline-flex; align-items: center; gap: 8px; }
.irr-clock { opacity: .6; }
.irr-status-live i {
	width: 7px; height: 7px; border-radius: 50%;
	background: #18A058;
	animation: irr-pulse 1.8s ease-in-out infinite;
}
@keyframes irr-pulse { 50% { opacity: .2; } }

/* 06 Menu: simple pills between ruler ticks (dejiajetomobi) ------------------ */
.fullscreen-menu nav,
.fullscreen-menu nav.open {
	position: absolute !important;
	top: 50% !important; left: 50% !important;
	transform: translate(-50%, -50%);
	width: auto !important; height: auto !important;
	padding: 9px 26px !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	background: none !important;
	transition: none !important;
	z-index: 5;
}
.fullscreen-menu nav::before,
.fullscreen-menu nav::after {
	content: "";
	position: absolute; left: 0; right: 0;
	height: 6px;
	background:
		linear-gradient(var(--irr-ink), var(--irr-ink)) center / 1px 100% no-repeat,
		repeating-linear-gradient(90deg, var(--irr-ink-3) 0 1px, transparent 1px 7px);
	opacity: .55;
	pointer-events: none;
}
.fullscreen-menu nav::before { top: 0; }
.fullscreen-menu nav::after { bottom: 0; }
.fullscreen-menu .nav-height { overflow: visible !important; height: auto !important; padding: 0 !important; width: auto !important; }
.fullscreen-menu nav .outer, .fullscreen-menu nav .inner { display: block !important; height: auto !important; }
.fullscreen-menu .flexnav,
.fullscreen-menu .flexnav.flexnav-show {
	display: flex !important;
	gap: 4px;
	width: auto !important;
	max-height: none !important;
	margin: 0 !important;
	border: 0 !important;
	transition: none !important;
}
.fullscreen-menu .flexnav li,
.fullscreen-menu .menu-timeline {
	padding: 0 !important;
	line-height: 1 !important;
	border: 0 !important;
	opacity: 1 !important;
	transform: none !important;
}
.fullscreen-menu .flexnav li a {
	display: block !important;
	padding: 8px 15px !important;
	border-radius: 999px;
	font-family: var(--irr-sans) !important;
	font-stretch: 100% !important;
	font-variation-settings: normal !important;
	font-size: 14.5px !important;
	line-height: 1 !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	text-transform: none;
	color: var(--irr-ink-2) !important;
	-webkit-text-stroke: 0 !important;
	transition: background .2s, color .2s;
}
.fullscreen-menu .flexnav li a::before { display: none !important; }
.fullscreen-menu .flexnav li a span { display: inline !important; transform: none !important; font: inherit !important; }
.fullscreen-menu .flexnav li a span::before { display: none !important; }
.fullscreen-menu .flexnav:hover li a { opacity: 1; }
.fullscreen-menu .flexnav li a:hover { color: var(--irr-ink) !important; background: color-mix(in srgb, var(--irr-ink) 6%, transparent); }
.fullscreen-menu .flexnav li.current-menu-item a,
.fullscreen-menu .flexnav li a.active {
	color: var(--irr-ink) !important;
	background: color-mix(in srgb, var(--irr-ink) 10%, transparent);
}
.fullscreen-menu .flexnav .touch-button { display: none !important; }

/* 07 Hero ---------------------------------------------------------------------- */
#hero-caption {
	max-width: var(--irr-max) !important;
	padding: clamp(140px, 22vh, 220px) var(--irr-gutter) clamp(48px, 7vh, 80px) !important;
	text-align: left !important;
}
#hero-caption .inner { display: block; }

.hero-title,
.dark-content .hero-title, .light-content .hero-title {
	display: block !important;
	margin: 0 !important;
	height: auto !important;
	font-size: clamp(48px, 9.6vw, 168px) !important;
	line-height: .88 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--irr-ink) !important;
	text-wrap: balance;
}
.hero-title span { line-height: .88 !important; height: auto !important; min-width: 0 !important; }
.hero-title div { margin: 0 .22em 0 0 !important; }

.hero-subtitle,
.dark-content .hero-subtitle, .light-content .hero-subtitle {
	margin-top: 28px !important;
	font-family: var(--irr-mono) !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--irr-ink) !important;
}
.hero-subtitle::before { display: none !important; }

/* Divider under page heroes */
#hero:not(.has-image) + #main-content #main-page-content::before {
	content: "";
	display: block;
	height: 1px;
	background: var(--irr-line);
	margin-bottom: clamp(48px, 8vh, 96px);
}

/* Project hero over the cover image */
#hero.has-image #hero-caption {
	display: flex !important;
	align-items: flex-end;
	padding-bottom: 150px !important;
}
#hero.has-image .hero-title,
#hero.has-image .hero-subtitle { color: #fff !important; }
#hero-bg-image::after {
	height: 100% !important;
	background: linear-gradient(180deg, rgba(17,17,16,.15) 0%, rgba(17,17,16,.05) 40%, rgba(17,17,16,.72) 100%) !important;
}

/* Role chips (built by irrie.js from the subtitle) */
.irr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.irr-chip {
	display: inline-flex; align-items: center;
	padding: 6px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--irr-mono);
	font-size: 11px; line-height: 1;
	font-weight: 500; letter-spacing: .08em;
	text-transform: uppercase;
}
.irr-chip-label { opacity: .7; margin-right: 4px; }

.hero-bottom {
	padding: 40px var(--irr-gutter) !important;
	font-family: var(--irr-mono) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff !important;
}

/* Project meta strip (built by irrie.js) */
.irr-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--irr-line);
	border-bottom: 1px solid var(--irr-line);
	margin: 0 0 clamp(48px, 8vh, 96px);
}
.irr-meta > div { padding: 18px 20px 20px 0; }
.irr-meta > div + div { padding-left: 20px; border-left: 1px solid var(--irr-line); }
.irr-meta dt { margin-bottom: 8px; }
.irr-meta dd {
	margin: 0;
	font-family: var(--irr-sans);
	font-size: 15px; line-height: 1.45;
	color: var(--irr-ink);
}

/* 08 Page content ------------------------------------------------------------ */
#main-page-content {
	max-width: var(--irr-max) !important;
	padding: 0 var(--irr-gutter) !important;
}

/* Two-column text rows: numbered label left, copy right */
#main-page-content { counter-reset: irr-section; }

#main-page-content .row_padding_top { padding-top: clamp(56px, 9vh, 112px) !important; }
#main-page-content .row_padding_bottom { padding-bottom: clamp(40px, 6vh, 72px) !important; }

#main-page-content .one_third:has(> h2) { counter-increment: irr-section; }

#main-page-content .one_third > h2,
#main-page-content .one_third > h3 {
	font-size: clamp(22px, 2.2vw, 32px) !important;
	line-height: 1.05 !important;
	font-weight: 800 !important;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--irr-ink) !important;
}
#main-page-content .one_third > h2::before {
	content: counter(irr-section, decimal-leading-zero) " —";
	display: block;
	margin-bottom: 14px;
	font-family: var(--irr-mono);
	font-stretch: 100%;
	font-variation-settings: normal;
	font-size: 11px; line-height: 1;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--irr-ink-3);
}
#main-page-content h2.has-mask span,
#main-page-content h2.has-mask span > span {
	height: auto !important;
	line-height: 1.05 !important;
	margin-right: .22em !important;
}

#main-page-content .two_third p {
	font-size: clamp(18px, 1.55vw, 22px) !important;
	line-height: 1.5 !important;
	color: var(--irr-ink) !important;
	max-width: 46ch;
}

/* Hairline between text rows */
#main-page-content > .wp-block-munio-gutenberg-container.row_padding_top {
	border-top: 1px solid var(--irr-line);
}
#main-page-content > .wp-block-munio-gutenberg-container.row_padding_top:first-child { border-top: 0; }

/* Centered home intro blocks */
#main-page-content h4.wp-block-heading {
	font-family: var(--irr-display) !important;
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
	font-size: clamp(26px, 3.2vw, 48px) !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	text-transform: uppercase !important;
}
#main-page-content p.has-text-align-center {
	font-size: clamp(18px, 1.6vw, 22px) !important;
	color: var(--irr-ink) !important;
}

/* Home: the intro reads as a left-aligned statement above the index */
#main-page-content:has(> .irr-index) .has-text-align-center,
#main-page-content:has(> .irr-index) > .wp-block-munio-gutenberg-container { text-align: left !important; }
#main-page-content:has(> .irr-index) h4.wp-block-heading {
	font-size: clamp(40px, 5.6vw, 96px) !important;
	line-height: .9 !important;
	letter-spacing: -.02em;
	max-width: 18ch;
}
#main-page-content:has(> .irr-index) p.has-text-align-center {
	max-width: 34ch;
	margin-top: 28px !important;
	font-size: clamp(20px, 2vw, 28px) !important;
	line-height: 1.35 !important;
}
#main-page-content:has(> .irr-index) .wp-block-columns { display: block !important; }
#main-page-content:has(> .irr-index) .button-box { text-align: left !important; margin-top: 36px; }
#main-page-content:has(> .irr-index) .clapat-button-wrap { margin-left: 0 !important; margin-right: auto !important; }

/* Split intro (About): picture left, statement right */
#main-page-content.irr-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(32px, 6vw, 120px);
	align-items: end;
	align-content: start;
}
#main-page-content.irr-split::before,
#main-page-content.irr-split::after { grid-column: 1 / -1; }
#main-page-content.irr-split > :first-child { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
#main-page-content.irr-split > :nth-child(n+2) { grid-column: 2; }
#main-page-content.irr-split .wp-block-image,
#main-page-content.irr-split .wp-block-image figure { margin: 0 !important; width: 100% !important; }
#main-page-content.irr-split .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	border-radius: 4px;
	display: block;
}
#main-page-content.irr-split p {
	text-align: left !important;
	font-family: var(--irr-sans) !important;
	font-size: clamp(28px, 3.4vw, 54px) !important;
	line-height: 1.06 !important;
	font-weight: 500 !important;
	letter-spacing: -.025em;
	color: var(--irr-ink) !important;
	max-width: 20ch;
	margin: 0 0 32px !important;
}
#main-page-content.irr-split > .wp-block-munio-gutenberg-container { text-align: left !important; }
#main-page-content.irr-split .clapat-button-wrap { margin-left: 0 !important; }

.irr-badge {
	position: absolute;
	right: -44px; top: -44px;
	width: clamp(110px, 11vw, 150px);
	height: auto;
	z-index: 3;
	animation: irr-spin 16s linear infinite;
	pointer-events: none;
}
.irr-badge text {
	font-family: var(--irr-mono);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .1em;
	fill: var(--irr-ink);
}
.irr-badge circle { fill: var(--irr-cobalt); }
.irr-badge { background: var(--irr-sun); border-radius: 50%; }
@keyframes irr-spin { to { transform: rotate(360deg); } }

/* Gallery layout, built in. WordPress only prints gallery CSS on a full page
   load, so galleries reached through Munio's AJAX transitions lost their grid. */
#main-page-content .wp-block-gallery.has-nested-images {
	display: flex !important;
	flex-wrap: wrap;
	align-items: normal;
	gap: 12px !important;
}
#main-page-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 1;
	margin: 0 !important;
	width: calc(50% - 6px);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
}
#main-page-content .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image { width: 100%; }
#main-page-content .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image { width: calc(33.333% - 8px); }
#main-page-content .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image { width: calc(25% - 9px); }
#main-page-content .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image { width: calc(20% - 9.6px); }
#main-page-content .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image { width: calc(16.666% - 10px); }
#main-page-content .wp-block-gallery.has-nested-images figure.wp-block-image > a,
#main-page-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
#main-page-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a,
#main-page-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	flex: 1 0 0%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 600px) {
	#main-page-content .wp-block-gallery.has-nested-images figure.wp-block-image { width: calc(50% - 6px) !important; }
}

/* Galleries: tighter, quieter */
#main-page-content .wp-block-gallery {
	gap: 12px !important;
	--wp--style--unstable-gallery-gap: 12px;
}
#main-page-content .wp-block-gallery figure,
#main-page-content .wp-block-image img,
#main-page-content figure.wp-block-image {
	border-radius: 4px;
	overflow: hidden;
}
#main-page-content .wp-block-columns { gap: 12px !important; margin-bottom: 12px !important; }

#main-page-content figcaption {
	font-family: var(--irr-mono) !important;
	font-size: 11px !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--irr-ink-2) !important;
	background: none !important;
	text-align: left !important;
	padding: 8px 0 0 !important;
	position: static !important;
}

/* 09 Buttons ----------------------------------------------------------------- */
.clapat-button, .clapat-button .button-border {
	font-family: var(--irr-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--irr-ink) !important;
}
.button-border,
.button-border.outline,
.button-border.rounded {
	border: 1px solid var(--irr-ink) !important;
	border-radius: 999px !important;
	padding: 0 28px !important;
	height: 48px !important;
	line-height: 46px !important;
	background: transparent;
	transition: background .25s var(--irr-ease), color .25s var(--irr-ease);
}
.clapat-button:hover .button-border,
.clapat-button-wrap:hover .button-border {
	background: var(--irr-ink) !important;
	color: var(--irr-paper) !important;
}
.clapat-button-wrap:hover .button-border span { color: var(--irr-paper) !important; }

/* 10 Portfolio grid ---------------------------------------------------------- */
/* sits inside #main-page-content, which already carries the gutter */
.portfolio-wrap.grid-portfolio {
	width: auto !important;
	max-width: none;
	margin: 28px -12px 120px !important;
	padding: 0 !important;
}

/* Cards: image on top, caption bar underneath (always visible) */
.grid-portfolio .item,
.grid-portfolio .item.wide {
	margin: 12px !important;
	width: calc(50% - 24px) !important;
	height: calc(30vw + 92px) !important;
	max-height: 720px;
}
.grid-portfolio .item.wide { width: calc(100% - 24px) !important; height: calc(46vw + 92px) !important; max-height: 980px; }

.grid-portfolio .item-content { position: absolute; inset: 0; }
.grid-portfolio .item-wrap { position: absolute; inset: 0; z-index: 5; }

.grid-portfolio .item-wrap-image {
	position: absolute !important;
	top: 0; left: 0; right: 0;
	bottom: 92px !important;
	height: auto !important;
	overflow: hidden;
	border-radius: 4px;
	background: var(--irr-paper-2);
}
.grid-portfolio .item-image {
	width: 100% !important;
	height: 100% !important;
	background-size: cover !important;
	background-position: center !important;
	transition: transform 1.1s var(--irr-ease) !important;
}
.grid-portfolio .item:hover .item-image { transform: scale(1.04); }

/* Caption bar */
.centered-caption .item-caption-wrap {
	display: block !important;
	top: auto !important;
	bottom: 0 !important;
	height: 92px !important;
	pointer-events: none;
}
.centered-caption .item-caption,
.grid-portfolio .item-caption {
	display: grid !important;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 6px;
	align-content: start;
	padding-top: 16px;
	border-top: 1px solid var(--irr-line);
	text-align: left !important;
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 92px;
	box-sizing: border-box;
}

.irr-card-num {
	grid-column: 1; grid-row: 1;
	font-family: var(--irr-mono);
	font-size: 11px; font-weight: 500;
	letter-spacing: .08em;
	color: var(--irr-ink-3);
	padding-top: 6px;
}

.centered-caption .item-caption .item-title,
.grid-portfolio .item-title {
	grid-column: 2; grid-row: 1;
	display: block !important;
	margin: 0 !important;
	height: auto !important;
	font-size: clamp(20px, 2vw, 30px) !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--irr-ink) !important;
	opacity: 1 !important;
	transform: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.centered-caption .item-caption .item-title span {
	display: inline !important;
	float: none !important;
	min-width: 0 !important;
	height: auto !important;
	line-height: inherit !important;
	opacity: 1 !important;
	transform: none !important;
	color: inherit !important;
}
.grid-portfolio .item:hover .item-title { color: var(--irr-cobalt) !important; }

.centered-caption .item-cat,
.grid-portfolio .item-cat {
	grid-column: 2; grid-row: 2;
	margin: 0 !important;
	font-family: var(--irr-mono) !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--irr-ink-2) !important;
	opacity: 1 !important;
	transform: none !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.irr-card-role { display: none; }

/* Show-filters button sits on the left under the hero */
#show-filters {
	text-align: left !important;
	margin: 0 0 8px !important;
}

/* 11 Filters ----------------------------------------------------------------- */
/* Inline filter pills (built by irrie.js from Munio's filter overlay) */
.irr-filters {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0;
	padding: 0;
}
.irr-filters button {
	appearance: none;
	cursor: pointer;
	padding: 9px 16px;
	border: 1px solid var(--irr-line);
	border-radius: 999px;
	background: transparent;
	font-family: var(--irr-mono);
	font-size: 11px; line-height: 1;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--irr-ink);
	transition: background .2s, border-color .2s, color .2s;
}
.irr-filters button:hover { border-color: var(--irr-ink); }
.irr-filters button[aria-pressed="true"] {
	background: var(--irr-ink); border-color: var(--irr-ink); color: var(--irr-paper);
}
.irr-filters button sup { font-size: 10px; margin-left: 8px; opacity: .55; vertical-align: baseline; top: 0; position: static; }
.irr-has-pills #show-filters { display: none !important; }

/* Munio's overlay, if opened */
#filters-overlay { background: var(--irr-cobalt) !important; }
#filters li a {
	font-family: var(--irr-display) !important;
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
	font-weight: 800 !important;
	text-transform: uppercase;
	color: var(--irr-paper) !important;
	-webkit-text-stroke: 0 !important;
}
#filters li a.active, #filters li a:hover { color: var(--irr-sun) !important; }

/* 12 Home index -------------------------------------------------------------- */
.irr-index {
	position: relative;
	margin: clamp(80px, 14vh, 160px) 0 0;
}
.irr-index-head {
	display: flex; gap: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--irr-ink);
}
.irr-index-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.irr-row { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--irr-line); }
.irr-row::before { display: none !important; }

.irr-row-link {
	display: grid !important;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, 32%) 32px;
	align-items: baseline;
	gap: 16px;
	padding: 22px 12px;
	margin: 0 -12px;
	text-decoration: none !important;
	color: var(--irr-ink) !important;
	transition: background .25s var(--irr-ease), color .25s var(--irr-ease), padding .35s var(--irr-ease);
}
.irr-row-num, .irr-row-meta {
	font-family: var(--irr-mono) !important;
	font-size: 11px !important;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--irr-ink-3) !important;
}
.irr-row-meta { color: var(--irr-ink-2) !important; }
.irr-row-title {
	font-size: clamp(26px, 3.6vw, 56px) !important;
	line-height: .95 !important;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.irr-row-arrow {
	font-family: var(--irr-mono) !important;
	font-size: 18px !important;
	text-align: right;
	transform: translateX(-8px);
	opacity: 0;
	transition: transform .35s var(--irr-ease), opacity .35s;
}
.irr-row-link:hover { background: var(--irr-cobalt); color: var(--irr-paper) !important; padding-left: 24px; }
.irr-row-link:hover .irr-row-num,
.irr-row-link:hover .irr-row-meta,
.irr-row-link:hover .irr-row-arrow,
.irr-row-link:hover .irr-row-title { color: var(--irr-paper) !important; }
.irr-row-link:hover .irr-row-arrow { opacity: 1; transform: none; }

/* Floating preview that follows the cursor */
.irr-index-thumb {
	position: fixed;
	z-index: 60;
	top: 0; left: 0;
	width: 300px; aspect-ratio: 4 / 3;
	background-size: cover; background-position: center;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.9);
	transition: opacity .25s, transform .35s var(--irr-ease);
	box-shadow: 0 20px 60px rgba(17, 17, 16, .25);
}
.irr-index-thumb.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 13 Next page / project ----------------------------------------------------- */
#page-nav {
	background: var(--irr-ink);
	color: var(--irr-paper) !important;
	margin-top: clamp(80px, 12vh, 140px);
}
.next-page-title {
	max-width: var(--irr-max) !important;
	padding: clamp(64px, 12vh, 140px) var(--irr-gutter) !important;
}
.next-page-title .inner { text-align: left !important; height: auto !important; }

.subtitle-info, .subtitle-name,
.dark-content .subtitle-info, .dark-content .subtitle-name {
	height: auto !important;
	font-family: var(--irr-mono) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(241, 237, 226, .6) !important;
}
.subtitle-info:empty::before { content: "Next page"; }
.subtitle-info { margin-bottom: 18px !important; }
.subtitle-name { margin-top: 18px !important; }

.page-title,
.dark-content .page-title, .light-content .page-title {
	display: inline-block;
	font-size: clamp(56px, 11vw, 190px) !important;
	line-height: .88 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--irr-paper) !important;
	-webkit-text-stroke: 0 !important;
}
.page-title::after {
	content: " \2192";
	font-family: var(--irr-mono);
	font-stretch: 100%;
	font-variation-settings: normal;
	font-weight: 400;
	font-size: .45em;
	vertical-align: .35em;
	transition: margin .35s var(--irr-ease);
}
.page-title:hover { color: var(--irr-sun) !important; }
.page-title:hover::after { margin-left: .2em; }

/* Project → next project (full screen, scroll-triggered by Munio) */
.next-project-image::after {
	height: 100% !important;
	background: linear-gradient(180deg, rgba(17,17,16,.25), rgba(17,17,16,.7)) !important;
}
.next-project-title { max-width: var(--irr-max) !important; padding: 0 var(--irr-gutter) !important; }
.next-project-title .inner { text-align: left !important; }

/* Project pages: dark behind the fixed cover + next-project image */
main:has(#project-nav), main:has(#project-nav) .cd-main-content,
main:has(#project-nav) #page-content { background-color: var(--irr-ink) !important; }
.next-project-image { background: var(--irr-ink); }

/* "Next project" is the click target Munio animates; it stays the big type */
.next-project-title { display: flex !important; align-items: center; }
.next-project-title .inner { display: block !important; position: relative; width: 100%; }
.next-title,
.dark-content .next-title, .light-content .next-title {
	position: relative !important;
	top: auto !important;
	left: 0 !important;
	z-index: 2;
	transform: none !important;
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	font-size: clamp(56px, 11vw, 190px) !important;
	line-height: .88 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: #fff !important;
	cursor: pointer;
}
.next-title span { line-height: .88 !important; height: auto !important; color: inherit !important; min-width: 0 !important; }
.next-title div { margin: 0 .2em 0 0 !important; }
.next-title::after {
	content: "\2192";
	display: inline-block;
	margin-left: .15em;
	font-family: var(--irr-mono);
	font-stretch: 100%;
	font-variation-settings: normal;
	font-weight: 400;
	font-size: .45em;
	vertical-align: .55em;
	transition: transform .35s var(--irr-ease);
}
.next-title:hover { color: var(--irr-sun) !important; }
.next-title:hover::after { transform: translateX(.25em); }
.next-project-title .inner::before {
	content: "Up next";
}
.next-project-title .inner[data-next]::before { content: "Up next \2014  " attr(data-next); }
.next-project-title .inner::before {
	display: block;
	margin-bottom: 20px;
	font-family: var(--irr-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/* After the click, Munio swaps in the project name (.main-title) */
.main-title,
.dark-content .main-title, .light-content .main-title {
	display: block !important;
	position: absolute !important;
	top: 31px; left: 0; right: 0;
	margin: 0 !important;
	font-size: clamp(56px, 11vw, 190px) !important;
	line-height: .88 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: #fff !important;
}
.main-title span { line-height: .88 !important; height: auto !important; color: inherit !important; min-width: 0 !important; }
.main-title div { margin: 0 .2em 0 0 !important; }

.next-subtitle-name,
.dark-content .next-subtitle-name, .light-content .next-subtitle-name {
	height: auto !important;
	margin-top: 22px !important;
	font-family: var(--irr-mono) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7) !important;
}

/* 14 Sign-off + ticker ------------------------------------------------------- */
.irr-signoff {
	position: relative;
	z-index: 5;
	background: var(--irr-cobalt);
	color: var(--irr-paper);
	overflow: hidden;
}
/* project pages: Munio places the next-project screen after the content, keep sign-off out of the way */
main:has(#project-nav) .irr-signoff { display: none; }

.irr-ticker {
	background: var(--irr-sun);
	color: var(--irr-ink);
	border-bottom: 1px solid var(--irr-ink);
	overflow: hidden;
	white-space: nowrap;
	padding: 14px 0;
}
.irr-ticker-track {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding-left: 22px;
	animation: irr-marquee 38s linear infinite;
	will-change: transform;
}
.irr-ticker span {
	font-family: var(--irr-display);
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	text-transform: uppercase;
}
.irr-ticker b { font-family: var(--irr-mono); font-weight: 400; font-size: 18px; }
@keyframes irr-marquee { to { transform: translateX(-50%); } }

.irr-signoff-inner {
	max-width: var(--irr-max);
	margin: 0 auto;
	padding: clamp(72px, 14vh, 160px) var(--irr-gutter) clamp(64px, 10vh, 120px);
}
.irr-signoff .irr-label { color: var(--irr-paper) !important; opacity: .7; }
.irr-signoff-title {
	margin: 18px 0 0 !important;
	font-size: clamp(64px, 14vw, 240px) !important;
	line-height: .85 !important;
	font-weight: 800 !important;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--irr-paper) !important;
}
.irr-signoff-text {
	margin: 28px 0 0 !important;
	max-width: 32ch;
	font-family: var(--irr-sans) !important;
	font-size: clamp(18px, 1.7vw, 24px) !important;
	line-height: 1.4 !important;
	color: var(--irr-paper) !important;
}
.irr-signoff-links {
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 40px 0 0 !important;
	padding: 0 !important;
}
.irr-signoff-links li { margin: 0 !important; padding: 0 !important; }
.irr-signoff-links li::before { display: none !important; }
.irr-signoff-links a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 22px;
	border: 1px solid rgba(241, 237, 226, .5);
	border-radius: 999px;
	font-family: var(--irr-mono) !important;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--irr-paper) !important;
	transition: background .2s, color .2s, border-color .2s;
}
.irr-signoff-links a:hover { background: var(--irr-paper); color: var(--irr-cobalt) !important; border-color: var(--irr-paper); }
.irr-copy.is-copied::after { content: "Copied!"; margin-left: 6px; color: var(--irr-sun); }

/* 14b Motion: scroll reveals (classes set by irrie.js; nothing is hidden without JS) */
[data-irr-reveal="rise"] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s var(--irr-ease), transform .9s var(--irr-ease);
}
[data-irr-reveal="wipe"] {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.1s var(--irr-ease);
}
[data-irr-reveal="wipe"] img { transform: scale(1.12); transition: transform 1.4s var(--irr-ease); }
[data-irr-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
[data-irr-reveal="wipe"].is-in img { transform: none; }

.irr-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.irr-w > span {
	display: inline-block;
	transform: translateY(105%);
	transition: transform .9s var(--irr-ease);
}
[data-irr-reveal="words"].is-in .irr-w > span { transform: none; }

/* Card hover: a "View project" tag slides up over the image */
.grid-portfolio .item-wrap-image::after {
	content: "View project \2192";
	position: absolute;
	left: 16px; bottom: 16px;
	z-index: 3;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--irr-sun);
	color: var(--irr-ink);
	font-family: var(--irr-mono);
	font-size: 11px; line-height: 1;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s, transform .45s var(--irr-ease);
	pointer-events: none;
}
.grid-portfolio .item:hover .item-wrap-image::after { opacity: 1; transform: none; }

/* 14c Film grain: animated static over the whole site (Customizer > Irrie — Index) */
body.irr-grain::after {
	content: "";
	position: fixed;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	z-index: 99999;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	opacity: var(--irr-grain, .09);
	animation: irr-grain .9s steps(7) infinite;
	will-change: transform;
}
body.irr-grain-subtle { --irr-grain: .1; }
body.irr-grain-medium { --irr-grain: .16; }
body.irr-grain-strong { --irr-grain: .26; }
@keyframes irr-grain {
	0%   { transform: translate(0, 0); }
	15%  { transform: translate(-4%, -6%); }
	30%  { transform: translate(5%, 3%); }
	45%  { transform: translate(-6%, 7%); }
	60%  { transform: translate(7%, -4%); }
	75%  { transform: translate(-3%, 5%); }
	90%  { transform: translate(4%, -7%); }
	100% { transform: translate(0, 0); }
}

/* ==========================================================================
   14d Signature pieces (one idea borrowed from each reference)
   ========================================================================== */

/* Header "Latest" link (warmnfuzzy) */
.irr-latest { pointer-events: auto; color: inherit !important; text-decoration: none !important; }
.irr-latest:hover { text-decoration: underline !important; text-underline-offset: .25em; }
.irr-muted-w { opacity: .6; }

/* 3D portrait on About: turns toward the cursor (stillmakingstuff) */
#main-page-content.irr-split > :first-child { max-width: clamp(220px, 24vw, 340px); justify-self: start; }
.irr-face { perspective: 900px; }
.irr-face-card {
	position: relative;
	margin: 0 !important;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .5s var(--irr-ease);
	border-radius: 14px;
	box-shadow: 0 30px 60px -20px rgba(17, 17, 16, .35);
	animation: irr-float 6s ease-in-out infinite;
}
.irr-face-card img { display: block; width: 100%; height: auto; border-radius: 14px !important; transform: translateZ(30px); }
.irr-face-glare {
	position: absolute; inset: 0;
	border-radius: 14px;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.45), rgba(255,255,255,0) 55%);
	mix-blend-mode: soft-light;
	transform: translateZ(31px);
	pointer-events: none;
}
.irr-face-tag {
	color: #111110 !important;
	position: absolute; left: -16px; bottom: 18px;
	transform: translateZ(70px) rotate(-6deg);
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--irr-sun);
	box-shadow: 0 8px 20px rgba(17,17,16,.18);
}
.irr-face-shadow {
	display: block;
	width: 70%; height: 16px;
	margin: 22px auto 0;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(17,17,16,.22), transparent);
	animation: irr-float-shadow 6s ease-in-out infinite;
}
.irr-face .irr-badge { transform-origin: center; }
@keyframes irr-float { 50% { translate: 0 -10px; } }
@keyframes irr-float-shadow { 50% { transform: scale(.85); opacity: .7; } }

/* Stats strip with crosshair corners (gertix) */
.irr-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: clamp(72px, 12vh, 140px) 0 0;
	border-top: 1px solid var(--irr-line);
	border-bottom: 1px solid var(--irr-line);
}
.irr-stat {
	position: relative;
	display: flex; flex-direction: column; gap: 10px;
	padding: 28px 24px;
}
.irr-stat + .irr-stat { border-left: 1px solid var(--irr-line); }
.irr-stat::before, .irr-stat::after {
	content: "+";
	position: absolute;
	font-family: var(--irr-mono);
	font-size: 14px; line-height: 1;
	color: var(--irr-ink-3);
}
.irr-stat::before { top: -8px; left: -5px; }
.irr-stat::after { bottom: -8px; left: -5px; }
.irr-stat-n {
	font-family: var(--irr-display);
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
	font-weight: 800;
	font-size: clamp(48px, 7vw, 112px);
	line-height: .85;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--irr-ink);
}

/* Spinning ring of covers (carterogunsola) */
.irr-ring-wrap { margin: clamp(72px, 12vh, 140px) 0 0; }
.irr-ring-head { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--irr-ink); }
.irr-ring-stage {
	position: relative;
	height: clamp(320px, 36vw, 520px);
	perspective: 1400px;
	perspective-origin: 50% 50%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.irr-ring-stage.is-dragging { cursor: grabbing; }
.irr-ring {
	--card: clamp(150px, 17vw, 250px);
	--radius: calc(var(--card) * var(--n) / 5.2);
	position: absolute;
	left: 50%; top: 50%;
	width: var(--card);
	height: calc(var(--card) * 1.25);
	margin: calc(var(--card) * -.625) 0 0 calc(var(--card) * -.5);
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--radius) * -1)) rotateX(-4deg) rotateY(var(--spin, 0deg));
}
.irr-ring-card {
	position: absolute; inset: 0;
	display: block;
	border-radius: 6px;
	overflow: hidden;
	background: var(--irr-paper-2);
	transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(var(--radius));
	backface-visibility: hidden;
	box-shadow: 0 20px 40px -18px rgba(17, 17, 16, .4);
	text-decoration: none !important;
}
.irr-ring-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform .6s var(--irr-ease); }
.irr-ring-card:hover img { transform: scale(1.06); }
.irr-ring-cap {
	position: absolute; left: 10px; right: 10px; bottom: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--irr-paper);
	color: var(--irr-ink) !important;
	font-family: var(--irr-mono) !important;
	font-size: 10.5px; line-height: 1.2;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: 0; transform: translateY(8px);
	transition: opacity .25s, transform .35s var(--irr-ease);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.irr-ring-cap b { color: var(--irr-ink-3); font-weight: 500; margin-right: 4px; }
.irr-ring-card:hover .irr-ring-cap { opacity: 1; transform: none; }

/* Surprise me (eddy-naboulet) */
.irr-surprise {
	margin-left: auto;
	appearance: none; border: 0; background: none; cursor: pointer;
	padding: 0;
	color: var(--irr-ink) !important;
}
.irr-surprise:hover { color: var(--irr-cobalt) !important; }

/* Grouped rows on the home index */
.irr-group-toggle {
	width: calc(100% + 24px);
	appearance: none; border: 0; background: none; cursor: pointer;
	text-align: left;
	font: inherit;
}
.irr-row-title sup {
	font-family: var(--irr-mono);
	font-stretch: 100%;
	font-variation-settings: normal;
	font-size: 12px; font-weight: 500;
	letter-spacing: .06em;
	vertical-align: super;
	margin-left: 4px;
	opacity: .55;
}
.irr-plus { position: relative; height: 18px; opacity: 1 !important; transform: none !important; }
.irr-plus::before, .irr-plus::after {
	content: ""; position: absolute; right: 2px; top: 50%;
	width: 16px; height: 1.5px; background: currentColor;
	transition: transform .35s var(--irr-ease);
}
.irr-plus::after { transform: rotate(90deg); }
.irr-row-group.is-open .irr-plus::after { transform: rotate(0deg); }
.irr-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--irr-ease); }
.irr-sub > ol { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; }
.irr-row-group.is-open .irr-sub { grid-template-rows: 1fr; }
.irr-row-sub { border-bottom: 0 !important; border-top: 1px solid var(--irr-line); }
.irr-row-sub .irr-row-link { padding-left: 56px; }
.irr-row-sub .irr-row-title { font-size: clamp(20px, 2.4vw, 36px) !important; }

/* Portfolio: client group card */
.irr-group-item .irr-item-image {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transition: transform 1.1s var(--irr-ease);
}
.irr-group-item:hover .irr-item-image { transform: scale(1.04); }
.irr-stack {
	position: absolute; right: 16px; top: 16px; z-index: 2;
	display: flex;
}
.irr-stack span {
	width: 56px; height: 56px;
	margin-left: -14px;
	border-radius: 6px;
	border: 2px solid var(--irr-paper);
	background-size: cover; background-position: center;
	box-shadow: 0 6px 16px rgba(17,17,16,.25);
	transition: transform .4s var(--irr-ease);
}
.irr-group-item:hover .irr-stack span:nth-child(1) { transform: translate(-10px, 4px) rotate(-6deg); }
.irr-group-item:hover .irr-stack span:nth-child(2) { transform: translateY(-4px); }
.irr-group-item:hover .irr-stack span:nth-child(3) { transform: translate(10px, 4px) rotate(6deg); }
.irr-group-count {
	position: absolute; left: 16px; top: 16px; z-index: 2;
	padding: 8px 12px; border-radius: 999px;
	background: var(--irr-ink); color: var(--irr-paper);
	font-family: var(--irr-mono); font-size: 11px; line-height: 1;
	font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.irr-group-item .item-wrap-image::after { content: "Open group \2192" !important; }

/* Client sheet */
.irr-sheet {
	position: fixed; inset: 0;
	z-index: 2000;
	background: var(--irr-cobalt);
	color: var(--irr-paper);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	clip-path: inset(100% 0 0 0);
	transition: clip-path .7s var(--irr-ease), opacity .3s;
}
.irr-sheet.is-open { opacity: 1; clip-path: inset(0 0 0 0); }
.irr-sheet[hidden] { display: block; visibility: hidden; }
.irr-sheet.is-open[hidden] { visibility: visible; }
.irr-sheet-inner { max-width: var(--irr-max); margin: 0 auto; padding: 28px var(--irr-gutter) 80px; }
.irr-sheet-head { display: flex; justify-content: space-between; align-items: center; }
.irr-sheet .irr-label { color: var(--irr-paper) !important; }
.irr-sheet-close { appearance: none; border: 1px solid rgba(241,237,226,.5); border-radius: 999px; background: none; padding: 10px 16px; cursor: pointer; }
.irr-sheet-close:hover { background: var(--irr-paper); color: var(--irr-cobalt) !important; }
.irr-sheet-title {
	margin: 28px 0 40px !important;
	font-family: var(--irr-display) !important;
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
	font-weight: 800 !important;
	font-size: clamp(64px, 13vw, 220px) !important;
	line-height: .85 !important;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--irr-paper) !important;
}
.irr-sheet-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.irr-sheet-grid li { margin: 0; padding: 0; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .8s var(--irr-ease); }
.irr-sheet.is-open .irr-sheet-grid li { opacity: 1; transform: none; }
.irr-sheet.is-open .irr-sheet-grid li:nth-child(2) { transition-delay: .06s; }
.irr-sheet.is-open .irr-sheet-grid li:nth-child(3) { transition-delay: .12s; }
.irr-sheet.is-open .irr-sheet-grid li:nth-child(4) { transition-delay: .18s; }
.irr-sheet.is-open .irr-sheet-grid li:nth-child(5) { transition-delay: .24s; }
.irr-sheet.is-open .irr-sheet-grid li:nth-child(6) { transition-delay: .30s; }
.irr-sheet-card { display: block; color: var(--irr-paper) !important; text-decoration: none !important; }
.irr-sheet-img {
	display: block; aspect-ratio: 4 / 3;
	border-radius: 6px;
	background-size: cover; background-position: center;
	transition: transform .6s var(--irr-ease), border-radius .6s;
}
.irr-sheet-card:hover .irr-sheet-img { transform: scale(.97); border-radius: 18px; }
.irr-sheet-cap { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px; padding-top: 14px; border-top: 1px solid rgba(241,237,226,.3); margin-top: 12px; }
.irr-sheet-cap .irr-label:last-child { grid-column: 2; }
.irr-sheet-name {
	font-family: var(--irr-display) !important;
	font-stretch: 125%; font-variation-settings: "wdth" 125;
	font-weight: 800; font-size: clamp(20px, 2vw, 28px); line-height: 1;
	text-transform: uppercase;
}
.irr-sheet-card:hover .irr-sheet-name { color: var(--irr-sun); }
body.irr-sheet-open { overflow: hidden; }

/* Category letter badges (dejiajetomobi) */
.irr-badges { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; gap: 4px; pointer-events: none; }
.irr-badges i {
	width: 24px; height: 24px; display: grid; place-items: center;
	border-radius: 6px;
	background: rgba(241,237,226,.92);
	color: var(--irr-ink);
	font-family: var(--irr-mono); font-style: normal;
	font-size: 11px; font-weight: 500;
	backdrop-filter: blur(6px);
	transition: transform .3s var(--irr-ease);
}
.grid-portfolio .item:hover .irr-badges { opacity: 0; transition: opacity .2s; }

/* Crosshair corners on card hover (gertix) */
.grid-portfolio .item-wrap-image::before {
	content: "";
	position: absolute; inset: 10px; z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s, inset .45s var(--irr-ease);
	background:
		linear-gradient(var(--irr-paper), var(--irr-paper)) top left / 14px 1.5px no-repeat,
		linear-gradient(var(--irr-paper), var(--irr-paper)) top left / 1.5px 14px no-repeat,
		linear-gradient(var(--irr-paper), var(--irr-paper)) top right / 14px 1.5px no-repeat,
		linear-gradient(var(--irr-paper), var(--irr-paper)) top right / 1.5px 14px no-repeat,
		linear-gradient(var(--irr-paper), var(--irr-paper)) bottom left / 14px 1.5px no-repeat,
		linear-gradient(var(--irr-paper), var(--irr-paper)) bottom left / 1.5px 14px no-repeat,
		linear-gradient(var(--irr-paper), var(--irr-paper)) bottom right / 14px 1.5px no-repeat,
		linear-gradient(var(--irr-paper), var(--irr-paper)) bottom right / 1.5px 14px no-repeat;
}
.grid-portfolio .item:hover .item-wrap-image::before { opacity: 1; inset: 18px; }

/* Ambient backdrop: hovering a project washes the page in its colors (giordanobetti) */
.irr-ambient {
	position: fixed;
	inset: -12%;
	z-index: -1;
	pointer-events: none;
	background-size: cover;
	background-position: center;
	filter: blur(70px) saturate(1.35);
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .7s var(--irr-ease), transform 1.4s var(--irr-ease);
}
.irr-ambient::after { content: ""; position: absolute; inset: 0; background: var(--irr-paper); opacity: .38; }
body.irr-ambient-on .irr-ambient { opacity: .9; transform: scale(1); }
body, main, .cd-main-content, #page-content, #main-content { transition: background-color .6s var(--irr-ease); }
body.irr-ambient-on,
body.irr-ambient-on main,
body.irr-ambient-on .cd-main-content,
body.irr-ambient-on #page-content,
body.irr-ambient-on #main-content { background-color: transparent !important; }

/* Eye that watches the cursor (shaukiah) */
.irr-eye {
	display: inline-grid; place-items: center;
	width: 22px; height: 14px;
	margin-left: 10px;
	vertical-align: -2px;
	border: 1.5px solid currentColor;
	border-radius: 50% / 60%;
	position: relative;
}
.irr-eye i {
	width: 7px; height: 7px; border-radius: 50%; background: currentColor;
	transform: translate(var(--ex, 0px), var(--ey, 0px));
	transition: transform .12s linear;
}

/* Scramble keeps width steady (stillmakingstuff) */
[data-irr-scramble] { font-variant-numeric: tabular-nums; }

/* ⌘K command palette (carterogunsola / eddy-naboulet) */
.irr-k {
	position: fixed; inset: 0; z-index: 3000;
	display: grid; place-items: start center;
	padding-top: 14vh;
	background: rgba(17,17,16,.45);
	backdrop-filter: blur(6px);
	opacity: 0; visibility: hidden;
	transition: opacity .2s, visibility 0s .2s;
}
.irr-k.is-open { opacity: 1; visibility: visible; transition: opacity .2s; }
.irr-k-box {
	width: min(620px, calc(100vw - 32px));
	border-radius: 14px;
	background: var(--irr-paper);
	color: var(--irr-ink);
	box-shadow: 0 30px 80px rgba(0,0,0,.35);
	overflow: hidden;
	transform: translateY(-10px) scale(.98);
	transition: transform .3s var(--irr-ease);
}
.irr-k.is-open .irr-k-box { transform: none; }
.irr-k input {
	width: 100%; box-sizing: border-box;
	border: 0; border-bottom: 1px solid var(--irr-line);
	padding: 20px 22px;
	background: transparent;
	font-family: var(--irr-sans) !important;
	font-size: 20px; color: var(--irr-ink);
	outline: none;
}
.irr-k ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.irr-k li { margin: 0; padding: 0; }
.irr-k li::before { display: none !important; }
.irr-k a {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 12px 14px; border-radius: 8px;
	text-decoration: none !important;
	color: var(--irr-ink) !important;
	font-family: var(--irr-sans);
	font-size: 16px;
}
.irr-k a small { font-family: var(--irr-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--irr-ink-3); align-self: center; }
.irr-k a.is-active { background: var(--irr-cobalt); color: var(--irr-paper) !important; }
.irr-k a.is-active small { color: rgba(241,237,226,.7); }
.irr-k-foot { display: flex; gap: 18px; padding: 10px 22px; border-top: 1px solid var(--irr-line); }
.irr-k-hint {
	position: fixed; right: var(--irr-gutter); bottom: 22px; z-index: 950;
	padding: 8px 12px; border-radius: 999px;
	background: var(--irr-ink); color: var(--irr-paper) !important;
	border: 0; cursor: pointer;
}
.irr-k-hint:hover { background: var(--irr-cobalt); }

@media (max-width: 1100px) {
	.irr-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.irr-stats { grid-template-columns: 1fr; }
	.irr-stat + .irr-stat { border-left: 0; border-top: 1px solid var(--irr-line); }
	.irr-sheet-grid { grid-template-columns: 1fr; }
	.irr-ring { --card: 140px; }
	.irr-row-sub .irr-row-link { padding-left: 24px; }
	.irr-k-hint { display: none; }
}

/* ==========================================================================
   14e Round three: home cover, design canvas, word reveal, About stage, irrie.fm
   ========================================================================== */

/* Home: full-screen cover first (shaukiah) ---------------------------------- */
#main:has(> .irr-cover) > #hero { display: none !important; }
.irr-cover {
	position: relative;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	color: #fff;
	background: #111110;
}
.irr-cover-img {
	position: absolute; inset: 0;
	background: var(--cover) center 30% / cover no-repeat;
	transform: scale(1.12);
	animation: irr-cover-in 2.2s var(--irr-ease) forwards;
}
.irr-cover::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(17,17,16,.05) 30%, rgba(17,17,16,.72) 100%);
}
@keyframes irr-cover-in { to { transform: scale(1); } }
.irr-cover-inner {
	position: absolute; z-index: 2;
	left: var(--irr-gutter); right: var(--irr-gutter);
	bottom: clamp(36px, 7vh, 80px);
}
.irr-cover-title {
	margin: 0 !important;
	font-family: var(--irr-display) !important;
	font-stretch: 125%;
	font-variation-settings: "wdth" 125;
	font-weight: 800 !important;
	font-size: clamp(56px, 12.5vw, 230px) !important;
	line-height: .82 !important;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
}
.irr-cover-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }
.irr-cover-roles {
	font-family: var(--irr-display);
	font-stretch: 125%; font-variation-settings: "wdth" 125;
	font-weight: 800; font-size: clamp(16px, 1.7vw, 24px);
	text-transform: uppercase; letter-spacing: .01em;
}
.irr-cover .irr-label { color: rgba(255,255,255,.8) !important; }
.irr-cover-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 22px; border-radius: 999px;
	background: #fff; color: #111110 !important;
	font-family: var(--irr-mono); font-size: 12px; font-weight: 500;
	letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important;
	transition: background .2s;
}
.irr-cover-btn:hover { background: var(--irr-sun); }
.irr-cover-scroll { position: absolute; z-index: 2; right: var(--irr-gutter); bottom: clamp(36px, 7vh, 80px); animation: irr-bob 2s ease-in-out infinite; }
@keyframes irr-bob { 50% { transform: translateY(6px); } }

/* Home: design canvas (onlines "internet.") ---------------------------------- */
.irr-canvas {
	position: relative;
	height: clamp(560px, 92vh, 880px);
	margin: 0 calc(var(--irr-gutter) * -1);
	display: grid; place-items: center;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .5H120M.5 0V120' fill='none' stroke='%23111110' stroke-opacity='.13' stroke-dasharray='5 5'/%3E%3C/svg%3E");
	background-position: center;
	border-bottom: 1px solid var(--irr-line);
}
#main-page-content > .irr-canvas:first-child { margin-top: calc(clamp(48px, 8vh, 96px) * -1); }
.irr-canvas-word-wrap { position: relative; z-index: 3; padding: 0 .12em; outline: 1.5px solid var(--irr-cobalt); }
.irr-canvas-word {
	margin: 0 !important;
	font-family: var(--irr-sans) !important;
	font-stretch: 100% !important; font-variation-settings: normal !important;
	font-weight: 700 !important;
	font-size: clamp(88px, 17vw, 300px) !important;
	line-height: 1 !important;
	letter-spacing: -.055em;
	text-transform: none !important;
	color: var(--irr-ink) !important;
}
.irr-h { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--irr-cobalt); }
.irr-h-tl { left: -6px; top: -6px; } .irr-h-tr { right: -6px; top: -6px; }
.irr-h-bl { left: -6px; bottom: -6px; } .irr-h-br { right: -6px; bottom: -6px; }
.irr-canvas-size {
	position: absolute; left: -1px; top: -28px;
	padding: 4px 8px; border-radius: 4px 4px 4px 0;
	background: var(--irr-cobalt); color: #fff !important;
	white-space: nowrap;
}
.irr-canvas-size i { font-style: normal; opacity: .75; }
.irr-float-item { position: absolute; z-index: 2; translate: var(--px, 0px) var(--py, 0px); transition: translate .6s var(--irr-ease); }
.irr-fi-cover {
	border-radius: 10px;
	background-size: cover; background-position: center;
	box-shadow: 0 24px 50px -20px rgba(17,17,16,.45);
	border: 4px solid #fff;
	animation: irr-drift 9s ease-in-out infinite;
}
.irr-fi-c0 { left: 7%;  top: 13%; width: clamp(150px, 17vw, 250px); aspect-ratio: 4/3; rotate: -5deg; }
.irr-fi-c1 { right: 6%; top: 9%;  width: clamp(160px, 19vw, 280px); aspect-ratio: 16/10; rotate: 4deg; animation-delay: -3s; }
.irr-fi-c2 { left: 5%;  bottom: 9%; width: clamp(110px, 10vw, 160px); aspect-ratio: 9/16; rotate: -3deg; border-radius: 22px; border-width: 6px; animation-delay: -5s; }
@keyframes irr-drift { 50% { transform: translateY(-12px); } }
.irr-fi-toast {
	display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 8px;
	width: clamp(220px, 22vw, 300px);
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff;
	color: #111110 !important;
	box-shadow: 0 18px 40px -18px rgba(17,17,16,.35);
	font-family: var(--irr-sans); font-size: 13px; line-height: 1.3;
	text-decoration: none !important;
	animation: irr-drift 11s ease-in-out infinite;
}
.irr-fi-toast b { font-weight: 600; }
.irr-fi-toast .irr-muted { color: rgba(17,17,16,.45) !important; font-size: 12px; }
.irr-fi-toast p { grid-column: 1 / -1; margin: 0 !important; font-size: 14px !important; color: #111110 !important; line-height: 1.35 !important; }
.irr-avatar { width: 22px; height: 22px; border-radius: 50%; background: #111110; position: relative; }
.irr-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #18A058; border: 2px solid #fff; }
.irr-fi-t0 { right: 8%; top: 38%; }
.irr-fi-t1 { left: 36%; bottom: 10%; animation-delay: -4s; }
.irr-fi-t1:hover { box-shadow: 0 0 0 2px var(--irr-cobalt), 0 18px 40px -18px rgba(17,17,16,.35); }
.irr-fi-toggle {
	left: 38%; top: 16%;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 10px 8px 16px;
	border: 0; border-radius: 999px; cursor: pointer;
	background: #fff;
	box-shadow: 0 14px 30px -16px rgba(17,17,16,.35);
	font-family: var(--irr-sans); font-size: 14px; font-weight: 500; color: #111110;
}
.irr-fi-toggle i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(17,17,16,.15); transition: background .25s; }
.irr-fi-toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--irr-ease); }
.irr-fi-toggle[aria-pressed="true"] i { background: var(--irr-cobalt); }
.irr-fi-toggle[aria-pressed="true"] i::after { transform: translateX(16px); }
.irr-cursor { position: absolute; z-index: 4; display: inline-flex; align-items: flex-start; pointer-events: none; animation: var(--path) 16s ease-in-out infinite; }
.irr-cursor svg { width: 16px; height: 16px; fill: var(--c); stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.irr-cursor em {
	margin: 12px 0 0 2px;
	padding: 4px 8px;
	border-radius: 4px 10px 10px 10px;
	background: var(--c);
	color: #fff;
	font-family: var(--irr-sans); font-style: normal;
	font-size: 12px; font-weight: 600; line-height: 1;
	white-space: nowrap;
}
.irr-cur-0 { left: 24%; top: 30%; --path: irr-p0; }
.irr-cur-1 { left: 62%; top: 24%; --path: irr-p1; animation-duration: 19s; }
.irr-cur-2 { left: 30%; top: 64%; --path: irr-p2; animation-duration: 14s; }
.irr-cur-3 { left: 70%; top: 60%; --path: irr-p3; animation-duration: 21s; }
.irr-cur-4 { left: 46%; top: 36%; --path: irr-p1; animation-duration: 23s; animation-direction: reverse; }
.irr-cur-5 { left: 54%; top: 70%; --path: irr-p0; animation-duration: 18s; animation-direction: reverse; }
@keyframes irr-p0 { 0%,100% { transform: translate(0,0); } 25% { transform: translate(60px,-30px); } 50% { transform: translate(110px,20px); } 75% { transform: translate(30px,40px); } }
@keyframes irr-p1 { 0%,100% { transform: translate(0,0); } 30% { transform: translate(-80px,40px); } 60% { transform: translate(-30px,90px); } 80% { transform: translate(40px,30px); } }
@keyframes irr-p2 { 0%,100% { transform: translate(0,0); } 20% { transform: translate(90px,-50px); } 55% { transform: translate(160px,-10px); } 80% { transform: translate(60px,30px); } }
@keyframes irr-p3 { 0%,100% { transform: translate(0,0); } 35% { transform: translate(-120px,-40px); } 65% { transform: translate(-60px,-90px); } }
.irr-cur-you { left: 0; top: 0; opacity: 0; animation: none; transition: opacity .2s; }
.irr-canvas.is-hover .irr-cur-you { opacity: 1; }
.irr-canvas.is-hover { cursor: none; }

/* Home statement: centered, words light up on scroll (onlines) */
#main-page-content:has(> .irr-index) .has-text-align-center,
#main-page-content:has(> .irr-index) > .wp-block-munio-gutenberg-container { text-align: center !important; }
#main-page-content:has(> .irr-index) h4.wp-block-heading { margin: clamp(80px, 14vh, 160px) auto 0 !important; max-width: 16ch; }
#main-page-content:has(> .irr-index) p.has-text-align-center {
	max-width: 24ch !important;
	margin: 22px auto 0 !important;
	font-size: clamp(28px, 3.6vw, 56px) !important;
	line-height: 1.08 !important;
	font-weight: 600 !important;
	letter-spacing: -.03em;
}
#main-page-content:has(> .irr-index) .button-box { text-align: center !important; }
#main-page-content:has(> .irr-index) .clapat-button-wrap { margin: 0 auto !important; }
.irr-rw { opacity: .14; transition: opacity .35s; }
.irr-rw.on { opacity: 1; }

/* Selected work: one header, ring on top, list below */
.irr-index .irr-index-head { align-items: center; }
.irr-drag-hint { margin-left: auto; }
.irr-surprise { margin-left: 22px !important; }
.irr-index .irr-ring-stage { margin: 8px 0 24px; border-bottom: 1px solid var(--irr-line); }

/* About stage: dark, portrait in the center (carterogunsola + stillmakingstuff) */
html:has(#main-page-content.irr-about) {
	--irr-paper: #1E1E1E;
	--irr-paper-2: #2A2A2A;
	--irr-ink: #F4F2EC;
}
html:has(#main-page-content.irr-about) #logo img.black-logo { opacity: 0 !important; }
html:has(#main-page-content.irr-about) #logo img.white-logo { opacity: 1 !important; }
html:has(#main-page-content.irr-about) #hero { display: none !important; }
#main-page-content.irr-about {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(320px, min(36vw, 600px)) minmax(0, 1fr);
	gap: 28px clamp(24px, 4vw, 64px);
	min-height: calc(100vh - 64px);
	grid-template-rows: auto auto auto;
	align-content: start;
	row-gap: 8px;
	align-items: center;
	padding-top: clamp(140px, 18vh, 190px) !important;
	padding-bottom: 40px !important;
	transform: none !important;
	opacity: 1 !important;
}
#main-page-content.irr-about::before { display: none !important; }
.irr-about > .irr-ab-src { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.irr-ab {
	font-family: var(--irr-display);
	font-stretch: 125%; font-variation-settings: "wdth" 125;
	font-weight: 800;
	text-transform: uppercase;
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--irr-ink);
}
.irr-ab-tl { grid-column: 1 / 3; grid-row: 1; align-self: start; font-size: clamp(28px, 3.4vw, 58px); max-width: 16ch; }
.irr-ab-kick {
	display: block;
	margin-bottom: 18px;
	font-family: var(--irr-mono) !important;
	font-stretch: 100%; font-variation-settings: normal;
	font-size: 11px; font-weight: 500; line-height: 1.4;
	letter-spacing: .08em;
	color: var(--irr-ink-2);
}
.irr-ab-tr { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; text-align: right; font-size: clamp(24px, 2.6vw, 46px); }
.irr-ab-tr a { color: inherit !important; text-decoration: none !important; }
.irr-ab-tr a:hover { color: var(--irr-sun) !important; }
.irr-ab-ml { grid-column: 1; grid-row: 2; align-self: start; margin-top: 12vh; font-size: clamp(20px, 2.1vw, 36px); max-width: 9ch; }
.irr-ab-mr { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; margin-top: 12vh; min-width: 0; max-width: 10ch; text-align: right; font-size: clamp(20px, 2.1vw, 36px); }
.irr-ab-mr [data-irr-cycle] { display: flex; justify-content: flex-end; font-size: .82em; white-space: nowrap; color: var(--irr-sun); }
.irr-ab-center { grid-column: 2; grid-row: 2; position: relative; perspective: 1100px; transform-style: preserve-3d; padding: 24px 0 8px; }
.irr-ab-center .wp-block-munio-gutenberg-container,
.irr-ab-center .wp-block-image,
.irr-ab-center figure { margin: 0 !important; width: 100% !important; max-width: none !important; }
.irr-ab-center img { width: 100% !important; height: auto !important; }
.irr-ab-center .irr-face-card { z-index: 2; }
.irr-orbit {
	position: absolute; left: 50%; top: 50%;
	width: 0; height: 0;
	transform-style: preserve-3d;
	transform: rotateX(-14deg) rotateY(var(--spin, 0deg));
	pointer-events: none;
	z-index: 1;
}
.irr-orbit a {
	position: absolute;
	left: -42px; top: -30px;
	width: 84px; height: 60px;
	border-radius: 6px;
	background-size: cover; background-position: center;
	box-shadow: 0 12px 24px -10px rgba(0,0,0,.6);
	transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(var(--r, 300px));
	pointer-events: auto;
}
.irr-ab-bl { grid-column: 2; grid-row: 3; justify-self: center; align-self: start; }
.irr-readouts { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: auto auto; gap: 10px 36px; }
.irr-readouts li { margin: 0 !important; padding: 0 !important; font-family: var(--irr-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--irr-ink-2); }
.irr-readouts li::before { display: none !important; }
.irr-readouts b { font-weight: 500; color: var(--irr-ink); }
.irr-ab-br { grid-column: 3; grid-row: 3; justify-self: end; align-self: center; }
.irr-ab-br .clapat-button-wrap { margin: 0 !important; }
/* the player sits bottom-left, so lift the readouts above it */
/* readouts sit under the portrait, clear of the bottom-left player */

/* About: irrie.fm mini player ------------------------------------------------
   One small pill: the official cover art spins (click it to play), the title
   and an Off-White style credit, a ruler volume slider, and a striped
   progress band along the bottom. Audio is Apple Music's 30-second preview. */
.irr-fm {
	position: fixed;
	left: var(--irr-gutter);
	bottom: 22px;
	z-index: 960;
	display: flex; align-items: center; gap: 10px;
	max-width: min(330px, calc(100vw - 32px));
	padding: 6px 14px 8px 6px;
	border-radius: 999px;
	background: color-mix(in srgb, #111110 84%, transparent);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid rgba(244,242,236,.14);
	box-shadow: 0 18px 40px -20px rgba(0,0,0,.7);
	color: #F4F2EC;
	overflow: hidden;
	opacity: 0; transform: translateY(24px);
	transition: opacity .6s var(--irr-ease), transform .7s var(--irr-ease);
}
.irr-fm.is-in { opacity: 1; transform: none; }
.irr-fm-disc {
	position: relative;
	flex: 0 0 auto;
	width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 50%;
	background: #222 center / cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
	cursor: pointer;
	animation: irr-spin 6s linear infinite;
	animation-play-state: paused;
}
.irr-fm.is-playing .irr-fm-disc { animation-play-state: running; }
/* centre hole doubles as the play / pause icon */
.irr-fm-disc::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
	background: rgba(17,17,16,.82);
	box-shadow: 0 0 0 1.5px rgba(244,242,236,.8);
}
.irr-fm-ico {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	width: 0; height: 0; margin: -3.5px 0 0 -2px;
	border-left: 6px solid #F4F2EC; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.irr-fm.is-playing .irr-fm-ico { width: 6px; height: 7px; margin: -3.5px 0 0 -3px; border: 0; background: linear-gradient(90deg, #F4F2EC 0 2px, transparent 2px 4px, #F4F2EC 4px 6px); }
.irr-fm-disc:focus-visible { outline: 2px solid var(--irr-sun); outline-offset: 2px; }
.irr-fm-txt {
	min-width: 0; display: grid; gap: 2px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}
.irr-fm-txt .t { font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irr-fm-txt .c { font-size: 8.5px; letter-spacing: .07em; line-height: 1.2; color: rgba(244,242,236,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irr-fm-txt a { color: rgba(244,242,236,.9) !important; text-decoration: none !important; }
.irr-fm-txt a:hover { color: var(--irr-sun) !important; }
.irr-fm-vol { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: 2px; cursor: pointer; }
.irr-fm-spk { width: 9px; height: 9px; background: rgba(244,242,236,.7); clip-path: polygon(0 30%, 35% 30%, 75% 0, 75% 100%, 35% 70%, 0 70%); }
.irr-fm-vol input {
	--v: 70%;
	width: 54px; height: 14px; margin: 0;
	-webkit-appearance: none; appearance: none;
	background:
		linear-gradient(var(--irr-sun), var(--irr-sun)) left center / var(--v) 2px no-repeat,
		repeating-linear-gradient(90deg, rgba(244,242,236,.35) 0 1px, transparent 1px 5px) left center / 100% 7px no-repeat;
	cursor: pointer;
}
.irr-fm-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 13px; border-radius: 2px; background: #F4F2EC; border: 0; }
.irr-fm-vol input::-moz-range-thumb { width: 3px; height: 13px; border-radius: 2px; background: #F4F2EC; border: 0; }
.irr-fm-vol input:focus-visible { outline: 2px solid var(--irr-sun); outline-offset: 3px; }
/* Off-White stripes as the progress band */
.irr-fm-bar {
	position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: repeating-linear-gradient(-45deg, rgba(244,242,236,.28) 0 3px, transparent 3px 6px);
	pointer-events: none;
}
.irr-fm-bar::after {
	content: ""; position: absolute; inset: 0 auto 0 0;
	width: var(--p, 0%);
	background: var(--irr-sun);
	transition: width .25s linear;
}
@media (hover: none) { .irr-fm-vol { display: none; } }
body.irr-sheet-open .irr-fm { opacity: 0; pointer-events: none; }

/* ==========================================================================
   14f Round four: easier-to-spot menu, optional second full-screen image
   ========================================================================== */

/* Menu: style + colors come from Customize > Irrie — Menu. The menu script
   adds .opacity on small screens (hidden until a burger opens it); keep it shown. */
.fullscreen-menu .flexnav.opacity,
.fullscreen-menu .flexnav.sm-screen { opacity: 1 !important; visibility: visible !important; max-height: none !important; }
/* no ruler lines behind the buttons */
.fullscreen-menu nav::before,
.fullscreen-menu nav::after { display: none !important; content: none !important; }

body {
	--irr-nav-bg: var(--irr-ink);
	--irr-nav-fg: color-mix(in srgb, var(--irr-paper) 80%, transparent);
	--irr-nav-hover-bg: color-mix(in srgb, var(--irr-paper) 14%, transparent);
	--irr-nav-hover-fg: var(--irr-paper);
	--irr-nav-active-bg: var(--irr-sun);
	--irr-nav-active-fg: #111110;
	--irr-nav-radius: 999px;
	--irr-nav-border: 0px;
}
body.irr-shape-rounded { --irr-nav-radius: 12px; }
body.irr-shape-square  { --irr-nav-radius: 0px; }
body.irr-nav-fill      { --irr-nav-bg: var(--irr-ink); --irr-nav-hover-bg: var(--irr-cobalt); }
body.irr-nav-outline   { --irr-nav-bg: transparent; --irr-nav-fg: var(--irr-ink); --irr-nav-hover-bg: var(--irr-ink); --irr-nav-hover-fg: var(--irr-paper); --irr-nav-active-bg: var(--irr-ink); --irr-nav-active-fg: var(--irr-paper); --irr-nav-border: 1.5px; }
body.irr-nav-underline,
body.irr-nav-minimal   { --irr-nav-bg: transparent; --irr-nav-fg: var(--irr-ink); --irr-nav-hover-bg: transparent; --irr-nav-hover-fg: var(--irr-ink); --irr-nav-active-bg: transparent; --irr-nav-active-fg: var(--irr-ink); }

.fullscreen-menu .flexnav,
.fullscreen-menu .flexnav.flexnav-show {
	padding: 4px !important;
	gap: 2px;
	border-radius: var(--irr-nav-radius);
	background: var(--irr-nav-bg) !important;
}
body.irr-nav-capsule .fullscreen-menu .flexnav { box-shadow: 0 8px 22px -12px rgba(0,0,0,.55); }
body:not(.irr-nav-capsule) .fullscreen-menu .flexnav { background: transparent !important; gap: 6px; }
.fullscreen-menu .flexnav li a {
	padding: 9px 18px !important;
	border-radius: max(0px, calc(var(--irr-nav-radius) - 3px));
	border: var(--irr-nav-border) solid currentColor;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--irr-nav-fg) !important;
}
body.irr-nav-fill .fullscreen-menu .flexnav li a { background: var(--irr-nav-bg); }
.fullscreen-menu .flexnav li a:hover,
.fullscreen-menu .flexnav li a:focus-visible { color: var(--irr-nav-hover-fg) !important; background: var(--irr-nav-hover-bg) !important; }
.fullscreen-menu .flexnav li.current-menu-item a,
.fullscreen-menu .flexnav li a.active,
.fullscreen-menu .flexnav li a[aria-current="page"] {
	color: var(--irr-nav-active-fg) !important;
	background: var(--irr-nav-active-bg) !important;
	border-color: var(--irr-nav-active-bg);
}
/* underline + minimal: text links */
body.irr-nav-underline .fullscreen-menu .flexnav li a,
body.irr-nav-minimal .fullscreen-menu .flexnav li a { padding: 9px 10px !important; text-underline-offset: 6px; text-decoration-thickness: 2px; }
body.irr-nav-underline .fullscreen-menu .flexnav li a:hover,
body.irr-nav-underline .fullscreen-menu .flexnav li.current-menu-item a { text-decoration: underline !important; }
body.irr-nav-minimal .fullscreen-menu .flexnav li a { opacity: .62; }
body.irr-nav-minimal .fullscreen-menu .flexnav li a:hover,
body.irr-nav-minimal .fullscreen-menu .flexnav li.current-menu-item a { opacity: 1; }
@media (max-width: 767px) {
	.fullscreen-menu .flexnav li a { padding: 8px 12px !important; font-size: 13.5px !important; }
	.fullscreen-menu nav, .fullscreen-menu nav.open { padding: 9px 0 !important; }
}

/* Home: second full-screen image (shaukiah). The frame opens from an inset,
   rounded window to full bleed as it scrolls in; --fp runs 0 → 1. */
.irr-feature {
	--fp: 0;
	position: relative;
	height: 100vh;
	min-height: 560px;
	width: 100vw;
	margin: 0 0 0 calc(50% - 50vw);
	overflow: hidden;
}
#main-page-content > .irr-feature:first-child { margin-top: calc(clamp(48px, 8vh, 96px) * -1); }
#main-page-content > .irr-feature + .irr-stats, #main-page-content > .irr-feature + .irr-index { margin-top: clamp(56px, 9vh, 112px); }
.irr-feature-frame {
	position: absolute; inset: 0;
	overflow: hidden;
	clip-path: inset(calc((1 - var(--fp)) * 14%) calc((1 - var(--fp)) * 22%) round calc((1 - var(--fp)) * 28px));
	will-change: clip-path;
}
.irr-feature-img {
	width: 100% !important; height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transform: scale(calc(1.18 - var(--fp) * .18));
	border-radius: 0 !important;
}
.irr-feature-cap {
	position: absolute; left: var(--irr-gutter); right: var(--irr-gutter); bottom: clamp(28px, 6vh, 64px);
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px;
	color: #fff;
	opacity: calc((var(--fp) - .7) * 3.4);
	text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.irr-feature-cap .irr-label { color: rgba(255,255,255,.85) !important; }
.irr-feature-title {
	font-family: var(--irr-display) !important;
	font-stretch: 125%; font-variation-settings: "wdth" 125;
	font-weight: 800; text-transform: uppercase;
	font-size: clamp(32px, 5.4vw, 92px); line-height: .9; letter-spacing: -.02em;
	color: #fff !important; text-decoration: none !important;
}
.irr-feature-title:hover { color: var(--irr-sun) !important; }
.irr-feature::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,.45), transparent 42%);
	opacity: var(--fp);
}

/* ==========================================================================
   14g Round five: word of the day, phones (menu button + banner), a11y
   ========================================================================== */

/* Header: word of the day */
.irr-wotd b { font-weight: 600; color: inherit !important; }
.irr-wotd-e { font-size: 13px; letter-spacing: 0; }

/* About: "Hi, it's me" as a foil balloon (Customize > Irrie — Index) */
body.irr-tagfoil .irr-face-tag {
	isolation: isolate;
	background: none !important;
	box-shadow: none !important;
	padding: 10px 17px !important;
	font-weight: 700 !important;
}
body.irr-tagfoil .irr-face-tag::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: 999px;
	background:
		radial-gradient(60% 26% at 46% 26%, rgba(255,255,255,.45) 0 12%, var(--foil-glow) 40%, rgba(255,255,255,0) 68%),
		radial-gradient(14% 22% at 84% 40%, rgba(255,255,255,.25) 0 25%, rgba(255,255,255,0) 75%),
		radial-gradient(70% 38% at 50% 96%, var(--foil-under) 0 18%, rgba(255,255,255,0) 70%),
		var(--foil-tint, linear-gradient(transparent, transparent)),
		linear-gradient(176deg, var(--foil-1) 0%, var(--foil-2) 30%, var(--foil-3) 55%, var(--foil-4) 80%, var(--foil-5) 100%);
	box-shadow:
		inset 0 2px 3px rgba(255,255,255,.55),
		inset 0 -7px 11px var(--foil-deep),
		inset 10px 0 12px rgba(255,255,255,.15),
		inset -10px 0 14px var(--foil-side);
	filter: url(#irr-foil) drop-shadow(0 9px 10px rgba(0,0,0,.45));
}
/* a slow glint that slides across now and then */
body.irr-tagfoil .irr-face-tag::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: 999px; pointer-events: none;
	mix-blend-mode: soft-light;
	background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 60%) no-repeat;
	background-size: 250% 100%;
	background-position: 120% 0;
	filter: url(#irr-foil);
	animation: irr-glint 5.5s ease-in-out infinite;
}
@keyframes irr-glint { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { body.irr-tagfoil .irr-face-tag::after { animation: none; } }
/* phones: the tag is a plain solid color in the foil's main shade (no foil effect) */
@media (max-width: 767px) {
	body.irr-tagfoil .irr-face-tag { background: var(--foil-2) !important; box-shadow: 0 8px 18px -8px rgba(0,0,0,.45) !important; }
	body.irr-tagfoil .irr-face-tag::before,
	body.irr-tagfoil .irr-face-tag::after { display: none !important; }
}
body.irr-tagfoil-silver .irr-face-tag {
	--foil-1: #eef0f3; --foil-2: #c9cdd3; --foil-3: #9aa0a8; --foil-4: #6c727b; --foil-5: #a9aeb5;
	--foil-glow: rgba(255,255,255,.4); --foil-under: rgba(225,232,245,.7);
	--foil-deep: rgba(40,46,56,.6); --foil-side: rgba(40,46,56,.4);
	--foil-tint: linear-gradient(200deg, rgba(255,170,220,.12), rgba(150,200,255,.14) 50%, rgba(255,240,190,.08));
	color: #16181c !important; text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
body.irr-tagfoil-gold .irr-face-tag {
	--foil-1: #fff0a6; --foil-2: #ffcc2e; --foil-3: #e0a106; --foil-4: #a06a00; --foil-5: #f2b92a;
	/* extra light/dark bands, like light rolling over real foil */
	--foil-tint: linear-gradient(176deg, rgba(255,255,255,0) 20%, rgba(150,100,0,.35) 26%, rgba(255,230,120,.5) 39%, rgba(255,255,255,0) 46%, rgba(120,80,0,.3) 67%, rgba(255,255,255,0) 74%);
	--foil-glow: rgba(255,248,220,.15); --foil-under: rgba(255,225,130,.35);
	--foil-deep: rgba(90,55,0,.5); --foil-side: rgba(90,55,0,.3);
	color: #3a2800 !important; text-shadow: 0 1px 0 rgba(255,245,200,.7);
}
body.irr-tagfoil-blue .irr-face-tag {
	--foil-1: #3f74ff; --foil-2: #2557ff; --foil-3: #1238e0; --foil-4: #0b25b0; --foil-5: #1a3fd6;
	--foil-glow: rgba(220,232,255,.35); --foil-under: rgba(120,170,255,.6);
	--foil-deep: rgba(2,10,70,.75); --foil-side: rgba(2,10,70,.5);
	color: #fff !important; text-shadow: 0 1px 2px rgba(0,10,80,.55);
}

/* Accessibility --------------------------------------------------------------- */
.irr-skip {
	position: fixed; left: 16px; top: -60px; z-index: 10000;
	padding: 10px 16px; border-radius: 999px;
	background: var(--irr-ink); color: var(--irr-paper) !important;
	font: 600 14px/1 var(--irr-sans); text-decoration: none !important;
	transition: top .2s;
}
.irr-skip:focus { top: 12px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, summary:focus-visible {
	outline: 2px solid var(--irr-cobalt) !important;
	outline-offset: 3px !important;
}
html:has(#main-page-content.irr-about) a:focus-visible,
html:has(#main-page-content.irr-about) button:focus-visible { outline-color: var(--irr-sun) !important; }
.irr-cover a:focus-visible { outline-color: #fff !important; }
.irr-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Phones ---------------------------------------------------------------------- */
.irr-burger { display: none; }
/* the banner's phone line (time + word of the day) only shows on phones */
.irr-tt-info { display: none !important; }
.irr-topbar-phone { display: none !important; }
html:has(.irr-topbar-phone) header { top: 0 !important; }
.irr-topbar i { font-style: normal; }

@media (max-width: 767px) {
	/* banner: time + forecast instead of the disciplines, on every page */
	body.irr-app-info .irr-topbar,
	body.irr-app-info .irr-topbar-phone { display: block !important; }
	body.irr-app-info .irr-tt-words { display: none !important; }
	body.irr-app-info .irr-tt-info { display: inline-flex !important; }
	html:has(.irr-topbar) header { top: var(--irr-topbar-h) !important; }
	body.irr-app-notopbar .irr-topbar { display: none !important; }
	/* flat, edge to edge: no rounded corners, no line, nothing white around it */
	.irr-topbar { left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; border-bottom: 0; box-shadow: none !important; }
	/* pulling past the top shows the banner color, past the bottom the page color */
	html:has(.irr-topbar) { background: linear-gradient(to bottom, var(--irr-banner-bg, var(--irr-sun)) 0 50%, var(--irr-paper) 50% 100%) !important; }
	html:has(body.irr-app-notopbar) header { top: 0 !important; }

	/* header: logo left, menu button right */
	.irr-status { display: none !important; }
	.irr-burger {
		display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
		order: 9; margin-left: auto;
		width: 48px; height: 48px; padding: 0;
		border: 0; border-radius: var(--irr-nav-radius, 999px);
		background: var(--irr-nav-bg); color: var(--irr-nav-fg);
		cursor: pointer; position: relative; z-index: 1002;
		-webkit-tap-highlight-color: transparent;
	}
	body:not(.irr-nav-capsule):not(.irr-nav-fill) .irr-burger { background: transparent; color: var(--irr-ink); border: 1.5px solid currentColor; }
	.irr-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--irr-ease); }
	body.irr-menu-open .irr-burger span:first-child { transform: translateY(4px) rotate(45deg); }
	body.irr-menu-open .irr-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

	/* menu: hidden until the button opens it, then a full-screen panel */
	.fullscreen-menu nav, .fullscreen-menu nav.open { display: none !important; }
	body.irr-menu-open .fullscreen-menu nav {
		display: flex !important;
		position: fixed !important; inset: 0 !important;
		left: 0 !important; top: 0 !important; transform: none !important;
		width: 100vw !important; height: 100dvh !important;
		padding: calc(var(--irr-topbar-h, 0px) + 96px) 24px 40px !important;
		background: var(--irr-paper) !important;
		z-index: 1001;
		align-items: flex-start;
		overflow-y: auto;
	}
	body.irr-menu-open { overflow: hidden; }
	body.irr-menu-open .fullscreen-menu .nav-height,
	body.irr-menu-open .fullscreen-menu nav .outer,
	body.irr-menu-open .fullscreen-menu nav .inner { width: 100% !important; }
	body.irr-menu-open .fullscreen-menu .flexnav { border-radius: 0 !important; overflow: visible !important; max-height: none !important; list-style: none !important; }
	body.irr-menu-open .fullscreen-menu .flexnav li { width: 100% !important; overflow: visible !important; clip-path: none !important; list-style: none !important; }
	body.irr-menu-open .fullscreen-menu .flexnav li::marker { content: none; }
	body.irr-menu-open .fullscreen-menu nav, body.irr-menu-open .fullscreen-menu nav * { box-sizing: border-box !important; }
	body.irr-menu-open .fullscreen-menu .flexnav,
	body.irr-menu-open .fullscreen-menu .flexnav.flexnav-show {
		flex-direction: column; align-items: stretch; gap: 10px;
		width: 100% !important; padding: 0 !important;
		background: transparent !important; box-shadow: none;
	}
	body.irr-menu-open .fullscreen-menu .flexnav li a {
		display: flex !important; align-items: center; min-height: 64px; width: 100% !important;
		padding: 14px 22px !important;
		font-family: var(--irr-display) !important; font-stretch: 125%; font-variation-settings: "wdth" 125;
		font-weight: 800 !important; text-transform: uppercase;
		font-size: clamp(28px, 9vw, 44px) !important; line-height: 1 !important;
		color: var(--irr-ink) !important;
		background: transparent !important;
		border-radius: 18px;
		border: 1.5px solid var(--irr-line);
	}
	body.irr-menu-open .fullscreen-menu .flexnav li.current-menu-item a,
	body.irr-menu-open .fullscreen-menu .flexnav li a.active {
		background: var(--irr-nav-active-bg) !important; color: var(--irr-nav-active-fg) !important; border-color: transparent;
	}
	body.irr-menu-open .irr-fm, body.irr-menu-open .irr-k-hint { visibility: hidden; }

	/* lighter + faster on phones */
	body.irr-app-nograin.irr-grain::after { display: none; }
	.irr-ambient { display: none !important; }

	/* home cover fills the phone screen */
	.irr-cover { height: 100svh; min-height: 520px; }
	.irr-cover-title { font-size: clamp(52px, 17vw, 96px) !important; }
	.irr-cover-meta { gap: 14px; }
	.irr-cover-btn { min-height: 44px; }
	.irr-cover-scroll { display: none; }

	/* Selected work: swipeable cards instead of the 3D ring */
	body.irr-app-swipe .irr-ring-stage {
		height: auto; perspective: none; cursor: auto;
		mask-image: none; -webkit-mask-image: none;
		overflow: visible; touch-action: auto;
		margin: 8px calc(var(--irr-gutter) * -1) 24px !important;
	}
	body.irr-app-swipe .irr-ring {
		position: static; width: auto; height: auto; margin: 0;
		transform: none !important;
		display: flex; gap: 12px;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding: 4px var(--irr-gutter) 16px;
		scrollbar-width: none;
	}
	body.irr-app-swipe .irr-ring::-webkit-scrollbar { display: none; }
	body.irr-app-swipe .irr-ring-card {
		position: relative; inset: auto;
		flex: 0 0 74vw; aspect-ratio: 4 / 5;
		transform: none !important;
		scroll-snap-align: center;
		backface-visibility: visible;
	}
	body.irr-app-swipe .irr-ring-cap { opacity: 1; transform: none; }
	body.irr-app-swipe .irr-drag-hint { display: none; }

	/* bigger tap targets */
	.irr-row-link { min-height: 56px; }
	.irr-surprise { min-height: 44px; }
	.irr-fm { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }


	/* About: one column — headline, portrait, phrases, readouts, button */
	#main-page-content.irr-about { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px; padding-top: 120px !important; padding-bottom: 120px !important; /* room above the music pill */ }
	.irr-ab-tl, .irr-ab-ml, .irr-ab-mr, .irr-ab-center, .irr-ab-bl, .irr-ab-br { grid-column: 1 / -1 !important; margin-top: 0 !important; }
	.irr-ab-mr { justify-self: start; text-align: left; max-width: none; }
	.irr-ab-mr [data-irr-cycle] { justify-content: flex-start; }
	.irr-ab-center { width: min(360px, 86vw) !important; justify-self: center; padding: 8px 0 24px; }
	.irr-ab-bl { justify-self: start; }
	.irr-ab-br { justify-self: start; }

	/* project pages */
	#main-page-content .wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.irr-burger span { transition: none; }
}

/* 15 Footer bar --------------------------------------------------------------- */
#footer-container { padding: 0 var(--irr-gutter) !important; }

.copyright,
.dark-content .copyright, .light-content .copyright,
#footer-container .button-text, #footer-container .button-text span,
.socials-text, .socials li a {
	font-family: var(--irr-mono) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--irr-ink) !important;
}
.button-wrap .icon-wrap, .socials-icon {
	border-color: var(--irr-ink) !important;
	color: var(--irr-ink) !important;
}
.button-wrap .icon-wrap i, .socials-icon i { color: var(--irr-ink) !important; }

/* 16 Carried over from the site's Additional CSS ----------------------------- */
.grecaptcha-badge { visibility: hidden; }

/* 17 Responsive --------------------------------------------------------------- */
@media (max-width: 1100px) {
	.fullscreen-menu nav { position: relative !important; left: auto !important; top: auto !important; transform: none; padding: 9px 12px !important; }
	.irr-status { display: none !important; }
	#main-page-content.irr-about { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.irr-ab-tl { grid-column: 1 / -1; }
	.irr-ab-tr { grid-column: 1 / -1; justify-self: start; text-align: left; grid-row: auto; }
	.irr-ab-center { grid-column: 1 / -1; grid-row: auto; width: min(420px, 80%); justify-self: center; }
	.irr-ab-ml, .irr-ab-mr, .irr-ab-bl, .irr-ab-br { grid-row: auto; }
	.irr-ab-ml, .irr-ab-mr { margin-top: 0; }
	.irr-ab-bl { grid-column: 1 / -1; justify-self: start; }
	.irr-fi-t0, .irr-fi-c1 { display: none; }
	.irr-status-item:nth-child(1) { display: none; }
	.irr-row-link { grid-template-columns: 40px minmax(0, 1fr) 24px; }
	.irr-row-meta { display: none; }
	.irr-index-thumb { display: none; }
}

@media (max-width: 767px) {
	.fullscreen-menu .flexnav li a { padding: 7px 10px !important; font-size: 13px !important; }
	#header-container { gap: 10px; }
	.irr-cursor:nth-of-type(n+4) { display: none; }
	.irr-fi-c2, .irr-fi-toggle { display: none; }
	.irr-fm { left: 16px; bottom: 16px; }
	#main-page-content.irr-split { display: block; }
	#main-page-content.irr-split > :first-child { margin-bottom: 40px; }
	.irr-badge { right: -8px; top: -28px; width: 96px; }
	.irr-status { display: none; }
	#header-container { padding: 0 16px !important; }

	.grid-portfolio .item,
	.grid-portfolio .item.wide {
		width: calc(100% - 24px) !important;
		height: calc(70vw + 92px) !important;
	}

	.irr-meta { grid-template-columns: 1fr 1fr; }
	.irr-meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
	.irr-meta > div:nth-child(n+3) { border-top: 1px solid var(--irr-line); }

	#main-page-content .one_third,
	#main-page-content .two_third { width: 100% !important; float: none !important; margin-right: 0 !important; }
	#main-page-content .two_third p { max-width: none; }

	#hero.has-image #hero-caption { padding-bottom: 120px !important; }
}

/* 18 Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.irr-badge, .irr-face-card, .irr-face-shadow, .irr-cursor, .irr-fi-cover, .irr-fi-toast, .irr-cover-img, .irr-cover-scroll, .irr-topbar .irr-ticker-track, .irr-fm-disc { animation: none !important; }
	.irr-cover-img { transform: none; }
	.irr-rw { opacity: 1; }
	.irr-ambient { display: none; }
	.irr-bubble, .irr-sheet, .irr-sheet-grid li { transition: none !important; }
	body.irr-grain::after { animation: none; }
	[data-irr-reveal], [data-irr-reveal] img, .irr-w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
	.irr-ticker-track { animation: none; }
	.irr-status-live i { animation: none; }
	.grid-portfolio .item-image, .irr-row-link, .irr-index-thumb { transition: none !important; }
}

/* 15. Speed: phones get the smaller cover */
@media (max-width: 767px) {
	.irr-cover-img { background-image: var(--cover-sm, var(--cover)); }
}
/* Width/height attributes only reserve space; any size the CSS sets still wins */
:where(img[width][height]) { height: auto; }

/* Loading screen off: no cover-up, header visible from the start */
body.irr-noloader .preloader-wrap { display: none !important; }
body.irr-noloader #main,
body.irr-noloader #header-container { opacity: 1 !important; }