/* Tanyas Nails & Beauty: "The Quiet Room". Della Respira + Inclusive Sans. oat #F3EEE7 / ink #2E2724 / dusty rose #9A4B57 */
@font-face{font-family:'Della Respira';font-weight:400;font-display:swap;src:url(../fonts/DellaRespira-normal-400.woff2) format('woff2')}
@font-face{font-family:'Inclusive Sans';font-weight:400;font-display:swap;src:url(../fonts/InclusiveSans-normal-400.woff2) format('woff2')}
@font-face{font-family:'Inclusive Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/InclusiveSans-italic-400.woff2) format('woff2')}
:root{--oat:#F3EEE7;--ink:#2E2724;--rose:#9A4B57;--linen:#E8DFD3;--soft:#5A4E49;--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:72px;--s6:120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-bottom:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--oat);color:var(--ink);font-family:'Inclusive Sans',Georgia,sans-serif;font-size:1.0625rem;line-height:1.7}
img{display:block;max-width:100%;height:auto}
h1,h2{font-family:'Della Respira',Georgia,serif;font-weight:400;line-height:1.1;margin:0 0 var(--s3)}
h1{font-size:clamp(3rem,9vw,6.2rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.5vw,3.1rem)}
p{margin:0 0 var(--s2)}
a{color:var(--rose)}
:focus-visible{outline:3px solid var(--rose);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:12px 16px;z-index:9}.skip:focus{left:8px}
.top,main>section{width:min(860px,100% - 48px);margin-inline:auto}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s1);padding:var(--s3) 0}
.brand{font-family:'Della Respira',serif;font-size:1.35rem;color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.35em}
.brand span{color:var(--rose)}
.top nav{display:flex;gap:4px;margin-left:-12px}
.top nav a{min-height:44px;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.top nav a:hover{text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 28px;border-radius:2px;text-decoration:none;font-size:1.05rem;letter-spacing:.02em;transition:background-color .6s}
.btn-main{background:var(--rose);color:#fff}
.btn-main:hover{background:#7f3c47}
/* hero */
.hero{padding:var(--s5) 0 var(--s6);position:relative}
.chair{width:min(220px,46vw);height:auto;display:block;margin:0 0 var(--s4) auto}
.chair .ln,.chair .floor{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chair .floor{stroke:var(--soft);stroke-width:1.2}
.chair .rose{stroke:var(--rose)}
.draw .chair .ln{stroke-dasharray:600;animation:trace 3.2s ease-out both}
@keyframes trace{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.eyebrow{font-style:italic;color:var(--soft)}
.lede{font-size:1.25rem;max-width:30em;margin-bottom:var(--s4)}
@media (min-width:900px){.chair{position:absolute;right:0;top:var(--s5);width:260px}.hero h1,.hero .lede{max-width:560px}}
/* room */
.room{padding:var(--s5) 0;border-top:1px solid var(--linen)}
.cols{display:grid;gap:var(--s4)}
.menu{list-style:none;margin:0;padding:0;border-top:1px solid var(--soft)}
.menu li{border-bottom:1px solid var(--soft);padding:var(--s2) 0;font-family:'Della Respira',serif;font-size:1.5rem}
@media (min-width:768px){.cols{grid-template-columns:1.3fr 1fr}}
/* quotes set large */
.quote{padding:var(--s5) 0}
.quote figure{margin:0}
.quote blockquote{margin:0;font-family:'Della Respira',serif;font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.5}
.quote.big blockquote{font-size:clamp(1.45rem,3.2vw,2.15rem)}
.quote mark{background:none;color:var(--rose)}
.quote figcaption{margin-top:var(--s3);font-style:italic;color:var(--soft)}
.quote figcaption::before{content:"";display:inline-block;width:40px;height:1px;background:var(--rose);vertical-align:middle;margin-right:12px}
/* work strip */
.work{padding:var(--s5) 0}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.strip .w1{grid-column:1/-1;aspect-ratio:1/1;width:80%}
@media (min-width:768px){.strip{grid-template-columns:repeat(3,1fr)}.strip .w1{grid-column:1/3;grid-row:1/3;width:100%;aspect-ratio:auto;height:100%}}
.visit{padding:var(--s5) 0 var(--s6);border-top:1px solid var(--linen)}
.visit p{max-width:32em;font-size:1.15rem;margin-bottom:var(--s4)}
.foot{text-align:center;padding:var(--s4) 24px 120px;color:var(--soft);border-top:1px solid var(--linen)}
.foot p{margin:0}
.bar{position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(243,238,231,.97);border-top:1px solid var(--linen);z-index:5}
.bar .btn{width:100%}
@media (min-width:900px){.bar{display:none}.foot{padding-bottom:var(--s4)}}