/* about/scale.css: "The studio, to scale", right of the About title block (markup baked by bake-scale.js).
   Three matte tiles like the home hero's, side by side on one baseline, each tile's AREA its lines of source.
   The warm glow under each one moves, curls and flickers like the home tiles' (here in css: two soft layers
   on odd cycles, opacity and transform only). Hover: a 2px lift and the glow brightening, as on home. */
.ph__aside{--aside-w:32rem}
.sc{--gap:clamp(18px,6cqi,30px);margin:0}
.sc__h{margin:0 0 30px}
.sc__row{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:var(--gap)}
/* side = r x the biggest; the three sides and two gaps fill the row exactly */
.sc__it{--g:.9;--lift:0px;position:relative;flex:0 0 calc((100% - 2 * var(--gap)) * var(--r) / var(--sum));min-width:0;margin:0}
.sc__t{position:relative;z-index:1;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-tile);
  background:radial-gradient(95% 62% at 50% 114%,rgb(255 150 70 / calc(var(--g) * .17)),rgb(255 150 70 / 0) 72%),var(--ground-2);
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .075),inset 0 -1px 0 rgb(255 176 104 / calc(var(--g) * .34));
  translate:0 var(--lift);transition:translate .28s cubic-bezier(.2,.7,.2,1),scale .28s cubic-bezier(.2,.7,.2,1)}
.sc__t svg{display:block;width:clamp(22px,28%,44px);height:auto;aspect-ratio:1;overflow:visible;
  fill:color-mix(in oklab,var(--cream),#FFC08A calc(var(--g) * 22%));fill-opacity:.9;
  filter:drop-shadow(0 -.75px 0 rgb(0 0 0 / .6)) drop-shadow(0 1px 1.6px rgb(255 140 60 / calc(var(--g) * .5)))}
.sc__t .fh-in--lo{fill-opacity:.5}
.sc__t .fh-in--mid{fill-opacity:.72}
.sc__t .fh-in--plate{fill-opacity:.8}

/* the glow: a halo round the tile and a tongue along its bottom edge, behind it */
.sc__glow{position:absolute;left:0;right:0;top:0;aspect-ratio:1;z-index:0;pointer-events:none;translate:0 var(--lift);
  transition:translate .28s cubic-bezier(.2,.7,.2,1),opacity .28s ease;opacity:calc(.72 + var(--g) * .3)}
.sc__glow i{position:absolute;display:block;border-radius:50%;will-change:transform,opacity}
.sc__glow i:first-child{inset:-9% -9% -13%;border-radius:22%;
  background:radial-gradient(70% 60% at 50% 88%,rgb(255 128 48 / .30),rgb(255 128 48 / .10) 55%,rgb(255 128 48 / 0) 78%);
  filter:blur(9px);animation:sc-fl 2.9s linear infinite,sc-cu 6.3s ease-in-out infinite alternate}
.sc__glow i:last-child{left:6%;right:6%;bottom:-11%;height:26%;
  background:radial-gradient(closest-side,rgb(255 160 80 / .42),rgb(255 120 40 / .14) 60%,rgb(255 120 40 / 0));
  filter:blur(5px);animation:sc-fl2 2.3s linear infinite,sc-tongue 4.1s ease-in-out infinite alternate}
.sc__it:nth-child(2) .sc__glow i{animation-delay:-1.1s,-2.4s}
.sc__it:nth-child(3) .sc__glow i{animation-delay:-1.9s,-4.7s}
@keyframes sc-fl{0%{opacity:.86}11%{opacity:1}19%{opacity:.8}33%{opacity:.95}47%{opacity:.78}58%{opacity:.98}71%{opacity:.84}86%{opacity:1}100%{opacity:.86}}
@keyframes sc-fl2{0%{opacity:.9}17%{opacity:.62}29%{opacity:1}44%{opacity:.74}61%{opacity:.96}77%{opacity:.66}100%{opacity:.9}}
@keyframes sc-cu{0%{transform:translateX(-2.5%) rotate(-1.2deg) scale(1)}50%{transform:translateX(1.5%) rotate(.8deg) scale(1.03)}100%{transform:translateX(2.5%) rotate(1.4deg) scale(.99)}}
@keyframes sc-tongue{0%{transform:translateX(-5%) scaleX(.94) skewX(-6deg)}50%{transform:translateX(2%) scaleX(1.06) skewX(3deg)}100%{transform:translateX(5%) scaleX(.98) skewX(7deg)}}
.sc--still .sc__glow i{animation-play-state:paused}

@media (hover:hover){
  .sc__it:has(.sc__t:hover){--g:1.25;--lift:-2px}
  .sc__it:has(.sc__t:hover) .sc__t{scale:1.04}
}
.sc__it:has(.sc__t:focus-visible){--g:1.25}
.sc__t:active{scale:.97;transition-duration:.08s}
.sc__t:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

.sc__n{margin:16px 0 0;font:500 15px/1 var(--f-sans);color:var(--cream);white-space:nowrap}
.sc__v{margin:8px 0 0;font-size:12px;line-height:1;color:var(--ink-3);white-space:nowrap}
.sc__v b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sc__s{margin:6px 0 0;font-size:11px;line-height:1;color:var(--ink-3);white-space:nowrap}
.sc__f{margin:26px 0 0;max-width:48ch;font-size:11px;line-height:1.55;letter-spacing:.01em;color:var(--ink-3);text-wrap:pretty}
.sc__f b{font-weight:500;color:var(--ink-2)}

/* stacked under the block (below 1200 px): the same picture, a little smaller */
@media (max-width:1199px){.sc{max-width:30rem}.sc__h{margin-bottom:22px}}
@media (max-width:520px){
  .sc{--gap:14px}
  .sc__n{font-size:14px;margin-top:12px}
  .sc__v{font-size:11px}
  .sc__s{font-size:10.5px}
}
/* Helm's column is the narrowest: its two mono lines may run past it into the gap (they're short) */
@media (prefers-reduced-motion:reduce){
  .sc__glow i:first-child,.sc__glow i:last-child{animation:none}
  .sc__t,.sc__glow{transition:none}
  .sc__it:has(.sc__t:hover){--lift:0px}
  .sc__it:has(.sc__t:hover) .sc__t,.sc__t:active{scale:1}
}
@media (forced-colors:active){.sc__glow{display:none}.sc__t{border:1px solid CanvasText}}
.sc__h{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sc__hk{letter-spacing:.08em;text-transform:none;color:var(--ink-3)}
/* stacked on a phone: the header's two parts on two lines */
@container aside (max-width:380px){.sc__h{flex-direction:column;align-items:flex-start;gap:7px}}