@font-face{font-family:JetBrains Mono;src:url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
.program-bridge{display:none}
.program{position:relative;background:#f0dbd2;color:#040100;--program-scale:1;--orbit-fill:0deg}
.program-stage{position:relative;overflow:clip;min-height:calc(100 * var(--lvh));background:#f0dbd2 var(--bg-light,none) center / cover no-repeat}
.program{z-index:5;background:transparent}
.program-stage{border-radius:var(--screen-radius,0px) var(--screen-radius,0px) 0 0}
@media(pointer:fine){.program-stage{box-shadow:0 -24px 70px #0003}}
.program-art{display:none}
.program-copy{position:relative;margin:auto;width:min(627px,calc(100% - 48px));padding:64px 0}
.program-item{margin:0 0 64px;text-align:center;line-height:1.5;letter-spacing:-.02em}
.program-name{font:400 clamp(40px,8vw,64px)/1.15 var(--font-heading-initial);color:#c80f46;margin:0 0 20px}
.program-heading{font:400 clamp(22px,4.4vw,30px)/1.3 var(--font-heading);font-style:normal;letter-spacing:-.02em;margin:0 0 16px}
.program-title{font:italic 400 clamp(22px,4.4vw,30px)/1.3 var(--font-heading);letter-spacing:-.02em;margin:0 0 16px}
.program-desc{font-size:18px;letter-spacing:-.02em}
.program-item time{display:block;font:700 40px 'JetBrains Mono',monospace;color:#8b7165;margin-bottom:20px}
.program.is-animated{height:calc(560 * var(--lvh))}
.is-animated .program-stage{position:sticky;top:0;height:calc(100 * var(--lvh))}
.is-animated .program-art{display:block;position:absolute;top:50%;left:50%;width:1886px;height:1060px;contain:layout style;transform:translate(-50%,-50%) scale(var(--program-scale));transform-origin:center}
.program-clock{position:absolute;left:407px;top:109.66px;width:1072px;height:528px;display:flex;align-items:center;font:700 400px/1.32 'JetBrains Mono',monospace;letter-spacing:-32px;color:#c7b1a7;perspective:1600px}
.clock-digit,.clock-colon{position:relative;display:block;flex:0 0 214.4px;height:528px;overflow:clip}
.clock-digit span{position:absolute;inset:0;backface-visibility:hidden;transform-origin:center center;will-change:transform,opacity}
.program-wheel{position:absolute;left:123px;top:313.65px;width:1640px;height:1640px;transform-origin:820px 820px;will-change:transform;contain:layout style}
.program-ring{position:absolute;left:101px;top:101px;width:1438px;height:1438px;transform:rotate(180deg)}
.program-ring img{position:absolute;left:0;top:0;max-width:none}
.program-ring-progress{--orbit-fill:0deg;position:absolute;left:0;top:0;width:1227.41px;height:1438px;background:conic-gradient(from 180deg at 719px 719px,#ff004c 0deg var(--orbit-fill),transparent var(--orbit-fill) 360deg);mask:url('../images/program/orbit-half.svg') 0 0 / 1227.41px 1438px no-repeat;-webkit-mask:url('../images/program/orbit-half.svg') 0 0 / 1227.41px 1438px no-repeat}
.program-person{position:absolute;width:300px;height:300px;max-width:none;object-fit:contain}
.program{--s:var(--program-scale);--art-top:50%}
/* the copy is laid out in artboard units (1 Figma px = --s), like the circle and the clock: name 77px script, title 34px, text 20px */
.is-animated .program-copy{position:absolute;inset:0;pointer-events:none}
.is-animated .program-item{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.is-animated .program-name{position:absolute;left:50%;top:calc(var(--art-top) + 7px * var(--s));transform:translateX(-50%);width:calc(593px * var(--s));margin:0;font-size:max(30px,calc(77px * var(--s)));line-height:1.12;text-align:center}
.is-animated .program-body{position:absolute;left:50%;bottom:max(24px,calc(40px * var(--s)));transform:translateX(-50%);width:calc(753px * var(--s));min-width:min(92vw,420px);display:grid;gap:calc(20px * var(--s))}
.is-animated .program-title{margin:0 auto;max-width:calc(627px * var(--s));min-width:min(92vw,400px);font-size:max(19px,calc(34px * var(--s)));letter-spacing:-.02em;line-height:1.3}
.is-animated .program-heading{margin:0 auto;font-size:max(19px,calc(34px * var(--s)));line-height:1.3;color:#040100}
.is-animated .program-desc{font-size:max(13px,calc(20px * var(--s)));line-height:1.5;letter-spacing:-.02em}
.is-animated .program-item time{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
@media(max-width:700px){
  .program-bridge{height:calc(65 * var(--lvh))}
  .is-animated .program-art{top:36%;}
  .program{--art-top:36%}
  /* order on a phone: the digits, the portraits on the circle, the text (left aligned, one block under the circle) */
  .program-clock{top:-150px}
  .is-animated .program-item{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 20px 24px;text-align:left}
  .is-animated .program-name{position:static;transform:none;width:auto;font-size:34px;margin:0 0 12px;text-align:left}
  .is-animated .program-body{position:static;transform:none;width:100%;max-width:440px;min-width:0;text-align:left;display:block}
  .is-animated .program-title,.is-animated .program-heading{margin:0 0 12px;max-width:none;min-width:0;font-size:19px;text-align:left}
  .is-animated .program-desc{font-size:14px;text-align:left}
}
@media(prefers-reduced-motion:reduce){.program-bridge{height:calc(40 * var(--lvh))}.program-art{display:none}.program-item{opacity:1;transform:none}}