/* New Art of Healing — design system
   Palette drawn from the koi logo: ivory ground, soft teal + lavender accents.
   Serif headings (Cormorant Garamond) · clean sans body (Jost). */

:root{
  --ivory:#F6F1E8;
  --ivory-deep:#EFE7D9;
  --ink:#2E2A30;
  --ink-soft:#5F5963;
  --teal:#4E9AA3;
  --teal-deep:#2F6E76;
  --aqua-blue:#2869A8;
  --lavender:#7C6BA6;
  --plum:#5B2D8E;
  --line:rgba(46,42,48,.14);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:100px;}

/* skip link — hidden until keyboard-focused */
.skip-link{
  position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:100;
  background:var(--ink);color:var(--ivory);font-family:var(--sans);font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;padding:12px 22px;border-radius:0 0 3px 3px;
  transition:top .2s ease;
}
.skip-link:focus{top:0;outline:2px solid var(--teal);outline-offset:2px;}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* visually-hidden — kept in the a11y/SEO tree but off-screen. Used where baked-in
   image text (Home banner wordmark, About portrait name) carries the visible
   heading, but a real <h1> still needs to exist for screen readers + search. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

h1,h2,h3{font-family:var(--serif);line-height:1.14;letter-spacing:.01em;margin:0;color:var(--ink);}
h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:500;}
h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:500;}
h3{font-size:1.55rem;font-weight:500;}
p{margin:1rem 0;}
.lead{font-size:1.18rem;color:var(--ink-soft);}
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--aqua-blue);margin:0;
}
.divider{width:54px;height:1px;background:var(--teal);margin:22px auto;opacity:.6;}

/* header / nav — sticky, transparent over the hero, then frosted ivory once
   the page scrolls (or when the mobile menu is open) so content never shows
   through the nav links. The scrolled state is toggled by assets/js/nav.js. */
.site-header{padding:26px 0;position:sticky;top:0;z-index:50;background:transparent;transition:background .3s ease,box-shadow .3s ease;}
.site-header.scrolled,
.site-header.is-open{
  background:rgba(246,241,232,.85);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line),0 10px 30px rgba(60,70,90,.06);
}
.site-header .container{display:flex;align-items:center;justify-content:center;gap:24px;max-width:none;position:relative;min-height:46px;}
.brand{display:flex;align-items:center;gap:14px;}
.brand img{width:46px;height:46px;}
.brand-name{font-family:var(--serif);font-size:1.5rem;letter-spacing:.02em;}
.nav{
  display:grid;grid-template-columns:repeat(8,max-content);
  align-items:center;justify-content:center;column-gap:24px;row-gap:12px;
}
.nav a{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--plum);transition:color .2s,background .2s;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--plum);}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 rgba(91,45,142,.5);}
.nav .nav-book{
  padding:11px 14px;border:1px solid var(--plum);border-radius:2px;
  color:var(--plum);background:rgba(246,241,232,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.nav .nav-book:hover{background:var(--plum);color:var(--ivory);}
.nav-actions{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:14px;
}
.nav .nav-home-logo{
  width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--plum);
  border-radius:50%;background:rgba(246,241,232,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s,transform .2s;padding:0;
}
.nav-home-logo img{width:32px;height:32px;}
.nav .nav-home-logo:hover{background:var(--ivory);transform:scale(1.04);}
/* mobile menu button — hidden on desktop, shown under 760px */
.nav-toggle{display:none;background:transparent;border:0;padding:10px 4px;margin:-10px -4px;cursor:pointer;}
.nav-toggle-bar{display:block;width:25px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s ease,opacity .2s ease;}

/* buttons */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;padding:16px 34px;border:1px solid var(--ink);border-radius:2px;
  color:var(--ink);background:transparent;transition:all .25s ease;cursor:pointer;
}
.btn:hover{background:var(--ink);color:var(--ivory);}
.btn-light{border-color:var(--ivory);color:var(--ivory);}
.btn-light:hover{background:var(--ivory);color:var(--ink);}

/* hero */
/* keep .container's 28px side gutter (override only top/bottom) so the Home
   banner respects the page margin instead of bleeding edge-to-edge on mobile */
.hero{text-align:center;padding-top:40px;padding-bottom:92px;}
.hero .koi{width:min(300px,64vw);margin:0 auto 30px;filter:drop-shadow(0 12px 30px rgba(80,110,140,.18));}
.hero h1{margin:.15em 0 .15em;}
.hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3vw,2rem);color:var(--lavender);margin:0 0 1.3rem;}
.hero .lead{max-width:540px;margin:0 auto 2.4rem;}

/* Home banner + About portrait — the brand's cool watercolor art, which already
   has soft faded edges, so it gets a gentle radius only (NOT the unifying frame
   the warm service-page photos use). Kept contained with breathing room above so
   the transparent sticky nav stays over plain ivory — no contrast issue. */
.hero-banner,.about-portrait{margin:0 auto;}
.hero-banner img,.about-portrait img{width:100%;border-radius:10px;box-shadow:0 22px 50px rgba(60,70,90,.12);}
.hero-banner{max-width:960px;margin-bottom:2.4rem;}
.about-portrait{max-width:900px;}

/* Full-screen Home landing page: the watercolor fills the viewport while the
   page links sit over it. Interior pages keep the standard branded header. */
.home-page{overflow:hidden;}
.home-page .site-header{
  position:fixed;left:0;width:100%;
  background:linear-gradient(to bottom,rgba(246,241,232,.62),rgba(246,241,232,0));
}
.home-page .site-header .container{max-width:none;justify-content:center;}
.home-page main,.home-page .hero,.home-page .hero-banner,
.home-page .hero-banner picture{width:100%;height:100vh;}
.home-page .hero{max-width:none;padding:0;}
.home-page .hero-banner{max-width:none;margin:0;}
.home-page .hero-banner img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:0;box-shadow:none;
}

@media (max-width:1180px) and (min-width:761px){
  .site-header .container{justify-content:flex-end;flex-wrap:wrap;gap:0;}
  .nav-toggle{display:block;}
  .nav{
    display:flex;order:3;flex-basis:100%;flex-direction:column;align-items:center;gap:0;
    max-height:0;overflow:hidden;transition:max-height .32s ease;
  }
  .site-header.is-open .nav{max-height:80vh;margin-top:12px;}
  .nav a{padding:10px 0;}
  .site-header.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-header.is-open .nav-toggle-bar:nth-child(2){opacity:0;}
  .site-header.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* sections */
.section{padding:84px 0;}
.section.alt{background:var(--ivory-deep);}
.section-intro{max-width:720px;margin:0 auto;text-align:center;}

/* two paths */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:48px;}
.path-card{
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;
  padding:48px 40px;text-align:center;transition:transform .25s ease,box-shadow .25s ease;
}
.path-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,70,90,.10);}
.path-card h3{margin-bottom:.4rem;}
.path-card p{color:var(--ink-soft);font-size:1.02rem;margin:.6rem 0 1.5rem;}
.path-card .more{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua-blue);}

/* apothecary — curated dispensary hub. Category cards (more product/category
   based than the typographic service pages) that route to the right buying or
   consultation pathway. Reuses the path-card aesthetic; responsive auto-fit so
   it grows gracefully as categories are added. Flex column + margin-top:auto on
   the action keeps the CTA aligned at the card foot across an uneven row. */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:26px;margin-top:48px;}
.shop-card{
  display:flex;flex-direction:column;
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;
  padding:40px 32px;text-align:center;transition:transform .25s ease,box-shadow .25s ease;
}
.shop-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,70,90,.10);}
.shop-card h3{margin-bottom:.25rem;}
.shop-card .shop-source{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--aqua-blue);margin:0 0 1rem;
}
.shop-card p{color:var(--ink-soft);font-size:1rem;margin:0 0 1.8rem;}
.shop-card .btn{margin-top:auto;align-self:center;font-size:.74rem;padding:14px 26px;}
.shop-soon{
  margin-top:auto;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.8;
}
.shop-note{text-align:center;color:var(--ink-soft);font-size:.95rem;margin-top:2.6rem;}
.shop-note a{border-bottom:1px solid var(--line);}

/* cta band */
.cta{background:var(--teal-deep);color:var(--ivory);text-align:center;padding:96px 0;}
.cta .eyebrow{color:rgba(246,241,232,.72);}
.cta h2{color:var(--ivory);max-width:760px;margin:.4em auto 0;}
.cta .btn-row{margin-top:1.8rem;}
.cta .call{font-size:.95rem;color:rgba(246,241,232,.72);margin-top:1.1rem;}
.cta .call a{color:var(--ivory);border-bottom:1px solid rgba(246,241,232,.5);}

/* footer */
.site-footer{padding:64px 0 44px;border-top:1px solid var(--line);}
.site-footer .container{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;}
.f-brand{display:flex;flex-direction:column;align-items:center;gap:8px;}
.f-brand img{width:54px;}
.f-brand span{font-family:var(--serif);font-size:1.25rem;}
.site-footer address{font-style:normal;color:var(--ink-soft);font-size:.96rem;line-height:1.9;}
.site-footer address a{border-bottom:1px solid var(--line);}
.f-nav{display:flex;flex-direction:column;gap:8px;}
.f-nav a{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.f-nav a:hover{color:var(--ink);}
.f-social{display:flex;justify-content:center;gap:22px;margin-top:34px;}
.f-social a{color:var(--ink-soft);line-height:0;transition:color .2s;}
.f-social a:hover{color:var(--teal-deep);}
.copyright{margin-top:28px;text-align:center;font-weight:500;font-size:.74rem;letter-spacing:.12em;color:var(--ink-soft);text-transform:uppercase;}

/* interior page helpers (used by other pages) */
.page-head{text-align:center;padding:48px 0 4px;}
.page-head h1{font-size:clamp(2rem,4vw,3.2rem);color:var(--aqua-blue);}

/* framed page photo — a contained plate placed just under the .page-head title.
   One frame for every page (16:9 crop, soft radius, hairline border, gentle
   shadow) so the client's warm candle-lit photos read consistently inside the
   cool ivory site. .wide is the 2:1 strip used for the New Patients image.
   Native ratio lives on disk; the crop is done here so it stays adjustable. */
.page-media{max-width:1024px;margin:26px auto 0;}
.page-media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:8px;border:1px solid var(--line);
  box-shadow:0 20px 48px rgba(60,70,90,.13);
}
.page-media.wide img{aspect-ratio:2/1;}

.prose{max-width:680px;margin:0 auto;}
.prose h2{margin-top:2.4rem;color:var(--aqua-blue);}
.prose ul{padding-left:1.1rem;}
.prose li{margin:.35rem 0;color:var(--ink-soft);}
.prose-cta{text-align:center;margin:2.8rem 0 0;}

/* contact details */
.contact-block{font-style:normal;text-align:center;display:grid;gap:1.7rem;color:var(--ink-soft);}
.contact-block p{margin:0;}
.contact-block strong{display:block;font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua-blue);margin-bottom:.35rem;}
.contact-block a{border-bottom:1px solid var(--line);transition:color .2s;}
.contact-block a:hover{color:var(--ink);}
.contact-link{color:var(--aqua-blue);}
.copy-address{
  display:inline-block;margin-top:.7rem;padding:8px 12px;border:1px solid var(--aqua-blue);
  border-radius:2px;background:transparent;color:var(--aqua-blue);font:600 .72rem var(--sans);
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
.copy-address:hover,.copy-address:focus-visible{background:var(--aqua-blue);color:var(--ivory);}

/* Contact page: a practical map-and-details layout that makes the verified
   address, hours, phone, email, directions, and booking path easy to scan. */
.contact-section{padding-top:44px;}
.contact-layout{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:30px;align-items:stretch;
}
.contact-map{min-height:600px;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 20px 48px rgba(60,70,90,.10);}
.contact-map iframe{display:block;width:100%;height:100%;border:0;}
.contact-card{
  display:flex;flex-direction:column;justify-content:center;
  padding:42px 38px;background:#E2EFEC;border:1px solid rgba(78,154,163,.24);border-radius:8px;
}
.contact-card .contact-block{text-align:left;gap:34px;}
.contact-group h2{font-size:1.75rem;margin-bottom:1.1rem;}
.contact-group p{margin:0;}
.contact-group p + p{margin-top:1.35rem;}
.contact-book{text-align:center;margin:0 0 34px;}
.contact-footer{padding-top:32px;}
.contact-footer .f-social{margin-top:0;}

@media (max-width:760px){
  body{font-size:17px;}
  .site-header{padding:18px 0;}
  .site-header .container{justify-content:flex-end;flex-wrap:wrap;gap:0;}
  .nav-toggle{display:block;}
  .nav{
    display:flex;order:3;flex-basis:100%;flex-direction:column;align-items:center;gap:0;
    max-height:0;overflow:hidden;transition:max-height .32s ease;
  }
  .site-header.is-open .nav{max-height:75vh;margin-top:12px;}
  .nav a{padding:13px 0;font-size:.84rem;}
  .home-page .nav .nav-book{padding:11px 18px;margin:8px 0 14px;}
  .site-header.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-header.is-open .nav-toggle-bar:nth-child(2){opacity:0;}
  .site-header.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .paths{grid-template-columns:1fr;}
  .section{padding:60px 0;}
  .site-footer .container{flex-direction:column;}
  .contact-layout{grid-template-columns:1fr;}
  .contact-card{order:-1;}
  .contact-map{min-height:360px;}
  .contact-card{padding:34px 28px;}
  .contact-card .contact-block{text-align:center;}

  /* Show all of the wide Home artwork on a tall phone instead of cropping it. */
  .home-page main,.home-page .hero,.home-page .hero-banner,
  .home-page .hero-banner picture{height:100dvh;min-height:100vh;}
  .home-page .hero-banner img{
    object-fit:contain;object-position:center;background:var(--ivory);
  }

  /* Keep text and photography on the same dependable mobile guide. */
  .page-head,.page-media,.prose{width:100%;}
  .page-head,.prose{padding-left:28px;padding-right:28px;}
}

/* respect reduced-motion — calm by default for motion-sensitive visitors.
   Kills smooth-scroll, card lifts, and the nav slide; toggles still work,
   they just snap instead of animate. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* print — clean, ink-friendly pages, tuned for the Contact page a visitor
   might print (address, directions, hours, phone). Strips interactive chrome
   (nav, hamburger, social icons, the booking CTA) and flattens the brand tint
   so the essential text prints as black on white. Nothing invented — just
   removes what's useless on paper. */
@media print{
  html{scroll-behavior:auto;}
  body{background:#fff;color:#000;font-size:12pt;line-height:1.5;}
  .skip-link,.nav-toggle,.nav,.f-nav,.f-social,.btn,.prose-cta{display:none!important;}
  a{color:#000;}
  .site-header{position:static;padding:6px 0;}
  .site-footer{border-top:1px solid #999;padding:18px 0 0;margin-top:24px;}
  .section,.page-head,.hero{padding:16px 0;}
  .section.alt{background:transparent!important;}
  .eyebrow,.lead,.contact-block,.contact-block strong,.site-footer address{color:#000;}
  .contact-block a,.site-footer address a{border-bottom:0;}
  h1,h2,h3{page-break-after:avoid;}
  .hero .koi,.f-brand img{filter:none;max-width:180px;}
}