/* ══════════════════════════════════════════════════════════════════════════
   The Mall (templates/mall.html), on top of css/shelf.css.

   The label's story is a student drawing in the margins of a lecture
   notebook, so the Mall opens on that sheet: ruled lines, the red margin
   rule drawn down the side, the wordmark written beside it. It stays short,
   so the finds start within the first screen.
   ══════════════════════════════════════════════════════════════════════════ */

[data-tint="mall"] { --t-bg: #f4d8cf; --t-ink: #8a2b1d; }
.mall-page { --margin-red: #cf5a45; --rule: rgba(64, 112, 150, .13); }

/* ── The sheet ────────────────────────────────────────────────────────── */
.sheet {
  position: relative;
  overflow: hidden;
  background-color: #fbf8ee;
  background-image: repeating-linear-gradient(to bottom, transparent 0 37px, var(--rule) 37px 38px);
  background-position: 0 22px;
  border-bottom: 1px solid #e7e2d2;
}
/* The margin: two red rules, drawn top to bottom when you arrive. */
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* In the gutter just left of the copy, wherever the centred column sits. */
  left: calc(max(0px, (100% - var(--sh-wrap)) / 2) + clamp(16px, 3vw, 28px) + clamp(10px, 2.6vw, 36px));
  width: 1.5px;
  background: var(--margin-red);
  opacity: .7;
  transform-origin: top;
  animation: mall-rule 1.4s cubic-bezier(.16, 1, .3, 1) both;
}
.sheet::after { margin-left: 5px; opacity: .4; animation-delay: .12s; }
@keyframes mall-rule { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sheet-in { position: relative; z-index: 1; padding-bottom: clamp(22px, 3.5vw, 40px); }
.mall-intro { padding-left: clamp(30px, 7vw, 104px); }
.wordmark {
  margin: 0;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--sh-ink);
  animation: mall-rise .9s cubic-bezier(.16, 1, .3, 1) .25s both;
}
.wordmark span { position: relative; display: inline-block; color: #8a2b1d; }
.wordmark svg { position: absolute; left: 2%; right: 0; bottom: -.08em; width: 98%; height: .16em; overflow: visible; }
.wordmark path {
  fill: none;
  stroke: var(--margin-red);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: mall-draw 1.1s cubic-bezier(.65, 0, .35, 1) .9s forwards;
}
@keyframes mall-draw { to { stroke-dashoffset: 0; } }
@keyframes mall-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sheet-lead {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--sh-ink-2);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  font-weight: 600;
  animation: mall-rise .9s cubic-bezier(.16, 1, .3, 1) .4s both;
}
.mall-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none;
  animation: mall-rise .9s cubic-bezier(.16, 1, .3, 1) .5s both; }
.mall-facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 99px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--sh-line); color: var(--sh-ink); font-size: 13.5px; font-weight: 800; }
.mall-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--margin-red); }

/* ── The Margin's own row, then the walk past every find ─────────────── */
.mall-label { padding-top: clamp(28px, 4vw, 52px); }
.mall-label .shelf-head p a { color: #8a2b1d; font-weight: 800; text-underline-offset: 3px; }
.mall-kicker { margin: 0 0 6px !important; color: #8a2b1d !important; font-size: 13px; font-weight: 900 !important; letter-spacing: .04em; }
.mall-label .shelf-grid { padding: clamp(12px, 2vw, 20px); border-radius: 30px; background: #f9ece6; box-shadow: inset 0 0 0 1.5px #f0d6cc; }
.mall-feed { padding-top: clamp(36px, 5vw, 64px); }
.feed-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 0 8px; }
.feed-more.is-loading { pointer-events: none; opacity: .75; }
.feed-more.is-loading::after { content: ""; width: 14px; height: 14px; margin-left: 10px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: feed-spin .8s linear infinite; }
@keyframes feed-spin { to { transform: rotate(360deg); } }
.feed-end { margin: 0; color: var(--sh-muted); font-weight: 700; text-align: center; }

/* On a phone the margin rules only crowd the left edge: leave the plain ruled sheet. */
@media (max-width: 720px) {
  .sheet::before, .sheet::after { display: none; }
  .mall-intro { padding-left: 0; }
  .wordmark { font-size: 46px; }
  .sheet-lead { font-size: 15px; line-height: 1.5; margin-top: 10px; }
  .sheet-in { padding-bottom: 16px; }
  .sheet .crumbs { margin: 12px 0 8px; }
  /* one swipeable row of facts instead of three stacked lines */
  .mall-facts { flex-wrap: nowrap; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
  .mall-facts::-webkit-scrollbar { display: none; }
  .mall-facts li { flex: none; font-size: 12.5px; min-height: 32px; }
  .mall-label { padding-top: 18px; }
  .mall-label .shelf-head p { font-size: 14px; }
  .mall-label .shelf-grid { padding: 10px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet::before, .sheet::after, .wordmark, .sheet-lead, .mall-facts { animation: none; }
  .wordmark path { animation: none; stroke-dashoffset: 0; }
  .feed-more.is-loading::after { animation: none; }
}