/* The philosopher films: one player for the Christmas room and the open-air cinema.
   Everything inside the picture is sized in cqw (hundredths of the picture's width), so the
   cards pinned to the door, the slides and the title cards scale with whatever size it's shown at. */
.film{--pink:#d11f78;--blue:#1d67ac;--ink:#1c1f1b;--paper:#f5f6f0;--card:#fbf7ec;
  container-type:inline-size;container-name:film;position:relative;width:100%;color:var(--ink);
  font-family:'Barlow',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.film:focus{outline:none}   /* focused so Space and the arrow keys work; it isn't a control itself */
.fm-box{position:relative;width:100%;background:#000;overflow:hidden;user-select:none;-webkit-user-select:none}
.fm-stage{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;overflow:hidden;background:#15130f}
.fm-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#15130f}
.fm-box:fullscreen{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}
.fm-box:fullscreen .fm-stage{width:min(100vw,calc(100vh * 16 / 9))}
.fm-box:-webkit-full-screen{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}
.fm-box:-webkit-full-screen .fm-stage{width:min(100vw,calc(100vh * 16 / 9))}

/* ---- the door behind me: cards get pinned to it ---- */
.fm-door{position:absolute;left:66.5%;top:5%;width:25%;height:84%;pointer-events:none}
.fo{position:absolute;left:50%;top:7%;width:78%;margin:0 0 0 -39%;opacity:0;
  transform:translateY(-2.6cqw) rotate(var(--r,-2deg)) scale(.97);transform-origin:50% 0;
  transition:opacity .55s ease,transform .75s cubic-bezier(.2,1.25,.4,1);
  filter:drop-shadow(0 .5cqw .7cqw rgba(20,14,6,.38))}
.fo.on{opacity:1;transform:translateY(0) rotate(var(--r,-2deg)) scale(1)}
.fo .pin{position:absolute;left:50%;top:-.55cqw;width:1.5cqw;height:1.5cqw;margin-left:-.75cqw;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#ff7ab4,var(--pink) 55%,#7c0d45);box-shadow:0 .25cqw .3cqw rgba(0,0,0,.45)}
.fo .later{opacity:0;transition:opacity .5s ease,clip-path 1s ease;clip-path:inset(0 100% 0 0)}
.fo .later.on{opacity:1;clip-path:inset(0 0 0 0)}
.fo-portrait{background:#fff;padding:1cqw 1cqw 0}
.fo-portrait img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%}
.fo-portrait figcaption{padding:.6cqw .2cqw .9cqw;text-align:center}
.fo-portrait b{display:block;font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.45cqw;line-height:1.1}
.fo-portrait small{display:block;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:1cqw;letter-spacing:.12em;color:#6a6f68}
.fo-portrait i{display:block;margin-top:.2cqw;font-family:'Caveat',cursive;font-style:normal;font-weight:600;font-size:1.45cqw;color:var(--pink)}
.fo-word{background:var(--card);padding:1.5cqw 1.3cqw 1.3cqw;text-align:center;border-top:.35cqw solid var(--blue)}
.fo-word small{display:block;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.95cqw;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.fo-word b{display:block;margin:.35cqw 0 .2cqw;font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;font-size:3.5cqw;line-height:1;letter-spacing:.02em}
.fo-word i{display:block;font-family:'Caveat',cursive;font-style:normal;font-weight:600;font-size:1.75cqw;line-height:1.1;color:var(--pink);text-wrap:balance}
.fo-book{width:62%;margin-left:-31%;--r:3deg}
.fo-book img{display:block;width:100%;height:auto;border:.15cqw solid rgba(0,0,0,.35)}
.fo-book .tape,.fo-post .tape{position:absolute;z-index:2;left:30%;top:-1cqw;width:40%;height:2cqw;background:rgba(240,232,205,.82);transform:rotate(-4deg)}
.fo-book .tag,.fo-post .tag{position:absolute;right:-26%;bottom:16%;padding:.5cqw .9cqw;background:#fff;transform:rotate(-7deg);
  font-family:'Caveat',cursive;font-style:normal;font-weight:600;font-size:1.65cqw;line-height:1;color:var(--pink);white-space:nowrap;box-shadow:0 .3cqw .5cqw rgba(0,0,0,.3)}
.fo-quote{background:var(--card);padding:1.8cqw 1.5cqw 1.4cqw 2.4cqw;--r:1.5deg;
  background-image:linear-gradient(90deg,transparent 1.5cqw,rgba(209,31,120,.45) 1.5cqw,rgba(209,31,120,.45) calc(1.5cqw + 1px),transparent calc(1.5cqw + 1px)),
    repeating-linear-gradient(180deg,transparent 0,transparent 2.3cqw,rgba(79,150,210,.28) 2.3cqw,rgba(79,150,210,.28) calc(2.3cqw + 1px))}
.fo-quote p{margin:0;font-style:italic;font-size:1.5cqw;line-height:1.5}
.fo-quote cite{display:block;margin-top:.8cqw;font-style:normal;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.9cqw;letter-spacing:.14em;text-transform:uppercase;color:#6a6f68}
.fo-ask{background:#fff;padding:1.6cqw 1.4cqw;--r:-1.5deg}
.fo-ask small{display:block;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.9cqw;letter-spacing:.2em;text-transform:uppercase;color:#6a6f68}
.fo-ask p{margin:.4cqw 0 0;font-family:'Caveat',cursive;font-weight:600;font-size:2.25cqw;line-height:1.1;color:var(--pink)}
.fo-draw{background:var(--card);padding:1.2cqw 1cqw .8cqw;text-align:center;--r:2deg}
.fo-draw svg{display:block;width:100%;height:auto;overflow:visible}
.fo-draw i{display:block;margin-top:.2cqw;font-family:'Caveat',cursive;font-style:normal;font-weight:600;font-size:1.7cqw;line-height:1.1;color:var(--pink)}
.fo-draw .lit{opacity:0;transition:opacity 1.2s ease}
.fo-draw.on .lit{opacity:1}

/* the same words under the picture on a phone, where the door is too small to read from */
.fm-note{display:none;min-height:3.3em;padding:.75rem .2rem .2rem;font-size:.95rem;line-height:1.45;color:inherit}
.fm-note p{margin:0;opacity:0;transition:opacity .5s}
.fm-note p.on{opacity:1}
.fm-note em{font-style:italic}
.fm-note b{font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--pink);margin-right:.4em}
@container (max-width:620px){          /* the picture's own width (the stage is the container), so full screen counts */
  .fo-quote,.fo-ask,.fo-word i,.fo-portrait i,.fo-draw i,.fo-book .tag{display:none}
  .fo .pin{width:2.2cqw;height:2.2cqw;margin-left:-1.1cqw}
  .fo-word b{font-size:4.6cqw}
}
.fm-note.narrow{display:block}

/* ---- the controls ---- */
.fm-bar{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem .55rem;
  background:linear-gradient(180deg,transparent,rgba(10,9,7,.78));color:#fff;opacity:0;transition:opacity .35s}
.film.paused .fm-bar,.film.ui .fm-bar,.film .fm-bar:focus-within{opacity:1}   /* not just because the player has focus: that would leave the controls over the picture */
.film.phase-intro .fm-bar,.film.phase-outro .fm-bar,.film.phase-ready .fm-bar,.film.phase-done .fm-bar{opacity:0;pointer-events:none}
.fm-bar button{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.fm-bar button:hover{background:rgba(255,255,255,.14)}
.fm-bar button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.fm-bar svg{width:1.1rem;height:1.1rem;fill:currentColor}
.fm-play .pa,.film.paused .fm-play .pl{display:block}.fm-play .pl,.film.paused .fm-play .pa{display:none}
.fm-seek{flex:1;min-width:0;height:1.4rem;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--p:0%}
.fm-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--pink) var(--p),rgba(255,255,255,.35) var(--p))}
.fm-seek::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--pink) var(--p),rgba(255,255,255,.35) var(--p))}
.fm-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:#fff;border:0}
.fm-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}
.fm-seek:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fm-time{flex:none;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;opacity:.9}
.fm-skip{position:absolute;right:2.2cqw;bottom:2.2cqw;z-index:22;display:none;padding:.4rem .8rem;border:1px solid rgba(28,31,27,.5);border-radius:99px;background:rgba(255,255,255,.75);
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.08em;color:var(--ink);cursor:pointer}
.film.phase-intro .fm-skip{display:block}
.fm-big{position:absolute;inset:0;z-index:18;display:none;align-items:center;justify-content:center;border:0;padding:0;background:none;cursor:pointer;color:#fff}
.fm-big .bi{display:grid;place-items:center;width:10cqw;height:10cqw;min-width:56px;min-height:56px;border-radius:50%;background:var(--pink);color:#fff;
  box-shadow:0 .6cqw 2cqw rgba(0,0,0,.35);transition:transform .25s}
.fm-big svg{width:40%;height:40%;fill:currentColor;margin-left:8%}
.fm-big:hover .bi,.fm-big:focus-visible .bi{transform:scale(1.06)}
.fm-big:focus-visible{outline:none}
.fm-big:focus-visible .bi{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pink)}
.film.phase-ready .fm-big,.film.phase-done .fm-big{display:flex}
.fm-big em{position:absolute;left:0;right:0;top:calc(50% + max(34px,6cqw));font-style:normal;text-align:center;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;
  font-size:max(.8rem,1.3cqw);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.65)}
/* in the cinema the title card's already on the screen, so the button's a pill under the words, out of their way */
.film.fm-cinema .fm-big{justify-content:flex-start;align-items:flex-end;padding:0 0 7.2cqw 7cqw}
.film.fm-cinema .fm-big .bi{display:inline-flex;align-items:center;gap:max(.45rem,.8cqw);width:auto;height:auto;min-width:0;min-height:44px;padding:0 max(1rem,2.1cqw) 0 max(.8rem,1.6cqw);border-radius:99px;
  box-shadow:0 .3cqw 0 rgba(28,31,27,.25)}
.film.fm-cinema .fm-big svg{width:max(.85rem,1.6cqw);height:max(.85rem,1.6cqw);margin:0}
.film.fm-cinema .fm-big em{position:static;font-size:max(.78rem,1.25cqw);letter-spacing:.16em;text-shadow:none;color:#fff}
.film.fm-cinema.phase-done .fm-big{display:none}
.fm-again{position:absolute;right:3cqw;top:3cqw;z-index:22;display:none;align-items:center;gap:.45rem;min-height:40px;padding:0 1rem 0 .8rem;border:0;border-radius:99px;background:var(--pink);color:#fff;cursor:pointer;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.fm-again svg{width:.85rem;height:.85rem;fill:currentColor}
/* in the cinema "Watch again" sits under the screen (assets/cinema.css), so the end card stays clean */
.fm-again:focus-visible,.fm-skip:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---- cinema: title card, slides, end card (map paper, like the rest of Sheet 287) ---- */
.fm-card,.fm-slide{position:absolute;inset:0;z-index:12;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s;
  background-color:var(--paper);background-image:linear-gradient(rgba(79,150,210,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(79,150,210,.2) 1px,transparent 1px);
  background-size:5.2cqw 5.2cqw;color:var(--ink);overflow:hidden}
.fm-card.on,.fm-slide.on{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s}
.fm-card::after,.fm-slide::after{content:"";position:absolute;inset:1.6cqw;border:.16cqw solid var(--ink);pointer-events:none}
.fm-card [data-at],.fm-slide [data-at]{opacity:0;transform:translateY(1cqw);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.9,.3,1)}
.fm-card [data-at].on,.fm-slide [data-at].on{opacity:1;transform:none}
.fm-card svg [data-at],.fm-slide svg [data-at]{transform:none}
.fm-card .wipe[data-at],.fm-slide .wipe[data-at]{transform:none;clip-path:inset(0 100% 0 0);transition:opacity .4s,clip-path 1.2s ease}
.fm-card .wipe[data-at].on,.fm-slide .wipe[data-at].on{clip-path:inset(0 0 0 0)}
.fm-kick{display:flex;align-items:center;gap:1cqw;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:1.25cqw;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.fm-kick::before{content:"";width:1.9cqw;height:1.9cqw;border-radius:.3cqw;background:var(--blue)}
.fm-h{margin:1.2cqw 0 0;font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;text-transform:uppercase;font-size:6.6cqw;line-height:.92;letter-spacing:.005em}
.fm-h span{color:var(--pink)}
.fm-sub{margin:1.6cqw 0 0;font-size:2cqw;line-height:1.35;max-width:34cqw;color:#454a43}
.fm-by{margin:2.4cqw 0 0;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:1.25cqw;letter-spacing:.18em;text-transform:uppercase;color:#6a6f68}
.fm-title .fm-txt{position:absolute;left:7cqw;top:50%;transform:translateY(-50%);width:50cqw}
.fm-title .fm-art{position:absolute;right:6cqw;top:50%;width:34cqw;transform:translateY(-50%)}
.fm-art svg{display:block;width:100%;height:auto;overflow:visible}
.fm-end .fm-txt{position:absolute;left:7cqw;top:50%;transform:translateY(-50%);width:53cqw}
.fm-end .fm-art{position:absolute;right:6cqw;top:50%;width:31cqw;transform:translateY(-50%)}
.fm-end .fm-h{font-size:5.1cqw;margin-top:1.3cqw}
.fm-take{margin:1.9cqw 0 0;font-family:'Caveat',cursive;font-weight:600;font-size:2.7cqw;line-height:1.1;color:var(--pink)}
.fm-end .read{margin:1.7cqw 0 0;max-width:46cqw;font-size:1.5cqw;line-height:1.4;color:#454a43}
.fm-end .read em{font-style:italic}
.fm-sig{display:flex;align-items:center;gap:1cqw;margin-top:2.6cqw;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:1.25cqw;letter-spacing:.16em}
.fm-sig .mk{width:2.4cqw;height:auto}
.fm-sig .mk .mk-ring{fill:var(--ink)}.fm-sig .mk .mk-dot{fill:var(--pink)}
.fm-slide .fm-txt{position:absolute;left:6cqw;top:6.5cqw;width:60cqw}
.fm-slide.side .fm-txt{width:38cqw}
.fm-slide .fm-h{font-size:5.4cqw}
.fm-slide .fm-line{margin:1.8cqw 0 0;font-size:2.15cqw;line-height:1.35;color:#454a43}
.fm-slide .fm-art{position:absolute;left:4cqw;right:4cqw;bottom:4.5cqw;top:24cqw}
.fm-slide .fm-art.side{left:46cqw;right:4cqw;top:6cqw;bottom:6cqw}
.fm-art text{font-family:'Caveat',cursive;font-weight:600}
.fm-art .cap{font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* on a phone the small print on the cards is too small to read, so it goes, and the main lines get bigger */
.film.narrow .fm-card .fm-kick,.film.narrow .fm-sub,.film.narrow .fm-by,.film.narrow .fm-slide .fm-kick{display:none}
.film.narrow .fm-h{font-size:8cqw}
.film.narrow .fm-slide .fm-h{font-size:7cqw}
.film.narrow .fm-slide .fm-line{font-size:3.4cqw}
.film.narrow .fm-slide:not(.side):not(.look):not(.quote) .fm-txt{width:88cqw}   /* headings on one line, so the line under them clears the drawing */
.film.narrow .fm-slide:not(.side):not(.look):not(.quote) .fm-art{top:27.5cqw}
.film.narrow .fm-end .fm-art{display:none}
.film.narrow .fm-end .fm-txt{left:6cqw;width:84cqw}
.film.narrow .fm-end .fm-kick{display:flex;font-size:2.3cqw}
.film.narrow .fm-end .fm-kick::before{width:2.6cqw;height:2.6cqw}
.film.narrow .fm-end .fm-h{font-size:6.6cqw}
.film.narrow .fm-take{font-size:4.4cqw}
.film.narrow .fm-end .read{max-width:none;font-size:3cqw}
.film.narrow .fm-sig{font-size:2.6cqw}.film.narrow .fm-sig .mk{width:4.6cqw}
.film.narrow.fm-cinema .fm-big{padding:0 0 6cqw 6cqw}

/* the Gadamer cards: a credit on a photograph, a postcard, a till receipt, a departures board */
.fo-portrait .credit{display:block;margin-top:.25cqw;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:500;font-size:.66cqw;letter-spacing:.04em;color:#8b8f88}
.fo-post{width:100%;margin-left:-50%;background:#fff;padding:.6cqw .6cqw .5cqw;--r:-2.5deg}
.fo-post img{display:block;width:100%;height:auto}
.fo-post figcaption{padding:.45cqw .1cqw .1cqw;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.78cqw;letter-spacing:.06em;line-height:1.3;color:#6a6f68}
.fo-post figcaption em{font-style:italic}
.fo-post .tag{right:6%;bottom:-2.6cqw;transform:rotate(-4deg)}
.fo-receipt{width:70%;margin-left:-35%;background:#fffefa;padding:1.5cqw 1.3cqw 1.2cqw;--r:2deg;font-family:ui-monospace,Menlo,'Courier New',monospace;font-size:1.02cqw;line-height:1.6;color:#2a2d29}
.fo-receipt::after{content:"";position:absolute;left:0;right:0;top:100%;height:.8cqw;
  background:linear-gradient(135deg,#fffefa 50%,transparent 50%) 0 0/1.3cqw 100%,linear-gradient(225deg,#fffefa 50%,transparent 50%) 0 0/1.3cqw 100%}
.fo-receipt .rh{display:block;text-align:center;font-weight:700;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px dashed #9a9e97;padding-bottom:.4cqw;margin-bottom:.4cqw}
.fo-receipt ul{list-style:none;margin:0;padding:0}
.fo-receipt li,.fo-receipt .tot{display:flex;justify-content:space-between;gap:.6cqw}
.fo-receipt .tot{margin:.5cqw 0 0;padding-top:.4cqw;border-top:1px dashed #9a9e97;font-weight:700;text-transform:uppercase}
.fo-receipt .stamp{position:absolute;z-index:2;right:-5%;bottom:-.9cqw;padding:.3cqw .7cqw;border:.25cqw solid var(--pink);border-radius:.4cqw;color:var(--pink);
  font-family:'Barlow Condensed','Barlow',sans-serif;font-style:normal;font-weight:700;font-size:1.6cqw;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:rotate(-13deg) scale(1.6);transition:opacity .2s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.fo-receipt .stamp.on{opacity:.92;transform:rotate(-13deg) scale(1)}
.fo-board{width:86%;margin-left:-43%;background:#1f2421;padding:1cqw 1.1cqw 1.1cqw;--r:-1deg;border-radius:.4cqw;color:#ffcf3a;
  font-family:'Barlow Condensed','Barlow',sans-serif;text-transform:uppercase}
.fo-board small{display:block;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:.8cqw;letter-spacing:.24em;color:#c9cbc4}
.fo-board .row{position:relative;display:flex;justify-content:space-between;gap:.8cqw;margin-top:.4cqw;padding-top:.4cqw;border-top:1px solid rgba(255,255,255,.14);font-weight:700;font-size:1.75cqw;line-height:1.15;letter-spacing:.03em}
.fo-board .flap{position:absolute;left:0;right:0;bottom:0;top:.4cqw;background:#1f2421;color:#ff8f3a;opacity:0;transform:rotateX(90deg);transform-origin:50% 0;
  transition:transform .4s cubic-bezier(.3,1.5,.5,1),opacity .1s}
.fo-board .flap.on{opacity:1;transform:none}
/* drawings inside door cards: their parts come in on their own times too */
.fo svg [data-at]{opacity:0;transition:opacity .5s ease}
.fo svg [data-at].on{opacity:1}
.fo svg .wipe[data-at]{opacity:1;clip-path:inset(0 100% 0 0);transition:clip-path .7s ease}
.fo svg .wipe[data-at].on{clip-path:inset(0 0 0 0)}
.fo svg text{font-family:'Caveat',cursive;font-weight:600}
.fm-art .led,.fo svg .led{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;letter-spacing:.04em}
.fo svg .cap{font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;letter-spacing:.18em}
.fm-art .halo{paint-order:stroke;stroke:#fff;stroke-width:9px;stroke-linejoin:round}
.fm-slide .fm-art .halo{stroke:var(--paper)}
.fm-slide .look .halo,.fm-slide.look .halo{stroke:#fff}
/* things that drop into place, and a board that flips */
.fm-card svg .drop[data-at],.fm-slide svg .drop[data-at]{transform:translateY(-130px);transition:opacity .2s ease,transform .6s cubic-bezier(.5,0,.6,1.3)}
.fm-card svg .drop[data-at].on,.fm-slide svg .drop[data-at].on{transform:none}
.fm-slide svg .flip[data-at]{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:opacity .1s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.fm-slide svg .flip[data-at].on{transform:none}
/* a slide with a painting to look into: words on the left, the painting filling the rest */
.fm-slide.look .fm-txt{left:5.4cqw;top:7cqw;width:30cqw}
.fm-slide.look .fm-h{font-size:5cqw}
.fm-slide.look .fm-line{font-size:1.9cqw;line-height:1.4}
.fm-slide.look .fm-line em{font-style:italic}
.fm-cap{margin:1.8cqw 0 0;font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:600;font-size:1.05cqw;letter-spacing:.06em;line-height:1.4;color:#6a6f68}
.fm-cap em{font-style:italic}
.fm-slide.look .fm-art{left:37.5cqw;right:3.4cqw;top:3.4cqw;bottom:3.4cqw;display:flex;align-items:center}
@container (max-width:620px){
  .fo-post .tag,.fo-post figcaption,.fo-portrait .credit,.fo-receipt .stamp{display:none}
}
.film.narrow .fm-slide.look .fm-txt{left:5cqw;top:6cqw;width:31cqw}
.film.narrow .fm-slide.look .fm-h{font-size:6.2cqw}
.film.narrow .fm-slide.look .fm-line{font-size:2.9cqw}
.film.narrow .fm-cap{display:none}

.fo-svg{width:92%;margin-left:-46%;background:none;padding:0}
.fo-svg svg{display:block;width:100%;height:auto;overflow:visible}
.fo-svg i{display:table;margin:.7cqw auto 0;padding:.35cqw .8cqw;background:#fff;transform:rotate(-3deg);box-shadow:0 .3cqw .5cqw rgba(0,0,0,.25);font-family:'Caveat',cursive;font-style:normal;font-weight:600;font-size:1.6cqw;line-height:1.1;color:var(--pink)}
/* stickers and cards slapped on, and wipes that take their time */
.fm-card svg .pop[data-at],.fm-slide svg .pop[data-at],.fo svg .pop[data-at]{transform-box:fill-box;transform-origin:50% 50%;transform:scale(1.3);transition:opacity .2s ease,transform .5s cubic-bezier(.3,1.5,.5,1)}
.fm-card svg .pop[data-at].on,.fm-slide svg .pop[data-at].on,.fo svg .pop[data-at].on{transform:none}
.fm-card svg .wipe.slow[data-at],.fm-slide svg .wipe.slow[data-at],.fo svg .wipe.slow[data-at]{transition:opacity .4s,clip-path 2.4s ease-in-out}
/* a slide with a long quote beside a drawing */
.fm-slide.quote .fm-txt{left:6cqw;top:6.5cqw;width:47cqw}
.fm-slide.quote .fm-h{font-size:4.6cqw}
.fm-slide.quote .fm-line{font-size:2.4cqw;line-height:1.45}
.fm-slide.quote .fm-line em{font-style:italic}
.fm-slide.quote .fm-art{left:56cqw;right:4cqw;top:3.6cqw;bottom:3.6cqw;display:flex;align-items:center;justify-content:center}
.fm-slide.quote .fm-art svg{width:auto;height:100%;max-width:100%}
.film.narrow .fm-slide.quote .fm-txt{left:5cqw;top:5.5cqw;width:52cqw}
.film.narrow .fm-slide.quote .fm-h{font-size:5.2cqw}
.film.narrow .fm-slide.quote .fm-line{font-size:2.7cqw;line-height:1.38}
.film.narrow .fm-slide.quote .fm-art{left:59cqw}
@container (max-width:620px){ .fo-svg i{display:none} }

/* a fire that flickers and butterflies' wings (wall-clock animations: they only decorate) */
.fm-art .flick,.fo svg .flick{transform-box:fill-box;transform-origin:50% 100%;animation:fmFlick 1.1s ease-in-out infinite alternate}
.fm-art .flick.f2,.fo svg .flick.f2{animation-duration:.8s;animation-delay:-.3s}
.fm-art .flick.f3,.fo svg .flick.f3{animation-duration:.95s;animation-delay:-.6s}
@keyframes fmFlick{0%{transform:scale(1,1)}40%{transform:scale(.92,1.08) skewX(-3deg)}100%{transform:scale(1.04,.9) skewX(3deg)}}
.fm-art .flap,.fo svg .flap{transform-box:fill-box;transform-origin:50% 100%;animation:fmFlap .32s ease-in-out infinite alternate}
@keyframes fmFlap{to{transform:scaleX(.35)}}

@media (prefers-reduced-motion:reduce){
  .fo,.fm-card [data-at],.fm-slide [data-at]{transition:opacity .4s ease;transform:rotate(var(--r,-2deg))}
  .fm-card [data-at],.fm-slide [data-at],.fm-slide svg .drop[data-at],.fm-slide svg .flip[data-at],.fo-receipt .stamp,.fo-board .flap,.fm-card svg .pop[data-at],.fm-slide svg .pop[data-at],.fo svg .pop[data-at]{transform:none}
}

/* full screen inside the page (iPhones, which can only make the bare video full screen) */
html.fm-maxed{overflow:hidden}
.film.fm-max .fm-box{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.film.fm-max .fm-stage{width:min(100%,calc((100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9))}
@supports (height:100dvh){.film.fm-max .fm-stage{width:min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9))}}
.film.fm-max .fm-box .fm-note{width:min(100%,36rem);margin:0;padding:.9rem 1.1rem;border:0;background:none;color:#f3eee3;text-align:center}
.film.fm-max .fm-box .fm-note b{color:#ffcf7a}