/*
Theme Name: Monark
Theme URI: https://monark.al
Author: MONARK sh.p.k
Description: Tema për kantinën MONARK (Lushnje). E ndërtuar si etiketa e shishes: letër e çelët, kurora e artë, emra me serif dhe ngjyra sipas llojit të verës. Faqja e produktit është optimizuar për telefonin, sepse vizitorët vijnë nga kodi QR në shishe. Punon me shtojcën "Monark Wines".
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monark
*/

/* ------------------------------------------------------------------ tokens */
:root {
	--paper: #faf8f3;        /* label paper */
	--paper-2: #f2ebdd;      /* promo cream */
	--ink: #3a3637;          /* wordmark charcoal */
	--ink-soft: #5e5759;
	--cellar: #2b1d1b;       /* dark cellar brown */
	--cellar-2: #221715;
	--cream: #ede3d0;        /* letterpress cream on dark */
	--cream-dim: #cdbfa6;
	--gold: #c9b679;         /* antique gold, on dark */
	--gold-rule: #bca765;    /* hairline rules on paper */
	--gold-text: #7a6a2c;    /* gold that reads on paper (5:1) */
	--crown: #b3a825;        /* olive-gold crown of the wine labels */
	--crown-bright: #d4b45a; /* metallic crown on dark */
	--crimson: #941a1f;
	--sepia: #764237;
	--teal: #1f5e57;

	--accent: var(--crimson);
	--band: var(--crimson);
	--on-band: #fbf3e6;
	--focus: var(--crimson);

	--f-display: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
	--f-brand: "Cinzel", "Trajan Pro", "Times New Roman", serif; /* the MONARK wordmark */
	--f-body: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;

	--gutter: 16px;
	--measure: 64ch;
	--wrap: 1160px;
}

.accent-red   { --accent: var(--crimson); --band: var(--crimson); --on-band: #fbf3e6; }
.accent-white { --accent: var(--gold-text); --band: var(--gold-rule); --on-band: var(--cellar); }
.accent-raki  { --accent: var(--sepia); --band: var(--sepia); --on-band: #fbf3e6; }
.accent-teal  { --accent: var(--teal); --band: var(--teal); --on-band: #fbf3e6; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }

p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; margin: 0; z-index: 100;
	top: 8px; left: 8px; padding: .6em 1em; background: var(--paper); color: var(--ink);
}

.site-main { display: block; }
.site-main:focus { outline: none; }

/* Section title with the label's gold rule + centre bead */
.section-title { font-size: 1.75rem; margin-bottom: 1rem; }
.section-title::after {
	content: "";
	display: block;
	width: 112px;
	height: 9px;
	margin-top: .55rem;
	background:
		radial-gradient(circle, var(--gold-rule) 3px, transparent 3.6px) center / 9px 9px no-repeat,
		linear-gradient(var(--gold-rule), var(--gold-rule)) center / 100% 1px no-repeat;
}
.section-title--center { text-align: center; }
.section-title--center::after { margin-left: auto; margin-right: auto; }

.prose { max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }

.empty { text-align: center; color: var(--ink-soft); padding: 2rem 0; }

/* --------------------------------------------------------------- buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 48px;
	padding: .65em 1.25em;
	border: 1px solid transparent;
	border-radius: 2px;
	font: 500 1.0625rem/1.2 var(--f-body);
	text-decoration: none;
	cursor: pointer;
	background: none;
	color: inherit;
}
.btn .icon { width: 1.25em; height: 1.25em; flex: none; }
.btn--accent { background: var(--band); color: var(--on-band); border-color: var(--band); }
.btn--accent:hover { filter: brightness(1.08); }
.btn--outline { border-color: currentColor; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--quiet { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-rule); }
.btn--gold { background: var(--gold); color: var(--cellar); border-color: var(--gold); }
.btn--gold:hover { background: var(--cream); border-color: var(--cream); }

/* ---------------------------------------------------------------- header */
.site-header { background: var(--paper); border-bottom: 1px solid #dcd0ab; }
.site-header__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 10px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	flex-wrap: wrap;
}

.brand { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); }
.brand__crown { width: 34px; height: auto; color: var(--crown); margin-bottom: 3px; }
.brand__word { font: 600 1.3rem/1 var(--f-brand); letter-spacing: .12em; padding-left: .12em; }

/* Worn letterpress texture of the logo wordmark (speckle mask). */
.worn {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -22 0 0 0 14.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -22 0 0 0 14.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-size: 240px 240px;
	mask-size: 240px 240px;
}
.custom-logo-link img { max-height: 56px; width: auto; }

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nav__list a {
	display: inline-block;
	padding: 8px 0;
	color: var(--ink);
	text-decoration: none;
	font-size: 1.0625rem;
	border-bottom: 1px solid transparent;
}
.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list a[aria-current="page"] { border-bottom-color: var(--gold-rule); }

/* Front page: header floats over the dark hero; the hero carries the logo. */
.site-header--over { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent; border: 0; --focus: var(--gold); }
.site-header--over .brand,
.site-header--over .custom-logo-link { display: none; }
.site-header--over .site-header__inner { justify-content: flex-end; }
.site-header--over .nav__list a { color: var(--cream); }
@media (min-width: 720px) {
	.nav__list { gap: 4px 30px; }
	.nav__list a { font-size: .9375rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
	.site-header--over .site-header__inner { padding-top: 22px; }
	.site-header--over .nav__list a { color: #f6eedd; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
}

@media (max-width: 419px) {
	.nav__list { gap: 4px 14px; }
	.nav__list a { font-size: 1rem; }
}
@media (max-width: 379px) {
	.site-header__inner { justify-content: center; }
	.nav__list { justify-content: center; }
}

/* ------------------------------------------------------------------ hero */
.hero {
	background: radial-gradient(120% 80% at 50% 30%, #3a2724 0%, var(--cellar) 60%, var(--cellar-2) 100%);
	color: var(--cream);
	text-align: center;
	padding: 84px var(--gutter) 72px;
	min-height: min(88svh, 760px);
	display: grid;
	align-content: center;
	--focus: var(--gold);
}
.hero__inner { max-width: 760px; margin: 0 auto; }

.hero__crown { width: clamp(120px, 34vw, 210px); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
.hero__place { font: 500 .8125rem/1.4 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.4rem; }
.moon-arc { width: min(100%, 460px); height: auto; margin: 0 auto; overflow: visible; }
.moon-arc__ring { stroke: var(--gold); stroke-opacity: .45; stroke-width: 1; }
.moon-arc__star { fill: var(--gold); opacity: .75; }
.moon-arc__crown { color: var(--crown-bright); }
.moon__shadow { fill: var(--cellar); stroke: var(--gold); stroke-width: 1; }
.moon__lit { fill: #e3d3a1; }
.moon__crater { fill: #c9b679; opacity: .55; }
.moon { animation: moon-in .7s ease-out backwards; animation-delay: calc(var(--i) * 120ms + 150ms); }
@keyframes moon-in { from { opacity: 0; } to { opacity: 1; } }

.hero__word {
	font: 700 clamp(2.9rem, 14.5vw, 7.5rem)/1 var(--f-brand);
	letter-spacing: .06em;
	padding-left: .06em;
	color: #efe6d4;
	margin: 0 0 .2em;
}
.hero__word .worn { display: inline-block; }
.hero__tagline {
	font: italic 400 clamp(1.15rem, 4.4vw, 1.5rem)/1.4 var(--f-display);
	color: var(--cream-dim);
	max-width: 34ch;
	margin: 0 auto 1.6rem;
	text-wrap: balance;
}
.hero__actions { margin: 0; }

/* ----------------------------------------------------------------- intro */
.intro {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 56px var(--gutter);
	display: grid;
	gap: 32px;
}
.lead { font-size: 1.25rem; line-height: 1.6; max-width: var(--measure); }
.intro__photo { margin: 0; border: 1px solid var(--ink); padding: 6px; background: var(--paper); }
.intro__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }

@media (min-width: 860px) {
	.intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; padding: 88px var(--gutter); max-width: 1040px; }
	.intro__text .lead { font-size: 1.375rem; }
	.intro__photo img { aspect-ratio: 1 / 1; }
}

/* -------------------------------------------------------------- products */
.products { background: var(--paper-2); padding: 56px var(--gutter) 64px; }
.products__head { max-width: 40rem; margin: 0 auto 1.25rem; text-align: center; }
.products .filter--front ul { margin: 0 auto 28px; max-width: 1000px; }
.grid--front { max-width: 1000px; }
@media (min-width: 720px) { .grid.grid--front { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.products__intro { color: var(--ink-soft); margin: 0; }
.products__group { max-width: var(--wrap); margin: 0 auto 48px; }
.products__group:last-child { margin-bottom: 0; }
@media (min-width: 720px) {
	.products__groups { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px 24px; }
	.products__groups .products__group { flex: var(--n) 1 calc(var(--n) * 170px); margin: 0; min-width: 0; }
	.products__groups .grid { gap: 24px; }
	.products__groups .grid.grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
	.products__groups .grid.grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.products__groups .grid.grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.products__groups .grid.grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.products__cat { font: italic 400 1.5rem/1.2 var(--f-display); margin: 0 0 1rem; display: flex; align-items: center; gap: 14px; }
.products__cat::after { content: ""; flex: 1; height: 1px; background: var(--gold-rule); }
.products__cat a { color: var(--ink); text-decoration: none; }
.products__cat a:hover { text-decoration: underline; }

.grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--wrap);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1100px) { .grid:not(.grid--compact):not(.grid--front) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* No half-empty rows: a single card, or a lone last card on 2-column phones, is centred. */
.grid > li:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 340px); }
@media (max-width: 719px) {
	.grid > li:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}

.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 6px;
	background: var(--paper);
	border: 1px solid var(--ink);
	color: var(--ink);
	text-decoration: none;
}
.card__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cellar); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
/* Flat landscape label artwork: show the whole label instead of cropping it. */
.card__media .is-landscape { object-fit: contain; background: var(--paper-2); }
.card__text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 4px 8px; flex: 1; }
.card__cat { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 2px; }
.card__name { font: 400 clamp(1.1rem, 4.6vw, 1.45rem)/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.card__sub { font-size: .9375rem; line-height: 1.35; color: var(--ink-soft); }
.card__facts { font-size: .875rem; line-height: 1.35; color: var(--gold-text); margin-top: auto; padding-top: 6px; }
.card__link:hover .card__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.card__link:hover { border-color: var(--accent); }

.placeholder-bottle { display: grid; place-items: center; width: 100%; height: 100%; min-height: 200px; background: var(--cellar); }
.placeholder-bottle__crown { width: 40%; color: var(--crown-bright); }

/* -------------------------------------------------------------- heritage */
.heritage { background: var(--cellar); color: var(--cream); padding: 64px var(--gutter); --focus: var(--gold); }
.heritage__inner { max-width: 760px; margin: 0 auto; }
.heritage .section-title { color: var(--cream); font-size: clamp(1.6rem, 6vw, 2.25rem); }
.heritage .section-title::after {
	background:
		radial-gradient(circle, var(--gold) 3px, transparent 3.6px) center / 9px 9px no-repeat,
		linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat;
}
.heritage__text p { color: var(--cream); max-width: var(--measure); }
.qr-note {
	margin-top: 2.25rem;
	padding: 20px;
	border: 1px solid var(--gold);
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	align-items: start;
}
.qr-note__icon { width: 40px; height: 40px; color: var(--gold); }
.qr-note p { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--cream); }

/* --------------------------------------------------------------- contact */
.contact { padding: 64px var(--gutter) 72px; }
.contact__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.contact__address { font: normal 400 1.2rem/1.5 var(--f-display); margin-bottom: 1rem; }
.contact__hours { color: var(--ink-soft); }
.contact__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.contact__list .btn { min-width: 210px; }
.contact__map { display: block; width: 100%; height: 320px; margin-top: 2rem; border: 1px solid var(--ink-soft); filter: sepia(.25); }

/* -------------------------------------------------------- single product */
.product { max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gutter) 40px; }

.product__label { position: relative; }
.product__frame {
	margin: 0;
	border: 1px solid var(--ink);
	padding: 8px 8px 52px;
	background: var(--paper);
}
.product__figure { margin: 0; background: var(--cellar); }
.product__figure img { width: 100%; }
.product__figure .is-portrait { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }
.product__figure .placeholder-bottle { aspect-ratio: 4 / 5; }
.product__figure .is-landscape { background: var(--paper-2); }

.product__head { text-align: center; padding: 0 6px 22px; }
.product__name {
	font: 400 clamp(2.4rem, 12vw, 4.25rem)/1 var(--f-display);
	letter-spacing: .07em;
	padding-left: .07em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 .35em;
}
.product__type {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 .4rem;
	font: italic 400 1.1rem/1.35 var(--f-display);
	color: var(--ink);
}
.product__type::before,
.product__type::after { content: ""; flex: 1 1 24px; min-width: 18px; height: 1px; background: var(--gold-rule); }
.product__type span { flex: 0 1 auto; }
.product__grape { font: 400 1.4rem/1.3 var(--f-display); color: var(--gold-text); margin: .35rem 0 0; }

/* The coloured strip at the foot of every Monark wine label */
.product__band {
	position: relative;
	margin: -30px 8px 0;
	display: flex;
	background: var(--band);
	color: var(--on-band);
	padding: 12px 4px;
}
.product__band-item { flex: 1 1 0; text-align: center; padding: 0 6px; }
.product__band-item + .product__band-item { border-left: 1.5px solid currentColor; }
.product__band dt { font-size: .8125rem; line-height: 1.2; opacity: .9; }
.product__band dd { margin: 2px 0 0; font: 400 1.35rem/1.2 var(--f-display); }

.product__body { padding-top: 28px; }

.facts { margin: 0 0 8px; border-top: 1px solid var(--gold-rule); }
.facts__item {
	display: grid;
	grid-template-columns: minmax(7.5rem, 38%) 1fr;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #d8cca4;
}
.facts dt { color: var(--gold-text); font-size: 1rem; line-height: 1.45; }
.facts dd { margin: 0; line-height: 1.45; }

.product__section { margin-top: 36px; }
.product__section .section-title { font-size: 1.5rem; }

.product__en { margin-top: 32px; border: 1px solid var(--gold-rule); background: var(--paper-2); }
.product__en summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 10px 16px;
	cursor: pointer;
	font-family: var(--f-display);
	font-size: 1.1rem;
}
.product__en summary::-webkit-details-marker { display: none; }
.product__en summary::after { content: "+"; margin-left: auto; font: 400 1.5rem/1 var(--f-body); color: var(--gold-text); }
.product__en[open] summary::after { content: "\2212"; }
.product__en-flag {
	display: inline-grid; place-items: center;
	width: 30px; height: 30px; border: 1px solid var(--gold-text); border-radius: 50%;
	font: 500 .75rem/1 var(--f-body); color: var(--gold-text);
}
.product__en .prose { padding: 0 16px 18px; }

.product__cta { margin-top: 36px; display: grid; gap: 10px; }
.product__cta .btn { width: 100%; }
.product__cta .btn--quiet { justify-self: center; width: auto; }
.product__cta [hidden] { display: none; }
.product__note { margin-top: 20px; text-align: center; font-size: .9375rem; color: var(--ink-soft); }

@media (min-width: 640px) {
	.product__cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.product__cta .btn--quiet { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
	.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; padding-top: 40px; padding-bottom: 72px; }
	.product__label { position: sticky; top: 24px; }
	.product__figure .is-portrait { aspect-ratio: auto; max-height: 62vh; width: auto; margin: 0 auto; object-fit: contain; }
	.product__figure { display: flex; justify-content: center; background: transparent; }
	.product__body { padding-top: 0; }
	.product__head { text-align: left; padding: 0 0 26px; }
	.product__name { font-size: clamp(2.6rem, 4.6vw, 4rem); padding-left: 0; }
	.product__type { justify-content: flex-start; }
	.product__type::before { display: none; }
	.product__type::after { max-width: 120px; }
}

.more { background: var(--paper-2); padding: 48px var(--gutter) 56px; }
.more .grid { max-width: 1000px; }
@media (min-width: 720px) { .more .grid.grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------- archive / pages */
.catalog { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gutter) 64px; }
.catalog__head, .page-body__head { text-align: center; margin-bottom: 32px; }
.catalog__crown { width: 64px; height: auto; color: var(--crown); margin: 0 auto 14px; }
.catalog__title, .page-body__title { font-size: clamp(2.2rem, 9vw, 3.25rem); margin-bottom: .3em; }
.catalog__desc { max-width: 40rem; margin: 0 auto; color: var(--ink-soft); }

.filter ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.filter a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 1rem;
}
.filter a:hover { border-color: var(--crimson); color: var(--crimson); }
.filter a[aria-current="page"] { background: var(--ink); color: var(--paper); }

.page-body { max-width: 46rem; margin: 0 auto; padding: 40px var(--gutter) 64px; }
.page-body--center { text-align: center; }
.page-body--center p { margin-left: auto; margin-right: auto; max-width: 36rem; }
.page-body__media { margin: 0 0 28px; }
.page-body__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.4em; }
.prose img { margin: 1.5em 0; }
.prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 2px solid var(--gold-rule); font-family: var(--f-display); font-style: italic; }
.meta { color: var(--gold-text); font-size: .9375rem; margin-bottom: .5rem; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list__item { padding: 24px 0; border-bottom: 1px solid var(--gold-rule); }
.post-list__title { font-size: 1.6rem; margin-bottom: .2em; }
.post-list__title a { color: var(--ink); text-decoration: none; }
.post-list__title a:hover { text-decoration: underline; }
.nav-links { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--cellar-2); color: var(--cream-dim); --focus: var(--gold); }
.site-footer__inner { max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 40px; text-align: center; }
.has-float .site-footer__inner { padding-bottom: 150px; }
.brand--footer { color: var(--cream); }
.brand--footer .brand__crown { width: 52px; color: var(--crown-bright); margin-bottom: 6px; }
.brand--footer .brand__word { font-size: 1.7rem; }
.site-footer a { color: var(--cream); }
.site-footer__place { margin: 20px 0; line-height: 1.6; }
.site-footer__social, .site-footer__menu { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.site-footer__social a:hover span { text-decoration: underline; }
.site-footer__social .icon { width: 22px; height: 22px; color: var(--gold); }
.site-footer__menu a { display: inline-block; padding: 8px 0; }
.site-footer__legal { margin: 24px 0 0; font-size: .875rem; line-height: 1.6; color: var(--cream-dim); }

/* ------------------------------------------------ floating contact buttons */
.float-contact {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 10px;
	--focus: var(--crimson);
}
.float-contact__btn {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--cellar);
	color: var(--cream);
	box-shadow: inset 0 0 0 1px var(--gold), 0 6px 18px rgba(43, 29, 27, .35);
}
.float-contact__btn .icon { width: 26px; height: 26px; }
@media (max-width: 719px) {
	.float-contact { gap: 8px; }
	.float-contact__btn { width: 48px; height: 48px; }
	.float-contact__btn .icon { width: 23px; height: 23px; }
}
.float-contact__btn--wa { background: var(--crimson); }
.float-contact__btn:hover { background: var(--ink); }

/* ------------------------------------------------------------- motion/print */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.moon { animation: none; }
}

@media print {
	.site-header nav, .float-contact, .product__cta, .more, .site-footer__social { display: none !important; }
	body { background: #fff; }
	.product__en { border: 0; }
	.product__en > .prose { display: block; }
}