/* ASTERISM: the interface study for the Work page. An edition of the day; one event gains a source, its star and its heat. */
.project-asterism .project-copy{grid-column:1}
.project-asterism .project-media{grid-column:2;mix-blend-mode:normal}
.project-asterism .project-band{background:#294bdc}
.project-asterism .project-copy h2{font-size:clamp(3.8rem,8vw,11rem)}
.project-asterism .project-meta,.project-asterism .project-open{font-size:.8125rem}

.asterism-demo{--as-blue:#294bdc;width:100%;max-width:42rem;height:min(100%,31rem);display:grid;grid-template-columns:40% minmax(0,1fr);overflow:hidden;border:1px solid #dbe2ec;box-shadow:1rem 1rem 0 #294bdc14;background:#fff;color:#19232d;font-family:Space,'PingFang SC',sans-serif;text-align:left}
.asterism-demo *{box-sizing:border-box}
.as-demo-poster-col{min-width:0;padding:clamp(.4rem,.75vw,.75rem) 0 clamp(.4rem,.75vw,.75rem) clamp(.4rem,.75vw,.75rem)}
.as-demo-poster{position:relative;isolation:isolate;height:100%;display:flex;flex-direction:column;overflow:hidden;color:#fff;border-radius:2px clamp(1.8rem,3.3vw,3rem) 2px 2px;padding:clamp(.7rem,1.15vw,1.15rem);
  background:radial-gradient(circle at 16% 47%,#ffffff80 0 1px,#0000 1.7px),radial-gradient(circle at 71% 41%,#ffffff60 0 1px,#0000 1.7px),radial-gradient(circle at 41% 55%,#ffffff45 0 1px,#0000 1.7px),radial-gradient(circle at 88% 53%,#ffffff70 0 1.2px,#0000 1.9px),radial-gradient(circle at 57% 47%,#ffffff40 0 .9px,#0000 1.5px),radial-gradient(circle at 26% 36%,#ffffff40 0 .9px,#0000 1.5px),radial-gradient(circle at 80% 30%,#ffffff35 0 .9px,#0000 1.5px),var(--as-blue)}
.as-demo-poster:before,.as-demo-poster:after{content:'';position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.as-demo-poster:before{width:150%;aspect-ratio:1;right:-48%;bottom:-42%;border:1px solid #ffffff20}
.as-demo-poster:after{width:92%;aspect-ratio:1;right:-28%;bottom:-20%;border:1px dashed #ffffff26}
.as-demo-poster-top{padding-right:clamp(.5rem,1.1vw,1.1rem)}
.as-demo-poster-top,.as-demo-day{display:flex;justify-content:space-between;gap:.5rem;font:700 clamp(.34rem,.5vw,.5rem)/1 Space,sans-serif;letter-spacing:.16em;color:#ffffffd0;white-space:nowrap}
.as-demo-date{font:400 clamp(4.4rem,8.6vw,8.4rem)/.8 Instrument,Georgia,serif;letter-spacing:-.04em;margin:clamp(.5rem,1vw,1rem) 0 clamp(.4rem,.7vw,.7rem) -.04em}
.as-demo-fig{display:block;width:100%;height:auto;margin-top:auto;overflow:visible}
.as-demo-fig line{stroke:#fff;stroke-width:1.1;stroke-linecap:round}
.as-demo-fig .st{fill:none;stroke:#fff;stroke-width:1.4}
.as-demo-fig .st1{fill:#fff}
.as-demo-fig .ring{fill:none;stroke:#fff;stroke-width:1}
.as-demo-lead{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;align-items:end;margin-top:clamp(.5rem,.9vw,.9rem)}
.as-demo-lead>small{grid-column:1/-1;font-size:clamp(.38rem,.55vw,.55rem);letter-spacing:.06em;color:#ffffffd0;white-space:nowrap}
.as-demo-lead>strong{grid-column:1/-1;font-size:clamp(.72rem,1.2vw,1.2rem);font-weight:700;line-height:1.36;letter-spacing:-.02em;margin:.35rem 0 clamp(.5rem,.9vw,.9rem);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-wrap:balance}
.as-demo-lead>b{font:400 clamp(2rem,3.9vw,3.8rem)/.85 Instrument,Georgia,serif;letter-spacing:-.05em}
.as-demo-lead>em{font-style:normal;font-size:clamp(.38rem,.55vw,.55rem);letter-spacing:.06em;color:#ffffffd0;padding-bottom:.25rem}

.as-demo-page{position:relative;min-width:0;display:flex;flex-direction:column;padding:clamp(.75rem,1.3vw,1.3rem) clamp(.75rem,1.4vw,1.4rem) 0}
.as-demo-top{display:flex;justify-content:space-between;gap:.5rem;font:400 clamp(.36rem,.52vw,.52rem)/1 var(--mono);letter-spacing:.04em;color:#6b829c;white-space:nowrap}
.as-demo-top span{color:#536071}
.as-demo-page h3{font-size:clamp(2.3rem,4vw,4.2rem);font-weight:400;letter-spacing:-.075em;line-height:.9;margin:clamp(.9rem,1.7vw,1.7rem) 0 clamp(.7rem,1.2vw,1.2rem)}
.as-demo-page h3 span{color:var(--as-blue)}
.as-demo-chips{display:flex;gap:.3rem;font-size:clamp(.42rem,.62vw,.62rem);white-space:nowrap}
.as-demo-chips>*{padding:.32rem .5rem;border:1px solid #dbe2ec;color:#536071;font-weight:400}
.as-demo-chips>b{background:#e8edfb;border-color:#e8edfb;color:var(--as-blue);font-weight:700}
.as-demo-section{display:flex;justify-content:space-between;gap:.5rem;margin-top:clamp(.9rem,1.8vw,1.8rem);padding-bottom:.45rem;border-bottom:1px solid #19232d;font-size:clamp(.4rem,.6vw,.6rem);white-space:nowrap}
.as-demo-section span{font-weight:700}.as-demo-section em{font-style:normal;color:#6b829c;font-weight:400;margin-left:.4rem}.as-demo-section small{font-size:inherit;color:#6b829c}
.as-demo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.as-demo-list>li{display:grid;grid-template-columns:clamp(1.3rem,2.3vw,2.3rem) minmax(0,1fr) auto;gap:.5rem;align-items:start;padding:clamp(.55rem,.95vw,.95rem) 0;border-bottom:1px solid #e3e8ef}
.as-demo-list>li>em{font:400 clamp(1.2rem,2.1vw,2.1rem)/.9 Instrument,Georgia,serif;font-style:normal;color:#a3b0bf}
.as-demo-list>li.lead>em{color:var(--as-blue)}
.as-demo-list strong{display:block;text-wrap:balance;font-size:clamp(.5rem,.8vw,.8rem);font-weight:700;line-height:1.35;letter-spacing:-.01em}
.as-demo-list span{display:block;margin-top:.35rem;font-size:clamp(.36rem,.54vw,.54rem);color:#6b829c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-demo-heat{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.as-demo-heat>b{font:400 clamp(1.2rem,2.1vw,2.1rem)/.9 Instrument,Georgia,serif;letter-spacing:-.05em}
.as-demo-heat>u{text-decoration:none;font-size:clamp(.34rem,.5vw,.5rem);font-weight:700;letter-spacing:.06em;background:var(--as-blue);color:#fff;padding:.18rem .38rem}
.as-demo-arrival{position:absolute;right:clamp(.75rem,1.4vw,1.4rem);top:clamp(3.6rem,6.2vw,6.4rem);display:flex;align-items:center;gap:.4rem;padding:.35rem .55rem;background:#fff;border:1px solid var(--as-blue);box-shadow:.25rem .25rem 0 #294bdc22;font-size:clamp(.36rem,.55vw,.55rem);font-weight:700;color:var(--as-blue);white-space:nowrap;opacity:0;transform:translateY(.4rem)}
.as-demo-arrival i{width:.4rem;height:.4rem;border-radius:50%;background:var(--as-blue)}

/* one number, then another: the two sit in the same cell and trade places */
.as-swap{display:inline-grid;justify-items:end}
.as-swap>i{grid-area:1/1;font-style:normal}
.as-swap>i:last-child{opacity:0}
.as-demo-lead>small .as-swap{justify-items:start}

.project-asterism.is-ready .as-swap>i:first-child{animation:as-old 9s ease-in-out infinite}
.project-asterism.is-ready .as-swap>i:last-child{animation:as-new 9s ease-in-out infinite}
.project-asterism.is-ready .as-demo-fig .ln2{animation:as-line 9s ease-in-out infinite}
.project-asterism.is-ready .as-demo-fig .st3{animation:as-star 9s ease-in-out infinite}
.project-asterism.is-ready .as-demo-fig .ring{animation:as-ring 9s ease-out infinite}
.project-asterism.is-ready .as-demo-arrival{animation:as-arrive 9s ease-in-out infinite}
.as-demo-fig .ln2{stroke-dasharray:110;stroke-dashoffset:110}
.as-demo-fig .st3{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.as-demo-fig .ring{opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes as-old{0%,38%{opacity:1}42%,88%{opacity:0}93%,100%{opacity:1}}
@keyframes as-new{0%,38%{opacity:0}42%,88%{opacity:1}93%,100%{opacity:0}}
@keyframes as-line{0%,28%{stroke-dashoffset:110}37%,88%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:110}}
@keyframes as-star{0%,32%{opacity:0;transform:scale(0)}37%{opacity:1;transform:scale(1.5)}41%,88%{opacity:1;transform:scale(1)}93%,100%{opacity:0;transform:scale(0)}}
@keyframes as-ring{0%,35%{opacity:0;transform:scale(.6)}37%{opacity:.9}49%,100%{opacity:0;transform:scale(3.2)}}
@keyframes as-arrive{0%,19%{opacity:0;transform:translateY(.4rem)}25%,56%{opacity:1;transform:translateY(0)}62%,100%{opacity:0;transform:translateY(-.25rem)}}

@media(max-width:900px){.project-asterism .project-copy h2{font-size:9.4vw}}
@media(max-width:650px){
  .project-asterism .project-copy h2{font-size:17vw}
  .project-asterism .project-meta,.project-asterism .project-open{font-size:.75rem}
  .project-asterism .project-media{order:1;height:clamp(20rem,52svh,29rem);padding:3.8rem 1.2rem 1.2rem}
  .project-asterism .project-copy{order:2;width:100%;margin-bottom:2.3rem}
  .asterism-demo{height:100%;max-height:24rem;grid-template-columns:38% minmax(0,1fr);box-shadow:.55rem .55rem 0 #294bdc14}
  .as-demo-poster-col{padding:.4rem 0 .4rem .4rem}
  .as-demo-poster{padding:.6rem;border-top-right-radius:2.6rem}
  .as-demo-date{font-size:4.4rem}
  .as-demo-page{padding:.7rem .6rem 0}
  .as-demo-page h3{font-size:2.5rem;margin:.9rem 0 .5rem}
  .as-demo-section{margin-top:.6rem}
  .as-demo-top span,.as-demo-chips{display:none}
  .as-demo-list>li{grid-template-columns:1.4rem minmax(0,1fr) auto;gap:.35rem;padding:.5rem 0}
  .as-demo-list>li>em{font-size:1.25rem}
  .as-demo-list strong{font-size:.55rem}
  .as-demo-list li:nth-child(n+4){display:none}
  .as-demo-arrival{display:none}
}
@media(prefers-reduced-motion:reduce){
  .project-asterism.is-ready .as-swap>i,.project-asterism.is-ready .as-demo-fig .ln2,.project-asterism.is-ready .as-demo-fig .st3,.project-asterism.is-ready .as-demo-fig .ring,.project-asterism.is-ready .as-demo-arrival{animation:none}
  .as-swap>i:first-child{opacity:0}.as-swap>i:last-child{opacity:1}
  .as-demo-fig .ln2{stroke-dashoffset:0}.as-demo-fig .st3{opacity:1;transform:none}.as-demo-arrival{display:none}
}