/* AEO for medspas (Fable 3.1): the shortlist strip on the head's sheets, ten ruled lines with a perforation after line
   five; the lower half tears off in held frames (page.js [data-tear]). Words printed on it are the approved callout's. */
.ms-head .dc-head__grid { align-items: start; }
.ms-strip { position: relative; justify-self: center; width: min(100%, calc(272 * var(--u))); margin: calc(-6 * var(--u)) 0 calc(-14 * var(--u)); transform: rotate(-2.2deg); z-index: 3; }
.ms-strip__top, .ms-strip__low { position: relative; background: #FBF8F1 var(--sheet-a); background-size: 600px; }
.ms-strip__top { padding: calc(13 * var(--u)) calc(18 * var(--u)) calc(5 * var(--u)); box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .16); }
.ms-strip__low { padding: calc(6 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .16), 0 18px 32px -16px rgb(13 22 25 / .45);
  /* the perforation's teeth along its top edge */
  clip-path: polygon(0 3px, 2% 0, 4% 3px, 6% 0, 8% 3px, 10% 0, 12% 3px, 14% 0, 16% 3px, 18% 0, 20% 3px, 22% 0, 24% 3px, 26% 0, 28% 3px, 30% 0, 32% 3px, 34% 0, 36% 3px, 38% 0, 40% 3px, 42% 0, 44% 3px, 46% 0, 48% 3px, 50% 0, 52% 3px, 54% 0, 56% 3px, 58% 0, 60% 3px, 62% 0, 64% 3px, 66% 0, 68% 3px, 70% 0, 72% 3px, 74% 0, 76% 3px, 78% 0, 80% 3px, 82% 0, 84% 3px, 86% 0, 88% 3px, 90% 0, 92% 3px, 94% 0, 96% 3px, 98% 0, 100% 3px, 100% 100%, 0 100%);
  transition: transform .62s steps(8, end), opacity .62s steps(8, end); touch-action: none; cursor: grab; }
.ms-strip__top::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; border-bottom: 2px dotted rgb(23 29 31 / .38); }
.ms-strip__tape { margin-bottom: calc(10 * var(--u)); }
.ms-strip__title { font: 700 calc(17 * var(--u)) / 1.1 var(--display); color: var(--hd); letter-spacing: -.01em; max-width: 18ch; margin-bottom: calc(10 * var(--u)); text-wrap: balance; }
.ms-strip__lines { display: grid; padding: 0; list-style: none; }
.ms-strip__lines li { position: relative; height: calc(13.5 * var(--u)); border-bottom: 1px solid rgb(30 52 58 / .22); }
.ms-strip__lines li i { position: absolute; left: 0; bottom: 3px; font: normal 600 calc(11 * var(--u)) / 1 var(--read); color: var(--ink-red); }
.ms-strip__lines li.is-hl::before { content: ""; position: absolute; left: calc(22 * var(--u)); right: 18%; top: 3px; bottom: 3px; background: var(--hilite); transform: skewX(-8deg); }
/* the tab at the perforation's right end */
.ms-strip__tab { position: absolute; z-index: 2; right: calc(-14 * var(--u)); top: var(--perf, 50%); width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 0; border-radius: 2px;
  background: #234048 var(--deep-tex); background-size: 300px; color: var(--ivory); cursor: pointer; box-shadow: 0 2px 2px rgb(21 31 34 / .2); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); }
.ms-strip__tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.ms-strip__tab:focus-visible { outline: 2px solid var(--hd); outline-offset: 3px; }
.ms-note { right: calc(100% + 70px); top: calc(var(--perf, 50%) + 2.4em); }
/* a strip of tape holds the slip to the sheet */
.ms-strip::before { content: ""; position: absolute; z-index: 2; left: 38%; top: calc(-11 * var(--u)); width: calc(84 * var(--u)); height: calc(22 * var(--u)); background: rgb(193 213 219 / .62);
  transform: rotate(3deg); box-shadow: 0 1px 1px rgb(21 31 34 / .12); clip-path: polygon(2% 0, 98% 6%, 100% 92%, 0 100%); }
/* torn: the lower piece drops and goes, the top keeps a ragged foot */
.ms-strip.is-torn .ms-strip__low { transform: translateY(28px) rotate(4deg); opacity: 0; pointer-events: none; }
.ms-strip.is-torn .ms-strip__top::after { border-bottom-style: solid; border-bottom-color: transparent; }
.ms-strip.is-torn .ms-strip__top { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1px), 96% 100%, 91% calc(100% - 3px), 85% 100%, 79% calc(100% - 2px), 72% 100%, 66% calc(100% - 3px), 60% 100%, 53% calc(100% - 2px), 47% 100%, 40% calc(100% - 3px), 34% 100%, 27% calc(100% - 2px), 21% 100%, 14% calc(100% - 3px), 8% 100%, 3% calc(100% - 2px), 0 100%); }
.ms-strip.is-dragging .ms-strip__low { transition: none; cursor: grabbing; }
/* mid-page: the torn-off piece, lying beside the words it stands for */
.ms-torn { align-self: center; justify-items: center; }
.ms-torn__piece { width: min(100%, calc(250 * var(--u))); padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); background: #FBF8F1 var(--sheet-a); background-size: 600px; transform: rotate(-3deg);
  box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .16), 0 18px 32px -16px rgb(13 22 25 / .45);
  clip-path: polygon(0 3px, 4% 0, 8% 3px, 12% 0, 16% 3px, 20% 0, 24% 3px, 28% 0, 32% 3px, 36% 0, 40% 3px, 44% 0, 48% 3px, 52% 0, 56% 3px, 60% 0, 64% 3px, 68% 0, 72% 3px, 76% 0, 80% 3px, 84% 0, 88% 3px, 92% 0, 96% 3px, 100% 0, 100% 100%, 0 100%); }
.ms-checks { margin-top: .3em; }

@media (max-width: 1100px) {
  .ms-strip { justify-self: start; margin-top: calc(18 * var(--u)); }
}
@media (max-width: 760px) {
  .ms-strip { width: 100%; transform: rotate(-1deg); }
  .ms-strip__lines li { height: 24px; }
  .ms-strip__lines li i { font-size: .78rem; }
  .ms-strip__title { font-size: 1.35rem; }
  .ms-strip__tab { position: relative; right: auto; top: auto; width: 100%; height: 44px; margin: 8px 0 0; clip-path: none; }
  .ms-note { left: auto; right: 4px; top: -2.2em; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-strip__low { transition: none; }
}