/* One-screen stages: the page is a single object that fills the viewport under the bar.
   Loaded only by the pages that are one screen (Services, Channels, Work with us). */
html, body { height: 100%; }
body { height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; }
main.stage { flex: 1; min-height: 0; position: relative; overflow: hidden; }
@media (max-height: 479px) {
  body { height: auto; min-height: 100svh; overflow: visible; }
  main.stage { min-height: 100svh; } /* the page then scrolls by the dock's height (site.css), which clears it */
}
/* riso print helpers */
.riso-dots { background-image: radial-gradient(circle, rgb(0 0 0 / .30) .9px, transparent 1.1px); background-size: 4px 4px; }
.riso-dots--paper { background-image: radial-gradient(circle, rgb(247 244 235 / .55) .9px, transparent 1.1px); background-size: 4px 4px; }
/* the logotype: the treatment for every big word outside the channel keys. Archivo Black caps
   in the page's ink, clean: the outline belongs to the logo alone (28 Sep, the founder's call
   after a bordered italic take). One word of a line may be lit (.hi): it sits on a printed block
   of a highlight ink (--hi) in that ink's own text colour (--hi-ink), the way a marker takes a
   word. --logo-ink recolours the letters. Legacy class .ink2 is the same thing. */
.logotype, .ink2 {
  display: inline-block; font-family: var(--heading); font-weight: 400; font-style: normal; text-transform: uppercase;
  letter-spacing: -.02em; color: var(--logo-ink, currentColor);
}
.logotype .hi {
  display: inline-block; line-height: .82; padding: .06em .12em .02em; margin: 0 -.02em;
  background: var(--hi, var(--sun)); color: var(--hi-ink, var(--ink)); transition: var(--flip);
}
.mono { font: 700 .75rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  main.stage *, main.stage *::before, main.stage *::after { transition: none !important; animation: none !important; }
}