/* The film temporarily covers the orbit without adding a section to the page. */
.orbit-center .reel-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;margin:0 0 10px;padding:0 14px;border:1px solid #eae5d9;border-radius:100px;background:#eae5d9;color:#1c201b;font:700 12px/1 var(--sans);white-space:nowrap}
.orbit-center .reel-toggle:hover{background:var(--orange);border-color:var(--orange)}
.orbit-center .reel-toggle svg{width:15px;height:15px;flex:none}
.orbit-center .reel-toggle span{margin:0;color:inherit;font:inherit;letter-spacing:normal}
.reel-film{position:absolute;inset:0;width:min(1376px,calc(100% - 56px));max-height:max(300px,100svh - 150px);margin-inline:auto;z-index:5;overflow:hidden;isolation:isolate;background:#070a12;color:#f9f7f0;color-scheme:dark}
.film-flight,.film-subjects,.film-end{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.film-flight{display:block}
.film-subjects{isolation:isolate}
.film-object{position:absolute;top:0;left:0;opacity:0;will-change:transform,opacity}
.film-object>.reel-app-icon{
  position:relative;display:grid;place-items:center;width:clamp(119px,19vw,256px);aspect-ratio:1;overflow:hidden;border-radius:22%;background:#202421;font:750 32px var(--sans);
  box-shadow:0 2px 0 1px #a0c3b98a,0 8px 0 1px #243a36,0 21px 40px #020514ad;
}
.film-object>.reel-app-icon::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #f4f6f970;pointer-events:none}
.film-object[data-project="catan"]>.reel-app-icon{box-shadow:0 2px 0 1px #f8c88496,0 8px 0 1px #493328,0 24px 44px #100602b8}
.film-object[data-project="yunamatch"]>.reel-app-icon{border-radius:50%;box-shadow:0 0 0 1px #fff8,0 7px 0 1px #745a8c,0 19px 42px #13051ba6}
.film-object img{display:block;width:100%;height:100%;object-fit:cover}
.film-object[data-project="yunamatch"] img{border-radius:inherit;scale:1.014}
.film-object>.film-word-icon{background:var(--film-word-color);color:#18210f;font:850 clamp(72px,13vw,172px)/1 var(--sans);box-shadow:0 2px 0 1px #e2fca876,0 8px 0 1px #6f9141,0 19px 42px #071200ba}
.film-credit{position:absolute;left:clamp(22px,4vw,62px);bottom:clamp(37px,8%,54px);display:grid;gap:8px;opacity:0;pointer-events:none;text-shadow:0 3px 14px #010414}
.film-credit span{font:650 11px/1.3 var(--mono);letter-spacing:.15em}
.film-credit strong{font:740 clamp(38px,6.4vw,101px)/.9 var(--sans);letter-spacing:-.075em}
.film-credit-compact strong{font-size:clamp(29px,4.85vw,78px)}
.film-credit-captioned{bottom:clamp(12px,4%,28px)}
.film-credit-caption{margin:0;color:#f9f7f0;font:600 clamp(14px,2vw,20px)/1.25 var(--sans)}
.film-end{
  display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);place-items:center stretch;
  padding-inline:7%;gap:clamp(14px,3vw,44px);clip-path:inset(0 100% 0 0);background:#070910;
}
.film-wordmark,.film-collaborator{overflow:hidden;min-width:0}
.film-wordmark{text-align:right;font:730 clamp(24px,6.9vw,103px)/1.14 var(--sans);letter-spacing:-.084em;white-space:nowrap}
.film-wordmark span,.film-collaborator>div{display:block;will-change:transform}
.film-wordmark b{color:var(--orange);font-weight:inherit}
.film-collaborator-role,.film-collaborator-handle{display:block;color:#c6c4bc;font:600 clamp(10px,1.35vw,15px)/1.35 var(--sans)}
.film-collaborator strong{display:block;font:730 clamp(29px,5.6vw,77px)/1 var(--sans);letter-spacing:-.07em;margin:5px 0 7px}
.film-collaborator-handle{font-family:var(--mono)}
.film-rule{height:48%;background:#fafff9;transform:scaleY(0)}
.film-controls{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:4px;
  padding:12px 17px 14px;background:linear-gradient(#05070bcc,transparent);font:600 10px/1.2 var(--mono);letter-spacing:.06em;
}
.film-controls>span{padding-left:6px}
.film-controls>div{display:flex;gap:6px}
.film-controls button,.film-controls a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid #f6f4e35c;background:#080b15cc;color:#fff;font:inherit;letter-spacing:inherit;white-space:nowrap}
.film-controls button:hover,.film-controls a:hover{background:#f7f5e9;color:#171a18}
.film-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#dfff73;transform-origin:left center;transform:scaleX(0)}
@media(max-width:760px){
  .reel-film{width:calc(100% - 20px);max-height:max(330px,100svh - 132px)}
  .film-object>.reel-app-icon{width:clamp(128px,38vw,185px)}
  .film-credit{bottom:12%}
  .film-credit-captioned{bottom:8%}
  .film-end{padding-inline:4%;gap:10px}
  .film-rule{height:24%}
  .film-controls{padding:9px 7px 12px;font-size:9px;letter-spacing:.02em}
  .film-controls button,.film-controls a{padding:0 8px}
}

/* The two statistics share a single stage and are revealed in sequence. */
.film-impact{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#f1f1ef;color:#212120}
.film-impact-motion{position:absolute;inset:0;width:100%;height:100%}
.film-impact-heading{position:absolute;top:clamp(57px,12%,84px);left:7%;display:flex;align-items:center;gap:10px;font:700 clamp(12px,1.5vw,18px)/1.2 var(--sans)}
.film-impact-monogram{display:grid;place-items:center;width:28px;aspect-ratio:1;border-radius:50%;background:#282826;color:#fff;font:650 9px var(--mono)}
.film-impact-number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:.10em;font:780 clamp(36px,12.8vmin,108px)/1 var(--sans);letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap}
.film-impact-number .figure-unit{font:720 .36em/1 var(--sans);letter-spacing:0}
.film-impact-users .film-impact-number{color:#fff;font-size:clamp(24px,10.5vmin,76px)}
.film-impact-detail{position:absolute;top:80%;left:10%;right:10%;margin:0;color:#454541;text-align:center;font:550 clamp(11px,1.2vw,15px)/1.55 var(--sans);text-wrap:balance}
.film-impact-users .film-impact-detail{font-weight:730;color:#232321}
.film-impact:not([hidden])~.film-controls{background:none}
.film-impact:not([hidden])~.film-controls>span{visibility:hidden}
.film-impact:not([hidden])~.film-controls :is(a,button){background:#f1f1ef;color:#24211f;border-color:#aaa9a5}
.film-impact:not([hidden])~.film-controls :is(a,button):hover{background:#24211f;color:#f1f1ef}
.film-impact:not([hidden])~.film-progress{background:#ed6331}
.film-credit-caption{max-width:min(82vw,600px);text-wrap:balance}
.dialog-achievement{border-left:2px solid #dfff73;padding-left:13px;color:#ecf4d5;font-size:14px;line-height:1.55}
.dialog-achievement p{margin:5px 0;color:var(--muted)}
.dialog-achievement a{display:inline-flex;align-items:center;min-height:40px;text-decoration:underline;text-underline-offset:3px}
.builder-profile{max-width:650px;border-left:1px solid var(--line);padding-left:clamp(16px,3vw,28px)}
.builder-profile h3{font-size:clamp(20px,3vw,28px);margin:0 0 8px}
.builder-profile h3 span{margin-inline-start:8px;color:var(--muted);font-size:.63em;font-weight:500}

.history-log{max-width:1160px;margin:0 auto;padding:clamp(48px,8vw,100px) 6vw;border-top:1px solid var(--line)}
.history-log h2{margin:12px 0 24px;font-size:clamp(28px,5vw,56px);font-weight:540;letter-spacing:-.055em}
.history-log summary{width:fit-content;min-height:44px;cursor:pointer;color:var(--orange);padding:10px 0;font-weight:630}
.history-log summary:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.history-log ol{list-style:none;margin:20px 0 32px;padding:0;border-bottom:1px solid var(--line)}
.history-log li{display:grid;grid-template-columns:minmax(120px,20%) 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.history-log time{color:#dad7cf;font:650 13px/1.6 var(--mono)}
.history-log h3,.history-log p{margin:0 0 7px}
.history-log h3{font-size:16px;font-weight:650}
.history-log li p{color:#c7c7bf;line-height:1.55}
.history-log-links{display:flex;flex-wrap:wrap;column-gap:18px}
.history-log a{font-size:13px;color:var(--orange);display:inline-flex;align-items:center;min-height:40px;text-decoration:underline;text-underline-offset:3px}
.history-log-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:10px 0 14px}
.history-log-figures>div{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:12px}
.history-log-figures .history-figure-value{order:-1;margin:0 0 6px;color:var(--ink);font-size:clamp(19px,3vw,34px);font-weight:700;letter-spacing:-.04em}
.history-log .history-log-partner{font-weight:650}
.history-log .history-log-timezone{color:var(--muted);font-size:13px}
.history-log-figures dt{color:#deddd7;line-height:1.35}
@media(min-width:761px){
  .orbit-center:has(.reel-toggle:not([hidden])) :is(h1,p){position:absolute;inset-inline:0;margin:0}
  .orbit-center:has(.reel-toggle:not([hidden])) h1{bottom:calc(100% + 16px)}
  .orbit-center:has(.reel-toggle:not([hidden])) p{top:calc(100% + 11px)}
  .orbit-center .reel-toggle{margin:0}
}
@media(max-width:760px){
  .work-stage .app-grid{margin-top:70px;margin-bottom:65px}
  .app-grid .orbit-center{display:contents}
  .orbit-center h1,.orbit-center p{position:absolute;left:0;width:100%;text-align:center}
  .orbit-center h1{bottom:100%;margin:0}
  .orbit-center p{top:calc(100% + 7px);margin:0}
  .orbit-center .reel-toggle{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);margin:0}
  .history-log li{grid-template-columns:1fr;gap:6px}
  .history-log-figures{grid-template-columns:1fr;gap:5px}
}