/* The reel (phones, switched on by film-reel.js). Flat, Archivo, sentence case, words for buttons; no springs: the ease decelerates and stops. */
html.reel .ft, html.reel .ft__in { height: 100%; height: 100dvh; }
html.reel .ft__in { padding-bottom: env(safe-area-inset-bottom); }
/* the order on a phone: bar, progress, video, our words, then the actions, the hint, the next-play strip and Share, all in the thumb's reach. The video sits above the words (z-index) so
   words that follow a finger upward slide BEHIND the player and never over it. */
html.reel .ft__frame { position: relative; z-index: 2; background: #fff; }
html.reel .ft__body { position: relative; z-index: 1; }
/* the poster sits behind the player and shows only while the player is faded out, waiting for the new video to play */
.rl__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }          /* the picture is 1200 by 630 on white: contain trims nothing */
html.reel .ft__slot { z-index: 1; transition: opacity 180ms ease-out; }
html.reel .ft__frame.rl__wait .ft__slot { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { html.reel .ft__slot { transition: none; } }
html.reel .rl__act, html.reel .rl__hint, html.reel .rl__peek { order: 4; }
html.reel .ft__foot { order: 5; }
html.reel .ft__body, html.reel .rl__act, html.reel .rl__hint, html.reel .ft__foot, html.reel .ft__foot * { touch-action: none; }
html.reel .ft__body { overflow: hidden; touch-action: none; overscroll-behavior: contain; will-change: transform; flex: 1 1 auto; padding-top: 14px; }
html.reel .ft__body .film__h { font-size: 27px; line-height: 1.04; }
html.reel .ft__body .fo__room a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.reel .ft__body .fo__links, html.reel .ft__body .fo__more, html.reel .ft__hint { display: none; }          /* the links live in the More sheet on a phone */
html.reel #ft-prev, html.reel #ft-next { display: none; }
html.reel .ft__foot { display: block; padding-top: 0; }
html.reel #ft-share { width: 100%; }
.rl__act { flex: none; display: flex; flex-wrap: wrap; gap: 0 18px; padding: 0 14px; }
.rl__act button { font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--ink, #222); border-radius: 0; color: var(--ink, #222); cursor: pointer; }
.rl__act button[aria-pressed="true"] { color: #8a6200; border-bottom-color: #8a6200; }
.rl__hint { flex: none; margin: 0; padding: 0 14px 6px; font-size: 13px; color: var(--ink-2, #5b5b5b); }
.rl__peek { flex: none; display: grid; gap: 1px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left; font: inherit; background: none; border: 0; border-top: 1px solid var(--rule, #d7d7d4); border-radius: 0; color: var(--ink, #222); touch-action: none; cursor: pointer; }
.rl__peek b { font-size: 13px; font-weight: 700; color: var(--ink-2, #5b5b5b); }
.rl__peek span { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl__recap { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--rule, #d7d7d4); }
.rl__n { display: block; font-family: var(--font-head, inherit); font-weight: 800; font-size: 64px; line-height: .9; color: var(--ink, #222); }
.rl__nl { display: block; margin: 2px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-2, #5b5b5b); }
.rl__recap p { margin: 0 0 4px; font-size: 16px; }
.rl__up { color: #3a7a4b; font-weight: 800; } .rl__dn { color: #bf3b31; font-weight: 800; }
.rl__recap button { font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--ink, #222); border-radius: 0; color: var(--ink, #222); cursor: pointer; }
.rl__scrim { position: absolute; inset: 0; z-index: 4; background: rgba(34, 34, 34, .55); }
.rl__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 70%; overflow: auto; background: var(--page, #fff); border-top: 1px solid var(--ink, #222); padding: 0 14px calc(14px + env(safe-area-inset-bottom)); animation: rl-sheet 220ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rl-sheet { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
.rl__sh { display: flex; justify-content: space-between; align-items: center; min-height: 52px; touch-action: none; }
.rl__sh b { font-size: 16px; font-weight: 800; }
.rl__sh button { font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--ink, #222); border-radius: 0; color: var(--ink, #222); cursor: pointer; }
.rl__sheet .fo__go { display: block; margin: 0; }
.rl__sheet .fo__go a, .rl__sheet .fo__go .fo__story, .rl__sheet .rl__yt { display: flex; align-items: center; min-height: 48px; width: 100%; padding: 0; border: 0; border-top: 1px solid var(--rule, #d7d7d4); background: none; text-align: left; font-family: inherit; font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--ink, #222); text-decoration: none; }
.rl__sheet .fo__likes { display: block; border-top: 1px solid var(--rule, #d7d7d4); padding-top: 8px; }
.rl__sheet .fo__likes .fo__lbl { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2, #5b5b5b); }
.rl__sheet .fo__likes a { border-top: 0; }
.rl__cred { margin: 6px 0 0; font-size: 13px; color: var(--ink-2, #5b5b5b); }
.rl__ghost { z-index: 3; background: var(--page, #fff); overflow: hidden; }
.rl__in-up { animation: rl-up 220ms cubic-bezier(.2, .8, .2, 1) both; }
.rl__in-down { animation: rl-down 220ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rl-up { from { transform: translate3d(0, 28px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rl-down { from { transform: translate3d(0, -28px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rl__in-up, .rl__in-down { animation: none; } }