/* Piku Print Club, the site. Page chrome: the hero (v3: a centred, completely still column; the pinned tour phone peeks up from its bottom edge, see css/tour.css),
   the nav pill, the marquee, the legacy chapter-bay pieces (numeral, verb, chips, poster, caption, pinned prints: v1 only, kept until nothing uses them) and the crew.
   The v3 tour (the pinned phone and the four step bands) lives in tour.css and each step's own demo css. The classes are documented in src/README.md. */

/* Keep, the marquee and the crew scale with the screen from 1440px up: --kcu is 1px at 1440px wide, grows with the viewport and stops at 2.4px
   (3456px). Sizes written as calc(var(--kcu) * N) are "N px at 1440, bigger on a bigger display". Below 1440 it stays 1px, so phones and
   laptops keep their sizes. --kpw is the Keep phone's width (the stage and the crew section below it both need it) and --keep-over is how far
   the phone hangs over the seam into the crew section. */
:root{--kcu:clamp(1px,calc(100vw / 1440),2.4px);--kpw:min(400px,calc(100vw - 80px),max(300px,calc((100svh - 120px) * .53)));--keep-over:clamp(96px,12vw,170px)}
@media (min-width:900px){:root{--kpw:min(34vw,calc(var(--kcu) * 400),max(300px,calc(100svh * .5)));--keep-over:calc(var(--kpw) * .4)}}
/* v3: the step bands are NOT stacked by id any more (no z-index on #snap #goof #stick #keep): they must not make stacking contexts, see css/tour.css for the z-order. */

/* ============ shared teal poster pieces (the hero AND the finale use these): field, strips, note, CTA pill ============ */
.hero{position:relative;background:var(--teal);isolation:isolate;overflow-x:clip}
.hero-field{position:absolute;inset:0;z-index:-1;background:url(/assets/brand/halftone-paper.svg) left top/clamp(560px,80vw,1120px) auto no-repeat;scale:-1 1;opacity:.5;pointer-events:none}
.hl-stack{display:flex;flex-direction:column;align-items:flex-start;gap:.14em;font-size:clamp(2.5rem,5.4vw,5rem);line-height:1}
.hero .brand{rotate:var(--r,0deg)}   /* the tilts, written once: the hero has no entrance, so no .pop */
/* v2.1: clean type straight on the colour field. No pills, white rings or cards (the owner hates them).
   Display type is ink with the pink off-register ghost (large bold: 4.3:1 on teal passes). Small type uses the deeper --on-teal ink (5.4:1). */
:root{--on-teal:#0C1511}
.hl{display:block;white-space:nowrap;font-family:var(--font-title);font-weight:700;line-height:.98;color:var(--ink);text-shadow:-.03em .03em 0 var(--ghost-teal)}
.note{position:relative;max-width:33rem;margin-top:clamp(22px,3vw,34px);color:var(--on-teal);font-size:1.3rem;font-weight:700;line-height:1.4}
.note p{margin:0}
.note-link{display:inline-block;margin-top:.7em;font-weight:800;font-size:1.2rem;color:var(--on-teal);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em;text-wrap:balance}
.cta{margin-top:clamp(20px,2.6vw,30px)}
/* the official App Store badge (hero): untouched artwork, no tilt, shadow or effects (Apple's rules); sized by height */
.appstore{display:inline-block;line-height:0}
.appstore img{display:block;width:auto;height:clamp(52px,4.5vw,84px)}
/* the "coming soon" status (finale): an outlined tag, NOT a button (nothing to press yet) */
.cta-pill{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.05em;margin:0;padding:.6em 1.3em .65em;border:2px solid var(--on-teal);border-radius:1.7rem;color:var(--on-teal);font-size:1.2rem;line-height:1.25}
.cta-pill b{font-weight:800}
.cta-pill span{font-weight:700}

/* ============ HERO (v3): teal field, halftone top right only, ONE centred column (wordmark, headline, line, badge). The tour phone peeks up from its bottom edge.
   The hero is exactly one screen tall (css/tour.css --hero-h) and keeps --peek of room free at the bottom for the phone, so the column is centred in what is left. Type and
   sticker are sized from the width AND the height of the screen, so the column always fits above the phone. ============ */
.hero{min-height:var(--hero-h);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 var(--peek);overflow:clip}
/* the dots: top right only, biggest in the corner, feathered out long before they could reach the type */
.hero .hero-field{inset:0 0 auto auto;width:min(68vw,1040px);height:min(84%,700px);background-size:100% auto;opacity:.6;-webkit-mask-image:radial-gradient(ellipse 92% 88% at 0 0,#000 0,#000 28%,transparent 82%);mask-image:radial-gradient(ellipse 92% 88% at 0 0,#000 0,#000 28%,transparent 82%)}
.hero .hero-in{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:clamp(24px,calc(var(--vh100) * 0.05),72px) clamp(16px,3vw,32px) 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.brand{width:clamp(190px,min(24vw,calc(var(--vh100) * 0.255)),440px);margin:0 0 clamp(8px,calc(var(--vh100) * 0.02),28px);rotate:var(--r,0deg)}
.brand img{display:block;width:100%;height:auto}
.hero .hl-stack{align-items:center;gap:.02em;margin:0;font-size:clamp(3rem,min(7vw,calc(var(--vh100) * 0.094)),9rem)}
.hero .hl-stack .hl{position:relative;margin:0}
.hero .note{text-wrap:balance;max-width:min(40rem,92%);margin-top:clamp(12px,calc(var(--vh100) * 0.024),34px);font-size:clamp(1.15rem,min(1.5vw,calc(var(--vh100) * 0.024)),1.8rem)}
.hero .cta{margin-top:clamp(14px,calc(var(--vh100) * 0.026),34px)}

.noscript-note{max-width:1240px;margin:0 auto;padding:18px clamp(16px,3vw,32px) 0;text-align:center;font-weight:700;font-size:1.0625rem;color:var(--ink78)}   /* only ever seen with JavaScript off */

/* ============ NAV: a small sticky pill that appears after the hero ============ */
/* v3.2: BOLDER and roomier, in the same flat language as the phone frame: cream, a 3px ink outline and a hard print shadow (no blur). It scales with the screen
   (--navh, tour.css) and the pinned phone leaves room for it, so it never crowds the phone. */
.topnav{position:relative;z-index:60;display:flex;align-items:center;gap:calc(var(--navh) * .06);width:fit-content;max-width:calc(100vw - 20px);margin:10px auto;padding:calc(var(--navh) * .09) calc(var(--navh) * .1) calc(var(--navh) * .09) calc(var(--navh) * .34);background:var(--paper);border:3px solid var(--ink);border-radius:999px;box-shadow:calc(var(--navh) * .08) calc(var(--navh) * .08) 0 var(--ink)}
/* with script it becomes the sticky pill: parked above the top edge until the hero has gone (or a link inside it has keyboard focus) */
.js .topnav{width:max-content;position:fixed;left:50%;top:calc(var(--navh) * .26);margin:0;translate:-50% calc(-100% - 40px);transition:translate .5s var(--spring-pop)}
.js .topnav.is-on,.js .topnav:focus-within{translate:-50% 0}
.tn-logo{display:block;flex:none;margin-right:calc(var(--navh) * .34);border-radius:10px}
.tn-logo img{display:block;width:auto;height:calc(var(--navh) * .64)}
.tn-links{display:flex;align-items:center;gap:2px}
.tn-links a,.tn-gu{display:inline-flex;align-items:center;min-height:calc(var(--navh) * .74);padding:0 1em;border-radius:999px;font-weight:900;font-size:calc(var(--navh) * .31);line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.tn-links a:hover{background:var(--paper)}
.tn-links a[aria-current]{background:var(--pink);box-shadow:inset 0 0 0 2px var(--ink)}
.tn-gu{margin-left:2px;background:var(--ink);color:var(--paper)}
.tn-gu[aria-current]{background:var(--pink);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.tn-how{display:none}
html{scroll-padding-top:calc(var(--navh) + 24px)}

/* the pause button: a flat tint disc, no white ring or shadow (it is a quiet control on a cream band) */

/* ============ CHAPTERS: the bays. A coloured poster sheet behind one big pinned white screen, copy on the other side ============ */
.bay{position:relative;padding:clamp(22px,1.9vw,28px) 0;overflow-x:clip}
.bay-in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,32px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,56px);align-items:center}
.bay.flip .bay-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.bay.flip .bay-copy{order:2}
.bay-copy{min-width:0}
.bay-head{display:flex;align-items:center;gap:12px;margin-bottom:2px}
/* the white die-cut numeral: a white stroked copy makes the die-cut edge, the pink copy is the ink printed off register, the ink copy is on top */
.numeral{flex:none;width:auto;height:clamp(76px,7vw,100px);overflow:visible;filter:drop-shadow(0 1px 1px rgba(30,42,36,.3)) drop-shadow(0 4px 7px rgba(30,42,36,.2))}
.numeral text{font-family:var(--font-title);font-weight:700;font-size:104px;text-anchor:middle;font-variation-settings:"wght" 700,"wdth" 100}
.nm-cut{fill:#fff;stroke:#fff;stroke-width:22;stroke-linejoin:round;paint-order:stroke}
.nm-ghost{fill:var(--pink)}
.nm-ink{fill:var(--ink)}
.eyebrow{font-weight:900;font-size:.9375rem;letter-spacing:.1em;text-transform:uppercase}
.verb{display:inline-block;font-size:clamp(3.5rem,8.4vw,7.6rem);line-height:.96;letter-spacing:-.01em;rotate:-2deg;text-shadow:-.028em .028em 0 var(--mis,var(--pink));margin:0 0 .08em -.03em}
.lead{font-size:1.25rem;font-weight:600;line-height:1.42;max-width:32rem;margin:.2rem 0 1.25rem;text-wrap:pretty}
.spot{text-wrap:pretty;max-width:32rem;margin-top:16px;font-size:1.0625rem;font-weight:700;line-height:1.45;color:var(--ink78)}

/* feature chips: a compact 2 x 2 of small die-cut stickers (a swipeable row on small screens) */
.chips{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;max-width:36rem}
.chip{--t:0deg;position:relative;isolation:isolate;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"badge title" "text text";column-gap:10px;row-gap:7px;align-items:center;padding:12px 14px 14px 12px}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border-radius:18px;box-shadow:var(--bx-sticker);rotate:var(--t,0deg)}
.chip div{display:contents}
.chip .badge{grid-area:badge}
.chip b{grid-area:title;font-weight:800;font-size:1.1875rem;line-height:1.2}
.chip div span{grid-area:text;font-size:1.0625rem;font-weight:600;color:var(--ink78);line-height:1.42}
.badge{flex:none;width:40px;height:40px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:var(--bx-sticker);display:grid;place-items:center;color:var(--ink)}
.badge .ic{width:20px;height:20px}
.f-mint{--c:var(--mint)}.f-sun{--c:var(--sunflower)}.f-pink{--c:var(--pink)}.f-blue{--c:var(--blue);color:#fff}

.bay-art{position:relative;min-width:0}
.poster{position:relative;border-radius:14px;padding:clamp(24px,2.4vw,32px) clamp(12px,2.6vw,32px) clamp(24px,2.4vw,32px);box-shadow:0 2px 3px rgba(30,42,36,.14),0 20px 44px rgba(30,42,36,.2)}
.p-blue{background:var(--blue)}.p-pink{background:var(--pink)}.p-mint{background:var(--mint)}.p-teal{background:var(--teal)}
/* the poster's halftone: paper dots only, small and fine, dense in the top left corner and feathered out */
.poster-bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.poster-bg::before{content:"";position:absolute;inset:0;background:url(/assets/brand/dots-paper.svg) 0 0/46px 46px;opacity:.6;-webkit-mask-image:radial-gradient(ellipse 95% 70% at 6% 0,#000 0,rgba(0,0,0,.55) 38%,transparent 78%);mask-image:radial-gradient(ellipse 95% 70% at 6% 0,#000 0,rgba(0,0,0,.55) 38%,transparent 78%)}
.p-mint .poster-bg::before{opacity:.75}

/* under the poster: the white caption pill and the "Show me" button */
.bay-foot{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;margin-top:22px}   /* above the next bay, which tucks up under it on wide screens */
.cap{background:#fff;color:var(--ink);font-weight:800;font-size:1rem;line-height:1.25;text-align:center;padding:.6em 1.15em;border-radius:999px;box-shadow:var(--bx-sticker)}

/* ============ pinned prints on the wall: the results you make in a demo get stuck on the poster ============ */
.wprint{position:absolute;z-index:4;width:76px;bottom:-34px}
.wprint .pcard{container-type:inline-size;box-shadow:0 2px 4px rgba(30,42,36,.2),0 10px 24px rgba(30,42,36,.3)}
.bay-snap .wall-strip{top:auto;bottom:-34px;right:20px;width:42px;z-index:4;filter:none}
.bay-snap .wprint,.bay-goof .wprint,.bay-stick .wprint{left:16px;right:auto}
/* a small poster has no room beside the screen, so the pins sit on a shelf at its bottom edge */
.poster{padding-bottom:118px}
.bay-foot{margin-top:46px}

/* ============ CREW: the 21 avatars. The grid, the tiles, the names and the heading scale with the screen (--kcu): seven columns in a grid that is 1100px wide at 1440 and grows with the display ============ */
/* the tour's last step (Keep) ends right above this section and its fan of prints hangs over the seam by at most 56 (scaled) px, so the top padding
   makes that room (from 640px wide up: a small phone has no fan) and the heading never sits under a print */
/* the name under a tile: plain type. Hover or focus tints it, the picked one is ink with paper type (flat fills, no white pill or ring) */

/* ============ responsive (later rules win, keep this order: the wide-desktop pins, the zig-zag overlap, then 980 down to 400, then reduced motion and print) ============ */
/* a wide desktop: the screen has a little room on both sides, so small pins stand beside it (from 1420px they are bigger) */
@media (min-width:1240px){
  .poster{padding-bottom:42px}
  .bay-foot{margin-top:-26px;position:relative;z-index:5}
  .wprint{bottom:9%;width:56px}
  .bay-snap .wall-strip{top:5%;bottom:auto;right:-6px;width:52px}
  .bay-snap .wprint{left:auto;right:-6px}
  .bay-goof .wprint{left:-6px;right:auto}
  .bay-stick .wprint{left:auto;right:-6px}
}
/* the wide desktop: the screen has room on both sides, so the pins stand beside it */
@media (min-width:1420px){
  .poster{padding-bottom:42px}
  .bay-foot{margin-top:-26px;position:relative;z-index:5}
  .wprint{bottom:9%;width:88px}
  .bay-snap .wall-strip{top:5%;bottom:auto;right:-14px;width:84px}
  .bay-snap .wprint{left:auto;right:-14px}
  .bay-goof .wprint{left:-14px;right:auto}
  .bay-stick .wprint{left:auto;right:-14px}
}
/* the bays zig-zag (the poster swaps sides each chapter), so the next one can tuck up into the free corner the last one leaves */
@media (min-width:981px){
  .bay+.bay{margin-top:-56px}
}
@media (min-width:1240px){
  .bay+.bay{margin-top:-100px}
}
@media (min-width:1420px){
  .bay+.bay{margin-top:-114px}   /* was -130: the chip copy grew a line in places, and the next poster's corner ended up 10px under the last text line */
}
@media (max-width:980px){
  .bay-in,.bay.flip .bay-in{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  .bay-copy{display:contents}
  .bay-head,.verb,.lead{order:1}
  .bay .verb{align-self:flex-start}
  .bay .lead{margin:0}
  .bay-art{order:2}
  .bay .chips{order:3;max-width:none}
  .bay .spot{order:3}
  .bay.flip .bay-copy{order:0}
  .verb{font-size:min(18vw,7.6rem)}
}
@media (min-width:641px) and (max-width:980px){
  .poster{padding-bottom:42px}
  .bay-foot{margin-top:-26px;position:relative;z-index:5}
  .wprint{bottom:9%;width:104px}
  .bay-snap .wall-strip{top:5%;bottom:auto;right:-4px;width:92px}
  .bay-snap .wprint{left:auto;right:-4px}
  .bay-goof .wprint{left:-4px;right:auto}
  .bay-stick .wprint{left:auto;right:-4px}
}
@media (max-width:700px){
  /* v3.6: no nav pill on a phone (it covered the step titles and the arrows at the bottom right do its job); the words start near the top (css/tour.css) */
  .topnav{display:none!important}
  html{scroll-padding-top:0}
  .tn-how{display:block}
  .tn-links li:not(.tn-how){display:none}
  :root{--navh:54px}
  .topnav{padding:4px 5px 4px 12px;top:10px}
  .tn-logo img{height:34px}
  .tn-links a,.tn-gu{padding:0 .7em;min-height:44px;font-size:1rem}
}
@media (max-width:640px){
  .bay{padding:clamp(26px,7vw,40px) 0}
  .bay-in,.bay.flip .bay-in{gap:20px}
  /* the chips become a swipeable row: the next one peeks in from the right edge */
  .chips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 min(72%,272px);scroll-snap-align:start;scroll-margin-left:16px}
  .chip b{font-size:1.125rem}
  .chip div span{font-size:1rem}
  .lead{font-size:1.125rem}
  .spot{margin-top:0}
  .bay .spot{max-width:none}
  .poster{padding-top:26px}
  .numeral{height:66px}
}
@media (max-width:560px){
  }
@media (max-width:400px){
  .topnav{padding:3px 4px 3px 10px;gap:2px}
  .tn-logo{margin-right:2px}
  .tn-logo img{height:32px}
  .tn-links a,.tn-gu{padding:0 .6em;font-size:.9375rem}
  /* the plain CTA pill must stay on one line at 360px: tighter sides, and the title scales with the screen */
  .cta-pill{padding-inline:1em;max-width:100%;font-size:min(1.2rem,5vw)}
}

/* ============ reduced motion: nothing moves; the marquee becomes a still, wrapped row ============ */
@media (prefers-reduced-motion:reduce){
  .js .topnav{transition:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:700px){
}
/* ============ PAGER (v3.6): the arrows at the bottom right (partials/pager.html, js/core.js "== pager =="). Cream discs with the nav's ink outline and hard shadow; in the hero ONE big pink
   down button that bobs and sends out a ring, from the first step on a small down button with a small up arrow beside it. Sizes grow with the screen (--kcu). ============ */
.pager{--sz:max(48px,calc(var(--kcu) * 56));position:fixed;right:max(28px,calc(var(--kcu) * 46));bottom:max(28px,calc(var(--kcu) * 46));z-index:55;display:flex;align-items:center;gap:calc(var(--sz) * .22)}
.pager[hidden],.pg[hidden],html:not(.js) .pager{display:none}
.pager.is-hero{--sz:max(80px,calc(var(--kcu) * 96))}
.pg{position:relative;flex:none;display:grid;place-items:center;width:var(--sz);height:var(--sz);padding:0;border:3px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;
  box-shadow:calc(var(--sz) * .07) calc(var(--sz) * .07) 0 var(--ink);transition:width .45s var(--spring-pop),height .45s var(--spring-pop),background-color .3s,translate .2s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
/* one ring that reads on every band (blue, pink, mint, teal): a white ring, then an ink halo, the hard shadow kept */
.pg:focus-visible{border-radius:50%;outline:3px solid #fff;outline-offset:3px;box-shadow:calc(var(--sz) * .07) calc(var(--sz) * .07) 0 var(--ink),0 0 0 6px var(--ink)}
.pg-ic{width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pager.is-hero .pg-down{background:var(--pink)}
.pg:hover{translate:0 -2px}
.pg:active{translate:calc(var(--sz) * .045) calc(var(--sz) * .045);box-shadow:0 0 0 var(--ink)}
@media (prefers-reduced-motion:no-preference){
  /* in the hero only: the arrow bobs and a pink ring swells out of the button now and then (it stops the moment the hero is left) */
  .pager.is-hero .pg-ic{animation:pg-bob 1.5s ease-in-out infinite}
  .pager.is-hero .pg-down::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--pink);opacity:0;pointer-events:none;animation:pg-ring 2.6s ease-out 1.4s infinite}
}
@keyframes pg-bob{0%,100%{translate:0 -8%}50%{translate:0 12%}}
@keyframes pg-ring{0%{opacity:.9;scale:1}70%,100%{opacity:0;scale:1.7}}
/* on a small screen the two arrows stack (up above down) in the narrow margin beside the app preview, so they do not cover its buttons */
@media (max-width:700px){.pager{--sz:40px;right:6px;bottom:20px;flex-direction:column;gap:8px}.pager.is-hero{--sz:52px;right:14px;bottom:22px}.pg{box-shadow:calc(var(--sz) * .06) calc(var(--sz) * .06) 0 var(--ink)}}
@media (prefers-reduced-motion:reduce){.pg{transition:none}}
/* a phone on its side (short and wide): no nav pill, it covered the top of the phone and half the words; the arrows do its job */
@media (max-height:520px){
  .topnav{display:none!important}
}
@media print{
  .topnav,.pager{display:none!important}
}