/* p02 feels (js/feel.js). Everything lives under html.feel, which the script adds only when it runs
   (never under reduced motion), so without the script the page is exactly the deck. */
/* At rest a word is plain inline text (the deck, line break for line break, at every width). A word is a box (.fb) only while it moves. */
html.feel .fw,html.feel .fl{transform-origin:50% 50%}
html.feel .fw.fb{display:inline-block;position:relative;white-space:nowrap}                 /* a box can move without reflowing the line */
html.feel .fl{display:inline-block}                                                          /* a letter, only while a letter gesture plays */
html.feel .fw.fb[data-t]::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;inset:0;opacity:0;pointer-events:none;white-space:nowrap}   /* the echo: a ghost copy of the word, drawn by CSS so it is never in the text, and invisible until its animation runs */
html.feel .fw>[aria-hidden="true"]{-webkit-user-select:none;user-select:none}                  /* a letter gesture draws the word as letters beside the .vh copy a screen reader reads; the letters cannot be selected, so copy and paste read the word once */
html.feel .u>.fw.fb{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}   /* inline-blocks don't inherit the underline, so a moving word draws its own */
html.feel #studio h2 em{position:relative;isolation:isolate;background:none}                 /* the black box moves to a pseudo-element, so it can turn while em stays inline (an inline-block em changes how text-wrap:balance breaks the heading) */
html.feel #studio h2 em::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform-origin:50% 50%}