@charset "UTF-8";
/* ==========================================================================
   Hats — "I Wear Many Hats"
   The visual system, in one hand-written stylesheet.

   Order of business:
     01. Tokens & theme surfaces
     02. Base & typography primitives
     03. Texture (film grain, paper)
     04. Liquid glass & tactile controls
     05. Header, navigation & mobile panel
     06. Hero
     07. Reveal & motion system
     08. Custom cursor
     09. Section components (hats, books, projects, writing)
     10. Becoming, place, quiet sections
     11. Article reading experience
     12. Forms, comments, search, 404
     13. Footer
     14. Block style variations
     15. Motion & print guards

   Everything is driven by theme.json presets plus the tokens below.
   No build step, no framework, no reset library.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Tokens & theme surfaces
   -------------------------------------------------------------------------- */

:root {
	/* The motion language: two easings, used everywhere, never invented per
	   component. out-expo for entrances, out-quint for interactive states. */
	--iwmh-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--iwmh-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
	--iwmh-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);

	/* Durations. Short enough to feel responsive, long enough to feel made. */
	--iwmh-t-fast: 180ms;
	--iwmh-t: 320ms;
	--iwmh-t-slow: 620ms;
	--iwmh-t-reveal: 1050ms;

	/* Radii. The hero and plates are generously rounded; controls are pills. */
	--iwmh-r-sm: 6px;
	--iwmh-r-md: 14px;
	--iwmh-r-lg: 24px;
	--iwmh-r-xl: 34px;
	--iwmh-r-hero: clamp(18px, 2.4vw, 40px);
	--iwmh-r-pill: 999px;

	/* The inset composition: the whole page breathes inside a margin. */
	--iwmh-gutter: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
	--iwmh-frame: clamp(1rem, 0.6rem + 2vw, 2.5rem);

	/* Hairlines. Gold is used for emphasis, the line colour for structure. */
	--iwmh-hair: 1px solid var(--wp--preset--color--line);
	--iwmh-hair-gold: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 42%, transparent);

	/* Hero stays cinematic ink in both colour modes: the cover of the book
	   does not become a white page. */
	--iwmh-ink: #080808;
	--iwmh-ink-soft: #101010;
	--iwmh-ink-cream: #e1e0cc;
	--iwmh-ink-muted: #a6a49a;
	--iwmh-ink-line: rgba(225, 224, 204, 0.14);
	--iwmh-ink-gold: #c9a96a;

	/* Shadows are soft and directional, never glowy. */
	--iwmh-shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.78);
	--iwmh-shadow-plate: 0 48px 96px -44px rgba(0, 0, 0, 0.9);

	/* Glass: translucency, blur and a hairline highlight. Restrained. */
	--iwmh-glass-bg: color-mix(in srgb, var(--wp--preset--color--surface) 52%, transparent);
	--iwmh-glass-bg-strong: color-mix(in srgb, var(--wp--preset--color--surface) 74%, transparent);
	--iwmh-glass-border: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	--iwmh-glass-highlight: color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	--iwmh-glass-blur: 16px;
}

/* Light mode is a printed book, not an inversion: warm ivory paper, charcoal
   ink, and a deeper gold that keeps its contrast against light stock. */
:root[data-theme="light"] {
	--wp--preset--color--base: #f7f4ec;
	--wp--preset--color--base-2: #f1ebdf;
	--wp--preset--color--surface: #fffdf8;
	--wp--preset--color--surface-2: #efe8da;
	--wp--preset--color--line: #dcd3c0;
	--wp--preset--color--muted-2: #6f6b5f;
	--wp--preset--color--muted: #55524a;
	--wp--preset--color--cream: #2c2a25;
	--wp--preset--color--contrast: #17160f;
	--wp--preset--color--gold-deep: #7d5f24;
	--wp--preset--color--gold: #8d6c2c;
	--wp--preset--color--gold-light: #a37f34;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--black: #17160f;

	--iwmh-glass-bg: color-mix(in srgb, var(--wp--preset--color--surface) 62%, transparent);
	--iwmh-glass-bg-strong: color-mix(in srgb, var(--wp--preset--color--surface) 84%, transparent);
	--iwmh-glass-border: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	--iwmh-glass-highlight: rgba(255, 255, 255, 0.9);

	--iwmh-shadow-lift: 0 22px 50px -26px rgba(45, 38, 22, 0.32);
	--iwmh-shadow-plate: 0 44px 84px -40px rgba(45, 38, 22, 0.38);

	/* The grain is finer and warmer on paper than on film. */
	--iwmh-grain-opacity: 0.05;
}

:root {
	--iwmh-grain-opacity: 0.075;
}

/* --------------------------------------------------------------------------
   02. Base & typography primitives
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Room for the sticky bar when jumping to an anchor. */
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

/* Theme switches should glide, but never during the first paint. */
body,
.hats-header__bar,
.is-style-glass,
.is-style-plate,
.is-style-hat-card {
	transition:
		background-color var(--iwmh-t) var(--iwmh-ease-soft),
		border-color var(--iwmh-t) var(--iwmh-ease-soft),
		color var(--iwmh-t) var(--iwmh-ease-soft);
}

body.hats-theme-switching,
body.hats-theme-switching * {
	transition:
		background-color var(--iwmh-t) var(--iwmh-ease-soft),
		border-color var(--iwmh-t) var(--iwmh-ease-soft),
		color var(--iwmh-t) var(--iwmh-ease-soft) !important;
}

img,
video,
svg,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
	display: block;
}

::selection {
	background: color-mix(in srgb, var(--wp--preset--color--gold) 34%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* Focus: gold, visible, never removed. Keyboard users get the same care as
   pointer users get from the cursor. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: var(--iwmh-r-sm);
}

.hats-skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -140%);
	z-index: 200;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.7rem 1.2rem;
	border-radius: var(--iwmh-r-pill);
	font-size: var(--wp--preset--font-size--small);
	transition: transform var(--iwmh-t) var(--iwmh-ease);
}

.hats-skip-link:focus {
	transform: translate(-50%, 0.75rem);
}

/* Screen-reader-only, without the legacy clip hack. */
.screen-reader-text,
.hats-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Typographic primitives ------------------------------------------------ */

/* The eyebrow: a small uppercase gold label that opens a section. Used
   constantly, so it is a primitive rather than a one-off. */
.hats-eyebrow,
.is-style-eyebrow .wp-block-post-terms__separator,
.wp-block-post-terms.is-style-eyebrow a {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--gold);
}

.hats-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.hats-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	flex: none;
}

.hats-eyebrow--bare::before {
	display: none;
}

/* The literary voice. Instrument Serif Italic is used sparingly: for book
   titles, pull quotes, and the phrases that carry the most feeling. */
.hats-serif,
.wp-block-paragraph.is-style-serif {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.14;
}

.hats-display {
	font-weight: 800;
	line-height: 0.96;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.hats-lede,
.wp-block-paragraph.is-style-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--cream);
	text-wrap: pretty;
	max-width: 34em;
}

.wp-block-paragraph.is-style-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted-2);
	letter-spacing: 0.02em;
}

/* A quiet horizontal rule with a gold seed, used between editorial blocks. */
.hats-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 0;
	margin: 0;
	height: 1px;
}

.hats-rule::before {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
	flex: none;
}

.hats-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--line);
}

/* The arrow used in links and buttons. It advances on hover — a small,
   tactile signal rather than a decorative icon. */
.hats-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	flex: none;
	transition: transform var(--iwmh-t) var(--iwmh-ease);
}

.hats-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

:where(a, button):hover .hats-arrow,
:where(a, button):focus-visible .hats-arrow {
	transform: translateX(0.28em);
}

/* Text links that reveal a gold underline on approach. */
.hats-link {
	position: relative;
	text-decoration: none;
	color: inherit;
	display: inline-block;
}

.hats-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--iwmh-t) var(--iwmh-ease);
}

.hats-link:hover::after,
.hats-link:focus-visible::after {
	transform: scaleX(1);
}

/* Meta rows: date · reading time · category, in the smallest voice. */
.hats-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-meta > * {
	margin: 0;
}

.hats-meta a {
	color: inherit;
	text-decoration: none;
}

.hats-meta a:hover {
	color: var(--wp--preset--color--gold);
}

.hats-meta__sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   03. Texture — film grain and paper
   -------------------------------------------------------------------------- */

/* Generated from SVG turbulence, inlined as a data URI: a sub-400-byte string
   instead of a large PNG, and it never leaves the document. */
.hats-noise,
.hats-grain,
.bg-noise {
	position: relative;
	isolation: isolate;
}

.hats-noise::after,
.hats-grain::after,
.bg-noise::after {
	content: "";
	position: absolute;
	inset: -60%;
	z-index: 3;
	pointer-events: none;
	opacity: var(--iwmh-grain-opacity);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");
	background-size: 220px 220px;
	mix-blend-mode: overlay;
	animation: hats-grain 6s steps(5) infinite;
	will-change: transform;
}

/* A second, much finer layer for photographic grain — the Prisma idea, at
   half the strength, so it reads as film rather than digital static. */
.hats-noise--film::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.35;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23f)'/></svg>");
	background-size: 120px 120px;
	mix-blend-mode: soft-light;
}

@keyframes hats-grain {
	0% { transform: translate3d(0, 0, 0); }
	20% { transform: translate3d(-3%, 2%, 0); }
	40% { transform: translate3d(2%, -3%, 0); }
	60% { transform: translate3d(-2%, -2%, 0); }
	80% { transform: translate3d(3%, 1%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* Paper tooth for light mode: visible as texture, never as pattern. */
:root[data-theme="light"] .hats-noise::after,
:root[data-theme="light"] .hats-grain::after,
:root[data-theme="light"] .bg-noise::after {
	mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   04. Liquid glass & tactile controls
   -------------------------------------------------------------------------- */

/* Glass is an accent layer. It appears on the navigation, floating controls,
   the secondary button, and small metadata plates — nowhere else. */
.is-style-glass,
.hats-glass {
	position: relative;
	background: var(--iwmh-glass-bg);
	border: 1px solid var(--iwmh-glass-border);
	border-radius: var(--iwmh-r-lg);
	backdrop-filter: blur(var(--iwmh-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--iwmh-glass-blur)) saturate(150%);
	box-shadow:
		inset 0 1px 0 0 var(--iwmh-glass-highlight),
		var(--iwmh-shadow-lift);
}

/* The light gradient that makes glass feel like a surface rather than a
   filter. Kept under 8% so it never becomes a gradient effect. */
.is-style-glass::before,
.hats-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		150deg,
		color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent) 0%,
		transparent 42%,
		transparent 100%
	);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.is-style-glass,
	.hats-glass {
		background: var(--iwmh-glass-bg-strong);
	}
}

/* --- Buttons --------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	position: relative;
	overflow: hidden;
	transition:
		background-color var(--iwmh-t) var(--iwmh-ease-soft),
		color var(--iwmh-t) var(--iwmh-ease-soft),
		border-color var(--iwmh-t) var(--iwmh-ease-soft),
		gap var(--iwmh-t) var(--iwmh-ease),
		letter-spacing var(--iwmh-t) var(--iwmh-ease),
		transform var(--iwmh-t) var(--iwmh-ease);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible {
	/* The tactile tell: the label opens up and the arrow steps forward. */
	gap: 0.95em;
	letter-spacing: 0.03em;
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px) scale(0.99);
}

/* A hairline highlight that sweeps across on hover — the "internal
   highlight" of the Flowpath buttons, translated to CSS only. */
.wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient(
		100deg,
		transparent,
		color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent),
		transparent
	);
	transform: skewX(-14deg);
	opacity: 0;
	pointer-events: none;
	transition: left var(--iwmh-t-slow) var(--iwmh-ease), opacity var(--iwmh-t) linear;
}

.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
	left: 115%;
	opacity: 1;
}

/* Secondary button: glass, with the cream text of the hero. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: rgba(225, 224, 204, 0.06);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--iwmh-glass-border);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	box-shadow: inset 0 1px 0 0 var(--iwmh-glass-highlight);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible {
	background: rgba(225, 224, 204, 0.12);
	color: var(--wp--preset--color--contrast);
}

/* Quiet link-style button: no chrome, just an arrow and a gold rule. */
.wp-block-button.is-style-quiet .wp-block-button__link {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: 0.2em 0;
	color: var(--wp--preset--color--cream);
}

.wp-block-button.is-style-quiet .wp-block-button__link:hover,
.wp-block-button.is-style-quiet .wp-block-button__link:focus-visible {
	border-bottom-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	background: none;
}

.wp-block-button.is-style-quiet .wp-block-button__link::after {
	display: none;
}

/* Inside the dark hero, buttons borrow the ink palette in both modes. */
.hats-hero .wp-block-button__link,
.is-style-invert .wp-block-button__link {
	color: var(--iwmh-ink);
}

.hats-hero .wp-block-button.is-style-ghost .wp-block-button__link,
.is-style-invert .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--iwmh-ink-cream);
	border-color: rgba(225, 224, 204, 0.22);
	background: rgba(225, 224, 204, 0.07);
}

.hats-hero .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.is-style-invert .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: rgba(225, 224, 204, 0.14);
	color: #fff;
}

/* --------------------------------------------------------------------------
   05. Header, navigation & mobile panel
   -------------------------------------------------------------------------- */

.hats-header {
	z-index: 90;
	padding: 0;
	background: transparent;
}

/* The bar itself: a restrained floating pill. It only gains glass once the
   page has moved, so at the top of the hero it stays invisible. */
.hats-header__bar {
	margin: 0 auto;
	padding: 0.55rem 0.6rem 0.55rem 1.15rem;
	border-radius: var(--iwmh-r-pill);
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	gap: 1rem;
	transition:
		background-color var(--iwmh-t) var(--iwmh-ease-soft),
		border-color var(--iwmh-t) var(--iwmh-ease-soft),
		box-shadow var(--iwmh-t) var(--iwmh-ease-soft),
		backdrop-filter var(--iwmh-t) linear,
		padding var(--iwmh-t) var(--iwmh-ease-soft);
}

.hats-header.is-scrolled .hats-header__bar,
body:not(.is-front) .hats-header .hats-header__bar {
	background: var(--iwmh-glass-bg);
	border-color: var(--iwmh-glass-border);
	backdrop-filter: blur(var(--iwmh-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--iwmh-glass-blur)) saturate(150%);
	box-shadow:
		inset 0 1px 0 0 var(--iwmh-glass-highlight),
		0 18px 40px -30px rgba(0, 0, 0, 0.7);
}

/* Over the dark hero, the glass reads against ink rather than paper. */
.hats-header--over-ink .hats-header__bar {
	color: var(--iwmh-ink-cream);
}

.hats-header--over-ink.is-scrolled .hats-header__bar {
	background: rgba(8, 8, 8, 0.6);
	border-color: rgba(225, 224, 204, 0.14);
}

.hats-header__brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.hats-header__brand .wp-block-site-logo img {
	max-height: 30px;
	width: auto;
}

.hats-header__brand .wp-block-site-title {
	margin: 0;
	line-height: 1;
}

.hats-header__brand .wp-block-site-title a {
	text-decoration: none;
	white-space: nowrap;
}

/* The brand mark carries a small gold tick — the only ornament in the bar. */
.hats-header__brand::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	flex: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--gold) 16%, transparent);
}

.hats-header__controls {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
}

/* --- Navigation ------------------------------------------------------------ */

.hats-nav {
	font-size: var(--wp--preset--font-size--small);
}

.hats-nav .wp-block-navigation__container {
	gap: clamp(0.35rem, 0.1rem + 1.1vw, 1.4rem);
	align-items: center;
}

.hats-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 0.45rem 0.2rem;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: color var(--iwmh-t) var(--iwmh-ease-soft);
}

.hats-header--over-ink .hats-nav .wp-block-navigation-item__content {
	color: rgba(225, 224, 204, 0.78);
}

.hats-nav .wp-block-navigation-item__content:hover,
.hats-nav .wp-block-navigation-item__content:focus-visible,
.hats-nav .current-menu-item > .wp-block-navigation-item__content,
.hats-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.hats-header--over-ink .hats-nav .wp-block-navigation-item__content:hover,
.hats-header--over-ink .hats-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--iwmh-ink-cream);
}

/* The indicator: a hairline that grows from the left, in gold. */
.hats-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0.2rem;
	right: 0.2rem;
	bottom: 0.1rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--iwmh-t) var(--iwmh-ease);
}

.hats-nav .wp-block-navigation-item__content:hover::after,
.hats-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* Current page keeps a permanent, quieter indicator. */
.hats-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	opacity: 0.55;
}

/* Submenus: a glass card that arrives rather than appears. */
.hats-nav .wp-block-navigation__submenu-container {
	background: var(--iwmh-glass-bg-strong);
	border: 1px solid var(--iwmh-glass-border);
	border-radius: var(--iwmh-r-md);
	backdrop-filter: blur(var(--iwmh-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--iwmh-glass-blur)) saturate(150%);
	box-shadow: var(--iwmh-shadow-lift);
	padding: 0.5rem;
	min-width: 13rem;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity var(--iwmh-t) var(--iwmh-ease-soft),
		transform var(--iwmh-t) var(--iwmh-ease);
}

.hats-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.hats-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container,
.hats-nav .wp-block-navigation-item.is-open > .wp-block-navigation__submenu-container {
	opacity: 1;
	transform: translateY(0);
}

.hats-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.7rem;
	border-radius: var(--iwmh-r-sm);
}

.hats-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.hats-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--wp--preset--color--gold) 12%, transparent);
}

.hats-nav.is-style-pill {
	background: none;
	padding: 0;
}

/* --- Controls: theme toggle & menu trigger --------------------------------- */

.hats-theme-toggle,
.hats-menu-toggle {
	appearance: none;
	background: none;
	border: 1px solid transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--iwmh-r-pill);
	transition:
		background-color var(--iwmh-t) var(--iwmh-ease-soft),
		border-color var(--iwmh-t) var(--iwmh-ease-soft),
		color var(--iwmh-t) var(--iwmh-ease-soft);
}

/* The toggle is a small instrument, not a settings switch: an orbit of gold
   that rotates as the mode changes. */
.hats-theme-toggle {
	gap: 0.45rem;
	padding: 0.34rem 0.7rem 0.34rem 0.4rem;
	border-color: var(--iwmh-glass-border);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
	min-height: 34px;
}

.hats-header--over-ink .hats-theme-toggle {
	border-color: rgba(225, 224, 204, 0.18);
	background: rgba(225, 224, 204, 0.06);
}

.hats-theme-toggle:hover,
.hats-menu-toggle:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent);
	color: var(--wp--preset--color--gold);
}

.hats-theme-toggle__icon {
	position: relative;
	width: 22px;
	height: 22px;
	flex: none;
	display: grid;
	place-items: center;
}

.hats-theme-toggle__icon svg {
	width: 15px;
	height: 15px;
	grid-area: 1 / 1;
	transition:
		opacity var(--iwmh-t) var(--iwmh-ease-soft),
		transform var(--iwmh-t-slow) var(--iwmh-ease);
}

.hats-theme-toggle__sun {
	opacity: 0;
	transform: rotate(-70deg) scale(0.5);
}

.hats-theme-toggle__moon {
	opacity: 1;
	transform: rotate(0) scale(1);
}

:root[data-theme="light"] .hats-theme-toggle__sun {
	opacity: 1;
	transform: rotate(0) scale(1);
}

:root[data-theme="light"] .hats-theme-toggle__moon {
	opacity: 0;
	transform: rotate(70deg) scale(0.5);
}

.hats-theme-toggle__label {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.72;
}

/* Menu trigger: two bars that cross. Desktop hides it entirely. */
.hats-menu-toggle {
	display: none;
	width: 40px;
	height: 40px;
	border-color: var(--iwmh-glass-border);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
}

.hats-header--over-ink .hats-menu-toggle {
	border-color: rgba(225, 224, 204, 0.18);
	background: rgba(225, 224, 204, 0.06);
}

.hats-menu-toggle__bars {
	position: relative;
	width: 17px;
	height: 11px;
	display: block;
}

.hats-menu-toggle__bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--iwmh-t) var(--iwmh-ease), width var(--iwmh-t) var(--iwmh-ease);
}

.hats-menu-toggle__bars span:nth-child(1) {
	top: 0;
}

.hats-menu-toggle__bars span:nth-child(2) {
	bottom: 0;
	width: 70%;
}

.hats-menu-toggle[aria-expanded="true"] .hats-menu-toggle__bars span:nth-child(1) {
	transform: translateY(4.75px) rotate(45deg);
}

.hats-menu-toggle[aria-expanded="true"] .hats-menu-toggle__bars span:nth-child(2) {
	width: 100%;
	transform: translateY(-4.75px) rotate(-45deg);
}

/* --- Mobile / tablet navigation panel -------------------------------------- */

@media (max-width: 860px) {
	.hats-menu-toggle {
		display: inline-flex;
	}

	.hats-header__bar {
		padding: 0.45rem 0.45rem 0.45rem 0.9rem;
	}

	/* The panel is the hero continued: full height, ink, typography first. */
	.hats-nav {
		position: fixed;
		inset: 0;
		z-index: 95;
		margin: 0;
		padding: clamp(6rem, 18vh, 9rem) var(--iwmh-frame) 2.5rem;
		background:
			radial-gradient(120% 80% at 80% 0%, rgba(201, 169, 106, 0.09), transparent 60%),
			var(--iwmh-ink);
		color: var(--iwmh-ink-cream);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1.25rem);
		transition:
			opacity var(--iwmh-t-slow) var(--iwmh-ease-soft),
			transform var(--iwmh-t-slow) var(--iwmh-ease),
			visibility 0s linear var(--iwmh-t-slow);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	body.hats-menu-open .hats-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity var(--iwmh-t-slow) var(--iwmh-ease-soft),
			transform var(--iwmh-t-slow) var(--iwmh-ease),
			visibility 0s;
	}

	/* When the panel is open the page behind it stops moving. */
	body.hats-menu-open {
		overflow: hidden;
	}

	.hats-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.hats-nav .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid rgba(225, 224, 204, 0.1);
	}

	.hats-nav .wp-block-navigation-item__content {
		display: block;
		padding: 1.1rem 0;
		font-family: var(--wp--preset--font-family--almarai);
		font-size: clamp(1.75rem, 9vw, 3rem);
		font-weight: 800;
		letter-spacing: -0.04em;
		line-height: 1.05;
		color: var(--iwmh-ink-cream);
		/* Staggered entrance, driven by the index set in theme.js. */
		opacity: 0;
		transform: translateY(0.9rem);
		transition:
			opacity var(--iwmh-t-slow) var(--iwmh-ease-soft),
			transform var(--iwmh-t-slow) var(--iwmh-ease);
	}

	body.hats-menu-open .hats-nav .wp-block-navigation-item__content {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--i, 0) * 65ms + 90ms);
	}

	.hats-nav .wp-block-navigation-item__content::after {
		display: none;
	}

	.hats-nav .wp-block-navigation-item__content:hover,
	.hats-nav .wp-block-navigation-item__content:focus-visible {
		color: var(--iwmh-ink-gold);
	}

	/* Submenus open in place on touch, never as a floating card. */
	.hats-nav .wp-block-navigation__submenu-container {
		position: static;
		opacity: 1;
		transform: none;
		background: none;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding: 0 0 1rem;
		min-width: 0;
	}

	.hats-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	.hats-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 1.05rem;
		font-weight: 400;
		letter-spacing: 0;
		padding: 0.5rem 0;
		opacity: 1;
		transform: none;
		color: rgba(225, 224, 204, 0.72);
	}

	.hats-nav .wp-block-navigation-submenu__toggle {
		color: var(--iwmh-ink-cream);
	}
}

@media (min-width: 861px) {
	/* Desktop: the panel never engages, and the toggle is inert. */
	.hats-nav {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   06. Hero
   -------------------------------------------------------------------------- */

/* The inset composition. On small screens the frame is a whisper; on large
   screens the hero sits inside the page like a photograph in a mount. */
.hats-hero {
	position: relative;
	padding: var(--iwmh-gutter);
	padding-top: calc(var(--iwmh-gutter) + 0.25rem);
}

.hats-hero__frame {
	position: relative;
	min-height: min(100svh, 940px);
	border-radius: var(--iwmh-r-hero);
	overflow: hidden;
	isolation: isolate;
	background: var(--iwmh-ink);
	color: var(--iwmh-ink-cream);
}

@media (min-width: 782px) {
	.hats-hero {
		padding: 1rem;
	}

	.hats-hero__frame {
		min-height: min(100svh - 2rem, 980px);
	}
}

@media (min-width: 1200px) {
	.hats-hero {
		padding: 1.25rem;
	}
}

/* Media layer: any cover image, video, or fallback poster, always covering. */
.hats-hero__media,
.hats-hero__frame .wp-block-cover,
.hats-hero__frame .wp-block-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hats-hero__frame .wp-block-cover__image-background,
.hats-hero__frame .wp-block-cover__video-background,
.hats-hero__frame video,
.hats-hero__frame img.hats-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	/* A slow drift gives the still image the breath of footage. */
	transform: scale(1.06);
	animation: hats-hero-drift 34s var(--iwmh-ease-soft) infinite alternate;
}

@keyframes hats-hero-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to { transform: scale(1.13) translate3d(-1.2%, -1.6%, 0); }
}

.hats-hero__frame .wp-block-cover__background,
.hats-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(115% 85% at 26% 78%, rgba(8, 8, 8, 0.06) 0%, rgba(8, 8, 8, 0.62) 58%, rgba(8, 8, 8, 0.9) 100%),
		linear-gradient(180deg, rgba(8, 8, 8, 0.66) 0%, rgba(8, 8, 8, 0.2) 34%, rgba(8, 8, 8, 0.5) 72%, rgba(8, 8, 8, 0.93) 100%);
	pointer-events: none;
}

.hats-hero__inner {
	position: relative;
	z-index: 4;
	min-height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	padding: clamp(1.25rem, 1rem + 2.5vw, 3.25rem);
	padding-top: clamp(5rem, 12vh, 7rem);
}

.hats-hero__top {
	position: absolute;
	top: clamp(1.25rem, 3vw, 2.5rem);
	left: clamp(1.25rem, 3vw, 2.5rem);
	right: clamp(1.25rem, 3vw, 2.5rem);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

/* The title is the identity. Two stacked lines, set tight, allowed to run
   wide, with the serif italic taking the last word. */
.hats-hero__title {
	margin: 0;
	font-weight: 800;
	/* Fluid from phone to ultrawide, tuned so a 320px screen still reads it. */
	font-size: clamp(3.1rem, 13.2vw, 12.5rem);
	line-height: 0.9;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--iwmh-ink-cream);
	text-wrap: balance;
}

.hats-hero__title .hats-serif,
.hats-hero__title em {
	display: inline-block;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: -0.02em;
	/* The serif sets slightly larger so the two voices balance optically. */
	font-size: 1.08em;
	color: var(--iwmh-ink-cream);
}

.hats-hero__title .hats-gold {
	color: var(--iwmh-ink-gold);
}

.hats-hero__lower {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.hats-hero__statement {
	max-width: 30rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.hats-hero__statement p {
	margin: 0;
}

.hats-hero__roles {
	font-size: clamp(0.8rem, 0.68rem + 0.5vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--iwmh-ink-cream);
	opacity: 0.9;
}

.hats-hero__blurb {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: rgba(225, 224, 204, 0.72);
	max-width: 34ch;
}

.hats-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

.hats-hero__whisper {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
	line-height: 1.2;
	color: rgba(225, 224, 204, 0.62);
}

.hats-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.hats-hero__scroll {
	position: absolute;
	left: clamp(1.25rem, 3vw, 2.5rem);
	bottom: clamp(1.25rem, 3vw, 2rem);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(225, 224, 204, 0.5);
	text-decoration: none;
}

.hats-hero__scroll span::after {
	content: "";
	display: block;
	width: 1px;
	height: 1.6rem;
	margin-top: 0.5rem;
	background: linear-gradient(180deg, var(--iwmh-ink-gold), transparent);
}

@media (max-width: 781px) {
	.hats-hero__lower {
		flex-direction: column;
		align-items: flex-start;
	}

	.hats-hero__scroll {
		display: none;
	}

	.hats-hero__inner {
		padding-top: clamp(5.5rem, 16vh, 8rem);
	}
}

/* --------------------------------------------------------------------------
   07. Reveal & motion system
   -------------------------------------------------------------------------- */

/* Elements opt in with .hats-reveal (fade + rise) or [data-hats-pullup]
   (word-by-word pull-up). Both are driven by one IntersectionObserver. */
.hats-reveal {
	opacity: 0;
	transform: translate3d(0, 1.4rem, 0);
	transition:
		opacity var(--iwmh-t-reveal) var(--iwmh-ease-soft),
		transform var(--iwmh-t-reveal) var(--iwmh-ease);
	transition-delay: calc(var(--i, 0) * 85ms);
	will-change: transform, opacity;
}

.hats-reveal.is-in {
	opacity: 1;
	transform: none;
}

.hats-reveal--fade {
	transform: none;
}

.hats-reveal--scale {
	transform: translate3d(0, 2.25rem, 0) scale(0.975);
}

.hats-reveal--left {
	transform: translate3d(-1.75rem, 0, 0);
}

.hats-reveal--mask {
	clip-path: inset(0 0 100% 0);
	opacity: 1;
	transform: none;
	transition: clip-path var(--iwmh-t-reveal) var(--iwmh-ease);
}

.hats-reveal--mask.is-in {
	clip-path: inset(0 0 0 0);
}

/* Word pull-up. theme.js wraps each word in a clipping span; before it runs,
   the element is hidden, and a safety timer guarantees it is never lost. */
.js [data-hats-pullup] {
	opacity: 0;
}

.js [data-hats-pullup].hats-split {
	opacity: 1;
}

[data-hats-pullup] .hats-word {
	display: inline-block;
	overflow: hidden;
	/* Room for descenders so nothing is clipped by the mask. */
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
	vertical-align: bottom;
}

[data-hats-pullup] .hats-word__in {
	display: inline-block;
	transform: translate3d(0, 108%, 0);
	opacity: 0;
	transition:
		transform var(--iwmh-t-reveal) var(--iwmh-ease) calc(var(--i, 0) * 68ms),
		opacity 700ms linear calc(var(--i, 0) * 68ms);
}

[data-hats-pullup].is-in .hats-word__in,
[data-hats-pullup].hats-split.no-observer .hats-word__in {
	transform: none;
	opacity: 1;
}

/* A scroll-linked fade for long statements: the Prisma idea, in one line. */
.hats-descend {
	opacity: var(--hats-scroll-opacity, 1);
	transform: translate3d(0, var(--hats-scroll-shift, 0px), 0);
}

/* Animated letters, used only for the Becoming headline. */
.hats-letter {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, 0.4em, 0);
	transition:
		opacity 900ms linear calc(var(--i, 0) * 34ms),
		transform 900ms var(--iwmh-ease) calc(var(--i, 0) * 34ms);
}

.is-in .hats-letter {
	opacity: 1;
	transform: none;
}

/* Reading progress: a single gold hairline. */
.hats-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 120;
	transform-origin: left center;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--wp--preset--color--gold-deep), var(--wp--preset--color--gold-light));
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--iwmh-t) linear;
}

.hats-progress.is-visible {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   08. Custom cursor
   -------------------------------------------------------------------------- */

/* Desktop pointers only, and only when motion is welcome. The native cursor
   is hidden on the root, then restored for text entry and editable regions so
   selection and typing behave exactly as expected. */
.hats-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--iwmh-t) linear;
}

body.hats-cursor-active .hats-cursor {
	opacity: 1;
}

body.hats-cursor-active {
	cursor: none;
}

body.hats-cursor-active :where(input, textarea, select, [contenteditable="true"], iframe) {
	cursor: auto;
}

.hats-cursor__ring,
.hats-cursor__dot {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	will-change: transform, width, height, opacity;
}

.hats-cursor__ring {
	width: 30px;
	height: 30px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 62%, transparent);
	transition:
		width var(--iwmh-t) var(--iwmh-ease),
		height var(--iwmh-t) var(--iwmh-ease),
		border-color var(--iwmh-t) linear,
		background-color var(--iwmh-t) linear;
}

.hats-cursor__dot {
	width: 4px;
	height: 4px;
	background: var(--wp--preset--color--gold-light);
}

/* Hovering something interactive: the ring widens, the dot steps back. */
body.hats-cursor-hover .hats-cursor__ring {
	width: 54px;
	height: 54px;
	border-color: color-mix(in srgb, var(--wp--preset--color--gold-light) 88%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--gold) 9%, transparent);
}

body.hats-cursor-hover .hats-cursor__dot {
	opacity: 0;
}

body.hats-cursor-down .hats-cursor__ring {
	width: 22px;
	height: 22px;
}

.hats-cursor__label {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
	white-space: nowrap;
	opacity: 0;
	transition: opacity var(--iwmh-t) var(--iwmh-ease-soft);
}

body.hats-cursor-hover .hats-cursor__label {
	opacity: 1;
}

@media (hover: none), (pointer: coarse) {
	.hats-cursor {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   09. Section components
   -------------------------------------------------------------------------- */

/* Generic editorial section rhythm. Sections are separated by space and a
   hairline rather than by alternating background colours. */
.hats-section {
	position: relative;
	padding-block: clamp(4rem, 2rem + 9vw, 10rem);
}

.hats-section--tight {
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

.hats-section--hairline {
	border-top: var(--iwmh-hair);
}

.hats-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem 2.5rem;
	margin-bottom: clamp(2rem, 1rem + 3.5vw, 4rem);
}

.hats-section__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.2rem + 3.2vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	max-width: 22ch;
}

/* --- The large animated statement ----------------------------------------- */

.hats-statement {
	font-size: clamp(1.9rem, 1.05rem + 4.6vw, 5.75rem);
	line-height: 1.06;
	letter-spacing: -0.042em;
	font-weight: 800;
	text-wrap: balance;
	margin: 0 auto;
	max-width: 20ch;
	text-align: center;
}

.hats-statement .hats-serif,
.hats-statement em {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--cream);
}

.hats-statement--left {
	text-align: left;
	margin-inline: 0;
	max-width: 24ch;
}

/* --- Many hats: an editorial grid of artefacts ----------------------------- */

.hats-hats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 0;
	border-top: var(--iwmh-hair);
}

.hats-hat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	min-height: clamp(14rem, 22vw, 19rem);
	border-bottom: var(--iwmh-hair);
	border-right: var(--iwmh-hair);
	overflow: hidden;
	isolation: isolate;
	transition: background-color var(--iwmh-t) var(--iwmh-ease-soft);
}

/* The grid's outer edge is trimmed so it reads as a ruled page, not a table. */
.hats-hat:last-child,
.hats-hats-grid > .hats-hat:nth-child(6n) {
	border-right: 0;
}

.hats-hat:hover,
.hats-hat:focus-within {
	background: color-mix(in srgb, var(--wp--preset--color--gold) 5%, transparent);
}

/* The image is a whisper behind the type: it arrives on hover, or stays
   quietly visible on touch devices where hover cannot be relied on. */
.hats-hat__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transform: scale(1.06);
	transition:
		opacity var(--iwmh-t-slow) var(--iwmh-ease-soft),
		transform var(--iwmh-t-slow) var(--iwmh-ease);
}

.hats-hat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hats-hat:hover .hats-hat__media,
.hats-hat:focus-within .hats-hat__media {
	opacity: 0.24;
	transform: scale(1);
}

.hats-hat__index {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-hat__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
}

.hats-hat__title .hats-serif {
	display: block;
	font-size: 0.72em;
	color: var(--wp--preset--color--muted);
	margin-top: 0.35rem;
}

.hats-hat__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 30ch;
}

.hats-hat__foot {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* The gold rule that draws itself under the hat on approach. */
.hats-hat__rule {
	position: absolute;
	left: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	right: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--iwmh-t-slow) var(--iwmh-ease);
}

.hats-hat:hover .hats-hat__rule,
.hats-hat:focus-within .hats-hat__rule {
	transform: scaleX(1);
}

.hats-hat a.hats-hat__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-decoration: none;
	color: inherit;
}

@media (hover: none) {
	/* Touch gets the image and the rule permanently, at low strength. */
	.hats-hat__media {
		opacity: 0.14;
		transform: none;
	}

	.hats-hat__rule {
		transform: scaleX(1);
		opacity: 0.4;
	}
}

/* --- Books: treated as physical objects ------------------------------------ */

.hats-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

.hats-book {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Perspective is applied to the wrapper so the cover can tilt without the
   metadata moving with it. */
.hats-book__cover {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: 3px 8px 8px 3px;
	overflow: hidden;
	background: var(--wp--preset--color--base-2);
	transform: perspective(1400px) rotateY(0deg) translateY(0);
	transform-style: preserve-3d;
	box-shadow:
		var(--iwmh-shadow-lift),
		-1px 0 0 0 color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent) inset;
	transition:
		transform var(--iwmh-t-slow) var(--iwmh-ease),
		box-shadow var(--iwmh-t-slow) var(--iwmh-ease);
}

.hats-book__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The spine: a hairline of shadow down the binding edge. */
.hats-book__cover::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 8%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--black) 42%, transparent),
		transparent
	);
}

/* A restrained specular pass, so the cover reads as printed and matte. */
.hats-book__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 48%, transparent 66%);
	transition: opacity var(--iwmh-t-slow) var(--iwmh-ease-soft);
}

.hats-book:hover .hats-book__cover,
.hats-book:focus-within .hats-book__cover {
	transform: perspective(1400px) rotateY(-6deg) translateY(-10px);
	box-shadow:
		var(--iwmh-shadow-plate),
		-1px 0 0 0 color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent) inset;
}

.hats-book:hover .hats-book__cover::after,
.hats-book:focus-within .hats-book__cover::after {
	opacity: 1;
}

.hats-book__badge {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 3;
	padding: 0.3rem 0.6rem;
	border-radius: var(--iwmh-r-pill);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--gold-light);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hats-book__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.hats-book__subtitle {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--muted);
}

.hats-book__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-book__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

.hats-book__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	transition: gap var(--iwmh-t) var(--iwmh-ease);
}

.hats-book__more:hover,
.hats-book__more:focus-visible {
	gap: 0.85rem;
}

/* --- Projects: numbered artefacts ------------------------------------------ */

.hats-workshop {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: var(--iwmh-hair);
}

.hats-project {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem);
	border-bottom: var(--iwmh-hair);
	align-items: center;
}

@media (min-width: 900px) {
	.hats-project {
		grid-template-columns: 4.5rem minmax(0, 1.35fr) minmax(0, 1fr) auto;
	}

	/* Alternate the image side so the eye never settles into a list. */
	.hats-project:nth-child(even) .hats-project__media {
		order: -1;
	}
}

.hats-project__num {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--gold);
	align-self: start;
}

.hats-project__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.1rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
}

.hats-project__title a {
	text-decoration: none;
	color: inherit;
	background-image: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold));
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: 0 88%;
	transition: background-size var(--iwmh-t-slow) var(--iwmh-ease);
}

.hats-project:hover .hats-project__title a,
.hats-project:focus-within .hats-project__title a {
	background-size: 100% 1px;
}

.hats-project__body {
	margin: 0.85rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.hats-project__tools {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-project__media {
	position: relative;
	border-radius: var(--iwmh-r-md);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--base-2);
}

.hats-project__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform var(--iwmh-t-slow) var(--iwmh-ease);
}

.hats-project:hover .hats-project__media img {
	transform: scale(1.07);
}

.hats-project__year {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
	align-self: start;
}

/* --- Writing: an asymmetric magazine grid ---------------------------------- */

.hats-writing {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 2.5vw, 3rem);
}

.hats-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	grid-column: span 12;
}

/* One lead piece runs wide; the rest settle into a column rhythm. Controlled
   asymmetry: the grid is regular, the emphasis is not. */
.hats-post--lead {
	grid-column: span 12;
}

@media (min-width: 782px) {
	.hats-post {
		grid-column: span 6;
	}

	.hats-post--lead {
		grid-column: span 12;
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		align-items: center;
	}

	.hats-post--tall {
		grid-column: span 5;
	}

	.hats-post--narrow {
		grid-column: span 7;
	}
}

@media (min-width: 1100px) {
	.hats-post {
		grid-column: span 4;
	}

	.hats-post--lead {
		grid-column: span 12;
	}

	.hats-post--tall {
		grid-column: span 7;
	}

	.hats-post--narrow {
		grid-column: span 5;
	}
}

.hats-post__media {
	position: relative;
	border-radius: var(--iwmh-r-md);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--base-2);
}

.hats-post--lead .hats-post__media {
	aspect-ratio: 16 / 11;
	border-radius: var(--iwmh-r-lg);
}

.hats-post--tall .hats-post__media {
	aspect-ratio: 4 / 5;
}

.hats-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--iwmh-t-slow) var(--iwmh-ease);
}

.hats-post:hover .hats-post__media img,
.hats-post:focus-within .hats-post__media img {
	transform: scale(1.05);
}

.hats-post__title {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.06;
	font-size: var(--wp--preset--font-size--large);
}

.hats-post--lead .hats-post__title {
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem);
}

.hats-post__title a {
	text-decoration: none;
	color: inherit;
}

.hats-post__title a:hover,
.hats-post__title a:focus-visible {
	color: var(--wp--preset--color--gold-light);
}

.hats-post__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

.hats-post__excerpt p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   10. Becoming, place, quiet sections
   -------------------------------------------------------------------------- */

/* Becoming: the emotional centre. Ink ground, enormous type, slow reveal. */
.hats-becoming {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--iwmh-ink);
	color: var(--iwmh-ink-cream);
	padding-block: clamp(5rem, 3rem + 14vw, 15rem);
}

.hats-becoming__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(70% 55% at 50% 118%, rgba(201, 169, 106, 0.22), transparent 68%),
		radial-gradient(60% 50% at 12% -10%, rgba(201, 169, 106, 0.1), transparent 62%);
}

.hats-becoming__word {
	margin: 0;
	font-size: clamp(3rem, 2rem + 15vw, 17rem);
	font-weight: 800;
	line-height: 0.84;
	letter-spacing: -0.055em;
	text-transform: uppercase;
	color: var(--iwmh-ink-cream);
	text-wrap: balance;
}

.hats-becoming__sub {
	margin: clamp(1rem, 2vw, 1.75rem) 0 0;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: clamp(1.4rem, 0.9rem + 3vw, 4rem);
	line-height: 1.1;
	color: rgba(225, 224, 204, 0.66);
}

.hats-becoming__body {
	margin: clamp(2rem, 4vw, 3.5rem) 0 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.8;
	color: rgba(225, 224, 204, 0.72);
}

/* Place: Manila as atmosphere. A split of photograph and marginalia. */
.hats-place {
	display: grid;
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.hats-place {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

.hats-place__media {
	position: relative;
	border-radius: var(--iwmh-r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--base-2);
}

.hats-place__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A marginal caption set outside the frame, like a plate number in a book. */
.hats-place__caption {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-place__note {
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: var(--iwmh-hair-gold);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	color: var(--wp--preset--color--muted);
}

/* Quiet: the giving section. Space is the design. */
.hats-quiet {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.hats-quiet__statement {
	margin: 0;
	font-size: clamp(1.75rem, 1.1rem + 3.6vw, 4.25rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.hats-quiet__statement em,
.hats-quiet__statement .hats-serif {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--gold-light);
}

.hats-quiet__body {
	margin: clamp(1.75rem, 3vw, 2.75rem) auto 0;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.85;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

.hats-quiet__mark {
	width: 1px;
	height: clamp(2.5rem, 6vw, 5rem);
	margin: clamp(2rem, 4vw, 3rem) auto;
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--gold), transparent);
}

/* Image/text split, used for the editorial introduction. */
.hats-split {
	display: grid;
	gap: clamp(1.75rem, 4vw, 4.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.hats-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.hats-split--reverse .hats-split__media {
		order: 2;
	}

	.hats-split--wide-text {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	}
}

.hats-split__media {
	position: relative;
	border-radius: var(--iwmh-r-lg);
	overflow: hidden;
	background: var(--wp--preset--color--base-2);
	aspect-ratio: 4 / 3;
}

.hats-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A mounted plate: the Prisma treatment, as a reusable image style. */
.is-style-plate img,
.wp-block-image.is-style-plate img {
	border-radius: var(--iwmh-r-lg);
}

.is-style-plate,
.wp-block-image.is-style-plate {
	position: relative;
}

.is-style-plate figcaption {
	margin-top: 0.85rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
	text-align: left;
}

/* --------------------------------------------------------------------------
   11. Article reading experience
   -------------------------------------------------------------------------- */

/* The reading column is narrow on purpose: 66–72 characters, generous
   leading, and no furniture competing with the text. */
.hats-reading {
	max-width: var(--wp--style--global--content-size, 44rem);
	margin-inline: auto;
}

.hats-reading > * + * {
	margin-block-start: 1.5em;
}

.hats-reading p {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.82;
	text-wrap: pretty;
}

.hats-reading > p:first-of-type {
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.375rem);
	line-height: 1.7;
	color: var(--wp--preset--color--cream);
}

.hats-reading h2 {
	margin-block-start: 2.6em;
	margin-block-end: 0.7em;
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.35rem);
	letter-spacing: -0.03em;
}

.hats-reading h3 {
	margin-block-start: 2.2em;
	margin-block-end: 0.6em;
}

.hats-reading blockquote {
	margin-block: 2.5em;
	padding-left: clamp(1.25rem, 3vw, 2.25rem);
	border-left: var(--iwmh-hair-gold);
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.1rem);
	line-height: 1.35;
	color: var(--wp--preset--color--cream);
}

.hats-reading blockquote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--almarai);
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-reading :where(figure, .wp-block-image) {
	margin-block: 2.5em;
}

.hats-reading :where(figcaption, .wp-element-caption) {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted-2);
}

.hats-reading :where(ul, ol) {
	padding-left: 1.35em;
}

.hats-reading li + li {
	margin-top: 0.6em;
}

.hats-reading :where(a) {
	text-decoration-color: var(--wp--preset--color--gold-deep);
	text-underline-offset: 0.22em;
}

.hats-reading :where(a):hover {
	text-decoration-color: var(--wp--preset--color--gold);
}

.hats-reading .wp-block-pullquote {
	margin-block: 3em;
	border: 0;
	padding: 0;
	text-align: left;
}

.hats-reading .wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
}

.hats-reading hr,
.hats-reading .wp-block-separator {
	margin-block: 3em;
}

/* Article header: title first, then a single quiet meta line. */
.hats-article__header {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hats-article__title {
	margin: 0;
	font-size: clamp(2.1rem, 1.3rem + 4.2vw, 5.5rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.hats-article__standfirst {
	margin: 0;
	max-width: 40ch;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: clamp(1.2rem, 1rem + 1.1vw, 1.85rem);
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.hats-article__hero {
	position: relative;
	margin-block: clamp(2rem, 4vw, 3.5rem);
	border-radius: var(--iwmh-r-lg);
	overflow: hidden;
}

.hats-article__hero img {
	width: 100%;
	height: auto;
}

.hats-article__hero figcaption {
	margin-top: 0.85rem;
}

/* Previous / next: two quiet columns, no boxes. */
.hats-adjacent {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	border-top: var(--iwmh-hair);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 700px) {
	.hats-adjacent {
		grid-template-columns: 1fr 1fr;
	}

	.hats-adjacent__next {
		text-align: right;
	}
}

.hats-adjacent__label {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.hats-adjacent__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.hats-adjacent__title a {
	text-decoration: none;
	color: inherit;
}

.hats-adjacent__title a:hover {
	color: var(--wp--preset--color--gold-light);
}

/* --------------------------------------------------------------------------
   12. Forms, comments, search, 404
   -------------------------------------------------------------------------- */

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.wp-block-search__input {
	width: 100%;
	padding: 0.85rem 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--iwmh-r-md);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition:
		border-color var(--iwmh-t) var(--iwmh-ease-soft),
		background-color var(--iwmh-t) var(--iwmh-ease-soft);
}

input:focus,
textarea:focus,
select:focus {
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 60%, transparent);
	background: var(--wp--preset--color--surface);
	outline: none;
}

::placeholder {
	color: var(--wp--preset--color--muted-2);
	opacity: 1;
}

/* Search: an editorial opening rather than a toolbar. */
.hats-search__form .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	gap: 0.75rem;
	display: flex;
	flex-wrap: wrap;
}

.hats-search__form .wp-block-search__input {
	font-size: clamp(1.1rem, 1rem + 0.9vw, 1.7rem);
	padding: 1rem 1.15rem;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	flex: 1 1 16rem;
}

.hats-search__form .wp-block-search__input:focus {
	border-bottom-color: var(--wp--preset--color--gold);
	background: transparent;
}

.hats-search__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-search__count strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.hats-results {
	display: flex;
	flex-direction: column;
	border-top: var(--iwmh-hair);
}

.hats-result {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
	border-bottom: var(--iwmh-hair);
}

@media (min-width: 782px) {
	.hats-result {
		grid-template-columns: 11rem minmax(0, 1fr);
		align-items: start;
	}
}

.hats-result__media {
	border-radius: var(--iwmh-r-sm);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--base-2);
}

.hats-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hats-result__title {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.12;
}

.hats-result__title a {
	text-decoration: none;
	color: inherit;
}

.hats-result__title a:hover {
	color: var(--wp--preset--color--gold-light);
}

.hats-result__excerpt {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* Comments: plain, legible, quiet. */
.hats-comments .wp-block-comment-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.hats-comments .wp-block-comment-template li {
	list-style: none;
}

.hats-comments .wp-block-comment-template > li {
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: var(--iwmh-hair);
}

.hats-comments .wp-block-comment-template .children,
.hats-comments .wp-block-comment-template .wp-block-comment-template {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	padding-left: clamp(0.75rem, 2.5vw, 2rem);
	border-left: var(--iwmh-hair);
}

.hats-comments .wp-block-avatar img {
	border-radius: 50%;
}

.hats-comments .wp-block-comment-author-name {
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hats-comments .wp-block-comment-date,
.hats-comments .wp-block-comment-edit-link {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-comments .wp-block-comment-reply-link a {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* 404: part of the same world, not a system message. */
.hats-404 {
	min-height: min(78svh, 780px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.hats-404__code {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.hats-404__title {
	margin: 0;
	font-size: clamp(2.4rem, 1.4rem + 6.5vw, 8rem);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.05em;
	text-wrap: balance;
}

.hats-404__title em {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.hats-footer {
	position: relative;
	border-top: var(--iwmh-hair);
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.hats-footer__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 782px) {
	.hats-footer__grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
	}

	.hats-footer__closing {
		text-align: right;
	}
}

.hats-footer__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
}

.hats-footer__title .hats-serif {
	display: inline;
	text-transform: none;
	font-size: 1.06em;
	color: var(--wp--preset--color--muted);
}

.hats-footer__note {
	margin: 0.85rem 0 0;
	max-width: 32ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

.hats-footer__label {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-footer nav ul,
.hats-footer .wp-block-navigation__container {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	align-items: flex-start;
}

.hats-footer__closing nav ul,
.hats-footer__closing .wp-block-navigation__container {
	align-items: flex-start;
}

@media (min-width: 782px) {
	.hats-footer__closing nav ul,
	.hats-footer__closing .wp-block-navigation__container {
		align-items: flex-end;
	}
}

.hats-footer a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: color var(--iwmh-t) var(--iwmh-ease-soft);
}

.hats-footer a:hover,
.hats-footer a:focus-visible {
	color: var(--wp--preset--color--gold);
}

.hats-footer__closing-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
	line-height: 1.15;
	color: var(--wp--preset--color--cream);
}

.hats-footer__rule {
	margin-block: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2.5vw, 2rem);
}

.hats-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-footer__legal p {
	margin: 0;
}

/* A small visual detail: three gold seeds, one per discipline, as a mark. */
.hats-footer__seeds {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hats-footer__seeds span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	opacity: 0.35;
	transition: opacity var(--iwmh-t) var(--iwmh-ease-soft);
}

.hats-footer:hover .hats-footer__seeds span {
	opacity: 1;
}

.hats-footer:hover .hats-footer__seeds span:nth-child(2) {
	transition-delay: 80ms;
}

.hats-footer:hover .hats-footer__seeds span:nth-child(3) {
	transition-delay: 160ms;
}

/* --------------------------------------------------------------------------
   14. Block style variations
   -------------------------------------------------------------------------- */

/* Elevated plate: a card that reads as a surface, not a bubble. */
.is-style-plate {
	background: var(--wp--preset--color--surface);
	border: var(--iwmh-hair);
	border-radius: var(--iwmh-r-lg);
	box-shadow: var(--iwmh-shadow-lift);
}

/* Hairline frame: structure without weight. */
.is-style-hairline {
	border: var(--iwmh-hair);
	border-radius: var(--iwmh-r-md);
}

/* Ledger: the ruled-page treatment used for lists and metadata. */
.is-style-ledger {
	border-top: var(--iwmh-hair);
}

.is-style-ledger > * {
	padding-block: clamp(0.9rem, 2vw, 1.35rem);
	border-bottom: var(--iwmh-hair);
}

/* Chapter: a numbered section opener. */
.is-style-chapter {
	position: relative;
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.is-style-chapter::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.75rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
}

/* Quiet: reduces a group to type and space. */
.is-style-quiet {
	background: none;
	border: 0;
	box-shadow: none;
}

/* Inverted ink: a dark passage inside a light page, and vice versa. Always
   cinematic ink, in both colour modes, so the hero and the Becoming section
   keep their atmosphere. */
.is-style-invert {
	background: var(--iwmh-ink);
	color: var(--iwmh-ink-cream);
	border-radius: var(--iwmh-r-lg);
}

.is-style-invert :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption) {
	color: inherit;
}

.is-style-invert :where(.hats-eyebrow, .wp-block-post-terms) {
	color: var(--iwmh-ink-gold);
}

/* Statement quote: the literary voice, set large, no chrome. */
.wp-block-quote.is-style-statement {
	border: 0;
	padding: 0;
	margin-block: clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}

.wp-block-quote.is-style-statement p {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: clamp(1.5rem, 1.1rem + 2.4vw, 3.25rem);
	line-height: 1.22;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.wp-block-quote.is-style-statement cite {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--almarai);
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

/* Hat card: used for the Many Hats grid items. */
.is-style-hat-card {
	position: relative;
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	border: var(--iwmh-hair);
	border-radius: var(--iwmh-r-md);
	background: var(--wp--preset--color--base-2);
	transition:
		background-color var(--iwmh-t) var(--iwmh-ease-soft),
		border-color var(--iwmh-t) var(--iwmh-ease-soft);
}

.is-style-hat-card:hover,
.is-style-hat-card:focus-within {
	background: var(--wp--preset--color--surface);
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent);
}

/* Pagination: the WordPress numbers, dressed quietly. */
.wp-block-query-pagination {
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: var(--iwmh-r-pill);
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition:
		background-color var(--iwmh-t) var(--iwmh-ease-soft),
		color var(--iwmh-t) var(--iwmh-ease-soft);
}

.wp-block-query-pagination-numbers .page-numbers:hover {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--gold-light);
}

/* Core details / summary, used in the readme-ish blocks and FAQs. */
details {
	border-bottom: var(--iwmh-hair);
	padding-block: 1rem;
}

summary {
	cursor: pointer;
	font-weight: 700;
	letter-spacing: -0.01em;
}

summary::marker {
	color: var(--wp--preset--color--gold);
}

/* --------------------------------------------------------------------------
   15. Motion & print guards
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* Content must be fully visible with motion off — never hidden behind an
	   animation that will not run. */
	.hats-reveal,
	.js [data-hats-pullup] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	[data-hats-pullup] .hats-word__in {
		transform: none !important;
		opacity: 1 !important;
	}

	.hats-letter {
		opacity: 1 !important;
		transform: none !important;
	}

	.hats-hero__frame :where(img, video) {
		animation: none !important;
		transform: scale(1.02) !important;
	}

	.hats-cursor {
		display: none !important;
	}

	body.hats-cursor-active {
		cursor: auto;
	}

	.hats-progress {
		display: none;
	}
}

@media print {
	.hats-header,
	.hats-footer,
	.hats-cursor,
	.hats-progress,
	.hats-noise::after,
	.hats-grain::after {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.hats-reading {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   16. Single work (book) & author
   -------------------------------------------------------------------------- */

/* A book's own page: the cover sits in a mount, the writing keeps its
   measure. No tilt here — the object is being examined, not offered. */
.hats-book-single {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 900px) {
	.hats-book-single {
		grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
		align-items: start;
	}
}

.hats-book-single__plate {
	position: relative;
}

.hats-book-single__plate .hats-book__cover,
.hats-book__cover--static {
	aspect-ratio: 2 / 3;
	border-radius: 3px 8px 8px 3px;
	overflow: hidden;
	box-shadow: var(--iwmh-shadow-plate);
	margin: 0;
}

.hats-book-single__plate .hats-book__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Author archive: a portrait that behaves like a plate, not an avatar chip. */
.hats-author__avatar img {
	border-radius: 50%;
}

.hats-article__foot {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Work meta sits under a book or project title, in the smallest voice. */
.hats-meta--work {
	color: var(--wp--preset--color--muted-2);
}

/* ==========================================================================
   17. Keyword marquee — the infinite ranking ribbon
   ========================================================================== */

.hats-marquee {
	position: relative;
	overflow: hidden;
	padding: clamp(1.15rem, 2.2vw, 1.7rem) 0;
	border-top: var(--iwmh-hair);
	border-bottom: var(--iwmh-hair);
}

.hats-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	will-change: transform;
	animation: hats-marquee-scroll 48s linear infinite;
}

/* Hover pauses the ribbon so a word can actually be read. */
.hats-marquee:hover .hats-marquee__track {
	animation-play-state: paused;
}

.hats-marquee__word {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: clamp(1.05rem, 0.9rem + 1vw, 1.6rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
}

.hats-marquee__word::after {
	content: "✳";
	margin-left: clamp(1.5rem, 3vw, 3rem);
	font-size: 0.55em;
	color: var(--wp--preset--color--gold);
	opacity: 0.75;
}

@keyframes hats-marquee-scroll {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hats-marquee__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.75rem;
	}
}

/* ==========================================================================
   18. Showreel — the studio plates
   ========================================================================== */

.hats-showreel {
	display: grid;
	gap: clamp(0.9rem, 1.2vw, 1.4rem);
}

.hats-showreel__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--iwmh-r-lg);
	padding: clamp(1.25rem, 2vw, 1.75rem);
	overflow: hidden;
}

.hats-showreel__card--media {
	justify-content: flex-end;
	min-height: 22rem;
	padding: 1.25rem;
}

.hats-showreel__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.hats-showreel__video[data-hats-video-blocked="true"] {
	display: none;
}

.hats-showreel__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 8, 8, 0.08) 30%, rgba(8, 8, 8, 0.74) 100%);
	pointer-events: none;
}

.hats-showreel__caption {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--iwmh-ink-cream);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
}

.hats-showreel__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 12px;
	object-fit: cover;
}

.hats-showreel__num {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.hats-showreel__title {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
	color: var(--wp--preset--color--contrast);
}

.hats-showreel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.hats-showreel__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.hats-check {
	width: 1rem;
	height: 1rem;
	flex: none;
	margin-top: 0.18em;
	color: var(--wp--preset--color--gold-light);
}

.hats-showreel__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hats-showreel__more:hover,
.hats-showreel__more:focus-visible {
	color: var(--wp--preset--color--gold-light);
}

@media (min-width: 782px) {
	.hats-showreel {
		grid-template-columns: repeat(2, 1fr);
	}

	.hats-showreel__card {
		min-height: 26rem;
	}
}

@media (min-width: 1200px) {
	.hats-showreel {
		grid-template-columns: repeat(4, 1fr);
	}

	.hats-showreel__card {
		min-height: 30rem;
	}
}

/* ==========================================================================
   19. Parallax layers
   ========================================================================== */

html.js .hats-parallax img {
	will-change: transform;
	transition: none;
}

html:not(.js) .hats-parallax img,
body.hats-is-touch .hats-parallax img {
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.hats-parallax img {
		transform: none !important;
	}
}

/* ==========================================================================
   20. Blog grids — every Query Loop renders as a core post list. The theme
        grid now styles the list itself, so core's own column layout can
        no longer fight the asymmetric magazine grid.
   ========================================================================== */

ul.wp-block-post-template.hats-writing,
ul.wp-block-post-template.hats-shelf,
ul.wp-block-post-template.hats-workshop,
ul.wp-block-post-template.hats-results {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.wp-block-post-template.hats-writing > li.wp-block-post,
ul.wp-block-post-template.hats-shelf > li.wp-block-post,
ul.wp-block-post-template.hats-workshop > li.wp-block-post,
ul.wp-block-post-template.hats-results > li.wp-block-post {
	margin: 0;
	width: 100%;
	min-width: 0;
}

ul.wp-block-post-template.hats-writing {
	display: flex !important;
	flex-direction: column;
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem) !important;
	grid-template-columns: none !important;
}

ul.wp-block-post-template.hats-workshop,
ul.wp-block-post-template.hats-results {
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	border-top: var(--iwmh-hair);
}

ul.wp-block-post-template.hats-shelf {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)) !important;
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem) !important;
	align-items: start;
}

@media (min-width: 782px) {
	ul.wp-block-post-template.hats-writing {
		display: grid !important;
		grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
		gap: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 2.5vw, 3rem) !important;
	}

	/* The lead piece runs the full width; the rest settle into a 3-up rhythm. */
	ul.wp-block-post-template.hats-writing > li.wp-block-post {
		grid-column: span 4 !important;
	}

	ul.wp-block-post-template.hats-writing > li.wp-block-post:first-child {
		grid-column: span 12 !important;
	}

	ul.wp-block-post-template.hats-writing > li.wp-block-post:first-child .hats-post {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		align-items: center;
	}

	ul.wp-block-post-template.hats-writing > li.wp-block-post:first-child .hats-post__media {
		aspect-ratio: 16 / 11;
		border-radius: var(--iwmh-r-lg);
	}

	ul.wp-block-post-template.hats-writing > li.wp-block-post:first-child .hats-post__title {
		font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem);
	}
}

/* ==========================================================================
   21. Prose — long-form content, galleries, columns, captions
   ========================================================================== */

.hats-reading > * {
	margin-block: 0;
}

.hats-reading > * + * {
	margin-top: 1.4em;
}

.hats-reading p {
	line-height: 1.85;
}

.hats-reading h2,
.hats-reading h3,
.hats-reading h4 {
	margin-top: 2.2em;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.hats-reading ul,
.hats-reading ol {
	padding-left: 1.35em;
}

.hats-reading li {
	margin-block: 0.35em;
}

.hats-reading figure {
	margin: 2.5em 0;
}

.hats-reading figure img,
.hats-reading img {
	border-radius: var(--iwmh-r-md);
}

.hats-reading figcaption,
.wp-element-caption {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted-2);
}

.wp-block-gallery {
	gap: 0.75rem;
}

.wp-block-gallery .blocks-gallery-item img {
	border-radius: var(--iwmh-r-md);
}

.hats-reading table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.hats-reading th,
.hats-reading td {
	padding: 0.7em 0.9em;
	border: var(--iwmh-hair);
	text-align: left;
}

.hats-reading code {
	font-size: 0.9em;
	background: var(--wp--preset--color--surface-2);
	border-radius: 6px;
	padding: 0.15em 0.4em;
}

.hats-reading pre {
	overflow-x: auto;
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--iwmh-r-md);
	padding: 1.25rem;
}

/* ==========================================================================
   22. Footer — keyword line, credit, widgets
   ========================================================================== */

.hats-footer__keywords {
	margin: 0.85rem 0 0;
	max-width: 34rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.65;
	color: var(--wp--preset--color--muted-2);
}

.hats-footer__credit {
	margin: 0;
}

.hats-footer__credit a {
	color: var(--wp--preset--color--muted-2);
	text-decoration: none;
	border-bottom: 1px solid var(--iwmh-ink-line);
	transition: color var(--iwmh-t) var(--iwmh-ease), border-color var(--iwmh-t) var(--iwmh-ease);
}

.hats-footer__credit a:hover,
.hats-footer__credit a:focus-visible {
	color: var(--wp--preset--color--gold-light);
	border-color: currentColor;
}

.hats-widgets {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.hats-widget {
	flex: 1 1 16rem;
	min-width: 0;
}

.hats-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ==========================================================================
   23. Hero video layer — footage above the poster, never below it
   ========================================================================== */

.hats-hero__poster {
	z-index: 0;
}

.hats-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.hats-hero__video[data-hats-video-blocked="true"] {
	display: none;
}