/* ===== SECTION 1: Kinetic Meadow Triptych ===== */
.section{ padding: 40px 0; border-bottom: 1px solid var(--line); background: var(--bg); }

.section-triptych{
  background:
    radial-gradient(100% 60% at 80% 0%, rgba(155,215,199,.25), transparent 60%),
    radial-gradient(80% 50% at 20% 100%, rgba(47,141,126,.08), transparent 50%),
    var(--bg);
}

.triptych-wrap{
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start;
}

.intro .kicker{
  display:inline-block; font-size: 13px; color: var(--muted);
  padding: 4px 10px; border:1px solid var(--line); border-radius: 999px; background: var(--white);
}
.section-title{ margin: 10px 0 8px; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.15; }
.section-text{ color: var(--muted); }

.triptych{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: start; justify-items: center;
}

.photo-frame{
  position: relative; padding: 12px; background: var(--white); border:1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.photo-frame::before{
  content:""; position:absolute; inset: -30% -10% auto -10%;
  height: 60%; background: radial-gradient(50% 50% at 50% 50%, rgba(155,215,199,.35), rgba(155,215,199,0));
  transform: rotate(-8deg);
  pointer-events:none;
}
.photo-frame img{
  border-radius: 10px;
  /* max-width: 350px уже в globals */
}
.photo-frame figcaption{
  margin-top: 8px; font-size: 13px; color: var(--muted);
}

/* Hover / focus */
.photo-frame:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(20, 42, 35, .12); }
.photo-frame:focus-within{ outline: 2px solid var(--accent); outline-offset: 4px; }

/* Subtle tilt effect target */
.tilt{ will-change: transform; }

/* Footnote */
.section-footnote{
  grid-column: 1 / -1;
  margin-top: 6px; font-size: 14px; color: var(--muted);
  border-left: 3px solid var(--accent-2); padding-left: 10px;
}

/* ===== Responsive for section ===== */
@media (max-width: 980px){
  .triptych-wrap{ grid-template-columns: 1fr; }
  .triptych{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .triptych{ grid-template-columns: 1fr 1fr; }
  .triptych .photo-frame:last-child{ grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 420px){
  .intro .kicker{ font-size: 12px; }
  .triptych{ grid-template-columns: 1fr; }
}
/* ===== SECTION 2: Meadow Wave Gallery ===== */
.section-wave{
  background:
    radial-gradient(70% 50% at 10% 0%, rgba(155,215,199,.18), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(47,141,126,.08), transparent 60%),
    var(--bg);
}
.wave-wrap{ display:grid; gap:18px; }
.wave-head .section-title{ margin-bottom:6px; }
.wave-gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: start;
}
.wave-item{
  --r: 16px;
  position:relative; padding: 12px; background: var(--white); border:1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
  clip-path: path("M0,20 C80,0 270,40 100%,20 L100%,100% L0,100% Z");
  transition: transform .3s ease, box-shadow .3s ease;
}
.wave-item img{ border-radius: 10px; }
.wave-item:hover{ transform: translateY(-4px); box-shadow: 0 12px 32px rgba(20, 42, 35, .12); }
.wave-item figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.wave-note{
  font-size:14px; color:var(--muted);
  border-left:3px solid var(--accent-2); padding-left:10px;
}

/* ===== SECTION 3: Thermal Steps (без карточек, со шкалой) ===== */
.section-steps{ position:relative; }
.steps-wrap{ display:grid; gap:16px; }
.steps-grid{
  display:grid; grid-template-columns: 1fr; gap:14px; counter-reset: step;
  position:relative; padding-left: 14px;
}
.step{
  display:grid; grid-template-columns: 160px 1fr; gap:16px; align-items:center;
  position:relative;
}
.step::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:-14px; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color:#fff; display:grid; place-items:center;
  font-size:12px; font-weight:700;
}
.step-media img{ border-radius: 12px; border:1px solid var(--line); box-shadow: var(--shadow); }
.step-title{ margin: 0 0 6px; }
.step p{ margin: 0; color: var(--muted); }
.step:is(.active) .step-title{ color: var(--accent); }

.steps-progress{
  position:absolute; left: 20px; top: calc(72px + 20px); bottom: 20px; width: 2px;
  background: linear-gradient(#e9f3ef,#dfeee8);
  border-radius: 2px; overflow:hidden; pointer-events:none;
}
.steps-progress-bar{
  display:block; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transition: height .5s ease;
}

/* ===== SECTION 4: Seasonal Strip Carousel ===== */
.section-carousel{ background: linear-gradient(180deg,#f6faf8 0%, #f2f7f4 100%); }
.carousel{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff;
  box-shadow: var(--shadow);
}
.carousel-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px;
  scrollbar-width: thin;
}
.card-compact{ scroll-snap-align: center; }
.card-compact img{ border-radius: 12px; border:1px solid var(--line); }
.card-compact figcaption{ font-size:13px; color:var(--muted); margin-top:8px; }

.carousel-btn{
  position:absolute; top: 50%; transform: translateY(-50%);
  border:0; background:#fff; width:38px; height:38px; border-radius:999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); cursor:pointer; font-weight:700;
}
.carousel-btn:hover{ background: #f4faf7; }
.carousel-btn.prev{ left: 10px; }
.carousel-btn.next{ right: 10px; }
.carousel-note{ margin-top:10px; font-size:14px; color:var(--muted); }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .wave-gallery{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .wave-gallery{ grid-template-columns: 1fr; }
  .step{ grid-template-columns: 120px 1fr; }
}
@media (max-width: 420px){
  .step{ grid-template-columns: 1fr; }
  .steps-progress{ display:none; }
}
/* ===== SECTION 5: Diagonal Drift ===== */
.section-drift{
  background:
    linear-gradient(180deg, #f6fbf8 0%, #f2f7f4 100%);
}
.drift-wrap{ display:grid; gap:16px; }
.drift-rail{
  position:relative;
  transform: skewY(-4deg);
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.drift-card{
  transform: skewY(4deg);
  background: var(--white); border:1px solid var(--line); border-radius:16px;
  padding: 12px; box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.drift-card img{ border-radius: 10px; }
.drift-card figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.drift-card:hover{ transform: skewY(4deg) translateY(-4px); box-shadow: 0 12px 32px rgba(20,42,35,.12); }
.drift-note{
  font-size:14px; color:var(--muted);
  border-left:3px solid var(--accent-2); padding-left:10px;
}

@media (max-width: 980px){
  .drift-rail{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .drift-rail{ grid-template-columns: 1fr; }
}

/* ===== SECTION 6: Soil Lexicon ===== */
.section-lexicon{
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(155,215,199,.16), transparent 60%),
    var(--bg);
}
.lexicon-wrap{ display:grid; gap:16px; }
.lexi-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
}
.lexi-entry{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lexi-entry:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20,42,35,.12); }
.lexi-pic{
  border-radius:12px; border:1px solid var(--line); display:block; margin-bottom:10px;
}
.lexi-term{ margin: 2px 0 6px; font-size: 18px; }
.lexi-note{ font-size:14px; color:var(--muted); border-left:3px solid var(--accent-2); padding-left:10px; }

@media (max-width: 920px){
  .lexi-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 7: Wind Rose Timeline ===== */
.section-timeline{ background: linear-gradient(180deg,#f7faf8 0%, #eef6f2 100%); }
.timeline{ display:grid; gap:14px; }
.timeline-track{
  position:relative; height: 6px; background:#e6f1ec; border-radius: 6px; overflow:hidden;
}
.timeline-bar{
  position:absolute; inset:0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s ease;
}
.timeline-steps{
  list-style:none; display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin:0; padding:0;
}
.t-step{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.t-step:hover{ transform: translateY(-3px); box-shadow: 0 12px 32px rgba(20,42,35,.12); }
.t-step img{ border-radius: 10px; border:1px solid var(--line); }
.t-step figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.t-step.active{ outline: 2px solid var(--accent); outline-offset: 2px; }

.timeline-note{ font-size:14px; color:var(--muted); }

@media (max-width: 820px){
  .timeline-steps{ grid-template-columns: 1fr; }
}
/* ===== SECTION 8: Glasshouse Gridmask ===== */
.section-gridmask{
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(155,215,199,.16), transparent 60%),
    var(--bg);
}
.gridmask-wrap{ display:grid; gap:14px; }
.gridmask{
  --mx: 50%;
  --my: 50%;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
}
.gridmask-item{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.gridmask-item img{ border-radius:10px; }
.gridmask-item figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.gridmask-item::after{
  /* тёмная вуаль с «дыркой»-прожектором, который следует за мышью */
  content:""; position:absolute; inset: 12px 12px calc(12px + 1.6em) 12px; border-radius: 10px;
  background: rgba(18, 30, 26, .35);
  -webkit-mask-image: radial-gradient(120px 120px at var(--mx) var(--my), transparent 35%, black 70%);
          mask-image: radial-gradient(120px 120px at var(--mx) var(--my), transparent 35%, black 70%);
  pointer-events:none; transition: opacity .2s ease;
}
.gridmask-item:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,42,35,.12); }
.gridmask-item:hover::after{ opacity: .2; }

.gridmask-note{
  font-size:14px; color:var(--muted);
  border-left:3px solid var(--accent-2); padding-left:10px;
}

@media (max-width: 980px){
  .gridmask{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .gridmask{ grid-template-columns: 1fr; }
}

/* ===== SECTION 9: Longread (полотно текста + margin-rail) ===== */
.section-longread{
  background:
    radial-gradient(60% 60% at 0% 100%, rgba(47,141,126,.08), transparent 60%),
    var(--bg);
}
.longread-wrap{ display:grid; gap:16px; }
.longread-grid{
  display:grid; grid-template-columns: 1.4fr .6fr; gap: 18px; align-items:start;
}
.longread{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow: var(--shadow);
}
.longread p{ margin: 0 0 12px; color: var(--ink); }
.margin-rail{ position:relative; display:grid; gap:12px; }
.margin-pic{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px;
  box-shadow: var(--shadow);
}
.margin-pic img{ border-radius:10px; }
.margin-pic figcaption{ margin-top:6px; font-size:13px; color:var(--muted); }

@media (max-width: 900px){
  .longread-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 10: Chef Notes (flip/tilt sticky cards) ===== */
.section-chefnotes{ background: linear-gradient(180deg,#f6faf8 0%, #eef6f2 100%); }
.notes-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
}
.note-card{
  position:relative; transform-style: preserve-3d;
  background: #fff; border:1px solid var(--line); border-radius:18px; padding:14px;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.note-card:focus{ outline: 2px solid var(--accent); outline-offset: 3px; }
.note-card:hover{ box-shadow: 0 14px 36px rgba(20,42,35,.14); }

.note-tape{
  position:absolute; top:-10px; left:50%; transform: translateX(-50%) rotate(-4deg);
  width: 68px; height: 18px; background: rgba(255,255,200,.8); border:1px solid rgba(0,0,0,.05);
  border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.note-face, .note-back{
  backface-visibility: hidden;
}
.note-face figure{ margin:0; }
.note-face img{ border-radius: 12px; border:1px solid var(--line); }
.note-face figcaption{ font-size:13px; color:var(--muted); margin-top:8px; }

.note-back{
  position:absolute; inset:14px; background:#fff; border:1px dashed var(--line); border-radius:12px;
  transform: rotateY(180deg);
  display:grid; place-items:center; padding:12px; color: var(--muted); text-align:center;
}

.note-card.flipped .note-face{ transform: rotateY(180deg); }
.note-card.flipped .note-back{ transform: rotateY(0deg); }

@media (max-width: 980px){
  .notes-grid{ grid-template-columns: 1fr; }
}
/* ===== SECTION 11: Parallax Ridge ===== */
.section-ridge{
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(155,215,199,.16), transparent 60%),
    var(--bg);
}
.ridge-wrap{ display:grid; gap:14px; }
.ridge-band{
  position:relative; border:1px solid var(--line); border-radius:18px; background:#fff;
  box-shadow: var(--shadow); overflow:hidden; isolation:isolate;
}
.ridge-photos{
  list-style:none; margin:0; padding:18px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;
}
.ridge-photo{
  will-change: transform;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.ridge-photo img{ border-radius:12px; border:1px solid var(--line); display:block; }
.ridge-photo:hover{ transform: translateY(-3px); }

.ridge-layer{
  position:absolute; left:0; right:0; height:120px; pointer-events:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size: cover; mask-size: cover;
}
.ridge-layer.back{
  top:0;
  background: linear-gradient(180deg, #eaf5f0 0%, rgba(234,245,240,0) 100%);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="120" viewBox="0 0 1440 120"><path d="M0,80 C180,40 320,100 540,70 C760,40 920,100 1140,70 C1260,52 1360,40 1440,70 L1440,120 L0,120 Z" fill="black"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="120" viewBox="0 0 1440 120"><path d="M0,80 C180,40 320,100 540,70 C760,40 920,100 1140,70 C1260,52 1360,40 1440,70 L1440,120 L0,120 Z" fill="black"/></svg>');
}
.ridge-layer.front{
  bottom:0;
  background: linear-gradient(0deg, #eaf5f0 0%, rgba(234,245,240,0) 100%);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="120" viewBox="0 0 1440 120"><path d="M0,40 C180,80 320,20 540,50 C760,80 920,20 1140,50 C1260,68 1360,80 1440,50 L1440,0 L0,0 Z" fill="black"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="120" viewBox="0 0 1440 120"><path d="M0,40 C180,80 320,20 540,50 C760,80 920,20 1140,50 C1260,68 1360,80 1440,50 L1440,0 L0,0 Z" fill="black"/></svg>');
}

.ridge-note{
  font-size:14px; color:var(--muted);
  border-left:3px solid var(--accent-2); padding-left:10px;
}

@media (max-width: 880px){
  .ridge-photos{ grid-template-columns: 1fr; }
}

/* ===== SECTION 12: Quiet Standard (лонгрид без фото) ===== */
.section-standard{
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(47,141,126,.08), transparent 60%),
    var(--bg);
}
.standard-wrap{
  display:grid; grid-template-columns: 1.4fr .6fr; gap:18px; align-items:start;
}
.standard-text{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow: var(--shadow);
}
.standard-text p{ margin:0 0 12px; }
.standard-aside{
  position:relative; background:#fff; border:1px dashed var(--line); border-radius:16px; padding:14px;
  box-shadow: var(--shadow);
}
.quiet-list{ margin:0; padding-left:18px; color: var(--muted); }
.quiet-list li{ padding:4px 0; }
@media (max-width: 920px){
  .standard-wrap{ grid-template-columns: 1fr; }
}

/* ===== SECTION 13: Lab Shelf ===== */
.section-shelf{ background: linear-gradient(180deg,#f6faf8 0%, #eef6f2 100%); }
.shelf-wrap{ display:grid; gap:14px; }
.shelf{
  position:relative;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
  padding-bottom: 18px;
}
.shelf::after{
  /* линии «полки» */
  content:""; position:absolute; left: 6px; right: 6px; bottom: 0;
  height: 8px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(32,50,44,.15) 0 10%, rgba(32,50,44,.06) 10% 90%, rgba(32,50,44,.15) 90% 100%);
}
.shelf-item{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.shelf-figure{ margin:0; }
.shelf-figure img{ border-radius:12px; border:1px solid var(--line); }
.shelf-figure figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }
.shelf-item:hover{ transform: translateY(-4px); box-shadow: 0 14px 36px rgba(20,42,35,.14); }

/* лёгкое парение */
@keyframes floaty {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-3px) }
  100% { transform: translateY(0) }
}
.floaty{ animation: floaty 6s ease-in-out infinite; }

.shelf-note{ font-size:14px; color:var(--muted); border-left:3px solid var(--accent-2); padding-left:10px; }

@media (max-width: 900px){
  .shelf{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .floaty{ animation: none; }
}
/* ===== SECTION 14: Edge Map ===== */
.section-edgemap{
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(155,215,199,.16), transparent 60%),
    var(--bg);
}
.edgemap-wrap{ display:grid; gap:14px; }
.edgemap-canvas{
  position:relative; border:1px solid var(--line); border-radius:18px; background:#fff;
  box-shadow: var(--shadow); overflow:hidden;
}
.edgemap-photo{
  margin:0; padding:12px;
}
.edgemap-photo img{ border-radius:12px; border:1px solid var(--line); }
.edgemap-photo figcaption{ margin-top:8px; font-size:13px; color:var(--muted); }

.edgemap-svg{
  position:absolute; inset:0; color: var(--accent);
  pointer-events:none;
}
#edgePath{
  /* stroke dash настраиваем из JS */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
.edge-dot{
  fill: var(--accent-2);
  stroke: var(--accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
  animation: dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
}
.edgemap-note{
  font-size:14px; color:var(--muted);
  border-left:3px solid var(--accent-2); padding-left:10px;
}

@media (max-width: 820px){
  .edgemap-svg{ opacity:.9; }
}

/* ===== SECTION 15: Closing Ledger ===== */
.section-ledger{
  background:
    radial-gradient(60% 60% at 0% 100%, rgba(47,141,126,.08), transparent 60%),
    var(--bg);
}
.ledger-wrap{
  display:grid; grid-template-columns: 1.3fr .7fr; gap:18px; align-items:start;
}
.ledger-text{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow: var(--shadow);
}
.ledger-text p{ margin:0 0 12px; }

.ledger-aside{
  position:relative; display:grid; align-content:start; gap:12px;
}
.ledger-stamp{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px;
  box-shadow: var(--shadow);
  transform: rotate(-6deg) scale(.92);
  transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, filter .4s ease;
}
.ledger-stamp img{ border-radius:10px; border:1px solid var(--line); }
.ledger-stamp figcaption{ margin-top:6px; font-size:13px; color:var(--muted); }

.ledger-stamp.stamped{
  transform: rotate(0deg) scale(1);
  box-shadow: 0 14px 36px rgba(20,42,35,.14);
  filter: saturate(1.08);
}

@media (max-width: 920px){
  .ledger-wrap{ grid-template-columns: 1fr; }
}