/* ------------------------------------------------------------------
   Atelier AOD — section and block styles.
   Loaded on the site and inside the block editor, so the patterns
   look the same while you edit them.

   Colours of the light page come from Kadence's Global Palette
   (Customizer › Colours & Fonts). The dark "chiaroscuro" frames use
   the tokens below; change them here if you ever want a different
   night tone.
   ------------------------------------------------------------------ */

:root {
	--aod-night: #121110;          /* dark frames: hero, glaze band, footer */
	--aod-night-deep: #0A0908;     /* image grounds inside dark frames */
	--aod-night-soft: #1C1A18;     /* secondary dark band */
	--aod-on-night: #ECE6DC;       /* text on dark */
	--aod-on-night-muted: #A79F93; /* secondary text on dark */
	--aod-line: #D9D1C5;           /* hairlines on the light page */
	--aod-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
	--aod-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------- Type helpers ---------------- */

.aod-eyebrow {
	font-family: var(--aod-sans);
	font-size: 12px !important;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--global-palette5, #5F584F);
}

.aod-display {
	font-family: var(--aod-serif);
	font-weight: 300;
	font-size: clamp(2.75rem, 5.5vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.aod-section-title {
	font-family: var(--aod-serif);
	font-weight: 300;
	font-size: clamp(2.25rem, 3.6vw, 3rem);
	line-height: 1.08;
}

.aod-statement {
	font-family: var(--aod-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.75rem, 3.2vw, 2.875rem);
	line-height: 1.25;
}

.aod-lede {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--global-palette5, #5F584F);
}

.aod-text-link a,
a.aod-text-link {
	font-family: var(--aod-sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 6px;
}

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

.aod-section {
	padding-top: clamp(4rem, 9vw, 7.5rem);
	padding-bottom: clamp(4rem, 9vw, 7.5rem);
	padding-left: 40px;
	padding-right: 40px;
}

.aod-section-head {
	border-bottom: 1px solid var(--aod-line);
	padding-bottom: 20px;
	margin-bottom: 40px !important;
	align-items: baseline;
}

/* The dark frame */
.aod-dark {
	background-color: var(--aod-night);
	color: var(--aod-on-night);
}

.aod-dark.aod-dark--soft {
	background-color: var(--aod-night-soft);
}

.aod-dark h1,
.aod-dark h2,
.aod-dark h3,
.aod-dark h4,
.aod-dark p,
.aod-dark li,
.aod-dark a:not(.wp-block-button__link) {
	color: var(--aod-on-night);
}

.aod-dark .aod-eyebrow,
.aod-dark .aod-lede,
.aod-dark .aod-muted {
	color: var(--aod-on-night-muted);
}

.aod-dark .wp-block-image img {
	background-color: var(--aod-night-deep);
}

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

.wp-block-button .wp-block-button__link {
	border-radius: 0;
	min-height: 48px;
	padding: 14px 28px;
	font-family: var(--aod-sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Filled: ink on the light page, cream inside a dark frame */
.aod-btn-solid .wp-block-button__link {
	background-color: var(--global-palette3, #1D1B18);
	color: var(--global-palette8, #F5F1EB);
	border: 1px solid var(--global-palette3, #1D1B18);
}

.aod-dark .aod-btn-solid .wp-block-button__link {
	background-color: var(--aod-on-night);
	color: var(--aod-night);
	border-color: var(--aod-on-night);
}

/* Outline */
.aod-btn-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--global-palette3, #1D1B18);
	border: 1px solid currentColor;
}

.aod-dark .aod-btn-outline .wp-block-button__link {
	color: var(--aod-on-night);
}

.aod-btn-solid .wp-block-button__link:hover,
.aod-btn-outline .wp-block-button__link:hover {
	opacity: 0.8;
}

/* ---------------- Images ---------------- */

.aod-ratio-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

.aod-ratio-tall img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

.aod-ratio-square img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.aod-card h3 {
	font-family: var(--aod-serif);
	font-weight: 400;
	font-size: 1.875rem;
	margin: 18px 0 6px;
}

.aod-card p {
	margin: 0;
	color: var(--global-palette5, #5F584F);
}

.aod-card a {
	text-decoration: none;
	color: inherit;
}

/* Mobile breathing room */
@media (max-width: 767px) {
	.aod-section {
		padding-left: 16px;
		padding-right: 16px;
	}
}