/* ============================================================
   EXHTO — Responsive layer (loaded LAST so it wins)
   ============================================================ */

/* Reusable 2-col split that stacks on mobile (replaces inline grids) */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .wrap { padding: 0 32px; }
  .section { padding: 56px 0; }
  [data-section="hero"] .aura { min-height: 540px; padding: 52px 40px; }
}

/* ---------- Below 900px ---------- */
@media (max-width: 900px) {
  .g-3 { grid-template-columns: 1fr 1fr; }
  .g-4 { grid-template-columns: 1fr 1fr; }
  /* hero floating stickers crowd the text — relax */
  [data-section="hero"] .aura { padding: 46px 36px; }
  [data-section="hero"] .snap { transform: scale(.82); }
}

/* ---------- Below 768px (phones) ---------- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .section { padding: 42px 0; }

  /* stack every 2-col layout */
  .split2, .g-2, .g-3 { grid-template-columns: 1fr; }

  /* recipes & digital stay 2-up — looks better than 1 */
  .g-4 { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* nav: wrap into a soft compact bar */
  .nav-shell { padding: 14px 0 0; }
  .nav {
    flex-wrap: wrap; justify-content: center; gap: 8px 14px;
    padding: 10px 16px; max-width: calc(100vw - 24px);
    border-radius: 26px;
  }
  .nav .navlink { font-size: 14px; }
  .nav [data-bead] .bead { --bead-size: 22px !important; }
  .nav .lang-toggle button { padding: 5px 10px; font-size: 12px; }

  /* hero: drop the absolutely-positioned scrapbook + doodles, center text */
  [data-section="hero"] .aura {
    min-height: 0; padding: 40px 26px; border-radius: 30px;
  }
  [data-section="hero"] .aura > div { max-width: 100% !important; }
  [data-section="hero"] .snap, [data-section="hero"] .doodle { display: none !important; }

  /* blanket-tame oversized inline puff headlines (h1 keeps its clamp) */
  .puff { font-size: clamp(30px, 9vw, 42px) !important; -webkit-text-stroke-width: 4px; }
  h1.puff { font-size: clamp(46px, 14vw, 88px) !important; -webkit-text-stroke-width: 6px; }
  .puff.solid { -webkit-text-stroke-width: 0; }

  /* o mnie scrapbook stage → centered single portrait */
  .scrap-stage { height: auto !important; text-align: center; }
  .scrap-stage .omnie-main {
    position: static !important; width: 240px !important; height: 300px !important;
    margin: 0 auto 8px !important; transform: rotate(-3deg);
  }
  .scrap-stage .omnie-sub { display: none !important; }
  .scrap-stage .doodle { display: none !important; }

  /* cards & padding trim */
  .card.split2 { padding: 26px !important; }
  .aura.split2, .section .aura { padding: 38px 24px !important; }

  /* marquee a touch smaller */
  .marquee-track span { font-size: 18px; padding: 0 20px; }

  /* footer stacks */
  .foot .wrap { flex-direction: column; gap: 14px; text-align: center; }

  /* drawer full-ish width */
  .drawer { width: min(440px, 94vw); padding: 22px 18px; }

  /* recipes/zine photos shorter */
  .photo { box-shadow: inset 0 2px 12px rgba(255,255,255,.5), 0 10px 24px rgba(180,120,140,.14); }
}

/* ---------- Below 460px (small phones) ---------- */
@media (max-width: 460px) {
  .g-4 { grid-template-columns: 1fr; }
  .nav .navlink { font-size: 13px; }
  .lead { font-size: 16px; }
  .btn { padding: 13px 24px; font-size: 15px; }
  .section { padding: 36px 0; }
  /* filter pills + link pills wrap comfortably */
  .filter button { font-size: 13px; padding: 8px 16px; }
}

/* ---------- embed/preview mode: freeze continuous animation to stay light ---------- */
.exhto-preview .aura,
.exhto-preview .marquee-track,
.exhto-preview .float,
.exhto-preview .bob,
.exhto-preview .spin-slow,
.exhto-preview .petal,
.exhto-preview .cloud,
.exhto-preview .now-dot,
.exhto-preview .metal-chip { animation: none !important; }
.exhto-preview .petals, .exhto-preview .clouds { display: none; }
@media (hover: none), (pointer: coarse) {
  .cur, .cur-spark { display: none !important; }
  .cursor-on, .cursor-on * { cursor: auto !important; }
}