/* Piku Print Club, the site. Tokens, reset, type, the one focus recipe, buttons, utilities, reveal motion, print and reduced-motion rules. Loaded first. */
@font-face{font-family:"DynaPuff";src:url(/fonts/DynaPuff-Variable.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito-Black.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  /* off-register "second ink" under display type: a deeper tone of the field it sits on (never a clashing colour) */
  --ghost-teal:#0F6E6A;--ghost-pink:#C21E86;--ghost-mint:#3E9FA0;--ghost-blue:#1E3B82;--ghost-paper:rgba(30,42,36,.16);
  --paper:#F3EEE3;--ink:#1E2A24;--blue:#3255A4;--pink:#FF48B0;--teal:#1E9A94;--mint:#82D8D5;--coral:#F27A70;--sunflower:#F2B531;--orange:#F25A22;
  --white:#fff;--card:#FCFBF6;--soft:#4B5550;--pink-tint:#FF91D0;
  --ink72:rgba(30,42,36,.72);--ink78:rgba(30,42,36,.78);--hair:#E7E1D6;--tile:#F5F1E9;--sel:#C0E3E1;
  --bx-sticker:0 1px 1px rgba(30,42,36,.30),0 3px 8px rgba(30,42,36,.17);
  --bx-print:0 1px 3px rgba(30,42,36,.10),0 6px 18px rgba(30,42,36,.16);
  --bx-big:0 2px 4px rgba(30,42,36,.12),0 16px 40px rgba(30,42,36,.22);
  --font-title:"DynaPuff",Nunito,system-ui,sans-serif;
  --font-body:Nunito,ui-rounded,system-ui,sans-serif;
  /* spring() approximations from the app's motion (response/damping) as linear() curves */
  --spring-press:cubic-bezier(.34,1.4,.64,1);
  --spring-pop:cubic-bezier(.34,1.56,.64,1);
  --spring-glide:cubic-bezier(.3,1.1,.5,1);
}
@supports (transition-timing-function:linear(0,1)){:root{
  --spring-press:linear(0,.034,.118,.231,.356,.482,.6,.706,.796,.87,.928,.973,1.004,1.026,1.038,1.045,1.046,1.044,1.04,1.035,1.029,1.023,1.018,1.013,1.009,1.006,1.003,1);
  --spring-pop:linear(0,.032,.112,.22,.34,.463,.579,.684,.775,.851,.912,.959,.994,1.018,1.034,1.042,1.046,1.045,1.042,1.038,1.032,1.027,1.021,1.016,1.012,1.008,1.005,1.003,1);
  --spring-glide:linear(0,.024,.085,.168,.262,.358,.452,.54,.619,.69,.752,.805,.849,.885,.915,.939,.957,.972,.983,.991,.997,1.001,1.003,1.005,1.006,1.006,1.005,1.003,1);
}}

*,*::before,*::after{box-sizing:border-box}
/* v2 stage sections let their art poke out over a seam (and sideways), so the PAGE clips sideways overflow: no horizontal scrollbar, ever.
   clip (not hidden) where it exists, because it does not make a scroll container (position:sticky keeps working); hidden is the fallback. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--font-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--blue)}
button{font:inherit;color:inherit}
/* THE focus recipe. One look for every control on the page, never restyled per component:
   a 3px ink outline, 2px off the element, with a white ring filling the gap (visible on cream, teal, pink, mint and white).
   On a BLUE field put .on-blue on the container and it inverts to a white outline with an ink ring.
   Elements that keep their own box-shadow (selected tiles, pills) keep it and still get the outline. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px #fff;border-radius:6px}
.on-blue :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px var(--ink)}
/* containers that script focuses after an in-page jump (skip link, anchors) are not controls: no ring on them */
[tabindex="-1"]:focus{outline:0;box-shadow:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#fff;padding:.6em 1em;border-radius:999px;font-weight:800;color:var(--ink)}
.skip:focus{top:12px}

/* motion: things get stuck on with a little overshoot, then settle into their tilt */
.pop{rotate:var(--r,0deg)}
.js .pop:not(.in){opacity:0;rotate:calc(var(--r,0deg) + 5deg);scale:.88;translate:0 16px}
.js .pop{transition:rotate .67s var(--spring-pop) var(--d,0s),scale .67s var(--spring-pop) var(--d,0s),translate .67s var(--spring-pop) var(--d,0s),opacity .18s ease-out var(--d,0s)}
.js .fade{opacity:0;transition:opacity .5s ease-out var(--d,0s)}
.js .fade.in{opacity:1}
.press{transition:transform .34s var(--spring-press)}
.press:active{transform:translateY(1px) scale(.96)}
.ic{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes develop{from{opacity:1}to{opacity:0}}
/* Tap-target helper: add .hit to a small visual control and its touch area grows 14px every way
   (16px tall becomes 44px) without changing how it looks. The element must be positioned (.hit sets
   position:relative; a component's own position:absolute wins because it loads later) and its ::after must be free. */
.hit{position:relative}
.hit::after{content:"";position:absolute;inset:-14px}

/* reduced motion: no springs, simple fades only (component files add their own pieces) */
@media (prefers-reduced-motion:reduce){
  .js .pop:not(.in){opacity:0;rotate:var(--r,0deg);scale:1;translate:none}
  .js .pop{transition:opacity .2s ease-out}
  .press:active{transform:none}
}

/* print: everything is visible and the hero print is already developed */
@media print{
  .pop,.fade{opacity:1!important;rotate:var(--r,0deg)!important;scale:1!important;translate:none!important;transition:none!important}
  .develop{display:none!important}
}