*{box-sizing:border-box}html{scroll-behavior:smooth}body{--ink:#33281c;--paper:#faf5e9;--accent:#643925;margin:0;color:var(--ink);background:var(--paper);font:16px/1.6 Arial,sans-serif}.barber{--ink:#20211c;--paper:#ebece3;--accent:#cbe35d}.salon{--ink:#512f3c;--paper:#fff7f4;--accent:#86445e}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button,select,input{font:inherit}button,summary{cursor:pointer}.return{display:flex;justify-content:space-between;gap:10px;background:#17171c;color:#e9e6ff;padding:6px 6vw;font:12px/1.6 Arial,sans-serif}.return span{color:#cbc1ec}header,footer{display:flex;align-items:center;justify-content:space-between;padding:18px 6vw;gap:20px}header{border-bottom:1px solid #8884}nav{display:flex;gap:26px;font-size:14px}.logo{font:italic 32px Georgia}.barber .logo,.barber h1,.barber h2,.barber h3{font-family:Arial,Helvetica,sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:-.015em}.salon .logo{font:28px Georgia}.button,details button{background:var(--accent);color:white;border:0;display:inline-block;padding:13px 22px;font-weight:bold;font-size:14px;transition:filter .2s}.button:hover{filter:brightness(1.1)}.barber .button{color:#151814}.salon .button{border-radius:50px}.hero{position:relative;min-height:550px;display:flex;align-items:center;isolation:isolate}.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.restaurant .hero{color:#fff;background:#30251f}.restaurant .hero img{object-position:50% 50%}.restaurant .hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#140e09e8,#140e0970 55%,#140e0922)}.hero-text{width:min(700px,82%);padding:55px 0;margin-left:8%}.hero-text p{max-width:390px;margin:20px 0 30px}.hero h1{font:normal clamp(66px,7vw,114px)/.96 Georgia;letter-spacing:-.067em;margin:20px 0}.barber .hero{background:#20221d;color:var(--paper)}.barber .hero img{left:52%;width:48%;filter:grayscale(1)}.barber .hero-text{width:48%;margin-left:6%}.barber .hero h1{font:700 clamp(38px,4.7vw,72px)/1.12 Arial,Helvetica,sans-serif;letter-spacing:-.025em;word-spacing:.04em}.barber h1 em{color:var(--accent);font-style:normal}.salon .hero{margin:32px 6vw;background:#f3e5e1;min-height:520px}.salon .hero img{width:45%;height:85%;left:auto;right:4%;top:7.5%;border-radius:50% 50% 3px 3px}.salon .hero-text{width:43%;margin-left:5%}.salon h1{font-size:clamp(55px,6.5vw,110px)}small,figcaption{font:600 11px/1.7 'Courier New',monospace;text-transform:uppercase;letter-spacing:1.5px}.block{padding:65px max(7vw,calc((100vw - 1350px)/2));border-bottom:1px solid #8885}h2{font:normal clamp(37px,4.4vw,75px)/1 Georgia;letter-spacing:-.055em;margin:14px 0 26px}h3{font:normal 25px/1.2 Georgia;margin:4px 0}.filters{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}.filters button{background:transparent;color:inherit;border:1px solid #8889;border-radius:25px;padding:6px 15px;font-size:14px}.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.barber .filters button{border-radius:0}.items{display:grid;grid-template-columns:repeat(2,1fr);column-gap:40px}.items article{padding:20px 0;border-top:1px solid #8886;display:flex;justify-content:space-between;align-items:center;gap:10px}.items article[hidden]{display:none}.items p{margin:5px 0 0}.items strong{white-space:nowrap}.gallery{background:#e8ddcb}.barber .gallery{background:#24251f;color:white}.salon .gallery{background:#f4e8e6}.gallery>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}figure{margin:0}figure img{width:100%;aspect-ratio:1/1;object-fit:cover}.salon figure:nth-child(2) img{border-radius:50% 50% 0 0}.barber figure img{filter:grayscale(1)}.booking{display:grid;grid-template-columns:1fr 1fr;gap:8vw}details{margin-top:24px;padding:15px;border:1px solid #8886}summary{font-weight:bold}details select{margin-bottom:14px}form,label{display:grid;gap:8px}form{align-content:start;gap:16px}label{font-size:14px;font-weight:bold}.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}input,select{padding:12px;width:100%;min-width:0;border:1px solid #918682;background:#fff;color:#202024;border-radius:3px}output{display:block;font-weight:bold;margin-top:8px}footer{background:var(--ink);color:var(--paper)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #6a79dc;outline-offset:3px}@media(max-width:700px){header{flex-wrap:wrap;gap:10px}header nav{order:3;width:100%;gap:25px}.logo{font-size:24px}header .button{font-size:12px;padding:10px}.hero{min-height:445px}.hero-text{margin-left:6%}.barber .hero,.salon .hero{display:flex;flex-direction:column-reverse}.barber .hero-text,.salon .hero-text{width:90%;margin:0;padding:32px 0}.barber .hero img,.salon .hero img{position:relative;width:100%;height:260px;inset:auto;z-index:0}.salon .hero img{width:90%;border-radius:40% 40% 0 0}.salon .hero{padding-bottom:20px}.block{padding-block:46px}.items,.booking{grid-template-columns:1fr}.gallery>div{gap:8px}.gallery figcaption{font-size:8px;letter-spacing:.6px}.return{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.motion-paused *{transition:none!important}}

/* Each signature turns around a fixed monogram. */
.hero { overflow: hidden; }
.hero-signature {
  position: absolute; top: 18px; right: 20px; z-index: 1;
  width: clamp(68px, 7vw, 104px); aspect-ratio: 1;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  display: grid; place-items: center; pointer-events: none;
}
.hero-signature svg { width: 100%; grid-area: 1/1; animation: signature-turn 15s linear infinite; }
.hero-signature text { fill: currentColor; font: bold 9px Arial,sans-serif; letter-spacing: 1.6px; }
.hero-signature b { grid-area: 1/1; font: italic 23px Georgia,serif; }
.barber .hero-signature { background: var(--accent); }
.barber .hero-signature b { font: 700 22px Arial,sans-serif; }
.salon .hero-signature { background: #f5dee7; }
.motion-toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  padding: 8px 13px; min-height: 40px; border-radius: 30px;
  border: 1px solid currentColor; background: var(--paper); color: var(--ink);
  font: 600 12px Arial,sans-serif;
}
@keyframes signature-turn { to { transform: rotate(360deg); } }
@keyframes hearth-photo { to { transform: scale(1.075); } }
@keyframes chair-photo { to { object-position: 50% 38%; } }
@keyframes atelier-photo { to { translate: 0 -7px; } }
.restaurant .hero img { animation: hearth-photo 9s ease-in-out infinite alternate; }
.barber .hero img { animation: chair-photo 7s ease-in-out infinite alternate; }
.salon .hero img { animation: atelier-photo 5s ease-in-out infinite alternate; }
@keyframes copy-arrival {
  from { opacity: .55; translate: var(--text-x,0) var(--text-y,18px); }
  to { opacity: 1; translate: 0 0; }
}
.barber { --text-x: -16px; --text-y: 0; }
.salon { --text-y: 22px; }
body:not(.motion-paused) .text-arriving { animation: copy-arrival .72s ease-out; }
.motion-paused .hero-signature svg, .motion-paused .hero img { animation-play-state: paused; }
@media (hover:hover) and (pointer:fine) {
  body:not(.motion-paused) main :is(h1,h2,h3,p,figcaption) { transition: transform .28s ease-out; }
  body:not(.motion-paused) main :is(h1,h2,h3,p,figcaption):hover { transform: translateX(5px); }
}
@media (max-width:700px) {
  .hero-signature { width: 60px; top: 10px; right: 12px; }
  .barber .hero-signature, .salon .hero-signature { top: auto; bottom: 70px; }
  .restaurant .hero-text { padding-block: 78px; }
}

/* Give Cutline's uppercase headings room to read. */
.barber h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.15; }
.barber h3 { font-size: 22px; line-height: 1.3; letter-spacing: 0; }
.barber .logo { font-size: 27px; line-height: 1.2; letter-spacing: -.02em; }
@media (max-width: 700px) {
  .barber .hero h1 { font-size: clamp(36px, 8.5vw, 56px); }
  .barber .logo { font-size: 24px; }
}