/* The hero: words on the left, a flash sheet on the right being tattooed live. */

body .elementor .hero{position:relative;isolation:isolate;padding:0;overflow-x:clip}
body .elementor .hero > .elementor-container{max-width:none;min-height:var(--hero-h);align-items:stretch}
body .elementor .hero .elementor-widget{margin:0}
body .elementor .hero-text{position:relative;z-index:3}
body .elementor .hero-text > .elementor-widget-wrap{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:0 22px;padding:calc(var(--hdr-h) + 50px) 0 clamp(84px,9vw,130px) max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
body .elementor .hero-text .eyebrow,body .elementor .hero-text .hero-line,body .elementor .hero-text .hero-mark,body .elementor .hero-text .hero-status{flex-basis:100%}
body .elementor .hero-text .elementor-widget-button{width:auto;margin:0}
body .elementor .hero-text .hero-status{margin-top:20px}
body .elementor .hero-line .elementor-heading-title{margin:.04em 0 .24em;font:400 clamp(3.1rem,min(6.9vw,13.2svh),8.4rem)/.98 var(--f-display);color:var(--ink);text-shadow:.045em .05em 0 var(--shade)}
body .elementor .hero-mark .elementor-heading-title{max-width:27em;margin:0 0 1.5em;font:700 clamp(1rem,.3vw + .92rem,1.18rem)/1.4 var(--f-label);letter-spacing:.09em;text-transform:uppercase;color:var(--fg2)}

body .elementor .hero-art{position:relative;z-index:1}
.stage{position:relative;height:var(--hero-h)}
.stage-art{--art-w:min(calc(var(--hero-h) * 1.6),100vw);position:absolute;right:max(0px,calc((100vw - var(--wrap)) / 2 - 70px));top:50%;width:var(--art-w);aspect-ratio:1.6;transform:translateY(-50%)}
.stage-tilt{position:absolute;inset:0;transform:rotate(1.3deg);transform-origin:70% 50%}
.stage-ink{position:absolute;left:var(--ink-x);top:var(--ink-y);width:var(--ink-w);aspect-ratio:var(--ink-r)}
.stage-ink img,.stage-ink canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-base{filter:drop-shadow(0 2px 3px rgba(50,30,14,.42)) drop-shadow(0 18px 26px rgba(50,30,14,.34))}
/* The finished layer arrives on its own, so the sheet ends up complete with no script at all. stage.js holds it back only while it works. */
.stage-full{opacity:0;animation:mi-ink-in .7s 2.4s forwards}
@keyframes mi-ink-in{to{opacity:1}}
.stage.is-live .stage-full{animation:none;opacity:0}
.stage.is-still .stage-full{animation:none;opacity:1}
.stage.is-live.is-inked .stage-full{opacity:1;transition:opacity .7s}
.stage-fill{opacity:0}
.stage.is-live .stage-fill{opacity:1}

/* One wireless pen. Its size and parked place come from build.py, so it is on the page with no script at all: stage.js takes over from there. */
.machine{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.machine img{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-shadow{opacity:.34}

.stage-controls{position:absolute;right:var(--gutter);bottom:clamp(64px,7vw,110px);display:none;gap:16px;z-index:4}
.stage.is-live .stage-controls{display:flex}
.stage-pedal,.stage-sound{appearance:none;border:0;border-bottom:1px solid var(--ink-3);background:var(--print);color:var(--ink-2);padding:.4em .7em;font:700 .9rem/1.2 var(--f-label);letter-spacing:.11em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 7px rgba(50,30,14,.3);transform:rotate(-1.2deg)}
.stage-pedal[disabled]{display:none}
.stage-pedal:hover,.stage-sound:hover,.stage-sound[aria-pressed=true]{color:var(--red);border-color:var(--red)}

@media (max-width:1199px){
  body .elementor .hero-mark .elementor-heading-title{max-width:21em}
}
/* tablets and phones: the sheet on top, the words under it */
@media (max-width:999px){
  body .elementor .hero > .elementor-container{min-height:0;flex-wrap:wrap}
  body .elementor .hero .hero-text,body .elementor .hero .hero-art{width:100%}
  body .elementor .hero-art{order:-1}
  .stage{height:calc(var(--hdr-h) + 82vw)}
  .stage-art{--art-w:calc(72vw * 2880 / 1640);right:auto;left:calc(50vw - var(--art-w) * .698);top:calc(var(--hdr-h) + 2vw - var(--art-w) * .0451);transform:none}
  body .elementor .hero-text > .elementor-widget-wrap{padding:clamp(20px,4vw,40px) var(--gutter) clamp(84px,12vw,130px)}
  body .elementor .hero-line .elementor-heading-title{font-size:clamp(2.9rem,10.8vw,6.4rem)}
  body .elementor .hero-mark .elementor-heading-title{max-width:27em}
  .stage-controls{bottom:12px;right:var(--gutter)}
}
@media (max-width:767px){
  .stage{height:calc(var(--hdr-h) + 112vw)}
  .stage-art{--art-w:calc(106vw * 2880 / 1640)}
  body .elementor .hero-text .elementor-widget-button{margin-bottom:12px}
  .stage-controls{display:none}
}

/* GENERATED by build.py */
.stage-ink{--ink-x:41.319%;--ink-y:7.222%;--ink-w:56.944%;--ink-r:1640/1640}
.machine{width:17.361%;aspect-ratio:500/646.6;left:83.114%;top:50.329%}