/* ============================================================
   LUCHO — OSTEOPATHY & BODYWORK — brand system (Home only, v1)
   Loaded after styles.css. Overrides tokens, adds editorial
   components for the new Home. Subpages keep the previous
   system until they're brought into this pass.
   ============================================================ */

:root{
  --background: oklch(98.4% .004 80);
  --foreground: oklch(24% .014 55);
  --primary: oklch(19% .008 55);
  --primary-foreground: oklch(98.4% .006 85);
  --muted-foreground: oklch(46% .018 55);
  --border: oklch(88% .01 65);
  --sand: oklch(95% .01 72);
  --sand-deep: oklch(85% .018 68);
  --accent-line: oklch(46% .04 190);
  --gradient-calm: linear-gradient(165deg, oklch(98.4% .004 80), oklch(95% .012 72));
  --shadow-soft: 0 20px 60px -28px oklch(19% .008 55 / .28);
}

/* ---- base rhythm ---- */
.lx{max-width:76rem;margin-inline:auto;padding-inline:1.35rem}
@media(min-width:768px){.lx{padding-inline:2.5rem}}
.lx-narrow{max-width:44rem;margin-inline:auto;padding-inline:1.35rem}
@media(min-width:768px){.lx-narrow{padding-inline:0}}

.eyebrow{font:600 .72rem/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-foreground)}
.eyebrow.on-dark{color:oklch(80% .01 80)}

/* brand descriptor under the wordmark: hidden on small phones, shown from ~640px */
.brand-desc{display:none;white-space:nowrap}
@media(min-width:640px){.brand-desc{display:block}}

.h-hero{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(2.3rem,6.4vw,4.4rem);line-height:1.05;letter-spacing:-.01em;color:var(--primary)}
.h-section{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;letter-spacing:-.01em;color:var(--primary)}
.h-sub{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--primary)}
.lede{font:400 1.1rem/1.65 Inter,sans-serif;color:var(--muted-foreground);max-width:38rem}
.lede.lg{font-size:1.2rem}

/* ---- buttons ---- */
.btn-fill,.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.9rem;font:600 .8rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;white-space:nowrap;transition:opacity .2s,background-color .2s,color .2s;
}
.btn-fill{background:var(--primary);color:var(--primary-foreground)}
.btn-fill:hover{opacity:.88}
.btn-line{border:1px solid var(--border);color:var(--primary)}
.btn-line:hover{background:var(--sand)}
.btn-fill:focus-visible,.btn-line:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent-line);outline-offset:3px;
}

/* ---- photo treatment (visually unifies mixed-source images) ---- */
.editorial-photo{filter:grayscale(10%) saturate(.9) contrast(1.04);display:block;width:100%;object-fit:cover}

/* ---- placeholder block for photography we don't have yet ---- */
.photo-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  min-height:22rem;width:100%;border:1px dashed var(--border);border-radius:1.25rem;
  background:var(--sand);color:var(--muted-foreground);text-align:center;padding:2rem;
}
.photo-placeholder svg{opacity:.35}
.photo-placeholder span{font:600 .7rem/1.4 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;max-width:18rem}

/* ---- sections ---- */
.section{padding-block:5rem}
@media(min-width:768px){.section{padding-block:7.5rem}}
.section.on-dark{background:var(--primary);color:var(--primary-foreground)}
.section.tint{background:var(--sand)}

/* ---- positioning / connecting words ---- */
.thread{display:flex;flex-wrap:wrap;gap:.6rem 0;margin-top:2.25rem;font:500 .95rem/1 Inter,sans-serif;color:var(--muted-foreground)}
.thread span{display:inline-flex;align-items:center}
.thread span:not(:last-child)::after{content:'';width:1.75rem;height:1px;background:var(--border);margin-inline:.85rem}

/* ---- method ---- */
.method-list{margin-top:3rem;border-top:1px solid var(--border)}
.method-step{display:grid;grid-template-columns:auto 1fr;gap:1.25rem 1.75rem;padding-block:2.25rem;border-bottom:1px solid var(--border);align-items:baseline}
@media(min-width:768px){.method-step{grid-template-columns:6rem 1fr;gap:2rem}}
.method-num{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;color:var(--sand-deep)}
.method-body h3{font:600 .78rem/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-bottom:.6rem}
.method-body p{font:400 1rem/1.6 Inter,sans-serif;color:var(--muted-foreground);max-width:34rem}

/* ---- choose your path ---- */
.paths{margin-top:3rem;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:1.5rem;overflow:hidden}
@media(min-width:860px){.paths{grid-template-columns:repeat(3,1fr)}}
.path{background:var(--card, #fff);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1.1rem}
.path h3{font:600 .78rem/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.path p{font:400 .95rem/1.6 Inter,sans-serif;color:var(--muted-foreground)}
.path ul{list-style:none;padding:0;margin:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.4rem}
.path li{font:400 .85rem/1.4 Inter,sans-serif;color:var(--muted-foreground);position:relative;padding-left:1rem}
.path li::before{content:'';position:absolute;left:0;top:.55em;width:.4rem;height:1px;background:var(--muted-foreground)}
.path a.path-link{margin-top:auto;font:600 .74rem/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.path a.path-link:hover{text-decoration:underline}

/* ---- treatments (editorial list, replaces icon cards) ---- */
.tx-list{margin-top:3rem;border-top:1px solid var(--border)}
.tx-row{display:grid;grid-template-columns:1fr;gap:.5rem 2rem;padding-block:1.9rem;border-bottom:1px solid var(--border);align-items:baseline;text-decoration:none;transition:background-color .2s}
@media(min-width:768px){.tx-row{grid-template-columns:2fr 3fr auto;align-items:center}}
.tx-row:hover{background:var(--sand)}
.tx-row .tx-title{font-family:'Playfair Display',Georgia,serif;font-size:1.2rem;color:var(--primary)}
.tx-row .tx-desc{font:400 .9rem/1.5 Inter,sans-serif;color:var(--muted-foreground)}
.tx-row .tx-arrow{font:600 .74rem/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);white-space:nowrap}

/* ---- editorial split (Paris, Positioning image support) ---- */
.split{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem}}
.split img,.split .photo-placeholder{border-radius:1.5rem;box-shadow:var(--shadow-soft)}
@media(min-width:900px){.split.rev>*:first-child{order:2}}

/* ---- body assessment diagram ---- */
.assess{margin-top:3rem;display:grid;gap:1.25rem}
@media(min-width:768px){.assess{grid-template-columns:repeat(4,1fr);gap:0}}
.assess-step{display:flex;align-items:center;gap:1rem;padding:1.5rem 0}
@media(min-width:768px){.assess-step{flex-direction:column;text-align:center;padding:0 1rem;position:relative}
  .assess-step:not(:last-child)::after{content:'→';position:absolute;right:-1.1rem;top:1.4rem;color:var(--sand-deep);font-size:1.2rem}}
.assess-step b{font:600 .78rem/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.assess-step span{font:400 .82rem/1.4 Inter,sans-serif;color:var(--muted-foreground)}
.assess-step em{font-family:'Playfair Display',Georgia,serif;font-style:normal;font-size:1.5rem;color:var(--sand-deep)}

/* ---- villas teaser ---- */
.villas-teaser{border-radius:1.75rem;overflow:hidden;position:relative;box-shadow:var(--shadow-soft)}
.villas-teaser img{width:100%;aspect-ratio:16/10;object-fit:cover}
.villas-teaser .vt-copy{padding:2.5rem;background:var(--primary);color:var(--primary-foreground)}
@media(min-width:900px){.villas-teaser{display:grid;grid-template-columns:1.1fr 1fr}.villas-teaser img{aspect-ratio:auto;height:100%}.villas-teaser .vt-copy{display:flex;flex-direction:column;justify-content:center}}

/* ---- about gallery reuse ---- */
.about-wrap{display:grid;gap:3rem}
@media(min-width:900px){.about-wrap{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}}
.about-photo-round{width:6.5rem;height:6.5rem;border-radius:999px;overflow:hidden;box-shadow:var(--shadow-soft)}
@media(min-width:768px){.about-photo-round{width:7.5rem;height:7.5rem}}
.about-list{margin-top:1.5rem;padding:0;list-style:none;display:grid;gap:.65rem}
.about-list li{position:relative;padding-left:1.4rem;font:400 .9rem/1.5 Inter,sans-serif;color:var(--muted-foreground)}
.about-list li::before{content:'';position:absolute;left:0;top:.55em;width:.5rem;height:1px;background:var(--accent-line)}

/* ---- final cta ---- */
.final-cta{background:var(--primary);color:var(--primary-foreground);border-radius:2rem;padding:4rem 2rem;text-align:center}
@media(min-width:768px){.final-cta{padding:5.5rem 3rem}}
.final-cta .h-section{color:var(--primary-foreground)}
.final-cta p{color:oklch(82% .01 80);margin-top:1rem}

/* ---- sticky mobile book bar ---- */
.sticky-book{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:.6rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:oklch(98.4% .004 80 / .92);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
.sticky-book .btn-fill{flex:1}
@media(min-width:768px){.sticky-book{display:none}}
body.has-sticky-book{padding-bottom:4.5rem}
@media(min-width:768px){body.has-sticky-book{padding-bottom:0}}

/* ---- gallery grid (reused from page.css for Home's About section) ---- */
.gallery-block{margin-top:1.75rem}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(5,1fr)}}
.gallery-grid figure{margin:0}
.gallery-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:1rem;box-shadow:var(--shadow-soft)}
.gallery-grid figcaption{margin-top:.4rem;font-size:.72rem;line-height:1.3;color:var(--muted-foreground);text-align:center}

/* ---- weekly calendar (Hotels — "A Week At Your Hotel") ---- */
.week-cal{margin-top:2.5rem;border-top:1px solid var(--border)}
.week-row{display:grid;grid-template-columns:1fr;gap:.5rem;padding-block:1.75rem;border-bottom:1px solid var(--border)}
@media(min-width:768px){.week-row{grid-template-columns:8rem 1fr auto;gap:1.5rem;align-items:center}}
.week-row .wc-day{font:600 .72rem/1.3 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
.week-row .wc-time{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;color:var(--primary);margin-top:.15rem}
.week-row .wc-name{font-family:'Playfair Display',Georgia,serif;font-size:1.35rem;color:var(--primary)}
.week-row .wc-tags{font:400 .88rem/1.5 Inter,sans-serif;color:var(--muted-foreground);margin-top:.2rem}
.week-row .wc-meta{font:600 .7rem/1.5 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap}
@media(min-width:768px){.week-row .wc-meta{text-align:right}}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-in{transition:none!important;opacity:1!important;transform:none!important}
}