/* 20-year story: one continuous zoom-out, from one photo to the whole region.
   Static by default (reduced motion, no JS); story.js adds .live and drives everything from scroll.
   Theme: campus (light) by default; add .is-night for the dark atlas. */

.s20{
  --s-bg:oklch(0.985 0.004 240);   /* sea */
  --s-bg2:oklch(0.97 0.006 240);
  --s-land:oklch(0.935 0.004 250);   /* everything outside the story: neutral grey */
  --s-border:oklch(0.86 0.006 250);
  --s-thai:oklch(0.93 0.04 140);      /* Thailand: pale green */
  --s-fill:oklch(0.84 0.10 138);      /* provinces and countries in the story */
  --s-flash:oklch(0.80 0.09 145);     /* the moment a country lights up: a gentle deepening, not a flash */
  --s-conf:oklch(0.91 0.045 145);     /* participating countries, settled */
  --s-thai-line:oklch(0.46 0.13 146 / .55);
  --s-cm:oklch(0.76 0.13 140);      /* Chiang Mai province */
  --s-prov:oklch(0.52 0.09 145 / .5);
  --s-grid:oklch(0.5 0.05 200 / .09);
  --s-water:oklch(0.68 0.08 225);
  --s-route:var(--green);
  --s-arc:var(--green-deep);
  --s-halo:oklch(0.80 0.15 128);   /* leaf */
  --s-core:var(--green-deep);
  --s-home:var(--green-deep);
  --s-text:var(--ink);
  --s-soft:var(--ink-soft);
  --s-accent:var(--green-deep);
  --s-when:var(--green-deep);
  --s-panel:oklch(0.99 0.004 200);
  --s-light:oklch(0.80 0.15 128);
  --s-spark:oklch(0.90 0.16 128);
  --s-blend:multiply;
  --lit:.3;--fx:70%;--fy:50%;
  position:relative;background:var(--s-bg);color:var(--s-text)
}
.s20.is-night{
  --s-bg:#0c2a1d;--s-bg2:#134030;--s-land:#1b4a33;--s-border:rgba(255,255,255,.32);--s-thai:#245c40;--s-cm:#2d6e4c;--s-thai-line:rgba(255,236,190,.4);
  --s-prov:rgba(255,236,190,.34);--s-grid:rgba(255,255,255,.1);--s-water:oklch(0.62 0.07 220);
  --s-route:#f3c969;--s-arc:#ffd77a;--s-halo:#ffd77a;--s-core:#ffe7a8;--s-home:#fff6dd;
  --s-text:var(--white);--s-soft:var(--on-dark);--s-accent:#ffe3a1;--s-when:var(--gold);--s-panel:#0a2419;
  --s-light:rgb(255,200,110);--s-blend:screen;--s-spark:#fff1c2
}
.s20 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.s20 .nw{white-space:nowrap}

/* ---------- map ---------- */
.s20-map{position:relative;z-index:0;display:block;width:100%;height:auto}
.s20-map path{vector-effect:non-scaling-stroke}
.s20-map .countries path{fill:var(--s-land);stroke:var(--s-border);stroke-width:.8}
.s20-map .thai path{fill:var(--s-thai);stroke:var(--s-thai-line);stroke-width:1.2}
.s20-map .prov path{fill:none;stroke:var(--s-prov);stroke-width:.9}
.s20-map .provfill path{fill:var(--s-fill);stroke:none;opacity:0}
.s20-map .conf path{fill:var(--s-fill);stroke:oklch(0.55 0.1 145 / .5);stroke-width:.9;opacity:0}
.s20:not(.live) .s20-map .provfill path,.s20:not(.live) .s20-map .conf path{opacity:1}
.s20-map .cmprov path{fill:var(--s-cm);stroke:var(--s-accent);stroke-width:2;stroke-linejoin:round}
.s20:not(.live) .s20-map .cmprov{display:none}
.s20-map .grid{fill:none;stroke:var(--s-grid);stroke-width:.6}
.s20-map .water path{fill:none;stroke:var(--s-water);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.s20-map .water .moat{stroke-width:2}
.s20-map .links path{fill:none;stroke:var(--s-route);stroke-opacity:.85;vector-effect:none}
.s20-map .arcs path{fill:none;stroke:var(--s-arc);stroke-linecap:round;vector-effect:none}
.s20-map .halo{fill:url(#s20-glow)}
.s20-map stop{stop-color:var(--s-halo)}
.s20-map .core{fill:var(--s-core);stroke:var(--s-panel);stroke-width:1.5;vector-effect:non-scaling-stroke}
.s20-map .home .core{fill:var(--s-home)}
.s20-map .ring{fill:none;stroke:var(--s-core);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0}
.s20-map .home .ring{stroke:var(--s-home)}
.s20:not(.live) .s20-map .links path{stroke-width:6}
.s20:not(.live) .s20-map .arcs path{stroke-width:9}
.s20:not(.live) .s20-map .water{display:none}

/* ---------- stage and light ---------- */
.s20-stage{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--s-bg2) 0%,var(--s-bg) 55%,var(--s-bg2) 100%)}
.s20-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:var(--s-blend);
  background:radial-gradient(circle at var(--fx) var(--fy),color-mix(in oklab,var(--s-light) calc(10% + 16% * var(--lit)),transparent) 0%,color-mix(in oklab,var(--s-light) calc(3% + 8% * var(--lit)),transparent) 22%,transparent 50%)}
.s20:not(.live) .s20-stage::before{--fx:66%;--fy:48%;--lit:.6}

/* ---------- static layout (reduced motion / no JS) ---------- */
.s20:not(.live) .s20-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:center;padding:clamp(48px,6vw,96px) max(24px,calc((100vw - 1200px)/2))}
.s20:not(.live) .s20-photo,.s20:not(.live) .s20-labels,.s20:not(.live) .s20-year,.s20:not(.live) .s20-future-track,.s20:not(.live) .cap-photo{display:none}
.s20:not(.live) .s20-caps{position:relative;z-index:2;display:grid;gap:22px;grid-row:1}
.s20:not(.live) .s20-caps .cap{position:static}
.s20:not(.live) .cap h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
@media (max-width:820px){.s20:not(.live) .s20-stage{grid-template-columns:1fr}}

/* ---------- captions (type scale: 12.5 / 14 / 17 / display) ---------- */
.s20 .cap .when{font-size:14px;font-weight:600;color:var(--s-when);margin:0 0 6px;letter-spacing:.01em}
.s20 .cap h3{font-family:var(--serif);font-weight:600;color:var(--s-text);font-size:clamp(1.9rem,1.2rem + 2.2vw,3.1rem);line-height:1.2;margin:0 0 14px;text-wrap:balance}
.s20 .cap p{font-size:17px;line-height:1.75;color:var(--s-soft);margin:0;max-width:34em}
.s20 .cap b{color:var(--s-accent);font-weight:600}
.s20 .cap a{display:inline-block;margin-top:18px;color:var(--s-accent);font-weight:600;border-bottom:2px solid var(--s-halo);padding-bottom:2px}
.s20 .future{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--s-soft)}
.s20 .future li::before{content:"○ ";color:var(--s-when)}
.s20 .cap-photo{margin:0 0 20px;border:1px solid var(--line-strong);background:var(--s-panel);padding:6px}
.s20 .cap-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.s20 .cap-photo figcaption{font-size:12.5px;color:var(--s-soft);padding:6px 2px 0}

/* ---------- live (pinned, scroll-driven) ---------- */
.s20.live{height:820svh}
.s20.live .s20-stage{position:sticky;top:var(--hdr,0px);height:calc(100svh - var(--hdr,0px))}
.s20.live .s20-map{position:absolute;inset:0;width:100%;height:100%}
.s20.live.auto{height:auto}
.s20.live.auto .s20-stage{position:relative;top:0;height:clamp(560px,calc(100svh - var(--hdr,0px)),860px)}
/* autoplay controls: bottom right, above every layer */
.s20-ctl{position:absolute;z-index:9;right:max(16px,calc((100vw - 1200px)/2));bottom:18px;display:flex;align-items:center;gap:8px}
.s20-ctl button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:oklch(0.2 0.03 152 / .55);color:var(--white);backdrop-filter:blur(6px)}
.s20-ctl button:hover{background:oklch(0.80 0.15 128);color:var(--ink)}
.s20-ctl svg{width:16px;height:16px;fill:currentColor}
.s20-prog{width:84px;height:3px;border-radius:2px;background:oklch(0.2 0.03 152 / .25);overflow:hidden}
.s20-prog i{display:block;height:100%;background:oklch(0.80 0.15 128);transform-origin:left;transform:scaleX(0)}
/* left: activity photos as a large background panel behind the captions */
.s20-bgs{display:none}
.s20.live .s20-bgs{display:block;position:absolute;z-index:3;left:0;top:0;width:100%;height:100%;overflow:hidden;background:oklch(0.25 0.04 152);will-change:transform,width,height,border-radius,opacity}
.s20.live.landed .s20-bgs{box-shadow:0 0 0 3px var(--s-panel),0 0 0 5px var(--s-halo)}
.s20-bgs figure{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;will-change:opacity}
.s20-bgs img{width:100%;height:100%;object-fit:cover;display:block;will-change:scale}
.s20-bgs figcaption{opacity:var(--shade,1);position:absolute;right:max(24px,calc((100vw - 1200px)/2));top:20px;z-index:2;max-width:46%;text-align:right;font-size:13px;line-height:1.45;color:var(--white);text-shadow:0 1px 3px rgba(0,0,0,.8),0 1px 12px rgba(0,0,0,.6)}
/* a light shade at the top for the year, a dark filter rising from the bottom for the captions */
.s20-bgs::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--shade,1);background:linear-gradient(180deg,oklch(0.18 0.02 152 / .55) 0%,oklch(0.18 0.02 152 / 0) 26%,oklch(0.18 0.02 152 / 0) 42%,oklch(0.16 0.02 152 / .62) 64%,oklch(0.14 0.02 152 / .88) 100%)}
.s20.live .s20-caps{position:absolute;z-index:5;left:max(24px,calc((100vw - 1200px)/2));bottom:clamp(36px,7vh,72px);width:min(460px,38vw);height:0}
.s20.live .s20-caps .cap{position:absolute;left:0;right:0;bottom:0;opacity:0;will-change:opacity,translate}
.s20.live .cap .future{display:none}
.s20.live .cap-photo img{aspect-ratio:2/1}

/* captions over the photo panel: light text on the dark filter */
.s20.live .s20-caps{--s-text:var(--white);--s-soft:oklch(0.92 0.01 150);--s-accent:oklch(0.88 0.15 128);--s-when:oklch(0.88 0.15 128)}
.s20.live .s20-caps .cap p{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.s20.live .s20-caps .cap a{color:var(--white)}
/* logos sit straight on the scene: solid white over photos, their own colours over the map */
.s20.live .s20-caps .cap-logos img{filter:brightness(0) invert(1);opacity:.95}
.s20.live.map-mode .s20-caps .cap-logos img{filter:none;opacity:1}
.s20 .cap-logos span{color:inherit}

/* rolling year + a 2548→2573 track under it */
.s20.live .s20-year{position:absolute;z-index:5;left:max(24px,calc((100vw - 1200px)/2));top:clamp(20px,4.5vh,48px);color:var(--white);--s-accent:var(--white);--s-soft:oklch(0.9 0.01 150)}
.s20.live .s20-year .yl{background:rgba(255,255,255,.35)}
.s20.live .s20-year .yl em::before{background:rgba(255,255,255,.6)}
.s20.live .s20-year .yl b{box-shadow:0 0 0 4px rgba(255,255,255,.28)}
.s20.live .s20-year .odo{text-shadow:0 2px 16px rgba(0,0,0,.35)}
.s20 .odo{display:flex;align-items:flex-start;height:1.1em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);font-family:var(--serif);font-weight:600;font-size:clamp(3.4rem,2rem + 4.6vw,6.4rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.s20 .odo i{display:flex;flex-direction:column;font-style:normal;will-change:transform}
.s20 .odo span{display:block;height:1.1em;line-height:1.1}
.s20-year.is-future .odo{color:oklch(0.88 0.15 128)}
.s20 .yl{position:relative;display:block;width:clamp(200px,22vw,300px);height:2px;margin-top:14px;background:color-mix(in oklab,var(--s-accent) 22%,transparent)}
.s20 .yl b{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--s-accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--s-halo) 55%,transparent)}
.s20 .yl em{position:absolute;top:10px;translate:-50% 0;font-style:normal;font-size:13px;font-weight:500;color:var(--s-soft);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.s20 .yl em::before{content:"";position:absolute;left:50%;top:-12px;width:1px;height:8px;background:color-mix(in oklab,var(--s-accent) 45%,transparent)}

.s20-photo{position:absolute;z-index:4;left:0;top:0;margin:0;overflow:hidden;will-change:transform,width,height,border-radius,opacity}
.s20-photo img{width:100%;height:100%;object-fit:cover;display:block}
.s20-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in oklab,var(--s-panel) 95%,transparent) 0%,color-mix(in oklab,var(--s-panel) 72%,transparent) 36%,transparent 58%);opacity:var(--shade,1)}
.s20-photo figcaption{position:absolute;right:16px;bottom:14px;font-size:12.5px;color:var(--white);text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* labels and photo frames pinned to map points */
.s20-labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.s20-labels .lb{position:absolute;left:0;top:0;opacity:0;visibility:hidden;white-space:nowrap;font-size:14px;font-weight:600;color:var(--s-text);text-shadow:0 0 3px var(--s-panel),0 0 6px var(--s-panel),0 0 10px var(--s-panel);will-change:transform,opacity}
.s20-labels .lb.sm{font-size:12.5px;font-weight:500;color:var(--s-soft)}
.s20-labels .lb.prov-name{font-family:var(--serif);font-size:clamp(1.1rem,.9rem + .7vw,1.5rem);font-weight:600;color:var(--s-accent)}
.s20-labels .lb.pv{letter-spacing:.02em}
.s20-labels .lb.seal{display:flex;align-items:center;gap:8px;font-size:15px}
.s20-labels .lb.seal img{width:36px;height:36px;border-radius:50%}
.s20-labels .lb.logo-pin{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--s-soft)}
.s20-labels .lb.logo-pin img{height:20px;width:auto}
.s20 .cap-logos{display:flex;align-items:center;gap:14px;margin:0 0 16px;color:var(--s-soft);font-size:20px}
.s20 .cap-logos img{height:34px;width:auto}
.s20 .cap-logos.sm{margin:18px 0 0;gap:18px;flex-wrap:wrap}
.s20 .cap-logos.sm img{height:30px}
.s20-labels .frm{position:absolute;left:0;top:0;margin:0;width:224px;padding:6px 6px 8px;background:var(--s-panel);border:1px solid var(--line-strong);opacity:0;visibility:hidden;will-change:transform,opacity}
.s20-labels .frm img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.s20-labels .frm figcaption{font-size:12.5px;line-height:1.45;color:var(--s-soft);padding:6px 2px 0}
.s20-labels .leader{position:absolute;height:1.5px;background:var(--s-accent);transform-origin:0 50%;pointer-events:none}

.s20-labels .pulse{position:absolute;left:0;top:0;opacity:0;visibility:hidden;width:0;height:0}
.s20-labels .pulse i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:1.5px solid var(--s-halo);opacity:0;animation:s20-pulse 4.8s cubic-bezier(.2,.7,.3,1) infinite}
.s20-labels .pulse i:nth-child(2){animation-delay:1.6s}
.s20-labels .pulse i:nth-child(3){animation-delay:3.2s}
@keyframes s20-pulse{0%{scale:.15;opacity:.8}100%{scale:1.5;opacity:0}}

/* ambient life: soft light travelling along the routes, sites breathing */
.s20-map .flow{fill:none;stroke:var(--s-spark);stroke-linecap:round;stroke-dasharray:0 .34;vector-effect:none;opacity:0;filter:drop-shadow(0 0 3px color-mix(in oklab,var(--s-spark) 80%,transparent))}
.s20.live .s20-map .flow{animation:s20-flow 5.5s linear infinite}
.s20.live .s20-map .flow.in{stroke-dasharray:0 .5;animation-name:s20-flow-in;animation-duration:7s}
@keyframes s20-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-.34}}
@keyframes s20-flow-in{from{stroke-dashoffset:0}to{stroke-dashoffset:-.5}}
.s20.live .s20-map .sites .halo,.s20.live .s20-map .caps .halo{animation:s20-breathe 2.8s ease-in-out infinite}
.s20.live .s20-map .sites .halo:nth-of-type(3n){animation-delay:-.9s}
.s20.live .s20-map .sites .halo:nth-of-type(3n+1){animation-delay:-1.8s;animation-duration:3.4s}
.s20.live .s20-map .caps .halo:nth-of-type(2n){animation-delay:-1.3s}
@keyframes s20-breathe{0%,100%{opacity:1}50%{opacity:.7}}

.s20-future-track{position:absolute;z-index:5;left:calc(46% + 24px);right:max(24px,calc((100vw - 1200px)/2));bottom:40px;opacity:0;display:grid;grid-template-columns:auto 1fr 1fr 1fr;align-items:start;font-size:14px;color:var(--s-soft)}
.s20-future-track .seg{position:relative;padding-top:20px}
.s20-future-track .seg::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px dotted color-mix(in oklab,var(--s-when) 55%,transparent)}
.s20-future-track .seg.now::before{border-top:2px solid var(--s-when)}
.s20-future-track .seg::after{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;border:2px solid var(--s-when);background:var(--s-panel);transition:background .4s var(--ease)}
.s20-future-track .seg.on::after{background:var(--s-when)}
.s20-future-track b{display:block;color:var(--s-text);font-weight:600}
.s20-future-track .seg.now{padding-right:28px}

@media (max-width:820px){
  .s20.live .cap .future{display:grid}
  .s20.live .s20-year{left:20px;top:14px}
  .s20-bgs::after{background:linear-gradient(180deg,oklch(0.18 0.02 152 / .5) 0%,oklch(0.18 0.02 152 / .1) 22%,oklch(0.16 0.02 152 / .7) 48%,oklch(0.14 0.02 152 / .92) 100%)}
  .s20-bgs figcaption{right:14px;left:auto;top:14px;bottom:auto;max-width:60%}
  .s20.live .s20-caps{left:20px;right:20px;width:auto;top:auto;bottom:24px;translate:none}
  .s20.live .s20-caps .cap{top:auto;bottom:0;translate:0 0}
  .s20 .cap h3{font-size:1.75rem}
  .s20 .cap p{font-size:16px}
  .s20 .cap-photo{display:none}
  .s20 .odo{font-size:2.6rem}
  .s20 .yl{width:160px;margin-top:10px}
  .s20 .yl em{display:none}
  .s20-labels .frm{width:150px;padding:4px 4px 6px}
  .s20-photo::after{background:linear-gradient(0deg,color-mix(in oklab,var(--s-panel) 97%,transparent) 0%,color-mix(in oklab,var(--s-panel) 88%,transparent) 40%,transparent 64%)}
  .s20-photo figcaption{top:14px;right:14px;bottom:auto}
  .s20-labels .frm figcaption{display:none}
  .s20-labels .hide-sm{display:none}
  .s20-labels .lb.logo-pin{display:none}
  .s20 .cap-logos{gap:10px;font-size:16px}
  .s20 .cap-logos img{height:22px}
  .s20 .cap-logos.sm{gap:12px}
  .s20 .cap-logos.sm img{height:20px}
  .s20-future-track{display:none}
  .s20-labels .pulse i{left:-40px;top:-40px;width:80px;height:80px}
}

/* climax: the photo has gone and the map fills the stage, so captions and year switch to dark on a white wash */
.s20.live .s20-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background:linear-gradient(90deg,color-mix(in oklab,var(--s-panel) 94%,transparent) 0%,color-mix(in oklab,var(--s-panel) 78%,transparent) 30%,transparent 50%)}
.s20.live.map-mode .s20-stage::after{opacity:1}
.s20.live.map-mode .s20-caps{--s-text:var(--ink);--s-soft:var(--ink-soft);--s-accent:var(--green-deep);--s-when:var(--green-deep)}
.s20.live.map-mode .s20-caps .cap p{text-shadow:none}
.s20.live.map-mode .s20-caps .cap a{color:var(--green-deep)}
.s20.live.map-mode .s20-year{--s-accent:var(--green-deep);--s-soft:var(--ink-soft);color:var(--green-deep)}
.s20.live.map-mode .s20-year .odo{text-shadow:none}
.s20.live.map-mode .s20-year .yl{background:color-mix(in oklab,var(--green-deep) 22%,transparent)}
.s20.live.map-mode .s20-year .yl b{box-shadow:0 0 0 4px color-mix(in oklab,var(--s-halo) 55%,transparent)}
@media (max-width:820px){
  .s20.live .s20-stage::after{background:linear-gradient(0deg,color-mix(in oklab,var(--s-panel) 97%,transparent) 0%,color-mix(in oklab,var(--s-panel) 85%,transparent) 40%,transparent 60%)}
  .s20.live.map-mode .s20-year{top:14px}
}

/* activity memories: round photos pinned where they happened */
.s20-labels .mem{position:absolute;left:0;top:0;opacity:0;visibility:hidden;width:116px;display:grid;justify-items:center;gap:6px;will-change:transform,opacity}
.s20-labels .mem img{width:116px;height:116px;border-radius:50%;object-fit:cover;border:3px solid var(--s-panel);box-shadow:0 0 0 2px var(--s-halo),0 10px 24px -12px oklch(0.25 0.04 152 / .5)}
.s20-labels .mem em{white-space:nowrap;font-style:normal;font-size:12.5px;font-weight:600;color:var(--s-text);background:var(--s-panel);padding:2px 8px;border:1px solid var(--line-strong)}
@media (max-width:820px){.s20-labels .mem{width:76px}.s20-labels .mem img{width:76px;height:76px}.s20-labels .mem em{display:none}}

/* the future track sits over the closing photo: give it its own dark, blurred bar */
.s20.live .s20-future-track{padding:14px 18px 12px;background:oklch(0.2 0.03 152 / .62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:oklch(0.93 0.01 150);--s-when:oklch(0.88 0.15 128);--s-text:var(--white);--s-panel:oklch(0.2 0.03 152)}
.s20.live .s20-caps .cap-logos.sm img{height:30px}



.s20-map .conf path{stroke:oklch(0.55 0.08 148 / .7)}
.s20-labels .lb.cn{font-size:13.5px;font-weight:600;color:var(--s-text)}



/* montage: 20 years of activity, rows looping continuously behind a dark filter */
.s20-montage{display:none}
.s20.live .s20-montage{display:flex;flex-direction:column;justify-content:center;gap:12px;position:absolute;inset:0;z-index:2;overflow:hidden;opacity:0;visibility:hidden;background:oklch(0.2 0.03 152);--rh:clamp(118px,19vh,176px)}
.s20-montage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,oklch(0.16 0.03 152 / .94) 0%,oklch(0.16 0.03 152 / .8) 30%,oklch(0.16 0.03 152 / .42) 58%,oklch(0.16 0.03 152 / .5) 100%),linear-gradient(0deg,oklch(0.14 0.03 152 / .75) 0%,transparent 30%)}
.s20-montage .mt-row{display:flex;width:max-content;will-change:transform}
.s20-montage .mt-set{display:flex;gap:12px;padding-right:12px}
.s20.live .s20-montage .mt-row{animation:s20-marquee var(--dur,140s) linear infinite}
.s20.live .s20-montage .mt-row[data-dir="-1"]{animation-direction:reverse}
.s20.live .s20-montage:not(.handed) .mt-row{animation-play-state:paused}
@keyframes s20-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.s20-montage .mt-tile{margin:0;height:var(--rh);aspect-ratio:var(--ar);border-radius:12px;overflow:hidden;background:oklch(0.3 0.03 152);flex:none}
.s20-montage img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.9)}
.s20-montage .mt-hero,.s20-montage .mt-hero2{opacity:0}
.s20-montage.handed .mt-hero,.s20-montage.handed .mt-hero2{opacity:1}
@media (max-width:820px){
  .s20.live .s20-montage{--rh:clamp(92px,13vh,122px);gap:8px;justify-content:flex-start;padding-top:64px}
  .s20-montage .mt-set{gap:8px;padding-right:8px}
  .s20-montage .mt-tile{border-radius:9px}
  .s20-montage::after{background:linear-gradient(0deg,oklch(0.14 0.03 152 / .96) 0%,oklch(0.14 0.03 152 / .85) 38%,oklch(0.16 0.03 152 / .35) 70%,oklch(0.16 0.03 152 / .55) 100%)}
}

/* finale: the closing line settles in the centre of the moving wall, with one clear action */
.s20 .cap-final{text-align:center}
.s20 .cap-final p{margin-inline:auto}
.s20-montage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);background:radial-gradient(ellipse 46% 42% at 50% 50%,oklch(0.14 0.03 152 / .82) 0%,oklch(0.14 0.03 152 / .5) 55%,transparent 100%)}
.s20.live.finale .s20-montage::before{opacity:1}
.s20 .cap-final h3{font-size:clamp(2.2rem,1.4rem + 2.8vw,3.8rem)}
.s20 .cap .cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:14px 26px;background:var(--white);color:var(--green-deep);font-weight:600;font-size:16px;border:0;border-bottom:0;text-decoration:none;transition:background .2s var(--ease),transform .2s var(--ease)}
.s20 .cap .cta:hover{background:oklch(0.95 0.04 128)}
.s20 .cap .cta:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.s20:not(.live) .cap .cta{background:var(--green-deep);color:var(--white)}
.s20.live .s20-caps .cap .cta{color:var(--green-deep)}
.s20.live .s20-caps .cap-final{width:min(760px,86vw);right:auto}
@media (max-width:820px){.s20.live .s20-caps .cap-final{width:calc(100vw - 40px)}}
.s20 .cap-final .final-logo{display:block;margin:0 auto 20px;height:clamp(104px,15vh,140px);width:auto;padding:clamp(12px,1.8vh,18px);background:var(--white);border-radius:50%;box-sizing:content-box;aspect-ratio:727/786}
.s20.live .s20-caps .cap-final .final-logo{filter:none}

/* northern network, simplified: one green for every province with a school, schools as dots, nothing else */
.s20-map .cmprov path{fill:var(--s-fill);stroke:oklch(0.46 0.13 146 / .55);stroke-width:1.2}
.s20-map .provfill path{fill:var(--s-fill)}
.s20-map .prov path{stroke:oklch(0.52 0.06 145 / .35)}
.s20-map .sites .core{fill:var(--green-deep)}
.s20-labels .lb.pv{color:oklch(0.42 0.03 150);font-weight:500}

/* region caption: the 2566 conference (10 countries), then the 2569 anniversary (13) */
.s20 .cap-region .ph1{display:none}
.s20.live .cap-region .ph1{display:inline}
.s20.live .cap-region .ph2,.s20.live .cap-region.plus .ph1{display:none}
.s20.live .cap-region.plus .ph2{display:inline;animation:s20-ph .6s cubic-bezier(.25,1,.5,1)}
@keyframes s20-ph{from{opacity:0}to{opacity:1}}
/* the second Confucius classroom, pinned on the province map */
.s20-labels .lb.cls{color:var(--green-deep);font-weight:600}
@media (prefers-reduced-motion:reduce){.s20.live .cap-region.plus .ph2{animation:none}}


/* ---------- region beat: the ten 2566 conference countries show the room through their shapes ---------- */
.s20-conf{display:none}
.s20.live .s20-conf{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
.s20-map .conf-room path{opacity:0;stroke:none}
/* map legend explaining the texture */
.cf-note{position:absolute;right:max(24px,calc((100vw - 1200px)/2));top:clamp(20px,4.5vh,48px);margin:0;padding:8px 12px 8px 36px;max-width:250px;font-size:12px;line-height:1.4;color:var(--ink-soft);background:color-mix(in oklab,var(--white) 88%,transparent);border:1px solid var(--line-strong);opacity:0}
.cf-note b{color:var(--green-deep);font-weight:600;margin-right:6px}
.cf-note::before{content:"";position:absolute;left:10px;top:10px;width:16px;height:12px;background:url(../images/ci/conf-2566/hall.jpg) center/cover;filter:grayscale(1) sepia(.5) hue-rotate(60deg) saturate(1.4) brightness(.9)}
@media (max-width:820px){.cf-note{top:auto;bottom:calc(44% + 8px);right:12px;max-width:190px;font-size:11px}}

/* ===== Story framing (2 Oct 2026): a simple title card first; no chapter labels, year counter or timeline ===== */
.s20.live .s20-year{display:none}
.s20 .s20-intro{display:none}
.s20.live.auto .s20-intro{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:24px;text-align:center;background:oklch(0.2 0.035 152 / .82);color:var(--white)}
.s20-intro img{display:block;margin:0 auto 20px;height:clamp(96px,14vh,128px);width:auto;padding:14px;background:var(--white);border-radius:50%;box-sizing:content-box}
.s20-intro h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,1.4rem + 2.8vw,3.8rem);line-height:1.2;margin:0;color:var(--white)}
.s20-intro p.lead{font-size:18px;line-height:1.7;color:oklch(0.92 0.01 150);margin:12px auto 0;max-width:34em}
.s20-intro button{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:12px 24px;background:oklch(0.8 0.15 128);color:var(--ink);font:inherit;font-weight:600;border:0;cursor:pointer}
.s20-intro button:hover{background:var(--white)}
.s20-intro button svg{width:14px;height:14px;fill:currentColor}
.s20.on-intro .s20-caps,.s20.on-intro .s20-bgs figcaption{opacity:0!important}
@media (max-width:820px){.s20-intro p.lead{font-size:16px}}
/* phones: the play controls sit top-left (where the year used to be) so they never cover the caption */
@media (max-width:820px){.s20-ctl{left:16px;right:auto;top:14px;bottom:auto}}
@media (max-width:820px){.s20-ctl .s20-prog{display:none}}
/* playback controls removed at the client's request (2 Oct 2026); the story still pauses when it is off screen or the tab is hidden */
.s20-ctl{display:none!important}