/* Little Ugly Darlings — theme styles that theme.json can't express.
   Colours and fonts come from the active style (Appearance → Editor → Styles), so every rule here
   works in all five looks. */

:root {
	--lud-accent: var(--wp--preset--color--accent);
	--lud-line: color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	--lud-glow: var(--wp--custom--glow);
}

::selection { background: var(--lud-accent); color: var(--wp--preset--color--base); }

body { -webkit-font-smoothing: antialiased; color-scheme: dark; }

/* Film grain over everything — makes flat black feel like a darkroom, not a screen. */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 9999;
	pointer-events: none;
	opacity: calc(var(--wp--custom--grain, .07) * 5);
	mix-blend-mode: overlay; /* grain shows on photos and glow, true black stays black */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Glowing letters                                                    */
/* ------------------------------------------------------------------ */
h1, h2,
.wp-block-site-title,
.is-style-glow,
.is-style-flicker { text-shadow: var(--lud-glow); }

.is-style-flicker { animation: lud-neon-on 1.9s steps(1, end) .35s both; }

@keyframes lud-neon-on {
	0%   { opacity: .08; text-shadow: none; }
	12%  { opacity: 1;   text-shadow: var(--lud-glow); }
	16%  { opacity: .15; text-shadow: none; }
	30%  { opacity: 1;   text-shadow: var(--lud-glow); }
	33%  { opacity: .35; text-shadow: none; }
	36%  { opacity: 1;   text-shadow: var(--lud-glow); }
	100% { opacity: 1;   text-shadow: var(--lud-glow); }
}

/* ------------------------------------------------------------------ */
/* Logo                                                               */
/* ------------------------------------------------------------------ */
.wp-block-site-logo img,
.lud-hero-logo img { border-radius: 50%; }

.wp-block-site-logo.is-style-halo img,
.lud-hero-logo.is-style-halo img { box-shadow: var(--wp--custom--halo); }

/* Black ink on white paper becomes glowing lines on black: invert, then multiply by the style's colour.
   Works with any accent, so every style variation tints the drawing to match. */
.is-style-neon-ink img { filter: invert(1) grayscale(1) contrast(1.3); }
.wp-block-site-logo.is-style-neon-ink a,
figure.is-style-neon-ink {
	position: relative;
	display: inline-block;
	line-height: 0;
	border-radius: 50%;
	isolation: isolate;
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--wp--custom--logo-tint) 65%, transparent));
}
.wp-block-site-logo.is-style-neon-ink a::after,
figure.is-style-neon-ink::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--custom--logo-tint);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.lud-hero-logo img { animation: lud-wake 2.4s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes lud-wake {
	from { opacity: 0; transform: scale(.94) rotate(-6deg); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Header & footer                                                    */
/* ------------------------------------------------------------------ */
.lud-header { border-bottom: 1px solid var(--lud-line); }
.lud-header .wp-block-navigation a:hover,
.lud-header .wp-block-navigation a:focus-visible,
.lud-header .wp-block-navigation .current-menu-item > a { color: var(--lud-accent); text-shadow: var(--lud-glow); }
.lud-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); }
.lud-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--wp--preset--font-family--display); font-size: 2.4rem; font-weight: 400; }

.lud-footer { border-top: 1px solid var(--lud-line); }
.lud-footer h2 { text-shadow: none; }
.lud-footer a { text-decoration: none; }
.lud-footer a:hover { text-decoration: underline; }
.lud-footer .wp-block-social-links .wp-social-link { color: var(--wp--preset--color--contrast); }
.lud-footer .wp-block-social-links .wp-social-link:hover { color: var(--lud-accent); }

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */
.lud-hero { position: relative; isolation: isolate; }
.lud-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%; top: 2rem;
	width: min(720px, 110vw); aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--lud-accent) 16%, transparent), transparent 70%);
	pointer-events: none;
}
.lud-hero h1 { font-size: var(--wp--preset--font-size--monster); line-height: .85; margin-block: 0; }
.lud-hero .lud-lede { max-width: 34ch; margin-inline: auto; }

.lud-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.45; color: var(--wp--preset--color--contrast); }

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.wp-block-button__link { transition: box-shadow .2s, background-color .2s, color .2s; }
.wp-block-button:not(.is-style-ghost) .wp-block-button__link:hover { box-shadow: 0 0 28px color-mix(in srgb, var(--lud-accent) 55%, transparent); }
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--lud-line);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 1px var(--lud-accent); color: var(--lud-accent); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--lud-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* The menagerie: photos with a toe tag hanging under each            */
/* ------------------------------------------------------------------ */
.lud-menagerie .wp-block-post-template { row-gap: clamp(2.5rem, 6vw, 4.5rem) !important; }
.lud-menagerie .wp-block-post-template > li { position: relative; }

.lud-menagerie .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	aspect-ratio: 4 / 5;
}
.lud-menagerie .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.lud-menagerie li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.lud-menagerie li:not(:has(.wp-block-post-featured-image))::before {
	content: "Photo coming";
	display: grid; place-items: center;
	aspect-ratio: 4 / 5;
	border: 1px dashed var(--lud-line);
	border-radius: 6px;
	color: var(--wp--preset--color--muted);
}

/* The tag itself */
.is-style-toe-tag,
.lud-menagerie .lud-tag {
	position: relative;
	width: fit-content;
	max-width: 90%;
	margin: -1.6rem 0 0 1.2rem !important;
	padding: .55rem 1rem .6rem 1.9rem !important;
	background: var(--wp--preset--color--tag);
	color: var(--wp--preset--color--tag-ink);
	border-radius: 3px 14px 14px 3px;
	transform: rotate(var(--wp--custom--tag-tilt, -2.5deg));
	transform-origin: left center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
	clip-path: polygon(0 18%, 10px 0, 100% 0, 100% 100%, 10px 100%, 0 82%);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.lud-menagerie li:nth-child(even) .lud-tag { transform: rotate(calc(var(--wp--custom--tag-tilt, -2.5deg) * -0.7)); }
.lud-menagerie li:hover .lud-tag { transform: rotate(0deg); }
/* the eyelet */
.is-style-toe-tag::before,
.lud-menagerie .lud-tag::before {
	content: "";
	position: absolute;
	left: .65rem; top: 50%;
	width: .55rem; height: .55rem;
	margin-top: -.275rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--tag-ink) 35%, transparent);
}
.lud-tag .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.55rem;
	line-height: 1;
	margin: 0;
	text-shadow: none;
	color: inherit;
}
.lud-tag .wp-block-post-title a { color: inherit; }
.lud-tag .wp-block-post-title a::after { content: ""; position: absolute; inset: -100vh 0 0 0; } /* whole card is the link */
.lud-tag .lud-price { margin: .1rem 0 0; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }

/* Adopted / reserved stamps */
.lud-status-adopted .wp-block-post-featured-image img { filter: grayscale(1) brightness(.55); }
.lud-status-adopted .wp-block-post-featured-image,
.lud-status-reserved .wp-block-post-featured-image { position: relative; }
.lud-status-adopted .wp-block-post-featured-image::after,
.lud-status-reserved .wp-block-post-featured-image::after {
	position: absolute;
	left: 50%; top: 42%;
	transform: translate(-50%, -50%) rotate(-14deg);
	padding: .1em .45em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1;
	border: 3px solid currentColor;
	border-radius: 6px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	pointer-events: none;
}
.lud-status-adopted .wp-block-post-featured-image::after  { content: "Adopted";  color: var(--wp--preset--color--contrast); }
.lud-status-reserved .wp-block-post-featured-image::after { content: "Reserved"; color: var(--lud-accent); text-shadow: var(--lud-glow); }
.lud-status-adopted .lud-tag { opacity: .75; }

/* Single darling */
.lud-darling-photo img { border-radius: 8px; }
.lud-darling-facts { border-top: 1px solid var(--lud-line); }
.lud-darling-facts p { margin: 0; }
.lud-darling-facts .lud-fact-label { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.lud-darling-price { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); line-height: 1; color: var(--lud-accent); text-shadow: var(--lud-glow); }
.lud-status-adopted .lud-adopt .wp-block-button__link,
.lud-status-example .lud-adopt .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); box-shadow: inset 0 0 0 1px var(--lud-line); }

/* Kind filter pills on the menagerie */
.lud-kinds .wp-block-categories-list,
.lud-kinds ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.lud-kinds li a {
	display: inline-block;
	padding: .35rem .95rem;
	border: 1px solid var(--lud-line);
	border-radius: 999px;
	text-decoration: none;
	font-size: .95rem;
}
.lud-kinds li a:hover,
.lud-kinds li.current-cat a { border-color: var(--lud-accent); color: var(--lud-accent); }

/* Empty shelf */
.lud-empty { border: 1px dashed var(--lud-line); border-radius: 8px; }

/* ------------------------------------------------------------------ */
/* How adoption works — a real sequence, so it is numbered            */
/* ------------------------------------------------------------------ */
.lud-steps { counter-reset: lud-step; }
.lud-steps > .wp-block-column { counter-increment: lud-step; border-top: 1px solid var(--lud-line); padding-top: 1.25rem; }
.lud-steps > .wp-block-column::before {
	content: counter(lud-step);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.5rem;
	line-height: .9;
	color: var(--lud-accent);
	text-shadow: var(--lud-glow);
	margin-bottom: .5rem;
}
.lud-steps h3 { text-shadow: none; color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 1.2rem; line-height: 1.3; }

/* ------------------------------------------------------------------ */
/* Images, separators, lab notes                                      */
/* ------------------------------------------------------------------ */
.wp-block-image.is-style-specimen img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--wp--custom--halo); }

.wp-block-separator.is-style-drip {
	border: 0 !important;
	height: 34px;
	max-width: none !important;
	width: 100% !important;
	background: currentColor !important;
	color: var(--lud-accent);
	opacity: .9;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 34'%3E%3Crect width='240' height='5'/%3E%3Crect x='14' y='0' width='7' height='16' rx='3.5'/%3E%3Cpath d='M9 5q5 0 5 5V5zM26 5q-5 0-5 5V5z'/%3E%3Crect x='38' y='0' width='11' height='30' rx='5.5'/%3E%3Cpath d='M33 5q5 0 5 5V5zM54 5q-5 0-5 5V5z'/%3E%3Crect x='60' y='0' width='6' height='12' rx='3.0'/%3E%3Cpath d='M55 5q5 0 5 5V5zM71 5q-5 0-5 5V5z'/%3E%3Crect x='92' y='0' width='9' height='22' rx='4.5'/%3E%3Cpath d='M87 5q5 0 5 5V5zM106 5q-5 0-5 5V5z'/%3E%3Crect x='121' y='0' width='5' height='9' rx='2.5'/%3E%3Cpath d='M116 5q5 0 5 5V5zM131 5q-5 0-5 5V5z'/%3E%3Crect x='150' y='0' width='12' height='27' rx='6.0'/%3E%3Cpath d='M145 5q5 0 5 5V5zM167 5q-5 0-5 5V5z'/%3E%3Crect x='181' y='0' width='6' height='15' rx='3.0'/%3E%3Cpath d='M176 5q5 0 5 5V5zM192 5q-5 0-5 5V5z'/%3E%3Crect x='205' y='0' width='9' height='20' rx='4.5'/%3E%3Cpath d='M200 5q5 0 5 5V5zM219 5q-5 0-5 5V5z'/%3E%3Crect x='228' y='0' width='5' height='10' rx='2.5'/%3E%3Cpath d='M223 5q5 0 5 5V5zM238 5q-5 0-5 5V5z'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 34px;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 34'%3E%3Crect width='240' height='5'/%3E%3Crect x='14' y='0' width='7' height='16' rx='3.5'/%3E%3Cpath d='M9 5q5 0 5 5V5zM26 5q-5 0-5 5V5z'/%3E%3Crect x='38' y='0' width='11' height='30' rx='5.5'/%3E%3Cpath d='M33 5q5 0 5 5V5zM54 5q-5 0-5 5V5z'/%3E%3Crect x='60' y='0' width='6' height='12' rx='3.0'/%3E%3Cpath d='M55 5q5 0 5 5V5zM71 5q-5 0-5 5V5z'/%3E%3Crect x='92' y='0' width='9' height='22' rx='4.5'/%3E%3Cpath d='M87 5q5 0 5 5V5zM106 5q-5 0-5 5V5z'/%3E%3Crect x='121' y='0' width='5' height='9' rx='2.5'/%3E%3Cpath d='M116 5q5 0 5 5V5zM131 5q-5 0-5 5V5z'/%3E%3Crect x='150' y='0' width='12' height='27' rx='6.0'/%3E%3Cpath d='M145 5q5 0 5 5V5zM167 5q-5 0-5 5V5z'/%3E%3Crect x='181' y='0' width='6' height='15' rx='3.0'/%3E%3Cpath d='M176 5q5 0 5 5V5zM192 5q-5 0-5 5V5z'/%3E%3Crect x='205' y='0' width='9' height='20' rx='4.5'/%3E%3Cpath d='M200 5q5 0 5 5V5zM219 5q-5 0-5 5V5z'/%3E%3Crect x='228' y='0' width='5' height='10' rx='2.5'/%3E%3Cpath d='M223 5q5 0 5 5V5zM238 5q-5 0-5 5V5z'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 34px;
}

.lud-notes .wp-block-post-featured-image img { border-radius: 6px; }
.lud-notes .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); text-shadow: var(--lud-glow); }

.wp-block-post-content > .lud-lede:first-child { margin-top: 0; }

/* Search field */
.wp-block-search__input { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); border: 1px solid var(--lud-line); border-radius: 999px; padding-inline: 1rem; }
.wp-block-search__button { border-radius: 999px; }

/* ------------------------------------------------------------------ */
/* Less motion                                                        */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Phones: two darlings per row, smaller tags */
@media (max-width: 600px) {
	.lud-menagerie .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1rem !important; }
	.lud-menagerie .lud-tag { margin: -1.2rem 0 0 .5rem !important; padding: .4rem .7rem .45rem 1.5rem !important; }
	.lud-menagerie .lud-tag::before { left: .5rem; width: .45rem; height: .45rem; }
	.lud-tag .wp-block-post-title { font-size: 1.2rem; }
	.lud-tag .lud-price { font-size: .8rem; }
	.lud-status-adopted .wp-block-post-featured-image::after,
	.lud-status-reserved .wp-block-post-featured-image::after { font-size: 1.5rem; border-width: 2px; }
	.lud-header .wp-block-site-title { font-size: 1.4rem; }
}