/* ═════════════════════════════════════════════════════════════════
   SPRING EDITION — fresh orchard variation
   Layered on top of style.css. Shifts the palette from warm/autumnal
   to fresh/spring without touching layout or motion.
   ═════════════════════════════════════════════════════════════════ */

:root {
  /* Cooler, lighter beiges with green undertone */
  --ivory:  #F2F0DD;     /* was #F3EDD8 */
  --cream:  #E6E4CC;
  --sand:   #B6C094;
  /* Fresh orchard green — primary identity color */
  --green:  #7A9428;
  --leaf:   #9CB143;
  --moss:   #5A7820;
  /* Forest stays similar but cooler */
  --forest: #2A4A18;
  /* Dark mode: cooler, slight green undertone (less coffee, more bark) */
  --dark:   #16221A;
  --viola:  #6B3FA0;
}

/* Body baseline */
body { background: var(--dark); }

/* ─── Hero photo: decisive spring shift (orange foliage → fresh greens) ─── */
/* IMPORTANT: applied to parent .hero-photo because the JS parallax loop
   writes inline brightness/saturate on .hero-photo-inner every frame.
   Filters on parent stack on top of child filters. */
.hero-photo {
  filter:
    hue-rotate(28deg)
    saturate(.94)
    brightness(.80)
    contrast(1.04);
}

/* Foreground spring wash — light hint only (filter does most work now) */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 42%; bottom: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(122, 148, 40, 0) 0%,
    rgba(122, 148, 40, .10) 50%,
    rgba(90, 120, 32, .18) 100%);
  mix-blend-mode: soft-light;
}
/* Sky wash — softer cooling */
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 48%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(170, 200, 195, .10) 0%,
    rgba(170, 200, 195, .04) 60%,
    transparent 100%);
  mix-blend-mode: soft-light;
}

/* Hero color grade — fresher green/lemon/lilac */
.hero-grade {
  background: linear-gradient(135deg,
    rgba(122, 148, 40, .10) 0%,
    rgba(247, 213, 90, .06) 50%,
    rgba(107, 63, 160, .06) 100%);
}
.hero-vignette {
  background:
    /* central darken right under the headline — keeps white type readable */
    radial-gradient(ellipse 65% 55% at 50% 52%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .30) 45%, transparent 75%),
    /* outer vignette */
    radial-gradient(ellipse 130% 95% at 50% 42%, transparent 35%, rgba(15, 30, 18, .55) 100%),
    /* top/bottom edges */
    linear-gradient(to bottom,
      rgba(20, 35, 22, .42) 0%, rgba(15, 25, 18, .10) 30%,
      transparent 55%, rgba(15, 25, 18, .68) 100%);
}

/* Nav: dark with green undertone */
.nav.scrolled {
  background: rgba(22, 34, 26, .72);
  backdrop-filter: blur(32px) saturate(155%);
  -webkit-backdrop-filter: blur(32px) saturate(155%);
  border-bottom-color: rgba(240, 235, 200, .06);
  box-shadow: 0 12px 40px -22px rgba(0, 0, 0, .5);
}

/* Mountain divider — refresh greens */
.mountain-divider { color: var(--moss); }

/* ─────────────────────────────────────────────
   PAPER SECTIONS — lighter, cooler beiges
   ───────────────────────────────────────────── */
.il-distretto { background: var(--ivory); }
.il-distretto h2 { color: #18241A; }
.il-distretto .arrow { color: var(--green); }

.chi-siamo { background: #EBE9D4; }
.chi-siamo .text-col h2 { color: #18241A; }
.chi-siamo .text-col h2 em { color: var(--green); }
.chi-siamo .pullquote { border-left-color: var(--green); }
.chi-siamo .pullquote::before { color: rgba(122, 148, 40, .22); }

/* Accent strip: green → viola (was orange → viola) */
.chi-siamo .accent-strip {
  background: linear-gradient(to bottom, var(--green), var(--viola));
}

/* Stat box: dark with green spine */
.chi-siamo .stat-floating {
  background: var(--dark);
  box-shadow:
    0 22px 60px -22px rgba(20, 30, 18, .5),
    0 6px 16px -8px rgba(20, 30, 18, .25);
}
.chi-siamo .stat-floating::before {
  background: linear-gradient(to right, var(--green), var(--viola));
}
.chi-siamo .stat-floating .num { color: var(--leaf); }
.chi-siamo .stat-floating .lbl { color: rgba(242, 240, 221, .58); }
.chi-siamo .stats-row .num { color: var(--forest); }
.chi-siamo .stats-row .lbl { color: rgba(24, 36, 26, .5); }

/* Chi siamo image placeholder — fresher spring orchard greens */
.chi-siamo .img-placeholder {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(247, 213, 90, .14) 0%, transparent 55%),
    linear-gradient(158deg, #1d3814 0%, #345a1c 35%, #5d8a28 70%, #355c1a 100%);
}

/* Section labels — slightly more saturated */
.section-label-row .label { color: rgba(24, 40, 22, .42); }
.section-label-row .rule {
  background: linear-gradient(to right, var(--sand), transparent);
}

/* ─── Territorio ─── */
.territorio { background: #E2E0CD; }
.territorio .text-col h2 { color: #18241A; }
.territorio .text-col h2 em { color: var(--forest); }
.territorio .map-placeholder {
  background:
    radial-gradient(ellipse at 60% 40%, rgba(247, 213, 90, .12) 0%, transparent 60%),
    #2D4F18;
}
.territorio .pin { background: var(--green); color: #fff; }
.territorio .pin .pin-dot { background: #fff; }
.territorio .feature-list .dot { box-shadow: 0 0 0 0 currentColor; }

/* ─── Torn paper transitions ─── */
.paper-to-dark { background: #EBE9D4; }
.paper-to-dark svg path:last-of-type { fill: var(--dark); }
.dark-to-paper { background: var(--dark); }
.dark-to-paper svg path:last-of-type { fill: var(--ivory); }

/* Section atmospheric wash — softer green */
section.paper::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(122, 148, 40, .055) 0%, transparent 70%);
}

/* ─────────────────────────────────────────────
   IDENTITÀ — keep dark stage, shift accents to green
   ───────────────────────────────────────────── */
.identita { background: var(--dark); color: var(--ivory); }
.identita-glow {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(247, 213, 90, .08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 20% 100%, rgba(122, 148, 40, .12) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(107, 63, 160, .08) 0%, transparent 60%);
}
.identita-intro .kicker { color: var(--leaf); }
.identita-intro h2 { color: var(--ivory); }
.identita-intro h2 em { color: var(--leaf); }
.identita-intro p { color: rgba(242, 240, 221, .6); }
.identita-mark-stage {
  background: linear-gradient(180deg, rgba(242, 240, 221, .025) 0%, rgba(242, 240, 221, .015) 100%);
  border-color: rgba(242, 240, 221, .08);
}
.identita-rays {
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(247, 213, 90, .08) 30deg, transparent 60deg,
      transparent 90deg, rgba(122, 148, 40, .09) 120deg, transparent 150deg,
      transparent 180deg, rgba(107, 63, 160, .07) 210deg, transparent 240deg,
      transparent 270deg, rgba(156, 177, 67, .07) 300deg, transparent 330deg);
}
.identita-stripe { border-color: rgba(242, 240, 221, .08); }
.identita-stripe > div span { color: rgba(242, 240, 221, .32); }
.identita-mark-caption { color: rgba(242, 240, 221, .26); }
.identita-meanings li { border-bottom-color: rgba(242, 240, 221, .06); }
.identita-meanings .swatch { box-shadow: 0 0 0 1px rgba(242, 240, 221, .08), 0 4px 18px -6px currentColor; }
.identita-meanings .swatch::after { background: rgba(242, 240, 221, .18); }
.identita-meanings h6 { color: var(--ivory); }
.identita-meanings p { color: rgba(242, 240, 221, .52); }
.identita-quote { border-top-color: rgba(242, 240, 221, .08); }
.identita-quote p { color: rgba(242, 240, 221, .8); }
.identita-quote .quote-attr { color: var(--leaf); }
.section-label-row.dark .label { color: rgba(242, 240, 221, .36); }
.section-label-row.dark .rule {
  background: linear-gradient(to right, rgba(242, 240, 221, .18), transparent);
}

/* ─────────────────────────────────────────────
   FINALITÀ — fresher beige, green emphasis
   ───────────────────────────────────────────── */
.finalita { background: var(--ivory); }
.finalita-intro h2 { color: #18241A; }
.finalita-intro h2 em { color: var(--green); }
.finalita-intro p { color: rgba(24, 36, 22, .55); }
.finalita-grid {
  background: rgba(24, 36, 22, .08);
  border-color: rgba(24, 36, 22, .08);
}
.fin-card { background: var(--ivory); }
.fin-card:hover { background: #ECE9D2; }
.fin-num { color: rgba(24, 36, 22, .22); }
.fin-card:hover .fin-num { color: rgba(24, 36, 22, .42); }
.fin-card h3 { color: #18241A; }
.fin-card p { color: rgba(24, 36, 22, .55); }
.fin-tag {
  color: rgba(24, 36, 22, .32);
  border-top-color: rgba(24, 36, 22, .12);
}

/* ─────────────────────────────────────────────
   PANORAMA — handled by the CINEMATIC PHOTO SYSTEM below.
   We only override the source image + position here.
   ───────────────────────────────────────────── */
.panorama-photo {
  background-image: url('../assets/foto/lagnasco.jpg') !important;
  background-position: center 55%;
}
.panorama-inner .kicker { color: rgba(242, 240, 221, .68); }
.panorama-inner h2 em { color: var(--leaf); }
.panorama-meta { border-top-color: rgba(242, 240, 221, .2); }
.panorama-meta .pm-num { color: var(--ivory); }
.panorama-meta .pm-lbl { color: rgba(242, 240, 221, .56); }
.panorama-meta .pm-divider { background: rgba(242, 240, 221, .2); }

/* ─────────────────────────────────────────────
   AZIENDE — softer fresher background
   ───────────────────────────────────────────── */
.aziende { background: #E8E6D2; }
.aziende-intro h2 { color: #18241A; }
.aziende-intro h2 em { color: var(--green); }
.aziende-intro p { color: rgba(24, 36, 22, .55); }
.aziende-grid {
  background: rgba(24, 36, 22, .07);
  border-color: rgba(24, 36, 22, .07);
}
.az-card { background: #E8E6D2; }
.az-card:hover { background: #DDDCC3; }
.az-card::before { background: rgba(24, 36, 22, .5); }
.az-id { color: rgba(24, 36, 22, .32); }
.az-card h3 { color: #18241A; }
.az-loc { color: rgba(24, 36, 22, .42); }
.az-rule { background: rgba(24, 36, 22, .18); }
.az-spec { color: rgba(24, 36, 22, .55); }
.aziende-foot p { color: rgba(24, 36, 22, .58); }
.aziende-foot p strong { color: #18241A; }

/* Buttons — primary stays viola, secondary becomes green */
.btn-t { color: var(--forest); border-bottom-color: rgba(42, 74, 24, .35); }
.btn-t:hover { border-color: var(--forest); }
.btn-d { background: var(--dark); }
footer { background: var(--dark); }

/* Grain — slightly lighter blend */
.grain { opacity: .36; }

/* ═════════════════════════════════════════════════════════════════
   SPRING OVERRIDES — new chi-siamo & la-carta sections
   ═════════════════════════════════════════════════════════════════ */
.chi-siamo-v2 { background: #EFEDD8; }
.cs-opener-text h2 em { color: var(--moss); }
.cs-opener-body p strong { color: #18241A; }
.cs-opener-body p em { color: var(--moss); }

.cs-strip { background: var(--dark); }
.cs-strip-inner h3 em { color: var(--leaf); }
.cs-tag {
  color: rgba(243, 237, 216, .68);
  border-color: rgba(243, 237, 216, .26);
}

.cs-spread-text h3 em,
.cs-spread-text p em { color: var(--moss); }
.cs-spread-meta .num { color: var(--moss); }

.cs-fig-num { color: rgba(24, 36, 22, .42); }
.cs-fig-meta { color: rgba(24, 36, 22, .42); }

.cs-quote-rule { background: linear-gradient(to bottom, transparent, var(--moss)); }
.cs-quote .cite-name { color: var(--moss); }

.la-carta { background: #EEEAD0; }
.lc-intro-text h2 em { color: var(--moss); }
.lc-frame { background: #FFFCEC; }
.lc-cap-num { color: var(--moss); }
.lc-fact { background: #EEEAD0; }
.lc-fact:hover { background: #E6E2C2; }
.lc-comuni-list li:hover { color: var(--moss); }

/* ═════════════════════════════════════════════════════════════════
   CINEMATIC PHOTO SYSTEM — hero-grade treatment for all photos
   Layered stack: filter → tint multiply → wash soft-light →
                  grade → vignette → text halo → text shadow.
   ═════════════════════════════════════════════════════════════════ */

/* Layer 1 · Photo plate — desaturate the raw photo toward editorial. */
.cs-strip-photo {
  filter: saturate(.55) brightness(.94) contrast(1.10) hue-rotate(-6deg);
}
.panorama-photo {
  filter: saturate(.88) brightness(.98) contrast(1.06);
}

/* Layer 2 · Olive multiply — pulls bright colors into the brand palette.
   Multiply blend tints the photo while also darkening — ideal for cinematic. */
.cs-strip::before,
.panorama::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(34, 52, 20, .38) 0%,
    rgba(96, 124, 38, .15) 50%,
    rgba(34, 52, 20, .48) 100%);
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}

/* Layer 3 · Atmospheric top wash (sky-side cool light) — soft-light blend. */
.cs-strip::after,
.panorama::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 55%;
  background: linear-gradient(to bottom,
    rgba(190, 210, 195, .18) 0%,
    rgba(190, 210, 195, .05) 60%,
    transparent 100%);
  mix-blend-mode: soft-light;
  z-index: 3;
  pointer-events: none;
}

/* Layer 4 · Color grade (soft-light) — richer diagonal */
.cs-strip-grade,
.panorama-grade {
  background:
    linear-gradient(135deg,
      rgba(122, 148, 40, .26) 0%,
      rgba(247, 213, 90, .14) 38%,
      rgba(247, 213, 90, .06) 62%,
      rgba(56, 60, 110, .22) 100%);
  mix-blend-mode: soft-light;
  z-index: 4;
}

/* Layer 5 · Vignette + vertical depth */
.cs-strip-vignette,
.panorama-vignette {
  background:
    radial-gradient(ellipse 95% 75% at 50% 50%, transparent 30%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(to bottom,
      rgba(10, 18, 12, .38) 0%,
      transparent 22%,
      transparent 56%,
      rgba(4, 10, 6, .70) 100%);
  z-index: 5;
}

/* Layer 6 · Content sits on top */
.cs-strip-content,
.panorama-content {
  position: relative;
  z-index: 6;
  isolation: isolate;
}

/* Layer 7 · Text readability halo — dense radial dim behind text */
.cs-strip-inner,
.panorama-inner {
  position: relative;
}
.cs-strip-inner::after,
.panorama-inner::after {
  content: "";
  position: absolute;
  inset: -100px -150px;
  background: radial-gradient(ellipse at center,
    rgba(4, 10, 6, .65) 0%,
    rgba(4, 10, 6, .35) 35%,
    rgba(4, 10, 6, .12) 60%,
    transparent 85%);
  z-index: -1;
  pointer-events: none;
  filter: blur(48px);
  border-radius: 50%;
}

/* Layer 8 · Cinematic text shadows — luminous, multi-stack */
.cs-strip-inner h3,
.panorama-inner h2 {
  text-shadow:
    0 0 80px rgba(0, 0, 0, .7),
    0 6px 36px rgba(0, 0, 0, .55),
    0 2px 8px rgba(0, 0, 0, .45);
}
.cs-strip-inner p,
.panorama-inner > p,
.cs-strip-inner .cs-tag,
.panorama-inner .kicker {
  text-shadow:
    0 0 40px rgba(0, 0, 0, .55),
    0 2px 20px rgba(0, 0, 0, .45),
    0 1px 4px rgba(0, 0, 0, .35);
}

/* Hero — bring filter into the same target tonality, darkened for legibility */
.hero-photo {
  filter:
    hue-rotate(28deg)
    saturate(.94)
    brightness(.80)
    contrast(1.04);
}
.hero-tagline,
.hero-content .btn-hero-dark {
  text-shadow:
    0 2px 18px rgba(0, 0, 0, .7),
    0 1px 3px rgba(0, 0, 0, .55);
}

/* Hero: tagline + subtitle styling */
.hero-tagline {
  color: #FFFFFF !important;
  white-space: nowrap;
  max-width: none !important;
}
.hero-tagline em {
  color: #FFFFFF;
  font-style: italic;
}
.hero-sub {
  color: rgba(255, 255, 255, .92);
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.65;
  margin-top: -18px;
  margin-bottom: 40px;
  max-width: 560px;
  text-align: center;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, .65),
    0 1px 2px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(18px);
  animation: hero-rise-soft 2.2s var(--ease-edit) 1.75s forwards;
}
@media (max-width: 760px) {
  .hero-tagline { white-space: normal; }
}

/* ═════════════════════════════════════════════════════════════════
   EDITORIAL CLEANUP — remove visible dividers, hairlines and
   rigid layout lines. Sections connect via spacing + color only.
   ═════════════════════════════════════════════════════════════════ */

/* ─── Card grid borders: remove the 1px+bg trick, use generous gap ─── */
.finalita-grid {
  background: transparent;
  border: none;
  gap: 48px;
}
.lc-legend {
  background: transparent;
  border: none;
  gap: 56px 36px;
  margin-bottom: 96px;
}
.lc-fact { background: transparent; padding: 0; }
.lc-fact:hover { background: transparent; transform: translateY(-2px); transition: transform 1.2s var(--ease-edit); }

/* ─── Card top hairlines (animated on hover) — keep, very subtle ─── */
.fin-card::before { background: var(--moss); opacity: .5; height: 1px; }

/* ─── Tag chips: drop the pill border, leave letter-spaced caps only ─── */
.cs-tag {
  border: 0;
  padding: 0;
  background: transparent;
  letter-spacing: .32em;
  color: rgba(243, 237, 216, .75);
}

/* ─── Section label rule: very soft, almost subliminal ─── */
.section-label-row .rule {
  background: linear-gradient(to right, rgba(28, 36, 26, .14), transparent);
}
.section-label-row.dark .rule {
  background: linear-gradient(to right, rgba(242, 240, 221, .12), transparent);
}
.section-label-row.small .rule {
  background: linear-gradient(to right, transparent, rgba(28, 36, 26, .14), transparent);
}

/* ─── Identità: remove framing borders ─── */
.identita-mark-stage { border: 0; }
.identita-stripe { border: 0; }
.identita-meanings li {
  border-bottom: 0;
  padding-bottom: 36px;
}
.identita-quote {
  border-top: 0;
  margin-top: 40px;
}

/* ─── Finalità tag: drop the top hairline, use a tiny moss dot ─── */
.fin-tag {
  border-top: 0;
  padding-top: 16px;
  position: relative;
}
.fin-tag::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--moss);
  opacity: .5;
}

/* ─── Chi-Siamo spread meta row: remove the top line ─── */
.cs-spread-meta {
  border-top: 0;
  margin-top: 64px;
  padding-top: 0;
}
.cs-spread-meta .cs-divider { display: none; }

/* ─── La Carta frame: remove inner border & corner ticks ─── */
.lc-frame::after { display: none; }
.lc-corner { display: none; }

/* ─── La Carta comuni heading: remove the bottom hairline ─── */
.lc-comuni-head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 40px;
}

/* ─── Panorama meta: remove top border and vertical dividers ─── */
.panorama-meta {
  border-top: 0;
  padding-top: 0;
  margin-top: 16px;
}
.panorama-meta .pm-divider { display: none; }

/* ─── Navbar: drop the scrolled border ─── */
.nav.scrolled { border-bottom-color: transparent; }

/* ─── Section atmospheric wash ─── */
section.paper::before {
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(122, 148, 40, .07) 0%, transparent 70%);
}

/* ═════════════════════════════════════════════════════════════════
   ORGANIC SECTION EDGES — unified torn paper system
   All transitions use the SAME hero-style torn edge. Subtle,
   organic, lightweight. One visual language across the whole site.
   ═════════════════════════════════════════════════════════════════ */

/* Re-enable the original three torn-paper transitions */
.green-to-content { display: none !important; }
.paper-to-dark,
.dark-to-paper {
  display: block !important;
  line-height: 0;
  margin: 0;
  position: relative;
  z-index: 5;
}
.green-to-content svg,
.paper-to-dark svg,
.dark-to-paper svg {
  display: block !important;
  width: 100%;
  height: 100%;
}
.green-to-content {
  height: 42px;
  background: transparent;
  margin-top: -2px;
}
.paper-to-dark {
  height: 42px;
  /* MATCH: sistema bg on top, identità bg on bottom — eliminates AA hairline */
  background: linear-gradient(to bottom,
    #EFEDD8 0%, #EFEDD8 calc(100% - 6px),
    var(--dark) calc(100% - 6px), var(--dark) 100%);
  margin-top: -3px;
  margin-bottom: -3px;
}
.dark-to-paper {
  height: 42px;
  background: linear-gradient(to bottom,
    var(--dark) 0%, var(--dark) calc(100% - 6px),
    #F3EDD8 calc(100% - 6px), #F3EDD8 100%);
  margin-top: -3px;
  margin-bottom: -3px;
}
/* Recolor torn paper paths into the spring palette */
#torn-main  { fill: #F2F0DD; }
#torn2-main { fill: var(--dark); }
#torn3-main { fill: #F3EDD8; }
/* Hide the shadow paths — they create gray hairlines */
#torn-shadow,
#torn2-shadow,
#torn3-shadow { display: none !important; }
/* Ensure no SVG stroke is rendered on any torn path */
.green-to-content path,
.paper-to-dark path,
.dark-to-paper path,
.section-edge path { stroke: none !important; }
/* No shape-rendering hairlines */
.green-to-content svg,
.paper-to-dark svg,
.dark-to-paper svg,
.section-edge svg { shape-rendering: geometricPrecision; }

/* Generic edge container — same dimensions as hero torn paper */
.section-edge {
  position: relative;
  line-height: 0;
  z-index: 5;
  pointer-events: none;
  margin-top: -3px;
  margin-bottom: -3px;
  height: 42px;
}
.section-edge svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Hide any layer marked as `back` — single-layer torn edge only */
.section-edge .edge-back { display: none; }

/* Per-transition source background + target path fill */

/* Il Distretto → Chi Siamo */
[data-edge="b"] { background: var(--ivory); }
[data-edge="b"] .edge-fore { fill: #EBE9D4; }

/* Chi-Siamo opener → cs-strip (paper → dark) — mountain silhouette INVERTED,
   paper-colored, overlays the top of the photo strip below. */
[data-edge="c"] {
  background: transparent;
  height: 80px;
  margin-top: 0;
  margin-bottom: -80px;     /* exactly overlap edge-c onto cs-strip top */
  position: relative;
  z-index: 10;
  overflow: visible;
}
[data-edge="c"] svg { overflow: visible; }
[data-edge="c"] .edge-fore { fill: #EFEDD8; }

/* cs-strip → cs-quote (dark → paper) — torn paper overlays onto strip above */
[data-edge="d"] {
  background: transparent;
  position: relative;
  z-index: 10;
  height: 50px;
  margin-top: -42px;        /* top anchored at cs-strip bottom - 42px */
  margin-bottom: -8px;      /* bottom overshoots 8px past cs-strip into cream padding */
  pointer-events: none;
}
[data-edge="d"] svg {
  overflow: visible;
  width: 100%;
  height: 100%;
}
[data-edge="d"] .edge-fore { fill: #EFEDD8; }

/* Finalità → La Carta */
[data-edge="g"] { background: #F3EDD8; }
[data-edge="g"] .edge-fore { fill: #EEEAD0; }

/* La Carta → Panorama (paper → dark photo) — mountain silhouette INVERTED,
   paper-colored, overlays the top of the panorama photo below. */
[data-edge="h"] {
  background: transparent;
  height: 80px;
  margin-top: 0;
  margin-bottom: -80px;     /* overlap onto the top 80px of panorama photo */
  position: relative;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
}
[data-edge="h"] svg {
  overflow: visible;
  width: 100%;
  height: 100%;
}
[data-edge="h"] .edge-fore { fill: #EEEAD0; }

/* Remove the cs-opener/cs-strip gap — the edge replaces it */
.cs-opener { padding-bottom: 56px !important; }
.cs-strip { margin: 0 !important; }
.cs-quote { padding-top: 56px !important; }

/* ═════════════════════════════════════════════════════════════════
   IL SISTEMA DELLA FRUTTA — editorial stats section
   ═════════════════════════════════════════════════════════════════ */
.sistema {
  background: #EFEDD8;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}
.sistema .container { max-width: 1240px; margin: 0 auto; padding: 0 88px; }

.sistema-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin: 40px 0 72px;
}
.sistema-intro-text .kicker {
  display: block;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(28, 18, 6, .42);
  margin-bottom: 36px;
}
.sistema-intro-text h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 5.6vw, 80px);
  line-height: 1.02; letter-spacing: -.02em;
  color: #18241A; margin: 0;
}
.sistema-intro-text h2 em { font-style: italic; color: var(--moss); font-weight: 300; }
.sistema-intro-body p {
  font-family: var(--sans); font-size: 16px; font-weight: 300;
  color: rgba(28, 18, 6, .62); line-height: 1.9;
  margin: 0;
}
.sistema-intro-body p strong { font-weight: 500; color: #18241A; }
.sistema-intro-body p em { font-style: italic; color: var(--moss); }

.sistema-stats {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  margin-bottom: 64px;
}
.sistema-stats li {
  display: flex; flex-direction: column;
}
.sistema-stats .ss-num {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: .92; letter-spacing: -.02em;
  color: #18241A;
  margin-bottom: 14px;
}
.sistema-stats .ss-unit {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 22px;
}
.sistema-stats .ss-lbl {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.55;
  color: rgba(28, 18, 6, .62);
  max-width: 280px;
}
.sistema-stats .ss-lbl em {
  font-style: normal; color: var(--moss); font-weight: 500;
}

.sistema-foot {
  max-width: 760px; margin: 0 auto;
  text-align: center;
}
.sistema-foot p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.5;
  color: rgba(28, 18, 6, .76);
  margin: 0;
}
.sistema-foot p em { color: var(--moss); }

@media (max-width: 1024px) {
  .sistema .container { padding: 0 48px; }
  .sistema-intro { grid-template-columns: 1fr; gap: 36px; }
  .sistema-stats { grid-template-columns: repeat(2, 1fr); gap: 56px 36px; }
}
@media (max-width: 760px) {
  .sistema .container { padding: 0 24px; }
  .sistema-intro { margin-bottom: 64px; }
  .sistema-stats { grid-template-columns: 1fr; gap: 40px; }
  .sistema-stats .ss-num { font-size: clamp(48px, 12vw, 64px); }
}