@layer look, founder, state;
@layer look {
:root {
  --paper: #fcfbfb; --raised: #f6f6f5; --ink: #24221e; --soft: #746e62;
  --line: #e4e2e0; --accent: #8d5d49; --on-accent: #f1f0ee; --tone-danger: #efc1be; --on-tone-danger: #3d3a34; --tone-success: #beefca; --on-tone-success: #3d3a34; --tone-warning: #efe2be; --on-tone-warning: #3d3a34;
  --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --room: 1; --gap-base: 2.25rem;
  --measure: 1180px; --gutter: 2.5rem; --gap: calc(var(--gap-base) * var(--room)); --radius: 0;
  --card-pad: 1.15rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink); overflow-x: clip;
  font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased;
}
header, main, footer { max-width: var(--measure); margin: 0 auto; padding: var(--gutter); position: relative; z-index: 2; }
header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; border-bottom: 1px solid var(--line);
}
header h1 {
  margin: 0; font-family: var(--display); font-size: 2.5rem; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance;
}
h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
nav a { color: var(--soft); text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* The site map in a menu, with no script: the pages under one show in a column under it
   while it is pointed at or has the keys, over what follows; in a menu that runs down, or
   behind its opener, they stand set in under it. The header stands over the page so its
   column is never under the main content. */
nav .holds { position: relative; display: inline-flex; flex-direction: column; }
nav .under {
  display: none; position: absolute; top: 100%; left: 0; z-index: 3; min-width: max-content;
  flex-direction: column; gap: 0.5rem; padding: 0.6rem 1rem;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
}
nav .holds:hover > .under, nav .holds:focus-within > .under { display: flex; }
nav.orientation-vertical .under, details nav .under { display: flex; position: static; min-width: 0; padding: 0.5rem 0 0 1.2rem; border: 0; background: none; }
header { z-index: 3; }
main { padding-top: calc(var(--gutter) * 1.2); padding-bottom: calc(var(--gutter) * 1.6); }
main > * + * { margin-top: var(--gap); }
p { max-width: 65ch; text-wrap: pretty; }
footer { color: var(--soft); border-top: 1px solid var(--line); font-size: 0.9375rem; }
ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.item {
  border: 1px solid #e4e2e0; background: transparent; box-shadow: none;
  border-radius: var(--radius); padding: var(--card-pad);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.item img {
  width: 100%; height: auto; display: block; margin-bottom: 0.5rem;
  border-radius: calc(var(--radius) * 0.6);
}
.item h3 { margin: 0; font-size: 1.125rem; }
.item p { margin: 0; color: var(--soft); }
.item ul { display: block; list-style: disc; padding-left: 1.2rem; margin: 0.25rem 0; gap: 0; }
/* A list inside a founder's own words is a mark, not a component: plain bullets or
   numbers, never the grid a collection is laid out in. */
.content-text-rich_text ul, .content-text-rich_text ol, .data_display-about_the_business-introduction ul, .data_display-about_the_business-introduction ol, .item ol, dd ul, dd ol { display: block; padding-left: 1.2rem; margin: 0.25rem 0; gap: 0; }
.content-text-rich_text ul, .data_display-about_the_business-introduction ul, dd ul { list-style: disc; }
.content-text-rich_text ol, .data_display-about_the_business-introduction ol, .item ol, dd ol { list-style: decimal; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.options { border: 0; padding: 0; margin: 0.5rem 0 0; }
.options legend { font-weight: 600; padding: 0; }
.options label { display: block; padding: 0.2rem 0; color: var(--ink); }
.is-empty { color: var(--soft); }
form { display: grid; gap: 0.75rem; max-width: 34rem; }
label { font-size: 0.9375rem; color: var(--soft); }
input, textarea {
  font: inherit; width: 100%; padding: 0.7rem 0.8rem; color: var(--ink);
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
}
textarea { min-height: 9rem; resize: vertical; }
button {
  justify-self: start; font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.7rem 1.6rem; min-height: 44px; border: 0;
  border-radius: var(--radius); background: var(--accent); color: var(--on-accent);
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sent { grid-column: 1 / -1; font-weight: 600; color: var(--accent); }
.sent:target { display: block; }
.refused { grid-column: 1 / -1; font-weight: 600; }
/* The server's own pages (joining, signing in, the album) wear this same sheet: a
   quiet button beside the accent one, and an album of square tiles in the item cards. */
button.quiet { justify-self: start; padding: 0.4rem 1rem; background: transparent; color: var(--soft); border: 1px solid var(--line); }
.album img { aspect-ratio: 1; object-fit: cover; }
.album .name { word-break: break-all; }
.album .words { font-size: 0.95rem; }
.album .size { color: var(--soft); font-size: 0.9rem; }
.album .get { color: var(--accent); }
/* The line every page ends with (D43): fine print pinned to the page's very bottom, the
   screen's bottom when the page is shorter than the screen. The page keeps the line's
   room below everything the founder placed, so it never sits over any of it. */
body { position: relative; min-height: 100svh; padding-bottom: calc(0.7rem + 0.5rem * 2); }
.made-with {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; max-width: none;
  padding: 0.5rem; text-align: center; font-size: 0.625rem; line-height: 1;
}
.made-with a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--soft); text-decoration: none; }
.made-with a:hover { color: var(--accent); }
.made-with svg { width: 0.7rem; height: 0.7rem; flex: none; }
.made-with .name { text-transform: uppercase; letter-spacing: 0.08em; }

.structure-layout-columns, .structure-layout-grid, .structure-layout-stack, .structure-layout-split { display: grid; gap: var(--gap); align-items: start; }
.structure-layout-split { grid-template-columns: 1fr 1fr; align-items: center; }
.structure-layout-split.media_on-right > :first-child { order: 2; }
.direction-row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.direction-column { grid-auto-flow: row; }
/* A row: its blocks side by side, each as wide as its own share of the row. */
.structure-layout-row { --row-gap: var(--gap); display: flex; gap: var(--row-gap); align-items: flex-start; }
.structure-layout-row > * { flex: 1 1 0; min-width: 0; margin-top: 0; }
.structure-layout-row > .valign-top { align-self: flex-start; }
.structure-layout-row > .valign-middle { align-self: center; }
.structure-layout-row > .valign-bottom { align-self: flex-end; }
.structure-layout-row > .span-1 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 1 / 12 - var(--row-gap)); }
.structure-layout-row > .span-2 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 2 / 12 - var(--row-gap)); }
.structure-layout-row > .span-3 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 3 / 12 - var(--row-gap)); }
.structure-layout-row > .span-4 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 4 / 12 - var(--row-gap)); }
.structure-layout-row > .span-5 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 5 / 12 - var(--row-gap)); }
.structure-layout-row > .span-6 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 6 / 12 - var(--row-gap)); }
.structure-layout-row > .span-7 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 7 / 12 - var(--row-gap)); }
.structure-layout-row > .span-8 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 8 / 12 - var(--row-gap)); }
.structure-layout-row > .span-9 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 9 / 12 - var(--row-gap)); }
.structure-layout-row > .span-10 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 10 / 12 - var(--row-gap)); }
.structure-layout-row > .span-11 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 11 / 12 - var(--row-gap)); }
.structure-layout-row > .span-12 { flex: 0 1 auto; flex-basis: calc((100% + var(--row-gap)) * 12 / 12 - var(--row-gap)); }
/* How many columns, and how many slides to the view: the taxonomy's own numbers. */
.structure-layout-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.structure-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.columns-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.columns-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.count-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.per_view-1 > * { flex-basis: calc((100% - var(--gap) * 0) / 1); }
.per_view-2 > * { flex-basis: calc((100% - var(--gap) * 1) / 2); }
.per_view-3 > * { flex-basis: calc((100% - var(--gap) * 2) / 3); }
.per_view-4 > * { flex-basis: calc((100% - var(--gap) * 3) / 4); }
.per_view-5 > * { flex-basis: calc((100% - var(--gap) * 4) / 5); }
.per_view-6 > * { flex-basis: calc((100% - var(--gap) * 5) / 6); }
.layout-masonry { display: block; columns: 3; column-gap: var(--gap); }
.layout-masonry > * { break-inside: avoid; margin-bottom: var(--gap); }
.layout-carousel, .data_display-collection-carousel, .structure-disclosure-carousel > .track, .direction-horizontal {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--gap); grid-template-columns: none;
}
.layout-carousel > *, .data_display-collection-carousel > *, .structure-disclosure-carousel > .track > *, .direction-horizontal > * { flex: 0 0 80%; scroll-snap-align: start; }
/* A slideshow: its slides in a row that scrolls, and under it the button back, the
   dots, and the button on. Each dot is a link to its slide, the current one marked. */
.structure-disclosure-carousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 0.5rem; }
.structure-disclosure-carousel > .track { grid-column: 1 / -1; }
.structure-disclosure-carousel > .previous, .structure-disclosure-carousel > .next { grid-row: 2; padding: 0.4rem 1rem; background: transparent; color: var(--soft); border: 1px solid var(--line); }
.structure-disclosure-carousel > .previous { grid-column: 1; }
.structure-disclosure-carousel > .next { grid-column: 3; }
/* The dots' own row, by the child it is: the root carries the switch's own class too. */
.structure-disclosure-carousel > .dots { grid-column: 2; grid-row: 2; display: flex; gap: 0.5rem; justify-content: center; padding-top: 0.5rem; }
.structure-disclosure-carousel > .dots a { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line); overflow: hidden; text-indent: 100%; white-space: nowrap; }
.structure-disclosure-carousel > .dots a:hover, .structure-disclosure-carousel > .dots a:focus-visible, .structure-disclosure-carousel > .dots a[aria-current="true"] { background: var(--accent); }
.orientation-vertical { flex-direction: column; }
details { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 1rem; }
summary { cursor: pointer; font-weight: 600; }
/* What opens one stands on the marker's line, a heading among it. */
summary > * { display: inline; }
details .panel { padding-top: 0.6rem; }
details nav { flex-direction: column; gap: 0.5rem; padding-top: 0.6rem; }
/* Tabs: the names over the panel open, the open one's name marked in the accent; across,
   in a row over it, and down, a column of them beside it. With no script the names stay
   put away and every panel shows, one after another. */
.structure-disclosure-tabs > [role="tablist"] { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.structure-disclosure-tabs [role="tab"] { min-height: 0; padding: 0.6rem 0; font-size: inherit; color: var(--soft); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.structure-disclosure-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.structure-disclosure-tabs > [role="tabpanel"] { padding-top: 0.6rem; border-top: 1px solid var(--line); }
.structure-disclosure-tabs.orientation-vertical[data-live] { display: grid; grid-template-columns: 10rem 1fr; }
.structure-disclosure-tabs.orientation-vertical > [role="tablist"] { flex-direction: column; align-items: stretch; }
.structure-disclosure-tabs.orientation-vertical [role="tab"] { text-align: left; padding-left: 1rem; border-bottom: 0; border-left: 2px solid transparent; }
.structure-disclosure-tabs.orientation-vertical [role="tab"][aria-selected="true"] { border-color: var(--accent); }
.structure-disclosure-tabs.orientation-vertical[data-live] > [role="tabpanel"] { grid-column: 2; grid-row: 1; padding: 0 0 0 1rem; border-top: 0; border-left: 1px solid var(--line); }
/* A pop-up's own width -- still the browser's own <details>, opened and closed with no
   script; medium is the size a plain <details> already is, so it needs no rule. */
.structure-disclosure-modal.size-small .panel { max-width: 20rem; margin: 0 auto; }
.structure-disclosure-modal.size-large .panel { max-width: 48rem; margin: 0 auto; }
/* A slide-out panel pinned to the edge it was asked for -- still the native <details>
   underneath, so it still opens and closes with no script. */
.structure-disclosure-drawer.side-left .panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 20; background: var(--paper); box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25); overflow-y: auto; }
.structure-disclosure-drawer.side-right .panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25); overflow-y: auto; }
.structure-disclosure-drawer.side-bottom .panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 60vh; z-index: 20; background: var(--paper); box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25); overflow-y: auto; }
/* A notice a visitor can put away: its button beside the message, quiet. */
.dismiss-close { float: right; margin-left: 0.5rem; padding: 0.4rem 1rem; background: transparent; color: var(--soft); border: 1px solid var(--line); }
/* A picture opened full size, over the page shaded behind it, with its words under it
   and the buttons back, on and away under them. */
dialog.full { max-width: 96vw; padding: 0.6rem 1rem; color: var(--ink); background: var(--paper); border: 0; border-radius: var(--radius); }
dialog.full::backdrop { background: rgba(0, 0, 0, 0.8); }
dialog.full img { max-height: 80vh; width: auto; margin: 0 auto; }
dialog.full button { margin: 0.5rem 0.5rem 0 0; padding: 0.4rem 1rem; background: transparent; color: var(--soft); border: 1px solid var(--line); }
/* What a visitor narrows: the search box, the buttons and the order over the rows, in a
   row that wraps, the button pressed in the accent; the buttons back and on under them,
   quiet. With no script all of it stays put away and every row shows. The days and the
   times a visitor books from are the same buttons, and every form's chooser the same as
   the order's. */
.finding { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--gap); margin-bottom: var(--gap); }
.finding label { display: flex; align-items: center; gap: 0.5rem; }
.finding .search { flex: 1 1 auto; }
.finding .search input { flex: 1 1 auto; width: auto; }
.finding select, form select { font: inherit; padding: 0.7rem 0.8rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.facets, .slots .days, .slots .times { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.facets button, .pager button, .slots button { padding: 0.4rem 1rem; background: transparent; color: var(--soft); border: 1px solid var(--line); }
.facets button[aria-pressed="true"], .slots button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.slots .pick { margin: 0.5rem 0; }
.pager { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--gap); }
/* A map from a mapping service, as wide as its place and in its own proportions. */
.content-media-map iframe { display: block; width: 100%; aspect-ratio: 4/3; border: 0; border-radius: var(--radius); }
figure { margin: 0; }
figure img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
.fit-cover img { width: 100%; height: 100%; object-fit: cover; }
.fit-contain img { width: 100%; height: 100%; object-fit: contain; }
/* Cropped by its proportions, a picture keeps the point the founder chose in view. */
.content-media-image img { object-position: var(--focus, 50% 50%); }
/* An icon as tall as a letter of the words around it, on their line. */
.content-media-icon svg { width: 1em; height: 1em; vertical-align: -0.125em; }
figcaption { color: var(--soft); font-size: 0.9rem; margin-top: 0.4rem; }
.content-media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); }
.content-media-gallery.layout-carousel { display: flex; }
/* A picture the words flow around: the words keep off it by its room inside, the
   look's gap on the side the words are and below until the founder sets one, and the
   block after it starts level with its top unless the founder gave it room above. */
.content-media-image.wrap-none { float: none; }
.content-media-image.wrap-left, .content-media-image.wrap-right { max-width: 50%; margin: 0; }
.content-media-image.wrap-left { float: left; padding: 0 var(--gap) var(--gap) 0; }
.content-media-image.wrap-right { float: right; padding: 0 0 var(--gap) var(--gap); }
.content-media-image.wrap-left + *, .content-media-image.wrap-right + * { margin-top: 0; }
/* A band: the page's whole width whatever column it stands in, what it holds in the
   page's measure, its own ground or a picture behind, dimmed so the words read; the
   first thing on a page sits right under the header. */
.structure-layout-band { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: calc(var(--gutter) * 2.5) var(--gutter); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
main > .structure-layout-band:first-child, main > :first-child > .structure-layout-band:first-child { margin-top: calc(var(--gutter) * -1.2); }
.structure-layout-band > .inner { position: relative; z-index: 1; width: 100%; max-width: var(--measure); margin: 0 auto; display: grid; gap: var(--gap); }
.structure-layout-band > .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.structure-layout-band:has(> .backdrop) { color: #fcfbfb; }
.ground-raised { background: var(--raised); color: var(--ink); }
.ground-accent { background: var(--accent); color: var(--on-accent); }
.ground-ink { background: var(--ink); color: var(--paper); }
.ground-accent p, .ground-ink p, .structure-layout-band:has(> .backdrop) p, .ground-accent .is-empty, .ground-ink .is-empty { color: inherit; }
.ground-accent .navigation-actions-button { background: var(--on-accent); color: var(--accent); }
.height-tall { min-height: 60vh; }
.height-full { min-height: 100vh; }
/* The business's name, set large in the display face. */
.data_display-about_the_business-headline { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; font-size: calc(2.5rem * 1.6); }
.data_display-about_the_business-headline.level-2 { font-size: calc(2.5rem * 1.15); }
/* A door to each department: a card that is one link, its picture across its top. */
.data_display-departments-doors .item { padding: 0; overflow: hidden; }
.data_display-departments-doors a { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; color: inherit; text-decoration: none; padding-bottom: var(--card-pad); }
.data_display-departments-doors img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin: 0; border-radius: 0; }
.data_display-departments-doors h3, .data_display-departments-doors p { padding: 0 var(--card-pad); }
.data_display-departments-doors a:hover h3, .data_display-departments-doors a:focus-visible h3 { color: var(--accent); }
/* Questions and answers: one column of them, each the browser's own disclosure with no
   card around it. */
.data_display-answering-faq .items { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.data_display-answering-faq .item { border: 0; background: transparent; box-shadow: none; padding: 0; }
/* A service menu read as a menu until the founder chooses cards: a line each, its name
   with its price across from it, its words and how long it takes under them, no picture,
   a rule between the lines. Cards are a collection's own. */
.navigation-finding-service_menu:not(.layout-cards) .items { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.navigation-finding-service_menu:not(.layout-cards) .item { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--gap); row-gap: 0.5rem; padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.navigation-finding-service_menu:not(.layout-cards) .item > * { flex: 1 1 100%; }
.navigation-finding-service_menu:not(.layout-cards) .item > .name { flex: 1 1 auto; }
.navigation-finding-service_menu:not(.layout-cards) .item > .price { flex: 0 0 auto; margin-left: auto; color: var(--ink); }
.navigation-finding-service_menu:not(.layout-cards) .item > img { display: none; }
/* Plans side by side, each its price set large with how often it is charged beside it,
   and the one the founder marked in the accent, its words over it. */
.data_display-plans-pricing .price { margin: 0; font-family: var(--display); font-weight: 600; font-size: calc(2.5rem * 0.75); color: var(--ink); }
.data_display-plans-pricing .includes { margin: 0; }
.data_display-plans-pricing .item.marked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.data_display-plans-pricing .badge { align-self: flex-start; margin: 0; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }
/* A class schedule: each day its heading over its classes, a line each, its times first in
   the accent, a rule between the lines. */
.data_display-schedule-classes .day + .day { margin-top: var(--gap); }
.data_display-schedule-classes .day h3 { margin: 0 0 0.5rem; }
.data_display-schedule-classes .items { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.data_display-schedule-classes .item { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--gap); row-gap: 0.5rem; padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.data_display-schedule-classes .item > .hours { flex: 0 0 auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.data_display-schedule-classes .item > .name { flex: 1 1 auto; }
.data_display-schedule-classes .item > :not(.hours, .name) { flex: 1 1 100%; }
/* What customers say: their own words set large, who said it under them. */
.data_display-collection-quotes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.data_display-collection-quotes .item { border: 0; background: transparent; box-shadow: none; padding: 0; }
.data_display-collection-quotes .words { font-family: var(--display); font-size: 1.4rem; line-height: 1.2; }
.data_display-collection-quotes .words p { color: inherit; }
.data_display-collection-quotes .name { font-family: var(--body); font-size: 0.9rem; font-weight: normal; color: inherit; opacity: 0.8; }
/* A calendar: each month or week a table of its weeks, the day names over its columns,
   each event on its day; on a phone, one column of the days with something on them,
   each saying its day's name. */
.data_display-collection-calendar table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data_display-collection-calendar table + table, .data_display-collection-calendar .undated { margin-top: var(--gap); }
.data_display-collection-calendar caption { text-align: left; font-family: var(--display); font-weight: 600; font-size: 1.125rem; padding-bottom: 0.5rem; }
.data_display-collection-calendar th { color: var(--soft); font-weight: normal; font-size: 0.9rem; text-align: left; padding: 0 0.35rem 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data_display-collection-calendar td { vertical-align: top; border-top: 1px solid var(--line); padding: 0.35rem; height: 5.5rem; }
.data_display-collection-calendar .date { color: var(--soft); font-size: 0.9rem; }
.data_display-collection-calendar .has .date { color: var(--ink); font-weight: 600; }
.data_display-collection-calendar .wd { display: none; }
.data_display-collection-calendar .events { display: block; margin-top: 0.35rem; }
.data_display-collection-calendar .event { font-size: 0.9rem; overflow-wrap: anywhere; }
.data_display-collection-calendar .event + .event { margin-top: 0.35rem; }
.data_display-collection-calendar .event h3, .data_display-collection-calendar .event p { margin: 0; font-size: inherit; }
video, audio, iframe { max-width: 100%; border-radius: var(--radius); border: 0; }
video { width: 100%; }
iframe { width: 100%; min-height: 20rem; }
.content-media-embed.size-small { min-height: 10rem; }
.content-media-embed.size-large { min-height: 32rem; }
.content-media-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; font-family: var(--display); font-weight: 600; }
.content-media-logo img { height: 2.5rem; width: auto; }
.content-media-logo.size-small img { height: 1.6rem; }
.content-media-logo.size-large img { height: 4rem; }
.content-media-icon { display: inline-block; font-size: 1.5rem; line-height: 1; }
.content-media-icon.size-small { font-size: 1rem; }
.content-media-icon.size-large { font-size: 3rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap) 0; }
hr.style-dashed { border-top-style: dashed; }
hr.style-dotted { border-top-style: dotted; }
.content-decoration-spacer { height: var(--gap); }
.content-decoration-spacer.size-small { height: calc(var(--gap) * 0.5); }
.content-decoration-spacer.size-large { height: calc(var(--gap) * 2.5); }
.content-decoration-shape { width: 100%; height: 6rem; background: var(--raised); border-radius: var(--radius); }
.content-decoration-shape.form-circle { width: 6rem; border-radius: 50%; }
.content-decoration-shape.form-wave { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--accent); font-family: var(--display); font-size: 1.25rem; }
blockquote p { margin: 0; }
blockquote cite { display: block; margin-top: 0.4rem; font-size: 0.9rem; color: var(--soft); font-style: normal; font-family: var(--body); }
blockquote.style-pull { font-size: 1.75rem; border: 0; padding: 0; text-align: center; }
.content-text-list { display: block; padding-left: 1.2rem; list-style: disc; }
ol.content-text-list { list-style: decimal; }
.content-text-list.marker-check { list-style: none; padding-left: 0; }
.content-text-list.marker-check li::before { content: "\2713  "; color: var(--accent); }
.content-text-list.marker-none { list-style: none; padding-left: 0; }
.content-text-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; background: var(--raised); border: 1px solid var(--line); }
.status-notices-announcement_banner, .status-notices-notice { padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); }
.tone-accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.tone-danger { background: var(--tone-danger); color: var(--on-tone-danger); border-color: transparent; }
.tone-success { background: var(--tone-success); color: var(--on-tone-success); border-color: transparent; }
.tone-warning { background: var(--tone-warning); color: var(--on-tone-warning); border-color: transparent; }
.navigation-actions-button { display: inline-block; justify-self: start; align-self: flex-start; text-decoration: none; padding: 0.7rem 1.6rem; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.navigation-actions-button.style-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.navigation-actions-button.style-text { background: transparent; color: var(--accent); padding: 0; }
.navigation-actions-button.size-small { padding: 0.4rem 1rem; font-size: 0.9rem; }
.navigation-actions-button.size-large { padding: 1rem 2.2rem; font-size: 1.15rem; }
/* The way the business takes money, drawn through its mover: a button to it, a line
   saying where to send the money, or the mover's own button in a frame; and the
   amounts a tip offers, each a button through a mover with an address, else a chip. */
.pay { display: inline-block; text-decoration: none; padding: 0.7rem 1.6rem; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; }
p.pay { display: block; padding: 0; background: transparent; color: var(--ink); }
.item .pay { align-self: flex-start; margin-top: 0.35rem; }
.presets { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: none; }
.presets .pay, .preset { display: inline-block; padding: 0.4rem 1rem; border-radius: var(--radius); }
.preset { border: 1px solid var(--line); }
.pay-frame { min-height: 8rem; }
.pay-qr { margin: 0; width: 9rem; max-width: 100%; }
.pay-qr svg { display: block; width: 100%; height: auto; }
.navigation-actions-social_links { gap: 1rem; }
.navigation-actions-social_links svg { display: block; width: 1.5rem; height: 1.5rem; fill: currentColor; }
.navigation-menus-breadcrumb { font-size: 0.9rem; color: var(--soft); gap: 0.5rem; }
.data_display-single_record-detail_view { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.data_display-single_record-detail_view dt { color: var(--soft); }
.data_display-single_record-detail_view dd { margin: 0; }
.data_display-single_record-detail_view img { max-width: 16rem; }
.data_display-single_record-field_value .label { color: var(--soft); }
@media (max-width: 640px) {
  :root { --room: 0.6; }
  header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  header h1 { font-size: calc(2.5rem * 0.6); }
  .data_display-about_the_business-headline, .data_display-about_the_business-headline.level-2 { font-size: calc(2.5rem * 1.15); }
  header, main, footer { padding: calc(var(--gutter) * 0.65) 1rem; }
  /* Every layout of more than one column is one column on a phone. A column, count
     or per-view number is a class the renderer writes after the species class, so an
     attribute selector catches every number of it without naming each. */
  .stack_on_phone, .structure-layout-split, .structure-layout-columns, .structure-layout-grid, .direction-row,
  [class*=" columns-"], [class*=" count-"], .data_display-single_record-detail_view {
    grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto;
  }
  .layout-masonry { columns: 1; }
  /* A row: one block under another, every width undone. */
  .structure-layout-row { flex-direction: column; align-items: stretch; }
  .structure-layout-row > .span-1, .structure-layout-row > .span-2, .structure-layout-row > .span-3, .structure-layout-row > .span-4, .structure-layout-row > .span-5, .structure-layout-row > .span-6, .structure-layout-row > .span-7, .structure-layout-row > .span-8, .structure-layout-row > .span-9, .structure-layout-row > .span-10, .structure-layout-row > .span-11, .structure-layout-row > .span-12, .structure-layout-row > * { flex: 0 1 auto; }
/* Tabs that run down: their names over the tab open, as tabs that run across. */
  .structure-disclosure-tabs.orientation-vertical[data-live] { display: block; }
  .structure-disclosure-tabs.orientation-vertical > [role="tablist"] { flex-direction: row; }
  .structure-disclosure-tabs.orientation-vertical[data-live] > [role="tabpanel"] { padding: 0.6rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  [class*=" per_view-"] > * { flex-basis: 100%; }
  .data_display-single_record-detail_view dt { margin-top: 0.5rem; }
  .data_display-collection-calendar table, .data_display-collection-calendar caption, .data_display-collection-calendar tbody, .data_display-collection-calendar tr, .data_display-collection-calendar td { display: block; height: auto; }
  .data_display-collection-calendar thead, .data_display-collection-calendar td:not(.has) { display: none; }
  .data_display-collection-calendar .wd { display: inline; }
}
/* What a placed component chose, by the name the taxonomy gave the choice, after every
   kind's own rules, so a kind's own margins never undo where the founder stood it. A class
   the renderer emits and no rule here names costs nothing. */
.align-start { text-align: left; justify-content: flex-start; }
.align-center { text-align: center; justify-content: center; margin-left: auto; margin-right: auto; }
.align-end { text-align: right; justify-content: flex-end; margin-left: auto; }
.width-narrow { max-width: 40rem; margin-left: auto; margin-right: auto; }
.width-wide { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.width-full { max-width: none; }
/* The shadow a founder gave a block, after every kind's own. */
.shadow-deep { box-shadow: 0 6px 12px rgba(31, 27, 22, 0.18), 0 24px 48px -12px rgba(31, 27, 22, 0.18); }
.shadow-lifted { box-shadow: 0 2px 4px rgba(31, 27, 22, 0.18), 0 10px 24px -8px rgba(31, 27, 22, 0.18); }
.shadow-none { box-shadow: none; }
.shadow-soft { box-shadow: 0 1px 3px rgba(31, 27, 22, 0.18); }
/* What a block does under the pointer: one of the look's shadows. */
.hover_shadow-deep:hover { box-shadow: 0 6px 12px rgba(31, 27, 22, 0.18), 0 24px 48px -12px rgba(31, 27, 22, 0.18); }
.hover_shadow-lifted:hover { box-shadow: 0 2px 4px rgba(31, 27, 22, 0.18), 0 10px 24px -8px rgba(31, 27, 22, 0.18); }
.hover_shadow-none:hover { box-shadow: none; }
.hover_shadow-soft:hover { box-shadow: 0 1px 3px rgba(31, 27, 22, 0.18); }
/* A video behind a block fills it under what it holds, the block holding it on a stacking
   layer of its own, and is not played for a visitor who asks for less motion. */
.with-backdrop { position: relative; isolation: isolate; }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .backdrop { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: color 180ms ease, filter 180ms ease, transform 120ms ease; }
  /* What moves on a block the founder set moving: none of it for a visitor who asks for
     less motion. */
  .hover_lift-large:hover { transform: translateY(-6px); }
  .hover_lift-none:hover { transform: translateY(-0px); }
  .hover_lift-small:hover { transform: translateY(-2px); }
  .transition-gentle { transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease, transform 240ms ease; }
  .transition-none { transition: background-color 0ms ease, color 0ms ease, box-shadow 0ms ease, transform 0ms ease; }
  .transition-quick { transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
  .transition-slow { transition: background-color 480ms ease, color 480ms ease, box-shadow 480ms ease, transform 480ms ease; }
  .entrance-fade { animation: entrance-fade 600ms ease both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes entrance-fade { from { opacity: 0 } }
  .entrance-none { animation: entrance-none 600ms ease both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes entrance-none { from {  } }
  .entrance-rise { animation: entrance-rise 600ms ease both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes entrance-rise { from { opacity: 0; transform: translateY(24px) } }
  .entrance-zoom { animation: entrance-zoom 600ms ease both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes entrance-zoom { from { opacity: 0; transform: scale(0.96) } }
}
}
/* What the page's script shows or puts away is drawn hidden, whatever the look lays it
   out as, but for a form's thanks while the address targets it, which is how a browser
   running no script is shown it. */
@layer state {
[hidden]:not(:target) { display: none; }
}