/* live pieces — drawn in under itself, the axes moving on real text */

/* big u: the same glyph stacked thirteen times, black at the back to thin at the front;
   every layer swells to 900 and opens back to its own weight, one after another */
.live-bigu text {
  font-family: 'under', sans-serif;
  font-size: var(--bigu, 3924px);
  text-anchor: middle;
  stroke: #000;
  stroke-width: 5px;
  paint-order: stroke;
  font-weight: var(--w);
  animation: live-bigu 9s cubic-bezier(.7, 0, .3, 1) infinite;
  animation-delay: calc(var(--i) * .09s);
}

@keyframes live-bigu {
  0%, 12%, 88%, 100% { font-weight: 900; }
  42%, 62% { font-weight: var(--w); }
}


@media (prefers-reduced-motion: reduce) {
  .live-bigu text { animation: none; }
}

/* rr: three rows of the same pair, nine weights each, thin outlines to a black-weight end;
   the trail lies thin at its start, runs out to its full length, gathers at its heavy end, and runs back */
.live-rr { --x0: 66px; --dir: 1; --d: 195px; }
:root[dir="rtl"] .live-rr { --x0: 2966px; --dir: -1; }

.live-rr text {
  font-family: 'under', sans-serif;
  font-feature-settings: 'ss01';
  font-size: 640px;
  stroke-width: 6px;
  paint-order: stroke;
  font-weight: 100;
  transform: translateX(var(--x0));
  animation: live-rr 9s cubic-bezier(.7, 0, .3, 1) infinite;
  animation-delay: calc(var(--row) * .3s + var(--i) * .04s);
}

.live-rr .ring { filter: url(#live-ring-3); }

@keyframes live-rr {
  0%, 8%, 100% { font-weight: 100; transform: translateX(var(--x0)); }
  30%, 42%, 84% { font-weight: var(--w); transform: translateX(calc(var(--x0) + var(--dir) * var(--i) * var(--d))); }
  58%, 66% { font-weight: var(--w); transform: translateX(calc(var(--x0) + var(--dir) * (8 * var(--d) - (8 - var(--i)) * var(--d) * .3))); }
}

@media (prefers-reduced-motion: reduce) {
  .live-rr text { animation: none; font-weight: var(--w); transform: translateX(calc(var(--x0) + var(--dir) * var(--i) * var(--d))); }
}

/* circus: a wheel of the word, every ray swelling from thin to black and back as a wave runs round it while it turns */
.live-circus { direction: ltr; }
.live-circus .wheel {
  transform-origin: 1500px 1500px;
  animation: live-turn 60s linear infinite;
}
.live-circus text {
  font-family: 'under', sans-serif;
  font-weight: 100;
  animation: live-swell 4s ease-in-out infinite;
}
.live-circus .wheel text {
  font-size: 220px;
  transform-origin: 1500px 1500px;
  transform: rotate(var(--a));
  animation-delay: calc(var(--i) * -.1333s);
  opacity: 0;
  transition: opacity .5s calc(var(--i) * .05s + .25s);
}
/* the wheel is also the old sunburst: each wedge narrows into its word as a sweep runs round, and opens back out;
   grab it and spin it, and a hard spin flips it */
.live-circus { cursor: grab; touch-action: pan-y; }
.live-circus .fling { transform-origin: 1500px 1500px; transform: rotate(var(--spin, 0deg)); }
.live-circus .wedge {
  transform-origin: 1500px 1500px;
  transform: rotate(var(--a)) scaleY(1);
  transition: transform .7s cubic-bezier(.7, 0, .3, 1) calc(var(--i) * .05s);
}
.live-circus[data-mode="words"] .wedge { transform: rotate(var(--a)) scaleY(0); }
.live-circus[data-mode="words"] .wheel text { opacity: 1; }
/* the corners: the original shapes, each living in its own place — the pinwheel turning, the circle and the triangle
   changing into one another through a drop, the three dots taking turns to swell */
.live-circus .pinwheel { animation: live-turn 10s linear infinite; }
.live-circus .morph { animation: live-morph 6s ease-in-out infinite; animation-delay: calc(var(--i) * -3s); }
@keyframes live-morph {
  0%, 20%, 100% { d: path("M0 -200C110 -200 200 -110 200 0C200 110 110 200 0 200C-110 200 -200 110 -200 0C-200 -110 -110 -200 0 -200Z"); }
  33%, 53% { d: path("M0 -230C70 -170 200 -66 200 20C200 110 110 200 0 200C-110 200 -200 110 -200 20C-200 -66 -70 -170 0 -230Z"); }
  66%, 86% { d: path("M0 -200C65 -81 131 37 196 156C131 156 65 156 0 156C-65 156 -131 156 -196 156C-131 37 -65 -81 0 -200Z"); }
}
.live-circus .dot { transform-box: fill-box; transform-origin: center; animation: live-dot 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes live-dot {
  0%, 100% { transform: scale(.8); }
  50% { transform: scale(1.1); }
}
/* the words come in every colour of the page */
.live-circus .wheel text:nth-of-type(6n + 1) { fill: #FF4B00; }
.live-circus .wheel text:nth-of-type(6n + 2) { fill: #FDC800; }
.live-circus .wheel text:nth-of-type(6n + 3) { fill: #02903B; }
.live-circus .wheel text:nth-of-type(6n + 4) { fill: #014ADD; }
.live-circus .wheel text:nth-of-type(6n + 5) { fill: #8159FB; }
.live-circus .wheel text:nth-of-type(6n + 6) { fill: #FFBFE1; }

@keyframes live-turn { to { transform: rotate(360deg); } }
@keyframes live-swell {
  0%, 100% { font-weight: 100; }
  50% { font-weight: 900; }
}

/* imagine: the two banners, each word dipping from black to light and back, one after another;
   each block is as wide as its words, so it grows and shrinks with them, in any script */
.live-imagine { font-size: clamp(22px, 5vw, 72px); padding: 1em 0; }
.live-imagine .banner {
  font-family: 'under', sans-serif;
  font-size: inherit;
  font-weight: 900;
  line-height: 1.15;
  color: #F5F5F5;
  background: #FF4B00;
  padding: .5em .9em;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  margin-inline-end: 1.6em;
}
.live-imagine .banner + .banner {
  background: #014ADD;
  margin-inline: 1.6em 0;
  margin-top: -.3em;
  transform: rotate(3.6deg);
}
:root[dir="rtl"] .live-imagine .banner + .banner { transform: rotate(-3.6deg); }
.live-imagine .blue { color: #014ADD; }
.live-imagine .w {
  animation: live-dip 3.6s ease-in-out infinite;
  animation-delay: calc(var(--row) * .9s + var(--i) * .18s);
}
@keyframes live-dip {
  0%, 60%, 100% { font-weight: 900; }
  30% { font-weight: 300; }
}

/* go: the word pulled out into a stack of colours behind it, the whole stack breathing between black and medium */
.live-go { direction: ltr; }
.live-go text {
  font-family: 'under', sans-serif;
  font-size: 2450px;
  font-weight: 900;
  text-anchor: end;
  stroke: #000;
  stroke-width: 8px;
  paint-order: stroke;
  animation: live-go 6s cubic-bezier(.6, 0, .4, 1) infinite;
  animation-delay: calc(var(--i) * .06s);
}
@keyframes live-go {
  0%, 100% { font-weight: 900; transform: translate(0, 0); }
  45%, 55% { font-weight: 560; transform: translate(calc(var(--i) * -95px), calc(var(--i) * 8px)); }
}

@media (prefers-reduced-motion: reduce) {
  .live-circus .wheel, .live-circus text, .live-circus .pinwheel, .live-circus .morph, .live-circus .dot, .live-imagine .w, .live-go text { animation: none; }
  .live-go text { transform: translate(calc(var(--i) * -95px), calc(var(--i) * 8px)); }
}

/* the feature tiles: each one the real feature of the font, at work on real text */
.live-feat { direction: ltr; }
.live-feat text { font-family: 'under', sans-serif; }
.live-feat .label { font-size: 22px; font-weight: 400; }
.live-feat .glyph { font-kerning: none; }
.live-feat .outlined { font-weight: 900; }
.live-feat .pill { font-size: 30px; font-weight: 400; text-anchor: middle; }
.live-feat .guide { stroke-width: 1.5px; fill: none; }

/* a feature switching on and off, always at the thin moment of a dip in weight */
.live-feat .swap {
  --hi: 900; --lo: 150;
  animation: live-swap 5s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes live-swap {
  0% { font-weight: var(--lo); font-feature-settings: var(--from); }
  12%, 38% { font-weight: var(--hi); font-feature-settings: var(--from); }
  49.9% { font-weight: var(--lo); font-feature-settings: var(--from); }
  50% { font-weight: var(--lo); font-feature-settings: var(--to); }
  62%, 88% { font-weight: var(--hi); font-feature-settings: var(--to); }
  99.9% { font-weight: var(--lo); font-feature-settings: var(--to); }
  100% { font-weight: var(--lo); font-feature-settings: var(--from); }
}

/* sups and subs: the figure glides up, or down, and shrinks into the font's own superior or inferior figure, and back */
.live-feat .lead, .live-feat .figure, .live-feat .figure-to { font-weight: 300; }
.live-feat .figure {
  transform-origin: var(--ox) var(--oy);
  animation: live-figure 5s cubic-bezier(.65, 0, .35, 1) infinite;
}
.live-feat .figure-to { opacity: 0; animation: live-figure-to 5s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes live-figure {
  0%, 30% { transform: none; opacity: 1; }
  48% { transform: var(--to); opacity: 1; }
  54%, 82% { transform: var(--to); opacity: 0; }
  88% { transform: var(--to); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes live-figure-to {
  0%, 44% { opacity: 0; }
  54%, 82% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* and as they switch, each form slides across to the other side as a trail of see-through copies */
.live-feat .ghost {
  font-weight: 900;
  opacity: 0;
  animation: live-ghost 5s cubic-bezier(.6, 0, .4, 1) infinite;
  animation-delay: calc(var(--flight) * -2.5s + var(--k) * .035s);
}
@keyframes live-ghost {
  0%, 36% { opacity: 0; transform: translateX(0); }
  41% { opacity: .28; transform: translateX(0); }
  55% { opacity: .28; transform: translateX(var(--dx)); }
  60%, 100% { opacity: 0; transform: translateX(var(--dx)); }
}

/* a weight swinging between two ends */
.live-feat .breathe, .live-poster .breathe {
  --hi: 900; --lo: 100;
  animation: live-breathe var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes live-breathe {
  0%, 100% { font-weight: var(--lo); }
  50% { font-weight: var(--hi); }
}

/* the A grid: optical size growing down the rows, a wave of weight running through it corner to corner */
.live-grid text {
  font-size: 64px;
  text-anchor: middle;
  font-variation-settings: 'opsz' var(--o);
  animation: live-breathe 5s ease-in-out infinite;
  --hi: 900; --lo: 100;
  animation-delay: calc(var(--d) * -.35s);
}

/* A: growing from the smallest size to the largest, its optical size following, echoes trailing behind */
.live-grow text {
  font-optical-sizing: none;
  animation: live-grow 7s cubic-bezier(.7, 0, .3, 1) infinite;
  animation-delay: calc(var(--i) * .1s);
}
@keyframes live-grow {
  0%, 8%, 100% { font-size: 60px; font-variation-settings: 'opsz' 16; font-weight: 300; }
  46%, 58% { font-size: 1180px; font-variation-settings: 'opsz' 48; font-weight: 300; }
}

@media (prefers-reduced-motion: reduce) {
  .live-feat .swap, .live-feat .ghost, .live-feat .figure, .live-feat .figure-to, .live-feat .breathe, .live-grid text, .live-grow text { animation: none; }
  .live-feat .swap { font-weight: var(--hi); font-feature-settings: var(--from); }
  .live-grow text { font-size: 1180px; font-variation-settings: 'opsz' 48; font-weight: 300; }
}

/* extensive weight range: every letter its own colour and weight, a wave rolling through them */
.live-letters { direction: ltr; overflow: visible; }
.live-letters text { font-family: 'under', sans-serif; font-size: 120px; --hi: 900; --lo: 100; }
.live-letters .l {
  animation: live-breathe 4s ease-in-out infinite;
  animation-delay: calc((var(--i) + var(--from, 0)) * -.18s);
}
.live-letters .l:nth-child(6n + 1) { fill: #FFBFE1; }
.live-letters .l:nth-child(6n + 2) { fill: #FF4B00; }
.live-letters .l:nth-child(6n + 3) { fill: #FDC800; }
.live-letters .l:nth-child(6n + 4) { fill: #02903B; }
.live-letters .l:nth-child(6n + 5) { fill: #014ADD; }
.live-letters .l:nth-child(6n + 6) { fill: #8159FB; }

@media (prefers-reduced-motion: reduce) {
  .live-letters .l { animation: none; font-weight: calc(100 + var(--i) * 90); }
}

/* let's play: the letters bouncing, light at the top of the bounce and black when they land */
.live-play { font-family: 'under', sans-serif; font-size: clamp(56px, 12vw, 150px); line-height: 1.3; color: #FFBFE1; font-weight: 900; }
.live-play .l {
  display: inline-block;
  animation: live-bounce 1.6s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: calc(var(--i) * -.14s);
}
@keyframes live-bounce {
  0%, 100% { transform: translateY(0); font-weight: 900; }
  50% { transform: translateY(-.28em); font-weight: 400; }
}

/* the juggler, as drawn: three balls, three colours, each on one steady orbit over the head;
   a ball grows out of one hand, arcs over, and shrinks into the other */
.live-juggler .ball {
  transform-origin: 216.1px 238.4px;
  animation: live-orbit 4.8s linear infinite;
  animation-delay: calc(var(--k) * -1.6s);
}
.live-juggler .pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: live-pop 4.8s linear infinite;
  animation-delay: calc(var(--k) * -1.6s);
}
@keyframes live-orbit { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes live-pop {
  0% { transform: scale(0); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  9%, 41% { transform: scale(1); animation-timing-function: cubic-bezier(.7, 0, .8, .3); }
  50%, 100% { transform: scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .live-play .l, .live-juggler .ball, .live-juggler .pop { animation: none; }
}

/* the posters: each one live, its words in under, its numbers read off the font as it moves */
.live-poster { direction: ltr; }
.live-poster text { font-family: 'under', sans-serif; }
.live-poster .small { font-weight: 400; }
.live-poster .bounce { animation: live-bounce 1.6s cubic-bezier(.5, 0, .5, 1) infinite; animation-delay: calc(var(--i) * -.14s); }
.live-poster .tumble {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--r));
  animation: live-tumble 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}
.live-poster .tumble.small-turn { animation-name: live-tumble-small; }
@keyframes live-tumble {
  0%, 100% { transform: rotate(var(--r)); font-weight: 900; }
  50% { transform: rotate(calc(var(--r) + 40deg)); font-weight: 600; }
}
@keyframes live-tumble-small {
  0%, 100% { transform: rotate(var(--r)); font-weight: 600; }
  50% { transform: rotate(calc(var(--r) - 12deg)); font-weight: 900; }
}
/* in the poster, go only slides out into its colours, keeping its weight, so eight huge copies cost little */
.live-poster .live-go text { animation-name: live-go-slide; }
@keyframes live-go-slide {
  0%, 100% { transform: translate(0, 0); }
  45%, 55% { transform: translate(calc(var(--i) * -95px), calc(var(--i) * 8px)); }
}
@property --ext { syntax: '<number>'; inherits: true; initial-value: 0; }
.live-poster .drip {
  transform: translateY(calc(var(--k) * var(--ext) * 1px));
  animation: live-drip 7s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes live-drip {
  0%, 100% { --ext: 1; }
  45%, 75% { --ext: 23.5; }
}

@media (prefers-reduced-motion: reduce) {
  .live-poster .bounce, .live-poster .tumble, .live-poster .drip { animation: none; }
  .live-poster .drip { --ext: 23.5; }
}

.live-defs { position: absolute; width: 0; height: 0; }

/* every under takes the alternate r */
.alt-r { font-feature-settings: 'ss01'; }

/* the hero's falling letters */
.faller { font-family: 'under', sans-serif; }

/* a piece out of view holds still, so only what is on screen costs anything */
.live-off, .live-off * { animation-play-state: paused !important; }

/* the posters, as drawn in figma and set in under, each its own file: large words breathe through the weights around
   their own weight and the drawn points pulse */
.poster-slot { aspect-ratio: 1190 / 1684; }
.poster-slot > svg { width: 100%; height: 100%; display: block; }
.figma-poster text { font-family: 'under', sans-serif; }
.figma-poster .pt { animation: p-breathe 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes p-breathe {
  0%, 100% { font-weight: var(--w); }
  50% { font-weight: clamp(100, calc(var(--w) + var(--dw)), 900); }
}
/* only what moves turns about its own middle; anything else keeps the transform it was drawn with */
.figma-poster[data-motion="rock"] .ps, .figma-poster .pn { transform-box: fill-box; transform-origin: center; }
/* the drawn pieces stay as composed; a poster that moves its drawing says how */
.figma-poster[data-motion="rock"] .ps { animation: p-rock 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes p-rock {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
/* the cake stacks itself: each weight drops in onto the one below, black first and thin on top, lands with a
   little give, and when all nine stand the cake fades and is baked again. A tier's offset sits in its own wait */
.figma-poster .cake { animation: p-cake 14s linear infinite; }
.figma-poster .tier { transform-box: fill-box; transform-origin: 50% 100%; animation: p-tier 14s infinite backwards; animation-delay: calc(var(--i) * .25s); }
@keyframes p-cake {
  0%, 76% { opacity: 1; transform: none; }
  81%, 100% { opacity: 0; transform: translateY(40px); }
}
@keyframes p-tier {
  0% { transform: translateY(-1800px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  5% { transform: translateY(0); animation-timing-function: ease-out; }
  5.6% { transform: scale(1.05, .88); animation-timing-function: ease-in-out; }
  7.5%, 82% { transform: none; }
  82.01%, 100% { transform: translateY(-1800px); }
}
/* the michelin man runs on the spot: he bobs twice a stride, his legs swing from the hips and his arms from the
   shoulders, each against the other */
.figma-poster .runner { animation: p-bob .4s ease-in-out infinite alternate; }
.figma-poster .leg-a { transform-origin: 535px 790px; animation: p-swing-a .8s ease-in-out infinite alternate; }
.figma-poster .leg-b { transform-origin: 640px 770px; animation: p-swing-b .8s ease-in-out infinite alternate; }
.figma-poster .arm-a { transform-origin: 640px 640px; animation: p-swing-a .8s ease-in-out infinite alternate; }
.figma-poster .arm-b { transform-origin: 485px 700px; animation: p-swing-b .8s ease-in-out infinite alternate; }
@keyframes p-bob { from { transform: translateY(6px); } to { transform: translateY(-14px); } }
@keyframes p-swing-a { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
@keyframes p-swing-b { from { transform: rotate(11deg); } to { transform: rotate(-11deg); } }
/* the pink ball hangs from its knot and swings a little */
.figma-poster .swing { transform-origin: 530px 300px; animation: p-swing 6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes p-swing { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
/* the seesaw rocks on the top of the balloon, from its drawn tilt to the mirror of it */
.figma-poster .rock { transform-origin: 595px 350px; animation: p-seesaw 4s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes p-seesaw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-24.9deg); }
}
.figma-poster .pn { animation: p-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.15s); }
@keyframes p-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}
/* a poster on a photograph holds still, and so does one that is best as it was drawn */
.figma-poster[data-motion="photo"] *, .figma-poster[data-motion="static"] * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .figma-poster .pt, .figma-poster .ps, .figma-poster .pn, .figma-poster .pp, .figma-poster .rock { animation: none; }
}

/* the language toggle: three languages side by side at the top centre, drawn in outline and blended by difference
   like the header, so it reads on any colour; the one in use filled */
.lang-toggle { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); z-index: 1000; direction: ltr; mix-blend-mode: difference; border: 1.5px solid #fff; border-radius: 50px; padding: 3px; gap: 2px; }
.lang-toggle button { white-space: nowrap; border: none; border-radius: 50px; padding: .35rem 1rem; background: none; color: #fff; cursor: pointer; font-family: 'under', sans-serif; font-size: 1rem; }
.lang-toggle button[aria-pressed="true"] { background: #fff; color: #000; }

/* the figure waves with his right arm, from the shoulder, and now and then blinks */
.figma-poster .lego-wave { transform-origin: 668px 912px; animation: p-wave 5s ease-in-out infinite; }
@keyframes p-wave {
  0%, 15%, 85%, 100% { transform: rotate(0deg); }
  32%, 52%, 72% { transform: rotate(-150deg); }
  42%, 62% { transform: rotate(-118deg); }
}
.figma-poster .lego-blink { transform-box: fill-box; transform-origin: center; animation: p-blink 4.2s linear infinite; }
@keyframes p-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.1); }
}
@media (prefers-reduced-motion: reduce) {
  .figma-poster .lego-wave, .figma-poster .lego-blink { animation: none; }
}

/* the tent: the flag flutters, and the diamonds round the band chase like the lights on a carousel */
.figma-poster .flag { animation: p-flag 1.4s ease-in-out infinite alternate; }
@keyframes p-flag {
  from { d: path("M593.53 328.519C640 330 690 365 732.162 373.933C690 382 640 420 593.53 419.347Z"); }
  to { d: path("M593.53 328.519C640 345 685 345 732.162 373.933C685 395 640 400 593.53 419.347Z"); }
}
.figma-poster .bulb { animation: p-bulb 2.4s steps(1) infinite; animation-delay: calc(var(--i) * .3s); }
.figma-poster .bulb.dark { --on: #000; --off: #F5F5F5; }
.figma-poster .bulb.light { --on: #F5F5F5; --off: #000; }
@keyframes p-bulb {
  0%, 25%, 100% { fill: var(--on); }
  12.5% { fill: var(--off); }
}
@media (prefers-reduced-motion: reduce) {
  .figma-poster .flag, .figma-poster .bulb { animation: none; }
}

/* the story: every letter follows from a rule — the heading and lede at display size, the essay in columns */
.rule-essay { font-family: 'under', sans-serif; }
.rule-essay > div { max-width: 1140px; padding-block: 8rem; }
.rule-h { font-size: clamp(56px, 11vw, 150px); font-weight: 400; font-variation-settings: 'opsz' 48; line-height: 1.02; text-wrap: balance; }
.rule-lede { font-size: clamp(24px, 3.4vw, 36px); font-weight: 300; font-variation-settings: 'opsz' 48; line-height: 1.25; max-width: 34em; text-wrap: pretty; }
.rule-cols { columns: 3 280px; column-gap: 32px; border-color: currentColor; font-size: 18px; font-weight: 300; line-height: 1.5; }
.rule-cols p { margin: 0 0 .8em; }
:root[lang="ja"] .rule-essay { word-break: keep-all; }   /* kana breaks only between its spaced words */
:root[lang="ar"] .rule-h { line-height: 1.35; }   /* arabic's marks need the room between lines */

/* one number: the cap height big, the letters with their lines in the font's own units, the rows that follow */
.one-number { font-family: 'under', sans-serif; background: #014ADD; color: #fff; }
.one-number > div { max-width: 1140px; padding-block: 8rem; }
.one-lede { font-size: clamp(24px, 3.4vw, 36px); font-weight: 300; font-variation-settings: 'opsz' 48; line-height: 1.25; max-width: 30em; text-wrap: pretty; }
.one-big { font-size: clamp(160px, 34vw, 440px); font-weight: 200; font-variation-settings: 'opsz' 48; line-height: .9; font-feature-settings: 'tnum' 1; }
.one-draw { overflow: visible; direction: ltr; }
.one-draw .word { font-family: 'under', sans-serif; font-size: 1000px; font-weight: 400; font-variation-settings: 'opsz' 16; fill: #fff; }
.one-draw .rule { stroke: #FFBFE1; stroke-width: 3; fill: none; }
.one-draw .tag { font-family: 'under', sans-serif; font-size: 64px; font-weight: 300; fill: #FFBFE1; white-space: pre; }
.one-rows { list-style: none; padding: 0; font-feature-settings: 'tnum' 1; }
.one-rows li { display: grid; grid-template-columns: 9em 1fr 4em; column-gap: 24px; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .35); padding: 12px 0; font-size: 20px; font-weight: 300; }
.one-rows .name, .one-rows .expr, .one-rows .val { direction: ltr; unicode-bidi: isolate; }
.one-rows .expr { color: #FFBFE1; }
.one-rows .val { font-weight: 600; text-align: end; }
.one-rows .gloss { grid-column: 1 / -1; font-size: 16px; opacity: .75; }
.one-rows .gloss:empty { display: none; }
@media (max-width: 640px) { .one-rows li { grid-template-columns: 1fr auto; } .one-rows .expr { grid-column: 1 / -1; grid-row: 2; } }
:root[lang="ja"] .one-number { word-break: keep-all; }
@media (max-width: 640px) { .one-draw .tag { font-size: 120px; } }   /* the labels stay readable when the drawing is small */

/* a letter is a recipe: the glyph, each contour outlined in its own colour over the ink, beside its recipe */
.recipe { font-family: 'under', sans-serif; }
.recipe > div { max-width: 1140px; padding-block: 8rem; }
.recipe-h { font-size: clamp(56px, 11vw, 150px); font-weight: 400; font-variation-settings: 'opsz' 48; line-height: 1.02; text-wrap: balance; }
.recipe-lede { font-size: clamp(20px, 2.6vw, 28px); font-weight: 300; line-height: 1.35; max-width: 36em; text-wrap: pretty; }
.recipe-pick button { font-family: 'under', sans-serif; font-size: 40px; line-height: 1; width: 72px; height: 72px; border: 1px solid #111; border-radius: 50%; cursor: pointer; }
.recipe-pick button[aria-selected="true"] { background: #111; color: #fff; }
.recipe-body { align-items: stretch; }
.recipe-draw { aspect-ratio: 1; direction: ltr; background: #F4F4F4; border-radius: 6px; }
.recipe-draw .base { stroke: #A6A6A6; stroke-width: 1.5; }
.recipe-draw .ink { fill: #111; fill-opacity: .08; }
.recipe-draw .part { fill: none; stroke-width: 4; stroke-linejoin: round; }
.recipe-weight { font-size: 16px; font-weight: 300; }
.recipe-weight output { min-width: 3ch; text-align: end; }
.recipe-code { direction: ltr; text-align: left; background: #111; color: #F4F4F4; border-radius: 6px; padding: 24px; overflow: auto; max-height: 760px;
  font: 14px/1.55 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.recipe-code .key { color: #FDC800; }
.recipe-code .note { color: #A6A6A6; }
:root[lang="ja"] .recipe { word-break: keep-all; }

/* two sizes: the same words at text and at display; then one line through every size */
.size-text { font-size: 16px; line-height: 1.5; font-weight: 300; font-variation-settings: 'opsz' 16; }
.size-display { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 300; font-variation-settings: 'opsz' 48; }
.waterfall { width: 100%; font-family: 'under', sans-serif; font-weight: 300; font-optical-sizing: auto; }
.waterfall p { display: flex; align-items: baseline; gap: 16px; white-space: nowrap; overflow: hidden; line-height: 1.2; border-top: 1px solid #e4e4e4; padding-top: 4px; }
.waterfall i { flex: none; width: 32px; font-style: normal; font-size: 11px; color: #8159FB; }

/* set in text: blocks to read; a weight and an optical size per block, from --w and --o */
.set-in-text { font-family: 'under', sans-serif; --ink: #141414; --muted: #77746c; --rule: #dcd9d1; background: #f4f3ef; color: var(--ink); }
.set-in-text > div { max-width: 1180px; padding-block: 8rem; }
.set-in-text * { font-variation-settings: "wght" var(--w, 400), "opsz" var(--o, 16); }
.set-in-text p { margin: 0; font-weight: normal; }
.set-h { font-size: clamp(56px, 11vw, 150px); --w: 400; --o: 48; line-height: 1.02; margin-bottom: 2rem; }
.set-in-text .block { border-top: 1px solid var(--rule); padding: 40px 0; display: grid; gap: 20px; font-size: 17px; line-height: 1.5; }
.set-in-text .two { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 40px; }
.set-in-text .side { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px; }
.set-in-text .two p + p { margin-top: .8em; }
.set-in-text .tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); --w: 500; }
.set-in-text .d { --o: 48; line-height: 1.02; }
.set-in-text .s120 { font-size: clamp(56px, 11vw, 140px); } .set-in-text .s80 { font-size: clamp(44px, 7vw, 88px); }
.set-in-text .s56 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; } .set-in-text .s36 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.2; }
.set-in-text .s24 { font-size: 24px; line-height: 1.35; } .set-in-text .s20 { font-size: 20px; line-height: 1.45; } .set-in-text .s14 { font-size: 14px; line-height: 1.5; }
.set-in-text .s12 { font-size: 12px; line-height: 1.5; } .set-in-text .s10 { font-size: 10px; line-height: 1.45; }
.set-in-text .w1 { --w: 100; } .set-in-text .w2 { --w: 200; } .set-in-text .w3 { --w: 300; } .set-in-text .w5 { --w: 500; } .set-in-text .w6 { --w: 600; }
.set-in-text .w7 { --w: 700; } .set-in-text .w8 { --w: 800; } .set-in-text .w9 { --w: 900; }
.set-in-text .caps { text-transform: uppercase; letter-spacing: .04em; font-feature-settings: "case" 1; }
.set-in-text .wrap { overflow-wrap: anywhere; }
.set-in-text .measure { max-width: 34em; }
.set-in-text .measure-table { max-width: 560px; }
.set-in-text table { border-collapse: collapse; width: 100%; font-feature-settings: "tnum" 1; }
.set-in-text td, .set-in-text th { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--rule); font-weight: normal; }
.set-in-text td:first-child, .set-in-text th:first-child { text-align: right; }
.set-in-text th { color: var(--muted); font-size: 12px; }