/* ==========================================================================
   WINDRUSH DAY SPA & NAIL BAR
   Palette sampled from the spa's own footage; contrast verified to 7:1 for
   body copy (WCAG AAA) rather than the 4.5:1 minimum, because the audience
   skews older. Two-tier accents: each accent has a dark-ground and a
   light-ground variant, because #98BC87 on ivory is only 1.82:1.
   ========================================================================== */

:root{
  /* grounds */
  --ink:#100D09;            /* deepest water, warm black                    */
  --ink-2:#191309;
  --umber:#2A1F14;
  --pond:#38473A;           /* deep botanical, for the quote band           */
  --ivory:#F3EDE2;          /* editorial ground                             */
  --cream:#E9E1D3;

  /* text — every value below was contrast-checked against its ground */
  --on-ink:#EDE6DA;         /* 15.6:1 on ink                                */
  --on-ink-2:#C4BAA9;       /* 10.1:1                                       */
  --on-ink-3:#A99E8C;       /*  7.3:1 — labels only                         */
  --on-ivory:#2A241C;       /* 13.2:1 on ivory                              */
  --on-ivory-2:#4E463A;     /*  8.0:1                                       */
  --on-ivory-3:#6B6153;     /*  5.2:1 — labels only                         */
  --on-pond:#F1ECE3;        /*  8.4:1 on pond                               */

  /* accents */
  --sage:#98BC87;           /* 9.1:1 on ink  — dark grounds and fills       */
  --sage-deep:#3B562E;      /* 7.1:1 on ivory — links and icons on light    */
  --amber:#C98A3E;          /* 6.6:1 on ink                                 */
  --amber-deep:#7A4E18;     /* 6.2:1 on ivory                               */
  --petal:#D8A6A0;

  --rule-dark:rgba(237,230,218,.18);
  --rule-light:rgba(42,36,28,.16);
  --flag:#D9A441;

  --f-sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  --shell:min(1480px,100% - 9vw);
  --shell-tight:min(1120px,100% - 9vw);
  --shell-read:min(760px,100% - 9vw);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.15,1);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--on-ivory);
  font-family:var(--f-sans);
  font-weight:400;
  font-size:clamp(1rem,.97rem + .15vw,1.075rem);   /* never below 1rem */
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0}
/* Headings take the colour of the section they sit in. Stated explicitly so a
   parent theme setting `h1{color:...}` cannot repaint them — an explicit rule
   always beats an inherited value, however dark the ground behind it. */
h1,h2,h3,h4,h5,h6{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
.nav__links,.drawer__links{margin:0;padding:0;list-style:none}
.drawer__links{display:flex;flex-direction:column;gap:.2rem}
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.on-ink :focus-visible,.film :focus-visible{outline-color:var(--sage)}

.skip{
  position:absolute;left:1rem;top:-120px;z-index:300;
  background:var(--ivory);color:var(--ink);
  padding:.85rem 1.4rem;font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip:focus{top:1rem}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------------------------------------------------------- typography --- */
.display{font-family:var(--f-display);font-weight:300;line-height:1.02;
         letter-spacing:-.008em;text-wrap:balance}
.d-xl{font-size:clamp(2.9rem,8vw,7rem)}
.d-l {font-size:clamp(2.3rem,5.2vw,4.4rem)}
.d-m {font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.08}
.d-s {font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.18}
.italic{font-style:italic}

.eyebrow{
  font-size:.8125rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-ivory-3);display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:clamp(1.4rem,3.5vw,2.75rem);height:2px;
                 background:var(--sage-deep);flex:none;opacity:.85}
.on-ink .eyebrow,.phero .eyebrow{color:var(--on-ink-3)}
.on-ink .eyebrow::before,.phero .eyebrow::before{background:var(--sage)}
.on-pond .eyebrow{color:var(--sage)}
.on-pond .eyebrow::before{background:var(--sage)}

.lead{font-size:clamp(1.125rem,1.02rem + .45vw,1.35rem);line-height:1.65;font-weight:300}
.measure{max-width:44ch}
.measure-read{max-width:66ch}

/* --------------------------------------------------------------- layout --- */
.shell{width:var(--shell);margin-inline:auto}
.shell-tight{width:var(--shell-tight);margin-inline:auto}
.shell-read{width:var(--shell-read);margin-inline:auto}
section{position:relative}
.pad{padding-block:clamp(3.5rem,8vh,6.5rem)}
.pad-lg{padding-block:clamp(4.5rem,11vh,9rem)}
/* the film already ends on a long fade; a full pad on top of it reads as a hole */
/* The opener already ends on a full screen of ivory; a large pad on top of
   that reads as dead space rather than breathing room. */
.after-film{padding-top:clamp(1.35rem,3vh,2.4rem)}
.pad-sm{padding-block:clamp(2.5rem,5vh,4rem)}
.on-ink{background:var(--ink);color:var(--on-ink)}
.on-pond{background:var(--pond);color:var(--on-pond)}
.on-cream{background:var(--cream)}
.stack{display:grid;gap:1.4rem;align-content:start}
.rule{height:1px;background:var(--rule-light);border:0;margin:0}
.on-ink .rule{background:var(--rule-dark)}

/* .phero is a dark surface. It carries `on-ink` in the markup, and is named
   explicitly here as well so a hero still reads correctly if that class is
   ever dropped. Components that flip on a dark ground must list it. */

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.95rem 1.9rem;
  font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease);
  text-align:center;
}
.btn--solid{background:var(--sage-deep);color:#fff}
/* State the hover colour, do not inherit it. `.btn--solid` sets its colour at
   class specificity, which the guard rule outranks -- inheriting would hand
   the label the section's own dark text colour on a dark fill. */
.btn--solid:hover{background:var(--on-ivory);color:var(--ivory)}
.on-ink .btn--solid,.phero .btn--solid{background:var(--sage);color:var(--ink)}
.on-ink .btn--solid:hover,.phero .btn--solid:hover{background:var(--on-ink);color:var(--ink)}
.btn--ghost{border-color:currentColor;color:var(--on-ivory)}
/* The fill is an explicit token, never currentColor: currentColor resolves
   AFTER :hover changes the text colour, so a currentColor fill turns the same
   shade as the label and the button disappears. */
.btn--ghost::before{content:"";position:absolute;inset:0;background:var(--on-ivory);z-index:-1;
                    transform:translateY(101%);transition:transform .45s var(--ease)}
.btn--ghost:hover::before,.btn--ghost:focus-visible::before{transform:translateY(0)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ivory)}
.on-ink .btn--ghost,.film .btn--ghost,.phero .btn--ghost{color:var(--on-ink)}
.on-ink .btn--ghost::before,.film .btn--ghost::before,.phero .btn--ghost::before{background:var(--on-ink)}
.on-ink .btn--ghost:hover,.on-ink .btn--ghost:focus-visible,
.film .btn--ghost:hover,.film .btn--ghost:focus-visible,
.phero .btn--ghost:hover,.phero .btn--ghost:focus-visible{color:var(--ink)}
.on-pond .btn--ghost{color:var(--on-pond)}
.on-pond .btn--ghost::before{background:var(--on-pond)}
.on-pond .btn--ghost:hover{color:var(--pond)}

.link-u{
  display:inline-flex;align-items:baseline;gap:.5rem;min-height:40px;padding-top:.4rem;
  font-weight:700;font-size:.9rem;letter-spacing:.06em;color:var(--sage-deep);
  border-bottom:2px solid currentColor;padding-bottom:.15rem;
  transition:opacity .3s var(--ease)
}
/* Hover strengthens. Fading a link on hover reads as it going away, and
   it cost contrast: dimming to .7 dropped this to 4.32:1 on ivory. */
.link-u:hover{color:var(--on-ivory)}
.on-ink .link-u:hover,.phero .link-u:hover,.film .link-u:hover{color:var(--on-ink)}
.on-ink .link-u,.phero .link-u{color:var(--sage)}

/* ====================================================== NAVIGATION ======== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem max(4.5vw,1.1rem);
  color:var(--on-ink);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .55s var(--ease),backdrop-filter .55s var(--ease),
             border-color .55s var(--ease),padding .55s var(--ease);
}
.nav--settled,.nav--solid{
  background:rgba(16,13,9,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule-dark);
  padding-top:.7rem;padding-bottom:.7rem;
}
.nav__logo{display:flex;align-items:center;min-height:44px}
.nav__logo img{height:clamp(38px,4.4vw,52px);width:auto;transition:height .55s var(--ease)}
.nav--settled .nav__logo img,.nav--solid .nav__logo img{height:clamp(34px,3.6vw,42px)}

.nav__links{display:none;align-items:center;gap:clamp(1.1rem,2vw,2.1rem)}
@media(min-width:1060px){.nav__links{display:flex}}
.nav__link{
  font-size:.875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-ink);opacity:.86;padding:.7rem .1rem;position:relative;
  transition:opacity .35s var(--ease)
}
.nav__link:hover{opacity:1}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;
  background:var(--sage);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{opacity:1}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.nav__right{display:flex;align-items:center;gap:1rem}
.nav__cta{display:none}
@media(min-width:800px){.nav__cta{display:inline-flex}}
.nav .btn{min-height:46px;padding:.75rem 1.3rem;font-size:.875rem}

.burger{display:grid;gap:6px;width:46px;height:46px;place-content:center;justify-items:stretch}
@media(min-width:1060px){.burger{display:none}}
.burger span{display:block;width:26px;height:2px;background:currentColor;
             transition:transform .45s var(--ease),opacity .25s}
.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:95;background:var(--ink);color:var(--on-ink);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:6rem max(7vw,1.4rem) 2.5rem;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s linear .45s;
  overflow-y:auto;
}
.menu-open .drawer{opacity:1;visibility:visible;
  transition:opacity .45s var(--ease),visibility 0s linear 0s}
.drawer__link{
  font-size:clamp(1.6rem,6.5vw,2.3rem);font-weight:300;font-family:var(--f-display);
  padding:.5em 0;border-bottom:1px solid var(--rule-dark);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.menu-open .drawer__link{opacity:1;transform:none}
/* Keep the drawer hover state explicit so plugin styles cannot repaint it. */
.drawer__link:hover,.drawer__link:focus-visible{color:var(--sage)}
.drawer__foot{margin-top:2rem;display:grid;gap:.85rem}
.drawer__tel{font-size:1.05rem;font-weight:700;letter-spacing:.04em;color:var(--sage)}
.drawer__tel small{display:block;font-size:.72rem;font-weight:400;letter-spacing:.18em;
                   text-transform:uppercase;color:var(--on-ink-3)}

/* ====================================================== BREADCRUMBS ====== */
.crumbs{font-size:.875rem;color:var(--on-ivory-3);padding-block:1.1rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.crumbs li{display:flex;align-items:center;gap:.5rem;min-height:36px}
.crumbs li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:36px;
  border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.crumbs a:hover{color:var(--sage-deep);border-bottom-color:currentColor}
.crumbs [aria-current="page"]{color:var(--on-ivory)}
.on-ink .crumbs{color:var(--on-ink-3)}
.on-ink .crumbs a:hover{color:var(--sage)}
.on-ink .crumbs [aria-current="page"]{color:var(--on-ink)}

/* ====================================================== PAGE HERO ======== */
.phero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;
       padding-top:calc(var(--nav-h) + clamp(3rem,8vh,6rem));
       padding-bottom:clamp(3rem,8vh,6rem)}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
/* Two scrims, not one. The vertical gradient sets the mood; the horizontal one
   guarantees the text column is dark no matter what the photograph does there,
   while leaving the right-hand side of the image alone. Without it, legibility
   in the hero depends on which picture the client uploads. */
.phero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(16,13,9,.88) 0%,rgba(16,13,9,.74) 34%,
                    rgba(16,13,9,.22) 68%,rgba(16,13,9,0) 88%),
    linear-gradient(to bottom,rgba(16,13,9,.72),rgba(16,13,9,.55) 45%,var(--ink))}
/* Narrow screens: the text runs the full width, so the scrim must too. */
@media(max-width:760px){
  .phero__bg::after{background:
    linear-gradient(to bottom,rgba(16,13,9,.84),rgba(16,13,9,.76) 45%,var(--ink))}
}
/* Article hero byline. One step up from the label tier: it sits over a
   photograph, where the weakest tier has no margin left. */
.phero__meta{font-size:.85rem;color:var(--on-ink-2)}
.phero__meta time{color:inherit}
.phero__in{position:relative;z-index:1;display:grid;gap:1.5rem;justify-items:start}
.phero .lead{color:var(--on-ink-2)}
.phero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.6rem}

/* ====================================================== MENU / PRICES ==== */
.tabs{display:flex;flex-wrap:wrap;gap:.3rem .5rem;border-bottom:1px solid var(--rule-light);
      margin-bottom:2.5rem}
.on-ink .tabs{border-bottom-color:var(--rule-dark)}
.tab{
  font-size:.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-ivory-3);padding:.85rem 1rem;position:relative;min-height:48px;
  transition:color .35s var(--ease)
}
.tab[aria-selected="true"]{color:var(--on-ivory)}
.tab:hover{color:var(--on-ivory)}
.on-ink .tab{color:var(--on-ink-3)}
.on-ink .tab[aria-selected="true"],.on-ink .tab:hover{color:var(--on-ink)}
.tab::after{content:"";position:absolute;left:.4rem;right:.4rem;bottom:-1px;height:3px;
  background:var(--sage-deep);transform:scaleX(0);transition:transform .4s var(--ease)}
.on-ink .tab::after{background:var(--sage)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}

.panel[hidden]{display:none}
.panel{display:block;animation:panelIn .5s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.group{display:grid;gap:1rem;align-content:start}
.group__title{font-family:var(--f-display);font-size:1.7rem;font-weight:400}
.group__note{color:var(--on-ivory-2);font-size:.98rem;max-width:52ch}
.on-ink .group__note{color:var(--on-ink-2)}
.items{display:grid;gap:1rem}
.items--cols{display:block}
.items--cols .item{margin-bottom:1rem}
@media(min-width:820px){
  .items--cols{columns:2;column-gap:clamp(2.5rem,5vw,4.5rem)}
  .items--cols .item{break-inside:avoid;-webkit-column-break-inside:avoid}
}
.item{display:flex;align-items:baseline;gap:.6rem}
.item__name{font-weight:400}
.item__qual{color:var(--on-ivory-3);font-size:.9rem}
.on-ink .item__qual{color:var(--on-ink-3)}
.item__dots{flex:1 1 auto;min-width:1rem;border-bottom:1px dotted rgba(42,36,28,.35);
            transform:translateY(-.3em)}
.on-ink .item__dots{border-bottom-color:rgba(237,230,218,.3)}
.item__price{font-weight:700;font-size:.95rem;white-space:nowrap;
             font-variant-numeric:tabular-nums;color:var(--on-ivory)}
.on-ink .item__price{color:var(--on-ink)}
.item__sub{display:block;font-size:.9rem;color:var(--on-ivory-2);max-width:40ch;
           line-height:1.55;margin-top:.15rem}
.on-ink .item__sub{color:var(--on-ink-2)}
.item--indent .item__name{padding-left:1.1rem;color:var(--on-ivory-2)}
.on-ink .item--indent .item__name{color:var(--on-ink-2)}

/* ====================================================== TEASER CARDS ===== */
.teasers{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media(min-width:820px){.teasers{grid-template-columns:1fr 1fr}}
.teaser{display:grid;grid-template-rows:auto 1fr;gap:1.5rem;align-content:start}
.teaser__frame{position:relative;overflow:hidden;background:var(--umber);aspect-ratio:4/5}
.teaser__frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.teaser:hover .teaser__frame img,.teaser:focus-within .teaser__frame img{transform:scale(1.05)}
.teaser__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,13,9,.62),transparent 52%)}
.teaser__tag{position:absolute;left:1.2rem;bottom:1.1rem;z-index:2;color:#fff;
  font-size:.8125rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.teaser__body{display:grid;gap:1rem;align-content:start}
.teaser__body p{color:var(--on-ivory-2);max-width:44ch}

/* ====================================================== PACKAGES ========= */
.pkg{display:grid;gap:.7rem clamp(1.5rem,3.5vw,3.5rem);grid-template-columns:1fr;
     padding-block:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--rule-dark);
     align-items:baseline;transition:background-color .5s var(--ease)}
.pkg:last-child{border-bottom:1px solid var(--rule-dark)}
@media(min-width:820px){.pkg{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto}}
.pkg:hover{background:rgba(237,230,218,.04)}
.pkg__name{font-family:var(--f-display);font-weight:300;
           font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.08}
.pkg__name small{font-family:var(--f-sans);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-3);
  display:block;margin-top:.35rem}
.pkg__what{color:var(--on-ink-2);max-width:42ch}
.pkg__meta{display:flex;align-items:baseline;gap:1.4rem;white-space:nowrap}
.pkg__dur{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
          color:var(--sage)}
.pkg__price{font-family:var(--f-display);font-size:clamp(1.5rem,2.4vw,2.1rem);
            font-variant-numeric:tabular-nums}

/* ====================================================== CAROUSEL ========= */
.quotes{position:relative}
.quotes__view{overflow:hidden}
.quotes__track{display:flex;transition:transform .75s var(--ease)}
.quotes__slide{flex:0 0 100%;padding:0 clamp(.5rem,3vw,2rem);
               display:grid;justify-items:center;gap:1.5rem;text-align:center}
@media(min-width:1000px){
  .quotes--multi .quotes__slide{flex-basis:50%}
}
.stars{display:flex;gap:.4rem;color:var(--sage)}
.stars svg{width:15px;height:15px;fill:currentColor}
.quote{font-family:var(--f-display);font-weight:300;font-style:italic;
       font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.35;max-width:26ch;text-wrap:balance}
.quote__who{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
            color:var(--sage)}
.quote__who span{display:block;font-weight:400;letter-spacing:.1em;color:var(--on-pond);
                 opacity:.75;margin-top:.3rem}
.quotes__ui{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2.5rem}
.quotes__btn{width:52px;height:52px;border:2px solid currentColor;border-radius:50%;
  display:grid;place-content:center;opacity:.6;transition:opacity .3s var(--ease)}
.quotes__btn:hover:not(:disabled){opacity:1}
.quotes__btn:disabled{opacity:.22;cursor:default}
.quotes__btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.quotes__dots{display:flex;gap:.6rem}
.quotes__dot{width:38px;height:38px;display:grid;place-content:center}
.quotes__dot i{display:block;width:9px;height:9px;border-radius:50%;background:currentColor;
  opacity:.32;transition:opacity .3s,transform .3s}
.quotes__dot[aria-current="true"] i{opacity:1;transform:scale(1.25)}
.quote--todo{border:2px dashed rgba(241,236,227,.35);padding:2rem 1.5rem;width:100%;
             max-width:32rem;border-radius:2px}
.quote--todo p{font-family:var(--f-sans);font-style:normal;font-size:.95rem;
               color:var(--on-pond);opacity:.85;max-width:34ch}

/* ====================================================== FAQ ============== */
.faq{display:grid;gap:0;border-top:1px solid var(--rule-light)}
.on-ink .faq{border-top-color:var(--rule-dark)}
.faq__item{border-bottom:1px solid var(--rule-light)}
.on-ink .faq__item{border-bottom-color:var(--rule-dark)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;text-align:left;padding:1.35rem .25rem;min-height:60px;
  font-size:1.06rem;font-weight:700;line-height:1.45;transition:color .3s var(--ease)}
.faq__q:hover{color:var(--sage-deep)}
.on-ink .faq__q:hover{color:var(--sage)}
.faq__icon{flex:none;width:22px;height:22px;position:relative;margin-top:.3rem}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transition:transform .4s var(--ease)}
.faq__icon::before{width:16px;height:2px;transform:translate(-50%,-50%)}
.faq__icon::after{width:2px;height:16px;transform:translate(-50%,-50%)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 3rem 1.5rem .25rem;color:var(--on-ivory-2);max-width:68ch}
.on-ink .faq__a p{color:var(--on-ink-2)}
.flag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--flag);color:var(--ink);padding:.35em .7em;
  margin-bottom:.5rem}
.flag+em{display:block;font-style:normal;color:var(--on-ivory-3);font-size:.92rem}
.on-ink .flag+em{color:var(--on-ink-3)}

/* ====================================================== FORM ============= */
.form{display:grid;gap:1.5rem}
.form__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem}
/* a direct grid child stretches; the submit should match every other button */
.form>.btn{justify-self:start}
@media(max-width:560px){.form>.btn{justify-self:stretch}}
.form__req{font-size:.875rem;color:var(--on-ink-3)}
.form__row{display:grid;gap:1.5rem}
@media(min-width:620px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.5rem}
.field label{font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
             color:var(--on-ink-3)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--on-ink);background:rgba(237,230,218,.05);
  border:1px solid var(--rule-dark);border-radius:2px;padding:.9rem 1rem;width:100%;
  min-height:52px;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.field textarea{min-height:7rem;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{background:rgba(237,230,218,.08)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sage);background:rgba(237,230,218,.1)}
/* The placeholder is doing the label's work here, so it is set at a real
   contrast ratio (7.3:1) rather than the usual washed-out grey — but still
   lighter than an entered value (15.6:1), so a filled field still reads as filled. */
.field ::placeholder{color:var(--on-ink-3);opacity:1}
.field select.is-empty{color:var(--on-ink-3)}
.field select.is-empty option{color:var(--on-ink)}
.field select option{background:var(--ink);color:var(--on-ink)}
.field--err input,.field--err textarea{border-color:var(--petal)}
.field__err{font-size:.85rem;color:var(--petal);min-height:1.2em}
.form__consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.9rem;
               color:var(--on-ink-2);max-width:56ch}
.form__consent input{width:22px;height:22px;min-height:0;flex:none;margin-top:.15rem;accent-color:var(--sage)}
.form__status{font-size:.95rem;min-height:1.4em}
.form__status--ok{color:var(--sage);font-weight:700}
.form__status--bad{color:var(--petal);font-weight:700}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ====================================================== CONTACT ========== */
.map{position:relative;width:100%;aspect-ratio:21/9;min-height:280px;max-height:460px;
     background:var(--umber);border:1px solid var(--rule-dark)}
@media(max-width:700px){.map{aspect-ratio:4/3;max-height:none}}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.78) contrast(1.03)}
.detail{display:grid;gap:.35rem;padding-block:1.35rem;border-top:1px solid var(--rule-dark)}
.detail:first-child{border-top:0;padding-top:0}
.detail__k{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
           color:var(--on-ink-3)}
.detail__v{font-size:1.2rem;line-height:1.55}
.detail__v a{display:inline-block;min-height:40px;border-bottom:1px solid var(--rule-dark);transition:color .3s,border-color .3s}
.detail__v a:hover{color:var(--sage);border-bottom-color:var(--sage)}
.hours{display:grid;gap:.45rem;margin-top:.2rem}
.hours__row{display:flex;align-items:baseline;gap:.75rem;font-size:1.02rem}
.hours__d{color:var(--on-ink-2);min-width:11.5rem}
.hours__t{font-weight:700;font-variant-numeric:tabular-nums}
.hours__row--closed .hours__t{font-weight:400;color:var(--on-ink-3)}

/* ====================================================== BLOG ============= */
.posts{display:grid;gap:clamp(1.8rem,3.5vw,2.75rem);grid-template-columns:1fr}
@media(min-width:700px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.posts{grid-template-columns:repeat(3,1fr)}}
.card{display:grid;grid-template-rows:auto 1fr;gap:1.1rem;align-content:start}
.card__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--cream)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{display:grid;gap:.65rem;align-content:start}
.card__meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.8125rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-ivory-3)}
.card__cat{color:var(--sage-deep)}
.card__title{font-family:var(--f-display);font-size:1.55rem;font-weight:400;line-height:1.2}
.card a.card__title:hover{color:var(--sage-deep)}
.card__ex{color:var(--on-ivory-2);font-size:.98rem}
.feat{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;align-items:center;
      margin-bottom:clamp(3rem,7vw,5rem)}
@media(min-width:900px){.feat{grid-template-columns:1.15fr 1fr}}
.feat__media{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.feat__media img{width:100%;height:100%;object-fit:cover}
.feat__title{font-family:var(--f-display);font-size:clamp(1.9rem,3.6vw,3rem);
             font-weight:300;line-height:1.08}

/* article */
.article{display:grid;gap:1.5rem}
.article p,.article ul,.article ol{max-width:68ch}
.article h2{font-family:var(--f-display);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:400;
            line-height:1.15;margin-top:1.4rem}
.article h3{font-size:1.2rem;font-weight:700;line-height:1.4;margin-top:.8rem}
.article ul{display:grid;gap:.6rem;padding-left:1.3rem;list-style:disc}
.article ol{display:grid;gap:.6rem;padding-left:1.4rem;list-style:decimal}
.article li{padding-left:.3rem}
.article a{color:var(--sage-deep);border-bottom:1px solid currentColor}
.article blockquote{border-left:3px solid var(--sage-deep);padding-left:1.4rem;
  font-family:var(--f-display);font-size:1.3rem;font-style:italic;color:var(--on-ivory-2)}

/* ====================================================== FOOTER =========== */
.foot{background:var(--ink);color:var(--on-ink)}
.foot__grid{display:grid;gap:2.5rem;grid-template-columns:1fr;padding-block:clamp(3rem,6vh,4.5rem)}
@media(min-width:760px){.foot__grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot__logo img{height:52px;width:auto;margin-bottom:1.2rem}
.foot h2{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
         color:var(--on-ink-3);margin-bottom:1rem}
.foot ul{display:grid;gap:.35rem}
.foot li a,.foot li{display:inline-flex;align-items:center;min-height:40px}
.foot a:hover{color:var(--sage)}
.foot__bar{border-top:1px solid var(--rule-dark);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-size:.85rem;color:var(--on-ink-3)}

/* ====================================================== REVEALS ========== */
.js [data-reveal]{opacity:0;transform:translateY(16px)}
.js [data-reveal].in{opacity:1;transform:none;
  transition:opacity .9s var(--ease-soft),transform .9s var(--ease)}
.js [data-reveal].in[data-delay="1"]{transition-delay:.09s}
.js [data-reveal].in[data-delay="2"]{transition-delay:.18s}
.js [data-reveal].in[data-delay="3"]{transition-delay:.27s}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   THE FILM — homepage only.
   Shortened to 220vh so a visitor reaches real content in about two screens.
   The drop's ripple opens into the lotus at its own epicentre; the lotus is
   scrubbed by scroll, not played, so the flower opens at the visitor's pace.
   A Book link floats over the whole sequence so nobody is ever trapped in it.
   ========================================================================== */
.film{position:relative;height:220vh;background:var(--ink)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
       background:var(--ink);isolation:isolate}
.layer{position:absolute;inset:0;will-change:transform,opacity,filter;transform:translateZ(0)}
/* If the video never loads — blocked codec, offline, a policy that stops it —
   the poster still paints here, so the hero is an image rather than a hole. */
.layer--hero{background:var(--ink) center/cover no-repeat}
.layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.layer--lotus{opacity:0;
  -webkit-mask-image:radial-gradient(circle at 52% 48%,#000 0%,#000 var(--m1,0%),transparent var(--m2,1%));
          mask-image:radial-gradient(circle at 52% 48%,#000 0%,#000 var(--m1,0%),transparent var(--m2,1%))}
.bind{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(60% 70% at 52% 48%,rgba(216,150,70,.55),rgba(120,64,22,.35) 55%,rgba(16,13,9,.2) 100%)}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%,transparent 36%,rgba(16,13,9,.66) 100%),
             linear-gradient(to bottom,rgba(16,13,9,.62) 0%,transparent 26%,transparent 58%,rgba(16,13,9,.82) 100%)}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
       animation:grain 5.4s steps(1) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}      12.5%{transform:translate(-2%,-3%)}
  25%{transform:translate(-4%,2%)}  37.5%{transform:translate(2%,-4%)}
  50%{transform:translate(-1%,3%)}  62.5%{transform:translate(3%,1%)}
  75%{transform:translate(-3%,-1%)} 87.5%{transform:translate(1%,2%)}
  100%{transform:translate(0,0)}}
.exit{position:absolute;inset:0;pointer-events:none;background:var(--ivory);opacity:0}

.film-type,.lotus-type{position:absolute;inset:0;z-index:3;display:grid;
  align-content:end;justify-items:center;text-align:center;
  padding:0 max(6vw,1.4rem) clamp(4rem,16vh,9rem);pointer-events:none}
.film-type>*,.lotus-type>*{pointer-events:auto;position:relative}
/* The opening titles sit over a moving photograph whose brightest moment is
   the lit ripple, where a text-shadow alone is not enough. This scrim rides
   under the words only -- the frame around it stays untouched. */
.film-type::before{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;
  background:radial-gradient(115% 82% at 50% 88%,
             rgba(16,13,9,.68), rgba(16,13,9,.34) 52%, rgba(16,13,9,0) 78%);
  pointer-events:none}
/* The wordmark is set in type rather than placed as the logo image: the logo
   already sits in the fixed navigation, and the same mark twice on one screen
   reads as a mistake. Type also scales cleanly and stays crisp at any size. */
.open__title{
  display:grid;justify-items:center;gap:clamp(.55rem,1.3vw,1rem);
  margin-bottom:clamp(1.1rem,2.6vw,1.8rem);
}
.open__lead{
  font-family:var(--f-display);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,3.6vw,2.9rem);
  line-height:1.15;color:rgba(237,230,218,.9);
  text-shadow:0 2px 34px rgba(16,13,9,.75);
}
.open__name{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(2.35rem,7.4vw,6.2rem);
  line-height:.98;letter-spacing:.01em;
  color:var(--on-ink);
  text-shadow:0 2px 60px rgba(16,13,9,.7);
}
.open__sub{
  font-family:var(--f-sans);font-weight:400;
  font-size:clamp(.78rem,1.35vw,1.02rem);
  letter-spacing:.4em;text-transform:uppercase;
  color:rgba(237,230,218,.86);
  padding-left:.4em;                 /* optical: offset the trailing tracking */
  text-shadow:0 1px 24px rgba(16,13,9,.8);
}
.open__line{font-family:var(--f-display);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,2.3vw,1.9rem);color:var(--on-ink);
  text-shadow:0 2px 40px rgba(16,13,9,.7)}
.lotus-type{opacity:0;padding-bottom:clamp(2.25rem,7vh,4.5rem)}
.lotus-type::before{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(to top,rgba(12,20,16,.85),rgba(12,20,16,.45) 42%,transparent);
  pointer-events:none}
.lotus-type__eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);margin-bottom:clamp(.8rem,2vw,1.3rem)}
.lotus-type__title{font-family:var(--f-display);font-weight:300;
  font-size:clamp(2rem,5.6vw,4.4rem);line-height:1.05;color:var(--on-ink);
  text-shadow:0 2px 50px rgba(16,13,9,.6)}
.lotus-type__title .italic{color:var(--petal)}

/* the escape hatch: always available, never part of the choreography */
.film-book{position:absolute;right:max(4.5vw,1.1rem);bottom:clamp(1.5rem,4vh,2.5rem);z-index:6}
.film-skip{position:absolute;left:max(4.5vw,1.1rem);bottom:clamp(1.5rem,4vh,2.5rem);z-index:6;
  font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-2);border-bottom:2px solid currentColor;padding-bottom:.2rem;
  transition:color .3s}
.film-skip:hover{color:var(--sage)}

@media(max-width:760px){
  .film{height:190vh}
  /* Full-bleed on a phone. Portrait-cropped encodes are served here rather
     than the 2.33:1 masters, so the pixels are spent on what is visible
     instead of being cropped away. */
  .layer video{object-position:50% 46%}
  .layer--lotus{-webkit-mask-image:none;mask-image:none}
  .film-type,.lotus-type{padding-bottom:16vh}
  .film-book{left:max(4.5vw,1.1rem);right:auto;bottom:1.2rem}
  .film-skip{right:max(4.5vw,1.1rem);left:auto;bottom:1.2rem;
             display:flex;align-items:center;height:52px}
}

/* motion off: two held frames with their own words, nothing pinned */
@media(prefers-reduced-motion:reduce){
  .film{height:auto}
  .stage{position:relative;height:auto;display:grid}
  .layer{position:relative;inset:auto}
  .layer--hero{order:1} .film-type{order:2}
  .layer--lotus{order:3} .lotus-type{order:4}
  .layer video{position:relative;inset:auto;width:100%;height:auto;
               aspect-ratio:1470/630;transform:none}
  .layer--lotus{opacity:1;-webkit-mask-image:none;mask-image:none}
  .film-type,.lotus-type{position:relative;inset:auto;opacity:1;
    padding-block:clamp(2.5rem,7vh,4.5rem)}
  .lotus-type::before,.vignette,.grain,.bind,.exit{display:none}
  .film-book,.film-skip{position:static;margin:1rem auto 0}
}
.no-motion .film{height:auto}
.no-motion .stage{position:relative;height:auto;display:grid}
.no-motion .layer{position:relative;inset:auto}
.no-motion .layer--hero{order:1} .no-motion .film-type{order:2}
.no-motion .layer--lotus{order:3} .no-motion .lotus-type{order:4}
.no-motion .layer video{position:relative;inset:auto;width:100%;height:auto;
                        aspect-ratio:1470/630;transform:none}
.no-motion .layer--lotus{opacity:1;-webkit-mask-image:none;mask-image:none}
.no-motion .film-type,.no-motion .lotus-type{position:relative;inset:auto;opacity:1;
  padding-block:clamp(2.5rem,7vh,4.5rem)}
.no-motion .lotus-type::before,.no-motion .vignette,.no-motion .grain,
.no-motion .bind,.no-motion .exit{display:none}
.no-motion .film-book,.no-motion .film-skip{position:static;margin:1rem auto 0}
.no-motion .nav{position:sticky}

/* ====================================================== GALLERY ========= */
/* A true mosaic: CSS columns, so every image keeps its own proportions and
   the wall composes itself. Cropping everything to a grid of squares would
   throw away exactly what makes a set of photographs worth looking at. */
.mosaic{columns:2;column-gap:clamp(.5rem,1.4vw,1rem)}
@media(min-width:700px){.mosaic{columns:3}}
@media(min-width:1200px){.mosaic{columns:4}}
.mosaic__item{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(.5rem,1.4vw,1rem);
  position:relative;display:block;width:100%;
  background:var(--cream);overflow:hidden;
  border:0;padding:0;cursor:zoom-in;
}
.mosaic__item img{width:100%;height:auto;display:block;transition:transform 1s var(--ease),opacity .5s}
.mosaic__item::after{
  content:"";position:absolute;inset:0;background:rgba(16,13,9,.28);
  opacity:0;transition:opacity .4s var(--ease)
}
.mosaic__item:hover img,.mosaic__item:focus-visible img{transform:scale(1.04)}
.mosaic__item:hover::after,.mosaic__item:focus-visible::after{opacity:1}
.mosaic__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.4rem 1rem .9rem;color:#fff;font-size:.875rem;line-height:1.4;
  background:linear-gradient(to top,rgba(16,13,9,.8),transparent);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);
  text-align:left;
}
.mosaic__item:hover .mosaic__cap,.mosaic__item:focus-visible .mosaic__cap{opacity:1;transform:none}

.gallery-note{
  border:2px dashed var(--rule-light);padding:clamp(1.25rem,3vw,2rem);
  display:grid;gap:.6rem;justify-items:start;margin-bottom:clamp(2rem,4vw,3rem)
}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(10,8,6,.96);
  display:grid;grid-template-rows:auto 1fr auto;gap:1rem;padding:1rem;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s
}
.lb.is-open{opacity:1;visibility:visible;
  transition:opacity .3s var(--ease),visibility 0s linear 0s}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--on-ink)}
.lb__count{font-size:.875rem;letter-spacing:.14em;color:var(--on-ink-3);font-variant-numeric:tabular-nums}
.lb__stage{display:grid;place-items:center;min-height:0}
.lb__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb__cap{color:var(--on-ink-2);font-size:.9375rem;text-align:center;min-height:1.4em;padding-bottom:.5rem}
.lb__btn{
  width:52px;height:52px;display:grid;place-content:center;border-radius:50%;
  border:2px solid var(--rule-dark);color:var(--on-ink);
  transition:border-color .3s,background-color .3s
}
.lb__btn:hover{border-color:var(--sage);background:rgba(152,188,135,.12)}
.lb__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
.lb__nav--prev{left:clamp(.5rem,2vw,1.5rem)}
.lb__nav--next{right:clamp(.5rem,2vw,1.5rem)}

/* ====================================================== READ MORE ======= */
.card__more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.35rem;
  justify-self:start;                /* hit area matches the text, not the card */
  font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage-deep);min-height:40px
}
.card__more svg{width:15px;height:10px;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .35s var(--ease)}
.card:hover .card__more svg,.card__more:hover svg{transform:translateX(5px)}

/* the article, its share link and the post nav are one block, not three
   sections separated by a full section rhythm */
.article-body{padding-bottom:clamp(1.75rem,3.5vh,2.75rem)}
.share-row{padding-block:0 clamp(2.25rem,4.5vh,3.25rem)}

/* ====================================================== POST NAV ======== */
.postnav{
  display:grid;gap:1px;background:var(--rule-light);
  border-block:1px solid var(--rule-light);grid-template-columns:1fr
}
@media(min-width:700px){.postnav{grid-template-columns:1fr 1fr}}
.postnav__link{
  background:var(--ivory);padding:clamp(1.5rem,3vw,2.25rem);
  display:grid;gap:.6rem;align-content:center;min-height:120px;
  transition:background-color .4s var(--ease)
}
.postnav__link:hover{background:var(--cream)}
.postnav__dir{
  display:flex;align-items:center;gap:.6rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ivory-3)
}
.postnav__dir svg{width:15px;height:10px;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .35s var(--ease)}
.postnav__link:hover .postnav__dir svg{transform:translateX(4px)}
.postnav__link--prev:hover .postnav__dir svg{transform:translateX(-4px)}
.postnav__title{font-family:var(--f-display);font-size:1.25rem;font-weight:400;line-height:1.25}
.postnav__link--next{text-align:left}
@media(min-width:700px){
  .postnav__link--next{text-align:right;justify-items:end}
  .postnav__link--next .postnav__dir{flex-direction:row-reverse}
}
.postnav__empty{background:var(--ivory)}