/*
Theme Name: Macabre Art Studios
Theme URI: https://example.com/
Author: Macabre Art Studios
Description: Dark, handmade-horror theme for 1:6 scale figure makers. Pieces, services and a journal, with a hero that dissolves into black.
Version: 1.6.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: macabre
Tags: black, dark, one-column, custom-logo, custom-menu, featured-images
*/

/* ---------------------------------------------------------------
   Tokens. Change them once, the whole site follows.
   --------------------------------------------------------------- */

:root {
	--void:      #0b0a0c;
	--ash:       #141216;
	--pitch:     #080709;
	--bone:      #e6dfd1;
	--sinew:     #8f8677;
	--blood:     #7a1416;
	--blood-lit: #a11e20;
	--hairline:  rgba(230, 223, 209, 0.14);

	/* Two families only. Bebas Neue is caps-only and condensed, so headings
	   carry a little tracking to stop the verticals from crowding. Jost is a
	   geometric sans in the Futura mould — it does both body and labels, the
	   labels just run smaller, heavier and widely tracked. */
	--display: "Bebas Neue", "Oswald", Impact, sans-serif;
	--prose:   "Jost", "Futura", "Century Gothic", sans-serif;
	--utility: "Jost", "Futura", "Century Gothic", sans-serif;

	--wrap: 1280px;
	--section-y: clamp(4rem, 9vw, 7.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--void);
	color: var(--bone);
	font-family: var(--prose);
	/* Jost runs a low x-height, so body copy sits a touch larger than usual */
	font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.12rem);
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

/* Faint grain so the black never reads as flat screen-black */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }

p { margin: 0 0 1.1em; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 20;
	background: var(--blood);
	color: var(--bone);
	padding: 0.75rem 1.25rem;
	font-family: var(--utility);
}
.skip:focus { left: 0; }

:focus-visible {
	outline: 2px solid var(--blood-lit);
	outline-offset: 3px;
}

/* --- Shared type roles ----------------------------------------- */

.eyebrow,
.piece-meta,
.footer-note,
.filter,
.piece-specs,
.article-more {
	font-family: var(--utility);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--sinew);
}

.eyebrow, .footer-note { margin: 0; letter-spacing: 0.24em; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { color: var(--bone); }

.section-title {
	font-family: var(--display);
	font-size: clamp(2.6rem, 5.6vw, 4.2rem);
	letter-spacing: 0.03em;
	line-height: 1;
}

.empty-state { color: var(--sinew); }

/* --- Masthead --------------------------------------------------- */

.masthead {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem clamp(1.25rem, 4vw, 3rem);
	background: rgba(8, 7, 9, 0.9);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--hairline);
}

.brand,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.brand-mark,
.custom-logo {
	max-height: 104px;
	width: auto;
}

.masthead-end {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.nav {
	display: flex;
	gap: clamp(1rem, 2.2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--utility);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.nav li { margin: 0; }

.nav a {
	display: inline-block;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.nav a:hover { color: #fff; border-bottom-color: var(--blood-lit); }

.nav .current-menu-item > a,
.nav .current_page_item > a { border-bottom-color: var(--hairline); }

/* On desktop the menu block claims the right half of the header, so the first
   item starts at the middle of the page and the items spread evenly from there
   out to the social icons. */
@media (min-width: 761px) {
	.masthead-end {
		flex: 0 0 50%;
		/* Breathing room between the last menu item and the icons */
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}
	.masthead-end > nav { flex: 1; }
	.masthead-end .nav { justify-content: space-between; gap: 1rem; }
}

.socials { display: flex; align-items: center; gap: 1.8rem; }

.social {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--sinew);
	text-decoration: none;
	transition: color 0.2s;
}
.social:hover { color: var(--bone); }

.social svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	/* Thinned slightly so the bigger icons keep the same line weight */
	stroke-width: 1.15;
}

/* Icons carry the label for screen readers; text appears on mobile */
.social-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--hairline);
	color: var(--bone);
	padding: 0.5rem 0.8rem;
	font-family: var(--utility);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	cursor: pointer;
}

.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
	display: block;
	width: 16px;
	height: 1px;
	background: currentColor;
}
.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before,
.menu-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.menu-toggle-bars::before { top: -5px; }
.menu-toggle-bars::after  { top: 5px; }

/* --- Hero -------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(78vh, 720px);
	padding: clamp(3.5rem, 8vw, 6rem) 0;
	overflow: hidden;
	background: var(--pitch);
}

.hero-media {
	position: absolute;
	inset: 0 0 0 34%;
	z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}

.hero-media img,
.about-media img,
.piece-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-inner { position: relative; z-index: 1; }

.hero-title {
	font-family: var(--display);
	font-size: clamp(3.4rem, 8.6vw, 6.6rem);
	line-height: 0.92;
	letter-spacing: 0.03em;
	margin: 1rem 0 1.2rem;
	text-shadow: 0 0 50px rgba(0, 0, 0, 0.95);
}

.hero-lede {
	max-width: 38ch;
	margin-bottom: 2.2rem;
	color: var(--sinew);
	font-size: 1.12rem;
}

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

.button {
	display: inline-block;
	padding: 0.85rem 2.2rem;
	border: 1px solid var(--hairline);
	background: rgba(8, 7, 9, 0.4);
	color: var(--bone);
	font-family: var(--utility);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	text-decoration: none;
	transition: background-color 0.25s, border-color 0.25s, letter-spacing 0.25s;
}
.button:hover {
	background: var(--blood);
	border-color: var(--blood);
	letter-spacing: 0.28em;
}

.button-ghost:hover {
	background: transparent;
	border-color: var(--bone);
	letter-spacing: 0.22em;
}

/* --- Sections ---------------------------------------------------- */

.section { padding: var(--section-y) 0; }
.section-tight { padding: clamp(1.5rem, 3vw, 2.5rem) 0 var(--section-y); }

.section-alt {
	background: var(--pitch);
	border-block: 1px solid var(--hairline);
}

.section-head {
	text-align: center;
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.section-head .eyebrow { margin-bottom: 0.7rem; }

.section-foot {
	text-align: center;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin-top: 1.1rem;
}

.ornament-rule {
	display: block;
	width: min(120px, 18vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hairline));
}
.ornament-rule:last-child { transform: scaleX(-1); }

.ornament-mark { width: 20px; opacity: 0.55; }

/* --- Gallery grid ------------------------------------------------ */

.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.piece {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ash);
}

.piece-link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
}

.piece img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.4) contrast(1.06);
	transition: filter 0.5s, scale 0.7s;
}

.piece:hover img {
	filter: grayscale(0) contrast(1.04);
	scale: 1.05;
}

/* Placeholder shown until a photo is set */
.piece-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	padding: 1rem;
	text-align: center;
	font-family: var(--utility);
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	color: rgba(230, 223, 209, 0.26);
	background: repeating-linear-gradient(45deg, rgba(230, 223, 209, 0.03) 0 12px, transparent 12px 24px);
}

.piece-cap {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 1.5rem 1rem 0.9rem;
	background: linear-gradient(transparent, rgba(8, 7, 9, 0.92));
	opacity: 0;
	translate: 0 8px;
	transition: opacity 0.3s, translate 0.3s;
}

.piece:hover .piece-cap,
.piece:focus-within .piece-cap { opacity: 1; translate: 0 0; }

.piece-name {
	font-family: var(--prose);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	margin-bottom: 0.25rem;
	color: var(--bone);
}

.piece-meta { margin: 0; font-size: 0.64rem; letter-spacing: 0.14em; }

/* --- Availability filters ---------------------------------------- */

.filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: -1.5rem 0 2.5rem;
}

.filter { text-decoration: none; transition: color 0.2s; }
.filter:hover { color: var(--bone); }
.filter.is-current { color: var(--bone); border-bottom: 1px solid var(--blood-lit); }

/* --- Service tiles ------------------------------------------------ */

.tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.tile { margin: 0; text-align: center; }

.tile-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ash);
	border: 1px solid var(--hairline);
	margin-bottom: 1.1rem;
}

.tile-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.4) contrast(1.06);
	transition: filter 0.5s;
}
.tile:hover .tile-frame img { filter: grayscale(0) contrast(1.04); }

/* Line icon, used when a service has no photo of its own */
.tile-icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 1.3rem;
	color: var(--bone);
	opacity: 0.85;
	transition: opacity 0.3s, translate 0.3s;
}

.tile-icon svg { width: 100%; height: 100%; display: block; }

.tile:hover .tile-icon { opacity: 1; translate: 0 -3px; }

.tile-title {
	font-family: var(--display);
	font-size: 1.85rem;
	letter-spacing: 0.06em;
	margin-bottom: 0.45rem;
}

.tile-text {
	color: var(--sinew);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

/* --- About -------------------------------------------------------- */

.about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: min(60vh, 560px);
}

.about-text {
	padding: var(--section-y) clamp(1.25rem, 4vw, 3rem);
	margin-left: auto;
	max-width: calc(var(--wrap) / 2);
	width: 100%;
}

.about-text .eyebrow { margin-bottom: 0.7rem; }
.about-text .section-title { margin-bottom: 1.5rem; }
.about-text p { color: var(--sinew); max-width: 52ch; }

.about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.about-media {
	position: relative;
	align-self: stretch;
	min-height: 320px;
	background: var(--ash);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

/* --- Single piece -------------------------------------------------- */

/* Wrapper classes are prefixed so they can't collide with the classes
   WordPress puts on <body> (single-piece, single-post, and friends). */
.piece-single { padding: var(--section-y) 0; }

.piece-layout {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.piece-hero {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ash);
	border: 1px solid var(--hairline);
}

.piece-info .section-title { margin: 0.8rem 0 1.5rem; }

.piece-specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.5rem;
	margin: 0 0 2rem;
	padding: 1.25rem 0;
	border-block: 1px solid var(--hairline);
}

.piece-specs dt { color: var(--sinew); }

.piece-specs dd {
	margin: 0;
	font-family: var(--prose);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bone);
}

.piece-specs dd a { text-decoration: none; border-bottom: 1px solid var(--hairline); }

/* --- Journal ------------------------------------------------------- */

.articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.article-card { margin: 0; }

.article-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ash);
	border: 1px solid var(--hairline);
	margin-bottom: 1.1rem;
}

.article-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.4);
	transition: filter 0.5s, scale 0.7s;
}
.article-card:hover .article-media img { filter: grayscale(0); scale: 1.04; }

.article-title {
	font-family: var(--display);
	font-size: 1.95rem;
	letter-spacing: 0.03em;
	margin: 0.5rem 0 0.6rem;
}
.article-title a { text-decoration: none; }
.article-title a:hover { color: #fff; }

.article-excerpt { color: var(--sinew); }

.article-more { text-decoration: none; border-bottom: 1px solid var(--blood-lit); padding-bottom: 2px; }
.article-more:hover { color: var(--bone); }

.article-head { padding-bottom: 0; text-align: center; }
.article-head .eyebrow { margin-bottom: 0.8rem; }

.article-hero {
	margin: clamp(2rem, 5vw, 3.5rem) 0 0;
	max-height: 62vh;
	overflow: hidden;
}
.article-hero img { width: 100%; object-fit: cover; }

.article-foot { padding-block: clamp(2rem, 5vw, 3.5rem); }
.article-foot a { font-family: var(--utility); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; }
.article-foot a:hover { color: #fff; }

/* --- Editor content ------------------------------------------------ */

.entry-content {
	max-width: 76ch;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	color: var(--sinew);
}

.entry-content > * { margin-bottom: 1.2em; }

.entry-content h2,
.entry-content h3 {
	font-family: var(--display);
	color: var(--bone);
	letter-spacing: 0.03em;
	margin-top: 2em;
}
.entry-content h2 { font-size: 2.3rem; }
.entry-content h3 { font-size: 1.75rem; }

.entry-content a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--blood-lit); text-underline-offset: 3px; }

.entry-content blockquote {
	margin: 2em 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--blood);
	font-style: italic;
	color: var(--bone);
}

.entry-content figure,
.entry-content .wp-block-image { margin: 2em 0; }

.entry-content figcaption,
.wp-element-caption {
	margin-top: 0.6rem;
	font-family: var(--utility);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--sinew);
	text-align: center;
}

.wp-block-gallery.has-nested-images { gap: 12px; }

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border: 1px solid var(--hairline);
}

.alignwide { max-width: min(1100px, 92vw); margin-inline: auto; }
.alignfull  { max-width: none; }

.wp-block-button__link {
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--blood-lit);
	font-family: var(--utility);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.76rem;
}

/* --- Pagination ------------------------------------------------------ */

.pagination {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
	font-family: var(--utility);
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	text-decoration: none;
	border: 1px solid transparent;
}
.pagination .page-numbers:hover { border-color: var(--hairline); }
.pagination .current { border-color: var(--blood-lit); }

/* --- Footer ----------------------------------------------------------- */

.footer {
	border-top: 1px solid var(--hairline);
	padding: 2rem 0;
	background: var(--pitch);
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	justify-content: space-between;
}

.footer-brand .brand-mark,
.footer-brand .custom-logo { max-height: 40px; opacity: 0.75; }

.footer-note { font-size: 0.66rem; letter-spacing: 0.16em; }

/* --- Reveal on scroll -------------------------------------------------- */

/* Hidden only when JS is running — without it, everything stays visible */
.js .reveal {
	opacity: 0;
	translate: 0 22px;
	transition: opacity 0.7s ease, translate 0.7s ease;
}
.js .reveal.is-visible { opacity: 1; translate: 0 0; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
	.tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.grid     { grid-template-columns: repeat(2, 1fr); }
	.tiles    { grid-template-columns: repeat(2, 1fr); }
	.articles { grid-template-columns: repeat(2, 1fr); }

	.about { grid-template-columns: 1fr; }

	.about-text {
		order: 2;
		margin-left: 0;
		max-width: none;
		padding-block: clamp(2.5rem, 7vw, 4rem);
	}

	.about-media {
		order: 1;
		min-height: 46vh;
		-webkit-mask-image: linear-gradient(#000 60%, transparent 100%);
		mask-image: linear-gradient(#000 60%, transparent 100%);
	}

	.piece-layout { grid-template-columns: 1fr; }

	/* Captions can't be hovered on touch, so keep them showing */
	.piece-cap { opacity: 1; translate: 0 0; }
}

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

	.masthead { flex-wrap: wrap; }

	/* The full-size logo would swallow a phone screen */
	.brand-mark,
	.custom-logo { max-height: 64px; }

	.masthead-end {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		padding: 1.25rem 0 0.5rem;
	}
	.masthead-end.is-open { display: flex; }

	.nav { flex-direction: column; gap: 0.9rem; }

	.socials { gap: 1.5rem; }

	.social-label {
		position: static;
		width: auto;
		height: auto;
		clip-path: none;
		font-family: var(--utility);
		font-size: 0.76rem;
		text-transform: uppercase;
		letter-spacing: 0.16em;
	}

	.hero { min-height: 0; }

	.hero-media {
		inset: 0;
		opacity: 0.4;
		-webkit-mask-image: linear-gradient(#000 40%, transparent 100%);
		mask-image: linear-gradient(#000 40%, transparent 100%);
	}

	.articles { grid-template-columns: 1fr; }

	.footer-inner { justify-content: center; text-align: center; }
	.footer-inner .nav { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 520px) {
	.tiles { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .reveal { opacity: 1; translate: 0 0; transition: none; }
	* { transition-duration: 0.01ms !important; }
}