/* The hero is a poster on the flyer's architecture, in Ümbe's own language:
     the word     ümbe in Ümbe Slot (a constructed lowercase whose counters are all one narrow slot), run-on and
                  broken mid-word across two colliding lines, the second staggered in to leave a pocket
     the marks    one family in four states (bloom, flower, halo, field) with a hierarchy: a dominant cobalt bloom
                  behind the word, showing through its counters; a red flower overprinting a collision on it;
                  a small violet halo in the pocket; a cobalt field leaving by the right edge
     the void     the lower middle stays open paper
     nav row      the flyer's date row, under the word. On scroll it becomes the site bar
     lineup       the flyer's "Performances by": the projects, as links, in a column
     foot line    two plain facts along the bottom
   Generated stage: umbe-studio-audit/2026-09-28/poster-system/tools/build_hero3.py + hero3.json (slotface.py, marks2.py).
   Texture sits on printed surfaces only (#pp-ink on the word, #pp-riso on the marks); interface text stays clean. */

.pp{
  /* the word's box: the full width, unless the screen is too short to keep the paper below it */
  --fw:min(100vw, calc((100svh - 17rem) * 1440 / 519));
  --fh:calc(var(--fw) * 519 / 1440);
  --fu:calc(var(--fw) / 100);
  --info:0.6875rem;
  position:relative;height:100svh;min-height:36rem;overflow:hidden;color:var(--slate);
  background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")
}
.pp-stage{position:absolute;inset:0;pointer-events:none}
.pp-set{position:absolute;left:0;top:0;width:var(--fw);aspect-ratio:var(--ar)}
.pp-lay{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pp-stack{display:none}
.pp-l{fill:var(--slate);filter:url(#pp-ink)}

/* marks: each group overprints within itself (multiply) and sits on what is under it at 90% */
.pp-mk{position:absolute;inset:0;isolation:isolate;opacity:0.9}
.rg{position:absolute;overflow:visible;color:var(--c);fill:currentColor;mix-blend-mode:multiply;rotate:var(--r,0deg);
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--d) * 1%);height:auto;aspect-ratio:1;margin:calc(var(--d) * -0.5%) 0 0 calc(var(--d) * -0.5%)}
.pp-low .rg{top:auto;bottom:calc(var(--y) * var(--fu));width:calc(var(--d) * var(--fu));margin:0 0 calc(var(--d) * var(--fu) * -0.5) calc(var(--d) * var(--fu) * -0.5)}
.rg-i{filter:url(#pp-riso)}

/* small functional type: quiet capitals */
.pp-k{font:700 var(--info)/1.15 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase}

/* nav row: under the word like the flyer's date row, spread over the left two thirds so the print can own the right */
.pp .nav{position:absolute;z-index:4;left:0;right:0;top:calc(var(--fh) + 0.35rem);display:flex;justify-content:space-between;align-items:center;height:2.75rem;padding:0 max(var(--pad), calc(100vw - var(--fw) * 0.6)) 0 var(--pad);color:var(--slate)}

/* K-W info row across the top of the sheet: tiny, in the ink, over whatever is printed there (knocked out) */
.pp-top{position:absolute;z-index:5;left:var(--pad);right:var(--pad);top:0.7rem;display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;gap:var(--gut);
  font:700 var(--info)/1.15 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase}
.pp-top span:last-child{justify-self:end}
.pp-top span,.pp-foot span,.pp-venue p{background:var(--creme);padding:0.12em 0.3em;margin:-0.12em -0.3em;width:max-content}

/* lineup: the flyer's act list, numbered, in the black face, tight enough to touch */
.pp-lineup{position:absolute;z-index:4;left:var(--pad);top:calc(var(--fh) + 3.8rem)}
.pp-k{font-weight:600;margin-bottom:0.5rem}
.pp-k,.pp-names a{background:none}
.pp-names a{display:flex;align-items:baseline;gap:0.35em;width:max-content;font:900 max(1.8125rem, min(clamp(1.6rem,0.8rem + 2.6vw,3.6rem), calc((100svh - var(--fh)) * 0.12)))/0.86 var(--ff-black);letter-spacing:-0.055em;padding-right:0.1em}   /* 29 px floor: 24 px between names, the minimum target size */
.pp-names .n{font:700 0.6875rem/1 var(--ff-head);letter-spacing:0.02em;transform:translateY(-0.9em)}
.pp-names a:hover{color:var(--red)}

/* venue block: the flyer's "The Virgil / 4519 Santa Monica / $10 presale", as the studio's own facts */
.pp-venue{position:absolute;z-index:4;left:50%;top:calc(var(--fh) + 4.6rem);transform:translateX(-50%);display:grid;justify-items:center;gap:0.2rem;text-align:center;
  font:700 0.8125rem/1.2 var(--ff-head)}
.pp-venue .pp-vh{font:900 1.5rem/1 var(--ff-black);letter-spacing:-0.04em;margin-bottom:0.2rem}
.pp-venue a{display:inline-flex;align-items:center;min-height:1.625rem;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}   /* 26 px rows, no overlap: the WCAG 2.5.8 minimum */

/* foot line */
.pp-foot{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:0.95rem;display:flex;justify-content:space-between;gap:1rem;font:700 var(--info)/1.15 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase}

/* stacked: portrait screens */
@media (max-aspect-ratio:1/1){
  .pp{--fw:min(100vw, calc((100svh - 16rem) * 390 / 460));--fh:calc(var(--fw) * 460 / 390)}
  .pp-wide{display:none}
  .pp-stack{display:block}
  .pp-lineup{top:calc(var(--fh) + 3.6rem)}
  .pp .nav{padding:0 var(--pad)}
  .pp-top{grid-template-columns:1fr 1fr;row-gap:0.3rem}
  .pp-top span:nth-child(2),.pp-top span:nth-child(3){display:none}
  .pp-venue{left:auto;right:var(--pad);transform:none;justify-items:end;text-align:right;top:auto;bottom:3.2rem}
  .pp-venue .pp-vh{font-size:1.1rem}
}
@media (max-aspect-ratio:1/1) and (max-height:700px){.pp{--fw:min(100vw, calc((100svh - 14rem) * 390 / 460))}.pp-k{display:none}.pp-lineup{top:calc(var(--fh) + 3.2rem)}.pp-low .rg-field{display:none}}
@media (max-aspect-ratio:1/1) and (min-width:600px){.pp-low .rg-halo{display:none}}   /* minor marks drop out where they would reach the nav or the foot line */

/* the bar: once the nav row reaches the top it stays there, on the colour of whatever section is under it */
.pp .nav.is-stuck{position:fixed;z-index:50;top:0;padding:0 var(--pad);background:var(--bg);color:var(--fg);box-shadow:0 1px 0 color-mix(in srgb,var(--fg) 16%,transparent)}
@media (min-width:760px){.pp .nav.is-stuck{height:2.5rem}}

/* entry, armed before first paint by the head script. The word and the lineup are printed from the first frame
   (the lineup is the LCP); the marks go down one colour pass at a time, landing slightly out of register and
   settling (ALIGN); then the small type. Then everything is still. */
html.pp-arm .rg{transition:opacity 0.18s linear calc(0.15s + var(--p) * 0.22s),translate 0.6s var(--ease) calc(0.15s + var(--p) * 0.22s)}
html.pp-arm .pp .nav > a,html.pp-arm .pp-k,html.pp-arm .pp-foot > span,html.pp-arm .pp-top > span,html.pp-arm .pp-venue{transition:opacity 0.5s linear 0.85s,translate 0.7s var(--ease) 0.85s}
html.pp-arm:not(.pp-go) .rg{opacity:0;translate:calc(var(--d) * 0.05%) calc(var(--d) * -0.035%)}
html.pp-arm:not(.pp-go) .pp .nav > a,html.pp-arm:not(.pp-go) .pp-k,html.pp-arm:not(.pp-go) .pp-foot > span,html.pp-arm:not(.pp-go) .pp-top > span,html.pp-arm:not(.pp-go) .pp-venue{opacity:0;translate:0 0.4rem}
html.pp-done .pp *{transition:none}

/* SEPARATE, on scroll: js/hero.js writes --sp (0 at rest, 1 when the poster has scrolled away) while motion is allowed.
   The two lines slide apart, each mark leaves on its own vector, the small type goes first. Reduced motion never sets it. */
.pp{--sp:0}
.pp-set .pp-line{transform:translateX(calc(var(--sp) * var(--dx,0vw)))}
.pp-set .pp-line:nth-of-type(1){--dx:-20vw}
.pp-set .pp-line:nth-of-type(2){--dx:16vw}
.pp-set .pp-line:nth-of-type(3){--dx:-12vw}
.rg{transform:translate(calc(var(--sp) * var(--mx,0vw)),calc(var(--sp) * var(--my,0vh)))}
.pp-lineup,.pp-foot{opacity:calc(1 - var(--sp) * 2.4);transform:translateY(calc(var(--sp) * -4vh))}