:root {
  --salon-ink:#211e20; --salon-ivory:#f2ebe3; --salon-plum:#674152;
  --salon-copper:#c68a78; --salon-sage:#c8cfad; --salon-ink-soft:#54474d;
  --line:#211e2034; --paper:#faf5ee;
  --display:"Instrument Serif",Georgia,serif; --body:Manrope,system-ui,sans-serif;
  --gutter:clamp(18px,4vw,78px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--salon-ivory);color:var(--salon-ink);font:500 15px/1.65 var(--body)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--salon-plum);outline-offset:4px}
img{display:block;width:100%;height:100%;object-fit:cover}
figure,p,h1,h2,h3{margin:0}
address{font-style:normal}
h1,h2,h3,.wordmark{font-family:var(--display);font-weight:400;line-height:.95}
h2{font-size:clamp(56px,6.5vw,114px);letter-spacing:-.035em;overflow-wrap:break-word}
h3{font-size:clamp(38px,4.6vw,76px);letter-spacing:-.025em;overflow-wrap:break-word}
.wrap{width:min(1660px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.tag,.caption,figcaption{font-size:10px;line-height:1.5;font-weight:700;letter-spacing:.095em}
.tag{text-transform:uppercase}
.caption,figcaption{letter-spacing:.045em;color:var(--salon-ink-soft)}
figcaption{display:flex;gap:12px;justify-content:space-between;padding-block:9px 0}
.skip{position:fixed;left:16px;top:12px;clip-path:inset(50%);z-index:10;background:var(--paper);padding:12px 16px}
.skip:focus{clip-path:none}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:10px 16px;border:1px solid transparent;font-size:12px;font-weight:800;line-height:1.2}
.button-ink{background:var(--salon-ink);color:var(--salon-ivory)}
.button-ivory{background:var(--salon-ivory);color:var(--salon-ink)}
.button:hover{background:var(--salon-sage);color:var(--salon-ink);border-color:var(--salon-ink)}
.text-link{display:inline-flex;gap:16px;align-items:center;align-self:start;min-height:44px;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:5px}
.text-link span:last-child{transition:transform .22s ease}
.text-link:hover span[aria-hidden]{transform:translate(3px,-2px)}
.mast{display:grid;grid-template-columns:minmax(160px,1fr) auto auto auto;gap:clamp(18px,3vw,58px);align-items:center;padding:10px var(--gutter);border-bottom:1px solid var(--line);min-height:78px}
.wordmark{display:inline-block;font-size:clamp(24px,3vw,43px);white-space:nowrap;letter-spacing:-.045em}
.wordmark i{color:var(--salon-plum)}
.mast-nav{display:flex;gap:clamp(10px,2.3vw,42px);font-size:12px;font-weight:800;align-items:center}
.mast-nav a{display:flex;align-items:center;min-height:44px}
.mast-nav a:hover,.footer a:hover{text-decoration:underline;text-underline-offset:4px}
.languages{display:flex;align-items:center}
.languages button{position:relative;border:0;background:none;min-width:40px;min-height:44px;font-size:11px;font-weight:800;padding:0 5px}
.languages button[aria-pressed=true]::after{content:"";position:absolute;bottom:5px;left:10px;right:10px;height:2px;background:var(--salon-plum)}
.cover{display:grid;grid-template-columns:42px minmax(0,1.43fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,52px);padding-block:clamp(26px,4.2vw,68px) clamp(36px,5.4vw,94px)}
.cover-spine{display:flex;flex-direction:column;align-items:center;align-self:stretch;gap:18px;padding-top:10px}
.cover-spine .tag{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.spine-rule{width:1px;background:var(--line);flex:1}
.cover-photo{aspect-ratio:1.13;background:#846357;isolation:isolate}
.photo{position:relative;overflow:clip}
.photo>img{transform:translateY(var(--drift,0px)) scale(1.085);transform-origin:center}
.cover-photo>img{object-position:49% 55%;animation:cover-unfold .8s cubic-bezier(.22,.74,.19,1) both}
@keyframes cover-unfold{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.crop-mark{position:absolute;width:26px;height:26px;pointer-events:none;border-color:#fff3e0;border-style:solid;border-width:0}
.crop-tl{top:16px;left:16px;border-top-width:1px;border-left-width:1px}
.crop-br{bottom:16px;right:16px;border-bottom-width:1px;border-right-width:1px}
.cover-copy{min-width:0;padding-bottom:28px}
.cover-kicker{color:var(--salon-plum);margin-bottom:clamp(12px,2vw,30px)}
.cover h1{font-size:clamp(70px,8.7vw,152px);letter-spacing:-.052em}
.cover h1 span,.cover h1 em{display:block}
.cover h1 em{color:var(--salon-plum)}
html:lang(de) .cover h1,html:lang(en) .cover h1{font-size:clamp(66px,7.1vw,124px)}
.cover-intro{margin:25px 0 16px;max-width:35ch;color:var(--salon-ink-soft)}
.archive{background:var(--salon-ink);color:var(--salon-ivory);padding-block:clamp(38px,6vw,100px);--line:#f2ebe34a}
.archive :focus-visible,.contact :focus-visible{outline-color:var(--salon-sage)}
.archive-top{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:28px;border-top:1px solid var(--line);padding-top:19px;margin-bottom:32px}
.archive-top h2{margin-top:12px}
.archive-top .tag,.look-kind{color:var(--salon-sage)}
.archive-top>p{max-width:39ch;justify-self:end;color:#e0d3d3}
.archive-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);align-items:center;gap:clamp(22px,6vw,108px)}
.plate{min-width:0;border:1px solid var(--line);padding:10px}
.plate-bar,.plate-caption{display:flex;justify-content:space-between;gap:10px;padding:8px 8px 12px;color:#e0d3d3}
.plate-photo{aspect-ratio:1.12;background:#49393f;touch-action:pan-y;isolation:isolate}
.plate-photo img{object-position:50% 37%;user-select:none;-webkit-user-drag:none}
.plate-photo .entering{position:absolute;inset:0}
.plate-caption{padding-block:10px 3px}
.look-side{min-width:0;display:grid;gap:16px;align-content:center}
.look-info h3{margin:11px 0 18px}
.look-info p:last-child{color:#e0d3d3;max-width:43ch}
.look-request{color:var(--salon-sage)}
.look-controls{border-top:1px solid var(--line);padding-top:13px}
.filmstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.filmstrip button{padding:4px 4px 6px;background:transparent;border:1px solid var(--line);min-width:0;color:inherit;text-align:left;min-height:44px}
.filmstrip button img{aspect-ratio:1.23;height:auto;object-position:50% 37%;filter:saturate(.66);transition:filter .22s}
.filmstrip button>span{display:block;padding:6px 2px 0;font-size:clamp(9px,.83vw,12px);line-height:1.4;font-weight:800;overflow-wrap:break-word}
.filmstrip button b{font-size:9px;color:var(--salon-copper);margin-right:3px}
.filmstrip button[aria-pressed=true]{border-color:var(--salon-sage);background:var(--salon-sage);color:var(--salon-ink)}
.filmstrip button[aria-pressed=true] b{color:var(--salon-plum)}
.filmstrip button:is(:hover,[aria-pressed=true]) img{filter:none}
.look-arrows{display:flex;justify-content:end;gap:8px;margin-top:9px}
.look-arrows button{border:1px solid var(--line);background:none;color:inherit;font-size:21px;min-width:48px;min-height:44px}
.look-arrows button:hover{background:var(--salon-sage);color:var(--salon-ink)}
.gallery-status{font-size:12px;margin-top:8px;color:var(--salon-sage)}
.archive-disclosure{color:#e0d3d3}
.menu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(26px,7vw,125px);padding-block:clamp(52px,8vw,132px)}
.menu-head h2,.details-title h2,.consult h2,.contact h2{margin:12px 0 20px}
.menu-head p:last-child,.consult p:not(.tag){max-width:37ch;color:var(--salon-ink-soft)}
.service-index{border-top:1px solid var(--salon-ink)}
.service-index details{border-bottom:1px solid var(--line);padding-bottom:0}
.service-index summary{display:grid;grid-template-columns:38px minmax(0,1fr) 26px;align-items:center;gap:14px;padding:17px 4px;cursor:pointer;list-style:none;min-height:66px}
.service-index summary::-webkit-details-marker{display:none}
.service-index summary span:first-child{font-size:11px;font-weight:800;color:var(--salon-plum)}
.service-index summary span:nth-child(2){font:400 clamp(30px,3.8vw,59px)/1 var(--display)}
.service-index details[open] summary span:nth-child(2){color:var(--salon-plum)}
.plus{width:18px;height:18px;position:relative}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor;top:50%;left:0;right:0;height:1px}
.plus::after{transform:rotate(90deg);transition:transform .25s}
details[open] .plus::after{transform:none}
.service-index details>p,.service-index details>a{margin-left:56px}
.service-index details>p{max-width:48ch;color:var(--salon-ink-soft);padding:4px 6px 8px 0}
.service-index details>a{margin-bottom:12px}
.details-spread{background:#e7d7d5;padding-block:clamp(40px,6vw,96px)}
.details-title{border-top:1px solid var(--line);padding-top:14px}
.details-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(24px,7vw,120px);align-items:start}
.details-grid article{min-width:0}
.details-grid figure{margin-bottom:20px}
.detail-photo{aspect-ratio:1.42;background:#473237}
.makeup-card .detail-photo img{object-position:center 28%}
.nails-card{margin-top:clamp(18px,10vw,164px)}
.nails-card .detail-photo{aspect-ratio:1.14}
.detail-copy{border-top:1px solid var(--line);padding-top:18px}
.detail-copy p{margin-top:12px;max-width:48ch;color:var(--salon-ink-soft)}
.detail-copy .text-link{margin-top:5px}
.consult{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(26px,9vw,150px);align-items:center;padding-block:clamp(50px,8vw,128px)}
.consult-photo{aspect-ratio:1.17;background:#25362c}
.consult-photo img{object-position:50% 41%}
.consult .text-link{margin-top:16px}
.contact{background:var(--salon-plum);color:var(--salon-ivory);padding-block:clamp(48px,7vw,116px);--line:#f2ebe352}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,8vw,136px)}
.contact .tag{color:var(--salon-sage)}
.contact-grid>div:first-child>p:not(.tag){max-width:37ch}
.contact .button{margin-top:24px}
.contact-directory{border-top:1px solid var(--line)}
.contact-line{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:0 10px;padding:12px 0;border-bottom:1px solid var(--line);min-height:54px}
.contact-line span{font-size:10px;line-height:1.3;letter-spacing:.06em;color:var(--salon-sage)}
.contact-line strong{grid-column:1;font-size:clamp(14px,1.6vw,26px);font-weight:650;overflow-wrap:anywhere}
.contact-line b{grid-column:2;grid-row:1/3;font-size:17px}
.contact-line:hover strong{text-decoration:underline;text-underline-offset:4px}
.contact-address,.hours{padding:15px 0 0}
.hours p:last-child{font-size:13px}
.footer{padding-block:24px;display:flex;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;font-size:12px;color:var(--salon-ink-soft)}
.footer>div{display:flex;gap:12px 21px;flex-wrap:wrap}
.footer a{display:inline-flex;align-items:center;min-height:44px}
dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(100%,565px);max-width:none;height:100%;max-height:100%;padding:0;border:0;background:transparent;color:var(--salon-ink);overflow:visible}
dialog:not([open]){display:none}
dialog::backdrop{background:#211e20b0}
dialog[data-state=opening]::backdrop{animation:veil .3s ease both}
dialog[data-state=closing]::backdrop{animation:veil .24s ease reverse both}
@keyframes veil{from{opacity:0}to{opacity:1}}
.request-sheet{height:100%;overflow:auto;overscroll-behavior:contain;background:var(--paper);border-left:7px solid var(--salon-copper)}
.request-bar{position:sticky;top:0;z-index:2;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 20px;border-bottom:1px solid var(--line)}
.request-bar .wordmark{font-size:27px}
.close{min-width:44px;min-height:44px;border:1px solid var(--line);background:none;font-size:25px;line-height:1}
.close:hover{background:var(--salon-sage)}
.request-content{padding:23px clamp(18px,5vw,45px) 32px}
.request-content .tag{color:var(--salon-plum)}
.request-content h2{font-size:clamp(42px,5vw,68px);margin:8px 0 15px}
.request-content>p:not(.tag){font-size:14px}
form{margin-top:20px;display:grid;gap:14px}
form label{min-width:0;display:grid;gap:5px;font-size:12px;font-weight:800}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
form :is(input,select,textarea){border:1px solid #79666f;border-radius:0;background:#fffaf4;padding:9px 10px;width:100%;min-width:0;min-height:44px;font-size:16px;font-weight:500}
textarea{resize:vertical}
form [aria-invalid=true]{border:2px solid #8c2743}
.field-error{font-size:12px;color:#8c2743}
form .button{justify-self:start}
#salon-preview{background:var(--salon-sage);padding:13px;font-size:13px}
#salon-preview p{margin-top:4px;overflow-wrap:anywhere;white-space:pre-line}
.request-direct{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:12px}
@media(max-width:1000px){
  .cover{grid-template-columns:23px minmax(0,1fr) minmax(0,.9fr);gap:20px}
  .cover h1{font-size:clamp(58px,9.2vw,96px)}
  html:lang(de) .cover h1,html:lang(en) .cover h1{font-size:clamp(54px,7.1vw,84px)}
  .cover-photo{aspect-ratio:.88}
  .cover-intro{font-size:14px}
}
@media(max-width:700px){
  :root{--gutter:clamp(14px,4.2vw,25px)}
  .mast{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding-block:6px 0;min-height:0}
  .mast .wordmark{grid-column:1;grid-row:1}
  .mast-cta{grid-column:2;grid-row:1;min-height:44px;padding-inline:11px;gap:9px;font-size:11px}
  .mast-nav{grid-column:1;grid-row:2;gap:clamp(7px,2.5vw,16px);font-size:clamp(10px,2.75vw,12px)}
  .mast .languages{grid-column:2;grid-row:2;justify-self:end}
  .mast .languages button{min-width:42px;min-height:44px;font-size:10px}
  .mast .languages button:focus-visible{outline-offset:-2px}
  .languages button[aria-pressed=true]::after{left:7px;right:7px}
  .cover{display:flex;flex-direction:column;align-items:stretch;padding-block:23px 35px;gap:20px}
  .cover-spine{display:none}
  .cover-copy{order:-1;padding:0}
  .cover-kicker{margin-bottom:9px}
  .cover h1,html:lang(de) .cover h1,html:lang(en) .cover h1{font-size:clamp(57px,15vw,102px)}
  .cover-intro{margin:13px 0 3px;max-width:44ch}
  .cover-photo{aspect-ratio:1.03}
  .cover-photo img{object-position:48% 52%}
  .archive-top{display:block;margin-bottom:21px}
  .archive-top h2{margin:8px 0 12px}
  .archive-top>p{font-size:13px}
  .archive-grid{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .look-side{display:contents}
  .look-controls{order:-1;padding-top:9px}
  .plate{order:0;padding:7px}
  .plate-photo{aspect-ratio:1.15}
  .look-info{order:1;padding:2px 0 0}
  .look-info h3{margin:7px 0 10px}
  .look-info p:last-child{font-size:14px}
  .look-request{order:2}
  .archive-disclosure{order:3}
  .look-arrows{margin-top:6px}
  .filmstrip button img{aspect-ratio:1.8}
  .menu,.details-grid,.consult,.contact-grid{grid-template-columns:minmax(0,1fr);gap:25px}
  .menu-head h2,.details-title h2,.consult h2,.contact h2{margin-bottom:13px}
  .service-index summary{grid-template-columns:24px minmax(0,1fr) 18px;gap:9px;padding-block:14px}
  .service-index details>p,.service-index details>a{margin-left:37px}
  .nails-card{margin:7px 0 0 8%}
  .nails-card .detail-photo{aspect-ratio:1.4}
  .consult figure{margin-right:9%}
  dialog{inset:auto 0 0;width:100%;height:auto;max-height:94dvh}
  .request-sheet{height:auto;max-height:94dvh;border-left:0;border-top:5px solid var(--salon-copper)}
  .request-bar{padding:6px 12px}
  .request-bar .wordmark{font-size:21px}
  .request-bar .languages button{min-width:33px}
}
@media(max-width:360px){
  h2{font-size:50px}
  .cover h1,html:lang(en) .cover h1,html:lang(de) .cover h1{font-size:53px}
  .request-content{padding-inline:13px}
  .field-pair{gap:7px}
  form :is(input,select,textarea){padding-inline:6px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .photo>img{transform:none}
}
.status-quiet{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
