/* section backgrounds (glows.js): an art glow behind Earlier work; By the numbers a lighter band; the studio yellow */
.glow{ position:relative; isolation:isolate; overflow:hidden; }
.glow-art{ position:absolute; z-index:-1; top:-10%; bottom:-10%; width:70%; pointer-events:none; }
.glow-art.r{ right:-15%; } .glow-art.l{ left:-15%; }
.glow-art img{ display:block; width:100%; height:100%; object-fit:cover; filter:blur(80px) saturate(1.5); opacity:.4;
  -webkit-mask:radial-gradient(farthest-side, #000 20%, rgba(0,0,0,.4) 55%, transparent 85%); mask:radial-gradient(farthest-side, #000 20%, rgba(0,0,0,.4) 55%, transparent 85%); }
/* the band: By the numbers on a lighter charcoal, edge to edge, no hairline on top */
#numbers.x-numbers{ background:#18181e !important; padding-top:clamp(64px,8vw,112px) !important; }
#numbers.x-numbers > .wrap{ border-top:0 !important; padding-top:0 !important; }
#numbers + .x-wins > .wrap{ border-top:0; }
/* the studio: a juice-yellow band with black words (overrides the night look) */
#studio.studio{ background:var(--pine) !important; color:var(--ink) !important; padding-top:clamp(80px,10vw,140px) !important; }
#studio > .wrap{ border-top:0 !important; padding-top:0 !important; }
#studio .big{ color:var(--ink) !important; } #studio .big em{ color:#6b5a10 !important; }
#studio .eyebrow{ color:#6b5a10 !important; } #studio .eyebrow::before{ color:var(--ink) !important; }
#studio .crafts b{ color:var(--ink) !important; } #studio .crafts span{ color:#5c4d0e !important; }
#studio .crafts, #studio .crafts li{ border-color:rgba(18,18,20,.18) !important; }
#studio + .x-news > .wrap{ border-top:0; }
/* By the numbers: a dot grid fading in from the top right with a soft juice glow, and the rank huge and outlined */
#numbers{ position:relative; isolation:isolate; overflow:hidden; }
#numbers::before{ content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(50% 70% at 90% 0%, color-mix(in srgb, var(--juice-now, var(--pine)) 14%, transparent), transparent 70%); }
.nums-dots{ position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask:radial-gradient(70% 90% at 85% 10%, #000, transparent 75%); mask:radial-gradient(70% 90% at 85% 10%, #000, transparent 75%); }
.nums-rank{ position:absolute; z-index:-1; right:-2%; top:50%; translate:0 -50%; pointer-events:none; font:900 clamp(260px, 34vw, 560px)/.8 var(--head); letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:2px color-mix(in srgb, var(--juice-now, var(--pine)) 18%, transparent); }
@media (max-width:700px){ .nums-rank{ font-size:52vw; top:auto; bottom:2%; translate:none; } }
/* the contact collage on tablets and phones: four (phones three) columns so the tiles stay big, fading in from the bottom, not the side */
@media (max-width:900px){
  .contact .collage{ grid-template-columns:repeat(4, 1fr); inset:auto -30% -10% -30%; height:110%; align-content:end; rotate:-8deg; scale:1;
    -webkit-mask:linear-gradient(180deg, transparent 15%, #000 80%); mask:linear-gradient(180deg, transparent 15%, #000 80%); }
}
@media (max-width:600px){ .contact .collage{ grid-template-columns:repeat(3, 1fr); } }