/* Admin-selectable home layouts (Admin Settings › Home page).
   One skeleton — hero + alternating media/copy sections — restyled per layout
   through the .hl-<layout> class on .hl-page. Theme-aware via the site vars
   (works in both light and dark). Geometry mirrors the approved mockups in
   design_mockups/home_redesign/. */

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.hl-page { position: relative; background: var(--theme-bg); color: var(--theme-text-primary); overflow-x: clip; }

/* ── Olive fronds (per-page toggle, Manage → Pages) ─────────────────────
   Four faint branches (core/_branch.html — the rosette's leaf language)
   spread down the page background: two bleeding off the left edge, two off
   the right, at 2%/30%/58%/96% of the page height. They sit behind every
   section (all sections are positioned, painted later in DOM order) and
   sway almost imperceptibly, staggered so they never move in unison —
   still air, not wind. Sway parks under reduced-motion / the site switch. */
.hl-fronds { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; }
.cv-frond { position: absolute; width: clamp(190px, 24vw, 360px);
  color: var(--brand-olive); opacity: .07; }
html.theme-dark .cv-frond { opacity: .1; }
.cv-frond svg { display: block; width: 100%; height: auto; }
.cv-branch__olives { fill: var(--brand-gold); }
.cv-frond--tl { top: 1.5%; left: -4rem; transform: rotate(6deg); }
.cv-frond--mr { top: 30%; right: -4.5rem; transform: scaleX(-1) rotate(4deg); }
.cv-frond--ml { top: 58%; left: -4.5rem; transform: rotate(-3deg); }
.cv-frond--br { top: 96%; right: -4rem; transform: scaleX(-1) rotate(-8deg) translateY(-70%); }
@keyframes cv-frond-sway { from { transform: rotate(-.7deg); }
  to { transform: rotate(.9deg); } }
.cv-branch__sway { transform-origin: 8% 96%;
  animation: cv-frond-sway 13s ease-in-out infinite alternate; }
.cv-frond--mr .cv-branch__sway { animation-delay: -4s; animation-duration: 15s; }
.cv-frond--ml .cv-branch__sway { animation-delay: -8s; animation-duration: 17s; }
.cv-frond--br .cv-branch__sway { animation-delay: -11s; }
@media (prefers-reduced-motion: reduce) { .cv-branch__sway { animation: none; } }
html.motion-disabled .cv-branch__sway { animation: none; }
@media (max-width: 900px) {
  .cv-frond { width: clamp(150px, 34vw, 220px); }
  /* two fronds are plenty on a phone */
  .cv-frond--mr, .cv-frond--ml { display: none; }
}

/* Sprigs: with the page-level fronds pinned at four fixed heights, text-only
   stretches between them stayed bare — so every section carries its own
   small frond, peeking from behind the copy's outer corner and alternating
   sides with the a/b rhythm. Layering rides DOM order, not negative z
   (sections aren't stacking contexts, so z:-1 would sink below the page's
   opaque background): the sprig is emitted BEFORE the media and copy, and
   every other section child is positioned, so they all paint above it — an
   opaque full-bleed scene simply covers its sprig, which is the right
   outcome. Quotes ARE stacking contexts (z-index:1), so their sprig can sit
   at z:-1, between the background and the words. */
.cv-sprig { position: absolute; width: clamp(130px, 15vw, 210px);
  color: var(--brand-olive); opacity: .06; z-index: 0; pointer-events: none; }
html.theme-dark .cv-sprig { opacity: .085; }
.cv-sprig svg { display: block; width: 100%; height: auto; }
.hl-sec--a .cv-sprig { top: 7%; right: -2.2rem; transform: scaleX(-1) rotate(7deg); }
.hl-sec--b .cv-sprig { top: 7%; left: -2.2rem; transform: rotate(-7deg); }
/* quotes: a single sprig resting behind the words, slightly larger and
   fainter — the frost veil sits between it and the type */
.hl-quote .cv-sprig--quote { top: 50%; left: 50%; right: auto;
  width: clamp(150px, 16vw, 230px); opacity: .05; z-index: -1;
  transform: translate(-50%, -56%) rotate(14deg); }
html.theme-dark .hl-quote .cv-sprig--quote { opacity: .075; }
.hl-page video, .hl-page .hl-media img, .hl-page .hl-bg img, .hl-hero__media img {
  display: block; width: 100%; height: 100%; object-fit: cover; }

.hl-accent { font-style: italic; color: var(--brand-gold); }
/* inline-flex, not block: centres the rosette against the caps while still
   riding the parent's text-align (centred hero, right-aligned .hl-sec--b). */
/* Eyebrow: sized to be SEEN — responsive type (was a fixed .85rem) and no
   local rosette override: the mark takes its 2em size from .cv-eyebrow-mark
   in custom.css. A smaller override here is what made every past "make the
   rosette bigger" change imperceptible — don't add one back. */
.hl-eyebrow { display: inline-flex; align-items: center;
  font-family: var(--font-code, monospace);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem);
  font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  line-height: 1.2; color: var(--brand-gold); margin-bottom: .9rem; }
.hl-page h1 { font-family: var(--font-longform, serif); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.12; }
.hl-page h2 { font-family: var(--font-longform, serif); font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; margin-bottom: 1.3rem; }
.hl-copy p { color: var(--theme-text-secondary); font-weight: 300; line-height: 1.7;
  max-width: 34rem; }
.hl-copy p + p { margin-top: 1rem; }
/* Hero lead: same voice as the section bodies (Inter, generous leading) but a
   step bolder — 350 on the variable axis sits between the sections' light 300
   and regular, so the hero reads consistent yet slightly emphasised. */
.hl-lead { color: var(--theme-text-secondary); max-width: 38rem; margin: 1.1rem auto 0;
  font-weight: 350; line-height: 1.7; }
.hl-cta { margin-top: 1.8rem; }

/* ── Body lists (auto-styled from "- item" / "1. item" lines in the body) ──
   Numbered lists carry oversized italic serif numerals in gold (a CSS
   counter, so the admin's own numbers are ignored and renumbering is free);
   bulleted lists use the brand rosette (gold dash via --plain when the motif
   is off). Items cascade in with the section's reveal — staggered, subtle,
   and inert for reduced-motion / the site's motion switch. */
.hl-list { list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; gap: 1.05rem; max-width: 34rem; text-align: left; }
.hl-list__text { color: var(--theme-text-secondary); font-weight: 300;
  line-height: 1.65; display: block; }
.hl-sec--b .hl-copy .hl-list { margin-left: auto; }
.hl-quote .hl-list, .hl-hero__inner .hl-list,
.hl-sec--photo_bg .hl-copy .hl-list { margin-left: auto; margin-right: auto; }
/* numbered: 01 / 02 / 03 in display type */
.hl-list--num { counter-reset: hl-item; }
.hl-list--num li { counter-increment: hl-item; position: relative;
  padding: 0.15rem 0 0.15rem 3.6rem; min-height: 2.6rem; }
.hl-list--num li::before { content: counter(hl-item, decimal-leading-zero);
  position: absolute; left: 0; top: -0.4rem;
  font-family: var(--font-longform, serif); font-style: italic;
  font-weight: 500; font-size: clamp(2rem, 1.7rem + 1vw, 2.7rem);
  line-height: 1.15; color: var(--brand-gold); }
/* a fading gold thread under each numeral ties it to its line */
.hl-list--num li::after { content: ""; position: absolute; left: 0;
  top: calc(-0.4rem + clamp(2rem, 1.7rem + 1vw, 2.7rem) * 1.05);
  width: 2.6rem; height: 1px;
  background: linear-gradient(to right, var(--brand-gold), transparent); }
/* bulleted: rosette (or gold dash) beside the text */
.hl-list--marks li { display: flex; align-items: flex-start; gap: 0.65rem; }
.hl-list--plain li::before { content: "—"; color: var(--brand-gold);
  font-weight: 500; flex: 0 0 auto; }
/* reveal choreography: items slide in one after the other, numerals bloom */
.hl-reveal .hl-list li { opacity: 0; transform: translateX(-14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.hl-reveal .hl-list--num li::before { opacity: 0; scale: .6;
  transition: opacity .8s ease, scale .8s cubic-bezier(.16, 1, .3, 1); }
.hl-reveal.visible .hl-list li { opacity: 1; transform: none; }
.hl-reveal.visible .hl-list--num li::before { opacity: 1; scale: 1; }
.hl-reveal.visible .hl-list li:nth-child(1) { transition-delay: .15s; }
.hl-reveal.visible .hl-list li:nth-child(2) { transition-delay: .3s; }
.hl-reveal.visible .hl-list li:nth-child(3) { transition-delay: .45s; }
.hl-reveal.visible .hl-list li:nth-child(4) { transition-delay: .6s; }
.hl-reveal.visible .hl-list li:nth-child(n+5) { transition-delay: .72s; }
.hl-reveal.visible .hl-list--num li::before { transition-delay: inherit; }
@media (prefers-reduced-motion: reduce) {
  .hl-reveal .hl-list li, .hl-reveal .hl-list--num li::before {
    opacity: 1; transform: none; scale: 1; transition: none; }
}
html.motion-disabled .hl-reveal .hl-list li,
html.motion-disabled .hl-reveal .hl-list--num li::before {
  opacity: 1; transform: none; scale: 1; transition: none; }
@media (max-width: 640px) {
  .hl-list--num li { padding-left: 3rem; }
  .hl-list--num li::after { width: 2.2rem; }
}

/* Hero — content floats in softly on load, one child after the other */
@keyframes hl-hero-in { from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; } }
.hl-hero { position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 6rem 1.5rem 4rem; }
.hl-hero__inner > * { animation: hl-hero-in 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.hl-hero__inner > *:nth-child(2) { animation-delay: .12s; }
.hl-hero__inner > *:nth-child(3) { animation-delay: .24s; }
.hl-hero__inner > *:nth-child(4) { animation-delay: .36s; }
.hl-hero__inner > *:nth-child(5) { animation-delay: .48s; }
/* overflow: the Ken Burns drift (photo heroes, "Photo motion" option) scales
   the img past the hero bounds — clip it like .hl-media/.hl-bg do. */
.hl-hero__media { position: absolute; inset: 0; overflow: hidden; }
.hl-hero__media--faded img { opacity: .35; }
.hl-hero__veil { position: absolute; inset: 0;
  background: linear-gradient(200deg,
    color-mix(in srgb, var(--theme-bg) 35%, transparent),
    color-mix(in srgb, var(--theme-bg) 88%, transparent)); }
.hl-hero__inner { position: relative; z-index: 2; max-width: 52rem; }
.hl-hero__emblem { margin-bottom: 1.4rem; }   /* the color-cycling lockup (.hero-emblem sizes it) */
.hl-hero__cta { margin-top: 2.2rem; display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; }

/* Sections: media + copy, alternating */
.hl-sec { position: relative; display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 3rem; align-items: center; max-width: 96rem; margin: 0 auto;
  padding: 3.5rem 3vw; }
.hl-sec--b { grid-template-columns: 1fr 1.2fr; }
.hl-sec--b .hl-media { order: 2; }
.hl-sec--b .hl-copy { order: 1; text-align: right; }
.hl-sec--b .hl-copy p { margin-left: auto; }
.hl-media { position: relative; height: 70vh; overflow: hidden; }
.hl-media__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--theme-bg) 30%, transparent), transparent 40%); }

/* Faded-background photo mode: media column collapses, photo washes behind copy */
.hl-sec--photo_bg { display: block; min-height: 72vh; }
.hl-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hl-bg img { opacity: .3;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 100%); }
.hl-sec--photo_bg .hl-copy { position: relative; z-index: 1; max-width: 44rem;
  margin: 0 auto; text-align: center; padding: 14vh 1.5rem; }
.hl-sec--photo_bg .hl-copy p { margin-left: auto; margin-right: auto; }

/* Brand motif — always present in these layouts (client direction): the
   flower mark, rosette eyebrows, dividers and bloom buttons render in every
   layout and theme; colour-morphing is handled by the cv-* rules in custom.css. */
.hl-mark { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.hl-mark .cv-flower { width: 3.4rem; height: 3.4rem; }
.hl-divider { position: relative; z-index: 2; margin: 0 auto; padding: 1.2rem 0; }
.hl-quote__rule { display: block; margin-top: 1.3rem; }
/* Same visual weight as the (deliberately prominent) eyebrow rosette —
   it closes a pull-quote, so it should be seen, not squinted at. */
.hl-quote__rule .cv-rosette { width: clamp(2rem, 1.85rem + 0.6vw, 2.4rem);
  height: clamp(2rem, 1.85rem + 0.6vw, 2.4rem); }

/* Heritage flavour: gold-italic emphasis in headings (matches the classic
   heritage page) and centred pull-quotes between sections. */
.hl-page h1 em, .hl-page h2 em { font-style: italic; color: var(--brand-gold); }
.hl-quote { max-width: 44rem; margin: 0 auto; padding: 4.5rem 1.5rem;
  text-align: center; }
.hl-quote p { font-family: var(--font-longform, serif); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.5;
  color: var(--theme-text-secondary); }

/* Shop preview strip. The page has no footer of its own (base.html's
   luxury-footer follows); keep breathing room before it. */
.hl-shop { max-width: 80rem; margin: 0 auto; padding: 1rem 2rem 3rem; }
.hl-page { padding-bottom: 4rem; }

/* Reveal on scroll — the section floats up while its media fades in and the
   copy children cascade (eyebrow → title → paragraphs → CTA). */
.hl-reveal { opacity: 0; transform: translateY(34px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.hl-reveal.visible { opacity: 1; transform: none; }
.hl-reveal .hl-media, .hl-reveal .hl-bg { opacity: 0; transition: opacity 1.3s ease; }
.hl-reveal.visible .hl-media, .hl-reveal.visible .hl-bg { opacity: 1; }
.hl-reveal .hl-copy > * { opacity: 0; transform: translateY(18px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.16, 1, .3, 1); }
.hl-reveal.visible .hl-copy > * { opacity: 1; transform: none; }
.hl-reveal.visible .hl-copy > *:nth-child(1) { transition-delay: .12s; }
.hl-reveal.visible .hl-copy > *:nth-child(2) { transition-delay: .22s; }
.hl-reveal.visible .hl-copy > *:nth-child(3) { transition-delay: .32s; }
.hl-reveal.visible .hl-copy > *:nth-child(4) { transition-delay: .42s; }
.hl-reveal.visible .hl-copy > *:nth-child(5) { transition-delay: .52s; }
.hl-reveal.visible .hl-copy > *:nth-child(n+6) { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .hl-reveal, .hl-reveal .hl-media, .hl-reveal .hl-bg, .hl-reveal .hl-copy > *,
  .hl-hero__inner > * { opacity: 1; transform: none; transition: none; animation: none; }
}
/* Site-level motion switch (html.motion-disabled) — same stance. */
html.motion-disabled .hl-reveal, html.motion-disabled .hl-reveal .hl-media,
html.motion-disabled .hl-reveal .hl-bg, html.motion-disabled .hl-reveal .hl-copy > *,
html.motion-disabled .hl-hero__inner > * {
  opacity: 1; transform: none; transition: none; animation: none; }

/* Brina — the edgeless frost that rests behind copy over imagery.
   Replaces the old desktop-only bordered hover panel: the frost is now always
   there at a whisper (touch devices finally get the legibility layer), a
   pointer arriving merely deepens it to a breath, and on touch it condenses
   as the section scrolls into the reading band (riding the .hl-reveal
   observer). Only opacity and tint ever animate — never the blur radius
   (transitioning backdrop-filter re-filters the backdrop every frame).
   No border, no radius, no box-shadow: the radial mask (--frost-mask,
   custom.css) is the only edge, it reaches 0 alpha inside the pseudo's box,
   and the negative insets that give it fade room shrink on narrow screens
   where .hl-sec clips overflow — a clipped mask would re-create exactly the
   hard edge this replaces. The gold the old 1px border carried lives on as a
   masked wash warming the top of the frost: brand presence, zero drawn edges.
   Per-section opt-out: .hl-frost-off (Manage → Pages, “Text over the media”). */
.hl-copy, .hl-quote { position: relative; z-index: 1; }
.hl-copy::before, .hl-quote::before, .hl-hero__inner::before {
  content: ""; position: absolute; inset: -2.2rem -2.6rem;
  z-index: -1; opacity: .85; pointer-events: none;
  background:
    radial-gradient(90% 130% at 50% 0%,
      color-mix(in srgb, var(--brand-gold) 6%, transparent), transparent 65%),
    var(--frost-whisper-tint);
  -webkit-backdrop-filter: blur(var(--frost-whisper-blur)) saturate(1.05);
          backdrop-filter: blur(var(--frost-whisper-blur)) saturate(1.05);
  -webkit-mask-image: var(--frost-mask);
          mask-image: var(--frost-mask);
  transition: opacity .55s ease, background-color .55s ease; }
.hl-quote::before { inset: .9rem -1.6rem; }
/* The hero centres its copy over the veil — a soft whisper is enough. */
.hl-hero__inner::before { opacity: .7; }
/* The shuffle copy card is already an opaque dealt plate — no frost, by design. */
.hl-shuffle .hl-copy::before { display: none; }
/* Per-section opt-out from the page editor (“Plain — text sits directly…”). */
.hl-frost-off .hl-copy::before, .hl-quote.hl-frost-off::before,
.hl-frost-off .hl-hero__inner::before { display: none; }

/* --- Frost animations (Manage → Pages, “Frost animation”) -----------------
   The frost's MASK comes alive; tint/blur/edge stay the production frost.
   Standard mask-* longhands only: mixing legacy -webkit-mask-composite
   keywords with the standard property inverts the compositing in Blink.
   Desktop only (phones keep the still frost — animating a masked
   backdrop-filter layer is too costly there), and both variants freeze under
   reduced-motion / the site's motion switch (frost is legibility first). */
.hl-page {
  /* Faded-rectangle frost for the animated variants: two intersected
     linear fades back the whole copy area and dissolve softly at every rim —
     no visible edge anywhere. */
  --frost-mask-x: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  --frost-mask-y: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  /* Olive grove: four branches, dozens of slender leaves scattered along the
     stems (generated placement), varied scale/orientation, each swaying on
     its own SMIL clock (5.6/6.8/7.9/9.3s) inside the mask SVG. */
  --frost-branch-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 300'><defs><path id='l' d='M0 0 C 3.2 -8 3.4 -20 0 -30 C -3.4 -20 -3.2 -8 0 0 Z'/><g id='br'><path d='M16 250 C 58 212, 92 170, 122 128 C 152 88, 192 50, 230 18' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/><path d='M118 132 C 138 122, 158 116, 180 118' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round'/><path d='M72 194 C 90 188, 106 190, 120 200' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round'/><g fill='black'><use href='%23l' transform='translate(23 243) rotate(94) scale(0.92)'/><use href='%23l' transform='translate(32 235) rotate(-7) scale(1.01)'/><use href='%23l' transform='translate(32 235) rotate(98) scale(0.81)'/><use href='%23l' transform='translate(43 224) rotate(84) scale(0.89)'/><use href='%23l' transform='translate(54 212) rotate(1) scale(0.95)'/><use href='%23l' transform='translate(66 199) rotate(96) scale(1.03)'/><use href='%23l' transform='translate(74 190) rotate(-22) scale(0.98)'/><use href='%23l' transform='translate(74 190) rotate(82) scale(0.92)'/><use href='%23l' transform='translate(84 177) rotate(82) scale(1.11)'/><use href='%23l' transform='translate(93 167) rotate(-15) scale(0.88)'/><use href='%23l' transform='translate(93 167) rotate(82) scale(1.07)'/><use href='%23l' transform='translate(101 156) rotate(84) scale(1.11)'/><use href='%23l' transform='translate(109 146) rotate(-24) scale(1.16)'/><use href='%23l' transform='translate(109 146) rotate(91) scale(1.01)'/><use href='%23l' transform='translate(119 132) rotate(94) scale(0.98)'/><use href='%23l' transform='translate(128 121) rotate(-12) scale(1.19)'/><use href='%23l' transform='translate(128 121) rotate(90) scale(0.82)'/><use href='%23l' transform='translate(137 109) rotate(99) scale(1.11)'/><use href='%23l' transform='translate(145 100) rotate(-16) scale(1.12)'/><use href='%23l' transform='translate(154 89) rotate(104) scale(1.28)'/><use href='%23l' transform='translate(165 78) rotate(4) scale(1.17)'/><use href='%23l' transform='translate(177 66) rotate(106) scale(0.98)'/><use href='%23l' transform='translate(188 56) rotate(8) scale(1.06)'/><use href='%23l' transform='translate(188 56) rotate(88) scale(0.82)'/><use href='%23l' transform='translate(199 45) rotate(89) scale(0.96)'/><use href='%23l' transform='translate(211 34) rotate(8) scale(1.05)'/><use href='%23l' transform='translate(223 24) rotate(110) scale(1.24)'/><use href='%23l' transform='translate(223 24) rotate(-0) scale(0.94)'/><use href='%23l' transform='translate(133 125) rotate(5) scale(0.80)'/><use href='%23l' transform='translate(133 125) rotate(111) scale(0.78)'/><use href='%23l' transform='translate(145 121) rotate(127) scale(0.84)'/><use href='%23l' transform='translate(145 121) rotate(27) scale(0.83)'/><use href='%23l' transform='translate(158 119) rotate(18) scale(0.99)'/><use href='%23l' transform='translate(171 118) rotate(145) scale(0.77)'/><use href='%23l' transform='translate(85 191) rotate(22) scale(1.03)'/><use href='%23l' transform='translate(85 191) rotate(130) scale(0.74)'/><use href='%23l' transform='translate(96 191) rotate(132) scale(0.77)'/><use href='%23l' transform='translate(96 191) rotate(55) scale(0.82)'/><use href='%23l' transform='translate(103 192) rotate(69) scale(0.80)'/><use href='%23l' transform='translate(103 192) rotate(150) scale(0.71)'/><use href='%23l' transform='translate(114 196) rotate(171) scale(0.80)'/><use href='%23l' transform='translate(114 196) rotate(72) scale(0.83)'/><use href='%23l' transform='translate(229 18) rotate(20) scale(1.11)'/><use href='%23l' transform='translate(229 18) rotate(60) scale(1.15)'/><use href='%23l' transform='translate(229 18) rotate(95) scale(1.02)'/></g><g fill='black'><circle cx='180' cy='122' r='6.5'/><circle cx='172' cy='131' r='5.2'/><circle cx='118' cy='203' r='5.6'/><circle cx='126' cy='196' r='4.6'/></g></g><filter id='f' x='-25%25' y='-25%25' width='150%25' height='150%25'><feGaussianBlur stdDeviation='1.8'/></filter></defs><g filter='url(%23f)'><g transform='translate(250 10) scale(.88)'><g><animateTransform attributeName='transform' type='rotate' values='-2.6 16 250; 2.6 16 250; -2.6 16 250' keyTimes='0; .5; 1' calcMode='spline' keySplines='.42 0 .58 1; .42 0 .58 1' dur='5.6s' repeatCount='indefinite'/><use href='%23br'/></g></g><g transform='translate(148 30) rotate(118) scale(.5)'><g><animateTransform attributeName='transform' type='rotate' values='3.4 16 250; -3.4 16 250; 3.4 16 250' keyTimes='0; .5; 1' calcMode='spline' keySplines='.42 0 .58 1; .42 0 .58 1' dur='6.8s' repeatCount='indefinite'/><use href='%23br'/></g></g><g transform='translate(108 306) rotate(-35) scale(-.62 .62)'><g><animateTransform attributeName='transform' type='rotate' values='-3 16 250; 3 16 250; -3 16 250' keyTimes='0; .5; 1' calcMode='spline' keySplines='.42 0 .58 1; .42 0 .58 1' dur='7.9s' repeatCount='indefinite'/><use href='%23br'/></g></g><g transform='translate(468 240) rotate(146) scale(.56)'><g><animateTransform attributeName='transform' type='rotate' values='2.4 16 250; -2.4 16 250; 2.4 16 250' keyTimes='0; .5; 1' calcMode='spline' keySplines='.42 0 .58 1; .42 0 .58 1' dur='9.3s' repeatCount='indefinite'/><use href='%23br'/></g></g></g></svg>");
}
@media (min-width: 901px) {
  /* Marea — pockets of near-transparency drift through the frost like the sea
     from above (two repeating blob layers intersect the base mask at different
     speeds; floors > 0 so the copy keeps a whisper of support). The HERO copy is
     centred, so it rides the full-coverage plate (the sampled shape); standard
     sections and quotes keep their CURRENT frost shape/position — the layout's
     left/right ellipse — with the animation running inside it. */
  .hl-frostanim--waves .hl-hero__inner::before {
    mask-image: var(--frost-mask-x), var(--frost-mask-y),
      radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.07) 0%, rgba(0,0,0,.55) 40%, #000 70%),
      radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.6) 44%, #000 74%);
    mask-size: 100% 100%, 100% 100%, 430px 320px, 560px 400px;
    mask-repeat: no-repeat, no-repeat, repeat, repeat;
    mask-composite: intersect, intersect, intersect;
    animation: hl-frost-marea-hero 11s linear infinite;
  }
  @keyframes hl-frost-marea-hero {
    from { mask-position: center, center, 0 0, 0 0; }
    to   { mask-position: center, center, 430px -320px, -560px 400px; }
  }
  .hl-frostanim--waves .hl-copy::before, .hl-quote.hl-frostanim--waves::before {
    mask-image: var(--frost-mask),
      radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.07) 0%, rgba(0,0,0,.55) 40%, #000 70%),
      radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.6) 44%, #000 74%);
    mask-size: 100% 100%, 430px 320px, 560px 400px;
    mask-repeat: no-repeat, repeat, repeat;
    mask-composite: intersect, intersect;
    animation: hl-frost-marea-sec 11s linear infinite;
  }
  @keyframes hl-frost-marea-sec {
    from { mask-position: center, 0 0, 0 0; }
    to   { mask-position: center, 430px -320px, -560px 400px; }
  }
  /* Ramo d'ulivo — an olive-branch window of full transparency is subtracted
     from the frost and sways in the wind (SMIL inside the mask SVG). The variant
     runs a denser plate (breath tint/blur): a whisper is too faint for the
     window to read. Hero on the full plate; sections/quotes keep the current
     ellipse. */
  .hl-frostanim--branch .hl-copy::before, .hl-quote.hl-frostanim--branch::before,
  .hl-frostanim--branch .hl-hero__inner::before {
    opacity: .96;
    background:
      radial-gradient(90% 130% at 50% 0%,
        color-mix(in srgb, var(--brand-gold) 6%, transparent), transparent 65%),
      var(--frost-breath-tint);
    -webkit-backdrop-filter: blur(var(--frost-breath-blur)) saturate(1.05);
            backdrop-filter: blur(var(--frost-breath-blur)) saturate(1.05);
  }
  .hl-frostanim--branch .hl-hero__inner::before {
    mask-image: var(--frost-mask-x), var(--frost-mask-y), var(--frost-branch-mask);
    mask-size: 100% 100%, 100% 100%, 660px auto;
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-position: center, center, 58% 40%;
    mask-composite: intersect, subtract;
    animation: hl-frost-ramo-hero 9s ease-in-out infinite alternate;
  }
  @keyframes hl-frost-ramo-hero {
    from { mask-position: center, center, 58% 40%; }
    to   { mask-position: center, center, 52% 48%; }
  }
  .hl-frostanim--branch .hl-copy::before, .hl-quote.hl-frostanim--branch::before {
    mask-image: var(--frost-mask), var(--frost-branch-mask);
    mask-size: 100% 100%, 660px auto;
    mask-repeat: no-repeat, no-repeat;
    mask-position: center, 58% 40%;
    mask-composite: subtract;
    animation: hl-frost-ramo-sec 9s ease-in-out infinite alternate;
  }
  @keyframes hl-frost-ramo-sec {
    from { mask-position: center, 58% 40%; }
    to   { mask-position: center, 52% 48%; }
  }
}

/* Gold-text contrast — its own per-section toggle (Manage → Pages), independent
   of the frost animation and applied at every width. The gold accents (eyebrow,
   heading accent and heading emphasis) deepen to a higher-contrast bronze with a
   thin black edge, so they hold against bright imagery / moving clarity. The
   dark body copy is untouched; no shadow. */
.hl-goldedge :is(.hl-copy, .hl-hero__inner) .hl-eyebrow,
.hl-goldedge :is(.hl-copy, .hl-hero__inner) .hl-accent,
.hl-goldedge :is(.hl-copy, .hl-hero__inner) :is(h1, h2) em {
  color: #916826;
  -webkit-text-stroke: .3px rgba(0, 0, 0, .85);
}

/* Legibility first: reduced motion (and the site's motion switch) revert every
   animated frost to the plain still frost — the current look — at full strength:
   the mask returns to the layout ellipse and the plate to its whisper tint/blur
   (hero keeps its softer .7 opacity). */
@media (prefers-reduced-motion: reduce) {
  .hl-frostanim--waves .hl-copy::before, .hl-quote.hl-frostanim--waves::before,
  .hl-frostanim--waves .hl-hero__inner::before,
  .hl-frostanim--branch .hl-copy::before, .hl-quote.hl-frostanim--branch::before,
  .hl-frostanim--branch .hl-hero__inner::before {
    animation: none; opacity: .85;
    background:
      radial-gradient(90% 130% at 50% 0%,
        color-mix(in srgb, var(--brand-gold) 6%, transparent), transparent 65%),
      var(--frost-whisper-tint);
    -webkit-backdrop-filter: blur(var(--frost-whisper-blur)) saturate(1.05);
            backdrop-filter: blur(var(--frost-whisper-blur)) saturate(1.05);
    mask-image: var(--frost-mask); mask-size: 100% 100%;
    mask-repeat: no-repeat; mask-position: center; mask-composite: add; }
  .hl-frostanim--waves .hl-hero__inner::before,
  .hl-frostanim--branch .hl-hero__inner::before { opacity: .7; }
}
html.motion-disabled .hl-frostanim--waves .hl-copy::before,
html.motion-disabled .hl-quote.hl-frostanim--waves::before,
html.motion-disabled .hl-frostanim--waves .hl-hero__inner::before,
html.motion-disabled .hl-frostanim--branch .hl-copy::before,
html.motion-disabled .hl-quote.hl-frostanim--branch::before,
html.motion-disabled .hl-frostanim--branch .hl-hero__inner::before {
  animation: none; opacity: .85;
  background:
    radial-gradient(90% 130% at 50% 0%,
      color-mix(in srgb, var(--brand-gold) 6%, transparent), transparent 65%),
    var(--frost-whisper-tint);
  -webkit-backdrop-filter: blur(var(--frost-whisper-blur)) saturate(1.05);
          backdrop-filter: blur(var(--frost-whisper-blur)) saturate(1.05);
  mask-image: var(--frost-mask); mask-size: 100% 100%;
  mask-repeat: no-repeat; mask-position: center; mask-composite: add; }
html.motion-disabled .hl-frostanim--waves .hl-hero__inner::before,
html.motion-disabled .hl-frostanim--branch .hl-hero__inner::before { opacity: .7; }

/* Desktop pointers: the frost condenses from whisper to breath under the
   hand, and a still image breathes. `scale` is its own property, so it
   composes with the per-layout transforms (skew/rotate) on the inner media.
   VIDEO deliberately does NOT breathe on hover — a clip already carries its
   own motion, so a hover zoom on top reads as busy; only images zoom. */
@media (hover: hover) and (pointer: fine) {
  .hl-sec:hover .hl-copy::before, .hl-quote:hover::before { opacity: 1;
    background:
      radial-gradient(90% 130% at 50% 0%,
        color-mix(in srgb, var(--brand-gold) 6%, transparent), transparent 65%),
      var(--frost-breath-tint); }
  .hl-media img { transition: scale 1.6s cubic-bezier(.16, 1, .3, 1); }
  .hl-sec:hover .hl-media img { scale: 1.05; }
}
/* Touch: scroll position is where the visitor looks — the frost condenses as
   the section reveals (the .visible class home_layouts.js already stamps),
   starting faint (never unprotected) and settling at full. */
@media (hover: none) {
  .hl-reveal .hl-copy::before, .hl-quote.hl-reveal::before { opacity: .45;
    transition: opacity 1.1s ease .15s; }
  .hl-reveal.visible .hl-copy::before,
  .hl-quote.hl-reveal.visible::before { opacity: .95; }
}
/* Frost is legibility, not motion: reduced-motion (and the site's motion
   switch) get it at full strength immediately. The .hl-reveal block above
   targets element children, not pseudos, so these need their own rules. */
@media (prefers-reduced-motion: reduce) {
  .hl-copy::before, .hl-quote::before, .hl-hero__inner::before,
  .hl-reveal .hl-copy::before, .hl-quote.hl-reveal::before {
    opacity: .95; transition: none; }
}
html.motion-disabled .hl-copy::before, html.motion-disabled .hl-quote::before,
html.motion-disabled .hl-hero__inner::before,
html.motion-disabled .hl-reveal .hl-copy::before,
html.motion-disabled .hl-quote.hl-reveal::before {
  opacity: .95; transition: none; }
@media (prefers-reduced-transparency: reduce) {
  .hl-copy::before, .hl-quote::before, .hl-hero__inner::before {
    -webkit-backdrop-filter: none; backdrop-filter: none; }
    /* The whisper tint itself rises to near-opaque via the token override. */
}

@media (max-width: 900px) {
  .hl-sec, .hl-sec--b { display: block; padding: 2.5rem 1.4rem; }
  .hl-media { height: 48vh; height: 48svh; margin-bottom: 1.5rem; }
  .hl-sec--b .hl-copy { text-align: left; }
  .hl-sec--b .hl-copy p { margin-left: 0; }
}

/* ── ribbons: full-bleed sheared video bands, centred copy between ─────── */
.hl-ribbons .hl-sec { display: block; max-width: none; padding: 0; }
.hl-ribbons .hl-media { height: 78vh; margin: -4vw 0;
  clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw), 0 100%); }
.hl-ribbons .hl-sec--b .hl-media { clip-path: polygon(0 0, 100% 8vw, 100% 100%, 0 calc(100% - 8vw)); }
.hl-ribbons .hl-copy { max-width: 56rem; margin: 0 auto; text-align: center;
  padding: 9vw 1.5rem; position: relative; z-index: 2; }
.hl-ribbons .hl-copy p { margin-left: auto; margin-right: auto; }

/* ── split: full-viewport halves with a diagonal seam ──────────────────── */
.hl-split .hl-sec { max-width: none; min-height: 96vh; grid-template-columns: 1fr 1fr;
  gap: 0; padding: 0; overflow: hidden; }
.hl-split .hl-media { position: absolute; inset: 0; height: auto;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 52% 100%); }
.hl-split .hl-sec--b .hl-media { clip-path: polygon(0 0, 62% 0, 48% 100%, 0 100%); order: 0; }
.hl-split .hl-copy { position: relative; z-index: 2; grid-column: 1; padding: 5rem 4rem; }
.hl-split .hl-sec--b .hl-copy { grid-column: 2; }
@media (max-width: 900px) {
  .hl-split .hl-media { position: relative; clip-path: none; height: 48vh; }
}

/* ── staircase: skewed parallelogram cards stepping down ───────────────── */
.hl-staircase .hl-media { transform: skewY(-3.5deg); height: 72vh;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, transparent);
  box-shadow: 0 26px 70px rgba(18, 22, 19, .28); }
.hl-staircase .hl-media video, .hl-staircase .hl-media img { transform: skewY(3.5deg) scale(1.15); }
.hl-staircase .hl-sec--b .hl-media { transform: skewY(3.5deg); }
.hl-staircase .hl-sec--b .hl-media video, .hl-staircase .hl-sec--b .hl-media img {
  transform: skewY(-3.5deg) scale(1.15); }

/* ── cinematic: full-viewport scenes, diagonal scrim, side copy ────────── */
.hl-cinematic .hl-sec { display: flex; max-width: none; min-height: 100vh; min-height: 100svh; padding: 0; }
.hl-cinematic .hl-media { position: absolute; inset: 0; height: auto; }
.hl-cinematic .hl-media__shade { background: linear-gradient(105deg,
    color-mix(in srgb, var(--theme-bg) 92%, transparent) 30%,
    color-mix(in srgb, var(--theme-bg) 55%, transparent) 58%, transparent 78%); }
.hl-cinematic .hl-sec--b .hl-media__shade { background: linear-gradient(-105deg,
    color-mix(in srgb, var(--theme-bg) 92%, transparent) 30%,
    color-mix(in srgb, var(--theme-bg) 55%, transparent) 58%, transparent 78%); }
.hl-cinematic .hl-copy { position: relative; z-index: 2; align-self: center;
  max-width: 42rem; padding: 12vh 5vw; }
.hl-cinematic .hl-sec--b .hl-copy { margin-left: auto; }
/* The chapter's establishing shot: the scene settles from a gentle overscale
   while the diagonal scrim sweeps in — the layout previously had no motion
   of its own beyond the shared reveal, which read as flat for a layout
   named "Cinematic". Scale lives on the media WRAPPER (the img/video may
   carry kenburns or parallax on their own properties) and the section clips
   the overscale. Reduced-motion and the site switch get the settled frame. */
.hl-cinematic .hl-sec { overflow: clip; }
.hl-cinematic .hl-reveal .hl-media { transform: scale(1.045);
  transition: opacity 1.3s ease, transform 2.4s cubic-bezier(.16, 1, .3, 1); }
.hl-cinematic .hl-reveal.visible .hl-media { transform: scale(1); }
.hl-cinematic .hl-reveal .hl-media__shade { opacity: 0;
  transition: opacity 1.5s ease .25s; }
.hl-cinematic .hl-reveal.visible .hl-media__shade { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hl-cinematic .hl-reveal .hl-media { transform: none; transition: none; }
  .hl-cinematic .hl-reveal .hl-media__shade { opacity: 1; transition: none; }
}
html.motion-disabled .hl-cinematic .hl-reveal .hl-media { transform: none; transition: none; }
html.motion-disabled .hl-cinematic .hl-reveal .hl-media__shade { opacity: 1; transition: none; }

/* ── cinematic scroll-snap: full-page "chapters" ───────────────────────────
   Each chapter fills the viewport and the scroll settles onto chapter edges —
   scroll down and the next chapter locks into place, one screen at a time.
   Pure CSS scroll-snap on the document; scoped to cinematic pages via :has()
   so no other layout is affected. Phones snap too, but with `proximity` — a
   gentle settle that cooperates with the mobile browser's collapsing toolbar
   instead of fighting it; tablet/desktop get the hard `mandatory` lock.
   `svh` keeps a chapter exactly one visible screen tall. Honours the site +
   OS motion switches, falling back to ordinary scrolling. */
html:has(.hl-cinematic) { scroll-snap-type: y proximity; }
/* The site header is fixed (~77px) and would clip each chapter's heading where
   it locks to the top — the snap looked "half-under the header". Pad the snap
   port down by the header height so a locked chapter clears it. The hero can't
   scroll above 0 so it's unaffected, and its copy is vertically centred anyway. */
html:has(.hl-cinematic) { scroll-padding-top: 5rem; }
/* `mandatory` only where chapters are truly one screen tall — the stacked
   mobile layout (88svh sections) runs up to 900px, and a hard lock against
   not-quite-full sections fights the scroll in that band. */
@media (min-width: 901px) {
  html:has(.hl-cinematic) { scroll-snap-type: y mandatory; }
}
.hl-cinematic .hl-hero,
.hl-cinematic .hl-sec,
.hl-cinematic .hl-quote {
  scroll-snap-align: start;
  scroll-snap-stop: always;        /* one gesture = one chapter, never skipped */
}
/* Pull-quotes become a full chapter too, so every snap point is one screen
   and the rhythm never breaks on a short section. */
.hl-cinematic .hl-quote {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
/* The featured-products strip is a chapter for the same reason: under
   mandatory snapping a block with no snap point of its own is never a legal
   resting place, so the scroll jumped straight over it. Full height +
   centred, like the quotes. */
.hl-cinematic .hl-shop {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
/* And the site footer: aligning its END edge makes the document's end a
   valid snap stop, so the last gesture lands on chapter-bottom + footer
   instead of bouncing back (same treatment the heritage page uses). */
html:has(.hl-cinematic) .luxury-footer { scroll-snap-align: end; }
html.motion-disabled:has(.hl-cinematic) { scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) {
  html:has(.hl-cinematic) { scroll-snap-type: none; }
}

/* ── cinematic mobile: firmer copy frost ───────────────────────────────────
   Phones stack the copy full-width over the moving footage, and the aerial
   grove is a busy, mid-tone backdrop the whisper-strength frost barely lifts
   the type off. Scoped to this layout on phones only: a denser tint and the
   touch reveal settling at full opacity, so every chapter's copy reads cleanly.
   Tint/opacity only — the shared --frost-mask is left alone (a taller mask
   recreates the hard edge it exists to avoid on these overflow-clipped
   sections). Both themes resolve through --theme-bg automatically. */
@media (max-width: 768px) {
  .hl-cinematic {
    --frost-whisper-tint: color-mix(in srgb, var(--theme-bg) 60%, transparent);
    --frost-breath-tint: color-mix(in srgb, var(--theme-bg) 70%, transparent);
  }
  .hl-cinematic .hl-reveal.visible .hl-copy::before,
  .hl-cinematic .hl-quote.hl-reveal.visible::before { opacity: 1; }
}

/* ── cinematic MOBILE: smooth "melting scenes" (no snap) ────────────────────
   The full-viewport *snapped* chapters are a desktop paradigm. On phones/tablets
   the snap fought the momentum scroll, the forced 100svh scenes reflowed as the
   mobile toolbar collapsed, and the diagonal scrim cut a hard slanted edge across
   every scene — the page scrolled in jerky chunks. This replaces all of it with a
   continuous flow: scenes size to their copy (no forced full screen), the footage
   stays full-bleed but FEATHERS top & bottom so each scene dissolves into the warm
   page background instead of hard-cutting, and the scrim becomes a soft vertical
   wash. Desktop (≥901px) keeps the snapped cinematic chapters untouched. */
@media (max-width: 900px) {
  /* 1 · kill the snap — pure momentum scroll, no snap port. */
  html:has(.hl-cinematic) { scroll-snap-type: none; scroll-padding-top: 0; }
  .hl-cinematic .hl-hero, .hl-cinematic .hl-sec,
  .hl-cinematic .hl-quote, .hl-cinematic .hl-shop {
    scroll-snap-align: none; scroll-snap-stop: normal;
  }

  /* 2 · scenes flow at content height — no forced full screen, so no toolbar
     reflow and no chunky one-screen-per-scene jumps. Copy reads left, ragged
     right (the desktop right-alignment of -b scenes fights a phone column). */
  .hl-cinematic .hl-sec { display: block; min-height: 0; }
  .hl-cinematic .hl-quote, .hl-cinematic .hl-shop { min-height: 0; }
  .hl-cinematic .hl-copy { max-width: none; text-align: left; padding: 3.5rem 1.5rem; }
  .hl-cinematic .hl-sec--b .hl-copy { text-align: left; margin: 0; }
  .hl-cinematic .hl-sec--b .hl-copy p { margin-left: 0; }
  .hl-cinematic .hl-sec--photo_bg .hl-copy { padding: 3.5rem 1.5rem; }

  /* 3 · the footage dissolves into the page at top & bottom, so consecutive
     scenes melt together instead of hard-cutting (the mask feathers the whole
     media subtree, scrim included). */
  .hl-cinematic .hl-media {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
  }
  /* diagonal scrim → gentle vertical wash (no slanted edge). */
  .hl-cinematic .hl-media__shade,
  .hl-cinematic .hl-sec--b .hl-media__shade {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--theme-bg) 26%, transparent),
      color-mix(in srgb, var(--theme-bg) 44%, transparent));
  }

  /* 4 · hero stays immersive but lets the next scene PEEK (a scroll cue) and
     dissolves into it at the foot; stable small-viewport unit so it never jumps
     as the toolbar hides. */
  .hl-cinematic .hl-hero { min-height: 88svh; }
  .hl-cinematic .hl-hero__media {
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }
}

/* Keep the spinning brand emblem out of the cinematic scenes: the fixed
   bottom-right page watermark floats over every chapter, and the faint corner
   watermarks sit inside sections — both intrude on these deliberate full-frame
   compositions. Hidden in this layout only (other layouts keep them). */
body:has(.hl-cinematic) .cv-flower--page { display: none; }
.hl-cinematic .cv-flower--watermark { display: none; }

/* ── rail: framed media with clipped corner, gold diagonal thread ──────── */
.hl-rail .hl-media { height: 70vh;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%); }
.hl-rail .hl-sec--b .hl-media { clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 88%); }
.hl-rail .hl-sec::after { content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 7rem; z-index: -1;
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--brand-gold) 50%, transparent), transparent);
  transform: rotate(24deg); }
.hl-rail .hl-sec--b::after { transform: rotate(-24deg); }
.hl-rail .hl-sec:last-of-type::after { display: none; }

/* ── leaf: the signature leaf shape as the media window ────────────────── */
.hl-leaf .hl-media { height: 74vh; border-radius: 0 42% 0 42%; transform: rotate(-4deg);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 50%, transparent);
  box-shadow: 0 28px 80px rgba(18, 22, 19, .3); }
.hl-leaf .hl-media video, .hl-leaf .hl-media img { transform: rotate(4deg) scale(1.22); }
.hl-leaf .hl-sec--b .hl-media { border-radius: 42% 0 42% 0; transform: rotate(4deg); }
.hl-leaf .hl-sec--b .hl-media video, .hl-leaf .hl-sec--b .hl-media img {
  transform: rotate(-4deg) scale(1.22); }

/* ── leafmorph: the original signature move — a leaf-shaped photo frame that
   morphs into a rounder "olive" on hover (and, on touch, when the section
   scrolls into view), crossfading to an optional second photo. The gold
   gradient border solidifies through the morph. No scroll-driven video. ── */
.hl-leafmorph .hl-media {
  height: 68vh;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--theme-bg), var(--theme-bg)) padding-box,
    linear-gradient(135deg, var(--brand-gold) 0%,
      color-mix(in srgb, var(--brand-gold) 25%, transparent) 60%, transparent 100%) border-box;
  box-shadow: 0 12px 32px rgba(18, 22, 19, .18);
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;   /* leaf, points ↗↙ */
  transition: border-radius .8s cubic-bezier(.16, 1, .3, 1),
              transform .8s cubic-bezier(.16, 1, .3, 1),
              box-shadow .8s cubic-bezier(.16, 1, .3, 1),
              background .8s ease; }
.hl-leafmorph .hl-sec--b .hl-media {
  border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%; } /* mirror, points ↖↘ */
/* The crossfade + morph carry the motion, so silence any Ken Burns drift. */
.hl-leafmorph .hl-media img { animation: none; }
/* Two stacked photos when a hover image is supplied (single photo just morphs). */
.hl-leafmorph .hl-media--dual .hl-media__primary,
.hl-leafmorph .hl-media--dual .hl-media__hover {
  position: absolute; inset: 0;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
              transform .8s cubic-bezier(.16, 1, .3, 1); }
.hl-leafmorph .hl-media--dual .hl-media__hover { opacity: 0; transform: scale(1.1); }

/* Shared morph target ("olive") — applied on desktop :hover and, on touch,
   once the section is in view (.visible, set by home_layouts.js). */
@media (hover: hover) and (pointer: fine) {
  .hl-leafmorph .hl-sec:hover .hl-media {
    border-radius: 20% 100% 20% 80% / 20% 80% 20% 100%;
    transform: scale(1.06) rotate(1deg);
    background:
      linear-gradient(var(--theme-bg), var(--theme-bg)) padding-box,
      linear-gradient(135deg, var(--brand-gold), var(--brand-gold)) border-box;
    box-shadow: 0 25px 55px rgba(207, 161, 63, .3), 0 0 30px rgba(207, 161, 63, .2); }
  .hl-leafmorph .hl-sec--b:hover .hl-media {
    border-radius: 100% 20% 80% 20% / 80% 20% 100% 20%;
    transform: scale(1.06) rotate(-1deg); }
  .hl-leafmorph .hl-sec:hover .hl-media--dual .hl-media__primary { opacity: 0; transform: scale(.96); }
  .hl-leafmorph .hl-sec:hover .hl-media--dual .hl-media__hover { opacity: 1; transform: scale(1); }
}
@media (hover: none) {
  .hl-leafmorph .hl-sec.visible .hl-media {
    border-radius: 20% 100% 20% 80% / 20% 80% 20% 100%;
    transform: scale(1.04) rotate(1deg);
    background:
      linear-gradient(var(--theme-bg), var(--theme-bg)) padding-box,
      linear-gradient(135deg, var(--brand-gold), var(--brand-gold)) border-box;
    box-shadow: 0 25px 55px rgba(207, 161, 63, .3), 0 0 30px rgba(207, 161, 63, .2); }
  .hl-leafmorph .hl-sec--b.visible .hl-media {
    border-radius: 100% 20% 80% 20% / 80% 20% 100% 20%;
    transform: scale(1.04) rotate(-1deg); }
  .hl-leafmorph .hl-sec.visible .hl-media--dual .hl-media__primary { opacity: 0; transform: scale(.96); }
  .hl-leafmorph .hl-sec.visible .hl-media--dual .hl-media__hover { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hl-leafmorph .hl-media, .hl-leafmorph .hl-media img { transition: none; }
}
html.motion-disabled .hl-leafmorph .hl-media,
html.motion-disabled .hl-leafmorph .hl-media img { transition: none; }

/* ── shuffle: dealt, overlapping plates and copy cards ─────────────────── */
.hl-shuffle .hl-sec { display: block; max-width: 94rem; padding: 3rem 2.5rem 0; }
.hl-shuffle .hl-media { width: 80%; height: 70vh; transform: rotate(-2deg);
  border: 1px solid var(--theme-border-subtle);
  box-shadow: 24px 34px 80px rgba(18, 22, 19, .3); }
.hl-shuffle .hl-sec--b .hl-media { margin-left: auto; transform: rotate(2deg);
  box-shadow: -24px 34px 80px rgba(18, 22, 19, .3); }
.hl-shuffle .hl-copy { position: relative; z-index: 3; width: min(34rem, 88%);
  margin: -9rem 0 0 auto; padding: 2.4rem 2.6rem;
  background: color-mix(in srgb, var(--theme-bg) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 35%, transparent);
  transform: rotate(1.4deg); box-shadow: 0 26px 60px rgba(18, 22, 19, .28); }
.hl-shuffle .hl-sec--b .hl-copy { margin: -9rem auto 0 0; transform: rotate(-1.4deg);
  text-align: left; }
.hl-shuffle .hl-sec--b .hl-copy p { margin-left: 0; }
@media (max-width: 900px) {
  .hl-shuffle .hl-media { width: 100%; height: 46vh; }
  .hl-shuffle .hl-copy { width: 94%; margin: -3rem auto 0; }
}

/* ── marquee: thin slanted strips between centred stanzas ──────────────── */
.hl-marquee .hl-sec { display: block; max-width: none; padding: 2rem 0 0; overflow: clip; }
.hl-marquee .hl-copy { max-width: 52rem; margin: 0 auto; text-align: center;
  padding: 3.5rem 1.5rem; }
.hl-marquee .hl-copy p { margin-left: auto; margin-right: auto; }
.hl-marquee .hl-media { width: 116vw; margin-left: -8vw; height: 44vh;
  transform: rotate(-3deg); margin-top: 2.5rem; margin-bottom: 4rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  box-shadow: 0 22px 60px rgba(18, 22, 19, .28); }
.hl-marquee .hl-media video, .hl-marquee .hl-media img { transform: rotate(3deg) scale(1.18); }

/* ── editorial: quiet magazine grid with 45° gold ticks ─────────────────── */
.hl-editorial .hl-sec { gap: 1.6rem; padding: 4.5rem 2rem; }
.hl-editorial .hl-media { height: 74vh; }
.hl-editorial .hl-media::before, .hl-editorial .hl-media::after { content: "";
  position: absolute; width: 3rem; height: 1px; background: var(--brand-gold);
  transform: rotate(-45deg); z-index: 2; }
.hl-editorial .hl-media::before { top: 1.2rem; left: -.6rem; }
.hl-editorial .hl-media::after { bottom: 1.2rem; right: -.6rem; }

/* ── depth: one sinking scene, media ghosted behind copy ───────────────── */
.hl-depth .hl-sec { display: flex; max-width: none; min-height: 92vh; padding: 0;
  overflow: clip; }
.hl-depth .hl-media { position: absolute; inset: 0; height: auto; opacity: .55;
  -webkit-mask-image: linear-gradient(315deg, transparent 8%, #000 45%);
          mask-image: linear-gradient(315deg, transparent 8%, #000 45%); }
.hl-depth .hl-sec--b .hl-media {
  -webkit-mask-image: linear-gradient(45deg, transparent 8%, #000 45%);
          mask-image: linear-gradient(45deg, transparent 8%, #000 45%); }
.hl-depth .hl-media__shade { background: linear-gradient(to bottom,
    var(--theme-bg) 0%, transparent 22%, transparent 72%, var(--theme-bg) 100%); }
.hl-depth .hl-copy { position: relative; z-index: 2; align-self: center;
  max-width: 44rem; padding: 11vh 5vw; }
.hl-depth .hl-sec--b .hl-copy { margin-left: auto; }
.hl-depth .hl-sec[data-depth="2"] .hl-media { opacity: .42; }
.hl-depth .hl-sec[data-depth="3"] .hl-media { opacity: .3; }
.hl-depth .hl-sec[data-depth="4"] .hl-media { opacity: .2; }
/* depth media fades via the reveal, then settles at its ghost level */
.hl-depth .hl-reveal .hl-media { transition: opacity 1.3s ease; }

/* ── Per-section media-edge treatment (Manage → Pages, “Picture edges”) ────
   .hl-edge--fade: the picture window dissolves into the page on every side
   (rectangular vignette — two orthogonal gradients composited with
   intersect, so the image stays present and the corners melt softly).
   .hl-edge--diag: the picture dissolves diagonally TOWARD the copy, cut
   corner-to-corner with no hard line anywhere (the diagonal is intersected
   with soft top/bottom and outer-edge feathers); the direction mirrors with
   the a/b alternation so the dissolve always faces the text.
   Only the framed-window layouts respond — full-bleed and signature-shape
   layouts (cinematic, depth, ribbons, split, leaf, leafmorph) keep their
   geometry, and photo-background mode is already faded. The mask replaces
   the frame: border, shadow and corner clip go with it (a mask clips the
   element's whole paint, so a shadow would ghost through the fade as a hard
   rectangle). Masks live in element space, so they skew and rotate with the
   frame (staircase, shuffle, marquee). The media scale-on-hover breathes
   INSIDE the feathered window — mist stirring, not a photo zooming. */
.hl-staircase .hl-edge--fade .hl-media, .hl-editorial .hl-edge--fade .hl-media,
.hl-shuffle .hl-edge--fade .hl-media, .hl-marquee .hl-edge--fade .hl-media,
.hl-rail .hl-edge--fade .hl-media {
  border: 0; box-shadow: none; clip-path: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-composite: intersect; }
.hl-staircase .hl-edge--diag .hl-media, .hl-editorial .hl-edge--diag .hl-media,
.hl-shuffle .hl-edge--diag .hl-media, .hl-marquee .hl-edge--diag .hl-media,
.hl-rail .hl-edge--diag .hl-media {
  border: 0; box-shadow: none; clip-path: none;
  /* Fourth layer: a short feather on the copy-side edge itself — on wide
     frames the 105deg diagonal alone doesn't reach transparent along the
     whole copy-side edge, which would leave a faint hard seam at its corner. */
  -webkit-mask-image:
    linear-gradient(105deg, #000 40%, transparent 86%),
    linear-gradient(to right, transparent, #000 9%),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to left, transparent, #000 6%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(105deg, #000 40%, transparent 86%),
    linear-gradient(to right, transparent, #000 9%),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to left, transparent, #000 6%);
          mask-composite: intersect; }
.hl-staircase .hl-sec--b.hl-edge--diag .hl-media,
.hl-editorial .hl-sec--b.hl-edge--diag .hl-media,
.hl-shuffle .hl-sec--b.hl-edge--diag .hl-media,
.hl-marquee .hl-sec--b.hl-edge--diag .hl-media,
.hl-rail .hl-sec--b.hl-edge--diag .hl-media {
  -webkit-mask-image:
    linear-gradient(255deg, #000 40%, transparent 86%),
    linear-gradient(to left, transparent, #000 9%),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to right, transparent, #000 6%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(255deg, #000 40%, transparent 86%),
    linear-gradient(to left, transparent, #000 9%),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to right, transparent, #000 6%);
          mask-composite: intersect; }
/* The editorial ticks and the rail's gold thread are drawn ON the frame —
   when the frame dissolves, they go with it. */
.hl-editorial .hl-edge--fade .hl-media::before, .hl-editorial .hl-edge--fade .hl-media::after,
.hl-editorial .hl-edge--diag .hl-media::before, .hl-editorial .hl-edge--diag .hl-media::after {
  display: none; }
.hl-rail .hl-sec.hl-edge--fade::after,
.hl-rail .hl-sec.hl-edge--diag::after { display: none; }

/* ── Background moods (Manage → Pages, “Background photo mood”) ────────────
   Art direction for the faded-background photo mode and photo heroes.
   hl-mood--duotone: the photo is graded into the brand's gold/olive — a
   sepia-based filter chain on the img itself (no overlay layer, so the
   existing radial mask and opacity washes are untouched and nothing can
   paint outside the fade). Composes with the Ken Burns drift, which
   animates scale/translate, never filter.
   hl-mood--reveal: the brina metaphor on the photography — the background
   arrives frosted and clears as the section reaches the reading band
   (.visible, stamped by home_layouts.js). The blur lives on the WRAPPER,
   not the img: the img may already carry the kenburns animation, and a
   second animation there would cancel it. Reduced-motion and the site's
   motion switch skip the effect entirely (photo starts sharp). */
.hl-mood--duotone .hl-bg img,
.hl-hero.hl-mood--duotone .hl-hero__media img {
  filter: grayscale(1) sepia(.55) saturate(1.35) hue-rotate(-8deg) brightness(1.03); }
.hl-sec.hl-mood--reveal .hl-bg {
  filter: blur(16px) saturate(.92);
  transition: filter 1.9s cubic-bezier(.16, 1, .3, 1); }
.hl-sec.hl-mood--reveal.visible .hl-bg { filter: blur(0) saturate(1); }
@keyframes hl-bg-clear { from { filter: blur(16px) saturate(.92); }
  to { filter: blur(0) saturate(1); } }
.hl-hero.hl-mood--reveal .hl-hero__media {
  animation: hl-bg-clear 2.1s cubic-bezier(.16, 1, .3, 1) .25s both; }
@media (prefers-reduced-motion: reduce) {
  .hl-sec.hl-mood--reveal .hl-bg { filter: none; transition: none; }
  .hl-hero.hl-mood--reveal .hl-hero__media { animation: none; }
}
html.motion-disabled .hl-sec.hl-mood--reveal .hl-bg { filter: none; transition: none; }
html.motion-disabled .hl-hero.hl-mood--reveal .hl-hero__media { animation: none; }

/* hl-mood--grain: fine film texture + a slow-breathing gold light over the
   photo. Both layers ride the photo's own radial footprint (same mask as
   .hl-bg img) so nothing paints a rectangle over the copy area. The grain is
   static by design (animated grain reads as noise and burns battery); only
   the light drifts, and it holds still under reduced-motion / the switch. */
.hl-mood--grain .hl-bg::before, .hl-hero.hl-mood--grain .hl-hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E") repeat;
  background-size: 160px 160px; opacity: .13; mix-blend-mode: overlay;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 100%); }
.hl-mood--grain .hl-bg::after, .hl-hero.hl-mood--grain .hl-hero__media::after {
  content: ""; position: absolute; inset: -12%; z-index: 1; pointer-events: none;
  background: radial-gradient(42% 34% at 24% 22%,
    color-mix(in srgb, var(--brand-gold) 34%, transparent), transparent 72%);
  mix-blend-mode: soft-light; opacity: .65;
  animation: hl-leak 16s ease-in-out infinite alternate;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 100%); }
@keyframes hl-leak {
  from { transform: translate(0, 0) scale(1); opacity: .5; }
  to   { transform: translate(9%, 6%) scale(1.08); opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .hl-mood--grain .hl-bg::after, .hl-hero.hl-mood--grain .hl-hero__media::after {
    animation: none; } }
html.motion-disabled .hl-mood--grain .hl-bg::after,
html.motion-disabled .hl-hero.hl-mood--grain .hl-hero__media::after { animation: none; }

/* hl-mood--squarci: the photo shows through diagonal cuts (the site's shear
   angle) that open as the section arrives. The stripe mask sits on the
   CONTAINER, so the img's own radial fade still applies inside each cut.
   The cut width is a registered custom property so it can transition;
   without @property support the cuts simply render open. Reduced-motion
   gets the open state statically — the slashes are design, the opening is
   motion. (Heroes reuse the same .visible mechanism — home_layouts.js
   stamps it one frame after load.) */
@property --squarci { syntax: '<length>'; inherits: false; initial-value: 150px; }
.hl-sec.hl-mood--squarci .hl-bg, .hl-hero.hl-mood--squarci .hl-hero__media {
  --squarci: 34px;
  -webkit-mask-image: repeating-linear-gradient(115deg,
    #000 0 var(--squarci), transparent var(--squarci) calc(var(--squarci) + 26px));
          mask-image: repeating-linear-gradient(115deg,
    #000 0 var(--squarci), transparent var(--squarci) calc(var(--squarci) + 26px));
  transition: --squarci 1.7s cubic-bezier(.16, 1, .3, 1) .15s; }
.hl-sec.hl-mood--squarci.visible .hl-bg,
.hl-hero.hl-mood--squarci.visible .hl-hero__media { --squarci: 150px; }
@media (prefers-reduced-motion: reduce) {
  .hl-sec.hl-mood--squarci .hl-bg, .hl-hero.hl-mood--squarci .hl-hero__media {
    --squarci: 150px; transition: none; } }
html.motion-disabled .hl-sec.hl-mood--squarci .hl-bg,
html.motion-disabled .hl-hero.hl-mood--squarci .hl-hero__media {
  --squarci: 150px; transition: none; }

/* hl-mood--ora: the photo's grading follows the visitor's clock — cool
   silver in the morning, full colour at noon, amber at dusk, deep at night.
   home_layouts.js stamps day--* on <html>; with JS unavailable the photo
   simply renders natural. */
html.day--morning .hl-mood--ora .hl-bg img,
html.day--morning .hl-hero.hl-mood--ora .hl-hero__media img {
  filter: brightness(1.06) saturate(.82) hue-rotate(-6deg); }
html.day--noon .hl-mood--ora .hl-bg img,
html.day--noon .hl-hero.hl-mood--ora .hl-hero__media img {
  filter: saturate(1.15) contrast(1.03); }
html.day--dusk .hl-mood--ora .hl-bg img,
html.day--dusk .hl-hero.hl-mood--ora .hl-hero__media img {
  filter: sepia(.35) saturate(1.2) hue-rotate(-14deg) brightness(.96); }
html.day--night .hl-mood--ora .hl-bg img,
html.day--night .hl-hero.hl-mood--ora .hl-hero__media img {
  filter: brightness(.82) saturate(.75) hue-rotate(-10deg); }

/* ── Parallax (Photo motion option): the background drifts slower than the
   page. home_layouts.js writes the `translate` property per frame — never
   `transform`, which belongs to the layouts — and the `scale` overscan below
   hides the travel. Backgrounds and heroes only; composes with any mood
   (filters) because no property overlaps. */
.hl-motion--parallax .hl-bg img,
.hl-hero.hl-motion--parallax .hl-hero__media img { scale: 1.18; }

/* ── Capolettera (per-section toggle): oversized gold first letter on the
   section's first paragraph. Float method (portable) rather than
   initial-letter; the serif italic accent matches the heading accents. */
.hl-dropcap .hl-copy > p:first-of-type::first-letter {
  float: left; font-family: var(--font-longform, serif);
  font-size: 3.3em; line-height: .78; font-weight: 500;
  color: var(--brand-gold); padding: .06em .12em .02em 0; }

/* ── Text distribution (Manage → Pages, “Text distribution”) ───────────────
   Desktop-only ways for a section's body to OWN the width — phones always
   keep the single column (the .hl-body wrapper simply has no styles below
   901px). The wrapper holds only the body blocks, so eyebrows, headings and
   CTAs keep the layout's own rhythm. Containers widen where the text is the
   star (quotes, photo backgrounds, the stanza layouts); framed side-by-side
   layouts keep their column and gain the flow inside it. */
@media (min-width: 901px) {
  .hl-quote:is(.hl-flow--columns, .hl-flow--cascade, .hl-flow--split, .hl-flow--reveal) {
    max-width: 74rem; }
  .hl-quote .hl-body { text-align: left; }
  :is(.hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec):is(.hl-flow--columns, .hl-flow--cascade, .hl-flow--split, .hl-flow--reveal) .hl-copy {
    max-width: 76rem; }
  .hl-body { margin-top: 1.1rem; }
  .hl-body > p { max-width: none; }
  /* Overflow armour for every flow: blocks may never outgrow their track,
     and a long unbroken word wraps instead of escaping the viewport. */
  .hl-body > * { min-width: 0; overflow-wrap: break-word; }

  /* The GEOMETRIC flows (columns, offsets, split) live only where the text
     owns the width — quotes, photo backgrounds and the stanza layouts. In
     the framed side-by-side layouts the copy column is too narrow: offsets
     pushed blocks past the frame (worst at high zoom, where rem outgrows
     the column), so there the wrapper simply stays a single column.
     Rivelazione has no geometry and applies everywhere. */

  /* Duetto — two columns divided by a gold rule; paragraphs may break for
     balance, lists never do. */
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--columns {
    columns: 2; column-gap: 4.5rem;
    column-rule: 1px solid color-mix(in srgb, var(--brand-gold) 32%, transparent); }
  .hl-body--columns .hl-list { break-inside: avoid-column; }

  /* Scalinata — paragraphs step across the width in threes, echoing the
     site's diagonals; mirrored in right-aligned sections. Each step's width
     subtracts its own offset, so a block can never overflow the container
     no matter how large rem grows relative to it (browser text zoom). */
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--cascade {
    display: grid; gap: 1.5rem; }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--cascade > * {
    width: min(30rem, 100%); margin: 0; }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--cascade > p + p {
    margin-top: 0; }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--cascade > :nth-child(3n+2) {
    margin-left: min(22%, 13rem);
    width: min(30rem, calc(100% - min(22%, 13rem))); }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--cascade > :nth-child(3n) {
    margin-left: min(44%, 26rem);
    width: min(30rem, calc(100% - min(44%, 26rem))); }
  :is(.hl-ribbons .hl-sec--b, .hl-marquee .hl-sec--b) .hl-body--cascade > * {
    margin-left: auto; margin-right: 0; }
  :is(.hl-ribbons .hl-sec--b, .hl-marquee .hl-sec--b) .hl-body--cascade > :nth-child(3n+2) {
    margin-left: auto; margin-right: min(22%, 13rem); }
  :is(.hl-ribbons .hl-sec--b, .hl-marquee .hl-sec--b) .hl-body--cascade > :nth-child(3n) {
    margin-left: auto; margin-right: min(44%, 26rem); }

  /* Contrappunto — the first block becomes a large serif lead on the left,
     everything else stacks in a narrower right column, dropped a beat.
     fr tracks shrink with the container; max-width never forces overflow. */
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--split {
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    gap: 1.3rem 4.5rem; align-items: start; }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--split > * {
    grid-column: 2; max-width: 34rem; margin: 0; }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--split > p + p {
    margin-top: 0; }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--split > :first-child {
    grid-column: 1; grid-row: 1 / span 9;
    max-width: none; font-family: var(--font-longform, serif);
    font-size: 1.32em; line-height: 1.6; color: var(--theme-text-primary); }
  :is(.hl-quote, .hl-sec--photo_bg, .hl-ribbons .hl-sec, .hl-marquee .hl-sec) .hl-body--split > :nth-child(2) {
    margin-top: 3.5rem; }
}
/* Rivelazione — the body rests under brina and clears where the pointer
   lands; the first block stays legible as the invitation. Pointer-only by
   construction: on touch (and below 901px) the wrapper has no styles and
   everything renders clear. Approaching the section warms the veil,
   keyboard focus clears it entirely. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .hl-body--reveal > * { transition: filter .6s ease, opacity .6s ease; }
  .hl-body--reveal > :not(:first-child) { filter: blur(7px); opacity: .3; }
  .hl-sec:hover .hl-body--reveal > :not(:first-child),
  .hl-quote:hover .hl-body--reveal > :not(:first-child) { opacity: .45; }
  .hl-body--reveal > :hover { filter: none; opacity: 1; }
  .hl-sec:focus-within .hl-body--reveal > :not(:first-child),
  .hl-quote:focus-within .hl-body--reveal > :not(:first-child) {
    filter: none; opacity: 1; }
}
/* Hidden-until-hover is an aesthetic, never a barrier: reduced-motion (and
   the site switch) read everything immediately. */
@media (prefers-reduced-motion: reduce) {
  .hl-body--reveal > :not(:first-child) { filter: none; opacity: 1; transition: none; }
}
html.motion-disabled .hl-body--reveal > :not(:first-child) {
  filter: none; opacity: 1; transition: none; }

/* ── Mobile refinements (after the variants, so these win the cascade) ──── */
@media (max-width: 900px) {
  /* Small-viewport heights (svh dodges the iOS URL-bar jump) + calmer art
     transforms: the sheared/rotated frames read as clutter on a phone. */
  .hl-hero { padding: 5rem 1.25rem 3.5rem; }
  /* Tighter frost insets: the fade must complete on-screen (sections clip
     overflow), or the cut mask would paint a hard edge. */
  .hl-copy::before, .hl-hero__inner::before { inset: -1.6rem -1.5rem; }
  .hl-quote::before { inset: .6rem -1.1rem; }
  .hl-quote { padding: 3rem 1.25rem; }
  .hl-divider { padding: .8rem 0; }
  .hl-page .cv-flower--watermark { width: 6.5rem; height: 6.5rem; }
  .hl-page { padding-bottom: 2.5rem; }

  .hl-ribbons .hl-media { height: 52vh; height: 52svh; margin: -6vw 0;
    clip-path: polygon(0 6vw, 100% 0, 100% calc(100% - 6vw), 0 100%); }
  .hl-ribbons .hl-sec--b .hl-media {
    clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw)); }
  .hl-ribbons .hl-copy { padding: 3.5rem 1.4rem; }

  .hl-split .hl-sec { display: block; min-height: 0; }
  .hl-split .hl-copy, .hl-split .hl-sec--b .hl-copy { padding: 2.5rem 1.4rem; }

  .hl-staircase .hl-media { height: 50vh; height: 50svh; transform: skewY(-2deg); }
  .hl-staircase .hl-media video, .hl-staircase .hl-media img {
    transform: skewY(2deg) scale(1.1); }
  .hl-staircase .hl-sec--b .hl-media { transform: skewY(2deg); }
  .hl-staircase .hl-sec--b .hl-media video, .hl-staircase .hl-sec--b .hl-media img {
    transform: skewY(-2deg) scale(1.1); }

  .hl-cinematic .hl-sec { display: block; min-height: 88vh; min-height: 88svh; }
  .hl-cinematic .hl-media { position: absolute; margin: 0; }
  .hl-cinematic .hl-media__shade, .hl-cinematic .hl-sec--b .hl-media__shade {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--theme-bg) 94%, transparent) 30%,
      color-mix(in srgb, var(--theme-bg) 40%, transparent) 60%, transparent 85%); }
  /* centred, not bottom-anchored: the fixed cookie notice occupies the
     bottom band on first visit and was sitting on the chapter copy */
  .hl-cinematic .hl-copy, .hl-cinematic .hl-sec--b .hl-copy {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 88vh; min-height: 88svh; padding: 3rem 1.4rem; margin: 0; }

  .hl-rail .hl-media { height: 52vh; height: 52svh; }
  .hl-rail .hl-sec::after { height: 4rem; }

  .hl-leaf .hl-media { height: 52vh; height: 52svh; border-radius: 0 34% 0 34%;
    transform: rotate(-2.5deg); }
  .hl-leaf .hl-media video, .hl-leaf .hl-media img { transform: rotate(2.5deg) scale(1.14); }
  .hl-leaf .hl-sec--b .hl-media { border-radius: 34% 0 34% 0; transform: rotate(2.5deg); }
  .hl-leaf .hl-sec--b .hl-media video, .hl-leaf .hl-sec--b .hl-media img {
    transform: rotate(-2.5deg) scale(1.14); }

  .hl-shuffle .hl-sec { padding: 2.5rem 1.4rem 0; }

  .hl-marquee .hl-media { height: 34vh; height: 34svh; transform: rotate(-2deg);
    margin-bottom: 3rem; }
  .hl-marquee .hl-media video, .hl-marquee .hl-media img { transform: rotate(2deg) scale(1.12); }
  .hl-marquee .hl-copy { padding: 2.5rem 1.4rem; }

  .hl-editorial .hl-sec { padding: 2.5rem 1.4rem; }
  .hl-editorial .hl-media { height: 56vh; height: 56svh; }

  .hl-depth .hl-sec { display: block; min-height: 78vh; min-height: 78svh; }
  .hl-depth .hl-copy, .hl-depth .hl-sec--b .hl-copy { max-width: none;
    padding: 6rem 1.4rem 4rem; margin: 0; }

  .hl-sec--photo_bg .hl-copy { padding: 9vh 1.4rem; }
}

@media (max-width: 640px) {
  /* One thumb, one column: hero CTAs stack full-width and stay tappable. */
  .hl-hero__cta { flex-direction: column; align-items: center; gap: .8rem; }
  .hl-hero__cta .shop-btn { width: min(21rem, 100%); justify-content: center; }
  .hl-copy p { max-width: none; }
  .hl-mark .cv-flower { width: 2.7rem; height: 2.7rem; }

  /* Headings: the desktop clamp floors (2.6rem/1.9rem) are oversized on a 360px
     phone. Lower the floor and let vw drive them; tighten the eyebrow tracking. */
  .hl-page h1 { font-size: clamp(2.05rem, 8vw, 3rem); }
  .hl-page h2 { font-size: clamp(1.55rem, 6vw, 2.1rem); }
  .hl-eyebrow { letter-spacing: .2em; }
  .hl-copy::before, .hl-hero__inner::before { inset: -1.3rem -1.15rem; }
  .hl-quote::before { inset: .5rem -.9rem; }
  /* Belt-and-braces against sideways bleed from the rotated/oversized art
     (marquee's 116vw strip, leaf/marquee rotations) on narrow screens. */
  .hl-sec, .hl-shop { overflow-x: clip; }
}