/* Page base */
.g-hero, .breath, .pitfalls { color:#f6eee2; }
.cap-img{ width:100%; max-width:350px; border-radius:10px; display:block; }

/* ===== Section 1: Guides Hero ===== */
.g-hero{
  background:
    radial-gradient(1200px 800px at -10% 0%, rgba(241,211,160,.12) 0%, transparent 60%),
    linear-gradient(180deg, #16110d, #0e0b09);
}
.g-hero-grid{
  display:grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(16px, 2.6vw, 24px); align-items: center;
}
.g-hero-title{
  font-family: Prata, serif;
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  line-height: 1.18; margin: 0 0 .7rem;
}
.g-hero-lead{ margin:0 0 .6rem; opacity:.95; }
.g-hero-facts{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.35rem; }
.g-hero-facts .dot{ display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:#f1d3a0; margin-right:.5rem; transform: translateY(1px); }
.g-hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin: .9rem 0 0; }

.g-hero-mosaic{ display:grid; grid-template-columns: 1fr; gap: 14px; }
.gcard{
  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, border-color .2s ease, box-shadow .2s ease;
}
.gcard:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }

@media (max-width: 992px){
  .g-hero-grid{ grid-template-columns: 1fr; }
  .g-hero-mosaic{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  .g-hero-mosaic{ grid-template-columns: 1fr; }
}

/* ===== Section 2: Heat & Breath ===== */
.breath{
  background:
    radial-gradient(900px 600px at 120% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #15100d, #0f0b09);
}
.breath-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.bcard{
  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;
}
.bcard:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.b-title{ margin:.35rem 0 .2rem; }
.b-text{ margin:0 0 .5rem; opacity:.92; }
.b-meter{ display:grid; grid-template-columns: 1fr 1.5fr auto; align-items:center; gap:.6rem; }
.breath .meter{ height:10px; border-radius:999px; background: rgba(246,238,226,.12); overflow:hidden; }
.breath .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; }
.revealed .bm1{ width:70%; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.revealed .bm2{ width:55%; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }

.b-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){
  .breath-grid{ grid-template-columns: 1fr; }
}

/* ===== Section 3: Beginner Pitfalls ===== */
.pitfalls{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
}
.pitfalls-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.pf-columns{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin:.6rem 0 .6rem; }
.pf-list{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:14px; padding:12px; position:relative; overflow:hidden;
}
.pf-list h3{ margin:.2rem 0 .4rem; }
.pf-list ul{ margin:0; padding-left:1.1rem; }
.pf-avoid::after, .pf-do::after{
  content:""; position:absolute; right:-20px; top:50%; width:160px; height:160px;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(241,211,160,.12), transparent 70%);
  transform: translateY(-50%);
  pointer-events:none;
}
.pf-note{ margin:.2rem 0 0; opacity:.9; }
.pf-figs{ display:grid; gap:12px; }
.pf-fig{ margin:0; }

@media (max-width: 1200px){
  .pitfalls-grid{ grid-template-columns: 1fr; }
  .pf-columns{ grid-template-columns: 1fr; }
}
/* ===== Section 4: Venting Patterns ===== */
.venting{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.vent-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.vent-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;
}
.vent-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.vent-title{ margin:.35rem 0 .2rem; }
.vent-text{ margin:0 0 .5rem; opacity:.92; }
.vent-meter{ display:grid; grid-template-columns: 1fr 1.5fr auto; align-items:center; gap:.6rem; }
.venting .meter{ height:10px; border-radius:999px; background: rgba(246,238,226,.12); overflow:hidden; }
.venting .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; }
.revealed .v1{ width:60%; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.revealed .v2{ width:85%; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.vent-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){ .vent-grid{ grid-template-columns: 1fr; } }

/* ===== Section 5: Aroma Micro-Infusions ===== */
.infusions{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.infusions-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.inf-steps{ list-style:none; padding:0; margin:.6rem 0 .6rem; display:grid; gap:10px; }
.inf-step{
  display:grid; grid-template-columns: 36px 1fr; gap:12px; align-items:start;
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 14px; padding: 10px;
}
.inf-num{
  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);
}
.inf-tip{
  margin:.4rem 0 0; padding:.7rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
.inf-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.inf-fig{ margin:0; }

@media (max-width: 1200px){ .infusions-grid{ grid-template-columns: 1fr; } }
@media (max-width: 576px){ .inf-figs{ grid-template-columns: 1fr; } }

/* ===== Section 6: Bench Levels & Temperature Zones ===== */
.levels{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.levels-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:center; }
.thermo{
  position: relative; height: 120px; width: 16px; border-radius: 999px;
  background: rgba(246,238,226,.12); margin: .6rem 0 .6rem;
}
.th-bar{
  position:absolute; inset: auto 0 0 0; height: 0%; border-radius: 999px;
  background: linear-gradient(180deg, #ffd9a8, #f1d3a0);
  box-shadow: inset 0 0 20px rgba(241,211,160,.35);
  animation: thFill 1.2s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
@keyframes thFill{ to{ height: 70%; } }
.th-label{
  position:absolute; left: 24px; font-size:.9rem; opacity:.9;
}
.th-label:first-of-type{ bottom: 0; transform: translateY(8px); }
.th-label:last-of-type{ top: 0; transform: translateY(-8px); }

.levels-points{ list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.35rem; }
.levels-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.lvl-fig{ margin:0; }

@media (max-width: 1200px){
  .levels-grid{ grid-template-columns: 1fr; }
  .levels-figs{ grid-template-columns: 1fr; }
}
/* ===== Section 7: Round Timing ===== */
.timing{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.timing-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.rail{
  position: relative; height: 10px; border-radius: 999px; background: rgba(246,238,226,.12);
  margin: .6rem 0 .7rem; overflow: visible;
}
.stop{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  padding: .35rem .6rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: rgba(246,238,226,.06); border: 1px solid rgba(246,238,226,.14);
  animation: pulse 2.2s ease-in-out infinite;
}
.s1{ left: 10%; animation-delay: 0s; }
.s2{ left: 50%; animation-delay: .4s; }
.s3{ left: 90%; animation-delay: .8s; }
@keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(241,211,160,.0); } 50%{ box-shadow: 0 0 0 10px rgba(241,211,160,.15); } }
.timing-points{ list-style:none; padding:0; margin:.6rem 0 .6rem; display:grid; gap:.35rem; }
.timing-note{
  padding:.7rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
.timing-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.tim-fig{ margin:0; }

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

/* ===== Section 8: Cooling & Contrast ===== */
.cooling{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.cooling-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.cool-steps{ list-style:none; padding:0; margin:.6rem 0 .6rem; display:grid; gap:10px; }
.c-step{
  display:grid; grid-template-columns: 36px 1fr; gap:12px; align-items:start;
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 14px; padding: 10px;
}
.c-num{
  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);
}
.cool-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.cool-fig{ margin:0; }

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

/* ===== Section 9: Myths & Facts ===== */
.myths{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.myths-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.mf-qa{ display:grid; gap:.5rem; margin-top:.4rem; }
.mf{
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 12px; overflow:hidden;
  background: rgba(246,238,226,.04);
}
.mf > summary{
  cursor:pointer; padding:.75rem 1rem; list-style:none; position:relative; font-weight:700;
}
.mf > summary::marker{ content:""; }
.mf > summary::after{
  content:"+"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  transition: transform .2s ease;
}
.mf[open] > summary::after{ content:"–"; }
.mf-body{ padding:.6rem 1rem 1rem; opacity:.92; }
.myths-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.mf-fig{ margin:0; }

@media (max-width: 1200px){
  .myths-grid{ grid-template-columns: 1fr; }
  .myths-figs{ grid-template-columns: 1fr; }
}
/* ===== Section 10: Stove Safety & Placement ===== */
.stovecare{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.stovecare-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.sc-points{ list-style:none; padding:0; margin:.6rem 0 .6rem; display:grid; gap:.35rem; }
.sc-dos{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 .6rem; }
.sc-chip{
  padding:.45rem .7rem; border-radius:999px;
  background: rgba(246,238,226,.06);
  border: 1px solid rgba(246,238,226,.14);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.sc-chip.ok{ box-shadow: 0 0 0 2px rgba(159,227,161,.25) inset; }
.sc-chip.no{ box-shadow: 0 0 0 2px rgba(232,159,159,.25) inset; }
.sc-chip:hover{ transform: translateY(-2px); border-color: rgba(241,211,160,.36); background: rgba(241,211,160,.10); }
.sc-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.sc-fig{ margin:0; }
.sc-note{
  padding:.7rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
@media (max-width: 1200px){
  .stovecare-grid{ grid-template-columns: 1fr; }
  .sc-figs{ grid-template-columns: 1fr; }
}

/* ===== Section 11: Pre–Post Checklist ===== */
.planner{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.planner-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.pl-columns{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin:.6rem 0 .6rem; }
.pl-list{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:14px; padding:12px;
}
.pl-list h3{ margin:.2rem 0 .4rem; }
.pl-list ul{ margin:0; padding:0; list-style:none; display:grid; gap:.35rem; }
.pl-list li{ position:relative; padding-left:1.25rem; }
.pl-list li i{
  position:absolute; left:0; top:.35rem; width:.75rem; height:.75rem; border-radius:50%;
  background:#f1d3a0;
}
.pl-tip{
  padding:.7rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
.pl-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.pl-fig{ margin:0; }

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

/* ===== Section 12: Steam Troubleshooting ===== */
.troubleshoot{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.tb-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.tb-cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin:.6rem 0 .6rem;
}
.tb-card{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:14px; padding:12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tb-card:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.tb-note{
  padding:.7rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
.tb-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.tb-fig{ margin:0; }

@media (max-width: 1200px){
  .tb-grid{ grid-template-columns: 1fr; }
  .tb-cards{ grid-template-columns: 1fr; }
  .tb-figs{ grid-template-columns: 1fr; }
}
/* ===== Section 13: Round Templates ===== */
.templates{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.tpl-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.tpl-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;
}
.tpl-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.tpl-title{ margin:.35rem 0 .2rem; }
.tpl-rail{ list-style:none; padding:0; margin:.4rem 0 .5rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.tpl-chip{
  padding:.4rem .6rem; border-radius:999px; font-size:.95rem;
  background: rgba(246,238,226,.06); border:1px solid rgba(246,238,226,.14);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.tpl-chip:hover{ transform: translateY(-2px); border-color: rgba(241,211,160,.36); background: rgba(241,211,160,.10); }
.tpl-text{ margin:0; opacity:.92; }
@media (max-width: 1200px){ .tpl-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px){ .tpl-grid{ grid-template-columns: 1fr; } }

/* ===== Section 14: DIY Maintenance ===== */
.diy{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.diy-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.diy-cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin:.6rem 0 .6rem; }
.diy-card{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:14px; padding:12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.diy-card:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.diy-figs{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.diy-fig{ margin:0; }

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

/* ===== Section 15: Ritual Gallery (snap track) ===== */
.gallery{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.gal-track{
  display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 86vw);
  gap: 14px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.gal-fig{
  scroll-snap-align: start;
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 10px;
}