/* A business's own page on Risiti (risiti.ai/<handle>). Its colours come in with the page (--paper, --ink, --wash,
   --muted, --faint, --line, --line-strong, --brand, --on-brand, --brand-text, --brand-soft; light and dark), made from
   the business's colour and its kind's ground (site/functions/_look.js). The body says the kind (k-), the typeface
   for the name (t-sans, t-serif) and how the name is set (s-board: painted on a panel; s-plain: on the page). */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%;
  src: url(/assets/fonts/instrument-sans-latin-wdth-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%;
  src: url(/assets/fonts/instrument-sans-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #fff; --ink: #14161b; --wash: #f1f2f4; --muted: rgba(20, 22, 27, .66); --faint: rgba(20, 22, 27, .5); --line: rgba(20, 22, 27, .13); --line-strong: rgba(20, 22, 27, .28);
  --brand: #0f7b5f; --on-brand: #fff; --brand-text: #0f7b5f; --brand-soft: rgba(15, 123, 95, .12);
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --display: var(--sans);
  --g: max(18px, env(safe-area-inset-left, 0px));
  --gr: max(18px, env(safe-area-inset-right, 0px));
  --wide: 1160px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
.t-serif { --display: var(--serif); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body.bz { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.ic { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
/* the drawings of the page's own icons (one each, used where they go), and those icons */
.glyphs { position: absolute; width: 0; height: 0; overflow: hidden; }
.g { display: block; width: 24px; height: 24px; flex: none; fill: currentColor; }
:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 2px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; }
[hidden] { display: none !important; }

/* ---------- the bar across the top: who this is, the page's sections, and the first action ---------- */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--g); background: var(--paper); border-bottom: 1px solid var(--line); }
.bar-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; }
.bar-id b { font-weight: 640; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-nav { display: none; }
.bar-act { flex: none; display: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-weight: 640; font-size: 14.5px; text-decoration: none; }
.past-sign .bar-act { display: inline-flex; animation: in .2s var(--ease); }
@keyframes in { from { opacity: 0; transform: translateY(-4px); } }
.menu { flex: none; }
.menu > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 12px; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ic { width: 24px; height: 24px; }
.menu[open] > summary { background: var(--wash); }
.menu-in { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 6px var(--gr) 12px var(--g); background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 22px 32px -26px rgba(0, 0, 0, .5); animation: in .18s var(--ease); }
.menu-in a { display: flex; align-items: center; min-height: 54px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-in a:last-child { border-bottom: 0; }
.mk { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-weight: 700; }
.mk.sm { width: 32px; height: 32px; font-size: 13px; }
.mk.md { width: 48px; height: 48px; font-size: 17px; border-radius: 14px; }
.mk img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the page ---------- */
.page { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gr) 0 var(--g); }

/* the sign: the business's name, what and where it is, open or closed, and the first thing to do */
.sign { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
.sign-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.sign-board { min-width: 0; }
.s-board .sign-board { background: var(--brand); color: var(--on-brand); border-radius: 28px; padding: 26px 22px 24px; }
.s-plain .sign-board { padding: 22px 0 0; }
.sign-name { margin: 0; font-family: var(--display); font-size: clamp(40px, min(12.6vw, 15svh), 96px); font-weight: 700; line-height: .94; letter-spacing: -.026em; text-wrap: balance; overflow-wrap: anywhere; animation: set .9s var(--ease) both; }
.t-serif .sign-name { font-weight: 400; font-size: clamp(44px, min(15vw, 17svh), 116px); line-height: .9; letter-spacing: -.012em; }
.sign-kind { margin: 12px 0 0; font-size: 15.5px; font-weight: 540; color: var(--muted); }
.s-board .sign-kind { color: var(--on-brand); opacity: .84; }
.sign-line { margin: 12px 0 0; font-size: 19px; line-height: 1.35; max-width: 34ch; color: var(--muted); text-wrap: pretty; }
.s-board .sign-line { color: var(--on-brand); opacity: .9; }
.t-serif .sign-line { font-family: var(--serif); font-size: 23px; line-height: 1.25; font-style: italic; }
@keyframes set { from { opacity: 0; transform: translateY(10px); font-stretch: 100%; } }
.t-serif .sign-name { animation-name: set-serif; }
@keyframes set-serif { from { opacity: 0; transform: translateY(10px); letter-spacing: .03em; } }
.window { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wash); }
.window img { width: 100%; height: 100%; object-fit: cover; }
.s-board .window { margin-top: 24px; border-radius: 18px; }
/* a name set on the page with a cover: the picture runs to the screen's edges and the name sits on it, in white */
.s-plain .sign.has-photo { margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--g)); padding-top: 0; }
.s-plain .has-photo .window { grid-area: 1 / 1; align-self: stretch; position: relative; width: 100%; aspect-ratio: auto; min-height: min(125vw, 76svh); border-radius: 0; }
/* the picture fills whatever height the name and buttons need, and never sets that height itself */
.s-plain .has-photo .window img { position: absolute; inset: 0; }
.s-plain .has-photo .window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 9, .36) 0%, rgba(14, 11, 9, 0) 50%); }
.s-plain .has-photo .sign-copy { display: contents; }
/* the shade behind the name grows with it, so a long name or line never sits on a bright part of the picture */
.s-plain .has-photo .sign-board { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; padding: 72px var(--gr) 26px var(--g); color: #fff; background: linear-gradient(to bottom, rgba(14, 11, 9, 0) 0, rgba(14, 11, 9, .46) 72px, rgba(14, 11, 9, .72) 100%); }
.s-plain .has-photo .sign-name { text-shadow: 0 2px 28px rgba(0, 0, 0, .28); }
.s-plain .has-photo .sign-kind, .s-plain .has-photo .sign-line { color: rgba(255, 255, 255, .9); }
.s-plain .has-photo .sign-acts { grid-area: 2 / 1; padding: 20px var(--gr) 0 var(--g); }
/* no cover and a plain name: the name on a soft panel of the business's colour */
.s-plain .sign.no-photo .sign-board { padding: 36px 24px 30px; border-radius: 28px; background: var(--brand-soft); }
.sign-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.open { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 560; color: var(--muted); }
.open i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.open.is-open { color: var(--ink); }
.open.is-open i { background: #16a05a; box-shadow: 0 0 0 4px rgba(22, 160, 90, .18); }
.open.sm { font-size: 14px; font-weight: 500; gap: 7px; }
.open.sm i { width: 7px; height: 7px; }

.act { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 15px; border: 0; background: var(--wash); color: var(--ink); font: 600 15px/1.1 var(--sans); text-decoration: none; text-align: center; transition: transform .12s var(--ease), background .15s; }
.act:active { transform: scale(.98); }
.act-main { min-height: 58px; background: var(--brand); color: var(--on-brand); font-size: 17.5px; font-weight: 660; border-radius: 17px; }
.s-board .sign-acts .act-main { background: var(--ink); color: var(--paper); }
.acts-row { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acts-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acts-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acts-row.n1 { grid-template-columns: 1fr; }
.acts-row .act { flex-direction: column; gap: 5px; min-height: 64px; padding: 8px 4px; font-size: 13.5px; font-weight: 580; }
.acts-row .act .ic { width: 22px; height: 22px; }
.acts-row.n1 .act { flex-direction: row; min-height: 52px; gap: 9px; font-size: 15px; }

/* offers the owner is running now */
.offers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 28px; }
.offer { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 15px 16px; border-radius: 16px; background: var(--brand-soft); }
.offer .ic { color: var(--brand-text); width: 22px; height: 22px; margin-top: 1px; }
.offer b { font-weight: 650; }
.offer small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }

/* ---------- the sections: a heading above what it holds on a phone; beside it on a wide screen ---------- */
.secs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; margin-top: 56px; }
.sec { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; scroll-margin-top: 70px; }
.sec-h { min-width: 0; }
.sec-h h2 { margin: 0; font-family: var(--display); font-size: 31px; font-weight: 680; line-height: 1.06; letter-spacing: -.018em; text-wrap: balance; }
.t-serif .sec-h h2 { font-weight: 400; font-size: 40px; letter-spacing: -.008em; }
.t-sans .sec-h h2 { font-stretch: 92%; }
.sec-h p { margin: 8px 0 0; max-width: 42ch; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.sec-b { min-width: 0; }
.sec h3 { margin: 0 0 12px; font: 640 15px/1.3 var(--sans); color: var(--muted); }

/* what it sells: a price list, a name and its price joined by a dotted line, as on a shop's board */
.cats { position: sticky; top: 58px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gr)) 6px calc(-1 * var(--g)); padding: 8px var(--gr) 10px var(--g); background: var(--paper); scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--wash); text-decoration: none; font-size: 14.5px; font-weight: 560; white-space: nowrap; }
.cat-h { margin: 28px 0 2px; font: 620 15px/1.3 var(--sans); color: var(--muted); scroll-margin-top: 120px; }
.sec .cat-h { margin: 28px 0 2px; }
.items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.it { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.it.has-ph { grid-template-columns: 64px minmax(0, 1fr) auto; }
.it.has-ic { grid-template-columns: 46px minmax(0, 1fr) auto; }
/* each product, service and place with an icon of what it is, in the business's colour */
.it-ic, .pl-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-text); }
.it-ph { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--wash); }
.it-body { min-width: 0; }
.it-line { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 17px; line-height: 1.3; }
.it-n { font-weight: 580; min-width: 0; overflow-wrap: anywhere; }
.it-lead { flex: 1 1 12px; min-width: 12px; align-self: baseline; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); }
.it-p { flex: none; font-weight: 680; white-space: nowrap; font-variant-numeric: tabular-nums; }
.it-p small { font-size: 14px; font-weight: 460; color: var(--muted); }
.it-p.it-ask { font-weight: 470; font-size: 14.5px; color: var(--muted); }
.it-d { margin: 5px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.it-d span { white-space: nowrap; }
.tag { font-style: normal; display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 640; line-height: 1.6; vertical-align: 2px; background: var(--brand-soft); color: var(--brand-text); white-space: nowrap; }
.tag.new { background: var(--wash); color: var(--ink); }
.it-add { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--paper); font-weight: 640; font-size: 14.5px; transition: background .15s, color .15s, transform .12s var(--ease); }
.it-add:active { transform: scale(.94); }
.it-add .ic { width: 22px; height: 22px; }
.it-add.on { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.it-add.on[data-n]:not([data-n=""]) .ic { display: none; }
.it-add.on[data-n]:not([data-n=""])::after { content: attr(data-n); font-variant-numeric: tabular-nums; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; }
.tile img, .tile-ph { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--wash); margin-bottom: 6px; }
.tile-ph { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.tile-ph .g { width: 36%; height: 36%; }
.tile-n { margin: 0; font-weight: 580; font-size: 15.5px; line-height: 1.3; }
.tile .tag { margin: 4px 6px 0 0; }
.tile .it-p { font-size: 15px; }
.tile .it-add { position: absolute; top: 10px; right: 10px; background: var(--paper); border-color: transparent; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.tile .it-add.on { background: var(--brand); }
.deliver { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 15px 16px; border-radius: 16px; background: var(--wash); font-size: 15.5px; }
.deliver .ic { width: 22px; height: 22px; color: var(--brand-text); margin-top: 1px; }

/* about: a few lines, set large */
.about p { margin: 0 0 14px; max-width: 60ch; font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.t-serif .about p { font-family: var(--serif); font-size: 24px; line-height: 1.38; }
.about p:last-child { margin-bottom: 0; }

/* how to pay: a board with the numbers big, as they are painted on the wall, each copied with a tap */
.boards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.board { background: var(--wash); border-radius: 22px; padding: 4px 20px; }
.board hr { border: 0; border-top: 2px dashed var(--line-strong); margin: 0; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k btn" "v btn" "sub sub"; column-gap: 12px; align-items: center; padding: 16px 0; }
.pay-k { grid-area: k; font-size: 14.5px; font-weight: 520; color: var(--muted); }
.pay-v { grid-area: v; font-size: 31px; font-weight: 700; font-stretch: 86%; line-height: 1.12; letter-spacing: .015em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pay-sub { grid-area: sub; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.copy { grid-area: btn; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--paper); font-size: 14.5px; font-weight: 640; transition: background .15s, color .15s; }
.copy .ic { width: 18px; height: 18px; }
.copy.done { background: var(--brand); color: var(--on-brand); }
.pay-also { margin: 14px 2px 0; font-size: 15.5px; color: var(--muted); }

/* find us: where, the hours, and how to reach the business, on a panel of its own */
.sec-find { padding: 26px 20px 24px; border-radius: 26px; background: var(--wash); scroll-margin-top: 70px; }
.fd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.fd { min-width: 0; }
.find-q { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; margin: 0 0 6px; border-radius: 15px; background: var(--paper); }
.find-q .ic { color: var(--muted); }
.find-q input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: inherit; outline: none; }
.places { list-style: none; margin: 0; padding: 0; }
.pl { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pl-ic { background: var(--paper); }
.pl:first-child { padding-top: 4px; }
.pl:last-child { border-bottom: 0; }
.pl-t { display: grid; gap: 3px; min-width: 0; }
.pl-t b { font-size: 17px; font-weight: 620; }
.pl-t > span { font-size: 14.5px; color: var(--muted); }
.pl-a { display: flex; gap: 6px; }
.pl-a a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--paper); text-decoration: none; font-size: 14px; font-weight: 620; }
.pl-a .ic { width: 20px; height: 20px; }
.town { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 560; }
.town .ic { width: 22px; height: 22px; color: var(--brand-text); }
.sec-find .deliver { background: var(--paper); }
.hrs { width: 100%; border-collapse: collapse; font-size: 16px; }
.hrs th { text-align: left; font-weight: 480; padding: 10px 12px 10px 0; color: var(--muted); }
.hrs td { text-align: right; padding: 10px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrs tr + tr > * { border-top: 1px solid var(--line); }
.hrs tr:first-child > * { padding-top: 2px; }
.hrs tr.today > * { color: var(--ink); font-weight: 660; }
.hrs-t { margin: 0; font-size: 17px; }
.cts { display: grid; gap: 8px; }
.ct { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 16px 8px 10px; border-radius: 16px; background: var(--paper); text-decoration: none; }
.ct > .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); }
.ct span { display: grid; min-width: 0; }
.ct b { font-size: 15px; font-weight: 640; }
.ct small { font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- the foot: who this is, its links, this page's QR code and address, and who made the page ---------- */
.foot { margin-top: 88px; border-top: 1px solid var(--line); }
.foot-in { max-width: var(--wide); margin: 0 auto; padding: 36px var(--gr) calc(32px + env(safe-area-inset-bottom, 0px)) var(--g); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.foot-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.foot-id > span { display: grid; gap: 2px; min-width: 0; }
.foot-id b { font-family: var(--display); font-size: 22px; font-weight: 680; line-height: 1.15; letter-spacing: -.01em; }
.t-serif .foot-id b { font-weight: 400; font-size: 28px; }
.foot-id small { font-size: 14.5px; color: var(--muted); }
.qr { display: flex; align-items: center; gap: 18px; }
.qr-code { width: 116px; flex: none; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-t { display: grid; gap: 4px; min-width: 0; }
.qr-t b { font-size: 17px; font-weight: 660; overflow-wrap: anywhere; }
.qr-t > span { font-size: 14.5px; color: var(--muted); }
.qr-acts { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 2px; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 640; color: var(--brand-text); text-decoration: none; }
.link .ic { width: 18px; height: 18px; }
.link.done { color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 13px; background: var(--wash); text-decoration: none; font-size: 14.5px; font-weight: 580; }
.foot-links .ic { width: 18px; height: 18px; color: var(--muted); }
.made { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.made > span { flex-basis: 100%; }
.made a { color: inherit; text-decoration: none; }
.made b { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }

/* ---------- the order tray, the request form and the little notes ---------- */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px var(--gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--g); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -16px 32px -24px rgba(0, 0, 0, .4); animation: up .25s var(--ease); }
@keyframes up { from { transform: translateY(100%); } }
.tray-t { flex: 1; min-width: 0; font-weight: 640; font-size: 15.5px; }
.tray .act-main { min-height: 50px; font-size: 16px; padding: 0 18px; }
body.has-tray { padding-bottom: 86px; }
dialog.ask { width: 100%; max-width: 560px; max-height: 92vh; margin: auto auto 0; padding: 0; border: 0; border-radius: 26px 26px 0 0; background: var(--paper); color: var(--ink); }
.ask::backdrop { background: rgba(8, 10, 14, .48); }
.ask[open] { animation: up .28s var(--ease); }
.ask-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 92vh; }
.ask header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 6px; }
.ask h2 { margin: 0; font-family: var(--display); font-size: 27px; font-weight: 680; letter-spacing: -.015em; }
.t-serif .ask h2 { font-weight: 400; font-size: 32px; }
.x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; border: 0; background: var(--wash); }
.ask-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 10px 20px 16px; overflow: auto; }
.ask-list { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 4px; border-radius: 14px; background: var(--wash); font-size: 15px; }
.ask-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.ask-list .less { appearance: none; border: 0; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: 600 20px/1 inherit; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ask-list .less:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ask-list .less:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.f { display: grid; gap: 6px; }
.f > span { font-size: 14.5px; font-weight: 600; }
.f input, .f select, .f textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.f textarea { resize: vertical; min-height: 96px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--brand-soft); border-color: var(--brand-text); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask footer { display: grid; gap: 8px; padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.ask-note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.say { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: calc(100% - 36px); margin: 0; padding: 11px 16px; border-radius: 13px; background: var(--ink); color: var(--paper); font-size: 14.5px; font-weight: 560; opacity: 0; transform: translate(-50%, 16px); transition: opacity .2s, transform .25s var(--ease); pointer-events: none; }
.say.on { opacity: 1; transform: translate(-50%, 0); }
body.has-tray .say { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

/* a sample page says so, and shows what a request would send */
.demo { background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.4; }
.demo p { max-width: var(--wide); margin: 0 auto; padding: 10px var(--gr) 10px var(--g); }
.demo a { color: inherit; font-weight: 680; text-underline-offset: 3px; }
.demo-say { position: fixed; left: var(--g); right: var(--gr); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45; max-width: 520px; margin: 0 auto; padding: 16px 18px; display: grid; gap: 8px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5); font-size: 14.5px; cursor: pointer; }
.demo-say span { white-space: pre-wrap; padding: 12px 14px; border-radius: 14px; background: var(--wash); }

/* an address with no page */
.empty { max-width: 640px; padding-top: 18vh; padding-bottom: 12vh; }
.empty h1 { margin: 10px 0 14px; font-size: clamp(36px, 9vw, 56px); line-height: 1; letter-spacing: -.025em; }
.empty p { font-size: 17px; color: var(--muted); }
.empty-url { font-size: 18px; } .empty-url b { color: var(--ink); }
.empty-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.empty-acts .act { padding: 0 22px; }

/* ---------- phones: a name gets the whole line, its price under it ---------- */
@media (max-width: 479px) {
  .it-line { flex-wrap: wrap; row-gap: 3px; }
  .it-lead { display: none; }
  .it-p { flex-basis: 100%; }
  .it-p.it-ask { font-size: 14px; }
  .it-p { white-space: normal; }
}

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .sign-name { font-size: 40px; }
  .t-serif .sign-name { font-size: 48px; }
  .acts-row.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pay-v { font-size: 27px; }
  .it.has-ic { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; }
  .it-ic { width: 38px; height: 38px; border-radius: 12px; }
  .it-ic .g { width: 21px; height: 21px; }
}

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  dialog.ask { margin: auto; border-radius: 26px; }
  .s-plain .has-photo .window { min-height: min(68.75vw, 76svh); }
  .boards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .fd-grid.n2, .fd-grid.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .fd-grid .fd-where, .fd-grid.n2 .fd-where + .fd { grid-column: 1 / -1; }
  .fd .hrs { max-width: 460px; }
  .foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .foot-links, .made { grid-column: 1 / -1; }
  .made > span { flex-basis: auto; margin-right: auto; }
}
@media (min-width: 960px) {
  body.bz { font-size: 17px; }
  .bar { min-height: 66px; gap: 16px; padding-left: max(var(--g), calc((100% - var(--wide)) / 2 + var(--g))); padding-right: max(var(--gr), calc((100% - var(--wide)) / 2 + var(--gr))); }
  .bar-id { flex: 0 1 auto; }
  .bar-nav { display: flex; gap: 2px; margin-left: auto; }
  .bar-nav a { padding: 10px 14px; border-radius: 11px; text-decoration: none; font-size: 15px; font-weight: 560; color: var(--muted); white-space: nowrap; transition: color .15s, background .15s; }
  .bar-nav a:hover { color: var(--ink); background: var(--wash); }
  .bar-act { display: inline-flex; min-height: 44px; padding: 0 20px; }
  .bar-nav + .bar-act { margin-left: 8px; }
  .bar-id + .bar-act { margin-left: auto; }
  .menu { display: none; }
  /* the sign: a name set on the page sits on the left of its cover; a signboard keeps its photo in a window */
  .sign { padding-top: 28px; }
  .s-plain .sign.has-photo { margin: 24px 0 0; }
  .s-plain .has-photo .window { min-height: clamp(540px, 76vh, 720px); border-radius: 32px; }
  .s-plain .has-photo .window::after { background: linear-gradient(90deg, rgba(14, 11, 9, .76) 0%, rgba(14, 11, 9, .5) 36%, rgba(14, 11, 9, 0) 68%), linear-gradient(to top, rgba(14, 11, 9, .5) 0%, rgba(14, 11, 9, 0) 46%); }
  .s-plain .has-photo .sign-copy { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; position: relative; z-index: 1; max-width: 920px; padding: 64px; }
  .s-plain .has-photo .sign-board { max-width: 760px; }
  .s-plain .has-photo .sign-board { padding: 0; align-self: auto; background: none; }
  .s-plain .has-photo .sign-acts { padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .s-plain .has-photo .sign-acts .open { flex-basis: 100%; margin-bottom: 4px; color: rgba(255, 255, 255, .88); }
  .s-plain .has-photo .sign-acts .open.is-open { color: #fff; }
  .s-plain .has-photo .act-main { padding: 0 30px; }
  .s-plain .has-photo .acts-row { display: flex; gap: 8px; }
  .s-plain .has-photo .acts-row .act { flex-direction: row; gap: 8px; min-height: 58px; padding: 0 18px; font-size: 15px; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .s-plain .has-photo .acts-row .act:hover { background: rgba(255, 255, 255, .22); }
  .s-plain .has-photo .acts-row .act .ic { width: 20px; height: 20px; }
  .s-plain .sign.no-photo .sign-board { padding: 64px 56px 56px; border-radius: 34px; }
  .s-plain .sign.no-photo .sign-copy { gap: 26px; }
  .s-plain .no-photo .sign-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .s-plain .no-photo .sign-acts .open { flex-basis: 100%; }
  .s-plain .no-photo .act-main { padding: 0 30px; }
  .s-plain .no-photo .acts-row { display: flex; gap: 8px; }
  .s-plain .no-photo .acts-row .act { flex-direction: row; gap: 8px; min-height: 58px; padding: 0 18px; font-size: 15px; }
  .s-board .sign-board { padding: 44px 44px 40px; border-radius: 34px; }
  .s-board .has-photo .sign-board { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto; column-gap: 44px; align-items: end; }
  .s-board .has-photo .sign-board > :not(.window) { grid-column: 1; }
  .s-board .has-photo .window { grid-column: 2; grid-row: 1 / span 3; margin: 0; aspect-ratio: 5 / 4; border-radius: 22px; }
  .s-board .sign-acts { grid-template-columns: auto auto 1fr; align-items: center; column-gap: 18px; }
  .s-board .sign-acts .act-main { padding: 0 34px; }
  .s-board .sign-acts .acts-row { display: flex; gap: 8px; }
  .s-board .sign-acts .acts-row .act { flex-direction: row; gap: 8px; min-height: 58px; padding: 0 18px; font-size: 15px; }
  .s-board .sign-acts .acts-row .act .ic { width: 20px; height: 20px; }
  .s-board .sign-acts .open { grid-column: 1 / -1; }
  .sign-name { font-size: clamp(64px, 7.6vw, 104px); }
  .t-serif .sign-name { font-size: clamp(72px, 8.6vw, 128px); }
  /* the sections: the heading on the left, staying in view while what it holds goes by */
  .secs { gap: 104px; margin-top: 96px; }
  .sec { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 80px; scroll-margin-top: 90px; }
  .sec-h { position: sticky; top: 100px; align-self: start; }
  .sec-h h2 { font-size: 38px; }
  .t-serif .sec-h h2 { font-size: 48px; }
  .sec-find { padding: 56px; border-radius: 34px; }
  .sec-find .sec-h { position: static; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cats { position: static; margin: 0 0 6px; padding: 0 0 10px; flex-wrap: wrap; overflow: visible; }
  .tray { left: auto; right: 28px; bottom: 28px; min-width: 380px; border: 1px solid var(--line); border-radius: 20px; padding: 12px 12px 12px 20px; }
  body.has-tray { padding-bottom: 0; }
  .foot { margin-top: 120px; }
  .foot-in { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; }
  .foot-links { grid-column: 1; }
  .qr { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}