/* ===== PAGE: JOURNAL (sections 1–3) ===== */

/* SECTION 1: MONSOON LETTERS */
.s-letters{
  padding: 44px 0;
  background:
    radial-gradient(900px 420px at 12% -10%, #fff8e1 0%, transparent 60%),
    radial-gradient(900px 420px at 110% 0%, #f0ffe9 0%, transparent 60%),
    #fffdf8;
}
.letters-wrap{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.letters-head .lede{ color:#5a564e; max-width: 70ch; }
.letters-collage{
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
}
.col-card{ margin: 0; background:#fff; border:1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; text-align: center; }
.col-card img{ width: 100%; max-width: 350px; height: auto; border-radius: 12px; display:block; margin: 0 auto; }
.col-card figcaption{ margin-top: 6px; color:#4a453e; }
.letters-quote{
  grid-column: 1 / -1;
  margin: 6px 0 0; padding: 12px 14px;
  border-left: 4px solid var(--leaf-600);
  background: #f7fbf6; color:#275c2d; font-weight: 700; border-radius: 12px;
}

@media (max-width: 980px){
  .letters-wrap{ grid-template-columns: 1fr; }
  .letters-head{ text-align: left; }
  .letters-collage{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 680px){
  .letters-collage{ grid-template-columns: 1fr; }
}

/* SECTION 2: GROWER PROFILES */
.s-profiles{ padding: 44px 0; }
.profiles-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; }
.profile{
  display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start;
  border:1px solid var(--line); border-radius: 22px; background:#fff; box-shadow: var(--shadow); padding: 14px;
}
.p-media{ margin:0; text-align:center; }
.p-media img{ width: 100%; max-width: 350px; border-radius: 14px; display:block; margin: 0 auto; }
.p-media figcaption{ margin-top:6px; color:#4a453e; }
.p-copy h3{ margin: 2px 0 8px; }
.p-copy p{ color:#3d3a35; }

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

/* SECTION 3: SHED DIARY */
.s-diary{ padding: 44px 0 56px; background: linear-gradient(180deg,#fff7e8,#fffdf8); }
.diary-box{
  border:1px solid var(--line); border-radius: 22px; background:#fff; box-shadow: var(--shadow);
  padding: 14px; display: grid; gap: 12px;
}
.diary-progress{ position: sticky; top: calc(var(--header-h) + 8px); height: 8px; background:#eee4cf; border-radius:999px; overflow:hidden; }
.diary-progress i{ position:absolute; inset:0; width:0; background: linear-gradient(90deg, var(--leaf-400), var(--leaf-600)); transition: width .3s ease; }

.di-step{
  background:#fff; border:1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: 12px; display: grid; gap: 8px;
}
.di-step header{ font-weight:800; }
.di-photo{ margin:0; text-align:center; }
.di-photo img{ width: 100%; max-width: 350px; border-radius: 12px; display:block; margin: 0 auto; }

@media (max-width: 640px){
  .diary-progress{ position: static; }
}
/* ===== SECTION 4: FIELD NOTEBOOK ===== */
.s-notebook{ padding: 44px 0; background: linear-gradient(180deg,#fffdf8,#fff7e8); }
.nb-rail{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 340px);
  gap: 14px; overflow-x: auto; padding: 10px; scroll-snap-type: x mandatory;
  border:1px solid var(--line); border-radius: 22px; background:#fff; box-shadow: var(--shadow);
}
.nb-card{ scroll-snap-align: start; background:#fff; border:1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; }
.nb-card figure{ margin:0; text-align:center; }
.nb-card img{ border-radius: 12px; width: 100%; max-width: 350px; height: auto; display:block; margin: 0 auto; }
.nb-card figcaption{ margin-top:6px; color:#4a453e; }
.nb-more{
  margin-top: 8px; font-weight:700; border:1px solid var(--line); border-radius: 999px; background:#fff; padding:8px 12px; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.nb-more[aria-expanded="true"]{ background: linear-gradient(180deg,var(--leaf-400),var(--leaf-600)); color:#fff; box-shadow: var(--shadow); }
.nb-note{ margin-top: 8px; color:#3d3a35; }

/* ===== SECTION 5: KITCHEN TESTS ===== */
.s-tests{ padding: 44px 0; }
.tests-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.t-card{ background:#fff; border:1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 12px; display:grid; gap:10px; }
.t-media{ margin:0; text-align:center; }
.t-media img{ border-radius: 12px; width: 100%; max-width: 350px; height: auto; display:block; margin: 0 auto; }
.t-head{ display:flex; justify-content: space-between; align-items: end; gap:10px; }
.t-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.t-tab{ padding:8px 12px; border:1px solid var(--line); border-radius: 999px; background:#fff; cursor:pointer; font-weight:700; }
.t-tab.is-on{ background: linear-gradient(180deg,var(--leaf-400),var(--leaf-600)); color:#fff; box-shadow: var(--shadow); }
.t-copy p{ margin: 0; color:#3d3a35; }
@media (max-width: 880px){ .tests-grid{ grid-template-columns: 1fr; } }

/* ===== SECTION 6: POP-UP CONVERSATIONS ===== */
.s-convos{ padding: 44px 0 56px; background: linear-gradient(180deg,#fff7e8,#fffdf8); }
.convo-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.convo{
  background:#fff; border:1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  padding: 12px; display:grid; gap:8px; align-items:start;
}
.convo img{ width: 100%; max-width: 350px; border-radius: 12px; display:block; margin: 0 auto; }
.convo blockquote{ margin:0; color:#3d3a35; }
.q-toggle{
  border:1px solid var(--line); border-radius: 999px; background:#fff; padding:4px 10px; font-weight:700; cursor:pointer;
}
.q-toggle[aria-expanded="true"]{ background: linear-gradient(180deg,var(--leaf-400),var(--leaf-600)); color:#fff; box-shadow: var(--shadow); }
@media (max-width: 820px){ .convo-grid{ grid-template-columns: 1fr; } }
/* ===== SECTION 7: MONSOON GLOSSARY ===== */
.s-glossary{ padding: 44px 0; }
.gl-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:18px; align-items:start; }
.gl-accordion{ display:grid; gap:10px; }
.gl-item{ border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.gl-term{
  width:100%; text-align:left; padding:12px; font-weight:800; cursor:pointer;
  background:#fffdf5; border:0; border-bottom:1px solid var(--line);
}
.gl-term:hover{ background:#fbf6ea; }
.gl-note{ padding:12px; color:#3d3a35; }
.gl-collage{ display:grid; gap:12px; }
.gl-card{ margin:0; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); padding:10px; text-align:center; }
.gl-card img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.gl-card figcaption{ margin-top:6px; color:#4a453e; }
@media (max-width: 900px){ .gl-grid{ grid-template-columns: 1fr; } }

/* ===== SECTION 8: CRATE → PLATE ESSAY ===== */
.s-essay{ padding: 44px 0; background: linear-gradient(180deg,#fffdf8,#fff7e8); }
.essay-grid{ position:relative; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.essay-step{
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:8px; text-align:left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.essay-step:hover{ transform: translateY(-6px); box-shadow:0 16px 32px rgba(29,27,22,.14); }
.essay-step figure{ margin:0; text-align:center; }
.essay-step img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.essay-step figcaption{ margin-top:6px; color:#4a453e; }

/* соединительная линия (под картами) */
.essay-line{
  position:absolute; left:12px; right:12px; bottom:-6px; height:10px; border-radius:999px; background:#eee4cf;
  overflow:hidden;
}
.essay-line::after{
  content:""; position:absolute; inset:0; width:0; background: linear-gradient(90deg, var(--leaf-400), var(--leaf-600));
  transition: width .6s ease;
}
.essay-grid.is-seen .essay-line::after{ width:100%; }

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

/* ===== SECTION 9: REGIONAL POSTCARDS ===== */
.s-postcards{ padding: 44px 0 56px; }
.pc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.pc-card{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:8px;
}
.pc-media{ margin:0; text-align:center; }
.pc-media img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.pc-copy h3{ margin:4px 0 6px; }
.pc-stamp{
  position:absolute; right:10px; top:10px;
  padding:6px 10px; border-radius:999px; font-weight:800; color:#fff;
  background: linear-gradient(180deg, var(--leaf-400), var(--leaf-600));
  box-shadow: var(--shadow);
}
@media (max-width: 860px){ .pc-grid{ grid-template-columns: 1fr; } }
/* Glossary — details/summary версия */
.gl-accordion{ display:grid; gap:10px; }
.gl-item{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.gl-item[open]{ box-shadow:0 16px 32px rgba(29,27,22,.12); }

.gl-term{
  list-style:none;               /* убираем маркер summary */
  cursor:pointer;
  padding:12px 14px;
  font-weight:800;
  background:#fffdf5;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.gl-term::-webkit-details-marker{ display:none; }   /* Safari/iOS */
.gl-term::after{
  content:"+";
  font-weight:900;
  line-height:1;
  transition: transform .2s ease;
  color:#275c2d;
}
.gl-item[open] .gl-term{ background:#fbf6ea; }
.gl-item[open] .gl-term::after{ content:"–"; transform: rotate(0); }

.gl-note{ padding:12px 14px; color:#3d3a35; }
.gl-term:focus-visible{ outline:2px solid rgba(77,131,70,.35); outline-offset:3px; }
/* ===== SECTION 10: SOUND OF A GOOD PAN ===== */
.s-sound{ padding:44px 0; background: linear-gradient(180deg,#fffdf8,#fff7e8); }
.sound-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.snd-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:8px;
}
.snd-media{ margin:0; text-align:center; }
.snd-media img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.bars{ display:flex; gap:6px; height:36px; align-items:flex-end; }
.bars span{
  width:10px; border-radius:6px; background:#eee4cf; height:6px; transform-origin: bottom;
  transition: height .2s ease, background-color .2s ease;
}
[data-visual].is-playing .bars span{ background: linear-gradient(180deg,var(--leaf-400),var(--leaf-600)); }
[data-visual].is-playing .bars span:nth-child(1){ height:22px; }
[data-visual].is-playing .bars span:nth-child(2){ height:30px; }
[data-visual].is-playing .bars span:nth-child(3){ height:18px; }
[data-visual].is-playing .bars span:nth-child(4){ height:28px; }
[data-visual].is-playing .bars span:nth-child(5){ height:20px; }
/* варианты */
[data-visual].is-playing .b2 span:nth-child(1){ height:28px; }
[data-visual].is-playing .b2 span:nth-child(2){ height:34px; }
[data-visual].is-playing .b2 span:nth-child(3){ height:24px; }
[data-visual].is-playing .b2 span:nth-child(4){ height:32px; }
[data-visual].is-playing .b2 span:nth-child(5){ height:26px; }
[data-visual].is-playing .b3 span{ height:10px; background:#d9d0bc; }

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

/* ===== SECTION 11: PRICE NOTES ===== */
.s-price{ padding:44px 0; }
.price-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px; align-items:start; }
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:8px;
}
.price-card figure{ margin:0; text-align:center; }
.price-card img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.price-note{
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:8px;
}
.price-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.p-tab{ padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; cursor:pointer; font-weight:700; }
.p-tab.is-on{ background: linear-gradient(180deg,var(--leaf-400),var(--leaf-600)); color:#fff; box-shadow:var(--shadow); }
@media (max-width: 980px){ .price-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .price-grid{ grid-template-columns: 1fr; } }

/* ===== SECTION 12: WASTE LEDGER ===== */
.s-waste{ padding:44px 0 56px; background: linear-gradient(180deg,#fff7e8,#fffdf8); }
.waste-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px; align-items:start; }

.w-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:12px;
}
.w-meter{
  position:relative; height:10px; border-radius:999px; background:#eee4cf; overflow:hidden;
}
.w-meter .w-label{
  position:absolute; left:10px; top:-22px; font-weight:800; color:#4a453e;
}
.w-meter i{
  position:absolute; inset:0; width:0;                /* анимация заполнения */
  background:linear-gradient(90deg,var(--leaf-400),var(--leaf-600));
  transition:width .6s ease;
}
[data-waste].is-live .w-meter i{ width:var(--pct); }   /* включаем на входе в вьюпорт */

.w-photo{
  margin:0; text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--shadow); padding:10px; display:grid; gap:6px;
}
.w-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.w-photo figcaption{ color:#4a453e; }

@media (max-width: 980px){ .waste-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .waste-grid{ grid-template-columns: 1fr; } }
/* === Price notes: CSS radio-tabs === */
.tabs-radio{
  position: relative; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2;
}
.p-radio{
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: 0; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.p-tab{
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-weight: 700;
  position: relative; z-index: 2; pointer-events: auto;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.p-tab:active{ transform: translateY(1px); }

/* активное состояние — через соседство с выбранным радио */
#pr-okra:checked + label[for="pr-okra"],
#pr-greens:checked + label[for="pr-greens"],
#pr-citrus:checked + label[for="pr-citrus"]{
  background: linear-gradient(180deg,var(--leaf-400),var(--leaf-600));
  color:#fff; box-shadow: var(--shadow);
}

/* показываем нужный текст */
.price-views [data-view]{ display: none; margin-top: 8px; }
#pr-okra:checked ~ .price-views [data-view="okra"]{ display: block; }
#pr-greens:checked ~ .price-views [data-view="greens"]{ display: block; }
#pr-citrus:checked ~ .price-views [data-view="citrus"]{ display: block; }
/* ===== SECTION 13: TOOLS ===== */
.s-tools{ padding:44px 0; }
.tools-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.tool-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:8px;
}
.tool-card figure{ margin:0; text-align:center; }
.tool-card img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.tool-card figcaption{ margin-top:6px; color:#4a453e; }
@media (max-width: 820px){ .tools-grid{ grid-template-columns: 1fr; } }

/* ===== SECTION 14: HOME NOTES ===== */
.s-homenotes{ padding:44px 0; background: linear-gradient(180deg,#fffdf8,#fff7e8); }
.home-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:18px; align-items:start; }
.hn-accordion{ display:grid; gap:10px; }
.hn-item{
  border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden;
}
.hn-term{ list-style:none; cursor:pointer; padding:12px 14px; font-weight:800; background:#fffdf5; border-bottom:1px solid var(--line); }
.hn-term::-webkit-details-marker{ display:none; }
.hn-item[open] .hn-term{ background:#fbf6ea; }
.hn-note{ padding:12px 14px; color:#3d3a35; }

.hn-collage{ display:grid; gap:12px; }
.hn-card{ margin:0; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); padding:10px; text-align:center; }
.hn-card img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.hn-card figcaption{ margin-top:6px; color:#4a453e; }
@media (max-width: 920px){ .home-grid{ grid-template-columns: 1fr; } }

/* ===== SECTION 15: ARCHIVE SHELF ===== */
.s-archive{ padding:44px 0 56px; }
.ar-rail{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 340px);
  gap:14px; overflow-x:auto; padding:10px; scroll-snap-type:x mandatory;
  border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow);
}
.ar-card{ margin:0; scroll-snap-align:start; text-align:center; }
.ar-card img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.ar-card figcaption{ margin-top:6px; color:#4a453e; }
/* map classes -> custom property, без инлайнов */
.w-meter{ --wpct: 0%; }
.w-meter.pct-60{ --wpct: 60%; }
.w-meter.pct-25{ --wpct: 25%; }
.w-meter.pct-15{ --wpct: 15%; }

/* анимация заполнения остаётся прежней */
.w-meter i{ width: 0; }
[data-waste].is-live .w-meter i{ width: var(--wpct); }