/* Article navigator. Without script it is a plain contents list above the body. With article.js it becomes a rail
   beside the text on wide screens, or a pill at the foot of the screen that opens the same list. */
.art-toc{--toc-w:232px;font-size:13.5px;line-height:1.4;max-width:720px;margin:6vh auto 0;z-index:50}
.art-toc ol{list-style:none;margin:0;padding:0}
.art-toc a{color:var(--soft);text-decoration:none;transition:color .2s}
.art-toc a:hover{color:var(--fg)}
.art-toc a:focus-visible,.art-toc button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.art-toc-pill{display:none}
.art-toc-head{font-size:10px;letter-spacing:.14em;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.art-toc-list>li>a,.art-toc-part>button{display:flex;align-items:center;min-height:36px;padding:7px 0 7px 14px;border-left:2px solid #f5f2ec26;transition:color .2s,border-color .3s}
.art-toc-list a.is-done{color:var(--mute)}
.art-toc-list>li>a.is-done{border-left-color:#ffc86166}
.art-toc-list a.is-active{color:var(--gold);font-weight:500}
.art-toc-list>li>a.is-active{border-left-color:var(--orange)}
/* the current section's own progress, under its name */
.art-toc-list a.is-active{flex-wrap:wrap}
.art-toc-list a.is-active::after{content:"";flex:0 0 100%;height:2px;margin-top:7px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--gold)) 0 0/calc(var(--p,0) * 100%) 100% no-repeat,#f5f2ec14}
.art-toc-part>button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 6px 8px 14px;border-left:2px solid #f5f2ec26;color:var(--mute);font-weight:600;cursor:pointer;border-radius:0 8px 8px 0;transition:background .2s,color .2s,border-color .3s}
.art-toc-part>button:hover{background:#ffffff0a;color:var(--fg)}
.art-toc-part.is-current>button{color:var(--fg);border-left-color:var(--orange)}
.art-toc-part.is-done>button{border-left-color:#ffc86166}
.art-toc-chev{flex:none;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.art-toc [aria-expanded=true]>.art-toc-chev{transform:rotate(90deg)}
.art-toc-count{margin-left:auto;font:400 10px/1 var(--mono);letter-spacing:.06em;color:var(--soft);white-space:nowrap}
.art-toc-part>ol{margin:2px 0 4px 20px;border-left:1px solid #f5f2ec1a}
.art-toc-part>button[aria-expanded=false]+ol{display:none}
.art-toc-part li>a{display:flex;align-items:center;padding:6px 0 6px 14px;min-height:32px}
.art-toc-sub{display:none;margin:0 0 4px 14px}
.art-toc li.is-current>.art-toc-sub,.art-toc:not(.is-ready) .art-toc-sub{display:block}
.art-toc-sub a{font-size:12.5px;padding:4px 0 4px 14px;display:block}

@media (min-width:1280px){
  .art-toc.is-ready{position:fixed;top:calc(var(--hdr) + 36px);left:max(24px,calc(50vw - 360px - var(--toc-w) - 72px));width:var(--toc-w);max-height:calc(100vh - var(--hdr) - 72px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0;padding:18px 16px 20px 18px;border-radius:var(--r-md);background:#09090ccc;border:1px solid #f5f2ec10;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(-10px,8px,0);transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1),visibility 0s linear .52s}
  .art-toc.is-ready.is-visible{opacity:.97;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  .art-toc.is-ready.is-visible:hover{opacity:1}
  /* arriving, the rows wipe in left to right */
  .art-toc.is-ready :is(.art-toc-head,.art-toc-list>li){clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-6px);transition:clip-path .62s cubic-bezier(.16,1,.3,1),opacity .36s ease,transform .52s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 40ms)}
  .art-toc.is-ready.is-visible :is(.art-toc-head,.art-toc-list>li){clip-path:inset(0 -8px 0 0);opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0) * 40ms)}
}
@media (max-width:1279.98px){
  .art-toc.is-ready{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));width:min(440px,calc(100vw - 32px));max-width:none;margin:0;transform:translate(-50%,calc(100% + 48px));transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .art-toc.is-ready.is-visible{transform:translate(-50%,0)}
  .art-toc.is-ready .art-toc-pill{all:unset;box-sizing:border-box;width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:0 18px 0 14px;border:1px solid #f5f2ec26;border-radius:999px;background:#121216eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 40px #00000080;color:var(--fg);cursor:pointer}
  .art-toc-ring{flex:none}
  .art-toc-ring circle{fill:none;stroke:#f5f2ec22;stroke-width:2}
  .art-toc-ring [data-toc-ring]{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:center}
  .art-toc-now{display:flex;flex-direction:column;min-width:0}
  .art-toc-now .mono{font-size:9px;letter-spacing:.14em}
  .art-toc-now b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .art-toc-pill>.art-toc-chev{margin-left:auto;transform:rotate(-90deg)}
  .art-toc .art-toc-pill[aria-expanded=true]>.art-toc-chev{transform:rotate(90deg)}
  .art-toc.is-ready .art-toc-panel{position:absolute;left:0;right:0;bottom:calc(100% + 10px);max-height:min(66vh,560px);overflow:auto;overscroll-behavior:contain;padding:16px 16px 18px;border:1px solid #f5f2ec26;border-radius:22px;background:#121216f7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 40px #00000080;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s}
  .art-toc.is-ready.is-open .art-toc-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .art-toc.is-ready :is(.art-toc-list>li>a,.art-toc-part>button,.art-toc-part li>a){min-height:44px}
}
@media (prefers-reduced-motion:reduce){.art-toc,.art-toc *{transition:none!important}}

/* Headings and figures land clear of the header when jumped to */
.prose :is(h2,h3,figure)[id]{scroll-margin-top:calc(var(--hdr) + 28px)}

/* A part's divider: a large label over a fading rule, before the first of its sections */
.prose .art-part{margin-top:3em;font:800 clamp(40px,4.6vw,68px)/1 var(--display);letter-spacing:-.04em;color:var(--fg)}
.prose .art-part::before{content:"";display:block;height:1px;margin-bottom:.4em;background:linear-gradient(90deg,#ff7a3d99,#ff7a3d00)}
.prose .art-part+h2{margin-top:1.4em}

/* Figures sit in the text column, like an image. The particle field composes each one exactly into its stage. */
.prose .interlude{margin:3.2em 0}
.fig-stage{position:relative;height:380px}
.fig-stage.fig-tall{height:380px}
.fig-stage.fig-short{height:320px}
.interlude figcaption{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px;text-align:center;font-size:14px;line-height:1.5;color:var(--soft)}
.fig-title{font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fig-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.fig-key{display:inline-flex;align-items:center;gap:8px;color:var(--mute)}
.fig-key::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.fig-list{margin-top:18px;text-align:center}
.fig-list ul{text-align:left}
.fig-list summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #f5f2ec2e;border-radius:999px;color:var(--fg);font-size:14px;font-weight:500;cursor:pointer;list-style:none;transition:border-color .2s,background .2s}
.fig-list summary::-webkit-details-marker{display:none}
.fig-list summary:hover{border-color:#f5f2ec66;background:#ffffff08}
.fig-list summary::after{content:"+";margin-left:10px;color:var(--gold);font-family:var(--mono)}
.fig-list[open] summary::after{content:"−"}
.fig-list ul{max-width:720px;margin:16px 0 0;padding:20px 24px 20px 42px;border:1px solid var(--line);border-radius:var(--r-md);background:#0c0c10;font-size:16px;line-height:1.6}
.fig-list li+li{margin-top:.5em}

/* Timeline labels span the box the shape is drawn into: x = 6.35% + 87.3% * f, mirroring figures.js timeline() */
.fig-axis{position:absolute;left:0;top:0;width:var(--fit-w,100%);height:var(--fit-h,100%);margin:0;padding:0;list-style:none;pointer-events:none;opacity:0;transition:opacity .7s ease}
.is-live>.fig-axis,:is(.no-field,.portfolio-fallback) .fig-axis{opacity:1}
.fig-axis li{position:absolute;left:calc(6.35% + 87.3% * var(--f));transform:translateX(-50%);text-align:center;font:500 11px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.fig-axis li{display:flex;flex-direction:column;align-items:center;gap:3px}
.fig-axis li.is-up{top:10px}
.fig-axis li.is-down{bottom:10px}
/* the count reads first, nearest its stem; the date sits on the outside */
.fig-axis span{font:700 20px/1 var(--display);letter-spacing:-.02em;color:var(--fg)}
.fig-axis b{font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--soft)}
.fig-axis .is-up span{order:2}
.fig-axis .is-hot span{color:var(--hot)}
.fig-axis i{display:none}
@media (max-width:700px){
  .fig-stage{height:300px}
  .fig-stage.fig-tall{height:320px}
  .fig-stage.fig-short,.fig-stage[data-figure=timeline]{height:220px}
  .fig-axis{display:none}
}

/* Without the particle field each figure keeps a plain drawing of the same idea */
.fig-fallback{display:none}
:is(.no-field,.portfolio-fallback) .fig-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fig-numeral{font:800 clamp(150px,30vw,340px)/.8 var(--display);letter-spacing:-.04em}
:is(.no-field,.portfolio-fallback) .fig-numeral{background:linear-gradient(180deg,#ff2d75 0 11.4%,#ff7a3d 11.4% 45.5%,#ffc861 45.5% 93.2%,#b48cff 93.2%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fig-terminal{flex-direction:column;font:500 clamp(28px,5vw,60px)/1.5 var(--mono);color:var(--violet)}
.fig-terminal span+span{color:var(--hot)}
.fig-terminal b{font-weight:500;color:var(--mute)}
.fig-terminal i{display:inline-block;font-style:normal;filter:blur(1.5px);transform:translate(5px,-4px) rotate(10deg)}
:is(.no-field,.portfolio-fallback) .fig-axis{display:block}
:is(.no-field,.portfolio-fallback) .fig-axis i{display:block;width:calc(6px + var(--n) * 2.4px);aspect-ratio:1;margin:0 auto 6px;border-radius:50%;background:var(--gold)}
:is(.no-field,.portfolio-fallback) .fig-axis .is-hot i{background:var(--hot)}