/* ═══════════════════════════════════════════════════════════════
   PUGLIA ATMOSPHERE — Beyond Olives
   ───────────────────────────────────────────────────────────────
   One sky over the whole site. It turns slowly through a single
   Puglian afternoon — high harvest noon, then vespers, then the
   last ember of sundown — and back round again. Everything else on
   the page is anchored to the same aperture and the same clock: the
   rays through the canopy, the sun, the heat standing over the
   terraces, the cast of light on the photographs.

   Everything here is opacity and transform only, so the turn runs
   on the compositor and never repaints a scrolling page. Every
   layer is fixed, aria-hidden and pointer-transparent; the markup
   is injected by puglia-atmosphere.js.

   Loaded after shared-nav.css, so it also carries the editorial
   layout the sky is meant to be seen through: arches instead of
   boxes, photographs feathered into the page rather than framed,
   hairlines warmed towards gold, and a great deal more air.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* one aperture in the sky — the sun holds it, and the rays and
       the glint on the leaves are both anchored to it. Held high and
       far right, clear of the navigation bar above it and of the
       centred text columns below, so the body never crosses either. */
    --sun-x: 84%;
    --sun-y: 15%;
    /* how far the sun has sunk in each of the three states */
    --sun-y-vespers: 21%;
    --sun-y-sundown: 30%;
    /* one full turn: noon → vespers → sundown → noon. Three states
       instead of two, so the turn is lengthened to match — each one
       is held about as long as it was before. */
    --turn: 168s;
    --breath: 7.4s;
    --pa-ease: cubic-bezier(.19, .72, .22, 1);
}

/* ═══ THE CLOCK ═══
   One set of keyframes drives every layer of every phase, so the
   sky, the sun, the terraces and the cast of light can never
   disagree about the time of day. The turn is divided in three,
   with each state held flat through the middle of its own third and
   crossfading into the next across the boundary — so the tone is
   always either settled or visibly on the move, never stalled. */
@keyframes pa-phase-noon    { 0%,  8% { opacity: 1 } 25%, 75% { opacity: 0 } 92%, 100% { opacity: 1 } }
@keyframes pa-phase-vespers { 0%,  8% { opacity: 0 } 25%, 41% { opacity: 1 } 58%, 100% { opacity: 0 } }
@keyframes pa-phase-sundown { 0%, 41% { opacity: 0 } 58%, 75% { opacity: 1 } 92%, 100% { opacity: 0 } }

/* ═══ THE SKY ═══
   Three complete atmospheres — one bright and high, one low and
   amber, one all but gone — crossfading on the single clock above.
   Held at z-index -1 so it paints above the page ground and beneath
   every section background, which is why the light grounds further
   down are held translucent. */
.puglia-sky {
    position: fixed;
    inset: 0;
    /* behind every section background, above the page ground */
    z-index: -1;
    pointer-events: none;
    contain: layout paint;
}
.puglia-sky .air { position: absolute; inset: 0; }
.puglia-sky .noon {
    opacity: 1;
    animation: pa-phase-noon var(--turn) linear infinite;
}
.puglia-sky .vespers {
    /* the sun has sunk by the time the light turns amber */
    --sun-y: var(--sun-y-vespers);
    opacity: 0;
    animation: pa-phase-vespers var(--turn) linear infinite;
}
.puglia-sky .sundown {
    /* and it is nearly on the horizon by the last of it */
    --sun-y: var(--sun-y-sundown);
    opacity: 0;
    animation: pa-phase-sundown var(--turn) linear infinite;
}

/* ── the wash: the colour of the air itself ── */
.puglia-sky .wash {
    position: absolute;
    inset: 0;
    animation: pa-wash 31s ease-in-out infinite alternate;
    will-change: transform;
}
.puglia-sky .noon .wash {
    background:
        radial-gradient(62vmax 76vmax at var(--sun-x) var(--sun-y), rgba(255, 246, 219, .55), transparent 62%),
        radial-gradient(28vmax 28vmax at var(--sun-x) var(--sun-y), rgba(212, 181, 94, .3), transparent 68%),
        radial-gradient(58vmax 58vmax at 4% 92%, rgba(107, 138, 58, .2), transparent 66%),
        radial-gradient(70vmax 46vmax at 46% 108%, rgba(184, 90, 42, .12), transparent 70%);
}
.puglia-sky .vespers .wash {
    background:
        radial-gradient(66vmax 80vmax at var(--sun-x) var(--sun-y), rgba(233, 178, 96, .5), transparent 64%),
        radial-gradient(32vmax 32vmax at var(--sun-x) var(--sun-y), rgba(201, 118, 74, .28), transparent 70%),
        radial-gradient(56vmax 56vmax at 2% 96%, rgba(46, 68, 24, .24), transparent 68%),
        radial-gradient(78vmax 50vmax at 50% 110%, rgba(142, 63, 26, .18), transparent 72%),
        linear-gradient(177deg, rgba(196, 162, 78, .16), transparent 58%);
}
/* the last of it: the warmth has drained out of everything but the
   horizon itself, and the sky above has gone over to indigo */
.puglia-sky .sundown .wash {
    background:
        radial-gradient(58vmax 66vmax at var(--sun-x) var(--sun-y), rgba(226, 122, 68, .44), transparent 62%),
        radial-gradient(30vmax 26vmax at var(--sun-x) var(--sun-y), rgba(178, 58, 40, .3), transparent 70%),
        radial-gradient(64vmax 52vmax at 6% 100%, rgba(24, 32, 52, .34), transparent 68%),
        radial-gradient(86vmax 54vmax at 52% 112%, rgba(96, 40, 26, .22), transparent 74%),
        linear-gradient(184deg, rgba(38, 44, 76, .34), rgba(58, 44, 58, .12) 46%, transparent 72%);
}
@keyframes pa-wash {
    0%   { transform: translate3d(-1%, -.6%, 0) scale(1) }
    100% { transform: translate3d(1.2%, .9%, 0) scale(1.045) }
}

/* ── rays: harvest light coming down through the canopy ── */
.puglia-sky .rays {
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(88vmax 88vmax at var(--sun-x) var(--sun-y), transparent 6%, #000 27%, transparent 76%);
            mask-image: radial-gradient(88vmax 88vmax at var(--sun-x) var(--sun-y), transparent 6%, #000 27%, transparent 76%);
    filter: blur(9px);
    transform-origin: var(--sun-x) var(--sun-y);
    animation: pa-sweep 104s ease-in-out infinite alternate;
}
.puglia-sky .noon .rays {
    background: repeating-conic-gradient(from 158deg at var(--sun-x) var(--sun-y),
        rgba(255, 244, 210, .11) 0deg 2.1deg, transparent 2.1deg 9deg);
}
.puglia-sky .vespers .rays {
    background: repeating-conic-gradient(from 151deg at var(--sun-x) var(--sun-y),
        rgba(233, 186, 112, .13) 0deg 2.6deg, transparent 2.6deg 8.4deg);
}
/* low sun, long shafts: fewer of them, wider, and gone red */
.puglia-sky .sundown .rays {
    background: repeating-conic-gradient(from 146deg at var(--sun-x) var(--sun-y),
        rgba(226, 132, 82, .12) 0deg 3.4deg, transparent 3.4deg 9.6deg);
}
@keyframes pa-sweep {
    0%   { transform: rotate(-2.6deg); opacity: .5 }
    100% { transform: rotate(2.6deg);  opacity: .95 }
}

/* ── the glint: the sun caught on the silver undersides of the
      leaves, directly below the aperture, in its own colour ── */
.puglia-sky .glint {
    position: absolute;
    left: var(--sun-x);
    bottom: 0;
    height: 44vh;
    width: min(36vw, 420px);
    -webkit-mask-image: radial-gradient(closest-side at 50% 100%, #000, transparent 88%);
            mask-image: radial-gradient(closest-side at 50% 100%, #000, transparent 88%);
    filter: blur(3px);
    transform: translateX(-50%);
    animation: pa-glint 9s ease-in-out infinite alternate;
}
.puglia-sky .noon .glint {
    background: repeating-linear-gradient(178deg, rgba(255, 250, 232, .17) 0 2px, transparent 2px 11px);
}
.puglia-sky .vespers .glint {
    background: repeating-linear-gradient(176deg, rgba(246, 214, 156, .2) 0 2px, transparent 2px 10px);
}
.puglia-sky .sundown .glint {
    background: repeating-linear-gradient(174deg, rgba(233, 156, 106, .17) 0 2px, transparent 2px 12px);
}
@keyframes pa-glint {
    0%   { transform: translateX(-50%) scaleX(.86); opacity: .45 }
    100% { transform: translateX(-50%) scaleX(1.14); opacity: 1 }
}

/* ═══ THE SUN IN THE APERTURE ═══
   One aperture in the sky, and three bodies occupy it in turn: the
   high white sun of a harvest noon, the low amber sun of vespers,
   and the red coal of sundown. They exchange places on the same
   clock as the wash and the rays, so the light, the shadows and the
   body that casts them always agree.

   This layer is deliberately NOT part of .puglia-sky. The sky sits
   behind every section background, which is right for a wash — a
   broad gradient still reads at a quarter strength through
   translucent parchment — but wrong for a body: a disc needs
   contrast, and behind fourteen pages of full-bleed photography it
   would simply never be seen. So the sun is lifted out and hung
   above the page instead, below the navigation, and drawn warm and
   translucent rather than bright: over a dark photograph it reads as
   light, and over parchment it reads as warmth, without a blend mode
   that would fail on one ground or the other.

   Three bodies rather than one recoloured. The noon sun is small,
   high and fierce; the vespers sun hangs lower and larger, the way a
   sun does when it is nearly down; the sundown sun is lower and
   larger again, and dim enough to look at. Only the aperture is
   shared. */
.puglia-sun {
    position: fixed;
    inset: 0;
    /* above the sections, below the nav (200) and the menu (300) */
    z-index: 8;
    pointer-events: none;
}
.puglia-sun .body {
    position: absolute;
    left: var(--sun-x);
    top: var(--sun-y);
    width: var(--pa-body);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    animation:
        pa-drift 82s ease-in-out infinite alternate,
        var(--pa-phase) var(--turn) linear infinite;
    will-change: opacity, transform;
}
.puglia-sun .body i {
    position: absolute;
    display: block;
}
.puglia-sun .bloom {
    inset: -115%;
    border-radius: 50%;
    animation: pa-halo 17s ease-in-out infinite alternate;
}
.puglia-sun .disc {
    inset: 0;
    border-radius: 50%;
    animation: pa-breathe var(--breath) cubic-bezier(.36, .06, .2, .98) infinite;
    /* never a hard edge: the disc is eaten away well before its
       own boundary, so it sits in the air instead of on the page */
    -webkit-mask-image: radial-gradient(closest-side, #000 0 54%, rgba(0, 0, 0, .38) 82%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 0 54%, rgba(0, 0, 0, .38) 82%, transparent 100%);
}
.puglia-sun .haze {
    inset: -28% -62%;
    animation: pa-haze 49s ease-in-out infinite alternate;
}

/* ── high harvest noon: small, white-gold, almost too bright ── */
.puglia-sun .noon {
    --pa-body: clamp(84px, 9.5vw, 152px);
    --pa-phase: pa-phase-noon;
    opacity: 1;
}
.puglia-sun .noon .bloom {
    background: radial-gradient(closest-side, rgba(255, 249, 228, .52), rgba(212, 181, 94, .17) 46%, transparent 76%);
    filter: blur(24px);
}
.puglia-sun .noon .disc {
    background: radial-gradient(circle at 46% 42%, #fffdf4 0%, #fdf1cd 32%, #e8cd8a 64%, #c4a24e 100%);
    opacity: .52;
}
.puglia-sun .noon .haze {
    background: linear-gradient(180deg, transparent 24%, rgba(230, 220, 198, .3) 46%, rgba(230, 220, 198, .18) 60%, transparent 78%);
    filter: blur(14px);
}

/* ── vespers: lower, larger, and gone over to amber ── */
.puglia-sun .vespers {
    /* the sun has sunk by the time the light turns */
    --sun-y: var(--sun-y-vespers);
    --pa-body: clamp(112px, 13.5vw, 214px);
    --pa-phase: pa-phase-vespers;
    opacity: 0;
}
.puglia-sun .vespers .bloom {
    background: radial-gradient(closest-side, rgba(246, 208, 143, .5), rgba(184, 90, 42, .19) 48%, transparent 78%);
    filter: blur(28px);
}
.puglia-sun .vespers .disc {
    background: radial-gradient(circle at 48% 44%, #fff3d8 0%, #f4d69c 30%, #dda45f 62%, #b85a2a 100%);
    opacity: .5;
}
.puglia-sun .vespers .haze {
    background: linear-gradient(180deg, transparent 22%, rgba(201, 118, 74, .28) 46%, rgba(184, 90, 42, .17) 60%, transparent 78%);
    filter: blur(16px);
}

/* ── sundown: lower still, larger still, and burnt down to a red
      coal. The bloom widens as the disc dims, the way a sun does
      when there is enough air in front of it to look at directly,
      and the haze lying across it thickens into a bar of cloud. ── */
.puglia-sun .sundown {
    --sun-y: var(--sun-y-sundown);
    --pa-body: clamp(132px, 16vw, 258px);
    --pa-phase: pa-phase-sundown;
    opacity: 0;
}
.puglia-sun .sundown .bloom {
    background: radial-gradient(closest-side, rgba(238, 148, 96, .46), rgba(158, 52, 34, .22) 50%, transparent 80%);
    filter: blur(34px);
}
.puglia-sun .sundown .disc {
    background: radial-gradient(circle at 50% 46%, #ffdcb0 0%, #f6ab68 28%, #d9603a 62%, #9e3422 100%);
    opacity: .58;
}
.puglia-sun .sundown .haze {
    background: linear-gradient(180deg, transparent 18%, rgba(120, 58, 48, .34) 44%, rgba(52, 46, 72, .24) 62%, transparent 80%);
    filter: blur(19px);
}

@keyframes pa-drift {
    0%   { transform: translate(-50%, -50%) translate3d(0, 10px, 0) }
    100% { transform: translate(-50%, -50%) translate3d(-22px, -16px, 0) }
}
@keyframes pa-breathe { 0% { filter: brightness(.97) } 22% { filter: brightness(1.07) } 100% { filter: brightness(.97) } }
@keyframes pa-halo    { 0% { opacity: .6; transform: scale(.95) } 100% { opacity: 1; transform: scale(1.08) } }
@keyframes pa-haze    { 0% { transform: translate3d(-9%, -8px, 0) } 100% { transform: translate3d(9%, 10px, 0) } }

/* ═══ THE TERRACES ═══
   Where the reference site put water, Puglia has dry-stone terraces
   in August. The band is meant to be *seen* moving: a soft horizon
   of heat, a near ripple of shimmer drifting up fast, and a second,
   coarser one crossing it at an angle. Each translate is a whole
   multiple of its own pattern period, so the loops are seamless. */
.puglia-terraces {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(180deg,
        transparent,
        rgba(196, 162, 78, .07) 42%,
        rgba(184, 90, 42, .1) 78%,
        rgba(142, 63, 26, .13));
}
/* the line where still air becomes standing heat */
.puglia-terraces::before {
    content: '';
    position: absolute;
    left: -8%;
    right: -8%;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 248, 226, .4) 20%,
                rgba(255, 252, 240, .6) 50%, rgba(255, 248, 226, .4) 80%, transparent);
    filter: blur(2px);
    animation: pa-swell 15s ease-in-out infinite alternate;
    will-change: transform;
}
/* the lift of warm air just beneath it */
.puglia-terraces::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    top: 0;
    height: 26%;
    background: linear-gradient(180deg, rgba(255, 243, 209, .2), transparent 76%);
    filter: blur(8px);
    animation: pa-swell 19s ease-in-out infinite alternate-reverse;
    will-change: transform;
}
.puglia-terraces .heat {
    position: absolute;
    inset: 0;
    opacity: .85;
    background: repeating-linear-gradient(180deg, transparent 0 7px,
                rgba(212, 181, 94, .075) 7px 8.4px, transparent 8.4px 17px);
    filter: blur(1.2px);
    -webkit-mask-image: linear-gradient(0deg, #000, rgba(0, 0, 0, .45) 54%, transparent);
            mask-image: linear-gradient(0deg, #000, rgba(0, 0, 0, .45) 54%, transparent);
    animation: pa-ripple 11s linear infinite;
    will-change: transform;
}
.puglia-terraces .heat::after {
    content: '';
    position: absolute;
    inset: -8% -12%;
    background: repeating-linear-gradient(184deg, transparent 0 15px,
                rgba(184, 90, 42, .055) 15px 17.5px, transparent 17.5px 38px);
    filter: blur(2.8px);
    animation: pa-ripple-cross 26s linear infinite;
}
@keyframes pa-ripple       { to { transform: translate3d(0, -17px, 0) } }
@keyframes pa-ripple-cross { to { transform: translate3d(0, 76px, 0) } }
@keyframes pa-swell {
    0%   { transform: translate3d(-2.4%, 0, 0) scaleY(.88); opacity: .5 }
    100% { transform: translate3d(2.4%, 0, 0) scaleY(1.18); opacity: 1 }
}
/* the standing heat takes the colour of the hour too: white at noon,
   amber at vespers, and cooling to indigo once the sun is down */
.puglia-terraces i {
    position: absolute;
    inset: 0;
    display: block;
}
.puglia-terraces .noon {
    opacity: 1;
    animation: pa-phase-noon var(--turn) linear infinite;
    background: linear-gradient(180deg, transparent, rgba(255, 246, 219, .07) 46%, rgba(212, 181, 94, .1));
}
.puglia-terraces .vespers {
    opacity: 0;
    animation: pa-phase-vespers var(--turn) linear infinite;
    background: linear-gradient(180deg, transparent, rgba(233, 178, 96, .09) 46%, rgba(184, 90, 42, .13));
}
.puglia-terraces .sundown {
    opacity: 0;
    animation: pa-phase-sundown var(--turn) linear infinite;
    background: linear-gradient(180deg, transparent, rgba(120, 64, 62, .12) 44%, rgba(30, 36, 60, .2));
}

/* ═══ THE CAST OF LIGHT ═══
   The photographs are opaque, so the sky behind them cannot reach
   them. This layer carries the same turn *over* the whole page at
   soft-light — so a hero photograph, a dark strip and a parchment
   column all warm and cool together instead of each keeping its own
   private weather. It replaces the single static wash that used to
   live in shared-nav.css. */
.puglia-light {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    mix-blend-mode: soft-light;
}
.puglia-light i { position: absolute; inset: 0; display: block; }
.puglia-light .noon {
    opacity: 1;
    animation: pa-phase-noon var(--turn) linear infinite;
    background:
        radial-gradient(110% 62% at var(--sun-x) -8%, rgba(255, 246, 216, .3), transparent 58%),
        radial-gradient(120% 58% at 50% 112%, rgba(107, 138, 58, .1), transparent 60%);
}
.puglia-light .vespers {
    opacity: 0;
    animation: pa-phase-vespers var(--turn) linear infinite;
    background:
        radial-gradient(112% 66% at var(--sun-x) -4%, rgba(240, 186, 106, .32), transparent 60%),
        radial-gradient(124% 60% at 50% 112%, rgba(184, 90, 42, .16), transparent 62%);
}
/* the turn the whole site takes at the end of the day: the warmth
   pulls back into one low corner and everything outside it goes
   blue. Soft-light, so a photograph cools and a parchment column
   cools with it, and neither loses the contrast its text needs. */
.puglia-light .sundown {
    opacity: 0;
    animation: pa-phase-sundown var(--turn) linear infinite;
    background:
        radial-gradient(96% 58% at var(--sun-x) 2%, rgba(238, 146, 92, .3), transparent 56%),
        radial-gradient(130% 70% at 12% 106%, rgba(46, 56, 96, .22), transparent 66%),
        linear-gradient(190deg, rgba(38, 46, 84, .17), transparent 54%);
}

/* ═══ THE GROUND ═══
   The light grounds are held translucent so the turning sky reads
   through them — but only just: dense enough that a paragraph's
   contrast does not rise and fall with the hour. The dark grounds
   stay dense and instead carry the warmth as a bloom of their own,
   lit from the same corner. */
.intro,
.section-intro,
.split-content,
.split-olive .split-content,
.split-biodiversity .split-content,
.harvest-section,
.tasting-notes-section,
.cta-section,
.reno-gallery,
.steward-content,
.oil-hero-content {
    background-color: rgba(232, 223, 203, .9);
}
.cards-section,
.philosophy,
.pillars-section,
.pressing-stats,
.vintage-section {
    background-color: rgba(211, 197, 167, .88);
}
.map-section,
.split-trullo .split-content {
    background-color: rgba(219, 208, 182, .9);
}
.dark-section,
.quote-section,
.bee-section,
.contact-cta,
.trees-content,
.hands-strip,
.gallery-strip,
.vision,
.hands-section,
.enter-section,
footer {
    background-image:
        radial-gradient(122% 78% at 84% 4%, rgba(212, 181, 94, .12), transparent 62%),
        radial-gradient(104% 72% at 6% 106%, rgba(184, 90, 42, .1), transparent 66%);
}

/* ═══ RHYTHM ═══
   The one thing this land is selling is room to breathe, so the
   sections scale with the viewport rather than sitting at a fixed
   number of rems. */
.intro,
.section-intro,
.dark-section,
.cards-section,
.philosophy,
.pillars-section,
.quote-section,
.cta-section,
.harvest-section,
.tasting-notes-section,
.pressing-stats,
.reno-gallery,
.vintage-section,
.contact-cta {
    padding-top: clamp(7rem, 19vh, 14rem);
    padding-bottom: clamp(7rem, 19vh, 14rem);
}
/* these two end flush against what follows them — top only */
.map-section,
.bee-section {
    padding-top: clamp(7rem, 19vh, 14rem);
}
.split-content {
    padding-top: clamp(5rem, 13vh, 9rem);
    padding-bottom: clamp(5rem, 13vh, 9rem);
}

/* ═══ EDITORIAL TYPE ═══ */
h1, h2, h3, .hero-title, .pull-quote { text-wrap: balance; }
p { text-wrap: pretty; }
.intro p,
.section-intro p { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* every kicker opens with a short rule, the way a chapter does */
.section-label {
    position: relative;
    padding-top: 1.9rem;
}
.section-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 162, 78, .75), transparent);
}
/* the numeral line inside a split — "I · The Living Farm" — steps
   away from the paragraph beneath it and takes a rule of its own */
.split-content h3 {
    position: relative;
    padding-top: 2.2rem;
    letter-spacing: .38em;
}
.split-content h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(52px, 22%, 116px);
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 162, 78, .8), transparent);
}

/* the divider becomes a long hairline with a single olive leaf on it */
.divider {
    position: relative;
    width: min(300px, 62%);
    height: 1px;
    opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(196, 162, 78, .5) 24%,
                rgba(196, 162, 78, .5) 76%, transparent);
    margin: clamp(2.6rem, 6vh, 3.6rem) auto;
}
.divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .85;
    transform: translate(-50%, -50%) rotate(-32deg);
}
/* hairlines everywhere warm towards gold */
.detail-list li { border-bottom-color: rgba(196, 162, 78, .2); }

/* ═══ ARCHES ═══
   Puglia builds in arches — trulli, masserie, the vaults of a
   frantoio — so a photograph here opens like a window instead of
   ending at a corner. The shape is a real elliptical arch struck
   from the top corners; the bottom edge is then feathered away, so
   each picture stands in its opening and dissolves into the ground
   underneath rather than stopping at a line.

   Percentage radii keep the springing point proportional, so the
   arch holds its shape at every viewport instead of flattening into
   a lozenge on narrow columns. */
.hands-strip-cell {
    border-radius: 46% 46% 3px 3px / 26% 26% 3px 3px;
}
.hands-strip-cell img,
.hands-strip-cell::after {
    -webkit-mask-image: linear-gradient(180deg, #000 0 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
}

/* the picture half of a split becomes a vaulted opening, and gives
   way where it meets the text, so there is no seam down the middle
   of the page */
.split-image {
    border-radius: 34% 34% 2px 2px / 15% 15% 2px 2px;
}
.split-image img,
.split-image::after {
    -webkit-mask-image: linear-gradient(90deg, #000 0 84%, rgba(0, 0, 0, .5) 95%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0 84%, rgba(0, 0, 0, .5) 95%, transparent 100%);
}
.split-inner.reverse .split-image img,
.split-inner.reverse .split-image::after {
    -webkit-mask-image: linear-gradient(270deg, #000 0 84%, rgba(0, 0, 0, .5) 95%, transparent 100%);
            mask-image: linear-gradient(270deg, #000 0 84%, rgba(0, 0, 0, .5) 95%, transparent 100%);
}
@media (max-width: 820px) {
    /* stacked: the seam is underneath the picture now, not beside it */
    .split-image {
        border-radius: 40% 40% 2px 2px / 12% 12% 2px 2px;
    }
    .split-image img,
    .split-image::after,
    .split-inner.reverse .split-image img,
    .split-inner.reverse .split-image::after {
        -webkit-mask-image: linear-gradient(180deg, #000 0 86%, rgba(0, 0, 0, .5) 96%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0 86%, rgba(0, 0, 0, .5) 96%, transparent 100%);
    }
}

/* ═══ CARDS AS ARCHES ═══
   Each card and each figure stands in its own small arch rather
   than a box, lit from above by the same sun. */
.card,
.stat-item,
.pressing-stat,
.vintage-stat {
    position: relative;
    border-radius: 92px 92px 3px 3px;
    background-image: radial-gradient(122% 74% at 50% 0%, rgba(196, 162, 78, .1), transparent 66%);
    border: 1px solid rgba(196, 162, 78, .18);
    transition: border-color .6s var(--pa-ease), transform .6s var(--pa-ease);
}
.card { padding-top: 4.8rem; }
.stat-item,
.pressing-stat,
.vintage-stat {
    padding: 3.4rem 1.4rem 2.6rem;
    background-color: rgba(196, 162, 78, .045);
    /* narrower than a card, so the arch springs from lower down */
    border-radius: 64px 64px 3px 3px;
}
.card:hover,
.stat-item:hover,
.pressing-stat:hover,
.vintage-stat:hover {
    border-color: rgba(196, 162, 78, .42);
}
/* only the cards lift: the stats are already drifting, and an
   animated transform would swallow the hover offset anyway */
.card:hover {
    transform: translateY(-4px);
}
/* every doorway on the site curves the same way — the wipe behind
   the label stays square and is clipped by the button */
.cta-btn {
    border-radius: 999px 999px 2px 2px;
}
/* the arch cards drift, very slightly, and out of step with each other */
.stats-grid > *,
.pressing-stats-grid > *,
.vintage-stats-grid > * {
    animation: pa-bob 15s ease-in-out infinite;
}
.stats-grid > *:nth-child(2),
.pressing-stats-grid > *:nth-child(2),
.vintage-stats-grid > *:nth-child(2) { animation-delay: -4.7s }
.stats-grid > *:nth-child(3),
.pressing-stats-grid > *:nth-child(3),
.vintage-stats-grid > *:nth-child(3) { animation-delay: -9.1s }
.stats-grid > *:nth-child(4),
.pressing-stats-grid > *:nth-child(4),
.vintage-stats-grid > *:nth-child(4) { animation-delay: -12.4s }

/* the floating decorations settle down: a drift, not a bounce */
.float { animation: pa-bob 13s ease-in-out infinite; }
@keyframes pa-bob {
    0%, 100% { transform: translate3d(0, -4px, 0) rotate(-.2deg) }
    50%      { transform: translate3d(0, 4px, 0) rotate(.2deg) }
}

/* ═══ THE OPENING ═══
   The hero photograph does not end — it becomes the page. A long
   fall to shadow so there is no line between the opening and the
   first thing it has to say. */
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34vh;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(28, 43, 18, 0) 0%,
        rgba(28, 43, 18, .16) 38%,
        rgba(42, 34, 24, .5) 74%,
        rgba(42, 34, 24, .78) 100%);
}
/* a gleam falling down the scroll cue, the way light falls */
.scroll-line,
.scroll-hint .scroll-line {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(196, 162, 78, .45), transparent);
}
.scroll-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 16px;
    background: var(--gold-bright, #d4b55e);
    animation: pa-fall 2.9s var(--pa-ease) infinite;
}
@keyframes pa-fall {
    0%   { transform: translateY(-16px); opacity: 0 }
    30%  { opacity: 1 }
    100% { transform: translateY(56px); opacity: 0 }
}

/* ═══ THE INDEX ═══
   The menu stops being four columns of links and becomes the index
   of the site: one continuous numbered list, italic gold numerals
   in the margin, a hairline under every line, and the lines
   arriving in the order a list is read. */
.fullscreen-menu {
    /* the panel keeps its own dark base — it is listed last so the
       two warm radials read as light falling into the room */
    background-image:
        radial-gradient(116% 56% at 84% 2%, rgba(212, 181, 94, .13), transparent 62%),
        radial-gradient(104% 58% at 8% 104%, rgba(184, 90, 42, .16), transparent 68%),
        linear-gradient(160deg, #2a2218 0%, rgba(28, 43, 18, .975) 50%, #1c2b12 100%);
}
.fullscreen-menu .menu-inner {
    counter-reset: pa-index;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.6rem, 6vw, 5rem);
    max-width: 940px;
    align-content: center;
}
.fullscreen-menu .menu-group-title {
    font-size: .56rem;
    letter-spacing: .4em;
    color: rgba(212, 181, 94, .85);
    margin-bottom: 1.1rem;
    padding-bottom: 0;
    border-bottom: 0;
}
.fullscreen-menu .menu-group a {
    display: flex !important;
    align-items: baseline;
    gap: 1.1rem;
    padding: .95rem .1rem;
    border-bottom: 1px solid rgba(196, 162, 78, .14);
    font-size: clamp(1.1rem, 2vw, 1.42rem);
    color: rgba(230, 220, 198, .62);
    transform: none;
    transition: color .5s var(--pa-ease), padding-left .5s var(--pa-ease), border-color .5s var(--pa-ease);
}
.fullscreen-menu .menu-group:first-child a { border-top: 1px solid rgba(196, 162, 78, .14); }
.fullscreen-menu .menu-group a::before {
    counter-increment: pa-index;
    content: counter(pa-index, decimal-leading-zero);
    flex: none;
    width: 1.7rem;
    font-style: italic;
    font-size: .92rem;
    color: rgba(196, 162, 78, .8);
}
.fullscreen-menu .menu-group a:hover {
    color: var(--gold-pale, #dcc98a);
    padding-left: .7rem;
    transform: none;
    border-bottom-color: rgba(196, 162, 78, .36);
}
.fullscreen-menu .menu-group a.menu-active { color: var(--gold-pale, #dcc98a); }
.fullscreen-menu .menu-group a.menu-active::before { color: var(--gold-bright, #d4b55e); }
/* the lines arrive one after another once the panel is open */
.fullscreen-menu .menu-group a {
    opacity: 0;
    transform: translateY(12px);
}
.fullscreen-menu.open .menu-group a {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--pa-ease), transform .8s var(--pa-ease),
                color .5s var(--pa-ease), padding-left .5s var(--pa-ease);
}
.fullscreen-menu.open .menu-group a:nth-child(2) { transition-delay: .05s }
.fullscreen-menu.open .menu-group a:nth-child(3) { transition-delay: .1s }
.fullscreen-menu.open .menu-group a:nth-child(4) { transition-delay: .15s }
.fullscreen-menu.open .menu-group a:nth-child(5) { transition-delay: .2s }
.fullscreen-menu.open .menu-group a:nth-child(6) { transition-delay: .25s }
.fullscreen-menu.open .menu-group a:nth-child(7) { transition-delay: .3s }

@media (max-width: 640px) {
    .fullscreen-menu .menu-inner { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ═══ THE PORTAL ═══
   The doorway page is built from full-bleed photographs rather than
   from the content-page vocabulary, so none of the ground rules
   above reach it. It gets the same light by a different route: the
   cast of light already lies over its pictures, and here the
   vignette that used to close each frame in neutral black is
   re-struck warm and lit from the sun's own corner, so the portal
   turns on the same clock as the rest of the estate.

   The photographs keep their own crops. Only the light changes. */
.portal-vignette {
    background-image:
        radial-gradient(88% 62% at var(--sun-x) var(--sun-y), rgba(212, 181, 94, .17), transparent 64%),
        radial-gradient(96% 68% at 8% 104%, rgba(142, 63, 26, .16), transparent 68%);
    box-shadow: inset 0 0 200px rgba(26, 18, 8, .46);
}

/* the three hands stand in arches, the same opening the harvest
   strip uses on the estate pages */
.hands-cell {
    border-radius: 44% 44% 3px 3px / 17% 17% 3px 3px;
}

/* the doorway itself curves — an arch, not a rectangle. The hover
   wipe stays square and is clipped by the button, so the curve does
   not squash as the fill sweeps across. */
.enter-btn {
    border-radius: 999px 999px 2px 2px;
}

/* the portal writes in single sentences, so let them break where
   they read best rather than where the column happens to end */
.hero-statement,
.hero-mantra,
.alive-text,
.elder-quote,
.meet-text,
.hands-text,
.grove-poem,
.enter-title,
.enter-subtitle {
    text-wrap: balance;
}

@media (max-width: 700px) {
    /* stacked into three rows, so the arch would swallow the frame */
    .hands-cell { border-radius: 30% 30% 3px 3px / 12% 12% 3px 3px; }
}

/* ═══ READABILITY ═══
   The sky is meant to be read *through*, not squinted past. Three
   things were costing the text contrast, and this block fixes each
   at its source rather than by turning the atmosphere down:

   1. The light grounds were translucent enough that the moving sky
      changed the paper colour under the paragraphs, so the contrast
      ratio of a line of body copy depended on the time of day. They
      are now dense enough to hold the text steady, and still open
      enough for the turn to read through them.
   2. Body copy was set in the lighter of the two earth tones, which
      lands around 3.5:1 on parchment. The tone is warmed and
      deepened to clear 4.5:1 without going to flat black.
   3. The smaller text was small — captions, kickers and body copy
      alike — and set with a great deal of letter-spacing. Sizes and
      line heights come up; the widest tracking comes down.

   Redefined on html:root rather than :root so it outranks the
   per-page :root blocks, which on most pages are declared after
   this stylesheet is linked. */
html:root {
    --earth-light: #6d5340;
}

/* the paper holds still under the text — the grounds themselves are
   set in THE GROUND above, at the density this rule asks for */

/* body copy: a little larger, a little more open */
.intro p,
.section-intro p {
    font-size: clamp(1.06rem, 1.12vw, 1.15rem);
    line-height: 1.92;
}
.split-content p {
    font-size: clamp(1rem, 1.05vw, 1.08rem);
    line-height: 1.9;
}
.card p,
.pillar p {
    font-size: .95rem;
    line-height: 1.85;
}
.detail-list li,
.reno-figure figcaption,
.split-image-caption {
    font-size: .86rem;
}

/* kickers and numerals: legible before they are decorative */
.section-label {
    font-size: .68rem;
    letter-spacing: .3em;
    color: var(--terracotta, #b85a2a);
}
.split-content h3 {
    font-size: .62rem;
    letter-spacing: .28em;
}

/* captions sit over photographs, so they carry their own shadow
   rather than trusting the picture underneath to be dark */
.reno-figure figcaption,
.split-image-caption {
    color: rgba(248, 243, 232, .95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 2px 16px rgba(0, 0, 0, .55);
}
.split-image-caption { font-style: italic; }

/* the index reads as a list of links, not as a watermark */
.fullscreen-menu .menu-group a { color: rgba(236, 228, 209, .82); }
.fullscreen-menu .menu-group a::before { color: rgba(212, 181, 94, .92); }
.fullscreen-menu .menu-group-title { color: rgba(220, 201, 138, .95); }

/* ═══ SMALLER SCREENS ═══ */
@media (max-width: 820px) {
    .puglia-terraces { height: 38vh; }
    /* a narrow screen has less sky to spare. The whole aperture —
       sun, rays, wash and glint together — pulls in from the edge and
       drops just clear of the navigation bar, which on a short
       viewport reaches down into the band the sun would otherwise
       occupy. */
    :root {
        --sun-x: 82%;
        --sun-y: 14%;
        --sun-y-vespers: 20%;
        --sun-y-sundown: 28%;
    }
    .puglia-sun .noon { --pa-body: clamp(70px, 15vw, 104px); }
    .puglia-sun .vespers { --pa-body: clamp(92px, 21vw, 148px); }
    .puglia-sun .sundown { --pa-body: clamp(104px, 25vw, 172px); }
    .card { padding-top: 3.6rem; border-radius: 72px 72px 3px 3px; }
    .stat-item,
    .pressing-stat,
    .vintage-stat { padding: 2.8rem 1.1rem 2.2rem; border-radius: 68px 68px 3px 3px; }
    .hero::after { height: 28vh; }
}

/* ═══ STILLNESS ═══
   For anyone who has asked for less motion, the sky holds at noon
   and nothing on the page drifts. */
@media (prefers-reduced-motion: reduce) {
    .puglia-sky *,
    .puglia-sun *,
    .puglia-terraces,
    .puglia-terraces i,
    .puglia-terraces::before,
    .puglia-terraces::after,
    .puglia-light i,
    .scroll-line::after,
    .float,
    .stats-grid > *,
    .pressing-stats-grid > *,
    .vintage-stats-grid > * {
        animation: none !important;
    }
    /* the sun holds still in the aperture, at noon */
    .puglia-sky .vespers,
    .puglia-sky .sundown,
    .puglia-sun .vespers,
    .puglia-sun .sundown,
    .puglia-terraces .vespers,
    .puglia-terraces .sundown,
    .puglia-light .vespers,
    .puglia-light .sundown { opacity: 0 !important; }
    .puglia-sky .noon,
    .puglia-sun .noon,
    .puglia-terraces .noon,
    .puglia-light .noon { opacity: 1 !important; }
    .puglia-sun .body { transform: translate(-50%, -50%) !important; }
    .card:hover,
    .stat-item:hover,
    .pressing-stat:hover,
    .vintage-stat:hover { transform: none; }
}