/* ===== Hero Section ===== */
.hero {
  background:
    radial-gradient(1200px 800px at -10% 0%, rgba(241,211,160,.12) 0%, transparent 60%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color: #f6eee2;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
  position: relative;
}
.hero-title {
  font-family: Prata, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
  letter-spacing: .2px;
}
.hero-lead { margin: 0 0 .75rem; opacity: .95; }
.hero-sub { margin: 0 0 1.1rem; opacity: .9; }

.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 1.25rem; }

.hero-facts { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .4rem; }
.hero-facts .dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: #f1d3a0; margin-right: .5rem;
}

/* gallery */
.hero-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: start;
}
.hero-card {
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  border-color: rgba(241,211,160,.35);
}

/* images ≤ 350px width rule */
.cap-img { width: 100%; max-width: 350px; border-radius: 10px; }
.cap { margin: 8px 4px 2px; font-size: .92rem; opacity: .9; }

/* decorative steam */
.steam {
  position: absolute; inset: auto 0 -20px 0; height: 140px; pointer-events: none;
  display: grid; place-items: center; opacity: .6;
}
.wisp {
  --x: 0;
  position: absolute; bottom: 0; left: 50%;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(241,211,160,.14), transparent 70%);
  filter: blur(10px);
  transform: translateX(calc(-50% + var(--x)));
  animation: wisp 6s ease-in-out infinite;
}
.wisp:nth-child(1){ --x: -120px; animation-delay: 0s; }
.wisp:nth-child(2){ --x:  20px;  animation-delay: .6s; }
.wisp:nth-child(3){ --x:  140px; animation-delay: 1.2s; }
.wisp:nth-child(4){ --x: -200px; animation-delay: 1.8s; }
.wisp:nth-child(5){ --x:  220px; animation-delay: 2.4s; }
.wisp:nth-child(6){ --x: -40px;  animation-delay: 3.0s; }

@keyframes wisp {
  0%   { transform: translateX(calc(-50% + var(--x))) translateY(0) scale(0.8); opacity: .0; }
  12%  { opacity: .6; }
  60%  { opacity: .4; }
  100% { transform: translateX(calc(-50% + var(--x))) translateY(-120px) scale(1.2); opacity: 0; }
}

/* ===== Responsive for hero ===== */
@media (max-width: 992px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .hero-title { font-size: 1.35rem; }
}
.hero{ 
  background:
    radial-gradient(1200px 800px at -10% 0%, rgba(241,211,160,.12) 0%, transparent 60%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
  overflow:hidden; /* чтобы анимированные «wisp» не создавали горизонтальный скролл */
}

.hero-title{
  font-family: Prata, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
  letter-spacing: .2px;
  word-break: break-word; /* предохраняет от выхода длинных слов за правую границу */
}
/* ==== Shared section headings ==== */
.sec-head { max-width: 72ch; margin: 0 0 1.25rem; }
.sec-title { font-family: Prata, serif; color: #f6eee2; margin: 0 0 .4rem; }
.sec-lead { color: #efe6d8; opacity: .9; }

/* ==== Section 2: Warmth grid ==== */
.warmth {
  background:
    radial-gradient(900px 600px at 120% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #15100d, #0f0b09);
  color: #f6eee2;
}
.warmth-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.tile{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px;
  padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.tile:hover{ transform: translateY(-6px) rotate(-.2deg); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.tile-title{ margin:.4rem 0 .25rem; color:#f6eee2; }
.tile-text{ margin:0; color:#e9e1d6; opacity:.92; }
.tile-fig{ margin:0 0 .35rem; }

/* ==== Section 3: Heat Logic ==== */
.heat-logic{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.logic-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2.6vw, 24px);
}
.metric{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px;
  padding: 16px;
}
.metric-title{ margin:.25rem 0 .35rem; }
.metric-text{ margin:0 0 .6rem; opacity:.92; }

.meter{
  position:relative; height: 10px; border-radius: 999px;
  background: rgba(246,238,226,.12);
  overflow:hidden; margin: .2rem 0 .7rem;
}
.meter .bar{
  display:block; height: 100%;
  width: 0%; /* старт анимации */
  background: linear-gradient(90deg, #f1d3a0, #ffd9a8);
  box-shadow: 0 0 20px rgba(241,211,160,.35) inset;
  transition: width .9s cubic-bezier(.2,.7,.2,1);
}
.meter em{ font-style: normal; font-weight: 700; opacity: .9; }

/* анимация заполнения при появлении секции */
.heat-logic .revealed .m1, .heat-logic.revealed .m1 { width: 86%; }
.heat-logic .revealed .m2, .heat-logic.revealed .m2 { width: 91%; }
.heat-logic .revealed .m3, .heat-logic.revealed .m3 { width: 78%; }

/* ==== Section 4: Aroma & Care timeline ==== */
.aroma-care{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.timeline{
  list-style:none; padding:0; margin:0;
  display:grid; gap: clamp(14px, 2vw, 18px);
}
.t-item{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px;
  padding: 12px;
  position: relative;
}
.t-item::before{
  content:""; position:absolute; left:60px; top:-12px; bottom:-12px; width:2px;
  background: linear-gradient(180deg, rgba(241,211,160,.35), transparent);
  pointer-events:none;
}
.t-item:last-child::before{ display:none; }
.t-fig{ margin:0; }
.t-copy h3{ margin:.25rem 0 .2rem; }
.t-copy p{ margin:0; opacity:.92; }

/* images rule reuse */
.t-fig .cap-img{ max-width: 120px; border-radius: 10px; }

/* ==== Responsive adjustments ==== */
@media (max-width: 1200px){
  .warmth-grid, .logic-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .warmth-grid, .logic-grid{ grid-template-columns: 1fr; }
  .t-item{ grid-template-columns: 1fr; }
  .t-item::before{ left: 12px; top: auto; bottom: auto; height: 2px; width: calc(100% - 24px); }
}
/* ==== Section 5: Rounds planner ==== */
.rounds{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.rounds-strip{
  list-style:none; padding:0; margin:0 0 1rem;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.chip{
  padding:.5rem .7rem; border-radius:999px;
  background:rgba(246,238,226,.06);
  border:1px solid rgba(246,238,226,.14);
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.chip:hover{ transform: translateY(-2px); background:rgba(241,211,160,.10); border-color: rgba(241,211,160,.35); }

.rounds-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.round-card{
  position:relative;
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.round-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.badge{
  position:absolute; top: -10px; left: -10px;
  width: 36px; height: 36px; border-radius: 50%;
  display:grid; place-items:center; font-weight:700; color:#1e1b16; 
  background:#f1d3a0; box-shadow: 0 6px 18px rgba(241,211,160,.26);
  animation: badge-pop .7s ease both;
}
@keyframes badge-pop{ from{ transform: scale(.6); opacity:.0; } to{ transform: scale(1); opacity:1; } }
.round-title{ margin:.4rem 0 .25rem; }
.round-text{ margin:0; opacity:.92; }
.rounds-note{
  margin-top: .8rem;
  padding: .8rem 1rem; border-radius: 12px;
  background: rgba(246,238,226,.05);
  border: 1px solid rgba(246,238,226,.12);
}

/* ==== Section 6: Craft workshop ==== */
.craft{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.craft-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items: center; }
.craft-mosaic{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
}
.mosaic-card{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 14px; padding: 10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mosaic-card:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.craft-copy .sec-title{ margin-top: 0; }
.craft-list{ list-style:none; padding:0; margin: .6rem 0 0; display:grid; gap:.4rem; }
.wood-dot{ display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:#f1d3a0; margin-right:.5rem; transform: translateY(1px); }

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

/* ==== Section 7: Layouts ==== */
.layouts{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.layouts-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.plan{
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 14px; position:relative;
}
.plan::after{
  content:""; position:absolute; inset: -1px; border-radius: 16px;
  pointer-events:none; background:
    linear-gradient(180deg, rgba(241,211,160,.18), transparent 30%, transparent 70%, rgba(241,211,160,.18));
  opacity: .0; transition: opacity .2s ease;
}
.plan:hover::after{ opacity: .25; }
.plan-title{ margin:.35rem 0 .2rem; }
.legend{ margin:0; padding-left: 1.1rem; opacity:.92; }

@media (max-width: 1200px){
  .layouts-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .layouts-grid{ grid-template-columns: 1fr; }
}

/* ==== Section 8: Safety ==== */
.safety{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.safety-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.s-card{
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 14px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.s-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.s-title{ margin:.35rem 0 .2rem; }
.s-text{ margin:0; opacity:.92; }

@media (max-width: 1200px){
  .safety-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .safety-grid{ grid-template-columns: 1fr; }
}
/* ==== Section 9: Etiquette ==== */
.etiquette{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.etq-fig{ margin:0 0 .6rem; }
.etq-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.etq-card{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 16px;
}
.etq-card h3{ margin:.2rem 0 .4rem; }
.etq-list{ margin:0; padding:0; list-style:none; display:grid; gap:.35rem; }
.etq-list li{ display:flex; gap:.5rem; }
.etq-do i, .etq-dont i{
  width:.9rem; height:.9rem; border-radius:50%; margin-top:.28rem; flex: 0 0 .9rem;
}
.etq-do i{ background:#9fe3a1; box-shadow:0 0 0 2px rgba(159,227,161,.25); }
.etq-dont i{ background:#e89f9f; box-shadow:0 0 0 2px rgba(232,159,159,.25); }
.etq-note{
  margin-top:.8rem; padding:.8rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}

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

/* ==== Section 10: Stone Care Mini-FAQ ==== */
.stone-care{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.sc-fig{ margin:0 0 .6rem; }
.sc-faq{ display:grid; gap:.5rem; }
.qa{
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 12px; overflow:hidden;
  background: rgba(246,238,226,.04);
}
.qa > summary{
  cursor:pointer; padding:.75rem 1rem; list-style:none; position:relative; font-weight:700;
}
.qa > summary::marker{ content:""; }
.qa > summary::after{
  content:"+"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  transition: transform .2s ease;
}
.qa[open] > summary::after{ content:"–"; }
.qa-body{ padding:.6rem 1rem 1rem; opacity:.92; }

/* ==== Section 11: Water Rituals (без фото) ==== */
.water-rituals{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.wr-flow{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.wr-step{
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 14px; position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wr-step:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.wr-icon{
  position:absolute; right:12px; top:10px; font-weight:700; opacity:.7;
}
.wr-scale{ margin-top: 1rem; }
.wr-label{ display:block; margin-bottom:.35rem; font-weight:700; }
.wr-meter{
  height: 10px; border-radius:999px; background: rgba(246,238,226,.12); overflow:hidden; position:relative;
}
.wr-bar{
  display:block; width: 60%; height:100%;
  background: linear-gradient(90deg, #f1d3a0, #ffd9a8);
  box-shadow: 0 0 20px rgba(241,211,160,.35) inset;
  animation: wr-fill 1.2s cubic-bezier(.2,.7,.2,1) .2s both;
}
@keyframes wr-fill{ from{ width: 0%; } to{ width: 60%; } }
.wr-tip{ display:block; margin-top:.35rem; opacity:.85; }

@media (max-width: 1200px){
  .wr-flow{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  .wr-flow{ grid-template-columns: 1fr; }
}
/* ==== Section 12: Cedar Palette ==== */
.palette{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.palette-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: clamp(14px, 2.4vw, 22px);
}
.pal-fig{ margin:0; }
.swatches{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px; margin:0; padding:0; list-style:none;
}
.swatch{
  height: 72px; border-radius: 12px; border: 1px solid rgba(246,238,226,.12);
  box-shadow: inset 0 8px 28px rgba(0,0,0,.25);
  transition: transform .2s ease, border-color .2s ease;
}
.swatch:nth-child(1){ background:#d8a868; }
.swatch:nth-child(2){ background:#c89452; }
.swatch:nth-child(3){ background:#a87446; }
.swatch:nth-child(4){ background:#6a4a2f; }
.swatch:nth-child(5){ background:#e3c59a; }
.swatch:nth-child(6){ background:#b7875a; }
.swatch:hover{ transform: translateY(-3px); border-color: rgba(241,211,160,.36); }
.pal-note{
  margin-top:.8rem; padding:.8rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
@media (max-width: 1200px){ .palette-grid{ grid-template-columns: 1fr; } }

/* ==== Section 13: Reading Corner ==== */
.reading{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.reading-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 22px); align-items: start;
}
.read-fig{ margin:0; }
.read-list{
  display:grid; gap:.5rem;
}
.read-link{
  display:block; padding:.75rem 1rem; border-radius:12px; text-decoration:none; color:#f6eee2;
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.read-link:hover{ transform: translateY(-3px); background: rgba(241,211,160,.10); border-color: rgba(241,211,160,.36); }
@media (max-width: 768px){ .reading-grid{ grid-template-columns: 1fr; } }

/* ==== Section 14: Stories (snap-трек) ==== */
.stories{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.stories-track{
  display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 86vw);
  gap: 14px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.story{
  scroll-snap-align: start;
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 14px;
}
.story blockquote{ margin:0 0 .4rem; font-style: italic; }
.story cite{ opacity:.8; }
.story.has-fig figure{ margin:0 0 .4rem; }

/* ==== Section 15: Final CTA ==== */
.cta-final{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.cta-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items: center; }
.cta-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin:.6rem 0 .4rem; }
.cta-note{ margin:0; opacity:.9; }
@media (max-width: 1200px){ .cta-grid{ grid-template-columns: 1fr; } }