/* ============================================================
   PUSH — the light each kind of letter already lives in.
   Words stay in the type they were set in. What changes is how
   light, contact and arrival belong to that letter.

   Variables painted by push.js per word:
     --emit     0..1.3  light the letter gives off now
     --flare    0..1    the flash as it lands
     --develop  0..1    how far the image has come up
     --shine    0..1    how seated the face is (catches the light)
     --trace    0..1    what is left behind it on the way in
   and on the root: --push-vel, the reader's speed.
   ============================================================ */

:root{ --push-vel:0; --push-void:#020202; }

.push-w{
  display:inline-block;
  will-change:opacity, filter, transform;
  transform-origin:50% 82%;
  backface-visibility:hidden;
}

/* ---------- the dark around the reader ----------
   One vignette for the whole walk. The middle of the screen is where
   the reader's light falls; the edges go to the void. Light rooms
   drop it. No blend mode: plain alpha over what is below. */
#push-dark{
  position:fixed; inset:0; z-index:45; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 46%, rgba(0,0,0,0) 34%, rgba(0,0,0,.34) 66%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 80%, rgba(0,0,0,.5) 100%);
  opacity:0;
  transition:opacity .9s cubic-bezier(.22,.68,.26,1);
}
body[data-tone="dark"] #push-dark{ opacity:1; }
body[data-tone="red"] #push-dark{ opacity:.85; }
body[data-tone="light"] #push-dark,
#push-dark.is-over-light{ opacity:0; }
body.is-journeying[data-tone="dark"]{ background-color:var(--push-void); }

/* ---------- ink: warm lettering that clears into light ---------- */
.push-ink .push-w,
.push-w[data-push="ink"]{
  color:#F4F1EA;
  text-shadow:
    0 0 calc(var(--emit,0) * 14px) rgba(255,246,228, calc(var(--emit,0) * .38)),
    0 0 calc(var(--flare,0) * 34px) rgba(255,238,210, calc(var(--flare,0) * .32)),
    0 1px 0 rgba(0,0,0,.65),
    0 10px 22px rgba(0,0,0, calc(.3 + var(--shine,0) * .25));
}

/* ---------- blueprint: projected onto the drawn house ----------
   The sentence is thrown onto the sheet by a projector: a hot white
   core, a cobalt-cold bloom, and a leading edge of light the word
   leaves as it lands. The plan tilts up under the reader. */
.bp-say.push-blueprint{
  transform:perspective(1200px) rotateX(calc(9deg - var(--p,0) * 6deg));
  transform-origin:50% 100%;
}
.bp-say .cp-w[data-push="blueprint"],
.bp-press-k .cp-w[data-push="blueprint"],
.push-blueprint .push-w{
  color:#FFFFFF;
  -webkit-text-fill-color:#FFFFFF;
  text-shadow:
    0 0 1px rgba(255,255,255, calc(.4 + var(--emit,0) * .6)),
    0 0 calc(4px + var(--emit,0) * 16px) rgba(214,232,255, calc(.18 + var(--emit,0) * .6)),
    0 0 calc(var(--flare,0) * 60px) rgba(150,196,255, calc(var(--flare,0) * .55)),
    calc(var(--trace,0) * -.14em) 0 calc(4px + var(--trace,0) * 10px) rgba(186,214,255, calc(var(--trace,0) * .5)),
    0 1px 0 rgba(2,14,40,.7),
    0 14px 26px rgba(1,8,26, calc(.3 + var(--shine,0) * .35)) !important;
}
.bp-press-line .cp-w[data-push="blueprint"]{
  text-shadow:
    0 0 calc(var(--emit,0) * 10px) rgba(214,232,255, calc(var(--emit,0) * .4)),
    0 1px 0 rgba(2,14,40,.6) !important;
}
/* the projector: a cone of light that crosses the sheet with the scroll */
.push-beam{
  position:absolute; inset:-10% -20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(36% 58% at calc(8% + var(--p,0) * 84%) 72%, rgba(226,238,255,.20) 0%, rgba(160,200,255,.07) 42%, transparent 72%),
    linear-gradient(100deg, transparent calc(var(--p,0) * 100% - 14%), rgba(230,240,255,.06) calc(var(--p,0) * 100%), transparent calc(var(--p,0) * 100% + 10%));
  opacity:calc(.35 + var(--p,0) * .65);
}
.bp-say-stage{ background:radial-gradient(90% 70% at 50% 110%, rgba(0,6,24,.55), transparent 70%); }
.bp-say .cp-line{ position:relative; }
.bp-say .cp-line::after{
  content:"";
  position:absolute; left:0; right:18%; bottom:-.06em; height:1px;
  background:linear-gradient(90deg, rgba(232,242,255,0), rgba(232,242,255,.9) 12%, rgba(232,242,255,.12) 72%, transparent);
  box-shadow:0 0 12px rgba(200,224,255,.5);
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  pointer-events:none;
}
/* the drawn house tilts up off the table as it is reached */
.bp-fig.is-plan.push-blueprint,
.bp-fig.is-plan{
  transform:perspective(1600px) rotateX(calc(26deg - var(--seat,0) * 22deg)) translateY(calc((1 - var(--seat,0)) * 30px));
  transform-origin:50% 0;
  filter:
    drop-shadow(0 26px 34px rgba(0,4,20,.45))
    drop-shadow(0 0 1px rgba(255,255,255,.25));
}
.bp-fig.is-plan.is-drawing,
.bp-fig.is-plan.is-inked{
  transform:perspective(1600px) rotateX(calc(26deg - var(--seat,1) * 22deg));
  filter:
    drop-shadow(0 26px 34px rgba(0,4,20,.45))
    drop-shadow(0 0 1px rgba(255,255,255,.25));
}
.bp-fig.is-plan .bp-lab, .bp-fig.is-plan .bp-no{
  filter:drop-shadow(0 0 6px rgba(210,230,255,.45));
}

/* ---------- red: developing under the safelight ----------
   The letter comes up out of blank paper: first a hot red flare,
   then it densifies to a warm ink as the image is fixed. */
.push-red .push-w,
.push-w[data-push="red"]{
  color:rgb(calc(255 - var(--develop,0) * 18), calc(150 + var(--develop,0) * 80), calc(130 + var(--develop,0) * 80));
  text-shadow:
    0 0 1px rgba(255,120,90, calc(.3 + var(--emit,0) * .5)),
    0 0 calc(6px + var(--emit,0) * 22px) rgba(255,36,14, calc(var(--emit,0) * .9)),
    0 0 calc(var(--flare,0) * 70px) rgba(220,18,6, calc(var(--flare,0) * .7)),
    calc(var(--trace,0) * -.3em) 0 12px rgba(150,10,4, calc(var(--trace,0) * .6)),
    0 1px 0 rgba(30,0,0,.7),
    0 12px 24px rgba(0,0,0,.5);
}
body[data-safelight="on"] .push-w[data-push="red"]{
  color:#FFD9CC;
}
.pj-tape[data-push="red"][data-tone="dark"] .w{
  color:#FFD6C8;
  text-shadow:
    0 0 1px rgba(255,140,110,.6),
    0 0 calc(6px + var(--emit,0) * 26px) rgba(255,36,14, calc(var(--emit,0) * .95)),
    0 0 calc(var(--flare,0) * 80px) rgba(220,18,6, calc(var(--flare,0) * .7)),
    calc(var(--trace,0) * -.32em) 0 12px rgba(150,10,4, calc(var(--trace,0) * .6)),
    0 1px 0 rgba(30,0,0,.6),
    0 14px 26px rgba(0,0,0,.45);
}

/* ---------- ultraviolet: emission, phosphor, and a trail ----------
   A hot violet-white core, a wide bloom, and a trail that hangs
   behind the letter in the direction the reader is scrolling. */
.push-uv .push-w,
.push-w[data-push="uv"],
.pj-tape[data-push="uv"][data-tone="dark"] .w{
  color:#F6F0FF;
  -webkit-text-fill-color:#F6F0FF;
  text-shadow:
    0 0 1px rgba(255,255,255, calc(.5 + var(--emit,0) * .5)),
    0 0 calc(3px + var(--emit,0) * 10px) rgba(214,196,255, calc(.3 + var(--emit,0) * .6)),
    0 0 calc(10px + var(--emit,0) * 34px) rgba(150,104,255, calc(.25 + var(--emit,0) * .6)),
    0 0 calc(var(--flare,0) * 90px) rgba(120,70,255, calc(var(--flare,0) * .55)),
    0 calc(var(--push-vel) * -.9px) calc(6px + var(--trace,0) * 10px) rgba(170,130,255, calc(.22 + var(--trace,0) * .4)),
    0 calc(var(--push-vel) * -2.2px) calc(14px + var(--trace,0) * 12px) rgba(120,80,255, .18),
    calc(var(--trace,0) * .4em) 0 0 rgba(186,160,255, calc(var(--trace,0) * .4));
}

/* ---------- water: the scroll is the ripple ---------- */
.pj-tape[data-push="water"] .w,
.push-w[data-push="water"]{
  text-shadow:
    0 calc(var(--wave,0) * 3px) 0 rgba(210,236,255, calc(var(--live,0) * .5)),
    0 0 calc(8px + var(--emit,0) * 20px) rgba(140,200,255, calc(var(--emit,0) * .5)),
    0 calc(var(--wave,0) * -2px) 12px rgba(80,150,210, calc(var(--live,0) * .3)),
    0 1px 0 rgba(8,20,32,.35);
}

/* ---------- emboss: a plate, lit from the upper left ----------
   No gloss, no pad. The face is the ground's own value a shade up;
   the upper-left shoulder catches the light, the lower-right falls
   into the sheet, and a contact shadow says it stands out of it. */
/* the face is lit from above, so it runs from the lit top of the letter
   to its turned-away foot; the shoulders are drawn as the shadow of the
   face itself, so every counter and serif keeps its own edge */
.push-w[data-push="emboss"]{
  background-image:linear-gradient(174deg, #FFFCF4 0%, #ECE6D8 34%, #C9C2B3 68%, #9C9588 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(-1px -1px 0 rgba(255,252,244,.42))
    drop-shadow(1px 1px 0 rgba(0,0,0,.88))
    drop-shadow(2px 3px 2px rgba(0,0,0,.55))
    drop-shadow(0 16px 22px rgba(0,0,0,.42));
}
.pj-tape[data-push="emboss"] .w{
  color:#E9E4D9;
  text-shadow:
    -1px -1px 0 rgba(255,252,244, calc(.14 + var(--shine,0) * .5)),
    1px 1px 0 rgba(0,0,0, calc(.45 + var(--develop,0) * .4)),
    2px 2px 1px rgba(0,0,0, calc(var(--develop,0) * .45)),
    3px 4px 6px rgba(0,0,0, calc(var(--develop,0) * .4)),
    0 18px 30px rgba(0,0,0, calc(var(--develop,0) * .35));
}
/* on a light sheet it is a blind emboss: paper standing out of paper */
.push-w[data-push="emboss"]:where([data-tone="light"] *, .paper *){
  background-image:linear-gradient(174deg, #FFFFFF 0%, #F1ECE1 46%, #DCD5C7 100%);
  filter:
    drop-shadow(-1px -1px 0 rgba(255,255,255,.95))
    drop-shadow(1px 1px 0 rgba(60,48,30,.32))
    drop-shadow(2px 3px 3px rgba(60,48,30,.22));
}

/* the stage names, each lit by its own light */
.pj-open .pj-name{
  text-shadow:
    0 0 calc(var(--ts,0) * 26px) rgba(255,248,232, calc(var(--ts,0) * .22)),
    0 1px 0 rgba(255,255,255, calc(var(--ts,0) * .42)),
    0 -1px 0 rgba(0,0,0, calc(.25 + var(--ts,0) * .35)),
    0 2px 1px rgba(0,0,0, calc(var(--ts,0) * .28)),
    0 24px 40px rgba(0,0,0, .35);
}
.st-04 .pj-open .pj-name,
.st-05 .pj-open .pj-name{
  color:var(--paper, #ECEAE5);
}
.st-06 .pj-open .pj-name{
  text-shadow:
    0 1px 0 rgba(220,240,255, calc(var(--ts,0) * .5)),
    0 0 calc(var(--ts,0) * 22px) rgba(150,200,255, calc(var(--ts,0) * .5));
}
.st-07 .pj-open .pj-name{
  text-shadow:
    -1px -1px 0 rgba(255,250,240, calc(.2 + var(--ts,0) * .45)),
    1px 1px 0 rgba(0,0,0,.8),
    3px 4px 6px rgba(0,0,0,.5),
    0 26px 40px rgba(0,0,0,.4);
}

/* ---------- paper: the glyph is cotton, not a flat fill ---------- */
html.has-push-paper .push-w[data-push="paper"]{
  /* cotton under a lamp: the sheet's own grain, lifted to the white it
     reads as, brightest where the light falls on the top of the letter */
  background-image:
    linear-gradient(176deg, rgba(255,254,249,.80) 0%, rgba(250,246,236,.66) 46%, rgba(226,219,204,.54) 100%),
    var(--push-paper);
  background-size:100% 100%, 260px 260px;
  background-position:0 0, calc(var(--shine,0) * 8px) 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(-.5px -.5px 0 rgba(255,255,255, calc(.15 + var(--shine,0) * .35)))
    drop-shadow(0 1px 0 rgba(0,0,0,.55))
    drop-shadow(0 10px 16px rgba(0,0,0, calc(.2 + var(--develop,0) * .3)));
}
.pj-tape[data-push="paper"] .w{
  text-shadow:
    -1px -1px 0 rgba(255,252,244, calc(var(--live,0) * .35)),
    0 2px 0 rgba(40,32,22, calc(var(--live,0) * .25)),
    0 16px 24px rgba(0,0,0, calc(var(--live,0) * .22));
}

/* ---------- press: ink pressed into a light sheet ---------- */
.push-w[data-push="press"]{
  text-shadow:
    0 1px 0 rgba(255,255,255, calc(.35 + var(--shine,0) * .4)),
    0 -.5px 0 rgba(0,0,0, calc(var(--develop,0) * .18));
}

/* ---------- vinyl transfer: a sticker with a contact edge ---------- */
.pj-tape[data-push="vinyl"] .w{
  text-shadow:
    0 1px 0 rgba(255,255,255, calc(var(--live,0) * .45)),
    0 1px 0 rgba(0,0,0,.4),
    0 14px 18px rgba(0,0,0, calc(var(--live,0) * .3)),
    calc(var(--sh,0) * -8px) 0 0 rgba(255,255,255, calc(var(--live,0) * .22));
}

/* ---------- editorial: one pull, three doors inside it ---------- */
.rr-head{
  padding:calc(var(--nav-h, 72px) + 36px) var(--gutter, 28px) 0;
}
.rr-kicker{
  margin:0 0 .45em;
  font-family:var(--display);
  font-style:italic;
  letter-spacing:.02em;
  font-size:clamp(16px,1.4vw,20px);
  color:rgba(236,230,216,.48);
}
.rr-title{ color:#ECE6D8; text-shadow:0 1px 0 rgba(255,255,255,.12), 0 -1px 0 rgba(0,0,0,.4); }
.rr-doors{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(18px, 4vw, 64px);
  align-items:baseline;
  margin:clamp(8px, 2vh, 24px) 0 clamp(28px, 5vh, 64px);
  padding:0 var(--gutter, 28px);
}
.rr-door{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px, 5.4vw, 88px);
  letter-spacing:-.02em;
  line-height:1;
  text-decoration:none;
  color:inherit;
  transition:letter-spacing .7s cubic-bezier(.22,.68,.26,1), text-shadow .7s cubic-bezier(.22,.68,.26,1);
}
.rr-door:hover, .rr-door:focus-visible{ letter-spacing:-.01em; }
.rr-door[data-push="red"]{
  text-shadow:0 1px 0 rgba(80,8,4,.55), 0 -1px 0 rgba(255,90,70,.18);
}
.rr-door[data-push="emboss"]{
  text-shadow:0 1px 0 rgba(255,244,226,.16), 0 -1px 0 rgba(12,8,4,.55), 0 2px 0 rgba(12,8,4,.28);
}
.rr-door[data-push="ink"]{
  text-shadow:0 1px 0 rgba(255,255,255,.12), 0 -1px 0 rgba(0,0,0,.35);
}

.binding-name.push-red{ letter-spacing:.04em; }

/* ============================================================
   THE NODES — a rail of hairlines, one per room, in the order of the
   house; under the room you are in, one per pull it holds.
   ============================================================ */
#push-nodes{
  position:fixed; right:clamp(12px, 1.5vw, 24px); top:50%; z-index:47;
  transform:translateY(-50%);
  color:#EDE8DC;
  opacity:0; visibility:hidden;
  transition:opacity .7s cubic-bezier(.22,.68,.26,1), color .7s cubic-bezier(.22,.68,.26,1), visibility 0s linear .7s;
}
#push-nodes.is-live{ opacity:1; visibility:visible; transition-delay:0s; }
html.push-on-light #push-nodes{ color:#1B1916; }
.pn-list{ display:flex; flex-direction:column; align-items:flex-end; }
.pn-node{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  height:24px; color:inherit; text-decoration:none; outline:none;
}
.pn-mark{
  display:block; width:12px; height:1px; background:currentColor; opacity:.34;
  transition:width .55s cubic-bezier(.22,.68,.26,1), opacity .55s cubic-bezier(.22,.68,.26,1), box-shadow .55s cubic-bezier(.22,.68,.26,1);
}
.pn-name{
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
  opacity:0; transform:translateX(6px);
  transition:opacity .45s cubic-bezier(.22,.68,.26,1), transform .45s cubic-bezier(.22,.68,.26,1);
  pointer-events:none;
}
.pn-no{ font-size:8px; letter-spacing:.3em; opacity:.5; }
.pn-t{ font-family:var(--mono, "IBM Plex Mono", monospace); font-size:9px; letter-spacing:.3em; }
.pn-node:hover .pn-mark, .pn-node:focus-visible .pn-mark{ width:22px; opacity:.8; }
.pn-node:hover .pn-name, .pn-node:focus-visible .pn-name{ opacity:.92; transform:none; }
.pn-node.is-here .pn-mark{ width:30px; opacity:1; }
.pn-node.is-room.is-here .pn-name{ opacity:.62; transform:none; }
#push-nodes:hover .pn-node.is-room .pn-name{ opacity:.5; transform:none; }
#push-nodes:hover .pn-node.is-room:hover .pn-name{ opacity:.95; }

/* the pulls inside the room you are in */
.pn-sub{
  display:flex; flex-direction:column; align-items:flex-end;
  max-height:0; overflow:hidden;
  transition:max-height .7s cubic-bezier(.22,.68,.26,1);
}
.pn-sub.is-open{ max-height:360px; padding:4px 0 8px; }
.pn-node.is-leaf{ height:17px; gap:10px; }
.pn-node.is-leaf .pn-mark{ width:6px; opacity:.28; }
.pn-node.is-leaf .pn-t{ font-family:var(--display); font-style:italic; font-size:13px; letter-spacing:0; }
.pn-node.is-leaf.is-here .pn-mark{ width:16px; opacity:.9; }
.pn-node.is-leaf.is-here .pn-name{ opacity:.55; transform:none; }
#push-nodes:hover .pn-sub.is-open .pn-name{ opacity:.45; transform:none; }
#push-nodes:hover .pn-sub.is-open .pn-node:hover .pn-name{ opacity:.95; }

/* the lit mark carries its room's light */
.pn-node.is-here[data-kind="blueprint"] .pn-mark{ box-shadow:0 0 6px rgba(190,216,255,.9), 0 0 16px rgba(120,170,255,.5); }
.pn-node.is-here[data-kind="red"] .pn-mark{ background:#FF6A4E; box-shadow:0 0 6px rgba(255,50,20,.9), 0 0 18px rgba(220,20,6,.55); }
.pn-node.is-here[data-kind="uv"] .pn-mark{ background:#E6DCFF; box-shadow:0 0 6px rgba(190,160,255,.95), 0 0 20px rgba(130,80,255,.6); }
.pn-node.is-here[data-kind="water"] .pn-mark{ box-shadow:0 0 8px rgba(150,205,255,.6); }
.pn-node.is-here[data-kind="emboss"] .pn-mark{ box-shadow:0 -1px 0 rgba(255,252,244,.55), 0 1px 0 rgba(0,0,0,.9); }
.pn-node.is-here[data-kind="ink"] .pn-mark,
.pn-node.is-here[data-kind="paper"] .pn-mark,
.pn-node.is-here[data-kind="editorial"] .pn-mark{ box-shadow:0 0 8px rgba(255,244,222,.5); }
html.push-on-light .pn-node.is-here .pn-mark{ box-shadow:none; background:#1B1916; }
@media (max-width:900px){ #push-nodes{ display:none; } }

/* ============================================================
   THE CROSSING — the screen taken for a moment by the material of the
   place asked for, its name set in it, the place under it as it lifts.
   Driven by --in, --dev (the name coming up) and --out, all 0..1.
   ============================================================ */
#push-hero{
  --in:0; --dev:0; --out:0;
  position:fixed; inset:0; z-index:86; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden;
}
#push-hero.is-on{ visibility:visible; }
.ph-ground, .ph-light{ position:absolute; inset:0; display:block; }
.ph-word{
  position:relative; margin:0; padding:0 6vw;
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  transform:translate3d(0, calc((1 - var(--dev)) * 14px - var(--out) * 10px), 0);
}
.ph-word-t{
  position:relative; display:block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(54px, 8.6vw, 164px); line-height:.94; letter-spacing:-.018em;
  opacity:calc(.04 + var(--dev) * .96);
}
.ph-sub{ font-size:10px; letter-spacing:.36em; opacity:calc(var(--dev) * .66); }
.ph-sub:empty{ display:none; }

/* blueprint — thrown onto the drawing by a projector */
#push-hero[data-kind="blueprint"] .ph-ground{
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,8,30,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 48px),
    #0A3A86;
}
#push-hero[data-kind="blueprint"] .ph-light{
  background:radial-gradient(34% 60% at calc(10% + var(--dev) * 80%) 56%, rgba(226,238,255,.26), rgba(160,200,255,.08) 46%, transparent 72%);
}
#push-hero[data-kind="blueprint"] .ph-word-t{
  color:#FFFFFF;
  text-shadow:
    0 0 1px rgba(255,255,255,.9),
    0 0 calc(6px + var(--dev) * 18px) rgba(214,232,255,.55),
    0 0 calc((1 - var(--dev)) * 70px) rgba(150,196,255,.6),
    calc((1 - var(--dev)) * -.16em) 0 12px rgba(186,214,255,.45),
    0 16px 30px rgba(1,8,26,.55);
}
#push-hero[data-kind="blueprint"] .ph-word-t::after{
  content:""; position:absolute; left:0; right:0; bottom:-.08em; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,242,255,.95) 12%, rgba(232,242,255,.2) 80%, transparent);
  box-shadow:0 0 12px rgba(200,224,255,.6);
  transform:scaleX(var(--dev)); transform-origin:0 50%;
}
#push-hero[data-kind="blueprint"] .ph-sub{ color:#DCE8FF; }

/* red — comes up in the developer under the safelight */
#push-hero[data-kind="red"] .ph-ground{
  background:radial-gradient(70% 60% at 50% 56%, rgba(150,12,6, calc(.30 + var(--dev) * .34)) 0%, rgba(60,2,0,.5) 48%, #040000 100%);
}
#push-hero[data-kind="red"] .ph-word-t{
  color:rgb(255, calc(70 + var(--dev) * 150), calc(50 + var(--dev) * 146));
  filter:blur(calc((1 - var(--dev)) * 10px));
  text-shadow:
    0 0 1px rgba(255,140,110,.7),
    0 0 calc(8px + (1 - var(--dev)) * 30px) rgba(255,36,14,.85),
    0 0 calc((1 - var(--dev)) * 90px) rgba(220,18,6,.6),
    0 14px 26px rgba(0,0,0,.6);
}
#push-hero[data-kind="red"] .ph-sub{ color:#FFB7A6; }

/* emboss — a plate, pressed: the relief grows as the pressure comes on */
#push-hero[data-kind="emboss"] .ph-ground{
  background:
    linear-gradient(135deg, rgba(255,250,240,.06) 0%, rgba(255,250,240,0) 46%, rgba(0,0,0,.35) 100%),
    radial-gradient(80% 70% at 42% 40%, #1C1A17 0%, #0B0A09 100%);
}
html.has-push-paper #push-hero[data-kind="emboss"] .ph-light{ background:var(--push-paper); background-size:300px; opacity:.07; }
#push-hero[data-kind="emboss"] .ph-word-t{
  background-image:linear-gradient(174deg, #FFFCF4 0%, #ECE6D8 34%, #C9C2B3 68%, #9C9588 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  transform:scale(calc(1.02 - var(--dev) * .02));
  filter:
    drop-shadow(calc(var(--dev) * -1px) calc(var(--dev) * -1px) 0 rgba(255,252,244,.45))
    drop-shadow(calc(var(--dev) * 1.4px) calc(var(--dev) * 1.4px) 0 rgba(0,0,0,.9))
    drop-shadow(calc(var(--dev) * 3px) calc(var(--dev) * 4px) 3px rgba(0,0,0,.55))
    drop-shadow(0 calc(var(--dev) * 20px) 26px rgba(0,0,0,.45));
}
#push-hero[data-kind="emboss"] .ph-sub{ color:#CFC8BA; }

/* ink, and the process lens — the name clears out of the dark */
#push-hero[data-kind="ink"] .ph-ground,
#push-hero[data-kind="water"] .ph-ground,
#push-hero[data-kind="vinyl"] .ph-ground{
  background:radial-gradient(60% 55% at 50% 50%, #17150F 0%, #070706 62%, #020202 100%);
}
#push-hero[data-kind="ink"] .ph-word-t,
#push-hero[data-kind="water"] .ph-word-t,
#push-hero[data-kind="vinyl"] .ph-word-t{
  color:#F4F1EA;
  filter:blur(calc((1 - var(--dev)) * 8px));
  text-shadow:
    0 0 calc(var(--dev) * 16px) rgba(255,246,228,.30),
    0 0 calc((1 - var(--dev)) * 40px) rgba(255,238,210,.35),
    0 1px 0 rgba(0,0,0,.7),
    0 16px 30px rgba(0,0,0,.6);
}
#push-hero[data-kind="ink"] .ph-sub,
#push-hero[data-kind="water"] .ph-sub,
#push-hero[data-kind="vinyl"] .ph-sub{ color:#CFCABF; }

/* uv — swept across by the lamp; the name emits and leaves a trail */
#push-hero[data-kind="uv"] .ph-ground{
  background:radial-gradient(70% 60% at 50% 52%, rgba(70,30,160,.38) 0%, rgba(20,6,50,.6) 50%, #020008 100%);
}
#push-hero[data-kind="uv"] .ph-light::before,
#push-hero[data-kind="uv"] .ph-light::after{
  content:""; position:absolute; top:0; bottom:0; width:2px;
  background:#F4EEFF;
  box-shadow:0 0 10px rgba(210,190,255,1), 0 0 34px rgba(150,104,255,.9), 0 0 90px rgba(120,70,255,.6);
}
#push-hero[data-kind="uv"] .ph-light::before{ left:calc(var(--in) * 100% - 2px); opacity:calc(1 - var(--in)); }
#push-hero[data-kind="uv"] .ph-light::after{ left:calc(var(--out) * 100%); opacity:calc(var(--out) * (1 - var(--out)) * 4); }
#push-hero[data-kind="uv"] .ph-word-t{
  color:#F6F0FF;
  text-shadow:
    0 0 1px #fff,
    0 0 calc(4px + var(--dev) * 10px) rgba(214,196,255,.9),
    0 0 calc(16px + var(--dev) * 30px) rgba(150,104,255,.75),
    0 0 90px rgba(120,70,255, calc(.2 + (1 - var(--dev)) * .4)),
    calc((1 - var(--dev)) * -.5em) 0 calc(10px + (1 - var(--dev)) * 14px) rgba(170,130,255,.55),
    calc((1 - var(--dev)) * -1.1em) 0 24px rgba(120,80,255,.3);
}
#push-hero[data-kind="uv"] .ph-sub{ color:#D9CCFF; }

/* the gallery — the lights come on in a white room */
#push-hero[data-kind="paper"] .ph-ground{
  background:
    radial-gradient(62% 56% at 50% 45%, #FFFFFE 0%, #FCFBF8 44%, #F4F2EC 74%, #E9E6DE 100%);
}
#push-hero[data-kind="paper"] .ph-light{
  background:radial-gradient(90% 60% at 50% -10%, rgba(255,253,246,.9), rgba(255,251,242,0) 60%);
  opacity:var(--dev);
}
#push-hero[data-kind="paper"] .ph-word-t{
  color:#1B1916;
  text-shadow:0 1px 0 rgba(255,255,255,.8), 0 -1px 0 rgba(0,0,0, calc(var(--dev) * .12));
}
#push-hero[data-kind="paper"] .ph-sub{ color:#6B665C; }

/* the editorial — a sheet of cotton laid over the screen, the name printed on it */
#push-hero[data-kind="editorial"] .ph-ground{
  background:linear-gradient(176deg, #F7F4EC 0%, #EFEBE1 60%, #E4DFD3 100%);
}
html.has-push-paper #push-hero[data-kind="editorial"] .ph-light{ background:var(--push-paper); background-size:300px; opacity:.28; }
#push-hero[data-kind="editorial"] .ph-word-t{
  color:#1B1916;
  text-shadow:0 1px 0 rgba(255,255,255,.75), 0 -.5px 0 rgba(0,0,0,.18);
}
#push-hero[data-kind="editorial"] .ph-sub{ color:#6B665C; }

@media (prefers-reduced-motion: reduce){
  #push-hero{ display:none; }
  .pn-mark, .pn-name, .pn-sub{ transition:none; }
}

@media (prefers-reduced-motion: reduce){
  .bp-say.push-blueprint, .bp-fig.is-plan, .bp-fig.is-plan.is-drawing, .bp-fig.is-plan.is-inked{ transform:none; }
  .push-w{ transform:none !important; opacity:1 !important; }
  .push-beam{ display:none; }
}