/* Telio shop sites: shared structure for every template (adapted from bookd-templates-examples-v2 base.css and
   studio.css). Each template's /_t/<id>.css sets the tokens and adds its character. Tokens sit on :where(:root),
   which has zero specificity, so the Theme Studio variables in the page's nonce'd <style> always win. */
:where(:root) {
  --bg: #FFFFFF; --surface: #F2F2F2; --ink: #111111; --muted: #555555; --line: #DDDDDD;
  --accent: #333333; --on-accent: #FFFFFF; --focus: #1A5FD0; --open: #1F8A4C;
  --on-ink-muted: var(--bg); --accent-on-ink: var(--accent);
  --font-display: system-ui, sans-serif; --font-body: system-ui, sans-serif;
  --radius: 8px; --radius-lg: 16px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --wrap: 1200px; --gutter: clamp(16px, 5vw, 48px);
  --step--1: clamp(.875rem, .85rem + .12vw, .94rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  --step-4: clamp(2.1rem, 1.6rem + 3vw, 4rem);
  --step-5: clamp(2.4rem, 1.6rem + 5vw, 6rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); margin: 0 0 var(--s2); line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); }
p { margin: 0 0 var(--s2); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 8px; }
.skip:focus-visible { outline-color: var(--bg); outline-offset: -6px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.banner p { margin: 0; }
.banner { margin: 0; padding: 8px var(--gutter); text-align: center; font-weight: 700; font-size: var(--step--1); background: var(--ink); color: var(--bg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border: 2px solid transparent; border-radius: var(--radius); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; max-width: 100%; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--ghost { border-color: currentColor; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s3) 0 0; }
.more { margin: var(--s4) 0 0; }

/* Header and menu (no JavaScript: <details> on small screens) */
.hd { position: relative; z-index: 10; background: var(--bg); }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 72px; }
.hd__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.15; text-decoration: none; overflow-wrap: anywhere; }
.hd__mark { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--accent); }
.hd__nav { display: flex; align-items: center; gap: var(--s1); flex: none; }
.hd__links, .hd__menu-list { list-style: none; margin: 0; padding: 0; }
.hd__links { display: none; gap: 2px; }
.hd__links a, .hd__menu-list a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; font-weight: 500; }
.hd__links a[aria-current="page"], .hd__menu-list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.hd__book { display: none; min-height: 44px; padding: 8px 16px; }
.hd__menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border: 2px solid currentColor; border-radius: var(--radius); font-weight: 600; }
.hd__menu summary::-webkit-details-marker { display: none; }
.hd__menu-list { position: absolute; right: var(--gutter); top: calc(100% - 4px); min-width: 200px; max-width: calc(100vw - 32px); padding: 8px; background: var(--bg); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 0 16px 40px rgb(0 0 0 / .18); }
.hd__menu-list a { padding: 0 12px; }
@media (min-width: 30rem) { .hd__book { display: inline-flex; } }
@media (min-width: 48rem) { .hd__links { display: flex; } .hd__menu { display: none; } }

/* Hero */
.hero { padding-block: clamp(32px, 6vw, 96px); }
.hero__grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 56rem) { .hero--photo .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero h1 { font-size: var(--step-5); margin-bottom: var(--s3); }
.hero__copy { min-width: 0; }
.kicker { font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: var(--step-1); color: var(--muted); max-width: 40ch; }
.hero__media { position: relative; min-width: 0; }
.hero__frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 56rem) { .hero__img { aspect-ratio: 4 / 5; max-height: 80vh; } }
.deco { display: none; }

/* Open now */
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); padding: 6px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--step--1); }
.status__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.status[data-state="open"] .status__dot { background: var(--open); }

/* Sections and pages */
.sec { padding-block: clamp(48px, 7vw, 104px); }
.sec__head { margin-bottom: var(--s3); }
.sec__head h2 { margin: 0; }
.page-head { padding-block: clamp(40px, 7vw, 96px) 0; }
.page-head h1 { font-size: var(--step-4); max-width: 22ch; margin: 0; }
.sec--page { padding-top: var(--s4); }
.band { background: var(--ink); color: var(--bg); }
.band :focus-visible { outline-color: var(--bg); }
.band .btn--primary { background: var(--bg); color: var(--ink); }
.note { color: var(--muted); max-width: 60ch; margin-top: var(--s2); }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--s5); }
.prose li { margin-bottom: var(--s1); }

/* About */
.about { display: grid; gap: var(--s4); }
@media (min-width: 56rem) { .about--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.about__text { max-width: 62ch; }
.about__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }

/* Services */
.svc { list-style: none; margin: 0; padding: 0; display: grid; }
.svc__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.svc__body { min-width: 0; }
.svc__name { font-size: var(--step-1); margin: 0; -webkit-hyphens: auto; hyphens: auto; }
.svc__desc { margin: 4px 0 0; color: var(--muted); font-size: var(--step--1); }
.svc__meta { margin: 0; display: grid; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.svc__price { font-weight: 700; }
.svc__time { color: var(--muted); font-size: var(--step--1); }
.svc__idx { display: none; }

/* Photos */
.gal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56rem) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gal__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }

/* Hours */
.hours { width: 100%; max-width: 36rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.hours td { text-align: right; padding-left: var(--s2); }
.hours tr[aria-current="date"] th, .hours tr[aria-current="date"] td { font-weight: 700; }
.hours__today { font-weight: 400; font-size: var(--step--1); color: var(--muted); }

/* Contact */
.facts { margin: 0 0 var(--s2); display: grid; gap: var(--s2); }
.facts__row { display: grid; gap: 2px; }
.facts dt { font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
.contact { display: grid; gap: var(--s6); }
@media (min-width: 56rem) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.contact h2 { font-size: var(--step-2); }

/* Video (a link, never an embed) */
.video { display: grid; gap: var(--s3); }
@media (min-width: 56rem) { .video:has(.video__media) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } }
.video__poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.video__cap { font-size: var(--step-1); max-width: 40ch; }

/* Footer */
.ft { padding-block: var(--s6); font-size: var(--step--1); border-top: 1px solid var(--line); }
.ft__grid { display: grid; gap: var(--s3) var(--s4); }
@media (min-width: 48rem) { .ft__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.ft__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.15; margin-bottom: var(--s1); overflow-wrap: anywhere; }
.ft address, .ft__legal { color: var(--muted); }
.ft__legal { margin: var(--s2) 0 0; }
.ft__list { list-style: none; margin: 0; padding: 0; }
.ft__list a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* Theme Studio overrides (only when the attribute is set on <html>) */
html[data-ts-w] :is(h1, h2, h3) { font-weight: var(--ts-hw); }
html[data-ts-t] :is(h1, h2, h3) { letter-spacing: var(--ts-tr); }
html[data-ts-l] body { line-height: var(--ts-lh); }
html[data-ts-b] .btn { border-radius: var(--radius); }
html[data-ts-b="pill"] .btn { border-radius: 999px; }
html[data-ts-b="outline"] .btn--primary { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .15s ease; }
  .btn:active { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Owner crop choices: enumerated classes only; no owner CSS or style attributes. */
.brand__logo { width: 3rem; height: 3rem; object-fit: contain; flex: 0 0 auto; }
img.crop { object-position: var(--crop-x,50%) var(--crop-y,50%); }
img.crop-square { aspect-ratio: 1; height: auto; object-fit: cover; }
img.crop-portrait { aspect-ratio: 3/4; height: auto; object-fit: cover; }
img.crop-landscape { aspect-ratio: 4/3; height: auto; object-fit: cover; }
.crop-x-0 { --crop-x: 0%; } .crop-y-0 { --crop-y: 0%; }
.crop-x-10 { --crop-x: 10%; } .crop-y-10 { --crop-y: 10%; }
.crop-x-20 { --crop-x: 20%; } .crop-y-20 { --crop-y: 20%; }
.crop-x-30 { --crop-x: 30%; } .crop-y-30 { --crop-y: 30%; }
.crop-x-40 { --crop-x: 40%; } .crop-y-40 { --crop-y: 40%; }
.crop-x-50 { --crop-x: 50%; } .crop-y-50 { --crop-y: 50%; }
.crop-x-60 { --crop-x: 60%; } .crop-y-60 { --crop-y: 60%; }
.crop-x-70 { --crop-x: 70%; } .crop-y-70 { --crop-y: 70%; }
.crop-x-80 { --crop-x: 80%; } .crop-y-80 { --crop-y: 80%; }
.crop-x-90 { --crop-x: 90%; } .crop-y-90 { --crop-y: 90%; }
.crop-x-100 { --crop-x: 100%; } .crop-y-100 { --crop-y: 100%; }