/* proc.css — the procedures' library (prefix pr-): the gold first screen with the search and one procedure on the table,
   the bento of the areas, the results, six to start with, the last door — and what the two pages share (the number's
   clay bubble, the tries, the last door, the waiting skeleton). One procedure: proc-page.css; its path: proc-flow.css;
   the badges and the cards: pb.css. Everything is built from the tokens and recipes of kit.css. */
.pr-wait{min-height:min(820px,94vh)}
.pr-main{min-height:60vh}
.pr-noscript{padding:120px 0 60px;color:var(--ink-2)}
/* a clay object (assets/clay): lit like the badge, a soft coloured shadow, never grey */
.pr-clay{display:block;height:auto;filter:drop-shadow(0 14px 12px rgba(70,8,36,.3))}

/* ── the first screen ─────────────────────────────────────────────────────────────────────────────────────────────── */
.pr-hero .k-phero-in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.pr-hero h1{max-width:11.5em}
.pr-hl{position:relative;display:inline-block;margin-block:0 .08em; margin-inline:0 .06em;padding:.02em .26em .1em;color:var(--cream-50);border-radius:.42em;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow);text-shadow:0 2px 0 rgba(20,0,10,.35);transform:rotate(-2.4deg);transform-origin:20% 90%}
.pr-hl::after{content:"";position:absolute;inset-inline-end:.22em;bottom:-.26em;width:.42em;height:.36em;background:var(--plum-600);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M0 0H72C74 34 84 62 100 90C52 82 14 52 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M0 0H72C74 34 84 62 100 90C52 82 14 52 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.pr-hl>span{position:relative;font-variant-numeric:tabular-nums}
.pr-hero .k-lead{max-width:33em}
.pr-find{margin-top:32px;max-width:600px}
.pr-search{height:66px;padding-block:0; padding-inline:24px 9px;gap:14px;box-shadow:inset 0 2px 4px rgba(100,8,46,.12),inset 0 0 0 1px rgba(100,8,46,.06),0 22px 38px -22px rgba(110,50,0,.6),0 4px 10px -6px rgba(110,50,0,.3)}
.pr-search>.pb-i{width:23px;height:23px;stroke-width:2.2}
.pr-search input{font-size:1.125rem;-webkit-appearance:none;appearance:none}
.pr-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pr-search:focus-within{box-shadow:inset 0 2px 4px rgba(100,8,46,.12),0 0 0 3px var(--plum-400),0 22px 38px -22px rgba(110,50,0,.6)}
.pr-clear{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;color:var(--plum-600);background:rgba(100,8,46,.07);transition:background .2s,transform .3s var(--spring)}
.pr-clear:hover{background:rgba(100,8,46,.14);transform:rotate(90deg)}
.pr-clear .pb-i{width:20px;height:20px;stroke-width:2.2}
.pr-tries{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;max-width:600px}
.pr-tries-h{margin-inline-end:4px;font:650 .72rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-500)}
.pr-try{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;font:600 .9rem/1 var(--text);color:var(--plum-600);background:rgba(255,250,240,.7);box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(110,40,0,.4);transition:transform .35s var(--spring),background .2s,box-shadow .2s}
.pr-try:hover{transform:translateY(-2px);background:var(--cream-50);box-shadow:inset 0 1px 0 #fff,0 10px 18px -10px rgba(110,40,0,.5)}
.pr-try:active{transform:translateY(1px) scale(.97)}

/* on a phone the table does not fit: a clipboard and a star float in the corner instead */
.pr-hero-ob{display:none}
.pr-hero-ob1{width:58px;--r:9deg;transform:rotate(9deg);animation:k-float 7s ease-in-out infinite}
.pr-hero-ob2{position:absolute;inset-inline-start:-18px;top:44px;width:24px;animation:k-twinkle 3.6s ease-in-out infinite}

/* one procedure on the table: a paper sheet, its first steps done, one waiting for your yes */
.pr-shot-art{max-width:560px;width:100%;justify-self:end;min-height:1px}
.pr-shot{position:relative;display:block;container-type:inline-size;aspect-ratio:1/.94;text-decoration:none;color:var(--ink);border-radius:40px;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .8s var(--ease),transform 1s var(--spring)}
.pr-shot-art.is-in .pr-shot{opacity:1;transform:none}
.pr-shot:focus-visible{outline-offset:-6px}
.pr-shot-glow{position:absolute;inset:4% 0 2% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,228,.95),rgba(255,252,228,0));filter:blur(6px)}
.pr-shot-back{position:absolute;inset-inline-end:1%;top:2%;width:40%;display:block;padding:2.4cqw;border-radius:5.4cqw;background:var(--k-paper);box-shadow:var(--k-paper-shadow);transform:rotate(7deg);transition:transform .6s var(--spring)}
.pr-shot-back img{display:block;width:100%;height:auto;border-radius:3.6cqw}
.pr-shot-back .k-tag{position:absolute;inset-inline-end:4.4cqw;top:4.4cqw;font-size:1.8cqw;padding:1.1cqw 1.9cqw;box-shadow:0 .6cqw 1.2cqw -.6cqw rgba(20,90,50,.5)}
.pr-shot-card{position:absolute;inset-inline-start:1%;top:13%;width:75%;display:grid;gap:3.2cqw;padding:4.4cqw 4.4cqw 4cqw;border-radius:6.4cqw;background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 54px 70px -40px rgba(80,30,0,.6);transform:rotate(-3deg);transition:transform .6s var(--spring)}
.pr-shot:hover .pr-shot-card{transform:rotate(-2deg) translateY(-1.4cqw)}
.pr-shot:hover .pr-shot-back{transform:rotate(9deg) translateX(1cqw)}
.pr-shot-head{display:flex;align-items:center;gap:3cqw}
.pr-shot-tile{width:11cqw;flex:none;--r:-8deg;transform:rotate(-8deg);filter:drop-shadow(0 1.6cqw 1.4cqw rgba(70,8,36,.32))}
.pr-shot-ht{display:grid;justify-items:start;gap:1.6cqw;min-width:0}
.pr-shot-t{font:780 3.9cqw/1.08 var(--display);letter-spacing:-.025em;color:var(--plum-600)}
.pr-shot .pb-rh{gap:1cqw;padding-block:.9cqw; padding-inline:1.4cqw 1.9cqw;font-size:2.15cqw}
.pr-shot .pb-rh .pb-i{width:2.5cqw;height:2.5cqw}
.pr-shot-path{position:relative;display:grid;gap:2.4cqw;padding-top:.6cqw}
.pr-shot-path::before{content:"";position:absolute;inset-inline-start:3.05cqw;top:3cqw;bottom:3cqw;width:1.5cqw;border-radius:2cqw;background:linear-gradient(90deg,#4a0a28,#8f1754 40%,#a3205f 55%,#5c0828);box-shadow:inset 0 .3cqw .3cqw rgba(255,255,255,.2)}
.pr-sx{position:relative;display:flex;align-items:flex-start;gap:3cqw}
.pr-sx-st{position:relative;display:grid;place-items:center;flex:none;width:7.6cqw;height:7.6cqw;border-radius:50%;color:var(--plum-700);background:var(--k-gold-clay);box-shadow:var(--k-gold-shadow)}
.pr-sx-st .pb-i,.pr-sx-st svg{width:3.8cqw;height:3.8cqw}
.pr-sx--done .pr-sx-st{background:radial-gradient(120% 100% at 30% 10%,#46b97a,#2f9a62 55%,#1f7a4b);box-shadow:inset 0 .4cqw .3cqw rgba(255,255,255,.35),inset 0 -.8cqw 1.2cqw rgba(0,40,20,.3),0 1.4cqw 2cqw -1cqw rgba(20,90,50,.6)}
.pr-sx--done .pr-sx-st svg{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pr-sx--ask .pr-sx-st{color:var(--plum-600);background:linear-gradient(180deg,#fffcf3,#fdebc4);box-shadow:inset 0 .4cqw 0 #fff,inset 0 0 0 .45cqw rgba(100,8,46,.22),0 0 0 1.2cqw rgba(250,201,63,.35),0 1.4cqw 2cqw -1cqw rgba(110,50,0,.5);animation:pr-ask 2.6s ease-in-out infinite}
@keyframes pr-ask{0%,100%{box-shadow:inset 0 .4cqw 0 #fff,inset 0 0 0 .45cqw rgba(100,8,46,.22),0 0 0 1.2cqw rgba(250,201,63,.35),0 1.4cqw 2cqw -1cqw rgba(110,50,0,.5)}50%{box-shadow:inset 0 .4cqw 0 #fff,inset 0 0 0 .45cqw rgba(100,8,46,.22),0 0 0 2cqw rgba(250,201,63,.16),0 1.4cqw 2cqw -1cqw rgba(110,50,0,.5)}}
.pr-sx--next .pr-sx-st{opacity:.5;filter:saturate(.7)}
.pr-sx-tx{display:grid;gap:1.6cqw;min-width:0;padding-top:1.5cqw}
.pr-sx-t{font:600 3cqw/1.25 var(--text);color:var(--ink)}
.pr-sx--done .pr-sx-t{color:var(--ink-2)}
.pr-sx--ask .pr-sx-t{font-weight:700;color:var(--plum-600)}
.pr-sx--next .pr-sx-t{color:var(--ink-3);opacity:.75}
.pr-sx-ask{display:flex;flex-wrap:wrap;align-items:center;gap:1.8cqw}
.pr-sx-ask .k-tag{padding:1.2cqw 2cqw;font-size:1.85cqw}
.pr-sx-btn{display:inline-flex;align-items:center;height:5.6cqw;padding:0 3cqw;border-radius:999px;font:700 2.4cqw/1 var(--display);color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.pr-shot-foot{display:flex;align-items:center;gap:1.6cqw;padding-inline-start:1cqw;font:600 2.3cqw/1.2 var(--text);color:var(--ink-3)}
.pr-shot-foot .pb-i{width:3.2cqw;height:3.2cqw;color:#2f9a62}
.pr-shot-prop{position:absolute;animation:k-float 7.4s ease-in-out infinite;filter:drop-shadow(0 2.4cqw 2cqw rgba(70,8,36,.32))}
.pr-shot-prop--1{inset-inline-end:2%;bottom:12%;width:17%;--r:12deg;transform:rotate(12deg);animation-delay:-2s}
.pr-shot-prop--2{inset-inline-end:24%;bottom:-2%;width:13%;--r:-10deg;transform:rotate(-10deg);animation-duration:8.6s}
.pr-shot-star{position:absolute;animation:k-twinkle 3.6s ease-in-out infinite;filter:drop-shadow(0 1.2cqw 1cqw rgba(120,60,0,.35))}
.pr-shot-star--1{inset-inline-start:-3%;top:5%;width:7%}
.pr-shot-star--2{inset-inline-end:41%;top:3%;width:5%;animation-delay:-1.4s}
.pr-shot-art.is-in .pr-sx--done .pr-sx-st{animation:k-pop .55s var(--spring) both}
.pr-shot-art.is-in .pr-sx--done:nth-child(1) .pr-sx-st{animation-delay:.5s}
.pr-shot-art.is-in .pr-sx--done:nth-child(2) .pr-sx-st{animation-delay:.75s}
.pr-shot-art.is-in .pr-sx--done:nth-child(3) .pr-sx-st{animation-delay:1s}
.pr-shot-art.is-in .pr-sx--done:nth-child(4) .pr-sx-st{animation-delay:1.25s}

/* ── the library: a head with three numbers, the bento of areas, the rhythms ──────────────────────────────────────── */
.pr-lib{scroll-margin-top:84px}
.pr-lib-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px 56px;align-items:end;margin-bottom:clamp(32px,4.4vw,56px)}
.pr-lib-head .k-sechead{margin-bottom:0}
.pr-lib .k-h2{color:var(--plum-600)}
.pr-stats{display:flex;gap:clamp(20px,3vw,44px)}
.pr-stats li{display:grid;gap:6px;align-content:start}
.pr-stats b{font:800 clamp(2.1rem,3.6vw,3.2rem)/.9 var(--display);letter-spacing:-.045em;color:var(--plum-600);font-variant-numeric:tabular-nums}
.pr-stats span{max-width:8.5em;font:600 .84rem/1.25 var(--text);color:var(--ink-3)}
.pr-stat-y b{position:relative;display:inline-block;padding:0 .14em;border-radius:.2em;background:linear-gradient(transparent 58%,rgba(250,201,63,.85) 58%,rgba(250,201,63,.85) 92%,transparent 92%)}

.pr-bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(158px,auto);gap:clamp(12px,1.4vw,18px)}
.pr-bt{display:flex;min-width:0}
.pr-bt--big{grid-column:span 2;grid-row:span 2}
.pr-tile{position:relative;isolation:isolate;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-width:0;padding:20px 20px 19px;border-radius:var(--r-xl);text-decoration:none;color:var(--ink);background:var(--k-paper);box-shadow:var(--k-paper-shadow);transition:transform .5s var(--spring),box-shadow .35s}
.pr-tile::before{content:"";position:absolute;z-index:-1;inset-inline-start:-34%;top:-46%;width:118%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--pb-c) 20%,transparent),color-mix(in srgb,var(--pb-c) 0%,transparent));transition:opacity .4s;opacity:.85}
.pr-tile::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:var(--k-grain)}
.pr-tile:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(160,100,20,.1),0 34px 50px -26px rgba(90,40,10,.55),0 6px 12px -5px rgba(90,40,10,.2)}
.pr-tile:hover::before{opacity:1}
.pr-tile:active{transform:translateY(-2px) scale(.99)}
.pr-tile:focus-visible{outline-offset:4px;border-radius:var(--r-xl)}
.pr-tile-ob{position:relative;display:block;align-self:flex-start;height:76px;transition:transform .55s var(--spring)}
.pr-tile-ob .pr-clay{width:auto;height:76px;max-width:96px;object-fit:contain;object-position:left center;animation:k-float 7s ease-in-out infinite;--r:-5deg;transform:rotate(-5deg)}
.pr-tile-ob[data-f="1"] .pr-clay{--r:5deg;transform:rotate(5deg);animation-delay:-1.8s;animation-duration:7.8s}
.pr-tile-ob[data-f="2"] .pr-clay{--r:-2deg;transform:rotate(-2deg);animation-delay:-3.6s;animation-duration:6.6s}
.pr-tile-ob[data-f="3"] .pr-clay{--r:7deg;transform:rotate(7deg);animation-delay:-5.4s;animation-duration:8.4s}
.pr-tile:hover .pr-tile-ob{transform:translateY(-4px) scale(1.08) rotate(-4deg)}
.pr-tile-ic.pb-ic{width:56px;height:56px}
.pr-tile-ic.pb-ic .pb-i{width:27px;height:27px}
.pr-tile-b{display:grid;gap:4px;min-width:0}
.pr-tile-n{font:760 1.22rem/1.1 var(--display);letter-spacing:-.02em;color:var(--plum-600);overflow-wrap:anywhere;hyphens:auto}
.pr-tile-c{font:500 .875rem/1.2 var(--text);color:var(--ink-3)}
.pr-tile-go{position:absolute;inset-inline-end:16px;top:16px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--plum-600);background:rgba(100,8,46,.07);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .4s var(--spring)}
.pr-tile-go .pb-i{width:18px;height:18px;stroke-width:2.2}
.pr-tile:hover .pr-tile-go,.pr-tile:focus-visible .pr-tile-go{opacity:1;transform:none}
/* the biggest area: its name large, three of its procedures, the faces who run them, one clay picture */
.pr-bt--big .pr-tile{padding:28px 28px 26px;justify-content:flex-start}
.pr-bt--big .pr-tile-ob{position:absolute;inset-inline-end:26px;top:24px;height:150px}
.pr-bt--big .pr-tile-ob .pr-clay{height:150px;max-width:170px;object-position:right center;--r:8deg;transform:rotate(8deg)}
.pr-bt--big .pr-tile-b{gap:6px;max-width:60%}
.pr-bt--big .pr-tile-ex{margin-top:auto}
.pr-bt--big .pr-tile-n{font-size:clamp(2rem,3vw,2.7rem);letter-spacing:-.035em}
.pr-bt--big .pr-tile-c{font-size:1rem}
.pr-tile-ex{display:grid;gap:8px;max-width:30em;margin-top:6px}
.pr-tile-exh{font:650 .7rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-500)}
.pr-tile-exi{display:flex;align-items:flex-start;gap:8px;font:600 .9rem/1.3 var(--text);color:var(--ink-2)}
.pr-tile-exi img{width:13px;height:auto;margin-top:3px;flex:none}
.pr-tile-faces{display:flex;margin-top:6px}
.pr-tile-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:3px solid var(--cream-50);box-shadow:0 8px 12px -6px rgba(90,40,0,.5);margin-inline-start:-11px}
.pr-tile-faces img:first-child{margin-inline-start:0}
/* every procedure, A to Z: the one gold tile */
.pr-tile--all{background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow)}
.pr-tile--all::before,.pr-tile--all::after{display:none}
.pr-tile--all:hover{box-shadow:var(--k-gold-shadow),0 30px 44px -24px rgba(130,70,0,.6)}
.pr-tile--all .pr-tile-n{color:var(--plum-700)}
.pr-tile--all .pr-tile-c{color:var(--plum-700);opacity:.8}
.pr-all-ic img{width:44px;height:auto;filter:drop-shadow(0 6px 6px rgba(130,70,0,.4));transition:transform .5s var(--spring)}
.pr-tile--all:hover .pr-all-ic img{transform:rotate(18deg) scale(1.1)}
.pr-tile--all .pr-tile-go{background:rgba(100,8,46,.12)}

/* the rhythms: when the procedures run */
.pr-rhs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(28px,3.4vw,44px)}
.pr-rhs-h{margin-inline-end:6px;font:650 .72rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-500)}
.pr-rh{display:inline-flex;align-items:center;gap:8px;height:40px;padding-block:0; padding-inline:12px 8px;border-radius:999px;text-decoration:none;font:600 .875rem/1 var(--text);color:var(--plum-700);background:linear-gradient(180deg,#fffcf4,#fff1d1);box-shadow:inset 0 1px 0 #fff,0 8px 14px -10px rgba(90,40,10,.5),0 2px 4px -2px rgba(90,40,10,.2);white-space:nowrap;transition:transform .35s var(--spring),box-shadow .2s}
.pr-rh .pb-i{width:17px;height:17px;color:#b07a06;stroke-width:2}
.pr-rh[data-rh="event"] .pb-i{color:var(--plum-400)}
.pr-rh[data-rh="ask"] .pb-i{color:var(--ink-3)}
.pr-rh small{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;font:700 .75rem/1 var(--display);color:var(--ink-3);background:rgba(100,8,46,.07)}
.pr-rh:hover{transform:translateY(-2px)}
.pr-rh.is-on{color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.pr-rh.is-on .pb-i{color:var(--gold-300)}
.pr-rh.is-on small{color:var(--plum-700);background:var(--gold-300)}

/* ── the results ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.pr-res-top{display:grid;gap:18px;margin-bottom:22px}
.pr-back{display:inline-flex;align-items:center;gap:8px;justify-self:start;height:38px;padding-block:0; padding-inline:10px 16px;border-radius:999px;text-decoration:none;font:650 .9rem/1 var(--display);color:var(--plum-600);background:rgba(100,8,46,.07);transition:background .2s,transform .35s var(--spring)}
.pr-back .pb-i{width:18px;height:18px;stroke-width:2.2;transition:transform .35s var(--spring)}
.pr-back:hover{background:rgba(100,8,46,.13)}
.pr-back:hover .pb-i{transform:translateX(-3px)}
.pr-res-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pr-res-h .k-h2{font-size:clamp(1.9rem,3.6vw,3.1rem);overflow-wrap:anywhere}
.pr-res-h .k-h2:focus{outline:none}
.pr-res-ob{display:block;flex:none}
.pr-res-ob .pr-clay{width:auto;height:70px;max-width:90px;object-fit:contain;--r:-6deg;transform:rotate(-6deg);animation:k-float 7s ease-in-out infinite}
.pr-res-ic.pb-ic{width:60px;height:60px}
.pr-res-ic.pb-ic .pb-i{width:29px;height:29px}
.pr-res-n{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font:700 .9rem/1 var(--display);color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 12px -8px rgba(130,70,0,.6)}
.pr-rail-w{position:relative;margin:0 calc(-1*var(--gutter))}
.pr-rail{position:relative;padding:6px var(--gutter) 14px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.pr-rail::-webkit-scrollbar{display:none}
.pr-rail ul{display:flex;gap:8px;width:max-content}
.pr-rail-w.is-l .pr-rail{-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--gutter) - 6px),#000 calc(var(--gutter) + 64px));mask-image:linear-gradient(90deg,transparent calc(var(--gutter) - 6px),#000 calc(var(--gutter) + 64px))}
.pr-rail-w.is-r .pr-rail{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--gutter) - 64px),transparent calc(100% - var(--gutter) + 6px));mask-image:linear-gradient(90deg,#000 calc(100% - var(--gutter) - 64px),transparent calc(100% - var(--gutter) + 6px))}
.pr-rail-w.is-l.is-r .pr-rail{-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--gutter) - 6px),#000 calc(var(--gutter) + 64px),#000 calc(100% - var(--gutter) - 64px),transparent calc(100% - var(--gutter) + 6px));mask-image:linear-gradient(90deg,transparent calc(var(--gutter) - 6px),#000 calc(var(--gutter) + 64px),#000 calc(100% - var(--gutter) - 64px),transparent calc(100% - var(--gutter) + 6px))}
.pr-rail-arr{position:absolute;top:calc(50% - 4px);z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transform:translateY(-50%);color:var(--plum-600);background:linear-gradient(180deg,#fffcf4,#fff1d1);box-shadow:inset 0 1px 0 #fff,0 10px 18px -10px rgba(90,40,10,.55),0 2px 5px -2px rgba(90,40,10,.25);transition:transform .35s var(--spring)}
.pr-rail-arr .pb-i{width:20px;height:20px;stroke-width:2.3}
.pr-rail-arr--l{inset-inline-start:calc(var(--gutter) - 10px)}
.pr-rail-arr--r{inset-inline-end:calc(var(--gutter) - 10px)}
.pr-rail-arr:hover{transform:translateY(-50%) scale(1.08)}
@media (hover:none){.pr-rail-w .pr-rail-arr{display:none}}
.pr-chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding-block:0; padding-inline:6px 8px;border-radius:999px;text-decoration:none;white-space:nowrap;font:600 .9rem/1 var(--text);color:var(--plum-700);background:linear-gradient(180deg,#fffcf4,#fff1d1);box-shadow:inset 0 1px 0 #fff,0 8px 14px -10px rgba(90,40,10,.5),0 2px 4px -2px rgba(90,40,10,.2);transition:transform .35s var(--spring),box-shadow .2s}
.pr-chip .pb-ic{width:32px;height:32px}
.pr-chip .pb-ic .pb-i{width:17px;height:17px}
.pr-chip small{display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;font:700 .75rem/1 var(--display);color:var(--ink-3);background:rgba(100,8,46,.07)}
a.pr-chip:hover{transform:translateY(-2px)}
.pr-chip.is-on{color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.pr-chip.is-on .pb-ic{background:radial-gradient(120% 100% at 30% 8%,#ffe58a 0%,#fcd04a 45%,#efae1e 100%);color:var(--plum-700);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7),inset 0 -3px 5px rgba(170,100,0,.35)}
.pr-chip.is-on .pb-ic .pb-i{filter:none}
.pr-chip.is-on small{color:var(--plum-700);background:var(--gold-300)}
.pr-chip.is-off{opacity:.42;box-shadow:inset 0 1px 0 #fff}
.pr-rhs--sm{margin-top:4px}
.pr-rhs--sm .pr-rh{height:36px;font-size:.8125rem}
.pr-list{margin-top:clamp(22px,3vw,34px)}
.pr-list .pb-more{align-items:center;gap:clamp(22px,3vw,34px)}
.pb-list.pr-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(14px,1.6vw,20px)}
.pr-list .pb-more-btn{--h:56px;height:56px;padding-block:0; padding-inline:8px 28px;font-size:1.0625rem;color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.pr-list .pb-more-btn .pb-mi{width:40px;height:40px;color:var(--plum-700);background:radial-gradient(120% 100% at 30% 8%,#ffe58a 0%,#fcd04a 45%,#efae1e 100%);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7),inset 0 -3px 5px rgba(170,100,0,.35)}
.pr-list .pb-more-btn .pb-mi .pb-i{width:19px;height:19px}
.pr-list .pb-more-btn:focus-visible{outline-color:var(--plum-400)}
/* the card's foot: the faces who run it, the rooms it uses */
.pr-cfaces{display:flex}
.pr-cfaces img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--cream-50);box-shadow:0 5px 8px -4px rgba(90,40,0,.5);margin-inline-start:-9px;background:var(--cream-200)}
.pr-cfaces img:first-child{margin-inline-start:0}
.pr-capps{display:flex;gap:5px;margin-inline-start:auto}
.pr-capps img{width:28px;height:28px;border-radius:8px;box-shadow:0 5px 8px -4px rgba(90,40,0,.45),inset 0 0 0 1px rgba(255,255,255,.4)}
.pr-cbc{display:inline-flex;align-items:center;gap:7px;font:650 .8rem/1 var(--display);color:var(--ink-3)}
.pr-cbc img{width:26px;height:26px}
.pr-grid .pb-cf,.pr-feat .pb-cf,.pr-next-grid .pb-cf{margin-top:auto;padding-top:12px;width:100%}
.pr-grid .pb-cb,.pr-next-grid .pb-cb{align-self:stretch}

/* nothing found: a paper note, the stars, the tries, the door */
.pr-none{display:grid;justify-items:center;gap:14px;max-width:660px;margin:6px auto 0;padding:clamp(32px,4vw,48px) clamp(22px,4vw,48px);border-radius:var(--r-xl);text-align:center;background:var(--k-paper);box-shadow:var(--k-paper-shadow)}
.pr-none-art{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}
.pr-none-mag{width:92px;--r:-12deg;transform:rotate(-12deg);animation:k-float 6.4s ease-in-out infinite}
.pr-none-s1{width:30px;margin-bottom:56px;animation:k-twinkle 3.4s ease-in-out infinite}
.pr-none-s2{width:40px;margin-bottom:30px;animation:k-twinkle 3.4s ease-in-out infinite;animation-delay:-1.6s}
.pr-none .k-h3{color:var(--plum-600);overflow-wrap:anywhere}
.pr-none>p{max-width:32em;color:var(--ink-2)}
.pr-none-tries{justify-content:center;margin-top:4px}
.pr-none-tries .pr-try{background:var(--cream-200)}
.pr-none-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}

/* ── six to start with: big paper cards on plum ───────────────────────────────────────────────────────────────────── */
.pr-feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.pr-feat-grid>li{display:flex;min-width:0}
.pr-feat .pb-card{flex:1;flex-direction:column;gap:0;padding:12px 12px 22px;border-radius:var(--r-xl);box-shadow:var(--k-paper-shadow),0 40px 60px -34px rgba(0,0,0,.6)}
.pr-feat .pb-card:hover{transform:translateY(-6px)}
.pr-feat .pb-cpic{width:100%;height:auto;aspect-ratio:16/10}
.pr-feat .pb-cpic img{border-radius:28px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pr-feat .pb-cpic .pb-ic{inset-inline-end:20px;bottom:-22px;width:50px;height:50px}
.pr-feat .pb-cpic .pb-ic .pb-i{width:25px;height:25px}
.pr-feat .pb-card.pb-has-pic:hover .pb-cpic img{transform:scale(1.03)}
.pr-feat .pb-cb{padding:26px 12px 0}
.pr-feat .pb-ct{font-size:1.32rem;letter-spacing:-.025em}
.pr-feat .pb-cs{-webkit-line-clamp:3}

/* ── the last door ────────────────────────────────────────────────────────────────────────────────────────────────── */
.pr-end{padding-block:clamp(80px,9vw,128px) calc(clamp(80px,9vw,128px) + var(--k-lap))}
.pr-end-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);align-items:center}
.pr-end-art{position:relative;display:grid;place-items:center;width:100%;max-width:360px;aspect-ratio:1.15;justify-self:center}
.pr-end-art .pr-clay{position:absolute;filter:drop-shadow(0 20px 16px rgba(70,8,36,.35));animation:k-float 7s ease-in-out infinite}
.pr-end-o1{inset-inline-start:8%;top:12%;width:60%;--r:-8deg;transform:rotate(-8deg)}
.pr-end-o2{inset-inline-end:4%;bottom:6%;width:36%;--r:10deg;transform:rotate(10deg);animation-delay:-2.4s;animation-duration:8s}
.pr-end-o3{inset-inline-end:14%;top:2%;width:16%;--r:14deg;transform:rotate(14deg);animation-delay:-4.6s;animation-duration:6.2s}
.pr-end-tx .k-h2{color:var(--plum-600)}
.pr-end-tx .k-lead{margin-top:18px}
.pr-end-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ── narrower screens ─────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){.pr-bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1020px){.pr-lib-head{grid-template-columns:minmax(0,1fr)}.pr-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .pr-hero .k-phero-in{grid-template-columns:minmax(0,1fr)}
  .pr-shot-art{justify-self:center;max-width:520px}
  .pr-bento{grid-template-columns:repeat(3,minmax(0,1fr))}.pr-bt--all{grid-column:span 2}
  .pr-end-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.pr-end-acts{justify-content:center}.pr-end-art{max-width:260px}
}
@media (max-width:640px){
  .pr-shot-art{display:none}
  .pr-hero-ob{display:block;position:absolute;inset-inline-end:var(--gutter);top:96px;z-index:1}
  .pr-feat-grid{display:flex;gap:14px;margin-inline:calc(-1*var(--gutter));padding:6px var(--gutter) 26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .pr-feat-grid::-webkit-scrollbar{display:none}
  .pr-feat-grid>li{flex:0 0 84%;scroll-snap-align:start}
  .pr-search{height:60px;padding-inline-start:18px}
  .pr-search input{font-size:1rem}
  .pr-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(132px,auto);gap:10px}
  .pr-bt--big{grid-column:span 2;grid-row:auto}.pr-bt--all{grid-column:auto}
  .pr-bt--big .pr-tile{min-height:300px}
  .pr-tile{padding:16px 16px 15px;gap:10px;border-radius:28px}
  .pr-tile-ic.pb-ic{width:46px;height:46px}.pr-tile-ic.pb-ic .pb-i{width:23px;height:23px}
  .pr-tile-n{font-size:1.06rem}.pr-tile-c{font-size:.8125rem}
  .pr-tile-go{display:none}
  .pr-tile-ex{max-width:62%}
  .pr-stats{gap:18px}
  .pr-res-ic.pb-ic{width:48px;height:48px}
  .pr-rhs:not(.pr-rhs--sm){flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .pr-rhs--sm{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 12px;scrollbar-width:none}
  .pr-rhs::-webkit-scrollbar{display:none}
  .pr-rh,.pr-rhs-h{flex:none}
  .pr-end-art{max-width:220px}
  .pr-tile-ob,.pr-tile-ob .pr-clay{height:60px}.pr-tile-ob .pr-clay{max-width:78px}
  .pr-bt--big .pr-tile-ob,.pr-bt--big .pr-tile-ob .pr-clay{height:104px}
}
@media (prefers-reduced-motion:reduce){
  .pr-shot{opacity:1;transform:none;transition:none}
  .pr-sx--ask .pr-sx-st,.pr-shot-prop,.pr-shot-star,.pr-hero-ob1,.pr-hero-ob2,.pr-none-art .pr-clay,.pr-end-art .pr-clay,.pr-tile-ob .pr-clay,.pr-res-ob .pr-clay{animation:none}
  .pr-shot-art.is-in .pr-sx--done .pr-sx-st{animation:none}
  .pr-tile,.pr-tile-ob,.pr-try,.pr-rh,.pr-chip,.pr-back,.pr-shot-card,.pr-shot-back,.pr-clear{transition:none}
  .pr-tile:hover,.pr-tile:hover .pr-tile-ob,.pr-try:hover,.pr-rh:hover,a.pr-chip:hover,.pr-shot:hover .pr-shot-card,.pr-shot:hover .pr-shot-back{transform:none}
}