:root {
  --ink: #202420;
  --ink-soft: #5c655d;
  --paper: #ffffff;
  --cream: #eef0e9;
  --line: #dbdfd3;
  --accent: #3d5c45;
  --accent-light: #c9dcc7;
  --radius: 2px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--accent);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-light { border-color: var(--paper); color: var(--paper); }
.btn-light:hover { background: var(--paper); color: var(--ink); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand img { height: 34px; width: auto; }
.brand { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a:not(.btn) {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  color: var(--ink);
}
.main-nav a:not(.btn):hover { color: var(--accent); }
.main-nav .btn { margin-left: 6px; }

/* Hero
   Two states:
   - default: no photo yet — plain, copy-led, on the cream section background
     (same pattern as solidcore.co's image-light hero — no faked/placeholder
     photography standing in for the real studio).
   - .hero--photo: SiteSettings.hero_image is set — full-bleed photo with the
     copy overlaid bottom-left over a gradient, the standard treatment used by
     CorePower Yoga and most boutique studio sites once real photography
     exists. Swapping between the two is automatic based on whether an image
     has been uploaded in the admin. */
.hero {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  max-width: 620px;
  padding-top: 96px;
  padding-bottom: 96px;
}
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero--photo {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  border-bottom: none;
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 19, 16, .82) 0%, rgba(16, 19, 16, .25) 55%, rgba(16, 19, 16, 0) 100%);
}
.hero--photo .hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 64px;
}
.hero--photo h1 { color: var(--paper); }
.hero--photo .eyebrow { color: var(--accent-light); }
.hero--photo p { color: rgba(255, 255, 255, .85); }

/* Sections */
.section { padding: 76px 0; }
.section-alt { background: var(--cream); }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Cards grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.card-media { aspect-ratio: 4/3; background: var(--line); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card-body .tag {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); font-weight: 600; margin-bottom: 6px;
}
.card-foot { margin-top: auto; padding-top: 12px; }

/* Pricing */
.price-card {
  border: 1px solid var(--line);
  padding: 32px 26px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.price-card.featured {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.price-card.featured p, .price-card.featured .price-amount, .price-card.featured li { color: var(--paper); }
.price-amount { font-family: var(--serif); font-size: 2.4rem; margin: 6px 0 18px; }
.price-amount span { font-family: var(--sans); font-size: .95rem; opacity: .7; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.price-card li { padding: 7px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.price-card.featured li { border-top-color: rgba(255,255,255,.2); }
.price-card li:first-child { border-top: none; }

/* Instructors */
.person-card { text-align: center; }
.person-media { aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background: var(--cream); max-width: 180px; margin: 0 auto 18px; }
.person-media img { width: 100%; height: 100%; object-fit: cover; }

/* Testimonials */
.testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: var(--radius);
}
.testimonial p.quote { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); font-style: italic; }
.testimonial .who { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* Cafe menu */
.menu-category h3 { border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.menu-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.menu-item .name { font-weight: 600; }
.menu-item .desc { color: var(--ink-soft); font-size: .9rem; }
.menu-item .price { font-family: var(--serif); white-space: nowrap; }
.menu-item .tags { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }

/* Blog */
.post-meta { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 10px; }
.post-body { max-width: 720px; margin: 0 auto; }
.post-body img { border-radius: var(--radius); margin: 24px 0; }

/* Forms */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; color: var(--ink-soft); }
.form-field input, .form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .95rem;
  background: var(--paper);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--ink); }
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; background: var(--cream); border: 1px solid var(--line); }

/* Booking embed */
.booking-embed { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--cream); min-height: 320px; }
.booking-embed iframe { width: 100%; min-height: 640px; border: none; }

/* Footer */
.site-footer { background: var(--ink); color: #c7cec6; padding: 60px 0 30px; margin-top: 40px; }
.site-footer h4 { color: var(--paper); font-size: 1rem; }
.site-footer a { color: #c7cec6; }
.site-footer a:hover { color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid p, .footer-grid li { color: #a7b0a5; font-size: .92rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 4px 0; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: .8rem; color: #838f84;
}
.footer-logo img { height: 28px; margin-bottom: 12px; filter: invert(1); }
.social-row { display: flex; gap: 14px; margin-top: 14px; }

@media (max-width: 900px) {
  .hero--photo { min-height: 70vh; }
  .grid-3, .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .main-nav { position: fixed; inset: 62px 0 0 0; background: var(--paper); flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px; transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; }
  .main-nav.open { transform: translateX(0); }
  .nav-toggle { display: block; }
  .grid-3, .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
}