﻿/* Maison Aura — Luxury Beauty Editorial. See DESIGN.md */
:root{
  --ivory:#F5F1EA;--blush:#E9D6CE;--stone:#D8CFC4;--brown:#7A5E4E;--ink:#1C1A18;--ink-2:#4A433D;
  --rule:rgba(28,26,24,.16);--rule-2:rgba(28,26,24,.32);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:clamp(20px,5vw,72px);--max:1440px;--gut:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hd:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--ivory);color:var(--ink);font:300 1rem/1.7 var(--sans);letter-spacing:.005em;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,blockquote{margin:0}
::selection{background:var(--blush)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:1200;background:var(--ink);color:var(--ivory);padding:12px 16px;font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:48px}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:square;flex:none}

/* ---------- type ---------- */
.lbl{font:500 .6875rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.disp{font:300 clamp(2.75rem,6.4vw,6.25rem)/1.02 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em;text-wrap:balance}
.disp-s{font-size:clamp(3rem,8vw,7.5rem)}
.h2{font:300 clamp(2rem,3.6vw,3.5rem)/1.08 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.015em;text-wrap:balance}
.h3{font:300 clamp(1.625rem,2.2vw,2.25rem)/1.12 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.sec-sub,.ph-sub,.hero-sub{font:300 italic clamp(1.25rem,1.8vw,1.5rem)/1.35 var(--serif);color:var(--ink-2);max-width:32em;text-wrap:pretty}
.cap{font:400 .8125rem/1.5 var(--sans);color:var(--ink-2);margin-top:12px;letter-spacing:.02em}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 .875rem/1.2 var(--sans);letter-spacing:.02em;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--rule-2);transition:text-decoration-color .3s,color .3s}
.tlink:hover{color:var(--brown);text-decoration-color:currentColor}
.tlink:active{opacity:.7}
.tlink .ic{transition:transform .4s var(--ease)}
.tlink:hover .ic{transform:translateX(4px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 28px;border:1px solid var(--ink);font:500 .6875rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;transition:background-color .35s var(--ease),color .35s var(--ease),transform .15s}
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:transparent;color:var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--ivory)}
.btn:active{transform:translateY(1px)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:900;background:rgba(245,241,234,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.hd-in{max-width:var(--max);margin:0 auto;padding:0 var(--m);height:var(--hd);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hd-l,.hd-r{display:flex;gap:28px;font:400 .75rem/1 var(--sans);letter-spacing:.08em}
.hd-r{justify-content:flex-end}
.hd-l a,.hd-r a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(50% + 10px)/0 1px no-repeat;transition:background-size .4s var(--ease),color .3s}
.hd-l a:hover,.hd-r a:hover,.hd-l a[aria-current],.hd-r a[aria-current]{background-size:100% 1px}
.hd-l a:hover,.hd-r a:hover{color:var(--brown)}
.hd-count{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--brown)}
.hd-count::before{content:"("}.hd-count::after{content:")"}
.wm{font:400 .875rem/1 var(--sans);letter-spacing:.48em;margin-right:-.48em;text-transform:uppercase;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.wm span+span{margin-left:.7em}
.hd-menu{display:none;font:400 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;min-height:44px;min-width:44px;text-align:left}
@media (max-width:900px){
  .hd-in{grid-template-columns:1fr auto 1fr}
  .hd-menu{display:block;justify-self:start}
  .hd-l,.hd-j{display:none}
  .wm{font-size:.75rem;letter-spacing:.38em;margin-right:-.38em}
  .hd-r a{text-transform:uppercase;letter-spacing:.14em}
}

/* ---------- mobile menu ---------- */
.menu{position:fixed;inset:0;z-index:1100;background:var(--ivory);display:flex;flex-direction:column;padding:0 var(--m) 24px;overflow-y:auto}
.menu[hidden]{display:none}
.js .menu.is-open{animation:menuIn .5s var(--ease)}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:var(--hd);border-bottom:1px solid var(--rule)}
.wm-static{font-size:.75rem;letter-spacing:.38em}
.menu-x{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:400 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.menu-body{display:grid;grid-template-columns:1fr;gap:32px;padding:32px 0;flex:1}
.menu-links a{display:flex;align-items:baseline;gap:16px;padding:10px 0;font:300 clamp(2.5rem,11vw,4.5rem)/1.05 var(--serif);letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--rule)}
.menu-links span{font:300 italic 1rem/1 var(--serif);color:var(--brown);width:2em}
.menu-links a:hover,.menu-links a:focus-visible{color:var(--brown)}
.menu-fig{width:46%;max-width:240px;justify-self:end}
.menu-foot{font:400 .75rem/1.5 var(--sans);letter-spacing:.06em;color:var(--ink-2)}
@media (min-width:700px){.menu-body{grid-template-columns:1.4fr 1fr;align-items:end}.menu-fig{width:100%}}

/* ---------- layout helpers ---------- */
main{display:block}
.sec{max-width:var(--max);margin:0 auto;padding:clamp(96px,12vw,176px) var(--m) 0}
.sec-hd{display:grid;gap:20px;max-width:46rem;margin-bottom:clamp(48px,6vw,88px)}
.sec-hd-r{margin-left:auto;text-align:left;max-width:40rem}

/* ---------- hero ---------- */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(40px,7vw,104px) var(--m) 0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:end}
.hero-txt{grid-column:1/7;display:grid;gap:28px;padding-bottom:clamp(24px,6vw,96px)}
.hero-txt .disp{font-size:clamp(2.9rem,6.2vw,6rem)}
.hero-sub{max-width:24em}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:8px}
.hero-fig{grid-column:8/13}
.hero-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92)}
.hero-facts{grid-column:1/13;display:flex;justify-content:space-between;gap:16px;margin-top:clamp(40px,6vw,72px);padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:500 .6875rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:28px}
  .hero-txt,.hero-fig,.hero-facts{grid-column:1}
  .hero-fig{order:-1;margin:0 0 32px 18%}
  .hero-txt{padding-bottom:0}
  .hero-facts{flex-direction:column;gap:10px;margin-top:48px}
}

/* ---------- ritual ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.step{border-top:1px solid var(--rule);padding-top:20px}
.step:nth-child(2){margin-top:72px}.step:nth-child(3){margin-top:144px}.step:nth-child(4){margin-top:216px}
.step-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92)}
.step-fig{margin-bottom:24px}
.step-n{font:300 italic 1.375rem/1 var(--serif);color:var(--brown);margin-bottom:8px}
.step-h{font:300 2rem/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:12px}
.step-p{color:var(--ink-2);max-width:22em}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr;row-gap:64px}.step:nth-child(n){margin-top:0}.step:nth-child(even){margin-top:96px}}
@media (max-width:600px){
  .steps{grid-template-columns:1fr;row-gap:56px}
  .step:nth-child(even){margin-top:0}
  .step-fig{width:72%}
  .step:nth-child(even) .step-fig{margin-left:auto}
}

/* ---------- catalog tiles ---------- */
.grid-tiles{display:grid;border-top:1px solid var(--rule)}
.grid-2{grid-template-columns:1fr 1fr}
.tile{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 28px 22px;border-bottom:1px solid var(--rule);transition:background-color .5s var(--ease)}
.grid-2 .tile:nth-child(odd){border-right:1px solid var(--rule);padding-left:0}
.grid-2 .tile:nth-child(even){padding-right:0}
.tile.is-added{background:linear-gradient(var(--blush),var(--blush)) no-repeat;}
.grid-2 .tile.is-added:nth-child(odd){padding-left:20px}
.grid-2 .tile.is-added:nth-child(even){padding-right:20px}
.tile[hidden]{display:none}
.tile-top{display:flex;justify-content:space-between;gap:12px;font:500 .6875rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.tile-no{color:var(--ink);font-variant-numeric:tabular-nums}
.tile-con{color:var(--brown);text-align:right}
.tile-name{font:300 clamp(1.625rem,2.1vw,2.125rem)/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance;margin-top:18px}
.tile-note{font:300 italic 1.0625rem/1.45 var(--serif);color:var(--ink-2);max-width:24em}
.tile-spec{display:flex;gap:32px;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
.tile-spec div{display:grid;gap:2px}
.tile-spec dt{font:500 .625rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.tile-spec dd{font:400 .9375rem/1.4 var(--sans);font-variant-numeric:tabular-nums lining-nums}
.tile-add{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;min-height:44px;font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:text-decoration-color .3s,color .3s}
.tile-add-ic{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink);transition:background-color .3s,color .3s}
.tile-add-ic .ic{grid-area:1/1;width:12px;height:12px;transition:opacity .3s,transform .4s var(--ease)}
.tile-add-ic .ic:last-child{opacity:0;transform:rotate(-90deg)}
.tile-add:hover{text-decoration-color:currentColor}
.tile-add:hover .tile-add-ic{background:var(--ink);color:var(--ivory)}
.tile-add:active .tile-add-ic{transform:scale(.94)}
.tile-add[aria-pressed="true"] .tile-add-ic{background:var(--ink);color:var(--ivory)}
.tile-add[aria-pressed="true"] .ic:first-child{opacity:0;transform:rotate(90deg)}
.tile-add[aria-pressed="true"] .ic:last-child{opacity:1;transform:none}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .grid-2 .tile:nth-child(n){border-right:0;padding-left:0;padding-right:0}
  .grid-2 .tile.is-added:nth-child(n){padding-left:16px;padding-right:16px}
}

/* teaser */
.cat-tease{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
.tease-side{grid-column:1/5;display:grid;gap:22px;position:sticky;top:calc(var(--hd) + 32px)}
.tease-fig{width:78%}
.tease-fig img,.cat-fig img{width:100%;aspect-ratio:2/3;object-fit:cover;filter:saturate(.92)}
.cat-tease .grid-tiles{grid-column:6/13}
@media (max-width:900px){
  .cat-tease{grid-template-columns:1fr}
  .tease-side,.cat-tease .grid-tiles{grid-column:1}
  .tease-side{position:static;margin-bottom:48px}
  .tease-fig{width:56%;margin-left:auto;order:3}
  .tease-side .tlink{order:4}
}

/* ---------- studio essay ---------- */
.essay-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:clamp(40px,6vw,96px);align-items:start}
.essay-grid img{width:100%;object-fit:cover;filter:saturate(.92)}
.e1{grid-column:1/9}.e1 img{aspect-ratio:3/2}
.e2{grid-column:10/13;margin-top:clamp(80px,14vw,220px)}.e2 img{aspect-ratio:2/3}
.e-txt{grid-column:2/6;font:300 clamp(1.25rem,1.7vw,1.5rem)/1.5 var(--serif);text-wrap:pretty}
.e3{grid-column:7/10}.e3 img{aspect-ratio:1/1}
.e4{grid-column:10/13;margin-top:-80px}.e4 img{aspect-ratio:4/5}
.essay-more{margin-top:48px;display:flex;justify-content:flex-end}
@media (max-width:760px){
  .essay-grid{grid-template-columns:repeat(6,1fr);row-gap:40px}
  .e1{grid-column:1/7}.e2{grid-column:2/7;margin-top:0}
  .e-txt{grid-column:1/7}
  .e3{grid-column:1/5}.e4{grid-column:3/7;margin-top:0}
  .essay-more{justify-content:flex-start}
}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.mate-fig{position:relative;overflow:hidden;outline-offset:4px}
.mate-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.88);transition:transform 1.2s var(--ease),filter .6s}
.mate-bio{position:absolute;left:0;right:0;bottom:0;padding:20px;background:var(--ivory);font:300 italic 1.0625rem/1.45 var(--serif);color:var(--ink);display:grid;gap:8px;transform:translateY(101%);transition:transform .6s var(--ease)}
.mate-bio .lbl{font-style:normal}
.mate-fig:hover .mate-bio,.mate-fig:focus-visible .mate-bio,.mate-fig:focus-within .mate-bio{transform:none}
.mate-fig:hover img{transform:scale(1.03);filter:saturate(1)}
.mate-name{font:300 1.625rem/1.15 var(--serif);margin-top:18px;letter-spacing:-.01em}
.mate-focus{font:500 .6875rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brown);margin-top:6px}
.only-touch{display:none}
@media (hover:none),(max-width:900px){
  .only-hover{display:none}.only-touch{display:inline}
  .team{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--m) * -1);padding:0 var(--m) 12px;scroll-padding:0 var(--m);scrollbar-width:none;overscroll-behavior-x:contain}
  .team::-webkit-scrollbar{display:none}
  .mate{scroll-snap-align:start}
  .mate-bio{position:static;transform:none;padding:14px 0 0;background:none;font-size:1rem;color:var(--ink-2)}
  .mate-bio .lbl{display:none}
  .mate-name{margin-top:10px}
}

/* ---------- philosophy ---------- */
.philo{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:56px;align-items:start}
.philo-head{grid-column:1/6;display:grid;gap:20px}
.pull{grid-column:1/13;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:clamp(40px,6vw,80px) 0}
.pull p{font:300 italic clamp(2rem,4.4vw,4.25rem)/1.12 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.015em;max-width:20em;text-wrap:balance}
.pull footer{margin-top:24px;font:500 .6875rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.philo-body{grid-column:2/9;columns:2;column-gap:48px;font-size:1.0625rem}
.philo-body p{margin-bottom:1.1em;break-inside:avoid-column;text-wrap:pretty}
.dropcap::first-letter{float:left;font:300 4.6em/.82 var(--serif);margin:.06em .1em 0 0;color:var(--brown)}
.philo-fig{grid-column:10/13}
.philo-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9)}
@media (max-width:900px){
  .philo{grid-template-columns:1fr}
  .philo-head,.pull,.philo-body,.philo-fig{grid-column:1}
  .philo-body{columns:1}
  .philo-fig{width:62%;margin-left:auto}
}

/* ---------- book section ---------- */
.book-sec{padding-bottom:0}
.book-in{background:var(--blush);padding:clamp(48px,7vw,112px) clamp(24px,6vw,96px);display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:end}
.book-l{display:grid;gap:24px}
.book-facts{display:grid;border-top:1px solid var(--rule-2)}
.book-facts div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule-2)}
.book-facts dt{font:500 .6875rem/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.book-facts dd{font:300 1rem/1.6 var(--sans);font-variant-numeric:tabular-nums}
@media (max-width:900px){.book-in{grid-template-columns:1fr}.book-facts div{grid-template-columns:6em 1fr}}

/* ---------- footer ---------- */
.ft{margin-top:clamp(96px,12vw,176px);border-top:1px solid var(--rule)}
.ft-in{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,96px) var(--m) 32px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:56px}
.ft-news{grid-column:1/6;display:grid;gap:18px;align-content:start}
.ft-h{font:300 clamp(1.5rem,2.2vw,2rem)/1.2 var(--serif);text-wrap:balance;max-width:16em}
.field-line{display:flex;border-bottom:1px solid var(--ink);margin-top:8px}
.field-line input{flex:1;min-width:0;min-height:48px;border:0;background:transparent;font:300 1rem/1 var(--sans);color:var(--ink);padding:0}
.field-line input::placeholder{color:#7d746c}
.field-line input:focus{outline:0}
.field-line:focus-within{border-bottom-width:2px;margin-bottom:-1px}
.news-btn{font:500 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;min-height:48px;padding:0 0 0 16px;transition:color .3s}
.news-btn:hover{color:var(--brown)}
.err{font:400 .8125rem/1.4 var(--sans);color:#8A3B2E;min-height:1.4em;margin-top:6px}
.demo-note{font:400 .75rem/1.4 var(--sans);color:var(--ink-2);letter-spacing:.02em}
.news-ok{font:300 italic 1.25rem/1.4 var(--serif);color:var(--brown);border-top:1px solid var(--rule);padding-top:16px}
.ft-cols{grid-column:7/13;display:grid;grid-template-columns:repeat(2,1fr);gap:40px var(--gut);font-size:.9375rem;line-height:1.75}
.ft-cols .lbl{margin-bottom:10px}
.ft-links a{text-decoration:none;display:inline-block;padding:2px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.ft-links a:hover{background-size:100% 1px}
.ft-mark{grid-column:1/13;font:300 clamp(3rem,13.4vw,13rem)/.9 var(--serif);letter-spacing:-.03em;color:var(--stone);white-space:nowrap;text-align:center;border-top:1px solid var(--rule);padding-top:40px;overflow:hidden}
.ft-base{grid-column:1/13;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font:400 .75rem/1.6 var(--sans);color:var(--ink-2);border-top:1px solid var(--rule);padding-top:20px}
.ft-base a{color:var(--ink)}
.ft-soc{display:flex;gap:24px}
.ft-soc a{text-decoration:none;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px}
.ft-soc a:hover{color:var(--brown)}
@media (max-width:900px){.ft-news,.ft-cols{grid-column:1/13}.ft-cols{grid-template-columns:1fr 1fr}}
@media (max-width:900px){body:not([data-page="book"]) .ft{padding-bottom:64px}}

/* ---------- tray ---------- */
.tray{position:fixed;right:24px;bottom:24px;z-index:800;width:380px;background:var(--ivory);border:1px solid var(--ink);box-shadow:0 18px 40px -24px rgba(28,26,24,.35);transform:translateY(calc(100% + 40px));transition:transform .5s var(--ease)}
.tray:not(.has-items){visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
.tray.has-items{transform:none}
.tray-bar{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;min-height:60px;text-align:left}
.tray-bar-l{display:grid;gap:2px}
.tray-k{font:500 .625rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.tray-sum{font:300 1.0625rem/1.3 var(--serif);font-variant-numeric:tabular-nums}
.tray-bar-r .ic{transition:transform .4s var(--ease)}
.tray-bar[aria-expanded="true"] .tray-bar-r .ic{transform:rotate(180deg)}
.tray-bar:hover .tray-sum{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tray-empty-cta{display:none}
.tray-panel{border-top:1px solid var(--rule);padding:4px 18px 18px;max-height:min(60vh,520px);overflow-y:auto}
.tray-list li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.tray-list .t-no{font:500 .625rem/1 var(--sans);letter-spacing:.2em;color:var(--ink-2)}
.tray-list .t-name{font:300 1.125rem/1.25 var(--serif)}
.tray-list .t-meta{grid-column:2;font:400 .8125rem/1.4 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tray-list .t-x{grid-row:1/3;grid-column:3;align-self:center;display:grid;place-items:center;width:44px;height:44px;margin-right:-12px;color:var(--ink-2)}
.tray-list .t-x:hover{color:var(--ink)}
.tray-tot{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 0}
.tray-tot dt{font:500 .625rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.tray-tot dd{font:300 1.5rem/1.2 var(--serif);font-variant-numeric:tabular-nums lining-nums}
.tray-go{width:100%}
.tray-fine{font:400 .75rem/1.5 var(--sans);color:var(--ink-2);margin-top:12px}
@media (max-width:900px){
  .tray,.tray:not(.has-items){visibility:visible;left:0;right:0;bottom:0;width:auto;border:0;border-top:1px solid var(--ink);transform:none;box-shadow:0 -12px 30px -24px rgba(28,26,24,.4);padding-bottom:env(safe-area-inset-bottom)}
  .tray:not(.has-items) .tray-bar,.tray:not(.has-items) .tray-panel{display:none}
  .tray:not(.has-items) .tray-empty-cta{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;background:var(--ink);color:var(--ivory);font:500 .6875rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
  .tray-panel{max-height:70vh}
  .tray.is-open{box-shadow:0 0 0 100vmax rgba(28,26,24,.28)}
}

/* ---------- page headers ---------- */
.ph{max-width:var(--max);margin:0 auto;padding:clamp(48px,8vw,128px) var(--m) clamp(40px,5vw,72px);display:grid;gap:24px}
.ph-sub{max-width:30em}
.ph-split{grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:end}
.ph-split>div{grid-column:1/6;display:grid;gap:24px}
.ph-fig{grid-column:7/13}
.ph-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.92)}
@media (max-width:860px){.ph-split{grid-template-columns:1fr;row-gap:40px}.ph-split>div,.ph-fig{grid-column:1}}

/* ---------- treatments page ---------- */
.filter{position:sticky;top:var(--hd);z-index:500;background:rgba(245,241,234,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.filter-in{max-width:var(--max);margin:0 auto;padding:8px var(--m);display:flex;align-items:center;gap:20px}
.filter-k{font:500 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown);flex:none}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:4px 2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 16px;border:1px solid var(--rule-2);font:400 .8125rem/1 var(--sans);letter-spacing:.04em;transition:background-color .3s,color .3s,border-color .3s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.chip:active{transform:translateY(1px)}
.filter-n{flex:none;font:400 .8125rem/1 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (max-width:760px){.filter-in{padding-right:0;gap:12px}.filter-k,.filter-n{display:none}}
.catalog{max-width:var(--max);margin:0 auto;padding:0 var(--m)}
.cat{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);padding:clamp(64px,8vw,120px) 0 0;scroll-margin-top:calc(var(--hd) + 64px)}
.cat[hidden]{display:none}
.cat-side{grid-column:1/5;display:grid;gap:18px;align-content:start;position:sticky;top:calc(var(--hd) + 90px);align-self:start}
.cat-intro{color:var(--ink-2);max-width:22em}
.cat-fig{width:70%;margin-top:12px}
.cat .grid-tiles{grid-column:6/13;align-self:start}
.cat-none{padding:96px 0 0;font:300 italic 1.5rem/1.4 var(--serif)}
.cat-none .tlink{font-style:normal}
@media (max-width:860px){
  .cat{grid-template-columns:1fr}
  .cat-side,.cat .grid-tiles{grid-column:1}
  .cat-side{position:static;grid-template-columns:1fr 34%;column-gap:20px;margin-bottom:32px}
  .cat-side .h3,.cat-side .cat-intro{grid-column:1}
  .cat-fig{grid-column:2;grid-row:1/3;width:100%;margin:0}
}
.fine{max-width:var(--max)}
.fine-list{counter-reset:f;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 var(--gut);margin-top:24px;border-top:1px solid var(--rule)}
.fine-list li{counter-increment:f;padding:18px 0;border-bottom:1px solid var(--rule);font-size:.9375rem;color:var(--ink-2);display:grid;grid-template-columns:2.4em 1fr}
.fine-list li::before{content:counter(f,decimal-leading-zero);font:500 .6875rem/2.1 var(--sans);letter-spacing:.14em;color:var(--brown)}

/* ---------- studio page ---------- */
.space-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:clamp(40px,6vw,88px);align-items:start}
.space-grid img{width:100%;object-fit:cover;filter:saturate(.92)}
.s1{grid-column:1/6}.s1 img{aspect-ratio:2/3}
.s-txt{grid-column:7/12;align-self:center;display:grid;gap:1.1em;font:300 clamp(1.125rem,1.5vw,1.375rem)/1.55 var(--serif)}
.s2{grid-column:8/12}.s2 img{aspect-ratio:4/5}
.s3{grid-column:2/6;margin-top:-120px}.s3 img{aspect-ratio:1/1}
.s4{grid-column:3/11}.s4 img{aspect-ratio:3/2}
@media (max-width:760px){
  .space-grid{grid-template-columns:repeat(6,1fr)}
  .s1{grid-column:1/6}.s-txt{grid-column:1/7}.s2{grid-column:2/7}.s3{grid-column:1/5;margin-top:0}.s4{grid-column:1/7}
}
.donts{grid-column:2/12;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--gut);counter-reset:d;border-top:1px solid var(--rule)}
.donts li{counter-increment:d;padding:24px 0 28px;border-bottom:1px solid var(--rule);display:grid;gap:10px;align-content:start}
.donts li::before{content:counter(d,lower-roman) ".";font:300 italic 1.25rem/1 var(--serif);color:var(--brown)}
.donts h3{font:300 1.5rem/1.2 var(--serif)}
.donts p{color:var(--ink-2);font-size:.9375rem}
@media (max-width:900px){.donts{grid-column:1}}
.visit{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:48px;align-items:center}
.visit-txt{grid-column:1/6;display:grid;gap:28px;justify-items:start}
.visit-txt .book-facts{width:100%}
.map{grid-column:7/13}
.map svg{width:100%;height:auto;display:block;border:1px solid var(--rule)}
@media (max-width:860px){.visit{grid-template-columns:1fr}.visit-txt,.map{grid-column:1}}

/* ---------- journal ---------- */
.j-index{margin-top:32px;border-top:1px solid var(--rule)}
.j-index a{display:grid;grid-template-columns:7em 1fr auto;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .4s var(--ease),color .3s}
.j-index a:hover{padding-left:12px;color:var(--brown)}
.ji-n{font:500 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.ji-t{font:300 clamp(1.375rem,2.4vw,2.25rem)/1.15 var(--serif)}
.ji-m{font:400 .8125rem/1.4 var(--sans);color:var(--ink-2)}
@media (max-width:700px){.j-index a{grid-template-columns:1fr;gap:6px}}
.note{max-width:var(--max);margin:0 auto;padding:clamp(80px,10vw,152px) var(--m) 0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:40px;scroll-margin-top:var(--hd)}
.note-hd{grid-column:1/13;display:grid;gap:16px;border-top:1px solid var(--ink);padding-top:28px;max-width:52rem}
.note-by{font:300 italic 1.125rem/1.4 var(--serif);color:var(--ink-2)}
.note-fig{grid-column:1/7}
.note-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.92)}
.note-body{grid-column:8/13;display:grid;gap:1.1em;font-size:1.0625rem;text-wrap:pretty}
.note:nth-of-type(even) .note-fig{grid-column:7/13;grid-row:2}
.note:nth-of-type(even) .note-body{grid-column:1/6;grid-row:2}
.note-body .pull{grid-column:auto}
.pull-s{padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pull-s p{font-size:clamp(1.5rem,2.4vw,2rem)}
.note-end{display:flex;flex-wrap:wrap;gap:4px 28px}
@media (max-width:860px){.note{grid-template-columns:1fr}.note-hd,.note-fig,.note-body,.note:nth-of-type(even) .note-fig,.note:nth-of-type(even) .note-body{grid-column:1;grid-row:auto}}

/* ---------- book page ---------- */
.ph-book{padding-bottom:40px}
.bk{max-width:var(--max);margin:0 auto;padding:0 var(--m);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:40px;align-items:start}
.bk-steps{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);counter-reset:none}
.bk-steps li{padding:16px 0;border-bottom:1px solid var(--rule);font:400 .8125rem/1.3 var(--sans);letter-spacing:.06em;color:var(--ink-2);transition:color .3s,border-color .3s}
.bk-steps span{font:500 .6875rem/1 var(--sans);letter-spacing:.2em;margin-right:8px}
.bk-steps li[aria-current]{color:var(--ink);border-bottom:2px solid var(--ink)}
.bk-steps li.is-done{color:var(--brown)}
.bk-form{grid-column:1/8}
.bk-step{display:grid;gap:20px;padding-bottom:56px}
.js .bk-step:not(.is-active){display:none}
.js .bk-step.is-active{animation:stepIn .5s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bk-hint{color:var(--ink-2)}
.picks{border-top:1px solid var(--rule)}
.pick{display:grid;grid-template-columns:28px 2.4em 1fr auto;gap:14px;align-items:center;min-height:60px;padding:10px 0;border-bottom:1px solid var(--rule);cursor:pointer;transition:background-color .3s}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick-box{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink);transition:background-color .3s,color .3s}
.pick-box .ic{width:12px;height:12px;transition:transform .4s var(--ease)}
.pick input:checked+.pick-box{background:var(--ink);color:var(--ivory)}
.pick input:checked+.pick-box .ic{transform:rotate(45deg)}
.pick input:focus-visible+.pick-box{outline:2px solid var(--brown);outline-offset:3px}
.pick:hover{background:linear-gradient(90deg,transparent,rgba(233,214,206,.5))}
.pick-no{font:500 .6875rem/1 var(--sans);letter-spacing:.18em;color:var(--ink-2)}
.pick-name{font:300 1.25rem/1.2 var(--serif)}
.pick-meta{font:400 .8125rem/1.3 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:560px){.pick{grid-template-columns:28px 1fr;row-gap:2px}.pick-no{display:none}.pick-name{grid-column:2}.pick-meta{grid-column:2;text-align:left}.pick-box{grid-row:1/3}}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cal-h{font:500 .625rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);padding:12px 8px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cal-m{grid-column:1/-1;padding:14px 8px 10px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);font:300 italic 1.25rem/1 var(--serif)}
.day{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:64px;padding:8px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:left;transition:background-color .25s,color .25s}
.day b{font:300 1.375rem/1 var(--serif);font-variant-numeric:lining-nums}
.day small{font:400 .625rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.day:hover:not(:disabled){background:var(--blush)}
.day[aria-checked="true"]{background:var(--ink);color:var(--ivory)}
.day[aria-checked="true"] small{color:var(--stone)}
.day:disabled{cursor:not-allowed;color:#a59a8f;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(28,26,24,.04) 6px 7px)}
.day-pad{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (max-width:480px){.day{min-height:52px;padding:6px}.day b{font-size:1.125rem}.day small{display:none}.cal-h{padding:10px 4px;letter-spacing:.1em}}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.slot{min-height:48px;border:1px solid var(--rule-2);font:400 .9375rem/1 var(--sans);font-variant-numeric:tabular-nums;transition:background-color .25s,color .25s,border-color .25s}
.slot:hover:not(:disabled){border-color:var(--ink)}
.slot[aria-checked="true"]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.slot:disabled{color:#a59a8f;text-decoration:line-through;cursor:not-allowed;border-color:var(--rule)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px var(--gut)}
.field{display:grid;gap:6px}
.field-w{grid-column:1/-1}
.field label{font:500 .6875rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.opt{text-transform:none;letter-spacing:.02em;font-weight:400}
.field input,.field textarea{width:100%;min-height:48px;border:0;border-bottom:1px solid var(--ink);background:transparent;font:300 1.0625rem/1.4 var(--sans);color:var(--ink);padding:8px 0;border-radius:0;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-bottom:2px solid var(--brown);padding-bottom:7px}
.field input[aria-invalid="true"]{border-bottom-color:#8A3B2E}
.field textarea::placeholder{color:#8a8178}
.ferr{font:400 .8125rem/1.3 var(--sans);color:#8A3B2E;min-height:1.3em}
.check{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:.9375rem}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check-box{width:20px;height:20px;border:1px solid var(--ink);display:grid;place-items:center}
.check input:checked+.check-box{background:var(--ink);box-shadow:inset 0 0 0 4px var(--ivory)}
.check input:focus-visible+.check-box{outline:2px solid var(--brown);outline-offset:3px}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.bk-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--rule);padding-top:20px;flex-wrap:wrap}
.bk-nav .btn{margin-left:auto}
.bk-sum{grid-column:9/13;position:sticky;top:calc(var(--hd) + 24px);border:1px solid var(--ink);padding:24px;display:grid;gap:12px}
.bk-sum-list li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font:300 1.0625rem/1.3 var(--serif)}
.bk-sum-list li span:last-child{font:400 .8125rem/1.6 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bk-sum-empty{color:var(--ink-2);font-style:italic}
.bk-sum-tot div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.bk-sum-tot dt{font:500 .625rem/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.bk-sum-tot dd{font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:900px){.bk-form,.bk-sum{grid-column:1/13}.bk-sum{position:static;order:-1}.bk-steps{order:-2}.bk-steps li{font-size:0}.bk-steps span{font-size:.6875rem}.bk-steps li[aria-current]{font-size:.75rem}}
.card-wrap{grid-column:1/13;display:grid;justify-items:center;gap:32px;padding:24px 0 0}
.card-wrap[hidden]{display:none}
.card-wrap:focus{outline:0}
.appt{width:min(560px,100%);background:#FBF8F3;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-8px;padding:clamp(32px,6vw,56px);display:grid;gap:16px;text-align:center;animation:stepIn .7s var(--ease)}
.appt-wm{font:400 .75rem/1 var(--sans);letter-spacing:.48em;text-transform:uppercase;margin-right:-.48em;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.appt-name{font:300 clamp(2rem,5vw,2.75rem)/1.1 var(--serif);text-wrap:balance}
.appt-when{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.appt-date{font:300 italic 1.375rem/1.3 var(--serif)}
.appt-time{font:500 .75rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.appt-list li{font:300 1.125rem/1.6 var(--serif)}
.appt-tot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);padding-top:16px}
.appt-tot dt{font:500 .625rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.appt-tot dd{font:300 1.375rem/1.4 var(--serif);font-variant-numeric:tabular-nums lining-nums}
.appt-note{font-size:.9375rem;color:var(--ink-2)}
.appt-demo{font:400 .75rem/1.4 var(--sans);color:var(--brown);letter-spacing:.04em}
.appt-act{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:center}
.bk.is-done>:not(.card-wrap){display:none}

/* ---------- reveal ---------- */
.js .rv.pre{opacity:0;transform:translateY(16px)}
.js .rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.pre img{transform:scale(1.04)}
.js .rv img{transition:transform 1.4s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv.pre{opacity:1;transform:none}.js .rv.pre img{transform:none}
}
@media print{.ow-bar,.hd,.ft,.tray,.bk-steps,.bk-sum,.appt-act{display:none}}
