/* Studies: shared styles for the per-page explanations (round 14). Only the site's tokens and type roles (assets/css/site.css):
   giant 144/700 · h1 80/600 · h2 52/580 · lede 20/400 (h3 20/560) · body 15/400 · small 13/500 (phone 56 · 44 · 34 · 18 · 15 · 13).
   Mona Sans only: never set a font-family, italic, oblique, small caps or monospace here or in a page's study CSS.
   Prefix: a page's own classes start with its own short prefix (for example .rt- for Runtime); .st- is this shared file. */

/* a 3D line figure: canvas + HTML labels positioned by Studies.Fig (f.place) */
.st-fig{position:relative;width:100%;height:clamp(460px,40vw,600px)}
.st-fig > canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-labs{position:absolute;inset:0;pointer-events:none}
.st-lab{position:absolute;left:0;top:0;opacity:var(--a,0);will-change:transform;transition:opacity .4s var(--ease)}
.st-lab b{display:block;font:var(--w-h3) var(--s-lede)/1.25 var(--f);letter-spacing:-.012em;max-width:12em;color:var(--fg)}
.st-lab s{display:block;text-decoration:none;font:500 var(--s-small)/1.4 var(--f);max-width:20em;color:var(--fg2);margin-top:4px}
.paper .st-lab b{color:var(--ink)} .paper .st-lab s{color:var(--ink2)}
.st-lab i{font-style:normal;display:block;width:22px;height:2px;margin-top:8px;background:rgba(255,255,255,.3);transition:width .4s var(--ease),background-color .4s}
.paper .st-lab i{background:rgba(14,15,15,.25)}
.st-lab.on i{background:var(--verm);width:44px}
.st-lab.c{text-align:center} .st-lab.c i{margin-left:auto;margin-right:auto}
.st-lab.r{text-align:right} .st-lab.r i{margin-left:auto}
/* a figure on the phone: canvas on top at a fixed height, labels as a list under it (add class ph-list to the figure) */
@media (max-width:760px){
  .st-fig{height:clamp(380px,112vw,520px)}
  .st-fig.ph-list{height:auto}
  .st-fig.ph-list > canvas{position:relative;height:min(440px,112vw)}
  .st-fig.ph-list .st-labs{position:static;display:grid;gap:14px;padding-top:14px}
  .st-fig.ph-list .st-lab{position:static;opacity:1;transform:none!important;padding-left:14px;border-left:2px solid var(--line2)}
  .paper .st-fig.ph-list .st-lab{border-left-color:var(--iline)}
  .st-fig.ph-list .st-lab.on{border-left-color:var(--verm)}
  .st-fig.ph-list .st-lab i{display:none}
}

/* glass: the site's material for interfaces (client: "UIs like this should be polished and in glass") */
.st-glass{background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);box-shadow:var(--glass-edge),0 40px 90px rgba(0,0,0,.42);border-radius:18px;color:var(--fg)}
.paper .st-glass{background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(14,15,15,.08),0 30px 70px rgba(14,15,15,.12);color:var(--ink)}

/* a caption under or beside a figure: the words the figure replaced, verbatim */
.st-cap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:20px}
.st-cap h3{font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em}
.st-cap p{font:400 var(--s-body)/1.55 var(--f);color:var(--fg2)}
.paper .st-cap p{color:var(--ink2)}

/* entrances driven by Studies.enter (adds .in once); reduced motion shows the end state */
.st-rise{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .9s var(--spring)}
.st-rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .st-lab,.st-rise{transition:none!important}
  .st-rise{opacity:1;transform:none}
}