/* =========================================================
   style.css — Zen Reading (1-column, scroll top-to-bottom)
   Palette: warm paper / gold / brown (from your theme)
========================================================= */

:root{
  --bg: #fdf8e4;
  --panel: #fbeec4;
  --ink: #5c4324;
  --muted: #8b6f4e;
  --line: #e0c98d;
  --gold: #cfa74a;
  --gold-d: #a77f2d;
  --accent: #9ac9a3;
  --blue: #a3c4dc;
  --ring: #d6b86c;

  --radius: 14px;
  --radius-sm: 12px;
  --shadow: 0 10px 26px rgba(0,0,0,.10);
  --shadow-soft: 0 6px 16px rgba(0,0,0,.08);
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--gold-d); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Body */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background:
    radial-gradient(1100px 600px at 85% -10%, #fff9e9 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #fef6d8 0%, transparent 60%),
    var(--bg);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Container (narrow like a book) */
.wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 16px 72px;
}

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
header{
  margin: 4px 0 26px;
}

.lotus{
  width:64px; height:64px; border-radius:50%;
  background: conic-gradient(from 210deg,#e5d8a8,#d1b670 55%,#f5e6b8);
  position:relative;
  box-shadow: 0 0 0 2px #f0e2b5 inset, 0 10px 40px rgba(0,0,0,.22);
  margin-bottom: 12px;
}

h1{
  margin: .2rem 0 0;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.18;
  font-size: clamp(28px, 4vw, 44px);
}

.sub-title{
  margin: 8px 0 0;
  font-weight: 800;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 18px);
}

/* Intro ribbon */
.ribbon{
  margin: 16px 0 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg,#fff9e0,#fdf4ce);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 8px 16px rgba(0,0,0,.08);
}
.ribbon b{ color: var(--gold-d); }
.ribbon p{ margin: .65rem 0; }

/* ---------------------------------------------------------
   Sections
--------------------------------------------------------- */
.section{
  margin-top: 46px;
}

.section-head{
  margin-bottom: 14px;
}

.section-head h2{
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: .1px;
  line-height: 1.25;
}

.section-head .desc{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 80ch;
}

/* ---------------------------------------------------------
   Cards / Content blocks
--------------------------------------------------------- */
.card{
  background: linear-gradient(180deg,#fffdf6,#fcf5e2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px;
}

.card h3, .card h4{
  margin: 0 0 8px;
  letter-spacing: .1px;
  line-height: 1.25;
}

.card h3{ font-size: 18px; }
.card h4{ font-size: 16px; }

.card p{ margin: .7rem 0; }

.mini{
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

/* Lists */
ul{ margin: .6rem 0; padding-left: 1.15rem; }
li{ margin: .35rem 0; }

/* ---------------------------------------------------------
   Grids
   Keep them readable: 1 column on mobile, 2 cols on desktop
--------------------------------------------------------- */
.grid,
.grid-2,
.grid-3{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

/* Default: single column (reading-first) */
.grid,
.grid-2,
.grid-3{
  grid-template-columns: 1fr;
}

/* On wide screens, allow 2 columns for dense parts */
@media (min-width: 980px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ---------------------------------------------------------
   Tags / Dots
--------------------------------------------------------- */
.tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  background: #fff8df;
}

.dot{ width: 8px; height: 8px; border-radius: 50%; }
.dot.sila{ background: var(--accent); }
.dot.samadhi{ background: var(--blue); }
.dot.panna{ background: var(--gold); }

/* ---------------------------------------------------------
   Lanes (Bát Chánh Đạo groups)
--------------------------------------------------------- */
.lane{
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg,var(--panel),#f9f0d0);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.lane-head{
  margin-bottom: 10px;
}
.lane-head h3{
  margin: 6px 0 0;
  font-size: 18px;
}

/* ---------------------------------------------------------
   Steps
--------------------------------------------------------- */
.steps{
  display: grid;
  gap: 12px;
  margin-top: 14px;
  grid-template-columns: 1fr;
}

/* On large screens, allow 2 columns */
@media (min-width: 980px){
  .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */
.faq{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

details.card{
  padding: 14px 16px;
}

summary{
  cursor: pointer;
  list-style: none;
  outline: none;
}
summary::-webkit-details-marker{ display:none; }

details[open] summary{
  color: var(--gold-d);
}

details.card:focus-within{
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Small tweaks for readability
--------------------------------------------------------- */
b{ color: #4a341c; }
.card b, .ribbon b{ color: var(--gold-d); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}