/* ==========================================================================
   v5 refinements (global, loaded last)
   1. Whole pictures: framed photos are never cropped (assets/js/fullimg.js adds .hs-full and --hs-bg)
   2. Rhythm: tighter vertical gaps so sections do not leave large empty bands
   3. Reading widths and wrapping
   ========================================================================== */

/* ---- 1 · whole pictures ------------------------------------------------- */
.media-slot.hs-full .media-slot__inner {
	overflow: hidden;
	background: #0b0907;
}

/* soft blurred copy of the photo behind the whole picture: fills any spare space in the frame */
.media-slot.hs-full .media-slot__inner::before {
	content: '';
	position: absolute;
	inset: -10%;
	background-image: var(--hs-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(24px) saturate(1.15) brightness(0.55);
	transform: translateZ(0);
}

.media-slot.hs-full .media-slot__media {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	object-position: center;
}

.tone-ivory .media-slot.hs-full .media-slot__inner { background: #e9d9c3; }
.tone-ivory .media-slot.hs-full .media-slot__inner::before { filter: blur(24px) saturate(1.1) brightness(0.9); }

.media-slot.hs-zoom { cursor: zoom-in; }
.media-slot.hs-zoom:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }

/* a photo sits fully inside its card/panel; keep captions and overlays above the blur */
.media-slot.hs-full .media-slot__overlay,
.media-slot.hs-full .media-slot__caption { z-index: 2; }

/* ---- 2 · rhythm ---------------------------------------------------------- */
.section-head { margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem); }
.section-head + * { margin-top: 0; }
.section > .wrap > :last-child { margin-bottom: 0; }

/* ---- 3 · reading widths -------------------------------------------------- */
.section-head__lead,
.lead { max-width: min(62ch, 100%); }

/* ---- 4 · floating 3D decoration (hs_deco) -------------------------------- */
.hs-deco { position: absolute; z-index: 0; pointer-events: none; width: clamp(110px, 12vw, 200px); aspect-ratio: 1; opacity: 0.95; }
.hs-deco--sm { width: clamp(80px, 8vw, 140px); }
.hs-deco--lg { width: clamp(150px, 17vw, 280px); }
.hs-deco--tl { top: clamp(1rem, 4vw, 3rem); left: clamp(0.25rem, 2.5vw, 2.5rem); }
.hs-deco--tr { top: clamp(1rem, 4vw, 3rem); right: clamp(0.25rem, 2.5vw, 2.5rem); }
.hs-deco--bl { bottom: clamp(1rem, 4vw, 3rem); left: clamp(0.25rem, 2.5vw, 2.5rem); }
.hs-deco--br { bottom: clamp(1rem, 4vw, 3rem); right: clamp(0.25rem, 2.5vw, 2.5rem); }
.hs-deco--ml { top: 50%; left: clamp(0rem, 1.5vw, 1.5rem); translate: 0 -50%; }
.hs-deco--mr { top: 50%; right: clamp(0rem, 1.5vw, 1.5rem); translate: 0 -50%; }
.hs-deco .media-slot, .hs-deco .media-slot__inner, .hs-deco .media-slot__placeholder { background: transparent; box-shadow: none; overflow: visible; }
.hs-deco .media-slot__pattern { display: none; }
.hs-deco .media-slot__art { color: var(--saffron); filter: drop-shadow(0 0 28px rgba(244, 122, 31, 0.45)); }
.hs-deco model-viewer { background: transparent; --poster-color: transparent; }
@media (max-width: 899px) { .hs-deco { display: none; } }
/* decoration must never create sideways scroll */
.section:has(> .hs-deco), .section:has(.hs-deco) { overflow-x: clip; }