/* The Cutting Room: concept design by Consult Optio.
   Art direction: a fashion zine. Huge tight Syne, aubergine and lilac,
   a lipstick accent, and the diary itself as the hero. */
@font-face{font-family:Syne;src:url(../fonts/syne-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Syne;src:url(../fonts/syne-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(../fonts/albert-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(../fonts/albert-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --bone:#f8f4f1;--white:#fff;--plum:#2b1029;--plum-2:#3d1a3a;--lilac:#e6d9f5;--lilac-2:#cdb6ec;
  --rose:#c2185b;--rose-d:#a0124a;--ink:#2b1029;--mid:#6b5a68;--line:#e3d9df;
  --disp:Syne,"Arial Black",sans-serif;--sans:"Albert Sans",system-ui,sans-serif;--wrap:1240px;--gut:40px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bone);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.ph{position:relative;overflow:hidden;margin:0}
.ph img{color:transparent;width:100%;height:100%;object-fit:cover}
.ph.nophoto img{visibility:hidden}
.hero-grid > .ph .tag,.phero-grid .ph .tag,.gal figure:nth-child(2) .tag{top:auto;bottom:12px;right:50%;transform:translateX(50%)}
.tag{position:absolute;right:12px;top:12px;background:var(--bone);color:var(--plum);font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:99px}

.concept{position:fixed;left:12px;bottom:12px;z-index:30;background:var(--plum);color:var(--lilac);font-size:11px;padding:4px 10px;border-radius:99px;pointer-events:none}

/* nav */
.nav .wrap{display:flex;align-items:center;gap:32px;height:82px}
.logo{text-decoration:none;font:800 24px/1 var(--disp);letter-spacing:-.03em}
.links{display:flex;gap:6px;margin-left:auto}
.links a{text-decoration:none;font-weight:600;font-size:15px;padding:9px 14px;border-radius:99px}
.links a:hover,.links a[aria-current]{background:var(--lilac)}
.book{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:99px;background:var(--plum);color:#fff;text-decoration:none;font-weight:600;font-size:16px;border:0;cursor:pointer;transition:background .2s,transform .2s}
.book:hover{background:var(--rose)}
.book.rose{background:var(--rose)}
.book.rose:hover{background:var(--rose-d)}
.book.ghost{background:transparent;color:var(--plum);box-shadow:inset 0 0 0 2px var(--plum)}
.book.ghost:hover{background:var(--plum);color:#fff}

/* hero */
.hero{padding:18px 0 72px}
.h1{font:800 78px/.92 var(--disp);letter-spacing:-.055em;margin-bottom:36px}
.h1 span{display:block}
.h1 .pr{color:var(--rose)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr 1.15fr;gap:28px;align-items:start}
.hero-grid > .ph{height:470px;border-radius:200px 200px 16px 16px}
.copy{padding-top:8px}
.copy p{font-size:18px;color:var(--mid);margin-bottom:26px}
.copy p b{color:var(--ink)}
.copy .book{width:100%;min-height:56px;font-size:17px;margin-bottom:10px}
.rating{margin-top:22px;border:1.5px dashed var(--lilac-2);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--mid)}
.rating b{display:block;color:var(--ink);font-size:15px}

/* the signature: the diary */
.diary{background:var(--plum);color:#fff;border-radius:22px;padding:22px;box-shadow:0 30px 60px rgba(43,16,41,.28)}
.diary h2{font:800 26px/1 var(--disp);letter-spacing:-.03em;margin-bottom:4px}
.diary .s{font-size:13px;color:#cdb6ec;margin-bottom:16px}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.day{border:0;border-radius:12px;background:rgba(255,255,255,.08);padding:9px 0;cursor:pointer;text-align:center;min-height:56px}
.day b{display:block;font:700 13px/1.2 var(--sans);color:#e6d9f5}
.day span{display:block;font:800 20px/1.1 var(--disp)}
.day[aria-pressed="true"]{background:var(--lilac);color:var(--plum)}
.day[aria-pressed="true"] b{color:var(--plum)}
.who{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.who button{border:1.5px solid rgba(230,217,245,.35);background:transparent;border-radius:99px;padding:0 12px;min-height:36px;font-size:14px;font-weight:600;cursor:pointer;color:#fff}
.who button[aria-pressed="true"]{background:#fff;color:var(--plum);border-color:#fff}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;min-height:98px;align-content:start}
.slot{border:0;border-radius:10px;background:rgba(255,255,255,.12);min-height:44px;font-weight:600;font-size:15px;cursor:pointer;color:#fff;transition:background .15s}
.slot small{display:block;font-size:11px;font-weight:400;color:#cdb6ec}
.slot:hover{background:rgba(255,255,255,.22)}
.slot[aria-pressed="true"]{background:var(--rose)}
.slot[aria-pressed="true"] small{color:#fff}
.none{grid-column:1/-1;font-size:14px;color:#cdb6ec;padding:12px 0}
.go{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;min-height:54px;border-radius:99px;background:#fff;color:var(--plum);font-weight:600;text-decoration:none;text-align:center;padding:0 14px;transition:background .2s}
.go:hover{background:var(--lilac)}
.diary .fine{font-size:12px;color:#cdb6ec;margin-top:10px;text-align:center}

/* ribbon */
.ribbon{background:var(--rose);color:#fff;overflow:hidden}
.ribbon ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;padding-top:18px;padding-bottom:18px;font:700 16px/1.2 var(--disp);letter-spacing:-.01em}
.ribbon li{display:flex;align-items:center;gap:24px;white-space:nowrap}
.ribbon li+li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lilac)}

/* sections */
.sec{padding:110px 0}
.sec.white{background:var(--white)}
.sec.lilac{background:var(--lilac)}
.sec.plum{background:var(--plum);color:#fff}
.h2{font:800 64px/.95 var(--disp);letter-spacing:-.05em;margin-bottom:20px}
.intro{font-size:18px;color:var(--mid);max-width:34em}
.plum .intro{color:#cdb6ec}
.head{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end;margin-bottom:52px}

/* services as an editorial list */
.menu{border-top:2px solid var(--plum)}
.menu li{display:grid;grid-template-columns:1fr 100px 140px 230px;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.menu h3{font:800 34px/1 var(--disp);letter-spacing:-.04em}
.menu p{font-size:15px;color:var(--mid);margin-top:6px}
.menu .d{font-size:15px;color:var(--mid)}
.menu .p{font:800 32px/1 var(--disp);letter-spacing:-.03em;text-align:right}
.menu .p small{display:block;font:400 13px/1.3 var(--sans);color:var(--mid);letter-spacing:0}
.menu a{white-space:nowrap;justify-self:end;text-decoration:none;font-weight:600;padding:10px 18px;border-radius:99px;background:var(--lilac);min-height:44px;display:inline-flex;align-items:center}
.menu a:hover{background:var(--plum);color:#fff}
.note{margin-top:22px;font-size:15px;color:var(--mid)}

/* first visit */
.visit{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:v}
.visit li{counter-increment:v;background:var(--bone);border-radius:22px;padding:28px 24px}
.visit li::before{content:counter(v);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--plum);color:#fff;font:800 20px/1 var(--disp);margin-bottom:18px}
.visit b{display:block;font:800 22px/1.05 var(--disp);letter-spacing:-.03em;margin-bottom:8px}
.visit p{font-size:15px;color:var(--mid)}

/* gallery */
.gal{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:16px;align-items:end}
.gal .ph{border-radius:18px;aspect-ratio:3/4}
.gal .ph:nth-child(2){aspect-ratio:3/5;border-radius:200px 200px 18px 18px}
.gal .ph:nth-child(3){aspect-ratio:1}
.gal figcaption{font-size:14px;color:var(--mid);margin-top:10px}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.st{background:var(--plum-2);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px}
.st .pic{aspect-ratio:1;border-radius:16px;border:1.5px dashed rgba(230,217,245,.45);display:grid;place-items:center;text-align:center;font-size:14px;color:#cdb6ec;padding:20px}
.st h3{font:800 34px/1 var(--disp);letter-spacing:-.04em}
.st p{color:#cdb6ec;font-size:15px}
.st a{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:99px;background:#fff;color:var(--plum);text-decoration:none;font-weight:600}
.st a:hover{background:var(--lilac)}

/* reviews slot */
.rv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.rv div{border:1.5px dashed var(--lilac-2);border-radius:22px;padding:28px;background:var(--white);min-height:200px;display:flex;flex-direction:column;gap:12px}
.rv b{font:800 60px/.6 var(--disp);color:var(--rose);height:28px}
.rv p{font-size:18px;color:var(--mid)}
.rv small{margin-top:auto;color:var(--mid);font-size:13px}

/* policies */
.pol{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--plum)}
.pol li{padding:24px 24px 0 0}
.pol b{display:block;font:800 22px/1.1 var(--disp);letter-spacing:-.03em;margin-bottom:8px}
.pol p{color:var(--mid);font-size:15px}

/* find us */
.find{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.hours{width:100%;border-collapse:collapse;font-size:16px}
.hours td{padding:12px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-weight:600}
.hours tr.today td{color:var(--rose);font-weight:600}
.hours tr.today td:first-child::after{content:" (today)";font-weight:400}
.addr{font:800 40px/1 var(--disp);letter-spacing:-.04em;margin-bottom:16px}
.map{margin-top:24px;aspect-ratio:16/9;border-radius:22px;background:
  linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 30%,#fff 30% 33%,transparent 33%),linear-gradient(125deg,transparent 60%,#fff 60% 62%,transparent 62%),var(--lilac);position:relative;display:grid;place-items:center;text-decoration:none}
.map span{background:var(--plum);color:#fff;border-radius:99px;padding:10px 18px;font-weight:600;font-size:15px}

.foot{background:var(--plum);color:#cdb6ec;font-size:14px;padding:64px 0 100px}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.foot .big{font:800 72px/.9 var(--disp);letter-spacing:-.06em;color:#fff;grid-column:1/-1;margin-bottom:12px}
.foot b{display:block;color:#fff;font-weight:600;margin-bottom:8px}
.foot a{color:#fff}
.foot .sl{display:inline-block;margin-top:10px;border:1px dashed rgba(205,182,236,.5);padding:5px 9px;border-radius:99px}
.foot .fn{grid-column:1/-1;border-top:1px solid rgba(205,182,236,.25);padding-top:20px}
.bar{display:none}

/* inner pages */
.phero{padding:24px 0 72px}
.phero .h1{font-size:88px;margin-bottom:28px}
.phero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.phero-grid .ph{height:440px;border-radius:200px 200px 18px 18px}
.phero-grid p.l{font-size:19px;color:var(--mid);margin-bottom:26px;max-width:30em}
.crumb{font-size:14px;color:var(--mid);margin-bottom:18px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ticks{display:grid;gap:12px;margin-top:20px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.ticks li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--rose);margin-top:7px}
.bookgrid{display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:start}

@media (max-width:1100px){
  .h1{font-size:80px}
  .hero-grid{grid-template-columns:1fr 1.1fr}
  .hero-grid > .ph{display:none}
  .menu li{grid-template-columns:1fr 120px 130px}
  .menu .d{display:none}
}
@media (max-width:900px){
  :root{--gut:20px}
  .concept{bottom:84px;left:8px;font-size:10px}
  .nav .wrap{height:64px;gap:12px}
  .links{display:none}
  .logo{font-size:18px;white-space:nowrap}
  .nav .book{white-space:nowrap}
  .copy .book .n{display:none}
  .nav .book{margin-left:auto;min-height:44px;padding:0 18px;font-size:15px}
  .hero{padding:10px 0 56px}
  .phero .h1{font-size:36px!important}
  .h1,.phero .h1{font-size:44px;letter-spacing:-.05em;margin-bottom:18px}
  .hero-grid,.phero-grid,.bookgrid{grid-template-columns:1fr;gap:22px}
  .hero-grid > .ph{display:block;height:auto;aspect-ratio:4/3;order:3;border-radius:120px 120px 16px 16px}
  .copy{padding:0}
  .copy p{font-size:16px;margin-bottom:18px}
  .copy .row{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
  .copy .book{margin:0;min-height:52px;font-size:16px}
  .rating{display:none}
  .diary{padding:18px;border-radius:18px}
  .ribbon ul{flex-wrap:wrap;justify-content:flex-start;gap:8px 18px;font-size:15px}
  .ribbon li{gap:18px}
  .sec{padding:72px 0}
  .h2{font-size:42px}
  .head,.twocol,.find{grid-template-columns:minmax(0,1fr);gap:24px}
  .head{margin-bottom:30px}
  .menu li{grid-template-columns:1fr auto;gap:10px 16px;padding:20px 0}
  .menu h3{font-size:26px}
  .menu .p{font-size:26px}
  .menu a{grid-column:1/-1;justify-self:stretch;justify-content:center}
  .visit,.team,.rv,.pol{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .gal .ph:nth-child(2){aspect-ratio:3/4}
  .addr{font-size:30px}
  .foot{padding-bottom:40px}
  .foot .wrap{grid-template-columns:minmax(0,1fr);gap:22px}
  .foot .big{font-size:40px}
  .phero-grid .ph{height:auto;aspect-ratio:4/3;border-radius:120px 120px 16px 16px}
  .bar{display:grid;grid-template-columns:1fr auto;gap:8px;position:sticky;bottom:0;z-index:20;background:var(--bone);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .bar .book{min-height:52px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}