/* ==========================================================================
   Phrase Anatomy - Design System
   Brand palette: black, white, cream, soft cream, grey, muted, gold, red.
   Type: Vidaloka + Inter.  Loaded site-wide after Divi via pa-design plugin.
   ========================================================================== */

/* ---- Self-hosted fonts --------------------------------------------------- */
@font-face {
	font-family: 'Vidaloka';
	src: url('vidaloka.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('inter.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ---- Brand tokens -------------------------------------------------------- */
:root {
	--pa-black:      #000000;
	--pa-white:      #ffffff;
	--pa-cream:      #faf6ee;
	--pa-soft-cream: #f0e9d8;
	--pa-grey:       #737373;
	--pa-muted:      #5e5950;
	--pa-gold:       #b0894c;
	--pa-red:        #d62626;
}

/* ---- Base ---------------------------------------------------------------- */
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--pa-black);
	background-color: var(--pa-cream);
	font-size: 17px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

/* ---- Headings - Vidaloka ------------------------------------------------- */
h1, h2, h3, h4, h5,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5 {
	font-family: 'Vidaloka', 'Hoefler Text', Georgia, 'Times New Roman', serif;
	color: var(--pa-black);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.05rem; }

/* h6 doubles as the gold "eyebrow" label used above section headings */
h6, .et_pb_module h6 {
	font-family: 'Inter', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--pa-gold);
	line-height: 1.4;
}

/* ---- Content links ------------------------------------------------------- */
.et_pb_text a,
.et_pb_post_content a,
.entry-content a {
	color: var(--pa-red);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.18s ease;
}
.et_pb_text a:hover,
.et_pb_post_content a:hover,
.entry-content a:hover {
	text-decoration-thickness: 2px;
}

/* ---- Buttons ------------------------------------------------------------- */
/* Button styling intentionally removed from the design system.
   Divi's Customizer + Global Colors fully own buttons globally.
   To restore design-system enforcement, add styles here referencing --pa-red. */

/* ---- Misc ---------------------------------------------------------------- */
::selection {
	background: var(--pa-red);
	color: var(--pa-white);
}

img {
	height: auto;
}

/* ---- Blog / editorial: remove sidebar, go full-width --------------------- */
/* WooCommerce shop & product pages KEEP their sidebar (product widgets). */
body.blog #sidebar,
body.archive:not(.woocommerce-page) #sidebar,
body.single-post #sidebar {
	display: none !important;
}
body.blog #left-area,
body.archive:not(.woocommerce-page) #left-area,
body.single-post #left-area {
	width: 100% !important;
	padding-right: 0 !important;
}

/* ---- WooCommerce single product: title sizing --------------------------- */
body.single-product .product_title {
	font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.4rem);
	line-height: 1.2;
}

/* ==========================================================================
   Browse by Design — shop landing gallery
   Each card is two stacked images (artwork on top, mockup beneath).
   On hover/focus the artwork fades out, revealing the lifestyle mockup.
   Cards link to /design/<slug>/ archives.
   ========================================================================== */
.pa-design-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.pa-design-card {
	position: relative;
	display: block;
	background: var(--pa-soft-cream);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--pa-black);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pa-design-card:hover,
.pa-design-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	outline: none;
}

.pa-design-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--pa-soft-cream);
	overflow: hidden;
}

.pa-design-card__art,
.pa-design-card__mockup {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Artwork sits on top; fades out on hover/focus to reveal mockup beneath. */
.pa-design-card__art {
	z-index: 2;
	opacity: 1;
	transition: opacity 0.4s ease;
}

.pa-design-card__mockup {
	z-index: 1;
}

.pa-design-card:hover .pa-design-card__art,
.pa-design-card:focus-within .pa-design-card__art,
.pa-design-card:focus-visible .pa-design-card__art {
	opacity: 0;
}

.pa-design-card__label {
	display: block;
	padding: 1rem 1.1rem 1.15rem;
	background: var(--pa-cream);
}

.pa-design-card__name {
	display: block;
	font-family: 'Vidaloka', 'Hoefler Text', Georgia, serif;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--pa-black);
}

.pa-design-card__meta {
	display: block;
	margin-top: 0.35rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-muted);
}

/* Reduce motion: skip the crossfade for users who request it. */
@media (prefers-reduced-motion: reduce) {
	.pa-design-card,
	.pa-design-card__art {
		transition: none;
	}
}