/* Prana Yoga Shala: dawn saffron and night indigo on warm white.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FFF8EE;
  --surface: #FFFFFF;
  --soft: #F6EBDD;
  --ink: #1F2A44;
  --muted: #5E6478;
  --line: #EEDFCB;
  --line-strong: #DCC6AA;
  --indigo: #1F2A44;
  --saffron: #E8833A;
  --plum: #6B4E71;
  --brand: #1F2A44;
  --brand-hover: #2E3B5E;
  --brand-ink: #FFF8EE;
  --brand-text: #B85E1C;
  --eyebrow: #B85E1C;
  --head: "Cormorant", Georgia, serif;
  --body: "Karla", system-ui, sans-serif;
  --radius: 12px;
  --radius-lg: 26px;
  --btn-radius: 999px;
  --wrap: 1160px;
  --gap: 20px;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
h1 em, h2 em, .f-statement em { font-style: italic; color: var(--saffron); font-weight: 500; }
.eyebrow { letter-spacing: .18em; }
.btn { font-weight: 700; }
.text-link { color: var(--brand-text); font-weight: 700; text-underline-offset: 5px; }
.lotus { width: 42px; height: 28px; }
.tt-class[data-type="hatha"] { --type: #E8833A; }
.tt-class[data-type="vinyasa"] { --type: #C2185B; }
.tt-class[data-type="yin"] { --type: #6B4E71; }
.tt-class[data-type="breath"] { --type: #3D8B7D; }
.tt-class[data-type="prenatal"] { --type: #D98BA0; }

/* ---------- header ---------- */
.header { background: rgba(255,248,238,.92); backdrop-filter: blur(10px); }
.header .wrap { min-height: 80px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo span { display: grid; line-height: 1; }
.logo b { font: 600 2rem var(--head); color: var(--indigo); }
.logo small { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav a { color: var(--muted); font-weight: 600; border-radius: 999px; }
.nav a:hover { color: var(--ink); background: var(--soft); }
.nav a[aria-current="page"] { color: var(--indigo); background: var(--soft); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(32px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 340px; } }
.hero h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .95; margin: 16px 0 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.next-line { display: inline-block; margin-top: 22px; color: var(--muted); text-decoration: none; }
.next-line b { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.hero-sun .sun { animation: rise 8s ease-in-out infinite alternate; }
@keyframes rise { to { transform: translateY(-14px); } }

/* ---------- sections ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 26px; }
.sec-head h2, .sec-title { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; }
.style-row { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1000px) { .style-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .style-row { grid-template-columns: minmax(0, 1fr); } }
.style-row a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.style-row a:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -24px rgba(31,42,68,.35); }
.style-row b { font: 600 1.6rem var(--head); }
.style-row span { color: var(--muted); font-size: .92rem; }
.dots { font-style: normal; color: var(--saffron); letter-spacing: .1em; }
.breathe-band { background: var(--indigo); color: #D7DAE6; }
.breathe-band .sec-title { color: #FFF8EE; }
.breathe-band .eyebrow { color: #F6B26B; }
.breathe-band .lede { color: #C7CBDA; }
.breathe-band .btn-primary { background: #E8833A; color: #1F2A44; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .split-2 { grid-template-columns: minmax(0, 1fr); } }
.mini-pacer { display: grid; place-items: center; aspect-ratio: 1; max-width: 280px; margin-inline: auto; border-radius: 50%; border: 2px solid rgba(246,178,107,.4); }
.mini-pacer span { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #F6B26B, #E8833A); animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.45); } 50% { transform: scale(1); } }

/* ---------- breathing pacer (signature) ---------- */
.pacer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .pacer { grid-template-columns: minmax(0, 1fr); } }
.pacer-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 460px; width: 100%; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, #2E3B5E, var(--indigo) 70%); }
.pacer-ring { position: absolute; inset: 8%; display: grid; place-items: center; border-radius: 50%; border: 2px dashed rgba(246,178,107,.35); }
.pacer-dot { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FBD3A6, #E8833A 70%); transform: scale(.35); transition: transform 1.2s ease-in-out; box-shadow: 0 0 60px rgba(232,131,58,.45); }
.pacer-say { position: relative; font: 600 clamp(1.6rem, 4vw, 2.4rem) var(--head); color: #FFF8EE; text-align: center; padding: 0 20px; text-shadow: 0 2px 10px rgba(31,42,68,.6); }
.pacer-count { position: absolute; bottom: 14%; font: 600 1.4rem var(--body); color: #FFF8EE; opacity: .8; }
.pacer-controls { display: grid; gap: 20px; }
.pq { border: 0; padding: 0; margin: 0; min-width: 0; }
.pq legend { font: 600 1.5rem var(--head); margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-grid; place-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .92rem; background: var(--surface); }
.chips input:checked + span { background: var(--indigo); border-color: var(--indigo); color: #FFF8EE; }
.chips input:focus-visible + span { outline: 3px solid var(--saffron); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .pacer-dot { transition: none !important; } .mini-pacer span, .hero-sun .sun { animation: none; } }

/* ---------- styles page ---------- */
.styles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.style { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 100px; }
.style h2 { font-size: 2.2rem; }
.style p { color: var(--muted); }
.meter { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; font-size: .88rem; font-weight: 600; }
.meter i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--saffron) calc(var(--v) * 20%), var(--soft) 0); }
.good b { color: var(--ink); }

/* ---------- pricing ---------- */
.passes { display: grid; gap: 22px; }
.passes .field { max-width: 520px; }
.passes .field label { display: flex; justify-content: space-between; font: 600 1.4rem var(--head); }
.passes output { color: var(--brand-text); }
.pass-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 860px) { .pass-list { grid-template-columns: minmax(0, 1fr); } }
.pass { display: grid; gap: 8px; align-content: start; padding: 26px; border-radius: var(--radius-lg); background: var(--surface); border: 2px solid var(--line); transition: border-color .2s, transform .2s; }
.pass h3 { font-size: 1.8rem; }
.pass-price { font: 600 2.6rem/1 var(--head); }
.pass-note { color: var(--muted); }
.pass-calc { font-weight: 600; min-height: 3em; }
.pass-best { display: none; justify-self: start; padding: 3px 12px; border-radius: 999px; background: var(--saffron); color: #fff; font-size: .78rem; font-weight: 700; }
.pass.is-best { border-color: var(--saffron); transform: translateY(-4px); }
.pass.is-best .pass-best { display: inline-block; }
.pass.is-best .btn-ghost { background: var(--indigo); color: #FFF8EE; border-color: var(--indigo); }

/* ---------- inner pages ---------- */
.page-head h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); }
.coach-art { border-radius: var(--radius-lg); }

/* ---------- CTA + footer ---------- */
.cta-band { padding-block: clamp(56px, 8vw, 104px); text-align: center; background: var(--soft); }
.cta-band .lotus { width: 56px; height: 38px; margin: 0 auto 14px; }
.cta-band h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.cta-band p { margin: 12px auto 0; max-width: 50ch; color: var(--muted); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.footer { background: var(--indigo); color: #C7CBDA; --footer-line: rgba(255,255,255,.12); }
.f-statement { font: 600 clamp(2rem, 4.6vw, 3.4rem)/1.05 var(--head); color: #FFF8EE; margin-bottom: 48px; }
.f-statement em { color: #F6B26B; }
.footer .logo b { color: #FFF8EE; }
.footer .logo small { color: #A9AEC2; }
.footer h2 { color: #F6B26B; opacity: 1; }
.f-about { margin: 14px 0 10px; max-width: 34ch; }
.footer .credit a { color: #FFF8EE; }