/* Romi's menu. Clean and quiet: warm paper, dark ink, hairlines, her photos.
   Red belongs to the logo and the order button, nothing else. */

@font-face {
  font-family: 'Miriam Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/a/fonts/miriam-libre-hebrew-400.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Miriam Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/a/fonts/miriam-libre-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Miriam Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/a/fonts/miriam-libre-hebrew-500.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Miriam Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/a/fonts/miriam-libre-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Miriam Libre draws the shekel sign like the letters שח; only that glyph comes from Rubik. */
@font-face {
  font-family: 'Shekel';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/a/fonts/rubik-hebrew-400.woff2) format('woff2');
  unicode-range: U+20AA;
}

:root {
  --paper: #f9f8f4;
  --panel: #ffffff;
  --ink: #221e1c;
  --ink-2: #6b6560;
  --ink-3: #a39d96;
  --rule: #e3e0d9;
  --empty: #efeae1;
  --cta: #e80203; /* her logo red: the one action colour on the page */
  --cta-hover: #c40207;
  --font: 'Shekel', 'Miriam Libre', 'Assistant', system-ui, sans-serif;
  --pad: 20px;
  --thumb: 72px;
  --gap: 14px;
  color-scheme: light;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation; /* quick double taps on + add two instead of zooming */
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- The column ---------- */

.card {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px var(--pad) 40px;
}

/* ---------- Brand ---------- */

.brand {
  text-align: center;
}

.wordmark {
  display: block;
  width: 160px;
  margin: 0 auto;
  font-size: inherit;
  line-height: 0;
}
.wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.tagline {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-2);
}

.note {
  display: inline-block;
  margin: 14px 0 0;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.announce {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Section chips ---------- */

.chips {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 18px calc(var(--pad) * -1) 0;
  padding: 10px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.chips.is-stuck {
  border-bottom-color: var(--rule);
}
.chips-in {
  display: flex;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-in::-webkit-scrollbar {
  display: none;
}
.chips a {
  flex: none;
  padding: 7px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chips a[aria-current='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- Sections ---------- */

.group {
  margin-top: 24px;
  scroll-margin-top: 64px;
}

.group h2 {
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.items {
  display: grid;
}

/* ---------- Items ---------- */

.item {
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 62px;
}

.item > summary {
  display: grid;
  grid-template-columns: var(--thumb) 1fr 24px;
  grid-template-areas:
    'thumb head tog'
    'thumb short short'
    'thumb opts opts';
  grid-template-rows: auto auto 1fr;
  column-gap: var(--gap);
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.item > summary::-webkit-details-marker {
  display: none;
}

.thumb {
  grid-area: thumb;
  display: block;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  overflow: hidden;
  background: var(--empty);
}
.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  padding-top: 4px;
}

.name {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.badge,
.state {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.badge {
  border: 1px solid var(--ink);
}
.state {
  background: var(--empty);
  color: var(--ink-2);
}

.short {
  grid-area: short;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.opts {
  grid-area: opts;
  display: grid;
  gap: 10px;
  max-width: 360px;
  margin-top: 8px;
}
.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}
.lbl {
  flex: 1;
  min-width: 0;
}

/* The + and - on each size row. Nothing shows without the script, which adds .js. */
.step {
  display: none;
  flex: none;
  align-items: center;
  gap: 0;
  margin-block: 3px;
}
.js .step {
  display: inline-flex;
}
.step button {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.step button::after {
  content: '';
  position: absolute;
  inset: -5px;
}
.step svg {
  width: 14px;
  height: 14px;
}
.step .minus,
.step .qty {
  display: none;
}
.step.on .minus {
  display: grid;
}
.step.on .qty {
  display: block;
  min-width: 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.step.on .plus {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.pr {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tog {
  grid-area: tog;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  color: var(--ink-3);
  transition: rotate 0.25s ease, color 0.2s;
}
.tog svg {
  display: block;
  width: 100%;
  height: 100%;
}
.item[open] .tog {
  rotate: 180deg;
  color: var(--ink);
}

@media (hover: hover) {
  .item > summary:hover .tog {
    color: var(--ink);
  }
  .item > summary:hover .name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
  }
}

.is-paused .name,
.is-paused .pr {
  color: var(--ink-2);
}
.is-paused .thumb {
  opacity: 0.55;
}

/* ---------- Expanded panel ---------- */

.panel {
  overflow: hidden;
}
.panel-in {
  padding: 0 0 22px;
}

.desc {
  margin: 0 0 16px;
  padding-inline-start: calc(var(--thumb) + var(--gap));
  font-size: 16px;
  line-height: 1.75;
}

.gallery {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar {
  display: none;
}
.ph {
  flex: 0 0 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--empty);
  cursor: zoom-in;
  scroll-snap-align: start;
}
.gallery.many .ph {
  flex-basis: 86%;
}
.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s;
}
.ph img.is-in {
  opacity: 1;
}

.acts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s;
}
.order svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.order:hover {
  background: var(--cta-hover);
}

.order.big {
  min-height: 50px;
  padding: 12px 26px;
  font-size: 17px;
}

.share {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.share svg {
  width: 19px;
  height: 19px;
}

.soon .item > summary {
  grid-template-areas:
    'thumb head tog'
    'thumb short short';
  grid-template-rows: auto 1fr;
}

.empty {
  margin: 34px 0 10px;
  text-align: center;
  font-size: 17px;
}

/* ---------- Footer: about, questions ---------- */

.foot {
  margin-top: 36px;
}

.notes {
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.about-me h2,
.questions h2 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}
.about-text,
.faq {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.75;
}
.about {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.questions {
  margin-top: 32px;
}
.faq {
  margin-bottom: 14px;
}
.ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.ask svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 14px 0 0;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 15px;
  text-decoration: none;
}
.social svg {
  width: 20px;
  height: 20px;
}
/* The quiet last line: how visits are counted. */
.foot .privacy {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- Basket ---------- */

.has-bar .card {
  padding-bottom: 104px;
}

.bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.bar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 580px;
  min-height: 50px;
  margin: 0 auto;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font: 500 16.5px/1 var(--font);
  cursor: pointer;
}
.bar-count {
  flex: 1;
  font-weight: 400;
  font-size: 15px;
  text-align: start;
  opacity: 0.92;
}

.basket {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 18px var(--pad) calc(18px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
}
.basket::backdrop {
  background: rgb(24 21 20 / 0.45);
}
.b-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.b-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.b-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.b-close svg {
  width: 22px;
  height: 22px;
}
.b-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.b-text {
  flex: 1;
  min-width: 0;
}
.b-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.b-label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}
.b-total {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 500;
}
.b-total b {
  font-weight: 500;
}
.b-field {
  display: block;
  margin: 16px 0 0;
}
.b-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
}
.b-field input,
.b-field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: 400 16px/1.4 var(--font);
}
.b-field textarea {
  resize: vertical;
}
.b-field input[type='tel'] {
  text-align: right;
}
.b-field small {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-2);
}
.b-notice {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--empty);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.b-notice p {
  margin: 0;
}
.b-notice .b-faq {
  margin-top: 8px;
  font-weight: 400;
}
.b-ts:empty {
  display: none;
}
.b-ts {
  margin-top: 12px;
}
.b-err {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--cta-hover);
}
.b-send {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  border: 0;
  font-family: var(--font);
  cursor: pointer;
}
.b-send:disabled {
  opacity: 0.6;
  cursor: default;
}
.b-privacy {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.b-clear {
  display: block;
  margin: 8px auto 0;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 400 14px/1.2 var(--font);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.b-done {
  padding: 14px 0 6px;
}
.b-done-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}
.b-done .b-notice {
  margin-top: 12px;
}
.b-done-close {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  border: 0;
  font-family: var(--font);
  cursor: pointer;
}

/* ---------- Lightbox ---------- */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(24 21 20 / 0.96);
  color: #fff;
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgb(24 21 20 / 0.6);
}
.lb-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.lb-track::-webkit-scrollbar {
  display: none;
}
.lb-track figure {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 64px 12px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.lb-track img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  cursor: pointer;
}
.lb-close svg,
.lb-prev svg,
.lb-next svg {
  width: 24px;
  height: 24px;
}
.lb-close {
  top: max(12px, env(safe-area-inset-top));
  inset-inline-end: 12px;
}
.lb-prev,
.lb-next {
  top: 50%;
  translate: 0 -50%;
}
.lb-prev {
  inset-inline-start: 12px;
}
.lb-next {
  inset-inline-end: 12px;
}
.lightbox.is-single .lb-prev,
.lightbox.is-single .lb-next {
  display: none;
}
@media (hover: none) {
  .lb-prev,
  .lb-next {
    display: none;
  }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 20;
  /* Its own width, not half the screen (left: 50% would squeeze it into a narrow column). */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  translate: -50% 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, translate 0.2s;
}
.toast.is-on {
  opacity: 1;
  translate: -50% 0;
}

/* ---------- Larger screens: the same narrow column, roomier ---------- */

@media (min-width: 640px) {
  :root {
    --thumb: 88px;
    --gap: 18px;
  }
  .card {
    padding-top: 48px;
    padding-bottom: 64px;
  }
  .wordmark {
    width: 190px;
  }
  .group {
    margin-top: 32px;
  }
  .group h2 {
    font-size: 30px;
  }
  .name {
    font-size: 21px;
  }
  .item > summary {
    padding: 20px 0;
  }
  .desc,
  .gallery,
  .acts {
    margin-inline-start: 0;
    padding-inline-start: calc(var(--thumb) + var(--gap));
  }
  .ph {
    scroll-margin-inline-start: calc(var(--thumb) + var(--gap));
    flex-basis: min(100%, 400px);
  }
  .gallery.many .ph {
    flex-basis: 300px;
  }
  .basket {
    max-height: 88dvh;
    margin: auto;
    border-radius: 20px;
  }
}

/* ---------- Motion: a quiet opening, then each photo pops in once ---------- */

:root {
  --spring-soft: cubic-bezier(0.2, 0.9, 0.3, 1.1);
  --spring-mid: cubic-bezier(0.3, 1.35, 0.5, 1);
  --spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --settle: cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    --spring-mid: linear(0, 0.021 1.5%, 0.098 3.4%, 0.425 9.7%, 0.698 15.5%, 0.86 20.6%, 0.969 25.9%, 1.043 31.4%, 1.071 35.4%, 1.083 39.9%, 1.08 43.7%, 1.064 48.4%, 1.016 59.6%, 0.999 68.5%, 0.994 77%, 1);
    --spring-pop: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}

/* The opening, once per visit. The page head marks it with .intro and holds the first screen
   for at most half a second, until the logo, the first photos and the fonts are ready, so
   nothing changes mid-move. Then .intro-go plays it, in under a second. Only transforms, plus
   a fade on the small pieces, so nothing shifts and every part ends where it would be anyway.
   If the script never says go, the release below shows everything after 1.6 seconds. */
@keyframes intro-logo {
  from {
    transform: translateY(16px) scale(0.86) rotate(-3deg);
  }
}
@keyframes intro-fade-rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}
@keyframes intro-pop {
  from {
    transform: scale(0.55);
    opacity: 0;
  }
}
@keyframes intro-rise {
  from {
    transform: translateY(12px);
  }
}
@keyframes intro-release {
  to {
    transform: none;
    opacity: 1;
  }
}
.intro .group:first-of-type > h2 > span {
  display: inline-block;
}
.intro:not(.intro-go) .wordmark img {
  transform: translateY(16px) scale(0.86) rotate(-3deg);
}
.intro:not(.intro-go) :is(.tagline, .note, .chips-in, .group:first-of-type > h2 > span) {
  transform: translateY(14px);
  opacity: 0;
}
.intro:not(.intro-go) .group:first-of-type .item:nth-child(-n + 3):not(.intro-skip) .thumb {
  transform: scale(0.55);
  opacity: 0;
}
.intro:not(.intro-go) .group:first-of-type .item:nth-child(-n + 3) :is(.head, .opts) {
  transform: translateY(12px);
}
.intro:not(.intro-go) :is(.wordmark img, .tagline, .note, .chips-in, .group:first-of-type > h2 > span),
.intro:not(.intro-go) .group:first-of-type .item:nth-child(-n + 3) :is(.thumb, .head, .opts) {
  animation: intro-release 1ms 1600ms forwards;
}
.intro-go .wordmark img {
  animation: intro-logo 620ms var(--spring-mid) backwards;
}
.intro-go .tagline {
  animation: intro-fade-rise 440ms var(--settle) 70ms backwards;
}
.intro-go .note {
  animation: intro-fade-rise 440ms var(--settle) 110ms backwards;
}
.intro-go .chips-in {
  animation: intro-fade-rise 440ms var(--settle) 150ms backwards;
}
.intro-go .group:first-of-type > h2 > span {
  animation: intro-fade-rise 440ms var(--settle) 190ms backwards;
}
.intro-go .group:first-of-type .item:nth-child(-n + 3):not(.intro-skip) .thumb {
  animation: intro-pop 560ms var(--spring-pop) 230ms backwards;
}
.intro-go .group:first-of-type .item:nth-child(-n + 3) :is(.head, .opts) {
  animation: intro-rise 460ms var(--settle) 240ms backwards;
}
.intro-go .group:first-of-type .item:nth-child(2):not(.intro-skip) .thumb {
  animation-delay: 290ms;
}
.intro-go .group:first-of-type .item:nth-child(2) :is(.head, .opts) {
  animation-delay: 300ms;
}
.intro-go .group:first-of-type .item:nth-child(3):not(.intro-skip) .thumb {
  animation-delay: 350ms;
}
.intro-go .group:first-of-type .item:nth-child(3) :is(.head, .opts) {
  animation-delay: 360ms;
}

/* Scrolling: rows below the first screen wait with the photo small and the text a little low. */
.m-still,
.m-still *,
.m-still *::after {
  transition: none !important;
}
.motion .item .thumb {
  transition: transform 460ms var(--spring-soft) var(--d, 0ms), opacity 160ms linear var(--d, 0ms);
}
.motion .item :is(.head, .short, .opts) {
  transition: transform 320ms var(--settle) var(--d, 0ms);
}
.motion .item.m-wait .thumb {
  transform: scale(0.78);
  opacity: 0;
}
.motion .item.m-wait :is(.head, .short, .opts) {
  transform: translateY(14px);
}
/* Section lines draw themselves, from where Hebrew starts reading. */
.motion :is(.group, .about-me, .questions) > h2 {
  position: relative;
  border-bottom-color: transparent;
}
.motion :is(.group, .about-me, .questions) > h2::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--ink);
  transform-origin: 100% 50%;
  transition: transform 720ms var(--settle);
}
.motion h2.m-wait::after {
  transform: scaleX(0);
}
.motion :is(.about-text, .faq, .ask, .social) {
  transition: transform 420ms var(--settle), opacity 300ms linear;
}
.motion :is(.about-text, .faq, .ask, .social).m-wait {
  transform: translateY(16px);
  opacity: 0;
}

/* The order bar slides up and settles when the first dessert is added. */
@keyframes bar-in {
  from {
    transform: translateY(110%);
  }
}
.motion .bar:not([hidden]) {
  animation: bar-in 460ms var(--spring-soft);
}

/* Adding a dessert: crumbs from the +, and the photo flying to the bar. */
.m-crumb {
  position: fixed;
  z-index: 26;
  border-radius: 40%;
  pointer-events: none;
}
.m-fly {
  position: fixed;
  z-index: 25;
  border-radius: 50%;
  background: var(--empty) center / cover no-repeat;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}