/* JSLALALAND SEOUL 2.2 — the cinema layer (see seoul-22.js). Decoration only; reduced motion turns it off. */
:root{--s22-ink:#140f0b;--s22-cream:#fff6e6;--s22-gold:#f2c230;--s22-maple:#c9302c;--s22-ease:cubic-bezier(.2,.75,.1,1)}

/* ---------- film grain (a tiny noise tile that jitters) ---------- */
.s22-grain{position:absolute;inset:-60%;pointer-events:none;z-index:6;opacity:.14;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
 animation:s22grain .8s steps(5) infinite}
.s22-grain.soft{opacity:.08;z-index:3}
@keyframes s22grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* ---------- 1. opening leader ---------- */
html.s22-intro-on,html.s22-intro-on body{overflow:hidden!important}
#s22Intro{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;color:#f6ead3;cursor:pointer;
 font-family:"Helvetica Neue",Helvetica,Arial,"Noto Sans TC",sans-serif;-webkit-user-select:none;user-select:none}
.s22i-bar{position:absolute;left:0;right:0;height:50.5%;background:#0c0907;z-index:1;transition:transform 1s cubic-bezier(.75,0,.2,1)}
.s22i-bar.t{top:0}.s22i-bar.b{bottom:0}
#s22Intro.s22i-out .s22i-bar.t{transform:translateY(-101%)}
#s22Intro.s22i-out .s22i-bar.b{transform:translateY(101%)}
#s22Intro.s22i-out{pointer-events:none}
.s22i-leader{position:relative;z-index:2;width:min(46vmin,330px);aspect-ratio:1;display:grid;place-items:center;transition:opacity .35s,transform .45s}
.s22i-leader::before,.s22i-leader::after{content:"";position:absolute;background:rgba(246,234,211,.55)}
.s22i-leader::before{left:-30%;right:-30%;top:50%;height:1px}
.s22i-leader::after{top:-30%;bottom:-30%;left:50%;width:1px}
.s22i-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(242,194,48,.55) 0deg,rgba(242,194,48,.08) 300deg,transparent 360deg);animation:s22sweep .48s linear infinite}
@keyframes s22sweep{to{transform:rotate(360deg)}}
.s22i-ring{position:absolute;inset:0;border:2px solid rgba(246,234,211,.75);border-radius:50%}
.s22i-ring.r2{inset:12%;border-width:1px;opacity:.6}
.s22i-n{position:relative;font:800 clamp(80px,22vmin,170px)/1 "Helvetica Neue",Arial,sans-serif;color:#fff6e6;text-shadow:0 0 30px rgba(242,194,48,.45)}
.s22i-title{position:absolute;z-index:2;text-align:center;opacity:0;pointer-events:none}
.s22i-pre{margin:0 0 14px;font:600 clamp(10px,1.4vw,13px)/1 ui-monospace,Menlo,monospace;letter-spacing:.42em;text-transform:uppercase;color:rgba(246,234,211,.75)}
.s22i-title h2{margin:0;font:800 clamp(64px,17vw,190px)/.9 "Helvetica Neue",Arial,sans-serif;letter-spacing:.6em;padding-left:.6em;
 background:linear-gradient(100deg,#fff6e6 10%,#f2c230 45%,#e8742a 70%,#fff6e6 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.s22i-date{margin:18px 0 0;font:600 clamp(10px,1.3vw,12px)/1.4 ui-monospace,Menlo,monospace;letter-spacing:.3em;color:rgba(246,234,211,.7)}
.s22i-skip{position:absolute;right:22px;bottom:20px;z-index:3;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.24em;color:rgba(246,234,211,.55)}
#s22Intro .s22-grain{z-index:2;opacity:.22}
#s22Intro.s22i-t .s22i-leader{opacity:0;transform:scale(1.35)}
#s22Intro.s22i-t .s22i-title{opacity:1;transition:opacity .5s}
#s22Intro.s22i-t .s22i-title h2{animation:s22track 1.5s var(--s22-ease) both}
@keyframes s22track{from{letter-spacing:.6em;padding-left:.6em;filter:blur(12px)}to{letter-spacing:.1em;padding-left:.1em;filter:none}}
#s22Intro.s22i-out .s22i-title,#s22Intro.s22i-out .s22i-skip,#s22Intro.s22i-out .s22-grain,#s22Intro.s22i-out .s22i-leader{opacity:0;transition:opacity .35s}

/* ---------- 2–3. hero ---------- */
.s22 #top.hero{--s22p:0;isolation:isolate}
/* 2.0 hides every hero child except its content box; let the 2.2 layers through */
.s22 #top.hero>.s22-slides,.s22 #top.hero>.s22-lb,.s22 #top.hero>.s22-leaves,.s22 #top.hero>.s22-hint{display:block!important}
.s22-slides{position:absolute;inset:-6% 0;z-index:-2;pointer-events:none;overflow:hidden;transform:translate3d(0,calc(var(--s22p) * 90px),0)}
.s22-slides i{position:absolute;inset:0;background:#31271c center/cover no-repeat;opacity:0;transition:opacity 1.7s ease;transform-origin:var(--o,50% 50%)}
.s22-slides i:nth-child(2n){--o:28% 38%}.s22-slides i:nth-child(3n){--o:72% 62%}
.s22-slides i.on{opacity:1;animation:s22kb 9.5s ease-out both}
@keyframes s22kb{from{transform:scale(1.16)}to{transform:scale(1.02)}}
.s22 #top.hero .cine2-hero-content{position:relative;z-index:3}
.s22-leaves{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.s22 #top.hero .cine2-center{translate:0 calc(var(--s22p) * -80px);opacity:calc(1 - var(--s22p) * 1.6)}
.s22 #top.hero h1{white-space:nowrap}
.s22 #top.hero h1 .s22-ch{display:inline-block;transition:transform .35s var(--s22-ease),color .35s}
.s22:not(.s22-go) #top.hero h1 .s22-ch{opacity:0}
.s22.s22-go #top.hero h1 .s22-ch{animation:s22rise 1.05s var(--s22-ease) backwards;animation-delay:calc(var(--i) * 85ms + .08s)}
@keyframes s22rise{from{transform:translateY(.5em) rotate(5deg);opacity:0;filter:blur(12px)}to{transform:none;opacity:1;filter:none}}
.s22 #top.hero h1 .s22-ch:hover{transform:translateY(-.09em) rotate(-5deg);color:var(--s22-gold)}
.s22-lb{position:absolute;inset:0;z-index:4;pointer-events:none}
.s22-lb i{position:absolute;left:0;right:0;height:calc(var(--s22p) * 12vh);background:#0c0907}
.s22-lb i:first-child{top:0}.s22-lb i:last-child{bottom:0}
.s22-hint{position:absolute;left:50%;bottom:clamp(54px,7vh,72px);z-index:5;translate:-50% 0;border:1px solid rgba(255,246,230,.45);border-radius:999px;
 background:rgba(20,15,11,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff6e6;
 font:600 12px/1 "Helvetica Neue",Arial,"Noto Sans TC",sans-serif;letter-spacing:.06em;padding:9px 14px;cursor:pointer;white-space:nowrap;
 animation:s22float 3.2s ease-in-out infinite;transition:transform .25s}
.s22-hint.pop{transform:scale(1.12)}
@keyframes s22float{50%{translate:-50% -5px}}

/* ---------- 4. progress + timecode ---------- */
.s22-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:2147480000;pointer-events:none}
.s22-prog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--s22pg,0));background:linear-gradient(90deg,#c9302c,#ea7a2c 45%,#f2c230)}
.s22-hud{position:fixed;left:18px;bottom:18px;z-index:9000;display:none;align-items:center;gap:10px;padding:8px 13px;border-radius:999px;
 background:rgba(17,12,9,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#f6ead3;
 font:600 10.5px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;pointer-events:none;box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
@media(min-width:1000px){.s22-hud{display:flex}}
.s22-rec{color:#ff4b3a;animation:s22blink 1.2s steps(2) infinite}
.s22-hsc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--s22-gold)}
@keyframes s22blink{50%{opacity:.15}}

/* ---------- 5. scene covers ---------- */
.s22 .s22-sc{clip-path:inset(8% 5% round 28px);transition:clip-path 1.25s var(--s22-ease)}
.s22 .s22-sc.s22-in{clip-path:inset(0 0 0 0 round 0)}
.s22 .s22-sc .c3-scene-inner>*,.s22 .cine2-interlude.s22-sc .cine2-interlude-content>*{opacity:0;translate:0 30px;transition:opacity .9s ease,translate 1.1s var(--s22-ease)}
.s22 .s22-sc.s22-in .c3-scene-inner>*,.s22 .cine2-interlude.s22-sc.s22-in .cine2-interlude-content>*{opacity:1;translate:0 0}
.s22 .s22-sc.s22-in .c3-scene-inner>*:nth-child(2),.s22 .s22-sc.s22-in .cine2-interlude-content>*:nth-child(2){transition-delay:.14s}
.s22 .s22-sc.s22-in .c3-scene-inner>*:nth-child(3){transition-delay:.28s}
.s22-leak{position:absolute;inset:-25%;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
 background:radial-gradient(35% 55% at 50% 50%,rgba(255,176,64,.7),rgba(255,96,48,.32) 42%,transparent 72%);transform:translateX(-70%) rotate(9deg)}
.s22-sc.s22-in .s22-leak{animation:s22leak 1.8s .2s ease-out both}
@keyframes s22leak{0%{opacity:0;transform:translateX(-70%) rotate(9deg)}30%{opacity:.95}100%{opacity:0;transform:translateX(70%) rotate(9deg)}}
.s22-slate{position:absolute;right:clamp(14px,3vw,34px);top:clamp(14px,3vw,30px);z-index:5;display:flex;align-items:center;gap:8px;
 font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;color:#fff6e6;opacity:0;translate:0 -10px;transition:opacity .8s .45s,translate .8s .45s var(--s22-ease);pointer-events:none}
.s22-slate b{padding:6px 9px 6px 26px;border-radius:3px;color:#140f0b;font-weight:800;
 background:linear-gradient(90deg,transparent 0 20px,#fff6e6 20px),repeating-linear-gradient(135deg,#140f0b 0 5px,#fff6e6 5px 10px)}
.s22-slate span{opacity:.85}
.s22-sc.s22-in .s22-slate{opacity:1;translate:0 0}
.s22 .cine2-interlude .cinema-interlude-media{background-image:url('img/d4-19-b9c00ca6.webp')!important;background-position:center!important}
.s22 .cine2-interlude{position:relative}
.s22 .s22-hd{opacity:0;translate:0 .7em;transform:skewY(3deg);transform-origin:0 100%;transition:opacity .8s ease,translate 1s var(--s22-ease),transform 1s var(--s22-ease)}
.s22 .s22-hd.s22-hd-in{opacity:1;translate:0 0;transform:none}

/* ---------- 6. marquee ribbons ---------- */
.s22-ribw{overflow:hidden;padding:clamp(16px,3vw,30px) 0;position:relative;z-index:2}
.s22-rib{background:#140f0b;color:#fff6e6;transform:rotate(-1.6deg) scale(1.05);padding:14px 0;box-shadow:0 18px 40px -26px rgba(20,15,11,.7)}
.s22-rib.alt{background:#c22f2a;transform:rotate(1.3deg) scale(1.05)}
.s22-rib.gold{background:#f2c230;color:#140f0b}
.s22-track{display:flex;align-items:center;width:max-content;will-change:transform}
.s22-track span{font:800 clamp(18px,3vw,32px)/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.05em;padding:0 .55em;white-space:nowrap}
.s22-track span.zh{font-family:"Noto Serif TC","Songti TC",serif;font-weight:700;letter-spacing:.08em}
.s22-track em{font-style:normal;font-size:clamp(14px,2vw,22px);opacity:.9}
.s22-rib.gold .s22-track em{opacity:1}

/* ---------- 7. the six days as a film reel ---------- */
.s22-reelhint{margin:0 0 10px;font:600 11px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--ink-2,#6b5a4b);text-align:center}
.s22 #glance.glance{display:flex!important;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
 padding:32px 18px;border-radius:16px;cursor:grab;--skew:0deg;
 background:
  repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,246,230,.88) 10px 22px,transparent 22px 34px) 0 10px/100% 10px no-repeat local,
  repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,246,230,.88) 10px 22px,transparent 22px 34px) 0 calc(100% - 10px)/100% 10px no-repeat local,
  #140f0b;
 box-shadow:inset 0 0 0 1px rgba(255,246,230,.06),0 24px 50px -30px rgba(20,15,11,.8)}
.s22 #glance.glance::-webkit-scrollbar{display:none}
.s22 #glance.glance.drag{cursor:grabbing;scroll-snap-type:none}
.s22 #glance .g-day{flex:0 0 clamp(180px,26vw,250px);aspect-ratio:3/4;scroll-snap-align:center;position:relative;overflow:hidden;isolation:isolate;
 display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:16px;border:0;border-radius:4px;color:#fff6e6;box-shadow:none;
 background:#2a1f16 var(--reel) center/cover no-repeat;transform:skewX(var(--skew)) translateY(var(--lift,0)) scale(var(--sc,1));
 transition:transform .5s var(--s22-ease),filter .45s ease;-webkit-user-drag:none}
.s22 #glance .g-day::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,7,5,0) 30%,rgba(10,7,5,.86) 100%)}
.s22 #glance .g-day::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,240,200,.35) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s var(--s22-ease)}
.s22 #glance .g-day .n{font-size:clamp(2.8rem,6vw,4.2rem);color:var(--s22-gold);text-shadow:0 2px 18px rgba(0,0,0,.5)}
.s22 #glance .g-day .d{color:rgba(255,246,230,.82)}
.s22 #glance .g-day .t{color:#fff6e6}
.s22 #glance .g-day:hover,.s22 #glance .g-day:focus-visible{--lift:-6px;--sc:1.03;filter:saturate(1.2)}
.s22 #glance .g-day:hover::after{transform:translateX(120%)}
@media(hover:hover){.s22 #glance:hover .g-day:not(:hover){filter:grayscale(.65) brightness(.72)}}
.s22 #glance .g-day:nth-child(1){--reel:url('img/t/d1-01-80fd4905.webp');background-size:260% auto;background-position:97% 42%}
.s22 #glance .g-day:nth-child(2){--reel:url('img/t/d2-03p-6cf2eba3.webp')}
.s22 #glance .g-day:nth-child(3){--reel:url('img/t/d3-13-38e53aa7.webp')}
.s22 #glance .g-day:nth-child(4){--reel:url('img/t/d4-11-8719d9f7.webp')}
.s22 #glance .g-day:nth-child(5){--reel:url('img/t/d5-01-0e76a87f-m.webp')}
.s22 #glance .g-day:nth-child(6){--reel:url('img/t/d6-01-ff92be7f-m.webp')}

/* ---------- 8. photos develop as they come in ---------- */
.s22 .s22-dv{opacity:0;transform:perspective(900px) translate3d(0,56px,0) rotateX(22deg) rotate(var(--s22r,0deg));transform-origin:50% 100%;
 transition:opacity .6s ease var(--s22d,0ms),transform 1.15s var(--s22-ease) var(--s22d,0ms)}
.s22 .s22-dv img{filter:grayscale(1) sepia(.55) brightness(1.3) contrast(.8);transition:filter 1.5s ease calc(var(--s22d,0ms) + 250ms)}
.s22 .s22-dv.s22-dv-in{opacity:1;transform:none}
.s22 .s22-dv.s22-dv-in img{filter:none}
/* mouse tilt (set inline by the script) springs back when you leave */
@media(hover:hover){.s22 .ph-f:not(.s22-dv),.s22 .sm-card:not(.s22-dv){transition:transform .5s var(--s22-ease),box-shadow .5s}
 .s22 .s22-tilting{transition:transform .12s linear,box-shadow .3s;box-shadow:0 24px 50px -24px rgba(20,15,11,.55);z-index:2;position:relative}}
/* photo grids and the meal cards lean with a fast scroll (the script sets the skew on the grids in view) */
.s22 .ph-grid,.s22 [data-sm-rail]{transform-origin:50% 50%}
@media(hover:hover){.s22 .ph-f .ph-btn{overflow:hidden}.s22 .ph-f .ph-btn img{transition:transform .8s var(--s22-ease),filter 1.3s ease}.s22 .ph-f .ph-btn:hover img{transform:scale(1.045)}}
.s22 .s21-lb[open] .s21-lb-f img{animation:s22lb .55s var(--s22-ease)}
@keyframes s22lb{from{transform:scale(.93);opacity:.2}}

/* ---------- 9. director's cursor ---------- */
.s22-cur{position:fixed;left:0;top:0;z-index:2147482000;pointer-events:none;transition:opacity .3s}
.s22-cur.off{opacity:0}
.s22-cur .r{position:absolute;left:0;top:0}
.s22-cur .r i{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(201,48,44,.8);border-radius:50%;
 transition:width .3s var(--s22-ease),height .3s var(--s22-ease),margin .3s var(--s22-ease),background .3s,border-color .3s}
.s22-cur b{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#c9302c}
.s22-cur .lab{position:absolute;transform:translate(-50%,-50%);font:800 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;color:#fff6e6;opacity:0;transition:opacity .2s}
.s22-cur.view .r i{width:80px;height:80px;margin:-40px 0 0 -40px;background:rgba(20,15,11,.8);border-color:transparent}
.s22-cur.shake .r i{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(242,194,48,.28);border-color:#f2c230}
.s22-cur.link .r i{width:50px;height:50px;margin:-25px 0 0 -25px;background:rgba(242,194,48,.16);border-color:rgba(201,48,44,.5)}
.s22-cur.play .r i{width:92px;height:92px;margin:-46px 0 0 -46px;background:rgba(242,194,48,.92);border-color:transparent}
.s22-cur.play .lab{color:#140f0b}
.s22-cur.open .r i{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(201,48,44,.9);border-color:transparent}
.s22-cur.open .lab{opacity:1}.s22-cur.open b{opacity:0}
.s22-cur.view .lab,.s22-cur.shake .lab,.s22-cur.play .lab{opacity:1}
.s22-cur.shake .lab{color:#140f0b}
.s22-cur.view b,.s22-cur.shake b,.s22-cur.play b{opacity:0}

/* ---------- 10. ACTION! ---------- */
.s22-clap{position:fixed;left:50%;top:46%;z-index:2147481000;pointer-events:none;width:min(62vw,300px);transform:translate(-50%,-50%);animation:s22clapout .95s ease both}
.s22-clap .arm{height:34px;border-radius:5px 5px 0 0;transform-origin:4% 100%;transform:rotate(-24deg);
 background:repeating-linear-gradient(135deg,#140f0b 0 16px,#fff6e6 16px 32px);animation:s22clap .32s .12s cubic-bezier(.6,0,.4,1) forwards;box-shadow:0 4px 0 #140f0b}
.s22-clap .board{background:#140f0b;color:#fff6e6;border-radius:0 0 8px 8px;padding:16px 18px 18px;display:grid;gap:8px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.s22-clap b{font:900 clamp(30px,8vw,46px)/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.06em;color:var(--s22-gold)}
.s22-clap span{font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.22em;opacity:.8}
@keyframes s22clap{to{transform:rotate(0)}}
@keyframes s22clapout{0%{opacity:0;transform:translate(-50%,-40%) scale(.85)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%) scale(1.04)}}

/* ---------- reduced motion: keep the look, drop the motion ---------- */
html.s22-rm .s22-grain{animation:none}
html.s22-rm .s22-sc,html.s22-rm .s22-sc .c3-scene-inner>*{clip-path:none!important;opacity:1!important;translate:none!important;transition:none!important}
html.s22-rm .s22-hint,html.s22-rm .s22-leak{display:none}
html.s22-rm .s22-slides i.on{animation:none}
html.s22-rm #glance .g-day{transform:none!important;transition:none}
html.s22-rm .s22-zc{opacity:1!important;transform:none!important}
html.s22-rm .s22-cv{clip-path:none!important}
html.s22-rm .s22-cv>.eyebrow,html.s22-rm .s22-cv>h2,html.s22-rm .s22-cv>p{opacity:1!important;translate:none!important;transform:none!important}
html.s22-rm .s22-bignum{opacity:.5}
html.s22-rm .s22-trailer{height:auto}
html.s22-rm .s22-trstage{position:relative;height:auto}
html.s22-rm .s22-trtrack{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important}
html.s22-rm .s22-trp{height:min(78svh,640px);scroll-snap-align:start;--lp:0!important;--lpa:0!important}
html.s22-rm .s22-trhint{display:none}
html.s22-rm .s22-trbar{position:relative;left:auto;right:auto;bottom:auto;padding:14px max(16px,6vw)}

/* interlude line: keep 「會。」 from dropping to a line of its own on phones */
.s22 .cine2-interlude-content h2{text-wrap:balance;word-break:keep-all}

/* black card from the first paint until the opening leader takes over (an inline head script sets s22-cover);
   it lifts by itself after 3.5s in case the script never runs */
html.s22-cover::after{content:"";position:fixed;inset:0;z-index:2147483000;background:#0c0907;pointer-events:none;animation:s22uncover .4s 3.5s forwards}
@keyframes s22uncover{to{opacity:0;visibility:hidden}}


/* ================= 2.2 · second pass: more motion you can feel on a phone or iPad ================= */

/* ---------- the six-day trailer ---------- */
.s22-trailer{position:relative;height:calc(100svh + (var(--n) - 1) * 60svh);background:#0c0907;color:#fff6e6;z-index:1}
.s22-trstage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.s22-trtrack{position:absolute;inset:0;display:flex}
.s22-trp{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;--lp:0;--lpa:0}
.s22-trimg{position:absolute;inset:-3% -14%;background:#2a1f16 center/cover no-repeat;
 transform:translate3d(calc(var(--lp) * 26%),0,0) scale(calc(1.06 + var(--lpa) * .14))}
.s22-trp::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(12,9,7,.55) 0,rgba(12,9,7,0) 26%,rgba(12,9,7,0) 40%,rgba(12,9,7,.9) 100%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.45))}
.s22-trtx{position:absolute;z-index:2;left:max(22px,6vw);right:max(22px,6vw);bottom:calc(150px + env(safe-area-inset-bottom,0px));display:grid;justify-items:start;gap:10px;
 transform:translate3d(calc(var(--lp) * -38%),0,0);opacity:calc(1 - var(--lpa) * 1.7)}
.s22-trk{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:600 11px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.2em;color:rgba(255,246,230,.85)}
.s22-trk b{padding:5px 8px 5px 24px;border-radius:3px;color:#140f0b;font-weight:800;
 background:linear-gradient(90deg,transparent 0 18px,#fff6e6 18px),repeating-linear-gradient(135deg,#140f0b 0 5px,#fff6e6 5px 10px)}
.s22-trn{position:absolute;right:max(14px,4vw);top:50%;z-index:1;pointer-events:none;font:700 clamp(140px,26vw,400px)/.8 "DM Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:-.07em;translate:0 -62%;
 color:transparent;-webkit-text-stroke:2px rgba(255,246,230,.55);
 background:linear-gradient(0deg,#f2c230 0,#f2c230 calc((1 - var(--lpa)) * 100%),transparent calc((1 - var(--lpa)) * 100%));-webkit-background-clip:text;background-clip:text;
 opacity:calc(.95 - var(--lpa) * .5);transform:translate3d(calc(var(--lp) * 70%),0,0)}
.s22-trh{max-width:min(16em,62vw)}
.s22-trh{margin:0;max-width:16em;font:700 clamp(30px,5.4vw,72px)/1.08 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.01em;text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.s22-trt{margin:0;font:500 clamp(14px,1.6vw,18px)/1.5 "Noto Sans TC","PingFang TC",sans-serif;color:rgba(255,246,230,.86);letter-spacing:.06em}
.s22-trgo{margin-top:6px;border:1px solid rgba(255,246,230,.6);background:rgba(20,15,11,.35);color:#fff6e6;border-radius:999px;padding:11px 18px;
 font:600 14px/1 "Noto Sans TC","PingFang TC",sans-serif;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,color .3s,transform .3s var(--s22-ease)}
.s22-trgo:hover,.s22-trgo:focus-visible{background:#f2c230;color:#140f0b;border-color:#f2c230;transform:translateX(4px)}
.s22-trp .s22-trtx>*{transition:opacity .6s ease,translate .8s var(--s22-ease)}
.s22-trp:not(.on) .s22-trtx>.s22-trh,.s22-trp:not(.on) .s22-trtx>.s22-trt,.s22-trp:not(.on) .s22-trtx>.s22-trgo{opacity:0;translate:0 24px}
.s22-trp.on .s22-trtx>.s22-trt{transition-delay:.12s}.s22-trp.on .s22-trtx>.s22-trgo{transition-delay:.22s}
.s22-trtop{position:absolute;z-index:3;left:max(22px,6vw);top:clamp(86px,15vh,150px);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.s22-trtop b{font:800 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.34em;color:#f2c230}
.s22-trtop span{font:600 clamp(13px,1.4vw,16px)/1 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.24em;color:rgba(255,246,230,.8)}
.s22-trhint{position:absolute;z-index:3;right:max(22px,6vw);top:clamp(86px,15vh,150px);margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;
 font:600 12px/1.3 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.16em;color:#fff6e6;writing-mode:vertical-rl;transition:opacity .5s}
.s22-trhint i{width:1px;height:58px;background:linear-gradient(#fff6e6,transparent);animation:s22drip 1.6s ease-in-out infinite;transform-origin:top}
@keyframes s22drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.s22-trstage.moved .s22-trhint{opacity:0}
.s22-trbar{position:absolute;z-index:3;left:max(22px,6vw);right:max(22px,6vw);bottom:calc(98px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px}
.s22-trbar button{all:unset;cursor:pointer;display:grid;gap:7px;padding:6px 0;--f:0}
.s22-trbar span{font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;color:rgba(255,246,230,.55);transition:color .3s}
.s22-trbar i{display:block;height:3px;border-radius:3px;background:linear-gradient(90deg,#f2c230 calc(var(--f) * 100%),rgba(255,246,230,.25) calc(var(--f) * 100%))}
.s22-trbar button.on span{color:#f2c230}
.s22-trbar button:focus-visible{outline:2px solid #f2c230;outline-offset:4px}
.s22-trstage .s22-grain{z-index:2}
@media(max-width:760px){.s22-trtx{bottom:calc(120px + env(safe-area-inset-bottom,0px))}.s22-trbar{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:112px}
 .s22-trhint{display:none}.s22-trn{top:30%}.s22-trh{max-width:none}}

/* ---------- chapter covers (.ec-edition > .wrap > .sec-head): wipe in, then drift and zoom with the scroll ---------- */
html.s22 .ec-edition>.wrap>.sec-head.s22-cv{clip-path:inset(7% 4% round 26px);transition:clip-path 1.3s var(--s22-ease)}
html.s22 .ec-edition>.wrap>.sec-head.s22-cv.s22-in{clip-path:inset(0 0 0 0 round 0)}
html.s22 .ec-edition>.wrap>.sec-head.s22-cv::before{transform:translate3d(0,calc(var(--sp,0) * -9%),0) scale(calc(1.1 + var(--spa,0) * .16))!important;transition:none!important}
html.s22 .ec-edition>.wrap>.sec-head.s22-cv>.eyebrow,html.s22 .ec-edition>.wrap>.sec-head.s22-cv>h2,html.s22 .ec-edition>.wrap>.sec-head.s22-cv>p{
 transform:translate3d(0,calc(var(--sp,0) * -30px),0);transition:opacity .9s ease,translate 1.1s var(--s22-ease)}
html.s22 .ec-edition>.wrap>.sec-head.s22-cv:not(.s22-in)>.eyebrow,html.s22 .ec-edition>.wrap>.sec-head.s22-cv:not(.s22-in)>p{opacity:0!important;translate:0 30px}
html.s22 .ec-edition>.wrap>.sec-head.s22-cv.s22-in>p{transition-delay:.45s}
html.s22 .s22-cv .s22-zc{display:inline-block;opacity:0;transform:translateY(.75em) rotate(7deg);transition:opacity .55s ease,transform .9s var(--s22-ease);transition-delay:calc(var(--i) * 55ms + .25s)}
html.s22 .s22-cv.s22-in .s22-zc{opacity:1;transform:none}
.s22-cv .s22-bignum{position:absolute;right:clamp(12px,4vw,56px);top:50%;translate:0 -50%;z-index:1;pointer-events:none;font:700 clamp(150px,26vw,380px)/.8 "DM Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:-.07em;
 color:transparent;-webkit-text-stroke:1.5px rgba(255,246,230,.55);opacity:0;transform:translate3d(calc(var(--sp,0) * 30%),0,0);transition:opacity 1.2s .35s}
.s22-cv.s22-in .s22-bignum{opacity:1}
.s22-cv .s22-slate{top:auto!important;left:auto!important;bottom:clamp(30px,4vw,52px)!important;right:clamp(30px,4vw,52px)!important}
.s22-cv.s22-in .s22-slate{opacity:1;translate:0 0}
.s22-cv.s22-in .s22-leak{animation:s22leak 1.8s .2s ease-out both}
.s22 .cine2-interlude.s22-sc .cinema-interlude-media{transform:translate3d(0,calc(var(--sp,0) * -10%),0) scale(calc(1.08 + var(--spa,0) * .14))!important}
.s22 .cine2-interlude.s22-sc .cine2-interlude-content{transform:translate3d(0,calc(var(--sp,0) * -40px),0)}
@media(max-width:760px){.s22-cv .s22-bignum{top:auto;bottom:-.08em;translate:none;font-size:clamp(130px,42vw,220px)}.s22-cv .s22-slate{display:none}}

/* ---------- leaves anywhere ---------- */
.s22-sky{position:fixed;inset:0;z-index:60;pointer-events:none}
.s22-sky .s22-leaves{position:absolute}

/* ---------- ribbons: tap to flip ---------- */
.s22-ribw{cursor:pointer;-webkit-tap-highlight-color:transparent}
.s22-ribw.pulse .s22-rib{animation:s22pulse .45s var(--s22-ease)}
@keyframes s22pulse{40%{scale:1.04}}

/* ---------- cut to a title card ---------- */
.s22-cut{position:fixed;inset:0;z-index:2147480500;pointer-events:none;display:grid;place-items:center;visibility:hidden}
.s22-cut i{position:absolute;left:0;right:0;height:50.5%;background:#0c0907;transform:scaleY(0)}
.s22-cut i:first-child{top:0;transform-origin:top}.s22-cut i:nth-child(2){bottom:0;transform-origin:bottom}
.s22-cut div{position:relative;display:grid;gap:12px;justify-items:center;text-align:center;opacity:0}
.s22-cut b{font:800 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.4em;color:#f2c230}
.s22-cut span{font:700 clamp(30px,7vw,74px)/1.05 "Noto Sans TC","PingFang TC",sans-serif;color:#fff6e6;letter-spacing:.08em}
.s22-cut.go{visibility:visible}
.s22-cut.go i{animation:s22shut 1.15s cubic-bezier(.7,0,.2,1) both}
.s22-cut.go div{animation:s22cardt 1.15s ease both}
@keyframes s22shut{0%{transform:scaleY(0)}28%,62%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes s22cardt{0%,20%{opacity:0;transform:scale(.94);letter-spacing:.3em}34%,60%{opacity:1;transform:none}78%,100%{opacity:0}}


/* ---------- poster walls ("NOW SHOWING") for the later chapters ---------- */
.s22-wall{--wp:max(16px,4vw,calc((100vw - 1320px) / 2));display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-auto-flow:row dense;
 gap:clamp(12px,1.6vw,22px);padding:clamp(34px,5vw,72px) var(--wp);background:#140f0b;position:relative;z-index:1}
.s22-wall>.sec{scroll-margin-top:90px;min-width:0}
.s22-wall>.sec .sec-head>h2{color:var(--c2-ink)}
.s22-wall>.sec:not(.folded){grid-column:1/-1;margin-inline:calc(var(--wp) * -1)!important}
.s22-wall>.sec:not(.folded):first-of-type{margin-top:calc(clamp(12px,1.6vw,22px) * -1)!important}
/* the marquee sign */
.s22-wallhead{grid-column:1/-1;display:grid;place-items:center;padding:6px 0 clamp(12px,2vw,24px)}
.s22-marquee{position:relative;text-align:center;padding:clamp(20px,3vw,34px) clamp(26px,6vw,72px);border-radius:14px;color:#fff6e6;background:#1f1610;
 box-shadow:0 0 0 2px #f2c230,0 0 40px -6px rgba(242,194,48,.55),inset 0 0 30px rgba(0,0,0,.5)}
.s22-marquee::before{content:"";position:absolute;inset:7px;border-radius:9px;pointer-events:none;
 background:radial-gradient(circle,#ffe6a0 0 2.6px,transparent 3.4px) 0 0/16px 16px;
 -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:5px;
 animation:s22bulbs 1.1s steps(2) infinite}
@keyframes s22bulbs{50%{background-position:8px 0;filter:brightness(1.35)}}
.s22-marquee b{display:block;font:800 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.42em;color:#f2c230}
.s22-marquee h2{margin:10px 0 6px;font:700 clamp(28px,4.6vw,54px)/1.05 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.08em;color:#fff6e6;text-shadow:0 0 22px rgba(242,194,48,.45)}
.s22-marquee p{margin:0;font:500 13px/1.4 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.12em;color:rgba(255,246,230,.72)}
/* a folded chapter = a poster */
html.s22 .s22-wall>.sec.folded{margin:0!important;padding:0!important;min-height:0!important;height:auto!important;background:none!important;border:0!important;cursor:pointer;
 border-radius:16px;overflow:hidden;box-shadow:0 22px 44px -26px rgba(0,0,0,.8);transition:transform .5s var(--s22-ease),box-shadow .5s}
html.s22 .s22-wall>.sec.folded>.wrap{padding:0!important;margin:0!important;max-width:none!important;min-height:0!important;height:100%!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head{aspect-ratio:3/4;height:auto!important;min-height:0!important;margin:0!important;padding:clamp(16px,1.8vw,24px)!important;
 border-radius:16px;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>p:not(.eyebrow),html.s22 .s22-wall>.sec.folded .ec-note,html.s22 .s22-wall>.sec.folded .s22-slate,
html.s22 .s22-wall>.sec.folded .fold-btn,html.s22 .s22-wall>.sec.folded .s22-leak{display:none!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>.eyebrow{margin:0!important;font-size:10px!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>h2{margin:0!important;font-size:clamp(19px,2.3vw,30px)!important;line-height:1.12!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>h2 i{display:block!important;font-size:.82em!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head .fold-bar{margin:2px 0 0!important;padding:0!important;border:0!important;background:none!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head .fold-sum{font-size:11px!important;color:rgba(255,246,230,.82)!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>.cc-toggle{margin:8px 0 0!important;padding:8px 13px!important;font-size:12px!important}
html.s22 .s22-wall>.sec.folded .ec-index{font-size:9px!important;letter-spacing:.16em!important;max-width:80%}
html.s22 .s22-wall>.sec.folded .ec-rule{inset:10px!important;border-radius:10px}
html.s22 .s22-wall>.sec.folded .s22-bignum{top:clamp(26px,3vw,40px);right:clamp(10px,1.4vw,18px);bottom:auto;translate:none;font-size:clamp(70px,8vw,128px)}
@media(hover:hover){html.s22 .s22-wall>.sec.folded:hover{box-shadow:0 34px 60px -26px rgba(0,0,0,.9),0 0 0 2px rgba(242,194,48,.7)}
 html.s22 .s22-wall>.sec.folded:hover>.wrap>.sec-head::before{filter:saturate(1.25) brightness(1.08)}}
html.s22 .s22-wall>.sec.folded:active{transform:scale(.97)}
/* dealt like cards when the wall arrives */
.s22-wall.s22-deal>.sec{opacity:0;transform:translate3d(calc((var(--k) - 1.5) * -40px),140px,0) rotate(calc((var(--k) - 1.5) * 7deg)) scale(.86)}
.s22-wall.s22-deal>.s22-wallhead{opacity:0;transform:scale(.9)}
.s22-wall.s22-dealt>.sec{opacity:1;transform:none;transition:opacity .5s ease calc(var(--k) * 110ms + .15s),transform 1s cubic-bezier(.2,.9,.25,1.15) calc(var(--k) * 110ms + .15s)}
.s22-wall.s22-dealt>.s22-wallhead{opacity:1;transform:none;transition:opacity .6s,transform .8s var(--s22-ease)}
@media(max-width:900px){.s22-wall{--cols:2!important}
 .s22-wall[data-n="3"]>.sec.folded:nth-child(2){grid-column:span 2}
 html.s22 .s22-wall[data-n="3"]>.sec.folded:nth-child(2)>.wrap>.sec-head{aspect-ratio:16/10}}
@media(max-width:520px){html.s22 .s22-wall>.sec.folded .s22-bignum{font-size:64px;top:22px}
 html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>.cc-toggle{display:none!important}
 html.s22 .s22-wall>.sec.folded .ec-index{display:none!important}}
html.s22-rm .s22-marquee::before{animation:none}

/* cover extras sit on top of the cover, out of the text flow (2.0 makes every cover child position:relative) */
html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-bignum,html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-slate,html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-leak,html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-grain{position:absolute!important;max-width:none!important}
html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-bignum{z-index:1!important}
html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-slate{z-index:5!important}
html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-leak,html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter)>.wrap>.sec-head.s22-cv>.s22-grain{z-index:3!important}
/* cream / colour covers (a tilted print on paper): the number goes bottom-left in ink */
html.s22 section:not(.vr-photo)>.wrap>.s22-cv>.s22-bignum{top:auto;bottom:-.12em;left:-.04em;right:auto;translate:none;-webkit-text-stroke-color:rgba(70,45,25,.2)}
/* posters: every chapter becomes a full-bleed photo poster with light type */
html.s22 .s22-wall>section.sec.cc-group-section.ec-edition.folded>.wrap>.sec-head.s22-cv::before{
 inset:0!important;width:auto!important;height:auto!important;border:0!important;border-radius:16px!important;box-shadow:none!important;padding:0!important;opacity:1!important;
 background-image:var(--ec-photo,var(--ap-scene-image))!important;background-size:cover!important;background-position:center!important;background-color:#2a1f16!important;
 rotate:none!important;transform:translate3d(0,calc(var(--sp,0) * -6%),0) scale(calc(1.12 + var(--spa,0) * .12))!important}
html.s22 .s22-wall>section.sec.cc-group-section.ec-edition.folded>.wrap>.sec-head.s22-cv::after{inset:0!important;opacity:1!important;border-radius:16px!important;
 background:linear-gradient(180deg,rgba(12,9,7,.42) 0,rgba(12,9,7,.05) 34%,rgba(12,9,7,.18) 52%,rgba(12,9,7,.9) 100%)!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head :is(.eyebrow,h2,h2 i,.ec-index,.fold-sum){color:#fff6e6!important;text-shadow:0 2px 14px rgba(0,0,0,.55)!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head h2 i{color:#ffe3a6!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>.s22-bignum{top:clamp(30px,3.4vw,46px)!important;right:clamp(10px,1.4vw,18px)!important;left:auto!important;bottom:auto!important;
 translate:none;-webkit-text-stroke-color:rgba(255,246,230,.6)!important}
html.s22 .s22-wall>.sec.folded .ec-rule{border-color:rgba(255,244,213,.5)!important}
html.s22 .s22-wall>.sec.folded>.wrap>.sec-head>.cc-toggle{background:rgba(255,246,230,.92)!important;color:#140f0b!important;border-color:transparent!important}

html.s22 .s22-wall>.sec.folded .ec-index{display:none!important}

/* posters win over 2.0's cover sizes and text widths */
html.s22 .s22-wall>section.sec.cc-group-section.ec-edition.folded>.wrap>.sec-head.s22-cv{min-height:0!important;height:auto!important;aspect-ratio:3/4}
@media(max-width:900px){html.s22 .s22-wall[data-n="3"]>section.sec.cc-group-section.ec-edition.folded:nth-child(2)>.wrap>.sec-head.s22-cv{aspect-ratio:16/10}}
html.s22 .s22-wall>section.sec.cc-group-section.ec-edition.folded>.wrap>.sec-head.s22-cv>:not(.ec-rule):not(.s22-bignum):not(.s22-slate):not(.s22-leak):not(.s22-grain){max-width:100%!important}
html.s22 .s22-wall>section.sec.folded>.wrap>.ec-rail{display:none!important}


/* ---------- the way home: JSLALALAND mark in the sticky top bar ---------- */
.s22-home{display:inline-flex;align-items:center;gap:9px;flex:none;align-self:center;margin-right:clamp(10px,1.4vw,20px);padding:4px 14px 4px 4px;border-radius:999px;
 background:#241C16;color:#F3ECE0;text-decoration:none;white-space:nowrap;box-shadow:0 6px 18px -10px rgba(36,28,22,.7);
 transition:padding .45s var(--s22-ease),gap .45s var(--s22-ease),background .3s,transform .3s var(--s22-ease)}
.s22-home-ic{position:relative;display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;
 background:#F3ECE0;color:#241C16;font:800 12px/1 "DM Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:.02em}
.s22-home-ic i{position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
 background:conic-gradient(from 0deg,#f2c230,#c9302c,#ea7a2c,#f2c230);-webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,transparent 62%,#000 64%);
 opacity:0;transition:opacity .35s}
.s22-home-t{display:grid;gap:1px;max-width:150px;overflow:hidden;transition:max-width .45s var(--s22-ease),opacity .3s}
.s22-home-t b{font:800 11px/1.1 "DM Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:.2em}
.s22-home-t small{font:500 10.5px/1.2 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.08em;color:rgba(243,236,224,.72)}
.s22-home:hover,.s22-home:focus-visible{background:#3a2c22;transform:translateY(-1px)}
.s22-home:hover .s22-home-ic i,.s22-home:focus-visible .s22-home-ic i{opacity:1;animation:s22spin 1.6s linear infinite}
.s22-home:focus-visible{outline:2px solid #f2c230;outline-offset:3px}
@keyframes s22spin{to{transform:rotate(360deg)}}
/* reading mode: just the round mark */
.s22-home.mini{padding:4px;gap:0}
.s22-home.mini .s22-home-t{max-width:0;opacity:0}
.s22-home.mini:hover,.s22-home.mini:focus-visible{padding:4px 14px 4px 4px;gap:9px}
.s22-home.mini:hover .s22-home-t,.s22-home.mini:focus-visible .s22-home-t{max-width:150px;opacity:1}
/* a ring that pings once after the opening, so people notice the way home */
.s22-go .s22-home .s22-home-ic::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #f2c230;animation:s22ping 1.6s 1.2s ease-out 2 both}
@keyframes s22ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@media(max-width:1000px){.s22-home{padding:3px;gap:0}.s22-home-t{max-width:0;opacity:0}}
@media(max-width:520px){.s22-home{margin-right:8px}.s22-home-ic{width:28px;height:28px;font-size:11px}}
html.s22-rm .s22-home *{animation:none!important}

/* on jslalaland.com the shared Back / menu buttons sit in the bottom-left corner: lift the trailer's caption and frame bar above them */
html[data-jsla-site] .s22-trtx{bottom:calc(206px + env(safe-area-inset-bottom,0px))}
html[data-jsla-site] .s22-trbar{bottom:calc(156px + env(safe-area-inset-bottom,0px))}
@media(max-width:760px){html[data-jsla-site] .s22-trtx{bottom:calc(178px + env(safe-area-inset-bottom,0px))}
 html[data-jsla-site] .s22-trbar{bottom:calc(132px + env(safe-area-inset-bottom,0px))}}


/* ---------- 11/14: readable details ---------- */
/* the "slow days, golden light" label sits inside the photo instead of hanging off its clipped edge */
html.s22 .cine2-intro-visual .cine2-photo-note{bottom:clamp(16px,2.4vw,30px)!important;left:clamp(14px,2.4vw,30px)!important;z-index:3;padding:12px 22px!important;box-shadow:0 12px 26px -16px rgba(0,0,0,.5)}
/* poster frames: one clear cream line, the same inset on every poster (2.0 drew brown hairlines on some, cream on others) */
html.s22 .s22-wall>:is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter,section.sec).folded>.wrap>.sec-head.s22-cv>.ec-rule{inset:12px!important;border:1.5px solid rgba(255,246,230,.9)!important;border-radius:11px!important;box-shadow:0 0 0 1px rgba(20,15,11,.16),inset 0 0 0 1px rgba(20,15,11,.12)!important;opacity:1!important}
html.s22 .s22-wall>:is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter,section.sec).folded>.wrap>.sec-head.s22-cv :is(.eyebrow,h2,h2 i,.fold-sum){color:#fff6e6!important;text-shadow:0 2px 14px rgba(0,0,0,.6)!important}
html.s22 .s22-wall>:is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter,section.sec).folded>.wrap>.sec-head.s22-cv h2 i{color:#ffe3a6!important}
/* big outlined numbers: a firm cream outline with a soft dark fill, so they read on bright and busy photos */
html.s22 .s22-wall>:is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter,section.sec).folded>.wrap>.sec-head.s22-cv>.s22-bignum{-webkit-text-stroke:2px rgba(255,246,230,.95)!important;color:rgba(20,15,11,.22)!important;text-shadow:0 6px 26px rgba(0,0,0,.28)}
html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter).vr-photo>.wrap>.sec-head.s22-cv>.s22-bignum{-webkit-text-stroke:2px rgba(255,246,230,.9);color:rgba(20,15,11,.18);text-shadow:0 6px 26px rgba(0,0,0,.25)}
/* frames on the big photo covers: a touch stronger */
html.s22 :is(section.vr-chapter,section.cc-group-section.ec-edition.vr-chapter).vr-photo>.wrap>.sec-head.s22-cv>.ec-rule{border:1.5px solid rgba(255,246,230,.88)!important;box-shadow:0 0 0 1px rgba(20,15,11,.14)}


/* ---------- the shared footer's "keep going" cards, each with its carousel cover ---------- */
html.s22 .jsla-foot .jf-rel.s22-jfx{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card{position:relative;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:10px 10px 16px;border-radius:16px;overflow:hidden}
html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card>span:not(.s22-jfc):not(.ar){padding:0 6px 0 4px}
html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card b{font-size:14.5px;line-height:1.35}
html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card .ar{position:absolute;right:16px;bottom:16px;transition:transform .3s var(--s22-ease)}
html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card:hover .ar{transform:translateX(4px)}
.s22-jfc{display:block;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#2f261f;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.s22-jfc img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--s22-ease),filter .5s}
html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card:hover .s22-jfc img,html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card:focus-visible .s22-jfc img{transform:scale(1.06)}
html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card:not(:has(.s22-jfc)){justify-content:flex-end;min-height:120px}
@media(max-width:620px){html.s22 .jsla-foot .jf-rel.s22-jfx{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 html.s22 .jsla-foot .jf-rel.s22-jfx .jf-card b{font-size:13.5px}}