/* Inner pages carry the story homepage's language (site audit, 22 Oct 2026): a red tag on each page's first
   label, torn paper where a page turns between black and white, one handwritten aside from Frank per page,
   headlines that slam in, and the three-layer crowd closing every page. Not loaded on the story homepage. */

/* A1 · The page's first label is a solid red tag (the DESIGN.md red-fill exception for labels). */
html :is(.eyebrow, .basement-label).tag { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 5px 10px 4px;
  background: var(--accent); color: var(--bone-100); font: var(--weight-semibold) var(--type-lead)/1.15 var(--font-body); letter-spacing: .01em; text-transform: uppercase; }
html .eyebrow.tag .dash { display: none; }
@media (max-width: 760px) { html :is(.eyebrow, .basement-label).tag { font-size: var(--type-small); padding: 4px 8px 3px; } }

/* A2 · Torn paper. Only light pages tear (they always have their own background), at the top, the bottom or both.
   Each edge overlaps its dark neighbour by 56px; a transparent border of the same depth keeps the page's own
   content where it was, and its background runs under the border into the rip. Pale fibres line each edge. */
.torn { position: relative; z-index: 2; --fibre: var(--bone-300);
  --tear-top: url(/assets/tear-page-mask-2-top.svg); --fibre-top: url(/assets/tear-fibre-mask-2-top.svg);
  --tear-bottom: url(/assets/tear-page-mask.svg); --fibre-bottom: url(/assets/tear-fibre-mask.svg); }
.torn.tear-b { --tear-top: url(/assets/tear-page-mask-3-top.svg); --fibre-top: url(/assets/tear-fibre-mask-3-top.svg);
  --tear-bottom: url(/assets/tear-page-mask-2.svg); --fibre-bottom: url(/assets/tear-fibre-mask-2.svg); }
.torn.tear-c { --tear-top: url(/assets/tear-page-mask-top.svg); --fibre-top: url(/assets/tear-fibre-mask-top.svg);
  --tear-bottom: url(/assets/tear-page-mask-3.svg); --fibre-bottom: url(/assets/tear-fibre-mask-3.svg); }
.torn-top { margin-top: -56px; border-top: 56px solid transparent;
  -webkit-mask: var(--tear-top) top / 100% 64px no-repeat, linear-gradient(black, black) bottom / 100% calc(100% - 63px) no-repeat;
  mask: var(--tear-top) top / 100% 64px no-repeat, linear-gradient(black, black) bottom / 100% calc(100% - 63px) no-repeat; }
.torn-bottom { margin-bottom: -56px; border-bottom: 56px solid transparent;
  -webkit-mask: linear-gradient(black, black) top / 100% calc(100% - 63px) no-repeat, var(--tear-bottom) bottom / 100% 64px no-repeat;
  mask: linear-gradient(black, black) top / 100% calc(100% - 63px) no-repeat, var(--tear-bottom) bottom / 100% 64px no-repeat; }
.torn-top.torn-bottom {
  -webkit-mask: var(--tear-top) top / 100% 64px no-repeat, linear-gradient(black, black) center / 100% calc(100% - 126px) no-repeat, var(--tear-bottom) bottom / 100% 64px no-repeat;
  mask: var(--tear-top) top / 100% 64px no-repeat, linear-gradient(black, black) center / 100% calc(100% - 126px) no-repeat, var(--tear-bottom) bottom / 100% 64px no-repeat; }
.torn-top::before, .torn-bottom::after { content: ''; position: absolute; left: 0; right: 0; height: 64px; z-index: 3; background: var(--fibre); pointer-events: none; }
.torn-top::before { top: -56px; -webkit-mask: var(--fibre-top) center / 100% 100% no-repeat; mask: var(--fibre-top) center / 100% 100% no-repeat; }
/* A transparent neighbour below a torn page takes back the overlap (nothing behind it to show through the rip),
   so its first line clears the edge. */
.torn-bottom + .track-award, main:has(> .torn-bottom:last-child) + .signup { margin-top: 56px; border-top: 0; }
.torn-bottom::after { bottom: -56px; -webkit-mask: var(--fibre-bottom) center / 100% 100% no-repeat; mask: var(--fibre-bottom) center / 100% 100% no-repeat; }

/* A3 · Frank's handwritten aside: his voice, no full stop, one per page. */
/* !important: page copy rules (series story, shop intro) style every paragraph in their column. */
.aside { margin: var(--space-4) 0 0 !important; font: var(--weight-regular) clamp(26px, 2.6vw, 40px)/1 var(--font-hand) !important; color: var(--text) !important;
  max-width: none !important; letter-spacing: 0; text-transform: none; transform: rotate(-3deg); transform-origin: left; }

/* A4 · The crowd closes every page in three layers (assets/crowd-parallax), anchored at the bottom so the
   front row always shows. --p (0 → 1 as the page ends) lifts them at different speeds; --mx / --my follow a
   fine pointer by the README distances (3 / 9 / 18 px at 1686 px wide). Static without pages.js. */
.site-footer { --p: 1; --mx: 0; --my: 0; }
.crowd-stage { position: absolute; inset: 0; z-index: -2; overflow: clip; container-type: size; }
.crowd-scene { position: absolute; left: 50%; bottom: 0; width: max(100cqw, calc(100cqh * 1686 / 933)); aspect-ratio: 1686 / 933;
  transform: translateX(-50%) scale(1.05); transform-origin: 50% 100%; --u: calc(100cqw / 1686); }
.crowd-scene img { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(.86) contrast(1.06); }
.crowd-scene .l1 { transform: translate(calc(var(--mx) * 3 * var(--u)), calc((1 - var(--p)) * 6% + var(--my) * 2 * var(--u))); }
.crowd-scene .l2 { transform: translate(calc(var(--mx) * 9 * var(--u)), calc((1 - var(--p)) * 14% + var(--my) * 5 * var(--u))); }
.crowd-scene .l3 { transform: translate(calc(var(--mx) * 18 * var(--u)), calc((1 - var(--p)) * 26% + var(--my) * 10 * var(--u))); }
@media (max-width: 760px) {
  /* Phones: scroll-linked layers stutter on iOS, so the crowd rises once, on the compositor, when it arrives */
  .crowd-live .crowd-scene img { transition: transform var(--dur-scene) var(--ease-out); }
  .crowd-live .crowd-scene .l1 { transform: translateY(6%); }
  .crowd-live .crowd-scene .l2 { transform: translateY(14%); }
  .crowd-live .crowd-scene .l3 { transform: translateY(26%); }
  .crowd-live.crowd-in .crowd-scene img { transform: none; }
}

/* A5 · Headlines slam in word by word when they arrive: fast in, long settle, no bounce (as on the homepage). */
.slam-word { display: inline-block; }
.slam-ready .slam-word { opacity: 0; transform: translateY(.32em) scale(1.14); transform-origin: 50% 100%;
  transition: opacity var(--dur-medium) var(--ease-out) calc(var(--i) * 70ms), transform var(--dur-slow) var(--ease-out) calc(var(--i) * 70ms); }
.slam-ready.slammed .slam-word { opacity: 1; transform: none; }
html.frank-motion-off .slam-word { opacity: 1; transform: none; transition: none; }