/* bloechle.ch/cuisines — one stylesheet for every page.
   The previous site's look, brought to 2026: black-and-white header photos, the round "B"
   in charcoal, Libre Franklin, quiet greys; the magenta of the 125-year logo as the only accent. */

@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/LibreFranklin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --qry-speed-slow: .8s;   /* the qry stack's slow pace: the header slideshow fades over 1.6 s */
  --ink: #222;
  --charcoal: #383838;     /* the logo */
  --grey: #54595f;         /* the old site's text grey, 7:1 on white */
  --line: #dcdad5;
  --mist: #f4f3f0;
  --paper: #fff;
  --accent: #bc3a8e;       /* the 125-year logo, 5:1 on white */
  --radius: 4px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wide: 76rem;
  --measure: 40rem;
  --font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; }

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--charcoal); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: clamp(3.5rem, 7vw, 5rem) 0 1.5rem; }
main > section > h2:first-child { margin-top: 0; }   /* home sections: the divider or band above sets the space */

p { margin: 0 0 1em; }
address { font-style: normal; }


.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 30; padding: 0.5rem 1rem; background: var(--paper); color: var(--ink); }
.skip:focus { top: 0.75rem; }

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

/* anchors land below the sticky menu, not under it */
[id] { scroll-margin-top: 4.5rem; }

/* the old site's quotes, now with French guillemets in the accent */
.quote { max-width: 46rem; margin: 0 0 2rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 300; line-height: 1.45; color: var(--grey); }
.quote .q { color: var(--accent); }

.more { font-weight: 600; }

/* ── header: the black-and-white photo, the round B, the name ─────────── */

.masthead {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(18rem, 55svh, 34rem);
  overflow: hidden;
  background: var(--charcoal);
  color: var(--paper);
}
.masthead.is-home { min-height: clamp(20rem, 88svh, 60rem); }
.masthead::after { /* keeps the white type readable on any photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.15) 55%, rgb(0 0 0 / 0.45) 100%);   /* the top: the name stays readable on a bright window */
}
.backdrop { position: absolute; inset: 0; z-index: -2; }
.backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* several photos (home): only the current one shows; site.js (makeSlideshow) moves .is-current every 6 s
   and cross-fades them over 2 × --qry-speed-slow (1.6 s, :root) — no CSS transition here */
[data-slideshow] img { opacity: 0; }
[data-slideshow] img.is-current { opacity: 1; }
/* a photo is loaded only when its turn comes near (site.js marks .is-near the one after the current): hidden, a lazy
   image is never fetched — a phone no longer downloads the five at once */
[data-slideshow] img:not(.is-current, .is-near) { display: none; }

.masthead-inner { width: 100%; max-width: var(--wide); margin-inline: auto; padding: 5.5rem var(--gutter) clamp(2rem, 5vw, 3.5rem); }
.brand { position: absolute; top: 1.25rem; left: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter))); display: inline-flex; align-items: center; gap: 0.75rem; color: var(--paper); font-weight: 600; font-size: 1.15rem; text-decoration: none; }
.brand:hover { color: var(--paper); }
.logo { width: 2.75rem; height: 2.75rem; fill: currentColor; }
.is-home .brand .logo { width: 3.5rem; height: 3.5rem; }
.is-home .brand span { display: none; }  /* the name is the <h1> right below */
.masthead h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 700; text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }
.tagline { margin: 0.75rem 0 0; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 400; }

/* ── the menu, sticky under the header ────────────────────────────────── */

.menu { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.menu-inner { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 1.5rem; }
.menu ul { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem 1.5rem; overflow-x: auto; scrollbar-width: none; }
/* a short hairline between the B (home) and the pages */
.menu ul::before { content: ""; flex: none; width: 1px; height: 1.25rem; background: var(--line); }
/* the call button: a round handset on phones, the number in a pill on wide screens; tablets show neither */
.menu a.menu-call { display: none; }
/* the padding is 1 px heavier on top: Libre Franklin's line box sits its capitals 1 px high (measured) */
.menu a { position: relative; display: block; padding: calc(0.95rem + 1px) 0 calc(0.95rem - 1px); color: var(--charcoal); font-weight: 500; font-size: 0.98rem; text-decoration: none; white-space: nowrap; }
/* the page's mark: a magenta line on the menu's edge, the whole width of the words (on hover too) */
.menu a:not(.menu-call)::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--accent); opacity: 0; transition: opacity 0.2s; }
.menu a[aria-current="page"] { color: var(--ink); }
.menu a[aria-current="page"]::after { opacity: 1; }
.menu a.menu-home { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.menu a:focus-visible { outline-offset: -3px; }   /* the scrolling list would clip an outer ring */
.menu-logo { width: 1.6rem; height: 1.6rem; fill: var(--charcoal); }
@media (width <= 64rem) { .menu-home span, .menu ul::before { display: none; } }   /* the B alone leads home, no hairline: every page fits an iPad */
/* what does not fit, wherever (site.js menu(): a narrow window, a larger font, a zoom): the B alone, then the round handset */
.menu.is-tight .menu-home span, .menu.is-tight ul::before { display: none; }
@media (width >= 48rem) {
  .menu.is-tighter a.menu-call { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--charcoal); }
  .menu.is-tighter .menu-call span { display: none; }
  .menu.is-tighter .menu-call svg { width: 1.15rem; height: 1.15rem; fill: var(--paper); }
}
@media (width > 64rem) {   /* wide screens: the number at the right, in a pill */
  .menu a.menu-call { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; padding: 0.45rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .menu-call svg { width: 1rem; height: 1rem; fill: currentColor; }
}
@media (width < 48rem) {   /* phones; an iPad in portrait (768 px) shows the whole menu */
  .menu-inner { gap: 1rem; }
  .menu a.menu-call { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--charcoal); }
  .menu-call span { display: none; }
  .menu-call svg { width: 1.15rem; height: 1.15rem; fill: var(--paper); }
  .menu a.menu-call:hover { background: var(--accent); }
  /* the items scroll sideways on phones; an edge fades where there is more (site.js marks .more-before /
     .more-after), and the current page is brought to the middle on load (no scroll snapping: it would pull
     the current page back under a fade) */
}
/* the strip's edges fade where there is more (site.js .more-before / .more-after): on phones, and wherever the whole
   menu still does not fit (a large font, a zoom) */
.menu ul.more-after { mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
.menu ul.more-before { mask-image: linear-gradient(90deg, transparent, #000 1.5rem); }
.menu ul.more-before.more-after { mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); }

.notice { margin: 0; padding: 0.9rem var(--gutter); background: var(--charcoal); color: var(--paper); text-align: center; font-weight: 500; }
/* a notice that arrives after the page (not yet known in this browser) slides in instead of jumping in */
@media (prefers-reduced-motion: no-preference) {
  .notice.is-new { animation: notice-in var(--qry-speed-slow, .5s) var(--qry-ease, ease) both; overflow: hidden; }
  @keyframes notice-in { from { max-height: 0; padding-block: 0; } to { max-height: 12rem; } }
}

/* ── home ─────────────────────────────────────────────────────────────── */

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); color: var(--grey); }
.facts li { padding: 1.4rem clamp(0.75rem, 3vw, 1.5rem); }
.facts li:nth-child(odd) { border-right: 1px solid var(--line); }
.facts li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
.facts strong { display: block; font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--charcoal); }

/* between home sections: a hairline with the round B in the middle */
.divider { display: flex; align-items: center; gap: 1.5rem; width: 100%; max-width: var(--wide); margin: clamp(3.5rem, 8vw, 5.5rem) auto; padding-inline: var(--gutter); }
.trades .divider { padding-inline: 0; }   /* already inside .wrap */
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider-logo { width: 1.5rem; height: 1.5rem; fill: #c9c6c0; }

.trades { display: grid; padding-top: clamp(4.5rem, 10vw, 7rem); }   /* the first section under the header */
.trade { position: relative; display: grid; gap: 1.5rem 4rem; align-items: center; }
@media (min-width: 56rem) {
  .trade { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .trade:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }   /* photos keep the wide column */
  .trade:nth-of-type(even) .trade-text { order: 2; }   /* nth-of-type: the dividers between trades are divs */
}
.trade h2 { margin: 0 0 1rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.trade .quote { font-size: 1.15rem; margin-bottom: 1.5rem; }
/* the title's link covers the whole section: photos, line and arrow all open the gallery */
.stretched { text-decoration: none; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.trade:has(.stretched:focus-visible) { outline: 3px solid var(--accent); outline-offset: 0.75rem; border-radius: var(--radius); }
.stretched:focus-visible { outline: none; }
.go { width: 3rem; height: 3rem; fill: none; stroke: var(--charcoal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease, stroke 0.3s ease; }
.go circle { transition: fill 0.3s ease; }

/* one large photo, two small, every one in landscape 3:2: columns 2 : 1, so the whole frame is
   (2 + 1) wide for (2 × 2/3) high = 9 : 4, the same for every mosaic whatever the photos' sizes */
.mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.6rem; aspect-ratio: 9 / 4; }
.mosaic li { overflow: hidden; border-radius: var(--radius); min-height: 0; }
.mosaic li:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

/* made here */
.atelier { background: var(--mist); padding-block: clamp(4rem, 9vw, 6.5rem); margin-block: clamp(4rem, 9vw, 6.5rem); }
.atelier-inner { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 56rem) {
  .atelier-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .atelier-inner .mosaic { order: 2; }   /* photos on the right: the family section above has its photo on the left */
}
.atelier h2 { margin-top: 0; }
.atelier p { color: var(--grey); }

/* sections rise into place once, as they scroll into view (site.js: $.web's reveal() marks
   <html class="qry-js"> and adds .is-in; without JavaScript, or with reduced motion, they are simply there) */
@media (prefers-reduced-motion: no-preference) {
  .qry-js .reveal { opacity: 0; transform: translateY(2rem); transition: opacity 0.8s ease, transform 0.8s ease; }
  .qry-js .reveal.is-in { opacity: 1; transform: none; }
}


/* the family, closing the home page: the 1899 workshop photo on the left, who we are and the
   key figures on the right; the band meets the footer */
.family { display: grid; margin-top: clamp(5rem, 11vw, 8rem); background: var(--mist); }
main:has(> .family:last-child) + .colophon { margin-top: 0; }
.family > * { min-width: 0; }   /* grid items may shrink below their content: the figures wrap instead */
.family img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; filter: grayscale(1); }
.family-text { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); align-self: center; max-width: 42rem; }
.family h2 { margin: 0 0 1.25rem; font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 600; }
.family .facts { margin: 2rem 0; }
@media (min-width: 56rem) { .family { grid-template-columns: 1fr 1fr; } }

/* ── galleries ───────────────────────────────────────────────────────── */

.gallery {
  --gap: 0.6rem;
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
  /* never more than --cols columns (set per gallery to avoid a lonely last photo), fewer on small screens */
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 15rem), calc((100% - (var(--cols, 4) - 1) * var(--gap)) / var(--cols, 4))), 1fr));
}
.gallery a { display: block; overflow: hidden; border-radius: var(--radius); }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s ease; }
.caption { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--grey); }

.page { padding-top: clamp(2.5rem, 6vw, 4rem); }
.intro { margin-bottom: clamp(2rem, 5vw, 3rem); }
/* the legal page: a term, then its text — side by side from tablets */
.terms { max-width: var(--measure); margin: 0 0 2.5rem; display: grid; gap: 0.35rem 2rem; }
.terms dt { font-weight: 600; margin-top: 0.9rem; }
.terms dd { margin: 0; color: var(--ink); }
@media (min-width: 48rem) { .terms { grid-template-columns: 14rem 1fr; } .terms dt { margin-top: 0; } }
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.25em; }
.ad { max-width: 34rem; margin: 3rem 0 0; }
.ad img { border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.ad figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--grey); }

/* ── pager: previous / home / next at the end of a page ─────────────── */

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: clamp(4rem, 9vw, 6rem); padding-top: 2rem;
  /* a hairline as wide as the content above it (the padding of .wrap stays clear) */
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.pager a { text-decoration: none; font-weight: 600; font-size: 1.1rem; color: var(--charcoal); }
.pager-next { justify-self: end; text-align: right; }
.pager-hint { display: block; font-size: 0.85rem; font-weight: 400; color: var(--grey); }
.pager-prev .pager-hint::before { content: "← " / ""; }   /* decorative: not read aloud */
.pager-next .pager-hint::after { content: " →" / ""; }
.pager a.pager-home { display: grid; place-items: center; width: 3rem; height: 3rem; }
.pager-logo { width: 2.25rem; height: 2.25rem; fill: var(--charcoal); }
.pager + .colophon { margin-top: clamp(3rem, 7vw, 4.5rem); }

/* ── contact ─────────────────────────────────────────────────────────── */

.coords { display: grid; gap: 1rem 3rem; align-items: start; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--mist); border-radius: var(--radius); }
@media (min-width: 52rem) { .coords { grid-template-columns: repeat(3, auto); justify-content: start; } }
.coords p, .coords address { margin: 0; }
.hours { display: grid; grid-template-columns: auto auto; gap: 0.2rem 1rem; margin: 0; }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; }
.project { margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--mist); border-radius: var(--radius); }
.project h2 { margin-top: 0; }
.project p { max-width: 36rem; }
.coords .hours-note { margin-top: 0.6rem; max-width: 22rem; font-size: 0.9em; color: var(--grey); }
.actions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button { display: inline-block; padding: 0.7rem 1.2rem; border: 2px solid var(--charcoal); border-radius: var(--radius); background: var(--charcoal); color: var(--paper); font-weight: 600; text-decoration: none; }
.button:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.button.ghost { background: transparent; color: var(--charcoal); }
.button.ghost:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }

.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 2rem; }
.team img { width: 9rem; height: 9rem; object-fit: cover; border-radius: 50%; margin-bottom: 0.9rem; }
@media (width < 36rem) {   /* phones: two by two, the portraits a little smaller */
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .team img { width: 7.5rem; height: 7.5rem; }
}
.team .name { margin: 0; font-weight: 600; }
.team .role { margin: 0.2rem 0 0; color: var(--grey); font-size: 0.95rem; }

/* ── lightbox (built by site.js) ─────────────────────────────────────── */

.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #111; color: var(--paper); }
.lightbox::backdrop { background: #111; }
.lightbox figure { height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; padding: 3.5rem 4rem 1rem; }
/* every photo fills the space it is given, small originals included (scaled up, never cropped) */
.lightbox img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox figcaption { min-height: 1.6em; padding-top: 0.6rem; font-size: 0.95rem; color: #ddd; }
.lightbox button { position: absolute; width: 3rem; height: 3rem; border: 0; border-radius: var(--radius); background: rgb(255 255 255 / 0.12); color: var(--paper); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgb(255 255 255 / 0.25); }
.lightbox .close { top: 0.75rem; right: 0.75rem; }
.lightbox .prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox :focus-visible { outline-color: var(--paper); }
@media (max-width: 40rem) {
  .lightbox figure { padding: 3.5rem 0.5rem 4.5rem; }
  .lightbox .prev, .lightbox .next { top: auto; bottom: 0.75rem; transform: none; }
}

/* ── footer ──────────────────────────────────────────────────────────── */

.colophon { margin-top: clamp(4rem, 9vw, 6rem); background: var(--charcoal); color: #e8e8e8; font-size: 0.95rem; }
.colophon-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem 3rem; padding-block: 2.25rem 2.75rem; }
.colophon p { margin: 0; }
.colophon a { color: var(--paper); }
.colophon a:hover { color: #f3c2e2; }
.colophon .brand { position: static; font-size: 1.05rem; }
.colophon .logo { width: 2.25rem; height: 2.25rem; }
.colophon :focus-visible { outline-color: var(--paper); }
.to-top { margin-left: auto; align-self: center; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--paper); border-radius: 50%; }
.to-top::before { content: ""; width: 0.8rem; height: 0.8rem; margin-top: 0.3rem; border: solid var(--paper); border-width: 2px 0 0 2px; transform: rotate(45deg); }
.to-top:hover { background: var(--paper); }
.to-top:hover::before { border-color: var(--charcoal); }

/* hover effects only where a pointer really hovers: no effect stuck on after a tap */
@media (hover: hover) {
  .menu a:hover { color: var(--ink); }
  .menu a:hover::after { opacity: 1; }
  .menu a.menu-call:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
  .trade:hover h2 a { color: var(--accent); }
  .trade:hover .go { transform: translateX(0.5rem); stroke: var(--paper); }
  .trade:hover .go circle { fill: var(--accent); stroke: var(--accent); }
  .trade:hover .mosaic img { transform: scale(1.04); }
  .gallery a:hover img { transform: scale(1.03); }
  .pager a:hover { color: var(--accent); }
  .pager a.pager-home:hover .pager-logo { fill: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery img, .mosaic img, .go, .go circle { transition: none; }
}

/* Print: the content and the contact details, without the menu and what moves */
@media print {
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  .menu, .notice, .skip, .to-top, .lightbox, .pager, .pager-hint, .menu-call, .backdrop { display: none !important; }
  .masthead { min-height: auto !important; }                     /* no photo on paper: the title in black on white */
  img, figure { break-inside: avoid; }
  .qry-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }   /* the sections not yet scrolled to print too */
  h1, h2, h3 { break-after: avoid; }
}

/* page to page: a cross-fade where the browser can (view transitions; others just change page) —
   the qry stack's motion signature (--qry-speed, --qry-ease) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-group(root) { animation-duration: var(--qry-speed, .2s); animation-timing-function: var(--qry-ease, cubic-bezier(.2, .7, .2, 1)); }