/* BOLD by CC: a brow map. Black ink and pencil guide lines on the logo's blush white. */
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/bodoni-moda.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-grotesk.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #fffbfb;
  --blush: #f8eded;
  --ink: #000;
  --ink-2: #3b3436;
  --ink-3: #675d60;
  --pencil: rgb(0 0 0 / 0.18);
  --pencil-soft: rgb(0 0 0 / 0.08);
  --edge: rgb(0 0 0 / 0.45); /* field borders: 3:1 or more, so an empty field is visible */
  --bad: #9b1b30;
  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --wide: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--text); font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { top: 8px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A mapping ruler: a hairline with a tick at each end. */
.rule { position: relative; border-top: 1px solid var(--pencil); }
.rule::before, .rule::after { content: ''; position: absolute; top: -5px; width: 1px; height: 9px; background: var(--pencil); }
.rule::before { left: 0; }
.rule::after { right: 0; }

/* Buttons: square, inked. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  font: 600 15px/1 var(--text); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { background: var(--ink-2); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--blush); }
.btn.big { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--pencil-soft); border-color: transparent; color: var(--ink-3); cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }

/* Header */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--wide); margin: 0 auto; padding: 14px var(--gutter); }
.logo img { width: 92px; height: auto; }

/* Home: the hero */
.hero { max-width: var(--wide); margin: 0 auto; padding: clamp(8px, 3vw, 28px) var(--gutter) 0; display: grid; gap: 20px 48px; }
.hero h1 { font-size: clamp(3.1rem, 15vw, 6rem); font-weight: 900; letter-spacing: -0.035em; max-width: 11ch; }
.hero-map { position: relative; margin: 0 -6px; }
.hero-map .brow-map { width: 100%; height: auto; }
.hero-act { display: grid; gap: 18px; justify-items: start; align-content: end; padding-bottom: 8px; }
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-2); max-width: 34ch; }
.next { font-size: 15px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.proof { font-size: 15px; color: var(--ink-2); margin-top: -10px; }
.next::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
@media (min-width: 900px) {
  .hero { grid-template-columns: 4fr 7fr; grid-template-areas: 'h h' 'act map'; padding-top: 24px; }
  .hero h1 { grid-area: h; max-width: none; }
  .hero-map { grid-area: map; }
  .hero-act { grid-area: act; }
}

/* The brow map drawing */
.brow-map .map path { stroke: var(--pencil); stroke-width: 1.2; stroke-dasharray: 4 5; fill: none; }
.brow-map .hairs path { fill: var(--ink); }
.brow-map .labels text { font: 600 21px var(--text); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 8px; stroke-linejoin: round; }
.progress .brow-map .labels { display: none; }
.brow-map .points circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  /* The brow is mapped in pencil, then takes the ink from the start to the tail, as a tint does. */
  .hero .brow-map .hairs path { fill: var(--pencil); animation: ink 0.7s var(--ease) 0.3s forwards; }
  .hero .brow-map .hairs .h2 { animation-delay: 0.65s; }
  .hero .brow-map .hairs .h3 { animation-delay: 1s; }
  @keyframes ink { to { fill: var(--ink); } }
}

/* Treatments: the price list */
.menu { max-width: var(--wide); margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 40px; }
.menu-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }
.menu-head h2, .know h2 { font-size: clamp(2.4rem, 7vw, 4rem); }
.menu-head p { color: var(--ink-2); }
.tabs {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 10px var(--gutter);
  background: var(--paper); overflow-x: auto; scrollbar-width: none;
}
.tabs a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--pencil); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.tabs a:hover { border-color: var(--ink); }
.groups { display: grid; gap: 40px 48px; }
@media (min-width: 1100px) {
  .groups { grid-template-columns: repeat(3, 1fr); }
  .tabs { display: none; }
}
.group h3 { font-size: 30px; padding-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; }
.group h3 small { font: 500 13px/1 var(--text); color: var(--ink-3); letter-spacing: 0; }
.items { list-style: none; margin: 0; padding: 0; }
.item { position: relative; display: grid; grid-template-columns: 1fr auto 44px; gap: 4px 16px; align-items: center; padding: 16px 0; }
.item .name { font-weight: 600; font-size: 17px; line-height: 1.25; }
.item .meta { grid-column: 1; font-size: 14px; color: var(--ink-3); }
.item .price { grid-row: 1 / span 2; grid-column: 2; font: 700 22px/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.add {
  grid-row: 1 / span 2; grid-column: 3; width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.add:hover { background: var(--blush); }
.add[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.extra { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.extra input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.menu-empty { color: var(--ink-2); padding: 24px 0; }

/* The booking tray: what is chosen, and the way on. */
.tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ink); color: var(--paper);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  animation: rise 0.35s var(--ease);
}
.tray-in { max-width: var(--wide); margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.tray-sum { display: grid; line-height: 1.25; min-width: 0; }
.tray-sum strong { font: 700 22px/1.1 var(--display); }
.tray-sum span { font-size: 14px; color: rgb(255 251 251 / 0.75); }
@media (max-width: 420px) { .tray .btn.big { padding: 0 16px; font-size: 16px; } }
.tray .btn { margin-left: auto; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tray .btn:hover { background: var(--blush); }
.tray .btn[disabled] { background: rgb(255 251 251 / 0.2); color: rgb(255 251 251 / 0.6); border-color: transparent; }
@keyframes rise { from { transform: translateY(100%); } }
body.has-tray { padding-bottom: 88px; }

/* Good to know */
.know { max-width: var(--wide); margin: 0 auto; padding: 40px var(--gutter) 64px; display: grid; gap: 24px 48px; }
.know dl { margin: 0; display: grid; }
.know dl > div { display: grid; gap: 6px 32px; padding: 18px 0; }
.know dt { font: 700 22px/1.15 var(--display); }
.know dd { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) {
  .know { grid-template-columns: 5fr 6fr; }
  .know dl > div { grid-template-columns: 1fr 1.6fr; }
}

/* Footer */
.foot { background: var(--ink); color: var(--paper); }
.foot-in { max-width: var(--wide); margin: 0 auto; padding: 56px var(--gutter) calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 28px; }
.foot .mark { width: min(70vw, 340px); filter: invert(1); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 16px; }
.foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
.foot small { color: rgb(255 251 251 / 0.7); font-size: 13px; }
.foot .btn { background: var(--paper); color: var(--ink); justify-self: start; }

/* ---- Booking ---- */
.flow { min-height: 100vh; display: flex; flex-direction: column; }
.flow-top { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--pencil-soft); }
.flow-top-in { max-width: 760px; margin: 0 auto; padding: 8px var(--gutter); display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--blush); }
.progress { display: grid; justify-items: center; gap: 2px; }
.progress .brow-map { width: 176px; height: 66px; margin-bottom: -6px; }
/* Unfinished parts of the brow stay in pencil; each finished step inks its part. */
.progress .brow-map .map path { stroke-width: 3; }
.progress .brow-map .hairs path { fill: var(--pencil); stroke: var(--pencil); stroke-width: 2.5; transition: fill 0.6s var(--ease), stroke 0.6s var(--ease); }
.progress .brow-map .points circle { r: 9; stroke-width: 2.4; transition: fill 0.4s var(--ease); }
.progress[data-at="2"] .hairs .h1, .progress[data-at="3"] .hairs .h1, .progress[data-at="3"] .hairs .h2, .progress[data-at="4"] .hairs path { fill: var(--ink); stroke: var(--ink); }
.progress[data-at="1"] .p1, .progress[data-at="2"] .p1, .progress[data-at="2"] .p2, .progress[data-at="3"] .points circle, .progress[data-at="4"] .points circle { fill: var(--ink); }
.progress ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); }
.progress li[aria-current="step"] { color: var(--ink); font-weight: 700; }

.flow-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) 140px; }
.flow-main h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); margin-bottom: 8px; }
.sub { color: var(--ink-2); margin-bottom: 24px; }
.flow .groups { grid-template-columns: 1fr; gap: 32px; }
.flow .tabs { display: flex; top: 73px; }

.days { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scrollbar-width: thin; scrollbar-color: var(--pencil) transparent; }
.month { font: 700 20px/1 var(--display); margin: 8px 0 12px; }
.day {
  flex: none; width: 60px; min-height: 76px; display: grid; place-content: center; gap: 4px; text-align: center; scroll-snap-align: start;
  background: transparent; border: 1px solid var(--pencil); border-radius: 0; cursor: pointer;
}
.day span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.day strong { font: 700 24px/1 var(--display); }
.day:hover { border-color: var(--ink); }
.day[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.day[aria-pressed="true"] span { color: rgb(255 251 251 / 0.8); }
.day.full { color: var(--ink-3); background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--pencil-soft) 6px 7px); }
.day.full strong { font-weight: 400; }
.day.more { width: auto; padding: 0 16px; font-weight: 600; font-size: 14px; }
.slots { display: grid; gap: 22px; margin-top: 16px; }
.slots h2 { font: 600 14px/1 var(--text); color: var(--ink-3); letter-spacing: 0.02em; margin-bottom: 10px; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.time { min-height: 48px; background: transparent; border: 1px solid var(--pencil); border-radius: 0; font-weight: 600; font-size: 16px; cursor: pointer; }
.time:hover { border-color: var(--ink); }
.time[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.none { display: grid; gap: 14px; justify-items: start; padding: 20px 0; color: var(--ink-2); }

.summary { display: grid; gap: 4px; padding: 16px 0 20px; margin-bottom: 8px; }
.summary .when { font: 700 24px/1.15 var(--display); }
.summary ul { list-style: none; margin: 6px 0 0; padding: 0; color: var(--ink-2); font-size: 15px; }
.summary .row { display: flex; justify-content: space-between; gap: 16px; }
.summary .total { font-weight: 700; color: var(--ink); border-top: 1px solid var(--pencil-soft); margin-top: 6px; padding-top: 6px; }

.form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--ink-3); }
.input, .textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; background: #fff; border: 1px solid var(--edge); border-radius: 0;
  font-size: 17px; transition: border-color 0.2s var(--ease);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:hover, .textarea:hover { border-color: rgb(0 0 0 / 0.4); }
.input:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.two { display: grid; gap: 20px; }
@media (min-width: 600px) { .two { grid-template-columns: 2fr 1fr; } }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field legend { padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--edge); font-weight: 600; }
.choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.error { color: var(--bad); font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.error .icon { margin-top: 2px; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: 14px; color: var(--ink-3); }

.done h1 { font-size: clamp(3rem, 12vw, 5rem); }
.ref { margin: 4px 0 18px; font: 600 14px/1 var(--text); letter-spacing: 0.08em; color: var(--ink-3); }
.ref b { color: var(--ink); font-size: 18px; letter-spacing: 0.12em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
.keep { padding: 16px; background: var(--blush); display: grid; gap: 10px; font-size: 15px; }
.keep code { font: 500 14px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; }
.status-cancelled .when { text-decoration: line-through; text-decoration-thickness: 2px; }
.loading { color: var(--ink-3); padding: 24px 0; }
.after { margin-top: 20px; }