/* Theatre: the site-wide choreography laid over site.css. Additive only: arrival, light, chapters, scroll beats,
   exits, page transitions, navigation and cursor. Every rule yields to Motion control and reduced motion. */

.th-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header: fixed; once the page leaves the top it compacts onto a quiet glass and carries the scroll progress */
html{scroll-padding-top:84px}
.top{position:fixed;transition:padding .45s var(--ease),transform .4s var(--ease);view-transition-name:th-top}
.top.th-away:not(:focus-within){transform:translateY(-100%);visibility:hidden;transition:padding .45s var(--ease),transform 0s,visibility 0s}
html.th-menu-open .top,html.motion-off .top{transform:none}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,10,10,.86);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid var(--line);opacity:0;transition:opacity .45s var(--ease)}
.top.th-scrolled{padding-top:10px;padding-bottom:10px}
.top.th-scrolled::before{opacity:1}
.th-prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(255,59,31,.45);transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.top.th-scrolled .th-prog{opacity:1}
.nav a[aria-current="page"]::after{right:0;background:var(--mute)}
@media(min-width:52.501em){.stage{top:max(8vh,76px)}}

/* menu: phones get one button and a full-screen sheet of the site's pages */
.th-menu-btn{display:none}
.th-menu{display:none}
@media(max-width:52.5em){
  .top{padding-top:10px;padding-bottom:10px}
  .th-js .th-menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 2px 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
  .th-menu-btn .ic{position:relative;width:18px;height:9px;flex:none}
  .th-menu-btn .ic::before,.th-menu-btn .ic::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--ease)}
  .th-menu-btn .ic::before{top:0}
  .th-menu-btn .ic::after{bottom:0}
  .th-menu-btn[aria-expanded="true"] .ic::before{transform:translateY(4px) rotate(45deg)}
  .th-menu-btn[aria-expanded="true"] .ic::after{transform:translateY(-4px) rotate(-45deg)}
  .th-js .mnav{display:none}
  .th-js .th-menu{display:flex;position:fixed;inset:0;z-index:19;flex-direction:column;justify-content:space-between;gap:40px;padding:104px var(--gutter) 36px;background:var(--bg);overflow-y:auto;opacity:0;transition:opacity .26s var(--ease)}
  .th-js .th-menu[hidden]{display:none}
  .th-menu.open{opacity:1}
  .th-menu ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .th-menu li{position:relative;overflow:hidden}
  .th-menu li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--ease-out)}
  .th-menu a.it{display:flex;align-items:baseline;gap:18px;min-height:44px;padding:18px 0 16px;font-family:var(--serif);font-size:clamp(34px,10vw,52px);line-height:1;letter-spacing:-.01em;color:var(--ink);transform:translateY(105%);transition:transform .7s var(--ease-out)}
  .th-menu a.it .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mute);transform:translateY(-.9em)}
  .th-menu a.it[aria-current="page"] .n{color:var(--acc)}
  .th-menu.open li::after,.th-menu.open a.it{transform:none}
  .th-menu li:nth-child(2) a.it,.th-menu li:nth-child(2)::after{transition-delay:.05s}
  .th-menu li:nth-child(3) a.it,.th-menu li:nth-child(3)::after{transition-delay:.1s}
  .th-menu li:nth-child(4) a.it,.th-menu li:nth-child(4)::after{transition-delay:.15s}
  .th-menu .pill{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .5s var(--ease) .2s,background .3s,color .3s}
  .th-menu.open .pill{opacity:1}
  .th-menu .pill:hover,.th-menu .pill:focus-visible{background:transparent;color:var(--ink)}
  html.th-menu-open{overflow:hidden}
  html.th-menu-open .top::before{opacity:0}
}
@media(max-width:23.75em){.th-js .nav a.c{display:none}.nav{gap:10px}}

/* arrival: the mark draws itself once per session, then takes its place in the header as the page rises */
html.th-arrive::after{content:"";position:fixed;inset:0;z-index:90;background:var(--bg);animation:th-failsafe 0s 1.6s forwards}
@keyframes th-failsafe{to{visibility:hidden}}
.th-arrival{position:fixed;inset:0;z-index:90;pointer-events:none}
.th-arrival .cv{position:absolute;inset:0;background:var(--bg)}
.th-arrival svg{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;overflow:visible;color:var(--ink)}
.th-arrival .s{fill:none;stroke:currentColor;stroke-width:.55;stroke-linejoin:miter;stroke-dasharray:1 1;stroke-dashoffset:1}
.th-arrival .f{fill:currentColor;opacity:0}
html.th-arriving .brand svg{opacity:0}
html.th-arriving .brand,html.th-arriving .top .nav{opacity:0}
html.th-landing .brand,html.th-landing .top .nav{opacity:1;transition:opacity .4s var(--ease)}
/* held content: the hero waits under the curtain, then rises */
html.th-hold .lines .ln>span{transform:translateY(108%)!important;transition:none!important}
html.th-hold .rv{opacity:0!important;transform:translateY(18px)!important;transition:none!important}
html.th-hold .th-type .th-ch{opacity:0!important;transition:none!important}
.hero .under .rv{transition-delay:.18s}
.hero .under .rv+.rv{transition-delay:.3s}
.hero .cue.rv{transition-delay:.45s}

/* light: a bone glow trails the pointer over the lattice and lights the hairline grid where it passes */
.th-lightbox{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-2}
.band>.th-lightbox{z-index:-1}
.th-light{position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;overflow:hidden;opacity:0;transition:opacity .6s var(--ease);-webkit-mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.5) 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.5) 45%,transparent 100%);will-change:transform,opacity}
.th-light.on{opacity:1}
.th-light i{position:absolute;left:-120px;top:-120px;width:1000px;height:1000px;background-image:linear-gradient(rgba(241,236,230,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(241,236,230,.15) 1px,transparent 1px);background-size:120px 120px;will-change:transform}
.th-light b{position:absolute;inset:0;background:radial-gradient(closest-side,rgba(241,236,230,.06),rgba(241,236,230,.02) 55%,transparent)}

/* chapters: a quiet index on the right edge; the current chapter is ink */
.th-chapters{position:fixed;right:clamp(10px,1vw,22px);top:50%;z-index:15;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end}
.th-chapters a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;height:28px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--mute);transition:color .4s var(--ease)}
.th-chapters a i{display:block;width:6px;height:1px;background:currentColor;transition:width .45s var(--ease-out)}
.th-chapters a .nm{position:absolute;right:100%;top:50%;margin-right:6px;padding:5px 9px;white-space:nowrap;background:rgba(11,10,10,.86);border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.16em;opacity:0;transform:translate(6px,-50%);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.th-chapters a:hover,.th-chapters a:focus-visible{color:var(--ink-2)}
.th-chapters a:hover .nm,.th-chapters a:focus-visible .nm{opacity:1;transform:translate(0,-50%)}
.th-chapters a[aria-current="true"]{color:var(--ink)}
.th-chapters a[aria-current="true"] i{width:14px}
.no-js .th-chapters,html.th-tall .th-chapters{display:none}
@media(max-width:68.75em){.th-chapters{display:none}}

/* section heads: the mono label types itself in */
.th-type.rv{opacity:1;transform:none;transition:none}
.th-type .th-ch{opacity:0;transition:opacity .07s linear}
.th-type.in .th-ch{opacity:1}
html.motion-off .th-type .th-ch,html.capture .th-type .th-ch{opacity:1;transition:none}
.head .lede.rv{transition-delay:.16s}
.head .lede.rv+.lede.rv{transition-delay:.28s}

/* the statement band lightens as it enters */
.band{position:relative;isolation:isolate}
.th-band-lift{position:absolute;inset:0;z-index:-1;background:rgba(241,236,230,.02);opacity:0;pointer-events:none;will-change:opacity}
html.motion-off .th-band-lift,html.capture .th-band-lift{opacity:1!important}

/* pillars: a second sentence opens beneath the paragraph; the diagram redraws */
.three .more{margin-top:12px}
@media(hover:hover) and (pointer:fine){
  .th-js .three .more{clip-path:inset(0 0 100% 0);opacity:0;transform:translateY(-6px);transition:clip-path .6s var(--ease-out),opacity .45s var(--ease),transform .6s var(--ease-out)}
  .th-js .three>div:hover .more,html.th-kbd .three .more,html.capture .three .more{clip-path:inset(0 0 -2px 0);opacity:1;transform:none}
  .th-js .three>div:hover{transform:translateY(-2px)}
}
.three .dg [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:0}
@keyframes th-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
html:not(.motion-off) .three>div:hover .dg [pathLength]{animation:th-draw .9s var(--ease-out) both}
html:not(.motion-off) .three>div:hover .dg [pathLength]:nth-child(2){animation-delay:.08s}
html:not(.motion-off) .three>div:hover .dg [pathLength]:nth-child(3){animation-delay:.16s}
html:not(.motion-off) .three>div:hover .dg [pathLength]:nth-child(4){animation-delay:.24s}

/* standard steps: numerals count from 00 */
.steps.th-counted>div:not(.progress)::before{content:none}
.steps .th-num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mute);display:block;margin-bottom:34px;font-variant-numeric:tabular-nums}

/* exits: the stage lifts as it releases; the footer rises into place */
.stage{transition:transform .6s var(--ease-out)}
.stage.th-released{transform:translateY(-2px)}
.foot.th-foot svg,.foot.th-foot p,.foot.th-foot .links a{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .9s var(--ease-out)}
.foot.th-foot.th-in svg,.foot.th-foot.th-in p,.foot.th-foot.th-in .links a{opacity:1;transform:none}
.foot.th-foot p:nth-of-type(1){transition-delay:.08s}
.foot.th-foot p:nth-of-type(2){transition-delay:.16s}
.foot.th-foot .links a:nth-child(1){transition-delay:.22s}
.foot.th-foot .links a:nth-child(2){transition-delay:.28s}
.foot.th-foot .links a:nth-child(3){transition-delay:.34s}

/* page transitions: the outgoing page sinks under a canvas-coloured curtain rising from the bottom */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition{background:var(--bg)}
::view-transition-old(root){animation:th-vt-out .24s cubic-bezier(.55,0,.75,.2) both}
::view-transition-new(root){animation:th-vt-in .22s var(--ease) .2s both}
::view-transition-group(th-top){animation-duration:.3s}
@keyframes th-vt-out{from{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(0 0 100% 0);opacity:.4}}
@keyframes th-vt-in{from{opacity:0}to{opacity:1}}
.th-curtain{position:fixed;inset:0;z-index:18;background:var(--bg);transform:scaleY(0);transform-origin:50% 100%;transition:transform .24s cubic-bezier(.55,0,.75,.2);pointer-events:none}
.th-curtain.on{transform:scaleY(1)}

/* cursor: a bone dot that grows over what can be pressed and becomes a ring over a live stage */
.th-cursor{position:fixed;left:0;top:0;z-index:300;width:0;height:0;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s var(--ease);will-change:transform}
.th-cursor.on{opacity:1}
.th-cursor i,.th-cursor b{position:absolute;border-radius:50%}
.th-cursor i{left:-12px;top:-12px;width:24px;height:24px;background:var(--ink);transform:scale(.25);transition:transform .32s var(--ease-out),opacity .32s var(--ease)}
.th-cursor b{left:-17px;top:-17px;width:34px;height:34px;border:1px solid var(--ink);opacity:0;transform:scale(.5);transition:transform .38s var(--ease-out),opacity .3s var(--ease)}
.th-cursor.link i{transform:scale(1);opacity:.3}
.th-cursor.ring i{transform:scale(.25);opacity:1}
.th-cursor.ring b{opacity:.85;transform:none}

@media(prefers-reduced-motion:reduce){
  .top,.top::before,.th-prog{transition:none}
  .th-menu,.th-menu li::after,.th-menu a.it{transition:opacity .2s!important;transform:none!important}
  .th-type .th-ch{opacity:1;transition:none}
  .th-js .three .more{transform:none!important;transition:opacity .2s,clip-path .2s!important}
  .three>div:hover .dg [pathLength]{animation:none!important}
  .stage,.stage.th-released{transition:none;transform:none}
  .foot.th-foot svg,.foot.th-foot p,.foot.th-foot .links a{transform:none;transition:opacity .2s}
  .th-curtain{display:none}
}
html.motion-off .stage.th-released{transform:none}