/* Piku Print Club, the site (v3.2). The HOME screen: the app's first page, "Whose turn?", as the first screen of the tour's phone.
   Markup: src/partials/screen-home.html. Everything is sized from --u (1u = 1/360 of the screen width, set on .in in screens.css), so it scales
   with the phone. Designed 360 x 700.

   CALM ON PURPOSE. While the phone peeks up from the hero only the top ~35% (about 245u) shows: just the heading and the first row of two big
   kids, with plenty of air. No wordmark (the hero above has it), no wall of prints, and (since the app removed it from this page) no Print Club
   ticket: the kids' own page carries no pitch. The Grown-ups card sits at the bottom, as in the app.
   Order (u from the top): air 0..46 | heading 46..86 | kids row one 106..250 (names included) | kids row two ~272..416 | air | card 598..662.
   Only the four kid buttons are live; the card is picture. Class names are hm-*, scoped under .scr-home. */

.scr-home .in{align-items:center;padding:calc(46*var(--u)) 0 0;overflow:hidden}

/* ---- the heading ---- */
.scr-home .hm-title{flex:none;font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100;font-size:calc(34*var(--u));line-height:1.1;text-align:center;color:var(--ink);text-shadow:-.03em .03em 0 var(--ghost-paper)}

/* ---- the kids: riso avatar stickers (the art already carries its white squircle edge and shadow), two by two, names under them ---- */
.scr-home .hm-kids{flex:none;display:grid;grid-template-columns:repeat(2,calc(142*var(--u)));justify-content:center;gap:calc(14*var(--u)) calc(14*var(--u));width:100%;margin-top:calc(20*var(--u))}
.scr-home .hm-kid{display:flex;flex-direction:column;align-items:center;width:100%;min-height:calc(44px*var(--fl,1));padding:0;border:0;border-radius:calc(30*var(--u));background:none;color:var(--ink)}
.scr-home .hm-kid:focus-visible{border-radius:calc(30*var(--u))}
.scr-home .hm-kid img{display:block;width:calc(124*var(--u));height:auto;rotate:var(--r,0deg);transition:scale .4s var(--spring-pop)}
.scr-home .hm-kid b{display:block;margin-top:calc(-2*var(--u));font-weight:800;font-size:max(calc(11px*var(--ffl,1)),calc(17*var(--u)));line-height:1.15;white-space:nowrap}
@media (hover:hover){
  .scr-home .hm-kid:hover img{scale:1.06}
}
.scr-home .hm-kid:focus-visible img{scale:1.06}
.scr-home .hm-kid:active img{scale:1.02;transition-duration:.12s}

/* ---- the Grown-ups card (the app's GrownUpsCard, ContentView.swift): a picture, not a control, low on the screen ----
   Designed 236 x 64 (1pt = 1u), corner radius 18. A white die-cut card printed with the riso ink edge: a 1.5 ink line just inside the edge
   plus the same shape in fluoro pink, a hair off register (-1.1, +0.9), multiplied, UNDER the card so it only peeks out on the paper (the app's
   RisoEdge.offset / line / ghost, CameraHome.swift). Both are painted by this one box: the border is the ink line, and the pink copy is a hard
   box-shadow (a filled copy of the shape shows exactly the crescent a stroked copy would, as the line is wider than the offset). It is the
   pink MULTIPLIED on the paper, written out (#FF48B0 x #F3EEE3 = #F3439D), because the rotate below makes this box its own stacking context
   and a blend mode inside it could not reach the paper. The two soft shadows are the app's (ink .22 radius 1 down 1.5; ink .14 radius 4 down 6;
   SwiftUI radius is half CSS blur). Tilted 1.5deg clockwise. On the left the riso key (spot "spotkey", 46 square, tilted -8deg, 10 in and
   8 clear of the words), on the right "Grown-ups only" (DynaPuff 19) over "Settings" (Nunito heavy 13, ink at 7.7:1 on white, #4B5550),
   packed to the left as in the app. */
.scr-home .hm-foot{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;width:100%;padding-bottom:calc(38*var(--u));pointer-events:none}
.scr-home .hm-gu{position:relative;box-sizing:border-box;flex:none;display:flex;align-items:center;gap:calc(8*var(--u));width:calc(236*var(--u));height:calc(64*var(--u));padding:0 0 0 calc(10*var(--u));
  background:#fff;border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(18*var(--u));rotate:1.5deg;
  box-shadow:0 calc(1.5*var(--u)) calc(2*var(--u)) rgba(30,42,36,.22),0 calc(6*var(--u)) calc(8*var(--u)) rgba(30,42,36,.14),calc(-1.1*var(--u)) calc(.9*var(--u)) 0 #F3439D}
.scr-home .hm-key{display:block;flex:none;width:calc(46*var(--u));height:auto;max-width:none;rotate:-8deg;filter:drop-shadow(0 calc(.5*var(--u)) calc(.6*var(--u)) rgba(30,42,36,.3))}
.scr-home .hm-gu-words{display:flex;flex-direction:column;align-items:flex-start;gap:calc(1*var(--u));white-space:nowrap}
.scr-home .hm-gu-t{display:block;font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100;font-size:calc(19*var(--u));line-height:calc(23*var(--u));color:var(--ink)}
.scr-home .hm-gu-s{display:block;font-weight:800;font-size:max(calc(11px*var(--ffl,1)),calc(13*var(--u)));line-height:calc(16*var(--u));color:var(--soft)}

@media (prefers-reduced-motion:reduce){
  .scr-home .hm-kid img{transition:none}
}