/* 2026-09-10: shared interaction and responsive finishing adjustments. */

/* A pale olive wash inspired by the foliage, preserving the watercolor tone. */
.watercolor-cta::after { transition: background-color .25s ease; }
.watercolor-cta::before { transition: filter .25s ease; }
.watercolor-cta:focus-visible::after { background-color: #cfd2a0; }
.watercolor-cta:focus-visible::before { filter: hue-rotate(20deg) saturate(.72); }
@media (hover: hover) {
  .watercolor-cta:hover::after { background-color: #cfd2a0; }
  .watercolor-cta:hover::before { filter: hue-rotate(20deg) saturate(.72); }
}

/* Account for transparent space inside the organic photograph masks.
   Moving captions visually preserves the established photograph/grid positions. */
@media (min-width: 1001px) {
  #sweets-02 .product-card figcaption {
    padding-left: 1.66666667cqw;
    transform: translateY(-1.25cqw);
  }
  #sweets-02 .product-card:first-child figcaption {
    padding-left: 5.55555556cqw;
    transform: translateY(-2.08333333cqw);
  }
}

/* Native details keeps each answer operable by mouse, touch and keyboard. */
.draft-section.faq { height: auto; }
.faq-list { min-width: 0; }
.faq .faq-item { padding: 0; margin: 0; }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 1.875cqw 0;
  font-size: 1.52777778cqw;
  line-height: 1.8;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 1em;
  text-align: center;
  font-family: sans-serif;
  font-weight: 300;
  color: #8b795d;
}
.faq details[open] > summary::after { content: "−"; }
.faq .faq-item > p {
  margin: 0;
  padding: 0 3.2cqw 1.875cqw 0;
  font-size: 1.31944444cqw;
  line-height: 2;
  letter-spacing: normal;
}
.faq summary:focus-visible { outline: 2px solid #6d6949; outline-offset: 4px; }

@media (max-width: 1000px) {
  /* Pull captions into the masks' empty lower edge, retaining left alignment. */
  #sweets-02 .product-card figcaption,
  #sweets-02 .product-card:first-child figcaption {
    padding: 2px 8px 0 32px;
    transform: translateY(-12px);
  }
  #sweets-02 .product-card:first-child figcaption { transform: translateY(-20px); }
  /* Keep the expanded navigation above content, including short intros. */
  main.stage > section:first-child { overflow: visible; z-index: 6; }
  header .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
    border: 0;
    cursor: pointer;
  }
  .menu-icon { display: block; position: relative; width: 24px; height: 18px; }
  .menu-icon > span {
    position: absolute;
    left: 0;
    width: 24px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-icon > span:nth-child(1) { top: 0; }
  .menu-icon > span:nth-child(2) { top: 8px; }
  .menu-icon > span:nth-child(3) { top: 16px; }
  .menu-toggle[aria-expanded="true"] .menu-icon > span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-icon > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .faq-list { margin-top: 28px; }
  .faq summary { padding: 22px 0; font-size: 18px; line-height: 1.9; gap: 16px; }
  .faq .faq-item > p { padding: 0 28px 24px 0; font-size: 16px; line-height: 2; }
}

/* Fade photo containers, leaving image detail and menu-card white areas crisp.
   Product cards retain their existing organic masks; CTA artwork is separate. */
@media (min-width: 701px) and (max-width: 1000px) {
  .paper-section .scene,
  .paper-section .mobile-photo,
  .paper-section.wrap-right .wrap-photo {
    border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent), linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent), linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}
@media (max-width: 700px) {
  .paper-section .scene,
  .paper-section .mobile-photo,
  .paper-section.wrap-right .wrap-photo {
    border-radius: 0;
    -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
    -webkit-mask-composite: source-over;
    mask-composite: add;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}
@media (max-width: 1000px) {
  /* Every photo section: copy, photograph, then CTA on phones and tablets. */
  .paper-section .text-area { display: contents; }
  .paper-section .text-area > :not(.watercolor-cta) { order: 1; }
  .paper-section .mobile-photo,
  .paper-section.wrap-right .wrap-photo { order: 2; }
  .paper-section .watercolor-cta { order: 3; }
  .section .scene { order: 2; margin-top: 28px; }
  .section .watercolor-cta { order: 3; margin: 24px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .watercolor-cta::before, .watercolor-cta::after, .menu-icon > span { transition: none; }
}