/* Poster It! scrolly homepage — phone layout.

   Unit system: 1 "u" = one brochure pixel at 1080 wide. Every piece carries its
   brochure box as --x/--y/--w/--h (in u) and is placed with calc(), so the page
   is the brochure at any screen width.

   With no script, with reduced motion, or in a browser too old for the pinned
   scenes, this stylesheet alone shows the brochure exactly as drawn. Everything
   the script needs sits under the .js class, which only the script adds. */
:root{
  --ruby:#760000;--cream:#ffe9cd;
  --col:100vw;                     /* the page column: full width on phones, capped on wide screens (below) */
  --u:calc(var(--col)/1080);
  --vh:100vh;                      /* screen height that does not change while browser bars slide */
  --pin1:0px;                      /* extra scroll length while the logo is held (script on) */
  --gap:0px;                       /* extra room above the logo on tall screens (script on) */
  /* "Glass" for the shapes fixed on screen: the page behind, softened a little, with light and
     dark swapped and a warm tint. Over the ruby page a shape comes out cream; over the cream
     page, near black; over a picture, each point follows what is behind that point. */
  --flip:blur(2.5px) grayscale(1) invert(1) contrast(4.2) brightness(.838) sepia(.49);
}
/* The screen height used for the pinned scenes is capped at 2.4 x the column width (taller than
   any phone). On a real phone the cap never applies; it keeps the page length finite if the page
   is ever shown inside a frame that grows to fit its content. */
@supports (width:min(1px,2px)){:root{--col:min(100vw,560px);--vh:min(100vh,calc(2.4*var(--col)))}}
@supports (height:1svh) and (width:min(1px,2px)){:root{--vh:min(100svh,calc(2.4*var(--col)))}}
*{box-sizing:border-box}
html{background:var(--ruby);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ruby)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}

.pit{position:relative;width:var(--col);margin:0 auto;background:var(--ruby);direction:ltr}
.canvas{position:relative;height:calc(12025*var(--u) + var(--pin1) + var(--gap))}
.partb{position:absolute;left:0;top:calc(var(--pin1) + var(--gap));width:100%;height:calc(12025*var(--u))}
/* Clipping wrappers: artwork that bleeds past the page column, or slides in from outside it, is
   cut off here. The two pinned pieces (logo, long arm) are deliberately NOT inside one: a box
   held on screen must have no clipping box around it, or some browsers stop holding it. */
.cw{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.p{position:absolute;display:block;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
svg.p{overflow:visible}

/* photos: the outer box clips, the inner one is what slides out like a print */
.ph{overflow:hidden}
.ph .phi,.ph picture,.ph img{display:block;width:100%;height:100%}
.hero .phi{transform-origin:42.65% 98.38%}   /* the corner of the kiosk's base: it stays seated on the ground while it scales */

/* hero intro (made by the script, removed when done): soft lights laid over the painting */
.fxf{position:absolute;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,rgba(255,248,232,.96) 0,rgba(255,244,222,.6) 20%,rgba(255,240,214,0) 66%)}
.fxv{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;background:#fff6e4}

/* logo stage. The logo's own picture is exactly as wide as the page and clips to it: the
   brochure runs its two lines off the page edges. */
.logo-stage{position:relative;width:100%;height:calc(281*var(--u))}
.logo-stage>svg{position:absolute;display:block;overflow:visible;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.logo-stage>svg.lgart{overflow:hidden}
.lgfx,.lgp{opacity:0}

/* the boy's long arm: the hand and its tube are one piece that slides inside a clipping box */
.armclip{-webkit-clip-path:inset(0);clip-path:inset(0)}
.armstick{position:relative;height:calc((var(--h) - var(--hand))*var(--u));margin-top:calc(var(--hand)*var(--u))}
.arm{position:absolute;left:0;bottom:0;display:block;width:100%;height:calc(var(--h)*var(--u))}
.boy-up{transform-origin:89.9% 100%}   /* the wristband the long arm hangs from: the figure squashes toward it */

/* the girl: stacked layers in one moving box */
.gq{position:absolute;display:block;overflow:visible;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}

.bu{transform-origin:var(--ox,50%) var(--oy,50%)}

/* ---------- fixed on screen: mini logo, support, Instagram ---------- */
.dock{position:fixed;top:0;bottom:0;left:50%;width:var(--col);margin-left:calc(var(--col)/-2);z-index:20;pointer-events:none;direction:ltr}
.chip{position:absolute;display:block;pointer-events:auto;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0}
.chip:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:14px}
.chip::after{content:"";position:absolute;left:-6px;top:-6px;right:-6px;bottom:-6px}   /* a finger-sized touch area */

/* The shape of each fixed piece is the picture in --m (set on the piece itself).
   .gf: that shape cut out of glass. Without the glass effect in the browser it is the shape in cream.
   .gb: the same shape in a plain colour, lying UNDER a button's glass disc. Where the glass effect
        works, the disc blurs it away; where a browser claims the effect but does not draw it, this
        is the glyph that is seen (cream; ruby while the button is over the cream part of the page,
        which the script marks with .on-light). */
.gf,.gb{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--cream);
  -webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.on-light .gb{background:var(--ruby)}
/* .gd: the round glass button. Without the glass effect, a ruby disc with a hairline ring. */
.gd{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:var(--ruby);box-shadow:0 0 0 1.5px rgba(255,233,205,.3)}
/* mini logo without the glass effect: the cream logo on a ruby tab hanging from the top edge */
.chip-logo::before{content:"";position:absolute;left:-14px;right:-14px;top:-60px;bottom:-9px;border-radius:0 0 14px 14px;background:var(--ruby)}
@supports ((-webkit-backdrop-filter:invert(1)) or (backdrop-filter:invert(1))){
  .gf{background:none;-webkit-backdrop-filter:var(--flip);backdrop-filter:var(--flip)}
  .gd{background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 44%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.12));
    -webkit-backdrop-filter:blur(7px) saturate(1.1) brightness(1.05);backdrop-filter:blur(7px) saturate(1.1) brightness(1.05);
    box-shadow:0 6px 16px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.2),
      inset 0 0 0 .5px rgba(255,255,255,.3),inset 1px 1.4px .8px rgba(255,255,255,.58),inset -.8px -1.1px .8px rgba(255,255,255,.2)}
  .chip-logo::before{display:none}
  .gb{display:none}   /* the glass draws the glyph; the plain one under it showed as a pale smudge */
}
/* scroll cue: two chevrons flowing down at the bottom centre of the first screen (owner, 2026-10-12).
   Shown by the script after the opening flash, gone for good at the first scroll. */
.hint{position:absolute;left:50%;width:28px;height:44px;margin-left:-14px;bottom:14px;bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 2px);
  opacity:0;pointer-events:none;color:var(--cream);-webkit-filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.hint svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hint path{-webkit-animation:pit-hint 1.5s ease-in-out infinite;animation:pit-hint 1.5s ease-in-out infinite}
.hint path+path{-webkit-animation-delay:.18s;animation-delay:.18s}
@-webkit-keyframes pit-hint{0%{opacity:0;-webkit-transform:translateY(-5px)}45%{opacity:1}100%{opacity:0;-webkit-transform:translateY(7px)}}
@keyframes pit-hint{0%{opacity:0;transform:translateY(-5px)}45%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
/* Support and Instagram: 44 px glass buttons, 100 u in from the edges (clear of the two vertical
   notes that run down the page sides). */
.chip-sup,.chip-ig{--fab:44px;width:var(--fab);height:var(--fab);bottom:14px;bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 2px)}
.chip-sup{left:calc(100*var(--u) - var(--fab)/2)}
.chip-ig{right:calc(100*var(--u) - var(--fab)/2)}
.chip-sup .gf,.chip-ig .gf,.gb{left:23.5%;top:23.5%;width:53%;height:53%}
/* mini logo: the owner's logo, no backing, hanging just under the top edge */
.chip-logo{--mini:113px;left:50%;top:10px;top:calc(10px + env(safe-area-inset-top,0px));width:var(--mini);height:calc(var(--mini)*var(--ar));margin-left:calc(var(--mini)/-2);visibility:hidden}
@supports (width:clamp(1px,2px,3px)){.chip-logo{--mini:clamp(98px,calc(312*var(--u)),150px)}}
.rim{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}

/* fidelity test build: the page body only */
.static .dock{display:none}

/* ---------- script on ---------- */
/* On a tall screen the brochure's logo would already show under the kiosk, half of it and under
   the two fixed icons. It is moved down just past the first screen instead, so the page opens on
   the kiosk alone and the logo arrives with the first scroll. */
.js{--pin1:calc(.86*var(--vh));--gap:max(0px,calc(var(--vh) + 8px - 1949*var(--u)))}
.js .logo-track{top:calc(var(--y)*var(--u) + var(--gap))}
/* the logo is held at mid-screen for --pin1 of scrolling, and a little longer while it docks */
.js .logo-track{height:calc(281*var(--u) + var(--pin1) + .45*var(--vh))}
.js .logo-stage{position:-webkit-sticky;position:sticky;top:calc(.5*var(--vh) - 140.5*var(--u))}
/* the hand holds at 45 % of the screen height (higher on very short screens, so it stays in view) */
.js .armstick{position:-webkit-sticky;position:sticky;margin-top:calc(130*var(--u));
  top:max(56px,min(.45*var(--vh),calc(var(--vh) - 600*var(--u))))}