/* ===== Shared page intro ===== */
.page-title{ margin:0 0 6px; font-size: clamp(26px, 4.8vw, 40px); }
.page-lede{ margin:0 0 12px; color:#dbe6fb; }

/* Images: respect ≤350px width everywhere */
.journal-hero img,
.city-dispatches img,
.lab-notes img{
  width: min(100%, 350px);
}

/* ===== 1) Journal Hero ===== */
.journal-hero{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.jh-grid{
  display:grid; gap:18px;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
.jh-headlines{
  display:grid; gap:14px; align-content:start;
  grid-template-columns: 1fr 1fr;
}
.headline-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.headline-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.hl-fig{ margin:0 0 8px; border-radius:12px; overflow:hidden; }
.hl-fig img{ aspect-ratio: 4 / 3; object-fit: cover; }
.hl-title{ margin:0; }

.tilt-l{ transform: rotate(-1.2deg); }
.tilt-r{ transform: rotate(1.2deg); }

/* masthead shimmer line behind title */
.mast-shimmer{
  position:absolute; left:0; right:0; top:0; height:3px; opacity:.7; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,210,77,.55), transparent);
  transform: translateX(-30%);
  animation: mastMove 6s linear infinite;
}
@keyframes mastMove{ to{ transform: translateX(30%); } }

/* byline ticker */
.byline-ticker{ display:flex; gap:10px; margin:12px 0 0; padding:0; list-style:none; flex-wrap:wrap; }
.byline-ticker li{
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
}

@media (max-width: 992px){
  .jh-grid{ grid-template-columns: 1fr; }
  .jh-headlines{ grid-template-columns: 1fr; }
}

/* ===== 2) City Dispatches ===== */
.city-dispatches{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.cd-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.cd-card{
  position:relative; border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.cd-fig{ margin:0 0 8px; border-radius:12px; overflow:hidden; }
.cd-fig img{ aspect-ratio:4/3; object-fit:cover; }
.cd-title{ margin:0 0 4px; }
.cd-note{ margin:0; color:#dbe6fb; }

/* pulsing map pin */
.cd-card .pin{
  position:absolute; right:14px; top:14px; width:12px; height:12px; border-radius:50%;
  background:#ffd24d; box-shadow:0 0 0 0 rgba(255,210,77,.55);
  animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,210,77,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,210,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,210,77,0); }
}

/* diagonal isobars over section */
.isobars{
  position:absolute; inset:0; pointer-events:none; opacity:.38;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px);
  animation: isoSlide 18s linear infinite;
  filter: blur(.2px);
}
@keyframes isoSlide{ to{ background-position: 0 520px; } }

/* stamp label */
/* stamp label — теперь поверх фото, не закрывает текст */
.stamp{
  position:absolute;
  top:18px;            /* ⬅ было bottom:10px */
  left:18px;           /* ⬅ было left:12px */
  right:auto; bottom:auto;
  z-index:1;
  pointer-events:none; /* чтобы не перекрывал клики по карточке */
  padding:4px 8px; border-radius:6px;
  font-weight:700; letter-spacing:.4px;
  color:#0a0f16;
  background:linear-gradient(180deg, #ffd24d, #ffb703);
  border:1px solid rgba(255,210,77,.55);
  transform: rotate(-8deg);
  box-shadow:0 8px 20px rgba(255,210,77,.3);
}
.stamp.alt{ transform: rotate(8deg); }

/* немного уменьшаем на совсем маленьких экранах */
@media (max-width: 420px){
  .stamp{ transform: scale(.9) rotate(-8deg); }
  .stamp.alt{ transform: scale(.9) rotate(8deg); }
}

/* ===== 3) Lab Notes ===== */
.lab-notes{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.ln-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.ln-shot{
  padding:10px; border-radius:16px; text-align:center; position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ln-shot:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.ln-shot img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.ln-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* paper curl & rig glow */
.ln-shot.paper::after{
  content:""; position:absolute; right:12px; top:12px; width:20px; height:20px;
  background: radial-gradient(8px 8px at 100% 0, rgba(255,255,255,.35), transparent 60%);
  transform: rotate(45deg);
  opacity:.6;
}
.ln-shot.rig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(58,160,255,.12), transparent 60%);
  opacity:.5;
}

/* blueprint grid drifting behind section */
.grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px);
  animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift{ to{ background-position: 0 260px, 260px 0; } }

@media (max-width: 992px){ .ln-grid{ grid-template-columns: 1fr; } }
/* ensure ≤350px rule also applies */
.monsoon-timeline img,
.makers-bench img,
.rain-audio img{ width:min(100%, 350px); }

/* ===== 4) Monsoon Timeline ===== */
.monsoon-timeline{ padding: clamp(56px, 8vh, 84px) 0; }
.mt-marquee{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 0 16px rgba(0,0,0,.22);
  margin-bottom:12px;
}
.mt-track{
  display:flex; gap:28px; padding:10px 14px; white-space:nowrap; font-weight:600; color:#e6f0ff;
  animation: mtMove 22s linear infinite;
}
.mt-track span{ opacity:.9; }
@keyframes mtMove{ to{ transform: translateX(-50%); } }

.mt-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.mt-card{
  padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mt-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.mt-card img{ aspect-ratio:4/3; object-fit:cover; }
.mt-card figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

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

/* ===== 5) Maker’s Bench (extended) ===== */
.makers-bench{ padding: clamp(56px, 8vh, 92px) 0; position:relative; }
.mb-wrap{
  display:grid; gap:20px;
  grid-template-columns: 1.2fr .8fr;
  align-items:start;
}
.mb-copy p{ color:#e3ecff; }
.mb-quote{
  margin:10px 0 0; padding:8px 10px; border-radius:12px; font-weight:600; color:#0a0f16;
  background:linear-gradient(180deg, #ffd24d, #ffb703);
  border:1px solid rgba(255,210,77,.55);
  box-shadow:0 10px 24px rgba(255,210,77,.35);
}
.mb-faq{ margin-top:12px; border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:8px 10px; }
.mb-faq[open]{ background: rgba(255,255,255,.05); }

.mb-figs{
  display:grid; gap:14px;
  grid-template-columns: 1fr 1fr 1fr;
}
.mb-shot{
  position:relative; padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.mb-shot img{ aspect-ratio:4/3; object-fit:cover; }
.mb-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.9rem; }

/* running stitch animation around images */
.mb-shot.stitch::after{
  content:""; position:absolute; inset:8px; border-radius:12px; pointer-events:none;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.0) 0 25%, rgba(255,255,255,.35) 0 25%) 0 0/12px 12px repeat;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  animation: stitchRun 2.6s linear infinite;
  opacity:.6;
}
@keyframes stitchRun{ to{ transform: rotate(360deg); } }

@media (max-width: 1100px){ .mb-figs{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mb-figs{ grid-template-columns: 1fr; } .mb-wrap{ grid-template-columns: 1fr; } }

/* ===== 6) Rain Audio ===== */
.rain-audio{ padding: clamp(56px, 8vh, 84px) 0; }
.ra-visual{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; overflow:hidden; margin-bottom:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 0 16px rgba(0,0,0,.22);
}
.ra-bars{
  display:flex; gap:6px; align-items:flex-end; height:110px; padding:10px;
}
.ra-bars i{
  --w: 8px; width:var(--w); height:20px; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg, #ffd24d, #ffb703);
  transform-origin: bottom; opacity:.95;
  animation: eqPulse2 1.2s ease-in-out infinite;
}
.ra-bars i:nth-child(3n+1){ animation-duration:1.0s; }
.ra-bars i:nth-child(3n+2){ animation-duration:1.35s; }
.ra-bars i:nth-child(3n){ animation-duration:1.15s; }
@keyframes eqPulse2{
  0%,100%{ transform: scaleY(.25); }
  40%{ transform: scaleY(.95); }
  70%{ transform: scaleY(.5); }
}

.ra-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.ra-card{
  padding:10px; border-radius:16px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.ra-card img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; }

/* hover ripple */
.ra-card.ripple::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.25) 0 2%, transparent 45%);
  transform: scale(.2); transition: transform .7s ease, opacity .7s ease;
}
.ra-card.ripple:hover::after{ transform: scale(3.5); opacity:1; }

.ra-card figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

@media (max-width: 992px){ .ra-grid{ grid-template-columns: 1fr; } }
/* width cap for new sections */
.route-notes img, .care-dry-store img, .street-portraits img{
  width: min(100%, 350px);
}

/* ===== 7) Route Notes ===== */
.route-notes{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.rn-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr;
}
.rn-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rn-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.rn-fig{ margin:0 0 8px; border-radius:12px; overflow:hidden; }
.rn-fig img{ aspect-ratio:4/3; object-fit:cover; }
.rn-title{ margin:0 0 4px; }
.rn-copy{ margin:0; color:#dbe6fb; }

/* dashed path + moving dot */
.route-canvas{
  position:absolute; left:0; right:0; top:24px; height:44px; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 10px, transparent 10px 22px);
  mask: linear-gradient(90deg, transparent 0 4%, #000 15% 85%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent 0 4%, #000 15% 85%, transparent);
  border-radius:12px; opacity:.35;
  animation: pathDrift 12s linear infinite;
}
@keyframes pathDrift{ 50%{ transform: translateY(2px); } }

.route-dot{
  position:absolute; top:50%; left:10%; width:12px; height:12px; border-radius:50%;
  background:#ffd24d; box-shadow:0 0 0 0 rgba(255,210,77,.55);
  transform: translate(-50%, -50%);
  animation: routeMove 9s ease-in-out infinite, pinPulse 2.4s ease-out infinite;
}
@keyframes routeMove{
  0%{ left:10%; transform: translate(-50%, -60%); }
  25%{ left:30%; transform: translate(-50%, -40%); }
  50%{ left:55%; transform: translate(-50%, -60%); }
  75%{ left:78%; transform: translate(-50%, -40%); }
  100%{ left:90%; transform: translate(-50%, -60%); }
}
@keyframes pinPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,210,77,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,210,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,210,77,0); }
}

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

/* ===== 8) Care — Dry & Store ===== */
.care-dry-store{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.cds-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr;
}
.cds-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.cds-fig{ margin:0 0 8px; border-radius:12px; overflow:hidden; }
.cds-fig img{ aspect-ratio:4/3; object-fit:cover; }
.cds-title{ margin:0 0 4px; }
.cds-copy{ margin:0; color:#dbe6fb; }

/* swinging clothesline with pegs */
.cds-line{
  position:relative; height:56px; margin-bottom:12px;
  background: radial-gradient(200px 40px at 50% 90%, rgba(255,255,255,.08), transparent 60%);
}
.cds-line::before{
  content:""; position:absolute; left:6%; right:6%; top:20px; height:2px;
  background:rgba(255,255,255,.25); transform-origin: 50% 0;
  animation: lineSwing 5.5s ease-in-out infinite;
}
@keyframes lineSwing{ 50%{ transform: rotate(.8deg); } }

.peg{
  position:absolute; top:10px; width:10px; height:14px; border-radius:2px;
  background:#ffd24d; box-shadow:0 2px 0 rgba(0,0,0,.25);
  transform-origin: 50% -8px; animation: pegSwing 5.5s ease-in-out infinite;
}
.peg.p1{ left:20%; } .peg.p2{ left:50%; animation-delay:.2s; } .peg.p3{ left:78%; animation-delay:.4s; }
@keyframes pegSwing{ 50%{ transform: rotate(6deg); } }

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

/* ===== 9) Street Portraits ===== */
.street-portraits{ padding: clamp(56px, 8vh, 84px) 0; }
.sp-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr;
}
.sp-card{
  position:relative; padding:10px; border-radius:16px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.sp-card img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.sp-card figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* outline draw on hover */
.sp-card.draw::after{
  content:""; position:absolute; inset:6px; border-radius:12px; pointer-events:none;
  border:2px solid rgba(255,255,255,.3);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); /* скрыто */
  transition: clip-path .6s ease;
}
.sp-card.draw:hover::after{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* «рисуется» контур */
}

@media (max-width: 992px){ .sp-grid{ grid-template-columns: 1fr; } }
/* width cap для новых секций */
.postcards img, .myth-fact img, .repair-log img{ width:min(100%, 350px); }

/* ===== 10) Postcards ===== */
.postcards{ padding: clamp(56px, 8vh, 84px) 0; }
.pc-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr;
}
.pc-card{
  position:relative; border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pc-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.pc-fig{ position:relative; border-radius:12px; overflow:hidden; margin:0 0 8px; }
.pc-fig img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; }

/* вращающийся «штамп» */
.pc-fig::after{
  content:""; position:absolute; right:10px; top:10px; width:80px; height:80px; border-radius:50%;
  background: conic-gradient(from 0deg, rgba(255,210,77,.25), rgba(58,160,255,.2), rgba(255,210,77,.25));
  mix-blend-mode: screen; opacity:.55; filter: blur(.3px);
  animation: postmarkSpin 8s linear infinite;
}
@keyframes postmarkSpin{ to{ transform: rotate(360deg); } }

/* «булавка» */
.pc-card .pin{
  position:absolute; left:18px; top:18px; width:12px; height:12px; border-radius:50%;
  background:#ffd24d; box-shadow:0 0 0 0 rgba(255,210,77,.55);
  animation: pinPulse 2.4s ease-out infinite;
}
.pc-title{ margin:0 0 4px; }
.pc-text{ margin:0; color:#dbe6fb; }

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

/* ===== 11) Myth vs Rain (flip) ===== */
.myth-fact{ padding: clamp(56px, 8vh, 84px) 0; }
.mf-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr;
  perspective: 1000px;
}
.mf-card{ border-radius:16px; border:1px solid rgba(255,255,255,.12); overflow:hidden; }
.mf-inner{
  position:relative; transform-style: preserve-3d; transition: transform .7s ease;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.mf-card:hover .mf-inner, .mf-card:focus-within .mf-inner{ transform: rotateY(180deg); }
.face{
  position:relative; padding:12px; min-height: 280px;
  display:grid; gap:8px; justify-items:start; align-content:start;
  backface-visibility: hidden;
}
.front .mf-fig{ border-radius:12px; overflow:hidden; margin:0; }
.front .mf-fig img{ aspect-ratio:4/3; object-fit:cover; }
.back{
  position:absolute; inset:0; transform: rotateY(180deg);
}
.mf-title{ margin:0; }
.mf-fig + .mf-title{ margin-top:4px; }
@media (max-width: 992px){ .mf-grid{ grid-template-columns: 1fr; } }

/* ===== 12) Repair Desk Log ===== */
.repair-log{ padding: clamp(56px, 8vh, 92px) 0; }
.rl-copy p{ color:#e3ecff; }
.rl-points{ margin:10px 0 0; padding-left:18px; color:#dbe6fb; }

.rl-queue{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 0 16px rgba(0,0,0,.22);
  margin:12px 0;
}
.rl-track{
  display:flex; gap:32px; padding:10px 14px; white-space:nowrap; font-weight:600; color:#e6f0ff;
  animation: rlScroll 18s linear infinite;
}
@keyframes rlScroll{ to{ transform: translateX(-50%); } }

.rl-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr;
}
.rl-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.rl-fig{ margin:0 0 8px; border-radius:12px; overflow:hidden; }
.rl-fig img{ aspect-ratio:4/3; object-fit:cover; }
.rl-title{ margin:0 0 6px; }
.rl-copy{ margin:0; color:#dbe6fb; }

/* прогресс-полоса с «шиммером» */
.rl-bar{
  position:relative; height:12px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18); margin:6px 0 8px;
}
.rl-bar span{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, #ffd24d, #3aa0ff);
  box-shadow:0 0 14px rgba(255,210,77,.35);
  animation: rlFill 1.8s ease-out forwards, rlShimmer 1.2s linear infinite;
  background-size: 200% 100%;
}
@keyframes rlFill{ to{ width: 86%; } }
@keyframes rlShimmer{ 0%{ background-position: 0 0; } 100%{ background-position: 200% 0; } }

@media (max-width: 992px){ .rl-grid{ grid-template-columns: 1fr; } }
/* width limit */
.photo-essay img, .toolkit img, .weather-windows img, .afterword img{
  width:min(100%, 350px);
}

/* ===== 13) Photo Essay ===== */
.photo-essay{ padding: clamp(56px, 8vh, 84px) 0; }
.pe-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pe-card{
  position:relative; padding:10px; border-radius:16px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.pe-card img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.pe-card figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* «shutter» — полоски, раздвигающиеся на hover */
.shutter::after{
  content:""; position:absolute; inset:10px; border-radius:10px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 3px, transparent 3px 10px);
  opacity:.0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.shutter:hover::after{ opacity:.45; transform: translateY(0); }

@media (max-width: 1100px){ .pe-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pe-grid{ grid-template-columns: 1fr; } }

/* ===== 14) Toolkit ===== */
.toolkit{ padding: clamp(56px, 8vh, 90px) 0; position:relative; }
.tk-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tk-card{
  position:relative; border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.tk-fig{ margin:0 0 8px; border-radius:12px; overflow:hidden; }
.tk-fig img{ aspect-ratio:4/3; object-fit:cover; }
.tk-title{ margin:0 0 4px; }
.tk-text{ margin:0; color:#dbe6fb; }

/* «верёвка» со светящимися узлами */
.tk-rope{
  position:relative; height:54px; margin:12px 0;
  background: radial-gradient(200px 40px at 50% 90%, rgba(255,255,255,.08), transparent 60%);
}
.tk-rope::before{
  content:""; position:absolute; left:6%; right:6%; top:22px; height:2px;
  background:rgba(255,255,255,.25); transform-origin:50% 0;
  animation: lineSwing 6s ease-in-out infinite;
}
.node{
  position:absolute; top:14px; width:10px; height:10px; border-radius:50%;
  background:#ffd24d; box-shadow:0 0 0 0 rgba(255,210,77,.55);
  animation: beaconPulse 2.2s ease-out infinite;
}
.node.n1{ left:22%; } .node.n2{ left:50%; animation-delay:.3s; } .node.n3{ left:78%; animation-delay:.6s; }
@keyframes beaconPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,210,77,.55); } 70%{ box-shadow:0 0 0 12px rgba(255,210,77,0);} 100%{ box-shadow:0 0 0 0 rgba(255,210,77,0);} }

@media (max-width: 1100px){ .tk-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .tk-grid{ grid-template-columns: 1fr; } }

/* ===== 15) Weather Windows ===== */
.weather-windows{ padding: clamp(56px, 8vh, 84px) 0; }
.ww-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ww-card{
  position:relative; padding:10px; border-radius:16px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.ww-card img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.ww-card figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* «панельные» линии и мягкий параллакс */
.pane::before{
  content:""; position:absolute; inset:10px; border-radius:10px; pointer-events:none; opacity:.35;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 16px);
  animation: paneDrift 18s linear infinite;
}
@keyframes paneDrift{ to{ background-position: 0 420px; } }
.pane:hover img{ transform: scale(1.02); transition: transform .35s ease; }

@media (max-width: 1100px){ .ww-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .ww-grid{ grid-template-columns: 1fr; } }

/* ===== 16) Afterword ===== */
.afterword{ padding: clamp(56px, 8vh, 92px) 0; }
.aw-wrap{
  display:grid; gap:18px; grid-template-columns: 1.2fr .8fr; align-items:start;
}
.aw-copy p{ color:#e3ecff; }

/* карточки с «заломом бумаги» и мягким свечением */
.aw-figs{ display:grid; gap:14px; }
.aw-shot{
  position:relative; padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.aw-shot img{ aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.aw-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

.aw-shot.curl::after{
  content:""; position:absolute; right:12px; top:12px; width:22px; height:22px;
  background: radial-gradient(9px 9px at 100% 0, rgba(255,255,255,.35), transparent 60%);
  transform: rotate(45deg); opacity:.7;
}
.aw-shot.glow::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,210,77,.12), transparent 60%);
  opacity:.5;
}

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