/* Piku Print Club, the site (v2.1). The Grown-ups block: a short, bold section on a BLUE field. Type sits straight on the blue (paper text),
   no cards, no white rings. The grown-up's worry is their own stuff (camera roll, shop, settings), so the picture is two stacks: your camera
   roll (plain, straight, on a torn paper sheet) and their prints (a fan of riso instants on the blue). Then three big statements and one
   honest line. The art (sheet, prints, peel sticker) keeps its sticker edges; the type and the controls do not.
   EVERYTHING SCALES WITH THE SCREEN: the type, the two stacks, the gaps and the section padding are all vw-based clamps, so a 1920, 2560
   or 3440 monitor gets confident scale and calm space instead of a small cluster in a big field. No px positions on big screens.
   Everything is always visible and readable with JS off. Motion: the prints and statements get stuck on once (the .pop reveal in
   base.css); no script, no other motion.
   Colours on blue: paper or white text only (paper 6.1:1). Ink only on the paper sheet, and on the pastel icon discs. */

.gu{
  --u:min(1vw,2vh);                          /* the scale unit: 1vw, but on an ultrawide screen it follows the height instead, so the block never gets three screens tall */
  --sq:clamp(150px,calc(var(--u) * 20),700px);              /* one plain square of the camera roll stack */
  --pw:clamp(104px,calc(var(--u) * 11.8),440px);            /* one print of the fan */
  --gap:clamp(24px,calc(var(--u) * 3),120px);               /* the standard breathing space */
  z-index:2;padding-block:clamp(70px,calc(var(--u) * 6.6),300px) clamp(64px,calc(var(--u) * 6.4),280px);overflow:visible;
}
.gu-in{position:relative;z-index:2;max-width:min(100%,3000px);margin-inline:auto}

/* the torn seams: a strip of the Keep step's teal tears down into the blue; the blue tears down over the teal finale.
   Both are plain CSS (clip-path), so there is no extra file. They are as tall as the screen is wide (30px up to 80px).
   The finale sits below with a top padding that clears the overhang. */
.gu::before,.gu::after{content:"";position:absolute;left:0;right:0;height:clamp(30px,calc(var(--u) * 2.4),80px);z-index:1;pointer-events:none}
.gu::before{top:-1px;background:var(--teal);clip-path:polygon(0 0,100% 0,100% 60.1%,98.52% 52.83%,97.07% 53.51%,95.76% 78.66%,94.45% 73.52%,92.79% 67.45%,91.24% 64.85%,90.11% 77.2%,88.38% 74.44%,87.22% 68.91%,85.86% 44.78%,84.17% 54.98%,82.71% 62.27%,81.42% 57.27%,79.88% 68.82%,78.5% 57.9%,77.21% 78.03%,75.56% 84.11%,74.3% 77.35%,73.01% 66.97%,71.26% 65.23%,70.04% 59.95%,68.49% 59.29%,67.18% 55.99%,65.66% 42.75%,64.1% 60.7%,63.05% 70.85%,61.55% 72.26%,60.08% 68.66%,58.63% 67.08%,57.15% 74.07%,55.88% 72.53%,54.46% 68.81%,52.8% 57.12%,51.49% 53.14%,49.88% 65.76%,48.61% 60.28%,47.32% 65.08%,45.63% 65.66%,44.34% 82.8%,42.74% 81.61%,41.27% 84.08%,39.98% 72.73%,38.69% 56.19%,37.26% 58.25%,35.55% 66.15%,34.22% 46.04%,32.99% 45.06%,31.5% 62.45%,30.12% 69.86%,28.48% 82.76%,27.26% 68.64%,25.74% 75.48%,24.16% 81.69%,22.93% 71.21%,21.44% 57.77%,19.97% 42.96%,18.66% 51.93%,17.26% 61.04%,15.62% 61.34%,14.39% 62.61%,12.81% 60.72%,11.53% 83.06%,9.99% 86.69%,8.64% 83.92%,6.94% 64.24%,5.62% 53.02%,4.28% 67.95%,2.99% 63.72%,1.55% 58.81%,0% 55.12%)}
.gu::after{top:calc(100% - 1px);background:var(--blue);clip-path:polygon(0 0,100% 0,100% 57.6%,98.58% 53.08%,97.22% 55.61%,95.84% 73.83%,94.4% 79.26%,92.91% 77.42%,91.59% 57.23%,89.88% 59.89%,88.59% 65.35%,87.2% 62.11%,85.55% 41.97%,84.15% 40.98%,82.72% 62.26%,81.26% 70.46%,80.02% 63.65%,78.7% 67.19%,77.27% 72.49%,75.65% 80.12%,74.3% 69.26%,72.89% 61.64%,71.51% 43.93%,69.84% 48.23%,68.56% 56.49%,67.11% 60.86%,65.69% 52.68%,64.36% 56.69%,62.74% 80.81%,61.29% 85.26%,60.05% 71.14%,58.65% 69.69%,57% 60.62%,55.88% 67.03%,54.28% 48.88%,52.7% 41.91%,51.35% 37.59%,50.04% 63.87%,48.7% 73.63%,47.15% 73.49%,45.75% 61.78%,44.3% 79.21%,42.95% 78.1%,41.32% 78.27%,40.19% 50.09%,38.37% 43.86%,37.06% 52.44%,35.6% 61.76%,34.42% 55.13%,33.01% 48.57%,31.5% 68.3%,29.88% 77.75%,28.6% 84.19%,27.24% 66.96%,25.61% 67.69%,24.18% 66.6%,23.03% 56.59%,21.57% 60.95%,20.11% 41.84%,18.64% 51.53%,17.07% 64.43%,15.79% 67.63%,14.19% 69.38%,12.76% 63.67%,11.41% 76.19%,9.99% 76.5%,8.57% 63.96%,7.14% 48.85%,5.59% 48.26%,4.22% 53.74%,2.92% 60.45%,1.3% 51.78%,0% 59.9%)}

/* ============ the head: the peel sticker, the headline, one line ============ */
.gu-top{position:relative;text-align:center}
/* the app's current Grown-ups card (the key version): a white die-cut card with an ink edge and a pink copy offset, a riso key, "Grown-ups only" over "Settings" */
.gu-card{--cu:clamp(.62px,calc(var(--u) * .064),1.9px);display:flex;align-items:center;gap:calc(8 * var(--cu));width:calc(236 * var(--cu));height:calc(64 * var(--cu));margin:0 auto clamp(18px,calc(var(--u) * 2.2),80px);padding:0 0 0 calc(10 * var(--cu));box-sizing:border-box;
  background:#fff;color:var(--ink);border:calc(1.5 * var(--cu)) solid var(--ink);border-radius:calc(18 * var(--cu));text-align:left;
  box-shadow:0 calc(1.5 * var(--cu)) calc(2 * var(--cu)) rgba(10,18,50,.3),0 calc(6 * var(--cu)) calc(8 * var(--cu)) rgba(10,18,50,.25),calc(-1.1 * var(--cu)) calc(.9 * var(--cu)) 0 #F3439D}
.gu-key{display:block;flex:none;width:calc(46 * var(--cu));height:auto;rotate:-8deg;filter:drop-shadow(0 calc(.5 * var(--cu)) calc(.6 * var(--cu)) rgba(30,42,36,.3))}
.gu-card-words{display:flex;flex-direction:column;gap:calc(1 * var(--cu));white-space:nowrap}
.gu-card-words b{font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100;font-size:calc(19 * var(--cu));line-height:calc(23 * var(--cu))}
.gu-card-words span{font-weight:800;font-size:calc(13 * var(--cu));line-height:calc(16 * var(--cu));color:var(--soft)}
.gu-h{color:var(--paper);text-wrap:balance}
.gu-h1{display:block;font-size:clamp(3.5rem,calc(var(--u) * 10.4),15rem);line-height:.92;letter-spacing:-.012em;text-shadow:-.026em .026em 0 var(--ghost-blue);rotate:-1.4deg}
.gu-h2{display:block;margin-top:.3em;font-size:clamp(1.75rem,calc(var(--u) * 4.7),9rem);line-height:1.2;text-shadow:-.03em .03em 0 var(--ghost-blue)}
/* "stays yours." is the same paper type as the rest (ink on blue is only 2.1:1), tipped a little */
.gu-h2 .hl{display:inline-block;font-size:1em;margin-left:.1em;rotate:1.6deg;color:var(--paper);text-shadow:-.03em .03em 0 var(--ghost-blue);vertical-align:.02em}
.gu-lead{max-width:24em;margin:clamp(18px,calc(var(--u) * 2.2),80px) auto 0;font-size:clamp(1.1875rem,calc(var(--u) * 1.7),3.4rem);font-weight:700;line-height:1.38;color:var(--paper);text-wrap:balance}

/* ============ THE PICTURE (v3.1): two matching panels ============
   Both panels are the same paper card (rounded, one soft shadow, no ring) on the blue, so nothing looks mismatched. Left = your camera roll
   (tidy: a calm grid of flat drawings), right = their prints (a happy pile that stays inside ITS panel). A flat pink disc with a crossed-out
   arrow sits between them. The panels have the same height; the art area of each is a 3:2 box. */
.gu-vis{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;justify-items:stretch;
  width:min(100%,calc(var(--u) * 86),3000px);margin:clamp(40px,calc(var(--u) * 4.2),150px) auto clamp(18px,calc(var(--u) * 2),70px)}
.gv{display:flex;flex-direction:column;padding:clamp(18px,calc(var(--u) * 2.2),70px);border-radius:clamp(24px,calc(var(--u) * 2.6),80px);background:var(--paper);color:var(--ink);
  box-shadow:0 2px 3px rgba(20,30,70,.25),0 18px 40px rgba(10,18,50,.35)}
.gv-art{position:relative;aspect-ratio:3/2;width:100%}
.gv-cap{margin-top:clamp(14px,calc(var(--u) * 1.6),50px);font-family:var(--font-title);font-weight:700;font-size:clamp(1.6rem,calc(var(--u) * 2.9),5.4rem);line-height:1;text-shadow:-.03em .03em 0 var(--ghost-paper)}
.gv-sub{margin-top:.4em;font-size:clamp(1.0625rem,calc(var(--u) * 1.4),2.8rem);font-weight:700;line-height:1.35;color:var(--ink78)}

/* your camera roll: three by two flat little pictures, dead straight */
.gv-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:clamp(6px,calc(var(--u) * .8),26px)}
.gv-tile{display:block;width:100%;height:100%;border-radius:clamp(8px,calc(var(--u) * .9),28px)}

/* their prints: five riso instants lying loosely in a pile, all inside the panel */
.gv-pile{position:absolute;inset:0}
.gv-pile .gp{left:var(--x);top:var(--y);bottom:auto;width:30%;transform-origin:50% 50%;z-index:auto}

/* the disc between the panels: Piku does not reach into your Photos */
.gv-link{position:relative;z-index:3;align-self:center;display:grid;place-items:center;width:clamp(60px,calc(var(--u) * 6.4),200px);aspect-ratio:1;margin-inline:calc(clamp(60px,calc(var(--u) * 6.4),200px) * -.28);border-radius:50%;background:var(--pink);box-shadow:0 6px 16px rgba(10,18,50,.35)}
.gv-link svg{width:62%;height:62%;fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.gv-link .halo{stroke:var(--pink);stroke-width:8.5}

/* the honest label under the panels: plain paper type on the blue */
.gu-seam{position:relative;z-index:2;max-width:26em;margin:clamp(22px,calc(var(--u) * 2.4),90px) auto clamp(40px,calc(var(--u) * 4.2),150px);text-align:center;font-size:clamp(1.0625rem,calc(var(--u) * 1.55),3rem);font-weight:800;line-height:1.35;color:var(--paper);text-wrap:balance}

/* the prints keep the print-card parts (photo slot, card, date stamp) from here */
.gp{position:absolute;aspect-ratio:1335/1744}
.gp-ph{position:absolute;left:12.5468%;top:9.6044%;width:74.9064%;height:76.4526%}
.gp-ph img{position:absolute;left:-.7%;top:-.7%;width:101.4%;height:101.4%;max-width:none;display:block}
.gp-card{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;pointer-events:none}
.gp-date{position:absolute;left:15%;top:87.2%;height:3.6%;width:auto;fill:none;stroke:#212121;stroke-opacity:.9;stroke-width:1.5;stroke-linecap:round;overflow:visible;transform:skewX(-6deg)}
.gp{rotate:var(--r,0deg);filter:drop-shadow(0 1px 1px rgba(30,42,36,.28)) drop-shadow(0 6px 10px rgba(30,42,36,.18))}

/* ============ the three statements: plain type straight on the blue ============
   A thin paper rule, a flat icon disc (no ring, no shadow), a big DynaPuff statement, one short paper line. No box, no tilt, no frame. */
.gu-low{max-width:min(100%,84vw)}
.gu-stamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,calc(var(--u) * 4.4),160px)}
.gu-stamp{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(26px,calc(var(--u) * 2.8),90px);border-top:clamp(2px,calc(var(--u) * .16),5px) solid rgba(243,238,227,.7)}
.gu-badge{display:grid;place-items:center;width:clamp(76px,calc(var(--u) * 6.2),200px);aspect-ratio:1;margin-bottom:clamp(18px,calc(var(--u) * 1.8),60px);border-radius:50%;background:var(--bd)}
.gu-badge svg{width:64%;height:64%;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.gu-badge .halo{stroke:var(--bd);stroke-width:8}
.gu-stamp h3{max-width:8.4em;font-size:clamp(1.95rem,calc(var(--u) * 3.2),7rem);line-height:1.02;color:var(--paper);text-shadow:-.03em .03em 0 var(--ghost-blue);text-wrap:balance}
.gu-stamp p{margin-top:.7em;max-width:20em;font-size:clamp(1.0625rem,calc(var(--u) * 1.3),2.4rem);font-weight:700;line-height:1.4;color:var(--paper)}

/* ============ the honest line and two links ============ */
.gu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px clamp(30px,calc(var(--u) * 5),160px);margin-top:clamp(48px,calc(var(--u) * 5),180px)}
.gu-honest{text-align:center;color:var(--paper);text-wrap:balance}
.gu-honest p{max-width:27em;margin-inline:auto;font-size:clamp(1.0625rem,calc(var(--u) * 1.3),2.4rem);font-weight:700;line-height:1.5}
.gu-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(24px,calc(var(--u) * 2.4),80px);margin-top:.35rem}
.gu .gu-links a{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(1.125rem,calc(var(--u) * 1.45),2.8rem);font-weight:800;color:var(--paper);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}

/* ============ responsive (order: 980, 860, 700, 560; later rules win) ============ */
@media (max-width:980px){
  .gu-stamp h3{font-size:clamp(1.5rem,3.1vw,2.2rem)}
}
@media (max-width:860px){
  /* the panels stack; the disc sits between them and points up (Piku, below, does not reach your camera roll, above) */
  .gu-vis{grid-template-columns:minmax(0,1fr);width:min(100%,34rem)}
  .gv-link{margin:calc(clamp(60px,calc(var(--u) * 6.4),200px) * -.28) auto;width:60px;rotate:90deg}
}
@media (max-width:700px){
  /* one statement per row: the icon disc on the left, the words beside it */
  .gu-stamps{grid-template-columns:minmax(0,1fr);max-width:30rem;margin-inline:auto;gap:28px}
  .gu-stamp{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start;padding-top:24px}
  .gu-badge{grid-area:1/1/3/2;width:64px;margin:0}
  .gu-stamp h3{grid-area:1/2;max-width:none;font-size:clamp(1.6rem,7vw,2.1rem)}
  .gu-stamp p{grid-area:2/2;margin-top:.45em;max-width:none}
}
@media (max-width:560px){
  .gu-h1{font-size:clamp(3.2rem,17vw,4.4rem)}
  .gu-h2{font-size:clamp(1.7rem,8.2vw,2.2rem)}
}