/* The 10-frame film strip */

.filmstrip{background:var(--paper-2);border-bottom:1px solid rgba(20,23,15,.16);scroll-margin-top:64px;position:relative}
.gate{--tile:20px;--rail:17px;--fw:316px;--fh:204px;--gap:15px;--speed:58;position:relative}
.perf{height:var(--rail);background:var(--ink);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='26' height='22' fill='%23fff'/%3E%3Crect x='6.5' y='5.4' width='13' height='11.2' rx='2.6' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='26' height='22' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='26' height='22' fill='%23fff'/%3E%3Crect x='6.5' y='5.4' width='13' height='11.2' rx='2.6' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='26' height='22' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-size:var(--tile) 100%;mask-size:var(--tile) 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.edge{background:var(--ink);height:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px}
.mark{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,235,228,.4);white-space:nowrap}
.chaps{display:flex;gap:2px;overflow:hidden}
.chap{background:transparent;border:0;padding:4px 8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(237,235,228,.5);cursor:pointer;white-space:nowrap;transition:background .22s,color .22s}
.chap:hover{color:var(--paper)}
.chap[aria-current="true"]{background:var(--orange);color:#fff}
.chap:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.rctl{display:flex;gap:1px}
.rbtn{background:transparent;border:0;width:24px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;line-height:1;color:rgba(237,235,228,.5);cursor:pointer;transition:background .2s,color .2s}
.rbtn:hover{background:rgba(237,235,228,.14);color:var(--paper)}
.rbtn[aria-pressed="true"]{background:var(--orange);color:#fff}
.rbtn:focus-visible{outline:2px solid var(--signal);outline-offset:1px}

.gateway{overflow:hidden;background:var(--ink)}
.reel{display:flex;gap:var(--gap);will-change:transform}
.fr{flex:none;width:var(--fw);height:var(--fh);background:var(--paper);padding:15px 18px 16px;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.fr .no{position:absolute;right:9px;top:7px;font-family:var(--mono);font-size:7.5px;letter-spacing:.13em;color:rgba(20,23,15,.24)}
.fr .ch{font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.fr .bd{margin-top:auto}
.fr h3{font-weight:800;letter-spacing:-.03em;color:var(--green);line-height:1.03}
.fr p{color:#4E5748}

.fr-step .big{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--orange);margin-bottom:9px}
.fr-step h3{font-size:26px;margin-bottom:8px}
.fr-step p{font-size:11.5px;line-height:1.62}

.fr-logo .bd{margin:auto 0;display:flex;align-items:center;justify-content:center;flex:1}
.fr-logo img{display:block;width:auto;height:var(--h)}
.fr-logo .cap{font-family:var(--mono);font-size:7.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--sage);text-align:center}

.fr-read h3{font-size:15px;line-height:1.22;margin-bottom:8px}
.fr-read p{font-size:11.5px;line-height:1.58;margin-bottom:9px}
.fr-read a{color:var(--orange);text-decoration:none;border-bottom:1px solid var(--orange);padding-bottom:1px;white-space:nowrap}
.fr-read a:hover{color:var(--ink);border-color:var(--ink)}
.fr-read a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.fr-read .src{font-family:var(--mono);font-size:7.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--sage)}

.fs-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .gateway{overflow-x:auto;scroll-snap-type:x mandatory}
  .reel{transform:none !important}
  .fr{scroll-snap-align:start}
  .fr[data-dup]{display:none}
}