:root {
  /* Palette: picked from the brand board */
  --b-cream: #F1D2B6; --b-pink: #ECB9B8; --b-slate: #9195A1; --b-brown: #553028; --b-tan: #B47B68; --b-red: #862826;
  --paper: #F8E6D5; --line-green: #06C755;
  /* roles used by the components */
  --espresso: var(--b-brown); --wood: var(--b-brown); --butter: var(--b-cream); --sand: var(--b-cream);
  --rose: var(--b-pink); --wine: var(--b-red); --red: var(--b-red); --tan: var(--b-tan);
  --granite: var(--b-slate); --slate: var(--b-slate); --lavender: var(--b-slate); --pink: var(--b-pink);
  --blue: var(--slate);
  --serif: 'Fraunces', 'Noto Serif Thai', Georgia, serif;
  --sans: 'DM Sans', 'IBM Plex Sans Thai', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: var(--sans); background: var(--paper); color: var(--wood); line-height: 1.65; overflow-x: hidden; }
html[lang="th"] body { line-height: 1.8; }
h1, h2, h3, .logo { font-family: var(--serif); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
html[lang="th"] h2, html[lang="th"] h3 { line-height: 1.3; letter-spacing: 0; }
em { font-style: italic; font-weight: 500; }
html[lang="th"] h2 em { font-style: normal; color: var(--red); }
a { color: inherit; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--wood); outline-offset: 3px; }
section { padding: 5.5rem 1.5rem; position: relative; }
.tag { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: .7; margin-bottom: 1rem; }
html[lang="th"] .tag { letter-spacing: .04em; font-size: .85rem; }
.head { max-width: 1100px; margin: 0 auto 3rem; }
.head h2, .sec-head h2, .visit h2, .book h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
html[lang="th"] .head h2, html[lang="th"] .sec-head h2, html[lang="th"] .visit h2, html[lang="th"] .book h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.sub { margin-top: .8rem; opacity: .7; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* nav */
.nav-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding: .8rem 1rem; }
.nav { max-width: 1100px; margin: 0 auto; background: var(--wood); color: var(--pink); border: 2px solid var(--wood); border-radius: 999px; padding: .5rem .6rem .5rem 1.4rem; display: flex; align-items: center; gap: 1rem; box-shadow: 4px 4px 0 var(--wood); position: relative; }
.logo { color: var(--rose); text-decoration: none; font-size: 1.4rem; white-space: nowrap; margin-right: auto; }
.logo em { font-weight: 500; }
.links { display: flex; align-items: center; gap: 1.6rem; font-weight: 500; font-size: .95rem; }
.links a { text-decoration: none; }
.links a:not(.pill):hover { text-decoration: underline; text-underline-offset: 4px; }
.pill { background: var(--pink); color: var(--wood); padding: .55rem 1.2rem; border-radius: 999px; }
.nav-tools { display: flex; align-items: center; gap: .4rem; }
.soc { display: flex; gap: .2rem; }
.soc a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.soc a:hover { background: rgba(240,209,182,.18); }
.lang { display: flex; border: 2px solid var(--pink); border-radius: 999px; overflow: hidden; background: var(--wood); }
.lang button { all: unset; cursor: pointer; padding: .2rem .7rem; font: 700 .78rem var(--sans); }
.lang button[aria-pressed="true"] { background: var(--pink); color: var(--wood); }
.lang button:focus-visible { outline: 2px solid var(--pink); outline-offset: -4px; }
.nav-toggle { display: none; background: var(--pink); color: var(--wood); border: 0; border-radius: 999px; padding: .5rem 1.1rem; font: 500 .9rem var(--sans); cursor: pointer; }

/* buttons */
.cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; text-decoration: none; background: var(--wood); color: var(--butter); padding: .95rem 1.8rem; border-radius: 999px; font-weight: 700; border: 2px solid var(--wood); transition: transform .15s; }
.btn.ghost { background: transparent; color: var(--wood); }
.btn.line { background: var(--line-green); color: #fff; }
.btn:hover { transform: translateY(-2px) rotate(-1deg); }

/* hero */
.hero { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; padding-top: 3rem; padding-bottom: 5.5rem; }
.hero h1 { font-size: clamp(3.4rem, 9vw, 7rem); color: var(--wood); }
.hero h1 .jarin { color: var(--red); font-family: 'Marcellus', Georgia, serif; font-weight: 400; letter-spacing: .05em; font-size: .95em; }
.logo span { color: var(--rose); font-family: 'Marcellus', Georgia, serif; font-weight: 400; letter-spacing: .04em; }
.lead { max-width: 30rem; margin-top: 1.5rem; font-size: 1.15rem; }
.collage { position: relative; min-height: 560px; }
.door { position: absolute; inset: 0 8% 0 14%; background: var(--blue); border: 2px solid var(--wood); border-radius: 999px 999px 24px 24px; box-shadow: 8px 8px 0 var(--wood); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.door::before { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(83,46,38,.25); border-radius: 999px 999px 14px 14px; }
.door img { position: relative; width: 72%; margin-bottom: 1.2rem; }
.chip { position: absolute; border: 2px solid var(--wood); border-radius: 14px; padding: .7rem 1rem; font-size: .75rem; line-height: 1.3; box-shadow: 4px 4px 0 var(--wood); }
.chip b { display: block; font-family: var(--serif); font-size: 1.05rem; }
.c-blue { background: var(--slate); color: var(--espresso); top: 8%; left: 0; transform: rotate(-6deg); }
.c-wood { background: var(--wine); color: var(--sand); bottom: 22%; left: -2%; transform: rotate(4deg); }
.c-butter { background: var(--pink); bottom: 6%; right: 0; transform: rotate(-4deg); }
.sticker { position: absolute; top: 4%; right: 0; width: 110px; height: 110px; border-radius: 50%; background: var(--butter); border: 2px solid var(--wood); display: grid; place-items: center; text-align: center; font: italic 500 .95rem/1.1 var(--serif); transform: rotate(12deg); box-shadow: 3px 3px 0 var(--wood); }
html[lang="th"] .sticker { font-style: normal; font-size: .85rem; line-height: 1.3; }
.spark { position: absolute; font-size: 1.6rem; color: var(--wood); }
.s1 { top: 40%; right: -2%; } .s2 { bottom: 40%; left: 8%; font-size: 1rem; }

/* services & prices (blue band, printed-menu layout) */
.services { background: var(--lavender); border-block: 2px solid var(--wood); padding-bottom: 7rem; }
.sec-head { max-width: 1100px; margin: 0 auto 3rem; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.2rem 3rem; align-items: end; }
.sec-head .sub { max-width: 42ch; justify-self: end; }
.menu { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3.5rem; }
.menu-group h3 { font-size: 1.7rem; padding-bottom: .7rem; border-bottom: 2px solid var(--wood); }
.menu-group .note { font-size: .9rem; opacity: .75; margin: .8rem 0 .2rem; }
.item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .1rem 1rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px dashed rgba(85,48,40,.45); }
.item .name { font-weight: 700; font-size: 1.05rem; }
.item .price { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item .desc { font-size: .9rem; opacity: .8; }
.item .time { font-size: .82rem; opacity: .75; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.fineprint { max-width: 1100px; margin: 2rem auto 0; font-size: .88rem; opacity: .75; }
.cat-lie { width: min(300px, 55%); margin: 2.5rem 0 -7rem auto; position: relative; z-index: 2; }
.services > .cat-wrap { max-width: 1100px; margin: 0 auto; }

/* gallery */
.wall { --cols: 5; --gx: 1.6rem; max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem var(--gx); padding-top: 1rem; }
.wall .pol { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); min-width: 0; }
@media (max-width: 1000px) { .wall { --cols: 3; } }
.pol { background: #FFFAF4; padding: .8rem .8rem 0; border: 2px solid var(--wood); box-shadow: 5px 5px 0 var(--wood); position: relative; }
.pol figcaption { font: italic 500 1.1rem var(--serif); text-align: center; padding: .8rem 0 1rem; }
.ph { aspect-ratio: 1; border: 1px solid rgba(85,48,40,.25); }
.ph.blue { background: var(--lavender); } .ph.butter { background: var(--pink); } .ph.wood { background: var(--red); }
.ph.fade { background: linear-gradient(160deg, var(--butter), var(--tan)); }
.ph.fade2 { background: linear-gradient(160deg, var(--slate), var(--pink)); }
.tape { position: absolute; top: -14px; left: 50%; width: 80px; height: 26px; background: rgba(144,148,160,.55); transform: translateX(-50%) rotate(-3deg); border: 1px dashed rgba(85,48,40,.3); }
.p1 { transform: rotate(-3deg); } .p2 { transform: rotate(2deg) translateY(14px); } .p3 { transform: rotate(-2deg); } .p4 { transform: rotate(3deg) translateY(10px); } .p5 { transform: rotate(-2deg); }
.follow { max-width: 1100px; margin: 3rem auto 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.cat-walk { position: absolute; left: 1rem; bottom: -3rem; width: 110px; z-index: 2; }

/* how to book (brown band) */
.book { background: var(--wine); color: var(--butter); display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-inline: max(1.5rem, calc((100% - 1100px)/2)); }
.book .tag { opacity: .75; }
.book h2 { margin-bottom: 2.2rem; }
.steps { list-style: none; display: grid; gap: 1.6rem; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 1.1rem; counter-increment: s; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: var(--wood); display: grid; place-items: center; font: italic 500 1.2rem var(--serif); }
.steps strong { display: block; font-weight: 700; font-size: 1.05rem; }
.steps span { opacity: .85; font-size: .95rem; }
.line-card { background: var(--butter); color: var(--wood); border: 2px solid var(--butter); border-radius: 22px; padding: 2.4rem 2.2rem; display: grid; gap: 1.2rem; position: relative; box-shadow: 8px 8px 0 var(--rose); margin-top: 4rem; }
.line-card h3 { font-size: 1.9rem; }
.line-card p { opacity: .8; }
.cat-yarn { position: absolute; top: -110px; right: 1.5rem; width: 110px; }
.line-id { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; background: var(--paper); border: 2px solid var(--wood); border-radius: 999px; padding: .4rem .4rem .4rem 1.2rem; }
.line-id small { opacity: .65; font-size: .8rem; margin-right: .4rem; }
.line-id code { font: 700 1.05rem var(--sans); user-select: all; }
.copy { all: unset; cursor: pointer; background: var(--wood); color: var(--butter); padding: .4rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.copy:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }

/* visit */
.visit { background: var(--butter); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; max-width: none; padding-inline: max(1.5rem, calc((100% - 1100px)/2)); }
address { font-style: normal; margin-top: 1.5rem; font-size: 1.1rem; }
address a { text-underline-offset: 3px; }
.contact-soc { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .8rem; }
.contact-soc a { display: inline-flex; align-items: center; gap: .45rem; }
.hours { background: var(--paper); border: 2px solid var(--wood); border-radius: 22px; box-shadow: 6px 6px 0 var(--wood); padding: 1.8rem; margin-top: 5rem; position: relative; }
.cat-curl { position: absolute; top: -95px; right: 1.5rem; width: 180px; }
.hours h3 { font-size: 1.7rem; margin-bottom: 1rem; }
dl { display: grid; grid-template-columns: 1fr auto; }
dt, dd { padding: .6rem 0; border-top: 1px dashed rgba(85,48,40,.35); }
dd { font-weight: 700; text-align: right; }

footer { background: var(--wood); color: var(--butter); text-align: center; padding: 2.5rem 1rem; font-size: .85rem; position: relative; }
footer img { width: 70px; margin: -4.5rem auto .5rem; }

/* responsive */
@media (max-width: 860px) {
  .hero, .visit, .book, .sec-head, .menu { grid-template-columns: 1fr; }
  .sec-head .sub { justify-self: start; }
  .menu { gap: 2.5rem; }
  .book { gap: 2.5rem; }
  .collage { min-height: 460px; width: 100%; max-width: 400px; justify-self: center; }
  .door img { width: 56%; }
  .nav-toggle { display: block; }
  .links { display: none; position: absolute; top: calc(100% + .5rem); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--wood); color: var(--pink); border: 2px solid var(--wood); border-radius: 22px; padding: 1rem 1.4rem; box-shadow: 4px 4px 0 var(--wood); text-align: center; }
  .links.open { display: flex; }
  .hours { margin-top: 4rem; }
}
@media (max-width: 560px) {
  section { padding-block: 4rem; }
  .nav { padding-left: 1rem; gap: .5rem; }
  .logo { font-size: 1.15rem; }
  .soc { display: none; }
  .cat-walk { width: 80px; bottom: -2rem; }
  .wall { --cols: 2; --gx: 1rem; row-gap: 1.8rem; }
  .pol figcaption { font-size: .95rem; }
  .collage { min-height: 420px; }
  .door { inset: 0 10% 0 12%; }
  .sticker { width: 92px; height: 92px; font-size: .8rem; }
  .line-card { padding: 2rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .card { transition: none; } }

/* nav focus on dark bar */
.nav :focus-visible { outline-color: var(--pink); }
/* keep small text readable on the blue-grey band */
.services .tag, .services .sub, .services .note, .services .desc, .services .time, .services .fineprint { opacity: 1; }

/* ===== Brand-board colour arrangement ===== */
.nav { background: var(--b-pink); color: var(--b-brown); }
.logo { color: var(--b-brown); }
.logo span { color: var(--b-red); }
.pill { background: var(--b-brown); color: var(--b-pink); }
.soc a:hover { background: rgba(255,255,255,.35); }
.lang { border-color: var(--b-brown); background: var(--paper); }
.lang button[aria-pressed="true"] { background: var(--b-brown); color: var(--b-pink); }
.nav-toggle { background: var(--b-brown); color: var(--b-pink); }
.nav :focus-visible { outline-color: var(--b-brown); }
@media (max-width: 860px) { .links { background: var(--b-pink); color: var(--b-brown); } }

.door { background: var(--b-slate); }
.door::before { border-color: rgba(241,210,182,.6); }
.c-blue { background: var(--b-slate); color: var(--b-brown); }
.c-wood { background: var(--b-red); color: var(--b-cream); }
.c-butter { background: var(--b-pink); color: var(--b-brown); }
.sticker { background: var(--b-cream); }

.harlequin { height: 44px; border-block: 2px solid var(--b-brown); background: repeating-conic-gradient(from 45deg, var(--b-slate) 0 25%, var(--b-cream) 0 50%) 50% 50% / 44px 44px; }
.harlequin + .services { border-top: 0; }

.services { background: var(--b-brown); color: var(--b-cream); }
.services h2, .services .menu-group h3 { color: var(--b-pink); }
.services .menu-group h3 { border-bottom-color: var(--b-pink); }
.services .item { border-bottom-color: rgba(241,210,182,.35); }
.services .price { color: var(--b-pink); }
.services .desc, .services .time, .services .note, .services .sub, .services .fineprint { opacity: .85; }

.ph.blue { background: var(--b-slate); } .ph.butter { background: var(--b-pink); } .ph.wood { background: var(--b-red); }
.ph.fade { background: linear-gradient(160deg, var(--b-cream), var(--b-tan)); }
.ph.fade2 { background: linear-gradient(160deg, var(--b-slate), var(--b-pink)); }
.tape { background: rgba(180,123,104,.55); }

.book { background: var(--b-red); color: var(--b-cream); }
.book h2 { color: var(--b-cream); }
.steps li::before { background: var(--b-cream); color: var(--b-brown); }
.line-card { background: var(--b-cream); box-shadow: 8px 8px 0 var(--b-brown); }

.visit { background: var(--b-cream); }
.visit h2 em, html[lang="th"] .visit h2 em { color: var(--b-red); }
footer { background: var(--b-brown); color: var(--b-pink); }

/* ===== Hero buttons as colour chips ===== */
.btn.chip-btn { border-radius: 14px; font-family: var(--serif); box-shadow: 4px 4px 0 var(--b-brown); border-color: var(--b-brown); }
.c-slate { background: var(--b-slate); color: var(--b-brown); transform: rotate(-2deg); }
.c-cherry { background: var(--b-red); color: var(--b-cream); transform: rotate(1.5deg); }
.c-blush { background: var(--b-pink); color: var(--b-brown); transform: rotate(-1deg); }
.btn.chip-btn:hover { transform: rotate(0) translateY(-2px); }
.btn.chip-btn.small { padding: .6rem 1.1rem; font-size: .9rem; transform: none; }

/* ===== Calendar ===== */
.cal-wrap { position: relative; width: 100%; max-width: 440px; justify-self: start; }
.cal-wrap .s1 { top: -34px; right: auto; left: 18%; } .cal-wrap .s2 { top: auto; bottom: -26px; left: 12%; }
.cal { position: relative; background: var(--paper); border: 2px solid var(--b-brown); border-radius: 22px; box-shadow: 8px 8px 0 var(--b-brown); padding: 1.3rem 1.3rem 1.2rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.cal-head h3 { font-size: 1.45rem; text-align: center; }
.cal-nav { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--b-brown); background: var(--b-pink); color: var(--b-brown); font: 700 1.3rem/1 var(--serif); cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.cal-dow { margin-bottom: 6px; }
.cal-dow span { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.day { aspect-ratio: 1; max-width: 100%; border-radius: 10px; border: 1.5px solid transparent; font: 500 .95rem var(--sans); font-variant-numeric: tabular-nums; color: var(--b-brown); cursor: pointer; display: grid; place-items: center; padding: 0; }
.day.open { background: var(--b-cream); }
.day.open:hover { border-color: var(--b-brown); }
.day.full { background: var(--b-pink); text-decoration: line-through; opacity: .8; cursor: default; }
.day.closed { background: repeating-linear-gradient(135deg, rgba(145,149,161,.25) 0 4px, transparent 4px 8px); color: rgba(85,48,40,.45); cursor: default; }
.day.past { background: transparent; color: rgba(85,48,40,.3); cursor: default; }
.day.today { border: 2px solid var(--b-red); }
.day[aria-pressed="true"] { background: var(--b-red); color: var(--b-cream); border-color: var(--b-red); }
.cal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; font-size: .8rem; }
.cal-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.lg { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(85,48,40,.3); display: inline-block; }
.lg-open { background: var(--b-cream); } .lg-full { background: var(--b-pink); }
.lg-closed { background: repeating-linear-gradient(135deg, rgba(145,149,161,.45) 0 3px, transparent 3px 6px); }
.cal-pick { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(85,48,40,.35); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; min-height: 3.2rem; }
.cal-pick p { font-size: .95rem; line-height: 1.4; min-width: 0; }
.picked { background: var(--paper); border: 2px dashed var(--b-red); border-radius: 14px; padding: .7rem 1rem; font-size: .95rem; opacity: 1 !important; }

@media (max-width: 420px) { .cal { padding: 1rem .8rem; } .cal-grid { gap: 4px; } .day { font-size: .85rem; border-radius: 8px; }  }

/* calendar: partly / fully booked + selection */
.day.part { background: var(--b-pink); }
.day.part:hover { border-color: var(--b-brown); }
.day.full { background: var(--b-red); color: var(--b-cream); text-decoration: line-through; opacity: 1; }
.day[aria-pressed="true"] { background: var(--b-slate); color: var(--b-brown); border: 2px solid var(--b-brown); }
.lg-part { background: var(--b-pink); } .lg-full { background: var(--b-red); }
.cal-grid .pad { aspect-ratio: 1; }
.cal-pick { min-height: 4.2rem; }

/* studio cat, bottom right of the hero; tap for the badge */
.cat-spot { position: absolute; right: 1rem; bottom: -6px; width: 120px; z-index: 3; }
.cat-btn { all: unset; display: block; cursor: pointer; transition: transform .2s; }
.cat-btn img { width: 100%; display: block; }
.cat-btn:hover { transform: rotate(-3deg); }
.cat-btn:focus-visible { outline: 2px solid var(--b-brown); outline-offset: 4px; border-radius: 12px; }
.cat-spot .sticker { position: absolute; top: auto; left: auto; right: 50%; bottom: calc(100% + 6px); transform: translateX(var(--tx, 50%)) rotate(-8deg); width: 100px; height: 100px; font-size: .85rem; background: var(--b-cream); animation: pop .25s ease-out; }
.cat-spot .sticker::after { content: ""; position: absolute; bottom: -9px; left: 50%; width: 14px; height: 14px; background: var(--b-cream); border-right: 2px solid var(--b-brown); border-bottom: 2px solid var(--b-brown); transform: translateX(-50%) rotate(45deg); }
.cat-spot .sticker::after { left: var(--arrow, 50%); }
@keyframes pop { from { transform: translateX(var(--tx, 50%)) rotate(-8deg) scale(.6); opacity: 0; } }
@media (max-width: 860px) { .cal-wrap { justify-self: center; } .cat-spot { width: 97px; right: .5rem; } .cat-spot .sticker { right: 4px; --tx: 0; --arrow: 70%; } .hero { padding-bottom: 7rem; } }
@media (prefers-reduced-motion: reduce) { .cat-spot .sticker { animation: none; } }

.book .steps strong, .book .steps span { color: var(--b-cream); }

/* cat looks tappable */
.cat-btn img { filter: drop-shadow(4px 4px 0 var(--b-brown)); }
.cat-btn:hover img, .cat-btn[aria-expanded="true"] img { filter: drop-shadow(6px 6px 0 var(--b-brown)); }
.cat-btn:active { transform: translate(2px,2px); }

.pay { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.pay-label { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: .7; margin-right: .2rem; }
html[lang="th"] .pay-label { letter-spacing: .04em; font-size: .85rem; }
.pay-chip { background: var(--paper); border: 2px solid var(--b-brown); border-radius: 12px; padding: .35rem .9rem; font-weight: 700; font-size: .95rem; box-shadow: 3px 3px 0 var(--b-brown); }

@media (max-width: 560px) { .pay-label { flex-basis: 100%; } }

/* calendar: loading state + time slots for the chosen day */
.day.loading { background: rgba(145,149,161,.12); color: rgba(85,48,40,.35); cursor: default; }
.cal-pick { min-height: 6.5rem; align-items: flex-start; }
.cal-pick p { display: grid; gap: .45rem; flex: 1 1 14rem; }
.slots { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.slot-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; min-width: 5.2rem; }
html[lang="th"] .slot-label { letter-spacing: .02em; font-size: .8rem; }
.slot { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: .15rem .55rem; border-radius: 8px; border: 1.5px solid var(--b-brown); }
.slot.free { background: var(--b-cream); }
.slot.taken { background: var(--b-red); color: var(--b-cream); border-color: var(--b-red); text-decoration: line-through; }
.cal-pick { flex-direction: column; align-items: stretch; }
.cal-pick p { flex: none; }
.cal-pick .slot-label { min-width: 6.2rem; }
#cal-book { align-self: flex-start; }

/* chosen-day panel: fixed height so the page never jumps */
.cal-pick { display: grid; grid-template-rows: 2.6rem 2.1rem 2.1rem; gap: .35rem; height: auto; min-height: 0; padding-top: .9rem; }
.pick-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; }
.pick-head p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; display: block; }
#cal-book { flex-shrink: 0; padding: .45rem .9rem; font-size: .85rem; }
.slots-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.slots-row .slot-label { flex-shrink: 0; min-width: 5.6rem; }
.slot-scroll { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.slot-scroll::-webkit-scrollbar { display: none; }
.slot { white-space: nowrap; flex-shrink: 0; }
.slot-none { opacity: .5; }
.cal-pick:not(.has-pick) #cal-book, .cal-pick:not(.has-pick) .slots-row { visibility: hidden; }

/* polaroids: one swipeable row on phones instead of three rows */
@media (max-width: 560px) {
  .wall { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.2rem; padding: 1.4rem 1.5rem 1.6rem; margin-inline: -1.5rem; scrollbar-width: none; }
  .wall::-webkit-scrollbar { display: none; }
  .wall .pol { flex: 0 0 62%; scroll-snap-align: center; }
  .swipe-hint { display: block; }
}
.swipe-hint { display: none; text-align: center; font-size: .8rem; opacity: .6; margin-top: .2rem; }
@media (max-width: 560px) { .swipe-hint { display: block; } }

/* clickable time slots */
button.slot { font-family: var(--sans); color: var(--b-brown); cursor: pointer; line-height: 1.4; }
button.slot.free:hover { border-width: 2px; }
button.slot.free[aria-pressed="true"] { background: var(--b-slate); color: var(--b-brown); border: 2px solid var(--b-brown); }
button.slot:focus-visible { outline: 2px solid var(--b-brown); outline-offset: 2px; }
/* mouse dragging on scroll rows */
.slot-scroll { cursor: grab; }
@media (max-width: 560px) { .wall { cursor: grab; } }
.slot-scroll.dragging, .wall.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media (min-width: 561px) { .wall { cursor: auto; } }
/* keep the chosen-day panel exactly the width of the calendar (button never shifts) */
.cal-pick { grid-template-columns: minmax(0, 1fr); width: 100%; }
.cal { width: 100%; }
.slot { border-width: 2px; }
button.slot.free:hover { border-width: 2px; background: #FFF4E8; }
button.slot.free[aria-pressed="true"]:hover { background: var(--b-slate); }

/* find us: home studio note */
.visit-note { margin-top: 1rem; max-width: 30rem; opacity: .8; }
address { margin-top: 1rem; }

/* all cats: shadow + tap for a speech bubble */
.cat-click { cursor: pointer; filter: drop-shadow(4px 4px 0 var(--b-brown)); transition: transform .2s, filter .2s; }
.cat-click:hover { filter: drop-shadow(6px 6px 0 var(--b-brown)); transform: rotate(-3deg); }
.cat-click:focus-visible { outline: 2px solid var(--b-brown); outline-offset: 4px; border-radius: 12px; }
footer img.cat-click { filter: drop-shadow(3px 3px 0 rgba(0,0,0,.35)); }
.cat-tip { position: absolute; z-index: 50; max-width: 220px; background: var(--b-cream); color: var(--b-brown); border: 2px solid var(--b-brown); border-radius: 16px; box-shadow: 3px 3px 0 var(--b-brown); padding: .55rem .85rem; font: italic 500 .95rem/1.3 var(--serif); text-align: center; animation: tipIn .2s ease-out; }
html[lang="th"] .cat-tip { font-style: normal; }
.cat-tip::after { content: ""; position: absolute; bottom: -9px; left: var(--arrow, 50%); width: 14px; height: 14px; background: var(--b-cream); border-right: 2px solid var(--b-brown); border-bottom: 2px solid var(--b-brown); transform: translateX(-50%) rotate(45deg); }
@keyframes tipIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cat-tip { animation: none; } .cat-click { transition: none; } }

/* calendar legend: keep all four on one line */
.cal-legend { flex-wrap: nowrap; justify-content: space-between; gap: .4rem; font-size: clamp(.66rem, 2.4vw, .8rem); white-space: nowrap; }
.cal-legend > span { gap: .3rem; }
.lg { width: 12px; height: 12px; flex-shrink: 0; }
@media (max-width: 340px) { .cal-legend { flex-wrap: wrap; } }