/* Bekech Cakes — landing styles.
   Everything visual comes from the stamp logo: its red, its lowercase warmth,
   the round seal and the retro "double print" on the letters. */

@layer reset, tokens, base, layout, components, motion;

/* Nunito, self-hosted: the full weight axis, subset to Latin, Cyrillic and ₴ */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-uk.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    /* brand literals */
    --cherry-500: #D0232C;      /* the logo red */
    --cherry-600: #B3161F;
    --cherry-800: #7E0C13;
    --cocoa-900: #2B1517;       /* text: cocoa with a drop of cherry */
    --cocoa-600: #6B5153;
    --cream: #FFF1EC;           /* text on cocoa */
    --berry-300: #FF9E97;       /* accents on cocoa, readable at small sizes */
    --sugar-50: #FFF8F5;        /* powdered sugar */
    --blush-100: #FBE8E3;
    --blush-200: #F4D3CC;
    --white: #FFFFFF;

    /* roles */
    --color-bg: var(--sugar-50);
    --color-text: var(--cocoa-900);
    --color-text-muted: var(--cocoa-600);
    --color-accent: var(--cherry-500);
    --color-accent-pressed: var(--cherry-600);
    --color-surface: var(--blush-100);
    --color-focus: var(--cherry-800);

    --font-sans: "Nunito", ui-rounded, "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;

    /* type scale (1.25) with a fluid display size */
    --step--1: clamp(0.86rem, 0.82rem + 0.16vw, 0.95rem);
    --step-0: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
    --step-display: clamp(3.4rem, 0.8rem + 8.4vw, 6.25rem);

    --step-h2: clamp(2.4rem, 1.45rem + 3.4vw, 4.4rem);
    --step-h3: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);

    --container: 86rem;
    --gutter: clamp(1rem, 0.4rem + 2.6vw, 3.5rem);
    --header-block: clamp(4.5rem, 3.9rem + 1.8vw, 6rem);
    --section-space: clamp(4.75rem, 3rem + 6vw, 8.5rem);
    --radius-photo: clamp(1.25rem, 0.7rem + 1.6vw, 2.25rem);
    --radius-card: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);

    /* the logo's "double print": paper gap + offset copy */
    --print-gap: 0.024em;
    --print-depth: 0.052em;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-stamp: cubic-bezier(0.34, 1.4, 0.64, 1);

    --shadow-photo:
      0 1px 2px rgb(43 21 23 / 0.06),
      0 12px 24px -8px rgb(43 21 23 / 0.16),
      0 40px 80px -24px rgb(126 12 19 / 0.22);

  }

  /* two columns: the headline shares the row with the photos */
  @media (min-width: 64rem) {
    :root {
      --step-display: clamp(4.5rem, 1.1rem + 5vw, 6.75rem);
    }
  }

  /* below 390px the 3.4rem floor pushed "підкорюють" past the edge; this line
     meets 3.4rem at 390px and shrinks with the screen from there */
  @media (max-width: 24.375rem) {
    :root {
      --step-display: calc(0.475rem + 12vw);
    }
  }
}

/* registered so the double print can grow smoothly during the intro */
@property --print {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* ------------------------------------------------------------------- reset */
@layer reset {
  :where(html) {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where(body, header, nav, main, section, article, aside, footer, div, figure, picture, img, a, button,
         ul, ol, li, dl, dt, dd, p, h1, h2, h3, span, svg, form, fieldset, legend, label, input, output,
         details, summary, dialog) {
    box-sizing: inherit;
  }

  :where(body, h1, h2, h3, p, figure, ul, ol, dl, dd, fieldset) {
    margin: 0;
  }

  :where(nav ul, ul[role="list"], ol.steps) {
    padding: 0;
    list-style: none;
  }

  :where(fieldset) {
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  :where(input, output) {
    font: inherit;
    color: inherit;
  }

  :where(img, picture, svg) {
    display: block;
    max-inline-size: 100%;
  }

  :where(img) {
    block-size: auto;
  }

  :where(button) {
    font: inherit;
    color: inherit;
  }

  /* author display values would otherwise beat [hidden]; until-found must keep its box */
  :where([hidden]:not([hidden="until-found"])) {
    display: none !important;
  }
}

/* -------------------------------------------------------------------- base */
@layer base {
  html {
    color-scheme: only light;
    background-color: var(--color-bg);
    accent-color: var(--color-accent);
    scrollbar-color: var(--color-accent) var(--color-surface);
    /* keeps the page from shifting sideways when a sheet locks the scroll */
    scrollbar-gutter: stable;
  }

  body {
    min-block-size: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-text);
    /* paper grain: the same fractal noise, baked into a 180px tile. Drawing it live
       as an SVG filter could hold the first paint for ~2s on GPU-less devices. */
    background: url("../img/grain.webp") 0 0 / 180px 180px, var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* Safari before 16 has no clip */
    overflow-x: clip;
  }

  a {
    color: inherit;
  }

  ::selection {
    background-color: var(--color-accent);
    color: var(--white);
  }

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

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  :where(section[id]) {
    scroll-margin-top: calc(var(--header-block) - 1px);
  }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .skip-link {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 20;
    padding: 0.7em 1.1em;
    border-radius: 999px;
    background-color: var(--color-text);
    color: var(--white);
    font-weight: 800;
    text-decoration: none;
    translate: 0 -200%;

    &:focus-visible {
      translate: 0 0;
    }
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background-color: rgb(255 248 245 / 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgb(43 21 23 / 0.08);
    transition:
      background-color 0.3s var(--ease-out),
      box-shadow 0.3s var(--ease-out);
  }

  /* Transparent over the hero; main.js adds .is-scrolled once the page leaves the top.
     This used to be a scroll-driven animation, but that kept a backdrop-filter layer
     alive from the very first frame and slowed first paint on phones. */
  .js .site-header:not(.is-scrolled) {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .top-sentinel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 2rem;
    pointer-events: none;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2.5rem);
    max-inline-size: var(--container);
    block-size: var(--header-block);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(3rem, 2rem + 4vw, 4.5rem);
    min-block-size: calc(100svh - var(--header-block));
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }

  /* Phones and tablets: the cake goes right under the headline, so the first
     screen shows a cake; ordering stays one tap away in the sticky header. */
  @media (max-width: 63.99rem) {
    .hero {
      grid-template-areas: "title" "visual" "lead" "actions" "proof";
      row-gap: 0;
      justify-items: center;
      text-align: center;
    }

    .hero__copy {
      display: contents;
    }

    .hero__title { grid-area: title; }
    .hero__lead { grid-area: lead; }
    .hero__actions { grid-area: actions; }
    .proof { grid-area: proof; }

    .hero__visual {
      grid-area: visual;
      margin-block-start: clamp(1.75rem, 1rem + 4vw, 3rem);
    }
  }

  @media (min-width: 64rem) {
    .hero {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
      align-items: center;
      column-gap: clamp(2rem, 4vw, 5.5rem);
    }
  }
}

/* -------------------------------------------------------------- components */
@layer components {

  /* brand + navigation ------------------------------------------------ */
  .brand {
    flex: none;
    border-radius: 50%;

    & img {
      inline-size: clamp(3.4rem, 2.8rem + 1.7vw, 4.75rem);
      block-size: auto;
      rotate: -8deg;
      transition: rotate 0.5s var(--ease-stamp);
    }
  }

  @media (hover: hover) {
    .brand:hover img {
      rotate: 4deg;
    }
  }

  .site-nav {
    margin-inline-start: auto;

    & ul {
      display: flex;
      gap: clamp(1.25rem, 2.4vw, 2.75rem);
    }

    & a {
      display: inline-block;
      padding-block: 0.4em;
      font-weight: 800;
      text-decoration: none;
      text-decoration-thickness: 0.14em;
      text-underline-offset: 0.35em;
    }
  }

  @media (hover: hover) {
    .site-nav a:hover {
      color: var(--color-accent);
      text-decoration-line: underline;
    }
  }

  .menu-toggle {
    display: none;
  }

  /* On small screens the nav becomes a popover opened from the menu button. */
  @media (max-width: 63.99rem) {
    .site-header .btn--compact {
      margin-inline-start: auto;
    }

    .menu-toggle {
      display: grid;
      place-items: center;
      flex: none;
      inline-size: 3rem;
      block-size: 3rem;
      padding: 0;
      border: 2px solid var(--color-text);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;

      & svg {
        inline-size: 1.4rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
      }
    }

    .site-nav {
      position: fixed;
      inset: calc(var(--header-block) - 0.25rem) var(--gutter) auto auto;
      margin: 0;
      padding: 0.6rem;
      min-inline-size: min(16rem, calc(100vw - 2 * var(--gutter)));
      border: 2px solid var(--color-text);
      border-radius: 1.5rem;
      background-color: var(--white);
      color: var(--color-text);
      box-shadow: 6px 6px 0 var(--color-accent);

      & ul {
        flex-direction: column;
        gap: 0.15rem;
      }

      & a {
        display: block;
        padding: 0.8rem 1rem;
        border-radius: 1rem;
        font-size: var(--step-1);
      }

      & a:hover {
        background-color: var(--color-surface);
      }
    }
  }

  /* Safari before 17 has no Popover API: main.js adds .no-popover and opens the menu with .is-open */
  @media (max-width: 63.99rem) {
    .no-popover .site-nav:not(.is-open) {
      display: none;
    }
  }

  @media (min-width: 64rem) {
    /* Always visible inline; the popover behaviour only matters on small screens. */
    .site-nav[popover] {
      display: block;
      position: static;
      inset: auto;
      margin: 0 0 0 auto;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      overflow: visible;
    }
  }

  /* buttons ----------------------------------------------------------- */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--color-accent);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-block-size: 3.4rem;
    padding: 0.8em 1.55em;
    border: 2px solid var(--color-accent);
    border-radius: 999px;
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--step-0);
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition:
      translate 0.18s var(--ease-out),
      box-shadow 0.18s var(--ease-out),
      background-color 0.18s var(--ease-out);

    & .icon {
      inline-size: 1.3em;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linejoin: round;
    }

    & .icon__dot {
      fill: currentColor;
      stroke: none;
    }
  }

  /* The same double print as the logo: a sugar gap, then an offset red copy. */
  .btn--primary {
    --btn-bg: var(--color-accent);
    --btn-fg: var(--white);
    --depth: 5px;

    box-shadow:
      0 0 0 3px var(--color-bg),
      var(--depth) var(--depth) 0 3px var(--color-accent);
  }

  @media (hover: hover) {
    .btn--primary:hover {
      --depth: 3px;
      translate: 2px 2px;
    }

    .btn--ghost:hover {
      --btn-bg: var(--color-surface);
      --btn-fg: var(--color-accent-pressed);
    }

    /* already on the blush band, so the hover fill is white */
    .fillings__more:hover {
      --btn-bg: var(--white);
    }
  }

  .btn--primary:active {
    --depth: 0px;
    translate: 5px 5px;
  }

  .btn--compact {
    min-block-size: 2.9rem;
    padding: 0.6em 1.2em;
    font-size: var(--step--1);
  }

  @media (max-width: 26rem) {
    .btn--compact {
      padding-inline: 1em;
    }
  }

  @media (pointer: coarse) {
    .btn--compact {
      min-block-size: 3rem;
    }
  }

  /* hero copy --------------------------------------------------------- */
  @media (min-width: 64rem) {
    .hero__copy {
      display: grid;
      justify-items: start;
    }
  }

  .hero__title {
    --print: 1;

    font-size: var(--step-display);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.012em;
    color: var(--color-accent);
    text-shadow:
      calc(var(--print) * var(--print-gap)) calc(var(--print) * var(--print-gap)) 0 var(--color-bg),
      calc(var(--print) * var(--print-depth)) calc(var(--print) * var(--print-depth)) 0 var(--color-accent);
  }

  /* the small line above the slogan: who and where, in quiet cocoa */
  .hero__kicker {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-block-end: clamp(0.85rem, 0.6rem + 0.9vw, 1.4rem);
    color: var(--color-text);
    font-size: var(--step-0);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    text-shadow: none;

    & .icon {
      inline-size: 1.3em;
      flex: none;
      fill: none;
      stroke: var(--color-accent);
      stroke-width: 2.2;
      stroke-linejoin: round;
    }
  }

  /* each line is its own window, so the words can rise into place;
     the negative insets leave room for descenders and the print */
  .hero__line {
    display: block;
    clip-path: inset(-0.15em -0.3em -0.32em -0.15em);

    & > span {
      display: inline-block;
    }
  }

  .hero__lead {
    max-inline-size: 35ch;
    margin-block-start: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    font-size: var(--step-1);
    font-weight: 500;
    line-height: 1.5;
    text-wrap: pretty;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    margin-block-start: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  }

  /* phones: the two buttons stack at one width, centred (the 8px leaves room
     for the primary button's offset print) */
  @media (max-width: 30rem) {
    .hero__actions {
      display: grid;
      grid-template-columns: minmax(0, 20rem);
      justify-content: center;
      inline-size: 100%;

      & .btn {
        inline-size: calc(100% - 8px);
      }
    }
  }

  /* narrow two-column range: keep both buttons on one row */
  @media (min-width: 64rem) and (max-width: 80rem) {
    .hero__actions {
      column-gap: 0.9rem;

      & .btn {
        padding-inline: 1.2em;
      }
    }
  }

  .proof {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-block-start: clamp(2rem, 1.4rem + 1.6vw, 3rem);
    color: var(--color-text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;

    & strong {
      color: var(--color-text);
      font-weight: 900;
    }
  }

  .proof__faces {
    display: flex;
    flex: none;

    & img {
      inline-size: 3.1rem;
      aspect-ratio: 1;
      border: 3px solid var(--color-bg);
      border-radius: 50%;
      object-fit: cover;
    }

    & img + img {
      margin-inline-start: -0.9rem;
    }
  }

  .proof__text {
    max-inline-size: 30ch;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.25em;
  }

  @media (hover: hover) {
    .proof:hover .proof__text {
      text-decoration-line: underline;
      text-decoration-color: var(--color-accent);
    }
  }

  /* hero visual ------------------------------------------------------- */
  .hero__visual {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    justify-self: center;
    inline-size: min(100%, 36rem);
    aspect-ratio: 1 / 1.1;

    /* a round cake board under the collage */
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-block-end: 2%;
      inset-inline-end: -6%;
      inline-size: 92%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, var(--blush-100), var(--blush-200));
    }
  }

  @media (min-width: 64rem) {
    .hero__visual {
      justify-self: end;
    }
  }

  .shot {
    position: absolute;
    margin: 0;

    & picture {
      inline-size: 100%;
      block-size: 100%;
      border-radius: inherit;
      overflow: hidden;
      overflow: clip;
    }

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* the shadow lives on its own layer so the photo can be unveiled with clip-path */
  .shot--main {
    isolation: isolate;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 79%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-photo);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      box-shadow: var(--shadow-photo);
    }
  }

  .shot--detail {
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 43%;
    aspect-ratio: 1;
    border-radius: calc(var(--radius-photo) * 0.8);
    box-shadow:
      0 0 0 clamp(5px, 1.5cqi, 9px) var(--color-bg),
      var(--shadow-photo);
    rotate: -4deg;
  }

  /* sealed onto the corner of the photo, like the sticker on their cake boxes */
  .sticker {
    position: absolute;
    inset-block-start: -5%;
    inset-inline-end: -4%;
    inline-size: 33%;
    aspect-ratio: 1;
    rotate: -10deg;
    filter: drop-shadow(0 10px 18px rgb(126 12 19 / 0.22));

    & img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
    }
  }

  /* phones and tablets: the first screen is built on the centre line, like the
     closing card and the footer. The cake stands in the middle of its round board,
     the second photo and the sticker balance it on the diagonal, and the collage is
     shorter so the order button reaches the first screen. */
  @media (max-width: 63.99rem) {
    .hero__kicker {
      justify-content: center;
    }

    .hero__lead {
      max-inline-size: 32ch;
    }

    .hero__actions {
      justify-content: center;
    }

    .proof {
      text-align: start;
    }

    .hero__visual {
      inline-size: min(100%, 28rem);
      aspect-ratio: 1 / 0.86;

      &::before {
        inset-block: 50% auto;
        inset-inline: 0;
        margin-inline: auto;
        inline-size: 82%;
        translate: 0 -50%;
      }
    }

    .shot--main {
      inset-block-start: 3%;
      inset-inline: 0;
      margin-inline: auto;
      inline-size: 60%;
    }

    .shot--detail {
      inset-inline-start: 3%;
      inline-size: 35%;
      rotate: -6deg;
    }

    .sticker {
      inset-block-start: -3%;
      inset-inline-end: 4%;
      inline-size: 27%;
    }
  }
}

/* ------------------------------------------------------------------ motion */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* hold the stage until the webfont is in, so the headline never reflows mid-animation */
    .js:not(.is-ready) :is(.hero__kicker, .hero__line > span, .hero__lead, .hero__actions, .proof, .shot, .sticker),
    .js:not(.is-ready) .hero__visual::before {
      opacity: 0;
    }

    .is-ready .hero__kicker {
      animation: fade-up 0.5s var(--ease-out) both;
    }

    /* the story: board, cake, a second cake, then the sticker seals it.
       Kept to about 1.5 s in all, so the first screen settles quickly (Speed Index). */
    .is-ready .hero__visual::before {
      animation: board 0.8s var(--ease-out) both;
    }

    .is-ready .hero__line > span {
      animation: rise 0.7s var(--ease-out) both;
      animation-delay: calc(var(--i) * 70ms);
    }

    .is-ready .hero__title {
      animation: print 0.45s var(--ease-out) 0.5s both;
    }

    .is-ready :is(.hero__lead, .hero__actions, .proof) {
      animation: fade-up 0.6s var(--ease-out) both;
      animation-delay: calc(0.3s + var(--i) * 70ms);
    }

    .is-ready .shot--main {
      & picture {
        animation: unveil 0.85s var(--ease-out) 0.1s both;
      }

      & img {
        animation: settle 1.1s var(--ease-out) 0.1s both;
      }

      &::before {
        animation: fade-in 0.6s var(--ease-out) 0.45s both;
      }
    }

    .is-ready .shot--detail {
      animation: slide-in 0.7s var(--ease-out) 0.4s both;
    }

    .is-ready .sticker {
      animation: stamp 0.5s var(--ease-stamp) 0.65s both;
    }

    /* the ring winds in once, then turns only while the photos are hovered
       (paused, not removed, so it never snaps back) */
    .is-ready .sticker__ring {
      animation:
        spin 14s linear infinite paused,
        spin-in 0.9s var(--ease-out) 0.65s backwards;
    }

    @media (hover: hover) {
      .is-ready .hero__visual:hover .sticker__ring {
        animation-play-state: running;
      }
    }
  }

  @keyframes rise {
    from { translate: 0 140%; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
  }

  @keyframes board {
    from {
      opacity: 0;
      scale: 0.55;
    }
  }

  @keyframes print {
    from { --print: 0; }
  }

  @keyframes fade-up {
    from {
      opacity: 0;
      translate: 0 0.9rem;
    }
  }

  @keyframes unveil {
    from { clip-path: inset(100% 0 0 0 round var(--radius-photo)); }
    to { clip-path: inset(0 0 0 0 round var(--radius-photo)); }
  }

  @keyframes settle {
    from { scale: 1.08; }
  }

  @keyframes slide-in {
    from {
      opacity: 0;
      translate: -8% 12%;
      rotate: -12deg;
    }
  }

  @keyframes stamp {
    0% {
      opacity: 0;
      scale: 1.9;
      rotate: -40deg;
    }
    55% {
      opacity: 1;
      scale: 0.92;
    }
    100% {
      scale: 1;
      rotate: -10deg;
    }
  }

  @keyframes spin-in {
    from { rotate: -150deg; }
  }

  @keyframes spin {
    to { rotate: 1turn; }
  }
}

/* ============================================================ below the hero
   Quieter than the first screen: cocoa headlines, photos on sugar, the logo's
   red kept for prices, choices and the one closing call. The double print
   comes back once, inverted, on the final cherry block. */

@layer tokens {
  :root {
    --line: rgb(43 21 23 / 0.14);
    --line-strong: rgb(43 21 23 / 0.28);
    interpolate-size: allow-keywords;
  }

  /* phones: a little less air between sections, the page is long enough */
  @media (max-width: 39.99rem) {
    :root {
      --section-space: 4rem;
    }
  }
}

@layer base {
  :where(h2, h3) {
    text-wrap: balance;
  }

  :where(p, li, dd) {
    text-wrap: pretty;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Nunito has no non-breaking hyphen, so compounds like «бенто-торти» are kept whole this way */
  .nowrap {
    white-space: nowrap;
  }
}

@layer layout {
  .container {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: var(--section-space);
  }

  /* neighbours on the same sugar background share one gap, not two */
  .section:not(.fillings, .about) + .section:not(.fillings, .about) {
    padding-block-start: 0;
  }

  /* menu-like sections sit on a blush band so the long page has a rhythm */
  .fillings,
  .about {
    background-color: var(--color-surface);
  }

  .section-head {
    display: grid;
    gap: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
    max-inline-size: 46rem;
    margin-block-end: clamp(2rem, 1.6rem + 2.4vw, 4rem);
  }
}

@layer components {

  /* section type ------------------------------------------------------ */
  .section-title {
    font-size: var(--step-h2);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .section-lead {
    max-inline-size: 52ch;
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    color: var(--color-accent-pressed);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.3em;
    text-decoration-color: rgb(208 35 44 / 0.35);
    transition: text-decoration-color 0.2s var(--ease-out);

    & .icon {
      inline-size: 1.25em;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    & .icon__dot {
      fill: currentColor;
      stroke: none;
    }
  }

  @media (hover: hover) {
    .text-link:hover {
      text-decoration-color: currentColor;
    }
  }

  .tag {
    display: inline-block;
    padding: 0.15em 0.65em;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text);
    white-space: nowrap;
  }

  .tag--sour {
    border-color: var(--color-accent);
    color: var(--color-accent-pressed);
  }

  /* occasions: a photo wall, tall cakes get tall cells ------------------ */
  .occasions__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(9.5rem, 38vw, 17rem);
    gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  }

  .tile {
    position: relative;
    margin: 0;
    border-radius: var(--radius-photo);
    overflow: hidden;
    overflow: clip;
    background-color: var(--blush-200);

    & picture,
    & img {
      inline-size: 100%;
      block-size: 100%;
    }

    & img {
      object-fit: cover;
      transition: scale 0.8s var(--ease-out);
    }
  }

  @media (hover: hover) {
    .tile:hover img {
      scale: 1.04;
    }
  }

  /* Pikachu's ears and the bento's first line touch the top of their photos,
     so these two keep the top and give up a little of the board instead */
  .tile:is(.tile--kids, .tile--bento) img {
    object-position: 50% 0%;
  }

  /* phones: wedding | kids, bento ; him, cupcakes | her */
  .tile--wedding { grid-area: 1 / 1 / 3 / 2; }
  .tile--kids { grid-area: 1 / 2; }
  .tile--bento { grid-area: 2 / 2; }
  .tile--her { grid-area: 3 / 2 / 5 / 3; }
  .tile--him { grid-area: 3 / 1; }
  .tile--cupcakes { grid-area: 4 / 1; }

  /* the outer columns hold the two tall cakes, so they are a little wider: the tall
     tiles stop looking squeezed and the four square photos in the middle sit near square */
  @media (min-width: 56rem) {
    .occasions__grid {
      grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
      grid-auto-rows: clamp(12rem, 17vw, 16.5rem);
    }

    .tile--wedding { grid-area: 1 / 1 / 3 / 2; }
    .tile--kids { grid-area: 1 / 2; }
    .tile--bento { grid-area: 1 / 3; }
    .tile--her { grid-area: 1 / 4 / 3 / 5; }
    .tile--him { grid-area: 2 / 2; }
    .tile--cupcakes { grid-area: 2 / 3; }
  }

  /* the name sits on the photo like a label on a cake box */
  .tile__name {
    position: absolute;
    inset-block-end: clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
    inset-inline-start: clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
    max-inline-size: calc(100% - 1.2rem);
    padding: 0.35em 0.85em;
    border-radius: 999px;
    background-color: var(--sugar-50);
    color: var(--color-text);
    font-size: var(--step--1);
    font-weight: 900;
    line-height: 1.25;
    box-shadow: 0 6px 16px -6px rgb(43 21 23 / 0.35);
  }

  /* narrow phones: a slimmer label keeps «Бенто з написом» on one line from 360px up */
  @media (max-width: 24rem) {
    .tile__name {
      inset-block-end: 0.5rem;
      inset-inline-start: 0.5rem;
      max-inline-size: calc(100% - 1rem);
      padding-inline: 0.75em;
    }
  }

  .occasions__more {
    margin-block-start: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  }

  /* formats & prices --------------------------------------------------- */
  .formats__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 1.6vw, 2rem);
  }

  @media (min-width: 40rem) {
    .formats__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .formats__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .format {
    display: grid;
    align-content: start;
    gap: 1.1rem;
  }

  /* phones: photo beside the text, so four formats don't become four screens */
  @media (max-width: 39.99rem) {
    .format {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
      align-items: start;
      gap: 1rem;
    }
  }

  .format__photo {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-photo);
    overflow: hidden;
    overflow: clip;
    background-color: var(--blush-200);
    box-shadow: var(--shadow-photo);

    & picture,
    & img {
      inline-size: 100%;
      block-size: 100%;
    }

    & img {
      object-fit: cover;
    }
  }

  .format__body {
    display: grid;
    gap: 0.35rem;
  }

  .format__name {
    font-size: var(--step-h3);
    font-weight: 900;
    line-height: 1.15;
  }

  .format__price {
    color: var(--color-accent);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: 1000;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;

    & small {
      font-size: 0.55em;
      font-weight: 800;
    }
  }

  .format__specs {
    font-weight: 800;
  }

  .format__note {
    margin-block-start: 0.2rem;
    color: var(--color-text-muted);
    font-size: var(--step--1);
    line-height: 1.5;
  }

  /* the one rule that applies to every cake, read right under the prices */
  .notice {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-block-start: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
    padding: 0.85rem 1.4rem 0.85rem 0.85rem;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    font-weight: 700;
    line-height: 1.45;

    & strong {
      color: var(--color-accent-pressed);
      font-weight: 1000;
    }
  }

  .notice__mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 1000;
    line-height: 1;
  }

  .formats__extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
    margin-block-start: clamp(3rem, 2rem + 3vw, 4.5rem);
  }

  @media (min-width: 48rem) {
    .formats__extra {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calc {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 72rem) {
    .formats__extra {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    }

    .calc {
      grid-column: auto;
    }
  }

  /* special diets read as price tags: a dashed tear-off edge */
  .diet {
    align-self: start;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0.9rem;
    padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-card);
  }

  .diet__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.7rem;
    font-size: var(--step-h3);
    font-weight: 900;
    line-height: 1.2;
  }

  .diet__tag {
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background-color: var(--color-surface);
    color: var(--color-accent-pressed);
    font-size: var(--step--1);
    font-weight: 800;
  }

  .diet__desc {
    color: var(--color-text-muted);
    font-size: var(--step--1);
  }

  .diet__prices {
    display: grid;
    align-content: end;
    gap: 0.4rem;

    & div {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding-block-start: 0.6rem;
      border-block-start: 1.5px solid var(--line);
    }

    & dt {
      font-weight: 600;
    }

    & dd {
      color: var(--color-accent);
      font-weight: 900;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
  }

  /* calculator: the one dark block of the section ----------------------- */
  .calc {
    --fill: 10%;

    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    border-radius: var(--radius-card);
    background-color: var(--cocoa-900);
    color: var(--cream);
  }

  .calc__title {
    font-size: var(--step-h3);
    font-weight: 900;
    line-height: 1.2;
  }

  .calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .calc__label {
    font-weight: 700;
    color: rgb(255 241 236 / 0.75);
  }

  .calc__count {
    color: var(--white);
    font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem);
    font-weight: 1000;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .calc__range {
    inline-size: 100%;
    block-size: 2.75rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    &::-webkit-slider-runnable-track {
      block-size: 0.6rem;
      border-radius: 999px;
      background: linear-gradient(to right, var(--cherry-500) var(--fill), rgb(255 241 236 / 0.18) var(--fill));
    }

    &::-moz-range-track {
      block-size: 0.6rem;
      border-radius: 999px;
      background: rgb(255 241 236 / 0.18);
    }

    &::-moz-range-progress {
      block-size: 0.6rem;
      border-radius: 999px;
      background: var(--cherry-500);
    }

    &::-webkit-slider-thumb {
      inline-size: 1.9rem;
      block-size: 1.9rem;
      margin-block-start: -0.65rem;
      border: 0;
      border-radius: 50%;
      background: var(--white);
      box-shadow: 0 0 0 5px var(--cherry-500);
      appearance: none;
      -webkit-appearance: none;
      transition: scale 0.15s var(--ease-out);
    }

    &::-moz-range-thumb {
      inline-size: 1.9rem;
      block-size: 1.9rem;
      border: 0;
      border-radius: 50%;
      background: var(--white);
      box-shadow: 0 0 0 5px var(--cherry-500);
    }

    &:active::-webkit-slider-thumb {
      scale: 1.12;
    }

    &:focus-visible {
      outline-color: var(--berry-300);
    }
  }

  .calc__result {
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    border-radius: 1.1rem;
    background-color: rgb(255 241 236 / 0.08);
  }

  .calc__format {
    color: var(--white);
    font-size: var(--step-1);
    font-weight: 900;
  }

  .calc__price {
    color: var(--berry-300);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .calc__hint {
    color: rgb(255 241 236 / 0.72);
    font-size: var(--step--1);
  }

  /* fillings: a menu you can narrow down, filtered with CSS only -------- */
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-end: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  }

  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: 2.9rem;
    padding: 0.55em 1.15em;
    border: 2px solid var(--line-strong);
    border-radius: 999px;
    background-color: var(--white);
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition:
      background-color 0.18s var(--ease-out),
      border-color 0.18s var(--ease-out),
      color 0.18s var(--ease-out);

    & input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }

    &:has(:checked) {
      border-color: var(--color-accent);
      background-color: var(--color-accent);
      color: var(--white);
    }

    &:has(:focus-visible) {
      outline: 3px solid var(--color-focus);
      outline-offset: 3px;
    }
  }

  @media (hover: hover) {
    .chip:not(:has(:checked)):hover {
      border-color: var(--color-accent);
      color: var(--color-accent-pressed);
    }
  }

  /* phones: every chip stays in view (a sideways row hid half of them);
     smaller chips fit the seven into three rows instead of four */
  @media (max-width: 43.99rem) {
    .filters {
      gap: 0.5rem;
    }

    .chip {
      min-block-size: 2.75rem;
      padding: 0.45em 0.95em;
      font-size: var(--step--1);
    }
  }

  .fillings:has(input[value="choco"]:checked) .filling:not([data-tags~="choco"]),
  .fillings:has(input[value="berry"]:checked) .filling:not([data-tags~="berry"]),
  .fillings:has(input[value="nuts"]:checked) .filling:not([data-tags~="nuts"]),
  .fillings:has(input[value="classic"]:checked) .filling:not([data-tags~="classic"]),
  .fillings:has(input[value="sour"]:checked) .filling:not([data-tags~="sour"]),
  .fillings:has(input[value="bento"]:checked) .filling:not([data-tags~="bento"]) {
    display: none;
  }

  .fillings__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  }

  @media (min-width: 44rem) {
    .fillings__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72rem) {
    .fillings__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .filling {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding-block: 1.3rem;
    border-block-start: 1.5px solid var(--line-strong);
  }

  /* collapsed on phones and tablets (see main.js): the rest of the menu is
     hidden="until-found", which keeps a box, so it must not keep a rule or padding.
     Find in page and text-fragment links still reach these fillings. */
  .filling[hidden="until-found"] {
    gap: 0; /* Safari keeps grid gaps of a skipped box, 13px per hidden filling */
    padding-block: 0;
    border: 0;
  }

  /* on the blush band the logo red is 4.48:1, so the text takes the deeper cherry */
  .fillings__more {
    --btn-fg: var(--color-accent-pressed);

    margin-block-start: 1.25rem;

    & .icon {
      inline-size: 1.15em;
      stroke-width: 2.4;
      stroke-linecap: round;
      transition: rotate 0.25s var(--ease-out);
    }

    /* once the menu is open the same button folds it back, so the arrow turns up */
    &[aria-expanded="true"] .icon {
      rotate: 180deg;
    }
  }

  .filling__name {
    font-size: var(--step-1);
    font-weight: 900;
    line-height: 1.25;
  }

  .filling__desc {
    color: var(--color-text-muted);
    font-size: var(--step--1);
    line-height: 1.5;
  }

  .filling__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin-block-start: 0.2rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .filling__price {
    color: var(--color-accent-pressed);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  /* mousse fillings: a printed price list with dotted leaders */
  .mousse-menu {
    margin-block-start: clamp(3rem, 2rem + 3vw, 4.5rem);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-card);
    background-color: var(--white);
    box-shadow: 8px 8px 0 var(--color-accent);
  }

  .mousse-menu__title {
    margin-block-end: 1.25rem;
    font-size: var(--step-h3);
    font-weight: 900;
  }

  .mousse-menu__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);

    & li {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      padding-block: 0.55rem;
      font-weight: 700;
    }

    & li::after {
      content: "";
      order: 1;
      flex: 1;
      min-inline-size: 1.5rem;
      border-block-end: 2px dotted var(--line-strong);
      translate: 0 -0.3em;
    }

    & li > span:last-child {
      order: 2;
      color: var(--color-accent-pressed);
      font-weight: 900;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
  }

  @media (min-width: 48rem) {
    .mousse-menu__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* desserts: each one served on a round plate ------------------------- */
  /* nine desserts: a centred wrap, so the last row never leaves a hole */
  .desserts__list {
    --cols: 2;
    --col-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2rem, 1.4rem + 2vw, 3rem) var(--col-gap);
    text-align: center;
  }

  @media (min-width: 44rem) {
    .desserts__list {
      --cols: 3;
    }
  }

  @media (min-width: 72rem) {
    .desserts__list {
      --cols: 5;
    }
  }

  /* the note takes the spare height, so every "Смаки" button in a row lines up at the bottom */
  .dessert {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    justify-items: center;
    gap: 0.3rem;
  }

  /* The round photo sets the plate's height: a square image plus even padding.
     A percentage height inside an aspect-ratio box stretched it into an oval in Safari. */
  .plate {
    inline-size: min(100%, 12.5rem);
    margin-block-end: 0.9rem;
    padding: 7%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--white), var(--blush-100) 62%, var(--blush-200));
    box-shadow: 0 18px 30px -18px rgb(126 12 19 / 0.45);

    & img {
      inline-size: 100%;
      aspect-ratio: 1;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .dessert__name {
    font-size: var(--step-1);
    font-weight: 900;
    line-height: 1.2;
  }

  .dessert__price {
    color: var(--color-accent-pressed);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  .dessert__note {
    max-inline-size: 24ch;
    color: var(--color-text-muted);
    font-size: var(--step--1);
    line-height: 1.45;
  }

  /* opens the dessert's flavour sheet; the count says how much is inside */
  .flavors-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-block-size: 2.75rem;
    margin-block-start: 0.55rem;
    padding: 0.3rem 0.4rem 0.3rem 1.05rem;
    border: 2px solid var(--color-accent);
    border-radius: 999px;
    background-color: transparent;
    color: var(--color-accent-pressed);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition:
      background-color 0.18s var(--ease-out),
      color 0.18s var(--ease-out);

    /* the bento box lists two menus, so it has no single count */
    &:not(:has(.flavors-btn__count)) {
      padding-inline-end: 1.05rem;
    }
  }

  .flavors-btn__count {
    display: grid;
    place-items: center;
    min-inline-size: 1.85em;
    block-size: 1.85em;
    padding-inline: 0.4em;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--white);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    transition:
      background-color 0.18s var(--ease-out),
      color 0.18s var(--ease-out);
  }

  @media (hover: hover) {
    .flavors-btn:hover {
      background-color: var(--color-accent);
      color: var(--white);

      & .flavors-btn__count {
        background-color: var(--white);
        color: var(--color-accent-pressed);
      }
    }
  }

  /* phones: a menu list instead of a sideways shelf, so all nine desserts are in view;
     each keeps its round plate as a small thumbnail beside the name and price */
  @media (max-width: 43.99rem) {
    .desserts__list {
      display: grid;
      gap: 1.1rem;
      text-align: start;
    }

    /* the plate is big enough to show the dessert and to balance the four lines beside it */
    .dessert {
      grid-template-columns: 6.5rem minmax(0, 1fr);
      grid-template-rows: auto auto auto 1fr;
      column-gap: 1.1rem;
      row-gap: 0.15rem;
      justify-items: start;
    }

    .plate {
      grid-row: 1 / -1;
      align-self: center;
      inline-size: 6.5rem;
      margin-block-end: 0;
      padding: 6%;
      box-shadow: 0 12px 20px -14px rgb(126 12 19 / 0.45);
    }

    .dessert__name,
    .dessert__price,
    .dessert__note,
    .flavors-btn {
      grid-column: 2;
    }

    .dessert__note {
      max-inline-size: none;
    }

    .flavors-btn {
      margin-block-start: 0.4rem;
    }
  }

  /* flavour sheet: a centred card on wide screens, a bottom sheet on phones.
     A modal <dialog>, so focus, Esc and the inert page come from the browser. */
  .sheet {
    --sheet-pad: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);

    inline-size: min(100% - 2 * var(--gutter), 38rem);
    max-inline-size: none;
    max-block-size: min(100dvh - 3rem, 48rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--sugar-50);
    color: var(--color-text);
    text-align: start;
    box-shadow: 0 40px 90px -30px rgb(43 21 23 / 0.55);
    overflow: hidden;

    &::backdrop {
      background-color: rgb(43 21 23 / 0.5);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }
  }

  /* the head and the order button stay put, the flavours scroll between them */
  .sheet__panel {
    display: flex;
    flex-direction: column;
    max-block-size: inherit;
  }

  .sheet__head {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: var(--sheet-pad) var(--sheet-pad) 1.1rem;
  }

  .sheet__plate {
    inline-size: 4.5rem;
    padding: 0.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--white), var(--blush-100) 62%, var(--blush-200));
    box-shadow: 0 12px 20px -14px rgb(126 12 19 / 0.45);

    & img {
      inline-size: 100%;
      aspect-ratio: 1;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .sheet__title {
    font-size: var(--step-h3);
    font-weight: 900;
    line-height: 1.15;
  }

  .sheet__meta {
    margin-block-start: 0.2rem;
    color: var(--color-accent-pressed);
    font-size: var(--step--1);
    font-weight: 800;
  }

  .sheet__close {
    display: grid;
    place-items: center;
    align-self: start;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--blush-100);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.18s var(--ease-out);

    & svg {
      inline-size: 1.25rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
    }
  }

  @media (hover: hover) {
    .sheet__close:hover {
      background-color: var(--blush-200);
    }
  }

  .sheet__body {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    flex: 1 1 auto;
    min-block-size: 0;
    padding: 0 var(--sheet-pad) 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sheet__text,
  .sheet__hint {
    color: var(--color-text-muted);
    font-size: var(--step--1);
    line-height: 1.5;
  }

  .sheet__group {
    margin-block-start: 0.4rem;
    font-size: var(--step-0);
    font-weight: 900;
    line-height: 1.3;

    & + .sheet__hint {
      margin-block-start: -0.65rem;
    }
  }

  /* the flavours, each marked by a sprinkle in one of the brand's three colours */
  .sheet__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    column-gap: 1.5rem;
    margin: 0;

    & li {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      padding-block: 0.6rem;
      border-block-end: 1.5px dashed var(--line);
      font-weight: 700;
      line-height: 1.35;

      &::before {
        content: "";
        flex: none;
        inline-size: 0.75rem;
        block-size: 0.3rem;
        border-radius: 999px;
        background-color: var(--color-accent);
        rotate: -35deg;
        translate: 0 -0.2em;
      }

      &:nth-child(3n + 2)::before {
        background-color: var(--berry-300);
        rotate: 25deg;
      }

      &:nth-child(3n)::before {
        background-color: var(--cocoa-600);
        rotate: -8deg;
      }
    }
  }

  /* cupcakes say what is inside each flavour, so they get one column and a second line */
  .sheet__list--detailed {
    grid-template-columns: minmax(0, 1fr);

    & li {
      flex-wrap: wrap;
      column-gap: 0.75rem;
      row-gap: 0.1rem;
    }

    & .sheet__detail {
      flex-basis: 100%;
      padding-inline-start: 1.5rem;
      color: var(--color-text-muted);
      font-size: var(--step--1);
      font-weight: 500;
    }
  }

  .sheet__foot {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1rem var(--sheet-pad) var(--sheet-pad);
    border-block-start: 1.5px solid var(--line);
    text-align: center;
  }

  .sheet__note,
  .sheet__alt {
    color: var(--color-text-muted);
    font-size: var(--step--1);
  }

  .sheet__order {
    margin-block-start: 0.15rem;
  }

  /* phones: the sheet rises from the bottom edge, full width, with a grab handle */
  @media (max-width: 43.99rem) {
    .sheet {
      inline-size: 100%;
      max-block-size: 90dvh;
      margin: auto 0 0;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
    }

    /* the head is the handle: dragging it down closes the sheet (main.js) */
    .sheet__head {
      padding-block-start: calc(var(--sheet-pad) + 0.6rem);
      touch-action: none;

      &::before {
        content: "";
        position: absolute;
        inset-block-start: 0.65rem;
        inset-inline-start: 50%;
        inline-size: 2.75rem;
        block-size: 0.3rem;
        border-radius: 999px;
        background-color: var(--line-strong);
        translate: -50% 0;
      }
    }

    .sheet__plate {
      inline-size: 3.75rem;
    }

    .sheet__order {
      inline-size: 100%;
    }
  }

  /* the page underneath stays where it was while a sheet is open. The reserved
     scrollbar gutter shows the root background, so it takes the backdrop's tint
     (cocoa at 50% over sugar) instead of staying a bright strip. */
  html:has(.sheet:modal) {
    overflow: hidden;
    background-color: rgb(149 135 134);
  }

  /* how to order: a real sequence, so it gets numbered stamps ----------- */
  .steps {
    --steps-gap: clamp(1.5rem, 3vw, 3rem);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin: 0;
  }

  @media (min-width: 48rem) {
    .steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.5rem var(--steps-gap);
    }
  }

  @media (min-width: 72rem) {
    .steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .step {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.6rem;

    & p {
      color: var(--color-text-muted);
    }
  }

  /* phones: stamp on the left, a dashed thread joins the steps */
  @media (max-width: 47.99rem) {
    .step {
      grid-template-columns: 3.4rem minmax(0, 1fr);
      column-gap: 1.1rem;

      & > :not(.step__num) {
        grid-column: 2;
      }
    }

    .step:not(:last-child)::before {
      content: "";
      position: absolute;
      inset-block: 4.3rem -1.6rem;
      inset-inline-start: calc(1.7rem - 1px);
      border-inline-start: 2px dashed var(--line-strong);
    }
  }

  /* wide: the thread runs across, from stamp to stamp */
  @media (min-width: 72rem) {
    .step:not(:last-child)::before {
      content: "";
      position: absolute;
      inset-block-start: calc(1.7rem - 1px);
      inset-inline: 4.9rem calc(-1 * var(--steps-gap) + 0.9rem);
      border-block-start: 2px dashed var(--line-strong);
    }
  }

  .step__num {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    inline-size: 3.4rem;
    aspect-ratio: 1;
    margin-block-end: 0.4rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 1000;
    line-height: 1;
    box-shadow:
      0 0 0 3px var(--color-bg),
      4px 4px 0 3px var(--color-accent);
  }

  @media (min-width: 48rem) {
    .step__num {
      grid-row: auto;
    }
  }

  .step__title {
    font-size: var(--step-h3);
    font-weight: 900;
    line-height: 1.2;
  }

  /* same-day orders are their bio line, so this block gets the sticker */
  .today {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-block-start: clamp(3rem, 2rem + 3vw, 4.5rem);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  @media (min-width: 48rem) {
    .today {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }
  }

  .today__sticker {
    position: relative;
    inline-size: clamp(5.5rem, 4.5rem + 3vw, 7.5rem);
    aspect-ratio: 1;
    rotate: -10deg;

    & img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
    }
  }

  /* narrow: the sticker is sealed onto the card's corner, as on the closing card,
     instead of taking a row of its own */
  @media (max-width: 47.99rem) {
    .today {
      position: relative;
    }

    .today__sticker {
      position: absolute;
      inset-block-start: -1.9rem;
      inset-inline-end: 0.6rem;
      inline-size: 5.25rem;
    }

    .today__title {
      padding-inline-end: 4.25rem;
    }
  }

  .today__text {
    display: grid;
    gap: 0.4rem;

    & p {
      max-inline-size: 48ch;
      color: var(--color-text-muted);
    }
  }

  .today__title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 900;
    line-height: 1.1;
  }

  /* the button's paper gap has to match the blush it sits on */
  .today .btn--primary {
    box-shadow:
      0 0 0 3px var(--color-surface),
      var(--depth) var(--depth) 0 3px var(--color-accent);
  }

  /* about ------------------------------------------------------------- */
  .about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3rem, 1.5rem + 4vw, 5rem);
    align-items: center;
  }

  @media (min-width: 64rem) {
    .about__grid {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    }
  }

  .about__visual {
    position: relative;
    justify-self: center;
    inline-size: min(88%, 30rem);
  }

  .about__photo {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-photo);
    overflow: hidden;
    overflow: clip;
    box-shadow: var(--shadow-photo);
    rotate: -2deg;

    & picture,
    & img {
      inline-size: 100%;
      block-size: 100%;
    }

    & img {
      object-fit: cover;
    }
  }

  .about__stamp {
    position: absolute;
    inset-block-end: -6%;
    inset-inline-end: -8%;
    inline-size: 32%;
    rotate: 12deg;
    filter: drop-shadow(0 10px 18px rgb(126 12 19 / 0.22));
  }

  .about__text {
    display: grid;
    gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }

  .about__lead {
    max-inline-size: 48ch;
    font-size: var(--step-1);
    line-height: 1.55;
  }

  .values {
    display: grid;
    gap: 1.1rem;
  }

  .value {
    display: grid;
    gap: 0.2rem;
    max-inline-size: 52ch;
    padding-inline-start: 1.1rem;
    border-inline-start: 3px solid var(--color-accent);

    & p {
      color: var(--color-text-muted);
      font-size: var(--step--1);
    }
  }

  .value__title {
    font-size: var(--step-1);
    font-weight: 900;
    line-height: 1.25;
  }

  .about__reviews {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.8rem;
    color: var(--color-text-muted);
  }

  /* faq --------------------------------------------------------------- */
  @media (min-width: 64rem) {
    .faq__grid {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      gap: clamp(2rem, 5vw, 6rem);
      align-items: start;
    }

    .faq__head {
      position: sticky;
      inset-block-start: calc(var(--header-block) + 2rem);
      margin-block-end: 0;
    }
  }

  .faq__list {
    border-block-start: 2px solid var(--color-text);
  }

  .qa {
    border-block-end: 1.5px solid var(--line-strong);

    & summary {
      position: relative;
      display: block;
      padding-block: 1.3rem;
      padding-inline-end: 3.5rem;
      font-size: var(--step-1);
      font-weight: 800;
      line-height: 1.35;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      /* a plus that turns into a cross */
      &::before,
      &::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 0.9rem;
        inline-size: 1.1rem;
        block-size: 3px;
        margin-block-start: -1.5px;
        border-radius: 3px;
        background-color: var(--color-accent);
        transition: rotate 0.3s var(--ease-out);
      }

      &::after {
        rotate: 90deg;
      }
    }

    &[open] summary::before {
      rotate: 45deg;
    }

    &[open] summary::after {
      rotate: 135deg;
    }
  }

  @media (hover: hover) {
    .qa summary:hover {
      color: var(--color-accent-pressed);
    }
  }

  .qa__answer {
    padding-block-end: 1.4rem;
    padding-inline-end: 3.5rem;
    color: var(--color-text-muted);

    & p {
      max-inline-size: 60ch;
    }
  }

  /* opens smoothly where the browser can animate to auto; elsewhere it just opens */
  @supports selector(::details-content) {
    .qa::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size 0.35s var(--ease-out),
        content-visibility 0.35s allow-discrete;
    }

    .qa[open]::details-content {
      block-size: auto;
    }
  }

  /* closing call: the only cherry block, with the double print inverted.
     Built on the centre line: the sticker seals the top edge like a label on a
     cake box, and the title, text and buttons stack under it. */
  .cta {
    padding-block: clamp(4rem, 3rem + 3vw, 5.5rem) var(--section-space);
  }

  .cta__inner {
    position: relative;
    display: grid;
    justify-items: center;
    padding:
      clamp(4.25rem, 3.25rem + 3vw, 6rem)
      clamp(1.5rem, 0.8rem + 3vw, 5rem)
      clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
    border-radius: calc(var(--radius-card) * 1.3);
    background-color: var(--color-accent);
    color: var(--white);
    text-align: center;
  }

  /* .container's gutter would pad inside the red card; move it outside */
  .cta > .cta__inner {
    max-inline-size: none;
    margin-inline: max(var(--gutter), (100% - var(--container)) / 2 + var(--gutter));
  }

  .cta__text {
    display: grid;
    justify-items: center;
    gap: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  }

  .cta__title {
    max-inline-size: 16ch;
    font-size: var(--step-h2);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.015em;
    text-shadow:
      var(--print-gap) var(--print-gap) 0 var(--color-accent),
      var(--print-depth) var(--print-depth) 0 rgb(255 255 255 / 0.5);
  }

  .cta__lead {
    max-inline-size: 44ch;
    font-size: var(--step-1);
    color: var(--white);
  }

  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.25rem;
    margin-block-start: 0.5rem;
  }

  @media (max-width: 30rem) {
    .cta__actions {
      display: grid;
      grid-template-columns: minmax(0, 20rem);
      justify-content: center;
      inline-size: 100%;

      & .btn {
        inline-size: calc(100% - 8px);
      }
    }
  }

  .btn--light {
    --btn-bg: var(--white);
    --btn-fg: var(--color-accent-pressed);
    --depth: 5px;

    border-color: var(--white);
    box-shadow:
      0 0 0 3px var(--color-accent),
      var(--depth) var(--depth) 0 3px var(--white);
  }

  .btn--outline-light {
    --btn-fg: var(--white);

    border-color: rgb(255 255 255 / 0.8);
  }

  @media (hover: hover) {
    .btn--light:hover {
      --depth: 3px;
      translate: 2px 2px;
    }

    .btn--outline-light:hover {
      --btn-bg: rgb(255 255 255 / 0.12);
      border-color: var(--white);
    }
  }

  .btn--light:active {
    --depth: 0px;
    translate: 5px 5px;
  }

  .cta :focus-visible {
    outline-color: var(--white);
  }

  .cta__place {
    color: var(--white);
    font-size: var(--step--1);
    font-weight: 700;
  }

  /* centred on the card's top edge, half above it */
  .cta__sticker {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: clamp(6.25rem, 5rem + 3vw, 8.5rem);
    aspect-ratio: 1;
    translate: -50% -50%;
    rotate: 8deg;

    & img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
    }
  }

  /* footer ------------------------------------------------------------ */
  .site-foot {
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
    background-color: var(--cocoa-900);
    color: rgb(255 241 236 / 0.8);
    font-size: var(--step--1);

    & a {
      text-decoration: none;
    }

    & ul {
      display: grid;
      justify-items: center;
      gap: 0.5rem;
      padding: 0;
    }

    & :focus-visible {
      outline-color: var(--berry-300);
    }
  }

  @media (hover: hover) {
    .site-foot a:hover {
      color: var(--berry-300);
    }
  }

  /* everything sits on the centre line: the brand, then two link columns
     that mirror each other, then the small print */
  .foot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.5rem;
    max-inline-size: 46rem;
    margin-inline: auto;
    text-align: center;
  }

  /* the stamp stands to the side of the words, and the pair is centred */
  .foot-brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
    padding-block-end: 2.25rem;
    border-block-end: 1px solid rgb(255 241 236 / 0.14);
    text-align: start;

    & img {
      flex: none;
      inline-size: clamp(4.25rem, 3.6rem + 2vw, 5.5rem);
      rotate: -8deg;
    }

    & p {
      max-inline-size: 34ch;
    }
  }

  .foot-title {
    margin-block-end: 0.9rem;
    color: var(--cream);
    font-size: var(--step-0);
    font-weight: 900;
  }

  /* 404: the stamp, one line and the way home, centred on a full screen */
  .not-found {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    min-block-size: 100dvh;
    padding: 2rem var(--gutter);
    text-align: center;
  }

  .not-found__stamp {
    border-radius: 50%;

    & img {
      inline-size: clamp(6rem, 5rem + 4vw, 8rem);
      rotate: -8deg;
    }
  }

  .not-found__title {
    max-inline-size: 14ch;
    color: var(--color-accent);
    font-size: var(--step-h2);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.015em;
    text-shadow:
      var(--print-gap) var(--print-gap) 0 var(--color-bg),
      var(--print-depth) var(--print-depth) 0 var(--color-accent);
  }

  .not-found__text {
    max-inline-size: 36ch;
    color: var(--color-text-muted);
    font-size: var(--step-1);
  }

  .not-found__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.25rem;
    margin-block-start: 0.5rem;
  }

  .foot-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 2rem;
    max-inline-size: 46rem;
    margin: 2.5rem auto 0;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgb(255 241 236 / 0.14);
    color: rgb(255 241 236 / 0.6);
    text-align: center;
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* like the hero's, these stickers turn only while you point at them */
    :is(.today__ring, .cta__ring) {
      animation: spin 14s linear infinite paused;
    }

    @media (hover: hover) {
      .today:hover .today__ring,
      .cta__inner:hover .cta__ring {
        animation-play-state: running;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .qa::details-content,
    .tile img {
      transition: none;
    }
  }

  /* flavour sheets fade in and out; display and overlay are held until the fade ends */
  .sheet {
    opacity: 0;
    transition:
      opacity 0.25s var(--ease-out),
      translate 0.45s var(--ease-out),
      display 0.45s allow-discrete,
      overlay 0.45s allow-discrete;

    &::backdrop {
      opacity: 0;
      transition:
        opacity 0.3s var(--ease-out),
        display 0.3s allow-discrete,
        overlay 0.3s allow-discrete;
    }
  }

  .sheet[open] {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }

    &::backdrop {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }

  /* with motion allowed the card also rises a little, and on phones the sheet slides up from the edge */
  @media (prefers-reduced-motion: no-preference) {
    .sheet {
      translate: 0 1.5rem;
    }

    .sheet[open] {
      translate: 0 0;

      @starting-style {
        translate: 0 1.5rem;
      }
    }

    @media (max-width: 43.99rem) {
      .sheet {
        opacity: 1;
        translate: 0 100%;
      }

      .sheet[open] {
        translate: 0 0;

        @starting-style {
          opacity: 1;
          translate: 0 100%;
        }
      }
    }
  }
}