/* Kayakalp Retreat: beige, turmeric, leaf green and terracotta. Marcellus for headings, Mulish for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #F5EBDD;
  --surface: #FBF5EC;
  --soft: #EFE1CC;
  --ink: #3B2A1E;
  --muted: #6E5A4A;
  --line: #E2CFB4;
  --line-strong: #CDB38F;
  --brand: #4F6B3A;
  --brand-hover: #3E562C;
  --brand-ink: #FBF5EC;
  --brand-text: #4F6B3A;
  --turmeric: #E0A526;
  --terracotta: #B5552B;
  --eyebrow: #B5552B;
  --head: "Marcellus", Georgia, serif;
  --body: "Mulish", system-ui, sans-serif;
  --radius: 14px;
  --radius-lg: 28px;
  --btn-radius: 999px;
  --wrap: 1140px;
  --gap: 24px;
  --cta-bg: #3B2A1E;
  --cta-ink: #F5EBDD;
  --badge-bg: #F7E2B0;
  --badge-ink: #6B4A0B;
}
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
.btn { font-weight: 700; }
.center { text-align: center; }

.header { background: var(--bg); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 40px; height: 40px; }
.logo span { display: grid; line-height: 1.1; }
.logo b { font: 400 1.5rem var(--head); color: var(--ink); letter-spacing: .04em; }
.logo small { font-size: .74rem; color: var(--muted); letter-spacing: .08em; }
.nav a { color: var(--muted); font-weight: 600; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); background: var(--soft); }

.hero { padding-block: clamp(36px, 6vw, 80px); text-align: center; background: radial-gradient(60% 60% at 50% 30%, #FBF1DE, transparent 70%); }
.hero-inner { display: grid; justify-items: center; }
.hero-art { margin: 0 0 18px; width: min(300px, 70vw); }
.hero-art svg { width: 100%; height: auto; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.12; margin: 14px 0 18px; max-width: 22ch; }
.hero h1 em { font-style: normal; color: var(--terracotta); }
.hero .lede { margin-inline: auto; }
.hero .t-actions { justify-content: center; margin-top: 26px; }

.progs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }
.progs li { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.progs h3 { font-size: 1.5rem; color: var(--brand); }
.progs p { color: var(--muted); }
.prog-meta { font-weight: 700; color: var(--terracotta) !important; font-size: .9rem; }
.phase-band { background: var(--ink); color: var(--bg); }
.phase-band .lede { color: #D9C7AE; }
.phase-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 820px) { .phase-grid { grid-template-columns: minmax(0, 1fr); } }
.phase-list { list-style: none; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 6px; }
@media (max-width: 520px) { .phase-list { grid-template-columns: minmax(0, 1fr); } }
.phase-list li { display: grid; gap: 4px; padding: 18px 16px; border-radius: 14px; background: var(--c); color: #fff; }
.phase-list b { font: 400 1.3rem var(--head); }
.phase-list span { font-size: .88rem; opacity: .92; }
.room-card { border-radius: var(--radius-lg); }
.room-art { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.room-body h3 { color: var(--ink); font-size: 1.5rem; }
.quotes-band { background: var(--soft); }
.quotes li { border-radius: var(--radius-lg); }
.quotes blockquote { font-family: var(--head); font-size: 1.15rem; line-height: 1.5; }

.page-head { text-align: center; }
.page-head h1, .page-head .lede { margin-inline: auto; }
.phasebar { display: flex; gap: 3px; }
.phasebar span { flex: 1; height: 28px; border-radius: 6px; cursor: pointer; opacity: .55; }
.phasebar span.is-day { opacity: 1; outline: 3px solid var(--ink); outline-offset: 1px; }
.pb-prep { background: #E0A526; } .pb-main { background: #B5552B; } .pb-rest { background: #4F6B3A; }
.sched { padding: 16px; border-radius: 14px; background: var(--bg); }
.sched-head { margin-bottom: 10px; }
.ph { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: .82rem; font-weight: 700; }
.ph-prep { background: #B07D17; } .ph-main { background: #B5552B; } .ph-rest { background: #4F6B3A; }
.sched ol { list-style: none; display: grid; gap: 6px; }
.sched li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.sched time { font-weight: 700; color: var(--terracotta); font-size: .9rem; }
.seg-len span { font: 400 1.15rem var(--head); padding-inline: 22px; }
.sig-out { background: var(--surface); border-radius: var(--radius-lg); }
.sig-total { color: var(--brand); font-weight: 400; }
.cta-band .btn-primary { background: var(--turmeric); color: var(--ink); }
.footer { background: var(--soft); color: var(--ink); }