/* =========================
   Dermalion Labs — Journal page (sections 1–3)
   ========================= */

/* ===== SECTION 1: Editorial Hero ===== */
.editorial-hero{ padding: clamp(64px, 8vw, 104px) 0; position:relative; overflow:hidden; }
.eh-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, 3vw, 40px); align-items:center; }
.eh-title{ font-family:"PrataDL", serif; }
.eh-lede{ max-width: 60ch; }
.eh-chips{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:10px; }
.eh-chip{
  display:inline-flex; align-items:center; height:38px; padding:0 12px;
  border-radius:999px; border:1px solid var(--dl-line); background:#fff;
  color: var(--dl-ink-2); text-decoration:none; font-weight:600;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.eh-chip:hover{ transform: translateY(-2px); border-color:#d7e8e2; background:linear-gradient(135deg, #f7fffb, #fff); }

.eh-visual{ position:relative; display:grid; place-items:center; gap:12px; }
.eh-card{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease, box-shadow .2s ease;
}
.eh-card:hover{ transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 12px 28px rgba(31,31,34,.08), 0 6px 16px rgba(31,31,34,.06); }
.eh-card figcaption{ margin-top:6px; color: var(--dl-muted); }
.eh-chipimg{ padding:8px; border:1px solid var(--dl-line); border-radius:999px; background:#fff; box-shadow: var(--dl-shadow); }
.eh-chipimg img{ border-radius:999px; }

.float-a{ transform: translate(-6%, -4%); animation: jBobA 7s ease-in-out infinite; }
.float-b{ transform: translate(10%, 6%); animation: jBobB 7.6s ease-in-out infinite; }
.float-c{ transform: translate(0, -8%); animation: jBobC 6.8s ease-in-out infinite; }
@keyframes jBobA{ 0%,100%{ transform: translate(-6%, -4%) } 50%{ transform: translate(-6%, -1%) } }
@keyframes jBobB{ 0%,100%{ transform: translate(10%, 6%) } 50%{ transform: translate(10%, 9%) } }
@keyframes jBobC{ 0%,100%{ transform: translate(0, -8%) } 50%{ transform: translate(0, -5%) } }

.eh-glow{
  position:absolute; pointer-events:none; filter: blur(24px); z-index:-1;
  width: 44vw; height: 44vw; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(179,86,118,.10), transparent 60%);
}
.eh-glow.a{ left:-12vw; top:-10vw; }
.eh-glow.b{ right:-14vw; bottom:-12vw; background: radial-gradient(50% 50% at 50% 50%, rgba(44,109,94,.10), transparent 60%); }

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

/* ===== SECTION 2: Latest Stories Rail ===== */
.latest-rail{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.lr-title{ font-family:"PrataDL", serif; }
.lr-track{
  margin-top: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 320px);
  gap: 12px;
  overflow-x: auto; overflow-y: visible;
  padding: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--dl-line);
  border-radius: 16px; background: #fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.lr-card{
  scroll-snap-align: start;
  background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; display:grid; gap:8px; min-width:0; transition: transform .2s ease;
}
.lr-card:hover{ transform: translateY(-2px); }
.lr-card figure{ margin:0; }
.lr-card img{ margin-inline:auto; }
.lr-card h3{ margin: 2px 0 0; }
.lr-card p{ margin: 0; color: var(--dl-ink-2); }
.lr-card.text-only{ align-content:start; }

@media (max-width: 520px){
  .lr-track{ grid-auto-columns: 86%; }
}

/* ===== SECTION 3: Lab Notes Spread ===== */
.lab-notes{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.ln-title{ font-family:"PrataDL", serif; }
.ln-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 10px; align-items:start;
}
.ln-fig, .ln-card{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
}
.ln-fig{
  grid-column: span 4; padding:10px; text-align:center; min-width:0;
}
.ln-fig img{ margin-inline:auto; }
.ln-fig figcaption{ margin-top:6px; color: var(--dl-muted); }
.ln-card{
  grid-column: span 4; padding:12px; min-width:0; transition: transform .2s ease;
}
.ln-card:hover{ transform: translateY(-2px); }

@media (max-width: 1000px){
  .ln-fig, .ln-card{ grid-column: span 6; }
}
@media (max-width: 600px){
  .ln-fig, .ln-card{ grid-column: span 12; }
}
/* =========================
   SECTION 4 — Monsoon Diaries (timeline)
   ========================= */
.monsoon-diaries{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.md-title{ font-family:"PrataDL", serif; }
.md-steps{
  list-style:none; padding: 18px 0 0; margin:0; display:grid; gap:16px; position:relative;
}
.md-steps::before{
  content:""; position:absolute; left:24px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--dl-accent), #dbe9e4 60%, #e9ecef); border-radius:2px;
}
.md-step{
  position:relative; display:grid; grid-template-columns: 56px 1fr 1fr; gap:12px; align-items:start;
}
.md-dot{
  width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--dl-accent);
  position:absolute; left:15px; top:10px; box-shadow: var(--dl-shadow);
}
.md-card{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0; transition: transform .2s ease;
}
.md-card:hover{ transform: translateY(-2px); }
.md-fig{ margin:0; text-align:center; }
.md-fig img{ margin-inline:auto; }

@media (max-width: 920px){
  .md-steps::before{ left:20px; }
  .md-step{ grid-template-columns: 48px 1fr; }
  .md-fig{ order:3; grid-column: 2 / span 1; }
}

/* =========================
   SECTION 5 — Myth vs Method (toggle cards)
   ========================= */
.myth-method{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.mm-title{ font-family:"PrataDL", serif; }
.mm-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; margin-top:10px; align-items:start;
}
.mm-card, .mm-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
}
.mm-card{
  grid-column: span 4; padding:12px; min-width:0; cursor:pointer; transition: transform .2s ease;
}
.mm-card:hover{ transform: translateY(-2px); }
.mm-kicker{ margin:.25rem 0; color: var(--dl-ink); font-weight:700; }
.mm-reveal[hidden]{ display:none !important; }

.mm-fig{ grid-column: span 4; padding:10px; text-align:center; }
.mm-fig img{ margin-inline:auto; }
.mm-fig figcaption{ margin-top:6px; color: var(--dl-muted); }

@media (max-width: 1000px){
  .mm-card, .mm-fig{ grid-column: span 6; }
}
@media (max-width: 620px){
  .mm-card, .mm-fig{ grid-column: span 12; }
}

/* =========================
   SECTION 6 — Routine Builder (filter panels)
   ========================= */
.routine-builder{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.rb-title{ font-family:"PrataDL", serif; }
.rb-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.rb-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.rb-chip:hover{ transform: translateY(-2px); }
.rb-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }

.rb-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; margin-top:10px; align-items:start;
}
.rb-card{
  grid-column: span 4;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0;
}
.rb-card[hidden]{ display:none !important; }
.rb-list{ margin:0; padding-left:1.1rem; display:grid; gap:.35rem; color:var(--dl-ink-2); }
.rb-fig{ margin:10px 0 0; text-align:center; }
.rb-fig img{ margin-inline:auto; }

@media (max-width: 1020px){ .rb-card{ grid-column: span 6; } }
@media (max-width: 600px){ .rb-card{ grid-column: span 12; } }
/* ===== HOTFIX: Monsoon Diaries text wrapping & layout ===== */
.monsoon-diaries .md-step{
  grid-template-columns: 56px minmax(0,1fr) minmax(0,1fr) !important;
}
.monsoon-diaries .md-card,
.monsoon-diaries .md-fig{
  grid-column: auto;
  min-width: 0; /* критично для grid, чтобы текст не распирал и не схлопывал соседние колонки */
}

/* базовая раскладка: текст слева, фото справа */
.monsoon-diaries .md-card{ grid-column: 2 !important; }
.monsoon-diaries .md-fig{ grid-column: 3 !important; }

/* зигзаг для чётных элементов */
.monsoon-diaries .md-step:nth-child(even) .md-card{ grid-column: 3 !important; }
.monsoon-diaries .md-step:nth-child(even) .md-fig{ grid-column: 2 !important; }

/* удобочитаемость текста */
.monsoon-diaries .md-card h3,
.monsoon-diaries .md-card p{
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.monsoon-diaries .md-card{ padding: 14px 16px; }

/* гарантируем корректный размер картинок */
.monsoon-diaries .md-fig img{
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
}

/* мобильный вид: линия + одна колонка контента */
@media (max-width: 920px){
  .monsoon-diaries .md-steps::before{ left:20px; }
  .monsoon-diaries .md-step{ grid-template-columns: 48px minmax(0,1fr) !important; }
  .monsoon-diaries .md-card{ grid-column: 2 !important; }
  .monsoon-diaries .md-fig{ grid-column: 2 !important; order: 3; }
}
/* =========================
   SECTION 7 — Heat Commute Guide (timeline)
   ========================= */
.commute-guide{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.cg-title{ font-family:"PrataDL", serif; }
.cg-steps{ list-style:none; padding:18px 0 0; margin:0; display:grid; gap:16px; position:relative; }
.cg-steps::before{
  content:""; position:absolute; left:24px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--dl-accent), #dbe9e4 60%, #e9ecef); border-radius:2px;
}
.cg-step{ position:relative; display:grid; grid-template-columns: 56px minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
.cg-dot{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--dl-accent); position:absolute; left:15px; top:10px; box-shadow: var(--dl-shadow); }
.cg-card{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:14px 16px; min-width:0; transition: transform .2s ease;
}
.cg-card:hover{ transform: translateY(-2px); }
.cg-fig{ margin:0; text-align:center; }
.cg-fig img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }

/* зигзаг для чётных */
.cg-step:nth-child(even) .cg-card{ grid-column: 3; }
.cg-step:nth-child(even) .cg-fig{ grid-column: 2; }

@media (max-width: 920px){
  .cg-steps::before{ left:20px; }
  .cg-step{ grid-template-columns: 48px minmax(0,1fr); }
  .cg-card{ grid-column: 2; }
  .cg-fig{ grid-column: 2; order:3; }
}

/* =========================
   SECTION 8 — Ingredient Atlas (chips)
   ========================= */
.ingredient-atlas{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.ia-title{ font-family:"PrataDL", serif; }
.ia-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ia-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.ia-chip:hover{ transform: translateY(-2px); }
.ia-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }

.ia-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; margin-top:10px; align-items:start;
}
.ia-card, .ia-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
}
.ia-card{ grid-column: span 6; padding:12px; min-width:0; }
.ia-fig{ grid-column: span 6; padding:10px; text-align:center; }
.ia-fig img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.ia-card[hidden], .ia-fig[hidden]{ display:none !important; }
.ia-list{ margin:8px 0 0; padding-left:1.1rem; display:grid; gap:.35rem; color:var(--dl-ink-2); }

@media (max-width: 1000px){ .ia-card, .ia-fig{ grid-column: span 12; } }

/* =========================
   SECTION 9 — Reader Shelfies Rail
   ========================= */
.reader-shelfies{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.rs-title{ font-family:"PrataDL", serif; }
.rs-track{
  margin-top:10px;
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 320px);
  gap:12px; overflow-x:auto; overflow-y:visible; padding:12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border:1px solid var(--dl-line); border-radius:16px; background:#fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.rs-card{
  scroll-snap-align:start; background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease; min-width:0;
}
.rs-card:hover{ transform: translateY(-3px); }
.rs-card img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }

@media (max-width: 520px){
  .rs-track{ grid-auto-columns: 86%; }
}
/* =========================
   SECTION 10 — Patch Test Playbook
   ========================= */
.patch-playbook{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.pp-title{ font-family:"PrataDL", serif; }
.pp-steps{
  list-style:none; padding:0; margin:10px 0 0;
  display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;
}
.pp-step{
  grid-column: span 4;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0; transition: transform .2s ease;
}
.pp-step:hover{ transform: translateY(-2px); }
.pp-fig{ margin:8px 0 0; text-align:center; }
.pp-fig img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.pp-fig figcaption{ margin-top:6px; color: var(--dl-muted); }
@media (max-width: 1000px){ .pp-step{ grid-column: span 6; } }
@media (max-width: 600px){ .pp-step{ grid-column: span 12; } }

/* =========================
   SECTION 11 — Heat Index Meter
   ========================= */
.heat-meter{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.hm-title{ font-family:"PrataDL", serif; }
.hm-grid{
  display:grid; grid-template-columns: 280px 1fr; gap:16px; align-items:start; margin-top:10px;
}
.hm-dial{
  width:260px; height:260px; border-radius:50%;
  background: conic-gradient(from -90deg, #cdebe2 0 120deg, #ffd9a8 120deg 240deg, #f0b6c3 240deg 360deg);
  border:1px solid var(--dl-line); box-shadow: var(--dl-shadow); position:relative;
}
.hm-needle{
  position:absolute; left:50%; top:50%; width:2px; height:46%; background: var(--dl-ink);
  transform-origin: bottom center; transform: translate(-50%, -100%) rotate(-20deg); border-radius:2px;
}
.hm-center{
  position:absolute; left:50%; top:50%; width:10px; height:10px; background:#fff; border:2px solid var(--dl-ink); border-radius:50%;
  transform: translate(-50%,-50%);
}
.hm-controls{ display:flex; gap:8px; flex-wrap:wrap; }
.hm-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.hm-chip:hover{ transform: translateY(-2px); }
.hm-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }
.hm-note{
  grid-column: 2 / span 1;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px;
}
.hm-note[hidden]{ display:none !important; }
.hm-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center;
}
.hm-fig img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.hm-fig figcaption{ margin-top:6px; color:var(--dl-muted); }

@media (max-width: 940px){
  .hm-grid{ grid-template-columns: 1fr; }
  .hm-note{ grid-column: auto; }
  .hm-dial{ margin-inline:auto; }
}

/* =========================
   SECTION 12 — FAQ Rail
   ========================= */
.faq-rail{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.fq-title{ font-family:"PrataDL", serif; }
.fq-track{
  margin-top:10px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 320px);
  gap:12px; overflow-x:auto; overflow-y:visible; padding:12px; scroll-snap-type:x mandatory;
  border:1px solid var(--dl-line); border-radius:16px; background:#fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.fq-card{
  scroll-snap-align:start; background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; display:grid; gap:8px; min-width:0; cursor:pointer; transition: transform .2s ease;
}
.fq-card:hover{ transform: translateY(-3px); }
.fq-fig{ margin:0; text-align:center; }
.fq-fig img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.fq-a[hidden]{ display:none !important; }
.fq-card.text-only .fq-fig{ display:none; }

@media (max-width: 520px){
  .fq-track{ grid-auto-columns: 86%; }
}
/* =========================
   SECTION 13 — Plain Glossary
   ========================= */
.plain-glossary{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.pg-title{ font-family:"PrataDL", serif; }
.pg-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pg-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.pg-chip:hover{ transform: translateY(-2px); }
.pg-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }

.pg-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; margin-top:10px; align-items:start;
}
.pg-card, .pg-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
}
.pg-card{ grid-column: span 6; padding:12px; min-width:0; }
.pg-fig{ grid-column: span 6; padding:10px; text-align:center; }
.pg-fig img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.pg-card[hidden], .pg-fig[hidden]{ display:none !important; }
.pg-list{ margin:8px 0 0; padding-left:1.1rem; display:grid; gap:.35rem; color:var(--dl-ink-2); }

@media (max-width: 1000px){ .pg-card, .pg-fig{ grid-column: span 12; } }

/* =========================
   SECTION 14 — Scent & Space
   ========================= */
.scent-space{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.ss2-title{ font-family:"PrataDL", serif; }
.ss2-grid{
  display:grid; grid-template-columns: repeat(12,1fr); gap:12px; margin-top:10px; align-items:start;
}
.ss2-card{
  grid-column: span 5; background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0;
}
.ss2-fig{
  grid-column: span 3; background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center;
}
.ss2-fig img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.ss2-fig figcaption{ margin-top:6px; color: var(--dl-muted); }

@media (max-width: 1100px){
  .ss2-card{ grid-column: span 6; }
  .ss2-fig{ grid-column: span 6; }
}
@media (max-width: 620px){
  .ss2-card, .ss2-fig{ grid-column: span 12; }
}

/* =========================
   SECTION 15 — Studio Snapshots (rail)
   ========================= */
.studio-snapshots{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.sn-title{ font-family:"PrataDL", serif; }
.sn-track{
  margin-top:10px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 320px);
  gap:12px; overflow-x:auto; overflow-y:visible; padding:12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border:1px solid var(--dl-line); border-radius:16px; background:#fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.sn-card{
  scroll-snap-align:start; background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease; min-width:0;
}
.sn-card:hover{ transform: translateY(-3px); }
.sn-card img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.sn-card.text-only{ text-align:left; }

@media (max-width: 520px){
  .sn-track{ grid-auto-columns: 86%; }
}
/* =========================
   SECTION 16 — City Routine Stories
   ========================= */
.city-stories{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.cs2-title{ font-family:"PrataDL", serif; }
.cs2-grid{
  display:grid; grid-template-columns: repeat(12,1fr); gap:12px; margin-top:10px; align-items:start;
}
.cs2-card{
  grid-column: span 6;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:left; min-width:0; transition: transform .2s ease;
}
.cs2-card:hover{ transform: translateY(-2px); }
.cs2-card img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.cs2-card figcaption{ margin-top:6px; color: var(--dl-muted); }
.cs2-card.text-only{ padding:12px; }
@media (max-width: 1000px){ .cs2-card{ grid-column: span 12; } }

/* =========================
   SECTION 17 — Travel Micro-Kit
   ========================= */
.travel-microkit{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.tm-title{ font-family:"PrataDL", serif; }
.tm-grid{
  display:grid; grid-template-columns: repeat(12,1fr); gap:12px; margin-top:10px; align-items:start;
}
.tm-card{
  grid-column: span 4;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; min-width:0; transition: transform .2s ease;
}
.tm-card:hover{ transform: translateY(-2px); }
.tm-card.text-only{ text-align:left; }
.tm-card img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.tm-card figcaption{ margin-top:6px; color: var(--dl-muted); }
@media (max-width: 1000px){ .tm-card{ grid-column: span 6; } }
@media (max-width: 620px){ .tm-card{ grid-column: span 12; } }

/* =========================
   SECTION 18 — Closing Notes Rail
   ========================= */
.closing-notes{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.cn-title{ font-family:"PrataDL", serif; }
.cn-track{
  margin-top:10px;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 320px);
  gap:12px; overflow-x:auto; overflow-y:visible; padding:12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border:1px solid var(--dl-line); border-radius:16px; background:#fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.cn-card{
  scroll-snap-align:start; background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease; min-width:0;
}
.cn-card:hover{ transform: translateY(-3px); }
.cn-card img{ margin-inline:auto; width:100%; max-width:350px; height:auto; display:block; }
.cn-card.text-only{ text-align:left; }

@media (max-width: 520px){
  .cn-track{ grid-auto-columns: 86%; }
}
/* =========================
   JOURNAL — Field Essays (text-only)
   ========================= */
.journal-longform{
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 12% 10%, rgba(179,86,118,.06) 0%, transparent 60%),
    radial-gradient(60% 60% at 88% 90%, rgba(44,109,94,.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}
.jl-title{ font-family: "PrataDL", serif; }
.jl-lede{ max-width: 70ch; color: var(--dl-ink-2); }

.jl-wrap{ display: grid; gap: 14px; }

/* multi-column reading that collapses gracefully */
.jl-columns{
  column-width: 520px;
  column-gap: 28px;
  max-width: 1100px;
}
.jl-columns p,
.jl-columns ul,
.jl-columns h3,
.jl-columns blockquote{
  break-inside: avoid;
  margin: 0 0 12px;
}
.jl-columns h3{
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin-top: 6px;
}

/* lists & quote */
.jl-list{
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
  color: var(--dl-ink-2);
}
.jl-quote{
  border-left: 4px solid #cfe8df;
  margin-left: 0;
  padding: 6px 10px;
  color: var(--dl-ink-2);
  font-style: italic;
}
.jl-tail{ color: var(--dl-ink); }

/* background glows */
.jl-glow{
  position: absolute; pointer-events: none; filter: blur(28px); z-index: -1;
  width: 44vw; height: 44vw; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(179,86,118,.10), transparent 60%);
}
.jl-glow.a{ left: -12vw; top: -10vw; }
.jl-glow.b{ right: -14vw; bottom: -12vw; background: radial-gradient(50% 50% at 50% 50%, rgba(44,109,94,.10), transparent 60%); }

/* readability & safety (no horizontal scroll) */
.journal-longform p{
  line-height: 1.65;
  color: var(--dl-ink);
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 720px){
  .jl-columns{ column-width: 100%; }
}