:root{
  /* ground taken from the light of the salon photograph; one ink; one accent for the action and the field */
  --paper:#EEE9E4; --paper-2:#E4DDD6; --ink:#1D1819; --ink-2:#4A4143;
  --accent:#6A1E33; --accent-2:#541728; --on-accent:#F6EFEA;
  --face:"Literata", Georgia, "Times New Roman", serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --m:clamp(16px,2.6vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 1.125rem/1.55 var(--face);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;caret-color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
ul,ol{list-style:none}
h1,h2{font-weight:400;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.75rem,5.2vw,4.4rem);font-weight:600}
h2{font-size:clamp(1.9rem,2.8vw,2.5rem);margin-bottom:1.2rem}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.ribbon{background:var(--ink);color:var(--paper);font-size:.875rem;line-height:1.4;text-align:center;padding:.5rem var(--m)}

/* plain bar: wordmark, four links, one action */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:.75rem var(--m);background:var(--paper)}
.mark{font-weight:600;font-size:1.25rem;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;margin-right:auto}
.bar nav{display:flex;gap:1.6rem}
.bar nav a{position:relative;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .2s ease}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}

/* buttons: flat, one fill, square corners, they answer the press */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.4rem;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;font-size:1rem;transition:background-color .2s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.text-link{min-height:48px;display:inline-flex;align-items:center;font-size:1rem}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-2)}
  .bar nav a:hover,.text-link:hover{color:var(--accent)}
  .bar nav a:hover::after{transform:scaleX(1)}
}

/* the split stage: the mirror stays, the reading column moves */
.split{display:grid;grid-template-columns:45fr 55fr}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper-2)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 7s var(--ease-out)}
.stage img.on{opacity:1;transform:scale(1)}
.read{padding:0 clamp(24px,5vw,72px)}
.read section{max-width:36rem;padding:clamp(96px,14vh,160px) 0;min-height:70svh}
.read section.hero{min-height:calc(100svh - 120px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:12vh}
.statement{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.35;margin:1.4rem 0 1.6rem}
.read p+p{margin-top:1rem}
.read section>p{max-width:60ch}
.status{display:flex;align-items:center;gap:.6rem;font-size:1rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink-2);flex:none}
.status.open .dot{background:#2F7A4D}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.6rem;margin-top:1.6rem}
.phone-photo{display:none}

/* the visit is a real sequence, shown by words and position */
.visit{margin-top:2rem;display:grid;gap:1rem}
.visit li{padding:1rem 1.2rem;background:var(--paper-2)}

/* price list: a real table */
.prices,.hours{width:100%;border-collapse:collapse;margin-top:1.4rem;font-variant-numeric:tabular-nums}
.prices th,.prices td,.hours th,.hours td{text-align:left;font-weight:400;padding:.7rem 0;border-bottom:1px solid #CFC5BC}
.prices thead th{font-size:.875rem;color:var(--ink-2)}
.prices td{white-space:nowrap;padding-left:1rem}
.prices td:last-child,.hours td{text-align:right}
.prices tbody tr{transition:background-color .2s ease}
@media (hover:hover) and (pointer:fine){.prices tbody tr:hover{background:var(--paper-2)}}
.hours tr.today th,.hours tr.today td{font-weight:600;color:var(--accent)}

/* the live thing */
.planner{margin-top:1.6rem;display:grid;gap:1.4rem}
.planner fieldset{border:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.planner label{display:flex;align-items:center;gap:.7rem;min-height:48px;padding:0 1rem;background:var(--paper-2);cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.planner label:active{transform:scale(.98)}
.planner input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.planner label:has(input:checked){background:var(--accent);color:var(--on-accent)}
.result{display:block;padding:1.4rem;background:var(--ink);color:var(--paper);min-height:9.5rem}
.result .time{display:block;font-size:clamp(2rem,3.4vw,2.75rem);line-height:1.05;font-weight:600;letter-spacing:-.02em}
.result .say{display:block;margin-top:.6rem;font-size:1rem}
.result.bump .time{animation:bump .32s var(--ease-out)}
@keyframes bump{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}

.field{background:var(--accent);color:var(--on-accent);padding:clamp(96px,14vh,170px) var(--m)}
.field-statement{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.02em;max-width:18ch;margin:0 0 clamp(48px,8vh,96px) clamp(0px,6vw,96px)}
/* the one full-width break: a field of the accent with a gallery that slides */
.gallery{position:relative}
.track{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.track::-webkit-scrollbar{display:none}
.track li{flex:0 0 calc((100% - 3 * clamp(12px,1.6vw,24px)) / 4);scroll-snap-align:start}
.track figure{margin:0}
.track .frame{display:block;border-radius:20px;overflow:hidden;isolation:isolate}
.track img{width:100%;aspect-ratio:1;object-fit:cover;transition:filter .45s var(--ease-out),transform .45s var(--ease-out)}
.track figcaption{font-size:.875rem;margin-top:.7rem}
/* frosted until the pointer finds it (only where a pointer can hover; on a phone they stay clear) */
@media (hover:hover) and (pointer:fine){
  .track img{filter:blur(6px) saturate(.75);transform:scale(1.08)}
  .track li:hover img,.track li:focus-within img{filter:none;transform:none}
}
.arrows{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.6rem}
.arrow{width:52px;height:52px;border-radius:50%;border:0;background:var(--on-accent);color:var(--accent);cursor:pointer;display:grid;place-items:center;transition:transform .16s var(--ease-out),opacity .2s ease}
.arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.arrow:active{transform:scale(.94)}
.arrow:disabled{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){.arrow[data-dir="1"]:hover:not(:disabled){transform:translateX(3px)}.arrow[data-dir="-1"]:hover:not(:disabled){transform:translateX(-3px)}}

.goods{margin-top:1.6rem;display:grid;gap:1rem}
.goods li{display:grid;grid-template-columns:96px 1fr auto;gap:1rem;align-items:center;background:var(--paper-2);padding:.8rem}
.goods img{width:96px;height:96px;object-fit:cover}
.goods span{font-size:1rem}
.goods em{font-style:normal;font-weight:600}

/* the close: the name returns at full width */
.foot{background:var(--ink);color:var(--paper);padding:clamp(72px,12vh,140px) var(--m) 2rem}
.foot-name{font-size:clamp(3rem,9vw,4.4rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.foot-row{display:flex;flex-wrap:wrap;gap:1.2rem 3rem;margin-top:2.4rem;font-size:1rem}
.foot a{min-height:44px;display:inline-flex;align-items:center}
.credit{color:#CFC5BC}

/* entrances: heading, then text, then picture; content is never hidden without the script */
.js [data-rise]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.js .in [data-rise],.js [data-rise].in{opacity:1;transform:none}

/* phone: its own composition, each section opens with its picture */
@media (max-width:900px){
  .bar{gap:1rem}
  .bar nav{display:none}
  .bar .btn{padding:0 1rem;font-size:.95rem}
  .split{display:block}
  .stage{display:none}
  .read section,.read section.hero{max-width:none;min-height:0;padding:56px 0;display:block}
  .phone-photo{display:block;margin:0 calc(-1 * clamp(24px,5vw,72px)) 1.8rem}
  .phone-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .hero .phone-photo{margin-top:-56px}
  .planner fieldset{grid-template-columns:1fr}
  .track li{flex-basis:78%}
  .field-statement{margin-left:0}
}
@media (min-width:600px) and (max-width:900px){.track li{flex-basis:calc(50% - 12px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage img{transition:opacity .3s ease;transform:none}
  .js [data-rise]{transform:none;transition:opacity .3s ease}
  .btn,.planner label,.track img,.arrow{transition:none}
  .result.bump .time{animation:none}
}