/* Routes page uses the global color system and fonts */
/* Keep header fixed space */
main{ padding-top: 68px; }

/* ===== SECTION 1: Route Weave Hero ===== */
.route-hero{ padding: clamp(28px, 6vw, 72px) 0; }
.hero-grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, 3vw, 28px); align-items:center;
}
.hero-title{
  font-family:"Playfair Display", serif; font-size: clamp(26px, 3.4vw, 42px);
  margin:0 0 10px 0; text-shadow:0 2px 14px rgba(93,211,255,.15);
}
.hero-lead{ margin:0 0 8px 0; }
.hero-text{ color:var(--muted); margin:0 0 10px 0; }
.hero-points{ margin:0; padding-left:18px; color:var(--muted); }

.hero-mosaic{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(12px, 2vw, 18px);
}
.hero-mosaic .tile{
  grid-column: span 6;
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:10px; box-shadow: var(--shadow); transition: transform .25s ease;
}
.hero-mosaic .tile:hover{ transform: translateY(-6px); }
.hero-mosaic img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.hero-mosaic figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

/* staggered look */
.hero-mosaic .tile:nth-child(1){ grid-column: 1 / span 7; }
.hero-mosaic .tile:nth-child(2){ grid-column: 6 / span 7; }
.hero-mosaic .tile:nth-child(3){ grid-column: 3 / span 7; }

@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-mosaic .tile{ grid-column: 1 / -1; }
}

/* ===== SECTION 2: Mini Itineraries ===== */
.mini-its{ padding: clamp(28px, 6vw, 72px) 0; }
.its-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px, 2vw, 20px);
}
.it-card{
  grid-column: span 6;
  padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(138,255,193,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.it-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.it-card p{ margin:0; color:var(--muted); }
.it-card figure{ margin:0; }
.it-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.it-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

.it-ribbon{
  display:flex; align-items:center; gap:8px; margin-bottom:10px; opacity:.95;
}
.it-ribbon i{
  display:block; height:2px; width:20%;
  background: repeating-linear-gradient(90deg, var(--brand) 0 10px, transparent 10px 18px);
  border-radius:2px;
}
.it-ribbon span{ font-size:12px; color:var(--muted); }

/* ===== SECTION 3: Seasonal Switch (Tabs) ===== */
.season-switch{ padding: clamp(28px, 6vw, 72px) 0; }
.switcher{ border:1px solid rgba(255,255,255,.08); border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow); padding: clamp(12px, 2vw, 16px);
}
.tabs{ display:flex; gap:10px; margin-bottom:10px; }
.tab{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color:var(--ink); padding:8px 12px; border-radius:12px; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.tab:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.tab.is-active{ background: linear-gradient(180deg, rgba(93,211,255,.18), rgba(93,211,255,.08)); }

.panels{ position:relative; }
.panel{ display:none; }
.panel.is-active{ display:block; }

.panel-card{
  padding:12px; border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.panel-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.panel-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.panel-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.panel-card p{ margin:0; color:var(--muted); }
/* === FIX: Section 2 (Mini Itineraries) — mobile stacking + safe timeline === */

/* 1) Лента времени на гриде: auto time · flex bar · auto time ... */
.it-ribbon{
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto; /* t — bar — t — bar — t — bar — t */
  align-items: center;
  column-gap: 8px;
  margin-bottom: 10px;
  opacity: .95;
}
.it-ribbon i{
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 16px);
  border-radius: 2px;
}
.it-ribbon span{ font-size: 12px; color: var(--muted); white-space: nowrap; }

/* 2) На планшетах/мобилках карточки в один столбец, ничего не наезжает */
@media (max-width: 980px){
  .its-grid .it-card{ grid-column: 1 / -1; }
}

/* 3) На очень узких — чуть меньше шрифт времени */
@media (max-width: 420px){
  .it-ribbon span{ font-size: 11px; }
}
/* ===== SECTION 4: Ridge Road Switchbacks ===== */
.ridge-section{ padding: clamp(28px, 6vw, 72px) 0; }
.ridge-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px, 2vw, 20px);
}
.hairpin-aside{
  grid-column: span 3;
}
.hairpin-track{
  position:relative; height:100%;
  min-height: 240px;
  border:1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--radius) + 6px);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.hairpin-stops{
  position:absolute; inset:16px; margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; justify-content:space-between;
}
.hairpin-stops li{
  position:relative; padding-left:20px; color:var(--muted); font-size:13px;
}
.hairpin-stops li::before{
  content:""; position:absolute; left:0; top:4px; width:10px; height:10px; border-radius:50%;
  background: var(--brand-2); box-shadow: 0 0 10px rgba(255,209,102,.6);
}

.ridge-cards{
  grid-column: span 9;
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px, 2vw, 20px);
}
.ridge-card{
  grid-column: span 6;
  padding:10px; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow); transition: transform .25s ease;
}
.ridge-card:hover{ transform: translateY(-6px); }
.ridge-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.ridge-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

.ridge-text{
  grid-column: span 12;
  padding:12px; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

@media (max-width: 1020px){
  .hairpin-aside{ grid-column: 1 / -1; }
  .ridge-cards{ grid-column: 1 / -1; }
}

/* ===== SECTION 5: Coast Hops (film reel) ===== */
.coast-section{ padding: clamp(28px, 6vw, 72px) 0; }
.coast-strip{
  display:flex; gap: clamp(14px, 2vw, 20px);
  overflow:auto; scroll-snap-type:x mandatory;
  padding: 0 clamp(16px, 3vw, 28px) clamp(10px, 2vw, 18px);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  -webkit-overflow-scrolling: touch;
}
.frame{
  flex:0 0 auto; width:min(86vw, 350px); scroll-snap-align:start;
  padding:10px; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow); transition: transform .25s ease;
}
.frame:hover{ transform: translateY(-6px); }
.frame img{ width:100%; height:auto; border-radius: calc(var(--radius) - 4px); object-fit:cover; }
.frame figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

/* ===== SECTION 6: Heritage Hours ===== */
.heritage-section{ padding: clamp(28px, 6vw, 72px) 0; }
.slots-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px, 2vw, 20px);
}
.slot{
  grid-column: span 6;
  padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(93,211,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.slot-time{
  display:inline-block; font-size:12px; color:var(--muted);
  padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); margin-bottom:8px;
}
.slot figure{ margin:0; }
.slot img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.slot figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.slot h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.slot p{ margin:0; color:var(--muted); }

@media (max-width: 980px){
  .slot{ grid-column: span 12; }
}
/* ===== SECTION 7: Plateau Trains ===== */
.plateau-section{ padding: clamp(28px,6vw,72px) 0; }
.window-band{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.w-pane{ grid-column: span 6; }
.w-glass{
  height: min(62vh, 520px);
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow:hidden; box-shadow: var(--shadow);
}
.w-glass img{
  width:100%; height:100%; object-fit:cover; max-width:350px; /* ширина ≤350px */
  transform: translateY(var(--panY,0)); transition: transform .6s ease;
}
.w-pane:hover .w-glass img{ --panY: -6%; }
.w-pane figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width:980px){ .w-pane{ grid-column: span 12; } }

/* ===== SECTION 8: Market Drift (zigzag) ===== */
.market-section{ padding: clamp(28px,6vw,72px) 0; }
.zigzag{ display:flex; flex-direction:column; gap: clamp(14px,2vw,20px); }
.zz-row{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px,2vw,20px);
  position:relative;
}
.zz-row::before{
  content:""; position:absolute; left:50%; top:10px; bottom:10px; width:2px;
  background: repeating-linear-gradient(180deg, rgba(93,211,255,.7) 0 10px, transparent 10px 18px);
  transform: translateX(-50%); opacity:.45;
}
.zz-text{ grid-column: span 6; }
.zz-text h3{ margin:0 0 6px 0; font-size: clamp(16px,2vw,20px); }
.zz-text p{ margin:0; color:var(--muted); }

.zz-shot{ grid-column: span 6; margin:0; padding:10px;
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow); transition: transform .25s ease;
}
.zz-shot:hover{ transform: translateY(-6px); }
.zz-shot img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.zz-shot figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

@media (max-width:980px){
  .zz-row::before{ left:24px; transform:none; height:2px; width:auto; right:24px; top:auto; bottom:auto; }
  .zz-row{ grid-template-columns: 1fr; }
  .zz-text, .zz-shot{ grid-column: 1; }
}

/* ===== SECTION 9: Backwater Noon ===== */
.backwater-section{ padding: clamp(28px,6vw,72px) 0; position:relative; }
.backwater-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(800px 260px at 50% 0%, rgba(138,255,193,.08), transparent 60%),
              repeating-radial-gradient(circle at 50% 100%, rgba(93,211,255,.05) 0 6px, transparent 6px 12px);
  opacity:.35; mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
}
.backwater-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px,3vw,28px);
}
.bw-copy .sec-title{ margin-bottom:6px; }
.bw-text{ color:var(--muted); }

.bw-stack{ display:flex; flex-direction:column; gap: clamp(12px,2vw,16px); }
.bw-shot{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: var(--shadow);
}
.bw-shot img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.bw-shot figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

@media (max-width:1020px){ .backwater-grid{ grid-template-columns: 1fr; } }
/* ===== SECTION 10: Temple Evenings ===== */
.temple-eve{ padding: clamp(28px,6vw,72px) 0; }
.lantern-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.lantern-card{
  grid-column: span 6;
  padding:10px; border:1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--radius) + 2px);
  background:
    radial-gradient(400px 160px at 50% -10%, rgba(255,209,102,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); position:relative; overflow:hidden;
  transition: transform .25s ease;
}
.lantern-card:hover{ transform: translateY(-6px); }
.lantern-card::after{
  content:""; position:absolute; inset:auto -20% 10% -20%; height:40%;
  background: radial-gradient(closest-side, rgba(255,209,102,.35), transparent);
  filter: blur(10px); opacity:.55; animation: flicker 2.6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes flicker{ 0%{opacity:.35; transform:translateY(0)} 100%{opacity:.7; transform:translateY(-6px)} }
.lantern-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.lantern-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width:980px){ .lantern-card{ grid-column: span 12; } }

/* ===== SECTION 11: Tea Halts ===== */
.tea-halts{ padding: clamp(28px,6vw,72px) 0; }
.halts-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px,3vw,28px);
}
.halt-polaroids{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(12px,2vw,16px); }
.polaroid{
  grid-column: span 6; margin:0; padding:12px;
  border-radius: 14px; background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);
  transform: rotate(var(--tilt,0deg)); transition: transform .25s ease;
}
.polaroid:hover{ transform: rotate(var(--tilt,0deg)) translateY(-6px); }
.polaroid.p1{ --tilt:-2.2deg; }
.polaroid.p2{ --tilt: 1.8deg; }
.polaroid img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: 10px; }
.polaroid figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.halt-notes h3{ margin:0 0 6px 0; font-size: clamp(16px,2vw,20px); }
.halt-notes ul{ margin:0; padding-left:18px; color:var(--muted); }
@media (max-width:1020px){ .halts-grid{ grid-template-columns: 1fr; } }

/* ===== SECTION 12: Hill Villages Traverse ===== */
.hill-villages{ padding: clamp(28px,6vw,72px) 0; }
.hv-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px,3vw,28px);
}
.steps{
  counter-reset: s; margin: 8px 0 10px 0; padding:0; list-style:none;
  border-left: 2px dashed rgba(93,211,255,.55);
  padding-left: 14px; margin-left: 6px;
}
.steps li{
  counter-increment: s;
  margin:10px 0; color:var(--muted);
  position:relative; padding-left: 0;
}
.steps li::before{
  content: counter(s);
  position:absolute; left: -29px; top: 0;
  width:20px; height:20px; border-radius:50%;
  background: var(--brand-2); color:#0b0e13; font-weight:700;
  display:grid; place-items:center; box-shadow:0 0 10px rgba(255,209,102,.6);
}

.hv-note{ color:var(--muted); }
.hv-pics{ display:flex; flex-direction:column; gap: clamp(12px,2vw,16px); }
.hv-shot{
  margin:0; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: var(--shadow);
}
.hv-shot img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.hv-shot figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width:1020px){ .hv-grid{ grid-template-columns: 1fr; } }
/* ===== SECTION 13: River City Crossings ===== */
.river-cross{ padding: clamp(28px,6vw,72px) 0; position:relative; }
.river-cross::before{
  content:""; position:absolute; left:0; right:0; top:0; height:120px;
  background: radial-gradient(1000px 300px at 50% -40%, rgba(93,211,255,.08), transparent 60%);
  pointer-events:none;
}
.stair-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.stair-tile{
  grid-column: span 4; padding:10px; margin:0;
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow); transition: transform .25s ease; position:relative;
}
.stair-tile:hover{ transform: translateY(-6px); }
.stair-tile::before{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  background: var(--brand-2); box-shadow:0 0 10px rgba(255,209,102,.6);
  left:12px; top:12px;
}
.stair-tile img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.stair-tile figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
/* «ступени» по колонкам */
.stair-tile:nth-child(1){ grid-column: 1 / span 4; }
.stair-tile:nth-child(2){ grid-column: 3 / span 4; }
.stair-tile:nth-child(3){ grid-column: 6 / span 4; }
@media (max-width:1100px){
  .stair-tile{ grid-column: 1 / -1; }
}

/* ===== SECTION 14: Monsoon Playbook ===== */
.monsoon-playbook{ padding: clamp(28px,6vw,72px) 0; }
.play-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px,2vw,20px);
}
.play-card{
  grid-column: span 4; padding:12px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(138,255,193,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.play-card::after{
  /* мягкие «капли» без SVG */
  content:""; position:absolute; inset:auto 0 0 0; height:34px; opacity:.35;
  background: repeating-linear-gradient(90deg, rgba(93,211,255,.18) 0 10px, transparent 10px 20px);
  filter: blur(1px);
}
.play-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.play-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.play-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.play-card p{ margin:0; color:var(--muted); }
@media (max-width:1100px){ .play-card{ grid-column: span 12; } }

/* ===== SECTION 15: Island Ferries (ticket reel) ===== */
.ferry-section{ padding: clamp(28px,6vw,72px) 0; }
.ferry-strip{
  display:flex; gap: clamp(14px,2vw,20px); overflow:auto; scroll-snap-type:x mandatory;
  padding: 0 clamp(16px,3vw,28px) clamp(10px,2vw,18px);
  -webkit-overflow-scrolling: touch;
}
.ticket{
  flex:0 0 auto; width:min(86vw, 350px); scroll-snap-align:start;
  margin:0; padding:12px; border-radius: 18px;
  border:1px dashed rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); position:relative;
}
.ticket::before, .ticket::after{
  content:""; position:absolute; top:50%; width:18px; height:18px; border-radius:50%;
  background: #0b0e13; border:1px solid rgba(255,255,255,.18);
  transform: translateY(-50%);
}
.ticket::before{ left:-9px; }
.ticket::after{ right:-9px; }
.ticket img{ width:100%; height:auto; border-radius: 12px; object-fit:cover; }
.ticket figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

/* ===== SECTION 16: Night City Drift ===== */
.night-drift{ padding: clamp(28px,6vw,72px) 0; position:relative; }
.night-drift::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(900px 260px at 50% -10%, rgba(255,209,102,.08), transparent 60%);
  opacity:.35;
}
.night-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px,2vw,20px);
}
.night-card{
  grid-column: span 6; padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(255,209,102,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.night-card figure{ margin:0; }
.night-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.night-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.night-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.night-card p{ margin:0; color:var(--muted); }
@media (max-width:980px){ .night-card{ grid-column: span 12; } }