/* Nav Salon & Spa — "The Thread". Yeseva One (display) + Radio Canada (body).
   Blush #F8EDE8, plum #3D1F2B, deep gold #8C5A1E (thread + Call only). Scale 1.25 from 17px; 8px spacing. */
@font-face{font-family:"Yeseva One";src:url(../fonts/yeseva.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Radio Canada";src:url(../fonts/radiocanada.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--blush:#F8EDE8;--blush2:#F1DDD5;--plum:#3D1F2B;--plum2:#5E3A48;--gold:#8C5A1E;--gold-d:#6F4615;
--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;--f0:1.0625rem;--f1:1.328rem;--f2:1.66rem;--f3:2.075rem;--f4:2.594rem;--f5:3.242rem}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;scroll-padding-bottom:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blush);color:var(--plum);font:400 var(--f0)/1.6 "Radio Canada",system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}.nowrap{white-space:nowrap}
h1,h2,h3{font-family:"Yeseva One",Georgia,serif;font-weight:400;line-height:1.1;margin:0 0 var(--s2)}
p{margin:0 0 var(--s2)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s3)}
.skip{position:fixed;left:-999px;top:8px;background:var(--plum);color:#fff;padding:12px 16px;z-index:100}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
.eyebrow{font-weight:600;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--plum2)}
.eyebrow--h{font-family:"Radio Canada",sans-serif;line-height:1.4;margin-bottom:var(--s4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;transition:background .15s}
.btn--call{background:var(--gold);color:#fff}.btn--call:hover{background:var(--gold-d)}
.btn--line{border-color:var(--plum)}.btn--line:hover{background:var(--plum);color:var(--blush)}
.btn--big{font-size:var(--f1);min-height:56px;padding:14px 30px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);background:rgba(248,237,232,.97);border-bottom:1px dashed var(--gold)}
.brand{display:flex;align-items:baseline;gap:8px;min-height:44px;align-items:center;text-decoration:none;font-family:"Yeseva One",serif;font-size:var(--f2)}
.brand span{font-family:"Radio Canada",sans-serif;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.top nav{margin-left:auto}.top ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.top nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 12px;text-decoration:none;font-weight:600}
.top nav a:hover{text-decoration:underline dashed var(--gold);text-underline-offset:6px}
.top__call{min-height:44px;padding:8px 18px}
@media (max-width:860px){.top nav{display:none}.top__call{margin-left:auto}}
@media (max-width:420px){.top__call .nowrap{display:none}.brand span{display:none}}
/* hero: soft offset column */
.hero{display:grid;gap:var(--s6);padding:var(--s8) var(--s3) var(--s12);max-width:1120px;margin:0 auto}
.hero h1{margin:0}
.hero__name{display:block;font-size:clamp(5rem,26vw,9.5rem);line-height:.9}
.hero__sub{display:block;font-size:var(--f2);margin-top:var(--s1);color:var(--plum2)}
.thread{display:block;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.thread--hero{width:min(100%,520px);height:auto;margin:-8px 0 var(--s3)}
.thread .brow{stroke-width:5}
@media (prefers-reduced-motion:no-preference){
  .thread path{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 2.2s ease-out .2s both}
  .thread .brow{animation-delay:1.6s;animation-duration:.9s}
}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.lede{font-size:var(--f1);line-height:1.5;max-width:34ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.hero__photo{margin:0 0 0 auto;width:82%;border-radius:240px 240px 8px 8px;overflow:hidden;outline:2px dashed var(--gold);outline-offset:10px}
.hero__photo img{width:100%;aspect-ratio:5/6;object-fit:cover}
@media (min-width:900px){.hero{grid-template-columns:7fr 5fr;align-items:center}.hero__photo{width:100%}}
/* stitched menu */
.menu{background:var(--plum);color:var(--blush);padding:var(--s12) var(--s3)}
.menu__inner{max-width:760px;margin:0 auto 0 max(0px,calc((100vw - 1120px)/2 + 12vw))}
.menu h2{font-size:var(--f4)}
.stitch{list-style:none;margin:var(--s4) 0;padding:0}
.stitch li{padding:var(--s3) 0;border-bottom:2px dashed rgba(232,190,140,.7);display:grid;gap:4px}
.stitch h3{font-size:var(--f2);margin:0}.stitch p{margin:0;color:#EBD9D1}
@media (min-width:700px){.stitch li{grid-template-columns:1fr 1.2fr;align-items:baseline}}
.menu .thread{stroke:#E8BE8C;width:100%;height:40px}
/* looks */
.looks{padding:var(--s12) 0}
.looks h2{font-size:var(--f4)}
.looks__grid{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
.look{margin:0}.look img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
.look figcaption{margin-top:var(--s1);font-family:"Yeseva One",serif;font-size:var(--f1)}
.look--a{grid-column:1/-1}.look--a img{aspect-ratio:1/1}
@media (min-width:800px){.looks__grid{grid-template-columns:5fr 4fr 4fr;align-items:start}.look--a{grid-column:auto}.look--b{margin-top:var(--s8)}.look--c{margin-top:var(--s4)}}
/* reviews */
.kind{background:var(--blush2);padding:var(--s12) 0}
.q{margin:0 0 var(--s6);max-width:720px}
.q p{font-family:"Yeseva One",serif;font-size:var(--f2);line-height:1.35}
.q footer{font-weight:600;color:var(--plum2)}
.q--2{margin-left:auto;margin-bottom:0}
.q::before{content:"";display:block;width:80px;height:3px;background:var(--gold);margin-bottom:var(--s2)}
/* book */
.book{padding:var(--s12) 0 calc(var(--s12) + 40px);text-align:left}
.book h2{font-size:var(--f5);max-width:14ch}
.book p{font-size:var(--f1)}
.where{margin-top:var(--s3);color:var(--plum2)}
.foot{background:var(--plum);color:var(--blush);text-align:center;padding:var(--s4) var(--s3) calc(var(--s4) + 72px)}.foot p{margin:0}
@media (min-width:861px){.foot{padding-bottom:var(--s4)}}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--s2) calc(10px + env(safe-area-inset-bottom));background:rgba(61,31,43,.96)}
.callbar .btn{width:100%}@media (min-width:861px){.callbar{display:none}}
@media (max-width:360px){.btn--big{font-size:var(--f0);padding:12px 18px}.hero__actions .btn{white-space:nowrap}}
.hero__copy{min-width:0;max-width:100%}