/* ==========================================================================
   Why Unicorn Store — laid out as a comic page

   The four reasons were a flat row of identical cards, which read as filler.
   Here they become panels on a comic spread: one large splash panel carrying
   the argument as a speech bubble, four numbered panels around it, paper
   showing through as gutters, and a starburst on the point that matters most.
   ========================================================================== */

.story {
  position: relative;
  padding-block: 0 var(--section-y);
  background: var(--u-paper-2);
  border-block: var(--ink-w) solid var(--u-ink);
}

/* --- Marquee band ---------------------------------------------------------- */

.story__marquee {
  padding-block: 0.7rem;
  border-bottom: var(--ink-w) solid var(--u-ink);
  background: var(--u-accent);
  color: var(--on-accent);
}

.story__marquee .u-marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.8vw, 1.9rem);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.story__marquee .u-star { color: var(--u-ink); }

/* --- Head ------------------------------------------------------------------ */

.story__inner { padding-top: var(--section-y); }
.story__head  { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }

/* --- The page ---------------------------------------------------------------
   The grid gap IS the comic gutter — paper showing between panels. */

.story__page {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

@media (min-width: 700px) {
  .story__page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .story__page {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(186px, auto);
  }
  /* Splash panel holds the left half of both rows. */
  .story__splash { grid-column: 1 / 3; grid-row: 1 / 3; }
}

/* --- Panel base ------------------------------------------------------------ */

.story__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.3rem;
  overflow: hidden;
  border: var(--ink-border);
  border-radius: var(--r-md);
  background: var(--u-white);
  box-shadow: var(--shadow-sticker);
  rotate: var(--tilt, 0deg);
  transition: rotate var(--t-mid) var(--ease-out),
              translate var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}

@media (hover: hover) {
  .story__panel:hover {
    rotate: 0deg;
    translate: -3px -4px;
    box-shadow: var(--shadow-lift);
  }
}

/* Ben-Day wash in the panel's own accent, faint enough to keep text legible. */
.story__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--accent) 2px, transparent 2.1px);
  background-size: 13px 13px;
  /* Low enough that body copy sits on near-white; the dots are a texture,
     not a pattern to read against. */
  opacity: 0.17;
  pointer-events: none;
}

.story__panel > * { position: relative; }

/* --- Numbered panels ------------------------------------------------------- */

.story__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: var(--ink-w) solid var(--u-ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--u-ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
}

.story__panel-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.story__panel-body {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--u-ink);
  opacity: 0.78;
}

/* --- Splash panel ----------------------------------------------------------
   Ink ground, halftone reversed out of it, and the brand argument set as a
   speech bubble with a real tail. */

.story__splash {
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--u-ink);
  color: var(--u-paper);
  rotate: 0deg;
}

.story__splash::before {
  background-image: radial-gradient(circle at center, var(--u-paper) 1.6px, transparent 1.7px);
  background-size: 15px 15px;
  opacity: 0.14;
}

@media (hover: hover) {
  .story__splash:hover { rotate: 0deg; translate: 0 0; box-shadow: var(--shadow-sticker); }
}

.story__splash-rays {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 248, 236, 0.09) 0deg 6deg,
    transparent 6deg 12deg
  );
  pointer-events: none;
}

.story__bubble {
  position: relative;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: var(--ink-w) solid var(--u-ink);
  border-radius: var(--r-lg);
  background: var(--u-white);
  color: var(--u-ink);
  box-shadow: 5px 5px 0 var(--u-accent);
}

/* Tail: two stacked triangles so the ink keyline reads as continuous. */
.story__bubble::before,
.story__bubble::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.story__bubble::before {
  bottom: -21px;
  left: 2.6rem;
  border-width: 22px 20px 0 0;
  border-color: var(--u-ink) transparent transparent transparent;
}
.story__bubble::after {
  bottom: -16px;
  left: 2.75rem;
  border-width: 17px 15px 0 0;
  border-color: var(--u-white) transparent transparent transparent;
}

.story__bubble p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.5;
}

.story__bubble strong { color: var(--u-primary); }

.story__splash-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.story__value {
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--u-paper);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Starburst -------------------------------------------------------------
   The "POW" of the spread, pinned to the first numbered panel. */

.story__burst {
  position: absolute;
  top: -20px;
  right: -18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 0.9rem;
  background: var(--u-danger);
  color: var(--on-danger);
  font-family: var(--font-display);
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  rotate: 12deg;
  clip-path: polygon(
    50% 0%, 60% 16%, 76% 8%, 78% 26%, 95% 25%, 88% 41%, 100% 50%,
    88% 59%, 95% 75%, 78% 74%, 76% 92%, 60% 84%, 50% 100%, 40% 84%,
    24% 92%, 22% 74%, 5% 75%, 12% 59%, 0% 50%, 12% 41%, 5% 25%,
    22% 26%, 24% 8%, 40% 16%
  );
}

/* The panel clips its own overflow, so the burst needs a non-clipping host. */
.story__panel--flag { overflow: visible; }
.story__panel--flag::before { border-radius: var(--r-md); overflow: hidden; }

@media (max-width: 480px) { .story__burst { display: none; } }