/* Hallmark · genre: editorial · macrostructure: Split Studio · mood: quiet luxury
 * nav: N9 edge-aligned (menu panel) · footer: Ft5 statement · theme: custom (brand cream / gold / brown)
 * display: Cormorant Garamond 500 roman · body: Hanken Grotesk · no italics, no eyebrows
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
 */
:root{
  --color-paper:oklch(97% 0.012 85);
  --color-paper-2:oklch(94% 0.022 82);
  --color-surface:oklch(99% 0.006 85);
  --color-ink:oklch(27% 0.035 55);
  --color-ink-2:oklch(44% 0.035 60);
  --color-rule:oklch(86% 0.03 82);
  --color-accent:oklch(48% 0.085 78);
  --color-accent-strong:oklch(40% 0.08 75);
  --color-accent-ink:oklch(98% 0.01 85);
  --color-accent-on-dark:oklch(82% 0.09 82);
  --color-paper-on-dark:oklch(92% 0.02 82);
  --color-focus:oklch(27% 0.035 55);
  --color-ok:oklch(45% 0.1 160);
  --color-bad:oklch(48% 0.16 28);
  --color-wa:oklch(50% 0.12 155);
  --color-wa-ink:oklch(99% 0.006 85);
  --color-scrim:oklch(27% 0.035 55 / .06);
  --color-media:oklch(22% 0.02 55);
  --color-rule-on-dark:oklch(92% 0.02 82 / .2);

  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  --space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;
  --space-lg:2rem;--space-xl:3rem;--space-2xl:4.5rem;--space-3xl:7rem;

  --text-xs:.8125rem;--text-sm:.9375rem;--text-md:1.0625rem;--text-lg:1.25rem;
  --text-xl:clamp(1.6rem,2.6vw,2.1rem);--text-2xl:clamp(2.1rem,4vw,3.1rem);--text-display:clamp(2.7rem,5.6vw,5rem);

  --ease-out:cubic-bezier(.16,1,.3,1);--dur-short:180ms;--dur-med:320ms;
  --radius-sm:4px;--radius-md:10px;
  --shadow-soft:0 14px 34px -18px oklch(27% 0.035 55 / .45);
  --z-nav:40;--z-menu:45;--z-float:50;--z-skip:100;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
body{overflow-x:clip;font:400 var(--text-md)/1.65 var(--font-body);color:var(--color-ink);background:var(--color-paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,iframe,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{width:min(1200px,100% - 2*var(--space-md));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:var(--space-2xs);z-index:var(--z-skip);background:var(--color-ink);color:var(--color-paper);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-sm)}
.skip:focus{left:var(--space-2xs)}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico.fill{fill:currentColor;stroke:none}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;font-style:normal;letter-spacing:-.012em;line-height:1.08;overflow-wrap:anywhere;min-width:0}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
.hl{color:var(--color-accent)}
.lead{font-size:var(--text-lg);line-height:1.6;color:var(--color-ink-2);max-width:44ch}

/* buttons: filled primary, text link secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:48px;padding:0 var(--space-md);border-radius:var(--radius-sm);border:1.5px solid var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink);font-weight:600;font-size:var(--text-sm);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.btn:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong)}
.btn:active{background:var(--color-ink);border-color:var(--color-ink)}
.btn-line{background:transparent;color:var(--color-accent-strong)}
.btn-line:hover{background:var(--color-accent);color:var(--color-accent-ink)}
.tlink{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:44px;color:var(--color-accent-strong);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;white-space:nowrap;transition:text-decoration-thickness var(--dur-short) var(--ease-out)}
.tlink:hover{text-decoration-thickness:2.5px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-md)}

/* nav N9 */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--color-paper);border-bottom:1px solid transparent;transition:border-color var(--dur-short)}
.nav.scrolled{border-bottom-color:var(--color-rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:72px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{height:30px;width:auto}
.nav-r{display:flex;align-items:center;gap:var(--space-xs)}
.menu-btn{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:48px;padding:0 var(--space-sm);border:0;background:none;font-weight:600;font-size:var(--text-sm);cursor:pointer;color:var(--color-ink)}
.menu-btn .bars{position:relative;width:20px;height:10px}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-med) var(--ease-out)}
.menu-btn .bars::before{top:0}.menu-btn .bars::after{bottom:0}
.menu-btn[aria-expanded=true] .bars::before{transform:translateY(4.25px) rotate(45deg)}
.menu-btn[aria-expanded=true] .bars::after{transform:translateY(-4.25px) rotate(-45deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--color-paper);border-bottom:1px solid var(--color-rule);z-index:var(--z-menu);padding:var(--space-lg) 0 var(--space-xl)}
.menu-panel[hidden]{display:none}
.menu-panel ul{list-style:none;padding:0;display:grid;gap:var(--space-3xs)}
.menu-panel a{display:flex;align-items:baseline;gap:var(--space-sm);min-height:56px;font:500 var(--text-2xl)/1.1 var(--font-display);text-decoration:none;transition:color var(--dur-short)}
.menu-panel a small{font:600 var(--text-xs) var(--font-body);color:var(--color-ink-2);font-variant-numeric:tabular-nums;width:2.2em}
.menu-panel a:hover{color:var(--color-accent)}
.menu-panel a[aria-current=page]{color:var(--color-accent)}

/* section scaffolding */
.sec{padding:var(--space-3xl) 0}
.sec.alt{background:var(--color-paper-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl);align-items:center}

/* hero */
.hero{padding:var(--space-xl) 0 var(--space-3xl)}
.hero .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-2xl);align-items:end}
.hero h1{margin-bottom:var(--space-md)}
.hero .lead{margin-bottom:var(--space-lg)}
.rating{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:44px;margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-ink-2);text-decoration:none}
.rating .stars{display:inline-flex;gap:2px;color:var(--color-accent)}
.rating .stars .ico{width:1.05em;height:1.05em}
.rating strong{color:var(--color-ink)}
.rating:hover span:last-child{text-decoration:underline}
.media{position:relative;overflow:hidden;background:var(--color-paper-2);aspect-ratio:4/5;border-radius:var(--radius-sm)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media video{z-index:1}.media.has-video img{display:none}
.hero-intro>*{animation:rise .7s var(--ease-out) both}
.hero-intro>:nth-child(2){animation-delay:.08s}.hero-intro>:nth-child(3){animation-delay:.16s}.hero-intro>:nth-child(4){animation-delay:.24s}.hero-intro>:nth-child(5){animation-delay:.3s}
.hero-media{animation:fadein .9s var(--ease-out) .12s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* testimonial theatre */
.testi .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:var(--space-2xl)}
.stage{position:sticky;top:96px}
.tstage{position:relative;aspect-ratio:9/16;max-height:78vh;margin-inline:auto;background:var(--color-media);border-radius:var(--radius-sm);overflow:hidden}
.tstage img,.tstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tplay{position:absolute;inset:0;width:100%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.tplay .disc{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--color-paper);color:var(--color-accent-strong);transition:background-color var(--dur-short)}
.tplay:hover .disc{background:var(--color-accent);color:var(--color-accent-ink)}
.tplay .ico{width:26px;height:26px;margin-left:3px}
.tstage.on .tplay,.tstage.on>img{display:none}
.tfull{margin:var(--space-sm) auto 0;font-size:var(--text-sm);color:var(--color-ink-2);max-width:56ch}
.tfull b{color:var(--color-ink);font-weight:600}
.tcol h2{margin-bottom:var(--space-lg)}
.tlist{list-style:none;padding:0;border-top:1px solid var(--color-rule)}
.tq{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:var(--space-sm);width:100%;text-align:left;padding:var(--space-md) 0;border:0;border-bottom:1px solid var(--color-rule);background:none;cursor:pointer;color:var(--color-ink-2);transition:color var(--dur-short)}
.tq:hover{color:var(--color-ink)}
.tq .n{font:600 var(--text-xs) var(--font-body);font-variant-numeric:tabular-nums;padding-top:.7em}
.tq q{display:block;font:500 var(--text-xl)/1.2 var(--font-display);quotes:"\201C" "\201D"}
.tq .who{display:block;margin-top:var(--space-2xs);font-size:var(--text-sm)}
.tq .who b{font-weight:600}
.tq[aria-pressed=true]{color:var(--color-ink)}
.tq[aria-pressed=true] q,.tq[aria-pressed=true] .n{color:var(--color-accent-strong)}
.note{margin-top:var(--space-md);font-size:var(--text-xs);color:var(--color-ink-2);max-width:62ch}

/* treatment index */
.tr .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:var(--space-2xl)}
.tr h2{margin-bottom:var(--space-lg)}
.tr-groups{display:grid;gap:var(--space-xl)}
.tr-g h3{font:600 var(--text-xs) var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2);margin-bottom:var(--space-2xs)}
.tr-list{list-style:none;padding:0;border-top:1px solid var(--color-rule)}
.tr-row{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:var(--space-sm);align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid var(--color-rule);transition:background-color var(--dur-short)}
.tr-row.is-active{background:var(--color-scrim)}
.tr-row .n{font:600 var(--text-xs) var(--font-body);font-variant-numeric:tabular-nums;color:var(--color-ink-2)}
.tr-row .b h4{font:500 var(--text-xl)/1.1 var(--font-display)}
.tr-row .b p{font-size:var(--text-sm);color:var(--color-ink-2);margin-top:var(--space-3xs);max-width:52ch}
.tr-prev{position:sticky;top:96px}
.tr-prev .media{aspect-ratio:3/4}
.tr-prev .ph{position:absolute;inset:0;display:none;place-items:center;padding:var(--space-md);text-align:center;font:500 var(--text-2xl)/1.1 var(--font-display);color:var(--color-accent-strong)}
.tr-prev .media.no-img .ph{display:grid}.tr-prev .media.no-img img{display:none}

/* about */
.about .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-2xl)}
.about .media{aspect-ratio:528/620}
.about p{color:var(--color-ink-2);margin:var(--space-md) 0;max-width:54ch}
.points{list-style:none;padding:0;margin:0 0 var(--space-lg);display:grid;gap:var(--space-xs)}
.points li{display:flex;gap:var(--space-xs);align-items:flex-start}
.points .ico{margin-top:.2em;color:var(--color-accent)}

/* gallery collage */
.gal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);grid-template-rows:auto auto;gap:var(--space-sm)}
.gal .media{aspect-ratio:auto}
.gal .g1{grid-row:span 2;aspect-ratio:9/12}
.gal .g2,.gal .g3{aspect-ratio:4/3}
.gal-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-lg)}

/* articles: featured + index */
.arts .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.arts h2{margin-bottom:var(--space-md)}
.afeat{display:grid;gap:var(--space-sm);text-decoration:none}
.afeat .media{aspect-ratio:4/3}
.afeat strong,.arow strong{font:500 var(--text-xl)/1.15 var(--font-display)}
.afeat:hover strong,.arow:hover strong{color:var(--color-accent-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ameta{font-size:var(--text-xs);color:var(--color-ink-2);font-variant-numeric:tabular-nums}
.alist{list-style:none;padding:0;border-top:1px solid var(--color-rule)}
.arow{display:grid;gap:var(--space-3xs);padding:var(--space-md) 0;border-bottom:1px solid var(--color-rule);text-decoration:none}
.arow span:last-child{font-size:var(--text-sm);color:var(--color-ink-2);max-width:60ch}

/* visit */
.visit .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
address{font-style:normal;color:var(--color-ink-2);margin:var(--space-md) 0}
.status{display:inline-flex;align-items:center;gap:var(--space-2xs);font-weight:600;margin-bottom:var(--space-sm)}
.status::before{content:"";width:.6em;height:.6em;border-radius:50%;background:currentColor}
.status.open{color:var(--color-ok)}.status.closed{color:var(--color-bad)}
.hours{border-collapse:collapse;width:100%;max-width:380px;margin-bottom:var(--space-lg)}
.hours th,.hours td{padding:var(--space-xs) 0;border-bottom:1px solid var(--color-rule);text-align:left;font-weight:400}
.hours td{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today th,.hours tr.today td{font-weight:700;color:var(--color-accent-strong)}
.map{border:1px solid var(--color-rule);border-radius:var(--radius-sm);overflow:hidden;min-height:440px}
.map iframe{width:100%;height:100%;min-height:440px;border:0}

/* footer Ft5 statement */
.foot{background:var(--color-ink);color:var(--color-paper-on-dark);padding:var(--space-3xl) 0 var(--space-xl)}
.foot-say{font:500 var(--text-display)/1.02 var(--font-display);max-width:16ch;margin-bottom:var(--space-lg);color:var(--color-paper)}
.foot .btn{background:var(--color-accent-on-dark);border-color:var(--color-accent-on-dark);color:var(--color-ink)}
.foot .btn:hover{background:var(--color-paper);border-color:var(--color-paper)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-lg);margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--color-rule-on-dark);font-size:var(--text-sm)}
.foot-grid a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-paper-on-dark)}
.foot-grid .brand img{filter:brightness(0) invert(1) opacity(.9);height:26px}
.foot small{display:block;margin-top:var(--space-lg);font-size:var(--text-xs);color:var(--color-paper-on-dark)}

.wa-float{position:fixed;right:var(--space-sm);bottom:var(--space-sm);z-index:var(--z-float);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--color-wa);color:var(--color-wa-ink);box-shadow:var(--shadow-soft);transition:background-color var(--dur-short)}
.wa-float:hover{background:var(--color-accent-strong)}
.wa-float .ico{width:28px;height:28px}

/* blog */
.post{max-width:780px;padding:var(--space-xl) 0 var(--space-2xl)}
.crumb{font-size:var(--text-xs);color:var(--color-ink-2);margin-bottom:var(--space-md)}
.crumb a{color:var(--color-accent-strong);text-decoration:none}.crumb a:hover{text-decoration:underline}
.post h1{margin-bottom:var(--space-sm)}
.meta{font-size:var(--text-sm);color:var(--color-ink-2);font-variant-numeric:tabular-nums}
.post .lead{max-width:none;margin:var(--space-md) 0 var(--space-xs)}
.post-b h2{margin:var(--space-xl) 0 var(--space-xs)}
.post-b h2{font-size:var(--text-xl)}
.post-b p{margin:0 0 var(--space-sm);max-width:68ch}
.post-b ul{margin:0 0 var(--space-md);padding-left:1.2em;max-width:68ch;display:grid;gap:var(--space-2xs)}
.post-b li::marker{color:var(--color-accent)}
.post-b a:not(.btn):not(.ig){color:var(--color-accent-strong);text-underline-offset:3px}
.igbox{margin:var(--space-xl) 0 var(--space-lg);padding:var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-surface)}
.post-b .igbox h2{margin:0 0 var(--space-xs)}
.igbox ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3xs);max-width:none}
.ig{display:flex;gap:var(--space-xs);align-items:center;min-height:56px;padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-sm);text-decoration:none;color:var(--color-ink);transition:background-color var(--dur-short)}
.ig:hover{background:var(--color-paper-2)}
.ig .ico{width:26px;height:26px;color:var(--color-accent)}
.ig b{display:block;font-weight:600;line-height:1.3}.ig small{color:var(--color-ink-2)}
.cta-box{margin:var(--space-lg) 0;padding:var(--space-lg);border-radius:var(--radius-md);background:var(--color-paper-2)}
.post-b .cta-box h2{margin:0 0 var(--space-2xs)}
.cta-box p{margin:0 0 var(--space-sm)}
.disc{font-size:var(--text-xs);color:var(--color-ink-2)}
.more{margin-top:var(--space-2xl)}
.more h2{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
.blog-head{padding:var(--space-xl) 0 var(--space-lg)}
.blog-head .lead{margin-top:var(--space-sm)}

@media (max-width:900px){
  .sec{padding:var(--space-2xl) 0}
  .split,.hero .split,.testi .split,.tr .split,.about .split,.arts .split,.visit .split{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .hero{padding-top:var(--space-md)}
  .hero-media{max-width:440px}
  .stage,.tr-prev{position:static}
  .tr-prev{display:none}
  .about .media{max-width:380px}
  .gal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gal .g1{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .map,.map iframe{min-height:320px}
  .brand img{height:26px}
}
@media (max-width:420px){.nav .btn{padding:0 var(--space-sm)}.menu-btn{padding:0 var(--space-xs)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.foot address{color:var(--color-paper-on-dark);margin:var(--space-sm) 0 0}
.foot-grid p{margin:0}
