/* proc-page.css — one procedure (prefix pr-): the gold first screen (crumbs, title, what you end up with, when it starts,
   a paper spec of area / rhythm / who decides, the clay picture), who works on it and the rooms it uses (plum), the
   businesses whose road includes it (gold), where it goes next (cream), and the designed "not found". The path: proc-flow.css. */

/* ── the first screen ─────────────────────────────────────────────────────────────────────────────────────────────── */
.pr-phero .k-phero-in{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.pr-phero h1{font-size:clamp(2.3rem,4.3vw,4.1rem);max-width:15em;overflow-wrap:break-word;hyphens:auto}
.pr-out{max-width:36em}
.pr-out-h{display:block;margin-bottom:8px;font:650 .74rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-500)}
.pr-trig{display:flex;align-items:flex-start;gap:10px;max-width:37em;margin-top:14px;font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.pr-trig .pb-i{width:20px;height:20px;margin-top:2px;color:var(--plum-500);stroke-width:2}
.pr-trig b{font-weight:650;color:var(--plum-600)}
.pr-spec{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.pr-spec-c{display:grid;align-content:start;gap:9px;padding:13px 16px 14px;border-radius:22px;background:rgba(255,250,240,.66);box-shadow:inset 0 1px 0 #fff,0 12px 22px -16px rgba(110,50,0,.5),0 2px 5px -3px rgba(110,50,0,.2)}
.pr-spec dt{font:650 .66rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-500)}
.pr-spec dd{margin:0;display:flex}
.pr-spec-area{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:700 .98rem/1 var(--display);color:var(--plum-600)}
.pr-spec-area .pb-ic{width:30px;height:30px}
.pr-spec-area:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.pr-spec .pb-rh{padding-block:6px; padding-inline:9px 12px;font-size:.8rem}
.pr-lanes{display:flex;flex-wrap:wrap;gap:6px}
.pr-lane{display:inline-flex;align-items:center;gap:8px;height:30px;padding-block:0; padding-inline:12px 4px;border-radius:999px;font:700 .8rem/1 var(--display);white-space:nowrap}
.pr-lane b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font:800 .74rem/1 var(--display)}
.pr-lane--alone{color:var(--plum-700);background:var(--k-grain),var(--k-gold-clay);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7),inset 0 -4px 7px rgba(170,100,0,.3),0 5px 9px -5px rgba(130,70,0,.6)}
.pr-lane--alone b{background:rgba(100,8,46,.14)}
.pr-lane--tap{color:var(--plum-600);background:var(--cream-100);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 2px rgba(100,8,46,.2)}
.pr-lane--tap b{color:var(--cream-50);background:var(--plum-600)}
.pr-lane--you{color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.26),inset 0 -4px 7px rgba(25,0,12,.45),0 5px 9px -5px rgba(60,6,30,.6)}
.pr-lane--you b{color:var(--plum-700);background:var(--gold-300)}
.pr-phero .k-phero-acts{margin-top:30px}
/* the picture: the procedure's clay tile, floating, its area's token on the corner, three stars */
.pr-art{position:relative;display:grid;place-items:center;justify-self:center;width:min(100%,430px);aspect-ratio:1;margin:0}
.pr-art-glow{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,228,.95),rgba(255,252,228,0));filter:blur(6px)}
.pr-art-tile{position:relative;width:80%;aspect-ratio:1;border-radius:24%;overflow:hidden;--r:-5deg;transform:rotate(-5deg);background:var(--cream-200);box-shadow:0 44px 60px -30px rgba(90,40,0,.62),0 12px 22px -10px rgba(90,40,0,.3);animation:k-float 7.5s ease-in-out infinite}
.pr-art-tile img{width:100%;height:100%;object-fit:cover}
.pr-art-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 3px 2px rgba(255,255,255,.65),inset 0 -14px 26px rgba(130,70,0,.14),inset 0 0 0 1px rgba(255,255,255,.4)}
/* no picture: the area's clay object on a paper tile */
.pr-art-tile--prop{display:grid;place-items:center;overflow:visible;background:var(--k-paper)}
.pr-art-tile--prop::after{box-shadow:inset 0 3px 2px #fff,inset 0 -14px 26px rgba(160,100,20,.12)}
.pr-art-prop.pr-clay{width:auto;height:58%;max-width:70%;object-fit:contain;filter:drop-shadow(0 26px 22px rgba(70,8,36,.38))}
.pr-art-prop.pb-ic{width:56%;height:56%}
.pr-art-prop.pb-ic .pb-i{width:46%;height:auto;aspect-ratio:1;stroke-width:1.5}
.pr-art-ic.pb-ic{position:absolute;inset-inline-start:6%;bottom:9%;width:21%;height:21%;box-shadow:inset 0 3px 2px rgba(255,255,255,.32),inset 0 -8px 14px rgba(30,0,14,.42),0 0 0 6px rgba(255,248,226,.9),0 18px 24px -12px rgba(70,8,36,.6);animation:k-float 6.4s ease-in-out infinite;animation-delay:-2s}
.pr-art-ic.pb-ic .pb-i{width:46%;height:auto;aspect-ratio:1}
.pr-art-ic.pb-ic::after{display:none}
.pr-art-star{position:absolute;height:auto;filter:drop-shadow(0 10px 10px rgba(120,60,0,.35));animation:k-twinkle 3.6s ease-in-out infinite}
.pr-art-star--1{inset-inline-end:0;top:2%;width:17%}
.pr-art-star--2{inset-inline-start:3%;top:12%;width:8%;animation-delay:-1.3s}
.pr-art-star--3{inset-inline-end:10%;bottom:4%;width:7%;animation-delay:-2.4s}

/* ── who works on it, and the rooms it uses (plum) ────────────────────────────────────────────────────────────────── */
.pr-people{display:grid;gap:clamp(14px,2vw,24px)}
.pr-people>li{display:flex;min-width:0}
.pr-people--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-people--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-person{--ink:#2a0a1c;--ink-2:#5b2a44;--ink-3:#7a4a62;flex:1;display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:var(--r-xl);overflow:hidden;text-decoration:none;color:var(--ink);background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 44px 60px -34px rgba(0,0,0,.6);transition:transform .5s var(--spring)}
a.pr-person:hover{transform:translateY(-6px)}
a.pr-person:focus-visible{outline-offset:4px;border-radius:var(--r-xl)}
.pr-person-pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--cream-200)}
.pr-person-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
a.pr-person:hover .pr-person-pic img{transform:scale(1.04)}
.pr-person-b{position:relative;display:grid;align-content:start;gap:7px;padding:46px 26px 24px}
.pr-person-face.k-ava{--s:76px;position:absolute;inset-inline-start:22px;top:-40px}
.pr-person-n{font:760 1.35rem/1.1 var(--display);letter-spacing:-.02em;color:var(--plum-600)}
.pr-person-p{font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.pr-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:650 .9375rem/1 var(--display);color:var(--plum-500)}
.pr-go .pb-i{width:18px;height:18px;stroke-width:2.2;transition:transform .35s var(--spring)}
a.pr-person:hover .pr-go .pb-i{transform:translateX(4px)}
/* one specialist: a wide card, the picture beside the words */
.pr-people--1 .pr-person{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:none}
.pr-people--1 .pr-person-pic{aspect-ratio:auto;min-height:300px}
.pr-people--1 .pr-person-b{align-content:center;padding:36px clamp(26px,4vw,48px)}
.pr-people--1 .pr-person-face.k-ava{position:static;--s:88px;margin-bottom:10px}
.pr-people--1 .pr-person-n{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.pr-people--1 .pr-person-p{font-size:1.06rem;max-width:30em}
.pr-person--bc .pr-person-pic--bc{display:grid;place-items:center;background:var(--k-grain),var(--k-gold-clay)}
.pr-person--bc .pr-person-pic--bc img{width:min(46%,200px);height:auto;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(70,8,36,.45));animation:k-float 7s ease-in-out infinite}
.pr-rooms-b{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:26px clamp(32px,5vw,80px);align-items:center;margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,236,214,.14)}
.pr-rooms-head .k-h3{margin-top:14px;font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--cream-50)}
.pr-rooms-head p{margin-top:10px;max-width:26em;color:var(--ink-2)}
.pr-rooms{display:flex;flex-wrap:wrap;gap:22px 26px}
.pr-room{display:grid;justify-items:center;gap:14px;width:136px;text-align:center;text-decoration:none;font:650 .94rem/1.2 var(--display);color:var(--cream-100)}
.pr-room img{width:122px;height:auto;border-radius:23%;box-shadow:0 24px 26px -14px rgba(10,0,5,.65),0 6px 10px -4px rgba(10,0,5,.35),inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .5s var(--spring),box-shadow .3s}
.pr-room:nth-child(odd) img{transform:rotate(-3deg)}
.pr-room:nth-child(even) img{transform:rotate(3deg) translateY(4px)}
a.pr-room:hover img{transform:translateY(-10px) rotate(0) scale(1.06);box-shadow:0 34px 34px -16px rgba(10,0,5,.7),0 0 0 3px var(--gold-300)}
a.pr-room:hover span{color:var(--gold-200)}
a.pr-room:focus-visible{outline-offset:6px}

/* ── the businesses whose road includes it (gold) ─────────────────────────────────────────────────────────────────── */
.pb-list.pr-bizs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);width:100%}
.pr-bizs>.pb-li>*{flex:1}
.pr-biz{--ink:#2a0a1c;--ink-2:#5b2a44;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-xl);overflow:hidden;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-biz:hover{transform:translateY(-6px);box-shadow:var(--k-paper-shadow),0 34px 50px -30px rgba(90,40,10,.6)}
.pr-biz:focus-visible{outline-offset:4px;border-radius:var(--r-xl)}
.pr-biz-pic{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--cream-200)}
.pr-biz-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pr-biz:hover .pr-biz-pic img{transform:scale(1.05)}
.pr-biz-b{display:grid;gap:6px;padding:18px 22px 22px}
.pr-biz-b b{font:760 1.15rem/1.15 var(--display);letter-spacing:-.015em;color:var(--plum-600)}
.pr-biz-b span{font-size:.94rem;line-height:1.45;color:var(--ink-2)}
.pr-biz-sec .pb-more{gap:26px}

/* ── where it goes next (cream) ───────────────────────────────────────────────────────────────────────────────────── */
.pr-next-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(30px,4vw,52px)}
.pr-next-head .k-sechead{margin-bottom:0}
.pr-next-sec .k-h2{color:var(--plum-600)}
.pr-next-all{gap:12px}
.pr-next-n{padding:5px 10px;border-radius:999px;font:700 .78rem/1 var(--display);background:rgba(100,8,46,.09)}
.pr-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.pr-next-grid>li{display:flex;min-width:0}
.pr-next-grid>li>.pb-card{flex:1}

/* ── not found: the path breaks, three stars keep shining ─────────────────────────────────────────────────────────── */
.pr-lost .k-crumbs span{overflow-wrap:anywhere}
.pr-lost-art{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:400px;width:100%}
.pr-lost-card{position:relative;display:block;width:72%;aspect-ratio:1/1.05;border-radius:40px;background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 50px 70px -40px rgba(80,30,0,.6);transform:rotate(-6deg)}
.pr-lost-card::before{content:"";position:absolute;inset-inline-start:50%;top:14%;bottom:14%;width:14px;margin-inline-start:-7px;border-radius:999px;background:linear-gradient(90deg,#4a0a28,#8f1754 40%,#a3205f 55%,#5c0828);-webkit-mask:linear-gradient(#000 0 34%,transparent 34% 66%,#000 66%);mask:linear-gradient(#000 0 34%,transparent 34% 66%,#000 66%)}
.pr-lost-st{position:absolute;inset-inline-start:50%;top:10%;width:20%;aspect-ratio:1;margin-inline-start:-10%;border-radius:50%;background:var(--k-gold-clay);box-shadow:var(--k-gold-shadow)}
.pr-lost-st--b{top:auto;bottom:10%}
.pr-lost-gap{position:absolute;inset-inline-start:50%;top:50%;width:26%;aspect-ratio:1;margin-block:-13% 0; margin-inline:-13% 0;border-radius:50%;border:3px dashed rgba(100,8,46,.35)}
.pr-lost-art .pr-clay{position:absolute;animation:k-float 7s ease-in-out infinite}
.pr-lost-mag{inset-inline-end:4%;top:36%;width:34%;--r:-14deg;transform:rotate(-14deg)}
.pr-lost-s1{inset-inline-start:4%;top:8%;width:13%;--r:10deg;animation-delay:-2s}
.pr-lost-s2{inset-inline-start:12%;bottom:6%;width:9%;animation-delay:-4s}

/* ── narrower screens ─────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1020px){.pr-people--3{grid-template-columns:repeat(2,minmax(0,1fr))}.pr-next-grid,.pb-list.pr-bizs{grid-template-columns:repeat(2,minmax(0,1fr))}.pr-rooms-b{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .pr-phero .k-phero-in{grid-template-columns:minmax(0,1fr)}
  .pr-art{order:-1;width:min(64vw,300px);margin-bottom:-6px}
  .pr-lost-art{order:-1;max-width:260px}
  .pr-people--1 .pr-person{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .pr-people--1 .pr-person-pic{aspect-ratio:16/9;min-height:0}
  .pr-people--1 .pr-person-b{padding:46px 24px 24px}
  .pr-people--1 .pr-person-face.k-ava{position:absolute;inset-inline-start:22px;top:-40px;--s:76px;margin:0}
}
@media (max-width:640px){
  .pr-people--2,.pr-people--3,.pr-next-grid,.pb-list.pr-bizs{grid-template-columns:minmax(0,1fr)}
  .pr-spec-c{flex:1 1 auto}
  .pr-spec-c--lanes{flex-basis:100%}
  .pr-phero .k-phero-acts .k-btn{flex:1 1 auto}
  .pr-rooms{gap:18px 14px}
  .pr-room{width:calc((100% - 28px)/3);font-size:.8125rem}
  .pr-room img{width:min(100%,92px)}
  .pr-next-head{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .pr-art-tile,.pr-art-ic.pb-ic,.pr-art-star,.pr-person--bc .pr-person-pic--bc img,.pr-lost-art .pr-clay{animation:none}
  a.pr-person,.pr-person-pic img,.pr-room img,.pr-biz,.pr-biz-pic img{transition:none}
  a.pr-person:hover,a.pr-room:hover img,.pr-biz:hover,.pr-biz:hover .pr-biz-pic img,a.pr-person:hover .pr-person-pic img{transform:none}
}