/* /stories: quick reads from four shops, one after another down the page, then "Your shop here".
   Builds on ../../site.css (tokens, fonts, header, price-tag button, text links), the homepage's painted
   menu (../../stories/hero) and footer (../../stories/footer). Every picture here is baked by bake.js
   into img/; the numbers and the quotes are HTML text on top.
   Each shop keeps its own colours (from its storefront) and its own layout:
     Cheapskates   the storefront at sunrise; a big result and two more on paper cards; Patrick by his quote
     North Shore   under snowy peaks; four results on swap tickets; Phil's quote and his video
     Coast         by the sea, centred; a tag pinned to the storefront; Natasha's quote
     On Top        below the forest; a tag pinned to the storefront; Dan's quote
   Motion (stories.js): the quotes write themselves left to right as they come into view and their key
   words get a brush stroke; the numbers pop onto their cards. Reduced motion (or no script) shows
   everything finished. */

.stories-page { --shop: var(--ink); --card: none; --hl: none; }
.stories-page main { display: block; }

/* the menu: Shop stories, the page you're on, keeps a marigold stroke under it */
.menu-more a[aria-current="page"] { position: relative; z-index: 0; color: var(--ink); }
.menu-more a[aria-current="page"]::before {
  content: ""; position: absolute; z-index: -1; left: -.2em; right: -.25em; top: .55em; bottom: .3em;
  background: url("../../stories/hero/img/hl-menu.webp") no-repeat 0 50% / 100% 100%;
}

/* ---------------------------------------------------------------- the top of the page */
.st-intro { max-width: 1440px; margin: 0 auto; padding: clamp(8px, 2.2vh, 30px) var(--gutter) 0; }
.st-intro h1 { margin: 0; font: 400 clamp(2.55rem, 10.5vw, 4.6rem)/1 var(--display); letter-spacing: -.01em; }
.st-intro p { margin: 12px 0 0; max-width: 34em; font-size: clamp(1.08rem, .96rem + .55vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
/* each shop's name, underlined with its own brush stroke */
.st-intro a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  background: no-repeat 0 88% / 100% .42em; padding: 0 .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.st-intro a:hover { color: var(--red); }
.st-intro a:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.st-intro .to-cs { background-image: url("img/hl-cheapskates.webp"); }
.st-intro .to-ns { background-image: url("img/hl-northshoresportsswap.webp"); }
.st-intro .to-co { background-image: url("img/hl-coast-consignment.webp"); }
.st-intro .to-ot { background-image: url("img/hl-ontopbikeshop.webp"); }

/* ---------------------------------------------------------------- a story (phones first: one column) */
.story {
  position: relative; max-width: 1440px; margin: clamp(48px, 9vw, 130px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "art" "head" "nums" "dek" "note" "quote" "video" "links";
  scroll-margin-top: 12px;
}
.story--cs { margin-top: clamp(22px, 4vw, 44px); }
/* The stories below the first (and "Your shop here") are only laid out and painted once they come near
   the screen, so their storefronts, cards and posters aren't downloaded with the first screen. The sizes
   are rough heights to hold their place until then (auto remembers the real one after). */
.story--ns, .story--co, .story--ot, .yours { content-visibility: auto; }
/* (that also clips what spills past a section's box, so each keeps a little room at its foot for the
   tilted cards' shadows and the focus rings) */
.story--ns, .story--co, .story--ot { padding-bottom: 28px; }
.story--co, .story--ot { margin-top: clamp(20px, 6vw, 100px); }
.story--ns { contain-intrinsic-size: auto 1850px; }
.story--co { contain-intrinsic-size: auto 820px; }
.story--ot { contain-intrinsic-size: auto 920px; }
.yours { contain-intrinsic-size: auto 720px; }
/* (North Shore keeps its name, line and note together in .st-words, one block beside the storefront on
   desktop; elsewhere the wrapper steps aside so they take their own places) */
.st-words { display: contents; }
.st-art { grid-area: art; position: relative; margin: 0; justify-self: center; width: min(100%, 460px); }
.st-art img { display: block; width: 100%; height: auto; }
.st-head { grid-area: head; margin-top: 8px; }
.st-head h2 { margin: 0; font: 400 clamp(2.05rem, 8.4vw, 3.2rem)/1.03 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.st-where { margin: 6px 0 0; font: 600 .95rem/1.4 var(--body); color: var(--ink-soft); }
.st-dek { grid-area: dek; margin: 18px 0 0; max-width: 28em; font: 500 clamp(1.16rem, 1.02rem + .7vw, 1.45rem)/1.42 var(--body); color: var(--ink); text-wrap: pretty; }
.st-note { grid-area: note; margin: 12px 0 0; max-width: 42em; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.st-links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: 0 30px; margin: 16px 0 0; }
.st-links .text-link, .st-video .text-link { padding: 10px 0; font-size: 1.06rem; color: var(--ink); }
.st-links .text-link:hover, .st-video .text-link:hover { color: var(--shop); }
.st-links .text-link:focus-visible, .st-video .text-link:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* each shop's colours */
.story--cs { --shop: #135065; --card: url("img/card-cheapskates.webp"); --hl: url("img/hl-cheapskates.webp"); }
.story--ns { --shop: #9b2722; --card: url("img/ticket-northshoresportsswap.webp"); --hl: url("img/hl-northshoresportsswap.webp"); }
.story--co { --shop: #1f3552; --card: url("img/card-coast-consignment.webp"); --hl: url("img/hl-coast-consignment.webp"); }
.story--ot { --shop: #285238; --card: url("img/card-ontopbikeshop.webp"); --hl: url("img/hl-ontopbikeshop.webp"); }

/* ---------------------------------------------------------------- the numbers, on painted paper
   A card is a 9-slice of a painted card (img/card-*.webp, 830 x 505: a 16-unit shadow margin round the
   paper, 1 unit = 2.5 px). Its corners keep their size; its edges and its paper stretch to fit. */
.st-nums { grid-area: nums; list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px 14px; }
.num {
  position: relative; margin: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 19px 22px 18px;
  border: 0 solid transparent;
  border-image: var(--card) 100 fill / 40px / 16px stretch;
  rotate: var(--r, 0deg);
}
/* (each figure hugs its own width, so its pop never reaches past the screen's edge) */
.num b { display: block; width: fit-content; font: 600 clamp(2.5rem, 10vw, 3.15rem)/.95 var(--label); color: var(--shop); letter-spacing: .01em; white-space: nowrap; }
.num b small { margin-left: .12em; font-size: .48em; letter-spacing: .02em; }
.num > span { display: block; font: 600 .98rem/1.3 var(--body); color: var(--ink); text-wrap: balance; }
.nw { white-space: nowrap; }
.num-arrow { display: inline-block; width: .8em; height: .4em; margin: 0 .08em 0 .1em; vertical-align: .18em; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- the quotes */
.st-quote { grid-area: quote; position: relative; margin: 34px 0 0; }
.st-quote blockquote { position: relative; margin: 0; }
/* a big opening quote in the shop's colour */
.st-quote blockquote::before {
  content: "\201C"; content: "\201C" / ""; position: absolute; left: -.04em; top: -.2em;
  font: 400 4.4rem/1 var(--display); color: var(--shop);
}
.st-quote blockquote p { margin: 0; padding-top: 2.6rem; max-width: 30em; font: 500 clamp(1.24rem, 1.04rem + .95vw, 1.66rem)/1.45 var(--body); color: var(--ink); text-wrap: pretty; }
.st-quote figcaption { margin-top: 14px; font: 500 1.06rem/1.3 var(--body); color: var(--ink-soft); }
.st-quote figcaption b { font-weight: 700; color: var(--ink); }
/* the key words: a brush stroke of the shop's colour behind them */
.st-quote mark {
  color: inherit; padding: 0 .08em; margin: 0 -.04em;
  background: var(--hl) no-repeat 0 64% / 100% .8em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------------------------------------------------------------- Cheapskates */
/* the big result first, the other two side by side under it */
.story--cs .st-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story--cs .num--big { grid-column: 1 / -1; --r: -1.2deg; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px 16px; padding: 17px 26px 16px; }
.story--cs .num--big b { font-size: clamp(3.4rem, 15vw, 4.6rem); }
.story--cs .num--big > span { font-size: 1.08rem; max-width: 7.5em; }
.story--cs .num:nth-child(2) { --r: 1.4deg; }
.story--cs .num:nth-child(3) { --r: -.8deg; }
.story--cs .num:not(.num--big) b { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
/* Patrick, grinning at the night's sales, beside his name */
.story--cs .st-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "q q" "face cap"; align-items: center; column-gap: 14px; }
.story--cs .st-quote blockquote { grid-area: q; }
.story--cs .st-quote figcaption { grid-area: cap; margin-top: 8px; }
.st-face { grid-area: face; display: block; width: clamp(92px, 26vw, 124px); height: auto; margin-top: 10px; rotate: -3deg; }

/* ---------------------------------------------------------------- North Shore Sports Swap: swap tickets
   img/ticket-*.webp (1180 x 370; 1 unit = 2.5 px): a 16-unit margin, then a 440 x 116 ticket whose stub is
   170 wide. The 9-slice's left slice holds the whole stub (to 210 units), so the stub never stretches;
   --u scales the ticket (1 on desktop). */
.story--ns { --u: .84; }
.story--ns .st-nums { gap: 14px; }
.story--ns .num {
  display: grid; grid-template-columns: calc(170px * var(--u)) minmax(0, 1fr); align-items: center; gap: 0;
  min-height: calc(116px * var(--u)); padding: 0;
  border-image: var(--card) 100 100 100 525 fill / calc(40px * var(--u)) calc(40px * var(--u)) calc(40px * var(--u)) calc(210px * var(--u)) / calc(16px * var(--u)) stretch;
}
.story--ns .num b { justify-self: center; padding: 0 4px; text-align: center; font-size: clamp(2rem, 8.6vw, 2.5rem); }
/* "days" goes under its figure, so the stub never overflows */
.story--ns .num b small { display: block; margin: 3px 0 0; font-size: .42em; letter-spacing: .06em; }
.story--ns .num > span { padding: 12px 16px 12px calc(30px * var(--u)); font-size: .95rem; }
.story--ns .num:nth-child(odd) { --r: -.6deg; }
.story--ns .num:nth-child(even) { --r: .7deg; margin-left: 6px; }

/* the video: a painted poster until it is played; beside it, Phil on whether Snapy is easy to use */
.st-video { grid-area: video; margin: 22px -12px 0; padding: 12px 12px 24px; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: 18px; align-items: center; }
/* the poster is far down the page: it is only painted (and downloaded) once it comes near the screen
   (the padding above keeps the tilted poster's corners and shadow inside the box this clips to) */
.st-video { content-visibility: auto; contain-intrinsic-size: auto 330px; }
.vid { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: #3a3530; box-shadow: 0 1px 0 rgba(42, 33, 29, .35), 0 14px 26px -16px rgba(42, 33, 29, .7); rotate: -1.5deg; -webkit-tap-highlight-color: transparent; }
.vid-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-q {
  position: absolute; left: 12%; right: 12%; top: 7%;
  padding: 7px 8px 8px; border-radius: 8px; background: #fbf6ea;
  font: 400 clamp(.92rem, 3.9vw, 1.08rem)/1.1 var(--display); color: #7a1f1c; text-align: center; text-wrap: balance;
  box-shadow: 0 1px 0 rgba(42, 33, 29, .25);
}
.vid-play { position: absolute; left: 50%; top: 54%; width: 36%; aspect-ratio: 1; translate: -50% -50%; background: url("img/play.webp") center / contain no-repeat; transition: scale .35s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 4px 6px rgba(42, 33, 29, .35)); }
a.vid:hover .vid-play, a.vid:focus-visible .vid-play { scale: 1.1; }
a.vid:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.vid--on { rotate: 0deg; background: #000; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-ask h3 { margin: 0 0 8px; font: 400 clamp(1.25rem, 5.4vw, 1.5rem)/1.12 var(--display); color: var(--shop); text-wrap: balance; }
.st-ask blockquote { margin: 0; }
.st-ask blockquote p { margin: 0; font: 500 1.02rem/1.45 var(--body); color: var(--ink); text-wrap: pretty; }
.ask-who { margin: 8px 0 0; font: 500 .95rem/1.35 var(--body); color: var(--ink-soft); }
.ask-who b { color: var(--ink); font-weight: 700; }
/* (the link flows with its words, so on a narrow column its arrow follows the last word) */
.st-ask .text-link { display: inline; padding: 0; font-size: 1rem; line-height: 1.6; }
.st-ask .text-link .ink-arrow { margin-left: 4px; vertical-align: -3px; }
.ask-more { margin: 10px 0 0; }

/* ---------------------------------------------------------------- Coast Consignment and On Top: a tag on the storefront */
.story--co .st-nums, .story--ot .st-nums { grid-area: art; align-self: end; margin: 0; z-index: 2; pointer-events: none; }
.num--tag { width: fit-content; min-width: 9.5em; padding: 15px 22px 14px; }
.num--tag b { font-size: clamp(2.5rem, 11vw, 3.2rem); }
.num--tag > span { font-size: .95rem; }
.story--co .st-nums { justify-self: end; margin: 0 -4px -26px 0; }
.story--co .num--tag { --r: 3deg; }
.story--ot .st-nums { justify-self: start; margin: 0 0 -26px -4px; }
.story--ot .num--tag { --r: -3deg; }
.story--co .st-head, .story--ot .st-head { margin-top: 36px; }
.story--co .st-dek, .story--ot .st-dek { margin-top: 12px; }

/* ---------------------------------------------------------------- your shop here */
.yours { max-width: 1440px; margin: clamp(64px, 11vw, 150px) auto 0; padding: 0 var(--gutter); text-align: center; }
.yours-art { display: block; width: min(72vw, 340px); height: auto; margin: 0 auto 6px; }
.yours h2 { margin: 0 0 10px; font: 400 clamp(2.1rem, 8.6vw, 3.2rem)/1.04 var(--display); }
.yours > p { margin: 0 auto 28px; max-width: 30ch; font-size: clamp(1.08rem, .98rem + .5vw, 1.25rem); line-height: 1.5; color: var(--ink-soft); text-wrap: balance; }
.yours .tag-btn { margin-left: 20px; }
.yours .tag-btn > span { font-size: 1.06rem; padding: 18px 28px 18px 48px; }
/* Sven's note (its own rules are in ../../site.css): pinned under the Book button on phones; on desktop
   in a column of its own beside it, its foot level with the button's */
.yours .sven-note { --tilt: -1.2deg; width: min(342px, 100%); margin: 44px auto 0; }

/* the footer's paintings (its dusk wash, balloons and dabs) wait until it comes near the screen too
   (nothing in the footer paints outside its own box, so this changes nothing else) */
.stories-page .site-foot { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* the footer: Shop stories is where you are */
.foot-group a[aria-current="page"] { color: var(--ink); }
.foot-group a[aria-current="page"]::after { clip-path: inset(0 0 0 0); }

/* ---------------------------------------------------------------- the narrowest phones */
@media (max-width: 359px) {
  .story--ns { --u: .76; }
  .story--cs .num--big { padding-left: 22px; padding-right: 22px; }
  /* (the two smaller Cheapskates figures and the big one's label keep clear of their cards' frames) */
  .story--cs .num:not(.num--big) b { font-size: 1.9rem; }
  .story--cs .num--big > span { max-width: 6.2em; font-size: 1rem; }
  .yours .tag-btn > span { padding-left: 40px; padding-right: 18px; font-size: .98rem; }
}

/* ---------------------------------------------------------------- wider phones and tablets */
@media (min-width: 600px) and (max-width: 959px) {
  /* the storefront is 460 wide in the middle of the column: the tags stay pinned to its corners */
  .story--co .st-nums { justify-self: center; translate: 150px 0; }
  .story--ot .st-nums { justify-self: center; translate: -150px 0; }
  .story--ns { --u: .92; }
  .story--ns .st-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story--ns .num:nth-child(even) { margin-left: 0; }
  .story--cs .st-nums { max-width: 560px; }
  .st-video { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 28px; contain-intrinsic-size: auto 430px; }
}

/* ---------------------------------------------------------------- desktop: a spread per shop, each its own way */
@media (min-width: 960px) {
  .story { column-gap: clamp(36px, 4.4vw, 76px); }
  .st-head { margin-top: 0; }
  .st-art { width: 100%; }

  /* Cheapskates: the storefront on the left, the results on the right; Patrick and his quote below */
  .story--cs {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-areas: "art head" "art nums" "art dek" "art note" "quote quote" "links links";
    grid-template-rows: auto auto auto 1fr auto auto;
    align-items: start;
  }
  .story--cs .st-art { max-width: 560px; justify-self: end; }
  .story--cs .st-head { margin-top: clamp(16px, 3vw, 44px); }
  .story--cs .st-nums { max-width: 620px; margin-top: 24px; }
  .story--cs .num--big b { font-size: 5rem; }
  .story--cs .st-quote { grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "face q" "face cap"; column-gap: clamp(28px, 3.4vw, 52px); align-items: start; margin-top: 50px; max-width: 1100px; }
  .story--cs .st-quote figcaption { margin-top: 12px; }
  .st-face { width: 170px; margin-top: 2px; }
  .story--cs .st-links { padding-left: calc(170px + clamp(28px, 3.4vw, 52px)); }

  /* North Shore: the words beside the storefront, the four tickets across under them, then the quote
     and the video */
  .story--ns {
    --u: 1;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-areas: "words art" "nums nums" "quote video" "links video";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
  }
  .story--ns .st-words { display: block; grid-area: words; align-self: center; padding-bottom: 20px; }
  .story--ns .st-art { max-width: 500px; justify-self: start; }
  .story--ns { contain-intrinsic-size: auto 1300px; }
  .story--co { contain-intrinsic-size: auto 870px; }
  .story--ot { contain-intrinsic-size: auto 590px; }
  .yours { contain-intrinsic-size: auto 574px; }
  .stories-page .site-foot { contain-intrinsic-size: auto 455px; }
  .story--ns .st-dek { margin-top: 16px; }
  .story--ns .st-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; margin-top: 34px; }
  .story--ns .num:nth-child(even) { margin-left: 0; }
  .story--ns .num b { font-size: 3rem; }
  .story--ns .num > span { font-size: 1.04rem; padding-right: 26px; }
  .story--ns .st-nums { max-width: 1120px; }
  .story--ns .st-quote { margin-top: 48px; }
  .st-video { grid-template-columns: 236px minmax(0, 1fr); column-gap: 30px; align-items: end; margin-top: 40px; contain-intrinsic-size: auto 470px; }
  .vid-q { font-size: 1.05rem; }
  .st-ask h3 { font-size: 1.5rem; }
  .st-ask blockquote p { font-size: 1.06rem; }

  /* Coast: one centred column, the storefront first with its tag pinned on */
  .story--co { max-width: 900px; justify-items: center; text-align: center; }
  .story--co .st-art { width: min(460px, 100%); }
  .story--co .st-nums { justify-self: end; margin: 0 calc(50% - 300px) 10px 0; }
  .story--co .st-head { margin-top: 26px; }
  .story--co .st-dek { margin-left: auto; margin-right: auto; }
  .story--co .st-quote blockquote p { max-width: 26em; margin: 0 auto; }
  .story--co .st-quote blockquote::before { left: 50%; translate: -50% 0; }
  .story--co .st-links { justify-content: center; }

  /* On Top: the storefront on the left with its tag reaching toward the words on the right */
  .story--ot {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-areas: "art head" "art dek" "art quote" "art links";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
  }
  .story--ot .st-head { margin-top: clamp(24px, 4vw, 60px); }
  .story--ot .st-art { width: min(460px, 100%); justify-self: end; }
  /* the tag sits over the storefront's lower right corner (the picture is 1100 x 1080; a percentage
     margin is a share of the column's width) */
  .story--ot .st-nums { align-self: start; justify-self: end; margin: calc(min(460px, 100%) * .9818 - 72px) -34px 0 0; }
  .story--ot .num--tag { --r: 2.5deg; }
  .story--ot .st-quote { margin-top: 30px; }

  .yours-art { width: 360px; }
  .yours { display: grid; grid-template-columns: auto 364px; justify-content: center; column-gap: clamp(48px, 5vw, 84px); }
  .yours > :not(.sven-note) { grid-column: 1; }
  .yours .tag-btn { justify-self: center; }
  .yours .sven-note { grid-column: 2; grid-row: 1 / span 4; align-self: end; width: 364px; margin: 0 0 -8px; --tilt: 1.6deg; }
}

/* small desktops: Phil's quote takes the width, his video and its question sit under it */
@media (min-width: 960px) and (max-width: 1199px) {
  .story--ns {
    grid-template-areas: "words art" "nums nums" "quote quote" "video video" "links links";
    grid-template-rows: auto;
  }
  .story--ns .st-video { max-width: 744px; margin-top: 28px; }
}

/* ---------------------------------------------------------------- motion (stories.js adds .st-motion)
   The quotes write themselves: each word swept in from the left under a soft edge (a mask sliding across
   it), so the letters stay crisp; the text is all in the page from the start. */
.st-motion .st-quote blockquote .w {
  display: inline-block; padding: 0 .1em; margin: 0 -.1em;
  -webkit-mask: linear-gradient(90deg, #000 38%, rgba(0, 0, 0, .5) 46%, transparent 56%) 100% 0 / 320% 100% no-repeat;
  mask: linear-gradient(90deg, #000 38%, rgba(0, 0, 0, .5) 46%, transparent 56%) 100% 0 / 320% 100% no-repeat;
}
.st-motion .st-quote.is-writing blockquote .w { animation: st-write var(--wd, .3s) cubic-bezier(.3, .4, .3, 1) var(--d, 0s) both; }
.st-motion .st-quote.is-written blockquote .w { -webkit-mask: none; mask: none; animation: none; }
@keyframes st-write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
/* the brush stroke goes on once the words are written */
.st-motion .st-quote mark { background-size: 0% .8em; transition: background-size .75s cubic-bezier(.45, .1, .3, 1) .1s; }
.st-motion .st-quote.is-written mark { background-size: 100% .8em; }
/* and the big quote mark lands first */
.st-motion .st-quote blockquote::before { opacity: 0; translate: 0 10px; transition: opacity .4s ease, translate .6s cubic-bezier(.2, .9, .25, 1.2); }
.st-motion .st-quote.is-writing blockquote::before, .st-motion .st-quote.is-written blockquote::before { opacity: 1; translate: 0 0; }
@media (min-width: 960px) {
  .st-motion .story--co .st-quote blockquote::before { translate: -50% 10px; }
  .st-motion .story--co .st-quote.is-writing blockquote::before, .st-motion .story--co .st-quote.is-written blockquote::before { translate: -50% 0; }
}

/* the numbers pop onto their cards: the card settles in, then its figure lands with a little bounce */
.st-motion .num { opacity: 0; translate: 0 10px; }
.st-motion .num b { opacity: 0; scale: 1.45; }
.st-motion .num > span { opacity: 0; }
.st-motion .num.is-in { opacity: 1; translate: 0 0; transition: opacity .35s ease var(--d, 0s), translate .5s cubic-bezier(.2, .8, .3, 1) var(--d, 0s); }
.st-motion .num.is-in b { animation: st-pop .6s cubic-bezier(.2, .9, .25, 1.15) calc(var(--d, 0s) + .16s) both; }
.st-motion .num.is-in > span { opacity: 1; transition: opacity .45s ease calc(var(--d, 0s) + .42s); }
@keyframes st-pop {
  0% { opacity: 0; scale: 1.45; }
  55% { opacity: 1; scale: .955; }
  100% { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vid-play { transition: none; }
  a.vid:hover .vid-play, a.vid:focus-visible .vid-play { scale: 1; }
}

/* printed, everything shows finished */
@media print {
  .st-motion .num, .st-motion .num b, .st-motion .num > span { opacity: 1 !important; scale: 1 !important; translate: none !important; animation: none !important; }
  .st-motion .st-quote blockquote .w { -webkit-mask: none !important; mask: none !important; animation: none !important; }
  .st-motion .st-quote mark { background-size: 100% .8em !important; }
  .st-motion .st-quote blockquote::before { opacity: 1 !important; }
  .story--ns, .story--co, .story--ot, .yours, .st-video, .stories-page .site-foot { content-visibility: visible; }
}