: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: 'Young Serif', Georgia, serif; font-weight: 400; letter-spacing: .01em; font-size: .95em; }
.logo span { color: var(--rose); font-family: 'Young Serif', Georgia, serif; font-weight: 400; letter-spacing: .01em; }
.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; } }

/* calendar could not load */
.day.error { background: rgba(145,149,161,.12); color: rgba(85,48,40,.35); cursor: default; }
#cal-retry { display: none; flex-shrink: 0; padding: .45rem .9rem; font-size: .85rem; }
.cal-pick.is-error #cal-retry { display: inline-flex; }
.cal-pick.is-error #cal-book { display: none; }
.cal-pick.is-error { grid-template-rows: auto; }
.cal-pick.is-error .slots-row { display: none; }
.cal-pick.is-error .pick-head { min-height: 7.5rem; align-items: center; }
.cal-pick.is-error .pick-head p { white-space: normal; overflow: visible; line-height: 1.4; }
.cal-pick .pick-head p { flex: 1 1 auto; }

/* ===== calendar size toggle ===== */
.cal-head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .5rem; }
.cal-size { display: inline-flex; align-items: center; gap: .35rem; border: 2px solid var(--b-brown); background: var(--paper); color: var(--b-brown); border-radius: 999px; padding: .35rem .7rem; font: 700 .78rem var(--sans); cursor: pointer; }
.cal-size:hover { background: var(--b-cream); }
.cal-size:focus-visible { outline: 2px solid var(--b-brown); outline-offset: 2px; }
.cal-size .icon { width: 15px; height: 15px; }
.cal-size .i-shrink, .cal-big .cal-size .i-grow { display: none; }
.cal-big .cal-size .i-shrink { display: block; }
.pick-empty { display: none; }

/* ===== big calendar layout ===== */
.hero.cal-big { grid-template-columns: 1fr; }
.hero.cal-big .hero-copy { display: none; }
.hero.cal-big .cal-wrap { max-width: 1040px; justify-self: center; }
.hero.cal-big .cal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "head pick" "dow pick" "days pick" "legend pick"; grid-template-rows: auto auto 1fr auto; column-gap: 2rem; padding: 1.6rem 1.8rem; }
.hero.cal-big .cal-head { grid-area: head; }
.hero.cal-big .cal-head h3 { font-size: 1.8rem; }
.hero.cal-big #cal-dow { grid-area: dow; }
.hero.cal-big #cal-days { grid-area: days; gap: 8px; }
.hero.cal-big .day { font-size: 1.05rem; border-radius: 12px; }
.hero.cal-big .cal-legend { grid-area: legend; }
.hero.cal-big .cal-pick { grid-area: pick; margin: 0; padding: 0 0 0 2rem; border-top: 0; border-left: 2px dashed rgba(85,48,40,.3); display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; overflow: hidden; }
.hero.cal-big .pick-empty { display: block; margin: auto 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.25rem; opacity: .6; }
.hero.cal-big .cal-pick.has-pick .pick-empty, .hero.cal-big .cal-pick.is-error .pick-empty { display: none; }
.hero.cal-big .pick-head { display: contents; }
.hero.cal-big #cal-sel { order: 1; white-space: normal; overflow: visible; font-size: 1.5rem; font-family: var(--serif); line-height: 1.2; }
.hero.cal-big #row-free { order: 2; } .hero.cal-big #row-taken { order: 3; }
.hero.cal-big #cal-book { order: 4; align-self: flex-start; padding: .7rem 1.3rem; font-size: .95rem; margin-top: auto; }
.hero.cal-big #cal-retry { order: 2; align-self: flex-start; }
.hero.cal-big .slots-row { flex-direction: column; align-items: stretch; gap: .5rem; min-height: 0; }
.hero.cal-big .slots-row .slot-label { min-width: 0; }
.hero.cal-big .slot-scroll { flex-wrap: wrap; overflow: visible; cursor: auto; gap: .5rem; }
.hero.cal-big .slot { font-size: 1rem; padding: .45rem .8rem; border-radius: 10px; }
.hero.cal-big .cal-pick:not(.has-pick) .slots-row,
.hero.cal-big .cal-pick:not(.has-pick) #cal-book { display: none; }
.hero.cal-big .cal-pick:not(.has-pick):not(.is-error) #cal-sel:empty { display: none; }
.hero.cal-big .cal-pick.is-error #cal-sel { font-size: 1.1rem; font-family: var(--sans); margin-top: auto; }
.hero.cal-big .cal-pick.is-error #cal-retry { margin-bottom: auto; }
@media (max-width: 860px) {
  .hero.cal-big .cal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "dow" "days" "legend" "pick"; padding: 1.2rem 1rem; }
  .hero.cal-big .cal-pick { padding: 1rem 0 0; border-left: 0; border-top: 2px dashed rgba(85,48,40,.3); margin-top: 1rem; min-height: 14rem; }
  .hero.cal-big #cal-sel { font-size: 1.25rem; }
}
@media (max-width: 420px) { .cal-size span { display: none; } .cal-size { padding: .4rem; } }
.hero.cal-big .cal-pick { justify-content: flex-start; overflow: visible; padding-bottom: .4rem; }
@media (max-width: 860px) {
  .hero.cal-big .cal-pick { height: 18rem; min-height: 0; overflow-y: auto; padding-right: .3rem; }
  .hero.cal-big #cal-book { margin-top: .4rem; }
}
.hero.cal-big .cal-pick { flex-wrap: nowrap; } .hero.cal-big .cal-pick #cal-sel { flex: none; }
.hero.cal-big .cal-pick > *, .hero.cal-big .cal-pick .pick-head > * { flex-shrink: 0; }
@media (max-width: 860px) { .hero.cal-big .cal-pick { height: auto; min-height: 10rem; overflow: visible; } }

/* chosen day + time summary (big calendar only) */
.pick-summary { display: none; }
.hero.cal-big .cal-pick.has-pick .pick-summary { display: grid; gap: .5rem; order: 4; margin-top: auto; background: var(--b-cream); border: 2px dashed var(--b-red); border-radius: 14px; padding: .8rem 1rem; }
.pick-summary div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pick-summary span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
html[lang="th"] .pick-summary span { letter-spacing: .02em; font-size: .8rem; }
.pick-summary b { font-family: var(--serif); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pick-summary b.muted { font-family: var(--sans); font-size: .9rem; font-weight: 500; opacity: .6; }
.hero.cal-big .cal-pick.has-pick #cal-book { order: 5; margin-top: .2rem; }

.item .desc { grid-column: 1 / -1; }

/* small rolling cat next to the prices intro */
.sub-cat { display: flex; align-items: center; gap: 1rem; justify-self: end; max-width: 34rem; }
.sub-cat .sub { margin: 0; justify-self: auto; }
.cat-roll { width: 120px; flex-shrink: 0; }
@media (max-width: 860px) { .sub-cat { justify-self: start; } .cat-roll { width: 96px; } }
.services .cat-click { filter: drop-shadow(4px 4px 0 rgba(241,210,182,.35)); } .services .cat-click:hover { filter: drop-shadow(6px 6px 0 rgba(241,210,182,.45)); }
.cat-roll { position: relative; top: -8px; }

/* size button only shows inside the big calendar (to go back); open it via /calendar or a double-tap on the month */
.cal-size { display: none; }
.hero.cal-big .cal-size { display: inline-flex; }
#cal-title { user-select: none; -webkit-user-select: none; touch-action: manipulation; }


/* small calendar: one combined row of times (free + taken, in time order), same height as before */
.slots-all-row { display: none; }
.hero:not(.cal-big) .cal-pick { grid-template-rows: 2.6rem 4.55rem; gap: .35rem; }
.hero:not(.cal-big) .cal-pick #row-free, .hero:not(.cal-big) .cal-pick #row-taken { display: none; }
.hero:not(.cal-big) .slots-all-row { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.hero:not(.cal-big) .slots-all-row .slot-label { flex-shrink: 0; min-width: 5.6rem; padding-top: .35rem; }
.slots-all { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .35rem; min-width: 0; max-height: 4.4rem; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.slots-all .slot { padding: .15rem .55rem; }
.cal-pick:not(.has-pick) .slots-all-row { visibility: hidden; }
.cal-pick.is-error .slots-all-row { display: none !important; }
.hero:not(.cal-big) .slots-all-row .slot-label { min-width: 0; }
@media (max-width: 560px) { .slots-all .slot { padding: .15rem .42rem; font-size: .82rem; } .slots-all { gap: .3rem; } }
/* free and taken times exactly the same size */
.slot { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; line-height: 1.4; box-sizing: border-box; border: 2px solid var(--b-brown); }
.slot.taken { border-color: var(--b-red); }
.slots-all .slot { height: 1.75rem; min-width: 3.6rem; }
/* more room between the date/Book row and the times, same total height */
.hero:not(.cal-big) .cal-pick { grid-template-rows: 2.5rem 4.1rem; gap: .9rem; }
.slots-all { max-height: 4.1rem; }
.hero:not(.cal-big) .slots-all-row .slot-label { padding-top: .3rem; }
/* smaller Book button in the small calendar so it never crowds the times */
.hero:not(.cal-big) .cal-pick { grid-template-rows: 2.3rem 4.1rem; gap: 1.1rem; }
.hero:not(.cal-big) #cal-book, .hero:not(.cal-big) #cal-retry { padding: .3rem .85rem; font-size: .8rem; box-shadow: 3px 3px 0 var(--b-brown); }
.hero:not(.cal-big) .pick-head { align-items: center; height: 2.3rem; }
/* times sit in the middle of their area: no empty strip under a single line */
.hero:not(.cal-big) .cal-pick { grid-template-rows: 2.3rem 3.95rem; gap: .55rem; }
.hero:not(.cal-big) .slots-all-row { align-items: center; height: 3.95rem; }
.hero:not(.cal-big) .slots-all-row .slot-label { padding-top: 0; }
.slots-all { max-height: 3.95rem; align-content: center; }
.hero:not(.cal-big) .cal-pick { grid-template-rows: 2.3rem 3.85rem; gap: .9rem; }
.hero:not(.cal-big) .slots-all-row { height: 3.85rem; }
.slots-all { max-height: 3.85rem; row-gap: .3rem; padding-block: 0; }
.slots-all { align-content: flex-start; }

/* real photos in the polaroids */
.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }

/* bigger polaroids on computers */
@media (min-width: 1001px) {
  .wall { max-width: 1320px; --gx: 1.8rem; }
  .gallery .head { max-width: 1320px; }
}
.wall .pol { transition: transform .2s; }
.wall .pol.has-photo { cursor: zoom-in; }
.wall .pol.has-photo:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); z-index: 2; }
.wall .pol:focus-visible { outline: 3px solid var(--b-red); outline-offset: 4px; }
@media (max-width: 560px) { .wall .pol:hover { transform: none; } }

/* photo viewer */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(43,24,20,.86); display: flex; align-items: center; justify-content: center; gap: 1rem; padding: calc(env(safe-area-inset-top, 0px) + 3.5rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 2rem); animation: lbIn .2s ease-out; }
body.lb-open { overflow: hidden; }
.lb-pol { position: relative; margin: 0; background: #FFFAF4; border: 2px solid var(--b-brown); box-shadow: 8px 8px 0 var(--b-brown); padding: .9rem .9rem 0; transform: rotate(-1.5deg); max-width: min(92vw, 760px); display: flex; flex-direction: column; }
.lb-pol .tape { top: -16px; width: 110px; height: 30px; }
.lb-pol img { display: block; max-width: 100%; max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); width: auto; height: auto; object-fit: contain; margin: 0 auto; border: 1px solid rgba(85,48,40,.2); }
.lb-pol figcaption { font: italic 500 1.4rem var(--serif); text-align: center; padding: .9rem 0 1.1rem; color: var(--b-brown); }
.lb-btn { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--b-brown); background: var(--b-pink); color: var(--b-brown); font: 700 1.5rem/1 var(--serif); cursor: pointer; display: grid; place-items: center; box-shadow: 3px 3px 0 var(--b-brown); padding-bottom: 3px; }
.lb-btn:hover { background: var(--b-cream); }
.lb-btn:focus-visible { outline: 3px solid var(--b-cream); outline-offset: 3px; }
.lb-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .9rem); right: 1rem; }
@keyframes lbIn { from { opacity: 0; } }
@media (max-width: 640px) {
  .lightbox { padding-inline: .6rem; }
  .lb-prev, .lb-next { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
  .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); }
  .lightbox { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem); }
  .lb-pol { max-width: 94vw; padding: .6rem .6rem 0; }
  .lb-pol img { max-height: calc(100vh - 15rem); max-height: calc(100dvh - 15rem); }
  .lb-pol figcaption { font-size: 1.15rem; padding: .6rem 0 .8rem; }
}
@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } .wall .pol { transition: none; } }

/* ===== small calendar: ONE row of times ===== */
.hero:not(.cal-big) .cal-pick { grid-template-rows: 2.3rem 2rem; gap: .9rem; }
.hero:not(.cal-big) .slots-all-row { height: 2rem; position: relative; align-items: center; }
.slots-all { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; height: 2rem; align-items: center; scrollbar-width: none; padding: 0 2px; }
.slots-all::-webkit-scrollbar { display: none; }
.slots-all .slot { flex-shrink: 0; }
/* fade at the edges when more times are hidden */
.slots-all-row.more-right .slots-all { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent calc(100% - 4px)); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent calc(100% - 4px)); }
.slots-all-row.more-left .slots-all { -webkit-mask-image: linear-gradient(90deg, transparent 4px, #000 46px); mask-image: linear-gradient(90deg, transparent 4px, #000 46px); }
.slots-all-row.more-left.more-right .slots-all { -webkit-mask-image: linear-gradient(90deg, transparent 4px, #000 46px, #000 calc(100% - 46px), transparent calc(100% - 4px)); mask-image: linear-gradient(90deg, transparent 4px, #000 46px, #000 calc(100% - 46px), transparent calc(100% - 4px)); }
/* little round arrows, same style as the month arrows */
.slot-arrow { display: none; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--b-brown); background: var(--b-pink); color: var(--b-brown); font: 700 1rem/1 var(--serif); cursor: pointer; place-items: center; padding: 0 0 2px; }
.slot-arrow:focus-visible { outline: 2px solid var(--b-brown); outline-offset: 2px; }
.slot-arrow.prev { order: 1; } .slots-all { order: 2; } .slot-arrow.next { order: 3; }
.slots-all-row .slot-label { order: 0; }
.slots-all-row.more-left .slot-arrow.prev, .slots-all-row.more-right .slot-arrow.next { display: grid; }
.hero.cal-big .slot-arrow { display: none !important; }
/* keep the cat clear of the calendar: beside it on wide screens, underneath it otherwise */
.cal-wrap { z-index: 4; }
@media (min-width: 1180px) { .cat-spot { right: -1.25rem; } }
@media (max-width: 1179px) { .hero { padding-bottom: 11rem; } }
@media (max-width: 860px) { .hero { padding-bottom: 9.5rem; } }
@media (min-width: 1180px) and (max-width: 1259px) { .cat-spot { right: 0; } .hero { padding-bottom: 11rem; } }
@media (min-width: 861px) { .hero.cal-big { padding-bottom: 11rem; } }

.closed-note { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed rgba(85,48,40,.35); font-weight: 700; color: var(--b-red); }

/* location cat a bit smaller; hours card spacing even; closed note centered */
.cat-curl { width: 150px; top: -80px; right: 1.2rem; }
@media (max-width: 860px) { .cat-curl { width: 130px; top: -68px; } .hours { margin-top: 4.5rem; } }
.hours h3 { margin-bottom: .8rem; }
.hours dt, .hours dd { padding: .75rem 0; }
.hours .closed-note { margin-top: 0; padding-top: .75rem; text-align: center; }
/* phone: cat + "not sure what to choose" moves below the prices */
.sub-cat.below { max-width: 1100px; margin: 1.6rem auto 0; justify-self: auto; }

/* every section's tag + title starts on the same line (1100px content column) */
.hero { max-width: calc(1100px + 3rem); }
@media (min-width: 1001px) { .gallery .head { max-width: 1100px; } }

/* small maker credit under the copyright */
footer .credit { margin-top: .45rem; font-size: .75rem; opacity: .65; }
footer .credit a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s, opacity .15s; }
footer .credit a:hover, footer .credit a:focus-visible { border-bottom-color: currentColor; }
footer .credit a { display: inline-flex; align-items: center; gap: .3rem; }
footer .credit .gh { width: 13px; height: 13px; flex-shrink: 0; }
footer .credit { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .3rem; line-height: 1.4; }
footer .credit a { border-bottom: 0; text-underline-offset: 3px; }
footer .credit a:hover, footer .credit a:focus-visible { text-decoration: underline; opacity: 1; }

/* lying cat sits beside "not sure what to choose"; rolling cat hangs over the edge into Our work (like the walking cat) */
.cat-sub { width: 130px; flex-shrink: 0; position: relative; top: -4px; }
@media (max-width: 860px) { .cat-sub { width: 104px; } }
.cat-edge { position: absolute; right: max(1.5rem, calc((100% - 1100px) / 2)); bottom: -3.2rem; width: 210px; z-index: 2; margin: 0; }
@media (max-width: 860px) { .cat-edge { width: 150px; bottom: -2.4rem; } }

/* back-view cat sits fully inside the footer */
footer img { margin: 0 auto .7rem; }
footer .credit { gap: 0 .28em; }