/* ch-schooltrip: the chapter of a school-travel agency, never named (Amazing Companies). Every rule sits under #ch-schooltrip or an
   .ss-* / .rm-* class; the chapter's own classes (.ch, .ch-head, .tag) are builder A's. The clips are drawn by ch-schooltrip.js on
   components/motion/ and components/clips/ (a wide 1200 by 515 for the opening, a 600 square for each step); what is
   drawn inside is a picture of the console, so it wears the console's own colours (the CARTA of Atlas, whose components
   it vendors: white paper on a pastel wash, indigo #4c59e6), not the site's. The roadmap (.rm-*) is the site's own
   page-level piece: it uses the tokens, so it follows night or day. */

#ch-schooltrip .schooltrip-sec{padding-block:clamp(56px,7vw,112px) 0}
#ch-schooltrip .schooltrip-sec .cl-h2{max-width:14ch}
#ch-schooltrip .schooltrip-sec .cl-p{max-width:44ch}
#ch-schooltrip .schooltrip-lesson{width:min(1200px,100% - 2 * var(--gutter,24px));margin:clamp(96px,11vw,176px) auto 0;display:grid;gap:16px;justify-items:start}
#ch-schooltrip .schooltrip-lesson p{margin:0}
#ch-schooltrip .schooltrip-lesson .l1{font-family:var(--serif);font-size:clamp(34px,4.4vw,72px);line-height:1;letter-spacing:-.025em;max-width:18ch;text-wrap:balance}
#ch-schooltrip .schooltrip-lesson .l2{font-size:var(--t-corpo);line-height:1.5;color:var(--ink-2);max-width:52ch}

.ss-frame.cl-frame{background:radial-gradient(80% 90% at 50% 0%,#17171d,#0b0b0e 70%);box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)}
.ss-frame{
  --a-wash:oklch(96.9% .014 292);--a-s:#fff;--a-s2:oklch(98.2% .006 290);--a-s3:oklch(95.4% .012 290);--a-s4:oklch(92% .014 290);
  --a-ink:oklch(21% .012 280);--a-ink2:oklch(37% .012 280);--a-ink3:oklch(50% .014 280);--a-ink4:oklch(62% .012 280);
  --a-brand:#4c59e6;--a-brand2:#3a46c4;--a-soft:oklch(93.5% .05 288);
  --a-ok:oklch(60% .15 155);--a-ok-soft:oklch(94.5% .04 155);--a-ok-ink:#177245;
  --a-warn:oklch(70% .14 70);--a-warn-soft:oklch(95% .035 80);--a-warn-ink:#9a5a08;
  --a-red:oklch(58% .21 27);--a-red-soft:oklch(95.5% .026 27);
  --a-hair:oklch(28% .03 292/.09);--a-hair2:oklch(28% .03 292/.16);
  --t1:oklch(90.5% .065 295);--t1i:oklch(36% .14 295);--t2:oklch(91.5% .05 245);--t2i:oklch(37% .11 250);
  --t3:oklch(92.5% .06 160);--t3i:oklch(36% .10 165);--t4:oklch(93% .075 95);--t4i:oklch(40% .10 75);--t5:oklch(91.5% .055 20);--t5i:oklch(38% .13 20);--t6:oklch(91% .055 330);--t6i:oklch(37% .13 330);
  --a-ring:0 0 0 1px oklch(32% .06 292/.07),0 1px 2px oklch(30% .09 292/.08);
  --a-lift:0 0 0 1px oklch(32% .06 292/.07),0 12px 30px -10px oklch(30% .09 292/.28);
}
.ss-frame .cl-cv{color:var(--a-ink)}

/* ---------- pieces of the console ---------- */
.ss-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:620;white-space:nowrap;background:var(--a-s3);color:var(--a-ink2)}
.ss-chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ss-chip svg{width:12px;height:12px;stroke-width:2.3}
.ss-chip.t1{background:var(--t1);color:var(--t1i)}.ss-chip.t2{background:var(--t2);color:var(--t2i)}.ss-chip.t3{background:var(--t3);color:var(--t3i)}
.ss-chip.t4{background:var(--t4);color:var(--t4i)}.ss-chip.t5{background:var(--t5);color:var(--t5i)}.ss-chip.t6{background:var(--t6);color:var(--t6i)}
.ss-chip.ok{background:var(--a-ok-soft);color:var(--a-ok-ink)}.ss-chip.warn{background:var(--a-warn-soft);color:var(--a-warn-ink)}.ss-chip.brand{background:var(--a-soft);color:var(--a-brand2)}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:9px;background:var(--a-s);box-shadow:var(--a-ring);font-size:13.5px;font-weight:620;color:var(--a-ink);white-space:nowrap;transition:background-color .15s,transform .12s}
.ss-btn svg{width:15px;height:15px;stroke-width:2.2}
.ss-btn.go{background:var(--a-brand);color:#fff;box-shadow:0 1px 2px oklch(30% .15 280/.4)}
.ss-btn.go.hover{background:var(--a-brand2)}
.ss-btn.hover{background:var(--a-s3)}
.ss-btn.sm{height:27px;padding:0 11px;font-size:12.5px;border-radius:8px}
.ss-btn.press{transform:scale(.94)}
.ss-cap{position:absolute;left:50%;bottom:20px;translate:-50% 0;z-index:35;width:max-content;max-width:92%;padding:11px 20px;border-radius:999px;background:rgb(12 12 16/.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12);color:#fff;font-size:19px;font-weight:540;letter-spacing:-.01em;white-space:nowrap}
.ss-cap em{font-style:normal;color:#aab2ff}
.ss-note{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:rgb(255 255 255/.08);font-size:12.5px;color:rgb(255 255 255/.7);white-space:nowrap}
.ss-note::before{content:"";width:6px;height:6px;border-radius:50%;background:#8f9bff}
.ss-sm{font-size:12px}

/* ---------- the opening, scene 1: the queue ---------- */
.ss-count{position:absolute;display:grid;gap:6px;color:#fff}
.ss-count small{font-size:15px;letter-spacing:.02em;color:rgb(255 255 255/.62)}
.ss-count b{font-family:var(--serif);font-weight:400;font-size:84px;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ss-count.out b{color:#aab2ff}
.ss-req{position:absolute;width:150px;height:44px;border-radius:10px;background:var(--a-s);box-shadow:0 8px 18px -8px rgb(0 0 0/.6),0 0 0 1px rgb(255 255 255/.08);display:flex;align-items:center;gap:9px;padding:0 10px;rotate:var(--r,0deg)}
.ss-req i{width:24px;height:24px;border-radius:7px;background:var(--c,#cfd3ff);flex:none}
.ss-req u{display:grid;gap:5px;flex:1;text-decoration:none}
.ss-req u::before,.ss-req u::after{content:"";height:6px;border-radius:3px;background:#d6d6de}
.ss-req u::after{width:60%}
.ss-req.out{width:150px;background:#e9edff;box-shadow:0 8px 18px -8px rgb(0 0 0/.6),0 0 0 1px #8f9bff}
.ss-lane{position:absolute;height:2px;background:repeating-linear-gradient(90deg,rgb(255 255 255/.28) 0 8px,transparent 8px 16px)}
.ss-gate{position:absolute;width:6px;border-radius:3px;background:#8f9bff}
.ss-wait{position:absolute;left:48px;width:1104px;height:96px;color:#fff}
.ss-wait .lab{display:flex;align-items:center;gap:12px;font-size:16px;color:rgb(255 255 255/.75);margin-bottom:12px}
.ss-wait .lab b{color:#fff;font-weight:620}
.ss-days{position:relative;height:34px;border-radius:10px;background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.ss-days .tk{position:absolute;top:0;bottom:0;border-left:1px solid rgb(255 255 255/.12);padding:9px 0 0 8px;font-size:11.5px;color:rgb(255 255 255/.4)}
.ss-days .w{position:absolute;left:0;top:0;bottom:0;border-radius:10px 0 0 10px;background:repeating-linear-gradient(135deg,rgb(255 255 255/.16) 0 7px,rgb(255 255 255/.06) 7px 14px);display:flex;align-items:center;padding-left:14px;font-size:14px;font-weight:600;color:rgb(255 255 255/.85);transform-origin:0 50%;overflow:hidden;white-space:nowrap}
.ss-days .d{position:absolute;top:0;bottom:0;border-radius:0 10px 10px 0;background:linear-gradient(180deg,#6a76f2,#4c59e6);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:650;color:#fff;transform-origin:0 50%;white-space:nowrap}

/* scene 2: the console */
.ss-app{position:absolute;left:40px;top:22px;width:1120px;height:471px;border-radius:18px;background:var(--a-wash);box-shadow:0 50px 100px -40px #000,0 0 0 1px rgb(255 255 255/.08);display:grid;grid-template-columns:176px 1fr;gap:10px;padding:10px;overflow:hidden}
.ss-side{display:grid;align-content:start;gap:2px;padding:6px 4px}
.ss-side h5{margin:12px 10px 4px;font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--a-ink4)}
.ss-side h5:first-child{margin-top:4px}
.ss-side>span{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:540;color:var(--a-ink2)}
.ss-side>span svg{width:16px;height:16px;stroke:var(--a-ink3);stroke-width:1.9;flex:none}
.ss-side>span.on{background:var(--a-s);box-shadow:var(--a-ring);color:var(--a-ink)}
.ss-side>span.on svg{stroke:var(--a-brand)}
.ss-main{position:relative;min-width:0;border-radius:14px;background:var(--a-s);box-shadow:var(--a-ring);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.ss-top{display:flex;align-items:center;gap:12px;height:48px;padding:0 18px;border-bottom:1px solid var(--a-hair)}
.ss-top h3{font-size:17px;font-weight:650;letter-spacing:-.02em;margin:0}
.ss-grow{margin-left:auto}
.ss-tab{display:grid;grid-template-columns:1.35fr 1.2fr 1fr .8fr .8fr;align-items:center;gap:10px;height:40px;padding:0 18px;font-size:13.5px;border-bottom:1px solid var(--a-hair);color:var(--a-ink2)}
.ss-tab b{font-weight:620;color:var(--a-ink)}
.ss-tab.hd{height:32px;font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--a-ink4);background:var(--a-s2)}
.ss-tab.hover,.ss-tab.sel{background:var(--a-soft)}
.ss-rows{position:relative;overflow:hidden}
.ss-peek{position:absolute;right:0;top:0;bottom:0;width:470px;background:var(--a-s);box-shadow:-1px 0 0 var(--a-hair),-24px 0 50px -30px oklch(30% .09 292/.3);display:grid;grid-template-rows:auto auto 1fr auto;z-index:4}
.ss-peek .hd{display:flex;align-items:center;gap:10px;padding:10px 18px 4px}
.ss-peek .ss-ln{height:38px}
.ss-peek .ss-foot{padding:10px 18px}
.ss-peek .hd b{font-size:16.5px;font-weight:650;letter-spacing:-.015em}
.ss-peek .hd small{display:block;font-size:12.5px;color:var(--a-ink3);margin-top:1px}
.ss-tabs{display:flex;gap:4px;padding:6px 18px 10px;border-bottom:1px solid var(--a-hair)}
.ss-tabs span{padding:5px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--a-ink3)}
.ss-tabs span.on{background:var(--a-s3);color:var(--a-ink)}
.ss-lines{padding:8px 18px;display:grid;grid-auto-rows:min-content;gap:0;align-content:start}
.ss-ln{position:relative;display:grid;grid-template-columns:30px 1fr auto;gap:0 11px;align-items:center;height:44px;border-bottom:1px solid var(--a-hair);padding-left:2px}
.ss-ln .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--a-s3);color:var(--a-ink2)}
.ss-ln .ic svg{width:15px;height:15px;stroke-width:2}
.ss-ln b{font-size:14px;font-weight:620;display:block;line-height:1.2}
.ss-ln small{font-size:12px;color:var(--a-ink3)}
.ss-ln .v{display:flex;align-items:center;gap:8px}
.ss-ln.prop::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(180deg,#7c6cf5,#4c9bf5,#f58ad0)}
.ss-skel{display:inline-block;width:70px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--a-s3) 20%,var(--a-s4) 50%,var(--a-s3) 80%) 0 0/250% 100%;animation:cl-shine 1.5s linear infinite}
.ss-ln.bone .ic{opacity:.5}
.ss-foot{display:flex;align-items:center;gap:9px;padding:12px 18px;border-top:1px solid var(--a-hair);background:var(--a-s2)}
.ss-price{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--a-ink3)}
.ss-price svg{width:15px;height:15px;stroke-width:2.2;flex:none}
.ss-load{color:transparent;background:linear-gradient(90deg,oklch(50% .01 280/.35) 20%,oklch(30% .02 280/.9) 50%,oklch(50% .01 280/.35) 80%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;animation:cl-shine 1.5s linear infinite;font-size:13px;white-space:nowrap}

/* a stage that crosses the console: the gate */
.ss-flow{display:flex;align-items:center;gap:6px;padding:12px 18px}
.ss-flow .st{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font-size:12.5px;font-weight:620;background:var(--a-s3);color:var(--a-ink3);transition:background-color .35s,color .35s}
.ss-flow .st.on{background:var(--a-soft);color:var(--a-brand2)}
.ss-flow .st.done{background:var(--a-ok-soft);color:var(--a-ok-ink)}
.ss-flow .st.pink.on{background:var(--t6);color:var(--t6i)}
.ss-flow .ar{width:12px;height:2px;background:var(--a-hair2);border-radius:1px}

/* ---------- the steps: a 600 square ---------- */
.ss-card{position:absolute;border-radius:16px;background:var(--a-s);box-shadow:var(--a-lift)}
.ss-mail{left:24px;top:20px;width:552px;padding:14px 17px;display:grid;gap:8px}
.ss-mail .fr{display:flex;align-items:center;gap:10px}
.ss-mail .fr img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.ss-mail .fr b{font-size:15px;font-weight:640;display:block}.ss-mail .fr small{font-size:12px;color:var(--a-ink3)}
.ss-mail p{margin:0;font-size:15px;line-height:1.5;color:var(--a-ink2)}
.ss-mail mark{background:oklch(93% .08 270);color:var(--a-ink);border-radius:4px;padding:1px 3px}
.ss-mail mark.hl{background:oklch(95% .06 80);color:var(--a-ink)}
.ss-mail mark.hl.gone{background:oklch(95.5% .026 27);color:var(--a-red);text-decoration:line-through;text-decoration-thickness:1.5px}
.ss-req2{left:24px;top:222px;width:552px;padding:14px 16px;display:grid;gap:0}
.ss-req2 .hd{display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid var(--a-hair)}
.ss-req2 .hd b{font-size:15.5px;font-weight:650}
.ss-req2 .f{display:grid;grid-template-columns:120px 1fr;align-items:center;height:36px;border-bottom:1px solid var(--a-hair);font-size:14px}
.ss-req2 .f span:first-child{color:var(--a-ink3);display:flex;align-items:center;gap:8px}
.ss-req2 .f svg{width:14px;height:14px;stroke-width:2}
.ss-req2 .f b{font-weight:620}
.ss-lt{left:24px;top:436px;width:552px;height:140px;overflow:hidden;display:grid;grid-auto-rows:min-content}
.ss-lt .ss-tab{grid-template-columns:1.3fr 1.1fr 1fr;height:36px;font-size:13px}
.ss-lt .ss-tab.hd{height:28px}
.ss-note2{position:absolute;left:24px;top:386px;font-size:12.5px;color:rgb(255 255 255/.7);display:flex;align-items:center;gap:7px}
.ss-sheet{left:24px;top:22px;width:552px;height:556px;display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}
.ss-sheet .hd{display:flex;align-items:center;gap:10px;padding:15px 18px 9px}
.ss-sheet .hd b{font-size:17px;font-weight:650;letter-spacing:-.015em}
.ss-sheet .hd small{display:block;font-size:12.5px;color:var(--a-ink3)}
.ss-sheet .ss-lines{padding:6px 18px}
.ss-sheet .ss-ln{height:56px}
.ss-sheet .ss-ln .ic{width:34px;height:34px;border-radius:10px}
.ss-sheet .ss-ln{grid-template-columns:36px 1fr auto}
.ss-sheet .ss-ln b{font-size:15px}.ss-sheet .ss-ln small{font-size:12.5px}
.ss-glow{position:absolute;inset:-2px;border-radius:18px;pointer-events:none;box-shadow:0 0 0 2px transparent;opacity:0}
.ss-glow.on{opacity:1;box-shadow:0 0 0 2px #9d8cff,0 0 40px 4px rgb(157 140 255/.45),0 0 90px 10px rgb(95 170 255/.28)}
.ss-gatebox{left:24px;top:22px;width:552px;display:grid}
.ss-gatebox .ss-flow{padding:16px 18px 12px;flex-wrap:wrap}
.ss-chk{display:grid;gap:0;padding:0 18px 6px}
.ss-ck{display:grid;grid-template-columns:24px 1fr auto;gap:0 10px;align-items:center;height:46px;border-top:1px solid var(--a-hair);font-size:14px}
.ss-ck u{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;border:2px solid var(--a-hair2);text-decoration:none;color:#fff;transition:background-color .25s,border-color .25s}
.ss-ck u svg{width:12px;height:12px;stroke-width:3.4;opacity:0;transition:opacity .2s}
.ss-ck.dn u{background:var(--a-brand);border-color:var(--a-brand)}.ss-ck.dn u svg{opacity:1}
.ss-ck.lock u{border-color:var(--a-warn)}
.ss-ck small{font-size:12px;color:var(--a-ink3)}
.ss-ck b{font-weight:600}
.ss-send .to img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.ss-send{left:24px;top:318px;width:552px;padding:14px 16px;display:grid;gap:10px}
.ss-send .to{display:flex;align-items:center;gap:9px}
.ss-send .to b{font-size:14.5px}
.ss-send p{margin:0;font-size:13.5px;line-height:1.45;color:var(--a-ink2)}
.ss-send .row{display:flex;align-items:center;gap:8px}
.ss-stamp{position:absolute;right:30px;top:520px;z-index:6;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;background:var(--a-ok);color:#fff;font-size:16px;font-weight:650;letter-spacing:-.01em;rotate:-4deg;box-shadow:0 14px 28px -10px oklch(40% .15 155/.6)}
.ss-stamp svg{width:17px;height:17px;stroke-width:3}

/* ================= the roadmap: one line that rises, on a stage the scroll plays =================
   The stage sticks below the docked bar and its tab strip: --rm-top is measured from them by ch-schooltrip.js (a fallback here).
   Black and white, the only colour is a tag's. Text sizes are the tokens (--px, --t-*). */
#ch-schooltrip .rm{position:relative;margin-top:clamp(96px,11vw,176px)}
#ch-schooltrip .rm-head{width:min(1200px,100% - 2 * var(--gutter,24px));margin:0 auto;padding-bottom:clamp(20px,3vw,40px);display:grid;gap:12px;justify-items:start}
#ch-schooltrip .rm-head h3{font-family:var(--serif);font-size:var(--t-h2);font-weight:400;line-height:1;letter-spacing:-.022em;text-wrap:balance;margin:0}
#ch-schooltrip .rm-head p{margin:0;font-size:var(--t-corpo);line-height:1.45;color:var(--ink-2);max-width:62ch}
#ch-schooltrip .rm-live{position:relative;height:640vh;height:640svh}
#ch-schooltrip .rm-stage{--rm-top:138px;position:sticky;top:var(--rm-top);height:calc(100vh - var(--rm-top) - 14px);height:calc(100svh - var(--rm-top) - 14px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
#ch-schooltrip .rm-in{flex:1;min-height:0;width:min(1200px,100% - 2 * var(--gutter,24px));margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px)}
#ch-schooltrip .rm-chart{flex:1;min-height:0;display:flex;flex-direction:column}
#ch-schooltrip .rm-plot{position:relative;flex:1;min-height:200px}
#ch-schooltrip .rm-ylab{position:absolute;left:0;top:0;margin:0;font-size:var(--t-nota);color:var(--ink-3)}
#ch-schooltrip .rm-svg{position:absolute;left:0;top:0;overflow:visible}
#ch-schooltrip .rm-axl{stroke:var(--riga-2);stroke-width:1}
#ch-schooltrip .rm-base{stroke:var(--riga);stroke-width:1;stroke-dasharray:2 5}
#ch-schooltrip .rm-area{fill:url(#rm-fill)}
#ch-schooltrip .rm-svg .s0{stop-color:var(--ink);stop-opacity:.1}
#ch-schooltrip .rm-svg .s1{stop-color:var(--ink);stop-opacity:0}
#ch-schooltrip .rm-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:8 6;stroke-linecap:round;stroke-linejoin:round}
#ch-schooltrip .rm-cur{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 4;transition:opacity .3s}
#ch-schooltrip .rm-dot{fill:var(--fondo);stroke:var(--ink-3);stroke-width:1.5;transition:fill .3s,stroke .3s}
#ch-schooltrip .rm-dot.on{fill:var(--ink);stroke:var(--ink)}
#ch-schooltrip .rm-head-dot,#ch-schooltrip .rm-svg .rm-head{fill:var(--ink);transition:opacity .3s}
#ch-schooltrip .rm-ring{fill:var(--ink);fill-opacity:.14;transition:opacity .3s}
#ch-schooltrip .rm-tick{position:absolute;bottom:0;width:1px;height:6px;margin-left:-.5px;background:var(--riga-2);transition:background-color .3s,height .3s}
#ch-schooltrip .rm-tick.on{background:var(--ink-2)}
#ch-schooltrip .rm-tick.now{height:12px;background:var(--ink)}
/* the three points: the last one the cursor has reached is big */
#ch-schooltrip .rm-pt{position:absolute;display:flex;flex-direction:column;gap:8px;pointer-events:none}
#ch-schooltrip .rm-pt[data-side="r"]{align-items:flex-end}
#ch-schooltrip .rm-pv{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:calc(22 * var(--px));color:var(--ink-3);transition:font-size .8s var(--e-molla),color .4s}
#ch-schooltrip .rm-pt[data-st="cur"] .rm-pv{font-size:calc(64 * var(--px));color:var(--ink)}
#ch-schooltrip .rm-pt[data-st="past"] .rm-pv{color:var(--ink-2)}
#ch-schooltrip .rm-pt[data-st="all"] .rm-pv{font-size:calc(40 * var(--px));color:var(--ink)}
#ch-schooltrip .rm-tg{opacity:0;transition:opacity .45s var(--e-ui)}
#ch-schooltrip .rm-pt:not([data-st="future"]) .rm-tg{opacity:1}
/* the beat, near the cursor: one at a time */
#ch-schooltrip .rm-beats{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
#ch-schooltrip .rm-beat{position:absolute;left:0;top:0;width:max-content;max-width:min(340px,64vw);will-change:transform}
#ch-schooltrip .rm-ph{margin:0;display:flex;align-items:center;gap:8px;min-height:20px;font-size:var(--t-nota);color:var(--ink-3)}
#ch-schooltrip .rm-tt{margin:4px 0 0;font-size:var(--t-lista);line-height:1.25;font-weight:560;letter-spacing:-.015em;text-wrap:balance}
/* the axis: months under the line, the cursor's month riding on it */
#ch-schooltrip .rm-months{position:relative;height:28px;flex:none}
#ch-schooltrip .rm-mo{position:absolute;top:8px;translate:-50% 0;font-size:12.5px;color:var(--ink-3);white-space:nowrap;transition:opacity .25s}
#ch-schooltrip .rm-mo[data-edge="l"]{translate:0 0;margin-left:-7px}
#ch-schooltrip .rm-mo[data-edge="r"]{translate:-100% 0;margin-left:7px}
#ch-schooltrip .rm-date{position:absolute;top:4px;translate:-50% 0;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--fondo);font-size:12.5px;font-weight:620;white-space:nowrap;transition:opacity .25s}
#ch-schooltrip .rm-seasons{flex:none;display:grid;margin:0 7px;column-gap:0}
#ch-schooltrip .rm-seasons p{margin:0;padding:7px 14px 0 0;border-top:1px solid var(--riga-2);font-size:12.5px;line-height:1.35;color:var(--ink-3)}
#ch-schooltrip .rm-seasons b{display:block;font-weight:600;color:var(--ink-2)}
#ch-schooltrip .rm-seasons i{display:none}
/* the three counters */
#ch-schooltrip .rm-counters{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,40px);padding-top:clamp(12px,1.8vh,18px);border-top:1px solid var(--riga)}
#ch-schooltrip .rm-cell{min-width:0;display:grid;gap:6px;align-content:start}
#ch-schooltrip .rm-cell-name{margin:0;font-size:var(--t-nota);line-height:1.3;color:var(--ink-3)}
#ch-schooltrip .rm-cell-row{display:flex;align-items:center;flex-wrap:wrap;column-gap:14px;row-gap:6px}
#ch-schooltrip .rm-cell-val{position:relative;margin:0;font-family:var(--serif);font-size:calc(38 * var(--px));line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
#ch-schooltrip .rm-cell-tag{position:relative;display:inline-flex;min-height:calc(26 * var(--px))}
#ch-schooltrip .rm-sw{display:inline-block;white-space:inherit}
#ch-schooltrip .rm-cell-val small{font-family:var(--font);font-size:calc(16 * var(--px));letter-spacing:0;color:var(--ink-3);margin-right:.35em}
/* what has been deployed: one plain line */
#ch-schooltrip .rm-dep{flex:none;margin:0;font-size:var(--t-nota);line-height:1.4;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ch-schooltrip .rm-dl{color:var(--ink-3);margin-right:6px}
#ch-schooltrip .rm-dm{color:var(--ink-3)}
#ch-schooltrip .rm-di.new{display:inline-block;animation:rm-in .8s var(--e-esce) backwards}
@keyframes rm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* a phone: the chart the full width, the three counters in a compact row, no deploy line (the stage is only ~520px tall) */
@media (max-width:899px){
  #ch-schooltrip .rm-live{height:600vh;height:600svh}
  #ch-schooltrip .rm-in{gap:10px}
  #ch-schooltrip .rm-pt[data-st="cur"] .rm-pv{font-size:44px}
  #ch-schooltrip .rm-pt[data-st="all"] .rm-pv{font-size:30px}
  #ch-schooltrip .rm-pt[data-st="past"] .tag{visibility:hidden}
  #ch-schooltrip .rm-mo.mid{display:none}
  #ch-schooltrip .rm-pt[data-side="l"]:is([data-st="past"],[data-st="all"]){bottom:auto!important;top:calc(var(--by) + 8px)}
  #ch-schooltrip .rm-pt[data-side="l"][data-st="all"] .tag{visibility:hidden}
  #ch-schooltrip .rm-counters{gap:10px;padding-top:10px}
  #ch-schooltrip .rm-cell{gap:4px}
  #ch-schooltrip .rm-cell-name{font-size:11.5px;line-height:1.25;min-height:3.75em}
  #ch-schooltrip .rm-cell-row{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:6px}
  #ch-schooltrip .rm-cell-val{font-size:23px;white-space:normal;min-height:2.4em}
  #ch-schooltrip .rm-cell-val small{display:block;font-size:11px}
  #ch-schooltrip .rm-cell-tag .tag{height:auto;min-height:20px;padding:4px 8px 4px 7px;white-space:normal;font-size:10.5px;line-height:1.25;align-items:flex-start}
  #ch-schooltrip .rm-cell-tag .tag::before{margin-top:3px}
  #ch-schooltrip .rm-dep{display:none}
  #ch-schooltrip .rm-seasons p span{display:none}
  #ch-schooltrip .rm-ylab{font-size:13px}
  #ch-schooltrip .rm-tt{font-size:15px}
}
/* reduced motion: the whole line and its end, nothing moving, the beats listed under it */
#ch-schooltrip [data-still] .rm-live,#ch-schooltrip .rm-live[data-still]{height:auto}
#ch-schooltrip [data-still] .rm-stage{position:relative;top:auto;height:auto;display:block}
#ch-schooltrip [data-still] .rm-plot{flex:none;height:clamp(340px,44vw,520px)}
#ch-schooltrip [data-still] .rm-in{display:flex;flex-direction:column;gap:20px}
#ch-schooltrip [data-still] .rm-in *{transition:none!important;animation:none!important}
#ch-schooltrip .rm-static{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#ch-schooltrip [data-still] .rm-static{position:static;width:min(1200px,100% - 2 * var(--gutter,24px));height:auto;overflow:visible;clip:auto;margin:clamp(32px,4vw,56px) auto 0;white-space:normal}
#ch-schooltrip .rm-static>p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#ch-schooltrip [data-still] .rm-static>p{display:none}
#ch-schooltrip .rm-static ol{list-style:none;margin:0;padding:0;display:grid}
#ch-schooltrip .rm-static li{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:20px;padding:16px 0;border-top:1px solid var(--riga)}
#ch-schooltrip .rm-static h4{margin:0;font-size:var(--t-lista);font-weight:600}
#ch-schooltrip .rm-static small{display:block;margin-top:4px;font-size:var(--t-nota);color:var(--ink-3)}

/* the list of what is planned by each point read as an internal checklist (Tommi, 2026-10-02: "without any context u dont understand"): the line, the beat and the counters say it */
#ch-schooltrip .rm-dep{display:none}
